Je veux un blog hAtomique !

Ce qui suit s’inscrit dans la poursuite de travaux visant à mieux faire connaître les microformats. Vous trouverez ci-après une traduction en cours d’un article d’Emily Lewis publié le 15 octobre dernier sur son blog personnel. Seul le lien original fait référence. Vous pouvez m’aider à raffiner le contenu en ajoutant vos commentaires ou en éditant directement le code posé sur la page miroir de mon wiki-personnel. Ce billet s’inscrit dans la volonté « d’hAtomiser » ce thème Wordpress fourni par Elegant Themes.

Parvenir au Sémantique avec les Microformats : 5° partie – hAtom

Durant le cheminement de cette série, j’ai discuté des différents microformats implémentés sur A Blog Not Limited : basés-sur-le-rel, XFN, hCard et hCalendar.

Maintenant, il est temps de parler du microformat hAtom, qui ajoute de la sémantique et de la structure au contenu web qui pourrait être syndiqué, comme les billets de blog ou les articles d’actualités.

L’Histoire : Atom

Le microformat hAtom est basé sur le format de syndication XML Atom.

A la différence de la représentation 1:1 de hCard et hCalendar vers vCard et vCalendar, le schéma hAtom n’est pas une réflexion exacte d’Atom.

Atom est un modèle robuste qui fournit bien plus de fonctionnalités que celles requises pour les contenus tels que des billets de blog. En tant que tel, hAtom utilise uniquement le minimum d’éléments requis ; c’est plus un sous-ensemble d’Atom.

Ceci dit, les propriétés et sous-propriétés hAtom sont basées sur les éléments correspondants dans la nomenclature hAtom.

Micro-contenu Pas Nécessairement de la Syndication

Même si hAtom est basé sur Atom, hAtom en lui-même n’est pas un format de syndication. L’auteur et éditeur de hAtom, David Janes explique :

… hAtom n’a jamais été conçu pour être un « format de syndication » ni pour concurrencer Atom ou RSS. Il est simplement conçu pour décrire le microcontenu sur les pages web, comme des billets de blog. Nous avons utilisé Atom parce qu’il fournit une nomenclature bien définie pour décrire de tels éléments.

Ainsi, hAtom n’est pas exclusivement pour le contenu web qui pourrait être syndiqué. Néanmoins, pour les besoins de cet article, je parlerai des billets de blog, qui sont généralement syndiqués.

L’Essentiel

Avant de rentrer dans les détails de hAtom, jetons un œil sur quelques règles fondamentales (similaires à celles pour hCard et hCalendar) :

Les propriétés et sous-propriétés sont exprimées en valeurs class.
Du fait de la relation avec Atom, les propriétés et sous-propriétés spécifiées hAtom reflètent les concepts des éléments hAtom.
Les noms de propriété et sous-propriété sont sensibles à la casse.
La propriété « racine » ne peut pas être combinée avec n’importe laquelle de ses propriétés/sous-propriétés. De ce fait <p class="hfeed author"> est invalide.

Et tout comme avec les autres microformats, le marquage utilisé n’est pas important (même s’il devrait être à la fois valide et sémantique.)

Les valeurs Class (propriétés/sous-propriétés) sont celles qui définissent le microformats hAtom.

Le Profil

Si vous choisissez d’implémenter hAtom, vous devriez aussi référencer son profil dans le <head> des pages web qui incluent le microformat :

<head profile="http://purl.org/uF/hAtom/0.1/">

Pour hCard et hCalendar, j’ai mentionné l’usage du profil combiné, qui couvre tous les microformats non-draft :

<head profile="http://purl.org/uF/2008/03/">

Néanmoins, hAtom est une spécification draft et son profil n’est pas couvert dans le profil combiné. Aussi, vous aurez besoin de spécifier explicitement son profil.

Si vous référencez aussi le profil combiné, vous ajoutez simplement le profil hAtom (Le W3C autorise plusieurs valeurs de profil, séparées par un espace blanc) :

<head profile="http://purl.org/uF/2008/03/ http://purl.org/uF/hAtom/0.1/">

Exemple : Billet Unique

Bon, assez parlé des origines. Voici comment j’implémente hAtom sur ma page de contenu avec l’article complet :

