les microformateurs

Paris-Web 2008 : Atelier Microformats vs RDFa

Christophe Ducamp — Mon, 20 Oct 2008 01:12:23 +0000

Paris-Web est une association française sans but lucratif « loi 1901 » fondée en 2005 qui organise chaque année une grande manifestation sur l’accessibilité, la qualité et le design web.

A marquer dans vos agendas : L’édition ParisWeb 2008 aura lieu le mois prochain. Pour 10 euros H.T., vous pouvez vous inscrire à la journée des ateliers du 15 qui comporte une session sur les microformats :

Quand :: le samedi 15 novembre, à partir de 8h30.
Où :: EFREI 30-32 avenue de la République, 94800 Villejuif, FR
Un atelier pourrait tout particulièrement intéresser les microformateurs et plus largement tous ceux qui s’intéressent au Web Sémantique :: RDFa vs Microformats

Présenté par : David Larlet (Welldev), Frédéric de Villamil (BlueKiwi Software)

Au-delà de la simple sémantique issue des balises HTML employées, il est possible de donner davantage de sens à vos contenus web afin de les rendre plus facilement réutilisables.

Issus de deux philosophies distinctes, RDFa et les Microformats sont deux approches différentes mais non concurrentes dont le but est de révolutionner les possibilités offertes par le data mining et les outils de recherche.

Nous tenterons de vous transmettre outils, techniques, trucs et astuces, mais surtout l’utilité de tels standards à travers des exemples concrets d’utilisation.

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

Christophe Ducamp — Sat, 18 Oct 2008 15:53:24 +0000

Nous voici de nouveau à plonger dans le monde excitant (au moins pour moi) des microformats. Basé sur ce que j’avais plannifié au début, cet article marque le mi-parcours de la série. A ce stade, j’ai discuté de trois implémentations des microformats sur A Blog Not Limited :

Spécifier les relations fondées sur les liens en utilisant l’attribut rel dans la 1^ère Partie
Donner aux liens un “visage humain” en utilisant le microformat XFN dans la 2^ème Partie
Décrire les personnes, les sociétés et lieux avec le microformat hCard dans la 3^ème Partie

Pas mal. Mais cela ne fait que gratter la surface des microformats.

Aussi, allons droit vers le microformat hCalendar, que j’utilise pour ajouter de la sémantique et de la structure à mon contenu pour les événements et activités basés sur des dates et heures.

Origines : iCalendar

iCalendar (ou iCal) est un standard pour partager des données de calendrier. Plus fréquemment, il est utilisé dans les échanges d’email, bien qu’il ne soit pas seulement limité à ce médium.

Comme la hCard, hCalendar a été introduit de manière à ce que les auteurs web puissent inclure des données iCalendar dans leurs pages web.

hCalendar est une représentation 1:1 du iCalendar, qui permet aux parseurs d’extraire de l’information d’événement provenant d’une page web de manière à ce qu’elle puisse être utilisée dans les programmes de calendriers (parmi d’autres usages).

Note historique : iCalendar est basé sur vCalendar (Virtual Calendar), qui est une application de calendrier en open source pour publier et maintenir des événements et rendez-vous en ligne. vCalendar a été développé avec le format de carte de visite électronique vCard.

Activités Fondées sur Date/Heure

Le microformat hCalendar décrit le type d’information à propos d’évènements (ou tout ce qui est basé sur les date/heure) que vous auriez sur un calendrier, à savoir (mais non limité) :

Résumé
Date et heure
Lieu
Description détaillée
Récurrence

Les Bases

Tout comme hCard, hCalendar a quelques règles de base :

Les propriétés et sous-propriétés sont exprimées sous des valeurs class.
Du fait de la relation 1:1 avec iCalendar, les propriétés spécifiées hCalendar sont basées sur les noms de propriétés de iCalendar (à savoir, vevent).
Les propriétés et sous-propriétés sont sensibles à la casse.
La propriété “racine” ne peut pas être mélangée avec n’importe laquelle de ses propriétés. De ce fait,
est invalide.

Et même si ce n’est pas une règle, il est important de garder ça à l’esprit : le marquage utilisé importe peu.

Les valeurs de classe (propriétés/sous-propriétés) définissent le microformat hCalendar.

Ceci étant dit, j’encourage vraiment le marquage sémantique (et cela va sans dire valide).

Le Profil

Comme pour tous les microformats, il est recommandé de faire référence au profil hCalendar dans le des pages web qui contiennent le microformat :

profile=”http://purl.org/uF/hCalendar/1.0/”>

Le W3C autorise plusieurs valeurs de profils, séparées par des espaces blancs, ainsi vous pouvez lister plusieurs profils si vous choisissez :

URL profil combinée, qui couvre tous les microformats non-draft :


article sur un BarCamp récent à Albuquerque où j’ai utilisé le microformat hCalendar :


class=”vevent”>


Oui, c'est un billet court, mais marquez ça dans vos agendas :


class=”url summary”>

class=”category”>BarCamp

Albuquerque 3

aura lieu ce week-end.



Quand :
class=”dtstart”

title=”2008-09-13T09:00:00″>13–

class=”dtend” title=”2008-09-14T18:00:00″>14 septembre,

à partir de 9h00 jusqu’à 18h00 les deux jours.



Où :
class=”location vcard”>

CJW Cafe

à 

  4801 Alameda

  Blvd

  NE

  ,

  Albuquerque,

  NM

   87113

  






Quoi :
class=”description”>

Un évènement de

class=”duration” title=”P2D”>deux jours  pour tout ce qui concerne le web — design (visuel, expérience, architecture de l’information), technologie (infrastructure, programmation), social et nouveaux médias, et d’autres trucs simplement vraiment cools.



Les Parties de la Somme
Décomposons cet exemple avec ses parties.
La Racine : vevent
Vous remarquerez que la propriété racine dans mon exemple est vevent, plutôt que vcalendar. Ceci parce hCalendar a un élément racine optionne du vcalendar, qui n’est obligatoire que si vous décrivez plus d’un calendrier d’événements sur une page donnée.
Pour une page avec un unique calendrier d’événements, la propriété vcalendar est présumée sur la page elle-même.
Le fait que mon exemple soit un événement unique dans un “calendrier,” unique, je place toute mon information d’événement dans 
. Ceci indique que tout le contenu embarqué à l’intérieur décrit un événement unique.
Une fois de plus, l’élément conteneur pourrait être n’importe quoi (
, , , , etc.) la 
 est simplement appropriée pour mon exemple.
Propriétés Requises : summary & dtstart
Les seules propriétés requises pour hCalendar (autres que la racine vevent) sont summary et dtstart.
summary
La propriété summary décrit un synopsis bref de l’événement. Le contenu embarqué par cette propriété est typiquement ce qui s’affiche dans un programme de calendrier sous le nom ou titre de l’événement.
Ainsi dans mon exemple, “BarCamp Albuquerque 3″ est contenu par summary, aussi c’est l’information qui s’affiche comme le nom/titre dans mon calendrier personnel :
Oui, c'est un billet rapide, mais à marquer dans vos agendas : 


class=”dtstart”

title=”2008-09-13T09:00:00″>13

–
title=”2008-09-14T18:00:00″>14 septembre,

de 9h00 à 18h00 les deux jours



Date/Time Design Pattern
Remarquez que l’élément contenant pour dtstart est un , là où l’information contenue est est “13″ et la valeur d’attribut title est “2008-09-13T09:00:00″:
<abbr class=”dtstart”

title=”2008-09-13T09:00:00“>13

–14 septembre,

de 9h00 à 18h00 les deux jours



C’est l’approche actuellement recommandée pour définir l’information date/horaire dans un microformat — connue sous le datetime design pattern (qui est une extension du abbr design pattern).
Ce pattern a été développé pour supporter l’un des principes fondamentaux des microformats : designer d’abord pour les humains, ensuite pour les machines. Visant pendant tout ce temps, à fournir une information qui soit à la fois lisible par les humains et par les machines.
La logique est que les machines — tout comme les applications web — utiliseront la valeur title, alors que les navigateurs afficheront pour les humains le contenu embarqué par .
Aussi, en tant que partie de la spécification pour utiliser ce “datetime pattern”, l’information date/horaire devrait être spécifiée dans un ISO 8601 :

AAAA-MM-JJThh:mm:ss — “A” représente les nombres entiers de l’année, “M” représente les nombres entiers du mois, “J” représente les nombres entiers du jour, “h” représente les nombres entiers des heures, “m” représente les nombres entiers des minutes et “s” représente les nombres entiers des secondes.
AAAA-MM-JJThh:mm:ssZ — “Z” est utilisé pour indiquer le GMT.
AAAA-MM-JJThh:mm:ss+hh (ou -hh) — les “+hh” et “-hh” indiquent le décalage horaire en heure  GMT.

