Dans l’article Fructifions nos données sur le Web, nous avions découvert comment utiliser une licence CreativeCommons dans vos pages Web en utilisant RDFa. Ces licences vous permettent de faire vivre légalement votre marque hors du territoire de votre site Web sans en perdre le contrôle. Votre écosystème s’élargit et s’enrichit avec plus d’interactions. Elles sont utilisées par des moteurs de recherche comme Google afin de trouver le contenu disponible avec une licence particulière.

Exemple : voici des images de forêts que les utilisateurs peuvent reprendre à condition de noter l’attribution de l’image (Licence CreativeCommons BY).

En favorisant la réutilisation de l’information autour de vos pages produits, vous allez améliorer vos ventes. D’autres personnes et compagnies pourront construire des applications hors de votre domaine. BestBuy, la chaîne américaine de distribution, encourage les utilisateurs à créer leurs propres magasins à partir de leur catalogue de produits. Ce catalogue de produits contient les descriptions des produits sous forme de données descriptives : le prix, le poids, la couleur, les matériaux, le type d’objet, etc.

Qu’est-ce qui définit un produit ?

Prenons un exemple concret d’un magasin en ligne en France pour l’appareil photo Panasonic Lumix DMC-GF1 [1]. Dans cette page, nous pouvons découvrir une offre spécifique contenant des données particulières à propos du produit.

Cette page décrivant le produit comprend quelques informations telles que : 

• titre : Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
• description technique préliminaire : Capteur Live MOS : 12,1 millions de pixels effectifs ; Résolution maxi : photo 4000 x 3000, Vidéo HD1280x 720 ; Boîtier Compact numérique à objectifs interchangeables ; Systéme anti-poussière : filtre à vagues supersoniques ; Ecran LCD 3 ’’ (460 000 points) ; Support d’enregistrement : SD, SDHC.
• prix : 599 € (comprenant la valeur et l’unité monétaire)
• url de la page produit : http://www.fnac.com/a2761344/w-4 (l’URL donné par défaut par la FNAC est long. En enlevant petit à petit, les paramètres manuellement, nous obtenons finalement un URL plus court. Donner des identifiants simples pour vos pages Web en facilite le partage.)

Que manque-t-il ?

Certaines informations sont manquantes. Les données doivent pouvoir être utilisées efficacement à l’extérieur du domaine de la FNAC.

• EAN UCC-13 : Le code barre de référence du produit. Ex : 037988263875
• méthode de paiement : Le site actuellement ne divulgue pas, sur la page du produit, quels sont les moyens de paiements (Visa, paypal, etc.).

Avec l’ensemble de ces informations, nous pouvons commencer à réfléchir à une stratégie de partage des informations produits.

GoodRelations, un vocabulaire pour les produits

En août 2009, BestBuy a publié l’ensemble de son catalogue sous forme de données structurées riches. GoodRelations est un ensemble de paramètres structurés, un vocabulaire commun permettant de décrire les produits et entités commerciales sur le Web, tout comme CreativeCommons dans le domaine des licences.

Reprenons notre produit le Panasonic Lumix. Le magasin vend (Offering) un produit qui possède un titre (label), un commentaire descriptif (comment), une image (depiction), avec un code barre (hasEAN_UCC-13), qui coûte un prix (hasPriceSpecification) en Euros (hasCurrency) avec une valeur de 599 (hasCurrencyValue), dont l’information est décrite dans une page Web (page) et qu’il est possible d’acheter (acceptedPaymentMethods) avec, par exemple, une carte de crédit.

Chaque mot entre parenthèse est un élément structuré pour décrire les produits selon le vocabulaire GoodRelations ainsi que quelques éléments empruntés à d’autres vocabulaires.

Les mains dans le code

Le code HTML pour une page décrivant le produit mentionné précédemment peut être relativement simple.

<h1><a href="http://www.fnac.com/a2761344/w-4">
    Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix 
    Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
    </a>
</h1>

<p id="prodimage">
    <img 
    src="http://multimedia.fnac.com/multimedia/images_produits/zoom/0/5/9/5025232544950.jpg" 
    alt="Panasonic Lumix GF1" />
</p>

<p class="description">Capteur Live MOS: 12,1 millions 
    de pixels effectifs ; Résolution maxi : photo 4000 
    x 3000, Vidéo HD1280x 720 ; Boîtier Compact 
    numérique à objectifs interchangeables ; Système 
    anti-poussière : filtre à vagues supersoniques ; 
    Ecran LCD 3 '' (460 000 points) ; Support 
    d'enregistrement : SD, SDHC.</p>

<p>EAN : <span id="ean">037988263875</span></p>
<p>Prix : 
    <span id="prixvaleur">599</span> 
    <span id="prixunite">€</span>
</p>

<p id="paiement">Paiements : <span id="visa">Visa</span></p>    

Dans l’article Fructifions nos données sur le Web, nous avons vu comment utiliser les URLs afin de raccourcir les références aux vocabulaires. Nous utiliserons de nouveau l’attribut xmlns dans le code HTML suivant. Si vous avez un système de gabarit vous pouvez ajouter à votre élément body ou html (au choix) les informations suivantes :

xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#"

Note : Ces URIS compacts sont appelés CURIE (comme dans Compact URI). Vous pouvez lire plus en détails à propos des CURIEs dans le document du W3C RDFa Syntax. Les CURIEs ne sont pas un strict équivalent des URIs.