<div class="hentry">
<h3 class="entry-title">L'Accessiblité Web Est Importante</h3>
<abbr class="published" title="2008-08-28T13:14:37-07:00">28 août 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaires</a></p>
<p><a href="#commentForm" title="Postez votre commentaire">Quelque chose à ajouter ?</a></p>
<div class="entry-content">
<p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
…
</div>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel="tag">accessibility</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel="tag">standards</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>
</dl>
</div>

Propriété Racine : `hfeed`

La racine de hAtom est hfeed, qui peut contenir une ou plusieurs entrées (dans cet exemple, les entrées sont des billets de blog).

Cette propriété racine est optionelle. Si elle n’est pas incluse, elle est supposée sur la page elle-même, ce qui est ce que j’ai fait (ou plutôt pas fait) dans l’exemple au-dessus.

Si c’est nécessaire, une page donnée peut avoir plusieurs hfeeds.

Propriété Requise : `hentry`

Chaque entrée doit être contenue avec la propriété hentry. Comme je le précisais, on peut appliquer là une ou plusieurs (illimité) propriétés hentry.

Pour cet exemple, il n’y a qu’un hentry parce que cette implémentation est sur une page avec le contenu complet d’un unique billet de blog. Je discuterai plus tard dans cet article de plusieurs entrées.

La propriété hentry contient toute l’information concernant l’entrée.

Sous-Propriété Requise : `entry-title`

L’une des sous-propriétés requises est entry-title, qui indique le titre de l’entrée.

Dans mon exemple, j’ai appliqué entry-title à un <h3> parce qu’en tant que titre, cela fait sens sémantiquement d’embarquer ça dans un titre.

Sous-Propriété Requise : `author`

Une autre sous-propriété requise est author, qui indique l’auteur de l’entrée.

Selon la spec., le contenu embarqué par la sous-propriété author doit aussi être marqué avec hCard appliqué à un élément <address>.

Attention : N’Affichez Pas le Nom de l’Auteur

Il existe néanmoins des cas, mon blog y compris, où les auteurs ne se soucient pas de lister le nom de l’auteur.

La spec. s’adapte à cette situation et lui permet d’être exclus du hentry si la page en elle-même contient l’information hCard dans un élément <address> assigné avec class="author".

Cette alternative est aussi expliquée dans les FAQ hAtom.

Du fait que j’ai cette configuration de hCard dans le pied de page de toutes mes pages, j’exclus author de mes implémentations hAtom et elles sont encore, techniquement, valides.

Pour les blogs avec plusieurs auteurs qui ne souhaitent pas afficher le nom de l’auteur, il n’existe pas actuellement d’alternative valide. Le contenu author doit être dans le hentry.

J’imaginerais bien qu’une solution CSS pour supprimer l’affichage visuel (display:none) dans ces cas pourrait être acceptable.

Attention : `address` Avec hCard

Cela amène une autre problématique : l’utilisation de <address> pour hCard.

Comme je le précisais dans la 3ème Partie, l’utilisation de <address> pour une hCard n’est valide que si la hCard est pour le propriétaire du document. La FAQ hCard déconseille d’utiliser <address> pour des hCards autres que le propriétaire du document.

Par conséquent, si les entrées hAtom sont rédigées par quelqu’un d’autre que le propriétaire du document, <address> ne serait pas l’élément sémantique approprié.

Cette problématique particulière est en train d’être discutée. Ce qui a été proposé est d’éliminer l’obligation d’utiliser <address>.

Sous-Propriété Requise : `updated`

La sous-propriété updated est aussi requise, et elle indique les date/horaire de mise à jour de l’entrée.

Il y a encore là une mise en garde pour updated : si cette sous-propriété n’est pas définie, la sous-propriété published est utilisée pour indiquer les date/horaire de mise à jour d’une entrée.

Dans mon exemple, vous remarquerez que je n’inclus pas une sous-propriété updated. Néanmoins j’inclus published.

Ce qui m’amène à …

Sous-propriété (optionnelle) : `published`

La sous-propriété optionnelle published est presque identique à updated dans le sens où elle renvoie les informations date/horaire pour l’entrée.

La différence principale étant que published est spécifique à quand l’entrée a été publiée pour la première fois, tandis qu’updated pourrait être la date de publication ou elle pourrait être des date/horaire ultérieurs quand l’entrée avait été mise à jour.

Il est aussi acceptable d’inclure à la fois published et updated pour décrire un élément unique contenant l’information de date/horaire :

