Nel post scorso si è parlato di come creare una sqeeze page, oggi voglio cambiare totalmente argomento e parlare di un aspetto che mi è molto caro anche se spesso è sottovalutato.
Quando si parla di semantica, chi non ha una conoscenza perfetta di HTML e “seguito” (css, javascript, ecc…) sente le pupille rovesciarsi all’indietro ed è costretto a cambiare argomento per riprendersi.
NOTA: Un buon blogger non dovrebbe mai copiare il post di un altro, ma nel mio caso voglio copiare un post di me stesso, scritto su un vecchio blog che è stato chiuso appena nato, causa querele…vabbé… eccolo qui.
I fattori che rendono un sito semantic-friendly sono esclusivamente on page, quindi con qualche aggiunta, modifica e spuntatina ai nostri codici Html riusciamo a costruire una buona base di partenza.
Vediamo un po’ come implementare i microformati (tra cui hAtom, hCalendar, hCard, hReview, XFN)
Innanzitutto va premesso che per ogni microformato esiste un particolare vocabolario di termini che vanno usati in punti diversi dei tag HTML della pagina. Ad esempio alcuni andranno inseriti come class di un tag, altri nell’attributo rel. Cominciamo proprio da qui:
Implementare XFN
Forse il più intuitivo dei microformati semantici, molto semplice da inserire nelle nostre pagine.
XFN serve per rappresentare relazioni umane attraverso i link, quindi all’interno dell’attributo rel dovremo inserire valori come “friend” se stiamo linkando il blog di un nostro amico, oppure “met colleague” se stiamo indicando il sito di un collega incontrato di persona. La sintassi è molto semplice e potete vedere come funziona qui .
Esempio: <a href="http://sito.ext" rel=”co-worker”>Il sito di un mio collaboratore</a>
hAtom, hCard, hCalendar e hReview (e simili)
La tecnica per implementare tutti questi formati è molto simile. Prendiamo come esempio hReview che serve per rendere semantic-friendly le recensioni di prodotti, servizi, ecc. Rubo l’esempio da qui e lo riporto.
Facendo la recensione di un ristorante, il nostro codice “non semantico” potrebbe assomigliare a questo:
<div>
<span>5 stars out of 5 stars</span>.
<h4>Crepes on Cole is awesome</h4>.
<span>Reviewer: <span>Tantek</span> - April 18, 2005</span>.
<blockquote><p>.
Crepes on Cole is one of the best little creperies in San Francisco.
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I’ve had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi.
</p></blockquote>.
<p>Visit date: <span>April 2005</span></p>.
<p>Food eaten: <span>Florentine crepe</span></p>.
</div>
Per renderlo semantic friendly è necessario semplicemente fare qualche aggiunta (in rosso):
<div class=”hreview”>.
<span><span class=”rating”>5</span> out of 5 stars</span>.
<h4 class=”summary”>Crepes on Cole is awesome</h4>.
<span class=”reviewer vcard”>Reviewer: <span class=”fn”>Tantek</span> -
<abbr class=”dtreviewed” title=”20050418T2300-0700″>April 18, 2005</abbr></span>.
<div class=”description item vcard”><p>.
<span class=”fn org”>Crepes on Cole</span> is one of the best little
creperies in <span class=”adr”><span class=”locality”>San Francisco</span></span>..
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I’ve had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi..
</p></div>.
<p>Visit date: <span>April 2005</span></p>.
<p>Food eaten: <span>Florentine crepe</span></p>
</div>
Così a occhio può sembrare complicato, ma quello che ho fatto è molto semplice.
Ho selezionato i dati chiave della recensione utilizzando l’attributo class. Ovviamente non ho inventato le classi, ma le ho prese dal vocabolario delle specifiche hReview.
I casi sono 3:
- il valore si trova già racchiuso perfettamente dentro un tag
<h4 class=”summary”>Crepes on Cole is awesome</h4>
quindi aggiungo semplicemente la classe “sommario” della revisione - il valore è all’interno di tag, ma ci sono altri contenuti
<span><span class=”rating”>5</span> out of 5 stars</span>
allora separo il valore puro (5) con il tag span e gli do la classe “voto” della revisione - il valore non è rappresentato correttamente
<abbr class=”dtreviewed” title=”20050418T2300-0700″>April 18, 2005</abbr>
usando l’attributo title specifico il valore vero, se non voglio visualizzarlo nella pagina
Ora non sto a fare esempi per ogni microformato, li potete trovare nelle pagine dedicate, e sono tutti molto simili. L’unica difficoltà, se vogliamo, sta nel ricordare le classi da utilizzare. Un po’ di pratica e diventarà naturale come aggiungere delle meta keyword!
Lascia un commento