hcard-authoring-fr: Difference between revisions
m (Reverted edits by DarzeLeltt (Talk) to last version by RyanKing) |
m (Replace <entry-title> with {{DISPLAYTITLE:}}) |
||
(6 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
{{DISPLAYTITLE:Publier une hCard}} | |||
;short URL | |||
:http://tr.im/EIU2 | |||
Cette page contient quelques trucs utiles et instructions pour savoir comment publier des [[hcard-fr|hCards]], que ce soit à partir de zéro, ou en ajoutant du marquage à du contenu existant. | |||
'''Objectif :''' L'objet de ce document est de fournir quelques instructions intuitives pour que n'importe quel auteur puisse rapidement et facilement créer des hCards ou ajouter du marquage hCard à du contenu existant. | |||
''' | '''Public :''' auteurs, designers Web, architectes de l'information. Ce document est écrit pour une consommation et une compréhension facile à destination de n'importe quel designer web connaissant suffisamment (X)HTML et CSS afin d'utiliser les noms de classes sémantiques sur les éléments (à savoir [[posh-fr|CHIC]]s) et écrire des sélecteurs CSS qui appliquent les styles à ces noms de classe. Aidez-nous SVP à clarifier / simplifier ce document. | ||
'''Auteur(s) :''' [[User:Tantek|Tantek Çelik]], [[User:MarkRickerby|Mark Rickerby]] | '''Auteur(s) :''' [[User:Tantek|Tantek Çelik]], [[User:MarkRickerby|Mark Rickerby]] | ||
''' | '''Traduction :''' [[User:ChristopheDucamp|Christophe Ducamp]] | ||
== Une amorce en 5 minutes pour utiliser hCard == | == Une amorce en 5 minutes pour utiliser hCard == | ||
Imaginons une page statique qui | Imaginons une page statique qui contient quelques détails personnels de contact, quelque chose qui ressemble à ça : | ||
< | <source lang=html4strict> | ||
<div id="contact"> | <div id="contact"> | ||
<h2> | <h2>Contactez-Moi</h2> | ||
<p>Vous pouvez me contacter par | <p>Vous pouvez me contacter par courriel sur | ||
<a href="mailto: | <a href="mailto:jeanne@example.com">jeanne@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 /> | ||
Une Région</p> | |||
</div> | </div> | ||
</ | </source> | ||
</ | |||
Ce petit morceau de code contient toute l'information-lisible-par-les-humains requise pour produire une représentation valide de [[hcard-fr|hCard]] - tout ce qui reste à faire est d'ajouter un peu de structure supplémentaire qui définit chaque détail particulier. La première chose à faire est d'ajouter la classe <code>vcard</code> à la <code>div</code> qui la contient, ce qui identifie ce bloc comme une [[hcard-fr|hCard]] : | |||
< | <source lang=html4strict> | ||
<div id="contact" class="vcard"> | <div id="contact" class="vcard"> | ||
</ | </source> | ||
Une chose qui | Une chose qui manque à ce morceau de code est le nom de la personne à 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 c'est tout simplement pourquoi le nom de la propriété est 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> : | |||
< | <source lang=html4strict> | ||
<div id="contact" class="vcard"> | <div id="contact" class="vcard"> | ||
<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 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 | <p>255 Une rue<br /> | ||
Une Ville,<br /> | Une Ville,<br /> | ||
Une Région</p> | |||
</div> | </div> | ||
</ | </source> | ||
Une autre chose que nous pouvons faire pour améliorer la sémantique du fragment de code, c'est marquer l'adresse avec "adr" et utiliser les balises <code>div</code> parce que ce n'est pas vraiment 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]] : | |||
< | <source lang=html4strict> | ||
<div id="contact" class="vcard"> | <div id="contact" class="vcard"> | ||
<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: | <a class="email" href="mailto:jeanne@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> | ||
<div class="locality">Une Ville<div | <div class="locality">Une Ville</div> | ||
<div class="region"> | <div class="region">Une Région</div> | ||
</div> | </div> | ||
</div> | </div> | ||
</ | </source> | ||
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 | 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 de design visuel. | ||
== Ajouter un Lien vers le Carnet d'Adresses == | |||
Quand vous mettez à jour votre information de contact, vous pouvez aussi inclure un lien "Ajouter au Carnet d'Adresses" afin que vos utilisateurs puissent télécharger votre information de contact dans leurs carnets d'adresses en un clic par l'hyperlien ! | |||
Voici un exemple d'un tel lien : | |||
<source lang=html4strict> | |||
<a href="http://h2vx.com/vcf/tantek.com"> | |||
Ajouter au Carnet d'Adresses | |||
</a> | |||
</source> | |||
Remplacez simplement le fragment d'URL au-dessus <kbd>tantek.com</kbd> par le lien vers votre hCard (notez que <code>http://</code> est implicite, vous pouvez l'ajouter explicitement si vous voulez). | |||
Si vous avez plus d'une hCard sur cette page, vous devriez mettre un attribut ID unique sur chacune, et puis placer <kbd>%23votreIDici</kbd> à la fin de votre code href où <kbd>votreIDici</kbd> est la valeur d'attribut ID que vous mettez sur la hCard pour laquelle vous créez le lien. | |||
Vous pouvez aussi utiliser le service hébergé [[X2V-fr|X2V]] de Brian Suda, ou télécharger et installer vous même le X2V XSLT open source et faire tourner sur votre propre serveur au lieu d'utiliser un service de convertisseur en ligne de hCard vers vCard. | |||
== Créer de nouvelles hCards == | == Créer de nouvelles hCards == | ||
Commencez 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 | Peut-être que vous disposez d'une description de vous-même en prose traditionnelle. Commencez par lire l'article de Jeremy Keith "[http://christopheducamp.com/ProjetBlog/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 : | ||
< | <source lang=html4strict> | ||
<cite class="vcard"> | <cite class="vcard"> | ||
<abbr class="fn" title="Andy Clarke"> | <abbr class="fn" title="Andy Clarke"> | ||
Line 91: | Line 105: | ||
</abbr> | </abbr> | ||
</cite> | </cite> | ||
</ | </source> | ||
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 : | ||
< | <source lang=html4strict> | ||
<cite class="vcard"> | <cite class="vcard"> | ||
<abbr class="fn" title="Andy Clarke"> | <abbr class="fn" title="Andy Clarke"> | ||
Line 101: | Line 115: | ||
</abbr> | </abbr> | ||
</cite> | </cite> | ||
</ | </source> | ||
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 : | ||
< | <source lang=html4strict> | ||
<span class="vcard"> | <span class="vcard"> | ||
<abbr class="fn" title="Juliette Melton"> | <abbr class="fn" title="Juliette Melton"> | ||
Line 111: | Line 125: | ||
</abbr> | </abbr> | ||
</span> | </span> | ||
</ | </source> | ||
=== Changements Minimes de Syntaxe === | === Changements Minimes de Syntaxe === | ||
Line 118: | Line 132: | ||
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 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). | ||
c'est à dire : | |||
< | <source lang=html4strict><span class="foo">...</span></source> | ||
deviendrait : | deviendrait : | ||
< | <source lang=html4strict><span class="foo xyz">...</span></source> | ||
Et | Et | ||
< | <source lang=html4strict><span>...</span></source> | ||
deviendrait : | deviendrait : | ||
< | <source lang=html4strict><span class="xyz">...</span></source> | ||
=== 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). | ||
Ce sont toutes des hCards potentielles. Même plus si elles sont liées vers leurs URLs respectives (par ex. pages personnelles / blogs | |||
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 marquer la mention qui est la plus détaillée, définitive sous une hCard. Idéalement, vous pourriez vouloir marquer ''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 marqué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) | ||
sur une page, considérez de | |||
pourriez vouloir | |||
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 === | ||
Line 149: | Line 159: | ||
=== L'Importance des Noms === | === L'Importance des Noms === | ||
Le nom est la propriété unique requise de hCard. Par conséquent, assurez-vous de | Le nom est la propriété unique requise de hCard. Par conséquent, assurez-vous de marquer 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. C'est à dire : | ||
< | |||
<source lang=html4strict><div class="vcard"><span class="fn">Anne Dupont</span></div></source> | |||
Pour les personnes avec des <span id="middle-name-fr" class="hcard-faq-ref">noms au milieu</span> (par ex. "Alice Girod Delain"), ou avec des noms de familles avec plusieurs mots (par ex. "Valéry Giscard d'Estaing"), vous devez les baliser avec la propriété "n" et ses sous-propriétés "given-name" et "family-name" (et "additional-name" quand un nom de milieu est inclus) c'est à dire | |||
<source lang=html4strict> | |||
<!-- exemples avec noms au milieu --> | |||
<div class="vcard"><span class="fn n" lang="no"> | <div class="vcard"><span class="fn n" lang="no"> | ||
<span class="given-name"> | <span class="given-name">Håkon</span> | ||
<span class="additional-name"> | <span class="additional-name">Wium</span> | ||
<span class="family-name"> | <span class="family-name">Lie</span> | ||
</span></div> | </span></div> | ||
<div class="vcard"><span class="fn n"> | <div class="vcard"><span class="fn n"> | ||
<span class="given-name"> | <span class="given-name">Eric</span> | ||
<span class="family-name"> | <abbr class="additional-name">A.</abbr> | ||
<span class="family-name">Meyer</span> | |||
</span></div> | </span></div> | ||
</ | |||
<div class="vcard"><span class="fn n"> | |||
<span class="given-name">Emily</span> | |||
<abbr class="additional-name" title="Paige">P.</abbr> | |||
<span class="family-name">Lewis</span> | |||
</span></div> | |||
<!-- exemple de nom de famille à plusieurs mots --> | |||
<div class="vcard"><span class="fn n"> | |||
<span class="given-name">Thomas</span> | |||
<span class="family-name">Vander Wal</span> | |||
</span></div> | |||
</source> | |||
==== 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 sachent que la hCard représente une organisation plutôt qu'une personne. Par exemple, | ||
<source lang=html4strict><div class="vcard"><span class="fn org">Technorati</span></div></source> | |||
=== reliez-la === | |||
Ajoutez des liens vers votre site web, vos profils de réseaux sociaux et autres sites qui vous représentent spécifiquement à votre hCard avec le nom de classe <code>url</code>. Voici un exemple avec un site personnel, et des URLs profils Twitter et Flickr : | |||
<source lang=html4strict> | |||
<span class="vcard"> | |||
<span class="fn">Tantek Çelik</span>, | |||
<a class="url" href="http://tantek.com/">mon site</a>, | |||
<a class="url" href="http://twitter.com/t">twitter</a>, et | |||
<a class="url" href="http://flickr.com/tantek">flickr</a>. | |||
</span> | |||
</source> | |||
==== connexion avec vous-même ==== | |||
< | Si vous marquez une hCard sur votre propre site, assurez-vous d'ajouter aussi l'attribut [[xfn-fr|XFN]] <code>rel="me"</code> pour indiquer que ces pages profils sont des facettes supplémentaires de votre identité en ligne. Voir <cite>[http://gmpg.org/xfn/et/#idconsolidation Identity consolidation with XFN]</cite> pour plus de détails | ||
=== | <source lang=html4strict> | ||
<span class="vcard"> | |||
<span class="fn">Tantek Çelik</span>, | |||
<a rel="me" class="url" href="http://tantek.com/">mon site</a>, | |||
<a rel="me" class="url" href="http://twitter.com/t">twitter</a>, et | |||
<a rel="me" class="url" href="http://flickr.com/tantek">flickr</a>. | |||
</span> | |||
</source> | |||
Éditez vos profils sur ces autres sites et réglez les champs "home page", "URL", ou "blog" pour faire des liens retour vers votre propre site pour connecter ensemble vos profils de réseaux sociaux. | |||
Des sites comme http://huffduffer.com et les extensions [[Firefox-fr|Firefox]] comme [[Identify-fr|Identify]] utilisent des APIs comme l'API Google Social Graph (qui indexe les liens rel-me) pour connecter automatiquement vos profils pour vous dans leurs interfaces-utilisateurs. | |||
Voir [http://klinger.io/ la page d'accueil d'Andreas Klinger] pour un bel exemple élégant de site personnel avec une hCard faisant un lien vers d'autres profils. | |||
==== nom et URL uniquement ==== | |||
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é. | ||
Quand vous faites simplement référence à une personne par son nom avec une URL, vous pouvez simplifier le marquage. | |||
<source lang=html4strict> | |||
< | |||
<span class="vcard"> | <span class="vcard"> | ||
<a href="http://theryanking.com" class="fn url">Ryan King</a></span> | <a href="http://theryanking.com" class="fn url">Ryan King</a> | ||
</ | </span> | ||
</source> | |||
Ceci fonctionne parce que l'attribut de classe HTML prend un ensemble de noms de classes séparés par un espace. | |||
Les blogrolls sont un bon exemple de listes de personnes avec nom et URL (voir aussi [[xoxo-fr|XOXO]]). | |||
=== Titres === | === Titres === | ||
Si le titre du job de la personne est mentionné, balisez-le avec < | Si le titre du job de la personne est mentionné, balisez-le avec <source lang=html4strict><span class="title">...</span></source>. | ||
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 < | 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 <source lang=html4strict><span class="title">...</span></source>. | ||
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. | ||
Line 196: | Line 255: | ||
=== 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 < | considérez de placer d'autres affiliations et informations à propos de la personne à l'intérieur des éléments <source lang=html4strict><span class="note">...</span></source>. 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". | ||
Line 213: | Line 272: | ||
=== 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 : | ||
< | <source lang=html4strict> | ||
<div class="tel"> | <div class="tel"> | ||
<span class="type">work</span> | <span class="type">work</span> | ||
Line 227: | Line 286: | ||
fax : <span class="value">1-250-555-2135</span> | fax : <span class="value">1-250-555-2135</span> | ||
</div> | </div> | ||
</ | </source> | ||
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. | ||
Line 234: | Line 293: | ||
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. : | ||
< | <source lang=html4strict> | ||
<img class="photo" src="http://www.factorycity.net/images/avatar.jpg" alt="" /> | <img class="photo" src="http://www.factorycity.net/images/avatar.jpg" alt="" /> | ||
</ | </source> | ||
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 : | ||
< | <source lang=html4strict> | ||
<img class="photo fn" src="http://www.factorycity.net/images/avatar.jpg" alt="Chris Messina" /> | <img class="photo fn" src="http://www.factorycity.net/images/avatar.jpg" alt="Chris Messina" /> | ||
</ | </source> | ||
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 : | ||
< | <source lang=html4strict><img alt="photo" class="photo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB[...]RRxTwKpCP//Z" /></source> | ||
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]. | ||
Line 252: | Line 311: | ||
=== Coordonnées Géographiques === | === Coordonnées Géographiques === | ||
Ajoutez vos coordonnées géographiques : | Ajoutez vos coordonnées géographiques : | ||
< | <source lang=html4strict> | ||
<span class="geo"> | <span class="geo"> | ||
<span class="latitude">48.430092246</span> | <span class="latitude">48.430092246</span> | ||
<span class="longitude">-123.364348450</span> | <span class="longitude">-123.364348450</span> | ||
</span> | </span> | ||
</ | </source> | ||
Une version plus humaine serait implémentée comme suit : | Une version plus humaine serait implémentée comme suit : | ||
< | <source lang=html4strict> | ||
<div class="geo"> | <div class="geo"> | ||
<abbr class="latitude" title="-31.388333">31°23'18"S</abbr>, | <abbr class="latitude" title="-31.388333">31°23'18"S</abbr>, | ||
<abbr class="longitude" title="-57.960556">57°57'38"O</abbr> | <abbr class="longitude" title="-57.960556">57°57'38"O</abbr> | ||
</div> | </div> | ||
</ | </source> | ||
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. | ||
Line 277: | Line 336: | ||
=== 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' | 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' à une hCard. | ||
Par exemple : | |||
<source lang=html4strict> | |||
<span id="ma-hCard" class="vcard"> | |||
<a class="url fn" href="http://suda.co.uk"> | |||
Brian Suda | |||
</a> | |||
</span> | |||
</source> | |||
=== hCard Canonique dans un site === | |||
Presque chaque site web social a des URLs de profils pour ses membres, généralement [[hcard-supporting-user-profiles-fr|avec des hCards]]. | |||
La plupart des pages de tels sites web lient ces URLs canoniques de profils utilisateurs sur le site lui-même avec l'icône et/ou le nom de l'utilisateur. Cela fait sens de marquer explicitement ces liens avec les deux noms de classes "url" et "uid", par exemple sur une liste d'amis Twitter (notez l'utilisation du microformat [[xoxo-fr|XOXO]]) qui pourrait être hébergée sur Twitter lui-même : | |||
=== | <source lang=html4strict> | ||
<ul class="xoxo"> | |||
<li class="vcard"> | |||
<a class="url uid" href="http://twitter.com/briansuda"> | |||
<img class="fn logo" src="b-icon.jpg" alt="Brian Suda" /> | |||
</a> | |||
</li> | |||
<li class="vcard"> | |||
<a class="url uid" href="http://twitter.com/pspmikek"> | |||
<img class="fn logo" src="m-icon.jpg" alt="Michael Kaply" /> | |||
</a> | |||
</li> | |||
<li> | |||
<a class="url uid" href="http://twitter.com/t"> | |||
<img class="fn logo" src="t-icon.jpg" alt="Tantek Çelik" /> | |||
</a> | |||
</li> | |||
</ul> | |||
</source> | |||
Un autre exemple : les sites d'événements qui listent et lient vers les profils utilisateurs des personnes participant à un événement (par exemple Upcoming.org). | |||
== | === URL d'une hCard étant la page elle-même === | ||
La hCard canonique dans un site (comme noté ci-dessus) a souvent un marquage hCard, et il est utile de marquer la page elle-même comme l'URL pour cette hCard. | |||
Aussi, comment marquez vous l'URL d'une hCard où l'URL est la page elle-même ? | |||
Quelques variantes ont été observées dans la publication du vrai monde, chacune d'entre elles entraîne une solution : | |||
# '''Auto-hyperlien de profil avec nom/photo.''' Beaucoup (la plupart ?) de sites [[hcard-supporting-user-profiles-fr|supportant les profils utilisateurs avec hCard]] hyperlient le nom de la personne (par ex. [http://www.myspace.com/irhetoric Myspace irhetoric]) et/ou image (par ex. [http://upcoming.yahoo.com/user/6623 Upcoming tantek]) sur son profil vers le profil lui-même. C'est un modèle commun de design. Dans ce cas, la réponse est évidente : ajoutez simplement <code>class="url uid"</code> à l'auto-hyperlien existant. | |||
# '''Profils avec un lien "profil" et/ou contenu dynamique.''' Quelques sites ont un lien de navigation "Profile" qui est cliquable même sur le profil lui-même (par exemple sur [http://twitter.com/ Twitter] "login" et "go to your profile"). Dans certains cas le lien "Profile" est mis en valeur parmi les autres liens de navigation pour indiquer que c'est ce qui est actuellement visible parmi les options de nav (par ex. [http://www.last.fm/ last.fm] - login et go to your profile). Ces deux sites ont du contenu dynamique sur les pages profils, et de ce fait pourraient aussi étiqueter de tels "auto-hyperliens" avec du texte comme "Recharger" ou "Rafraîchir" - indiquant ainsi à l'utilisateur que quand il clique le lien, cela ne changerait pas l'URL dans la barre d'adresse de son navigateur, mais rechargerait la page, probablement en mettant à jour la page de façon visible. Dans ces deux cas, la réponse et la même que dans le cas au-dessus : ajouter simplement <code>class="url uid"</code> à l'auto-hyperlien existant. | |||
# '''Profils sans égo-hyperliens apparents.''' Quelques sites avec des pages profil (par ex. [http://flickr.com/people/tantek/ Flickr tantek]) n'ont pas d'égo-hyperlien, probablement parce que leurs contenus sont plus statiques, et un égo-hyperlien visible semblerait "ne rien faire" une fois cliqué, frustrant de ce fait l'utilisateur ou l'amenant à penser que le site est cassé. Pour ces sites, l'auteur peut inclure un hyperlien vide avec un attribut href vide pour fournir un hyperlien invisible vers la page elle-même qui est ainsi à la fois non cliquable, et n'a pas quelque contenu qui pourrait être lu par erreur par un lecteur d'écran. Cette suggestion de publication est probablement suffisamment bonne pour gérer ce troisième cas le plus rare, bien qu'il serait utile de disposer de quelques tests de cas qui pourraient tourner sur différents navigateurs / technologies assistives pour voir ce que cela produirait. Une autre suggestion (plus longue) serait d'utiliser la technique value-title du [[value-class-pattern-fr|modèle de classe value]] par ex. : <code><nowiki><span class="url uid"><span class="value-title" title="http://exemple.com/user/jean"> </span></span></nowiki></code>. | |||
=== Plus de trucs et d'instructions === | |||
Sentez-vous libre d'ajouter plus de choses que l'expérience vous a enseignée au moment de marquer 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 manière à faire un commentaire comme 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 | |||
* ... | |||
== Pages Apparentées == | == Pages Apparentées == | ||
{{hcard-related-pages-fr}} | {{hcard-related-pages-fr}} |
Latest revision as of 16:25, 18 July 2020
- short URL
- http://tr.im/EIU2
Cette page contient quelques trucs utiles et instructions pour savoir comment publier des hCards, que ce soit à partir de zéro, ou en ajoutant du marquage à du contenu existant.
Objectif : L'objet de ce document est de fournir quelques instructions intuitives pour que n'importe quel auteur puisse rapidement et facilement créer des hCards ou ajouter du marquage hCard à du contenu existant.
Public : auteurs, designers Web, architectes de l'information. Ce document est écrit pour une consommation et une compréhension facile à destination de n'importe quel designer web connaissant suffisamment (X)HTML et CSS afin d'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. Aidez-nous SVP à clarifier / simplifier ce document.
Auteur(s) : Tantek Çelik, Mark Rickerby
Traduction : Christophe Ducamp
Une amorce en 5 minutes pour utiliser hCard
Imaginons une page statique qui contient quelques détails personnels de contact, quelque chose qui ressemble à ça :
<div id="contact">
<h2>Contactez-Moi</h2>
<p>Vous pouvez me contacter par courriel sur
<a href="mailto:jeanne@example.com">jeanne@example.com</a>,
ou m'envoyer des trucs à l'adresse suivante :</p>
<p>255, une rue<br />
Une Ville,<br />
Une Région</p>
</div>
Ce petit morceau de code contient toute l'information-lisible-par-les-humains requise pour produire une représentation valide de hCard - tout ce qui reste à faire est d'ajouter un peu de structure supplémentaire qui définit chaque détail particulier. La première chose à faire est d'ajouter la classe vcard
à la div
qui la contient, ce qui identifie ce bloc comme une hCard :
<div id="contact" class="vcard">
Une chose qui manque à ce morceau de code est le nom de la personne à 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 c'est tout simplement pourquoi le nom de la propriété est 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 à
<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 />
Une Région</p>
</div>
Une autre chose que nous pouvons faire pour améliorer la sémantique du fragment de code, c'est marquer l'adresse avec "adr" et utiliser les balises div
parce que ce n'est pas vraiment 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:jeanne@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">Une Région</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 de design visuel.
Ajouter un Lien vers le Carnet d'Adresses
Quand vous mettez à jour votre information de contact, vous pouvez aussi inclure un lien "Ajouter au Carnet d'Adresses" afin que vos utilisateurs puissent télécharger votre information de contact dans leurs carnets d'adresses en un clic par l'hyperlien !
Voici un exemple d'un tel lien :
<a href="http://h2vx.com/vcf/tantek.com">
Ajouter au Carnet d'Adresses
</a>
Remplacez simplement le fragment d'URL au-dessus tantek.com par le lien vers votre hCard (notez que http://
est implicite, vous pouvez l'ajouter explicitement si vous voulez).
Si vous avez plus d'une hCard sur cette page, vous devriez mettre un attribut ID unique sur chacune, et puis placer %23votreIDici à la fin de votre code href où votreIDici est la valeur d'attribut ID que vous mettez sur la hCard pour laquelle vous créez le lien.
Vous pouvez aussi utiliser le service hébergé X2V de Brian Suda, ou télécharger et installer vous même le X2V XSLT open source et faire tourner sur votre propre serveur au lieu d'utiliser un service de convertisseur en ligne de hCard vers vCard.
Créer de nouvelles hCards
Commencez 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 disposez d'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).
c'est à dire :
<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).
Si une personne (ou une organisation, réduite à simplement "person/org") est mentionnée plusieurs fois sur une page, considérez de marquer la mention qui est la plus détaillée, définitive sous une hCard. Idéalement, vous pourriez vouloir marquer 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 marqué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 marquer 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. C'est à dire :
<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 plusieurs mots (par ex. "Valéry Giscard d'Estaing"), vous devez les baliser avec la propriété "n" et ses sous-propriétés "given-name" et "family-name" (et "additional-name" quand un nom de milieu est inclus) c'est à dire
<!-- exemples avec noms au milieu -->
<div class="vcard"><span class="fn n" lang="no">
<span class="given-name">Håkon</span>
<span class="additional-name">Wium</span>
<span class="family-name">Lie</span>
</span></div>
<div class="vcard"><span class="fn n">
<span class="given-name">Eric</span>
<abbr class="additional-name">A.</abbr>
<span class="family-name">Meyer</span>
</span></div>
<div class="vcard"><span class="fn n">
<span class="given-name">Emily</span>
<abbr class="additional-name" title="Paige">P.</abbr>
<span class="family-name">Lewis</span>
</span></div>
<!-- exemple de nom de famille à plusieurs mots -->
<div class="vcard"><span class="fn n">
<span class="given-name">Thomas</span>
<span class="family-name">Vander Wal</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 sachent que la hCard représente une organisation plutôt qu'une personne. Par exemple,
<div class="vcard"><span class="fn org">Technorati</span></div>
reliez-la
Ajoutez des liens vers votre site web, vos profils de réseaux sociaux et autres sites qui vous représentent spécifiquement à votre hCard avec le nom de classe url
. Voici un exemple avec un site personnel, et des URLs profils Twitter et Flickr :
<span class="vcard">
<span class="fn">Tantek Çelik</span>,
<a class="url" href="http://tantek.com/">mon site</a>,
<a class="url" href="http://twitter.com/t">twitter</a>, et
<a class="url" href="http://flickr.com/tantek">flickr</a>.
</span>
connexion avec vous-même
Si vous marquez une hCard sur votre propre site, assurez-vous d'ajouter aussi l'attribut XFN rel="me"
pour indiquer que ces pages profils sont des facettes supplémentaires de votre identité en ligne. Voir Identity consolidation with XFN pour plus de détails
<span class="vcard">
<span class="fn">Tantek Çelik</span>,
<a rel="me" class="url" href="http://tantek.com/">mon site</a>,
<a rel="me" class="url" href="http://twitter.com/t">twitter</a>, et
<a rel="me" class="url" href="http://flickr.com/tantek">flickr</a>.
</span>
Éditez vos profils sur ces autres sites et réglez les champs "home page", "URL", ou "blog" pour faire des liens retour vers votre propre site pour connecter ensemble vos profils de réseaux sociaux.
Des sites comme http://huffduffer.com et les extensions Firefox comme Identify utilisent des APIs comme l'API Google Social Graph (qui indexe les liens rel-me) pour connecter automatiquement vos profils pour vous dans leurs interfaces-utilisateurs.
Voir la page d'accueil d'Andreas Klinger pour un bel exemple élégant de site personnel avec une hCard faisant un lien vers d'autres profils.
nom et URL uniquement
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é.
Quand vous faites simplement référence à une personne par son nom avec une URL, vous pouvez simplifier le marquage.
<span class="vcard">
<a href="http://theryanking.com" class="fn url">Ryan King</a>
</span>
Ceci fonctionne parce que l'attribut de classe HTML prend un ensemble de noms de classes séparés par un espace.
Les blogrolls sont un bon exemple de listes de personnes avec nom et URL (voir aussi XOXO).
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' à une hCard.
Par exemple :
<span id="ma-hCard" class="vcard">
<a class="url fn" href="http://suda.co.uk">
Brian Suda
</a>
</span>
hCard Canonique dans un site
Presque chaque site web social a des URLs de profils pour ses membres, généralement avec des hCards.
La plupart des pages de tels sites web lient ces URLs canoniques de profils utilisateurs sur le site lui-même avec l'icône et/ou le nom de l'utilisateur. Cela fait sens de marquer explicitement ces liens avec les deux noms de classes "url" et "uid", par exemple sur une liste d'amis Twitter (notez l'utilisation du microformat XOXO) qui pourrait être hébergée sur Twitter lui-même :
<ul class="xoxo">
<li class="vcard">
<a class="url uid" href="http://twitter.com/briansuda">
<img class="fn logo" src="b-icon.jpg" alt="Brian Suda" />
</a>
</li>
<li class="vcard">
<a class="url uid" href="http://twitter.com/pspmikek">
<img class="fn logo" src="m-icon.jpg" alt="Michael Kaply" />
</a>
</li>
<li>
<a class="url uid" href="http://twitter.com/t">
<img class="fn logo" src="t-icon.jpg" alt="Tantek Çelik" />
</a>
</li>
</ul>
Un autre exemple : les sites d'événements qui listent et lient vers les profils utilisateurs des personnes participant à un événement (par exemple Upcoming.org).
URL d'une hCard étant la page elle-même
La hCard canonique dans un site (comme noté ci-dessus) a souvent un marquage hCard, et il est utile de marquer la page elle-même comme l'URL pour cette hCard.
Aussi, comment marquez vous l'URL d'une hCard où l'URL est la page elle-même ?
Quelques variantes ont été observées dans la publication du vrai monde, chacune d'entre elles entraîne une solution :
- Auto-hyperlien de profil avec nom/photo. Beaucoup (la plupart ?) de sites supportant les profils utilisateurs avec hCard hyperlient le nom de la personne (par ex. Myspace irhetoric) et/ou image (par ex. Upcoming tantek) sur son profil vers le profil lui-même. C'est un modèle commun de design. Dans ce cas, la réponse est évidente : ajoutez simplement
class="url uid"
à l'auto-hyperlien existant. - Profils avec un lien "profil" et/ou contenu dynamique. Quelques sites ont un lien de navigation "Profile" qui est cliquable même sur le profil lui-même (par exemple sur Twitter "login" et "go to your profile"). Dans certains cas le lien "Profile" est mis en valeur parmi les autres liens de navigation pour indiquer que c'est ce qui est actuellement visible parmi les options de nav (par ex. last.fm - login et go to your profile). Ces deux sites ont du contenu dynamique sur les pages profils, et de ce fait pourraient aussi étiqueter de tels "auto-hyperliens" avec du texte comme "Recharger" ou "Rafraîchir" - indiquant ainsi à l'utilisateur que quand il clique le lien, cela ne changerait pas l'URL dans la barre d'adresse de son navigateur, mais rechargerait la page, probablement en mettant à jour la page de façon visible. Dans ces deux cas, la réponse et la même que dans le cas au-dessus : ajouter simplement
class="url uid"
à l'auto-hyperlien existant. - Profils sans égo-hyperliens apparents. Quelques sites avec des pages profil (par ex. Flickr tantek) n'ont pas d'égo-hyperlien, probablement parce que leurs contenus sont plus statiques, et un égo-hyperlien visible semblerait "ne rien faire" une fois cliqué, frustrant de ce fait l'utilisateur ou l'amenant à penser que le site est cassé. Pour ces sites, l'auteur peut inclure un hyperlien vide avec un attribut href vide pour fournir un hyperlien invisible vers la page elle-même qui est ainsi à la fois non cliquable, et n'a pas quelque contenu qui pourrait être lu par erreur par un lecteur d'écran. Cette suggestion de publication est probablement suffisamment bonne pour gérer ce troisième cas le plus rare, bien qu'il serait utile de disposer de quelques tests de cas qui pourraient tourner sur différents navigateurs / technologies assistives pour voir ce que cela produirait. Une autre suggestion (plus longue) serait d'utiliser la technique value-title du modèle de classe value par ex. :
<span class="url uid"><span class="value-title" title="http://exemple.com/user/jean"> </span></span>
.
Plus de trucs et d'instructions
Sentez-vous libre d'ajouter plus de choses que l'expérience vous a enseignée au moment de marquer 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 manière à faire un commentaire comme 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
- ...
Pages Apparentées
- hCard
- hCard anti-sèche - propriétés hCard
- hCard creator (réactions) - créez votre propre hCard.
- hCard publication - apprenez comment ajouter du balisage hCard à votre information de contact existante.
- hCard exemples - exemple d'usage de différentes classes dans la hCard.
- hCard exemples dans la jungle - une liste mise à jour de sites web qui utilisent les hCards.
- Profils utilisateurs supportant hCard - sites avec des profils utilisateurs marqués avec hCard - un exemple très commun.
- hCard FAQ - si vous avez quelque question à propos de hCard, regardez ici.
- implémentations hCard - les sites web ou outils qui génèrent ou parsent les hCards.
- hcard-implied-fr - une proposition pour créer une méthode alternative de baliser une hCard simple
- hCard parsage - détails des normes sur la manière de parser les hCards.
- hCards et pages - distinctions sémantiques entre différentes hCards sur une page, et comment identifier chacune
- hcard-interface-utilisateur - techniques et problématiques autour des interfaces-utilisateurs pour éditer, publier et afficher des hCards.
- hCard profile - le profil XMDP pour hCard
- hCard propriétés singulières - une explication de la liste des propriétés singulières dans hCard.
- hCard tests - une page wiki avec des véritables hCards embarquées pour essayer le parsage.
- hCard soutien - encourager d'autres à utiliser hCard
- hCard "to do" - travaux à faire
La spécification hCard est un chantier en cours. Au fur et à mesure que des aspects supplémentaires sont discutés, compris et écrits, ils seront rajoutés. Ces idées, problématiques et questions sont maintenues sur des pages distinctes.
- hCard brainstorming - brainstorms et autres explorations en rapport avec hCard. Voir aussi geo brainstorming.
- hcard-parsing-brainstorming - brainstorming spécifique au parsage de hCard
- geo brainstorming
- hCard réactions - feedback général (contrairement aux problématiques spécifiques).
- hCard problématiques - problématiques spécifiques à la spécification.
- vCard errata - corrections à la spécification vCard, sous jacentes à hCard.
- vCard suggestions - améliorations suggérées à la spécification vCard.