filyb.info

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.

Nouveau billet de ma très irrégulière série sur la mise à jour de ce site, voici quelques lignes consacrées aux microformats.

Que sont les microformats ? Le web sémantique, bien sûr !

La publication d'informations sur le web a toujours eu un but : que ces informations soient lues. Jusque là, je ne vous apprend rien. Mais lues par qui ? Autant pour vous que pour une grande partie des créateurs de contenu du web, la réponse est, là encore, évidente : aux internautes, cette masse humaine qui vient s'écorcher les yeux devant des pages telles que l'actuelle. Soit. Admettons. Et visitons justement des pages web.

Nous sommes actuellement sur ce carnet web. Le sujet nous intéresse ? Nous souhaitons en discuter avec l'auteur. Sur la gauche de la page se trouve un lien me contacter. Nous cliquons dessus, et arrivons sur une page qui résume les coordonnées de l'auteur, et donne différentes explications sur la façon de le contacter. Consciencieusement, nous remplissons une fiche de notre carnet d'adresse, nous copions-collons le nom, le prénom, l'adresse mail, l'adresse jabber, l'adresse du site web, du carnet web, du flux de syndication. Nous enregistrons, et nous revenons sur la page précédente.

Toujours intéressé, nous souhaitons avoir plus de renseignements sur le sujet. Le carnet web propose certes un système de tags, mais il ne lie que d'autres billets du même carnet. Comment avoir d'autres avis sur la question ? On peut copier-coller un mot-clef, et faire une recherche dans un moteur de recherche. Ou dans un site particulier (del.icio.us, flickr, etc).

Tout cela est très intéressant. En tant que lecteurs, nous avons parcouru des pages web dans lesquelles certaines informations nous en semblées avoir un intérêt particulier. Les coordonnées sur la page de contact. Les mots-clefs d'un billet. Sur ces informations, nous avons effectué des actions qui sont courantes. Tout de suite, nous pensons : l'ordinateur n'est-il pas une création de l'homme destinée à réduire sa servitude vis-à-vis des tâches ingrates et répétitives ? ou plus prosaïquement : cela ne pourrait-il pas être automatique ?.

Pour que l'on puisse en un clic ajouter les coordonnées de quelqu'un dans notre carnet d'adresse, à partir des informations de son site web, ou que l'on puisse aller voir du contenu relatif à un mot-clef, il faut que notre ordinateur soit capable de comprendre le sens que portent ces informations. Il faut qu'il puisse reconnaître des coordonnées comme telles, ou qu'il sache que certains mots sont des mots-clefs qui définissent le sujet de la page actuelle.

Voici le rôle des microformats. Leur but est d'ajouter du sens au contenu. Ce n'est pas la seuls manière de proposer du contenu sémantique, mais les microformats ont ceci d'intéressant qu'ils sont basé sur un balisage particulier en XHTML. Ainsi, le contenu lisible par les humains est le même que celui lisible par les ordinateurs.

Lors de notre d'une prochaine entrevue, nous verrons quelles sont les informations qui peuvent être sémantisées à l'aide des microformats, et comment le faire (avec, toujours comme exemple, ce carnet web – il faut bien qu'il y ait un rapport avec cette mise à jour).