hcard-authoring-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(lizelnoacc)
m (Reverted edits by LidarRictr (Talk) to last version by ChristopheDucamp)
Line 1: Line 1:
relgetbas
<h1>Publier une hCard</h1>
<h1>Publier une hCard</h1>
{{TOC-right}}
{{TOC-right}}
{{navigation-fr}}
{{navigation-fr}}


Cette page contient quelques trucs utiles et instructions sur la façon de publier des [[hcard-fr|hCards]], soit à partir de zéro, ou soit en ajoutant du balisage à du contenu existant.
Cette page contient quelques trucs utiles et instructions sur la façon de publier des [[hcard-fr|hCards]], soit à partir de zéro, ou soit en ajoutant du balisage à du contenu existant.


'''But :''' Le but de ce document est de fournir quelques instructions intuitives qui devraient faire qu'il soit facile et aussi rapide que possible pour n'importe quel auteur de créer des hCards ou d'ajouter du balisage hCard à du contenu existant.
'''But :''' Le but de ce document est de fournir quelques instructions intuitives qui devraient faire qu'il soit facile et aussi rapide que possible pour n'importe quel auteur de créer des hCards ou d'ajouter du balisage hCard à du contenu existant.


'''Audience :''' auteurs, designers Web, architectes de l'information. Ce document est écrit pour une consommation facile et une compréhension par n'importe quel designer web connaissant au moins suffisamment de (X)HTML et CSS pour utiliser les noms de classes sémantiques sur les éléments (à savoir [[posh-fr|CHICs]]) et écrire des sélecteurs CSS qui appliquent les styles à ces noms de classe. SVP aidez à clarifier / simplifier ce document.
'''Audience :''' auteurs, designers Web, architectes de l'information. Ce document est écrit pour une consommation facile et une compréhension par n'importe quel designer web connaissant au moins suffisamment de (X)HTML et CSS pour utiliser les noms de classes sémantiques sur les éléments (à savoir [[posh-fr|CHICs]]) et écrire des sélecteurs CSS qui appliquent les styles à ces noms de classe. SVP aidez à clarifier / simplifier ce document.


'''Auteur(s) :''' [[User:Tantek|Tantek Çelik]], [[User:MarkRickerby|Mark Rickerby]]
'''Auteur(s) :''' [[User:Tantek|Tantek Çelik]], [[User:MarkRickerby|Mark Rickerby]]


'''Traducteur :''' [[User:ChristopheDucamp|Christophe Ducamp]]
'''Traducteur :''' [[User:ChristopheDucamp|Christophe Ducamp]]
Line 16: Line 15:


== Une amorce en 5 minutes pour utiliser hCard ==
== Une amorce en 5 minutes pour utiliser hCard ==
Imaginons une page statique qui contienne quelques détails personnels de contact, la section principale de quelque chose qui ressemble à ça :
Imaginons une page statique qui contienne quelques détails personnels de contact, la section principale de quelque chose qui ressemble à ça :


<pre>
<pre>
Line 24: Line 23:
   <p>Vous pouvez me contacter par email sur  
   <p>Vous pouvez me contacter par email sur  
   <a href="mailto:jane@example.com">jane@example.com</a>,  
   <a href="mailto:jane@example.com">jane@example.com</a>,  
   ou m'envoyer des trucs à l'adresse suivante :</p>
   ou m'envoyer des trucs à l'adresse suivante :</p>
   <p>255, une rue<br />
   <p>255, une rue<br />
     Une Ville,<br />
     Une Ville,<br />
Line 32: Line 31:
</pre>
</pre>


Ce petit morceau de code a tout de l'information lisible par les humains requises pour produire une représentation de [[hcard-fr|hCard]] valide - tout ce qui est nécessaire pour ajouter une structure supplémentaire qui définit chaque détail particulier. La première chose à faire est d'ajouter l'emballage de classe <code>vcard</code> à la <code>div</code> qui la contient, ce qui identifiera ce bloc particulier comme une [[hcard-fr|hCard]] :
Ce petit morceau de code a tout de l'information lisible par les humains requises pour produire une représentation de [[hcard-fr|hCard]] valide - tout ce qui est nécessaire pour ajouter une structure supplémentaire qui définit chaque détail particulier. La première chose à faire est d'ajouter l'emballage de classe <code>vcard</code> à la <code>div</code> qui la contient, ce qui identifiera ce bloc particulier comme une [[hcard-fr|hCard]] :


<pre><nowiki>
<pre><nowiki>
Line 38: Line 37:
</nowiki></pre>
</nowiki></pre>


Une chose qui vient à manquer à ce morceau de code est le nom de à qui ces détails de contacts s'appliquent - ceci rend l'information présentée plus ambigüe et plus difficile à comprendre. Il est bon d'être explicite avec de telles choses, et il arrive tout simplement que le nom de la propriété soit un champ obligatoire dans une [[hcard-fr|hCard]].  
Une chose qui vient à manquer à ce morceau de code est le nom de à qui ces détails de contacts s'appliquent - ceci rend l'information présentée plus ambigüe et plus difficile à comprendre. Il est bon d'être explicite avec de telles choses, et il arrive tout simplement que le nom de la propriété soit un champ obligatoire dans une [[hcard-fr|hCard]].  
Aussi ajoutons-le, en utilisant la classe <code>fn</code> :
Aussi ajoutons-le, en utilisant la classe <code>fn</code> :


Line 45: Line 44:
   <h2>Contactez-Moi</h2>
   <h2>Contactez-Moi</h2>
   <h3 class="fn">Jeanne Doe</h3>
   <h3 class="fn">Jeanne Doe</h3>
   <p>Vous pouvez me contacter par courrier électronique sur  
   <p>Vous pouvez me contacter par courrier électronique sur  
     <a href="mailto:jane@example.com">jeanne@exemple.com</a>,  
     <a href="mailto:jane@example.com">jeanne@exemple.com</a>,  
     ou me joindre à l'adresse suivante :</p>
     ou me joindre à l'adresse suivante :</p>
   <p>255 >Une rue<br />
   <p>255 >Une rue<br />
     Une Ville,<br />
     Une Ville,<br />
Line 54: Line 53:
</nowiki></pre>
</nowiki></pre>


