Les microformats – Comment les utiliser ?

Nous avons vu précédemment l'utilité des microformats. Après la théorie, passons à la pratique : comment baliser les informations d'un site web en utilisant des microformats ?

Mais où est la doc ?

Les microformats, pour micro qu'ils soient, restent des formats. Leurs spécifications sont discutées, et passent par divers stades de brouillon avant d'être considérées comme des standards. Jouant le jeux du web, la définition de la plupart des microformats est ouverte, et centralisée sur un site, microformats.org, qui fonctionne sous forme de wiki, et dont la section francophone est la plus importante des sections non-anglophones.

Ainsi, on trouve référencés sur ce site les différentes spécifications de microformats, ainsi que des liens vers ceux qui ont étés développés autre part. La démarche de création des microformats tente d'être la plus constructive possible, en réutilisant des formats existants par ailleurs (par exemple le format vCard pour les données concernant une personne ou une organisation), en construisant les différents microformats suivant des règles de balisage similaires, et en incluant des microformats les uns dans les autres.

Je vais maintenant présenter brièvement quelques microformats que je trouve utile. Rappelez-vous cependant que la spécification (dont le lien sera donné) reste le document de référence, et peut être amené à évoluer dans un sens incompatible avec mes exemples.

Marquer un mot-clef, une licence ou une page d'accueil

Je commence par ces trois microformats, et je les mets ensembles, parce qu'ils sont simples et assez similaires. Tous trois s'utilisent en donnant un attribut particulier à l'attribut rel d'un lien.

Pour définir un lien comme représentant un mot-clef attaché à la page actuelle, utilisez le microformat rel-tag. La page actuelle a le tag Microformats, qui est signalé (avant ou après le contenu) par un lien <a href="http://filyb.info/tag/Microformats" rel="tag">Microformats</a>. Attention : cela signifie que le tag concerne la page actuelle, et non que l'adresse du lien concerne une page de mots-clefs. Ainsi, la liste de mots-clefs sur la gauche ne possède pas cet attribut, car elle n'est pas en rapport avec le contenu de la page.
Pour associer une licence à la page actuelle, utilisez le microformat rel-license. Par exemple, en bas de la page actuelle se trouve lien suivant : <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/fr/" hreflang="fr" title="Résumé de la licence"><acronym title="Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.0 France">CC-BY-SA France 2.0</acronym></a>.. Notez que si plusieurs liens de ce type se trouvent sur une même page, cette page est considérée comment étant sous les termes de toutes les licences considérées.
Sur bien des sites, il y a un lien vers la page d'accueil, mis en évidence. Afin de faire comprendre aux navigateurs web quel est ce lien, utilisez le microformat rel-home (attention : cette spécification n'est encore qu'à un stade de brouillon). Ainsi, sur cette page, vous pouvez trouver le lien : <a href="http://filyb.info/" rel="home" accesskey="1">filyb</a>.

Marquer un passage concernant une personne

L'un des microformats les plus intéressant est le microformat hCard, qui correspond à la transposition en XHTML du format vCard (RFC2426). On en trouve de nombreux exemples sur ce site.

Les auteurs des commentaires sont balisés de la sorte : <span class="vcard"><a href="http://devloop.lyua.org/blog/" class="fn url">World Domination</a></span>.

Ma page contact contient le code suivant :

<div id="hcard-Florian-Birée" class="vcard">
    <a class="url fn" rel="me" href="http://florian.biree.name/">Florian Birée</a>
    <ul>
        <li>Adresse e-mail : <a class="email" href="mailto:florian@biree.name">florian@biree.name</a></li>
        <li>Identifiant Jabber : <a class="url" href="xmpp:florian.biree@jabber.fr">florian.biree@jabber.fr</a></li>
        <li>Identifiant <acronym title="Session Initiation Protocol">SIP</acronym> : <a class="url" href="sip:florian.biree@ekiga.net">florian.biree@ekiga.net</a></li>
        <li>Ma <a class="url" href="/public/florian.biree-pgp-public-key.asc" type="application/pgp-keys">clef <acronym title="GNU Privacy Guard">GPG</acronym></a></li>
        <li><span class="tel"><span class="type">Fax</span> : <span class="value">+33 9 59 46 58 03</span></span></li>
        <li>Mon carnet web : <a class="url" rel="me" href="http://filyb.info" hreflang="fr">filyb.info</a></li>
    </ul>
</div>

Vous remarquerez que ce microformat permet de baliser assez précisément les données de contact, et ainsi de permettre de générer à la volée des fiches de carnet d'adresse. À mon sens la plus grosse lacune du format vCard (lacune qui est reportée sur hCard) est le manque de standard pour les identifiant de messagerie instantanée. J'ai respecté le conseil à propos des Nouveaux types d'information de contact qui préconise d'utiliser des liens avec des protocoles particuliers (et plus ou moins standards). Mais cette méthode n'est pas la seule, par exemple KAdressBook utiliser une propriété propriétaire pour cela.

