Microformatos: añadir significado al HTML

4min

El HTML de por si, nos proporciona cierto significado, cierta carga semántica, a través de sus etiquetas: H1 es un título, blockquote es una cita, etc.

Pero, ¿se podría decir que “algo” es una dirección, una fecha, un…? Ahora si gracias a los microformatos.

Los microformatos no son un nuevo lenguaje, aprovechan las etiquetas y atributos estándar del (X)HTML para asignar información semántica a porciones de código. Para ello, hacen uso sobre todo de los atributos id y class.

Con solo cambiar la manera de marcar el (X)HTML de las páginas web, se puede conseguir, que ciertos datos se puedan usar más allá  del navegador y contribuir así a la creación de nuevos servicios en combinación con los datos de los demás.

Si sabemos reconocer un evento con su fecha dentro de una página, es muy sencillo integrar esa información en un calendario personal, por ejemplo.

Los microformatos permiten recoger datos de forma sencilla y poder volcarlos a otras aplicaciones.

Recogiendo algunas definiciones, podemos decir que los microformatos son un “atajo rápido” para la Web Semántica.

Siguiendo las convenciones reconocidas por Microformats.org podemos hacer minibloques con significado dentro de una página web y pueden ser reutilizados por otros sitios o aplicaciones. Estos bloques facilitan a los usuarios, compartir, mover, coger… dichos datos. Ofreciendo datos de carácter personal, organización y eventos.

En el ejemplo siguiente, podemos ver un minibloque con datos personales como los que pueden constituir una tarjeta de visita:

<div class='contacto'>
	<p class='empresa'>Arsys Internet S.L.</p>
	<p><a href='mailto:soporte@arsys.es'>soporte@arsys.es</a></p>
	<p>Madre de Dios 21 - Logroño, La Rioja. 26004 España</p>
	<p>+34 941 620 100</p>
</div>

Este código es correcto, y podemos entender que significado tiene cada etiqueta. Con los microformatos, simplemente se estandariza la forma en que lo decimos.

Podemos aprovechar los atributos class y reciclar el código para hacer que esos datos puedan ser usados de forma sencilla por otros usuarios… y construir un microformato hCard.

<div id='hcard-Juan-Pedro-Gutierrez' class='vcard'>
	<a class='url fn n' href='/blog'>
		<span class='given-name'>Juan</span>
		<span class='additional-name'>Pedro</span>
		<span class='family-name'>Gutierrez</span>
	</a>
	<div class='org'>Arsys Internet S.L.</div>
	<a class='email' href='mailto:webmaster@arsys.es'>webmaster@arsys.es</a>
	<div class='adr'>
		<div class='street-address'>Madre de Dios 21</div>
		<span class='locality'>Logroño</span>,
		<span class='region'>La Rioja</span>,
		<span class='postal-code'>26004</span>
		<span class='country-name'>España</span>
	</div>
	<div class='tel'>+34 941 620 100</div>
</div>

Además de a los contactos, a los vCard, podemos aplicar microformatos a otros muchos tipos de contenido: contactos (hCard), eventos (hCalendar), votaciones, (vote-links), críticas (hReview), curricula (hResume), etiquetas (rel-tag), licencias (rel-license), en un blog (hAtom), listados e índices de documentos (XOXO), redes sociales (XFN)…

Aunque su uso no está todavía demasiado extendido, es fácil ver las posibilidades que nos dan los microformatos. Un ejemplo práctico es el buscador sobre contenido con licencia Creative Commons desarrollado por Yahoo . Para indexar estos contenidos, identifica aquellos marcados con la etiqueta rel-license.

Gracias a los microformatos ya podemos construir una comunidad en la que podamos intercambiar datos de interés de forma automática y sencilla.

Alberto Blanch

Artículos relacionados

Productos relacionados: