Concision Sémantique
Encore une belle leçon superbement présentée par Jeremy pour nous inviter à propulser simplement des hCards dans nos futurs billets. Seul le lien original fait référence. Cette traduction localisée peut être nettoyée et corrigée sur la page-miroir du wiki de travail. Merci d’avance - xtof
Quand j’écris sur l’un de mes blogs, j’essaye tant bien que mal de saupoudrer tous les contenus avec quelques microformats. Comme l’écrivait Jeremy dans hCard en Langage Naturel
, je cherche aussi à développer un nez
pour les microformats :
Une fois commencé à regarder, j’ai commencé à voir de l’information d’identité et d’évènement dans beaucoup d’endroits… même quand cela ne ressemble pas explicitement à des cartes de visite ou à des calendriers.
Si je produis un lien vers quelqu’un en utilisant son nom complètement formaté, cela ne va pas sans dire que j’aime transformer ça à l’intérieur d’une hCard :
<span class="vcard">
<a class="fn url" href="http://exemple.com/">
Jean Lentrepreneur
</a>
</span>
Mais si je ne veux pas utiliser le nom complet ? Ce serait quelque chose d’un peu guindé si j’écrivais :
L’autre jour, j’ai discuté avec Pierre-Philippe Cormeraie…
Quand vous travaillez avec quelqu’un tous les jours, cela peut paraître étrange de faire toujours référence à lui avec son nom de famille. Pour moi, il est bien plus naturel d’écrire :
L’autre jour j’ai discuté avec Pierre-Philippe…
J’aimerais encore faire que son nom soit un hyperlien mais comment puis-je faire que ce texte soit une hCard ? Devrais-je changer mon style d’écriture et faire référence à son nom complet même si le contexte et le style écrit pencheraient simplement en faveur de n’utiliser que son prénom ?
Saisissez l’élément abbr :
Je peux écrire “Pierre-Philippe” dans mon corps de texte et utiliser la sémantique du (X)HTML pour indiquer que c’est la forme abrégée de “Pierre-Philippe Cormeraie”:
<abbr title="Pierre-Philippe Cormeraie">
Pierre-Philippe
</abbr>
A partir de là, c’est une simple étape que de fournir une hCard contenant le nom formaté sans compromettre le flux de mon texte :
<span class="vcard">
<a class="url" href="http://pierre-philippe.blogspot.com/">
<abbr class="fn" title="Pierre-Philippe Cormeraie">
Pierre-Philippe
</abbr>
</a>
</span>
Maintenant un parseur devra faire un travail supplémentaire pour trouver le nom formaté dans l’attribut title de l’élément abbr plutôt que le texte entre les balises d’ouverture et de fermeture de tout élément qui a une classe “fn”. Mais tout cela fait partie de la philosophie des microformats :
Conçus d’abord pour les êtres humains et ensuite pour les machines
Plus spécifiquement, les être humains qui publient d’abord, les machines qui parsent ensuite.
Si je devais faire un lien vers le site de Pierre-Philippe à partir d’ici, je combinerais aussi mes microformats : hCard + XFN :
<span class="vcard">
<a class="url" rel="friend met co-worker"
href="http://pierre-philippe.blogspot.com/">
<abbr class="fn" title="Pierre-Philippe Cormeraie">
Pierre-Philippe
</abbr>
</a>
</span>
Comment j’ai obtenu une récompense en richesse sémantique :
- une abréviation, l’extracteur sémantique de données du W3C est un joli moyen de vérifier la richesse sémantique de vos documents,
- information de contact—ceci peut être converti et exporté en utilisant le service de Technorati, le plugin pour Firefox Operator ou le microformats bookmarklet qui fonctionne sur tout navigateur et
- les données de relation—celles-ci peuvent être montées visuellement en utilisant le graphe XFN.
Tout cela en mot d’une clause dans une phrase :
L’autre jour, je discutais avec Pierre-Philippe…
Mots-clés : microformats hcard écriture langage semantics
October 18th, 2007 at 7:15
j’aurai penché pour faire une utilisation du css pour cacher les informations inutiles à la lecture.
html:
Pierre-Philippe Cormeraie
Pierre-Philippe
css:
.vcard_familier .fn{display:none;}
October 18th, 2007 at 7:17
oups le html est interpreter.
\
\Pierre-Philippe Cormeraie\
\
\
Pierre-Philippe
\
\
\
October 18th, 2007 at 7:19
bon je ne sais pas trop comment faire pour que ca passe… autant regarder le code dans le navigateur.
October 18th, 2007 at 15:06
On dirait du “belle marquise vos beaux yeux d’amour mourir me font” moderne ! A propos : l’ordre des tags XFN dans la proposition rel=”friend met co-worker” a-t-il une importance ou est-il libre ?