elanceur - Ajoutez la Magie des Microformats à Votre Site Web !

Vous avez déjà entendu parler du web sémantique ? L'utilisation des microformats par tous peut contribuer à la richesse du web. John Allsopp nous l'explique maintenant.

Repensez tout d'abord à la première fois où vous avez commencé à utiliser le web. Cela pourrait faire quelques années, probablement cinq, dix ou même plus ? Comment utilisiez-vous le web à l'époque ? Il est plus que probable que vous cherchiez en utilisant Google, ou Lycos ou Altavista (oui, je suis vieux, je me souviens quand Alta Vista est arrivé et a fait que la recherche web fonctionnait véritablement), ou si vous êtes vraiment vieux comme moi, vous avez utilisé un directory - retour aux jours où les éditeurs humains pouvaient ressembler à tous les sites dans le monde, et vous les classifiez manuellement dans des répertoires comme Yahoo!, LookSmart ou l'Open Directory Project. Ceci ne semblait pas pouvoir se dimensionner une fois passé quelques millions de sites.

Mais nos modèles d'usages d'alors et ceux de maintenant sont presque les mêmes. Les moteurs de recherche indexaient des pages en se basant sur le contenu de la page et d'autres mesures de pertinence ; les utilisateurs cherchaient en utilisant des mots-clés, et regardaient peut-être les 5, 10 ou 20 premiers résultats. Et c'est encore largement la façon dont nous utilisons le web aujourd'hui. Nous cherchons des morceaux atomisés d'information - comme des pages, et nous les lisons.

Mais les pages sur le web ne sont pas simplement des ilôts discrets d'information. Elles contiennent souvent une information très similaire - que cela aille des choses mondaines comme les détails de contact pour les individus ou organisations, en passant par des critiques de films, de restaurants, de livres, jusqu'aux opinions de ce qui vaut la peine d'être lu en ligne. A cette heure, agréger tous ces détails de contact pour créer un service distribué équivalent aux Pages Jaunes, ou agrégeant toutes ces opinions à propos de restaurants, livres, films et gadgets pour créer des versions décentralisées des critiques IMDB, ou des critiques de livres Amazon ou Zagats, demeure très difficile parce qu'il n'existe pas de formats standardisés sur le web pour les détails de contacts, ou les critiques ou bien d'autres types d'information communément publiée. La sagesse du web, les opinions et attitudes collectives exprimées là sont largement inaccessibles parce que le logiciel n'est pas suffisamment intelligent pour les reconnaître.

Disons que vous vouliez vendre votre voiture. Comment faisons-nous pour produire ça ? Tout comme le fait IMDB pour les critiques de films, ou Amazon pour les critiques de livres, nous trouvons un lieu centralisé pour poster une petite annonce - ou peut-être même plusieurs. Chacune de ces petites annonces exige un effort et du temps pour être remplie en détails, chacune exigeant probablement quelque forme de paiement. Chacune se comportant en jardin muré.

Mais si vous pouvions en quelque sorte poster cette annonce classée sur notre blog, et puis laisser facilement savoir aux services qui se soucient des petites annonces qu'il existe là une nouvelle petite annonce ou une P.A. mise à jour sur mon site. La pièce manquante qui permettrait cela est un format standard (après tout le html n'a pas un élément <petiteannonce> ou <classified>).

Je suis certain que vous pouvez aisément imagine toutes sortes de situations comme celle-ci, où les solutions centralisées sont exigées, simplement du fait qu'il n'existe pas de façon standardisée, sémantique de baliser les données requises pour faire qu'un système distribué ou déconcentré puisse fonctionner.
Par conséquent les données demeurent verrouillées dans des bases de données propriétaires, malgré le fait que ce soit de la donnée véritablement publique. Les répertoires de type Pages Jaunes sont jalousement gardés par leurs compilateurs même si ce sont nos détails de contacts qui sont maintenus. Amazon possède nos propres critiques, et se réserve le droit de les éditer ou de les effacer. Et toutes ces données cools qui pourraient être mélangées de façon extraordinaire, demeurent largement inaccessible.

L'effet open source

Durant la dernière décennie ou presque, nous avons constaté une conscience croissante de l'importance de l'open-source dans le monde du logiciel et des formats ouverts de documents (les standards comme HTML, CSS et PNG), mais nous n'en sommes qu'au tout début pour comprendre l'importance et la puissance des données ouvertes. Beaucoup de données ouvertes, publiées sous des licences libérales comme les Creative Commons et autres, sont désormais disponibles. Mais même en pouvant publier toutes les données comme nous le voulons, sans une manière de faire qu'elles soient produites de façon accessible pour le logiciel via des formats ayant du sens fait que cela reste très peu utile.

Mais d'où proviendront ces formats, que ce soit pour les critiques, les annonces classées, les citations, et bien d'autres formats pas encore rêvés à cette heure ?

