Πως να κάνετε το site σας πιο γρήγορο : Ο απόλυτος οδηγός για site optimization

Από καιρό ήθελα να γράψω αυτό το αρθράκι, απλά ήθελα να κάνω περισσότερο και καλύτερο research πάνω στο θέμα, έτσι ώστε να δοκιμάσω περισσότερα εργαλεία και να συστήσω μόνο τα καλύτερα! Ας ξεκινήσουμε όμως από τα βασικά και να πάρουμε τα πράγματα από την αρχή… Όταν γράφουμε ένα URL στον browser μας έτσι ώστε να επισκεφθούμε κάποια σελίδα, αυτός συλλέγει πολλές πληροφορίες και εκτελεί διάφορες εργασίες πριν εμείς δούμε την τελική σελίδα (document). Φυσικά όσο πιο γρήγορη είναι η σύνδεση μας (σε επίπεδο download, μιας και το upload είναι ένα απλό http request) τόσο πιο γρήγορα ο browser θα καταφέρει να συλλέξει και να εκτελέσει τις εργασίες που θα αναλύσουμε πιο κάτω. Σε αυτό το σημείο πολλοί web experts δεν δίνουν την απαιτούμενη σημασία μιας και υποστηρίζουν πως οι γρήγορες συνδέσεις βρίσκονται παντού – πλέον και στην Ελλάδα – ωστόσο αυτό δεν σημαίνει πως δεν μπορούμε να κάνουμε κάτι καλό ακόμα καλύτερο ή στην περίπτωση μας κάτι γρήγορο ακόμα πιο γρήγορο! Τα δύο πολύ απλά επιχειρήματα που δίνω σε όσους μου προβάλουν το γρήγορο internet σαν δικαιολογία, είναι τα εξής :

  • Το να κάνεις ένα site να φορτώνει ακόμα πιο γρήγορα, χωρίς να του αλλάξεις τίποτα εμφανισιακά, δεν βλάπτει κανέναν (ούτε τους χρήστες με αργές, ούτε αυτούς με γρήγορες συνδέσεις)
  • Ξοδεύεις λιγότερα λεφτά σε web hosting μιας και αυτό που πληρώνεις (ακριβά) πλέον στο hosting είναι το transfered bandwidth, και όχι τα GB χώρου που χρησιμοποιείς (όπως ίσχυε κάποτε). Σε αυτό το επιχείρημα δείχνουν ακόμα περισσότερη προσοχή για κάποιο λόγο!

Ας εξηγήσουμε τώρα πως μπορούμε να κάνουμε το site μας πιο γρήγορο. Η πρώτη απάντηση σε αυτό το ερώτημα είναι η ελαχιστοποίηση των request στον server. Κάθε image, script, css αρχείο και γενικότερα όλα τα εξωτερικά αρχεία (flash, video, κτλ.) απαιτούν από τον browser να κάνει, για το καθένα ξεχωριστά, ένα request στον web server, να το κατεβάσει και τελικά να ενώσει όλα τα κομμάτια του παζλ και να κάνει render την web σελίδα! Τώρα θα μου πουν πολλοί, και με το δίκιο τους, καλέ ρε φίλε, δηλαδή να σταματήσουμε να βάζουμε images, css και scripts στο site μας? Και βέβαια όχι, αντιθέτως οι μοντέρνες web design τεχνικές το επιβάλουν, απλά να γνωρίζουμε τι και για ποιον λόγο το κάνουμε. Επίσης οι μοντέρνοι browser έχουν πολύ καλές caching τεχνικές έτσι ώστε εάν ένα image, script, stylesheet, κτλ. χρησιμοποιείται σε παραπάνω από μια σελίδα, χρησιμοποιούν το αρχείο που έχουν ήδη κατεβάσει (πχ. εάν έχει ήδη κατεβάσει το stylesheet του μενού και τα γραφικά/images του interface, δεν τα ξανακατεβάζει ξανά από την αρχή, αλλά χρησιμοποιεί τα ήδη υπάρχοντα από την cache memory του). Τι μπορούμε να κάνουμε εμείς, οι web experts, επιπλέον όμως? Πρώτα απ’ όλα optimization (βελτιστοποίηση) στον κώδικα μας! Code Optimization μπορεί να γίνει και στις δύο μεριές (server-side και client-side), ωστόσο στο συγκεκριμένο post δεν θα ασχοληθώ με server-side optimization (ο φίλος lexx έχει γράψει ένα ανάλογο άρθρο πάνω στο θέμα όπου περιγράφει και server-side optimization), μιας και εκτός από ότι αλλάζει ανάλογα με την server-side τεχνολογία που χρησιμοποιείται (πχ. PHP, Ruby, κτλ.), πρέπει αυτός που θα αναλάβει την συγκεκριμένη εργασία, να είναι πολύ έμπειρος και να γνωρίζει πάρα πολύ καλά το πώς δουλεύει η συγκεκριμένη τεχνολογία, ο server που την φιλοξενεί αλλά και η βάση δεδομένων που την στηρίζει!

