Microformats – afegint semàntica a les nostres webs
2006/08/26
No Comments
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.