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 !

Après une inscription sur le site vous pourrez créer votre formulaire grâce à une interface très complète et intuitive. Un système de drag’n drop vous permet de déposer les éléments dont vous avez besoin à l’intérieur de votre page. Si la mise en page ne vous convient pas, vous pouvez à tout moment les déplacer avec la souris. TextArea, Radio button, Check-box, Dropdown menu, Upload button, Captcha, Rating system etc etc… Tout y est.

Vous avez la possibilité de changer le style général de votre formulaire en modifiant le background (couleurs, image de fond), la police etc… Le header et le footer sont également entièrement personnalisables (possibilité d’inclure une image notamment). Pour vous faire gagner du temps 6 templates sont proposés (Certains sont cependant difficilement utilisables…ex : post-it yellow).

Bien entendu, chaque élément du formulaire est paramétrable : taille des champs de saisie, nombre maximum de caractères, champs obligatoires ou non, options diverses… Jotform vous donne même la possibilité de placer des outils de paiement (payment tools) qui vont lier votre formulaire à votre compte (paypal ou autre) afin de proposer la vente d’objets dont vous pourrez paramétrer le contenu et les options. Une fois créé, vous pourrez prévisualiser votre travail, l’enregistrer (zip comprenant la page html, les images et les javascript) ou encore le partager.

Même si rien de vaut la création personnelle, il faut bien avouer que ce site facilite grandement la création de formulaires et constitue une solution très complète, simple d’utilisation et entièrement gratuite.

Voici à quoi ressemblent les 6 template proposés par JotForm. Le formulaire comprend tous les éléments qu’il est possible d’inclure :

Baby blue

Default style

Industrial Dark

Jot-Theme

Paper Grey

Post-it Yellow

Si vous êtes intéressés, voici l’adresse du site : http://jotform.com/

Les filtres AlphaImageLoader : c’est quoi ?

Je vais reprendre la petite explication du site Alsacreation car tout y est dit :

À partir de la version 5.5, Internet Explorer intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L’une de ces manipulations graphiques consiste à intercaler, entre le fond d’un bloc et son contenu, une image avec transparence graduelle.

Comment ça marche ?

Dans cet exemple, je souhaite intégrer une image de fond dans un div dont la class est : « png-test ».

.png-test{
float:left;
background:url(pngico.png) 0 0 no-repeat;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png');
width:128px;
height:128px;
}

Explication : On cible IE6 grace à l’étoile * puis on supprime le background pour le remplacer par le filtre AlphaImageLoader.

Il y a un mais…

Comme tout n’est jamais parfait cette technique comporte quelques inconvénients : la propriété background-position n’est pas prise en compte sous IE6, et la propriété background-repeat n’est prise en compte que partiellement. Pour que votre image en png se répète dans le div conteneur, il faut utiliser « sizingMethod= »scale ».

exemple:

.png-test{
float:left;
background:url(pngico.png) 0 0 repeat-y;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png','sizing-method=scale');
width:128px;
height:128px;
}

Autre inconvénient majeur, il est impossible d’utiliser cette technique pour des liens avec un changement de l’image de background lors du rollover… Et un petit dernier pour la route, les filtres ne passent pas la validation du W3C…

Comment ça marche ?

Dans un premier temps vous aller devoir définir la structure de votre menu à savoir : le nom qui va apparaitre sur l’onglet et la cible sur lequel le lien va renvoyer. Tout cela dans une facilité déconcertante. Ensuite, vous allez customiser entièrement cette base. A savoir : définir la police et la taille de fonte utilisée sur vos onglets. la largeur de chaque onglet, margin, padding, image d’arrière plan, bordures et couleurs des bordures… Et tout cela sur chacun des états « main », « link » et « hover » des onglets composant le menu. Pas mal non?

Vous pouvez visualiser le résultat dans la fenêtre principale. Au cas où la créativité venait à vous faire défaut… izzyMenu.com vous propose une liste importante de menus pré-faits. Vous n’avez que l’embarras du choix et vous pouvez bien sur modifier la base choisie. Votre menu créé, il ne vous reste plus qu’à télécharger le code, à utiliser le lien, à partager votre menu ou encore à le sauvegarder si vous avez ouvert un compte auparavant … Bref, un site fort utile, qui mérite à être connu!