Ερχόμαστε λοιπόν στην client-side μεριά όπου μπορούμε να κάνουμε πολλά και ενδιαφέροντα πράγματα… Πρώτα απ’ όλα μπορούμε να ελαχιστοποιήσουμε τα requests των style μας χρησιμοποιώντας όσο των δυνατών λιγότερα CSS αρχεία γίνεται, όπως για παράδειγμα ένα κεντρικό αρχείο που θα περιλαμβάνει όλα τα style μας, ή έστω 2 – 3 εάν υπάρχουν και styles μόνο για τον IE, για print, κτλ. Αυτό με ακόμα πιο απλά λόγια σημαίνει πως καλό θα είναι να περιορίσουμε στο ελάχιστο τα stylesheet που κάνουμε link στην markup μας χρησιμοποιώντας το

<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">

αλλά και στα ίδια τα styles χρησιμοποιώντας τον

@import "styles/typography.css";

κανόνα.

Οι ακόμα πιο σκληροπυρηνικοί μπορούν να χρησιμοποιήσουν και κάποιον από τους παρακάτω CSS optimizers, έτσι ώστε να συμπιέσουν τους CSS κανόνες τους ακόμα περισσότερο!

Από κάποια γρήγορα τεστ προτείνω τον πρώτο optimizer, μιας και σε μερικές περιπτώσεις μείωσε το file size των CSS αρχείων έως και 50% (!!!), ωστόσο αυτό το ποσοστό αλλάζει ανάλογα με το στυλ του κώδικα που γράφεται αλλά και με το πόσο επαναλαμβάνεστε στους CSS κανόνες σας. Όπως και να έχει ρίξτε τους μια ματιά. Σε αυτό το σημείο να σημειώσω πως χρησιμοποιώντας κάποιον CSS optimizer δεν θυσιάζουμε τίποτα, πέρα από την ευαναγνωστηκότητα (readability) του κώδικα σας.

Οι τεχνικές που ανέφερα στα CSS αρχεία, μπορούν να εφαρμοστούν και στα Javascript αρχεία μας! Περιορίζουμε δηλαδή τα πολλά requests κρατώντας σε όσο λιγότερα Javascript αρχεία γίνεται όλον τον Javascript κώδικα μας. Φυσικά εάν χρησιμοποιούμε κάποια Javascript library (όπως jQuery για παράδειγμα) linkάρουμε πάντα την compressed version της ενώ μπορούμε να κάνουμε optimized και τον δικό μας Javascript κώδικα, χρησιμοποιώντας κάποιον από τους παρακάτω Javascript optimizers.