Comme hCard fait partie des microformats les plus utilisés, un hCard creator a été créé. Mais pour l'avoir testé, je préfère m'en passer pour avoir du code (un peu) moins lourd, et plus fin.

Marquer un évènement

Un autre microformat dont l'utilité est immédiate est le microformat hCalendar, qui correspond à la transposition en XHTML du format iCalendar (RFC2445). Le billet précédent, Dédicace des Trois soleils de Sermelarande à Saint Sulpice en est un exemple.

Voici le code :

 <div id="hcalendar-Dédicace-des-Trois-soleils-de-Sermelarande" class="vevent">
 <a href="http://biblio.ismalaris.org/publications/les-trois-soleils-de-sermelarande/#Dedicace-StSulpice" hreflang="fr" title="Site de la Grande Bibliothèque d'IsmalariS" class="url">
  <abbr title="20080112T1500+0100" class="dtstart">12 janvier 2008, 15h</abbr>–<abbr title="20080112T1730+0100" class="dtend">17h30</abbr> – <span class="summary">Dédicace des <cite>Trois soleils de Sermelarande</cite></span>– à la <span class="location">Librairie du Grand Rond, Saint Sulpice (81370)</span>
 </a>

 <div class="description">
  <p>Je dédicacerai <a href="http://biblio.ismalaris.org/publications/les-trois-soleils-de-sermelarande/" hreflang="fr" title="Page sur le site de la bibliothèque d'IsmalariS"><cite>Les trois soleils de Sermelarande</cite></a> le samedi 12 janvier à la Librairie du Grand Rond, à Saint Sulpice (Tarn, 30<acronym title="Kilomètres">km</acronym> de Toulouse en direction d'Albi).</p>
  <p>Venez nombreux !</p>
 </div>
</div>

Vu que c'est pas toujours drôle de tout faire à la main, comme pour hCard, il existe un générateur de code hCalendar. Comme le précédent, je ne le trouve pas très pratique, il faut adapter le code fourni a ses besoins.

L'utilité de ce microformat est multiple : autant pour le visiteur, qui peut ajouter en un clique un tel évènement à son logiciel d'agenda, autant pour un service qui pourrait agréger les évènements, un peu à la manière de Google, et fournir un moteur de recherche / agenda décentralisé.

Les critiques

Il existe même un brouillon de microformat pour les critiques (de ce que vous voulez). Il s'agit du microformat hReview. Je l'utilise depuis quelques temps pour mes billets Lectures. Exemple avec Rédemption 4 – Les Rives de l'infini :

<div class="hreview" id="hreview-les-rives-de-linfini">
 <span class="type" style="display: none;">product</span>
 <span class="version" style="display: none;">0.3</span>

 <a href="http://www.noosfere.org/icarus/livres/niourf.asp?numlivre=7252" hreflang="fr" title="Page noosfere des Rives de l'infini" class="image">
  <img alt="Couverture des Rives de l'infini" src="http://www.noosfere.org/images/couv/j/jl4858-1998.jpg" class="photo left" />
 </a>

 <p class="little-text">Critique établie le <abbr class="dtreviewed" title="20080103T2231++0100">3 janvier 2008</abbr> par <span class="reviewer vcard"><a href="http://florian.biree.name/" hreflang="fr" title="Site web de Thesa alias Florian Birée" class="fn url">Thesa</a></span>.</p>

 <p class="item"><a class="fn url" href="URN:ISBN:2-290-04858-5">Les Rives de l'infini</a> est un roman [...]
 Ici, on donne des informations factuelles sur l'objet. Pour un livre, son titre, son auteur, etc.
 </p>

 <blockquote class="description">
  <p>Et ici, on place la critique en tant que telle.</p>
 </blockquote>
</div>

Et comme pour les autres, il existe un créateur de code hReview. Cependant, j'insiste sur le fait que hReview n'est qu'au stade de brouillon, donc que la spécification est susceptible de changer.

Les sites des copains

Pour finir, un dernier microformat, plus ancien que les autres, et plus utilisé : XFN. Ce microformat est un peu à part, et ses spécifications ne sont pas hébergées sur microformats.org.

Il permet de préciser les relations existant entre la personne propriétaire de la page où se trouve le code, et celle propriétaire de la page vers laquelle pointe un lien. Il suffit d'ajouter des mots-clefs à la propriété rel d'un lien.

De nombreuses possibilités existent, je vous laisse les tester avec le générateur de code XFN, qui, une fois n'est pas coutume, est simple et pratique.

Les utilisateurs de DotClear noteront que celui-ci inclus la possiblité d'ajouter directement des relationsXFN dans les lien de la Blogroll.

Voici pour ajourd'hui. Cette liste n'est bien sûr pas exhaustive, mais ce sont les microformats qui m'ont semblé les plus utiles. La prochaine fois, nous verront comment l'utilisateur peut-il exploiter ces microformats.

Le carnet web de florence