les microformateurs

21 September 2008

Emily Lewis : “Parvenir à la Sémantique avec les Microformats, 2ème partie - XFN”

Filed under: microformats, ressources, traduction — Christophe Ducamp @ 8:06

Dans la première partie de cette série, j’ai expliqué différentes implémentations du microformat rel sur A Blog Not Limited. Tout en expliquant rel-me, j’ai rapidement abordé le microformat XFN.

Il est maintenant temps de passer un peu plus de temps sur ce microformat très cool, qui fût en outre l’un des premiers.

Mettre un Visage Humain sur les Liens

Créé par le GMPG, le XHTML Friends Network est un moyen étonnamment simple et décentralisé de représenter les relations humaines en utilisant l’attribut rel dans les liens(<a>).

Le concept est identique à ce que je décrivais dans la Première Partie pour les relations fondées sur les liens :


<a href="http://twitter.com/emilylewis"
rel=”me”>Twitter</a>

Dans cet exemple, l’ajout du rel="me" indique que le lien de destination (href) fait référence à une page à mon propos (ou une page dont je suis responsable).

Le microformat XFN prend cette référence “humaine” pour les relations fondées sur les liens bien plus profondément que ce que j’ai déjà discuté.

Nous Sommes Tous Connectés

XFN pousse le concept du rel-me au delà de l’identification personnelle de l’individu pour aller vers les relations sociales entretenues par une personne. Vous ajoutez simplement plusieurs valeurs qui décrivent ces relations à l’attribut rel d’un lien.

Par exemple, je fais souvent référence dans mes articles de blog à mon ami et patron, Ian  :


<a href="http://www.iso-100.com/"
rel=”met colleague co-worker friend”>
Ian Pitts</a>

Dans cet exemple, j’ai ajouté rel="met colleague co-worker friend au lien faisant référence à son blog personnel. Les valeurs rel indiquent que :

  • J’ai rencontré (met) Ian en personne.
  • Ian est un confrère (colleague), ce qui veut dire que le considère comme un pair avec des intérêts et talents similaires.
  • Ian est mon boss et par conséquent un collègue (co-worker).
  • Je considère Ian comme mon ami (friend) (il a de la chance, non ?).
Comment Sommes Nous Connectés

La spécification XFN fournit des valeurs de relation qui sont volontairement simplifiées.

Amitié/Familiarité

Seule une valeur peut être utilisée dans cette liste :

  • friend : varie selon les définitions personnelles. C’est fondamentalement le plus haut niveau d”intimité” dans la catégorie de familiarité.
  • acquaintance : induit une familiarité mutuelle.
  • contact : quelqu’un avec lequel vous avez l’information de contact.
Physique

met indique quelqu’un que vous avez rencontré en personne. Peut exister indépendamment de toutes les autres valeurs.

Professionnel

Une ou plusieurs de ces valeurs peuvent être utilisées :

  • colleague : quelqu’un avec des intérêts et/ou compétences similaires aux vôtres ; un pair.
  • co-worker : quelqu’un avec qui vous partagez un employeur.
Géographique

Seule une de ces valeurs peut être utilisée :

  • co-resident : quelqu’un avec lequel vous partagez une adresse de rue.
  • neighbor : une référence géographique plus étendue, généralement quelqu’un qui vit près de chez vous mais pas dans la même rue.
Familial

Seule une de ces valeurs peut être utilisée :

  • child : quelqu’un dont vous êtes le parent, que ce soit biologique ou adoptif.
  • parent : quelqu’un qui vous a enfanté, que ce soit biologique ou adoptif.
  • sibling : quelqu’un avec qui vous partagez un parent, une fois de plus biologique ou adoptif, tout comme à travers le mariage.
  • spouse : quelqu’un avec lequel(le) (ou sentez que vous êtes) marié(e), que ce soit légal ou non.
  • kin : tout proche de vous, que ce soit par le sans, le mariage ou l’adoption.
Romantique

