Le commerce et les échanges sur le web occupent une place prépondérante. Vendre, acheter, louer, échanger, partager, voire dealer en monnaie libre… Tout se pratique en ligne. Il peut être parfois difficile de s’y retrouver, tout particulièrement quand vous cherchez un produit spécifique et voulez le comparer sur différents sites. Le microformat hProduct a été conçu à cette intention et la spécification -encore à l’état de draft- précise comment ajouter de la sémantique sur l’information produit, la rendant ainsi plus facile à partager, distribuer et agréger.

Terminant l’excellent ouvrage Microformats Made Simple d’Emily Lewis qui évoque ce microformat dans son chapitre 11, je m’attelle sagement à la rédaction de ce billet qui vous décrira la syntaxe et se conclura par un exemple fonctionnel de marquage dans la jungle. Un exemple que vous pourriez d’ores et déjà mettre en pratique dans vos billets personnels et/ou vos catalogues de vente par correspondance.

Google est en train d’expérimenter ce marquage pour les données produits en implémentant quelques-unes des propriétés de hProduct. L’intention de cet article sera aussi d’expérimenter le futur affichage de ce microformat, en imbriquant une description du produit dans un avis d’utilisateur.

Syntaxe

Les propriétés et sous-propriétés de hProduct ont été développées sur l’information la plus communément trouvée parmi les produits de consommation actuels, tout en offrant encore une très grande variété de détails spécifiques par famille de produits :

• Tout le contenu de votre produit doit être embarqué dans un élément assigné à la propriété racine obligatoire hproduct
• Pour le nom du produit, utilisez une fois et une seule fois la propriété obligatoire fn
• La propriété optionnelle brand indique la marque du produit. Dans certains cas, ce peut être le fabricant et elle serait aussi marquée avec une hCard.
• Pour spécifier la catégorie du produit (telle qu’une voiture, un t-shirt ou un livre), utilisez la propriété optionnelle category, que vous pourrez utiliser plusieurs fois dans hProduct. Vous pouvez aussi transformer le contenu des catégories en tags en créant des liens pour chacune et en assignant rel="tag" sur les <a>s
• La propriété optionnelle price spécifie combien cela coûte d’acheter le produit. Le contenu prix à l’intérieur de l’élément assigné class="price" peut apparaître dans le format de la devise/monnaie. C’est un nombre avec une virgule flottante écrite avec un point et le prix doit rester unique.
• Utilisez la propriété optionnelle description pour le contenu décrivant le produit.
• Vous pouvez assigner la propriété optionnelle photo pour toutes les images ou liens vers des images dans votre contenu produit. Vous pouvez utiliser photo autant de fois que vous voulez.
• La propriété optionnelle url est assignée à un lien qui dirige vers une page web contenant de plus amples informations sur le produit.
• Vous pouvez utiliser la propriété optionnelle review si votre contenu comprend un avis sur le produit. La spécification hProduct recommande aussi que review soit marqué avec hReview
• Vous pouvez utiliser la propriété optionnelle listing si votre contenu contient aussi des détails sur la petite annonce du produit (comme ceux que vous pouvez trouver sur les services de P.A. de Craigslist ou eBay). La spécification recommande que listing soit marqué avec hListing. Cependant, hListing n’en est encore qu’à l’étape de proposition, aussi je ne pourrais pas le recommander pour implémentation sans quelques précautions.
• La propriété optionnelle identifier est assignée à une information unique d’identification du produit. Vous pouvez avoir plusieurs instances identifier dans hProduct. identifier a aussi deux sous-propriétés : type et value :
  • type indique l’identifiant spécifique tels que model, MPN, UPC, ISBN, ISSN, EAN, JAN, VIN, SKU et sn.
  • La seconde sous-propriété, value, est la valeur correspondante du type. Dans l’exemple au-dessous, j’utilise les chiffres qui composent le numéro d’ISBN du livre critiqué.

Marquage

Pour passer à la pratique, au lieu de publier un avis sur une voiture, un vélo, un yoghourt…, j’ai préféré me cantonner sagement au livre d’Emily Lewis « Microformats Made Simple » pour produire mon premier exemple de hProduct. Aussi en avant et commençons par le plus simple :