Attendons-nous que le W3C nous livre un XHTML2, complet avec toute la sémantique dont nous pourrions même avoir besoin ? Cela semble un espoir à aller chercher dans le long terme. Un espoir fou en réalité.
Allons-nous inventer de nouveaux langages XML pour nos besoins spécifiques - comme like reviewML, classifiedML ? Cela semble excessif pour des petits morceaux discrets d'information que beaucoup de personnes sont déjà en train de publier tels quels.
Avons-nous tous besoin des développeurs web d'aujourd'hui, qui avouons-le ne produisent même pas de si bon HTML à cette heure, pour les transformer en développeurs XML. C'est difficilement réaliste.

Si nous réfléchisssons un instant sur la façon dont le web s'est développé avec tant de succès - il s'est produit de manière incrémentale, évolutionnaire, et pas révolutionnaire - nous pourrions trouver une façon d'avancer qui ne casse pas nos outils et navigateurs et forcerait les développeurs à apprendre un tout nouvel ensemble de pratiques et concepts. Et c'est l'approche que prennent les microformats pour développer des formats de données web qui soient ouverts et simples, construits sur des formats de données existants et sur les pratiques existantes des développeurs afin de permettre et encourager le développement décentralisé de contenus et services.

Ainsi jetons simplement un coup d'oeil à ce que sont les microformats et ce qu'ils ne sont pas, puis nous regarderons quelques organisations très représentatives qui les utilisent déjà. Pour finir, nous regarderons simplement comment il est tout simplement facile de les utiliser.

Ce que sont les microformats

les microformats sont

simples
fondés sur le HTML
des formats de données
basés sur des standards existants
basés sur la pratique actuelle des développeurs

pour porter une sémantique plus riche au web d'aujourd'hui, et permettre des services décentralisés

sans casser les navigateurs
sans casser les outils
sans exiger des modifications massives à la connaissance des développeurs

Ce que les microformats ne sont pas

Les microformats ne sont pas un tout nouveau langage. Ce n'est pas une toute nouvelle manière de développer pour le web. Ils n'essayent pas de résoudre tous les problèmes du web. Et ils ne sont certainement pas difficiles à utiliser. Si vous utilisez du HTML ou XHTML valide, et avez utilisé les attributs class et id, alors vous avez tout les savoir-faire dont vous avez besoin pour utiliser dès à présent les microformats. Et si vous ne l'utilisez pas, quelques minutes sur quelques-uns de ces articles à propos de l'usage approprié de ces attributs vous permettra d'accélérer.

Competent Classing, par Eric Meyer
A touch of class par Tantek Çelik
Use class with semantics in mind, W3C
More about the class attribute, Tantek Çelik

Très bien, mais qui utilise véritablement les microformats ?

Le magazine Digital Web a publié récemment un de mes articles qui comprend un appel à l'action de ce que les gros et petits éditeurs, comme Yahoo! and Cork’d sont en train de produire avec les microformats, quel est le support disponible des microformats dans des outils comme DreamWeaver, WordPress, MoveableType, et Drupal, et quels agrégateurs comme Technorati et Edgeio sont en train de faire avec du contenu microformaté sur le web. Aussi plutôt que de rabacher ça ici, jetez un oeil sur l'état de l'art à mi-2006. Vous serez plus que probablement surpis sur la façon dont ils sont déjà communément utilisés.

Aussi comment les utilisons-nous ? C'est difficile non ?

Si vous savez utiliser le HTML, les microformats sont simples. J'ai mentionné qu'il existe des outils et plugins pour quelques-uns des outils les plus populaires de développement et design de contenus web, mais jetons un oeil sur la façon de coder à la main un microformat communément utilisé, et vraiment sophistiqué, la hCard.

L'une des pièces d'information les plus répandues sur le web est l'information de contact pour les personnes et les sociétés.

Voici la façon dont nous pourrions typiquement baliser les détails de contacts d'une société, détails extraits du balisage original de notre société de conférence, Web Directions


<div id="company">
	<p>Web Directions Conference Pty Ltd</p>

	<div id="address">
		<p>8/54 Mitchell St</p>
		<p>Bondi NSW 2026</p>
		<p >Australia</p>

	</div>
	<div id="phone">
		<p>Phone/Fax: 61 2 9365 5007</p>
		<p>Email: <a href="mailto:info@...">info@...</a></p>

	</div>
</div>

Mais, nous pouvons ajouter un peu de bienfait microformaté, et faire qu'elle soit un peu plus lisible par les machines.

Nous utilisons le microformat hCard - qui pour les geeks dans le public n'est simplement qu'une vCard, un format que nous utilisons probablement tous sans le savoir dans le HTML pour les carnets d'adresses.

Regardez comment c'est facile. D'abord, nous voulons dire que cette construction globale est une hCard, aussi nous utilisons une valeur de classe sur notre élément racine de vcard.


<div id="company" class=”vcard”>

	<p>Web Directions Conference Pty Ltd</p>
	<div id=”address”>
		<p>8/54 Mitchell St</p>
		<p>Bondi NSW 2026</p>

		<p >Australia</p>
	</div>
	<div id=”phone”>
		<p>Phone/Fax: 61 2 9365 5007</p>

		<p>Email: <a href=”mailto:info@…”>info@…</a></p>
	</div>

</div>

