Ce qui suit est une traduction d’un article de Brian Suda paru en juillet dernier. Si vous faites partie des MicroFormateurs, vous pouvez aider à raffiner ce premier jet en lisant l’article original (seul lien de référence) et en cliquant ici pour modifier le contenu. L’idée suggérée par cet article est d’inviter tous les blogueurs MicroFormateurs blogueurs à mettre proprement à jour leurs listes d’amis en y ajoutant plus de sens sémantique. Les travaux pratiques ont démarré sur la page BlogRoll des Microformateurs restant ouverte à discussion et suggestions. Cette traduction est naturellement publiée sour Fair-Use. — xtof

Microformats : Plus de Sens dans Votre Marquage

Par Brian Suda

le 24 juillet 2007

Vous avez probablement dû entendre parler du terme “microformat” et supposé que ça faisait partie de
quelque mouvement feu de paille type web 2.0. Mais “microformat” n’est pas uniquement un nom amusant ou quelque marque déposée — ça fait partie d’une bien plus grande image. Aussi, que sontles microformats ?

Le site web officiel microformats.org (NDT : (fr)) définit ainsi les microformats :

Conçus d’abord pour les êtres humains et ensuite pour les machines, les microformats sont un ensemble de formats de données ouverts et simples, construits sur des standards existants et massivement adoptés.

En utilisant ces standards largement adoptés, les auteurs peuvent encoder une sémantique supplémentaire dans le marquage HTML des pages web. Ceci donne aux pages du sens allant au delà des exigences des valeurs frontales des éléments HTML, leur permettant d’être consommées, remixées et mélangées. Par exemple, en ajoutant quelque marquage sémantique à une page web qui décrit un événement à venir, les propriétés telles que les dates de l’événement peuvent être facilement extraites et utilisées par d’autres services et logiciels comme les calendriers et organiseurs personnels.

Les Microformats sont tout ce qui traite de la représentation de l’information sémantique encodée dans une page web, permettant à cette information d’être exploitée dans des manières qui n’avaient probablement jamais été conçues par l’auteur. L’idée de placer plus d’information sémantique directement dans le HTML n’a rien de nouveau — les gens dans l’industrie du web ont discuté de ce concept depuis plus de dix ans — mais à travers les efforts de beaucoup de bénévoles, suffisamment de documentation, de support, de librairies de code et d’outils ont été créés pour générer un élan derrière les microformats. L’idée est finalement en train de devenir réalité.

Maintenant si vos yeux se vitrent et si toute mention plus approfondie de sémantique, d’encodage, de formats de données ou même des standards vous renvoie simplement à YouTube, patientez. Je vais démontrer que l’utilisation des microformats est la simplicité en elle-même. Ce peut être seulement tout aussi difficile que de savoir ajouter un nom de classe à un élément unique HTML. Croyez-moi — je vous montrerai comment tirer le plus grand profit des microformats avec le minimum d’efforts.

Deux des formats les plus communs de données publiées utilisant les microformats sont ceux à propos de personnes et d’événements, et je couvrirai les deux dans cet article.

Paver le Chemin des Vaches

Pour emprunter une analogie tirée du site web microformats.org, on peut dire que les microformats tentent de paver les chemins de vaches. Vous voyez les chemins de vaches tous les jours : les sorties de bibliothèques, dans les parcs et autour des lycées. Les personnes coupent les coins des voies pavées, font leurs propres chemins et écrasent généralement l’herbe le long du chemin — révélant ainsi le chemin à suivre par les autres, comme la majorité des bovins. Au lieu de tenter de forcer les personnes à suivre les chemins établis, pourquoi ne pas réajuster les chemins pavés pour qu’ils suivent les chemins des vaches ?

De cette façon, les microformats permettent aux personnes d’utiliser les chemins de vaches, ou mieux de tirer profit de plus de valeur et de sens de l’information déjà publiée. Les microformats réussissent à faire ça parce qu’ils ne vous forcent pas à changer vos habitudes : vous n’avez pas besoin de modifier ce que vous publiez, juste de modifier légèrement votre HTML.

Décrire un Profil avec des Microformats

Combien existe-t-il de copies de votre profil utilisateur sur le web ? Presque chaque site sur lequel vous avez même signé une page à propos de vous, avec votre nom, votre pseudo, votre email, votre URL et d’autres informations basiques de contact. Avec l’utilisation des microformats, nous pouvons faire que cette information soit plus utile. Imaginez pouvoir importer votre profil utilisateur à partir d’un site web vers d’autres applications sans avoir à copier et coller le texte. Votre profil pourrait être agrégé sur le Web pour créer un profil Internet au sens large, vous évitant le problème d’avoir à vous enregistrer plusieurs fois avec les mêmes données. Vos amis pourraient facilement vous ajouter à leurs listes de contacts en un seul clic et garder sans effort une mise à jour quand vos détails de contact changent.

