Emily nous encourage dans le dernier billet de sa série à implémenter le « modèle-de classe-value ». Pour mémoire, le modèle-classe-value est un modèle de design microformats qui résout désormais les problématiques d’accessibilité et de localisation.

J’ai inséré dans cette traduction un exemple de localisation d’une hCard avec domicile. La traduction reste ouverte à vos commentaires et corrections. Seul le lien original fait référence : URL raccourcie : http://ablognotlimited.com/s/106. Prochaine étape : implémentation sur ce site.

Non, vos yeux ne vous lâchent pas. Voici une autre contribution de ma série Parvenir Au Sémantique Avec Les Microformats (avec un remerciement spécial à Ben Ward pour son assistance technique) !

Cela fait environ six mois depuis la 7° partie, aussi vous pouvez vous demander pourquoi j’ai attendu si longtemps. Bon, disons que j’ai été occupée.

Mais même mon infâme calendrier ne pouvait m’empêcher de poster ce dernier billet, qui vient à la suite de l’annonce que le modèle-de-classe-value est officiel. Commençons la célébration !

Laissez-moi Rafraîchir votre Mémoire !

A moins que vous ne soyez une geek microformats comme moi, vous ne savez probablement pas ce qu’est le value-class-pattern ou le « modèle de classe value ».

Si vous avez suivi cette série et s’il vous est arrivé de lire mon article Microformats, hAccessibility & Moving Forward, vous en savez probablement plus que vous ne l’imaginez.

Mais ne me faites pas croire ça et vous restituer le contexte 411.

hAccessibilité

The Web Standards Project avait remarqué un problème d’accessibilité dans les microformats (défini "hAccessiblity") concernant le datetime design pattern.

Au coeur de ce problème, l’usage de abbr pour contenir une information de date lisible-par-les-humains, avec la valeur d’attribut title représentant la date lisible-par-les-machines ISO 8601. Cela ressemble à ça :

<abbr class="dtstart" title="2009-05-18">18 mai 2009</abbr>

Et quand c’est lui par un lecteur-écran, ce modèle de design fait que la date ISO 8601 se retrouve lue à l’utilisateur comme "deux zéro zéro neuf tiret zéro cinq tiret un huit." Ce qui est pire est quand la valeur ISO 8601 fait plus qu’une date, mais inclut aussi l’horaire comme dans cet exemple :

<abbr class="dtstart" title="2009-05-18T10:30:00">18 mai 2009 à 10h30</abbr>

Ceci donne une sortie dans le lecteur-écran : "deux zéro zéro neuf tiret zéro cinq tiret un huit T un zéro deux points trois zéro deux points zéro zéro."

La communauté pour l’accessibilité (à juste titre, IMO) soutenait que ce n’est pas accessible pour ces utilisateurs. Pendant ce temps, la communauté des microformats défendait que :

• les dates ISO 8601 sont en fait (sur toutes les cultures) lisibles par les humains;
• La valeur sémantique d’offrir des valeurs développées via abbr surpasse la problématique du lecteur d’écran
• Parce que la plupart des lecteurs d’écran n’ont pas développé de jeu.

Et ce débat pesait depuis des années.

Utilisabilité

Mais il n’y avait pas que l’hAccessibiliy qui était une déchirement du côté des microformats. C’étaient aussi les problèmes d’utilisabilité concernant le « modèle-de-design-date-horaire ».

Une fois de plus, le problème était la date ISO 8601 sous la valeur abbr title. Cette fois, le problème n’était pas lié à l’activité du lecteur d’écran, mais au comportement normal du navigateur. Vous voyez, la plupart des navigateurs affichent les valeurs abbr title sous forme de bulle d’aide pour l’utilisateur :

Seuls les plus geekies–des–geeks reconnaîtront probablement cette information. Pour tous les autres cela jette une (relativement petite) déchirure dans leur expérience de navigation. Et les parties lisible-par-les-machines des microformats sont supposées être invisibles pour l’utilisateur. Cet affichage de bulle d’aide n’est pas invisible et il peut être déroutant au quotidien pour les utilisateurs (non geeks).

Internationalisation

Une autre plainte souvent entendue sur les microformats est qu’ils ne sont pas "internationalisés." Ce qui veut dire, que quelques-unes des valeurs demandées par les microformats ne font sens que pour ces types qui publient en Anglais-Américain.

Imaginons que les valeurs type acceptées pour telephone dans la hCard : "cell" est la valeur requise à utiliser si vous indiquez un téléphone cellulaire. Les utilisateurs anglo-américains savent probablement ce qu’est un téléphone cellulaire, néanmoins, les lecteurs anglais et français appellent ces types de téléphones "mobile."

