Σύνδεση με 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 e-Hotel
      • Pegasus e-Courier
      • Pegasus e-Transport
      • Pegasus Gym
    • Pegasus Web app
    • Video Παρουσιάσεις
    • Πρότυπες Μελέτες ή Εφαρμογές
    • Ιστορικό αλλαγών Pegasus Web App
    • WEB App REST API
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 σε Web Server με cPanel
Μελέτη για τη δημιουργία "Facebook Login App"
Ενεργοποίηση και προσαρμογή του service παραλαβής των στοιχείων από το ΑΦΜ στη Διαδικτυακή Εφαρμογή
Hermes module Μαζική Αποστολή e-mail - Βασική Παραμετροποίηση
Hermes Module Μαζική Αποστολή e-mail - Διαδικασία & Αποτελέσματα Αποστολής
Hermes module Μαζική Αποστολή SMS-Παραμετροποίηση και Αποστολή
Μελέτη για τη δημιουργία "Linkedin Login App"
Pegasus e-Commerce και Συγκριτικά Χαρακτηριστικά - Απαραίτητοι Ορισμοί και Λειτουργία
Αλλαγή Κατηγορίας ΦΠΑ - Pegasus Web App - Εφαρμογή από 01/06/2016
Χρονοπρογραμματισμός Ενεργειών/Εργασιών στο Pegasus Web App (scheduler)
Μελέτη για τη δημιουργία "Google+ Login App"
Hermes Module Web Push Notifications - Βασική Παραμετροποίηση και Λειτουργία
Mailing Lists: Απαραίτητες ενέργειες πριν τις 25 Μαΐου (GDPR)
Συγκατάθεση: Ηλεκτρονική Αποδοχή Όρων Χρήσης (GDPR)
Δημιουργία συνδέσμου για την εμφάνιση λίστας προϊόντων χρησιμοποιώντας παραμετρικά πεδία
Προβολή π-Αναφοράς στο WebSite - Pegasus 360
Ενεργοποίηση και Παραμετροποίηση Αποδοχής Όρων Χρήσης μετά από Υπογραφή
Σύνδεση και προβολή δημοσιεύσεων από το Instagram μέσω της εφαρμογής.
Signature Pad (SignoTec) - Επικοινωνία με Courier
Module Μαζικός Μετασχηματισμός Παραστατικών Πελατών
Pegasus Web App Module Προσφορές
Πρώτα βήματα παραμετροποίησης Pegasus Web App ERP Start Up
Pegasus Web App Module Χρώμα - Μέγεθος
Διαχείριση πολλών καταστημάτων από το Pegasus Web App (Module Καταστήματα)
Βασική Παραμετροποίηση και Λειτουργία 2-Factor Authentication (2FA)
Στήσιμο Γέφυρας Λογιστικής (με χρήση παραδείγματος για βιβλία Εσόδων-Εξόδων) για το Pegasus Web App
Pegasus .NET CnA App & Pegasus Web App - Σύνδεση με ΕΑΦΔΣΣ
Διασύνδεση με το Paycenter (e-pos) της Τράπεζας Πειραιώς
Μαζική αλλαγή τιμής πεδίου στο web app
Διασύνδεση με την Γενική Ταχυδρομική και έκδοση Voucher για Παραγγελίες
Διαδικασία εκτέλεσης Backup στο Pegasus Web App
Δημιουργία π-Αναφοράς στο Pegasus Web App
Καταχώρηση Δαπανών(webapp)
Σημειωσεις Είδους Παραστατικού (webapp)
Μεταφορά Pegasus WebApp από PHP 5.6 σε 7.4 για localhost εφαρμογές
Μεταφορά Pegasus WebApp από PHP 5.6 σε 7.4 για WebServer εφαρμογές
Συνολικές αναπαραγγελίες ειδών μέσα από το Pegasus Web App
Pegasus e-Courier: Αυτόματη αποστολή SMS στην αλλαγή κατάστασης voucher
Ορισμός των τρόπων αποστολής εμπορευματων στο Pegasus Web App e-Commerce
Απογραφή Αποθήκης στο Pegasus Web App με το Module Απογραφή Αποθήκης
Αλλαγή Φόρμα αποστολής e-mail και εκτύπωσης παραγγελίας
Βασική παραμετροποίηση Hermes Module πολυγλωσσικό
Web Αpp module Μαζική Εισαγωγή Δεδομένων
Pegasus Web App e-Commerce, Hermes Module Προϊόντα: Προϊόντα Οδηγού
Aξιολόγηση ΠεριεχομένουΠροσθήκη Αξιολόγησης
Σχόλια Χρηστών (0)Προσθήκη Σχολιασμού
  • Μεσογείων 274, 3ος όροφος, 15562, Eλλάδα
  • +30 210-7489589
  • Επικοινωνία
  • Επικοινωνία
  • Downloads
  • Sitemap
  • Όροι Χρήσης
Εξελίξεις Λογισμικών
Pegasus ERP Updates: 2720
Pegasus Web App Updates: 9903

Pegasus e-Hotel Web App: Eπικοινωνία με channel manager WebHotelier
Αυγ01,2022
Pegasus Gym: RV / RV Ομαδικά
Ιουν21,2022
Pegasus Gym: Παραμετροποίηση λειτουργίας με ή χωρίς συνδρομή
Ιουν21,2022
Pegasus Gym: Καταχώρηση Αιθουσών και Γυμναστών
Ιουν21,2022
Pegasus Gym: Μαζικές Δημιουργίες και Διαγραφές Ωραριών σε Αίθουσες και Γυμναστές
Ιουν21,2022
Δείτε όλες τις Πρότυπες Μελέτες >>
ΤΕΣΑΕ ΑΤΕ
© Copyright TESAE SA
  Powered by Pegasus Technology