tsevdos.com

Web design, internet news and blogging tips

Εύκολα στην υλοποίηση accessibility tips : Extra navigation για text browsers / screen readers (και όχι μόνο)

| Filed under accessibility and usability markup

Η αλήθεια είναι πως όσο καλός και ενημερωμένος να είσαι στο χώρο του web, πάντα υπάρχει κάτι καινούργιο να μάθεις. Επειδή λοιπόν και εγώ πρόσφατα (πριν από έναν χρόνο για την ακρίβεια, αλλά ας μείνουμε στο πρόσφατα), ανακάλυψα μερικά ενδιαφέροντα και πολύ εύκολα στην υλοποίηση accessibility tips, θα τα παρουσιάσω σε αυτή την μίνι σειρά post.

Οι περισσότεροι γνωρίζετε το link element που βάζουμε στο head κομμάτι του κώδικα μας, και δηλώνει πως το εν λόγω document έχει κάποια σχέση (relationship – rel) με κάποιο άλλο document ή πηγή. Ο πιο κλασικός τρόπος χρήσης του είναι η εισαγωγή κάποιου εξωτερικού stylesheet (CSS), όπως για παράδειγμα :

<link rel="stylesheet" href="default.css" type="text/css" media="screen" />

Αυτό που δεν γνωρίζουν οι περισσότεροι, είναι πως με το εν λόγω element μπορούμε να προσφέρουμε επιπλέον navigation χαρακτηριστικά στους χρήστες screen readers, text browsers αλλά και σε κάποιους κανονικούς browsers (όπως Opera) οι οποίοι αρχίζουν να υποστηρίζουν και αυτήν την ιδιότητα του link element. Μερικά παραδείγματα και τρόπους χρήσης του μπορείτε να δείτε παρακάτω :

<link rel="home" title="Home" href="http://www.tsevdos.com/" />
<link rel="prev" title="Title of previous page" href="http://www.tsevdos.com/</code><code>previous-page" />
<link rel="next" title="Title of next page" href="http://www.tsevdos.com/</code><code>next-page" />

Όπως βλέπεται η χρήση του είναι πανεύκολη και τα πλεονεκτήματα αρκετά, έτσι ώστε να το χρησιμοποιήσουμε.

Τέλος το συγκεκριμένο tag μπορεί να χρησιμοποιηθεί και για άλλους σκοπούς, όπως για παράδειγμα στο να ενημερώσει τις μηχανές αναζήτησης εάν το περιεχόμενο της σελίδας μας υπάρχει και σε άλλες γλώσσες ή σε άλλη μορφή. Παρακάτω μπορείτε να βρείτε τα ανάλογα παραδείγματα, ωστόσο δεν θα σταθώ πολύ σε αυτά μιας και θέλω στο συγκεκριμένο post να συγκεντρωθώ κυρίως στο θέμα προσβασημότητας/accessibility. Όπως και να έχει ρίξτε οπωσδήποτε μια πιο λεπτομερή ματιά στο link element και δεν θα χάσετε.

<link lang="fr" title="La documentation en Fran&ccedil;ais" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html">
<link media="print" title="The manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps">
<link rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html">

Μείνετε συντονισμένοι και για τα επόμενα!

Το τέλος της ΧHTML2…

| Filed under markup news

H XHTML2 πεθαίνει και επίσημα πλέον, μιας και το W3c group ανακοίνωσε πως μέχρι το τέλος του 2009 θα σταματήσουν όλες οι εργασίες του XHTML2 group. Ανακοίνωσε επίσης πως τα μέλη του XHTML2 working group θα ενισχύσουν την ομάδα της HTML5, οπότε ο νικητής πλέον είναι ξεκάθαρος (αν και αυτό το γνωρίζαμε τουλάχιστον 2 χρόνια νωρίτερα, απλά περιμέναμε και μια πιο επίσημη ανακοίνωση).