A nouveau, des questions d’utilisabilité.

Entrez dans le Modèle de Classe Value

Pour résoudre ces problématiques, la communauté des microformats a travaillé de façon diligente pendant un moment pour parvenir à la solution.
En fait, je me suis même essayé de publier et de tester à la main ce qui s’appelait initialement le « pattern-value-excerption ».

Et tout ce dur travail a finalement payé avec le modèle-de-classe-value, qui offre aux auteurs plusieurs options pour marquer leurs contenus sans avoir à se préoccuper des problématiques d’utilisabilité, d’accessibilité et de localisation mentionnées plus haut.

Information Date & Heure

Je viens de le dire, mais je le redirai : en utilisant le modèle-de-classe-value, les auteurs ont plusieurs options pour marquer l’information de date et d’horaire. Vous choisissez celle que vous aimez ; celle qui vous semble la plus pertinente pour votre contenu et vos préférences. J’en tremble rien qu’à y penser.

Tout d’abord, jetons un oeil à quelques-unes des options pour marquer l’information de date et d’horaire.

Vous Pouvez Encore Utiliser <abbr>

Le modèle de classe value n’abolit pas l’utilisation du modèle-de-design-abbr pour l’information date-horaire (AKA datetime design pattern). Si vous êtes du côté du "débat" qui pense qu’utiliser abbr avec les valeurs ISO 8601 de date et heure en title fait un sens sémantique, allez-y.

Avant que le modèle de classe value ne soit rentré dans la danse, voici comment vous pouviez marquer votre information date-heure pour dstart dans un hCalendar :

<abbr class="dtstart" title="2009-06-06T18:30:00">6 juin 2009 à 18h30</abbr>

Néanmoins, cette méthode est considérée comme dépréciée pour l’information date-heure. Les machines peuvent encore l’analyser, mais désormais avec le modèle-de-classe value, ce n’est plus la méthode recommandée.

Notez néanmoins que le modèle de design abbr en lui-même — pour les expansions de nom de pays, les coordonnées abrégées de latitude / longitude, etc. — est encore complètement valide. Ce n’est que pour l’information date-horaire que les choses changent légèrement.

Quels sont ces changements légers ?

<p class="dtstart"><abbr class="value" title="2009-06-06T18:30:00">6 juin 2009 à 18h30</abbr></p>

Remarquez que la sous-propriété dtstart est assignée au p contenant (qui peut être n’importe quel élément), alors que l’abbr est maintenant assignée au class="value". La valeur title ISO 8601 demeure la même.

Gardez à l’esprit cependant que cet exemple génère encore des problématiques d’accessibilité et d’utilisabilité derrière hAccessibility. Mais ce peut être la méthode préférée de quelques auteurs. La beauté du modèle de classe value est que vous pouvez choisir la méthode qui fonctionne le mieux pour vous.

Laissez Tomber le Modèle de Design Abbr

Si vous êtes soucieux des problématiques de lecteur d’écran et d’utilisabilité concernant le modèle de design abbr pour votre information de date-heure, le modèle de classe value est pour vous aussi, grâce au sous-ensemble value-title

Ainsi, au lieu d’utiliser abbr pour contenir le contenu lisible-par-les-humains avec la donnée machine dans l’attribut title, vous pouvez utiliser un élément span nommé class="value-title" et un attribut title contenant la date ISO 8601. Les machines reconnaissent alors que la valeur de la donnée pour cet élément (celle nommée class="value-title") devrait être extraite à partir du title, et non pas du texte à l’intérieur.

<p class="dtstart"><span class="value-title" title="2009-05-18T13:00:00">18 mai 2009 à 13h00</span></p>

Ceci réalise l’objectif des microformats pour des données humaines et machine, tout en ne provoquant pas l’affichage des infobulles dans le navigateur n’alertant pas les lecteurs d’écran de lire l’information machine sur la date. La plupart des navigateurs, néanmoins, afficheront encore la valeur en infobulle, l’exception étant Safari 3.0.3 sur Windows XP.

Séparer la Date & l’Heure

Pour démontrer plus en profondeur le niveau de flexibilité du modèle de classe value, vous pouvez aussi l’utiliser pour spécifier séparément la date et l’heure.

<p class="dtstart"><span class="value-title" title="2009-05-18">18 mai 2009</span> à <span class="value-title" title="13:00:00">1 heure de l'après-midi</span></p>.

A nouveau, dans cet exemple, j’ai laissé tombé l’usage du abbr et utilise l’approche span class="value-title". Mais cette fois, remarquez que j’ai spécifié séparément la date et l’horaire dans leurs propres éléments span class="value-title" (chacun avec l’information ISO 8601 appropriée dans le title). Les machines peuvent alors combiner les données séparées de date et d’heure à l’intérieur d’une valeur unique date-heure.

