Τι είναι τα Web Standards

“Τα Web standards σκοπεύουν να είναι μια κοινή βάση... μία δομή για ολόκληρο το web ώστε οι browsers κι άλλο λογισμικό να μπορούν να κατλαβαίνουν το ίδιο λεξιλόγιο”.

Eric Meyer

Τα Web Standards

Η W3C (World Wide Web Consortium) κι άλλες οργανώσεις έχουν αναπτύξει τεχνολογίες για τη δημιουργία και τη μετάφραση υλικού για το web. Τα ισχύοντα standards είναι:

Γλώσσες δόμησης υλικού

Γλώσσες παρουσίασης υλικού

Μοντέλα

Scripting Γλώσσες

ECMAScript 262 (the standard version of JavaScript)

Άλλες γλώσσες παρουσίασης υλικού (Markup)

Με τι έχουν να κάνουν τα Web Standards;

Τα Web Standards σχεδιάστηκαν ώστε να:

προσφέρουν τα μεγαλύτερα πλεονεκτήματα σε όσο το δυνατό περισσότερους χρήστες
προσφέρουν τη μεγαλύτερη δυνατή βιοσιμότητα αρχείων για το web
απλοποιούν τον κώδικα και να μειώνουν το κόστος παραγωγής
προσφέρουν δικτυακούς τόπους προσβάσιμους σε περισσότερους ανθρώπους και σε περισσότερες συσκευές σχετιζόμενες με το Internet
συνεχίζουν να δουλεύουν σωστά καθώς οι browsers εξελίσσονται και νέες συσκευές δημιουργούνται για τις ανάγκες της αγοράς

Για τους web designers και τους developers, τα Web Standards σχετίζονται με τη χρήση standards (για τη δόμηση, την παρουσίαση κλπ υλικού) και με τις καλύτερες πρακτικές ώστε να ωφεληθούν οι χρήστες, οι πελάτες και οι ίδιοι.

Μια αλλαγή στον τρόπο σκέψης

Παλιού τύπου website

Η δημιουργία παλιού τύπου websites είναι μια επέκταση της δημιουργίας υλικού για έντυπα που εκτυπώνονται, μια δημιουργία που έχει να κάνει με τους 5-6 βασικότερους browsers. Τα κοινά χαρακτηριστικά περιλαμβάνουν:

Ανάπτυξη layout με πίνακες
Παρουσίαση κι εμφάνιση στον ίδιο χώρο με το υλικό (π.χ. font tags)
Κώδικας μη έγκυρος
Κώδικας μη προσβάσιμος
Κώδικας δομημένος με λάθος τρόπο από πλευρά λογικής

“Web Standards” website

Τα Web Standards αντιλαμβάνονται το web ως ένα γενικευμένο εργαλείο επικοινωνίας, το οποίο μπορεί να είναι προσβάσιμο σε μεγάλες ομάδες ανθρώπων και συσκευών. Τα κοινά χαρακτηριστικά περιλαμβάνουν:

Λογική δόμηση του κώδικα

Αυτό σημαίνει χρήση html στοιχείων κατάλληλων για την κάθε περίπτωση. Κάποια απλά παραδείγματα:

για τις επικεφαλίδες χρήση heading tags ξεκινώντας με H1
για παραγράφους χρήση του p tag
για λίστες χρήση του li tag

Τι είναι ο έγκυρος κώδικας;

Το Validation είναι μια διαδικασία ελέγχου ενός αρχείου με βάση τα standards, όπως αυτά καθορίζονται από την W3C. Ένα αρχείο που έχει ελεγθεί και περάσει τον έλεγχο θεωρείται έγκυρο.

Γιατί να χρησιμοποιεί κάποιος έγκυρο κώδικά;

Ο έγκυρος κώδικας θα “διαβαστεί” γρηγορότερα από το μη έγκυρο
Ο έγκυρος κώδικας θα “διαβαστεί” πιο σωστά από το μη έγκυρο
Οι browsers γίνονται με το χρόνο συμβατοί με τα standards κι αυτό επιβάλλει και το γράψιμο έγκυρου κώδικα ως αποτέλεσμα

Πως να ελέγξετε ότι ο κώδικάς σας είναι έγκυρος

