Best of the rest – 38η εβδομάδα 2008

Αρκετή κινητικότητα αυτήν την εβδομάδα, με ιδιαίτερη έμφαση στα νέα που έχουν να κάνουν με web accessibility 😉

  • Το Adobe AIR είναι έτοιμο και για Linux (beta version). Με αυτήν την κίνηση λοιπόν, η Adobe καταφέρνει να έχει μια πολύ ώριμη RIA πλατφόρμα σε όλα τα λειτουργικά συστήματα! Για να δούμε λοιπόν εάν το AIR θα καταφέρει να γίνει συνώνυμο των RIA εφαρμογών…
  • Για πρώτη φορά στην Ευρώπη, δημιουργούνται οι πρώτες accessibility guidelines. Μας έρχονται από το Ηνωμένο Βασίλειο, και πιο συγκεκριμένα από το Central Office of Information (COI), και έχουν ιδιαίτερο ενδιαφέρον, γιατί είναι οι πρώτες επίσημες accessibility οδηγίες κάποιου ευρωπαϊκού κράτους. Από μια πρώτη ματιά που έριξα, συμφωνώ απόλυτα με το post του Web Standards Project, το οποίο εξηγεί πως το σκεπτικό που έχουν γραφτεί οι οδηγίες είναι λάθος, και πως θα δημιουργηθούν αρκετά προβλήματα εάν τελικά χρησιμοποιηθούν. Μείνετε συντονισμένοι γιατί έχω σκοπό να γράψω και την δικιά μου άποψη πάνω στο θέμα.
  • Και μιας και ανοίξαμε το θέμα accessibility στο web, το Digital Web Magazine δημοσίευσε ένα εξαιρετικό άρθρο με θέμα την προσβασημότητα (accessibility) στο web, αλλά και στο πως θα πρέπει να σχεδιάζουμε τα site μας για ανθρώπους με διάφορα προβλήματα και αναπηρίες. Είναι από τα καλύτερα και πιο ολοκληρωμένα άρθρα που έχω διαβάσει, με πολλές λεπτομέρειες και παραδείγματα. Απλά διαβάστε το!
  • Με το Fangs plug in για τον Firefox, μπορείτε να “διαβάσετε” την σελίδα σας, όπως θα την διάβαζε ένας screen reader. Ας ρίχνουμε λοιπόν μια ματιά στα site που κατασκευάζουμε με αυτό το plug in, έτσι ώστε να κάνουμε την ζωή κάποιων χρηστών μας ακόμα πιο εύκολη, γιατί πραγματικά το αξίζουν.
  • Το Status είναι κάτι σαν το Twitter, με βασική διαφορά πως επιλέγετε ποιοι χρήστες και group θα βλέπουν αυτά που γράφεται. Πολύ καλή λύση για να ομάδες και groups που θέλουν να μοιράζονται πληροφορίες, χωρίς ωστόσο να τις βλέπει ο καθένας…
  • H καινούργια release candidate version του jQuery UI είναι έτοιμη! Για όσους θέλουν να ρίξουν μια ματιά, μπορούν να την κατεβάσουν εδώ και τώρα (version 1.6rc2).
  • To SEOmoz είναι ένα blog που απλά πρέπει να παρακολουθείτε εάν δηλώνεται επαγγελματίες του χώρου. Ασχολείται με SEO θέματα όπως καταλαβαίνετε και από τον τίτλο του, ενώ κάθε Παρασκευή δημοσιεύει ένα πολύ ενδιαφέρον videocast, το οποίο ονομάζει Friday Whiteboard. Το ανακάλυψα από το blog About.SEO του Γιώργου.

Progressive enhancement : Tsevdos.com sidebar

