Emily Lewis : “Parvenir à la Sémantique avec les Microformats, 1° Partie : rel”
Comme je le mentionnais dans cette introduction à cette série, je suis une dingue des microformats.
J’adore la sémantique, la structure et le potentiel. J’ai décidé que je devais partager cet amour au monde (ou au moins à mes quatre lecteurs) en détaillant comment j’avais utilisé différents microformats sur A Blog Not Limited.
Ce premier versement de la série se concentre sur les microformats pour les relations basées sur les liens utilisant l’attribut rel. Démarrons ?
Relations Fondées sur les Liens
L’attribut rel est utilisé pour décrire la relation d’un lien dans le sens où la destination (href) est vers la source. La plupart des personnes sont probablement très à l’aise avec cet attribut quand il est utilisé avec la CSS liée :
<link rel=”stylesheet” type=”text/css” media=”screen”
href=”/styles/main.css” />
En outre, plusieurs valeurs rel peuvent être utilisées dans le marquage, tout simplement parce que plusieurs valeurs class sont permises.
Montre Moi le Chemin vers la Home
Le microformat rel-home indique que la destination d’un lien est la page d’accueil du site. Il est essentiellement utilisé à des fins de navigation sur le site, mais aussi pour fournir quelque description de la structure du site aux pages individuelles.
Note : rel-home est une spécification brouillon, ce qui signifie qu’elle est sujette à changement. Mais, du fait que le changement fasse partie de la nature des technologies web, ce n’est pas quelque chose qui me gêne particulièrement.
Maintenant, retour à la programmation … j’utilise le microformat rel-home de deux façons. Dans le <head> de mon XHTML, j’ai ajouté :
<link rel=”home”
href=”http://www.ablognotlimited.com/”
title=”Home page” />
Ainsi, n’importe quel lien (dans la navigation, tout comme dans le contenu) vers la page d’accueil de A Blog Not Limited se voit assigner rel="home":
<a href="http://www.ablognotlimited.com" rel=”home”>
A Blog Not Limited</a>
Les Bénéfices
Outre la sémantique et le sens (ce qui est plus qu’assez en ce qui me concerne), Opera reconnaît le microformat rel-home quand il est utilisé dans le <link> d’un document <head>. Le navigateur contient une Barre d’Outils de Navigation qui permet aux utilisateurs de naviguer vers la page d’accueil :
Aussi, selon Plongez dans l’Accessibilité de Mark Pilgrim, rel-home fournit une accessibilité accrue avec des aides à la navigation pour les navigateurs en mode texte, tels que Links et Lynx.
Pour finir, rel-home est reconnu par le module Firefox cmSiteNavigation Toolbar, qui affiche les pages web en rapport de la page web en cours dans une barre d’outils pour aider à la navigation. A cette heure, cette extension est uniquement disponible pour FF 1.5–2.0. Et du fait que j’utilise FF 3.0, je suis dans l’incapacité de vous fournir un aperçu de cet outil.
Moi, Moi-même & Me
Aussi, du fait que ce blog est mon blog et que plusieurs valeurs peuvent être utilisées, n’importe quel lien vers la page d’accueil se voit aussi assigner rel="me" :
<a href="http://www.ablognotlimited.com" rel=”home me”>
A Blog Not Limited</a>
Selon la spécification, rel="me" est utilisé sur les hyperliens provenant d’une page à propos d’une personne vers d’autres pages sur cette même personne.
Avec ça en tête, j’ai aussi ajouté rel="me" aux liens vers mes sites de médias sociaux (à savoir Flickr, Facebook, Twitter, etc.) :
<a href="http://twitter.com/emilylewis"
rel=”me”>Twitter</a>
Les Avantages
Une fois de plus, la sémantique me suffit bien en ce qui me concerne, mais il y a des avantages émergents à utiliser rel-me, principalement en relation avec le microformat XFN
XFN est un microformat qui décrit les relations sociales (à savoir les amis, la famille, les collègues, etc.). En utilisant XFN, Google est en train de développer l’API Social Graph pour aider à rendre le web plus social et plus facile pour trouver des amis dans de nouveaux endroits sur le web.
Il existe aussi tout un petit nombre de services de “consolidation d’identité en ligne” qui utilisent XFN, dont claimID et l’Open Social Graph de Plaxo.
Pour aller encore plus loin, beaucoup de sites de “réseaux sociaux” sont en train d’ajouter rel="me" à leurs liens de page profil, dont Flickr, Twitter, LinkedIn et plus encore. Ceci supporte l’effort de consolidation d’identité : Là où n’importe quelle page qui fait une demande pour une autre, l’identité divisée est consolidée.
Je traiterai le microformat XFN plus en détails dans la 2ème Partie de cette série.
Catégories + Tags = Organisation Joyeuse
Compte tenu de ma prédilection pour l’organisation (et parce que les enfants cools le font), j’utilise les tags sur A Blog Not Limited pour compléter les catégories. Et pour mon bonheur, il existe un microformat pour supporter cette organisation : rel-tag.
Ajouter rel="tag" à un lien (<a>) sur une page indique ce qui est traité sur cette page — ou une partie de cette page. Rel-tag est très utilisé sur les blogs où les auteurs taguent leurs billets pour aider à l’organisation/catégorisation du contenu.
La spécification requiert que le lien destination (href) inclut la véritable valeur du “tag” comme le segment final de la valeur de l’URL. Ceci est connu sous le nom “tagspace.”
Sur A Blog Not Limited, j’ai appliqué ce microformat à tous mes liens tagués :
<a href="http://www.ablognotlimited.com/articles/tag/ExpressionEngine/”
rel=”tag”>ExpressionEngine</a>
Tout comme mes liens de catégories (parce que dans mon esprit, ils décrivent aussi ce qu’il y a dans un contenu donné :
<a href="http://www.ablognotlimited.com/articles/category/experiments/”
rel=”tag”>Experiments</a>
Ces exemples démontrent qu’une page contenant ces liens englobe de l’information à propos de ExpressionEngine et/ou Experiments. En outre, les exemples montrent que les “tagspaces” tant pour ExpressionEngine que Experiments sont situés sur les URLs fournies.
Les Avantages
Ai-je besoin de le répéter une fois de plus ? Oui, bien sûr, juste parce que j’adore : la sémantique est le principal avantage pour moi. A cette heure, tout comme pour l’autre microformat décrit dans cet article, il y a des avantages supplémentaires.
Le module Operator, pour Firefox, par exemple, reconnaît rel-tag et fournit une recherche par contexte sur d’autres sites web, dont Amazon, YouTube et Flickr. Voici comment Operator traite les liens rel-tag sur mon blog :
Technorati a une fonctionnalité de recherche de tag qui indexe les billets de blog tagués et les autres contenus tagués avec rel. Utile pour aider à augmenter l’exposition d’un site ou d’un blog, parce que le contenu rel-tagué peut être accédé par les Tags de Technorati.
De la même manière, le moteur de recherche de blog Icerocket supporte la recherche basée sur les tags.
License to Kill (Avec Code Sémantique)
Oui, je sais ce titre est vraiment boiteux … passons …
Le dernier microformat de relation basé sur le lien que j’utilise est rel-license. Comme vous avez pu déjà le deviner, ce microformat indique une licence pour le contenu, et quand il est utilisé dans un lien (<a>), où accéder à cette licence (via la valeur href).
Quand j’ai démarré A Blog Not Limited, une des premières choses que j’ai faite fût de poser une licence Creative Commons pour la protection du copyright. J’ai ensuite modifié la déclaration de copyright dans mon pied de page de blog pour ajouter un lien vers la licence. Et c’est à ce lien que j’ai ajouté rel="license" :
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr_CA"
title="Paternité-Pas d'Utilisation Commerciale-Pas de Modification 3.0"
rel=”license”>copyright</a>
Les Avantages
Oui, sémantique d’un côté. D’un autre côté, il y a un module pour Firefox qui reconnaît rel-license : Tails Export. Voici comme Tails affiche l’information rel-license pour A Blog Not Limited :
En outre, Creative Commons lui-même utilise rel-license au moment de générer le balisage rel-license.
Et Google et Yahoo! offrent tous deux des recherches sur le contenu basé sur rel-license :
Un Avantage Global
Bien qu’ayant détaillé quelques avantages individuels pour chacun des microformats discutés dans cet article, il existe un avantage global qui devrait être aussi pris en compte : les sélecteurs d’attribut CSS.
En utilisant les sélecteurs d’attribut CSS, vous pouvez définir des styles spécifiques aux liens comprenant des attributs rel. Par exemple, ajouter une icône au début d’un lien assigné rel="license" :
a[rel~="license"]:before
{content: url(copyright.png);}
Bien sûr, IE6 ne reconnaît pas les sélecteurs d’attribut, mais au diable. Je hais IE6 de toutes les façons… je dis d’y aller pour une amélioration progressive du design pour des navigateurs compatibles avec les standards qui supportent véritablement les sélecteurs d’attribut.
A Venir en 2ème Partie
Comme je l’évoquais précédemment, je traiterai le microformat XFN dans Parvenir à la Sémantique avec les Microformats, 2° Partie.
Restez à l’écoute …
Note : Cette traduction en cours provient d’un article d’Emily Lewis publié le 9 septembre dernier sur son blog personnel. Seul le lien original fait référence. Vous pouvez aider à raffiner cet article en éditant directement le code posé sur la page miroir de mon wiki-personnel. Merci d’avance. - xtof