Pour dire ça dans des termes un peu plus compréhensibles, 2008-09-30T13:00:00 = 30 septembre 2008, 13h00 (heure locale).
Le caractère “T” dans ces exemples sépare l’information de date de l’information d’horaire.
Si vous n’avez qu’une date, omettez simplement le “T” et l’information horaire le suivant. De même, si vous n’avez qu’un horaire, omettez le “T” et l’information de date le précédant.
Il existe néanmoins et hélas, quelques problèmes d’accessibilité avec ce pattern, problèmes que je décrirai plus tard dans cet article. A cette heure, continuons avec mon exemple.
Le Reste des Propriétés Date/Horaire
Il existe deux autres propriétés date/horaire (et optionnelles) que j’ai ajoutées : dtend et duration.
dtend
La propriété dtend décrit les date/horaire de la fin de l’événement. Dans mon exemple, “14 septembre”:


13

– class=”dtend”

title=”2008-09-14T18:00:00″>14 septembre,

de 9h00 à 18h00 les deux jours

duration
La propriété duration décrit la durée (en temps) de l’événement.

Dans mon exemple, deux jours :
Un évènement de class=”duration” title=”P2D”>deux jours pour tout ce qui concerne

le web — design (visuel, expérience, architecture de l’information), technologie (infrastructure, programmation), social et nouveaux médias, et d’autres trucs simplement vraiment cools.

Tout comme pour l’information de date/horaire, l’information de durée est spécifiée en utilisant le “datetime design pattern”, où l’information “lisible-par-les-machines” est indiquée par la valeur title et l’”information-lisible-par les-humains” est contenue par le .
Aussi, la valeur de “duration” title est spécifiée selon ISO 8601, qui indique que la valeur est précédée par un  “P” pour indiquer une période de temps.
Cette période de temps peut être exprimée en années (Y), mois (M), semaines (W), jours (D), heures (H), minutes (M) et/ou secondss (S).
Voici quelques exemples pour clarifier cela :

P2Y = durée de 2 ans
P10D = durée de 10 jours
P3H = durée de 3 heures
P2W = durée de 2 semaines weeks
P12DT8H30M = durée de 12 jours, 8 heures et 30 minutes

Parlons Accessibilité
J’ai rapidement évoqué dans la 3ème Partie qu’il y avait eu récemment quelques discussions sur les problèmes d’accessibilité avec le datetime design pattern.
Le point crucial du problème d’accessibilité est la façon dont les lecteurs d’écran interprètent les valeurs d’attribut title : ils les lisent/parlent.
Aussi, là où le datetime design pattern indique de mettre l’information ISO 8601 de date/horaire lisible par les machines  dans le title, un lecteur d’écran déclame littéralement la valeur.
Imaginez entrendre ça à chaque fois que votre lecteur d’écran rencontre  : “Deux mille huit tiret zéro neuf tiret trente.” Et c’est même encore pire pour les valeurs plus longues avec l’information sur l’horaire.
On peut soutenir que ceci n’est pas “human-friendly” pour ces utilisateurs.
A cette heure, ces problèmes n’ont pas été résolus. Il y a eu queques alternatives proposées, mais la communauté des microformats continue à discuter de la meilleure approche pour avancer afin de résoudre ces problèmes d’accessibilité et de rester cohérente avec l’esprit des microformats.
Pour moi et mon blog personnel, mes référents indiquent que je n’ai pas de visiteurs avec des lecteurs d’écran. Aussi, je ne suis pas préoccupée par l’implémentation du “datetime design pattern” sur ce blog.
Néanmoins, travaillant pour une grande entreprise, le manque d’accessibilité n’est tout simplement pas acceptable (pour moi et mon superviseur direct, même si je suis certaine que les “gros bonnets” pourraient moins s’en soucier).
Je suis désireuse de voir comment vont ces problèmes vont être résolus, de manière à ce que je puisse implémenter correctement l’information date/horaire en microformats et que cela puisse être encore supporté par tous les utilisateurs de lecteurs d’écrans.
Désormais, il est temps de revenir à l’exemple et des propriétés restantes utilisées …
Le Reste du Reste
Mon exemple comprend quatre propriétés supplémentaires (aussi optionnelles) : url, category, location and description.
url
La propriété url décrit un lien () pour l’événement :

Oui c'est un billet rapide, mais marquez vos agendas : 

Oui c'est un billet rapide, mais marquez vos agendas :



BarCamp Albuquerque 3

c’est ce week-end.

A la différence des propriétés évoquées plus haut, category peut utiliser un nombre illimité de fois. Quelques exemples communs de valeurs de category sont :

Rencontre
Expo
Vacances
Anniversaire
Conférence

Dans un certain sens, category est un moyen de “taguer” l’événement. Aussi, si j’avais choisi de marquer mon exemple pour y inclure un lien vers le site principal du BarCamp, j’aurais aussi utilisé microformat rel-tag pour accompagner category :
Vous pourriez vous demander ce qu'est un


class=”category” rel=”tag”>BarCamp ?


Souvenez-vous, rel-tag ne peut être uniquement utilisé que sur des liens ().

location
La propriété location décrit où aura lieu l’événement.


class=”location vcard”>
href=”http://www.chefwhite.com/cjw_cafe.php”>CJW Cafe

 au 

4801 Alameda

Bd

NE

,

Albuquerque,

NM

87113


Dans mon exemple, je fournis le nom du lieu et son adressse. Néanmoins, ce peut être tout simplement le lieu, ou juste l’adresse ; les deux ne sont pas requis. 
description
Pour finir, la propriété description décrit un synopsis plus détaillé de l’évènement que summary :


class=”description”>Un évènement de

deux jours

pour tout ce qui concerne le web — design (visuel, expérience, architecture de l’information), technologie (infrastructure, programmation), social et nouveaux médias, et d’autres trucs simplement vraiment cools.


Ce Que Je N’ai Pas Ajouté
Il existe plusieurs autres propriétés souvent utilisées pour hCalendar que j’ai choisies simplement de ne pas ajouter à mon exemple : 

dtstamp indique les date/horaire à laquelle l’information hCalendar a été créée.
last-modified indique les date/horaire à laquelle l’information hCalendar a été mise à jour.
status indique la confirmation d’événement. Les valeurs autorisées sont “cancelled,” “confirmed” et “tentative.”
class indique la classification d’événement. Les valeurs autorisées sont “private,” “public ” et “confidential.”
rrule indique la récurrence régulière d’un événement. Si cette propriété est utilisée, elle a une sous-propriété obligatoire de freq pour indiquer la fréquence de la récurrence, qui est spécifiée plus en profondeur par des qualifiants (à savoir, count, interval).
rdate indique des événements qui arrivent irrégulièrement. La valeur title renvoie les dates irrégulières (séparées par des virgules).

Et il en existe encore d’autres qui peuvent être utilisées. Regardez les exemples hCalendar sur le wiki pour plus de détails.
hCalendar + hCard
Peut-être que vous avez remarqué que mon marquage hCalendar comprenait des propriétés et sous-propriétés hCard :


3^ème Partie, combiner les microformats est facile, et là où cela produire du contenu contextuel, cela ajoute plus de valeur sémantique au contenu (et vous savez ce que j’en pense).
Pour aller plus loin, cela donne à l’utilisateur juste quelques autres types de données qui peuvent être extraites et utilisées, comme une vCard pour son carnet d’adresses.
Dans cet exemple, la propriété location du hCalendar fait sens pour être aussi marquée avec vcard. Même si je n’ai fait que rajouter la ville, j’aurais pu encore ajouter les propriétés/sous-propriétés de hCard.
Langage Naturel
J’ai parlé aussi d’utiliser les microformats en langage naturel (dans le flux de phrases normales) dans la 3ème Partie, et hCalendar ne fait pas exception à ce concept.
Vous remarquerez que dans cet exemple, quelques informations du hCalendar sont directement dans le flux de mon contenu.
J’aurais pu mettre toute l’information du hCalendar dans des phrases naturelles plutôt que de “découper” quelques-uns des détails dans des 
 :

class=”vevent”>




Oui, c'est un billet rapide, mais à marquer dans vos calendries :


class=”url summary”>

class=”category”>BarCamp Albuquerque 3 c’est ce week-end,

class=”dtstart” title=”2008-09-13T09:00:00″>13

–

class=”dtend”

title=”2008-09-14T18:00:00″>14 septembre, de 9h00 à 18h00

class=”duration” title=”P2D”>les deux jours.


class=”description”>Ce BarCamp de l’année traitera de tout ce qui concerne le web : design (visuel, expérience, architecture de l’information), technologies (infrastructure, programmation), social et nouveaux medias, et d’autres trucs qui sont tout simplement vraiment cools.


class=”location vcard”>

CJW Cafe

(sur 

4801 Alameda

Blvd

NE

, Albuquerque,

NM

87113



) sera notre hôte pour l’événement.