Une autre chose que nous pouvons faire pour améliorer la sémantique du bout de code est de marquer l'adresse avec "adr" et utiliser les balises <code>div</code> parce que ce n'est vraiment pas un paragraphe. En même temps, nous devrions aussi nous débarrasser du marquage [http://tantek.com/log/2002/10.html#L20021022t1432 bed & breakfast] dans le second paragraphe, en le remplaçant par des noms de classes structurés pour les composants d'une adresse postale : <code>adr</code>, <code>street-address</code>, <code>locality</code> et <code>region</code>. Nous pouvons aussi ajouter la classe <code>email</code> au lien mailto pour compléter la structure de la [[hcard-fr|hCard]] :
Une autre chose que nous pouvons faire pour améliorer la sémantique du bout de code est de marquer l'adresse avec "adr" et utiliser les balises <code>div</code> parce que ce n'est vraiment pas un paragraphe. En même temps, nous devrions aussi nous débarrasser du marquage [http://tantek.com/log/2002/10.html#L20021022t1432 bed & breakfast] dans le second paragraphe, en le remplaçant par des noms de classes structurés pour les composants d'une adresse postale : <code>adr</code>, <code>street-address</code>, <code>locality</code> et <code>region</code>. Nous pouvons aussi ajouter la classe <code>email</code> au lien mailto pour compléter la structure de la [[hcard-fr|hCard]] :


<pre><nowiki>
<pre><nowiki>
Line 60: Line 59:
   <h2>Contactez-Moi</h2>
   <h2>Contactez-Moi</h2>
   <h3 class="fn">Jeanne Doe</h3>
   <h3 class="fn">Jeanne Doe</h3>
   <p>Vous pouvez me contacter par courrier électronique à
   <p>Vous pouvez me contacter par courrier électronique à
     <a class="email" href="mailto:jane@example.com">jeanne@example.com</a>,  
     <a class="email" href="mailto:jane@example.com">jeanne@example.com</a>,  
     ou me joindre à l'adresse suivante :</p>
     ou me joindre à l'adresse suivante :</p>
   <div class="adr">
   <div class="adr">
     <div class="street-address">255 Une rue</div>
     <div class="street-address">255 Une rue</div>
Line 71: Line 70:
</nowiki></pre>
</nowiki></pre>


Et voilà, c'est fait.
Et voilà, c'est fait.


Hormis les avantages de disposer de données visibles et structurées, fournir ces noms de classes supplémentaires accroît aussi les possibilités visuelles de design.
Hormis les avantages de disposer de données visibles et structurées, fournir ces noms de classes supplémentaires accroît aussi les possibilités visuelles de design.




== Créer de nouvelles hCards ==
== Créer de nouvelles hCards ==


Démarrez avec le [http://microformats.org/code/hcard/creator hCard creator], et pour des champs et propriétés supplémentaires (par ex. les numéros de téléphone, les contacts de messagerie instantanée), regardez la page des [[hcard-examples-fr|exemples de hCard]].
Démarrez avec le [http://microformats.org/code/hcard/creator hCard creator], et pour des champs et propriétés supplémentaires (par ex. les numéros de téléphone, les contacts de messagerie instantanée), regardez la page des [[hcard-examples-fr|exemples de hCard]].


== Ajouter du marquage hCard à du contenu existant ==
== Ajouter du marquage hCard à du contenu existant ==
=== hCard en langage naturel ===
=== hCard en langage naturel ===
Peut-être que vous avez une description de vous-même en prose traditionnelle. Commencez par lire l'article de Jeremy Keith "[http://microformateurs.org/2007/10/01/une-hcard-en-langage-naturel/  hCard en langage Naturel]" qui vous fournit une belle introduction succincte dans l'art d'ajouter de la syntaxe hCard à une biographie existante en prose.
Peut-être que vous avez une description de vous-même en prose traditionnelle. Commencez par lire l'article de Jeremy Keith "[http://microformateurs.org/2007/10/01/une-hcard-en-langage-naturel/  hCard en langage Naturel]" qui vous fournit une belle introduction succincte dans l'art d'ajouter de la syntaxe hCard à une biographie existante en prose.


Le billet récent de Jeremy [http://adactio.com/journal/1393/ Year zero] contient aussi une référence de citation hCard dans la ligne à "Malarkey" (qui a été cité) qui est tout à fait illustrative sur la façon de manière de marquer une simple référence d'hyperlien vers quelqu'un par un pseudo :
Le billet récent de Jeremy [http://adactio.com/journal/1393/ Year zero] contient aussi une référence de citation hCard dans la ligne à "Malarkey" (qui a été cité) qui est tout à fait illustrative sur la façon de manière de marquer une simple référence d'hyperlien vers quelqu'un par un pseudo :


<pre><nowiki>
<pre><nowiki>
Line 94: Line 93:
</nowiki></pre>
</nowiki></pre>


Il pourrait en fait produire ça juste un peu plus sémantique en faisant remarquer explicitement que "Malarkey" est un pseudo/nickname pour Andy Clarke :
Il pourrait en fait produire ça juste un peu plus sémantique en faisant remarquer explicitement que "Malarkey" est un pseudo/nickname pour Andy Clarke :


<pre><nowiki>
<pre><nowiki>
Line 104: Line 103:
</nowiki></pre>
</nowiki></pre>


De la même façon, un prénom raccourci seulement (par ex. Julie au lieu de Juliette) vers quelqu'un peut être marqué comme tel, ici avec XFN ajouté à l'hyperlien :  
De la même façon, un prénom raccourci seulement (par ex. Julie au lieu de Juliette) vers quelqu'un peut être marqué comme tel, ici avec XFN ajouté à l'hyperlien :  


<pre><nowiki>
<pre><nowiki>
Line 115: Line 114:


=== Changements Minimes de Syntaxe ===
=== Changements Minimes de Syntaxe ===
Au moment d'ajouter hCard à du contenu existant, gardez à l'esprit que la hCard a été conçue pour améliorer sémantiquement le contenu existant sans affecter sa présentation (ou très minimalement). Par conséquent, changez aussi peu de balisage que possible. Si vous voulez réparer différentes pages pour qu'elles soient valides XHTML etc., c'est bien.
Au moment d'ajouter hCard à du contenu existant, gardez à l'esprit que la hCard a été conçue pour améliorer sémantiquement le contenu existant sans affecter sa présentation (ou très minimalement). Par conséquent, changez aussi peu de balisage que possible. Si vous voulez réparer différentes pages pour qu'elles soient valides XHTML etc., c'est bien.


Dans tous les exemples en-dessous où il est dit d'ajouter un élément avec le nom de classe "<code>xyz</code>", cherchez tout d'abord un élément existant qui entoure précisément le contenu nécessaire. Ré-utilisez cet élément en ajoutant simplement le nom de classe "<code>xyz</code>" (ce qui veut dire d'ajouter " xyz " (sans les guillemets) à l'attribut de classe de l'élément existant, ou ajoutez un nouvel attribut de classe <code>class="xyz"</code> aux éléments sans un attribut de classe).
Dans tous les exemples en-dessous il est dit d'ajouter un élément avec le nom de classe "<code>xyz</code>", cherchez tout d'abord un élément existant qui entoure précisément le contenu nécessaire. -utilisez cet élément en ajoutant simplement le nom de classe "<code>xyz</code>" (ce qui veut dire d'ajouter " xyz " (sans les guillemets) à l'attribut de classe de l'élément existant, ou ajoutez un nouvel attribut de classe <code>class="xyz"</code> aux éléments sans un attribut de classe).


par ex. :
par ex. :
Line 133: Line 132:
=== Trouver des Personnes ou des Organisations ===
=== Trouver des Personnes ou des Organisations ===
Commencez par chercher toutes les mentions de personnes ou d'organisations sur une page.
Commencez par chercher toutes les mentions de personnes ou d'organisations sur une page.
Ce sont toutes des hCards potentielles. Même plus si elles sont liées vers leurs URLs respectives (par ex. pages personnelles / blogs / wikis).
Ce sont toutes des hCards potentielles. Même plus si elles sont liées vers leurs URLs respectives (par ex. pages personnelles / blogs / wikis).


Si une personne (ou une organisation, réduite à simplement "'''person/org'''") est mentionnée plusieurs fois  
Si une personne (ou une organisation, réduite à simplement "'''person/org'''") est mentionnée plusieurs fois  
sur une page, considérez de baliser la mention qui est la plus détaillée, définitive sous une hCard.  Idéalement, vous  
sur une page, considérez de baliser la mention qui est la plus détaillée, définitive sous une hCard.  Idéalement, vous  
pourriez vouloir baliser ''toutes'' les instances d'une personne/organisation sous hCards, mais à ce stade faites simple et balisez l'instance la plus représentative. (Peut-être l'instance la plus "définitive", qui pourrait être ensuite aussi balisée
pourriez vouloir baliser ''toutes'' les instances d'une personne/organisation sous hCards, mais à ce stade faites simple et balisez l'instance la plus représentative. (Peut-être l'instance la plus "définitive", qui pourrait être ensuite aussi balisée
avec un élément <code><nowiki><dfn></nowiki></code> autour du nom de la personne/organisaton pour le bonheur supplémentaire du XHTML sémantique)
avec un élément <code><nowiki><dfn></nowiki></code> autour du nom de la personne/organisaton pour le bonheur supplémentaire du XHTML sémantique)


=== Déterminez l'Elément Environnant pour Chacun ===
=== Déterminez l'Elément Environnant pour Chacun ===
Pour chaque personne/org que vous voulez transformer en hCard, trouvez l'élément le plus petit qui contienne toute l'information à propos de cette person/org, et aucune information à propos de quelque autre personne/organisation.
Pour chaque personne/org que vous voulez transformer en hCard, trouvez l'élément le plus petit qui contienne toute l'information à propos de cette person/org, et aucune information à propos de quelque autre personne/organisation.


Ajoutez le nom de classe "<code>vcard</code>" à cet élément.
Ajoutez le nom de classe "<code>vcard</code>" à cet élément.


S'il n'y a pas un tel élément (peut-être que l'élément le plus proche qui l'enferme contient plus qu'une personne/org), alors ajoutez un <code><nowiki><span class="vcard">...</span></nowiki></code> ou <code><nowiki><div class="vcard">...</div></nowiki></code> qui emballe l'information à propos de cette personne/org et seulement cette personne/org.
S'il n'y a pas un tel élément (peut-être que l'élément le plus proche qui l'enferme contient plus qu'une personne/org), alors ajoutez un <code><nowiki><span class="vcard">...</span></nowiki></code> ou <code><nowiki><div class="vcard">...</div></nowiki></code> qui emballe l'information à propos de cette personne/org et seulement cette personne/org.


Le reste du balisage pour cette hCard DOIT aller ''à l'intérieur'' de cet élément avec le nom de classe "vcard".
Le reste du balisage pour cette hCard DOIT aller ''à l'intérieur'' de cet élément avec le nom de classe "vcard".


=== L'Importance des Noms  ===
=== L'Importance des Noms  ===
Le nom est la propriété unique requise de hCard. Par conséquent, assurez-vous de baliser le nom de la personne avec le nom de classe "fn". Pour les noms de personnes qui sont deux mots simples (texte séparé par un espace) et où le premier mot est le prénom et le second le nom de famille, le nom de classe "fn" est suffisant. Par ex.  
Le nom est la propriété unique requise de hCard. Par conséquent, assurez-vous de baliser le nom de la personne avec le nom de classe "fn". Pour les noms de personnes qui sont deux mots simples (texte séparé par un espace) et le premier mot est le prénom et le second le nom de famille, le nom de classe "fn" est suffisant. Par ex.  
<pre><nowiki><div class="vcard"><span class="fn">Anne Dupont</span></div></nowiki></pre>
<pre><nowiki><div class="vcard"><span class="fn">Anne Dupont</span></div></nowiki></pre>


Pour les personnes avec des noms au milieu (par ex. "Alice Girod Delain"), ou avec des noms de familles avec plein de mots (par ex. "Valéry d'Estaing Giscard "), vous devez les baliser avec la propriété "n" et ses sous-propriétés "given-name" et "family-name", par ex. :
Pour les personnes avec des noms au milieu (par ex. "Alice Girod Delain"), ou avec des noms de familles avec plein de mots (par ex. "Valéry d'Estaing Giscard "), vous devez les baliser avec la propriété "n" et ses sous-propriétés "given-name" et "family-name", par ex. :
<pre><nowiki>
<pre><nowiki>
<div class="vcard"><span class="fn n" lang="no">
<div class="vcard"><span class="fn n" lang="no">
  <span class="given-name">Valéry</span>  
  <span class="given-name">Valéry</span>  
  <span class="additional-name">d'Estaing</span>
  <span class="additional-name">d'Estaing</span>
  <span class="family-name">Giscard</span>
  <span class="family-name">Giscard</span>
Line 168: Line 167:


==== hCards pour les organisations ====
==== hCards pour les organisations ====
Pour les hCards d'organisations, assurez-vous de mettre à la fois les noms de classes "fn" et "org" sur le même élément.  
Pour les hCards d'organisations, assurez-vous de mettre à la fois les noms de classes "fn" et "org" sur le même élément.  


Avoir ces deux mêmes noms est le truc pour que les consommateurs de hCard sache que la hCard représente une organisation plutôt qu'une personne. Par exemple,  
Avoir ces deux mêmes noms est le truc pour que les consommateurs de hCard sache que la hCard représente une organisation plutôt qu'une personne. Par exemple,  
<pre><nowiki><div class="vcard"><span class="fn org">Technorati</span></div></nowiki></pre>
<pre><nowiki><div class="vcard"><span class="fn org">Technorati</span></div></nowiki></pre>


=== URLs Représentatives ===
=== URLs Représentatives ===
L'un des modèles les plus communs pour les personnes/organisations dans le contenu web est le nom de la personne/org, hyperlié vers son site web définitif/préféré.
L'un des modèles les plus communs pour les personnes/organisations dans le contenu web est le nom de la personne/org, hyperlié vers son site web définitif/préféré.


Les blogrolls sont un bon exemple pour cela (voir aussi [[xoxo-fr|XOXO]]).
Les blogrolls sont un bon exemple pour cela (voir aussi [[xoxo-fr|XOXO]]).


Parce que l'attribut de classe prend un ensemble d'espace séparé des noms de classe, on peut souvent baliser l'URL sur le même élément que le nom, par ex. :
Parce que l'attribut de classe prend un ensemble d'espace séparé des noms de classe, on peut souvent baliser l'URL sur le même élément que le nom, par ex. :
<pre><nowiki>
<pre><nowiki>
<span class="vcard">
<span class="vcard">
Line 184: Line 183:
</nowiki></pre>
</nowiki></pre>


Balisez autant d'URLs que vous avez pour la personne/organisation avec le nom de classe url "<code>url</code>", par ex. des URLs vers des réseaux sociaux et autres services en ligne de profils.
Balisez autant d'URLs que vous avez pour la personne/organisation avec le nom de classe url "<code>url</code>", par ex. des URLs vers des réseaux sociaux et autres services en ligne de profils.


Si vous balisez une hCard sur votre propre site, soyez sûr d'ajouter aussi l'attribut [[xfn-fr|XFN]] <code>rel="me"</code> pour indiquer que ces pages de profils sont des facettes supplémentaires de votre identité en lige. Regardez <cite>[http://gmpg.org/xfn/and/#idconsolidation la consolidation de l'identité avec XFN]</cite> pour plus de détails.
Si vous balisez une hCard sur votre propre site, soyez sûr d'ajouter aussi l'attribut [[xfn-fr|XFN]] <code>rel="me"</code> pour indiquer que ces pages de profils sont des facettes supplémentaires de votre identité en lige. Regardez <cite>[http://gmpg.org/xfn/and/#idconsolidation la consolidation de l'identité avec XFN]</cite> pour plus de détails.


=== Titres ===
=== Titres ===
Si le titre du job de la personne est mentionné, balisez-le avec <code><nowiki><span class="title">...</span></nowiki></code>.
Si le titre du job de la personne est mentionné, balisez-le avec <code><nowiki><span class="title">...</span></nowiki></code>.


Bien que les vCards/hCards typiques n'aient qu'un titre de job unique, si quelqu'un a plusieurs titres de job listés, disons dans une liste délimitée par des virgules, balisez simplement l'ensemble d'entre eux avec un gros <code><nowiki><span class="title">...</span></nowiki></code>.
Bien que les vCards/hCards typiques n'aient qu'un titre de job unique, si quelqu'un a plusieurs titres de job listés, disons dans une liste délimitée par des virgules, balisez simplement l'ensemble d'entre eux avec un gros <code><nowiki><span class="title">...</span></nowiki></code>.


Voir le source sur le [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda] pour des exemples de personnes avec plusieurs titres.
Voir le source sur le [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda] pour des exemples de personnes avec plusieurs titres.


=== Autres affiliations ===
=== Autres affiliations ===
Parce que la vCard semble sous-entendre un modèle d'une personne n'étant seulement associée qu'à une organisation (au moins certainement c'est la manière dont la plupart des [[vcard-implementations-fr|implémentations vCard]] semblent être écrites),  
Parce que la vCard semble sous-entendre un modèle d'une personne n'étant seulement associée qu'à une organisation (au moins certainement c'est la manière dont la plupart des [[vcard-implementations-fr|implémentations vCard]] semblent être écrites),  
considérez de placer d'autres affiliations et informations à propos de la personne à l'intérieur des éléments <code><nowiki><span class="note">...</span></nowiki></code>.  Vous pouvez en avoir plus d'un ; les convertisseurs les ajouteront simplement tous dans l'ordre du source.
considérez de placer d'autres affiliations et informations à propos de la personne à l'intérieur des éléments <code><nowiki><span class="note">...</span></nowiki></code>.  Vous pouvez en avoir plus d'un ; les convertisseurs les ajouteront simplement tous dans l'ordre du source.


Voir la source sur le [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda] pour des exemples de personnes avec des affiliations supplémentaires (comme celles du W3C Working Groups) balisées à l'intérieur d'éléments "note".
Voir la source sur le [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda] pour des exemples de personnes avec des affiliations supplémentaires (comme celles du W3C Working Groups) balisées à l'intérieur d'éléments "note".


Parfois le texte dans un document près d'une personne/contact expliquera *pourquoi* cette personne-là devrait être contactée. Une telle information est aussi utile à avoir dans un élément "note".
Parfois le texte dans un document près d'une personne/contact expliquera *pourquoi* cette personne-devrait être contactée. Une telle information est aussi utile à avoir dans un élément "note".


Voir la source sur [http://rbach.priv.at/repos/misc/microformatting/ETech2006/invite.html l'invitation O'Reilly ETech 2006] pour des exemples de personnes avec des "Pour ... " supplémentaires balisés comme des éléments "note".
Voir la source sur [http://rbach.priv.at/repos/misc/microformatting/ETech2006/invite.html l'invitation O'Reilly ETech 2006] pour des exemples de personnes avec des "Pour ... " supplémentaires balisés comme des éléments "note".


=== Régler la langue si différente ===
=== Régler la langue si différente ===
Dans un document en langue anglaise (<code>lang="en"</code>), soyez certain de baliser l'élément entourant tous les noms de personnes non-anglaises, sociétés, titres, notes, etc. avec un attribut lang avec la valeur appropriée.
Dans un document en langue anglaise (<code>lang="en"</code>), soyez certain de baliser l'élément entourant tous les noms de personnes non-anglaises, sociétés, titres, notes, etc. avec un attribut lang avec la valeur appropriée.


Par ex. les noms français dans un document anglais devraient être balisés avec (<code>lang="fr"</code>) sur ses éléments.
Par ex. les noms français dans un document anglais devraient être balisés avec (<code>lang="fr"</code>) sur ses éléments.


Voir le source sur le [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda], spécifiquement Ignacio Marín, pour un exemple de personne et d'organisation balisé avec un attribut <code>lang</code>.
Voir le source sur le [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda], spécifiquement Ignacio Marín, pour un exemple de personne et d'organisation balisé avec un attribut <code>lang</code>.


=== Numéros de Téléphone ===
=== Numéros de Téléphone ===
Ajoutez quelques numéros de téléphone comme ceci :  
Ajoutez quelques numéros de téléphone comme ceci :  
<pre>
<pre>
  <div class="tel">
  <div class="tel">
   <span class="type">work</span>
   <span class="type">work</span>
   tél : <span class="value">1-250-555-2142</span>
   tél : <span class="value">1-250-555-2142</span>
  </div>
  </div>
  <div class="tel">
  <div class="tel">
   <span class="type">work</span>
   <span class="type">work</span>
   numéro vert : <span class="value">1-800-555-1855</span>
   numéro vert : <span class="value">1-800-555-1855</span>
  </div>
  </div>
  <div class="tel">
  <div class="tel">
Line 230: Line 229:
</pre>
</pre>


La liste des types de tel : <code>voice</code> [qui est la valeur par défaut si le "type" n'est pas spécifié, <code>home</code>, <code>msg</code>, <code>work</code>, <code>pref</code>, <code>fax</code>, <code>cell</code>, <code>video</code>, <code>pager</code>, <code>bbs</code>, <code>modem</code>, <code>car</code>, <code>isdn</code>, <code>pcs</code>.  Comme affiché dans le dernier exemple au-dessus, un tel peut avoir plusieurs types. Voir [[hcard-fr#valeurs_sous-propri.C3.A9t.C3.A9_type|hCard: Valeurs Sous-Propriétés Types]] pour la liste officielle.
La liste des types de tel : <code>voice</code> [qui est la valeur par défaut si le "type" n'est pas spécifié, <code>home</code>, <code>msg</code>, <code>work</code>, <code>pref</code>, <code>fax</code>, <code>cell</code>, <code>video</code>, <code>pager</code>, <code>bbs</code>, <code>modem</code>, <code>car</code>, <code>isdn</code>, <code>pcs</code>.  Comme affiché dans le dernier exemple au-dessus, un tel peut avoir plusieurs types. Voir [[hcard-fr#valeurs_sous-propri.C3.A9t.C3.A9_type|hCard: Valeurs Sous-Propriétés Types]] pour la liste officielle.


=== Photographies ===
=== Photographies ===
Balisez des image(s) représentatives de la person/org avec le nom de classe "<code>photo</code>", par ex. :
Balisez des image(s) représentatives de la person/org avec le nom de classe "<code>photo</code>", par ex. :


<pre>
<pre>
Line 239: Line 238:
</pre>
</pre>


Si votre nom n'est pas déjà marqué (voir la section Nom au-dessus), et que votre prénom et nom de famille sont seulement composés de deux mots, vous pouvez régler l'attribut alt pour l'image sous votre nom. Dans ce cas, incluez le nom de classe "fn" avec le nom de classe "photo" dans l'attribut de classe :  
Si votre nom n'est pas déjà marqué (voir la section Nom au-dessus), et que votre prénom et nom de famille sont seulement composés de deux mots, vous pouvez régler l'attribut alt pour l'image sous votre nom. Dans ce cas, incluez le nom de classe "fn" avec le nom de classe "photo" dans l'attribut de classe :  


<pre>
<pre>
Line 245: Line 244:
</pre>
</pre>


Pour vous assurer que l'image n'est pas laissée de côté à chaque fois qu'une hcard est convertie en vcard, l'URI externe devrait être remplacée par la donnée véritable encodée comme suit :  
Pour vous assurer que l'image n'est pas laissée de côté à chaque fois qu'une hcard est convertie en vcard, l'URI externe devrait être remplacée par la donnée véritable encodée comme suit :  


<pre><img alt="photo" class="photo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB[...]RRxTwKpCP//Z" /></pre>
<pre><img alt="photo" class="photo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB[...]RRxTwKpCP//Z" /></pre>
Line 251: Line 250:
Un moyen facile d'encoder une image de contact est d'utiliser une application qui peut exporter les fichiers vcard incluant l'image du contact, comme le fait le freeware [http://www.palm.com/us/software/desktop/ Palm Desktop].
Un moyen facile d'encoder une image de contact est d'utiliser une application qui peut exporter les fichiers vcard incluant l'image du contact, comme le fait le freeware [http://www.palm.com/us/software/desktop/ Palm Desktop].


=== Coordonnées Géographiques ===
=== Coordonnées Géographiques ===
Ajoutez vos coordonnées géographiques :
Ajoutez vos coordonnées géographiques :
<pre>
<pre>
  <span class="geo">
  <span class="geo">
Line 260: Line 259:
</pre>
</pre>


Une version plus humaine serait implémentée comme suit :
Une version plus humaine serait implémentée comme suit :


<pre>
<pre>
Line 269: Line 268:
</pre>
</pre>


Ceci paraîtra comme ça : 31°23'18"S, 57°57'38"O.
Ceci paraîtra comme ça : 31°23'18"S, 57°57'38"O.


Notez que les caractères degré, minute et secondes devraient être encodés comme tels dans l'exemple de code source au-dessus pour éviter que le navigateur ne confonde l'encodage de caractère utilisé par la page et affiche des caractères erronnés, comme des caractères chinois où les accents devraient être affichés.
Notez que les caractères degré, minute et secondes devraient être encodés comme tels dans l'exemple de code source au-dessus pour éviter que le navigateur ne confonde l'encodage de caractère utilisé par la page et affiche des caractères erronnés, comme des caractères chinois les accents devraient être affichés.


Un bon endroit pour obtenir vos valeurs de coordonnées dans les deux formats est Wikipedia. Regardez l'article sur votre ville et cliquez sur les coordonnées exprimées en valeurs humaines pour charger une page avec les valeurs décimales.
Un bon endroit pour obtenir vos valeurs de coordonnées dans les deux formats est Wikipedia. Regardez l'article sur votre ville et cliquez sur les coordonnées exprimées en valeurs humaines pour charger une page avec les valeurs décimales.


(http://geotruc.net vous fournit automatiquement les coordonnées si vous habitez en France)
(http://geotruc.net vous fournit automatiquement les coordonnées si vous habitez en France)


=== Fragments et liens ===
=== Fragments et liens ===
Une hCard est un morceau logique de contenu que les personnes pourraient aimer lier. Si elle est sur une page avec d'autres contenus, il peut être difficile de lier vers juste l'unique hCard, à moins que vous n'ayez placé un identifiant fragment à utiliser. En HTML, vous pouvez créer des identifiants fragments en ajoutant un attribut 'id' à n'importe quel élément. C'est une bonne pratique que d'ajouter un attribut 'id' à n'importe quel élément. C'est une bonne pratique que d'ajouter un 'id' à l'élément qui encapsule une hCard.
Une hCard est un morceau logique de contenu que les personnes pourraient aimer lier. Si elle est sur une page avec d'autres contenus, il peut être difficile de lier vers juste l'unique hCard, à moins que vous n'ayez placé un identifiant fragment à utiliser. En HTML, vous pouvez créer des identifiants fragments en ajoutant un attribut 'id' à n'importe quel élément. C'est une bonne pratique que d'ajouter un attribut 'id' à n'importe quel élément. C'est une bonne pratique que d'ajouter un 'id' à l'élément qui encapsule une hCard.


=== Plus de trucs et d'instructions ===
=== Plus de trucs et d'instructions ===
Sentez-vous libre d'ajouter plus de choses que l'expérience vous a enseignée pendant que vous balisez des hCards, même si tout ce que vous ajoutez n'est qu'une brève "catch-phrase" dont vous vous souvenez.
Sentez-vous libre d'ajouter plus de choses que l'expérience vous a enseignée pendant que vous balisez des hCards, même si tout ce que vous ajoutez n'est qu'une brève "catch-phrase" dont vous vous souvenez.


* Comment noter quelque texte, de façon que vous puissiez faire un commentaire qui est votre assistante administrative.
* Comment noter quelque texte, de façon que vous puissiez faire un commentaire qui est votre assistante administrative.
* Plus d'exemples de codes dans la ligne, peut-être un pour chaque section (suggestion de Cdevroe)
* Plus d'exemples de codes dans la ligne, peut-être un pour chaque section (suggestion de Cdevroe)
* (suggestion de brian) vous mentionnez la blogroll, ce pourrait être hors sujet, mais vous pourriez mentionner que XFN et hCard peuvent être inter-tissés - ce n'est pas l'un ou l'autre
* (suggestion de brian) vous mentionnez la blogroll, ce pourrait être hors sujet, mais vous pourriez mentionner que XFN et hCard peuvent être inter-tissés - ce n'est pas l'un ou l'autre
* ...
* ...


== Liens "Ajouter au Carnet d'Adresses" ==
== Liens "Ajouter au Carnet d'Adresses" ==
Quand vous mettez à jour votre information de contact pour inclure un balisage hCard, vous devriez aussi ajouter un lien "Ajouter au Carnet d'Adresses" pour que ce soit commode pour vos lecteurs.
Quand vous mettez à jour votre information de contact pour inclure un balisage hCard, vous devriez aussi ajouter un lien "Ajouter au Carnet d'Adresses" pour que ce soit commode pour vos lecteurs.


Voici un exemple d'un tel lien :  
Voici un exemple d'un tel lien :  
Line 299: Line 298:
</nowiki></pre>
</nowiki></pre>


Substituez simplement le lien vers votre hCard pour l'URL http://tantek.com/%23hcard ci-dessus, et si vous avez plus d'une hCard sur cette page, vous devriez placer une ID unique sur chacune et puis substituer %23hcard dans l'URL exemple avec %23THEID dans votre code href où THEID est la valeur d'attribut ID que vous placez sur la hCard pour laquelle vous créez le lien.
Substituez simplement le lien vers votre hCard pour l'URL http://tantek.com/%23hcard ci-dessus, et si vous avez plus d'une hCard sur cette page, vous devriez placer une ID unique sur chacune et puis substituer %23hcard dans l'URL exemple avec %23THEID dans votre code href THEID est la valeur d'attribut ID que vous placez sur la hCard pour laquelle vous créez le lien.


Si une hcard unique est servie par une page index comme http://foo.com/index.php, vous avez juste besoin de substituer http://tantek.com/%23hcard avec http://foo.com/
Si une hcard unique est servie par une page index comme http://foo.com/index.php, vous avez juste besoin de substituer http://tantek.com/%23hcard avec http://foo.com/


Si vous le voulez, vous pouvez aussi utiliser le service hébergé X2V de Brian Suda, ou même télécharger et installer vous-même le X2V XSLT et la faire fonctionner sur votre propre serveur au lieu d'utiliser un service de conversion de hCard vers vCard.
Si vous le voulez, vous pouvez aussi utiliser le service hébergé X2V de Brian Suda, ou même télécharger et installer vous-même le X2V XSLT et la faire fonctionner sur votre propre serveur au lieu d'utiliser un service de conversion de hCard vers vCard.
                                                                          
                                                                          


== Pages Apparentées ==
== Pages Apparentées ==
{{hcard-related-pages-fr}}
{{hcard-related-pages-fr}}

Revision as of 06:54, 17 December 2008

Publier une hCard

Navigation : Page principale - Page aléatoire - Aide - Pages spéciales

Cette page contient quelques trucs utiles et instructions sur la façon de publier des hCards, soit à partir de zéro, ou soit en ajoutant du balisage à du contenu existant.

But : Le but de ce document est de fournir quelques instructions intuitives qui devraient faire qu'il soit facile et aussi rapide que possible pour n'importe quel auteur de créer des hCards ou d'ajouter du balisage hCard à du contenu existant.

Audience : auteurs, designers Web, architectes de l'information. Ce document est écrit pour une consommation facile et une compréhension par n'importe quel designer web connaissant au moins suffisamment de (X)HTML et CSS pour utiliser les noms de classes sémantiques sur les éléments (à savoir CHICs) et écrire des sélecteurs CSS qui appliquent les styles à ces noms de classe. SVP aidez à clarifier / simplifier ce document.

Auteur(s) : Tantek Çelik, Mark Rickerby

Traducteur : Christophe Ducamp


Une amorce en 5 minutes pour utiliser hCard

Imaginons une page statique qui contienne quelques détails personnels de contact, la section principale de quelque chose qui ressemble à ça :


<div id="contact">
  <h2>Contact Me</h2>
  <p>Vous pouvez me contacter par email sur 
   <a href="mailto:jane@example.com">jane@example.com</a>, 
   ou m'envoyer des trucs à l'adresse suivante :</p>
  <p>255, une rue<br />
     Une Ville,<br />
     Un Endroit</p>
</div>

Ce petit morceau de code a tout de l'information lisible par les humains requises pour produire une représentation de hCard valide - tout ce qui est nécessaire pour ajouter une structure supplémentaire qui définit chaque détail particulier. La première chose à faire est d'ajouter l'emballage de classe vcard à la div qui la contient, ce qui identifiera ce bloc particulier comme une hCard :

<div id="contact" class="vcard">

Une chose qui vient à manquer à ce morceau de code est le nom de à qui ces détails de contacts s'appliquent - ceci rend l'information présentée plus ambigüe et plus difficile à comprendre. Il est bon d'être explicite avec de telles choses, et il arrive tout simplement que le nom de la propriété soit un champ obligatoire dans une hCard. Aussi ajoutons-le, en utilisant la classe fn :

<div id="contact" class="vcard">
   <h2>Contactez-Moi</h2>
   <h3 class="fn">Jeanne Doe</h3>
   <p>Vous pouvez me contacter par courrier électronique sur 
    <a href="mailto:jane@example.com">jeanne@exemple.com</a>, 
    ou me joindre à l'adresse suivante :</p>
   <p>255 >Une rue<br />
     Une Ville,<br />
     Un Endroit</p>
</div>

Une autre chose que nous pouvons faire pour améliorer la sémantique du bout de code est de marquer l'adresse avec "adr" et utiliser les balises div parce que ce n'est vraiment pas un paragraphe. En même temps, nous devrions aussi nous débarrasser du marquage bed & breakfast dans le second paragraphe, en le remplaçant par des noms de classes structurés pour les composants d'une adresse postale : adr, street-address, locality et region. Nous pouvons aussi ajouter la classe email au lien mailto pour compléter la structure de la hCard :

<div id="contact" class="vcard">
   <h2>Contactez-Moi</h2>
   <h3 class="fn">Jeanne Doe</h3>
   <p>Vous pouvez me contacter par courrier électronique à 
    <a class="email" href="mailto:jane@example.com">jeanne@example.com</a>, 
    ou me joindre à l'adresse suivante :</p>
   <div class="adr">
     <div class="street-address">255 Une rue</div>
     <div class="locality">Une Ville<div/>
     <div class="region">Un Endroit</div>
   </div>
</div>

Et voilà, c'est fait.

Hormis les avantages de disposer de données visibles et structurées, fournir ces noms de classes supplémentaires accroît aussi les possibilités visuelles de design.


Créer de nouvelles hCards

Démarrez avec le hCard creator, et pour des champs et propriétés supplémentaires (par ex. les numéros de téléphone, les contacts de messagerie instantanée), regardez la page des exemples de hCard.

Ajouter du marquage hCard à du contenu existant

hCard en langage naturel

Peut-être que vous avez une description de vous-même en prose traditionnelle. Commencez par lire l'article de Jeremy Keith "hCard en langage Naturel" qui vous fournit une belle introduction succincte dans l'art d'ajouter de la syntaxe hCard à une biographie existante en prose.

Le billet récent de Jeremy Year zero contient aussi une référence de citation hCard dans la ligne à "Malarkey" (qui a été cité) qui est tout à fait illustrative sur la façon de manière de marquer une simple référence d'hyperlien vers quelqu'un par un pseudo :

<cite class="vcard">
 <abbr class="fn" title="Andy Clarke">
  <a href="http://www.stuffandnonsense.co.uk/malarkey/">Malarkey</a>
 </abbr>
</cite>

Il pourrait en fait produire ça juste un peu plus sémantique en faisant remarquer explicitement que "Malarkey" est un pseudo/nickname pour Andy Clarke :

<cite class="vcard">
 <abbr class="fn" title="Andy Clarke">
  <a class="nickname" href="http://www.stuffandnonsense.co.uk/malarkey">Malarkey</a>
 </abbr>
</cite>

De la même façon, un prénom raccourci seulement (par ex. Julie au lieu de Juliette) vers quelqu'un peut être marqué comme tel, ici avec XFN ajouté à l'hyperlien :

<span class="vcard">
 <abbr class="fn" title="Juliette Melton">
  <a class="url nickname" rel="friend" href="http://juliettemelton.com/">Julie</a>
 </abbr>
</span> 

Changements Minimes de Syntaxe

Au moment d'ajouter hCard à du contenu existant, gardez à l'esprit que la hCard a été conçue pour améliorer sémantiquement le contenu existant sans affecter sa présentation (ou très minimalement). Par conséquent, changez aussi peu de balisage que possible. Si vous voulez réparer différentes pages pour qu'elles soient valides XHTML etc., c'est bien.

Dans tous les exemples en-dessous où il est dit d'ajouter un élément avec le nom de classe "xyz", cherchez tout d'abord un élément existant qui entoure précisément le contenu nécessaire. Ré-utilisez cet élément en ajoutant simplement le nom de classe "xyz" (ce qui veut dire d'ajouter " xyz " (sans les guillemets) à l'attribut de classe de l'élément existant, ou ajoutez un nouvel attribut de classe class="xyz" aux éléments sans un attribut de classe).

par ex. :

<span class="foo">...</span>

deviendrait :

<span class="foo xyz">...</span>

Et

<span>...</span>

deviendrait :

<span class="xyz">...</span>

Trouver des Personnes ou des Organisations

Commencez par chercher toutes les mentions de personnes ou d'organisations sur une page. Ce sont toutes des hCards potentielles. Même plus si elles sont liées vers leurs URLs respectives (par ex. pages personnelles / blogs / wikis).

Si une personne (ou une organisation, réduite à simplement "person/org") est mentionnée plusieurs fois sur une page, considérez de baliser la mention qui est la plus détaillée, définitive sous une hCard. Idéalement, vous pourriez vouloir baliser toutes les instances d'une personne/organisation sous hCards, mais à ce stade faites simple et balisez l'instance la plus représentative. (Peut-être l'instance la plus "définitive", qui pourrait être ensuite aussi balisée avec un élément <dfn> autour du nom de la personne/organisaton pour le bonheur supplémentaire du XHTML sémantique)

Déterminez l'Elément Environnant pour Chacun

Pour chaque personne/org que vous voulez transformer en hCard, trouvez l'élément le plus petit qui contienne toute l'information à propos de cette person/org, et aucune information à propos de quelque autre personne/organisation.

Ajoutez le nom de classe "vcard" à cet élément.

S'il n'y a pas un tel élément (peut-être que l'élément le plus proche qui l'enferme contient plus qu'une personne/org), alors ajoutez un <span class="vcard">...</span> ou <div class="vcard">...</div> qui emballe l'information à propos de cette personne/org et seulement cette personne/org.

Le reste du balisage pour cette hCard DOIT aller à l'intérieur de cet élément avec le nom de classe "vcard".

L'Importance des Noms

Le nom est la propriété unique requise de hCard. Par conséquent, assurez-vous de baliser le nom de la personne avec le nom de classe "fn". Pour les noms de personnes qui sont deux mots simples (texte séparé par un espace) et où le premier mot est le prénom et le second le nom de famille, le nom de classe "fn" est suffisant. Par ex.

<div class="vcard"><span class="fn">Anne Dupont</span></div>

Pour les personnes avec des noms au milieu (par ex. "Alice Girod Delain"), ou avec des noms de familles avec plein de mots (par ex. "Valéry d'Estaing Giscard "), vous devez les baliser avec la propriété "n" et ses sous-propriétés "given-name" et "family-name", par ex. :

<div class="vcard"><span class="fn n" lang="no">
 <span class="given-name">Valéry</span> 
 <span class="additional-name">d'Estaing</span>
 <span class="family-name">Giscard</span>
</span></div>

<div class="vcard"><span class="fn n">
 <span class="given-name">Alice</span> 
 <span class="family-name">Girod Delain</span>
</span></div>

hCards pour les organisations

Pour les hCards d'organisations, assurez-vous de mettre à la fois les noms de classes "fn" et "org" sur le même élément.

Avoir ces deux mêmes noms est le truc pour que les consommateurs de hCard sache que la hCard représente une organisation plutôt qu'une personne. Par exemple,

<div class="vcard"><span class="fn org">Technorati</span></div>

URLs Représentatives

L'un des modèles les plus communs pour les personnes/organisations dans le contenu web est le nom de la personne/org, hyperlié vers son site web définitif/préféré.

Les blogrolls sont un bon exemple pour cela (voir aussi XOXO).

Parce que l'attribut de classe prend un ensemble d'espace séparé des noms de classe, on peut souvent baliser l'URL sur le même élément que le nom, par ex. :

<span class="vcard">
<a href="http://theryanking.com" class="fn url">Ryan King</a></span>

Balisez autant d'URLs que vous avez pour la personne/organisation avec le nom de classe url "url", par ex. des URLs vers des réseaux sociaux et autres services en ligne de profils.

Si vous balisez une hCard sur votre propre site, soyez sûr d'ajouter aussi l'attribut XFN rel="me" pour indiquer que ces pages de profils sont des facettes supplémentaires de votre identité en lige. Regardez la consolidation de l'identité avec XFN pour plus de détails.

Titres

Si le titre du job de la personne est mentionné, balisez-le avec <span class="title">...</span>.

Bien que les vCards/hCards typiques n'aient qu'un titre de job unique, si quelqu'un a plusieurs titres de job listés, disons dans une liste délimitée par des virgules, balisez simplement l'ensemble d'entre eux avec un gros <span class="title">...</span>.

Voir le source sur le W3C Technical Plenary Agenda pour des exemples de personnes avec plusieurs titres.

Autres affiliations

Parce que la vCard semble sous-entendre un modèle d'une personne n'étant seulement associée qu'à une organisation (au moins certainement c'est la manière dont la plupart des implémentations vCard semblent être écrites), considérez de placer d'autres affiliations et informations à propos de la personne à l'intérieur des éléments <span class="note">...</span>. Vous pouvez en avoir plus d'un ; les convertisseurs les ajouteront simplement tous dans l'ordre du source.

Voir la source sur le W3C Technical Plenary Agenda pour des exemples de personnes avec des affiliations supplémentaires (comme celles du W3C Working Groups) balisées à l'intérieur d'éléments "note".

Parfois le texte dans un document près d'une personne/contact expliquera *pourquoi* cette personne-là devrait être contactée. Une telle information est aussi utile à avoir dans un élément "note".

Voir la source sur l'invitation O'Reilly ETech 2006 pour des exemples de personnes avec des "Pour ... " supplémentaires balisés comme des éléments "note".

Régler la langue si différente

Dans un document en langue anglaise (lang="en"), soyez certain de baliser l'élément entourant tous les noms de personnes non-anglaises, sociétés, titres, notes, etc. avec un attribut lang avec la valeur appropriée.

Par ex. les noms français dans un document anglais devraient être balisés avec (lang="fr") sur ses éléments.

Voir le source sur le W3C Technical Plenary Agenda, spécifiquement Ignacio Marín, pour un exemple de personne et d'organisation balisé avec un attribut lang.

Numéros de Téléphone

Ajoutez quelques numéros de téléphone comme ceci :

 <div class="tel">
  <span class="type">work</span>
  tél : <span class="value">1-250-555-2142</span>
 </div>
 <div class="tel">
  <span class="type">work</span>
  numéro vert : <span class="value">1-800-555-1855</span>
 </div>
 <div class="tel">
  <span class="type">work</span>
  <span class="type">fax</span>
  fax : <span class="value">1-250-555-2135</span>
 </div>

La liste des types de tel : voice [qui est la valeur par défaut si le "type" n'est pas spécifié, home, msg, work, pref, fax, cell, video, pager, bbs, modem, car, isdn, pcs. Comme affiché dans le dernier exemple au-dessus, un tel peut avoir plusieurs types. Voir hCard: Valeurs Sous-Propriétés Types pour la liste officielle.

Photographies

Balisez des image(s) représentatives de la person/org avec le nom de classe "photo", par ex. :

<img class="photo" src="http://www.factorycity.net/images/avatar.jpg" alt="" />

Si votre nom n'est pas déjà marqué (voir la section Nom au-dessus), et que votre prénom et nom de famille sont seulement composés de deux mots, vous pouvez régler l'attribut alt pour l'image sous votre nom. Dans ce cas, incluez le nom de classe "fn" avec le nom de classe "photo" dans l'attribut de classe :

<img class="photo fn" src="http://www.factorycity.net/images/avatar.jpg" alt="Chris Messina" />

Pour vous assurer que l'image n'est pas laissée de côté à chaque fois qu'une hcard est convertie en vcard, l'URI externe devrait être remplacée par la donnée véritable encodée comme suit :

<img alt="photo" class="photo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB[...]RRxTwKpCP//Z" />

Un moyen facile d'encoder une image de contact est d'utiliser une application qui peut exporter les fichiers vcard incluant l'image du contact, comme le fait le freeware Palm Desktop.

Coordonnées Géographiques

Ajoutez vos coordonnées géographiques :

 <span class="geo">
  <span class="latitude">48.430092246</span>
  <span class="longitude">-123.364348450</span>
 </span>

Une version plus humaine serait implémentée comme suit :

<div class="geo">
<abbr class="latitude" title="-31.388333">31°23'18"S</abbr>,
<abbr class="longitude" title="-57.960556">57°57'38"O</abbr>
</div>

Ceci paraîtra comme ça : 31°23'18"S, 57°57'38"O.

Notez que les caractères degré, minute et secondes devraient être encodés comme tels dans l'exemple de code source au-dessus pour éviter que le navigateur ne confonde l'encodage de caractère utilisé par la page et affiche des caractères erronnés, comme des caractères chinois où les accents devraient être affichés.

Un bon endroit pour obtenir vos valeurs de coordonnées dans les deux formats est Wikipedia. Regardez l'article sur votre ville et cliquez sur les coordonnées exprimées en valeurs humaines pour charger une page avec les valeurs décimales.

(http://geotruc.net vous fournit automatiquement les coordonnées si vous habitez en France)

Fragments et liens

Une hCard est un morceau logique de contenu que les personnes pourraient aimer lier. Si elle est sur une page avec d'autres contenus, il peut être difficile de lier vers juste l'unique hCard, à moins que vous n'ayez placé un identifiant fragment à utiliser. En HTML, vous pouvez créer des identifiants fragments en ajoutant un attribut 'id' à n'importe quel élément. C'est une bonne pratique que d'ajouter un attribut 'id' à n'importe quel élément. C'est une bonne pratique que d'ajouter un 'id' à l'élément qui encapsule une hCard.

Plus de trucs et d'instructions

Sentez-vous libre d'ajouter plus de choses que l'expérience vous a enseignée pendant que vous balisez des hCards, même si tout ce que vous ajoutez n'est qu'une brève "catch-phrase" dont vous vous souvenez.

  • Comment noter quelque texte, de façon que vous puissiez faire un commentaire qui est votre assistante administrative.
  • Plus d'exemples de codes dans la ligne, peut-être un pour chaque section (suggestion de Cdevroe)
  • (suggestion de brian) vous mentionnez la blogroll, ce pourrait être hors sujet, mais vous pourriez mentionner que XFN et hCard peuvent être inter-tissés - ce n'est pas l'un ou l'autre
  • ...

Liens "Ajouter au Carnet d'Adresses"

Quand vous mettez à jour votre information de contact pour inclure un balisage hCard, vous devriez aussi ajouter un lien "Ajouter au Carnet d'Adresses" pour que ce soit commode pour vos lecteurs.

Voici un exemple d'un tel lien :

<a href="http://feeds.technorati.com/contacts/http://tantek.com/%23hcard">
Ajouter au Carnet d'Adresses
</a>

Substituez simplement le lien vers votre hCard pour l'URL http://tantek.com/%23hcard ci-dessus, et si vous avez plus d'une hCard sur cette page, vous devriez placer une ID unique sur chacune et puis substituer %23hcard dans l'URL exemple avec %23THEID dans votre code href où THEID est la valeur d'attribut ID que vous placez sur la hCard pour laquelle vous créez le lien.

Si une hcard unique est servie par une page index comme http://foo.com/index.php, vous avez juste besoin de substituer http://tantek.com/%23hcard avec http://foo.com/

Si vous le voulez, vous pouvez aussi utiliser le service hébergé X2V de Brian Suda, ou même télécharger et installer vous-même le X2V XSLT et la faire fonctionner sur votre propre serveur au lieu d'utiliser un service de conversion de hCard vers vCard.


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.