Web sémantique pratique, les microformats

Le web évolue. Initialement, il s’agissait essentiellement d’une plate-forme de publication. Tout le monde pouvait lire les informations mais seule une minorité produisait le contenu. Sous le terme web 2.0, on désigne un renversement des habitudes. Tout le monde est maintenant à même d’échanger de l’information. Le contenu généré par les utilisateurs est d’ailleurs devenu la matière première de nombreux business ; Twitter en est un excellent exemple. C’est pour cela que le web 2.0 est également nommé web social.

L’évolution ne s’arrête pas là et un nouveau buzzword est apparu : le web 3.0, qui serait pour certains le web sémantique. On est en effet passé d’une plate-forme de publication à une plate-forme de communication. Mais les échanges restent essentiellement entre humains. Quand vous lisez Paris, vous pensez soit à la tour Eiffel soit à une jet setteuse américaine mais vous êtes capable de faire la différence. Et vous pouvez ensuite affiner vos recherches en vous basant sur la confiance que vous accordez aux différentes sources.

Pour un agent automatisé, un robot, c’est plus compliqué. Le web sémantique décrit la stack nécessaire pour franchir le pas.

Les termes en gras désignent les technologies choisies. Sans rentrer dans les détails, la stack est loin d’être complètement opérationnelle mais les bases sont déjà utilisables. Ce qui nous intéresse maintenant est l’échange de données et plus particulièrement les microformats, un format d’échange alternatif permettant de structurer les données au sein de vos pages web.

L’intérêt est de rendre ces informations intelligibles sans intervention humaine. Cela peut donc aider votre SEO mais également permettre à vos visiteurs d’enregistrer vos coordonnées en un seul clic. Vous pouvez visualiser ces informations en utilisant Rich Snippets Testing Tools de Google. Le plugin firefox Operator permet également de détecter ces informations au sein de ce navigateur. Sur la page que vous êtes en train de lire, l’auteur, les personnes ayant laissé un commentaire et les tags sont décrits à l’aide de microformats. LinkedIn, Viadeo, Flickr ou YouTube font de même pour les profils utilisateurs.

Les cartes de visites sont surement le premier format à exploiter. Un outil de conversion peut vous aider pour vos premières réalisations.

Voici, un exemple pour Xebia :

<div class="vcard">
     <a class="url fn org" href="http://www.xebia.fr/">Xebia</a>
     <a class="email" href="mailto:info@xebia.fr">info@xebia.fr</a>
     <div class="adr">
          <div class="street-address">10/12 Avenue de L'Arche</div>
          <span class="locality">Courbevoie</span>,
          <span class="postal-code">92419</span>
          <span class="country-name">France</span>
     </div>
     <div class="tel">
          <span class="type">Work</span>+33 (0)1 53 89 99 99
     </div>
     <div class="tel">
          <span class="type">Fax</span>+33 (0)1 53 89 99 97
     </div>
     <a rel="me" class="url" href="http://fr.twitter.com/#!/XebiaFr">Twitter</a>
     <a rel="me" class="url" href="https://github.com/xebia-france">Github</a>
</div>

Les microformats sont simples d’utilisation. Avec une connaissance rudimentaire d’un langage de balisage comme le HTML, l’exemple doit être en lui-même suffisamment descriptif. Afin d’identifier les propriétés, il suffit d’ajouter une classe CSS sur les balises. La contrainte sémantique pour les hcards est que l’élément parent doit être marqué par la classe CSS vcard.

Ce bloc décrit une organisation (org) nommée (fn) Xebia et visible (url) sur son site institutionnel. Elle possède une adresse (adr) définie par la rue (street-adress), la ville (locality), le code postal (postal-code) et enfin le pays (country-name). On peut la joindre par email (email) ou encore par téléphone et fax (tel). D’autres profils sont disponibles en ligne (url), comme par exemple sur Twitter ou Github.

Une fois cet exemple assimilé et appliqué, il ne reste plus qu’à piocher dans la liste des formats, stables ou non, pour structurer d’avantage les informations que vous exposez. Il est ainsi possible par exemple de décrire des événements, la licence d’un contenu ou encore des tags.

Les microformats, par leur simplicité, constituent un premier pas vers la démocratisation du web sémantique et sont un des outils du software craftsman. Mais comme vous avez pu le constater, RDF est le format d’échange choisi pour la stack du web sémantique. Nous verrons dans un prochain article ce que RDF apporte.

NB : Le schéma de la stack du web sémantique appartient au domain publique.