Ajouter à votre Calendrier
Aussi sur l’article BarCamp Albuquerque 3, je fournis un lien aux utilisateurs pour qu’ils puissent ajouter l’événement à leurs programmes de calendrier :

Ce lien pourrait être une URL directe vers n’importe quel fichier iCalendar (à savoir, .ics, .ical, .ifb, .icalendar) avec votre information d’événement. En ce qui me concerne, j’ai utilisé le Service de Fils d’Evénements de Technorati.
En utilisant la technologie de Technorati, vous faites précéder simplement l’URL de la page où réside votre microformat avec http://feeds.technorati.com/events/, et puis utilisez l’URL résultante comme la valeur href de votre lien () :

CSS que vous utilisez pour styliser votre information hCalendar est uniquement dédiée à la présentation (pas pour dire que ce n’est pas important).

Je recommanderais néanmoins d’utiliser les valeurs class qui sont requises par hCalendar dans votre CSS, plutôt que d’ajouter de nouvelles classes pour le style. Ceci vous donne simplement une CSS plus maigre.
Pour un exemple sur la façon dont vous pouvez styliser un calendrier d’événements, jetez un oeil au superbe travail de Jeremy Keith qu’il a produit pour des calendriers en cascade.
Pour finir, vous pouvez produire tout ce que votre coeur désire. La présentation de votre hCalendar ne se limite qu’à vos talents en CSS.
Pourquoi s’en Soucier ? Les Avantages, Bien Sûr
Bien qu’ayant déjà traité des avantages dans cette série d’articles, ils valent toujours la peine d’être répétés, … essentiellement parce que les microformats sont si simples à mettre en oeuvre et qu’ils offrent tant de potentiels.
Je souhaiterais que plus de personnes les connaissent et les utilisent. Cela aiderait à accroître le nombre d’outils et d’applications qui les utilisent.
Une Fois de Plus : Sémantique
Oui, la sémantique. Vous devez croire que c’est mon concept favori. Oui, vous auriez raison.
Les microformats prennent les standards existants, comme les éléments XHTML, et ajoutent encore même plus de valeur sémantique au contenu qu’ils contiennent. Ceci aide de mon point de vue les auteurs web à créer de meilleurs sites qui deviennen t plus utilisables et accessibles tant pour les humains que pour les machines (comme les moteurs de recherche).
Pour aller plus loin, le fait d’adopter la sémantique (même sans microformats, mais dans le marquage en lui-même) fait partie du support des standards ; des moyens standardisés de développer des sites. Ceci profite non seulement aux utilisateurs (et ceci concerne aussi les machines), mais assi aux designers/développeurs et aux équipes. Cela profite à tous.
Et, une fois de plus, ces approches posent une fondation (sémantiquement riche) pour Le Web Sémantique, tout en nous permettant simultanément de tirer profit du web et des technologies d’aujourd’hui.
Cool Shit
Je comprends tout à fait que la sémantique et les standards relèvent pour certains de discussions philosophiques. En fin de compte, soit vous “captez” ou non.
Si vous êtes dans le dernier camp, considérez quelques-uns des outils plutôt cools et utiles disponibles aujourd’hui qui savent tirer profil du microformat hCalendar.
Extensions Navigateur
Il existe tout un paquet d’outils navigateurs qui extraient l’information hCalendar provenant d’une page web de façon à pouvoir l’exporter et l’utiliser dans des applications qui supportent iCalendar.

L’extension Operator pour Firefox extrait l’information hCalendar et vous permet de l’ajouter dans votre application préférée de gestion de calendrier (elle fait de même avec l’information hCard pour votre carnet d’adresses) :


Aussi pour Firefox, l’extension Tails Export détecte l’information hCalendar (tout comme pour hCard) et l’extrait pour l’exporter dans votre application de calendrier : 
 


Le plugin microformats pour Safari fonctionne comme les extensions Firefox, en extrayant pour vous l’information hCalendar (et hCard) afin de l’ajouter à votre programme de calendrier.
Le bookmarklet microformats extrait lui aussi l’information hCalendar que vous pouvez exporter dans votre application de calendrier :


Autres Services

X2V de Brian Suda est une feuille de style XSLT qui extrait l’information hCalendar provenant d’une page web pour créer un fichier iCalendar .ics.
Technorati offre un moteur de recherche de microformats qui indexe l’information microformatée (hCalendar, hCard et hReview) provenant d’URLs proposées et rend cette information disponible pour la recherche.
Elias Torres a créé un script Greasemonkey hCalendar + Google Calendar Reminders qui identifier l’information hCalendar sur une page web et fournit une icône pour ajouter cet événement à votre Calendrier Google.
Un autre script GreaseMonkey de Les Orchard vous permet de modifier les champs de formulaire texte de Firefox pour devenir des générateurs hCalendar : Magic Microformat Forms.

Il existe encore plein d’implémentations hCalendar que je n’ai pas mentionnées.
Pression Par les Pairs
Si ces ressources ne vous ont pas fait tourner la tête, alors peut-être qu’un peu de pression par les pairs le fera. Bon nombre de services leaders aujourd’hui utilisent hCalendar (et d’autres microformats) :

Le site d’événement de Yahoo, Upcoming utilise hCalendar, de façon à ce que pendant que les utilisateurs naviguent dans les événements, ils puissent aussi les importer dans leurs applications de gestion de calendrier.
MapQuest Local supporte aussi hCalendar, tout comme les microformats hCard et celui de géolocalisation.
TripIt utilise le marquage hCalendar pour ses itinéraires.
Last.fm utilise hCalendar pour ses annonces de concerts.
Le géant du réseau social, Facebook, utilise hCalendar pour l’information d’événements.

Et il existe encore plus d’exemples hCalendar dans la jungle…
Bon, vous savez que vous voulez y aller. Essayez tout simplement. Croyez-moi, vous aimerez.
Outils pour une Production Plus Facile
Aussi, si j’ai pu parvenir à vous “vendre” les microformats, vous pourriez être ravi(e) de savoir qu’il existe quelques outils qui vous faciliteront la vie pour les implémenter (à l’inverse du codage à la main, sans mentionner le fait de se rappeler de toutes les propriétés/sous-propriétés) :

Le hCalendar Creator est un formulaire qui génère du marquage hCalendar et les propriétés/sous-propriétés que vous lui proposez. Copiez et collez. Ne pourrait pas être plus simple.
Pour Textpattern, vous disposez du plugin pnh_mf et de JMC_Event_Manager pour ajouter du contenu microformaté à votre site/blog Textpattern.
WordPress a aussi quelques plugins qui aident les auteurs web à ajouter des microformats à leurs blogs/sites WordPress : Structured Blogging (aussi disponible pour MovableType) et WP-Microformats.
Grâce à WaSP, il existe une extension microformats pour Dreamweaver conçue pour DW 8, MX et au-dessus.
Le Conference Schedule Creator vous aide à créer un programme complet de conférence avec tous les événements marqués avec hCalendar.

A venir en 5ème Partie
Voilà c’est tout ce que j’ai pour hCalendar (est-ce assez ?).
La prochaine fois, dans Parvenir à la Sémantique avec les Microformats, 5ème Partie, je vous emmènerai en détail sur le microformat hAtom pour le contenu syndiqué comme les billets de blogs.
D’ici là …
♥ Share the Love

♥  Delicious
♥  Digg
♥  Ma.gnolia
♥  StumbleUpon
♥  Design Float
♥  Reddit

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 1^er octobre 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



Emily Lewis : “Parvenir à la Sémantique avec les Microformats, 3ème partie - hCard”
Christophe Ducamp — Sat, 18 Oct 2008 11:47:15 +0000

J’ai démarré cette série d’articles en détaillant les microformats pour les relations fondées sur les liens en utilisant l’attribut rel dans la 1^èrePartie. Puis j’ai poursuivi dans la 2° Partie par une discussion sur l’extension de l’attribut rel avec les valeurs XFN pour connoter les relations sociales sur le web.
XFN et les microformats fondés sur rel sont relativement simples, n’exigeant que l’ajout de l’attribut rel sur les liens () et la(es) bonne(s) valeurs pour fournir le contexte sémantique.

Il est désormais temps de porter cette discussion sur les microformats à un niveau plus détaillé avec le microformat hCard, qui ajoute de la sémantique et de la structure au contenu web traitant des personnes, organisations, sociétés et lieux.
(Mettez-vous à l’aise, c’est long.)
Origines : vCard
vCard est un standard pour les cartes de visite électroniques, qui sont le plus souvent attachées en pièces jointes aux courriers électroniques sous forme de fichiers avec l’extension “.vcf”. Tout comme les cartes de visite traditionnelles, les vCards contiennent de l’information sur le nom et le contact.
La hCard a été présentée comme un format standard pour permettre aux auteurs du web d’inclure l’information vCard au sein de leurs pages web.
hCard utilise une représentation 1:1 de la vCard. Ce qui veut dire que le contenu web marqué avec le format hCard peut être converti en vCards par les spiders et autres agrégateurs, et peut être utilisé dans n’importe quelle application ou service vCard.
Personnes, Organisations, Sociétés & Lieux
Le microformat hCard représente des personnes, organisations, sociétés et lieux — le plus souvent en termes d’information adresse/contact, y compris mais non limité à :