<div class="hproduct">
<h1 class="fn">Microformats Made Simple</h1>
<img src="/image/microformatsmadesimple.jpg" alt="Microformats Made Simple" class="photo" />
<p class="description">Paru chez <a class="brand" href="http://newsrider.com">Newsrider</a>, ce premier ouvrage d'Emily Lewis, jeune étoile montante de la communauté des <a href="/tags/microformats" class="category" rel="tag">microformats</a>,
comblera tous les auteurs, <a href="/tags/webdesign" class="category" rel="tag">designers</a>
et développeurs <a href="/tags/HTML" class="category" rel="tag">HTML</a>
désirant enrichir facilement et rapidement leurs contenus web avec des métadonnées sémantiques.
En langage clair, Emily nous truffe d'exemples pratiques et valides sur 20 microformats,
et offre à ce jour l'ouvrage le plus complet pour quiconque souhaite comprendre le futur de
l'<a href="/tags/seo" class="category" rel="tag">optimisation pour les moteurs de recherche</a>,
la publication de données interopérables et l'amélioration de l'expérience utilisateur.
A partir de <span class="price">19.99 €</span> chez <a class="url" ref="http://www.amazon.fr/Microformats-Made-Simple-Emily-Lewis/dp/0321660773">amazon</a>,
c'est un ouvrage indispensable en 2010 pour tous ceux qui souhaitent hisser leurs productions web vers le web de données. </p>
</div>


Combinaison de microformats

Avançons et ajoutons une hCard à notre contenu brand (comme spécifié par la recommandation). Dans cet exemple, j’ai retenu le nom de l’éditeur pour la marque.


<p class="description">Paru chez <span class="brand vcard">
<a class="org fn url" href="http://newsrider.com">Newsrider</a></span>,
ce premier ouvrage d'Emily Lewis, jeune étoile montante de la communauté
des <a href="/tags/microformats" class="category" rel="tag">microformats</a>,
comblera tous les auteurs, <a href="/tags/webdesign" class="category" rel="tag">designers</a>
et développeurs <a href="/tags/HTML" class="category" rel="tag">HTML</a> désirant enrichir
facilement et rapidement leurs contenus web avec des métadonnées sémantiques.
En langage clair, Emily nous truffe d'exemples pratiques et valides sur 20 microformats,
et offre à ce jour l'ouvrage le plus complet pour quiconque souhaite comprendre le futur de
l'<a href="/tags/seo" class="category" rel="tag">optimisation pour les moteurs de recherche</a>,
la publication de données interopérables et l'amélioration de l'expérience utilisateur.
A partir de <span class="price">19.99 €</span> chez
<a class="url" ref="http://www.amazon.fr/Microformats-Made-Simple-Emily-Lewis/dp/0321660773">amazon</a>,
c'est un ouvrage indispensable en 2010 pour tous ceux qui souhaitent hisser leurs productions web
vers le web de données.</p>


Hormis la hCard, quels sont les autres microformats qui pourraient fonctionner ici ?
Pour publier l’avis au-dessus qui renvoie sur un site distributeur (amazon) et encourager les ventes de l’ouvrage auprès d’un public francophone, j’ajoute ici quelques propriétés du microformat hReview. Ce qui m’amène pour conclure sur un exemple de hReview imbriquée avec un hProduct à intégrer quelques propriétés supplémentaires de hReview :

• la propriété racine hreview adossée à hproduct
• la propriété obligatoire item dans l’en-tête
• la propriété optionnelle summary dans l’en-tête
• la propriété optionnelle type pour définir un livre est product
• la propriété optionnelle dtreviewed pour indiquer la date de l’avis
• la propriété reviewer pour indiquer le nom de la personne qui écrit l’avis
• la propriété optionnelle rating pour définir l’échelle de notation sur 20

Ce qui donne pour finir :

A vous de jouer désormais en dévoilant et corrigeant le code au-dessus. Faites-vous le nez et n’hésitez pas au fil de vos avancées à intégrer d’autres microformats. Si vous disposez de nouveaux exemples, merci de les ajouter sur la page wiki dédiée aux nouveaux exemples de hProduct dans la jungle !.