Microformats – afegint semàntica a les nostres webs

2006/08/26
17:33

Mussol

Reading time: 189 – 315 minutes

Després de força temps sense veurens en persona, ahir vaig passar quasi tot el dia amb l’Ernest. Varem tenir molta feina actualitzant-nos de mil i un temes personals, professionals i de tot tius. En una de les les nostres converces va sortir el tema dels microformats. De fet, el tema em sonava però no tenia ni idea de que anava i realment ho vaig trobar molt bona idea, sobretot de cara a fer més potents a nivell semantic els nostres continguts en format xHTML.

Una petita descripció de què és això dels microformats podria ser la que donen a un bon article que vaig trobar de casualitat Add microformats magic to your site (local).

Els microformats són:

simples
basats en HTML
dades amb format
basats en formats ja existents
basats en pràctiques ja habituals pels creadors de continguts

l’objectiu és afegir un sentit semàntic als continguts web actuals, i permetre la millor intereacció amb serveis descentralitzats:

sense perdre compatibilitat amb els navegadors
ni les eines de desenvolupament
sense requerir nous coneixements als desenvolupadors

Tot això que sona tan extrany seria tan senzill, per exemple, com quan en el nostre blog ens referim a una direcció postal encomptes d’usar aquest possible codi:

<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Oriol Rius<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>movilpoint new concept,s.l.<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>oriol@movilpoint.com<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Passeig Ferrocarrils Catalans, 117 oficina 9<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Cornellà de Llobregat<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Barcelona<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>08940<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Tlf. +34 93 470 90 80<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/p</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>

Doncs si escribissim el mateix codi respectant la sintaxis del microformat anomenat hCard:

<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">div</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"vcard"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">a</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"url fn"</span> <span style="color: #2040a0;">href=</span><span style="color: #008000;">"http://www.movilpoint.com"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Oriol Rius<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/a</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>4
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">div</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"org"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>movilpoint new concept,s.l.<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">a</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"email"</span> <span style="color: #2040a0;">href=</span><span style="color: #008000;">"mailto:oriol@movilpoint.com"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>oriol@movilpoint.com<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/a</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">div</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"adr"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">div</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"street-address"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Passeig Ferrocarrils Catalans, 117 oficina 9<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">span</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"locality"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Cornellà de Llobregat<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/span</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">span</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"region"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>Barcelona<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/span</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">span</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"postal-code"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>08940<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/span</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">div</span> <span style="color: #2040a0;">class=</span><span style="color: #008000;">"tel"</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>+34 93 470 90 80<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>
<span style="color: #2040a0;"><strong><span style="color: 4444ff;"><strong><</strong></span><span style="color: #2040a0;">/div</span><span style="color: 4444ff;"><strong>></strong></span></strong></span>

Com ja he comentat lo bo és que això serà interpretat com una vCard per les aplicacions de tercers que suportin el microformat hCard, per exemple, google, zimbra, etc.