C’est en lisant un article sur l’intégration et la promotion des Microformats que j’ai réalisé à quel point cela pouvait bien s’intégrer dans un blog. J’avais déjà microformaté mon CV (hCalendar, hCard, hResume) mais pour d’autres raisons que je développerai, j’ai finalement cédé aux sirènes de la tentation.

Le thème

Le choix des couleurs n’est pas anodin. J’ai souhaité placer une teinte marron car depuis les travaux de mon appartement, je fais une fixation sur le bois. C’est beau, ça s’intègre avec tout (pierre, métal, ancien, récent) et c’est lié à la notion de nature. Ceux qui me connaissent savent à quel point la préservation de l’environnement fait partie de mon quotidien.

J’ai évité les couleurs primaires. Elles fatiguent les yeux et vous obligent à forcer du regard. Observez bien, le parcours du blog est reposant. Les teintes restent pâles et leur utilisation sépare les différentes parties de l’écran.

Ne cherchez pas le thème dont je me suis servi : j’ai tout repris à zéro. Mais je me suis inspiré de nombreuses ressources rendant (normalement) ce blog moderne et plus agréable à lire. J’ai volontairement supprimé tout « conduit » vertical. Ce blog s’adapte à la largeur de votre écran et reste allègrement lisible sur de petites résolutions.

Les Microformats

Comme je l’ai indiqué plus haut, le déclic est venu des Microformats. Concrètement, en agençant vos balises selon un format bien précis (et documenté), vos données sont structurées de sortes qu’elles sont exploitables rien qu’en existant.
Ce blog utilise les microformats XFN, hCard, hAtom, rel-tag et rel-home.

De ce fait, vous pouvez construire un flux Atom (du XML) uniquement en lisant le contenu de n’importe quelle page du blog. En l’état ça ne vous avance à rien mais des applications commencent à intégrer cette structuration des données … à commencer par Firefox 3. En parcourant une page, vous serez par exemple averti des tags utilisés et pourquoi pas rechercher des ressources similaires sur Flickr ou MySpace. Ou encore sauvegarder les coordonnées de contact de l’auteur d’un site.

Les Microformats en une phrase, c’est utiliser une sémantique permettant l’extraction du contenu de manière logique. Ce sont les balises META de l’Internet moderne..

Objectif professionnel

Cette refonte avait également un autre objectif : rendre mon blog lisible sans crainte par des professionnels intéressés par mon travail et mes compétences. Preuve qu’une bonne structuration des données est importante, j’ai ainsi adapté ma page professionnelle en 5 minutes aux couleurs du blog pour apporter une cohérence de navigation.

Ce blog s’est repositionné doucement vers sa forme actuelle, mélangeant sujets techniques et loisirs de la vie quotidienne. J’aime les jeux alors j’en parle. J’aime le développement Web alors j’en parle. C’est ma vitrine autant auprès de mes amis que de mes futurs employeurs.

Le mot de la fin

Et pour les nostalgiques qui débarqueront en ne sachant pas à quoi je fais référence :

• La Case de l’Oncle Tom : avant le 27 juillet 2007
• La Case de l’Oncle Tom : à partir du 27 juillet 2007

Voilà ce sont quelques heures de travail qui s’offrent à vous.

Lorsqu’on crée son premier site ou bien lorsqu’on navigue sur Internet, on est loin de se douter de l’étendue des conventions implicites qui facilitent la vie de tout le monde.
Et pourtant, passé l’apprentissage de la soupe de balises HTML et éventuellement des feuilles de style, il y a tout un tas de règles à respecter pour rendre la navigation aisée et non bloquante. Car oui, mal concevoir un site peut en bloquer, qu’il s’agisse de personnes atteintes de déficiences (physiques, mentales) ou pas.

Pour se sensibiliser à ces bonnes pratiques de la conception des sites Web, il existe depuis peu le guide Sites Web : les bonnes pratiques édité dans la collection Memento d’Eyrolles. Les habitués de l’initiative Opquast ne seront pas dépaysés étant donné qu’il en reprend les quelques 153 bonnes pratiques.

Mais au final, c’est quoi une bonne pratique ? Quelques règles que certains appliquent sans se rendre compte alors que d’autres sont au contraire bien loin de pouvoir ne serait-ce que les imaginer.

Exemples de bonnes pratiques simples que n’importe qui peut mettre en oeuvre :

• Le nom du site et/ou le nom de l’auteur sont indiqués sur chaque page ;
• Le soulignement est réservé aux hyperliens ;
• Le site propose au moins un moyen de contacter l’auteur et/ou le webmestre.

D’autres sont plus tordues au premier abord mais totalement justifiée, certaines abordant le délicat sujet de l’accessibilité :

• Les hyperliens sont visuellement différenciés du reste du contenu ;
• L’emplacement du menu principal de navigation est identique sur toutes les pages ;
• La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier.

Comme vous pouvez le constater, ça n’a rien de bien sorcier. C’est un peu comme dire bonjour en se présentant à un inconnu : c’est le minimum à fournir pour établir une conversation. Lorsqu’on crée un site Web, c’est une conversation avec le monde que l’on établit