les microformateurs

Une question de Cyril posée il y a quelques jours sur Twitter :

Est ce je peux générer une vcard avec les microformats ?

Naturellement oui et merci de ton intérêt pour les microformats mon cher Cyril. hCard utilise une représentation 1:1 des propriétés et valeurs du standard vCard en XHTML sémantique. Bonne occasion pour te formuler une réponse sous forme de traduction d’un billet publié initialement le 27 janvier 2006 par Jesse Skinner. En espérant que ces quelques mots pourront t’éclairer précisément pour insérer une hCard sur ton blog. Cette traduction est naturellement publiée sous fair-use et comme d’habitude, seul le lien original fait référence. (Pour raffiner le contenu, les microfomateurs sont invités à commenter et/ou se rendre directement sur la page-miroir du wiki pour éditer/corriger directement le contenu.) — xtof.

hCard

Pour continuer ma discussion sur les microformats, jetons un coup d’oeil à la hCard.
Le microformat hCard est un moyen d’identifier de l’information de contact dans le HTML. Les gens peuvent utiliser des outils pour regarder à l’intérieur du HTML et extraire cette information sous une vCard. La vCard est un standard pour une carte de visite électronique. Il existe un bon nombre de valeurs que vous pourriez attendre (nom, numéro de téléphone, organisation, etc.) hCard sait prendre ces étiquettes et les utiliser comme des noms de classes autour des données dans le HTML.

Voici les valeurs les plus communes que vous pouvez utiliser dans hCard (pour la liste complète, regardez le wiki) :

• fn (formated name ou nom formaté)
• nickname (pseudo)
• url
• email
• tel (téléphone)
• adr (adresse)
• org (organisation)
• etc…

Chaque hCard démarre à l’intérieur d’un bloc qui a class="vcard". Ainsi une hCard très simple pourrait ressembler à cela :

<div class="vcard">
<span class="fn">Christophe Ducamp</span>
<a class="url"
href="http://claimid.com/xtof">http://claimid.com/xtof</a>
</div>

Quelques-uns de ces types ont des sous-propriétés. Par exemple la valeur tel contient type et ‘value‘. De cette façon vous pouvez spécifier des numéros de téléphone domicile et professionnel. Le type ‘adr a beaucoup de sous-propriétés ((post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value). Une adresse pourrait ressembler à cela :

<div class="vcard">
<div class="fn">Christophe Ducamp</div>
<div class="adr">
<span class="locality">Paris</span>,
<span class="country-name">France</span>
</div>
</div>

Les noms de classes n’ont pas à signifier quoi que ce soit dans votre page. Néanmoins, vous pouvez toujours en tirer profit pour styliser votre information de contact. Vous pourriez aussi les styliser dans votre Feuille de Style Utilisateur de votre navigateur, ainsi vous pourriez les trouver pendant que vous surfez sur le web.

Le standard hCard est très flexible. Peu importe sur quels tags vous placez les classes. Cela ne doit certainement pas être obligatoirement entouré entre des balises div. Vous pourriez simplement marquer votre information de contact comme ça vous chante, et puis emballer les données dans des tags span pour assembler les données ensemble. Par exemple, elle peut figurer dans un texte normal à l’intérieur d’un paragraphe :

<p class="vcard">
Mon nom est <span class="fn">Christophe Ducamp</span>.
Je vis à
<span class="adr"><span class="locality">Paris</span>,
<span class="country-name">France</span></span>.
Je travaille pour la
<span class="org">Caisse Nationale des Caisses d'Epargne</span>.
J'anime un blog pour le groupe des microformateurs sur
<a class="url" href="http://microformateurs.org/">
http://microformateurs.org/</a>.
</p>

Il existe déjà beaucoup d’outils et encore plus à venir. Si vous ne voulez pas installer un plugin navigateur, ou si vous vous voulez donner à tous les visiteurs de votre site un moyen de télécharger votre hCard sous une vCard, X2V est un service qui fait tout simplement ça. Faites simplement un lien vers :

http://suda.co.uk/projects/X2V/get-vcard.php?uri=[URL avec une hCard]

Par exemple, cliquez ici pour télécharger une vCard de cette simple hCard :

Mon nom est Christophe Ducamp. Je vis à Paris, France. Je travaille pour la Caisse Nationale des Caisses d’Epargne. J’anime un blog pour le groupe des microformateurs sur http://microformateurs.org/.

hCard, comme d’autres microformats est merveilleusement simple et déjà incroyablement puissant. Vous pouvez commencer dès maintenant avec très peu de travail, sans attendre que le standard soit massivement utilisé. Dès qu’il y aura plus de personnes en quête de hCards (et de votre information de contact), votre site web leur facilitera les choses.

Cette entrée a été postée Saturday, November 3rd, 2007 à 15:00 et se classe dans hcard, microformats, 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.