Nom formaté/structuré
Adresse postale/distribution
Adresse e-mail
Numéro(s) de téléphone
Photographie

Parmi toutes les informations qui peuvent être incluses dans hCard, la seule information obligatoire est le nom formaté. Tout le reste est optionnel.
Et hCard, comme tous les microformats, utilise un marquage et des attributs existants pour spécifier cette information adresse/contact, et tout particulièrement différentes valeurs de classe, qui sont renvoyées sous des “propriétés” et “sous-propriétés.”
Une Personne, à Savoir Moi
L’une des premières implémentations hCard sur A Blog Not Limited est pour mon information personnelle de contact sur ma page About :

class=”vcard”>




Emily

Paige

Lewis




href="mailto:emily@ablognotlimited.com">

emily@ablognotlimited.com






Albuquerque,

NM



87106



USA








A Blog Not Limited








La première chose à considérer sur l’exemple ci-dessus est que tout le balisage et le contenu sont contenus dans une 
 déclarée class="vcard".
L’élément contenant pourrait être n’importe quoi (
, 
, , etc.), tant que cela reste de la syntaxe valide et de préférence sémantique.
Ce qui est essentiel c’est class="vcard".
“Mais le microformat s’appelle hCard … quel rapport avec la propriété vCard ?” me direz vous.
Bon, ceci s’explique par la représentation 1:1 de la vCard. Toutes les propriétés spécifiées hCard (les valeurs class) sont fondées sur les noms des propriétés type vCard.
Acceptez ça et avançons.
Information d’Identité Personnelle
En divisant l’exemple dans ses différentes propriétés, commençons par celles qui m’identifient personnellement, comme mon nom. Vous pouvez constater que mon information de nom est contenue dans 
 :
class=”fn n”>

Emily

Paige

Lewis




La propriété fn indique que le contenu contenu à l’intérieur est une chaîne correspondant au nom de la personne, comme pourriez le voir sur une plaque nominative. Comme je l’évoquais précédemment, c’est une propriété obligatoire dans le microformat hCard.
La propriété n indique que le contenu à l’intérieur contient les parties du nom d’une personne, comme le prénom, le deuxième prénom et les noms de famille.
Bien que la propriété n soit requise par la spécification, elle peut être implicite (ce qui veut dire, non spécifiée), si le contenu regroupé par la propriété fn fait exactement deux mots. Le wiki Microformats explique en détail cette optimisation implicite.
Il existe quelques autres propriétés d’identification que je pourrais inclure si j’étais encline à faire ainsi :

class="nickname" indique le pseudo/nom de guerre d’une personne, et s’applique à un élément contenant le texte de ce pseudo.
class="photo" indique une photo associée à une personne, et s’applique à un élément  faisant référence à l’URL de la photo (via src). Cette propriété pourrait être aussi appliquée à un élément  référençant l’URL de la photo via l’attribut data (bien que ce soit pour moi une option non-sémantique).
class="bday" indique une date de naissance d’une personne, et s’applique à un élément contenant l’information de date.

Aparté : Les Dates
Je devrais mentionner que quand on arrive à l’information de date, celle-ci est souvent marquée avec de l’information à la fois lisible par les humains et par les machines. Ceci s’appelle le datetime design pattern.
Sans rentrer trop dans les détails (parce que je traiterai cela en profondeur avec microformat hCalendar dans la 4^ème partie de cette série), voici un exemple sur la façon dont l’information de date est communément référencée dans les différents microformats :

title=”1974-09-04″>4 Septembre 1974




>Remarquez que ce qui est contenu par le  est de l’information-date-lisible-par-les-humains, alors que la valeur title est de l’information de date lisible–par–les–machines.
L’utilisation de l’élément  pour l’information de date (l’abbr design pattern), a cependant soulevé quelques  problématiques d’accessibilité.
Une fois de plus, je traiterai cela plus en détails dans la 4ème partie, mais ce qui a été proposé pour contourner ces problématiques est d’utiliser un élément  avec une valeur title plutôt que . (Je traiterai aussi des problématiques d’accessibilité plus en détail en conclusion de cette série.)
Sous-Propriétés
Ainsi, pour revenir à l’exemple sur ma page About …
Beaucoup de propriétés hCard ont des sous-propriétés pour fournir encore plus de contenu. Dans mon exemple, je marque le contenu dans 
 avec des s référençant les sous-propriétés :


class=”given-name”>Emily

class=”additional-name”>Paige

class=”family-name”>Lewis



Mon premier prénom est indiqué par class="given-name".
Mon second prénom est indiqué par class="additional-name".
Mon nom de famille est indiqué par le class="family-name".

Parmi ces trois sous-propriétés, given-name et family-name ne peuvent être  seulement utilisées qu’une fois par vcard, alors que la sous-propriété additional-name peut être utilisée plusieurs fois.
Et il existe deux sous-propriétés supplémentaires que j’aurais pu inclure :

class="honorific-prefix" indique les préfixes du nom (par ex. M., Dr.), et qui s’applique à un élément contenant le texte de ce préfixe.
class="honorific-suffix" indique les suffixes du nom (par ex. MD, PhD), et s’applique à un élément contenant le texte de ce suffixe.

Comme additional-name, ces deux sous-propriétés peuvent aussi être utilisées plusieurs fois.
E-mail & Téléphone
La prochaine partie de l’exemple est mon adresse e-mail dans  :



;class=”email”

href=”mailto:emily@ablognotlimited.com”>

emily@ablognotlimited.com




Attribuer la propriété email à mon lien () indique que la valeur href est mon adresse e-mail. Le contenu regroupé par le  pourrait être n’importe quoi. J’ai simplement choisi d’afficher la véritable valeur de mon adresse e-mail.

La propriété email peut être utilisée plusieurs fois. Dans ces cas, la sous-propriété type peut être ajoutée pour savoir quelle adresse parmi les multiples e-mails est la préférée (”pref”):

class=”email”

href=”mailto:test1@test.com”>

preferred email






class=”email”

href=”mailto:test2@test.com”>alternate email







Je pourrais aussi inclure une autre propriété, tel, qui indique un numéro de téléphone d’une personne (via la sous-propriété value). La propriété tel a une sous-propriété type pour indiquer le type de numéro (par exemple home, work, fax) :
class=”tel”>

class=”type”>Work :

class=”value”>555-123-4567




La sous-propriété type est complètement optionnelle. Si vous avez choisi de l’omettre, la valeur par défaut est “voice.”
La propriété tel peut être utilisée plusieurs fois, comme le peut type. La sous-propriété  type peut aussi indiquer “pref” pour afficher si c’est le numéro de téléphone préféré.

class=”tel”>

class=”type”>Work

(pref

erred):

555-123-4567






class=”tel”>

class=”type”>Home

 :

555-789-0123







Pour finir, la sous-propriété value peut être implicite. Si un type est spécifié sans qu’aucune  value ne soit spécifiée, alors tout autre propriété autre que type dans la propriété tel est considérée comme la value.
Information d’Adresse
La prochaine partie de l’exemple inclut mon adresse regroupée sous un 
 :
class=”adr”>

class=”locality”>Albuquerque,

class=”region” title=”Nouveau Mexique”>NM

class=”postal-code”>87106

class=”country-name” title=”United States of America”>USA




La propriété adr indique les parties d’une adresse, que je décris par des s assignés aux différentes sous-propriétés de l’adresse :

La ville est indiquée par class="locality".
L’état est indiqué par class="region". Cette sous-propriété pourrait s’utiliser pour les provinces.
Le code postal est indiqué par class="postal-code".
Le pays est indiqué par class="country-name".

Remarquez que pour mon country-name, j’ai utilisé l’élément  pour une référence plus courte vers mon pays, avec le nom complet inclus dans le title. J’aurais pu tout aussi bien écrire le nom complet et contourner complètement l’e. Juste une question de préférence (même si j’encourage vivement à la concision sémantique).
Pour des détails d’adresses encore plus précis, je pourrais aussi ajouter :

class="street-address" pour mon adresse de rue
class="extended-address" pour ajouter le numéro de mon appartement
class="type" pour indiquer le type d’adresse (par ex. home, work)

Aparté : address
Mais attendez ! Qu’en-est-il de la sémantique ? Pourquoi ne pas utiliser l’élément 
 comme le conteneur principal, plutôt qu’un  ?
En fait, jusqu’à ce que j’écrive cet article et fasse la recherche, j’ai découvert que j’utilisais 
 de manière incorrecte depuis des années. J’avais toujours pensé que c’était littéralement pour les adresses physiques, comme dans cet exemple précis.
