hCard

De Wikipedia, la enciclopedia libre
Saltar a: navegación, búsqueda

hCard es un microformato destinado a marcar los datos de cualquier persona o entidad añadiendo un contenido semántico a los mismos y permitiendo de esta forma que tanto máquinas como personas puedan procesarlos y entenderlos.

Está basado en el estándar vCard y mantiene las mismas propiedades utilizando código XHTML.[1]

Ejemplos[editar]

El siguiente ejemplo es lo que tendríamos en código XHTML sin marcado semántico con hCard, como podemos ver una persona lo entendería perfectamente pero no una máquina, que simplemente podría procesarlo:

<p>
        <strong>Guillermo García</strong><br />
        Calle falsa, 1<br />
        una ciudad, un país<br />
        989-99-99-99
</p>
Resultado

Guillermo García
Calle falsa, 1
una ciudad, un país
989-99-99-99

Aplicando microformatos[editar]

El siguiente ejemplo aplicaría el microformato, como se observa para el humano el resultado es idéntico pero una máquina ahora si podría comprender la información que está procesando.

<div class="vcard">
        <strong class="fn n">
                <span class="given-name">Guillermo</span> <span class="additional-name">García</span>
        </strong><br />
        <p class="adr">
                <span class="street-address">Calle falsa 1</span><br />
                <span class="locality">una ciudad</span>, <span class="country-name">un país</span>
        </p>
        <p class="tel">989-99-99-99</p>
</div>
Resultado
Guillermo García

Calle falsa 1
una ciudad, un país

989-99-99-99

Aplicando microformatos y elementos semánticamente[editar]

Por último, esta sería una versión más semántica aún ya que utiliza elementos con sentido, con significado, como lo sería una lista de propiedades del contacto:[2]

<ul class="vcard">
        <li class="fn n">
                <strong class="given-name">Guillermo</strong>
                <strong class="additional-name">García</strong>
        </li>
        <li class="adr">
                <span class="street-address">Calle falsa 1</span><br />
                <span class="locality">una ciudad</span>, 
                <abbr class="region" title="Una región">UR</abbr>, 
                <span class="postal-code">94301</span>, 
                <abbr class="country-name" title="Un país">UP</abbr>
        </li>
        <li class="tel"><strong class="type" title="Teléfono del trabajo">Work</strong>: <span class="value">989-99-99-99</span></li>
</ul>
Resultado
  • Guillermo García
  • Calle falsa 1
    una ciudad, UR, 94301, UP
  • Work: 989-99-99-99

Más semántico aún[editar]

O incluso con más sentido aún usando una lista de definiciones, en este caso definiciones de los atributos del contacto,[3] aunque en el caso de una dirección el elemento más semántico sería <address>[2]
Vamos a usar a Wikimedia Foundation Inc. como ejemplo:

<dl class="vcard">
        <dt class="fn n org"><strong>Wikimedia Foundation Inc.</strong></dt>
        <dd><address class="adr">
                <span class="street-address">149 New Montgomery Street</span>, (3.ª planta)<br />
                <span class="locality">San Francisco</span>, 
                <abbr class="region" title="California">CA</abbr>, 
                <span class="postal-code">94301</span>, 
                <abbr class="country-name" title="Estados Unidos">E.E.U.U.</abbr></address>
 
                <dl>
                        <dt class="tel type" title="Teléfono del trabajo">Work</dt> <dd class="tel value">+1-415-839-6885</dd>
                        <dt class="email type" title="Correo electrónico del trabajo">Work</dt> <dd class="email">info@wikimedia.org</dd>
 
                        <!-- Si añadimos Geodatos extra quedaría así: -->
                        <dt>Ubicación:</dt>
                        <dd class="geo">
                                <ul class="geo">
                                <li class="latitude" title="37.786928"><abbr title="Norte">N</abbr> 37° 47.216</abbr></li>
                                <li class="longitude" title="-122.399647"><abbr title="Oeste">W</abbr> 122° 23.979</li>
                                </ul>
                        </dd>
                </dl>
        </dd>
</dl>
Resultado
Wikimedia Foundation Inc.

149 New Montgomery Street, (3.ª planta)
San Francisco, CA, 94301, E.E.U.U.

Work
+1-415-839-6885
Ubicación:
  • N 37° 47.216
  • W 122° 23.979

Conclusión[editar]

Si usas un navegador web como Google Chrome (o Chromium) o Firefox junto a algún plugin para microformatos, podrás comprobar, dependiendo del plugin, que están disponibles las tarjetas de contacto automáticamente con solo acceder a esta página.
Por lo tanto, los microformatos han permitido que una máquina (el ordenador con el software del navegador) pueda entender dichos datos y procesarlos para un uso determinado; en este caso la obtención de una tarjeta de contacto.

Referencias y notas[editar]

  1. Çelik, Tantek; Cederholm, Dan, et ál. (27 de febrero de 2011 -actualizado-). «hCard 1.0 · Microformats Wiki» (en inglés). Microformats.org. microformats.org. Consultado el 11 de marzo de 2011.
  2. a b Çelik, Tantek; Cederholm, Dan, et ál. (9 de noviembre de 2010 -actualizado-). «hCard examples · Microformats Wiki» (en inglés). Microformats.org. microformats.org. Consultado el 11 de marzo de 2011.
  3. Çelik, Tantek; Cederholm, Dan, et ál. (6 de marzo de 2011 -actualizado-). «hCard examples in the wild · Microformats Wiki» (en inglés). Microformats.org. microformats.org. Consultado el 11 de marzo de 2011.

Enlaces externos[editar]