N’importe laquelle ou toutes ces valeurs peuvent être utilisées :

  • muse : quelqu’un qui vous inspire.
  • crush : quelqu’un vers lequel vous êtes attiré(e), mais dont les sentiments peuvent ne pas être réciproques ou même savoir que vous existez.
  • date : quelqu’un avec qui vous sortez régulièrement.
  • sweetheart : une personne avec laquelle vous êtes intime sur le plan émotionnel et/ou physiquement, et vers laquelle vous êtes engagé(e).

Du fait de ma propre confusion quand j’ai commencé cette tentative, j’ai pressenti que cela pouvait valoir la peine d’expliquer la valeur muse. Même si elle existe dans la catégorie romantique, c’est parti d’une perspective comparative en relation avec le rationnel. L’inspiration n’est pas rationnelle, de ce fait elle est romantique.

J’insère fréquemment des liens vers quelques-uns de mes héros de l’industrie (Jeffrey Zeldman, Eric Meyer et Jason Santa Maria, pour n’en nommer que quelques-uns). Et pour tous, j’insère rel="muse".

En aucune façon, ceci n’indique une relation romantique. J’admire tout simplement (et profondément) leurs travaux et les suit souvent pour de l’inspiration.

Et juste un aparté personnel : j’ai trouvé les descriptions de ces valeurs romantiques extrêmement drôles et amusantes.

Identité Personnelle

me indique un lien vers vous-même à un endroit différent (href).

C’est l’unique “relation” qui existe d’elle-même et reste exclusive de toutes les autres valeurs de relation.

J’espère que c’est évident, mais au cas où ce n’est pas considéré simplement que même si vous pressentez que vous êtes un ami de vous-même, déclarer la valeur friend est redondant. Tout comme met et toutes les autres. Vous n’avez tout simplement pas besoin d’elles et elles ne sont pas valides.

Délibérément Simple = Efficace

Même moi, en tant que personne très pointue sur le détail, je peux apprécier la simplicité et l’efficacité de ces valeurs. Plutôt que de débattre pour savoir si quelqu’un est, par exemple, un superviseur ou un subordonné, j’accepte simplement que co-worker soit une valeur plus large qui englobe les deux.

Cela vaut la peine de mentionner qu’il n’existe pas d’ordre spécifique qui ait besoin d’être suivi quand vous utilisez ces valeurs.

En outre, la réciprocité dans ces valeurs n’est pas obligatoire. Ainsi, si vous faites référence à une personne en tant que friend et qu’elle fait référence à vous en tant qu’acquaintance, ce n’est pas un problème (à moins que vous ne souffriez extrêmement d’un manque d’estime de vous-même et le preniez personnellement).

Spécifier un Profil

En plus de déclarer les valeurs rel sur les liens vers quiconque que vous connaissez, le GMPG recommande que vous laissiez aussi les navigateurs et moteurs de recherche savoir que vos pages supportent XFN en spécifiant le profil XFN dans l’en-tête <head> des pages avec des liens de relation XFN.

En ce qui me concerne, j’ai choisi de déclarer le profil de toutes mes pages par que mon <head> est maintenu dans un fichier global include. Ceci me facilite la maintenance, en outre, au minimum le rel="me" apparaît sur toues mes pages (dans les liens du pied de page vers mes pages profil Flickr, Delicious, iLike et Twitter ) :

<head profile=”http://gmpg.org/xfn/11″>

Dites-le au Monde

Le GMPG recommande aussi de faire savoir aux gens que votre site est “XFN-friendly”. Ils fournissent même un petit marqueur que vous pouvez ajouter sur votre site :

XFN Friendly

Personnellement, je ne suis pas très fan des boutons et badges. Je préfère une esthétique plus discrète. Mais je supporte vraiment l’effort, ainsi j’ai ajouté un lien XFN dans mon pied de page :


<a href="http://gmpg.org/xfn"
title="XHTML Friends Network Friendly">XFN</a>

lien XFN dans le pied de page A Blog Not Limited

