Σύνδεση με Facebook Σύνδεση με Google+ Σύνδεση με Linkedin

ή με

ΤΕΣΑΕ ΑΤΕ
  • H Επιχείρηση
    • το Profil μας
    • Ιστορικό σημείωμα
    • ΤιμοΛογική
    • Τεχνολογία
    • Pegasus Phaethon
    • Tα Νέα της ΤΕΣΑΕ
      • Τα νέα μας
      • Ηλεκτρονικά Βιβλία ΑΑΔΕ myDATA
      • Ισολογισμοί
  • Oι Συνεργάτες
  • Tοπικά Λογισμικά
      • Λογισμικά (Pegasus ERP)
        • Εμπορικές Επιχειρήσεις
        • Πρατήρια Υγρών Καυσίμων
        • Γυμναστήρια , Αθλητικά Κέντρα
        • Ξενοδοχειακές Μονάδες
        • Χώροι Εστίασης (Εστιατόρια Καφετέριες , Bar , Delivery)
        • Στεγνοκαθαριστήρια, Ταπητοκαθαριστήρια
        • Συνεργεία, Φανοποιεία, Ανταλλακτικά
        • Ελαιοτριβεία
        • Parking, Λιπαντήρια Αυτοκινήτων
        • Μεταφορικές Εταιρίες
        • Καταστήματα Οπτικών
        • Επιχειρήσεις Καθαρισμού Κοινοχρήστων
        • Courier , Ταχυμεταφορες
        • Βιβλιοπωλεία - Χαρτικά
        • Γεωργικές επιχειρήσεις
        • Κρεοπωλεία
      • Pegasus ERP
      • Video Παρουσιάσεις
      • Πρότυπες Μελέτες ή Εφαρμογές
      • Ιστορικό Αλλαγών Pegasus ERP
      • Module PDA Client
      • Module Γέφυρες Λογιστικής
      • Module Phone
    • Διαδικτυακά Λογισμικά
      • Λογισμικά (Pegasus Web App)
        • Pegasus Web App ERP
        • Pegasus Web App Freelancer
        • Pegasus Web App CRM
        • Pegasus e-Commerce
        • Pegasus e-Hotel
        • Pegasus e-Service
        • Pegasus e-Courier
        • Pegasus e-Champion
        • Pegasus e-Transport
        • Pegasus e-Delivery
      • Pegasus Web app
      • Video Παρουσιάσεις
      • Πρότυπες Μελέτες ή Εφαρμογές
      • Ιστορικό αλλαγών Pegasus Web App
      • Hermes Templates
      • WEB App REST API
    • Διαδικτυακές Φιλοξενίες
      • Διαδικτυακών Ονομάτων
      • Διαδικτυακών Χώρων
        • Τυποποιημένα Πακέτα Φιλοξενίας
        • ISP
    Sites φιλικά σε ΑμεΑ - Πρότυπο WCAG 2.0 (Level AA)

    Sites φιλικά σε ΑμεΑ και το Πρότυπο WCAG 2.0 (Level AA)

        Στη παρακάτω μελέτη θα εξετάσουμε το πώς μπορούμε να τροποποιήσουμε το Pegasus Web Application που έχουμε, ώστε να είναι σύμφωνο με το πρότυπο σχεδιασμού ιστοσελίδων WCAG 2.0 (Level AA). Μπορείτε να διαβάσετε γι αυτό το πρότυπο στη σελίδα http://www.w3.org/TR/WCAG20/ καθώς και να το κατεβάσετε σε μορφή pdf από http://www.w3.org/WAI/WCAG20/versions/guidelines/wcag20-guidelines-20081211-a4.pdf. Σύμφωνα με το παραπάνω πρότυπο προχωρήσαμε στην τροποποίηση των μεθόδων που χρησιμοποιούν όλα τα Pegasus Web Application.

    Ξεκινώντας με μια νέα εγκατάσταση.

        Ξεκινώντας την κατασκευή ενός site από το μηδέν στηριγμένο σε μια νέα εγκατάσταση δεν θα χρειαστεί να κάνουμε πολλές αλλαγές. Θα πρέπει να προσέξουμε στο template να εισάγουμε στο html tag το παρακάτω:

    xmlns="http://www.w3.org/1999/xhtml" xml:lang="gre" lang="gre" 

        Για να το πετύχουμε αυτό διατηρώντας την πολυγλωσσικότητα του site έχουμε προσθέσει php κώδικα όπως θα δείτε στις πρώτες γραμμές του ανανεωμένου βασικού template «eshop.php». Στην συνέχεια θα πρέπει να ελέγχουμε την σωστή αντίθεση των χρωμάτων που θα εισάγουμε στο css. Ένα χρήσιμο εργαλείο για να ελέγχουμε τις αντιθέσεις είναι το: http://webaim.org/resources/contrastchecker/ στο οποίο επιλέγουμε το χρώμα του φόντου και το χρώμα της γραμματοσειράς ή του αντικειμένου που θα βρίσκεται πάνω στο φόντο. Όταν τελειώσουμε με το template και το css μπορούμε να το περάσουμε από δύο ακόμα ελέγχους. Ένα είναι το http://jigsaw.w3.org/css-validator με το οποίο μπορούμε να ανεβάσουμε ή να του «δείξουμε» την διαδρομή του css μας και να μας πει αν έχουμε λάθη. Ο τελευταίος έλεγχος, και πιο σημαντικός, είναι να εισάγουμε όσες περισσότερες σελίδες του site μας στο http://achecker.ca/checker/index.php το οποίο θα μας πει για τα σφάλματα που έχουμε σε σχέση με το πρότυπο  (WCAG 2.0 (Level AA)) και πως θα τα διορθώσουμε.

    Τροποποιώντας ένα υπάρχον site.

        Για να πετύχετε σωστό αποτέλεσμα με ένα παλαιότερο site θα πρέπει πρώτα απ όλα να κάνετε όλες τις ενημερώσεις. Στην συνέχεια ελέγξτε αν έχετε αρχεία sme τα οποία παράγουν περιεχόμενο το οποίο δεν είναι εναρμονισμένο με το πρότυπο WCAG 2.0 (Level AA). Αν έχετε τέτοια αρχεία θα πρέπει να κάνετε τους απαραίτητους ελέγχους σύμφωνα με όσα έχουμε αναφέρει παρακάτω για τον σωστό τρόπο απεικόνισης των inputs και των εικόνων. Στην συνέχεια θα πρέπει να κάνετε τις απαραίτητες αλλαγές στα λεκτικά τα οποία είναι εικόνες, προσθέτοντας την ιδιότητα alt=”xxx” όπου xxx η περιγραφή που θέλουμε να δώσουμε στην εικόνα. Από την αρχική εγκατάσταση έχουν περαστεί λεκτικά με εικόνες, τα οποία μπορείτε να τα αναζητήσετε με τα παρακάτω λεκτικά (σε παρένθεση το module):

    dicp800 (kernel), dicp801 (kernel), dicmsg50 (kernel), dicbacktoshop (orders), dicrefreshbasket (orders), dic_orders_agorab (orders), dic_orders_baskmanage (orders), dic_orders_emptybasket (orders), dic_order_checkout (orders), dic_products_compare (products), dicproduct_bansearch (products), diccourier_edit_user (courier), diccourier_edit_voucher (courier), diccourier_newrecord_user (courier), diccourier_newrecord_voucher (courier), diccourier_print_list_voucher (courier), diccourier_print_voucher (courier), dic_courier_exporticon (courier), dic_courier_export_tcsv (courier), dic_courier_export_txl (courier), dic_domains_add (domains), dic_domains_addns (domains), dic_hotel_zoom (hotel), dic_hotel_zoom (HOTEL), dic_realest_zoom (realest)

        Εντοπίστε ποια από τα παραπάνω έχετε ως εικόνες (υπάρχει περίπτωση να τα έχετε ήδη αλλάξει σε κείμενο) και εισάγετε την ιδιότητα alt με την κατάλληλη περιγραφή. Στα λεκτικά dicp800 (kernel) και dicp801 (kernel) πρέπει να βγει το tag , ενώ στο dicmsg50 (kernel) το tag να γίνει .

     Σωστός τρόπος απεικόνισης των inputs και εικόνων.

        Ο σωστός τρόπος για να εισάγουμε ένα input τύπου text, select box και check box είναι να εισάγουμε πριν από αυτό ένα label με την ιδιότητα for=”xxx” όπου xxx το id του element στο οποίο αναφέρετε το label.

        O σωστός τρόπος για την εμφάνιση μια εικόνας είναι να έχει πάντα την ιδιότητα alt=”…” η οποία είναι μια περιγραφή της εικόνας. Μέσα από το διαχειριστικό όποτε εισάγουμε κάποια εικόνα συμπληρώνουμε πάντα το Title και το description που μας ζητείται.

        Κατά την εισαγωγή δεδομένων (Κείμενα σε banner, ομάδες επιλογών, περιγραφές προϊόντων, κτλ) θα πρέπει να προσέξουμε στις εικόνες που εισάγουμε να βάζουμε πάντα τίτλο και περιγραφή στα πεδία που φαίνονται παρακάτω:

    Παράθυρο εισαγωγής εικόνων

        Το Image Description που βλέπουμε στο πάνω σχήμα είναι το πιο σημαντικό διότι αυτό γίνεται αυτομάτως το περιεχόμενο της ιδιότητας alt.

     Banner για αλλαγή css.

        Αν θέλουμε να έχουμε επιλογή  για το αν θα έχουμε εμφάνιση φιλική σε ΑμεΑ ή όχι, ανεξάρτητα από το αν φτιάξαμε ένα νέο template ή έχουμε ένα παλαιότερο, τότε θα πρέπει να δημιουργήσουμε εκ νέου τα css αρχεία στο φάκελο που αναφέρουμε παρακάτω:

        Κάνοντας τροποποίηση μόνο στο template (ή από την διαχείριση) εισάγουμε ένα banner το οποίο θα περιέχει δύο links. Ένα για κανονική προβολή  και ένα για προβολή φιλική σε ΑμεΑ. Για να το πετύχουμε αυτό εισάγουμε σα παρακάτω links: /pegasus/h001/index.php?pcode=H001_INDEX&amea=yes για εμφάνιση φιλική σε ΑμεΑ και /pegasus/h001/index.php?pcode=H001_INDEX&amea=no για το κανονικό css του site. Στην συνέχεια θα πρέπει στην κορυφή του template να εισάγουμε το παρακάτω κώδικα σε php:

    if ($_REQUEST['amea']=='yes' and empty($_SESSION['amea_ok'])){ 
        $_SESSION['amea_ok']=1; 
        $_SESSION['css_old'] = $_SESSION['css']; 
        $_SESSION['css_path_old'] = $_SESSION['css_path']; 
        $new_path = substr($_SESSION['css_path'], 0 , -1).'_amea/'; 
        $_SESSION['css'] = str_replace($_SESSION['css_path'], $new_path, $_SESSION['css']); 
        $modules_css = str_replace($_SESSION['css_path'], $new_path, $modules_css); 
        $_SESSION['css_path'] = $new_path; 
    }elseif($_SESSION['amea_ok']==1 and $_REQUEST['amea']=='no'){ 
        unset($_SESSION['amea_ok']); 
        $modules_css = str_replace($_SESSION['css_path'], $_SESSION['css_path_old'], $modules_css); 
        $_SESSION['css'] = $_SESSION['css_old']; 
        $_SESSION['css_path'] = $_SESSION['css_path_old']; 
    }
    

        Αυτό λειτουργεί ως εξής: με το που εντοπιστεί αυτό το request αλλάζουν τα sessions των css path και ενεργοποιούνται session για το ότι είμαστε σε λειτουργία αντιθέσεων φιλικών για ΑμεΑ καθώς και sessions με τα παλιά css paths του βασικού css και των modules. Τα νέα path για τα css αρχεία βλέπουν σε φάκελο της μορφής /css/xxx_amea/ όπου xxx το όνομα του φακέλου των βασικών css αρχείων. Προσοχή για να έχουμε σωστή αλλαγή της εμφάνισης θα πρέπει να υπάρχουν αρχεία με ίδια ονόματα με αυτά που υπάρχουν και στο βασικό css φάκελο έστω και αν είναι κενά, όπως και τους φακέλους με τις εικόνες (cssimgs και images) σε περίπτωση που χρειαστούμε κάποιες εικόνες. Πχ: έστω ότι σε ένα template έχουμε τον παρακάτω φάκελο με τα αρχεία css: /css/template_039/ και μέσα περιέχει τα default.css, products.css, orders.css και contactus.css. Για να φτιάξουμε τον νέο φάκελο που θα περιέχει το css φιλικό προς ΑμεΑ θα πρέπει να δημιουργήσουμε έναν νέο φάκελο μέσα στον /css/ ο οποίος θα ονομάζετε template_039_amea (άρα το path θα γίνει: /css/template_039_amea/) και θα περιέχει πάλι αρχεία με ονόματα : default.css, products.css, orders.css και contactus.css.

       Επίσης μπορούμε να τροποποιήσουμε και το αν εμφανίζεται η όχι ένα banner βάση του σε ποια κατάσταση βρισκόμαστε. Πχ: τα slideshows δεν είναι φιλικά για τους browser των ΑμεΑ. Αν θέλουμε να απενεργοποιήσουμε ένα οποιοδήποτε banner όταν είμαστε στην προβολή φιλική για ΑμεΑ, αρκεί να πάμε στην καρτέλα «Μεταβλητές Παραμετροποίησης» του εκάστοτε banner και να γράψουμε if($_SESSION['amea_ok']==1){ $title=’’;} Με αυτό τον τρόπο «σβήνουμε» προσωρινά τον τίτλο του banner και δεν εμφανίζεται στο site. Αν τώρα θέλουμε να κάνουμε το ανάποδο, να εμφανίζουμε ένα banner μόνο σε περίπτωση που έχουμε προβολή φιλική σε ΑμεΑ, τότε αρκεί να εισάγουμε καρτέλα «Μεταβλητές Παραμετροποίησης»: if(empty($_SESSION['amea_ok'])){ $title=’’;}

    Banner αλλαγής γραμματοσειράς.

        Το banner αλλαγής γραμματοσειράς είναι ένα banner που εντοπίζει το μέγεθος της γραμματοσειράς στο body και την αλλάζει. Για να πετύχουμε αλλαγή γραμματοσειράς σε όλο το site θα πρέπει το μέγεθος της γραμματοσειράς για κάθε css κανόνα να γίνει σχετικό με την γραμματοσειρά του body. Αυτό μπορούμε να το πετύχουμε αλλάζοντας τις ιδιότητες «font-size» εισάγοντας αντί για px, ποσοστό (font-size: 120%). Αυτό το ποσοστό είναι σχετικό με το μέγεθος της γραμματοσειράς που κληρονομεί. Πχ: Αν το body έχει μέγεθος γραμματοσειράς 12px και το .maindiv (που είναι μέσα στο body) έχει μέγεθος 120% αυτό μεταφράζεται σε 14,4px. Αν τώρα μέσα στο maindiv υπάρχει ένα div2 με μέγεθος 80% τότε θα πάρει το 80% του 14,4 άρα θα πάει στα 11,52 κτλ. Με αυτό τον τρόπο επιτυγχάνουμε την αλλαγή της γραμματοσειράς στο body, με μέθοδο javascript, να αλλάζουμε το μέγεθος σε όλο το site.

    Ημερομηνία  04/02/2014
    Σχετικά Aρθρα
    Δημιουργία συνδέσμου για την εμφάνιση λίστας προϊόντων χρησιμοποιώντας παραμετρικά πεδία
    Αλλαγή Κατηγορίας ΦΠΑ - Pegasus Web App - Εφαρμογή από 01/06/2016
    Pegasus Web App Module Χρώμα - Μέγεθος
    Ενεργοποίηση και προσαρμογή του service παραλαβής των στοιχείων από το ΑΦΜ στη Διαδικτυακή Εφαρμογή
    Mailing Lists: Απαραίτητες ενέργειες πριν τις 25 Μαΐου (GDPR)
    Δημιουργία π-Αναφοράς στο Pegasus Web App
    Pegasus Web App Module Προσφορές
    Hermes module Μαζική Αποστολή SMS-Παραμετροποίηση και Αποστολή
    Σύνδεση και προβολή δημοσιεύσεων από το Instagram μέσω της εφαρμογής.
    Μελέτη για τη δημιουργία "Linkedin Login App"
    Hermes module Μαζική Αποστολή e-mail - Βασική Παραμετροποίηση
    Προβολή π-Αναφοράς στο WebSite - Pegasus 360
    Χρονοπρογραμματισμός Ενεργειών στο Pegasus Web App
    Συγκατάθεση: Ηλεκτρονική Αποδοχή Όρων Χρήσης (GDPR)
    Pegasus e-Commerce και Συγκριτικά Χαρακτηριστικά - Απαραίτητοι Ορισμοί και Λειτουργία
    Πρώτα βήματα παραμετροποίησης Pegasus Web App ERP Start Up
    Hermes Module Web Push Notifications - Βασική Παραμετροποίηση και Λειτουργία
    Διασύνδεση με το Paycenter (e-pos) της Τράπεζας Πειραιώς
    Signature Pad (SignoTec) - Επικοινωνία με Courier
    Διαδικασία εγκατάστασης Pegasus Web App σε Web Server με cPanel
    Μελέτη για τη δημιουργία "Google+ Login App"
    Hermes Module Μαζική Αποστολή e-mail - Διαδικασία & Αποτελέσματα Αποστολής
    Ενεργοποίηση και Παραμετροποίηση Αποδοχής Όρων Χρήσης μετά από Υπογραφή
    Μελέτη για τη δημιουργία "Facebook Login App"
    Pegasus e-Courier: Αυτόματη αποστολή SMS στην αλλαγή κατάστασης voucher
    Ορισμός των τρόπων αποστολής εμπορευματων στο Pegasus Web App e-Commerce
    Βασική παραμετροποίηση Hermes Module πολυγλωσσικό
    Αλλαγή Φόρμα αποστολής e-mail και εκτύπωσης παραγγελίας
    Web app module Μαζική Εισαγωγή Δεδομένων
    Pegasus Web App e-Commerce, Hermes Module Προϊόντα: Προϊόντα Οδηγού
    Aξιολόγηση ΠεριεχομένουΠροσθήκη Αξιολόγησης
    Σχόλια Χρηστών (0)Προσθήκη Σχολιασμού
    • Μεσογείων 274, 3ος όροφος, 15562, Eλλάδα
    • +30 210-7489589
    • Επικοινωνία
    • Επικοινωνία
    • Πείτε μας το Project σας
    • Ευκαιρίες Καριέρας
    • Downloads
    • Sitemap
    • Όροι Χρήσης
    Εξελίξεις Λογισμικών
    Pegasus ERP Updates: 2490
    Pegasus Web App Updates: 7097

    Παραμετροποίηση του module myDATA μέσα από το Pegasus Web App ERP
    Νοε02,2020
    Αποστολή/Παραλαβή παραστατικών μέσω του module myDATA
    Οκτ08,2020
    Εγκατάσταση & Βασική Παραμετροποίηση του module myDATA
    Σεπτ29,2020
    Εγχειρίδιο Χρήσης myDATA & Εγγραφή στο myDATA REST API
    Σεπτ29,2020
    Πρώτα βήματα παραμετροποίησης Pegasus Web App ERP Start Up
    Σεπτ17,2020
    Δείτε όλες τις Πρότυπες Μελέτες >>
    ΤΕΣΑΕ ΑΤΕ
    On-line Users
    Μέλη: 0
    Επισκέπτες: 17
    © Copyright TESAE SA
      Powered by Pegasus Technology