hcard-examples-fr

<entry-title>Exemples de hCard</entry-title>

Exemples de hCards.

Auteurs

• Tantek Çelik
• Brian Suda
• Traduction Christophe Ducamp

Exemples Instructifs

Auteurs de Pages et de Billets

Selon la spécification HTML4.01, "les auteurs devraient employer l'élément <address> pour fournir les informations de contact du document ou d'une partie essentielle de celui-ci" c'est-à-dire :

<address>
 <a href="http://tantek.com/">Tantek Çelik</a>
</address>

En ajoutant hCard à un tel XHTML sémantique, vous pouvez indiquer explicitement le nom de la personne, son URL, etc. :

<address class="vcard">
 <a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
</address>

Ceci pourrait être affiché comme :

Tantek Çelik

Ceci fonctionne non seulement pour l'ensemble de pages, mais aussi pour les "parties essentielles" des pages, par exemple les billets de blog.

Voir le blog microformats.org (visualisez la source) pour un exemple vivant. L'auteur de chaque billet de blog sur le blog microformats.org est balisé comme un élément <address class="vcard"> comme dans l'exemple montré ci-dessus.

Références aux Personnes et aux Organisations

Un modèle commun dans les billets de blog est de lier les citations des noms de personnes vers leurs blogs, et/ou les organisations vers leurs pages d'accueil. Par exemple :

<cite>
<a href="http://meyerweb.com/">Eric Meyer</a> 
a écrit un billet 
(<cite>
<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Tax Relief
</a>
</cite>) 
à propos d'une lettre involontairement humoristique qu'il a reçue du 
<a href="http://irs.gov/">Internal Revenue Service</a>.

En ajoutant hCard à un tel balisage, vous pouvez explicitement indiquer à la fois la personne et l'organisation par le nom et l'URL :

<cite class="vcard">
<a class="fn url" href="http://meyerweb.com/">Eric Meyer</a>
</cite> 
a écrit un billet 
(<cite>
<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Tax Relief
</a>
</cite>) 
à propos d'une lettre involontairement humoristique qu'il a reçue du 
<span class="vcard">
<a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
</span>.

Remarquez les noms de classe "fn org url" sur l'hyperlien entourant IRS. Utiliser la même valeur (ou élément pour ce qui compte) pour "fn" et "org" indique que le hCard décrit une organisation plutôt qu'une personne.

Ceci pourrait être affiché comme :

Eric Meyer a écrit un billet (Tax Relief) à propos d'une lettre involontairement humoristique qu'il a reçue du Internal Revenue Service.

une personne qui travaille pour une organisation

Les personnes s'associent souvent elles-mêmes avec une société ou une organisation pour lesquelles elles travaillent. Par exemple :

<span class="vcard">
 <span class="fn">Jeremy Keith</span>, 
 <span class="org">Clearleft</span>
</span>

Bien sûr à cette heure, presque tout le monde a une URL à la fois pour soi-même et pour sa société. Il est facile d'ajouter une URL pour la personne dans l'exemple de la hCard au-dessus :

<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</span>, 
 <span class="org">Clearleft</span>
</span>

Mais pour ajouter une URL vers la société, il n'existe pas de propriété "org-url" (et il ne devrait pas y en avoir), au lieu de cela, utilisez la modularité et une hCard imbriquée pour la société elle-même :

<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</span>, 
 <span class="org vcard"><a class="url fn org" href="http://clearleft.com">Clearleft</a></span>
</span>

