Commentaires de blogs et sémantique

Andy Clarke, dans son ouvrage « Transcender CSS, Sublimez le design web » démontre un usage des composés XHTML pour décrire un dialogue en partant du principe qu’un dialogue peut être décrit comme une liste ordonnée de citations. Ce qui donne quelque chose du genre :

<ol>
<li>
<cite>speaker #1</cite>
<blockquote>
<p>Hello World !</p>
</blockquote>
</li>

<li>
<cite>the world</cite>
<blockquote>
<p>Hello speaker #1</p>
</blockquote>
</li>
</ol>

Ça m’a semblé d’un bon sens extraordinaire en le lisant et immédiatement se faisait l’analogie entre cette représentation d’un dialogue et l’énumération des commentaires sur un blog…

Honnêtement, je n’ai jamais été réellement convaincu par les méthodes utilisées en général dans les thèmes croisés jusqu’ici (toute plateforme confondue) comme l’utilisation de liste de définitions (<dl><dt /><dd /></dl>) ou d’une simple liste ordonnée <ol /> truffée de <div /> et autres <span />, certes parfois agrémentés à souhait de microformats mais sans réel « consistance » logique à mon sens.

Je m’interroge donc si l’utilisation d’une liste ordonnée <ol /> avec une balise <cite /> pour nommer l’auteur et <blockquote /> pour l’énoncé du commentaire auxquels on ajouterai quelques microformats bien pensés (tel que les hcard évidemment) ne serait pas une réponse à la fois plus simple et élégante pour présenter les commentaires sur un blog plutôt que les solutions pré-citées…

Le débat est ouvert… Si vous voulez bien m’aider dans mon brainstorming (ou mettre directement fin à mes illusions avec un « killer argument »), c’est très volontiers !

Continuez votre lecture

18 commentaires

Bob a dit le 10 novembre 2007 à 16:25

Deux trois remarques:
- On perd la notion de relation qui est totalement implicite avec les , c’est donc très pauvre sémantiquement.
- Si on a un seul commentaire, on a une liste avec un seul item? Que faire quand on en a aucun?* -> pas un problème en utilisant les .
- Vu que est un élément en ligne, je vois vraiment pas en quoi le mettre dans un au lieu d’un est une révolution en soit.
- Le blockquote, la liste, ça me parait un peu trop général à mon goût, je pense qu’on y gagnerai beaucoup plus à fouiller dans les balises en ligne comme .

Sinon j’ai regardé la présentation de Tantek Çelik que tu linkais sur twitter , et quand j’ai vu « Abuse! DLs are terms & descriptions  » j’ai bondi. Va lire la spec! Regarde les exemples! http://www.w3.org/TR/REC-html40/struct/lists.html
Pour le HTML5: « Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data. » http://www.whatwg.org/specs/web-apps/current-work/#the-dl

La page sur et est jouissive également.

Le seul bon point que je pourrais retenir c'est l'énumération automatique, sans utiliser du php, ni des counters css (bricolage totalement immonde que seul css pouvait nous pondre).

Ah si, c'est aussi beaucoup plus facile à produire à la chaîne qu'un beau design bien sémantique, notamment avec des outils comme Dreamweaver ou autre, il est beaucoup plus facile de cliquer sur le bouton "créer une liste" dans la toolbar que de se forcer à faire qqch de pas trop dégueulasse.

Sinon j'aurais plein d'autres raisons de vomir sur Andy Clarke, mais je vais m'abstenir.

* D'accord, la spec dit "ol and ul should contains 0 or more elements", mais prend une feuille de papier et essaie de m'écrire une liste avec 0 ou un élément. Ça s'appelle un aragraphe.

RépondreRépondre
Bob a dit le 10 novembre 2007 à 16:27

Commentaire un peu mangé, il a transformé mes simili-balises en … vraies balises.
Pas de prévisualisation :) ?

RépondreRépondre
burningHat a dit le 10 novembre 2007 à 17:17

[HS]Ouaip euh les soucis d’éditeurs pour WP sont le débat du jour… pas de preview ni de support des balises pour le moment en effet, désolé :$[/HS]

Le débat sur l’utilisation possible des listes de définitions est un sujet assez bouillant, c’est clair ! :D J’ai rien contre cette utilisation-là d’ailleurs, je ne suis juste pas totalement convaincu par ces différentes méthodes (celle exposée ici incluse)

Yep, c’est un peu pour les mêmes raisons que tu évoques que je suis en pleine réflexion justement et que je n’applique pas tout ça les yeux fermés… Justement parce que je ne suis pas forcément totalement convaincu !

Pour ce qui est de la gestion des commentaires lorsqu’il y en a 0, 1 ou plus, ça par contre désolé mais dans le cas qui m’intéresse, c’est un « faux argument »… Très facile de gérer les différents cas de figure à la volée dans le template PHP !

