HTML 5 και XHTML 2: ο νέος πόλεμος στο web

Έτσι όπως εξελίσσεται η κατάσταση, ο νέος πόλεμος στο web δεν θα γίνει ανάμεσα σε browsers αλλά σε τεχνολογίες (υπάρχει και η πιθανότητα να συνεχιστεί και στους browsers, αλλά το πρόβλημα θα προκύψει από τις τεχνολογίες που θα αποφασίσουν να υποστηρίξουν)! Αυτήν την στιγμή λοιπόν, οι αντικαταστάτες της κλασικής μας (X)HTML markup είναι δύο, και μάλιστα με αρκετές διαφορές τόσο στον κώδικα (elements, attributes, κτλ.) όσο και στην φιλοσοφία τους. Φυσικά κάνω λόγο για την HTML 5 και την XHTML 2 οι οποίες βρίσκονται αυτήν την στιγμή σε κατάσταση working drafts, πράγμα που σημαίνει ότι θα καθυστερήσουν αρκετά να ολοκληρωθούν και ακόμα πιο πολύ να τις υποστηρίξουν οι διάφοροι browsers, αλλά όπως και να έχει η ερώτηση είναι εξής : Πως προέκυψαν δύο web standards για την ίδια δουλεία?!?!

Καλύτερα να τα πάρουμε τα πράγματα από την αρχή. Στην αρχή λοιπόν τα πράγματα ήταν πολύ απλά με την HTML 1 να είναι η μοναδική markup στον internet, απόγονος της πολύ παλιάς αλλά και δοκιμασμένης SGML. Επειδή σιγά-σιγά το internet άρχισε να γίνεται πιο διάσημο και mainstream λοιπόν, κάποιοι, κατασκευαστές browser κυρίως, άρχισαν να προσθέτουν επιπλέον presentational (παρουσιαστικά) tags και ιδιότητες στην λιτή HTML και να χαλάνε την δομή της (structure) με αυτά, όπως font tags, nested tables, και πολλά άλλα, ενώ η κατάσταση είχε ξεφύγει τελείως από το W3C που δρούσε σαν απλός παρατηρητής. Μετά λοιπόν από τις HTML version 2 και 3, και τον πόλεμο τον browsers που υπήρχε μέχρι και εκείνη την στιγμή, κάποιοι developers όπως ο Jeffrey Zeldman, ο Eric Meyer, και πολλοί άλλοι, αποφάσισαν να πείσουν όλους τους υπόλοιπους, developers και κατασκευαστές browser να χρησιμοποιούν τα επίσημα standards του W3C για την δημιουργία web sites! Είναι η περίοδος που η HTML 4.01 είναι η νεότερη έκδοση της markup για το internet, ενώ έχει ήδη αρχίσει να χρησιμοποιείται από τους πιο σκληροπυρηνικούς και ψαγμένους η νέα XHTML όπου είναι στην ουσία η κλασική HTML 4 αναδιατυπωμένη σαν XML (δεν ήξερα πως αλλιώς να μεταφράσω το reformulation!). Η μεγάλη διαφορά της XHTML με την HTML είναι πως προσπαθεί να συμμαζέψει το περιεχόμενο (content) σε μια ακόμα καθαρότερη δομή (structure), άλλοτε με πιο αυστηρούς κανόνες και άλλοτε όχι – ανάλογα με το doctype – και να αφήσει το παρουσιαστικό (presentation) κομμάτι σε άλλη τεχνολογία, την CSS. Με αυτόν τον τρόπο η markup θα ξαναχρησιμοποιηθεί για τον λόγο που είχε εφευρεθεί, την σωστή δομή του περιεχομένου δηλαδή!