En outre, si la hCard de cette personne est sur une page qui la représente (c'est à dire une hcard représentative), alors vous pouvez aussi utiliser la relation rel-group expérimentale sur l'hyperlien vers la société pour indiquer que la société est un "groupe" auquel appartient la personne.

<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</span>, 
 <span class="org vcard"><a class="url fn org" rel="group" href="http://clearleft.com">Clearleft</a></span>
</span>

hCard et XFN

Références vers des Personnes dans les Billets de Blog

Dans l'exemple au-dessus, une personne (le blogueur) fait référence à une autre personne (Eric Meyer). En plus d'utiliser hCard pour baliser explicitement la référence comme une personne, le blogueur peut utiliser XFN (Le XHTML Friends Network) pour indiquer sa relation avec Eric Meyer, par ex. :

<cite class="vcard">
<a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">
Eric Meyer
</a>
</cite> 
a écrit un billet 
(<cite>
<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a>
</cite>) 
à propos d'une lettre involontairement humoristique qu'il a reçue du 
<span class="vcard">
<a class="fn org url" href="http://irs.gov/">
Internal Revenue Service
</a>
</span>.

Cela s'afficherait de la même façon que dans l'exemple précédent.

Références aux Personnes dans les Blogrolls

Beaucoup de blogueurs utilisent XFN (en utilisant souvent une interface utilisateur facile qui est construite dans WordPress) pour indiquer explicitement leurs relations avec les personnes dans leurs blogrolls :

<ul>
 <li>
 <a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a>
 </li>
 <li>
 <a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a>
 </li>
</ul>

En ajoutant le balisage hCard à une blogroll d'amis XFN, vous pouvez indiquer explicitement le nom et l'URL de la personne en plus de sa relation :

<ul>
 <li class="vcard">
 <a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a>
 </li>
 <li class="vcard">
 <a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a>
 </li>
</ul>

qui pourrait s'afficher comme :

• Eric Meyer
• Matt Mullenweg

Ceci fait référence aux listes d'amis supportant hCard et XFN, et c'est un bloc-de-construction-clé de la portabilité du réseau social.

Pour plus d'informations sur XFN, voir la page d'accueil XFN, rejoindre XFN et données de base sur XFN.

La technique est utilisée dans le plugin WP Microformatted Blogroll.

Nouveaux Types d'Information de Contact

Depuis que la vCard a été conçue, il y a eu plusieurs autres services qui fournissent des individus avec des adresses ou d'autres moyens de contact, par ex. la messagerie instantanée, la voip, etc.

Est-ce que cela veut dire que vCard (et par conséquent hCard) doit être étendu pour les représenter ?

Grâce à la flexibilité de la propriété URL, la réponse est non, aucune extension n'est nécessaire. Au lieu de cela, nous utilisons l'URL appropriée pour le service qui identifie le service (protocole, machine et/ou chemin), et plaçons l'adresse de l'individu à l'intérieur de cela.

AOL Instant Messenger (AIM)

Les ids AOL Instant Messenger (AIM) peuvent être représentées en utilisant le protocole aim:. Beaucoup de personnes qui publient leurs ids AIM le font ainsi avec des URLs cliquables par ex. :

<a href="aim:goim?screenname=ShoppingBuddy">IM avec l'AIM ShoppingBuddy</a>

Par conséquent pour hCard, nous adopterons ce comportement existant d'éditeur, et le saisirons simplement comme un autre URL pour le hCard :

<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM avec l'AIM ShoppingBuddy</a>

Yahoo! Messenger

De la même manière, les ids de Yahoo Instant Messenger (YIM) peuvent être représentées en utilisant le protocole ymsgr:. Et de la même manière, beaucoup publient leurs ids YIM comme des URLs cliquables par ex :

<a href="ymsgr:sendIM?QuelqueAmiYahoo">IM avec QuelqueAmiYahoo</a>

A nouveau, pour hCard, nous adopterons ce comportement de publication de contenu existant, et le saisirons simplement comme un autre URL pour la hCard :

<a class="url" href="ymsgr:sendIM?QuelqueAmiYahoo">IM avec QuelqueAmiYahoo</a>

MSN Messenger

Les ids de MSN Messenger (MSNIM) peuvent être représentées en utilisant le protocole msnim:. Et de la même façon, beaucoup publient leurs ids MSNIM comme des URLs cliquables par ex :

<a href="msnim:chat?contact=jeandupont@hotmail.com">IM avec jeandupont@hotmail.com</a>

Pour hCard, nous adopterons ce comportement de publication existant et le saisirons simplement comme un autre URL pour le microformat hCard :

<a class="url" href="msnim:chat?contact=jeandupont@hotmail.com">IM avec jeandupont@hotmail.com</a>

Voir les problématiques en rapport.

XMPP (Jabber)

Les idées Extensible Messaging and Presence Protocol (XMPP) peuvent être représentées en utilisant le protocole xmpp:, par exemple :

<a class="url" href="xmpp:username@jabberservice.com">IM with username@jabberservice.com</a>

Le protocole permet des URLs beaucoup plus riches, voir RFC4622.

Il n'y a pas beaucoup de clients supportant actuellement le protocole.

Skype

Skype peut être représenté en utilisant le protocole skype:. Il peut être utilisé pour ouvrir une session de chat ou produire un appel Skype.

<a href="skype:echo-chinese?chat">IM avec Skype echo service (Chinois) </a>

<a href="skype:echo-chinese?call">Appel Skype vers Skype echo service (Chinois) </a>

De ce fait pour hCard, nous pourrions adopter ce comportement de publication existant, et le saisir simplement comme une autre URL pour la hCard :

<a class="url" href="skype:echo-chinese?chat">IM avec Skype echo service (Chinois) </a>

<a class="url" href="skype:echo-chinese?call">Appel Skype vers Skype echo service (Chinois)</a>

ICQ

ICQ n'a pas de schéma URL. Au lieu de cela, ICQ fait un lien sur le web en utilisant les hyperliens HTTP pour télécharger une ressource de contenu-type application/x-icq que le système d'exploitation ouvre alors avec le client utilisateur ICQ du client.

Par conséquent nous pouvons marquer ces hyperliens HTTP avec le contenu-type réglé explicitement pour conmmuniquer la sémantique ICQ :

<a class="url"
type="application/x-icq"
href="http://www.icq.com/people/cmd.php?uin=[NUMEROICQ]&action=message">
Contact avec ICQ</a>

En remplaçant [NUMEROICQ] avec le véritable numéro ICQ de l'utilisateur.

Profils de Sites

Les blogueurs indiquent souvent leur identité sur les services d'hébergement de contenu en utilisant l'URL de leur page d'accueil, fil ou profil sur ces services. En les étiquetant comme des propriétés d'URL, ces facettes supplémentaires d'identité peuvent être aussi bien publiées dans hCard.

• delicious:
  • <a class="url" href="http://del.icio.us/rbach">les liens de Robert Bachmann</a>
• Flickr:
  • <a class="url" href="http://flickr.com/photos/tantek/">Voir mes photos</a>
  • <a class="url" href="http://flickr.com/people/tantek/">Profil Flickr</a>
• Technorati:
  • <a class="url" href="http://technorati.com/profile/tantek/">Profil Technorati</a>
• Complétez ici...
  • ....

lister vos autres profils

Le cas le plus commun des sites listant d'autres profils sont les blogueurs qui listent leurs propres autres profils, ou un site permettant à un utilisateur de lister son profil sur ce site, et de lier vers ses autres profils. Du fait que l'auteur indique clairement que tous ces profils signifient la même personne, il est mieux de les marquer avec rel="me" de XFN pour une consolidation d'identité explicite, par exemple si ces liens étaient sur le blog de Tantek ou d'autres profils de réseaux sociaux :

• delicious :
  • <a class="url" href="http://del.icio.us/rbach">lien de Robert Bachmann</a>
• mon Flickr :
  • <a class="url" href="http://flickr.com/photos/tantek/">Voir mes photos</a>
  • <a rel="me" class="url" href="http://flickr.com/people/tantek/">Profil Flickr</a>
• Technorati :
  • my <a rel="me" class="url" href="http://technorati.com/profile/tantek/">Profil Technorati</a>
• Ajoutez-en plus ici...
  • ....

Une telle consolidation d'identité explicite menée par l'utilisateur est aussi un bloc de construction-clé pour la portabilité-du-réseau-social qui est expliquée plus à fond dans le contexte des listes-d'amis-supportant-hCard-et-XFN.

Profils Canoniques sur les Sites

Les sites ont parfois différentes pages pour la "home" page d'une persone, et cette page profil de l'utilisateur.

Par exemple, Flick a :

• votre page d'accueil est sur une URL comme : http://flickr.com/photos/ suivie par votre nom d'utilisateur, par ex. :
  • http://flickr.com/photos/tantek/
• votre page profil est sur une URL comme http://flickr.com/people/ suivie par votre nom d'utilisateur, par ex. :
  • http://flickr.com/people/tantek/

En outre, les sites on souvent une URL canonique pour une personne et plusieurs URLs alternatives.

Comme cela a été noté au-dessus, les liens vers ces URLs à l'intérieur de hCards qui représentent ces personnes devraient avoir un nom de classe "url".

En outre, de tel(s) lien(s) dans les hCards vers l'URL canonique d'une personne sur ce site devrai(en)t aussi avoir le nom de classe "uid". Cette technique a été proposée par Ryan King au premier déjeuner Social Network Portability Today.

Construit sur l'exemple en partant de la sections précédente :

• Flickr :
  • <a class="url" href="http://flickr.com/photos/tantek/">Voir mes photos</a>
  • <a rel="me" class="url uid" href="http://flickr.com/people/tantek/">Profil Flickr</a>

Une telle propriété "url" + "uid" pourrait aussi être utilisé par un site sous l'URL OpenID de la personne.

Organisations et Départements

Les départements sont balisés en utilisant le nom de classe "organization-unit" à l'intérieur de l'élément "org", avec le nom de l'organisation "organization-name" spécifiquement balisé pur le distinguer du département :

<div class="vcard">
 <div class="org fn">
  <div class="organization-name">Pages Jaunes France</div> 
  <div class="organization-unit">Apprentissage et Plomberie : Design Microformats</div>
 </div>
</div>

Le département peut aussi faire partie de l'adresse, cas dans lequel vous pourrez vouloir le baliser explicitement comme "extended-address" (adresse étendue) en plus de "organization-unit".

<div class="vcard">
 <div class="adr">
  <div class="org fn">
   <div class="organization-name">Pages Jaunes France</div>
   <div class="organization-unit extended-address">Apprentissage et Plomberie : Design Microformats</div>
  </div>
  <div class="street-address">7 avenue de la Cristallerie</div>
  <span class="postal-code">92310</span> 
  <span class="locality">Sèvres</span>, 
  <abbr title="Ile de France" class="region">IDF</abbr>  
 </div>
</div>

Remarquez qu'en imbriquant le org dans l'adresse, nous avons évité de dupliquer le nom du département.

Listes d'Organisations

De la même façon que dans les listes de personnes, les listes d'organisations (par exemple les groupes de musique) devraient utiliser une liste (non ordonnée à moins qu'il n'y ait une raison spécifique de la trier) avec des items de liste vers les pages d'accueil respectives des organisations.

par exemple ce simple CHIC :

<ul>
 <li>
  <a href="http://microformateurs.org/">microformateurs.org</a>
 </li>
 <li>
  <a href="http://technorati.com/">Technorati</a>
 </li>
 <li>
  <a href="http://www.w3.org/">World Wide Web Consortium</a>
  (W3C)
  </a>
 </li>
</ul>

peut être amélioré facilement avec hCard :

<ul>
 <li class="vcard">
  <a class="fn org url" href="http://microformateurs.org/">microformateurs.org</a>
 </li>
 <li class="vcard">
  <a class="fn org url" href="http://technorati.com/">Technorati</a>
 </li>
 <li class="vcard">
  <a class="fn org url" href="http://www.w3.org/">World Wide Web Consortium</a>
  (<span class="nickname">W3C</span>)
  </a>
 </li>
</ul>

Exemples RFC 2426 dans la hCard

voir : exemples hcard rfc2426

Test de Casses

Ce sont des exemples hCard qui ont été trouvés particulièrement utiles pour trouver des bugs dans les parseurs hCard (par ex. X2V).

Problème avec Information BDAY

cet exemple :

    <!-- anniversaire -->
    <div class="bday">
    <dt>Anniversaire</dt>
    <dd>
        <abbr class="value" title="1985-10-27T00:00:00Z">27 octobre 1985</abbr>
    </dd>
    </div>

devrait produire "BDAY:1985-10-27T00:00:00Z" mais il produit "BDAY:Birthday October 27\, 1985". [dans quoi ? cette déclaration apparaît sans sens]. Le fait intéressant est que le carnet d'adresses apple est encore en train de vouloir l'accepter de cette façon.

• Peut-être provoqué par une erreur de parsage HTML, parce que <dt> et <dd> ne sont pas permis en tant qu'enfants de <div>.

INSENSIBILITE à la casse des valeurs type

• "home" vs. "Home"

cet exemple fonctionne avec X2V :

    <div class="tel">
    <dt>Téléphone (<span class="type">home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>

ceci non, mais le devrait. Mais au lieu de ça il devient simplement TEL sans un type dans la vcard

    <div class="tel">
    <dt>Téléphone (<span class="type">Home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>

GEO parsing

la hCard suivante :

<div class="vcard">
  <span class="fn n">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span> 
       <span class="family-name">de Villamil</span> 
     </a>
  </span>
  <span class="nickname">neuro</span>
  <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref</span>erred<span> email</span>
  </a>
  <span class="org">Omatis</span>
  <span class="adr">
     <abbr class="type" title="dom">France</abbr>
     <span class="type">home</span> address
     <abbr class="type" title="postal">mail</abbr> and
     <abbr class="type" title="parcel">shipments</abbr>:
     <span class="street-address">12 rue Danton</span>
     <span class="locality">Le Kremlin-Bicetre</span>
     <span class="postal-code">94270</span>
     <span class="country-name">France</span>
  </span>
  <span class="geo">
     <abbr class="latitude" title="48.816667">N 48° 81.6667</abbr>
     <abbr class="longitude" title="2.366667">E 2° 36.6667</abbr>
  </span>
</div>

devrait être traduite dans la vCard suivante :

BEGIN:VCARD
VERSION:3.0
URL:http://t37.net
ORG:Omatis;;
NICKNAME:neuro
N:de Villamil;Frederic;;Mr.;
EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net
ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France
GEO:48.816667;2.366667
END:VCARD

X2V (2005-12-18) échoue à cette heure pour parser/exporter la propriété GEO.

Pages Apparentées

• hcard-exemples-problématiques
• hCard
• hCard anti-sèche - propriétés hCard
• hCard creator (réactions) - créez votre propre hCard.
• hCard publication - apprenez comment ajouter du balisage hCard à votre information de contact existante.
• hCard exemples - exemple d'usage de différentes classes dans la hCard.
• hCard exemples dans la jungle - une liste mise à jour de sites web qui utilisent les hCards.
• Profils utilisateurs supportant hCard - sites avec des profils utilisateurs marqués avec hCard - un exemple très commun.
• hCard FAQ - si vous avez quelque question à propos de hCard, regardez ici.
• implémentations hCard - les sites web ou outils qui génèrent ou parsent les hCards.
• hcard-implied-fr - une proposition pour créer une méthode alternative de baliser une hCard simple
• hCard parsage - détails des normes sur la manière de parser les hCards.
• hCards et pages - distinctions sémantiques entre différentes hCards sur une page, et comment identifier chacune
• hcard-interface-utilisateur - techniques et problématiques autour des interfaces-utilisateurs pour éditer, publier et afficher des hCards.
• hCard profile - le profil XMDP pour hCard
• hCard propriétés singulières - une explication de la liste des propriétés singulières dans hCard.
• hCard tests - une page wiki avec des véritables hCards embarquées pour essayer le parsage.
• hCard soutien - encourager d'autres à utiliser hCard
• hCard "to do" - travaux à faire

La spécification hCard est un chantier en cours. Au fur et à mesure que des aspects supplémentaires sont discutés, compris et écrits, ils seront rajoutés. Ces idées, problématiques et questions sont maintenues sur des pages distinctes.

• hCard brainstorming - brainstorms et autres explorations en rapport avec hCard. Voir aussi geo brainstorming.
  • hcard-parsing-brainstorming - brainstorming spécifique au parsage de hCard
  • geo brainstorming
• hCard réactions - feedback général (contrairement aux problématiques spécifiques).
• hCard problématiques - problématiques spécifiques à la spécification.
• vCard errata - corrections à la spécification vCard, sous jacentes à hCard.
• vCard suggestions - améliorations suggérées à la spécification vCard.