hCard

De Wikipedia, la enciclopedia libre

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, EE. UU.

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.

Notas y referencias[editar]

  1. ↑ Çelik, Tantek; Cederholm, Dan, et ál. (27 de febrero de 2011 -actualizado-). «hCard 1.0 · Microformats Wiki». Microformats.org (en inglés). 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». Microformats.org (en inglés). 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». Microformats.org (en inglés). microformats.org. Consultado el 11 de marzo de 2011. 

Enlaces externos[editar]

Obtenido de «https://es.wikipedia.org/w/index.php?title=HCard&oldid=153730897»