lundi 15 octobre 2007

Micro-standards du web : les microformats

Initié par l'article de Alex Faaborg, ici, sur les microformats,

vous trouverez dans cet article une présentation et une liste de ces microformats qui vous facilitent la vie lors de la création de vos sites web (tout en restant "standard") et qui permet à vos lecteurs de traiter plus facilement les informations que vous souhaitez mettre à leur disposition.
Voir mon article détaillé sur le microformat qui permet de laisser facilement vos coordonnées, le microformat "hCard". Ici.
Pour accéder à l'article, cliquer sur Read more.


Cet article, se limite à :
  • des généralités sur les microformats

  • une liste de microformats avec des pour plus d'information.
Pour un blog en français très documenté sur les microformats, voir le blog de Christophe Duchamp : http://www.elanceur.org (la page dédiée au microformat).
(Pour ceux qui veulent plus de détails sur les microformats, je recommande la lecture de ce post plutôt que celui-ci)

Les microformats

Voir le site : http://microformats.org/
Voir le blog, le Wiki, le code, liste de microformats d'où j'ai puisées les informations.
Pour faire simple, les microformats s'apparentent à des règles d'utilisation des "class" et autres propriétés des éléments html (comme rel="") de façon plutôt semantique que présentationnelle.
C'est à dire une utilisation plus orientée vers le sens de la donnée que sur la façon de la présenter dans la page html (pour cela il y a le css).

Il s'agit de permettre à des moteurs, navigateurs, autres, de repérer ces informations dans votre code et de les traiter à travers ces "microformats" reconnus par la communauté du Web. Ainsi, une adresse sur votre site pourra être enregistrée dans votre bloc-note d'adresse (Outlook, autres) ou être positionée par un logiciel de localisation géographique (Maps, autres).

L'exemple le plus courant étant les coordonnées de l'auteur d'un site ou de son affaire. En respectant le microformat "hCard", on peut facilement récupérer ces données au format vCard (Outlook) ou demander à Map de localiser l'endroit.
Une programmation hCard a cet aspect :
<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/ </a> ;
</div>

Ce code html, que vous pouvez mettre en forme, sera repéré et traité par les navigateurs ou des moteurs de recherche au "microformat" hCard.
Il est important de noter qu'il existe des "générateurs" de codes au format de ces microformats facilitant ainsi l'implémentation de ces codes dans les sites et blogs sans grandes connaissances de la programmation.

Pour avoir accès à ces informations à partir de votre navigateur, Firefox 2 propose un add-on : Operator. Voir mon post sur hCard, ici, ou sur le site de Mozilla Firefox, ici.

Présentation de microformats

Note : les noms sont précédés d'un "h" indique le lien avec le html (hCard pour "HTML Card"). Un "x" indique le lien avec XML. Et relxxx indique une propriété de l'élément lien hypertext rel="...".

hCard, carte de visite
Voir mon blog ici. Plus d'information ici. Le générateur de code est .

hCalendar, pour des événements de votre calendrier

Plus d'info ici. Le générateur de code est ici.

hReviews, pour des revues de produits, critiques de cinémas, autres
Plus d'info ici. Le générateur de code est ici.

hResume, pour vos ... CV
Plus d'info ici. Le générateur est ici.
Alors, simplifier vos CV dans vos sites.

rel-licence, pour indiquer le type de licence de votre site
Il s'agit en fait d'ajouter au lien de votre type de licence, la propriété <a http="..." rel="licence" >. Pour plus d'information, ici.

rel-tag, pour indiquer des tags
Plus d'information ici. Il n'existe pas de générateur de code mais des outils qui permettent qui génére des tags chez les hébergeurs (Technorati, autres).
Les tags sont lisibles avec Operator, l'add-on de Firefox, à Tagspace. Sur les sites gérant ces tags, on peut voir la mention "tags using reltag" et autres références à reltag.

RelNoFollow, une sécurité par les liens
Ce "microformat" a pour but de limiter le spam en indiquant au moteur de recherche de ne pas ajouter de "poids" à l'adresse qui est indiquée dans le lien. Pour cela, on ajoute à l'élément html des liens hypertext la propriété : <a href="..." rel="nofollow">.
Utilisé dans les blogs pour les liens qui sont placés dans les commentaires d'articles. Peut-être aussi utilisé par un rédacteur pour citer un lien sans lui apporter son soutien.

XFN, votre réseau d'amis (Xhtml Friends Network)
Plus d'info ici, avec un renvoi vers GMPG. Le générateur de code est ici.

XOXO, pour vos listes
Autour des éléments HTML "Définition" : dl, dt; dd ; et "List" : ol, li
Plus d'info ici. Pas de générateur mais un validateur de code, ici.

xFolk, pour vos bookmarks
Plus d'info ici. Les bookmmarks sont lisibles avec Operator, l'add-on de Firefox, à Tagspaces.

VoteLinks, pour voter "Pour" ou "Contre". Abstention prévue
Plus d'info ici. Pas de générateur mais un lien vers un site dont les "votes" peuvent être liées à votre site : http://jyte.com/.

Pour la liste exhaustive de ces microformats, voir http://microformat.org, ici ; et chez microinformatique.com, ici, auteur d'un livre sur ce sujet.

Pour les liens en français,
microformats sur le Wikipedia français, ici. Noter que celui-ci n'est pas complètement traduit.
Je rappelle le lien vers http://www.elanceur.org, ici, et un autre lien vers http://microformateurs.org, ici.

Dryat120

Aucun commentaire: