hCard vCard

Los microformatos están de moda. Cada vez se habla más sobre ellos y muchos los recomendamos, intentamos difundirlos y apostamos por su uso. Pero suele haber una pregunta recurrente cuando hablamos del tema ¿Qué utilidades tienen?.

Podemos contestar que constituyen una buena práctica, que aportan semántica a nuestra web, que facilitan el procesamiento de nuestro código por terceras partes… pero a veces es complejo poner ejemplos concretos.

Hace poco tiempo explicaba en tripix.net cómo la extensión de Firefox, Operator, trabaja con los microformatos, hoy vamos a ver otra interesante aplicación: cómo hacer que cuando la información de contacto en una web, microformateada con hcard, se exporte directamente a vCard, un formato de archivo estandarizado que para el intercambio de datos de contacto que entienden la práctica totalidad de las aplicaciones de agenda (Thunderbird, iCal, Outlook, etc.)

El microformato en nuestra página

Vamos a utilizar un ejemplo muy sencillo en el que mostramos mis datos de contacto. El código que utilizaríamos para poner esta información en nuestro código xHtml sería el siguiente.

<div class="vcard">
<a class="url fn" href="http://sentidoweb.com/">Xose Pita</a>
<br />
<div class="adr">
<span class="locality">Granada</span>, <span class="country-name">España</span>
</div>
<div class="org">Sentido Web</div>
</div>

Pasando de hCard a Vcard

Para esto utilizaremos una pequeña utilidad que ha desarrollado Brian Suda, uno de los grandes evangelistas de los microformatos, y que mediante PHP y XSLT (lenguaje que permite transformar cualquier documento XML a otra sintaxis) convierte la información de contacto microformateada que encuentre en una url a formato vCard.

Solamente es necesario enlazar con la dirección http://suda.co.uk/projects/X2V/get-vcard.php y pasarle por GET el parámetro "uri" con la url donde está la información de contacto. Por ejemplo:

<a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://sentidoweb.com/about/">Guardar tarjeta de contacto</a>

Útil y fácil, así que Descargar mi tarjeta de contacto.

Podéis ver un ejemplo práctico ya con CSS en mi perfil de Sentido Web.

Vía / Shape Shed