Pas moyen de comprendre tes 2 premiers arguments à cause de ce sacré [biiiip] de filtrage des balises ! désolé… si tu peux reformuler ça de façon « supportable » pour wordpress (qu’il est lourd ce filtre à la noix) ou me le mettre par mail, ce serait vraiment très sympa et j’en serais ravi !

RépondreRépondre
Bob a dit le 10 novembre 2007 à 18:49

>Très facile de gérer les différents cas de figure à la volée dans le template PHP !
Moué. Le but des CSS & co est un peu d’unifier tout ça, mettre un paragraphe à la place d’une liste s’il y a un seul commentaire me parait léger sémantiquement, serait mieux sémantiquement d’avoir le même tag pour tous les articles, qu’il y ai un commentaire ou plus.
J’avoue, là c’est plutôt du zealotisme aveugle et acharné de ma part.
>Pas moyen de comprendre tes 2 premiers arguments à cause de ce filtrage des balises !
Tu ne peux même pas voir le « code » original dans les commentaires?
Je voulais essayer WordPress un peu, mais je vais garder mon Dotclear au chaud, tiens [/troll]

Je peux pas faire ça là tout de suite (j’ai un copain qui m’invite à jouer à PES sur une télé 40 pouces tu comprends XD)
mais je te refais ça et je t’envoie un mail…
Continue de cogiter!

RépondreRépondre
burningHat a dit le 10 novembre 2007 à 20:25

@bob: « J’avoue, là c’est plutôt du zealotisme aveugle et acharné de ma part. » < - j’allais le dire ! :D t’as pas tort mais ça contredit totalement ta propre définition d’une liste d’un seul item du précédent commentaire (très juste d’ailleurs)… D’ailleurs après vérification d’usage sur des sites de typographie, ça serait totalement approprié mais bref…

Ehhh non, on peut pas voir le code original, tout est mouliné par un joyeux script de « nettoyage » avant insertion dans la database (ce qui du point de vue sécu est assez logique même si du point de vue pratique c’est hyper gonflant)…

Je comprends bien pour la soirée PES… Moi ce sera plutôt soirée Metroid sur la Wii donc j’adhère à ton argument :p

Merci pour le futur mail et bonne soirée !

RépondreRépondre
bruno bichet a dit le 12 novembre 2007 à 2:27

Ce qui me gêne dans l’exemple que tu donnes, c’est que la balise CITE n’est pas faite pour « nommer » l’auteur. Il me semble que cette balise fait double emploi avec Q (ou alors quelque chose m’a échappé).

Peut-être que l’auteur dont tu parle, s’est dit : « Tiens, pourquoi ne pas réserver CITE pour nommer l’auteur et Q pour les courtes citations ». D’autant plus que CITE est quand même rarement utilisée (à ne pas confondre avec « cite= » en tant qu’attribut des balises Q et BLOCKQUOTES.

Ce n’est pas totalement sans intérêt, mais bon, ça reste du « hold up » sémantique…. Autant utiliser les listes de définitions en attendant HTML5 qui aura certainement quelque chose à proposer :D

L’un des gros avantages des listes de définitions c’est que la balise DD accepte même des listes à l’intérieur, ce qui permet toutes les fantaisies. L’un des inconvénients, c’est que DT n’accepte pas de balises de type block. Mais bon, dans le cas des dialogues, ce n’est pas le plus important.

Un autre avantage de DL c’est qu’elle accepte une ou plusieur DT ainsi que un ou plusieurs DD, ce qui, dans le contexte des dialogues peut être intéressant si plusieurs personnes parlent en même temps !

Je dis ça surtout parce que je suis assez fan des listes de définition, même si on a tendance à tout vouloir leur faire faire ^_^v

RépondreRépondre
burningHat a dit le 12 novembre 2007 à 10:38

@Bruno: en fait CITE sert à contenir une citation *ou* une référence à d’autres sources d’après la recommandation. Et celle-ci de mettre en exemple :

As <cite>Harry S. Truman</cite> said,
<q lang= »en-us »>The buck stops here.</q>

More information can be found in <cite>[ISO-0000]</cite>.

Sur la base de cet exemple, ce n’est pas dénué de sens d’utiliser CITE pour nommer l’auteur, n’est-ce pas ?

Mmm l’argument sur plusieurs personnes qui parlent en même dans un dialogue est intéressant… Pas sûr qu’il s’applique au cas de ma recherche (représentation des commentaires d’un blog, donc « obligatoirement » linéaire) mais très intéressant, je note ! +1 pour toi !

J’ai une vraie question, c’est pas une critique hein, mais dis-moi, si tu es si fan des listes de définitions, pourquoi te contenter d’une simple liste ordonnées telle que proposé par SandBox pour tes blogs ? Parce que ça te parait bien (mieux?) ou « par défaut » ?

@Bob: j’ai bien reçu ton mail ! Merci beaucoup d’avoir pris le temps de m’envoyer ça, vraiment ! Je vais te répondre aussi ;) (et ça me parait tout à fait normal de « prendre soin de mes commentateurs » :p)