Et cette séparation de la date et de l’horaire peut être utilisée avec le modèle de design abbr. En fait, quelques types croient que cela aide à résoudre les problème d’utilisabilité avec les infobulles de date et d’heure. Spécifiquement, les infobulles individuelles résultantes pour la date et l’heure sont plus "utilisables" qu’une infobulle affichant la chaîne complète date-horaire :

Pour ces types, cette implémentation du modèle de classe value appliquée au modèle de design abbr est idéale :

<p class="dtstart"><abbr class="value" title="2009-06-06">6 juin 2009</abbr> à <abbr class="value" title="18:30:00">18h30pm</abbr></p>

Vous pouvez simplement définir séparément les valeurs de date et d’heure, chacune avec ses propres abbr class="value" et les valeurs title ISO 8601 appropriées.

Remarquez que je n’utilise pas le sous-ensemble value-title dans cet exemple. C’est parce qu’il ne devrait pas être utilisé avec le modèle de design abbr.

Au moment d’utiliser le modèle de classe value avec le modèle de design abbr, il est seulement nécessaire d’assigner class="value" à l’élément abbr. Les machines savent déjà comment extraire les date et heure ISO 8601 à partir de l’attribut abbr title, ainsi class="value-title" n’est pas nécessaire et invalide.

Sous-Ensemble Value-Title Avec <span>s Vides

Et il y a même encore une autre option à cette heure ; une qui élimine à la fois les infobulles et les expansions de lecteur d’écran.

Vous pouvez aussi utiliser l’approche class="value-title" avec un span vide … bon en fait pas vraiment vide. Un span contenant un seul espace blanc :

<p class="dtstart"><span class="value-title" title="2009-05-18T13:00:00"> </span>18 mai 2009 à 13h00</p>

Le résultat final est le même : les utilisateurs reçoivent une information compréhensible de date et d’horaire sur le navigateur et les machines reçoivent la date en ISO 8601. Et une fois de plus, pas de problèmes pour les lecteurs d’écran. Mais cette fois-ci, vous éliminez aussi les infobulles déroutantes.

Il y a quelques règles pour cette implémentation particulière, la première est d’utiliser cette approche "title-value vide" de façon restreinte. Ne l’utiliser que quand vous ne pouvez pas utiliser les autres modèles de design. Et quand vous l’utilisez :

• L’élément vide value-title devrait immédiatement suivre l’élément parent, apparaissant avant le contenu lisible-par-les-humains et sans imbrication supplémentaire.
• L’élément vide value-title ne devrait être utilisé qu’une fois seulement au moment de définir la valeur de la donnée pour une propriété unique. Aussi il ne devrait pas être utilisé au moment de séparer la date et l’heure dans – par exemple – la valeur dtstart de hCalendar.
• L’implémentation value-title vide ne devrait seulement (au moins à cette heure) s’appliquer qu’à :
  • Des valeurs de date ISO 8601, dateheure, timezone et durée
  • Des valeurs énumérées comme les sous propriétés de hCard tel, email adr
  • Les coordonnées pour les latitude et longitude dans le microformat geo
  • Les propriétés du numéro de téléphone

Pas Juste pour hCalendar

Les exemples que j’ai couverts à cette heure se concentrent sur l’information de date et d’heure qui apparaîtrait dans hCalendar. Mais vous pouvez appliquer le modèle de classe value à n’importe quel microformat qui références de l’information de date et d’heure. Par exmple, les anniversaires dans la hCard :

<p class="bday">Mon anniversaire est le <span class="value-title" title="1974-09-04">4 septembre</span>.</p>

Ou pour publier des dates dans hAtom :

<p class="published"><span class="value-title" title="2009-06-03">2 juin 2009</span></p>

Localiser Tout en Internationalisant

A ce stade, je n’ai fait que parler du modèle de classe value en relation avec les informations de date et d’heure. Mais vous souvenez-vous de ma précédente discussion sur les problématiques d’internationalisation ? Bon, jetons un oeil sur la manière dont le modèle de classe value peut aider.

Les types de Téléphone

Dans ma précédente référence, je mentionne spécifiquement les types de telephone dans la hCard. La seule valeur valide type pour spécifier un téléphone portable est "cell," mais tout le monde n’appelle pas ainsi ces types de téléphone.

Vous pouvez utiliser le modèle de classe value pour afficher la valeur locale que comprendront vos utilisateurs, et indiquer la valeur de microformat requise via span class="value-title" et l’attribut title :