W3C Markup Validation Service
W3C CSS Validation Service
WDG HTML Validator
Stylesheets.com CSS Validator
Πολλά προγράμματα ενσωματώνουν εργαλεία έλεγχου του κώδικα πια

Πώς γράφει κάποιος έγκυρο κώδικα;

Ο κώδικας ξεκινάει με το σωστό doctype
Ο developer γνωρίζει τα διαφορετικά είδη doctype
Ο developer χρησιμοποεί τη σωστή κωδικοποίηση
Όλα τα HTML tags κλείνουν
Χρήση alt για τις εικόνες
Αποφυγή HTML hacks
Συχνή χρήση των HTML validators
Διόρθωση λαθών πριν βγει ένας τόπος στον αέρα
Ο έλεγχος σφαλμάτων γίνεται μέρος της δουλειάς του developer

Γιατί να χρησιμοποεί κάποιος προσβάσιμο κώδικα;

Γιατί επιτρέπει πρόσβαση στο δικτυακό του τόπο από περισσότερους ανθρώπους (π.χ. με προβλήματα όρασης)
Γιατί επιτρέπει πρόσβαση στο δικτυακό του τόπο από περισσότερες συσκευές (π.χ. screen readers, text browsers, search engines)
Γιατί είναι μια βασική προϋπόθεση για τόπους που κατασκευάζονται από το κράτος

Πώς γράφει κάποιος προσβάσιμο κώδικα;

Παρέχει περιγραφή σε κείμενο για αντικείμενα που δεν είναι κείμενο
Χρησιμοποεί προβάσιμους πίνακες κειμένου
Χρησιμοποεί προσβάσιμες φόρμες (label for, id, fieldset, legend)
Χρησιμοποεί κώδικα αντί εικόνων για να μεταφέρει την πληροφορία
Παρέχει επιλογές αποφυγής των μενού
Παρέχει πλήκτρα πρόσβασης
Χρησιμοποεί style sheets με τρόπο ώστε να ελέγχει το πως εμφανίζεται μια σελίδα
Επιτρέπει το διάβασμα μιας σελίδας ακόμα και χωρίς style sheets
Παρέχει metadata για να πληροφορήσει τους χρήστες του

Γιατί να χρησιμοποιήσει κάποιος CSS για να διαχωρίσει τα περιεχόμενα από τα στοιχεία παρουσίασης ενός τόπου;

Οι web developers στοχεύουν στο να απομακρύνουν όλα εκείνα τα κομμάτια κώδικα που καθορίζουν πως θα εμφανίζεται με σελίδα από το περιεχόμενο αυτής αφήνοντας τον HTML κώδικα όσο πιο “καθαρό” γίνεται. Αυτό προσφέρει:

Σελίδες προσβάσιμες σε περισσότερες συσκευές
Ευκολότερη αλλαγή του τόπου στο μέλλον, καθώς η εμφάνιση της σελίδας καθορίζεται από ένα μόνο αρχείο
Μικρότερα αρχεία/γρηγορότερο “κατέβασμα” των σελίδων - λιγότερος κώδικας σε μια σελίδα
Λιγότερο κώδικα σε μια σελίδα - ευκολότερο γράψιμο νέου κώδικα
Οι χρήστες μπορούν να χρησιμοποιήσουν διαφορετικά στυλ ανάλογα με τις ανάγκες τους
Μεγαλύτερο και καλύτερο έλεγχο του κώδικα

Εμφάνιση και περιεχόμενο σε όλες τις σελίδες

presentation an all HTML pages

Διαχωρισμός εμφάνισης από το περιεχόμενο μιας σελίδας

Presentation in separater CSS file

Διαφορετικά CSS αρχεία για διαφορετικές συσκευές

Different operation in different means

Ένα site βασισμένο σε CSS αρχεία στην πράξη

Ένα από τα πιο σημαντικά χατακτηριστικά αυτής της λογικής είναι ότι το περιεχόμενο έχει γραφεί στην αρχή, αλλά το πως παρουσιάζεται μπορεί να αλλάξει, χωρίς να πειραχθεί καθόλου ο html κώδικας.

Πώς οι ΕΠΙΣΚΕΠΤΕΣ σας ωφελούνται από τα Web Standards;