RépondreRépondre
bruno bichet a dit le 12 novembre 2007 à 11:49

@burningHat > Effectivement ça m’apprendras à lire les recommandations avec un peu plus d’attention. Du coup, ce nouvel usage (pour moi) de CITE ouvre de nouvelles perspectives ;) Ce qui n’empêche pas de l’utiliser au sein d’un balise DT ^_^v pour encore plus d’efficacité ;)

Concernant les balises utilisées dans la zone de commentaires, j’ai laissé les balises de sandbox, mais à la lumière de ton billet, je me demande si je ne vais pas changer tout ça un de ces quatre, pour placer cette balise CITE pour l’auteur en reprenant les microformats.

Il ne faut pas croire que les choix fait par le thème Sandbox sont ce qui se fait de mieux ;) Et le traitement des commentaires en est un bon exemple…

Quand on commence à se pencher sur la bonne utilisation des balise par rapport au messsage que l’on veut véhiculer, les questions l’emportent souvent sur les réponses.

Par exemple, j’ai du mal à utilise SPAN autrement qu’à l’intérieur d’un paragraphe P, comme c’est d’ailleurs souvent le cas dans Sandbox.

Sinon, tu viens de pointer du doigt le point faible de mon blog : le traitement des commentaires que je fais toujours en dernier : po bien ça … ^^

RépondreRépondre
burningHat a dit le 12 novembre 2007 à 12:23

Ca a du bon de se remuer les méninges de temps en temps n’est-ce pas ? ;)

On devrait se taper un article collectif sur l’ordre des travaux lorsqu’on aborde la création d’un thème ça pourrait être intéressant de comparer les différents workflow utilisés.

Oh je ne crois rien à priori à propos de rien, bien pour ça que je m’interroge autant… J’ai été très surpris des choix de Sandbox sur cette partie-là justement, j’ai trouvé le traitement terriblement verbeux pour « pas grand chose », limite brouillon par rapport au reste. D’ailleurs faudra que j’explore un peu mais je crois avoir soulevé un bug énormement pénible avec SandBox lorsqu’on le régionalise et la déclaration des widgets.

Tiens, j’ai le même « problème » avec les balises SPAN, c’est marrant !

RépondreRépondre
fisoan a dit le 13 novembre 2007 à 16:17

Alors là j’ai rien compris à ton billet! Mais je dirais juste que si oui je trouve que c’est une tare d’être suisse (je sais c’est pas bien de dire ce genre de choses..) par contre c’est plutôt bien d’être jurassien à mon avis!! Mieux que vaudois en tous cas!

RépondreRépondre
burningHat a dit le 13 novembre 2007 à 16:42

Tiens c’est rigolo, moi c’est à ton commentaire que j’ai rien compris… :D Quand à ma description personnelle (qui n’a rien à voir avec ce billet mais passons), y a des choses qui sont à prendre avec certain recul et qui s’expriment au second degré ;) (j’y suis trèèèès bien dans le Jura !)

RépondreRépondre
fisoan a dit le 13 novembre 2007 à 18:00

oui oui désolée ça n’avait rien à voir avec le billet!!

RépondreRépondre
kov a dit le 13 novembre 2007 à 20:06

Pour les Killer Arguments demande à ta femme ;-) elle excelle dans ce domaine ^^

:-D

RépondreRépondre
burningHat a dit le 13 novembre 2007 à 21:21

@Kov : euhhh je passe mon tour, ok ? :D

RépondreRépondre
bruno bichet a dit le 13 novembre 2007 à 23:29

Je vous laisse à vos private jokes vaudou-jurassico-suisses (j’ai déposé la marque) :D

RépondreRépondre
burningHat a dit le 14 novembre 2007 à 7:36

Bon stop les private jokes, mon brainstorm n’avance pas vite avec ça ! (sympa ta marque déposée en tout cas, Bruno !)

RépondreRépondre
Syklop a dit le 14 novembre 2007 à 9:54

Comment ça, être vaudois c’est moins bien qu’être jurassien ???
Et le papet, alors ???

Je vais attaquer ce blog diffamatoire en justice.

Bon. OK, je sors.

RépondreRépondre
burningHat a dit le 14 novembre 2007 à 10:12

@Syklop: j’ai dis « stop les private jokes »… cependant ce blog n’est pas diffamatoire, c’est l’avis de Fisoan (à priori) qui te choque mais cet avis ne reflète pas le mien. En plus j’adore le papet vaudois… Rien que d’en parler, ça me donne faim :p

RépondreRépondre

un trackback

Un peu de littérature (de geek ou non) « burningHat - 21 janvier 2008 à 21:46

[...] le conseiller à un débutant en la matière). C’est plutôt une vision d’un designer incitant à la réflexion et apportant des pistes très intéressantes à explorer sur la manière d’aborder les [...]