N’imaginez rien de plus ! hCard est un microformat conçu simplement pour ce type de rôle, modélisé sur le standard massivement adopté de la vCard. Vous pourriez ne pas le savoir, masi votre application de carnet d’adresses a probablement importé et exporté des vCards depuis maintenant plus d’une dizaine d’années, pendant que votre téléphone transmettait tout aussi joyeusement des détails de contacts aussi sous forme de vCards. Il n’y a pas de sens à réinventer la roue si quelque chose fonctionne déjà bien — le microformat hCard en bénéficie ici, parce tout ce qui peut lire une vCard peut facilement lire une hCard avec juste une petite aide nécessaire en plus.

Le microformat hCard est utilisé pour marquer des personnes, des lieux et des organisations. La seule propriété de hCard qui soit obligatoire est un nom ; tout le reste est optionnel. C’est un point important, parce que l’un des principes des microformats est de ne pas modifier la façon dont les personnes sont déjà en train de publier. Si vous ne publiez pas de téléphone, d’email ou d’information sur votre adresse postale, alors la hCard ne vous forcera pas à commencer.

Jetons un oeil à un exemple vraiment simple, une blogroll d’une liste d’amis et de collègues :

<li>
<a href="http://suda.co.uk">Brian Suda</a>
</li>

Notre premier ajout au HTML pour créer une hCard est d’emballer toutes les données dans une classe appelée "vcard" :

<li class="vcard">
<a href="http://suda.co.uk">Brian Suda</a>
</li>

"vcard" agit comme un conteneur, disant à toutes les données à l’intérieur de cet élément <li> que c’est une donnée à considérer pour cette vCard.

Maintenant, je suis sûr que quelques personnes vont râler, “Hé, tu es en train de violer l’attribut de classe — il est uniquement réservé pour CSS !” Ce n’est pas vrai. Selon la spec HTML4, l’attribut de classe est un attribut d’objectif général pour les agents utilisateurs. Les microformats sont un usage parfaitement acceptable pour l’attribut de classe ; l’attribut de classe ne s’applique pas seulement à CSS.

La prochaine étape dans notre exemple est de marquer la propriété de nom dans la <li> :

<li class="vcard">
<a href="http://suda.co.uk" class="fn">Brian Suda</a>
</li>

Nous avons ajouté une valeur de classe "fn" à l’élément <a>. "fn" correspond à la valeur vCard FN, qui veut dire “formatted name”. Elle est utilisée dans beaucoup d’applications comme le nom affiché.

Dans notre exemple, nous pouvons ajouter quelque sémantique plus profonde. Nous avons un nom, mais avons maintenant aussi une URL. Ainsi nous pouvons aussi ajouter une classe "url" à l’élément <a> :

<li class="vcard">
<a href="http://suda.co.uk" class="url fn">Brian Suda</a>
</li>

Maintenant, je peux vous entendre vous poser la question, “Pouvez-vous ajouter plusieurs valeurs dans un attribut de classe comme ça ?” La réponse est, “Bien sûr !”. L’attribut de classe est très flexible et vous pouvez ajouter autant de valeurs séparées-par-un-espace que vous voulez — que ce soit des classes CSS ou autres. C’est un marquage parfaitement valide pour le HTML et les microformats.

Ainsi maintenant vous l’avez. Avec très peu d’efforts, nous avons désormais ajouté un microformat hCard à notre blogroll. Si n’importe quel logiciel conscient des microformats venait à ouvrir votre page web, il pourrait extraire les noms complets et les URLs associées de nos contacts sans ambiguité.

Vous trouverez plus d’informations sur les hCards sur le site microformats.org. Le site décrit toutes les propriétés possibles que vous pouvez utiliser pour ajouter de la sémantique aux personnes, lieux ou organisations. Quelques-unes de ces propriétés comprennent les adresses, les numéros de téléphone, les emails, les sites web et rôles organisationnels. En tant qu’auteur, vous pouvez apprendre ces propriétés et éditer votre HTML à la main, ou utiliser l’un des plugins de création de microformats vraiment utiles qui les ajoutera à votre place. Il n’y a pas beaucoup de propriétés à apprendre et elles demeurent raisonnablement auto-explicatives. Il existe aussi une anti-sèche pour vous aider.

Cette entrée a été postée Sunday, October 28th, 2007 à 11:46 et se classe dans ressources, traduction. Vous pouvez suivre les réponses à ce billet sur le fil RSS 2.0. Vous pouvez laisser une réponse, ou un trackback à partir de votre propre site.