J’avais tort.
Selon le W3C, l’élément 
 est :

… employer l’élément ADDRESS pour fournir les informations de contact du document ou d’une partie essentielle de celui-ci, comme un formulaire.

Compte tenu de cela, ce n’est tout simplement pas le bon élément à utiliser.
Information sur le Site Web
La dernière partie de mon exemple contient mon URL de blog dans  :



class=”url”>

A Blog Not Limited


La propriété url indique que le lien () destination (href) se fait vers un site web associé à moi. Bien que je sois en train de référencer mon blog, ceci pourrait être aussi un lien vers mon portfolio design ou toute autre URL m’étant associée.
Quelques trucs à remarquer concernant la dernière partie de l’exemple :

En restant engagée avec les microformats fondés sur le rel, je me suis aussi assurée d’inclure rel="home me". Remarquez la facilité de combiner les microformats ?
Le lien est contenu dans un , ce qui est tout simplement un paragraphe auquel j’ai déclaré une classe personnalisée pour supprimer l’affichage de l’information parce que je ne pense pas qu’il soit nécessaire de l’afficher dans cette situation spécifique. Sans tenir compte du fait que cela n’a rien à voir avec le microformat hCard.

Produit Fini
Après cette explication exhaustive du marquage, voici à quoi cela ressemble :

Et du fait que hCard n’utilise que du XHTML standard, elle peut être stylisée de n’importe quelle façon comme il vous plaira.
Si vous n’avez pas déjà compris, j’ai choisi une esthétique plutôt minimaliste, aussi j’en suis arrivée virtuellement à aucun autre stylisme que l’utilisation du class="nonVisual" pour supprimer l’affichage de quelque contenu.
Mais pour voir un exemple de ce que vous pourriez produire, Chris Coyier a récemment posté une Carte de Visite Professionnelle en Microformats, qui utilise le marquage hCard avec une très belle CSS pour imiter une carte de visite traditionnelle imprimée.
Les possibilités ne se limitent qu’à vos talents en CSS.
Ajouter au Carnet d’Adresses ?
Vous voyez dans mon exemple qu’immédiatement après mon contenu hCard, j’offre un lien vers “Ajouter à votre Carnet d’Adresses.” C’est tout simplement un lien vers le fichier vCard qui peut être téléchargé et ajouté à un programme de gestion de carnet d’adresses.
Vous pouvez offrir facilement un lien direct vers le .vcf que vous créerez et maintiendrez sur votre serveur, ou vous pouvez tirer profit du Service Contacts de Technorati.
En utilisant la technologie de Technorati, vous faites simplement précéder l’URL de la page où votre microformats hCard réside avec http://feeds.technorati.com/contacts/, et puis utilisez l’URL résultante comme la valeur href pour votre lien ().




href="http://feeds.technorati.com/contact/http://www.ablognotlimited.com/about/”

title=”Téléchargez la vCard”

>Ajouter au Carnet d’Adresses




Quand un utilisateur sélectionne ce lien, la vCard est créée dynamiquement et il peut alors la télécharger :

Quelques Règles & Un Rappel
Maintenant que j’en ai terminé avec mon premier exemple de hCard, il est nécessaire de faire remarquer quelques règles :

Les noms de propriétés et de sous-propriétés sont sensibles à la casse.
La “racine” vcard ne peut pas être mélangée avec n’importe laquelle de ses propriétés. Par conséquent, class="vcard fn" est invalide.
Les propriétés ne peuvent pas être combinées avec les sous-propriétés. Par conséquent, class="tel value" est invalide.

Pas si mal non ? Je veux dire, allez les microformats sont standards. Bien sûr il y a quelques règles.
Et n’oubliez pas : Ce n’est pas intrinsèquement un problème de marquage quand on parle de microformats. Cela concerne les valeurs de classe et différents attributs de marquage — propriétés et sous-propriétés.
Vous pouvez utiliser presque tous les éléments (X)HTML que vous voudrez et faire que les microformats soient encore valides si vous déclarez proprement les propriétés et sous-propriétés.
Bien sûr, si vous vous souciez de comprendre la sémantique des microformats, vous devriez aussi comprendre le marquage sémantique.
N’oublions Pas le Profil
Tout comme je le mentionnais avec XFN, il est recommandé d’inclure le profil hCard dans le  des pages web qui incluent le microformat : 


profile=”http://www.w3.org/2006/03/hcard”>


le W3C autorise plusieurs valeurs de profil, séparées par un espace blanc, ainsi vous pouvez avoir à la fois les profils pour hCard et XFN :

profile=”http://gmpg.org/xfn/11

http://www.w3.org/2006/03/hcard”>


 Mise à jour :
J’ai récemment découvert qu’il existe un profil combiné pouvant être utilisé pour tous les microformats-non-draft, plutôt que de lister plusieurs profils dans le  d’un document :



Aussi si vous utilisez un microformat unique sur une page, vous pouvez utiliser ce profil combiné si ce microformat est non-draft. Néanmoins pour les microformats-draft (en projet), vous devez spécifier le profil pour ce microformat particulier.
A cette heure, tous les microformats discutés dans cette série (à l’exception de rel-home) sont “non-draft”.
A nouveau, comme je l’ai déjà abordé eu égard à XFN, je maintiens mon  dans une inclusion globale, ainsi il y est fait référence sur l’ensemble du site A Blog Not Limited. Néanmoins, tel que cela se révèle, ceci est requis, parce que j’utilise le microformat hCard sur presque toutes les pages de mon site (dans le pied de page).
Ce qui suit très joliment dans la prochaine partie de cet article …
hCard en Langage Naturel
Il y a de ça un moment, j’étais tombée sur un article génial du brillant Jeremy Keith, qui suggère d’utiliser hCard en langage naturel.
En fait, il propose d’appliquer les propriétés et sous propriétés de hCard pour l’information de contact (par ex : nom, site web, email) qui apparaîtront dans le flux des phrases naturelles, à l’inverse du “découpage ” de l’information de contact d’une personne comme montré dans mon premier exemple.
Le concept est si simple et s’ouvre vraiment aux opportunités pour utiliser hCard. Aussi, ai-je décidé de l’utiliser dans mon pied de page sur A Blog Not Limited où j’ai quelques trucs me concernant :

class=”vcard”>

title="En savoir plus à propos d'Emily">La Personne la plus Cool que Je Connaisse





title="En savoir plus à propos d'Emily">


style="width:80px; height:80px;" class=”photo”

alt=”Emily Lewis” />




Yeah ce serait moi :

class=”fn email”

href=”mailto:emily@ablognotlimited.com”>Emily Lewis.


Je suis

class=”title”>web designer

 vit à

class=”adr”>

class=”locality”>Albuquerque,

class=”region”>New Mexico

 class=”postal-codenonVisual”>87106



class=”country-name nonVisual” title=”United States of America”>USA

, et suis une “standardista.”
Je suis spécialisée dans le

(X)HTML

 sémantique codé à la main et CSS

, concevoir des sites web accessibles, et l'écriture et optimisation du contenu web.





class=”url”>A Blog Not Limited est mon blog personnel où je pontifie sur le design web, les standards du web, la sémantique et tout ce qui m’entiche.




Les Différences
Mis à part le fait que le contenu hCard dans ce second exemple soit “dans la ligne” avec du contenu non-hCard, il y a quelques légères différences dans les propriétés et sous-propriétés hCard utilisées :

Je fais uniquement référence dans cet exemple à mon premier prénom et à mon nom de famille, aussi je n’utilise que class="fn". Souvenez-vous que la propriété n peut être implicite si le contenu fn fait exactement deux mots.
J’inclus mon titre de job dans la description, aussi j’ajoute class="title", qui est l’une des propriétés fournissant de l’information à propos de l’affiliation professionnelle d’une personne. Cette propriété indique le titre de mon job.
J’inclus une photo de moi-même, aussi j’ajoute class="photo" à .

Néanmoins, ces différences avec le premier exemple n’ont rien à voir avec le fait que j’utilise la hCard en langage naturel. Ce n’étaient simplement que les valeurs appropriées à utiliser avec le contenu dans cet exemple spécifique..
Combiner hCard & XFN
Comme je le mentionnais, ce concept de hCard en langage naturel fournit tellement plus de contextes dans lesquels la hCard peut être utilisée. Je l’ai déja appliqué à l’information à mon propos, mais je fais souvent référence à des amis et confrères dans mes articles … cela fait vraiment sens de marquer ces références avec hCard.
Et peu importe si je marque déjà ces références avec les valeurs XFN. L’une des meilleures choses à propos des microformats est qu’ils peuvent être facilement combinés.
Selon le contexte de la référence, j’utilise un marquage légèrement différent.
Dans les situations où je fais référence à un article/billet (tel que la référence au-dessus à Jeremy Keith), j’utilise  comme mon conteneur vcard :
 … le brillant



rel=”muse colleague”

class=”url fn”