Το δεύτερο και ίσως αγαπημένο μου feature στο Whitepress theme, είναι η AJAX-powered, αλλά ταυτόχρονα accessible sidebar του! Την τεχνική την δανείστηκα από το blog jQuery for designers και πιο συγκεκριμένα από το post jQuery Tabs, και ο λόγος που την λάτρεψα είναι επειδή χρησιμοποιεί σωστά αυτό που ονομάζουμε progressive enhancement. Progressive enhancement με πολύ απλά λόγια σημαίνει πως ο χρήστης έστω και εάν δεν έχει την javascript ενεργοποιημένη στον browser, η sidebar και ολόκληρο το περιεχόμενο της θα εμφανίζεται κανονικά! Το μόνο που θα χάσει ο χρήστης σε αυτήν την περίπτωση είναι το AJAX-like εφέ που δημιουργεί η Javascript (και πιο συγκεκριμένα το jQuery), ενώ θα βλέπει και όλα τα tabs ανοιχτά, το ένα κάτω από το άλλο. Όπως μπορείτε να παρατηρήσετε και από τις 2 παρακάτω εικόνες, ο χρήστης με ενεργοποιημένη Javascript έχει περισσότερο ελεύθερο χώρο στην sidebar του, και μπορεί να επιλέξει ποιο tab θα είναι ενεργοποιημένο. Αντίθετα κάποιος χρήστης με απενεργοποιημένη Javascript ή screen reader απλά βλέπει κανονικά και στην σειρά όλο το περιεχόμενο της sidebar με την σειρά που εμφανίζεται στην markup!

Tsevdos.com with Javascript on
Η sidebar όπως εμφανίζεται σε browser που έχει ενεργοποιημένη την Javascript.
Tsevdos.com with Javascript off
Η sidebar όπως εμφανίζεται σε browser που δεν έχει ενεργοποιημένη την Javascript.

Η markup (XHTML)

Ας δούμε όμως πως μπορούμε να φτιάξουμε το συγκεκριμένο εφέ εύκολα και γρήγορα. Εν αρχή λοιπόν (όπως πάντα) η markup μας.


Όπως βλέπεται ένα div με το id sidebar, περιέχει μια unordered list (ul), με τρία list items (li), τα οποία στην ουσία λειτουργούν ως navigation list για τα τρία divs που ακολουθούν και θα περιέχουν το περιεχόμενο μας. Φυσικά η navigation list μπορεί να έχει περισσότερα links, αρκεί να υπάρχουν και τα ανάλογα divs περιεχομένου από κάτω. Αυτό ήταν, η markup είναι έτοιμη! Το μόνο που θα πρέπει να προσέξει κάποιος (θα εξηγήσω παρακάτω το γιατί), είναι πως σε περίπτωση που θέλει να προσθέσει επιπλέον ζευγάρια links και divs (για να έχει επιπλέον tabs και περιεχόμενο δηλαδή), θα πρέπει το link μέσα στο list item, να έχει για href attribute ακριβώς το ίδιο string με το id του div που θα προσθέσει. Όπως ήδη μπορείτε να δείτε, όλα τα links έχουν για href attribute τα id των div που θα εμφανίζουν.

H CSS

To styling (CSS) της συγκεκριμένης markup δεν παίζει κανέναν απολύτως ρόλο στον κώδικα μας (όλη η δουλειά γίνεται μέσω Javascript/jQuery), ωστόσο γι αυτούς που θέλουν να δημιουργήσουν κάτι στα γρήγορα, ας αντιγράψουν τον παρακάτω κώδικα, τον οποίο χρησιμοποιώ και στο παράδειγμα που μπορείτε να δείτε και φυσικά να κατεβάσετε!

* {
margin: 0;
padding: 0;
}

#sidebar {
width: 500px;
margin: 20px;
margin-bottom: 15px;
border-left: 1px solid #999;
}

#navigation {
list-style-type: none;
}

a:link, a:visited {
color: #fff;
background: #ccc;
padding: 1px 5px 0;
text-decoration: none;
font-weight: bold;
}

a:hover, a:active, a.selected {
color: #fff;
background: #999;
}

