Exemples hCard

Exemples de hCards.

Auteurs

Tantek Çelik
Brian Suda

(Traduction en cours Christophe Ducamp)

Exemples Instructifs

Auteurs de Pages et de Posts

Selon la spécification HTML4.01, "les auteurs peuvent 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 l'exemple montré ci-dessus.

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 :

<cite><a 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 
<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>.

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.

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>

Ceci pourrait s'afficher comme :

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

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.

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.

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 pubication de contenu existant, et le saisirons simplement comme un autre URL pour le 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 une autre URL pour le microformat hCard :

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

Mis à jour le 14 mai 2006 - Ruben

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

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.

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

Organisations et Départements

Departments are marked up using the "organization-unit" class name inside the "org" element, with the "organization-name" specifically marked up to distinguish it from the department:

<div class="vcard">
 <div class="org fn">
  <div class="organization-name">Sprinkler Fitters U.A. Local 483</div> 
  <div class="organization-unit">Apprenticeship Training Center</div>
 </div>
</div>

The department may also be part of the address, in which case, you may want to explicitly mark it up as the "extended-address" in addition to the "organization-unit".

<div class="vcard">
 <div class="adr">
  <div class="org fn">
   <div class="organization-name">Sprinkler Fitters U.A. Local 483</div>
   <div class="organization-unit extended-address">Apprenticeship Training Center</div>
  </div>
  <div class="street-address">2531 Barrington Court</div>
  <span class="locality">Hayward</span>, 
  <abbr title="California" class="region">CA</abbr>
  <span class="postal-code">94545</span>
 </div>
</div>

Note that by nesting the org inside the address we avoided having to duplicate the department name.

Exemples RFC 2426 dans le hCard

These are 1:1 hCard examples for each example in RFC 2426.

Mark Pilgrim has made these hCard examples available as separate files:

http://diveintomark.org/projects/greasemonkey/hcard/tests/

2.4.2 VCARD

AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n
TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERNET:\n
jfriday@host.com\nEND:VCARD\n

This vCard fragment has one property whose value is another vCard, and could be represented as an hCard fragment with an embedded hCard, literally (with the unnecessary type=internet default omitted, and the implied n optimization):

<div class="agent vcard">
 <a class="email fn" href="mailto:jfriday@host.com">Joe Friday</a>
 <div class="tel">+1-919-555-7878</div>
 <div class="title">Area Administrator, Assistant</div>
</div>

this hCard could be displayed as:

Joe Friday
+1-919-555-7878
Area Administrator, Assistant

3.1.1 FN Définition Type

FN:Mr. John Q. Public\, Esq.

this vCard fragment as an hCard fragment:

<span class="fn">Mr. John Q. Public, Esq.</span>

this hCard fragment could be displayed as:

Mr. John Q. Public, Esq.

3.1.2 N Type Definition

Exemple 1

N:Public;John;Quinlan;Mr.;Esq.

this vCard fragment as an hCard fragment:

<span class="n">
 <span class="honorific-prefix">Mr.</span>
 <span class="given-name">John</span>
 <span class="additional-name">Quinlan</span>
 <span class="family-name">Public</span>, 
 <span class="honorific-suffix">Esq.</span>
</span>

this hCard fragment could be displayed as:

Mr. John Quinlan Public, Esq.

Exemple 2

N:Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.

this vCard fragment as an hCard fragment:

<span class="n">
 <span class="honorific-prefix">Dr.</span>
 <span class="given-name">John</span>
 <span class="additional-name">Philip</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>

this hCard fragment would be displayed as:

Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.

3.1.3 PSEUDO Type Definition

Exemple 1

NICKNAME:Robbie

this vCard fragment as an hCard fragment:

<span class="nickname">Robbie</span>

this hCard fragment could be displayed as:

Robbie

Exemple 2

NICKNAME:Jim,Jimmie

this vCard fragment as an hCard fragment:

<span class="nickname">Jim</span>, 
<span class="nickname">Jimmie</span>

this hCard fragment would be displayed as:

Jim, Jimmie

3.1.4 PHOTO Type Definition

Exemple 1

PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif

this vCard fragment as an hCard fragment:

<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" />

Exemple 2

PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
 AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
 ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 <...remainder of "B" encoded binary data...>

this vCard fragment as an hCard fragment (line breaks inserted into src value for readability):

<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />

3.1.5 BDAY Type Definition

Exemple 1

BDAY:1996-04-15

this vCard fragment as an hCard fragment:

<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>

this hCard fragment could be displayed as:

April 15, 1996

Exemple 2

BDAY:1953-10-15T23:10:00Z

this vCard fragment as an hCard fragment:

<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr>

this hCard fragment could be displayed as:

Oct 15, 1953

Exemple 3

BDAY:1987-09-27T08:30:00-06:00

