Microformats kesako ?

Les Microformats sont nés au début des années 2000 dans le but d’apporter plus de sémantique aux contenus affichés sur le web. Bien que le standard (X)HTML apporte déjà un certain niveau de sémantique grâce aux balises, cela ne suffit pas pour cibler très précisément un contenu.

Exemple : la balise <p> nous permet de savoir qu’il s’agit d’un paragraphe mais ne nous permet pas de connaître la nature de son contenu ou en d’autres termes le « sens » des mots qui le composent.

Le but des Microformats est donc d’ajouter un niveau sémantique plus strict que celui du standard (X)HTML en vue d’automatiser le traitement d’un contenu web par des machines.

Microformats : comment ça marche ?

Pour apporter ce niveau sémantique supplémentaire les Microformats s’appuient sur les balises (X)HTML couplées aux attributs « rel » et « class » pour donner du sens au contenu.

Puisqu’il existe une infinité de contenus potentiellement formatables, il existe de nombreuses spécifications en fonction de la nature du contenu formaté. On retrouvera par exemple les Microformats suivant :

• vCard : carte de visite électronique (ex : fiche de contact Outlook)
• hCard : carte de visite format Web (une vCard affichée dans une page web)
• geo : formatage de coordonnées géographiques
• hCalendar : formatage de données temporelles
• adr : formatage d’adresses
• XFN : formatage de données de type réseaux sociaux
• etc…

Je viens d’en citer 6 mais il existe de nombreux Microformats différents, tous liés à un type de contenu à formater.

Le Microformat hCard

Pour mieux comprendre comment il est possible d’utiliser les Microformats, nous allons nous appuyer sur la spécification hCard servant à afficher une vCard au sein d’une page Web.

Exemple d’une carte de visite XHTML basique :

Le code XHTML :

<div class="vcard-ex">
 <p><a href="http://all-for-design.com" title="All for Design, le blog">All for Design</a></p>
 <p>Aurelien Dupond</p>
 <p>Marseille, France</p>
 <p>Mobile : 06.05.04.03.02</p>
</div>

Si je veux formater ce contenu, je vais utiliser la spécification hCard (car il s’agit d’une carte de visite). Comme vous pourrez le constater il n’y a aucune différence visuelle entre la version formatée et la version classique. La seule différence se situe au niveau du contenu.

La même carte de visite avec le Microformat hCard :

Le code XHTML :

<div class="vcard">
 <a class="url" href="http://all-for-design.com">All for Design</a>
 <p class="fn n">
  <span class="given-name">Aurelien </span> 
  <span class="family-name">Dupond </span>
 </p>
  <p class="adr">
   <span class="locality">Marseille</span> 
   <span class="country-name">France</span> 
  </p>
 <p class="tel">
  <span class="type">Mobile :</span>
  <span class="value">06.05.04.03.02</span>
 </p>
</div>

Quelques explications

Comme vous le voyez, le Microformat hCard utilise les balises XHTML. Vous pouvez utiliser les balises que vous voulez pour peu que vos choix soient sémantiquement corrects.

Comme cet exemple est très simple et que je ne vais pas faire un cours de sémantique XHTML, j’ai simplement utilisé des balises <p> et <span>.

Dans le cas de hCard plus complexes on pourra utiliser des listes de définition dd/dl/dt, éventuellement couplées à des listes ordonnées ol/li s’il y a beaucoup de sous-sections, afin d’obtenir le code le plus logique possible d’un point de vue sémantique. (Pour approfondir, vous pouvez aller lire les articles de Luc Muller et de Bruno Bichet sur ce sujet).

Continuons l’explication du code…

<div class="vcard">

La proriété « vCard » est obligatoire. Elle va englober tout le contenu de votre carte de visite.

Question : Pourquoi utiliser la propriété « vCard » alors qu’il s’agit du Microformat « hCard »?

Le Microformat « hCard » emprunte les propriétés du Microformat « vCard » car il a été conçu après. (vCard est le nom d’un Microformat mais c’est aussi le nom d’une des propriétés de celui-ci.).