Ces références contenues dans l’entête du fichier html donnent la liste des vocabulaires que nous allons utiliser dans notre code au fur et à mesure. Commençons à enrichir les données de cette page en précisant qu’il s’agit d’une offre commerciale à propos de cet appareil photographique. Le vocabulaire de GoodRelations (gr) contient le terme Offering.

gr:Offering

Ainsi nous obtenons :

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
<h1><a href="http://www.fnac.com/a2761344/w-4">
    Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix 
    Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
    </a>
</h1>
…
</div>

Dorénavant, les outils RDFa qui analyseront la page auront une référence unique à ce produit qui est commercial sous la forme d’un URL. Nous pouvons aider les outils à donner une étiquette significative (label) à présenter aux utilisateurs en indiquant que le produit est un "Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6".

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
<h1><a property="rdfs:label" href="http://www.fnac.com/a2761344/w-4">
    Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix 
    Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
    </a>
</h1>
…
</div>

Comme une image vaut mille mots, nous associons également une image qui décrit le produit en question. Le vocabulaire FOAF contient la propriété depiction pour associer une image représentative d’un élément.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
…
<p id="prodimage" rel="foaf:depiction">
    <img 
    src="http://multimedia.fnac.com/multimedia/images_produits/zoom/0/5/9/5025232544950.jpg" 
    alt="Panasonic Lumix GF1" />
</p>
…
</div>

Ajoutons le texte de la description en utilisant la propriété comment.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
…
<p class="description" property="rdfs:comment">
    Capteur Live MOS: 12,1 millions 
    de pixels effectifs ; Résolution maxi : photo 4000 
    x 3000, Vidéo HD1280x 720 ; Boîtier Compact 
    numérique à objectifs interchangeables ; Système 
    anti-poussière : filtre à vagues supersoniques ; 
    Ecran LCD 3 '' (460 000 points) ; Support 
    d'enregistrement : SD, SDHC.</p>
…
</div>

Nous avons presque fini. Ajoutons les références de catalogue ainsi que le prix en précisant le montant ainsi que la monnaie utilisée en euros.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
…
<p>EAN : <span property="gr:hasEAN_UCC-13" id="ean">037988263875</span></p>
<p rel="gr:hasPriceSpecification">Prix : 
<span typeof="gr:UnitPriceSpecification">
    <span property="gr:hasCurrencyValue" id="prixvaleur">599</span> 
    <span property="gr:hasCurrency" content="EUR" id="prixunite">€</span>
</span></p>
…
</div>

Nous devons préciser le mode de paiement sous la forme de VISA.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
…
<p id="paiement">Paiements : 
   <span rel="gr:acceptedPaymentMethods" 
         resource="http://purl.org/goodrelations/v1#VISA" 
         id="visa">Visa</span></p>    
…
</div>

Vous remarquerez que pour tous ces exemples j’ai conservé l’élément précisant l’offre commerciale ainsi que son URI associé. C’est la clé de la description enrichie de données avec RDFa. Il s’agit d’associer des propriétés précises à un identifiant, ici http://www.fnac.com/a2761344/w-4

Le code au complet donne.

<body xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#">

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
<h1><a property="rdfs:label"  href="http://www.fnac.com/a2761344/w-4">
    Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix 
    Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
    </a>
</h1>

<p id="prodimage"?rel="foaf:depiction">
    <img 
    src="http://multimedia.fnac.com/multimedia/images_produits/zoom/0/5/9/5025232544950.jpg" 
    alt="Panasonic Lumix GF1" />
</p>
<p class="description" property="rdfs:comment">
    Capteur Live MOS: 12,1 millions 
    de pixels effectifs ; Résolution maxi : photo 4000 
    x 3000, Vidéo HD1280x 720 ; Boîtier Compact 
    numérique à objectifs interchangeables ; Système 
    anti-poussière : filtre à vagues supersoniques ; 
    Ecran LCD 3 '' (460 000 points) ; Support 
    d'enregistrement : SD, SDHC.</p>
    <p>EAN : <span property="gr:hasEAN_UCC-13" id="ean">037988263875</span></p>
    <p rel="gr:hasPriceSpecification">Prix : 
    <span typeof="gr:UnitPriceSpecification">
        <span property="gr:hasCurrencyValue" id="prixvaleur">599</span> 
        <span property="gr:hasCurrency" content="EUR" id="prixunite">€</span>
    </span></p>

<p id="paiement">Paiements : 
   <span rel="gr:acceptedPaymentMethods" 
         resource="http://purl.org/goodrelations/v1#VISA" 
         id="visa">Visa</span></p>    

</div>
</body>

Pour aller un peu plus loin

Il y a maintenant de nombreuses ressources à propos de RDFa en ligne depuis mon article précédent. Certains outils vous aideront à mieux créer votre code. RDFa étant un langage ajoutant beaucoup d’informations, il ne s’agit pas de l’ajouter manuellement à chacune de vos pages, mais de modifier les gabarits de votre CMS afin qu’il puisse ajouter les informations nécessaires de façon transparente. Voici quelques outils et références pour aller plus loin :

• Vérificateur de RDFa
• Le wiki de GoodRelations
• Comment la chaîne de magasin Best Buy utilise RDFa
• Une version de RDFa pour HTML (en cours de développement)
• Une API pour RDFa (en cours de développement)