hcard-example1-steps-fr

hCard Exemple 1 : les Etapes

Ceci est une explication étape par étape du premier exemple de la spécification hCard.

Exemple

Exemple vCard

Voilà un échantillon de vCard :

BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
ORG:Technorati
END:VCARD

exemple hCard itération 0 : littéral

et un équivalent en hCard littéral :

<div class="vcard">
 <a class="url" href="http://tantek.com/">
  <span class="n" style="display:none"> <!-- cacher ça dans l'affichage avec CSS -->
   <span class="family-name">Çelik</span>
   <span class="given-name">Tantek</span> 
  </span>
  <span class="fn">Tantek Çelik</span>
 </a>
 <div class="org"><span class="organization-name">Technorati</span></div>
</div>

Notez que le type "N", comme défini dans RFC2426, Section 3.1.2, a plusieurs composants, et par conséquent ces composants sont définis en utilisant des éléments imbriqués avec un nom de classe qui est un équivalent direct du composant extrait de la RFC, c'est à dire "given-name" et "family-name".

Tant la vCard et le hCard littéral violent priincipe DRY en dupliquant l'information nom. La version hCard compense cela en cachant une occurence avec CSS.

exemple hCard itération 1 : DRY

Néanmoins, structurellement le même élément XHTML pourrait être réutilisé pour les types "N" et "FN" (parce que plusieurs noms de classes peuvent être placés dans un attribut de classe par un espace les séparant), et de ce fait la duplication de l'information nom elle-même peut être éliminée :

<div class="vcard">
 <a class="url" href="http://tantek.com/">
  <span class="fn n">
   <span class="given-name">Tantek</span> 
   <span class="family-name">Çelik</span>
  </span>
 </a>
 <div class="org"><span class="organization-name">Technorati</span></div>
</div>

De ce fait, même avec cette première itération, nous avons produit une amélioration significative sur la vCard, en évitant la répétition de l'information nom et en se conformant au principe DRY.

Exemple hCard itération 2 : conservation élément

Ceci peut même être encore plus optimisé en plaçant les noms de classe "fn" et "n" sur le <a href>, et en éliminant le span intermédiaire.

<div class="vcard">
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span>
 </a>
 <div class="org"><span class="organization-name">Technorati</span></div>
</div>

exemple hCard itération 3 : optimisation tacites

Pour finir, utiliser l'Optimisation implicite "N" et l'Optimisation implicite "organization-name", nous pouvons omettre les prénom et nom de famille explicites tout comme le "n" explicite et "organization-name".

<div class="vcard">
 <a class="url fn" href="http://tantek.com/">
  Tantek Çelik
 </a>
 <div class="org">Technorati</div>
</div>

affichage hCard

L'affichage pour toutes les versions de cettte hCard est le même

Tantek Çelik
Technorati

Retour à la spécification hCard.