<a class="url" href="http://all-for-design.com">All for Design</a>

On utilise la propriété « url » pour désigner une adresse web. On peut la coupler avec d’autres propriétés pour être plus précis : « url org » pour l’adresse d’une société, « url nickname » pour spécifier une adresse rattachée à un surnom (ex : url de votre compte twitter rattachée à votre username). etc etc…

 <p class="fn n">
  <span class="given-name">Aurelien </span> 
  <span class="family-name">Dupond </span>
 </p>

La propriété « fn » sert à spécifier le nom d’une personne. C’est une propriété obligatoire dans le Microformat hCard.

La propriété « n » est un peu « batarde » puisqu’elle n’est pas tout le temps obligatoire et qu’elle peut prendre une valeur nulle. Elle va regrouper les différentes parties du nom d’une personne. Pour plus d’information, rendez-vous sur la documentation officielle.

« given-name » contient le prénom et « family-name » contient le nom de famille.

Note : nous aurions pu nous passer de « given-name » et de familly-name » et faire tenir le nom complet directement dans <p class="fn n"> comme ceci :

<p class="fn n">Aurelien Dupond</p>
      OU
<p class="fn">Aurelien Dupond</p>

Continuons…

 <p class="adr">

La propriété « adr » désigne l’ensemble des constituants d’une adresse. Puisqu’en général une adresse est composée de plusieurs éléments, cette propriété en contiendra d’autres.

<span class="locality">Marseille</span> 
<span class="country-name">France</span> 

La propriété « locality » désigne la ville et « country-name » désigne le pays. Il existe beaucoup de sous-propriétés pour « adr« . Pour plus d’informations, rendez-vous sur la documentation officielle.

 <p class="tel">
  <span class="type">Mobile :</span>
  <span class="value">06.05.04.03.02</span>
 </p>

La propriété « tel » permet d’indiquer un numéro de téléphone, « type » contient le type de numéro (domicile, travail, fixe, mobile etc.) et « value » contient la valeur du numéro.

Le succès des Microformats tient au fait qu’ils soient basés sur des standards existant. Ils sont en ce sens très simples et très flexibles. Puisque nous utilisons les balises (X)HTML pour créer notre hCard, nous pouvons utiliser les CSS pour ajouter des styles et ainsi donner plus d’attrait au contenu. De la même façon, nous pouvons ajouter le langage Javascript pour animer ce contenu.

En utilisant le Microformat hCard, nous permettons aux logiciels capables de traiter ce type de contenu d’en extraire facilement les informations. Une hCard peut être téléchargée et sera automatiquement convertie en vCard pour être, par exemple, ajoutée à un carnet d’adresse électronique.

De plus, l’utilisation des Microformats permet de mieux structurer les informations et donc d’en améliorer le référencement par les moteurs de recherche.

Les plus beaux exemples de hCard

Le célèbre webdesigner Tim Van Damme a été l’un des premiers à proposer une hCard de grande qualité, esthétiquement et techniquement très réussie.

Voyant que sa petite création avait fait des envieux, il a eu la bonne idée de regrouper dans son « Wall of Fame » de nombreux exemples de hCard, la plupart inspirés (et non copiés sans autorisation comme il le dénonce dans le « Wall of Shame») de sa propre création.

Voici quelques exemples de hCard sélectionnés par Tim Van Damme :

Comme vous pouvez le voir dans ces quelques exemples, l’utilisation des Microformats ne limite en rien l’esthétique d’une page, bien au contraire…

Conclusion

En réalisant cet article je me suis plongé dans l’univers passionnant des Microformats. J’ai appris beaucoup de choses et je suis maintenant convaincu du bénéfice de leur utilisation.

Même si la densité des informations et le nombre de Microformats existant peuvent faire peur à première vue, je pense que cela vaut le coup de se pencher de plus près sur le sujet et je vous invite donc à faire de même !