Στην συνέχεια έρχεται μια μεταβατική περίοδος στο web, όπου τα μεγάλα site έχουν φτάσει τις συγκεκριμένες τεχνολογίες στα όρια τους και χρειάζονται κάτι πιο δυνατό για το Web 2.0 το οποίο έχει ήδη αρχίσει να δημιουργείται. Κάπου εδώ ξεκινάει και το μπέρδεμα. Το επίσημο W3C ξεκινάει λοιπόν το draft της XHTML 2, όμως κάποιοι ανεξάρτητοι – κατασκευαστές browser, web developers, ανεξάρτητοι οργανισμοί κτλ. – δημιουργούν την WHATWG community και ξεκινάνε το draft της HTML 5 (και των Web Forms 2.0), το οποίο μετά από κάποιο καιρό το παραδίδουν στο W3C και γίνεται και αυτό επίσημο standard! Έτσι αυτήν την στιγμή έχουμε δύο επίσημους διαδόχους τις (X)HTML οι οποίοι μάλιστα έχουν πάρει και αρκετά διαφορετικές κατευθύνσεις σε θέματα αρχιτεκτονικής και σχεδιασμού!

Αυτήν την στιγμή κανένα από τα δύο recomendations δεν είναι επίσημο ή έχει περισσότερη υποστήριξη, αλλά το μπέρδεμα έχει ήδη γίνει και μάλιστα είναι πολύ μεγάλο! Καταρχάς, τι θα γίνει εάν κάποιοι browsers επιλέξουν να υποστηρίξουν ένα από τα δύο standards (extreme σενάριο, αλλά ας μην ξεχνάμε πως ακόμα κάποιοι browsers προσπαθούν να υποστηρίξουν standards 7 χρόνων παλιά!). Επίσης τι θα γίνει σε development επίπεδο, όπου κάποια site θα υποστηρίξουν την μία markup και κάποια την άλλη? Όπως ανέφερα οι markup είναι πολύ διαφορετικές μεταξύ τους, ενώ η HTML 5 έρχεται και με διάφορα Javascript APIs για ευκολότερο development σε αυτήν, το οποίο όμως μπορεί να μπερδέψει πολλούς developers (ιδιαίτερα νέους), αλλά και κατασκευαστές browsers, οι οποίοι θα πρέπει να ενσωματώσουν στους καινούργιους browsers πολλά νέα APIs. Και σαν να μην έφταναν τα παραπάνω μπερδέματα, το θέμα μπορεί να γίνει και ακόμα πιο περίπλοκο μιας και η HTML 5 για παράδειγμα (στην οποία έχω ρίξει μια καλύτερη ματιά), έχει ήδη δύο parsing modes, ένα σαν HTML και ένα σαν XML, με το πρώτο να είναι πιο συμβατό με παλιότερους browsers ενώ το δεύτερο η αυστηρότερη έκδοση του και χρήση του σαν XML εφαρμογή! Υποθέτω πως και η XHTML 2 θα έχει ανάλογες επιλογές για parsing.

Όπως εύκολα μπορεί να καταλάβει ο μέσος web developer/designer, η κατάσταση είναι αρκετά μπερδεμένη, ενώ εντύπωση μου κάνει πως κανένας επίσημος φορέας, όπως το W3C ή άλλοι μεγάλοι οργανισμοί και guru, δεν έχουν κάνει κανένα σχόλιο πάνω σε αυτό το σημαντικότατο θέμα. Για την ακρίβεια δεν το έχουν θίξει καν! Ξέρω πως και οι δύο τεχνολογίες έχουν πολύ δρόμο ακόμα να διανύσουν, ο Lachlan Hunt στο άρθρο του A Preview of HTML 5 υπολογίζει πως η HTML 5 θα χρειαστεί περίπου άλλα 10 με 15 χρόνια (άρα άλλα τόσα θα χρειαστεί και η XHTML 2), αλλά γιατί να μην γινόντουσαν τα πράγματα πιο απλά για όλους μας ?!?! Ελπίζω η κατάσταση να αλλάξει σύντομα και το τοπίο να ξεκαθαρίσει στο συγκεκριμένο θέμα έτσι ώστε να βοηθηθούν όλοι και να παρθούν γρηγορότερα κάποιες αποφάσεις, γιατί η αλήθεια είναι πως όλοι μας χρειαζόμαστε μια νέα markup! Πολλές ενδιαφέρουσες απόψεις πάνω στο θέμα μπορεί κάποιος να βρει στο άρθρο της IBM, HTML V5 and XHTML V2, ενώ το καινούργιο άρθρο του A List Apart έχει ένα αναλυτικό preview στην HTML 5, και φυσικά για τους πιο σκληροπυρηνικούς υπάρχουν και τα επίσημα drafts.