#navigation li {
list-style-type: none;
float: left;
border: 1px solid #999;
border-width: 1px 1px 0 0;
}

#sidebar div {
clear: left;
padding: 10px;
border: 1px solid #999;
border-width: 1px 1px 1px 0;
}

Και τέλος η Javascript (jQuery)

Και επιτέλους περνάμε στην καρδιά αυτού του tutorial, δηλαδή στην Javascript και το jQuery πιο συγκεκριμένα! Για τους ανυπόμονους, ο κώδικας είναι ο παρακάτω, ωστόσο καλό θα είναι να τον εξηγήσουμε και λίγο, γιατί πολλά πράγματα γίνονται, μέσα σε πολύ λίγες γραμμές κώδικα…



Στην πρώτη γραμμή λοιπόν, δηλώνουμε στην markup πως θα κάνουμε χρήση της jQuery library. Η συγκεκριμένη library (όπως και οι περισσότερες άλλωστε) λειτουργεί όταν το DOM (Document Object Model) είναι έτοιμο. Αυτό ακριβώς κάνει ο παρακάτω κώδικας. Μέσα του θα προσθέσουμε όλον το Javascript κώδικα ο οποίος με την βοήθεια και της βιβλιοθήκης θα δημιουργήσει το εφέ μας.

$(document).ready(function(){
...
});

Επιλέγουμε λοιπόν τα links (anchor elements) που βρίσκονται μέσα στην unordered list με id navigation, και τους προσθέτουμε ένα απλό click event. Με άλλα όταν γίνει click σε κάποιο link της λίστας, τότε ο κώδικας που βρίσκεται ανάμεσα στις αγκύλες ενεργοποιήται.

$('#sidebar #navigation li a').click(function() {
...
});