Faites que ce soit Plus Facile pour Vous

Même si ajouter simplement un attribut et quelques valeurs aux hyperliens ne constitue qu’un tout petit effort, il existe quelques outils disponibles qui rendent le XFN plus facile à implémenter :

  • Créateur XFN 1,1 est une application web qui crée des liens avec les valeurs XFN propres et est disponible en plusieurs langues.
  • MT Blogroll 2.12 Manual est un plugin pour Movable Type qui vous permet de définir les relations XFN pour les liens dans la blogroll.
  • XFN Link Creator est un autre wizard qui crée des liens avec des valeurs XFN. Il vous permet aussi de spécifier le balisage du contenant, tout comme les valeurs title pour les liens.
  • WordPress Links Manager est configuré pour vous permettre de définir les relations XFN pour les liens de blogroll.
  • WP Microformatted Blogroll 0.2 est un plugin WordPress qui produit des liens microformatés annotés sur votre blog.
  • rel-lint est un bookmarklet JavaScript qui vérifie les valeurs XFN connues et marque celles qu’il ne reconnaît pas.

Le Web Sémantique

Je sais que je l’ai déjà dit encore et encore (et ce n’est pas près de se terminer) : la sémantique est l’un des bénéfices de base des microformats, et XFN n’y fait pas exception.

L’usage ajoute de la structure et du sens au contenu, le rendant à la fois lisible par les humains – tout comme par les machines. Et même encore mieux, il le fait en utilisant des standards existants pour le marquage et les données. Brillant !

Les microformats nous emmènent vers un pas plus proche du Web Sémantique visionné par Tim Berners-Lee.

Le Web Social

Tout comme la sémantique seule me donne raison d’implémenter les microformats sur ce blog, je réalise que ce ne peut être suffisant pour certaines personnes. Pour ces personnes, je soupçonne que les aspects “sociaux” de XFN peuvent être plus importants.

Recherche Sociale

Rubhub est un moteur de recherche sociale où vous pouvez proposer votre site, et il est indexé et comparé à d’autres sites dans l’index rubhub pour identifier n’importe quelles relations sociales.

Une fois indexé, vous pouvez voir les résultats sociaux de votre site, y compris les autres sites liés à votre identité (via rel="me") et les sites des personnes qui vous référencent (y compris comment elles vous référencent).

Visualisations

XFN Graph crée des diagrammes en étoile sur la manière dont les sites se relient les uns aux autres, fournissant une représentation visuelle des relations sociales entres les auteurs de site/blog. A partir de ça, vous pouvez voir comment les personnes se connectent aux autres et trouver de nouvelles personnes qui partagent des intérêts similaires aux vôtres.

Connectivité

En utilisant XFN, l’API Social Graph de Google facilite le fait de trouver des amis dans de nouveaux endroits sur le web.

Son application de démo My Connections, par exemple, vous montre comment vous êtes connecté(e) à d’autres personnes. Voici un aperçu des résultats provenant de A Blog Not Limited”

API Social Graph My Connections pour A Blog Not Limited

Listes d’Amis

Il existe beaucoup de sites, particulièrement les sites de réseaux sociaux, qui supportent le marquage XFN sur les listes d’amis/contacts. Tant Twitter et LinkedIn, par exemple, ajoutent rel="contact" à leurs listes de liens des “suiveurs” et des contacts.

Pour aller un cran plus loin, plusieurs sites publient des listes d’amis hCard+XFN, qui peuvent être utilisées pour importer/s’abonner à d’autres sites qui supportent hCard+XFN. (Je couvrirai le microformat hCard en détail dans la partie 3 de cette série.)

Ceci pose les fondations pour permettre aux utilisateurs de modifier l’information de réseau social sur un site et faire que les autres sites soient automatiquement mis à jour.

Consolidation d’Identité

Comme je l’évoquais dans la Partie 1, XFN est essentiel pour la consolidation d’identité.

Sites de Réseaux Sociaux