Η markup που θα μας απασχολήσει στο μέλλον λοιπόν είναι η HTML5, οπότε αρχίστε να ενημερώνεστε! Ήδη έχουν κυκλοφορήσει κάποιοι τρόποι για να την χρησιμοποιήσετε εδώ και τώρα, μιας και πολλοί καινούργιοι browsers ήδη υποστιρίζουν αρκετά χαρακτηριστικά της, ενώ στους παλιότερους (και στον IE) θα πρέπει να δημιουργήσετε τα HTML5 elements που χρησάζεστε σε Javascript (μια όχι και τόσο καλή ιδέα) για να τους προσθέσετε styles. Προσωπικά απλά ενημερώνομαι και μόλις τα πράγματα υποστιριχθούν όσο πρέπει, θα είμαστε πανέτοιμοι για το μεγάλο switch…

Τα καλύτερα links – Ιούνιος 09

| Filed under links

Έμπνευση

  • 1 γραμμή CSS grid framework : Το έβαλα πιο πολύ για έμπνευση και όχι σαν web design εργαλείο, μιας και δεν το θεωρώ framework. Παραδέχομαι ωστόσο τον τύπο που το έφτιαξε γιατί με λίγη φαντασία και με ακόμα λιγότερο κώδικα, έφτιαξε κάτι που μπορεί να κοντράρει κάποια πολύ πιο advanced CSS frameworks…

Web Design

  • Adobe BrowserLab : Μια επώνυμη και δωρεάν (προς το παρόν) υπηρεσία, για να ελέγχεται τα sites σας σε πολλούς συνδυασμούς browsers και OS.

Web Development

  • Ο φίλος, συνάδελφος και παλιός συμμαθητής μου John D.Wells, το έχει ρίξει τώρα τελευταία στο Expression Engine, με αποτέλεσμα να δημιουργήσει μία πολύ ενδιαφέρον λίστα από links για τους νέους αλλά και τους πιο έμπειρους ΕΕ developers. Εγώ πάντως της έριξα μια ματιά και ήδη αρχίζω να μπαίνω στην EE λογική…
  • Perch : Το πιο απλό και εύκολο στην χρήση CMS που έχετε δει!
  • Moousture : Η πρώτη mouse gesture Javascript library.
  • To prettyPrint είναι μια πολύ καλή λύση για Javascript debugging. Δείτε το videακι και θα καταλάβετε αμέσως τι κάνει…
  • Το JSLint, είναι για πολλούς Javascripts experts ο Javascript validator! Τον έχει φτιάξει ο guru του είδους, Douglas Crockford.

Browsers

  • Ο Opera Unite, ακούγεται σαν μια πολύ καλή ιδέα, ωστόσο έχω την αίσθηση πως έχει πολύ πολύπλοκα concepts για απλούς χρήστες. Οι πιο έμπειροι την βρίσκουν με Firefox, οπότε πάλι δεν τον βλέπω καλά τον πολύ δυνατό Opera Unite

Search Engine Optimization (SEO)

Accessibility/Usability

  • 10 φτηνές λύσεις/εργαλεία για usability tests. Η αλλιώς απ’ το ολότελα καλή και η Παναγιώταινα…
  • Ακόμα μια καλή κίνηση από την Adobe, η οποία έχει πάρει φόρα τώρα τελευταία. Στο καινούργιο της blog λοιπόν, με τίτλο Adobe Accessibility, ενημερώνει τους χρήστες των προγραμμάτων της για τα accessibility χαρακτηριστικά τους, καθώς και για το πως να τα χρησιμοποιούν με τον σωστό τρόπο. Μπράβο της, και μακάρι όλες οι εταιρείες να έκαναν κάτι ανάλογο…

Plug ins

  • jQuery TOOLS : Μια συλλογή από plug ins, για να δημιουργήται εύκολα και γρήγορα τα πιο κλασικά web 2.0 εφέ… Κάτι που κατά την γνώμη μου έπρεπε να υπάρχει στο jQuery UI.
  • jMonthCalendar : Ακόμα ένα calendar plug in για το jQuery, με πολλά features και δυνατότητες.

Blogs

  • Ότι θα θέλατε να μάθετε για την HTML5, αλλά φοβόσασταν να ρωτήσετε, βρίσκεται στο blog HTML5 Doctor… Το δημοσίευσε και η sugar στο CSS3 (από εκεί το είδα) αλλά δεν θα τους χαλάσει ένα ακόμα back link… Αξιοσημείωτο είναι πως το blog τους είναι φτιαγμένο με HTML5!