Si le nom « dotMobi » ne vous dit rien, il s’agit d’un grand groupe industriel basé à Dublin (leader mondial du développement et de la découverte de contenu mobile de qualité) qui gère les noms de domaines mobiles et qui est à l’origine du célèbre « .mobi ». Le groupe encourage l’innovation de l’industrie mobile en donnant aux fournisseurs de contenu les outils nécessaires pour s’assurer que le Web fonctionnera sur les téléphones avec rapidité, précision et pertinence.

Il existait déjà des solutions permettant de rendre votre site web accessible sur les téléphones mobiles. Je pense notamment à l’article « Veerle’s blog goes mobile » publié sur le blog de Veerle Pieters.

La solution que propose James Pearce s’adresse uniquement aux utilisateurs de Wordpress et ses fonctionnalités semblent dépasser de loin tout ce existe aujourd’hui dans ce domaine…

Le Wordpress Mobile Pack offre :

• Une détection de la provenance de vos visiteurs et les oriente si besoin sur le thème adapté aux mobiles
• Une détection du type d’appareil mobile utilisé par vos visiteurs
• La possibilité de switcher d’un thème à l’autre une fois sur le site
• Un thème « spécial mobiles » entièrement paramétrable et personnalisable
• Une fonction permettant d’adapter automatiquement votre contenu web pour un support mobile : suppression des médias, partition des grandes pages, adaptation de la taille des images, simplification automatique des css…
• Un panneau d’administration accessible depuis un téléphone
• Un widget lecteur de codes QR

Vous pourrez trouver ce plugin sur le site « Mobiforge« , une communauté de développeurs spécialisés dans le domaine du mobile. Ce site s’adresse à  tous ceux qui s’intéressent au développement et au design d’applications mobiles. Vous pourrez y trouver de nombreux articles traitant de design, de développement et de tests en tous genres.

Le site propose également un forum, un blog ainsi qu’un ensemble d’outils pour le développement sur mobiles (Templates de sites, outils de création et de test, framework etc…). Vous l’aurez compris, si vous vous intéressez à ce domaine, Mobiforge est un site à  placer dans vos favoris.

Un moteur de recherche vous permet de faire votre choix parmi les nombreuses catégories. Le site propose des réponses à vos question sur de nombreux langages, plateformes et systèmes : HTML, CSS, Javascript, PHP, Linux, Shell, Bash, Apache, MySQL, SVN, etc etc…

Une inscription suffit pour uploader vos petites astuces et les proposer aux internautes. Mieux, si vous disposez d’un compte, vous pouvez

ajouter un lien vers Posteet sur votre site pour permettre aux utilisateurs qui naviguent dessus de créer des posteets à partir du contenu de votre site directement sur leur compte posteet

Petit luxe supplémentaire, le site est proposé en Français (et en Anglais).

Vous pourrez voir de quoi il est capable, et ça en vaut la peine. Je suis assez impressionné par le nombre de ses projets, par sa technique mais également par sa créativité. Gérard Ferrandez a travaillé sur de nombreux projets : galerie 3D, 3D Parallax Scrolling, animation 3D, jeux de typo etc etc…

Si certains travaux vous intéressent, vous avez accès à toutes les sources. Le tout est sous contrat Creative Commons. Petit rappel : ce type de contrat vous autorise à reproduire, distribuer et communiquer ses créations au public. Vous pouvez également les modifier. Dans tous les cas vous devez citer le nom de l’auteur et vous ne pouvez pas utiliser le code pour un projet commercial.

Pour vous faire une idée plus précise du travail, voici plusieurs screenshots de quelques uns de ses projets. Toutefois, je vous invite vivement à aller faire un tour sur son site car le premier intérêt c’est surtout l’interactivité. Allez tester en live, c’est parfois assez intrigant…

Tout est entièrement gratuit, téléchargeable en version pdf ou en png et assez bien foutu même si réussir à caser, sur un format A4, la quasi-totalité des balises html ou des propriétés css engendre parfois une densité d’information à la limite du compréhensible…mais passons.

Ca peut toujours être utile d’avoir dans un coin ce genre de petit récap non ?!