hcard-authoring-fr

Publier une hCard

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 Web et designers. Ce document est écrit pour une consommation facile et une compréhension par n'importe quel web designer qui connaît au moins suffisamment de (X)HTML et CSS pour utiliser les noms de classe sur les éléments et écrire des sélecteurs CSS qui appliquent les styles à ces noms de classe. SVP aidez à clarifier/simplifier ce document.

Auteur(s) : Tantek Çelik

Traducteur(s) : Christophe Ducamp

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 balisage hCard à du contenu existant

Langage Naturel hCard

Peut-être que vous avez une description de vous-même en prose tradionnelle. Commencez par lire l'article de Jeremy Keith "Adactio: Journal - Natural language hCard" qui vous fournit une belle introduction succinte dans l'art d'ajouter de la syntaxe hCard à une biographie existante en prose.

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.

In all examples below where it says to add an element with class name of "xyz", first look for an existing element that precisely surrounds the necessary content. Re-use that element by simply adding the class name "xyz" (meaning, add " xyz" (without quotes) to the element's existing class attribute, or add a new class attribute class="xyz" to elements without a class attribute).

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 class 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 / blikis).

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'instante 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 secon 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 Giscard d'Estaing"), 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>

Pour les organisations, soyez certains de mettre à la fois les noms de classes "fn" et "org" sur le même élément. Avoir les deux étant les mêmes est le truc pour les consommateurs de hCard que la hCard représente une organisation plutôt qu'une personne. Par ex.

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

Plus de trucs et d'instructions

Sentez-vous à l'aise pour ajouter plus de trucs 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 baliser les numéros de téléphone (y compris *plusieurs* numéros de téléphone - suggestion de la part de Cdevroe)
• Comment baliser TYPE dans les numéros de téléphone
• 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 "interweaved" - 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.