title=”adactio.com”>Jeremy Keith

,

qui suggère d’utiliser 
title=”adactio : hCard en langage naturel”>hCard en langage naturel.




Et dans les situations où je fais simplement référence à la personne, j’utilise  comme mon conteneur vcard :



title=”jenschwedler.com” class=”url fn”

rel=”met colleague co-worker friend”>

Jen Schwedler




Pour finir, si je fais seulement référence à la personne par son prénom, j’utilise  le conteneur du nom formaté avec le nom complet comme valeur pour title :





class=”url” rel=”met colleague co-worker friend”>

Ian








Dans tous ces exemples, les différences de marquage reflètent simplement ma sémantique préférée. Les microformats hCard et XFN sont les mêmes :

propriété fn pour le nom
propriété url pour le site web
valeurs rel appropriées.

Et si j’avais de l’information supplémentaire à propos de ces types (comme un titre de job, un e-mail, etc.) je marquerais de la même façon ce contenu avec les propriétés/sous-propriétés appropriées.
Organisations & Sociétés
J’ai déjà rencontré des situations où je devais utiliser hCard pour décrire une société ou une organisation sur ce blog, et je voulais vraiment fournir un exemple sur la façon dont cela pourrait s’implémenter :

class=”vcard”>
class=”fn org”>Big Ass Blow-Up Dolls
class=”logo” style=”width:69px; height:69px;” alt=”Big Ass Blow-Up Dolls” />
class=”adr”>
class=”street-address”>

6969 Happiness Avenue,

class=”locality”>Los Angeles,

class=”region” title=”California”>CA

class=”postal-code”>69069



class=”tel”>
class=”value”>696-969-6969


class=”email”

href=”mailto:goodtimes@babud.com”>Envoyez-nous un e-mail




class=”url”

href=”http://www.babud.com/”>Visitez Notre Site Web





Comme vous pouvez le constater, la hCard pour les organisations/sociétés est en fait la même qu’elle l’est pour les individus. Les principales différences sont :

En plus de la propriété fn pour le nom, le nom de l’organisation se voit aussi déclarer la propriété org. Et avec les sociétés/organisations, vous n’utilisez jamais la propriété n.
Plutôt que photo pour l’, l’image associée est marquée avec la propriété logo.

Lieux
Ce que j’ai détaillé pour les sociétés et organisations serait la même approche pour les lieux. Vous référenceriez simplement le nom du lieu avec les propriétés fn org et appliqueriez toute l’information d’adresse comme je l’ai démontré au-dessus.
Voici un exemple de hCard en langage naturel pour un lieu : 


class=”vcard”>

Durant ma visite à class=”locality”>Atlanta

,

class=”region”>GA

,

je prévois de jeter un oeil au

class=”fn org”>

Centennial Olympic Park

.



Il y a quelques propriétés hCard spécifiques-aux-lieux qui sont particulièrement utiles pour les endroits (bien qu’elles ne soient pas uniquement limitées aux lieux) :

La propriété geo spécifie la position globale en utilisant deux sous-propriétés, latitude et longitude.
La sous-propriété latitude spécifie une valeur décimale qui indique la position verticale en relation avec l’équateur.
La sous-propriété longitude spécifie une valeur décimale qui indique la position horizontale en relation avec le premier méridien.

Parlons Avantages
Ainsi, maintenant que j’ai traité plusieurs exemples de hCard, il est temps de passer aux avantages.
Sémantique
Vous saviez que ça arriverait. Je l’ai déjà dit et le répéterai encore une fois :
L’usage des microformats ajoute de la structure et du sens au contenu web, le rendant à la fois lisible par les humains et les machines. Et tout cela avec des standards existants pour le marquage et les données.
Ceci encourage aussi le concept plus large de standards du web qui profitent à tous.
Partager l’Information de Contact
En utilisant hCard pour marquer l’information de contact, vous rendez automatiquement possible le fait que cette information soit convertie en une vCard téléchargeable, qui peut alors être utilisée par les programmes tels que Outlook de Microsoft et le Carnet d’Adresses d’Apple.
Vous pouvez utiliser le service de contacts de Technorati décrit précédemment, ou pouvez créer le vôtre et l’héberger sur votre propre serveur pour le téléchargement.
En outre, il existe plusieurs modules/extensions de navigateurs qui exportent automatiquement l’information hCard en vCards : 
Firefox
Operator 0.9.3 reconnaît le contenu hCard et offre aux utilisateurs une option pour exporter l’information sous une vCard pour utilisation dans leurs programmes préférés de gestion d’adresses :


Vous pouvez aussi voir la liste des options dans la capture d’écran, Operator utilise l’information hCard pour chercher sur d’autres sites web, comme Google Maps :

Tails Export 0.3.5 est une autre extension Firefox qui tire profit de l’information hCard pour l’export à l’intérieur d’autres programmes de carnet d’adresses :

Safari
Le plugin Safari Microformats est utilisé pour vous utilisateurs de Safari afin d’identifier les microformats hCard sur une page web et de la sauvegarder dans votre carnet d’adresses.
Je ne suis pas une fervente utilisatrice de Safari, et l’installation de ce plug-in fût bien trop boîteuse pour moi … aussi je ne l’ai pas installé et ne peux pas vous fournir de capture d’écran.
Bookmarklets
Le concept derrière le plugin susmentionné a été implémenté dans un bookmarklet microformats indépendant du navigateur, et je peux confirmer que c’est vraiment très beau :

Il existe aussi d’autres bookmarklets hCard.
Chercher
Le contenu web marqué avec des microformats a naturellement plus de sens. Ceci pourrait aider les moteurs de recherche à mieux évaluer le contenu que vous leur fournissez, et peut-être, augmenter votre classement dans les résultats des moteurs de recherche.
Il n’y a jamais de garanties quand on arrive à la recherche, mais le contenu de qualité dans le contexte est toujours un bon démarrage.
Au delà des résultats de recherche, bon nombre des moteurs de recherche sont en train d’implémenter hCard dans leurs propres applications et services :

Google a ajouté les microformats à sa Google Maps.
Technorati Microformats Search cherche les hCards et autres microformats, y compris hCalendar et hReview.
Yahoo! Local marque ses résultats avec hCard, tout comme avec hCalendar et hReview.

Réseaux Sociaux
Les sites de réseaux sociaux utilisent les microformats hCard pour marquer les pages profils avec l’information de contact des utilisateurs, tout comme celles des “contacts/friends/followers” des utilisateurs :

Twitter applique la hCard aux pages profil, tout comme celles des listes des “following” et “follower”.
ClaimID applique la hCard sur les profils publics des utilisateurs.
Last.fm applique la hCard sur les profils, qui comprend photo et url en plus de fn.

Et ce pour n’en citer que quelques-uns. Regardez la liste complète des services qui utilisent hCard.
Des Outils pour Vous Faciliter La Vie
Je serais négligente si je ne vous faisais pas ressortir quelques outils utiles qui peuvent vous aider à implémenter bien plus facilement hCard que de coder à la main et vous obliger à vous souvenir de toutes les valeurs (bien que j‘apprécie) :

hCard creator est un simple formulaire qui génère une hCard à partir de l’information proposée.
Le validateur microformat hCard vous laisse proposer une URL avec un contenu hCard, et puis valide les propriétés et sous-propriétés.
Il existe une anti-sèche hCard pour une référence rapide aux propriétés et sous-propriétés.

Il y en a Tellement Plus
Je suis entrée dans des détails vraiment spécifiques sur le microformat hCard. Mais il y en a bien plus encore que ce que j’ai pu mentionner.
Je vous encorage vivement à prendre un peu de temps et lire toutes les propriétés et sous-propriétés disponibles du microformat hCard, tout comme à voir quelques-uns des exemples de hCard dans la jungle.
A venir en 4ème Partie
Bien que ce fût un article long (qui en dit beaucoup considérant ma tendance normale à la verbosité), j’espère que cela a été intéressant et au moins utile pour vous.
Parvenir à la Sémantique Avec les Microformats, 4^ème Partie traitera du microformat hCalendar.
Restez branchés …

Tags Technorati :
hCard
microformats
rel-home
rel-me
semantics
standards
web design
XFN
XHTML

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 22 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



Emily Lewis : “Parvenir à la Sémantique avec les Microformats, 2ème partie - XFN”
Christophe Ducamp — Sun, 21 Sep 2008 06:06:31 +0000
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().

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



rel=”me”>Twitter


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  :



rel=”met colleague co-worker friend”>

Ian Pitts


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  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  est maintenu dans un fichier global include. Ceci me facilite la maintenance, en outre, au minimum le rel="me" apparaît sur toutes mes pages (dans les liens du pied de page vers mes pages profil Flickr, Delicious, iLike et Twitter ) :
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 :
 
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 :



title="XHTML Friends Network Friendly">XFN


 
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”
 
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 :
 
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 :
 
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é :

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 :
 
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 :
 
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



