Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats

Lors d’un précédent billet concernant la sortie de WordPress 2.2, j’avais évoqué la version 0.6.1 du thème Sandbox. Je profite du passage en version 0.9 pour passer la deuxième couche car Sandbox est intéressant à plus d’un titre. Cest le thème idéal pour les intégrateurs html qui trouveront une palanquée (et le mot est faible) de classes prêtes à styler avec un regard tourné vers l’avenir du web sémantique grâce aux microformats hAtom et hCard à l’horizon.

La différence majeure entre les deux versions est la disparition du menu Skins que j’avais encensé il y a peu. Les concepteurs ont convenu qu’une interface pour sélectionner un fichier CSS n’avait rien à voir avec une option de thème et devrait plutôt faire l’objet d’un plugin…

Toutes les ressources sont désormais concentrées sur l’excellence du marquage sémantique. Et comme le dit Scott tout ce que le menu Skins pouvait accomplir, peut facilement être réalisé en éditant simplement le fichier style.css ou en incluant le fichier désiré via une règle @import(‘…’); C’est vrai que vu comme ça… 🙂

Sandbox est donc truffé de classes contextuelles générées à la volée aux endroits-clés du code : body, billets et commentaires pour donner matière à des raffinements CSS grâce à l’exploitation judicieuse des marqueurs conditionnels de WordPress et à l’implémentation des microformats hAtom et hCard. Si j’ajoute à celà le fait que le marquage HTML utilisé est sémantiquement correcte, vous comprendrez mon désir de vous en dire un peu plus.

Mais qu’est-ce donc que le marquage sémantique ?

L’utilisation des microformats dans Sandbox, c’est déjà de la sémantique. Il s’agit en effet de nommer les classes utilisées dans le code HTML en fonction de spécifications qui ont pour but, justement, d’ajouter un peu de sens dans un monde de brute 😉

hAtom, un format micro mais costaud !

Mais encore ? Le microformat hAtom, basé sur le format de syndication Atom (comme le RSS en plus réçent), est conçu à l’origine pour les billets de blog. La participation de Tantek Celik de Technorati comme contributeur donne une idée des utilisations possibles de ce microformat en matière de formatage de billets ou d’extraction d’informations.

Revenons à hAtom. Ce microformat permet d’identifier l’information sémantique présente dans les billets (et pratiquement partout où Atom peut être utilisé) si les marqueurs de classe CSS spécifiques sont utilisés à bon escient.

Les billets sont identifiés comme un faisant partie d’un fil si la classe hfeed est présente dans div#wrapper ou div#container, par exemple. Utilisez hentry pour identifier un billet et entry-title pour un titre. Il est même possible de spécifier le nom de la Catégorie avec rel-tag, tandis qu’un lien permanent se verra associer le rel-bookmark.

Ainsi, juste en lisant le nom des classes, il est possible de savoir de quoi il s’agit, tout simplement parce que ces identifiants ont un sens pour les humains et pour les programmes informatiques !

hCard ? C’est Alexandre qui invite ^_^

En ce qui concerne hCard, je vous invite à utiliser la bande passante d’Alexandre qui a fait un billet sur la question des microformats et hCard en particulier.

Sandbox transmute les marqueurs conditionnels en classes CSS

L’idée de Scott et Andy est de générer des intitulés de classes en fonction du contexte dans lequel un billet peut apparaitre. Pour celà, le fichier functions.php présent à la racine du thème Sandbox est mis à contribution pour produire des classes :

1. Dans la balise body : sandbox_body_class()

   Les classes disponibles dans le body sont aussi nombreuses que variées. On trouve par exemple les classes générées à partir des marqueurs conditionnels comme .archive {…} d’après is_archive(), ou la classe .page {…} d’après is_page(). La spécificité des classes va jusqu’au numéro du billet .postid-69 {…} au cas où vous voudriez donner une style spécial à quelques billets particuliers en dehors de leur appartenance à une rubrique… D’autres classes dépendent du calendrier : il devient possible de styler tous les billets paraissant une année, un mois, un jour ou une heure précise.

   Echantillons de classes dynamiques pour le body

   De gauche à droite : la classe wordpress suivie des classes concernant l’année, le mois, le jour et l’heure d’affichage de la page. home indique que nous sommes sur la page d’accueil, et loggedin que je suis un utilisateur enregistré :

    <body class="wordpress y2007 m05 d31 h18 home loggedin">

   Voici maintenant la même balise body après que j’ai cliqué sur la catégorie Action citoyenne. A la place de home, on trouve la classe category suivi de l’intitulé de la catégorie en question.

    <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin">

   Pour finir, voici les archives par date. Remarquez la classe h19 qui vient d’apparaitre à 19h00 !

    <body class="wordpress y2007 m05 d31 h19 archive date loggedin">

   Je vous l’accorde, il faut beaucoup d’imagination pour trouver un style différent pour toutes ces classes disponibles. Quand je vous disais qu’il y en avait une palanquée… 😉

2. Dans la balise div qui contient le billet : sandbox_post_class()

   A côté des classes permettant de styler l’ensemble des billets comme .hentry {…} ou .post {…}, il existe des classes pour les billets protégés par un mot de passe ou ceux d’un auteur en particulier .author-br1o {…}.

   Il y a des classes plus inattendues comme .p[n] {…} qui permet d’atteindre un billet en fonction de son numéro d’ordre dans la page (remplacez [n] par le numéro du billet que vous visez). On y retrouve, comme pour le body, des classes en fonction du calendrier.

   Un exemple concernant les classes associées aux billets

   Outre hentry évoquée plus haut, la classe p1 nous signale qu’il s’agit du premier billet de la page. Elle est suivie par post (qui joue le même rôle que hentry) et de publish (pour l’état du billet). Les autres classes devraient vous être familières. Notez que la classe h09 concerne l’heure de publication du billet et non pas celle de son affichage.

    <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09">