this vCard fragment as an hCard fragment:

<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr>

this hCard fragment could be displayed as:

Sept 9, 1987

3.2.1 ADR Type Definition

ADR;TYPE=dom,home,postal,parcel:;;123 Main
  Street;Any Town;CA;91921-1234

this vCard fragment as an hCard fragment:

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

this hCard fragment could be displayed as:

US home address, for mail and shipments:

123 Main Street

Any Town, CA, 91921-1234

3.2.2 LABEL Type Definition

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.

this vCard fragment as an hCard fragment:

<nowiki>
Please use the following address label for 
<div class="label">
 <abbr class="type" title="dom">local delivery</abbr>
 <abbr class="type" title="home">to my home</abbr>
 <abbr class="type" title="postal">of mail</abbr>
 <abbr class="type" title="parcel">and packages:</abbr>
<pre>
Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA  91921-1234
U.S.A.

</nowiki>

Note : the above hCard fragment uses a <pre> tag inside a property value to capture/represent explicit carriage returns ("\n" characters) from the vCard fragment.

this hCard fragment could be displayed as:

Please use the following address label for local delivery to my home of mail and packages:

Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA  91921-1234
U.S.A.

3.3.1 TEL Type Definition

TEL;TYPE=work,voice,pref,msg:+1-213-555-1234

this vCard fragment as an hCard fragment:

<span class="tel">
 <abbr class="type" title="pref">my</abbr> 
 <span class="type">work</span> 
 <abbr class="type" title="voice">phone</abbr>, with 
 <abbr class="type" title="msg">voicemail</abbr>:
 <span class="value">+1-213-555-1234</span>
</span>

this hCard fragment could be displayed as:

my work phone, with voicemail: +1-213-555-1234

3.3.2 EMAIL Type Definition

Exemple 1

EMAIL;TYPE=internet:jqpublic@xyz.dom1.com

this vCard fragment as an hCard fragment:

<a class="email" href="mailto:jqpublic@xyz.dom1.com">email jqpublic</a>

this hCard fragment could be displayed as:

email jqpublic

Exemple 2

EMAIL;TYPE=internet:jdoe@isp.net

this vCard fragment as an hCard fragment:

<a class="email" href="mailto:jdoe@isp.net">email jdoe</a>

this hCard fragment could be displayed as:

email jdoe

Exemple 3

EMAIL;TYPE=internet,pref:jane_doe@abc.com

this vCard fragment as an hCard fragment:

<a class="email" href="mailto:jane_doe@abc.com">
 <abbr class="type" title="pref">preferred</abbr> 
 email for jane_doe
</a>

this hCard fragment could be displayed as:

preferred email for jane_doe

3.3.3 MAILER Type Definition

MAILER:PigeonMail 2.1

this vCard fragment as an hCard fragment:

Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.

this hCard fragment could be displayed as:

Jane Doe uses PigeonMail 2.1 for email.

3.4.1 TZ Type Definition

Exemple 1

TZ:-05:00

this vCard fragment as an hCard fragment:

<span class="tz">-05:00</span>

this hCard fragment could be displayed as:

-05:00

Exemple 2

TZ;VALUE=text:-05:00; EST; Raleigh/North America
;This example has a single value, not a structure text value.

this vCard fragment as an hCard fragment:

<abbr class="tz"
 title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">
 EST
</abbr>

this hCard fragment could be displayed as:

EST

3.4.2 GEO Type Definition

GEO:37.386013;-122.082932

this vCard fragment as an hCard fragment:

<span class="geo">
 <span class="latitude">37.386013</span>, 
 <span class="longitude">-122.082932</span>
</span>

this hCard fragment could be displayed as:

37.386013, -122.082932

3.5.1 TITLE Type Definition

TITLE:Director\, Research and Development

this vCard fragment as an hCard fragment:

<span class="title">Director, Research and Development</span>

this hCard fragment could be displayed as:

Director, Research and Development

3.5.2 ROLE Type Definition

ROLE:Programmer

this vCard fragment as an hCard fragment:

<span class="role">Programmer</span>

this hCard fragment could be displayed as:

Programmer

3.5.3 LOGO Type Definition

Exemple 1

LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg

this vCard fragment as an hCard fragment

<img class="logo" src="http://www.abc.com/pub/logos/abccorp.jpg" alt="my logo" />

this hCard fragment could be displayed as (note: I used a real URL for the image):

Exemple 2

LOGO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...the remainder of "B" encoded binary data...>

this vCard fragment as an hCard fragment

<img class="logo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />

no display equivalent given, since data: URL from original example is incomplete.

3.5.4 AGENT Type Definition

Exemple 1

AGENT;VALUE=uri:
 CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com

this vCard fragment as an hCard fragment

<a class="agent" href="CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com">JQPUBLIC</a>

this hCard fragment could be displayed as:

JQPUBLIC

Exemple 2

AGENT:BEGIN:VCARD\nFN:Susan Thomas\nTEL:+1-919-555-
 1234\nEMAIL\;INTERNET:sthomas@host.com\nEND:VCARD\n

this vCard fragment as an hCard fragment

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

this hCard fragment could be displayed as:

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

ORG:ABC\, Inc.;North American Division;Marketing

this vCard fragment as an hCard fragment:

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

this hCard fragment could be displayed as:

ABC, Inc., North American Division, Marketing

3.6.1 CATEGORIES Type Definition

Exemple 1

CATEGORIES:TRAVEL AGENT

this vCard fragment as an hCard fragment:

<span class="category">TRAVEL AGENT</span>

this hCard fragment could be displayed as:

TRAVEL AGENT

Exemple 2

CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY

this vCard fragment as an hCard fragment:

<span class="category">INTERNET</span>, 
<span class="category">IETF</span>, 
<span class="category">INDUSTRY</span>, 
<span class="category">INFORMATION TECHNOLOGY</span>

this hCard fragment would be displayed as:

INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY

3.6.2 NOTE Type Definition

NOTE:This fax number is operational 0800 to 1715
 EST\, Mon-Fri.

this vCard fragment as an hCard fragment:

<p class="note">This fax number is operational 0800 to 1715 EST, Mon-Fri.</p>

this hCard fragment could be displayed as:

This fax number is operational 0800 to 1715 EST, Mon-Fri.

3.6.3 PRODID Type Definition

PRODID:-//ONLINE DIRECTORY//NONSGML Version 1//EN

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

REV:1995-10-31T22:27:10Z

this vCard fragment as an hCard fragment:

<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr>

this hCard fragment could be displayed as:

Updated: 10/31 10:27p

Exemple 2

REV:1997-11-15

this vCard fragment as an hCard fragment:

<abbr class="rev" title="1997-11-15">Updated: November 15</abbr>

this hCard fragment could be displayed as:

Updated: November 15

3.6.5 SORT-STRING Type Definition

Exemple 1

FN:Rene van der Harten
N:van der Harten;Rene;J.;Sir;R.D.O.N.
SORT-STRING:Harten

this vCard fragment as an hCard fragment:

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

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 DRY principle than vCard.

this hCard fragment could be displayed as:

Sir Rene van der Harten (J.), R.D.O.N.

Exemple 2

FN:Robert Pau Shou Chang
N:Pau;Shou Chang;Robert
SORT-STRING:Pau

this vCard fragment as an hCard fragment:

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

Note: Not only was the string "Pau" was NOT repeated in the hCard (better 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 element conservation and use only one element for both properties.

this hCard fragment could be displayed as:

Robert Pau Shou Chang

Exemple 3

FN:Osamu Koura
N:Koura;Osamu
SORT-STRING:Koura

this vCard fragment as an hCard fragment:

<span class="fn">
 Osamu <span class="sort-string">Koura</span>
</span>

Note: This example, in addition to illustrating better support for the DRY principle, also makes use of the Implied "N" Optimization.

this hCard fragment could be displayed as:

Osamu Koura

Exemple 4

FN:Oscar del Pozo
N:del Pozo Triscon;Oscar
SORT-STRING:Pozo

this vCard fragment as an hCard fragment:

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

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

FN:Christine d'Aboville
N:d'Aboville;Christine
SORT-STRING:Aboville

this vCard fragment as an hCard fragment:

<span class="fn">
 Christine d'<span class="sort-string">Aboville</span>
</span>

Note: This example re-demonstrates the same hCard advantages/efficiencies demonstrated in example 3 above.

this hCard fragment could be displayed as:

Christine d'Aboville

3.6.6 SOUND Type Definition

Exemple 1

SOUND;TYPE=BASIC;VALUE=uri:CID:JOHNQPUBLIC.part8.
 19960229T080000.xyzMail@host1.com

this vCard fragment as an hCard fragment

<object class="sound" type="audio/basic"
 data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com">
pronounciation of "JOHN Q PUBLIC"
</object>

this hCard fragment would probably be displayed as

pronounciation of "JOHN Q PUBLIC"

unless your browser supports the MIME type "audio/basic" (defined in RFC2046 section 4.3) and has some way of retrieving "CID:" urls.

Exemple 2

SOUND;TYPE=BASIC;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
 AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
 ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 <...the remainder of "B" encoded binary data...>

this vCard fragment as an hCard fragment

<object class="sound" 
data="data:audio/basic;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
 AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
 ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 ...the remainder of "B" encoded binary data...">
pronounciation
</object>

no display equivalent given, since data: URL from original example is incomplete.

3.6.7 UID Type Definition

UID:19950401-080045-40000F192713-0052

this vCard fragment as an hCard fragment

Unique id: 
 <span class="uid">19950401-080045-40000F192713-0052</span>

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

URL:http://www.swbyps.restaurant.french/~chezchic.html

this vCard fragment as an hCard fragment

<a class="url" href="http://www.swbyps.restaurant.french/~chezchic.html">Chez Chic</a>

this hCard fragment could be displayed as

Chez Chic

3.7.1 CLASS Type Definition

Exemple 1

CLASS:PUBLIC

this vCard fragment as an hCard fragment

<span class="class">PUBLIC</span>

this hCard fragment could be displayed as

PUBLIC

Exemple 2

CLASS:PRIVATE

this vCard fragment as an hCard fragment

<span class="class">PRIVATE</span>

this hCard fragment could be displayed as

PRIVATE

Exemple 3

CLASS:CONFIDENTIAL

this vCard fragment as an hCard fragment

<span class="class">CONFIDENTIAL</span>

this hCard fragment could be displayed as

CONFIDENTIAL

3.7.2 KEY Type Definition

KEY;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
 wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
 Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
 E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
 VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
 MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
 Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
 EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
 dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
 EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
 +hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
 mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
 rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
 UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==

this vCard fragment as an hCard fragment

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

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

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

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:

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

this hCards could be displayed as

Frank Dawson

Lotus Development Corporation

work address (mail and packages):

6544 Battleford Drive

Raleigh NC 27613-3502

U.S.A.

+1-919-676-9515 (w, vm)

+1-919-676-9564 (wf)

preferred email, alternate email

Tim Howes

Netscape Communications Corp.

work address:

501 E. Middlefield Rd.

Mountain View, CA 94043

U.S.A.

+1-415-937-3419 (w, vm)

+1-415-528-4164 (wf)

Test de Casses

These are hCard examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).