Par exemple, beaucoup de sites de réseaux sociaux associent rel="me" aux liens vers les pages de profil, que ce soit Flickr, Twitter, LinkedIn et d’autres encore. Ainsi, là où n’importe quelle page réclame l’autre, l’identité divisée est consolidée.

ClaimID

Il existe aussi des services de consolidation d’identité qui utilisent XFN. claimID, par exemple, vous permet de régler manuellement un profil avec toutes vos identités en ligne consolidées sur une page, chacune d’entre elle pouvant être annoté avec rel="me". Voici un aperçu de mon profil claimID avec des liens qui englobent le microformat rel-me :

profil d'emily sur claimid

Un avantage supplémentaire de régler un profil claimID est que cela vous offre une OpenID.

OpenID est un système ouvert, décentralisé et libre pour l’identité digitale centrée sur l’utilisateur. Elle utilise les technologies web existantes pour transformer les identités digitales existantes (telles qu’un blog, un flux de photos, etc.) en un compte qui peut être utilisé sur des sites supportant les connexions OpenID. Ceci n’a bien sûr pas de rapport avec la discussion XFN, mais c’est vraiment cool.

Plaxo

Il existe aussi le Graphe Social Ouvert de Plaxo, qui comprent un crawler qui démarre par une URL que vous saisissez et cherche les liens rel="me". Il balaye ensuite ces liens, jusqu’à ce qu’il ne trouve plus de liens à suivre.

Il cherche aussi les liens bidirectionnels pour établir une “déclaration vérifiée” que c’est bien la même personne dans les deux endroits (href). Voici un aperçu des résultats du crawler pour A Blog not limited :

Plaxo Open Social Graph results for A Blog Not Limited

Le carnet d’adresses en ligne de Plaxo et le service de réseau social supporte aussi XFN en ajoutant automatiquement rel="me" à n’importe lesquels des sites personnels que vous ajoutez à votre profil. Chacun des liens “Emily on the Web” provenant de mon profil Plaxo a le microformat rel-me annoté :

Emily's Plaxo profile

Même l’API Social Graph de Google comprend une application de démonstration, Site Connectivity, qui vous montre votre identité consolidée en listant les sites qu’elle sait de vous, tout comme ceux qu’elle pense pouvoir être de vous. Voici un aperçu des résultats que j’ai obtenus pour A Blog Not Limited :

Social Graph API Site Connectivity for A Blog Not Limited

Un peu de Style

Aussi abordé dans la Partie 1, vous pouvez utiliser les sélecteurs d’attribut CSS pour ne styliser que les liens comportant des valeurs spécifiques rel.

Par exemple, mettons que vous vouliez tirer profit des icônes microformats XFN, vous utiliseriez des sélecteurs d’attribut pour déclarer :


a[rel~="friend"]:before {content: url(xfn-friend.png);}

Dans les navigateurs supportant la spécification CSS 2.1 (qui ne doivent pas être cette merde de navigateur IE6), ceci pourrait s’afficher comme suit :

exemple de lien ami XFN

A venir en Partie 3

Ceci clôture mon billet sur XFN. Parvenir A la Sémantique avec les Microformats, 3ème Partie traitera du microformat hCard.

Restez branché …

Note : Cette traduction s’inscrit dans la poursuite de travaux visant à mieux faire connaître les microformats. L’article original d’Emily Lewis a été publié le 17 septembre dernier sur son blog personnel. Seul le lien original fait référence. Vous pouvez m’aider à raffiner cet article en éditant directement le code posé sur la page miroir de mon wiki-personnel. Merci d’avance. xtof

20 September 2008

Emily Lewis : “Parvenir à la Sémantique avec les Microformats, 1° Partie : rel”

Filed under: ressources, traduction — Christophe Ducamp @ 11:56

logo microformats

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 :

Barre d'Outils de Navigation Opera

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 :

Module Operator pour Firefox

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 :

Extension Firefox Tails Export

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

Mots-clés : , ,