Τα αρχεία “κατεβαίνουν” γρηγορότερα (λιγότερος κώδικας, καθόλου πίνακες, έγκυρος κώδικας)
Το περιεχόμενο είναι προσβάσιμο από περισσότερους χρήστες (κανονικοί χρήστες, τυφλοί χρήστες, χρήστες με προβλήματα όρασης γενικώς, χρήστες με δυσλεξία, χρήστες με κινητικά προβλήματα κλπ)
Το περιεχόμενο είναι προσβάσιμο σε περισσότερες συσκευές (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges κλπ)
Οι χρήστες έχουν τη δυνατότητα να προσαρμόσουν την εμφάνιση του τόπου στις ανάγκες τους (style switchers)
Υπάρχει έκδοση του site προς εκτύπωση

Πώς οι ΠΕΛΑΤΕΣ σας ωφελούνται από τα Web Standards;

Ευκολότερος κώδικας στην ανανέωσή του (λιγότερος κώδικας)
Μικρότερα έξοδα φιλογενίας (hosting) (λιγότερος κώδικας)
Καλύτερη σειρά στις μηχανές αναζήτησης
Το περιεχόμενο μπορεί να παρουσιαστεί διαφορετικά χωρίς να αλλαχθεί ο κώδικας στα HTML αρχεία
Οι χρήστες μπορούν να προσαρμόσουν την εμφάνιση
Οι χρήστες μπορούν να εκτυπώσουν γρήγορα και φθηνά περιεχόμενα του τόπου
Προσβασιμότητα (απαραίτητη για πελάτες που σχετίζονται με το κράτος)

Πώς ΕΣΕΙΣ ωφελείστε από τα Web Standards;

Ευκολότερος και λιγότερος κώδικας
Κώδικας που εξαρτάται λιγότερο από τις συσκευές ανάγνωσής του
Ανταγωνιστικότητα, καθώς ο κόσμος του web κινείται προς τη γενικότερη χρήση Web Standards.

Ποια είναι τα μειονεκτήματα

Δυσκολία εκμάθησης
Προβλήματα με τις διαφορετικές εκδόσεις των browser
Κάποια layouts επιτυγχάνονται πολύ ευκολότερα με τη χρήση πινάκων αντί για CSS

Πώς κάποιος επιτυγχάνει να δουλέψει με τα Web Standards;

Τα Web Standards δεν είναι ένα θέμα “άσπρο - μαύρο”. Όλοι οι developers θα πρέπει όμως σταδιακά να κινηθούν προς αυτή την κατεύθυνση.

Η μετακίνηση παίρνει χρόνο και χρειάζεται αρκετή προσπάθεια. Αντί να μεταπηδήσετε απευθείας στη νέα λογική, προσπαθήστε να θέσετε επιτεύξιμους στόχους. Μερικά παραδείγματα:

Βασικές αλλαγές

Προσθέστε ένα σωστό doctype σε όλες τις σελίδες
Προσθέστε εναλλακτικό κείμενο σε όλες τις εικόνες
Προσθέστε κατανοητούς τίτλους στις σελίδες

Πιο ανεπτυγμένες αλλαγές

Έγκυρος κώδικας
Λογικά έγκυρος κώδικας
Αντικατάσταση των font tags και του inline χρώματος με CSS
προσβάσιμες φόρμες, πίνακες και μενού

Δυσκολότερες αλλαγές

Καθορισμός της θέσης των στοιχείων της σελίδας με CSS (padding, margins etc) ενώ το layout καθορίζεται από πίνακες
Πλήρης καθορισμός της θέσης των στοιχείων της σελίδας με CSS - χωρίς καθόλου πίνακες

Σύνοψη

Τα Web Standards παρέχουν:

γρηγορότερο “κατέβασμα” των σελίδων
κώδικα προσβάσιμο σε περισσότερους ανθρώπους και συσκευές ανάγνωσης
παραμετροποίηση μιας σελίδας από τους χρήστες
ευκολότερη και γρηγορότερη υλοποίηση
λιγότερα έξοδα φιλοξενίας (hosting)
καλύτερη θέση στην εύρεση από τις μηχανές αναζήτησης
ανταγωνιστίκότητα

Monday 17.07.2006, ¶ Web standards, 0 Σχόλια