- Un billet original de Garrett Dimon, publié le 14 novembre 2005 sur Digital Web.
- Traduction en cours publiée sous "fair-use" à des fins de recherche personnelle.
- Seul le lien original fait référence
A cette heure vous avez probablement entendu parler des microformats et vous vous êtes demandé(e) ce qu'ils sont précisément. Officiellement, ce sont un ensemble de formats de données simples et ouverts construits sur des standards existants et massivement adoptés, des formats qui sont d'abord conçus pour les humains puis pour les machines. Qu'est-ce que cela veut bien dire pour vous ? Heureusement, c'est plus simple qu'il n'y paraît.
Les microformats traitent de l'utilisation des standards que nous connaissons tous et aimons pour convoyer autant de sens sémantique que possible.
Pensez à eux comme des bonnes pratiques sémantiques. Ils utilisent les balises actuelles XHTML
telles que address, cite, et blockquote et les attributs tels que rel,
rev, et title pour créer des blocs de code sémantiquement appropriés.
Les microformats sont géniaux parce qu'ils sont à la fois utilisables et élégants- et tout ce que vous
avez besoin de faire pour démarrer avec eux est de vous familiariser vous-même
avec les bonnes manières d'appliquer les balises et attributs que vous utilisez déjà.
Exemple Rapide
Maintenant que nous comprenons ce que sont les microformats, jetons un oeil à la manière dont ils fonctionnent. Pour faire simple, nous utiliserons le microformat hCard. Disons que vous voulez afficher votre carte de visite sur un site Web. La vCard est le standard pour les cartes de visite électroniques, ainsi naturellement, nous l'utiliserons comme le point de départ pour créer le format hCard. Une fois de plus, les microformats sont bâtis sur des standards existants et massivement adoptés, comme la vCard.
Nous commencerons avec un exemple de vCard :
BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
ORG:Technorati
END:VCARD
Maintenant jetons un coup d'oeil au microformat équivalent, la hCard. La première chose à remarquer est qu'elle utilise simplement le XHTML standard. Deuxièmement, elle utilise les mêmes noms de champs que la vCard.
<div class="vcard">
<a class="url fn" href="http://tantek.com/">
Tantek Çelik
</a>
<div class="org">Technorati</div>
</div>
En regardant simplement l'exemple de hCard, vous pouvez comprendre ce que représente chacune des valeurs. Vous pourrez trouver une explication plus détaillée sur la façon dont la hCard a évolué à partir du format vCard sur le wiki des Microformats.
Pourquoi les utiliser ?
Maintenant nous savons exactement ce que sont les microformats et nous avons vu un exemple, mais pouquoi s'en soucier ?
Standards
Les standards sont critiques pour l'avenir du Web. Si vous n'êtes pas d'accord, demandez à n'importe quel designer Web de vous parler du défi de supporter Internet Explorer par rapport à la facilité de supporter Firefox. Et bien que les standards comme les microformats puissent ne pas être appropriés pour chaque situation, les connaître demeure la première étape à passer pour savoir quand les appliquer.
L'adoption est en train de démarrer pour atteindre la masse critique, et avant que nous ne la connaissions, les moteurs de recherche inteprétent déjà les relations de plus en plus complexes entre les sites, les personnes, les idées et plus encore.
Commodité CSS
Comme avantage supplémentaire d'utiliser les balises et attributs acceptés, nous pouvons pleinement tirer profit de la capacité de styliser nos microformats avec CSS. Jetons un oeil à eXtensible Open XHTML Outlines, aussi connu comme XOXO. XOXO est simplement une façon de baliser sémantiquement baliser les outlines.
En utilisant l'exemple suivant tiré du wiki :
<ol class='xoxo'>
<li>Sujet 1
<ol>
<li>sous-point a</li>
<li>sous-point b</li>
</ol>
</li>
<li>Sujet 2
<ol compact="compact">
<li>sous-point c</li>
<li>sous-point d</li>
</ol>
</li>
<li>Sujet 3
<ol>
<li>sous-point e</li>
</ol>
</li>
</ol>
Nous pouvons appliquer les règles de style possibles suivantes :
ol.xoxo { list-style:decimal; }
ol.xoxo ol { list-style:lower-latin; }
ol[compact="compact"] { display:none; }
Et notre outline s'afficherait comme suit :
1. Sujet 1
a. sous-point a
b. sous-point b
2. Sujet 2
3. Sujet 3
a. sous-point e
Quand vous regardez ça, il n'y a vraiment rien de décoré là dedans, et c'est la beauté des microformats. Du fait que nous utilisons un balisage existant et massivement supporté, les possibilités de mise en forme sont sans limite. Vous pourriez utiliser un format outline pour la navigation, les diaporamas, une table des matières, ou juste un bon vieux outline à l'ancienne. Encore mieux, le stylisme est encore entièrement sous votre contrôle.
JavaScript Plug-and-Play
Tout comme CSS, les microformats vous laissent faire quelques trucs intéressant avec JavaScript et le DOM. Après tout, les microformats ne sont tout simplement qu'un tas de XHTML. La seule différence étant que vos scripts n'ont pas besoin de manipuler des éléments basés sur un balisage personnalisé. En fait tout le monde peut créer un script pour fonctionner avec un certain microformat et le donner à la ronde. Quand il sera temps d'intégrer le script dans votre page, c'est un jeu d'enfant, parce que vous utilisez déjà le même balisage sémantiquement valable pour identifier les morceaux et pièces à manipuler par le script.
Lisible par les Machines
Nous avons déjà couvert les avantages des microformats étant lisibles par les humains,
mais qu'en est-il des “machines”—vous savez, les moteurs de recherche ?
Un exemple est le microformat élémentaire rel="nofollow".
En ajoutant cet élément à vos balises ancres, vous dites aux moteurs de recherche
de ne pas donner quelque poids à ces liens. Ceci est simplement l'un des nombreux microformats lisible par les machines.
Imaginez un instant un avenir où les moteurs de recherche reconnaîtront les microformats et tireront profit de leurs métadonnées inhérentes. Vous pourriez trouver des critiques pour des produits ou pages spécifiques, des votes en faveur ou contre un site quand vous placez un hyperlien, ou suivre le développement d'une conversation à travers plusieurs sites avec un effort minimal.
Métadonnées Implicites vs Métadonnées Explicites
Pour les moteurs de recherche et les formats de données lisibles par les machines, la métadonnée pertinente et appropriée est l'une des clés pour assembler l'ensemble. Fournir des métadonnées explicites oblige à un effort supplémentaire et a été traditionnellement défié ou négligé. Avec les microformats, la métadonnée implicite est fournie par la vertu d'utiliser le bon balisage. Cela ne remplacera pas le besoin de métadonnées explicites, mais cela peut servir comme un supplément génial ou au moins un bon démarrage.
En utilisant les microformats, vous n'écrivez pas seulement avec un meilleur balisage, mais vous ajoutez aussi une richesse d'information lisible par les machines pour les moteurs de recherche et les autres applications de métadonnées, une information qu'ils pourront utiliser pour construire des relations, tirer des connexions et améliorer la qualité des résultats de recherche.
Le Balisage ayant du Sens est un Bon Balisage
Au moment d'écrire du balisage à l'encontre des deadlines et priorités, il est facile d'oublier que quelqu'un d'autre devra éventuellement le maintenir. Pour des besoins de commodité, quelques-unes des idées-clés derrière les microformats tournent autour du fait qu'ils sont conçus d'abord pour les humains et ensuite créés avec la simplicité à l'esprit. Ceci veut dire que vous devrez avoir une syntaxe qui soit facile à comprendre et à maintenir pour tous, y compris :
- L'ingénieur intégrant votre code la semaine prochaine
- Vous pour mettre à jour votre code le mois prochain
- Le nouveau type prendant votre job quand vous serez promu l'année prochaine
Résumé
Maintenant quand vous traînerez et que quelqu'un apportera des microformats, vous serez prêt à vous y engouffrer et de gérer les vôtres. Les détails peuvent être un peu écrasants, mais avec un peu de lecture, vous gagnerez des idées n'ayant pas de prix dans le balisage et les standards qui pourront vous aider même quand vous n'utiliserez pas les microformats.
Sources en Rapport
- Microformats.org
- Microformats : Listes de Discussion
- Introduction aux Microformats
- Microformats Utilisables par Andy Hume – Une exploration en profondeur des vCards
Garrett Dimon est un Architecte de l'Information chez Geniant à Dallas, Texas. Il a pour mission de faire du Web un meilleur endroit, et ils croit qu'une approche holistique vers le développement front-end, le design et l'expérience utilisateur est la façon de faire pour que cela arrive. Quand il n'est pas obsédé par le web, il peut être généralement trouvé en train de jouer au basket ball ou d'apprécier une sortie en plein air.
