Le web sémantique par l’exemple : la vCard

Dans mon premier billet sur le sujet, explicitement intitulé Qu’est-ce que le Web sémantique : Une introduction, j’expliquais que le Web sémantique était simplement une syntaxe pour décrire les choses afin que les ordinateurs puissent les « comprendre » et les traiter. Le Web sémantique n’a pas pour but de créer des liens entre les pages Web, il permet plutôt aux machines de tisser des liens entre les choses (ressources) et de déterminer les propriétés de ces choses.

Ainsi des outils « sémantiques » peuvent définir que, dans un texte le mot « orange » fasse référence à une couleur, un agrume ou une ville américaine.

Mais je vous entends dire «C’est bien beau tout ça, mais au-delà de la théorie où sont les exemples concrets et par où commencer ?» … Et bien allons-y toute suite et faisons du Web sémantique avec un type de contenu qui se retrouve sur pratiquement tous les sites Web : les coordonnées de la page contact !

Il existe un format standard d’échange de coordonnées personnelles et professionnelles qui s’appelle vCard. Les vCards sont des cartes de visites virtuelles, elles sont souvent utilisées dans les logiciels de courrier électronique comme Outlook ou Thunderbird pour échanger rapidement des coordonnées entre correspondants.

Ici nous allons transformer des coordonnées brut d’une page Web, en contenu sémantique qui sera l’équivalent en ligne d’une vCard. Ces données seront alors utilisables par des agents sémantiques (ex. : Operator).

Pour la démonstration, nous utiliserons les coordonnées de la page Nous joindre du site ledevoir.com :

Le Devoir
2050, de Bleury, 9ième étage
Montréal (Québec), H3A 3M9
514 985-3333

Des coordonnées sémantiques avec microformat

Le microformat est une approche minimaliste du Web sémantique, qui propose un formatage de données avec des éléments déjà présents dans la syntaxe HTML et des termes clés. Avec les microformats vous pouvez normaliser de façon simple des contenus tels que des événements, des relations, des critiques, des recettes, des CVs et bien sûr des coordonnées de personnes, de sociétés, d’organisations et lieux.

Le code HTML avant

<h2>Le Devoir</h2>
<p class="adresse">
2050, de Bleury, 9ième étage<br>
Montréal (Québec), H3A 3M9<br>
514 985-3333
</p>

Le code HTML annoté avec le microformat hCard

<div class="vcard">

<h2 class="fn org">Le Devoir</h2>
<div class="adr">
	<span class="street-address">2050, de Bleury</span>, 9ième étage<br>
	<span class="locality">Montréal</span> (<span class="region">Québec</span>), <span class="postal-code">H3A 3M9</span><br>
</div>
<div class="tel">514 985-3333</div>

</div>

Explications

Le premier élément DIV avec la classe vcard indiquera à l’agent sémantique qu’à l’intérieur de ce bloc il y a des informations de type vCard qu’il pourra extraire. La classe fn (Formatted Name) de l’élément H2 désigne le nom qui est associé à cette vCard. Cette classe est obligatoire. Juste à coté de fn nous avons org, qui permet de décrire le nom d’une organisation. Donc jusqu’à maintenant nous exprimons que la vCard concerne une organisation dont le nom est Le Devoir. C’est déjà pas mal …

Ensuite, ce qui est contenu dans le bloc adr, sert à décrire tout ce qui est relatif à une adresse : Un numéro civique et un nom de rue (street-address), une ville (locality), un état ou une province (region) et finalement un code postal (postal-code).

Puis terminons avec un dernier élément DIV qui porte la classe tel et qui désigne, vous l’aurez deviné, un numéro de téléphone. Voilà nous avons une vCard intégrée à une page Web ! Et graduellement nous nous éloignons un peu plus du coté obscur du Web sémantique .

Vous pouvez tester la syntaxe de vos microformats avec un parser comme UfXtract ou installer Operator dans votre navigateur Web.

Operator est une extension pour Firefox qui ajoute la capacité d’interagir sur des pages Web avec des données sémantiques (microformats, RDFa et eRDF). Vous pouvez obtenir une excellente introduction sur le blog de Alex Faaborg’s.

Un exemple rapide avec RDFa

RDFa, à l’instar des microformats, est une syntaxe qui permet de décrire des données structurées dans une page Web. RDFa est une recommandation du W3C qui est conforme au modèle Resource Description Framework (RDF).

Les mêmes coordonnées avec la syntaxe RDFa

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
     xmlns:v="http://www.w3.org/2006/vcard/ns#">

   <div about="http://www.ledevoir.com/" typeof="v:VCard">
     <span property="v:fn">Le Devoir</span>
     <div rel="v:adr">
         <div typeof="v:Address">
            <span property="v:street-address">2050, de Bleury</span>, 9ième étage<br/>
            <span property="v:locality">Montréal</span> (<span property="v:region">Québec</span>), <span property="v:postal-code">H3A 3M9</span>
         </div>
      </div>
     <div rel="v:tel">
         <div typeof="v:Tel">
            <span property="rdf:value">514 985-3333</span>
         </div>
      </div>
   </div>

</div>

Voilà, le but est le même, mais la syntaxe diffère. Celle du RDFa est un peu plus complexe, mais elle permet beaucoup plus d’extensibilité et de versatilité.

Ce que j’expliquerai plus en détails dans un prochain billet…

Mots-clés : Conception Web, Microformat, Operator, RDF, RDFa, Tutoriel, UfXtract, Vcard, Web sémantique

Cet article a été publié le Lundi 30 août 2010 à 3:29
Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0.
Les commentaires et rétroliens sont fermés.

• Tweet