Η απόλυτη λίστα ελέγχου ενός site

Έστω ότι μόλις παραλάβατε κάποιο site από κάποια εταιρεία και θέλετε να ελέγξετε την ποιότητα του site που μόλις παραλάβατε ή απλά πως είστε ένας web designer / developer και θέλετε να ελέγξετε εάν το τελικό προϊόν σας (site) καλύπτει κάποια standards. Έχετε ήδη ρίξει λοιπόν μια καλή ματιά στο site με τον default browser σας, αλλά θα θέλατε να έχετε στην διάθεση σας και κάτι παραπάνω, κάτι πιο χειροπιαστό! Όποιος βρίσκεστε λοιπόν σε αυτήν την θέση καλό θα είναι να ρίξει μια ματιά στην παρακάτω λίστα και τις σημειώσεις της, μιας και θα μάθει να ελέγχει σχολαστικά οποιοδήποτε site και μάλιστα χρησιμοποιώντας δωρεάν εργαλεία και υπηρεσίες! Η παρακάτω λίστα είναι ένας πολύ καλός οδηγός για οποιονδήποτε θέλει να ελέγξει και να βελτιώσει το site του. Ας αρχίσουμε λοιπόν :

  • W3C Markup Validator : Σαφέστατα πρώτη κίνηση που πρέπει να γίνεται σε οποιοδήποτε site! Εάν η markup δεν είναι σωστή δεν έχει νόημα να προβούμε σε περαιτέρω tests και ελέγχους (όπως πχ. CSS validation). Εάν το site περάσει αυτό το τεστ, θα λειτουργεί στους περισσότερους υπάρχον browsers και συσκευές, αλλά και στις μελλοντικές υλοποιήσεις τους, χωρίς ιδιαίτερα προβλήματα.
  • W3C CSS Validator : Φυσικά μετά τον έλεγχο της markup ο δεύτερος πιο σημαντικός έλεγχος είναι αυτός της CSS. Και τα stylesheets μας πρέπει να είναι όσο πιο καθαρά και web standard γίνεται, ενώ εάν θα πρέπει να χρησιμοποιήσουμε hacks και μη standard τεχνικές, καλό θα είναι να τα κρατάμε σε κάποιο ξεχωριστό αρχείο και να τα φορτώνουμε μέσω του @import  κανόνα έτσι ώστε το βασικό stylesheet να παραμένει web standard valid! Μόλις περάσουμε και αυτό το τεστ είμαστε σε πάρα μα πάρα πολύ καλό δρόμο! Πολλοί designers χρησιμοποιούν πριν το τελικό CSS validation το Clean CSS το οποίο αναλαμβάνει να σας βοηθήσει στην επίλυση των CSS προβλημάτων, να σας δημιουργήσει ευκολοδιάβαστο κώδικα και γενικότερα να βελτιστοποιήσει (optimize) τον CSS κώδικα μειώνοντας ταυτόχρονα και το file size του. Προσωπικά δεν το χρησιμοποιώ απλά σε κάποιους μπορεί να λύσει τα χέρια.
  • WebXACT : Άλλη μία φανταστική υπηρεσία η οποία προσφέρει πληθώρα πληροφοριών για το site, από το file size και τον χρόνο που θα χρειαστεί κάποιος με 56αρι modem για να κατεβάσει την σελίδα σας μέχρι σε τι accessibility priority level έχει φτάσει το site και πόσα broken links έχει. Ρίχνοντας μια ματιά έχετε μια συγκεντρωτική ιδέα για το που κινείται το site και τι πρέπει να βελτιωθεί σε διάφορα σημεία.
  • Truwex Online 2.0 : Η καλύτερη επιλογή για εύκολο και γρήγορο accessibility test! Η υπηρεσία παρέχει πολλά εργαλεία και πληροφορίες για να λύσετε τα accessibility προβλήματα του site σας, ενώ η επιλογή “map” πραγματικά σας λύνει τα χέρια, δείχνοντας πάνω στο site που βρίσκονται τα accessibility προβλήματα με αναλυτική επεξήγηση του κάθε προβλήματος και φυσικά της λύσης του! Η υπηρεσία κάνει accessibility test σε όλα τα WCAG 1.0 levels αλλά και στον αμερικάνικο accessibility νόμο Section 508.
  • TAW Web Accessibility Test : Κάνει ότι λέει το όνομα του και είναι η δεύτερη υπηρεσία που επισκέπτομαι για accessibility tests! Πολύ καλό είναι και το feedback που δίνει, αφού σας ενημερώνει που βρίσκεται η κάθε παράληψη, σας εξηγεί τι είδους παράληψη είναι (priority level κτλ.) και φυσικά σας δίνει πληροφορίες για το πως μπορείτε να την διορθώσετε. Το μόνο tip που μπορώ να δώσω σε αυτό το σημείο είναι να προσπαθήσετε να καλύψετε το priority 1 αρχικά, και να μην απογοητευθείτε από τα πολλά accessibility warnings που θα δείτε, γιατί το TAW παραείναι αυστηρό!
  • WAVE 3.0 Accessibility Tool : Και αυτή η υπηρεσία έχει να κάνει με accessibility test παρουσιάζοντας κάπως διαφορετικά τα αποτελέσματα της. Η συγκεκριμένη υπηρεσία είναι λίγο πιο δυνατή στο να εντοπίζει και να παρουσιάζει τα κομμάτια του κώδικα σας όπως headers, divs, footers, Javascript, κτλ. και να προτείνει λύσεις στα διάφορα προβλήματα που πιθανόν έχουν. Έτσι με αυτόν τον τρόπο μπορεί πολύ γρήγορα κάποιος να διορθώσει τα accessibility προβλήματα σε themes και templates!
  • Browsershots : Αν και η καλύτερη λύση είναι να τεστάρετε το site σε όλα τα desktop λειτουργικά συστήματα, δηλαδή σε Windows, OSX και Linux, και σε όλους τους γνωστούς browsers γι αυτά (IE, Firefox, Opera, Safari, Konqueror κτλ.), η συγκεκριμένη λύση πολλές φορές δεν είναι και τόσο εφικτή. Έτσι καλό θα είναι να έχετε υπόψη σας την συγκεκριμένη υπηρεσία, η οποία αν και αργεί αρκετά (όπως οι περισσότερες αντίστοιχες άλλωστε) σας επιτρέπει να δείτε το site σε όλους του γνωστούς browsers αλλά και να επιλέξετε και συγκεκριμένες screen resolutions!
  • Ready.Mobi : H καλύτερη υπηρεσία που έχω ανακαλύψει για το τεστ ενός site σε κινητά τηλέφωνα! Η συγκεκριμένη υπηρεσία προσφέρει μια πολύ αναλυτική αναφορά για το πως φαίνεται το site σε κινητά τηλέφωνα, με λεπτομέρειες όπως πόση ώρα χρειάζεται το site για να κατέβει μέσω Wifi, 3G και GPRS, εάν έχετε κάνει σωστή χρήση των images για mobile συσκευές, πως φαίνονται τα stylesheets κτλ. Το κερασάκι στην τούρτα είναι και οι 4 (προς το παρόν) emulators κινητών τηλεφώνων που διαθέτει (Nokia N70, Samsung z105, Sony Ericsson k750i, Motorola v3i και Sharp GX-10)!
  • Website Grader : Τέλος θα ήθελα να κλείσω με την αγαπημένη μου SEO υπηρεσία. Εδώ μπορείτε να βρείτε πως τα πάει το site σας στις μηχανές αναζήτησης και στα περισσότερα ranking sites (όπως Technorati, Alexa, κτλ.) καθώς και πολλές άλλες χρήσιμες πληροφορίες όπως εάν έχει γίνει σωστή χρήση των τίλων/headings (h1, h2, ktl.). Εάν το site είναι ολοκαίνουργιο η χρήση της  συγκεκριμένης υπηρεσίας δεν έχει και πολύ νόημα, εάν όμως το site υπήρχε και έχει γίνει κάποιο redesign, καλό θα είναι να του ρίξετε μια ματιά.