Emily Lewis : “Parvenir à la Sémantique avec les Microformats - Introduction”

Filed under: ressources, traduction — Christophe Ducamp @ 11:01

Ce qui suit s’inscrit dans la poursuite de travaux visant à mieux faire connaître les microformats. Aujourd’hui, voici une traduction en cours d’un article d’Emily Lewis publié le 5 septembre dernier sur son blog personnel. Seul le lien original fait référence. Vous pouvez aider à raffiner en éditant directement le code posé sur la page miroir de mon wiki-personnel. Merci d’avance. - xtof

logo microformats

Je suis une organisatrice avec un besoin parfois frustrant de prêter attention aux plus petits détails.

Cela se voit même dans ma maison : ma collection de plus de 500 DVD est organisée par ordre alphabétique, tout comme ma collection de CDs. Je passe des heures dans itunes à déclarer des genres (parce que ceux par défaut ne sont tout simplement pas assez bien pour moi) et à créer des playlists de plus de 10 000 plages. Les tiroirs de ma commode et la penderie sont immaculés. Tout simplement moi. Ce caprice déteint aussi dans mon travail en design web, un travail valide, sémantique et bien commenté (la plupart du temps). Et c’est l’une des raisons pour lesquelles j’aime ce que je fais dans la vie.

Coder le XHTML et la CSS à la main requiert organisation et planning, tout spécialement pour bien le faire. Même pire, suivre les standards du web dans ce code requiert une plus grande attention au tout petit détail, tout particulièrement la sémantique. Telle est la raison pour laquelle je suis gaga des microformats.

C’est Quoi les Microformats ?

Pour le dire vite, les microformats sont de simples formats de données ouverts construits sur des standards existants pour le balisage et les données. Les designers et les développeurs utilisent les microformats pour ajouter de la structure et du sens à la publication web en ajoutant des métadonnées et d’autres attributs aux éléments (X)HTML existants.

A Quoi Cela Ressemble ?

Un exemple simple de microformat (bien qu’ils soient tous simples par nature) est l’attribut rel pour les liens (<a>) :

<a href="http://www.ablognotlimited.com" rel=”home”>A Blog Not Limited</a>

Le lien ci-dessus rel="home", qui indique la page liée est la page d’accueil du site. Ceci ajoute un peu plus de structure et de sens au lien avec du marquage et des attributs existants.

Mais cet article n’est pas une explication des microformats. Si vous voulez plus de recul, allez sur le site faisant autorité, Microformats, ou Wikipedia.

Alors, de Quoi Traite Cet Article ?

Depuis le développement de ce site A Blog Not Limited, j’ai identifié un certain nombre de microformats que je voulais utiliser dans mon marquage :

Afin de partager, j’ai voulu fournir des exemples de ces implémentations personnelles. Néanmoins, au fur et à mesure de la rédaction de cet article, j’ai réalisé que c’était bien plus long que ce à quoi je pouvais m’attendre. Mais je n’ai vraiment pas voulu me débarrasser de quoi que ce soit. Aussi j’ai décidé de le morceler à l’intérieur d’une série d’articles traitant de la manière dont j’ai implémenté les microformats sur ce blog. Cet article d’introduction est tout simplement ça : une introduction à la série avec un peu de contexte sur les microformats.

Qu’en Attendre

Chaque article dans ma série Parvenir à la Sémantique Avec Les Microformats traitera d’un microformat que j’ai choisi d’utiliser sur A Blog Not Limited.

J’y introduirai des échantillons de code, des explications des éléments et attributs utilisés, ainsi que les avantages à utiliser chaque microformat.

Je n’ai pas de planning pour les articles, mais j’espère en publier au moins un par semaine.

Aussi, Quelle Est la Prochaine Étape ?

Parvenir à la Sémantique avec Les Microformats, 1ère Partie détaillera les microformats pour les relations fondées sur les liens, rel-home, rel-me, rel-tag and rel-license.

Mots-clés : , ,, , , , , , , , , , ,

Powered by WordPress