Thème Dotclear 2, html 5 et sémantique

octopus984 a écrit :
Il pourrait être judicieux, dans un article, de séparer par des sections les différentes composantes :
- contenu
- annexes
- commentaires
- rétroliens

Les annexes font partie du contenu de l'article, pour moi, bien qu'à la saisie les deux soient gérés différemment. Les commentaires et rétroliens peuvent être groupés (sous l'intitulé «Discussion» ou «Réactions» par exemple).

Maintenant, est-ce utile de faire deux SECTION, une pour le contenu et une autre pour les discussions? L'exemple donné par la spec c'est:

<article>
  <header> Titre et infos </header>
  Ici le contenu de l'article
  <footer> Méta-données (peut se placer après le header, voire avant, dans certaines mises en page) </footer>
  <section>
    Commentaires:
    <article>Un commentaire</article>
    <article>Un autre</article>
  </section>
</article>

Cet exemple laisse voir une hiérarchie entre le contenu de l'article (directement dans la section ARTICLE) et les commentaires placés dans une sous-section (SECTION). Si tu mets le contenu et les commentaires chacun dans une SECTION, tu perds cette hiérarchie.

Remarques en vrac:

- Les LINK rel=contents|section|chapter, j'ai toujours trouvé ça d'une flagrante inutilité. Il est peut-être temps de laisser tomber, et de gagner au passage en légèreté des pages (même si ça aura pas un impact flagrant, on est d'accord)?

- Les feuilles de styles sont appelées avec la syntaxe @import, qui pose des problèmes à IE (ça casse les téléchargements parallèles, en gros tes deux feuilles de styles vont être téléchargées l'une après l'autre au lieu d'être chargées en parallèle, ce qui peut avoir un impact sensible sur une connexion avec une latence forte). On utilisera plutôt <link rel="stylesheet" media="..." href="...">.

- Tu peux supprimer tous les type="text/javascript" et type="text/css" si tu le souhaites (valeurs par défaut en HTML5).

- Les scripts JS, à appeler en fin de document (avant </body>) pour éviter de bloquer le rendu de la page. On laissera juste le html5shiv pour IE 8-, nécessaire au rendu de la page. Par contre, il vaut mieux placer ce dernier avant l'appel des CSS (d'après le site de ce projet).

- La ligne <style type="text/css" media="screen">@import url(http://pragmafilm.lombre.net/?pf=odt/style.css);</style> est générée par un plugin? Du coup les styles ne peuvent pas être rajoutés à la feuille de styles principale?

- C'est dommage d'avoir le nom du site en H1, et le titre de l'article en H2, y compris sur les pages d'article. OK pour la page d'accueil, mais sur les articles eux-mêmes avoir le titre de l'article en H1 serait pas mal. (De mémoire, en HTML5 on a le «droit» d'avoir un plan du document qui ne commence pas par H1. Faudrait que je revoie ça.)

- Les FIELDSET sans LEGEND, ça sert pas un peu à rien? Mais bon, ça fait pas de mal non plus.

- Détail de rien: pour l'attribut pubdate, les syntaxes acceptées sont pubdate seul, pubdate="" et pubdate="pubdate". Je préfère la première, et éventuellement la troisième si on tient à mettre une valeur. Tu utilises la deuxième (pubdate=""). Of course tu fais comme tu veux.

Pas trouvé d'autre problème ou question après une première lecture du code. Je ne commente pas l'usage de RDF et des roles ARIA, que je connais mal.
Modifié par Florent V. (21 Apr 2010 - 22:13)

octopus984 a écrit :
Il pourrait être judicieux, dans un article, de séparer par des sections les différentes composantes :
- contenu
- annexes
- commentaires
- rétroliens

Je rejoins l'avis de Florent ci-dessous.

octopus984 a écrit :
Concernant les annexes, il a un petit soucis je pense dans le billet Les œufs dans le même panier sont cassés, où la première pièce jointe est une vidéo (balise video), et non une url vers le fichier.

Dans les gabarits originaux (en xhtml 1.0 strict), c'est un player flash qui est affiché (d'ailleurs ici en contenu alternatif à video). Tu as raison je vais mettre en plus un lien vers le fichier.

octopus984 a écrit :
Tu pourrais également ajouter l'attribut placeholder pour les champs de formulaire.

Je vois plus l'utilité de cet attribut pour les champs sans labels (mais avec un title) comme le champs pour la recherche.
Modifié par Patidou (22 Apr 2010 - 10:23)

Florent V. a écrit :
Remarques en vrac:

Aïe

Florent V. a écrit :
- Les LINK rel=contents|section|chapter, j'ai toujours trouvé ça d'une flagrante inutilité. Il est peut-être temps de laisser tomber, et de gagner au passage en légèreté des pages (même si ça aura pas un impact flagrant, on est d'accord)?

Il paraît que les robots indexeurs les utilisent (à vérifier). Sur le forum dotclear, un utilisateur d'Opera utilisent les fonctionnalités de ce navigateur pour se balader rapidement dans le site grâce aux link. Je vais laisser pour l'instant.

Florent V. a écrit :
- Les feuilles de styles sont appelées avec la syntaxe @import, qui pose des problèmes à IE (ça casse les téléchargements parallèles, en gros tes deux feuilles de styles vont être téléchargées l'une après l'autre au lieu d'être chargées en parallèle, ce qui peut avoir un impact sensible sur une connexion avec une latence forte). On utilisera plutôt <link rel="stylesheet" media="..." href="...">.

OK. Je vais changer ça. Dans mon futur thème perso, je compte tout regrouper dans un fichier.

Florent V. a écrit :
- Tu peux supprimer tous les type="text/javascript" et type="text/css" si tu le souhaites (valeurs par défaut en HTML5).

Ok.

Florent V. a écrit :
- Les scripts JS, à appeler en fin de document (avant </body>) pour éviter de bloquer le rendu de la page.

Là j'ai des contraintes liées à dotclear: je dois laisser jquery dans le head, les plugins peuvent écrire dans le head ou avant le </body>; pour des raisons historiques, la majorité insère leurs fichiers js dans le head. Bien sûr si c'était pour un thème ne devant pas être redistribué, il n'y aurait pas de problèmes.

Florent V. a écrit :
On laissera juste le html5shiv pour IE 8-, nécessaire au rendu de la page. Par contre, il vaut mieux placer ce dernier avant l'appel des CSS (d'après le site de ce projet).

Ok je changerai ça.

Florent V. a écrit :
- La ligne <style type="text/css" media="screen">@import url(http://pragmafilm.lombre.net/?pf=odt/style.css);</style> est générée par un plugin? Du coup les styles ne peuvent pas être rajoutés à la feuille de styles principale?

Oui c'est un plugin, à mon avis c'est un bug, il n'est pas activé sur ce blog de test.

Florent V. a écrit :
- C'est dommage d'avoir le nom du site en H1, et le titre de l'article en H2, y compris sur les pages d'article. OK pour la page d'accueil, mais sur les articles eux-mêmes avoir le titre de l'article en H1 serait pas mal. (De mémoire, en HTML5 on a le «droit» d'avoir un plan du document qui ne commence pas par H1. Faudrait que je revoie ça.)

Toujours pour rester compatible j'ai préféré garder une hiérarchie à l'ancienne, plus accessible. Mais pourquoi pas sur un thème plus perso.

Florent V. a écrit :
- Les FIELDSET sans LEGEND, ça sert pas un peu à rien? Mais bon, ça fait pas de mal non plus.

OK je vais regarder si je peux les supprimer.

Florent V. a écrit :
-- Détail de rien: pour l'attribut pubdate, les syntaxes acceptées sont pubdate seul, pubdate="" et pubdate="pubdate". Je préfère la première, et éventuellement la troisième si on tient à mettre une valeur. Tu utilises la deuxième (pubdate=""). Of course tu fais comme tu veux.

Oui comme c'est une syntaxe xmlisée pour le contenu des articles, j'ai préféré l'utiliser partout. Et puis si un jour on passe à xhtml5, il n'y aura pas trop de boulot à faire.
Bon là j'ai eu la flemme de répéter l'attribut en valeur.

Florent V. a écrit :
Pas trouvé d'autre problème ou question après une première lecture du code. Je ne commente pas l'usage de RDF et des roles ARIA, que je connais mal.

Le dublin core était dans les gabarits d'origine, je l'ai laissé.

Pour ce qui est des roles, j'ai beaucoup appris sur le blog de Bruce Lawson et html5doctor.


Merci pour toutes ces remarques.
Modifié par Patidou (22 Apr 2010 - 11:12)

Salut,

Patidou a écrit :

Toujours pour rester compatible j'ai préféré garder une hiérarchie à l'ancienne, plus accessible. Mais pourquoi pas sur un thème plus perso.

En quoi est-ce plus accessible? Personnellement je préfère n'avoir qu'un seul H1 correspondant au titre de la page et des h2 pour les autres grand ensembles mais qui ne correpondent pas forcément au contenu de la rubrique.

Exemple :
<h2 class"hide">Rubriques</h2>
<h1>Titre de la page</h1>
"<h2>Contenu permanent</h2>"

A ce sujet > http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42

Patidou a écrit :
Oui comme c'est une syntaxe xmlisée pour le contenu des articles, j'ai préféré l'utiliser partout. Et puis si un jour on passe à xhtml5, il n'y aura pas trop de boulot à faire.
Bon là j'ai eu la flemme de répéter l'attribut en valeur.

Je ne sais pas pour XHTML5, mais en XHTML1 la syntaxe attribut="" pour les attributs booléens n'est pas valide, il faut utiliser attribut="attribut" (true) ou omettre l'attribut (false).
Ben la syntaxe XML pour les attributs «binaires» c'est attribut="attribut", pas attribut="", il me semble.
Hmm, après vérification avec validator.nu la syntaxe attribut="" semble valide en XHTML5. Ça pourrait être un bug du validateur, mais la spec ne dit pas que cette syntaxe n'est pas valide en XHTML5.