Ελπίζω η παραπάνω λίστα να βοηθήσει όσους ενδιαφέρονται να κάνουν τα site τους ακόμα καλύτερα, πιο επαγγελματικά και τηρώντας κάποιες διεθνής προδιαγραφές! Οι εν λόγω υπηρεσίες και εργαλεία παρέχονται εντελώς δωρεάν και μπορούν να χρησιμοποιηθούν πανεύκολα, ενώ οι πληροφορίες που συλλέγουν θα ικανοποιήσουν και τους πιο απαιτητικούς! Φυσικά δεν είναι ανάγκη το κάθε site να περνάει με επιτυχία όλα τα παραπάνω test (ειδικά τα accessibility test είναι αρκετά δύσκολο να επιτευχθούν ενώ όπως είναι λογικό διαφορετικού τύπου site χρειάζονται και άλλου επίπεδου accessibility), αλλά καλό θα είναι να ρίχνουμε μια καλύτερη ματιά σε αυτά που είτε φτιάχνουμε είτε παραλαμβάνουμε, γιατί στην Ελλάδα το έχουμε παρακάνει το θέμα με τα μη valid και unaccessible sites!

Το WebKit είναι η πρώτη rendering engine που υποστιρίζει client-side database αποθήκευση!

Πραγματικά δεν μπορώ να καταλάβω γιατί αυτή η είδηση δεν πήρε τις διαστάσεις που θα έπρεπε, μιας και την θεωρώ εξαιρετικά σημαντική, τόσο για την εξέλιξη του internet όσο και των εφαρμογών του! Το WebKit λοιπόν, η μηχανή rendering που κρύβεται πίσω από πολλούς browsers, όπως Safari και Konqueror, είναι πρώτη μηχανή rendering που θα υποστηρίξει HTML5 client-side database αποθήκευση. Αυτό με πολύ απλά λόγια σημαίνει πως οι browsers που βασίζονται στο WebKit, θα έχουν την δυνατότητα database αποθήκευσης στην client-side (browser) μεριά! Το συγκεκριμένο feature θα δώσει άπειρες επιπλέον δυνατότητες και προοπτικές στους developers οι οποίοι θα έχουν στην διάθεση τους ένα ακόμη χαρακτηριστικό, που μέχρι τώρα δεν υπήρχε και φυσικά περιόριζε πολύ το web σαν πλατφόρμα εφαρμογών. Όπως όλα δείχνουν οι browser θα εξελιχθούν στην μία και μοναδική εφαρμογή που θα χρειάζεται ο μέσος χρήστης, μιας και σιγά-σιγά μετατρέπονται σε υπέρ-API για όλες τις κατηγορίες εφαρμογών.

Είμαι περίεργος να δω την απάντηση της Mozilla με την Gecko rendering engine, καθώς και της Opera στο εν λόγω θέμα (η Microsoft προβλέπω να αργεί πολύ ακόμα). Το μόνο που εύχομαι είναι να ακολουθήσουν όλοι τα επίσημα standards έτσι ώστε να μην έχουμε browser-wars 2!