Σε αυτό το σημείο θα ήθελα να σημειώσω πως όποιος ασχοληθεί με Javascript code optimization, πρέπει να είναι πάρα πολύ έμπειρος και προσεκτικός, μιας και πολλά script δεν έπαιζαν σωστά σε κάποιους browsers μετά το optimization! Εάν θα έπρεπε να διαλέξω κάποιον από τους παραπάνω optimizers, θα διάλεγα τον JSMin, του Douglas Crockford από το Yahoo!, ο οποίος απλά αφαιρεί το extra whitespace και τα comments αφήνοντας τα υπόλοιπα κομμάτια του κώδικα ανέπαφα.

Φυσικά για λόγους maintaining (συντήρησης) θα πρέπει να κρατάμε backup όλων των style και javascript αρχείων μας έτσι ώστε να μπορούμε εύκολα και γρήγορα να διαβάζουμε, ανανεώνουμε και γενικότερα να συντηρούμε τον κώδικα μας, οπότε πρέπει οπωσδήποτε να κρατάτε τα source αρχεία σας ανέπαφα, και να εφαρμόζουμε όλα τα παραπάνω μόνο σε επίπεδο παραγωγής, δηλαδή σε site που βρίσκονται στον αέρα (web server μας)!

Τέλος, εκτός από optimization στον CSS και Javascript κώδικα μας, μπορούμε χρησιμοποιήσουμε και HTTP Compression στον server μας, έτσι ώστε να κάνουμε το site μας ακόμα πιο γρήγορο! Η συγκεκριμένη τεχνική γίνεται σε επίπεδο web server (όπως πχ. Apache, IIS, κτλ.), όπου ο server κάνει compress τα δεδομένα (data) που στέλνει μέσω του HTTP πρωτοκόλλου. Έτσι εάν ο browser που χρησιμοποιεί ο client (χρήστης) επιτρέπει την συγκεκριμένη δυνατότητα – όλοι οι μοντέρνοι browsers μπορούν – ο server στέλνει τα δεδομένα συμπιεσμένα (συνήθως με το gzip), ενώ εάν ο client χρησιμοποιεί κάποιον παλιότερο σε browser ο οποίος δεν υποστηρίζει HTTP Compression, ο χρήστης λαμβάνει την κανονική μη συμπιεσμένη (uncompressed) version της σελίδας. Με την συγκεκριμένη τεχνική δεν πρόκειται να δημιουργήθει κανένα πρόβλημα ούτε στους παλιούς ούτε στους καινούργιους browsers, αφού οι χρήστες με καινούργιους browsers θα μπορούν να κατεβάζουν τις σελίδες έως και 40% γρηγορότερα, χωρίς να απορρίπτονται οι χρήστες με τους παλιότερους browsers, οι οποίοι θα συνεχίσουν να κατεβάζουν κανονικά (χωρίς compression) τις σελίδες σας!

Η τελευταία τεχνική ανήκει θεωρητικά στην server-side κατηγορία, μιας και γίνεται στον web server, ωστόσο επειδή είναι πολύ εύκολη στην υλοποίηση της (εάν έχουμε πρόσβαση στον server φυσικά), την αναφέρω σε αυτό το post. Όπως προανέφερα δεν επηρεάζει καθόλου την συμπεριφορά της client-side μεριάς (οι browser που υποστηρίζουν HTTP compression θα το χρησιμοποιούσουν, ενώ οι υπόλοιποι απλά θα το αγνοήσουν) ενώ η βελτίωση που βλέπουμε στην ταχύτητα φόρτωσης μιας σελίδας (document) είναι εμφανής!