Emily Lewis : “Parvenir à la Sémantique avec les Microformats, 1° Partie : rel”
Christophe Ducamp — Sat, 20 Sep 2008 09:56:29 +0000

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 :



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  de mon XHTML, j’ai ajouté :



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":


rel=”home”>

A Blog Not Limited


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  d’un document . 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" :


rel=”home me”>

A Blog Not Limited


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.) : 




rel=”me”>Twitter


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 () 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 :




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 (), 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" :



title="Paternité-Pas d'Utilisation Commerciale-Pas de Modification 3.0"

rel=”license”>copyright


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 :

Yahoo! Creative Commons Search
Google “Usage Rights” search

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 : microformats, microformat, rel



Emily Lewis : “Parvenir à la Sémantique avec les Microformats - Introduction”
Christophe Ducamp — Sat, 20 Sep 2008 09:01:06 +0000
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

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 () :

rel=”home”>A Blog Not Limited
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 :

rel-home
rel-me
rel-tag
rel-license
XFN
hCard
hAtom
hCalendar

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 : hAtom, hCalendar,hCard,  microformats, microformat, rel, rel-home, rel-me, rel-tag, semantics, standards, webdesign, XFN, XHTML



Récemment dans les Microformats (édition de juillet)
Christophe Ducamp — Fri, 18 Jul 2008 04:56:02 +0000
‘Cette Semaine en Microformats’ est un résumé de l’activité des microformats extrait des listes de diffusion, du wiki des évenements et du plus grand web. Ce billet est une traduction en cours d’un billet de Ben Ward publié initialement le 4 juillet dernier et seul le lien original fait référence. Toute contribution francophone pour aider à localiser proprement ce site et raffiner les traductions demeurent toujours d’actualité. Les demandes spontanées d’implémentation des ufs sur les sites francophones étant de plus en plus nombreuses, j’imagine pouvoir lancer dès la rentrée scolaire une série de dîners dédiés sur le sujet ? Si vous souhaitez aider à soutenir la localisation du projet en français, n’hésitez pas à me laisser un message au +336 03 96 04 92. Bonne journée, xtof
Sur le wiki

Din Neville a travaillé dur cette semaine sur la mise à jour de la traduction en russe du wiki. Merci Din.
datetime-design-pattern contient de la documentation et des discussions sur les patterns alternatifs pour représenter les dates et heures. 
La page parseurs est devenue obsolète. J’aimerais aider à la mettre à jour avec des liens vers les parseurs actuellement disponibles, aide bienvenue ! 
Il existe une nouvelle page html5 pour suivre les changements en HTML5 qui impacteront les microformats (tant sur le plan positif que négatif). Non pas que toutes ces problématiques n’impactent pas le parsage, et ne le feront pas jusqu’à ce HTML5 soit stabilisé.

Sur les listes de discussion
Discuss et Dev ont été très occupées avec des discussions autour du pattern abbr datetime, beaucoup de choses là-dessus et les fils de discussion ont bien débordé.

Le coeur de ces discussions devraient être documenté sur le wiki dans la page sus-mentionnée durant le courant de la semaine. Les principaux fils

sont dans la page archive de µf-dev et la page archive de µf-discuss.
Autres discussions :

Impact de vCard 4 sur hCard

Sur le web

Rob Crowther a documenté comment utiliser le nouveau microformat API dans vos extensions Firefox 3 
Google a ajouté hCard dans Google Maps

Lustro est une application pour exporter le Carnet d’Adresses Mac OSX dans les hCards

vAddressBook est un hack pour exporter votre Carnet d’Adresses Yahoo! sous des hCards (avec des événements hCalendar pour les anniversaires)

Portable Social Networks, The Building Blocks Of A Social Web, un article de Ben Ward paru dans Digital Web Magazine. Qui aiderait à le traduire ?
L’outil XFN Life Stream de David Singleton affiche le réseau social distribué motorisé par les microformats
Sortie de Cognition 0.1 alpha 10. 
Yahoo! Search Monkey a un  forum de suggestions pour des demandes de fonctionnalités pour ses améliorations des microformats pour la Recherche. 
Mail Chimp a commencé par ajouter du balisage hCard dans le pied page des e-mails HTML envoyés par son service.

Une expérience intéressante d’utilisation des microformats en dehors du navigateur.
Ueli Weiss écrit un importateur de profil basé sur la hCard, vous permettant de pré-remplir les formulaires avec l’information de hCard, en donnant juste une URL.

Il y a aussi une démo disponible.
Kornel Lesinski a sorti un vérificateur de conformité hCard (validateur). Essayez le en utilisant microformateurs.org.

Ailleurs

Le 20 juin dernier, c’était le troisième anniversaire des microformats !
Des Dîners Hebdomadaires se mettent en place à San Francisco

Pour contribuer sur le prochain billet, éditez svp la page wiki. Merci !



Récemment dans les Microformats
Christophe Ducamp — Wed, 28 May 2008 05:41:00 +0000
‘Cette Semaine en Microformats’ est un résumé de l’activité des microformats en provenance des listes de discussion, du wiki, des événements et du plus grand web.
Sur le wiki

Nous avons documenté l’usage de données machine dans les microformats (formats de date et heure, lieux géographiques, mots-clés dans certains formats).  La page est une référence rapide pour tous les formats que nous spécifiions, toutes les méthodes supportées actuellement sur la manière d’embarquer de la donnée dans votre propre texte, d’une manière qui soit valide en HTML.

Sur la liste de diffusion µf-Discuss

Discussion sur la demande de la BBC pour aider à apprendre sur l’usage de lecteur d’écran.

Sur le web

AlloGarage permet de trouver un bon garage auto pour la réparation, le dépannage ou l’entretien de votre voiture. Les garages sont classés grâce aux avis d’autres internautes. Les microformats sont disponibles pour tous les profils des garages auto (format hCard+geo) et sur tous les avis publiés (format hReview). 
La BBC demande de l’aide pour trouver la façon dont les personnes utilisent des applications de lecteur d’écran pour lire des pages web à haute voix ; critique, s’ils doivent être paramétrés pour toujours lire l’attribut title des éléments abbreviation. SVP, faites part de vos réactions, cela aidera à l’amélioration.
Martin McEvoy a sorti TransFormr” : Un ensemble simple de XSLT et d’outils PHP pour Transformer les Microformats. (“Lisez l’introduction de Martin sur µf-discuss”)
Hi5 a ajouté le support de hCard et XFN pour ses listes d’amis.
Mahalo a ajouté les microformats aux pages de résultats de recherche.
Toluu a ajouté une fonction d’importation de profil basée-sur-hCard dans son processus d’enregistrement.

Dans le vrai monde

En Allemagne, Florian Beer a vu sa thèse sur les microformats publiée sous forme de livre ; Microformats – Semantik für jedermann
Le Microformats vEvent a eu lieu à Londres.

Pour contribuer au billet suivant, éditez svp la page wiki. Merci !



C’est quoi les Monkeyformats ?
Christophe Ducamp — Wed, 30 Apr 2008 22:59:55 +0000
Ce ne serait pas élégant si les navigateurs intelligents pouvaient reconnaître les adresses, les dates et autres données structurées figurant sur les pages web ? Et ce même quand les données ne sont pas structurées ? (tout comme le fait l’application Mail d’Apple qui reconnaît les dates et les heures en fournissant à l’utilisateur lambda une interface pour faire des choses simples comme savoir les ajouter à son agenda)…
Et bien disons qu’avec les monkeyformats d’Albert de Klein, on fait juste là un (grand) pas en avant. Amusez-vous par exemple à extraire les hCards sur les Pages Jaunes : essayé à l’instant sur une simple requête “Aston Martin” à Paris et ça fonctionne !. Bravo et merci Albert. - xtof
P.S. Ce qui suit en-dessous est une traduction en cours publiée sous FairUse de la page monkeyformats.org, seul lien de référence.

Albert de Klein : C’est quoi les Monkeyformats  ?
Les Monkeyformats sont des scripts utilisateurs Greasemonkey qui ajoutent un balisage sémantique dans le navigateur Firefox aux sites web ne supportant pas encore les Microformats. Vous pouvez alors exécuter des actions sur ces Microformats avec Operator ou toute autre extension similaire.
Vidéo Monkeyformats

Pourquoi avons-nous besoin des Monkeyformats ?
L’adaptation des microformats peut utiliser un boost dans le monde car cela fait du Web un plus bel endroit.  Les Monkeyformats permettent aux utilisateurs d’expérimenter les avantages des microformats sur des sites qu’ils utilisent tous les jours mais qui manquent à cette heure de balisage sémantique, et sans les contraindre à attendre que ces sites les ajoutent.  Même si nous n’en sommes encore qu’aux prémisses, il existe déjà plusieurs monkeyformats disponibles qui ajoutent des microformats à quelques répertoires téléphoniques nationaux en Europe, aux services de billetteries, etc.
Exemple de Monkeyformat
hCard