<p class="tel"><span class="type"><span class="value-title" title="cell">mobile</span></span>: <span class="value">505-123-4567</span></p>

Dans cet exemple, du fait que j’utilise le sous-ensemble value-title, les machines sauront extraire la valeur de donnée type (cell) provenant de mon attribut title, plutôt que le texte à l’intérieur (mobile).

Numéros de Téléphone Localisés

Un autre exemple (que j’ai volé sur le Microformats Wiki, parce que je m’y connais pas assez en numéros internationaux) est pour les numéros de téléphone localisés. Dans ce cas, un numéro français :

<p class="tel"><span class="type">Home</span>: <span class="value">+33</span> (0) <span class="value">603 960 492</span></p>

La logique derrière cette implémentation est que la donnée valide pour le numéro de téléphone est +33603960492. Mais les français sont familiers avec l’inclusion du (0) pour une numérotation locale. A cette heure +330603960492 est un numéro invalide.

Aussi, pour donner aux utilisateurs français locaux l’information la plus utilisable et fournir à nouveau une donnée machine valide pour le numéro, vous appliquez le modèle de classe value. Dans cet exemple, le préfixe +33 est contenu par le span class="value" comme l’est le numéro 603 960 492. Néanmoins le (0) n’est pas contenu par quoi que ce soit. Ainsi les machines concatènent les deux textes à l’intérieur de span class="value" pour former la donnée valide et complète.

Et il existe encore bien plus d’usages du modèle de classe value. Mais ce billet de blog est déjà plus long que prévu (je ne sais pas pourquoi cela me surprend encore, compte tenu de ma passion pour la verbosité) et j’ai bien d’autres choses à faire … aussi je vous laisse explorer ça plus en profondeur.

Pick your Poison… (NDT : Vous avez l’embarras du choix)

Pas pour suggérer que les microformats sont du poison (en fait ils ne sont que plein de bonnes choses délicieuses), mais j’avais envie de balancer un titre de piètre qualité.

Le point demeure, vous choisissez quelle implémentation de modèle de classe value marchera pour vous. Vous n’êtes pas marié à une méthode de marquage de votre contenu avec ce modèle.

Comme pour mes propres préférences, je ne fais pas partie de ces types intéressés pour continuer à utiliser le modèle de design abbr pour les dates et les heures. Ne me faites pas dire ce que je n’ai pas dit. Je pense vraiment que abbr fait sens sémantiquement parlant pour contenir l’information de date et s’épancher avec ISO 8601 via le title.

Mais parce que j’aime tant la sémantique, je ne suis pas une vraie puriste. Je pense que la valeur non sémantique span class="value-title" offre pour l’accessibilité et l’utilisabilité bien plus de poids et l’emporte sur ma compulsion à être sémantique.

Néanmoins, je ne suis pas trop enthousiaste sur l’usage de l’approche value-title vide. Aussi je ne prévois pas de trop l’utiliser. Pour la majorité de mes propres implémentations utilisant les dates et les heures, je me vois bien faire contenir mon contenu avec span class="value-title" et de spécifier la donnée machine dans l’attribut title.

Il y aura probablement des exceptions à cela, mais c’est ce que j’aime dans le modèle de classe value. Il est flexible pour les besoins des auteurs de contenus.

Mettez à Jour Vos Implémentations

Même si j’ai trouvé le temps pour tomber cet article, je n’ai pas à cette heure encore trouvé le temps de mettre à jour mes implémentations de microformats existants. Mais je le veux … oh, oui je le veux. Et j’espère que vous le ferez, vous aussi.

A cette heure, les développeurs sont en train de travailler leurs outils pour reconnaître proprement le nouveau modèle de classe value. Optimus mène la danse avec sa mise à jour v0.8 qui supporte le modèle de classe value.

Aussi, assurez-vous de prendre votre part et de mettre à jour votre marquage.

Encore d’Autres à Venir ?

Aucune promesse sur ce point de futurs billets pour cette série. J’aimerais couvrir quelques autres microformats, mais avec mes obligations de livre, je doute fortement que j’aurai le temps … au moins pas jusqu’à ce mon manuscrit final soit bouclé en Août.

Mais si vous plongez pour en savoir plus, pourquoi ne pas revisiter quelques-uns de mes précédents articles couvrant :

• rel-home, rel-license, rel-me & rel-tag
• XFN
• hCard
• hCalendar
• hAtom
• hResume
• Thèmes & Problématiques

J’ai aussi donné récemment une rapide présentation des microformats qui pourrait vous intéresser (ou non).

Aussi, jusqu’à la prochaine fois … et oui, il y aura une prochaine étape en rapport avec les microformats même si elle ne fera pas partie de cette série.