Armonía | En definitiva...

Retomando el tema de los microformatos, hoy me gustaría comentar un poco algunos aspectos del microformato destinado a marcar los datos de cualquier persona: hCard.

Tal y como se puede leer en la especificación, el microformato hCard está basado en el estándar vCard, y permite, usando las mismas propiedades que vCard, marcar con XHTML todos los datos de una persona de manera semántica. Gracias a este microformato, los autores de documentos Web podrán incluir datos vCard directamente en sus documentos con XHTML, sin necesidad de utilizar documentos vCard externos. Además, aplicaciones específicas podrán recopilar datos vCard directamente de los documentos.

El uso del microformato hCard es relativamente sencillo, tan sólo hay que seguir unas determinadas reglas, incluidas todas en la especificación del microformato.

Lo primordial es encerrar todas las etiquetas que vayan a englobar los datos personales en una etiqueta de nivel superior con un atributo class cuyo valor sea "vCard". Comunmente este elemento sera un div, pero conviene recordar que si podemos usar un elemento más adecuado, ya sea porque aporta más sentido semántico o por cualquier otro motivo, lo usaremos.

<div class="vcard">
<p>Juan Hurtado</p>
<p>Los Barrios, (Cádiz)</p>
<p><a href="mailto:juan.g.hurtado@gmail.com" title="e-Mail del autor del blog">juan.g.hurtado@gmail.com</a></p>
<p><a href="http://armonia.spiral-static.org/" title="Armonía | En definitiva...">http://armonia.spiral-static.org/</a></p>
</div>

Como podeis ver en el ejemplo anterior, he encerrado algunos de mis datos personales en un elemento div cuyo atributo class tiene como valor la cadena "vcard". Eso, según el microformato, indicará que los datos contenidos dentro del div van a corresponder a una serie de datos personales.

El siguiente paso sería marcar cada uno de los datos personales que contiene la etiqueta <div class="vcard">. Para marcar estos datos se sigue un proceso parecido al anterior, se marcan con el atributo class los elementos que contengan el dato al que deseemos dar un valor específico. Los valores que se deben poner en el atributo class vienen determinados por la especificación del estándar vCard.

Cada dato de la ficha vCard viene identificado por un identificador específico, así, en hCard, marcaremos cada dato con su identificador concreto en su atributo class. Siguiendo con el ejemplo anterior, marcaremos cada dato de forma correcta usando el microformato hCard:

<div class="vcard">
<p class="fn">Juan Hurtado</p>
<p class="adr"><span class="locality">Los Barrios</span>, (<span class="region">Cádiz</span>)</p>
<p><a class="email" href="mailto:juan.g.hurtado@gmail.com" title="e-Mail del autor del blog">juan.g.hurtado@gmail.com</a></p>
<p><a class="url" href="http://armonia.spiral-static.org/" title="Armonía | En definitiva...">http://armonia.spiral-static.org/</a></p>
</div>

Como podeis observar, he marcado cada dato de mi ficha hCard con su atributo class con el valor correspondiente al dato en cuestión. Esta ficha no está completa, existen infinidad de datos posibles. Los podeis encontrar todos en el perfil XMDP del microformato hCard, o bien en la especificación del estándar vCard

Los que yo he usado son:

class="fn"

Representa el friendly name de la persona a la que representa la vCard. La primera palabra contenida en la etiqueta marcada con este atributo corresponde al nombre del individuo, (class="n"), y la segunda al Family Name, o apellido familiar, (class="family-name")

class="adr"

Indica que todos los datos contenidos dentro de la etiqueta marcada con este atributo forman parte de la dirección del individuo.

class="locality"

Indica la localidad o ciudad donde vive el individuo. La etiqueta marcada con este atributo ha de estar englobada por otra etiqueta con class="adr".

class="region"

Indica la región, provincia, estado, etc. donde vive el individuo. La etiqueta marcada con este atributo ha de estar englobada por otra etiqueta con class="adr".

class="email"

Normalmente se usa en un elemento a. Indica la dirección de correo electrónico del individuo.

class="url"

Normalmente se usa en un elemento a. Indica la URL de la página personal del individuo.