Με τεχνικές που ανέφερα παραπάνω και φυσικά με τις κατάλληλες μοντέρνες και σύγχρονες web design τεχνικές μπορούμε να κάνουμε τα site μας να φορτώνουν πάρα μα πάρα πολύ πιο γρήγορα από το συνηθισμένο, και μάλιστα χωρίς να αλλάξουμε κάτι εμφανισιακά! Κανείς δεν θέλει να περιμένει μέχρι να φορτώσει η σελίδα που τον ενδιαφέρει, ενώ είναι γεγονός πως το αργό φόρτωμα των σελίδων είναι ο νούμερο ένα λόγος που κάνει τους χρήστες να εγκαταλείπουν κάποιο site! Οι παραπάνω τεχνικές είναι εύκολα υλοποιήσιμες ενώ όλα τα εργαλεία που περιγράφω προσφέρονται δωρεάν, οπότε δεν υπάρχει κάποια σοβαρή δικαιολογία στο να μην κάνετε το γρήγορο site σας ακόμα πιο γρήγορο!

Η HTML 5 έρχεται…

Για τα ανήσυχα μυαλά που θέλουν να είναι έτοιμοι πριν από όλους τους άλλους, το W3C δημοσίευσε την προηγούμενη εβδομάδα τα πρώτα specifications της HTML 5! Μαζί με τις διαφορές που υπάρχουν μεταξύ HTML 5 και HTML 4 καθώς και τον επίσημο οδηγό του web developer στην HTML 5, είναι τα πληρέστερα (και επίσημα) κείμενα που υπάρχουν για την νέα markup language, αυτήν την στιγμή.

Αν και δεν μπορώ να πω πως έχω μελετήσει αναλυτικά όλα τα παραπάνω specifications της HTML 5, έχω ανακαλύψει ήδη πολλά ενδιαφέροντα χαρακτηριστικά, όπως :

  • Πολλά νέα elements για καλύτερο και πιο semantic structure, όπως header, footer, nav, section, article, aside, dialog κτλ.
  • Πολλά βελτιωμένα elements για embedded content, όπως figure, audio και video. Στα δύο τελευταία δίνεται και η δυνατότητα ενσωμάτωσης user interface μέσω της markup αλλά και ενός API, έτσι ώστε ο χρήστης να μπορεί να ελέγχει το video/audio file. Το user interface θα δημιουργείτε από την rendering engine του εκάστοτε user agent!
  • time element, που θα αντιπροσωπεύει χρόνο (ημερομηνία, ώρα, κτλ.)
  • canvas element, για on-line rendering γραφικών
  • Templates elements όπως datatemplate, rule, and nest. Με αυτόν τον τρόπο η ίδια η markup αποκτά templating δυνατότητες!
  • Form validation μέσω της markup (σε client-side επίπεδο φυσικά). Έτσι στα input elements, δηλώνοντας απλά τον τύπο τους (type) στην markup (όπως πχ. date, number, email, url, κτλ) θα αναγκάζουμε τον user agent του browser να αναλαμβάνει το client-side validation

Μαζί με τα νέα χαρακτηριστικά, η καινούργια markup αφήνει πίσω της πολλά άχρηστα elements και attributes τα οποία είχαν παρατήσει εδώ και καιρό οι έμπειροι developers, όπως :

  • font, επιτέλους όλο το styling θα γίνεται αναγκαστικά μέσω CSS
  • frame, frameset και noframes. Δεν νομίζω πως χρειάζονται περαιτέρω διευκρινήσεις για την επιλογή του W3C σε αυτό το θέμα
  • applet
  • Όλες τις presentational attributes όπως : align, background, bgcolor, cellpadding, cellspacing, border, valign κτλ. Εάν κάποιος θέλει να τις χρησιμοποιήσει, θα πρέπει και πάλι να στραφεί στην CSS