Problème avec Information BDAY

this example:

    <!-- birthday -->
    <div class="bday">
    <dt>Birthday</dt>
    <dd>
        <abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
    </dd>
    </div>

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.

case-INSENSITIVITY of type values

"home" vs. "Home"

this example works with X2V:

    <div class="tel">
    <dt>Phone (<span class="type">home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>

this does not, but should. but instead it becomes just TEL without a type in the vcard

    <div class="tel">
    <dt>Phone (<span class="type">Home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>

GEO parsing

The following hCard:

<div class="vcard">
  <span class="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>

Should be translated into the following vCard:

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 currently (2005-12-18) fails to parse/export the GEO property at all.

Autre

Voir hcard-brainstorming pour plus d'exemples (qui peuvent éventuellement être migrés ici) et une analyse.

hcard-examples-fr

Exemples hCard

Auteurs

Exemples Instructifs

Auteurs de Pages et de Posts

Références aux Personnes et aux Organisations

hCard et XFN

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

Références aux Personnes dans les Blogrolls

Nouveaux Types d'Information de Contact

AOL Instant Messenger (AIM)

Yahoo Messenger

MSN Messenger

Profils de Sites

Organisations et Départements

Exemples RFC 2426 dans le hCard

2.4.2 VCARD

3.1.1 FN Définition Type

3.1.2 N Type Definition

Exemple 1

Exemple 2

3.1.3 PSEUDO Type Definition

Exemple 1

Exemple 2

3.1.4 PHOTO Type Definition

Exemple 1

Exemple 2

3.1.5 BDAY Type Definition

Exemple 1

Exemple 2

Exemple 3

3.2.1 ADR Type Definition

3.2.2 LABEL Type Definition

3.3.1 TEL Type Definition

3.3.2 EMAIL Type Definition

Exemple 1

Exemple 2

Exemple 3

3.3.3 MAILER Type Definition

3.4.1 TZ Type Definition

Exemple 1

Exemple 2

3.4.2 GEO Type Definition

3.5.1 TITLE Type Definition

3.5.2 ROLE Type Definition

3.5.3 LOGO Type Definition

Exemple 1

Exemple 2

3.5.4 AGENT Type Definition

Exemple 1

Exemple 2

3.5.5 ORG Type Definition

3.6.1 CATEGORIES Type Definition

Exemple 1

Exemple 2

3.6.2 NOTE Type Definition

3.6.3 PRODID Type Definition

3.6.4 REV Type Definition

Exemple 1

Exemple 2

3.6.5 SORT-STRING Type Definition

Exemple 1

Exemple 2

Exemple 3

Exemple 4

Exemple 5

3.6.6 SOUND Type Definition

Exemple 1

Exemple 2

3.6.7 UID Type Definition

3.6.8 URL Type Definition

3.7.1 CLASS Type Definition

Exemple 1

Exemple 2

Exemple 3

3.7.2 KEY Type Definition

7. Adresses des Auteurs

Test de Casses

Problème avec Information BDAY

case-INSENSITIVITY of type values