ChristopheDucamp: translation hcard-example1-steps

2006-06-25T08:05:57Z

translation hcard-example1-steps

New page

= hCard Exemple 1 : les Etapes =

Ceci est une explication étape par étape du premier exemple de la spécification [[hcard-fr|hCard]].

== Exemple ==

=== Exemple vCard ===
Voilà un échantillon de vCard :

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

=== exemple hCard itération 0 : littéral ===

et un équivalent en hCard littéral :

<pre><nowiki>
<div class="vcard">
<a class="url" href="http://tantek.com/">
<span class="n" style="display:none"> 
<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>
</nowiki></pre>

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 [http://c2.com/cgi/wiki?DontRepeatYourself 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 :

<pre><nowiki>
<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>
</nowiki></pre>

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 [http://c2.com/cgi/wiki?DontRepeatYourself 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.

<pre><nowiki>
<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>
</nowiki></pre>

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

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

=== affichage hCard ===

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

[http://tantek.com/ Tantek Çelik]<br />
Technorati

Retour à la spécification [[hcard-fr|hCard]].

hcard-example1-steps-fr - Revision history

ChristopheDucamp: translation hcard-example1-steps