Τέλος αξίζει να σημειωθεί πως πάνω στην καινούργια markup θα χτιστούν και πολλά API για την ευκολότερη υλοποίηση web εφαρμογών, όπως :

  • 2D drawing API το οποίο θα χρησιμοποιείται για on-line rendering γραφικών μέσω του νέου canvas element
  • API για την δημιουργία interface στοιχείων (όπως play, pause, κτλ.) στα video και audio elements
  • Δυνατότητα client-side αποθήκευσης δεδομένων. Τώρα αυτό το κομμάτι δεν ξέρω πως θα υλοποιηθεί από τον κάθε browser, αλλά θα μάθουμε σύντομα περισσότερες λεπτομέρειες
  • API για δημιουργία offline web εφαρμογών. Έτσι ακόμα και εάν δεν υπάρχει internet access, η web εφαρμογή θα συνεχίσει να λειτουργεί κανονικά! Σε συνδυασμό με το χαρακτηριστικό μιας client-side database καταλαβαίνουμε όλοι πόσο μπροστά θα πάνε τα πράγματα
  • Drag and drop API, το οποίο θα μπορεί να γίνει attached σε σχεδόν οποιοδήποτε element μέσω της νέας draggable attribute
  • Editing API, το οποίο θα λειτουργεί με τα elements που έχουν την νέα contenteditable attribute. Όπως καταλαβαίνεται τα Wiki-like και γενικότερα τα social-based sites θα περάσουν σε άλλο επίπεδο
  • Network API
  • Διάφορα άλλα API μικρότερης σημασίας ή πιο εξειδικευμένων λειτουργιών

Εάν έχετε κάποια εμπειρία σε (X)HTML και βαριέστε να διαβάσετε όλα τα specifications της HTML 5 (όπως εγώ), προτείνω να ξεκινήσετε από το κείμενο που περιγράφει τις διαφορές που έχει με την HTML 4. Το κείμενο είναι περιεκτικότατο, σαφέστατο και δεν κουράζει καθόλου (σε αντίθεση με τα επίσημα specifications)! Καλό διάβασμα!

Ο καζαμίας 2008 του web developer

Το ξέρω πως έχω να γράψω καιρό, ωστόσο μία η προσαρμογή στην καινούργια δουλειά, μία η  μετακόμιση σε νέο σπίτι (χωρίς internet access προς το παρόν!) καθώς και διάφορες άλλες υποχρεώσεις, άφησαν το blog μου λίγο πίσω! Μην ανησυχείτε όμως το παρακάτω post θα σας καλύψει πλήρως, μιας και θα σας ενημερώσει για το τι θα γίνει στο μέλλον, και πιο συγκεκριμένα μέσα στο 2008! Έχουμε και λέμε λοιπόν :

  • Ο Internet Explorer 8 και ο Firefox 3 θα κονταροχτυπηθούν αλύπητα για μία ακόμη φορά για την πολυπόθητη θέση του default web browser στα συστήματα μας! Το περίεργο είναι πως ο Internet Explorer 8 έχει αυτήν την φορά καλύτερη rendering μηχανή από τον Firefox 3, ο οποίος όμως παραμένει σταθερά η default λύση των web developers (σε όλες τις πλατφόρμες, συμπεριλαμβανομένου πλέον και του OS X).
  • Ο Safari κερδίζει όλο και περισσότερους χρήστες! Με τις πωλήσεις της Apple να πηγαίνουν από το καλό στο καλύτερο, καθώς και με τις φορητές εκδόσεις του Safari browser για iPod touch, iPhone (generaton 1 και 2 πλέον) καθώς και του νέου ultra-portable laptop της, ο Safari έχει ήδη καταφέρει να κερδίσει ένα σεβαστό ποσοστό χρηστών όπου πλέον κανένας web developer δεν μπορεί να αγνοήσει!
  • Μετά την Microsoft και την καινούργια ASP.ΝΕΤ η οποία και μεταπήδησε σε λογική MVC, η Zend, εταιρεία και δημιουργός της PHP λανσάρει και αυτή πλέον το επίσημο MVC PHP framework! Όλοι δείχνουν να ακολουθούν τον δρόμο που χάραξε η Ruby και το Rails σε αυτόν τον τομέα!
  • Οι πρώτες CSS3 εντολές υποστηρίζονται ήδη από πολλούς mainstream browsers, και τα πρώτα tutorials και τεχνικές έχουν κάνει ήδη την εμφάνιση τους! Το web design αποκτά ακόμα περισσότερα όπλα στο οπλοστάσιο του!
  • Το ελληνικό internet παραμένει άσχημο και στάσιμο, με τις ελληνικές εταιρείες να μην μπορούν ακόμα να καταλάβουν ούτε να εκμεταλλευτούν τις δυνατότητες του. Ευτυχώς υπάρχουν πάντα και οι ευχάριστες εξαιρέσεις!