Maintenant, nous désignerons le nom de l'organisation pour cette hCard


<div id="company" class=”vcard”>
	<p class=”fn org”>Web Directions Conference Pty Ltd</p>
	<div id=”address”>
		<p>8/54 Mitchell St</p>

		<p>Bondi NSW 2026</p>
		<p >Australia</p>
	</div>
	<div id=”phone”>

		<p>Phone/Fax: 61 2 9365 5007</p>
		<p>Email: <a href=”mailto:info@…”>info@…</a></p>
	</div>


</div>

Là où fn est la manière dont la vCard dit d'afficher le nom ('formaté') et org l'organisation - vcard provient des temps préhistoriques du début des années 1990, et en revenant en arrière nous étions vraiment préoccupés avec la perte de bits, aussi presque tout se faisait abréger. Puis nous avons le bit address, aussi nous le balisons comme suit :


<div id="company" class=”vcard”>
	<p class=”fn org”>Web Directions Conference Pty Ltd</p>

	<div id=”address” class=”adr”>
		<p class=”street-address”>8/54 Mitchell St</p>
		<span class=”locality”>Bondi</span> <span class=”region”>NSW</span> <span class=”postal-code”>2026</span>

		<p class=”country-name”>Australia</p>
	</div>
	<div id=”phone”>
		<p>Phone/Fax: 61 2 9365 5007</p>

		<p>Email: <a href=”mailto:info@…”>info@…</a></p>
	</div>

</div>

Ici nous avons dû ajouter un peu de HTML? les éléments span, pour créer plus de conteneurs sémantiques pour nos morceaux d'informations - les différents composants de l'adresse, tels que la région et le code postal. Tous ces noms de classes, qui sont en passant directement pris des noms de champs dans la spécification originale de la vCard. Par conséquent la sémantique définie par les champs de la vCard devient la sémantique de la hCard. Nous sommes en train de ‘réutiliser des formats et schémas existants’, plutôt que de réinventer la roue, un principe-clé de la manière de faire des microformats.

Puis nous avons les parties téléphone et email :


<div id="company" class=”vcard”>
	<p class=”fn org”>Web Directions Conference Pty Ltd</p>
	<div id=”address” class=”adr”>

		<p class=”street-address”>8/54 Mitchell St</p>
		<span class=”locality”>Bondi</span> <span class=”region”>NSW</span> <span class=”postal-code”>2026</span>

		<p class=”country-name”>Australia</p>
	</div>
	<div id=”phone”>
		<p>Phone/Fax: <span class=”tel”>+61 2 9365 5007</p>

		<p>Email: <span class=”email”><a href=”…”>info@…</a></p>
	</div>

</div>

Et nous avons plus ou moins fini. Nous pourrions maintenant y aller et retirer notre propre balisage ‘pseudo semantique’ comme ceci :


<div class="vcard">
	<p class="fn org">Web Directions Conference Pty Ltd</p>
	<div class="adr">
		<p class="street-address">8/54 Mitchell St</p>
		<span class="locality">Bondi</span> <span class="region">NSW</span> <span class="postal-code">2026</span>

		<p class="country-name">Australia</p>
	</div>
	<div>
		<p>Phone/Fax: <span class="tel">+61 2 9365 5007</p>

		<p>Email: <span class="email"><a href="...">...</a></p>
	</div>
</div>

Et maintenant, nous avons une hCard complètement standardisée pour l'information de contact de Web Directions.

Et, comme nous l'avons mentionné, si vous êtes même encore plus paresseux, il existe des outils pour DreamWeaver, différents sytèmes de blog et des Systèmes de Gestion de Contenus comme Wordpress et Textpattern, et le créateur de hCard en ligne, hCard creator pour produire tout ce travail le plus lourd à votre place.

Quelques-uns des formats communs et largement répandus qui ne sont pas plus diffiles à utiliser que celui-ci, et qui pourraient bien coller à vos besoins de développements sont :

hCalendar - pour tous les types d'événements - utilisé par upcoming.org et eventful pour leurs formats de publication
hReview - pour les critiques de toute nature - utilisé par Yahoo! Local et Yahoo! Tech, et le site vraiment cool Cork’d parmi tant d'autres
rel-tag, pour taguer vos pages - très utilisé par les blogueurs, agrégé par Technorati, avec plus de 100 millions de pages taguées indexées
votelinks - pour voter sur des choses - Regardez le site expérimental vraiment cool http://folkse.de (vérifier le lien)
XFN, le premier microformat, pour décrire vos relations avec les personnes - amis, collègues, ceux que vous avez rencontrés, et ainsi de suite
hResume - pour baliser votre Curriculum Vitae
hListing pour les petites annonces, utilisé par Edgeio, un vrai innovateur dans les services décentralisés

Ainsi, qu'attendez-vous ? Lancez-vous et commencez à baliser votre contenu avec des Microformats. Vous ajouterez la richesse sémantique et de l'utilité au web, vous porterez une nouvelle sophistication et une cohérence à votre balisage, et vous aiderez la prochaine étape vraiment évolutionnaire - un web de données véritablement sémantique, et pas simplement des pages.