Tu propia hCard en La Coctelera
7 mar 07Sobre hCard
hCard es un formato simple, abierto y distribuido para representar gente, compañías, organizaciones y sitios usando una representación de cada uno de las propiedades y valores del estándar vCard (RFC2426 (http://www.ietf.org/rfc/rfc2426.txt)) en XHTML semántico. hCard es uno de los varios microformatos estándares y abiertos para embedir en (X)HTML, Atom, RSS y clualquier XML.
Traducción libre (y seguro que muy mejorable XD) del párrafo de presentación de http://microformats.org/wiki/hcard
Mis 10 minutos improductivos del día
Supongo que habéis visto el "sobre mí" en la barra de la derecha de los blogs de La Cocteler. La información personal es una hCard generada por La Coctelera a partir de los datos de nuestro perfil. Hace un rato, en un momento de aburrimiento entre las tantas cosas que tengo que hacer, se me ha ocurrido que me gustaría cambiar la hCard por una hecha por mí. Requisitos:
- Poder controlar la información que quiero dar en la hCard: a lo mejor mañana quiero poner mi número de móvil para que me enviéis insultos por SMS xD
- Que por defecto salga mi gravatar: hay que amortizar la cuenta en gravatar :P
- Echar 10 minutos en alguna chorrada: porque sí
Como es algo muy chorra os pongo lo que he colocado en el "sobre mí" y listo. Si resulta que alguien lee esto luego y quiere más información o detalles que deje un comentario y detallo lo que haga falta ^_^
<!-- hCard propia -->
<div id="hcard-Ernesto-Jiménez" class="vcard clearfix">
<a title="perfíl" href="http://www.lacoctelera.com/ernesto-jimenez/perfil"><img class="photo" src="http://www.gravatar.com/avatar.php?gravatar_id=125b528cf4cb0ddc3d4da9671dd2ee40&size=65&default=http://www.lacoctelera.com/myfiles/ernesto-jimenez/Foto%206465x65.jpg" width="65" height="65" alt="Avatar de Ernesto"/></a>
<strong><a class="url fn" href="http://www.lacoctelera.com/ernesto-jimenez">Ernesto Jiménez</a></strong>
<div class="adr">
<span class="locality">Alicante</span>,
<span class="country-name">España</span>
</div>
<a title="perfil" href="http://www.lacoctelera.com/ernesto-jimenez/perfil">ver perfil</a>
</div>
<!-- Quitar hcard de lacoctelera.com -->
<script type="text/javascript">
Element.remove($$('#sobre-mi .cont .vcard')[0]);
</script>
Para generar vuestra hCard rápidamente podéis usar el hCard Creator de microformats y luego retocad el código. Prestad atención a las clases que he puesto en negrita en el código anterior, son para tomar los estilos CSS de La Coctelera.
El javascript es para eliminar la hCard que viene por defecto en la página.