hcard-examples-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(→‎Exemples RFC 2426 dans le hCard: translation in progress - attempts to localize exemples with french labels... to be reviewed)
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(36 intermediate revisions by 6 users not shown)
Line 1: Line 1:
<h1>Exemples hCard</h1>
{{DISPLAYTITLE:Exemples de hCard}}


Exemples de [[hcard-fr|hCards]].
Exemples de [[hcard-fr|hCards]].


== Auteurs ==
== Auteurs ==
* [http://tantek.com/log Tantek Çelik]
* [http://tantek.com/ Tantek Çelik]
* Brian Suda
* Brian Suda
 
* Traduction [[Christophe Ducamp]]
* (Traduction en cours [[Christophe Ducamp]])


== Exemples Instructifs ==
== Exemples Instructifs ==


=== Auteurs de Pages et de Posts ===
=== Auteurs de Pages et de Billets ===
[http://www.la-grange.net/w3c/html4.01/struct/global.html#h-7.5.6 Selon la spécification HTML4.01], "les auteurs peuvent employer l'élément <code>&lt;address&gt;</code> pour fournir les informations de contact du document ou d'une partie essentielle de celui-ci" c'est à dire
[http://www.la-grange.net/w3c/html4.01/struct/global.html#h-7.5.6 Selon la spécification HTML4.01], "les auteurs devraient employer l'élément <code>&lt;address&gt;</code> pour fournir les informations de contact du document ou d'une partie essentielle de celui-ci" c'est-à-dire :


<pre><nowiki>
<source lang=html4strict>
<address>
<address>
  <a href="http://tantek.com/">Tantek Çelik</a>
  <a href="http://tantek.com/">Tantek Çelik</a>
</address>
</address>
</nowiki></pre>
</source>


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


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


Ceci pourrait être affiché comme :  
Ceci pourrait être affiché comme :  
Line 34: Line 33:
Ceci fonctionne non seulement pour l'ensemble de pages, mais aussi pour les "parties essentielles" des pages, par exemple les billets de blog.
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 [http://microformats.org/blog/ 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 <code>&lt;address class="vcard"&gt;</code> comme l'exemple montré ci-dessus.
Voir le [http://microformats.org/blog/ 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 <code>&lt;address class="vcard"&gt;</code> comme dans l'exemple montré ci-dessus.


=== Références aux Personnes et aux Organisations ===
=== Références aux Personnes et aux Organisations ===


Un modèle commun dans les posts de blog est de lier les citations des noms de personnes vers leurs blogs, et/ou les organisations vers leurs pages d'accueil. Par ex :  
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 :  


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


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


<pre><nowiki>
<source lang=html4strict>
<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  
<cite class="vcard">
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>.
<a class="fn url" href="http://meyerweb.com/">Eric Meyer</a>
</nowiki></pre>
</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>.
</source>


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.
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.
Line 58: Line 75:
Ceci pourrait être affiché comme :
Ceci pourrait être affiché comme :


  ''[http://meyerweb.com/ Eric Meyer]'' a écrit un billet (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') à propos d'une lettre involontairement humoristique qu'il a reçue du [http://irs.gov/ Internal Revenue Service].
  ''[http://meyerweb.com/ Eric Meyer]'' a écrit un billet (''[http://www.irstaxreliefsettlement.com/ Tax Relief]'') à propos d'une lettre involontairement humoristique qu'il a reçue du [http://irs.gov/ 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 :
 
<source lang=html4strict>
<span class="vcard">
<span class="fn">Jeremy Keith</span>,
<span class="org">Clearleft</span>
</span>
</source>
 
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 :
 
<source lang=html4strict>
<span class="vcard">
<a class="fn url" href="http://adactio.com/">Jeremy Keith</span>,
<span class="org">Clearleft</span>
</span>
</source>
 
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 :
 
<source lang=html4strict>
<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>
</source>
 
En outre, si la hCard de cette personne est sur une page qui la représente (c'est à dire une [[representative hCard-fr|hcard représentative]]), alors vous pouvez aussi utiliser la relation [[rel-group-fr|rel-group]] expérimentale sur l'hyperlien vers la société pour indiquer que la société est un "groupe" auquel appartient la personne.
 
<source lang=html4strict>
<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>
</source>


=== hCard et XFN ===
=== hCard et XFN ===
Line 65: Line 119:
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 [http://gmpg.org/xfn/ XFN] (Le XHTML Friends Network) pour indiquer sa relation avec Eric Meyer, par ex. :
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 [http://gmpg.org/xfn/ XFN] (Le XHTML Friends Network) pour indiquer sa relation avec Eric Meyer, par ex. :


<pre><nowiki>
<source lang=html4strict>
<cite class="vcard"><a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">Eric Meyer</a></cite> a écrit un billet  
<cite class="vcard">
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>)  
<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  
à 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>.
<span class="vcard">
</nowiki></pre>
<a class="fn org url" href="http://irs.gov/">
Internal Revenue Service
</a>
</span>.
</source>


Cela s'afficherait de la même façon que dans l'exemple précédent.
Cela s'afficherait de la même façon que dans l'exemple précédent.
Line 78: Line 143:
Beaucoup de blogueurs utilisent XFN (en utilisant souvent une interface utilisateur facile qui est construite dans [http://wordpress.org WordPress]) pour indiquer explicitement leurs relations avec les personnes dans leurs blogrolls :
Beaucoup de blogueurs utilisent XFN (en utilisant souvent une interface utilisateur facile qui est construite dans [http://wordpress.org WordPress]) pour indiquer explicitement leurs relations avec les personnes dans leurs blogrolls :


<pre><nowiki>
<source lang=html4strict>
<ul>
<ul>
  <li><a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li>
  <li>
  <li><a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></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>
</ul>
</nowiki></pre>
</source>


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 :  
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 :  


<pre><nowiki>
<source lang=html4strict>
<ul>
<ul>
  <li class="vcard"><a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li>
  <li class="vcard">
  <li class="vcard"><a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li>
<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>
</ul>
</nowiki></pre>
</source>


Ceci pourrait s'afficher comme :
qui pourrait s'afficher comme :
* [http://meyerweb.com Eric Meyer]
* [http://meyerweb.com Eric Meyer]
* [http://photomatt.net Matt Mullenweg]
* [http://photomatt.net Matt Mullenweg]


Pour plus d'information sur XFN, voir la [http://gmpg.org/xfn/ page d'accueil XFN], [http://gmpg.org/xfn/join rejoindre XFN], et [http://gmpg.org/xfn/background données de base sur XFN].
Ceci fait référence aux [[hcard-xfn-supporting-friends-lists-fr|listes d'amis supportant hCard et XFN]], et c'est un bloc-de-construction-clé de la [[social-network-portability-fr|portabilité du réseau social]].
 
Pour plus d'informations sur XFN, voir la [http://gmpg.org/xfn/ page d'accueil XFN], [http://gmpg.org/xfn/join rejoindre XFN] et [http://gmpg.org/xfn/background données de base sur XFN].
 
La technique est utilisée dans le plugin  [http://factorycity.net/projects/wp-microformatted-blogroll/ WP Microformatted Blogroll].


=== Nouveaux Types d'Information de Contact ===
=== Nouveaux Types d'Information de Contact ===


Depuis que vCard a été conçu, 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.
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 ?
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çon l'adresse de l'individu à l'intérieur de cela.
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) ====
==== AOL Instant Messenger (AIM) ====
Les ids AOL Instant Messenger (AIM) peuvent être représentées en utilisant le protocole <code>aim:</code>.  Beaucoup de personnes qui publient leurs ids AIM le font ainsi avec des URLs cliquables par ex. :


Les ids AOL Instant Messenger (AIM) peuvent être représentées en utilisant le protocole <code>aim:</code>.  Beaucoup de personnes qui publient leurs ids AIM le font ainsi avec des URLs cliquables par ex :
<source lang=html4strict>
 
<pre><nowiki>
<a href="aim:goim?screenname=ShoppingBuddy">IM avec l'AIM ShoppingBuddy</a>
<a href="aim:goim?screenname=ShoppingBuddy">IM avec l'AIM ShoppingBuddy</a>
</nowiki></pre>
</source>


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


<pre><nowiki>
<source lang=html4strict>
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM avec l'AIM ShoppingBuddy</a>
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM avec l'AIM ShoppingBuddy</a>
</nowiki></pre>
</source>
 
==== Yahoo Messenger ====


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


<pre><nowiki>
<source lang=html4strict>
<a href="ymsgr:sendIM?QuelqueAmiYahoo">IM avec QuelqueAmiYahoo</a>
<a href="ymsgr:sendIM?QuelqueAmiYahoo">IM avec QuelqueAmiYahoo</a>
</nowiki></pre>
</source>


A nouveau, pour hCard, nous adopterons ce comportement de pubication de contenu existant, et le saisirons simplement comme un autre URL pour le hCard :  
A nouveau, pour hCard, nous adopterons ce comportement de publication de contenu existant, et le saisirons simplement comme un autre URL pour la hCard :  
<pre><nowiki>
<source lang=html4strict>
<a class="url" href="ymsgr:sendIM?QuelqueAmiYahoo">IM avec QuelqueAmiYahoo</a>
<a class="url" href="ymsgr:sendIM?QuelqueAmiYahoo">IM avec QuelqueAmiYahoo</a>
</nowiki></pre>
</source>


==== MSN Messenger ====
==== MSN Messenger ====
<strike>Malheureusement, AFAIK, il n'y a pas de protocole bricolé de facto pour ouvrir une session de messagerie instantanée MSN avec un identifiant utilisateur MSN (qui lui-même n'est qu'une adresse email). Par conséquent, nous devons simplement avoir recours à les baliser comme des adresses email, et s'attendre à ce que les consommateurs puisses utiliser quelque heuristique, telle que "les adresses email hotmail.com sont aussi des identifiants de MI MSN". -Tantek</strike>
Les ids de MSN Messenger (MSNIM) peuvent être représentées en utilisant le protocole <code>msnim:</code>. Et de la même façon, beaucoup publient leurs ids MSNIM comme des URLs cliquables par ex :  
Les ids de MSN Messenger (MSNIM) peuvent être représentées en utilisant le protocole <code>msnim:</code>. Et de la même façon, beaucoup publient leurs ids MSNIM comme des URLs cliquables par ex :  


<pre><nowiki>
<source lang=html4strict>
<a href="msnim:chat?contact=jeandupont@hotmail.com">IM avec jeandupont@hotmail.com</a>
<a href="msnim:chat?contact=jeandupont@hotmail.com">IM avec jeandupont@hotmail.com</a>
</nowiki></pre>
</source>


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


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


Mis à jour le 14 mai 2006 - [http://www.wackomenace.co.uk/ Ruben]
Voir les [[hcard-examples-issues-fr#MSN_Messenger|problématiques en rapport]].


Ruben, j'ai essayé ça, et "msnim:" est un protocole non reconnu sur MacOSX.4 (ceci avec le dernier MSN Messenger pour Mac installé, et en état de marché et connecté). Pourriez-vous fournir des liens vers la documentation à propos de "msnim:" et des liens vers de vrais pages qui publient leurs ids MSNIM de cette manière ? Je n'en connais pas - [http://tantek.com/ Tantek]
==== XMPP (Jabber) ====
Les idées [http://www.xmpp.org/ Extensible Messaging and Presence Protocol (XMPP)] peuvent être représentées en utilisant le protocole <code>xmpp:</code>, par exemple :
 
<source lang=html4strict>
<a class="url" href="xmpp:username@jabberservice.com">IM with username@jabberservice.com</a>
</source>
 
Le protocole permet des URLs beaucoup plus riches, voir [http://www.faqs.org/rfcs/rfc4622.html RFC4622].
 
Il n'y a pas beaucoup de [http://wiki.jabber.org/index.php/XMPP_URIs#Jabber_Clients clients supportant actuellement le protocole].
 
==== Skype ====
Skype peut être représenté en utilisant le protocole <code>skype:</code>. Il peut être utilisé pour ouvrir une session de chat ou produire un appel Skype.
 
<source lang=html4strict>
<a href="skype:echo-chinese?chat">IM avec Skype echo service (Chinois) </a>
</source>
 
<source lang=html4strict>
<a href="skype:echo-chinese?call">Appel Skype vers Skype echo service (Chinois) </a>
</source>
 
De ce fait pour hCard, nous pourrions adopter ce comportement de publication existant, et le saisir simplement comme une autre URL pour la hCard :
<source lang=html4strict>
<a class="url" href="skype:echo-chinese?chat">IM avec Skype echo service (Chinois) </a>
</source>
 
<source lang=html4strict>
<a class="url" href="skype:echo-chinese?call">Appel Skype vers Skype echo service (Chinois)</a>
</source>
 
==== 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 <code>application/x-icq</code> 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 :
 
<source lang=html4strict>
 
<a class="url"
type="application/x-icq"
href="http://www.icq.com/people/cmd.php?uin=[NUMEROICQ]&action=message">
Contact avec ICQ</a>
</source>
En remplaçant [NUMEROICQ] avec le véritable numéro ICQ de l'utilisateur.


==== Profils de Sites ====  
==== Profils de Sites ====  
Les bloggers 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.
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.


* [http://del.icio.us delicious]:
* <code>[http://del.icio.us delicious]:</code>
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;les liens de Robert Bachmann&lt;/a&gt;</code>
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;les liens de Robert Bachmann&lt;/a&gt;</code>
* [http://flickr.com Flickr]:
* <code>[http://flickr.com Flickr]:</code>
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;Voir mes photos&lt;/a&gt;</code>
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;Voir mes photos&lt;/a&gt;</code>
** <code>&lt;a class="url" href="http://flickr.com/people/tantek/"&gt;Profil Flickr&lt;/a&gt;</code>
** <code>&lt;a class="url" href="http://flickr.com/people/tantek/"&gt;Profil Flickr&lt;/a&gt;</code>
* [http://technorati.com/ Technorati]:
* <code>[http://technorati.com/ Technorati]:</code>
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Profil Technorati&lt;/a&gt;</code>
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Profil Technorati&lt;/a&gt;</code>
* Complétez ici...
* 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 <code>rel="me"</code> de [[xfn-fr|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 :
* <code>[http://del.icio.us delicious] :</code>
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;lien de Robert Bachmann&lt;/a&gt;</code>
* <code>mon [http://flickr.com Flickr] :</code>
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;Voir mes photos&lt;/a&gt;</code>
** <code>&lt;a rel="me" class="url" href="http://flickr.com/people/tantek/"&gt;Profil Flickr&lt;/a&gt;</code>
* <code>[http://technorati.com/ Technorati] :</code>
** <code>my &lt;a rel="me" class="url" href="http://technorati.com/profile/tantek/"&gt;Profil Technorati&lt;/a&gt;</code>
* Ajoutez-en plus ici...
** ....
Une telle consolidation d'identité explicite menée par l'utilisateur est aussi un bloc de construction-clé pour la [[social-network-portability-fr|portabilité-du-réseau-social]] qui est expliquée plus à fond dans le contexte des [[hcard-xfn-supporting-friends-lists-fr|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 : <code>http://flickr.com/photos/</code> suivie par votre nom d'utilisateur, par ex. :
** http://flickr.com/photos/tantek/
* votre page profil est sur une URL comme <code>http://flickr.com/people/</code> suivie par votre nom d'utilisateur, par ex. :
** http://flickr.com/people/tantek/
En outre, les sites on souvent une URL <em>canonique</em> 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 [[events/2007-08-28-social-network-portability-today|déjeuner Social Network Portability Today]].
Construit sur l'exemple en partant de la sections précédente :
* [http://flickr.com Flickr] :
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;Voir mes photos&lt;/a&gt;</code>
** <code>&lt;a rel="me" class="url uid" href="http://flickr.com/people/tantek/"&gt;Profil Flickr&lt;/a&gt;</code>
Une telle propriété "url" + "uid" pourrait aussi être utilisé par un site sous l'URL [[OpenID-fr|OpenID]] de la personne.


=== Organisations et Départements ===
=== 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 :
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 :


<pre><nowiki>
<source lang=html4strict>
<div class="vcard">
<div class="vcard">
  <div class="org fn">
  <div class="org fn">
Line 179: Line 331:
  </div>
  </div>
</div>
</div>
</nowiki></pre>
</source>


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".
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".


<pre><nowiki>
<source lang=html4strict>
<div class="vcard">
<div class="vcard">
  <div class="adr">
  <div class="adr">
Line 191: Line 343:
   </div>
   </div>
   <div class="street-address">7 avenue de la Cristallerie</div>
   <div class="street-address">7 avenue de la Cristallerie</div>
  <span class="postal-code">92310</span>
   <span class="locality">Sèvres</span>,  
   <span class="locality">Sèvres</span>,  
   <abbr title="Ile de France" class="region">Ile de France</abbr>
   <abbr title="Ile de France" class="region">IDF</abbr>
  <span class="postal-code">92310</span>
  </div>
  </div>
</div>
</div>
</nowiki></pre>
</source>


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


== Exemples RFC 2426 dans le hCard ==
=== Listes d'Organisations ===
De la même façon que dans les [[hcard-examples-fr#R.C3.A9f.C3.A9rences_aux_Personnes_dans_les_Billets_de_Blog|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.


Ce sont des exemples 1:1 de hCard pour chaque exemple dans la [http://www.ietf.org/rfc/rfc2426.txt RFC 2426].
par exemple ce simple [[posh-fr|CHIC]] :


Mark Pilgrim a produit ces exemples de hCard disponibles sous des fichiers séparés :  
<source lang=html4strict>
* http://diveintomark.org/projects/greasemonkey/hcard/tests/
<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>
</source>


=== 2.4.2 VCARD ===
peut être amélioré facilement avec hCard :


<pre><nowiki>
<source lang=html4strict>
AGENT:BEGIN:VCARD\nFN:Jean Vendredi\nTEL:+1-919-555-7878\n
<ul>
TITLE:Administration Chantier\, Assistant\n EMAIL\;TYPE=INTERNET:\n
<li class="vcard">
jvendredi@host.com\nEND:VCARD\n
  <a class="fn org url" href="http://microformateurs.org/">microformateurs.org</a>
</nowiki></pre>
  </li>
 
  <li class="vcard">
Ce fragment de vCard a une propriété dont la valeur est une autre vCard, et pourrait être représentée comme un fragment de hCard avec un Chard embarqué, littéralement (avec la valeur par défaut non nécessaire type=internet omise, et l'optimisation implicite n) :
  <a class="fn org url" href="http://technorati.com/">Technorati</a>
 
  </li>
<pre><nowiki>
  <li class="vcard">
<div class="agent vcard">
  <a class="fn org url" href="http://www.w3.org/">World Wide Web Consortium</a>
<a class="email fn" href="mailto:jvendredi@host.com">Jean Vendredi</a>
  (<span class="nickname">W3C</span>)
  <div class="tel">+1-919-555-7878</div>
  </a>
  <div class="title">Administration Chantier, Assistant</div>
  </li>
</div>
</ul>
</nowiki></pre>
</source>
 
Ce hCard pourrait être affiché comme :
 
[mailto:jvendredi@host.com Jean Vendredi]<br />
+1-919-555-7878<br />
Administration Chantier, Assistant
 
=== 3.1.1 FN Définition Type ===
 
<pre><nowiki>
FN:M. Jean Q. Public\, Dr.
</nowiki></pre>
 
ce fragment vCard comme un fragment hCard :
 
<pre><nowiki>
<span class="fn">M. Jean Q. Public, Dr.</span>
</nowiki></pre>
 
Ce fragment hCard pourrait être affiché comme :
 
M. Jean Q. Public, Dr.
 
=== 3.1.2 N Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
N:Public;Jean;Quinlan;M.;Esq.
</nowiki></pre>
 
ce fragment vCard fragment comme un fragment hCard :
 
<pre><nowiki>
<span class="n">
<span class="honorific-prefix">M.</span>
<span class="given-name">Jean</span>
  <span class="additional-name">Quinlan</span>
  <span class="family-name">Public</span>,
<span class="honorific-suffix">Dr.</span>
</span>
</nowiki></pre>
 
ce fragment hCard pourrait être affiché comme :
 
M. Jean Quinlan Public, Dr.
 
==== Exemple 2 ====
 
<pre><nowiki>
N:Stevenson;Jean;Philippe,Paul;Dr.;Jr.,M.D.,A.C.P.
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<span class="n">
<span class="honorific-prefix">Dr.</span>
<span class="given-name">Jean</span>
<span class="additional-name">Philippe</span>
<span class="additional-name">Paul</span>
<span class="family-name">Stevenson</span>,
  <span class="honorific-suffix">Jr.</span>,
<span class="honorific-suffix">M.D.</span>,
<span class="honorific-suffix">A.C.P.</span>
</span>
</nowiki></pre>


ce fragment hCard serait affiché comme :
== Exemples <nowiki>RFC 2426</nowiki> dans la hCard ==


Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.
voir : [[hcard-examples-rfc2426-fr|exemples hcard rfc2426]]
 
=== 3.1.3 PSEUDO Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
NICKNAME:Robbie
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<span class="nickname">Robbie</span>
</nowiki></pre>
 
ce fragment hCard serait affiché comme :
 
Robbie
 
==== Exemple 2 ====
 
<pre><nowiki>
NICKNAME:Jim,Jimmie
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<span class="nickname">Jim</span>,
<span class="nickname">Jimmie</span>
</nowiki></pre>
 
ce fragment hCard serait affiché comme :
 
Jim, Jimmie
 
=== 3.1.4 PHOTO Type Definition ===
 
==== Exemple 1 ====
<pre><nowiki>
PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" />
</nowiki></pre>
 
==== Exemple 2 ====
<pre><nowiki>
PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...remainder of "B" encoded binary data...>
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard : (sauts de ligne insérés dans la valeur src pour lisibilité) :
 
<pre><nowiki>
<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />
</nowiki></pre>
 
=== 3.1.5 BDAY Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
BDAY:1996-04-15
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<abbr class="bday" title="1996-04-15">15 avril 1996</abbr>
</nowiki></pre>
 
ce fragment hCard pourrait s'afficher comme :
 
<abbr class="bday" title="1996-04-15">15 avril 1996</abbr>
 
==== Exemple 2 ====
 
<pre><nowiki>
BDAY:1953-10-15T23:10:00Z
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<abbr class="bday" title="1953-10-15T23:10:00Z">15 octobre 1953</abbr>
</nowiki></pre>
 
ce fragment hCard pourrait s'afficher comme :
 
<abbr class="bday" title="1953-10-15T23:10:00Z">15 octobre 1953</abbr>
 
==== Exemple 3 ====
 
<pre><nowiki>
BDAY:1987-09-27T08:30:00-06:00
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<abbr class="bday" title="1987-09-27T08:30:00-06:00">9 septembre 1987</abbr>
</nowiki></pre>
 
ce fragment hCard pourrait s'afficher comme :
 
<abbr class="bday" title="1987-09-27T08:30:00-06:00">9 septembre 1987</abbr>
 
=== 3.2.1 ADR Type Definition ===
 
<pre><nowiki>
ADR;TYPE=dom,home,postal,parcel:;;123 Main
  Street;Any Town;CA;91921-1234
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<div class="adr">
<abbr class="type" title="dom">US</abbr>
<span class="type">home</span> address, for
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<div class="street-address">123 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
</nowiki></pre>
 
ce fragment hCard pourrait s'afficher comme :
 
<div class="adr">
<abbr class="type" title="dom">US</abbr>
<span class="type">home</span> address, for
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<div class="street-address">123 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
 
=== 3.2.2 LABEL Type Definition ===
 
<pre><nowiki>
LABEL;TYPE=dom,home,postal,parcel:Mr.John Q. Public\, Esq.\n
Mail Drop: TNE QB\n123 Main Street\nAny Town\, CA  91921-1234
\nU.S.A.
</nowiki></pre>
 
Ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
Merci d'utiliser l'étiquette adresse suivante pour la
<div class="label">
<abbr class="type" title="dom">distribution locale</abbr>
<abbr class="type" title="home">à mon domicile</abbr>
<abbr class="type" title="postal">du courrier</abbr>
<abbr class="type" title="parcel">et de colis :</abbr>
<pre>
Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA  91921-1234
U.S.A.
</pre>
</div>
</nowiki></pre>
 
'''Note :''' le fragment hCard au-dessus utilise un tag &lt;pre&gt; à l'intérieur d'une valeur de propriété pour capturer/représenter des retours explicites de transport (caractères "\n") extrait du fragment vCard.
 
ce fragment hCard pourrait s'afficher comme suit :
 
Merci d'utiliser l'étiquette adresse suivante pour la
<abbr class="type" title="dom">distribution locale</abbr>
<abbr class="type" title="home">à mon domicile</abbr>
<abbr class="type" title="postal">de courrier</abbr>
<abbr class="type" title="parcel">et de colis :</abbr>
<pre>
Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA  91921-1234
U.S.A.
</pre>
 
=== 3.3.1 TEL Type Definition ===
 
<pre><nowiki>
TEL;TYPE=work,voice,pref,msg:+1-213-555-1234
</nowiki></pre>
 
ce fragment vCard sous un fragment hCard :
 
<pre><nowiki>
<span class="tel">
<abbr class="type" title="pref">mon</abbr>
<abbr class="type" title="voice">téléphone</abbr>
<span class="type">professionnel</span> avec
  <abbr class="type" title="msg">messagerie vocale</abbr> :
<span class="value">+1-213-555-1234</span>
</span>
</nowiki></pre>
 
ce fragment hCard pourrait s'afficher comme :
 
mon téléphone professionnel avec messagerie vocale : +1-213-555-1234
 
=== 3.3.2 EMAIL Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
EMAIL;TYPE=internet:jqpublic@xyz.dom1.com
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<a class="email" href="mailto:jqpublic@xyz.dom1.com">email jqpublic</a>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
[mailto:jqpublic@xyz.dom1.com email jqpublic]
 
==== Exemple 2 ====
 
<pre><nowiki>
EMAIL;TYPE=internet:jdoe@isp.net
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<a class="email" href="mailto:jdoe@isp.net">email jdoe</a>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
[mailto:jdoe@isp.net email jdoe]
 
==== Exemple 3 ====
 
<pre><nowiki>
EMAIL;TYPE=internet,pref:jane_doe@abc.com
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<a class="email" href="mailto:jane_doe@abc.com">
<abbr class="type" title="pref">preferred</abbr>
email for jane_doe
</a>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
[mailto:jane_doe@abc.com preferred email for jane_doe]
 
=== 3.3.3 MAILER Type Definition ===
 
<pre><nowiki>
MAILER:PigeonMail 2.1
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.
 
=== 3.4.1 TZ Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
TZ:-05:00
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="tz">-05:00</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
-05:00
==== Exemple 2 ====
 
<pre><nowiki>
TZ;VALUE=text:-05:00; EST; Raleigh/North America
;This example has a single value, not a structure text value.
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<abbr class="tz"
title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">
EST
</abbr>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
<abbr class="tz" title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">EST</abbr>
 
=== 3.4.2 GEO Type Definition ===
 
<pre><nowiki>
GEO:37.386013;-122.082932
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="geo">
<span class="latitude">37.386013</span>,
<span class="longitude">-122.082932</span>
</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
37.386013, -122.082932
 
=== 3.5.1 TITLE Type Definition ===
 
<pre><nowiki>
TITLE:Director\, Research and Development
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="title">Director, Research and Development</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
Director, Research and Development
 
=== 3.5.2 ROLE Type Definition ===
 
<pre><nowiki>
ROLE:Programmer
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="role">Programmer</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
Programmer
 
=== 3.5.3 LOGO Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<img class="logo" src="http://www.abc.com/pub/logos/abccorp.jpg" alt="my logo" />
</nowiki></pre>
 
this hCard fragment could be displayed as (note: I used a real URL for the image):
 
http://microformats.org/img/mf-lg-ora.gif
 
 
==== Exemple 2 ====
 
<pre><nowiki>
LOGO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...the remainder of "B" encoded binary data...>
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<img class="logo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />
</nowiki></pre>
 
no display equivalent given, since data: URL from original example is incomplete.
 
=== 3.5.4 AGENT Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
AGENT;VALUE=uri:
CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<a class="agent" href="CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com">JQPUBLIC</a>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
JQPUBLIC
 
==== Exemple 2 ====
 
<pre><nowiki>
AGENT:BEGIN:VCARD\nFN:Susan Thomas\nTEL:+1-919-555-
1234\nEMAIL\;INTERNET:sthomas@host.com\nEND:VCARD\n
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<span class="agent vcard">
<a class="email fn n" href="mailto:sthomas@host.com">Susan Thomas</a>,
<span class="tel">+1-919-555-1234</span>
</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
[mailto:sthomas@host.com Susan Thomas], +1-919-555-1234
 
Note: the vCard in the AGENT property vCard fragment is actually invalid since it lacks an "N" property.  However, the hCard version *is* valid, since I added the "n" class name to the example.
 
=== 3.5.5 ORG Type Definition ===
 
<pre><nowiki>
ORG:ABC\, Inc.;North American Division;Marketing
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="org">
<span class="organization-name">ABC, Inc.</span>,
<span class="organization-unit">North American Division</span>,
<span class="organization-unit">Marketing</span>,
</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
ABC, Inc., North American Division, Marketing
 
=== 3.6.1 CATEGORIES Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
CATEGORIES:TRAVEL AGENT
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="category">TRAVEL AGENT</span>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
TRAVEL AGENT
 
 
==== Exemple 2 ====
 
<pre><nowiki>
CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="category">INTERNET</span>,
<span class="category">IETF</span>,
<span class="category">INDUSTRY</span>,
<span class="category">INFORMATION TECHNOLOGY</span>
</nowiki></pre>
 
this hCard fragment would be displayed as:
 
INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY
 
=== 3.6.2 NOTE Type Definition ===
 
<pre><nowiki>
NOTE:This fax number is operational 0800 to 1715
EST\, Mon-Fri.
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<p class="note">This fax number is operational 0800 to 1715 EST, Mon-Fri.</p>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
This fax number is operational 0800 to 1715 EST, Mon-Fri.
 
=== 3.6.3 PRODID Type Definition ===
 
<pre><nowiki>
PRODID:-//ONLINE DIRECTORY//NONSGML Version 1//EN
</nowiki></pre>
 
Note, this vCard property actually doesn't make sense as a  hCard property, since it really should be filled in by whatever code transforms the hCard into a vCard, e.g. Brian Suda's X2V.
 
=== 3.6.4 REV Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
REV:1995-10-31T22:27:10Z
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr>
 
==== Exemple 2 ====
 
<pre><nowiki>
REV:1997-11-15
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr>
</nowiki></pre>
 
this hCard fragment could be displayed as:
 
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr>
 
=== 3.6.5 SORT-STRING Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
FN:Rene van der Harten
N:van der Harten;Rene;J.;Sir;R.D.O.N.
SORT-STRING:Harten
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="n"
<span class="honorific-prefix">Sir</span>
<span class="fn">
  <span class="given-name">Rene</span>
  <span class="family-name">
  van der <span class="sort-string">Harten</span>
  </span>
</span>
(<span class="additional-name">J.</span>),
<span class="honorific-suffix">R.D.O.N.</span>
</span>
</nowiki></pre>
 
Note: The string "Harten" was NOT repeated in the hCard, even though it WAS repeated in the vCard (3 times! In N, FN, and SORT-STRING).  The "SORT-STRING" property provides another good demonstration of how hCard enables better adherence to the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] than vCard.
 
this hCard fragment could be displayed as:
 
Sir Rene van der Harten (J.), R.D.O.N.
 
==== Exemple 2 ====
 
<pre><nowiki>
FN:Robert Pau Shou Chang
N:Pau;Shou Chang;Robert
SORT-STRING:Pau
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="fn n">
<span class="additional-name">Robert</span>
<span class="family-name sort-string">Pau</span>
<span class="given-name">Shou Chang</span>
</span>
</nowiki></pre>
 
Note: Not only was the string "Pau" was NOT repeated in the hCard (better [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] adherence again), even though it WAS repeated in the vCard, but in this case since the "family-name" and "sort-string" are the same, we were able to use [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_2:_element_conservation element conservation] and use only one element for both properties.
 
this hCard fragment could be displayed as:
 
Robert Pau Shou Chang
 
==== Exemple 3 ====
 
<pre><nowiki>
FN:Osamu Koura
N:Koura;Osamu
SORT-STRING:Koura
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="fn">
Osamu <span class="sort-string">Koura</span>
</span>
</nowiki></pre>
 
Note: This example, in addition to illustrating better support for the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle], also makes use of the [http://microformats.org/wiki/hcard#Implied_.22N.22_Optimization Implied "N" Optimization].
 
this hCard fragment could be displayed as:
 
Osamu Koura
 
==== Exemple 4 ====
 
<pre><nowiki>
FN:Oscar del Pozo
N:del Pozo Triscon;Oscar
SORT-STRING:Pozo
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="n">
<span class="fn">
  <span class="given-name">Oscar</span>
  del <span class="sort-string">Pozo</span>
</span>
<span class="family-name" style="display:none">
  del Pozo Triscon
</span>
</span>
</nowiki></pre>
 
Note: This example unfortunately could not completely adhere to the DRY principle due to the "FN" using a *substring* of the family-name, and in addition thus had to hide the extra "family-name" string value using CSS display:none, which in general should be avoided.  Suggestion welcome for improvements on this hCard fragement.
 
this hCard fragment could be displayed as:
 
Oscar del Pozo
 
==== Exemple 5 ====
 
<pre><nowiki>
FN:Christine d'Aboville
N:d'Aboville;Christine
SORT-STRING:Aboville
</nowiki></pre>
 
this vCard fragment as an hCard fragment:
 
<pre><nowiki>
<span class="fn">
Christine d'<span class="sort-string">Aboville</span>
</span>
</nowiki></pre>
 
Note: This example re-demonstrates the same hCard advantages/efficiencies demonstrated in [http://microformats.org/wiki/hcard-examples#Example_3_3 example 3] above.
 
this hCard fragment could be displayed as:
 
Christine d'Aboville
 
=== 3.6.6 SOUND Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
SOUND;TYPE=BASIC;VALUE=uri:CID:JOHNQPUBLIC.part8.
19960229T080000.xyzMail@host1.com
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<object class="sound" type="audio/basic"
data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com">
pronounciation of "JOHN Q PUBLIC"
</object>
</nowiki></pre>
 
this hCard fragment would probably be displayed as
 
pronounciation of "JOHN Q PUBLIC"
 
unless your browser supports the MIME type "audio/basic" (defined in [http://www.rfc-editor.org/rfc/rfc2046.txt RFC2046 section 4.3]) and has some way of retrieving "CID:" urls.
 
==== Exemple 2 ====
<pre><nowiki>
SOUND;TYPE=BASIC;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...the remainder of "B" encoded binary data...>
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<object class="sound"
data="data:audio/basic;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...the remainder of "B" encoded binary data...">
pronounciation
</object>
</nowiki></pre>
 
no display equivalent given, since data: URL from original example is incomplete.
 
=== 3.6.7 UID Type Definition ===
 
<pre><nowiki>
UID:19950401-080045-40000F192713-0052
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
Unique id:
<span class="uid">19950401-080045-40000F192713-0052</span>
</nowiki></pre>
 
this hCard fragment could be displayed as
 
Unique id:19950401-080045-40000F192713-0052
 
Note: in practice I don't think I've seen globally unique IDs for "contact info" records published on the web, but perhaps I am not considering enough examples.
 
 
=== 3.6.8 URL Type Definition ===
 
<pre><nowiki>
URL:http://www.swbyps.restaurant.french/~chezchic.html
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<a class="url" href="http://www.swbyps.restaurant.french/~chezchic.html">Chez Chic</a>
</nowiki></pre>
 
this hCard fragment could be displayed as
 
[http://www.swbyps.restaurant.french/~chezchic.html Chez Chic]
 
 
=== 3.7.1 CLASS Type Definition ===
 
==== Exemple 1 ====
 
<pre><nowiki>
CLASS:PUBLIC
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<span class="class">PUBLIC</span>
</nowiki></pre>
 
this hCard fragment could be displayed as
 
PUBLIC
 
==== Exemple 2 ====
 
<pre><nowiki>
CLASS:PRIVATE
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<span class="class">PRIVATE</span>
</nowiki></pre>
 
this hCard fragment could be displayed as
 
PRIVATE
 
==== Exemple 3 ====
 
<pre><nowiki>
CLASS:CONFIDENTIAL
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<span class="class">CONFIDENTIAL</span>
</nowiki></pre>
 
this hCard fragment could be displayed as
 
CONFIDENTIAL
 
=== 3.7.2 KEY Type Definition ===
 
<pre><nowiki>
KEY;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==
</nowiki></pre>
 
this vCard fragment as an hCard fragment
 
<pre><nowiki>
<object class="key" type="application/octet-stream"
data="data:application/octet-stream;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==">
Key
</object>
 
</nowiki></pre>
 
this hCard fragment could be displayed as
 
Key
 
Note: Because of the lack of a TYPE value in the RFC2426 example, I substituted application/octet-stream.  Clearly for it to be of some use, the type specified must be some sort of key or certificate mime type.
 
=== 7.  Adresses des Auteurs ===
 
<pre><nowiki>
BEGIN:vCard
VERSION:3.0
FN:Frank Dawson
ORG:Lotus Development Corporation
ADR;TYPE=WORK,POSTAL,PARCEL:;;6544 Battleford Drive
;Raleigh;NC;27613-3502;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-919-676-9515
TEL;TYPE=FAX,WORK:+1-919-676-9564
EMAIL;TYPE=INTERNET,PREF:Frank_Dawson@Lotus.com
EMAIL;TYPE=INTERNET:fdawson@earthlink.net
URL:http://home.earthlink.net/~fdawson
END:vCard
 
 
BEGIN:vCard
VERSION:3.0
FN:Tim Howes
ORG:Netscape Communications Corp.
ADR;TYPE=WORK:;;501 E. Middlefield Rd.;Mountain View;
CA; 94043;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-415-937-3419
TEL;TYPE=FAX,WORK:+1-415-528-4164
EMAIL;TYPE=INTERNET:howes@netscape.com
END:vCard
</nowiki></pre>
 
Note that both of these vCards are invalid since they lack the REQUIRED "N" property which is quite ironic, since these are the vCards of the authors themselves.
 
Nonetheless, these vCards can be represented by the following hCards:
 
<pre><nowiki>
<div class="vcard">
<a class="url fn" href="http://home.earthlink.net/~fdawson">Frank Dawson</a>
<div class="org">Lotus Development Corporation</div>
<div class="adr">
<span class="type">work</span> address
(<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">packages</abbr>):
<div class="street-address">6544 Battleford Drive</div>
<span class="locality">Raleigh</span>
<span class="region">NC</span>
<span class="postal-code">27613-3502</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-919-676-9515</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-919-676-9564</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
<a class="email" href="mailto:Frank_Dawson@Lotus.com">
<span class="type">pref<span>erred</span> email</span>
</a>,
<a class="email" href="mailto:fdawson@earthlink.net">
alternate email
</a>
</div>
<div class="vcard">
<a class="email fn" href="mailto:howes@netscape.com">Tim Howes</a>
<div class="org">Netscape Communications Corp.</div>
<div class="adr">
<span class="type">work</span> address:
<div class="street-address">501 E. Middlefield Rd.</div>
<span class="locality">Mountain View</span>,
<span class="region">CA</span>
<span class="postal-code">94043</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-415-937-3419</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-415-528-4164</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
</div>
</nowiki></pre>
 
this hCards could be displayed as
 
<div class="vcard">
[http://home.earthlink.net/~fdawson Frank Dawson]
<div class="org">Lotus Development Corporation</div>
<div class="adr">
<span class="type">work</span> address
(<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">packages</abbr>):
<div class="street-address">6544 Battleford Drive</div>
<span class="locality">Raleigh</span>
<span class="region">NC</span>
<span class="postal-code">27613-3502</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-919-676-9515</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-919-676-9564</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
[mailto:Frank_Dawson@Lotus.com preferred email],
[mailto:fdawson@earthlink.net alternate email]
</div>
 
<div class="vcard">
[mailto:howes@netscape.com Tim Howes]
<div class="org">Netscape Communications Corp.</div>
<div class="adr">
<span class="type">work</span> address:
<div class="street-address">501 E. Middlefield Rd.</div>
<span class="locality">Mountain View</span>,
<span class="region">CA</span>
<span class="postal-code">94043</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-415-937-3419</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-415-528-4164</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
</div>


== Test de Casses ==
== Test de Casses ==
 
Ce sont des exemples [[hcard-fr|hCard]] qui ont été trouvés particulièrement utiles pour trouver des bugs dans les parseurs hCard (par ex. X2V).
These are [[hcard|hCard]] examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).


=== Problème avec Information BDAY ===
=== Problème avec Information BDAY ===
cet exemple :


this example:
<source lang=html4strict>
 
     <!-- anniversaire -->
<pre>
     <!-- birthday -->
     <div class="bday">
     <div class="bday">
     <dt>Birthday</dt>
     <dt>Anniversaire</dt>
     <dd>
     <dd>
         <abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
         <abbr class="value" title="1985-10-27T00:00:00Z">27 octobre 1985</abbr>
     </dd>
     </dd>
     </div>
     </div>
</pre>
</source>


ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985". interesting is that the apple addressbook is still willing to accept it in this way.
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.


=== case-INSENSITIVITY of type values ===
* Peut-être provoqué par une erreur de parsage HTML, parce que <code>&lt;dt></code> et <code>&lt;dd></code> ne sont pas permis en tant qu'enfants de <code>&lt;div></code>.
=== INSENSIBILITE à la casse des valeurs type ===


* "home" vs. "Home"
* "home" vs. "Home"


this example works with X2V:
cet exemple fonctionne avec X2V :


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


this does not, but should. but instead it becomes just TEL without a type in the vcard
ceci non, mais le devrait. Mais au lieu de ça il devient simplement TEL sans un type dans la vcard


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


=== GEO parsing ===
=== GEO parsing ===
The following hCard:
la hCard suivante :  


<pre><nowiki>
<source lang=html4strict>
<div class="vcard">
<div class="vcard">
   <span class="n">
   <span class="fn n">
     <a class="url" href="http://t37.net">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span>  
       <span class="given-name">Fréderic</span>  
Line 1,366: Line 449:
   <span class="nickname">neuro</span>
   <span class="nickname">neuro</span>
   <a class="email" href="mailto:neuroNOSPAM@t37.net">
   <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref<span>erred</span> email</span>
     <span class="type">pref</span>erred<span> email</span>
   </a>
   </a>
   <span class="org">Omatis</span>
   <span class="org">Omatis</span>
Line 1,384: Line 467:
   </span>
   </span>
</div>
</div>
</nowiki>
</source>
</pre>


Should be translated into the following vCard:
devrait être traduite dans la vCard suivante :


<pre><nowiki>
<source lang=html4strict>
BEGIN:VCARD
BEGIN:VCARD
VERSION:3.0
VERSION:3.0
Line 1,400: Line 482:
GEO:48.816667;2.366667
GEO:48.816667;2.366667
END:VCARD
END:VCARD
</nowiki></pre>
</source>
 
X2V currently (2005-12-18) fails to parse/export the GEO property at all.


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


* Voir [[hcard-brainstorming]] pour plus d'exemples (qui peuvent éventuellement être migrés ici) et une analyse.
== Pages Apparentées ==
* [[hcard-examples-issues-fr|hcard-exemples-problématiques]]
{{hcard-related-pages-fr}}

Latest revision as of 16:25, 18 July 2020


Exemples de hCards.

Auteurs

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 :

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.

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 :

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 :

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 :

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

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.