Καλό 2008 και είμαι περίεργος να δω σε πόσα από τα παραπάνω θα πέσω μέσα…

HTML e-mails και πως πρέπει να σχεδιάζονται

Αν και έχουν γίνει αρκετά βήματα μπροστά στο θέμα HTML e-mails/newsletters, όπως το Email Standards Project (όπως έχω αναφέρει και σε παλιότερο post), τα πράγματα για τους developers παραμένουν άσχημα, μιας και οι mail clients εκτός από από πολλοί, έχουν μείνει και αρκετά πίσω στο θέμα rendering HTML περιεχομένου. Οι περισσότεροι, για λόγους ασφαλείας κυρίως, κόβουν πολλά χαρακτηριστικά όπως Javascript, CSS και πολλές φορές ακόμα και εικόνες, οπότε η κατάσταση είναι δύσκολο να ελεγχθεί από τον developer/designer που έχει αναλάβει την δημιουργία του περιεχομένου! Επιπλέον πρόβλημα είναι και η ύπαρξη on-line αλλά και off-line (desktop) mail clients, όπου ο καθένας ακολουθεί τους δικούς του κανόνες στο τι θα κάνει render και με ποιον τρόπο! Το παρακάτω άρθρο θα προσπαθήσει να δώσει συμβουλές αλλά και να προβάλει τεχνικές έτσι ώστε να σχεδιάζετε καλύτερα και πιο συμβατά HTML mails.

Το πρώτο πράγμα που πρέπει να ασπαστείται είναι η inline CSS! Αν και στο web design η inline CSS θεωρείτε τόσο κακή πρακτική όσο και τα παλιομοδίτικα font tags, στην περίπτωση των HTML mails η inline CSS είναι το μόνο είδος CSS που λειτουργεί στους περισσότερους clients! Έτσι εάν θέλετε να χρησιμοποιήσετε σε κάποιο span element Arial font, σε γκρι χρώμα και bold, ο κανόνας που πρέπει να γράψετε (inline) είναι ο εξής :


Span element με Arial font, γκρι χρώμα και bold!

Από εκεί και πέρα προσπαθήστε να χρησιμοποιήσετε τις βασικές CSS properties οι οποίες υποστηρίζονται στους περισσότερους clients, και αποφύγετε τις πιο σπάνιες (όπως πχ list-style-image). Παρακάτω συγκέντρωσα μία λίστα η οποία εξηγεί τι εννοώ γράφοντας βασικές properties. Την λίστα την έφτιαξα μετά από μελέτη ενός καταπληκτικού άρθρου πάνω στο θέμα το οποίο έχει κάνει ολόκληρη μελέτη για το ποιες CSS properties υποστηρίζονται και ποιες όχι (γράφτηκε το 2006, αλλά υπάρχει και το 2007 review).

  • color
  • background-color
  • border
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • margin
  • padding
  • text-align
  • text-decoration
  • text-transform

Κάποιοι παρατηρητικοί θα είδαν πως στις παραπάνω CSS properties δεν αναφέρω πουθενά positioning properties. Ο λόγος είναι πολύ απλός, για HTML e-mail (και μόνο για τον συγκεκριμένο λόγο) η καλύτερη λύση είναι να χρησιμοποιήσετε tables! Το ξέρω πως σε αυτό το blog γράφω πάντα κατά των tables και υποστηρίζω τις μοντέρνες web design τεχνικές, αλλά στην συγκεκριμένη περίπτωση όλα αυτά απλά δεν ισχύουν! Χρησιμοποιήστε tables λοιπόν και μάλιστα αποφύγετε τα πολλά tables μέσα σε tables (γνωστά και ως nested tables). Ένα απλό table-based layout, με λίγα rows και columns είναι το ιδανικότερο, μετά με την εισαγωγή κάποιων βασικών styles στο περιεχόμενο (content) του πίνακα και ακολουθώντας τις παραπάνω συμβουλές, μπορείτε εύκολα να δημιουργήσετε ένα πολύ ευανάγνωστο και εντυπωσιακό HTML e-mail/newsletter.

