Microformats

Tutorielhtml

Publié par le , mis à jour le (12566 lectures)

xhtml sémantique microformats

Les design patterns (modèles de conception)

Pour passer a des microformats plus complexes il a fallu inventer des modèles permettant de combler les lacunes sémantiques du HTML. Les modèles de conception ont été conçus pour cela, ils sont en outre là pour rendre ce qui est lisible par un humain également compréhensible par une machine.

Abbr Design Pattern

Le principe est simple : encadrer un texte lisible par un humain par des balises <abbr> et indiquer dans l'attribut title la valeur qui devra être prise en compte et interprétée par la machine. On peut, et c'est souvent le cas dans les microformats composés, les associer à un attribut class. Nous verrons plus tard ce à quoi correspond la valeur country-name de l'attribut class pour l'exemple suivant :

<abbr title="Etats-Unis d'Amériques" class="country-name">USA</abbr>

La valeur pour country-name sera Etats-Unis d'Amérique et non USA. Nous verrons dans le prochain design pattern, que la balise <abbr> sera également utilisée pour définir correctement horaires et dates.

Datetime Design Pattern

Il s'agit ici de présenter de manière sémantiquement correcte une date. Nous verrons plus loin que ce modèle est utilisé par bon nombres de microformats composés (hCard, hResume, hAtom…). Pour mettre ce modèle en oeuvre il faut encadrer la date lisible par un humain par des balises <abbr>, ajouter l'attribut class associé à la balise et indiquer la date et l'heure au format ISO 8601 dans l'attribut title lisible, elle, par une machine. Cela pourra donc donner la chose suivante :

<abbr title="2011-04-08" class="dtstart">Jeudi 8 avril 2011<abbr>

Dans cet exemple la date ISO 8601 est 2011-04-08, la propriété dtstart correspond au début d'un évènement. On aurait pu ajouter l'heure de la manière suivante :

<abbr title="2011-04-08T15:30" class="dtstart">Jeudi 8 avril 2011 à 15 heures 30<abbr>

Bien entendu, d'autres valeurs peuvent être ajoutées, telles que les secondes, le fuseau horaire, etc. Voir à ce sujet la page concernant le Value Class Pattern ou ISO 8601 sur Wikipédia

Value Class Pattern

Voici un tout nouveau modèle qui devrait être arrivé à maturité pour être utilisé dans tous les microformats qui en auraient l'utilité. Il peut arriver que seule une partie du contenu de l'élément formaté corresponde à la valeur de la propriété, dans ce cas, on peut la préciser en ajoutant class="value" dans la balise encadrant cette valeur. Nous présentons ci-dessous un fragment du microformat composé hCard dont nous parlerons plus loin, l'exemple est relativement explicite, il est ici question de la propriété tel signifiant téléphone :

<span class="tel">
  <span class="type">Domicile</span>:
  <span class="value">0388111111</span>
</span>

Une autre application de ce modèle est la possibilité d'extraire et de concaténer des valeurs à partir de fragments contenus dans les microformats. Pour plus de clarté, voici un exemple permettant de regrouper la date et l'heure d'un évènement :

<p>Le rendez-vous est fixé à 
    <span class="dtstart">
        <abbr class="value" title="2011-06-24">ce vendredi</abbr> 
     vers les <span class="value">16:30</span>
    </span>
</p>

Ce code produira la valeur suivante : 2011-06-24T16:30:00, la date et l'heure sont fusionnées en respectant le format préconisé.

D'autres précisions à propos de ce modèle :

  • Dans le cas de la présence d'une seule propriété value, la valeur associée sera celle le l'attribut alt dans le cas d'un élément img ou area, celle de l'attribut title dans le cas d'un élément abbr, celle du contenu de la balise dans laquelle a été inséré la propriété value.
  • Dans le cas de la présence de plusieurs propriétés value, si le microformat attend une chaîne de caractères simple, la concaténation se fera sans ajout de caractères, s'il attend une date et un horaire, le formatage se fera d'après ce qui est indiqué dans les explications sur le Datetime Design Pattern.