Sector 7G

Microformatos, de hcard a vcard

Los microformatos nos permiten enriquecer nuestro código HTML dotándolo de semántica. De esta forma ciertos programas pueden extraer información del código HTML de una forma sencilla.

Entre otras cosas, nosotros podemos utilizar los microformatos para dar valor semántico a nuestros datos de contacto. Para ello se utiliza hcard, se trata de un estándar que define una serie de etiquetas que se deben poner en el código HTML para añadirle semántica. Podéis encontrar la especificación aquí.

Veamos un pequeño ejemplo. Quiero crear una pequeña sección en mi blog donde aparezcan mis datos de contacto. Para ello he escrito este código en HTML:

<div>
   <ul>
        <li><img alt="avatar" src="imagenes/avatar.png" /></li>
        <li>Pedro álvarez Fernández</li>
        <li>Junior Software Developer</li>
        <li></li>
        <li> sector7g@sector7g.com</li>
        <li>600 00 00 00</li>
        <li><a href="http://kartones.net/blogs/sector7g">Sector 7G</a></li>
    </ul>       
    <div style="display: none">
        <div>Nombre de mi empresa</div>
        <div>Calle de mi empresa</div>
        <div>
            <span>28000</span>, 
            <span>Madrid</span>,
            <span>Madrid</span>, 
            <span>España</span>
        </div>
    </div>
</div>

No está mal el código, pero de esta manera un programa no podrá extraer información de mi página de una forma sencilla, ya que se tendría que adaptar al formato que yo le he dado.

Lo yo quiero es que un programa sea capaz de generar una tarjeta Vcard para que la gente pueda descargar mis datos y agregarlos al Outlook. Así que he decidido hacer que mi código HTML sea semántico. Este es el resultado:

<div class="vcard">
   <ul>
        <li><div class="photo"><img alt="avatar" src="imagenes/avatar.png" /></div></li>
        <li><span class="fn given-name">Pedro álvarez Fernández</span></li>
        <li><span class="title">Junior Software Developer</span></li>
        <li></li>
        <li><span class="email">sector7g@sector7g.com</span></li>
        <li>
            <span class="tel" >
             <span class="type" style="display: none">cell</span>
             <span class="value">600 00 00 00</span>
            </span>
        </li>
        <li>
            <a class="url" href="http://kartones.net/blogs/sector7g">Sector 7G</a>
        </li>
    </ul>       
    <div class="adr" style="display: none">
        <div class="org"> Nombre de mi empresa</div>
        <div class="street-address"> Calle de mi empresa</div>
        <div>
            <span class="postal-code">28000</span>, 
            <span class="locality">Madrid</span>,
            <span class="region">Madrid</span>, 
            <span class="country-name">España</span>
        </div>
    </div>
</div> 

Ahora que mi código es semántico, ya sólo me queda encontrar un programa que sea capaz de entender este formato. Aquí podréis encontrar un programa para ello. Simplemente será necesario añadir un link que apunte a esta dirección "http://suda.co.uk/projects/X2V/get-vcard.php?uri=" más la ruta donde se encuentra la página con mis datos personales.

<a href="http://suda.co.uk/projects/
X2V/get-vcard.php?uri=http://kartones.net
/blogs/sector7g/archive/2007/07/03/microformatos.aspx">
Descarga Mi Tarjeta</a>

Como podéis ver de una tacada he conseguido hacer que los buscadores indexen mejor la información y sin ningún coste de desarrollo he conseguido hacer que las personas que visiten mi blog puedan obtener mis datos de contacto y agregarlos al Outlook.