Άλλο ένα σημαντικό λάθος, που το κάνουν ακόμα και μεγάλες εταιρείες, είναι η αλόγιστη χρήση γραφικών (images) και το ακόμα χειρότερο, η χρήση γραφικών για την προβολή περιεχομένου (content). Ο λόγος που δεν πρέπει να χρησιμοποιούμε πολλά γραφικά, είναι πως πολλοί mail clients (on-line και off-line) δεν αφήνουν τα γραφικά να “περάσουν”, με αποτέλεσμα να μην εμφανίζονται! Όπως καταλαβαίνεται τα πράγματα γίνονται ακόμα χειρότερα εάν τα γραφικά περιέχουν και μέρος του περιεχόμενου μας, όπως για παράδειγμα κείμενο, γραφήματα κτλ. Καλό θα είναι το κείμενο (τίτλοι, παράγραφοι, κτλ.) να είναι κείμενο, και όχι γραφικά με περίεργα Photoshop fonts, γιατί εκτός από το κίνδυνο να μην τα δουν ποτέ οι παραλήπτες, υπάρχει και μεγάλο accessibility πρόβλημα όταν κάποιος θέλει να κάνει copy κάποιο κομμάτι του κειμένου σας!

Τέλος κάντε όσα πιο πολλά τεστ μπορείτε! Και για να γίνω πιο συγκεκριμένος εξετάστε τα HTML mails τουλάχιστον σε :

Αυτά τα βασικά και πιο τεχνικά πράγματα για τα HTML e-mails (προς το παρόν). Ελπίζω να με διαβάζουν και κάποιοι που δημιουργούν τέτοια mails, γιατί όπως πάντα η κατάσταση στην Ελλάδα είναι πάλι αρκετά πίσω από τον μέσο όρο, οπότε όσοι πιστοί νοιάζεστε, διορθώστε όσο μπορείτε την κατάσταση!

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.

Ε-mail standards project

Το ότι οι e-mail clients, on-line και off-line, δεν τα πάνε καθόλου καλά με τα web standards είναι γνωστό εδώ και πάρα πολύ καιρό. Το ερώτημα όμως είναι γιατί κάποιος δεν έχει κάνει κάτι γι’ αυτήν την κατάσταση. Οι προσευχές κάποιων λοιπόν εισακούστηκαν, και για τον παραπάνω λόγο δημιουργήθηκε ένα νέο project, το Email Standards Project το οποίο έχει σαν στόχο να βελτιώσει αυτήν την κατάσταση και να κάνει τα πράγματα καλύτερα για όλους, και για τους απλούς χρήστες, και για τους developers αλλά και για τους vendors των e-mail clients! Το συγκεκριμένο site προσφέρει πολλές πληροφορίες και αναφορές για όλους τους διάσημους e-mail clients (off-line και on-line), όπως για παράδειγμα τι CSS κανόνες υποστηρίζουν, ένα e-mail ACID test, προτάσεις για βελτιώσεις σε κάθε e-mail client καθώς και πολλές άλλες ενδιαφέρουσες πληροφορίες. Η όλη προσπάθεια είναι πολύ οργανωμένη και αξιόλογη ενώ ήδη πολλοί vendors έχουν πραγματοποιήσει πολλές από τις προτεινόμενες βελτιώσεις στα προϊόντα τους! Η συγκεκριμένη κίνηση έπρεπε να είχε ήδη γίνει, αλλά κάλιο αργά παρά ποτέ. Περισσότερες πληροφορίες μπορείτε να βρείτε στο επίσημο site του project, ενώ στο Vitamin μπορείτε να βρείτε ένα πολύ καλό άρθρο πάνω στο συγκεκριμένο θέμα και την σωστή δημιουργία ενός newsletter. Φυσικά μείνετε συντονισμένοι και εδώ γιατί ετοιμάζω και ένα post/tutorial πάνω στο θέμα…

