El Comercio Digital

Webmaster Libre

Subtitulo del blog

Usos reales de los microformatos: Información de contacto en un click

Seguro que todos hemos tenido alguna vez la necesidad de facilitar, mediante una página web, direcciones y teléfonos de contacto. Lo ideal sería poder ofrecer toda esa información de la forma más cómoda posible para nuestros usuarios, en formato vcard, para que puedan importarlo de forma sencilla en sus gestores de contactos.

Lo que, en principio, puede parecer una tarea complicada se simplifica mucho gracias a los microformatos, en concreto hcard y a Brian Suda, que ha creado un comodísimo script con el que podemos convertir nuestras hcard en vcards.

Pero, vamos por partes. lo primero que debemos hacer es crear nuestra hcard. Como sabéis, los microformatos no son más que una forma de añadir mayor valor semántico al XHTML mediante el uso de determinadas clases. Por tanto, podréis incorporarla a cualquier página sin problemas y darle estilo con toda la libertad del mundo. Para no alargarnos mucho, vamos a crear nuestra hcard con el hcard creator.

La mía queda más o menos así:

  1. <div class="vcard">
  2.  <a class="url fn" href="http://www.webmasterlibre.com">Alma Fernández</a>
  3.  <div class="org">Webmaster Libre</div>
  4.  <a class="email" href="mailto:endlessgrief(en)gmail(punto)com">endlessgrief(en)gmail(punto)com</a>
  5.  <div class="adr">
  6.   <span class="country-name">España</span>
  7.  
  8.  </div>
  9. <!-- Creado con el hCard Creator-->
  10. <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>
  11. </div>

Y se ve así:

Alma Fernández

Webmaster Libre

España

This hCard created with the hCard creator.

Bien, ahora que ya tenemos nuestra hcard sólo queda transformarla en una vcard y facilitarla a nuestros usuarios. Para ello sólo tendremos que incluir un enlace al script de Brian Suda con la url de la página en la que reside nuestra hcard.

  1. <a href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http://www.webmasterlibre.com">

Descarga mis datos de contacto como vCard

En Shape Shed, donde descubrí el script conversor, llevan más allá la parte estética de este método. Eso ya es cosa tuya, recuerda, no es más que XHTML así que tu imaginación es el límite.

Otras entradas

Esta entrada fue publicada por Alma Fernández el Miércoles, 28 de Febrero de 2007 y está archivada en: (x)HTML, Recursos. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)