<abbr class="published updated" title="2008-08-28T13:14:37-07:00">28 août 2008</abbr>

Dans mes implémentations, published seul est acceptable pour mes objectifs (et en plus sémantique), aussi c’est la sous-propriété que j’ai choisie de spécifier.

Datetime Design Pattern

Mise à jour : 02/06/2009

Le modèle-date-horaire est désormais déprécié en faveur du modèle-de-classe-value. Voir cet article en attendant la partie 8 de cette série pour en savoir plus sur ce nouveau pattern.

Tant pour updated que published, l’information date/horaire pour hAtom est recommandé pour être exprimée en utilisant le datetime design pattern:

<abbr class="published" title="2008-08-28T13:14:37-07:00">28 août 2008</abbr>

Ce pattern spécifie que l’élément conteneur est un <abbr> ayant une valeur d’attribut title qui reflète l’information date/horaire « lisible-par-les-machines » alors que l’information contenue (et qui s’affiche dans les navigateurs) est de l’information date/horaire « lisible-par-les-humains ».

Pour aller plus loin, le pattern datetime spécifie que la valeur title devrait être exprimée en format ISO 8601.

Pour conclure, comme je l’ai traité précédemment, il y a des problématiques d’accessibilité concernant le « datetime design pattern ».

A cette heure, ces problématiques n’ont pas été résolues, même si la communauté des microformats travaille sur cet objectif.

Sous-Propriété Optionnelle : `entry-summary`

La sous-propriété entry-summary est optionnelle. Elle indique un résumé ou un extrait de l’entrée. Cette sous-propriété peut être utilisée un nombre illimité de fois dans hentry.

Sur mon blog je ne crée pas de résumé pour mes articles, aussi je n’inclus pas cette sous-propriété dans mes implémentations hAtom.

Sous-Propriété Optionnelle : `entry-content`

Une autre sous-propriété optionnelle est entry-content qui indique le contenu complet de l’entrée.

Dans mon exemple, tout mon contenu d’article est embarqué dans un <div class="entry-content"> unique. Néanmoins, la sous-propriété entry-content peut être utilisée un nombre illimité de fois dans un hentry.

Optionnelle : rel-bookmark

hAtom spécifie aussi une valeur d’attribut rel pour indiquer le permalien de l’entrée : bookmark.

Dans la 1^èrePartie de cette série, j’ai parlé des microformats-basés-sur-rel, qui sont utilisés pour indiquer la relation des liens (<a>) vers le document de destination (href).

rel-bookmark est simplement un autre exemple de description d’un lien, ce n’est pas un microformat en soi. Il n’existe seulement que comme une partie de hAtom pour décrire le permalien.

Si vous l’ignoriez, le permalien est l’URL de lien permanent pour un billet/article/entrée.

Avec hAtom, vous ajoutez simplement rel="bookmark" au permalien de l’entrée :

<a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">L'Accessibilité Web Est Importante</a>