Microsoft Visual Studio 2008

Η καινούργιες εκδόσεις του Microsoft Visual Studio και του .NET Framework είναι έτοιμες εδώ και μία εβδομάδα περίπου, και φυσικά οι λάτρεις των Microsoft τεχνολογιών έχουν πολλούς λόγους να χαίρονται. Με περισσότερα από 250 νέα χαρακτηριστικά για όλες τις εκδόσεις του Visual Studio 2008 (σύμφωνα με την Microsoft πάντα) και το πολύ βελτιωμένο και AJAX-ready .ΝΕΤ 3.5 η Microsoft συνεχίζει την καλή παράδοση που έχει στα Rapid Application Development Tools. Μερικά ενδιαφέροντα χαρακτηριστικά περιλαμβάνουν :

  • ASP.NET AJAX. Εγγενής υποστήριξη AJAX (δεν χρειάζεται να κατεβάσετε ξεχωριστή library) και με πολλά ενδιαφέροντα χαρακτηριστικά όπως JavaScript Intellisense, JavaScript Debugging, ASP.NET AJAX Control Extender Support και JavaScript Intellisense για Silverlight.
  • Visual Studio 2008 Multi-Targeting Support, το οποίο πολύ απλά σημαίνει πως το καινούργιο Visual Studio μπορεί να ανοίξει, να κάνει edit και re-built, ήδη υπάρχοντα project γραμμένα σε παλιότερα .ΝΕΤ frameworks, όπως .NET 2.0 και ASP.NET 2.0 (με η χωρίς ASP.NET AJAX 1.0).
  • VS 2008 Web Designer και CSS Support, το οποίο χρησιμοποιεί την πολύ καλή μηχανή δημιουργίας (X)HTML και CSS του Expression Web.
  • LINQ, όπου είναι η νέα και πολλά υποσχόμενη Query Language της Microsoft (από το Language-INtegrated Query). Φυσικά έχουν γίνει και πολλές βελτιώσεις στην υπάρχον SQL και SQL server.
  • Πολλές άλλες βελτιώσεις μικρότερου ενδιαφέροντος (για εμένα τουλάχιστον), όπως καλύτερο Silverlight integration και tools, πολλές βελτιώσεις στο WPF (Windows Presentation Foundation) και πολλά άλλα.

Το Microsoft Visual Studio 2008 έρχεται σε 4 εκδόσεις (Visual Studio 2008 Professional Edition, Visual Studio Team System 2008 Team Suite, Visual Studio Team System 2008 Team Foundation Server και Visual Studio Team System 2008 Test Load Agent) τις οποίες μπορείτε να δοκιμάσετε για 90 μέρες, ενώ για τους πιο ερασιτέχνες και φοιτητές προγραμματιστές υπάρχουν και οι δωρεάν εκδόσεις του Visual Studio 2008 με το όνομα Express Edition. Γενικότερα το νέο Visual Studio 2008 φαίνεται αρκετά ανανεωμένο, ενώ η Microsoft δείχνει να αλλάζει νοοτροπία και να κάνει όλο και πιο πολλά βήματα προς τα web standards (και στον browser της αλλά και στα development tools της). Μιας και το Visual Studio δείχνει να κάνει αρκετά βήματα προς τα εκεί, ελπίζω να συνεχίσει και ο Internet Explorer 8 σε αυτόν τον δρόμο…

Η απόλυτη λίστα ελέγχου ενός 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!