3. Dans les commentaires : sandbox_comment_class()

   En ce qui concerne les zones de commentaires (incluant les Trackbacks et les Pingbacks), cette fonction ajoute des classes comme .alt {…} pour appliquer des CSS pour les commentaires impairs, ou .comment-author-john {…} pour les utilisateurs enregistrés. Sachant qu’il est possible de demander une inscription au visiteur pour qu’il puisse laisser un commentaire, il peut s’avérer utile de prévoir un style par utilisateur.

   Dernier échantillon avec les commentaires

   Les classes affectées aux commentaires sont appliquées à chaque éléments de liste, chaque fois qu’un commentaire est publié. A l’exception peut-être de byuser qui s’adresse à n’importe quel utilisateur enregistré et de bypostauthor lorsque l’auteur du commentaire est aussi l’auteur du billet, vous devriez pouvoir vous débrouiller tout seul 😉

    <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">

Cette floppée de classes permet des fantaisies qui ne seraient possibles autrement qu’à l’aide de contorsions douloureuses. Finalement, c’est à nous d’inventer les sites qui vont avec ! Mais avoir des classes à gogo est une chose. Ecrire un code HTML de qualité en est une autre.

Allez, soyez CHIC

CHIC est l’acronyme de Code HTML Intrinsèquement Classe, c’est très bien vu, mais j’ai une petite faiblesse pour Code HTML Intrinsèquement Chic proposé ici qui est récursif en plus de ne pas changer l’acronyme…

Etre CHIC, ça commence par des choses toutes simples, comme donner un Doctype à vos pages HTML, éviter l’usage des tables à des fins de présentation autre que celles relatives aux données tabulaires. Bon, en même temps si vous utilisez WordPress, Dotclear ou une autre plate-forme de blog moderne, vous ne devriez pas avoir ce genre de problèmes.

Quoique, j’ai vu il n’y a pas longtemps dans un billet, une succession de <BR> faisant office de liste complètement désordonnée en lieu et place des balises HTML décrivant le fond comme ol ou ul. A part ignorer l’existence de ces balises, qu’est-ce qui peut bien pousser un être humain normalement constitué à aligner des <BR> ?

Autant les bonnes réponses sont souvent disponibles dans les livres, autant… les mauvaises également. Je ne compte pas le nombre d’ouvrages consacrés aux langages de programmation (notamment PHP et Javascript) dans lesquels, pour aller vite, les auteurs se contentent de générer des balises insignifiantes pour illustrer leur joli code. Leurs lecteurs apprennent peut-être à bien programmer, mais ressortent à coup sûr avec du mauvais HTML. C’est un peu la même chose avec les nombreux sites web proposant des tutoriels écrit pour certains au début du siècle sans avoir connu de mise à jour…

Aller plus loin avec les microformats

L’utilisation des microformats pour nommer les classes des éléments HTML présente des avantages certains dans le cadre de l’édition d’un blog (mais les autres formes de publication ont-elles encore un avenir ^_^)

Celà permet (l’air de rien) de mettre en place une convention de nommage pour les classes utilisées par les CSS, tout en rajoutant une couche sémantique au code après l’utilisation des bonnes balises HTML. Et tout celà, sans avoir besoin de mettre en route une usine à gaz : quelques classes par-çi, un rel-tag par-là, and the cat’s in the bag!

Par ailleurs, à regarder de près l’institutionnalisation des services tels que Technorati, Feedburner ou Feedblitz, l’avenir des microformats pour le formatage et l’extraction de l’information est tout tracé. D’ici une paire d’année, produire des documents XHTML 2.0 bien formé ou approximativement bien écrit avec HTML 5.0 (cf. l’excellent billet sur Le sens du canard de Laurent Gloaguen) ne suffira plus.

Ces services dont nous commençons seulement à dépendre pour la gestion des flux RSS ou l’abonnement par mail peuvent facilement titrer profit des microformats embarqués dans les blogs. Cette possibilité d’extraire des informations autorise la génération de profils d’auteurs avec ses sujets de prédilection (via l’analyse sémantique du contenu), les heures de publication, le réseau de relation (via l’analyse des commentaires et autres trackbacks associé au microformat XFN), le tout mixé avec les informations présentes dans les hCard, hGeo et j’en passe.

Parce qu’il faut bien conclure

En me relisant, je m’aperçois que ces quelques notes ont largement dépassées l’explication de thème. Voilà ce que c’est que de suivre le fil de ses pensées ^_^ : du marquage sémantique au Foie Gras de canard en passant par les microformats et la profusion des classes disponibles dans Sandbox, le chemin est sinueux. J’espère que vous aurez retrouvé la sortie 🙂

Sandbox, un thème WordPress qui a de l’avenir

Conclusion. Adopter un thème comme celui-ci n’est pas sans conséquence en raison du temps qu’il faut pour bien comprendre les nombreux concepts sur lesquels il repose : le marquage sémantique, les microformats, la génération des classes via le fichier functions.php qui prend de l’importance. Vu la complexité relative du code selon les compétences PHP de chacun, je me suis posé la question de la pérennité du développement et du support utilisateur. A ces questions, le changement de version montre que le développement est actif et le support existe via Google Groups où l’auteur du thème répond rapidement aux questions. Si l’anglais est un obstacle insurmontable, vous pouvez toujours me faire parvenir vos questions que je reformulerais dans la mailing-list dans la mesure de mes moyens.