Vous pourrez remarquer que je n’ai pas de permalien dans mon premier exemple. Ceci parce que je suis généralement la règle du –of–thumb pour ne pas fournir un lien actif vers la page en cours (Nielsen’s #10 of the Ten Most Violated Homepage Design Guidelines).

Et parce que rel-bookmark est optionnel, mon hAtom demeure techniquement valide.

Si un hentry n’a pas de permalien indiqué, l’URL de la page est utilisée. Pour aller plus loin, si le hentry a un attribut id défini, cette valeur là est ajoutée à l’URL pour identifier les entrées individuelles.

Catégories en Combinant les Microformats

J’ai aussi mentionné le microformat rel-tag dans la 1^ère Partie.

Il est ajouté aux liens (<a>) qui indiquent ce qu’une page — ou une partie de cette page— traite. Basiquement, une organisation/categorisation avec le « tagage, » qui est très répandu dans les blogs.

hAtom tire partie de l’information rel-tag (la beauté de combiner les microformats) contenue à la fois dans hfeed et hentry :

Les liens assignés rel="tag" qui apparaissent dans un hfeed (souvenez-vous, ce peut être exclus et supposé sur la page) mais en dehors du hentry sont considérés comme des « feed categories. »
Les liens assignés rel="tag" qui sont contenus dans hentry sont considérés comme des « entry categories. »

Dans mon exemple, j’inclus des liens rel-tag dans mon hentry pour à la fois le lien « Category » et mes liens « Tags » :

<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaires/" rel="tag">Commentaires</a></p>

<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>

Remarquez que la spécification rel-tag exige que le lien destination (href) inclut la véritable valeur du « tag » comme segment final de la valeur d’URL. Ceci est connu comme « tagspace. »

Exemple : Plusieurs Billets

Maintenant que j’ai couvert les détails de hAtom, j’ai pensé que je pourrais aussi présenter un exemple sur la façon dont cela pourrait être implémenté pour aller plus loin qu’une entrée unique.

Sur mon blog, j’ai aussi ajouté hAtom sur ma page d’accueil pour présenter mes trois articles les plus récents :

<div class="hentry">
<h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Web Accessibility Is Important</a></h3>
<abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<div class="entry-content">
<p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
…
</div>
<p><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Continue Reading</a></p>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel="tag">accessibility</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel="tag">standards</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>
</dl>
</div>
<div class="hentry">
<h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/plateau/" rel="bookmark">Plateau</a></h3>
<abbr class="published" title="2008-08-27T13:59:51-07:00">Aug 27, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<div class="entry-content">
<p>As I posted previously, I'm doing the one hundred push ups challenge: a six-week program designed to get me able to do 100 consecutive push ups. I am now on my seventh week.</p>
</div>
<p><a href="http://www.ablognotlimited.com/articles/plateau/" rel="bookmark">Continue Reading</a></p>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/exercise/" rel="tag">exercise</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/fitness/" rel="tag">fitness</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/push+ups/" rel="tag">push ups</a></dd>
</dl>
</div>
<div class="hentry">
<h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel="bookmark">Getting Semantic With Microformats, Introduction</a></h3>
<abbr class="published" title="2008-09-05T07:05:34-07:00">Sep 5, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<div class="entry-content">
<p>I'm an organizer with a sometimes frustrating need to pay attention to the smallest details.</p>
…
</div>
<p><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel="bookmark">Continue Reading</a></p>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/French+translation/" rel="tag">French translation</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/hAtom/" rel="tag">hAtom</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/hCalendar/" rel="tag">hCalendar</a></dd>
…
</dl>
</div>

Remarquez que dans cet exemple, j’utilise plusieurs instances de hentry ; une pour chaque article.

Remarquez aussi que j’indique les permaliens pour chacune des entrées (dans les liens pour le titre et « Continue Reading ») parce que ce ne sont pas des liens vers la page en cours.

A part ces deux différences, hAtom est implémenté de la même façon que dans mon premier exemple.

Implémentations Potentielles

Pour aller au delà des deux exemples présentés ici, il existe beaucoup d’autres possibilités d’implémenter :

Une liste d’entrée qui apparaît sur une page d’archives
Les Résultats de recherche pour les entrées
Les « Bulletin board »
Les commentaires

J’envisage d’implémenter hAtom sur mes propres archives et les pages des résultats de recherche (et peut-être même les commentaires, parce qu’ils ont besoin de hCard) dès que j’aurai un peu de temps libre pour modifier mon marquage.

Statut Projet

De tous les microformats que j’ai couvert dans cette série, hAtom fût le plus difficile. Je soupçonne personnellement que cela est dû au fait que c’est une spécification à l’état de projet (draft).

Basiquement, les défis que j’ai rencontrés sont minimes, mais légèrement frustrants :

Il y a beaucoup moins d’information disponible sur la spécification hAtom et ses propriétés/sous-propriétés.
Il existe plusieurs problématiques ouvertes en cours de discussion qui font que c’est ambitieux d’implémenter hAtom (par ex. l’utilisation de <address>).
Bien moins de ressources/outils disponibles, comparé aux autres microformats.
Les générateurs disponibles hAtom et parseurs ne (me) semblent pas être aussi à jour que la spec en elle-même. Ainsi, ils ne semblent pas prendre en considération les mises en garde que j’ai évoquées. (par exemple exclure author et rel-bookmark).

A cette heure, de mon point de vue, c’est tout ce qu’on attend d’une spécification projet. Elle est encore sujette à modification, travaux et discussions.

Je ne pense pas néanmoins, que cela dise que vous ne devriez pas implémenter hAtom, ou au minimum commencer à vous y familiariser. Au lieu de cela, essayez-là et soyez conscients que la spécification est en état de flux (relativement minimal).

Outils & Ressources

Bien qu’ayant mentionné le fait qu’il y a comparativement bien moins d’outils et ressources hAtom disponibles, il en existe quelques-uns là :

Le Thème WordPress Sandbox est un thème « squelette » qui peut être utilisé comme base pour des thèmes WP personnalisés et il supporte hAtom.
Frances Berriman a créé une boucle WP hAtom PHP qui peut être ajoutée aux thèmes WP existants.
Michael Kaply a créé un script utilisateur hAtom pour l’extension Operator de Firefox. Ce script ajoute une fonctionnalité supplémentaire de mise en signets pour les occurences hentry. (Coup de chapeau à mon ami Chris Harrison pour m’avoir signalé ce script.)
Il existe un transformateur hAtom qui extrait hAtom d’une page web de manière à ce qu’il puisse être automatiquement transformé dans le XML pour un fil de syndication Atom.
hAtom2Atom utilise XSLT pour transformer un marquage hAtom en XML Atom.
Il existe un proxy distant utilisant hAtom2Atom construit par Luke Arno, tout comme un script filtre utilisant hAtom2Atom produit par Chris Casciano.
Optimus est un transformateur robuste de microformats qui supporte hAtom. En outre, il offre un validateur qui supporte hAtom.
Le transcodeur hAtom est un autre transformateur qui non seulement produit du Atom 1.0, mais aussi du RSS 2.0.

Dans la Jungle

Même si hAtom est une spécification projet (draft), il est en train d’être adopté :

Google a ajouté la fonctionnalité pour les liens permanents hAtom à son Bloc-Notes.
Le nouveau système de gabarits de mise en page de Blogger supporte hAtom.
Spinn3r a ajouté la fonctionnalité hAtom entry-content à son service 2.1 d’indexation de blogs.

Et il existe encore plus d’exemples hAtom dans la jungle.

Avantages

Syndication (X)HTML

Je pense que l’un des avantages les plus cools d’hAtom est son portentiel pour la syndication XHTML.

Dans la liste des outils et ressources, je mentionne deux transformateurs. Ceux-ci utilisent XSLT pour transformer le XHTML avec hAtom en XML pour un fil Atom ou RSS.

Ceci veut dire que vous n’avez pas besoin de créer ou maintenir des fichiers séparés Atom ou RSS XML pour la syndication. En utilisant simplement hAtom et l’un de ces transformateurs, la syndication XML est automatiquement générée.

Essayez vous-même. Tout ce que avez à faire est de faire précéder l’URL d’une page qui contient hAtom (par ex. http://www.ablognotlimited.com/) avec l’URL de l’un des transformateurs (http://transformr.co.uk/hatom/) :

<a href="http://transformr.co.uk/hatom/http://www.ablognotlimited.com/">Fil Atom pour A Blog Not Limited</a>

Le lien résultant crée le XML Atom et les utilisateurs le sélectionnent pour s’abonner :

page d'abonnement Google Reader pour A Blog Not Limited utilisant le transformateur hAtom

Personnellement je n’ai pas encore implémenté cette option sur mon site, parce que j’ai des fils RSS personnalisés pour lesquels je ne me soucie pas de perdre la personnalisation. Tout ceci pour ne pas dire, que j’ai encore à ajouter les fils Atom.

Néanmoins, ces transformations sont désormais sur ma liste de fonctionnalités à explorer pour ce blog.

Sémantique

Vous n’alliez tout de même pas penser que j’allais oublier ça, non ? Bien sûr que non.

En tirant partie des standards existants (les éléments et attributs XHTML), les microformats ajoutent de la valeur sémantique au contenu web. Et la sémantique aide à la fois les humains et les processus machines, à chercher et comprendre le web.

Les microformats encouragent aussi les standards du web … les approches d’un standard pour baliser le contenu, y appliquer de l’information de classe et de processus de développement.

La sémantique est bonne. Les standards sont bons. Les microformats sont bien.

A Venir dans la 6^ème Partie

Ceci conclut ma « couverture » du microformat en projet hAtom.

Dans Parvenir à la Sémantique, 6^ème Partie, je discuterai du microformat hResume pour l’information dans les résumés et CV.

Restez branchés !

Je veux un blog hAtomique !