Conçus initialement pour des humains et ensuite pour les machines, les microformats sont un ensemble de formats de données, simples et ouverts, construits sur des standards existants et largement adoptés.

Mais à quoi cela sert réellement ?

A ajouter de la sémantique à votre site internet. En plus de l’information qu’affiche vos pages webs, les microformats vont donner un sens à leurs contenus. Certains sites l’ont adoptés, et cela donne des résultats assez impressionnant :

Flickr : si vous regardez une photo géolocalisée, on peut ouvrir Google maps à l’endroit où la photo a été prise.
Aussi si une carte de contact (format hCard) est disponible sur la page web, on peut aussi l’ajouter dans votre carnet d’adresse Yahoo ou de télécharger le fichier .vcf correspondant;

Comment lire les microformats ?

En passant par le navigateur Firefox vous pouvez installer le plug-in Operator ou Tails Export qui sont actuellement les meilleurs sur le marché.

Création d’une vcard avec les microformats

L’intégration des microformats est très intuitive, vous allez voir ça avec cet exemple ;
nous allons afficher les informations d’une personne, on va l’appeler Wilfried Tartenpion. En plus nous allons attacher à ces informations une vcard de façon transparente.

Comment on va procéder ?

En utilisant simplement le html, avec les balises class des conteneur <div> ou <span>.
Pour indiquer au navigateur que le contenu est la représentation d’une vcard,
il faut nommer créer un conteneur dont la classe est vcard, soit

<div class="vcard">
</div>

Après pour indiquer à la vcard le nom est le prénom il faut utiliser la classe « fn n« .
Et si on veut préciser le prénom et le nom il faut utiliser la classe « given-name » pour le prénom et « family-name » pour le nom.
Enfin pour iniquer l’adresse mail, il faut utiliser la classe « email« .

Ce qui donne :

<div class="vcard">
<span class="fn n" lang="fr">
<span class="given-name">Wilfried</span>
<span class="family-name">Tartenpion</span>
</span><span class="email">wilfried.tartenpion@waanser.com</span>
</div>

Le rendu html :

Les microformats avec Operator ou Tails Export

Maintenant regardez les microformats de cette page à travers Operator ou Tails Export

microformats tails export et operator

Pour Operator, l’onglet Contacts devrait afficher le contact Wilfried Tartenpion.

operator

Pour Tails Export, un menu contextuel devrait s’afficher juste à droite. Dedans, normalement vous devriez voir
une bulle avec les informations sur Wilfried Tartenpion.

tails export

Si l’on clique sur exporter, le navigateur nous propose d’ouvrir un fichier hCard.vcf. Ceci est est normal, c’est justement la vcard que l’on a défini sémantiquement grâce au microformats.

vcf

géolocalisation

Si vous voulez géolocaliser vos contenu (comme une photo) avec des outils comme google map, yahoo map et autre, vous pouvez le faire en utilisant les microformats.

<div class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

calendrier

Si vous voulez intégrer un calendrier, voici la syntaxe :

<div class="vevent">
<a class="url" href="http://www.waanser.com/">http://www. waanser.com/</a>
<span class="summary">waanser</span>:
<abbr class="dtstart" title="2009-01-25">5 janvier 2009</abbr>-
<abbr class="dtend" title="2009-01-26">26</abbr>,
à <span class="location">Paris</span>
</div>

Attention à respecter le format de date anglophone (année-moi-jour).

Voila, maintenant vous savez rendre le contenu de vos pages webs plus sémantique.

Il faut juste espérer que les navigateurs fassent l’effort d’intégrer les microformats dans leur prochaine version sans que l’on ai besoin d’ajouter une extension.