Και πάμε πλέον στο τι γίνεται όταν πατηθεί κάποιο από τα παραπάνω links. Αρχικά επιλέγουμε όλα τα divs της sidebar (#sidebar > div) και τα κρύβουμε (hide()). Ταυτόχρονα εμφανίζουμε το div (με ένα απλό fadeIn εφέ) το οποίο έχει id ίδια τιμή με το string της href attribute του link (hash). Για τον λόγο αυτό σας προειδοποίησα παραπάνω πως πρέπει να προσέξουμε πολύ στην markup μας αυτήν την μικρή λεπτομέρεια. Εάν δεν έχουν ίδια τιμή ο κώδικας απλά δεν παίζει… Για να το κάνω ακόμα πιο κατανοητό (για αυτούς που κάνουν τώρα τα πρώτα τους βήματα σε jQuery), ας υποθέσουμε πως πατήθηκε το link Section 1, το οποίο έχει για href attribute την τιμή “#first_div”. Μόλις γίνει click λοιπόν, το jQuery θα κρύψει όλα τα divs της sidebar, και θα επιλέξει το div το οποίο έχει για id την τιμή #first_div. Αυτό γίνεται επειδή το this.hash εκείνη την στιγμή παίρνει την τιμή #first_div. Μόλις ολοκληρωθεί και αυτό, απλά εμφανίζουμε με fade in το συγκεκριμένο div. Και όλα αυτά γίνονται μόλις σε 1 γραμμή κώδικα!

$('#sidebar > div').hide().filter(this.hash).fadeIn();

Ευτυχώς ο υπόλοιπος κώδικας είναι πολύ πιο κατανοητός και εύκολος. Στις παρακάτω 3 γραμμές απλά επιλέγουμε όλα τα links και τους αφαιρούμε (εάν έχουν, όμως πάντα ένα link θα έχει) την κλάση “selected”, η οποία και δίνει το ανάλογο style στο επιλεγμένο link. Τέλος προσθέτουμε στο link που έχει γίνει το click την κλάση “selected”, έτσι ώστε να φαίνεται πως είναι επιλεγμένο (highlighted), και δηλώνουμε στον browser να σταματήσει την default ενέργεια του click event (return false;), μιας και έχουμε πετύχει το εφέ που θέλουμε!

$('#sidebar #navigation li a').removeClass('selected');
$(this).addClass('selected');
return false;

Τέλος σε όλο αυτό το click event προσθέτουμε ένα από τα αγαπημένα μου χαρακτηριστικά που έχει το jQuery. Φιλτράρουμε το πρώτο element που έχει επιλεχθεί, δηλαδή το πρώτο link της λίστας μας, και κάνουμε click πάνω του, μέσω κώδικα! Έτσι όταν στο τέλος εμφανίζεται η σελίδα το πρώτο link (ή tab ή όπως αλλιώς θέλετε να το πείτε), θα είναι πάντα επιλεγμένο!!! Αυτό ήταν, είναι έτοιμο, δουλεύει και πάνω από όλα, είναι φιλικό προς όλους τους χρήστες! Δοκιμάστε να απενεργοποιήσετε την Javascript και θα δείτε πως θα συνεχίζει να δουλεύει χωρίς κανένα πρόβλημα, απλά θα χάσει λίγη από την μαγεία του…

.filter(':first').click();

Επίλογος

To jQuery είναι πραγματικά μια φανταστική Javascript library η οποία κάνει τα δύσκολα πράγματα απλά! Όπως βλέπεται μέσα σε μόλις 6-7 γραμμές κώδικα έχουμε ένα πολύ όμορφο και accessible αποτέλεσμα το οποίο μπορεί να χρησιμοποιηθεί παντού! Η δυνατότητα του να κάνεις εύκολα και γρήγορα αυτά που έχεις στο μυαλό σου, χωρίς να σε απασχολούν οι μικρολεπτομέρειες τις Javascript (οι οποίες πιστέψτε με είναι πολλές και ενοχλητικές), είναι αυτό που κάνει το jQuery να ξεχωρίζει από τις άλλες libraries. Τέλος για όσους θέλουν μια ακόμα πιο εύκολη και φυσικά accessible λύση καλό θα είναι να ρίξουν και μια ματιά στο UI Tabs το οποίο είναι ένα επίσημο plug-in για το jQuery και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Δωρεάν αναβάθμιση σε όλους του λογαριασμούς MoFuse!

Θυμάστε την υπηρεσία MoFuse που είχα παρουσιάσει παλιότερα και στην οποία στηρίζεται η mobile version του blog μου (m.tsevdos.com)? Το επίσημο blog της εταιρείας λοιπόν, μόλις ανακοίνωσε πως όλοι οι δωρεάν (free) χρήστες της υπηρεσίας, μεταξύ τους και εγώ, αναβαθμίζονται αυτόματα και χωρίς καμία επιβάρυνση στην professional version!!! Τα πλεονεκτήματα της pro version είναι πολλά, ιδιαίτερα εάν είστε κάτοικος Αμερικής, ωστόσο αυτό που χρησιμοποίησα αμέσως ήταν το custom domain name! Μέχρι σήμερα, αν και είχα δημιουργήσει ειδικό sub-domain για την mobile version του blog, αυτό που στην ουσία συνέβαινε ήταν να κάνω redirect από το m.tsevdos.com στο tsevdos.mofuse.mobi έτσι ώστε να βλέπεται την mobile version σε οποιοδήποτε κινητό τηλέφωνο. Πλέον με την δωρεάν αναβάθμιση που είχα, μπορώ να δηλώσω δικό μου (custom) domain στις ρυθμίσεις του MoFuse και να έχω στο δικό μου domain (sub-domain για την ακρίβεια) την mobile version του site μου! Μετά και από αυτήν την κίνηση της MoFuse θεωρώ αδικαιολόγητο κάποιον που δεν ξοδεύει 3 λεπτά (κυριολεκτικά) από τον χρόνο του για να φτιάξει μια αξιοπρεπέστατη mobile version για το blog του, η οποία θα μπορεί να “διαβαστεί” από όλα τα κινητά τηλέφωνα!!!

Accessibility test σε 10′ λεπτά

Είναι άπειρες οι φορές όπου φίλοι, γνωστοί ή ακόμα και άγνωστοι ζητάνε την γνώμη μου για το πόσο προσβάσιμο (accessible) είναι site τους. Οι περισσότεροι έχουν την αίσθηση πως εμείς (οι web designers/developers) είμαστε μάγοι ή έχουμε πολύ εξειδικευμένο εξοπλισμό και software για να κάνουμε κάτι τέτοιο. Στην πραγματικότητα το μόνο που χρειάζεται κάποιος, είναι ένας σύγχρονος browser (κατά προτίμηση Firefox με το web developer toolbar) και κάποιες εναλλακτικές ρυθμίσεις, έτσι ώστε να εντοπίσει γρήγορα τα διάφορα accessibility προβλήματα που πιθανόν να υπάρχουν. Στο παρακάτω post λοιπόν περιγράφω πολύ συνοπτικά πως μπορεί κάποιος, να κάνει ένα αξιόλογο web accessibility τεστ μέσα σε 10 μόλις λεπτά (όχι δεν σας κοροϊδεύω!). Για να μπορεί το post να διαβαστεί από όλους (και όχι μόνο από ειδικούς του χώρου), θα παρακάμψω την πολύ θεωρία πίσω από κάθε test, και θα εστιάσω την προσοχή στα παραδείγματα. Έχουμε και λέμε λοιπόν :

Απενεργοποιήστε τα images και δείτε πως φαίνεται το site σας χωρίς αυτά

Προσπαθείστε το site σας να δείχνει αξιοπρεπέστατο ακόμα και εάν δεν έχουν φορτωθεί τα γραφικά του (είτε γιατί ο χρήστης τα έχει απενεργοποιήσει, είτε επειδή κάποιο πρόβλημα στον server δεν τα αφήνει να κατέβουν, είτε επειδή ο χρήστης δεν έχει καλό bandwidth, κτλ.). Όποιος και να είναι ο λόγος το site σας θα πρέπει να δείχνει σωστά και χωρίς γραφικά. Απλό και κατανοητό νομίζω, και για τον λόγο αυτό δεν θα μακρηγορήσω περισσότερο, αλλά θα περάσω κατευθείαν σε 2 παραδείγματα.

Στο παρακάτω παράδειγμα λοιπόν, το blog του Γιάννη δεν “αλλοιώνεται” ούτε “χαλάει” όταν του απενεργοποιήσουμε τα images. Επίσης χρησιμοποιεί σωστά το alternative text περιγράφοντας τα γραφικά που δεν εμφανίζονται…

Porcupine blog - images on

Porcupine blog - images off

Αντιθέτως, το site Avopolis, δείχνει αρκετά άσχημο όταν απενεργοποιούμε τα images. Το χειρότερο από όλα είναι πως το κεντρικό μενού του site εξαφανίζετε, μιας και είναι όλο φτιαγμένο σε ένα image map!

Avopolis site - images on

Avopolis site - images off

Απενεργοποιείστε την Javascript

Ο κανόνας που ισχύει είναι αρκετά απλός : Δεν πρέπει να θεωρούμε πως ο χρήστης του site μας έχει την Javascript ενεργοποιημένη!

Στο blog το οποίο βρίσκεστε εάν απενεργοποιείστε την Javascript (η οποία χρησιμοποιείτε στην sidabar για τα διάφορα AJAX-like εφεδάκια), δεν θα χάσετε τίποτα από το περιεχόμενο του blog! Η τεχνική αυτή ονομάζεται Progressive enhancement, και το σκεπτικό πίσω από την τεχνική, είναι πως το site πρέπει να γίνεται σταδιακά πιο δυναμικό (interactive). Έτσι πρέπει πρώτα να έχουμε ένα καθαρό, σωστά δομημένο και σημασιολογικό (semantic) document (ή αλλιώς markup), μετά να τo εμπλουτίζουμε και να το παρουσιάσουμε κατάλληλα με τους ανάλογους styling κανόνες (CSS) και τέλος ότι extra interactivity θα θέλαμε να υπάρχει να κατασκευαστεί με σωστή χρήση της Javascript.

Tsevdos.com - Javascript on

Tsevdos.com - Javascript off

Αντίθετα στο site του Pop+Rock εάν δεν έχετε την Javascript ενεργοποιήμένη δεν δουλεύει το κεντρικό μενού του site! Το συγκεκριμένο λάθος προκαλεί και πολλά SEO προβλήματα που έχω αναφέρει σε παλιότερο post (Ποτέ μην χρησιμοποιείτε μενού φτιαγμένα από Flash ή Javascript).

Pop+Rock - Javascript on

Pop+Rock - Javascript off

Απενεργοποιείστε την CSS

Με αυτόν τον τρόπο θα καταλάβενετε πως φαίνεται πραγματικά το document σας, τόσο στους text-only browsers και στους screen readers, όσο και στα bots των μηχανών αναζήτησης! H παρακάτω εικόνα παρουσιάζει το blog μου, χωρίς καθόλου styles. Όπως παρατηρείτε, το document δεν έχει χάσει απολύτως τίποτα ούτε σε περιεχόμενο ούτε σε δομή, ενώ συνεχίζει να είναι προσβάσιμο σε όλους! Το μόνο που έχει χάσει είναι τα styles του, τα οποία του δίνουν την τελική μορφή του…

Tsevdos.com - CSS off

Αυξήστε το text-size από τον browser σας

Απλό αλλά σημαντικό τεστ. Απλά αυξήστε το text-size στον browser σας τουλάχιστον δύο φορές (πατώντας Ctrl + +). Εάν το site δεν αλλοιώνεται πολύ και γενικότερα το αποτέλεσμα είναι ικανοποιητικό τότε δεν υπάρχει κανένα πρόβλημα. Εάν το site παραμορφώνεται αρκετά, χάνεται κείμενο πίσω από άλλα elements, κτλ., τότε θα πρέπει να ξανασκεφτούμε κάποιες αποφάσεις που πήραμε κατά την δημιουργία του design μας…

Κάντε validate τον κώδικα σας

Σαν τελικό τεστ, και γενικότερα όποτε τελειώνετε κάποιο site ή template, όσο μεγάλο ή μικρό και να είναι, κάντε μια επίσκεψη στους (X)HTML και CSS validators, και διορθώστε τα προβλήματα που μπορεί να εμφανιστούν κατά το validation… Όσο πιο γρήγορα αποφασίσετε να το κάνετε, τόσο πιο εύκολα και γρήγορα θα επιλύσετε αυτά τα προβλήματα! Και μην ξεχνάτε, valid κώδικας σημαίνει πιο σταθερά και ποιοτικά site, τα οποία θα αντέχουν στον χρόνο!

Η παραπάνω διαδικασία θα σας βοηθήσει να εντοπίσετε πάρα πολύ γρήγορα σχεδόν όλα accessibility προβλήματα που μπορεί να έχει το site σας! Καθόλου άσχημα δηλαδή για τα μόλις 10 λεπτά χρόνου που θα ξοδέψετε! Από εκεί και πέρα μένει να επιλύσετε τα προβλήματα που εντοπίσατε, όπου φυσικά είναι και το δύσκολο αλλά απαραίτητο βήμα έτσι ώστε να κάνετε προσβάσιμο (accessible) το site σας. Ελπίζω τα παραδείγματα οπού ανέφερα να ήταν σαφή και κατανοητά, μιας και ο ελληνικός κυβερνοχώρος χρειάζεται αρκετή δουλειά ακόμα στο θέμα accessibility… Μείνετε συντονισμένοι λοιπόν για να κάνουμε το internet μια πιο σταθερή και λειτουργική πλατφόρμα!

Web accessibility checklist

Ο Aaron Cannon είχε δώσει στην δημοσιότητα την προσωπική του web accessibility checklist, στην οποία αξίζει να ρίξετε μια ματιά, ιδιαίτερα εάν δεν έχετε και τόση εμπειρία στο θέμα web accessibility. Η συγκεκριμένη λίστα κυκλοφορεί πλέον και σε PDF μορφή για όσους θέλουν να την εκτυπώσουν και να βάζουν το πολυπόθητο tick στην λίστα μετά από κάθε έλεγχο του site! Τι περιμένετε λοιπόν, κατεβάστε την και χρησιμοποιήστε την, όλο και κάτι θα σας έχει ξεφύγει και θα μάθετε…

Η απόλυτη λίστα web accessibility και usability υπηρεσιών

Το Virtual Hosting blog δημιούργησε την πιο ολοκληρωμένη λίστα δωρεάν web accessibility και usability υπηρεσιών που έχω βρει μέχρι τώρα! Το post είναι εξαιρετικό, με αρκετές λεπτομέρειες για την κάθε υπηρεσία, και είναι must για όλους όσους ασχολούνται σοβαρά με το web design. Ετοίμαζα και εγώ κάτι σχετικό, αλλά πλέον δεν υπάρχει λόγος να ξαναγράφω τα ίδια πράγματα…

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

Πως να κάνετε το blog σας να ξεχωρίσει από την μάζα. (Μέρος πρώτο – Design και Theme)

Πολλοί φίλοι και γνωστοί με ρωτάνε να τους πω την άποψη μου για το design του blog τους, καθώς και συμβουλές για το πως μπορούν να το βελτιώσουν αισθητικά. Καταρχάς και πριν συνεχίσω με τις συμβουλές που τους δίνω, πρέπει να ξεκαθαρίσω πως αυτό που κάνει πραγματικά την διαφορά σε ένα blog, είναι το περιεχόμενο του, και τίποτα άλλο! Το design υπάρχει περίπτωση να μην το βλέπει και κανείς, όπως οι χρήστες που χρησιμοποιούν feed readers -λίγο ακραίο βέβαια το να μην το βλέπει κανείς, απλά θέλω πραγματικά να τονίσω πως το περιεχόμενο και η ποιότητα των post σας είναι αυτό που μετράει περισσότερο από όλα! Σαφέστατα όλα τα παρελκόμενα του blog, όπως το design για παράδειγμα, μπορούν να βοηθήσουν ένα ήδη καλό σε περιεχόμενο blog να πάει ακόμα καλύτερα, απλά ο γενικός κανόνας είναι ο εξής : Content is the king! Μετά από αυτήν την σημαντικότατη εισαγωγή για να αποφευχθούν οι παρεξηγήσεις, περνάμε λοιπόν και στο κυρίως θέμα του post.

Το πρώτο πράγμα που πρέπει να κάνει κάποιος είναι να επιλέξει το κατάλληλο theme για το blog του, το οποίο δυστυχώς δεν είναι εύκολη υπόθεση. Παρά την πληθώρα επιλογών που υπάρχει στο internet, ο blogger πρέπει να σκεφτεί καλά τι εκφράζει αυτόν αλλά και το blog του ως προς το ύφος, το θέμα του και την γλώσσα που θα χρησιμοποιήσει στο blog. Για παράδειγμα εάν το blog θα ασχοληθεί με κάποιο σοβαρό θέμα, θα πρέπει να πάμε σε πιο ουδέτερα χρώματα και συμβατικά σχέδια, ενώ εάν το στυλ γραφής και το θέμα είναι πιο ελεύθερο, μπορούμε να πάμε σε πιο artistic themes. Μόλις αποφασιστούν όλες αυτές οι πολύ σημαντικές λεπτομέρειες, μπορούμε να αρχίσουμε το ψάξιμο του κατάλληλου theme. Η συμβουλή μου πάντα σε αυτό το σημείο είναι απλή και σύντομη : Απλά διαλέξτε ένα όμορφο, απλό και ευκολο-προσάρμοστο (easy to cusomize) theme, και αποφύγετε εκείνα με τα πολλά γραφικά που “πνίγουν” το περιεχόμενο (εκτός και εάν έχετε σκοπό να δημιουργήσετε κάτι πολύ εξεζητημένο ή αρτίστικο). Αποφύγετε επίσης, και μην εντυπωσιάζεστε εύκολα με με τα fancy και trendy themes, τα οποία φορτώνουν το blog σας με πολλά γραφικά και χίλια-δυο άχρηστα πράγματα, που πολλές φορές δεν τα χρειάζεστε ή απλά δεν έχετε ιδέα τι κάνουν! Γενικότερα κοιτάξτε την ουσία και αγνοείστε τα υπόλοιπα!

Μιλώντας για ουσία, τα πράγματα που πρέπει να κοιτάξει κάποιος είναι τα εξής :

  • να είναι web standard valid
  • να αφήνει το περιεχόμενο να “αναπνέει”
  • να είναι γρήγορο στο downloading (είναι αρκετά σημαντικό, ιδιαίτερα για τα blog που στοχεύουν το ελληνικό κοινό)
  • να είναι ευανάγνωστο και να έχει όμορφο typography και ταιριαστές γραμματοσειρές
  • να έχει σωστά επιλεγμένα χρώματα και συνδυασμούς (έχω στραβωθεί άπειρες φορές από απαίσιους συνδυασμούς χρωμάτων!)
  • να είναι εύκολο στην χρήση (δεν χρειάζονται περίεργα navigation menus και επιλογές)
  • να μην χρησιμοποιεί ήχους, flash και άλλα αντίστοιχα ενοχλητικά plug in
  • να είναι καλογραμμένο (στον κώδικα εννοώ), τεσταρισμένο και εύκολο στο customize
  • να δουλεύει σε όλους τους mainstream browsers, αναλύσεις και λειτουργικά συστήματα
  • να είναι όσο πιο accessible γίνεται (σε screen readers, text browsers και κατ’ επέκταση σε search engine bots κτλ.)

Από εκεί και πέρα οι πιο έμπειροι χρήστες που θα πειράξουν και περαιτέρω το design τους έτσι ώστε να το φέρουν ακόμα πιο πολύ στα μέτρα τους (το customization που λέγαμε), καλό θα είναι να προσέξουν να μείνει web standard valid και να μην το παρακάνουν με τα plug-ins, banners, κουμπάκια, κτλ. γιατί τις περισσότερες φορές όλα αυτά περισσότερο μπερδεύουν παρά βοηθάνε τους τελικούς χρήστες. Τέλος προσπαθήστε να κρατήσετε κάποια ομοιογένεια σε όλο το blog (δεν χρειάζεται να αλλάζουν πολλά χρώματα, navigation bars, κτλ. από σελίδα σε σελίδα χωρίς ιδιαίτερο λόγο). Αυτά τα λίγα για το design και το theme του blog σας. Όποιος έχει να προσθέσει κάτι ας αφήσει ένα comment.

Το συγκεκριμένο post είναι μέρος ενός μεγαλύτερου άρθρου το οποίο σκοπεύω να τελειώσω σε πολλά μέρη (προς το παρόν έχω σκεφτεί 3, αλλά μπορεί να βγουν και περισσότερα). Σε κάθε post θα αναλύω-περιγράφω και μια διαφορετική πτυχή ενός blog και θα προτείνω συμβουλές για το πως αυτή μπορεί να βελτιωθεί έτσι ώστε το blog σας να ξεχωρίσει από την μάζα!