Directory
Pays
Installation
Auteur


Yellow Pages (Nouveau !)
US
Installer
Albert de Klein


Pagine Bianchi
Italie
Installer
Albert de Klein


British Telecom
Royaume-Uni
Installer
Thom Shannon


Das Telefonbuch
Allemagne
Installer
Albert de Klein


De Telefoongids
Pays-Bas
Installer
Albert de Klein


Pages Jaunes
France

Installer
Albert de Klein


hCalendar


Event listing
Country
Installation
Auteur


Ticketmaster.co.uk
Royaume-Uni
Installer
Albert de Klein


Lippupalvelu.fi
Finlande
Installer
Albert de Klein


Billettservice.no
Norvège
Installer
Albert de Klein


Ticnet.se
Suède
Installer
Albert de Klein


Billetnet.dk
Danemark
Installer
Albert de Klein


Ticketmaster.nl
Pays-Bas
Installer
Albert de Klein


Comment puis-je utiliser ces Monkeyformats ?
Tout d’abord, vous devez installer à la fois l’extension Greasemonkey et l’extension Operator dans votre navigateur Firefox. Puis vous pouvez essayer quelques-uns des scripts utilisateurs provenant du répertoire Monkeyformat en les installant et en visitant les sites web pour lesquels ces microformats ont été écrits. Dans la plupart des cas, les signaux d’Operator devraient s’allumer dans la barre d’adresses après que vous ayez éxécuté une recherche indiquant que les microformats ont été ajoutés à la page.  Puis vous pouvez par exemple envoyer ces hCards dans votre carnet d’adresses ou sur votre téléphone mobile.
Comment je crée mes propres microformats ?
Si vous voulez créer vos propres microformats, jetez un coup d’oeil aux scripts utilisateurs dans le repository. La plupart d’entre eux utilisent une combinaison de requêtes Xpath et de remplacements d’Expressions Régulières pour appliquer les microformats aux pages.  Pour quelques sites c’est relativement facile d’appliquer les classes des microformats car tous les éléments sont en place et vous n’avez qu’à ajouter les classes appropriées.  Dans la plupart des cas, vous devrez ajouter des éléments supplémentaires autour des adresses, des codes postaux ou des localités parce qu’ils ne sont pas entourés par des éléments à cette heure pour s’appliquer aux classes.  Parfois, vous devrez même ajouter quelques éléments imbriqués pour rendre possible la structure des microformats.
Si vous créez des monkeyformats, partagez les S.V.P. avec d’autres dans le repository Userscripts.org. N’oubliez pas d’ajouter le tag monkeyformats pour faciliter la recherche.
Qu’est-ce que Greasemonkey ?
Greasemonkey est une extension pour le navigateur Firefox qui peut modifier l’apparence des sites web grâce à Javascript du côté client.
Qu’est-ce qu’Operator ?
Operator est une extension pour Firefox qui vous permet d’exécuter des actions sur les Microformats grâce à JavaScript.
C’est quoi les Microformats?
Les microformats sont un ensemble divers de spécifications qui vous permettent d’ajouter un balisage sémantique dans les pages HTML en utilisant des attributs de classes pré-définis.
Pour en savoir plus
Le concept complet des Monkeyformats est vraiment tout nouveau.  Pour le moment, (et si vous savez lire le néerlandais) vous pourriez aussi jeter un oeil sur l’article que j’ai écrit pour Naar Voren, un magazine hollandais pour les travailleurs du web, dans lequel j’ai présenté le concept des Monkeyformats pour quelque information plus approfondie.
Amusez-vous avec le Web Sémantique !
Albert de Klein 

adeklein@gmail.com



Carsten Pötter : “MyBlogLog Présente les hCards”
Christophe Ducamp — Sun, 27 Apr 2008 10:18:18 +0000
Ce billet est la traduction d’un article publié par Carsten Pötter le 25 avril 2008. Seul le lien original fait référence. Cette traduction reste aussi ouverte aux raffinements sur un wiki-personnel. Cliquez sur ce lien pour éditer directement le code html.
Carsten Pötter : MyBlogLog Présente les hCards
MyBlogLog continue à impressionner les défenseurs des standards ouverts. Après avoir sorti les microformats comme  et XFN, MicroID et FOAF, ils ont annoncé hier soir l’ajout des hCards et des vCards aux profils de leurs utilisateurs.
vCards et hCards
Les profils présentent désormais deux nouvelles icônes : une pour les vCards et une pour les hCards :

En cliquant sur l’icône vCard (celle qui est la plus à gauche), la vCard peut être téléchargée sur un ordinateur et ajoutée au carnet d’adresses favori d’un utilisateur. En cliquant sur l’icône hCard, une page séparée affiche une information de profil :

Réglages d’intimité
Les personnes disposant d’un compte MyBlogLog savent qu’elle peuvent ajouter à leurs profils de l’information à caractère privé comme un numéro de téléphone.  Même si elles peuvent aussi décider que cette information soit publique, seulement par leurs contacts ou par personne. MyBlogLog a aussi ajouté ces réglages d’intimité aux informations figurant sur la hCard et la vCard. Ainsi si l’utilisateur décide que son numéro de téléphone ne doit seulement être affiché qu’à ses contacts, les autres personnes ne pourront pas accéder à cette information par la hCard ou la vCard. La même chose s’applique pour les services qui parsent les hCards.
C’est vraiment cool parce que c’est le premier service que je connaisse qui offre des réglages granulaires de l’intimité pour les hCards. Je suis certain que cette implémentation aidera aussi à réduire les craintes que l’information de contact ne devienne disponible sur le web sans le consentement des utilisateurs.
Bien joué ! 
Mots-clés :

hcard
microformats
mybloglog
vcard

Directory	Pays	Installation	Auteur
Yellow Pages (Nouveau !)	US	Installer	Albert de Klein
Pagine Bianchi	Italie	Installer	Albert de Klein
British Telecom	Royaume-Uni	Installer	Thom Shannon
Das Telefonbuch	Allemagne	Installer	Albert de Klein
De Telefoongids	Pays-Bas	Installer	Albert de Klein
Pages Jaunes	France	Installer	Albert de Klein

Event listing	Country	Installation	Auteur
Ticketmaster.co.uk	Royaume-Uni	Installer	Albert de Klein
Lippupalvelu.fi	Finlande	Installer	Albert de Klein
Billettservice.no	Norvège	Installer	Albert de Klein
Ticnet.se	Suède	Installer	Albert de Klein
Billetnet.dk	Danemark	Installer	Albert de Klein
Ticketmaster.nl	Pays-Bas	Installer	Albert de Klein

les microformateurs

Paris-Web 2008 : Atelier Microformats vs RDFa

RDFa vs Microformats

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

Origines : iCalendar

Activités Fondées sur Date/Heure

Les Bases

Le Profil

Les Parties de la Somme

La Racine : vevent

Propriétés Requises : summary & dtstart

summary

Date/Time Design Pattern

Le Reste des Propriétés Date/Horaire

dtend

duration

Parlons Accessibilité

Le Reste du Reste

url

location

description

Ce Que Je N’ai Pas Ajouté

hCalendar + hCard

Langage Naturel

Ajouter à votre Calendrier

Pourquoi s’en Soucier ? Les Avantages, Bien Sûr

Une Fois de Plus : Sémantique

Cool Shit

Extensions Navigateur

Autres Services

Pression Par les Pairs

Outils pour une Production Plus Facile

A venir en 5ème Partie

♥ Share the Love

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

Origines : vCard

Personnes, Organisations, Sociétés & Lieux

Une Personne, à Savoir Moi

Information d’Identité Personnelle

Aparté : Les Dates

Sous-Propriétés

E-mail & Téléphone

Information d’Adresse

Aparté : address

Information sur le Site Web

Produit Fini

Ajouter au Carnet d’Adresses ?

Quelques Règles & Un Rappel

N’oublions Pas le Profil

hCard en Langage Naturel

title="En savoir plus à propos d'Emily">La Personne la plus Cool que Je Connaisse

Les Différences

Combiner hCard & XFN

Organisations & Sociétés

Lieux

Parlons Avantages

Sémantique

Partager l’Information de Contact

Firefox

Safari

Bookmarklets

Chercher

Réseaux Sociaux

Des Outils pour Vous Faciliter La Vie

Il y en a Tellement Plus

A venir en 4ème Partie

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

Mettre un Visage Humain sur les Liens

Nous Sommes Tous Connectés

Comment Sommes Nous Connectés

Amitié/Familiarité

Physique

Professionnel

Géographique

Familial

Romantique

Identité Personnelle

Délibérément Simple = Efficace

Spécifier un Profil

Dites-le au Monde

La Racine : `vevent`

Propriétés Requises : `summary` & `dtstart`

`summary`

`dtend`

`duration`

`url`

`location`

`description`

Aparté : `address`