XHTML tags που ξεχνάμε να χρησιμοποιήουμε (ενώ δεν θα έπρεπε)…

Αποφάσισα να γράψω αυτό το post για να διαφημίσω λίγο τα πιο “παρεξηγημένα”, κατά την γνώμη μου πάντα, XHTML tags. Δεν είναι λίγες οι φορές που θέλουμε να περιγράψουμε σημασιολογικά (semantically) κάποιο κομμάτι του περιεχομένου μας, αλλά δυστυχώς δεν γνωρίζουμε τον σωστό τρόπο. Πολλοί μάλιστα δεν έχουν τον χρόνο ή την διάθεση να ψάξουν, με αποτέλεσμα να μην χρησιμοποιούνται τα σωστότερα tags για την κάθε δουλειά. Με αυτό το post λοιπόν, θα προσπαθήσω να παρουσιάσω κάποια πολύ βολικά XHTML elements τα οποία δεν χρησιμοποιούνται όσο θα έπρεπε στο ελληνικό web. Έχουμε και λέμε λοιπόν :

Definition Lists

Οι συγκεκριμένες λίστες αποτελούνται από ένα ζευγάρι, όρου και περιγραφής. Με αυτόν το απλό τρόπο, μπορούμε να περιγράψουμε ένα κομμάτι περιεχομένου που περιέχει όρους και τις περιγραφές τους. Παρακάτω ακολουθεί και ένα πολύ απλό παράδειγμα.

<dl>
<dt>Tsevdos.com</dt>
<dd>Blog για το web design και development</dd>
</dl>

Fieldset και legend

Το Fieldset καθώς και το legend, είναι δύο από τα πιο σημαντικά tags που σπανίως συναντάω σε ελληνικά sites. Μία φόρμα μπορεί να χωριστεί, ανάλογα με τα δεδομένα που συλλέγει, σε διάφορα fieldsets, ενώ το κάθε fieldset μπορεί να έχει και ένα περιγραφικό legend. Έτσι πχ. μπορούμε να έχουμε ένα fieldset για προσωπικά δεδομένα, ένα για θέματα επικοινωνίας, κοκ.

<form>
<fieldset>
<legend>Personal Info:</legend>
<label for="name">Name: <input type="text" id="name" /></label>
<label for="surname">Surname: <input type="text" id="surname" /></label>
</fieldset>
<fieldset>
<legend>Address:</legend>
<label for="street">Sreet : <input type="text" id="street" /></label>
<label for="city">City: <input type="text" id="city" /></label>
<label for="zip">Zip Code: <input type="text" size="30" /></label>
</fieldset>
</form>

Caption και Summary

Το caption element μας δίνει την δυνατότητα να περιγράψουμε τι περιέχει ο πίνακας (table) μας. Το summary attribute πάει ακόμα ένα βήμα παραπέρα, και μας επιτρέπει να περιγράψουμε ακόμα πιο αναλυτικά τον πίνακα, για τους χρήστες που χρησιμοποιούν screen readers και text-only browsers.

<table summary="Ο παρακάτω πίνακας δίνει το character entity κωδικό
για όλα τα σύμβολα της HTML4.">
<caption>Σύμβολα της HTML4</caption>
...</table>

Βlockquote, abbr, cite και acronym

Ακόμα 4 πολύ χρήσιμα tags… Εάν το κείμενο σας περιέχει κάποιο quote, abbreviation, αναφορά (cite) σε κάποιο άλλο site/έγγραφο, ή είναι ακρώνυμο, απλά χρησιμοποιήστε τα ανάλογα tags! Με αυτόν τον τρόπο και κάνετε πιο semantic το κείμενο σας, ενώ ταυτόχρονα έχετε και πολύ περισσότερα elements για να δημιουργήσετε ενδιαφέροντα εφε στα styles και την Javascript σας (και να κάνετε το site σας ομορφότερο φυσικά). Το ξέρω πως κάθε αρχή είναι και δύσκολη, αλλά με λίγη υπομονή θα σας γίνει συνήθεια…

<blockquote cite="http://www.tsevdos.com/2009/04/28/mobifyme/">
<p>Η υπηρεσία ονομάζεται Mobify και σου επιτρέπει να δημιουργήσεις
σχετικά εύκολα μια custom mobile έκδοση του site σου.</p>
</blockquote>
<abbr title="Limited">Ltd.</abbr>
<cite cite="http://www.tsevdos.com/2009/05/22/maka-site/">Το πιο
τραγικό site που έχει φτιαχτεί!</cite>
<acronym title="Web Content Accessibility Guidelines">WCAG</acronym>

Τα καλύτερα links – Φεβρουάριος 09

Με καθυστέρηση μιας εβδομάδας βγαίνουν τα links του Φεβρουαρίου, ωστόσο έχω καλή δικαιολογία γι αυτήν την καθυστέρηση… Λίγο η δουλειά στο τέλος του μήνα, αλλά το χειρότερο, το σπάσιμο του χεριού μου σε 3 σημεία (2 λάμες και 32 ράμματα!), με έκαναν να καθυστερήσω κάπως αυτό το post. Δεν έχω να μοιραστώ πολλά links μαζί σας αυτόν τον μήνα, ωστόσο αυτά που παρουσιάζω είναι πολύ ενδιαφέροντα. Έχουμε και λέμε λοιπόν :

Web Development

Tools

  • Ο WYMeditor είναι ένας δωρεάν, web-based, WYSIWYG (What You See Is What You Get) XHTML editor. Τον χρησιμοποιούν πολλές γνωστές web εφαρμογές, που σημαίνει ότι είναι δοκιμασμένος, δουλεύει καλά και υποστηρίζει τους περισσότερους browsers! Τι άλλο να ζητήσει κάποιος από έναν τέτοιον editor.
  • Άλλος ένας δωρεάν και open source WYSIWYG HTML editor, με το περίεργο όνομα Xinha. Και αυτός ο editor φαίνεται πολύ οργανωμένος και δουλεμένος, οπότε διαλέγεται και παίρνεται!

Plug ins

  • Το Simpletip είναι ένα χρήσιμο jQuery plug in, για tooltips. Απλό, εύκολο και με πολλές δυνατότητες παραμετροποίησης.
  • Άλλο ένα εντυπωσιακό jQuery plug in είναι το Slide box. Αν και μου αρέσουν τέτοιου είδους εφέ δεν ξέρω κατά πόσο πρακτικά και accessible είναι τελικά.

Blogs

Web 2.0

  • To Zemanta είναι ένα πολύ ενδιαφέρον semantic web εργαλείο. Μπορείτε να το χρησιμοποιήσετε σαν plug in σε πολλούς browsers ή να το ενσωματώσετε στις υπηρεσίες που χρησιμοποιείτε (e-mail, blogging, κτλ.). Τώρα εάν σας βοηθήσει ή κατά πόσο semantic στοιχεία βρίσκει (μιας και το web δεν είναι ιδιαίτερα semantic αυτήν την στιγμή), είναι άλλο θέμα.