Polyvalence : un thème (x)HTML5/CSS3 pour dotclear 2.2

Par Ombre le - Dotclear - Lien permanent

Enfin ! Après des mois de gestation, mon premier thème pour Dotclear 2.2 est enfin terminé ! On verra à l’usage si il n’y a pas de problème, c’est pour ça qu’il porte le numéro de version 0.1.

Ce thème (en pièce jointe à ce billet) est d’application sur ce blog, vous pouvez donc vous rendre compte de visu à quoi il ressemble.

En gros, voici les caractéristiques :

  • Basé au niveau code sur le thème par défaut Blowup (hormis le champs recherche intégré).
  • Gabarits au format xhtml 5 valides (documents « polyglottes » : la syntaxe xhtml 5 est valide html 5).
  • Version Mobile intégrée.
  • IE8 et prédécesseurs ne comprennent pas les nouveaux éléments (header, footer, nav, article, etc), un script est inclus pour les faire reconnaître.
  • Les formulaires sont de types webforms 2.0 : il y a une vérification avant envoi suivant leur types (email, url, etc). Certains navigateurs affichent un message quand les données ne sont pas correctes. IE considérera ces champs comme des champs textes standards : la validation se fera après l’envoi, comme avant.
  • Utilisation de css 3 pour les coins arrondis, les ombres, les dégradés et l’aide à la validation des formulaires. IE<9 affichera des fonds unis et des coins carrés, je n’ai pas voulu utiliser des filtres ou des scripts qui plomberaient les performances du navigateur pour le mettre à niveau.
  • Utilisation de @font-face pour une police personnalisée sur les titres de billet et le titre du site. Ça fonctionne également dans IE, depuis la version 5.5 (hé oui !).
  • Si le javascript du visiteur est actif, il est ajouté une classe «hasJS» sur l’élément <html>.
  • Intégration des gabarits de divers greffons :
  • Fichier css unique contenant les styles écrans, mobiles et impression (économie de requêtes http), y compris ceux de Gallery.
  • Vous pouvez voir ce que donne la version mobile en réduisant la largeur de la fenêtre du navigateur en dessous de 500 pixels.

Comme vous pouvez le voir, je ne suis pas designer, j’espère ne pas avoir fait un truc trop moche… [1]

Foire aux questions

Si j’ai bien compris il est possible d’envoyer les pages en application/xhtml+xml au lieu de text/html comme d’habitude et d’avoir ainsi du xhtml5 ?

C’est exact, il suffit de décommenter une ligne dans le fichier _public.php du thème tout y est indiqué. Il suffit de l’activer dans les préférences du thème.

Attention, si vous activez cette option :

  1. IE<9 ne pourra plus afficher les pages et vous proposera de les télécharger.
  2. Ceci impacte toutes les pages html, y compris celle des plugins.
  3. Les pages et les billets doivent être valide sinon l’affichage se bloque avec un message d’erreur.
  4. S’il vous prend l’envie de reprendre une page de plugin en xhtml 5 en la copiant dans le dossier tpl du thème, il y certaines contraintes à respecter. Je ferai un billet là-dessus.
  5. Bref, si vous ne savez pas exactement ce que vous faites n’activez pas xhtml5.

Mais alors… Je vais pouvoir utiliser les balises <audio> et <video>, et ça sera compatible IE ?

C’est possible en effet (voir ce billet). En wiki, vous pouvez utiliser ce genre de code :

///html
<video height="300" width="400" controls="controls">
	<source src="http://lombre.net/public/video.mp4" type="video/mp4"/>
	<source src="http://lombre.net/public/video.ogv"  type="video/ogg"/>
	<object type="application/x-shockwave-flash" data="http://lombre.net/?pf=player_flv.swf" height="300" width="400">
		<param name="movie" value="http://lombre.net/?pf=player_flv.swf" />

		<param name="wmode" value="transparent" />
		<param name="allowFullScreen" value="true" />		
		<param name="FlashVars" value="flv=http://lombre.net/public/video.mp4&amp;width=400&amp;height=300&amp;margin=1&amp;showfullscreen=1&amp;showvolume=1&amp;showtime=1" />
		<a href="http://lombre.net/public/video.mp4">Vidéo au format MP4</a> ou <a href="http://lombre.net/public/video.ogv">Vidéo au format OGV</a>

	</object>
</video>
///

On peut aussi ajouter le format webm, le format mp4 doit toujours se trouver en premier (bug sur iPad). Si le navigateur ne comprend pas les nouveaux éléments HTML, il utilisera le lecteur flash.

Xhtml5 a l’air très exigeant, quels sont les avantages de son utilisation par rapport à html5 ?

En attendant que tous les navigateurs dispose d’un vrai moteur html5, il est possible d’insérer du svg inline (code directement dans le billet, pas dans un fichier externe), ou des équations, du RDFa, etc.

Nos billets actuels sont-ils valides (x)html5 ?

À 99% oui. Le wiki génère actuellement des <acronym> qui ont été supprimé de la norme, à la place il faut utiliser <abbr>. Je travaille actuellement sur un greffon (merci Moe) qui devrait régler le problème. Mais ne vous inquiétez pas : les navigateurs laissent passer les acronymes sans rouspéter.

Attention : xhtml5 n’aime pas non plus les entités littérales (&nbsp;, &eacute;, etc) autres que celles de base (&lt;, etc), par contre les numériques pas de problèmes.

Ressources

Et maintenant ?

On se retrouve sur le forum Dotclear pour les problèmes techniques et les suggestions. ;-) Pour rester au courant de l’actualité de ce thème vous pouvez suivre le tag «Polyvalence» ou son flux Atom vous abonner aux commentaires de ce billet.

 : le thème se trouve maintenant sur DotAddict et donc également dans l’installeur DotAddict.

Versions

0.1

Heu… Cette version disponible au téléchargement n’est plus l’originale, suite à une erreur de ma part… On passe à la suivante.

0.2

  • Plus large pour que les images des galeries s’affichent correctement.
  • Optimisation des images : les petites images (flux, annexes, commentaires) sont incorporées dans le fichier css grâce aux data/uri. On économise des requêtes http, même si le fichier css est un peu plus gros, le gain en vitesse est bien là. Pour IE[2], un fichier css supplémentaire est accessible via les commentaires conditionnels, là on utilise les images de manière traditionnelle avec des urls. Ces images on été optimisée avec smush.it (c’est aussi important de le faire avant la conversion en data/uri).
  • Effacement des attributs de largeur sur les <input> et <textarea>.
  • Le fichier ZIP en annexe est à jour (30/10/2010).

0.3

  • Correction du champs de recherche et du texte fantôme.
  • Smilies de Maurice Svay.

0.4

  • Photos des galeries avec ombrage
  • Amélioration des styles d’impression :
    • Mise en page.
    • Correction d’un bug : Firefox ne pouvait qu’imprimer la première page.

0.5

  • Redimensionnement des images, iframe et object pour ne plus qu’ils débordent en version mobile.

0.6

  • Correction d’un bug à l’impression sur safari Mac.
  • Ajout de link canonical pour éviter le contenu en double (au niveau indexation des moteurs de recherche) des billets et pages annexes (déjà présent sur le thème gallery).
  • La taille des pièces jointes est visible directement et non plus dans une infobulle.

0.7

  • Correction d”un bug dans le dégradé
  • Activation des data/uri pour IE8

1.1

  • La css devenant trop grosse, séparation en fonts.css et style.css.
  • Ajout de rôle ARIA supplémentaire pour l’accessibilité.
  • Ajout des gabarits authorMode.
  • Préférence pour l’envoi en xhtml5, plus besoin de bidouiller.
  • Le champs recherche dispose d’un historique.
  • Les liens sur les photos originales dans les billets images ont un «(taille réelle)» renseigné.
  • Diverses petites retouches…

Commentaires

1. Le par Guillaume

Salut Ombre
Merci pour le thème et ton com de rappel sur mon blog :)

Je vais essayer de tester ça dès que possible

2. Le par Dsls

Sacré boulot, bravo :)

3. Le par Pierre

Très intéressant, bravo et merci.

Je vais le télécharger pour l’ausculter dès que j’ai un peu temps.

Bonne continuation,
Pierre

4. Le par Ombre

Merci. :-)

Attention, j’ai encore des petites choses à modifier et mettre à jour le zip. ;-)

5. Le par Ombre

Version 0.2 terminée, zip et billet à jour. :-)

6. Le par Ombre

Et hop?! Version 0.3. :-)

7. Le par Pierre

Merci pour tout. ;)

Pierre

8. Le par Ombre

Version 0.4 :-)

9. Le par Ombre

Version 0.5.

10. Le par Ombre

Version 0.6 dispo :-)

12. Le par Ombre

Merci Nico. ;-)

13. Le par Gradiva

Bonjour,

Je pense pouvoir le corriger assez simplement mais le background s’arrête en milieu de page et devient une couleur unie.

Ce n’est pas grave mais il y a-t-il une raison connue c’est sur Safari? Merci.

14. Le par Ombre

Dans Safari 5, il s’agit d’un dégradé fixe allant jusqu’au blanc. Je ne sais pas comment c’est rendu dans une version antérieure. ;-)

15. Le par Gradiva

En fait le dégradé se répète tous les 700px à la louche.

17. Le par Ombre

Effectivement, je n’avais pas mis à jour la css, voici la version 0.7 avec la correction, plus la gestion des datas/uri pour IE8. ;-)

18. Le par Gradiva

Merci Ombre.

19. Le par gradiva

Une question, je trouverais intéressant de retirer les tags pour la configuration home des posts et version mobile, ça serait compliqué?

20. Le par Gradiva

“et version mobile” erreur, lire “de la version mobile”.

21. Le par gradiva

Par contre j’ai 2 champs recherche sur le site?

22. Le par Ombre

Pour enlever les tags des billets (en mode post) et sur la home :

.dc-home .post-tags {display: none};
.dc-post .post-tags {display: none};

À toi de placer ces lignes au bon endroit (version mobile ou pas). ;-)

23. Le par Ombre

Le thème intègre un champs de recherche html5 dans le gabarit. Tu peux enlever celui qui est dans la liste des widgets.

24. Le par Gradiva

Merci, je continue de faire le fâcheux, où supprimer les parenthèses autour de mobile? Merci.

25. Le par Gradiva

En fait les les tags n’apparaissent pas sur la home en version mobile. Non?

26. Le par Ombre

Merci, je continue de faire le fâcheux, où supprimer les parenthèses autour de mobile? Merci.

Voici l’endroit où enlever les parenthèses :

html[lang=fr] #top h1:after {
content: " (mobile)";
font-size: 30%;
font-family: arial, helvetica, sans-serif;
}

27. Le par Ombre

En fait les les tags n’apparaissent pas sur la home en version mobile. Non?

Apparemment, tu parles de la liste des tags dans la colonne de droite. En version mobile, si le widget est utilisé, la liste n’est pas présente mais il y a bien le titre et le lien vers la page des tags. Sur mon site, le widget est en bas de page avant les flux atom. ;-)

Je viens de voir 2 ou 3 petits problèmes, je vais mettre à jour le thème dans la soirée.

28. Le par Ombre

Bon j’ai corrigé le thème, ça devrait être bon maintenant… :-)

29. Le par Gradiva

Non je parlais des tags du titre du billet en mode “home” sur la version mobile.

30. Le par blog bretagne

joli, faut que je teste avec d’autres navigateurs pour voir le résultat

31. Le par Ombre

Pour info, je suis en train de bosser sur la version finale 1.0. Au niveau html, il y a déjà pas mal de changements que vous pouvez constater sur ce site :

  1. Utilisation des commentaires conditionnels sur l’élément html : un seul fichier css pour IE6&7 et les navigateurs modernes, au lieu de 2 auparavant, donc une seule requête http, donc un chargement plus rapide.
  2. Appel à jQuery en fin de page pour un affichage plus réactif, c’est la version sur le cdn de google qui est utilisée, si le site de google est down, on utilise la version «locale». Si vous avez encore des plugins qui utilisent jQuery dans le head de la page, harcelez leurs auteurs pour qu’ils les placent en fin de document. ;-)
  3. Utilisation de Modernizer pour activer les éléments qui ne sont pas compris par IE<=8. De plus ce script donne plein d’informations sur les capacités du navigateur en ajoutant des classes sur l’élément html.

Ces améliorations sont tirées du site HTML5 Boilerplate, je vous recommande le fichier .htaccess même si vous n’utilisez pas html5 et même si vous n’utilisez Dotclear, vos visiteurs vous diront merci. :-)

Choses encore à faire :

  1. Retouches CSS ici et là.
  2. Amélioration de l’accessibilité du code html5.
  3. Un peu de RDFa.
  4. Préférences pour l’envoi ou non des pages en application/xhtml+xml.
  5. Et le gros morceau : le wiki qui génère du code xhtml5 (gloups).

Je préfère ne pas fournir de version intermédiaire avant la version finale, inutile de demander donc… ;-)

32. Le par Osku

Pour le wiki, il te faut juste l’histoire du <abbr> ou plus ?

Je peux avoir une version intermédiare ? :D

33. Le par Ombre

Oui pour les ABBR et je pensais aussi, pour les notes, à quelque chose comme ça (voir code source)…

En fait les liens vers les notes auraient un rel="note", les notes seraient comprises dans un <aside> ayant le role note. Le titre serait un <h3> et non pas un <h4> comme dans blowup.

Tiens, voici la dernière version du thème, mais c’est bien parce que c’est toi. ;-)

P.S. : comment tu as fait pour utiliser un <small> dans les commentaires? O_o

34. Le par Ombre

Ceci dit c’est peut-être mieux d’utiliser un <div> au lieu de <aside> sinon ça risque de casser si l’utilisateur repasse sur un thème xhtml 1.0.

35. Le par Osku

Merci pour cette version.

Par ailleurs, le rendu des tableaux dans les commentaires n’est pas très joli :

Un joli tableau à l’ombre

Site

Site
OskuURL

Tu peux bien sûr nettoyer ce commentaire.

36. Le par Ombre

Je vais regarder ça… C’est marrant je me souviens pas t’avoir donné les clés de mon blog. :-/

37. Le par Osku

Je n’ai pas les clés..

J’utilise un élément mal connu de la syntaxe wiki.

38. Le par Ombre

Compris :-D

39. Le par Le chef sorti du placard

Salut, et merci pour ce magnifique thème que j’ai quelque peu modifié :)
J”ai un problème sur lequel je bute… même en installant le thème sans les modifications apportées par mes soins, je n’arrive pas à faire fonctionner les plugins lightbox ou colorbox… Je suis en multi-blog avec la dernière version de Dotclear et je sèche…

40. Le par Ombre

Salut chef,

Lightbox a l’air d’être abandonné, il faut utiliser Colorbox. Comme ce thème est un peu particulier (code xhtml5), il faut indiquer à colorbox où trouver les images à afficher en grand. Pour cela, il suffit d’aller sur la page de configuration du plugin, cliquer sur Configuration avancée, et dans la case se trouvant dans la partie Sélecteurs, ajouter «article.post».

Explication pour les techos : les thèmes habituels enveloppe le contenu des billets dans un élément html <div> ayant la classe post, en html5 il existe un élément tout prêt : <article> qui dans ce thème possède aussi la classe post.

41. Le par Ombre

Note : si vous utilisez la version du thème en commentaire, vous pouvez désactiver la css du plugin wikibar, tout est prévu dans le thème.

43. Le par Ombre

L’aspect des tableaux a été amélioré, entre autres, avec la règle css min-width sur 200 pixels. Malheureusement, cette règle (avec les tableaux) ne fonctionne pas pour l’instant avec les navigateurs basés sur webkit (Safari, Chrome, etc) : c’est un bug, ça devrait être réglé dans une prochaine version. ;-)

44. Le par Kagou

Excellent ! Merci. Tout petit regret, la perte du configurateur de thème de blowup sur lequel il est pourtant basé.

45. Le par Kagou

Arf j’ai juste un souci avec les arrondis du bandeau. J’ai ajouté une image en background mais j’ai perdu les coins arrondis. Sniff :(

46. Le par Ombre

Salut Kagou,

Voici la version 1.0 du thème (fichier zip), pour l’image de fond je regarderai ce soir. ;-)

Créer un configurateur demande de solides connaissances en php et les miennes sont plutôt réduites, néanmoins il n’est pas impossible que je m’y plonge en me basant sur le thème Ductile. ;-)

47. Le par Ombre

Bon j’ai ajouté une image «Live» avec firebug sur #top et j’ai bien eu les coins arrondis…

48. Le par Kagou

Argll. En effet là, avec la v1, les arrondis sont bien présents :) Par contre j’ai perdu l’affichage des cartes du plugin gestionnaire d’évènements :
http://ascl.fr/index.php?day/2011/0…

49. Le par Kagou

Sur le lien précédent au dessus des données GPS il y a une carte. Et sur la page d’accueil, sous “Où vont nos équipes ?” il y a une carte de france.

50. Le par Kagou

Lol. On perd également le bouton “facebook” qui se trouve avant celui de twitter. Je crois que je vais revenir à la version précédente ;) Merci.

51. Le par Ombre

Kagou,

C’est normal que, peut-être, certaines choses déconnent : je ne pouvais pas intégrer toutes les pages de tous les plugins de dotaddict.org. Si je trouve un peu de temps cette semaine, je ferai des tests avec le plugin events et je les convertirai en (x)html5. Je te tiens au courant. :-)

Je voudrais revenir sur un point : quand je dis dans le billet que je me suis basé sur le thème blowup, c’est au niveau de la structure html de la page, dont les class et les ID. C’est pour ça que les css du thème fonctionnent sur des plugins qui eux sont toujours xhtml 1.0. La preuve : ta page events qui a pris le design général du site. Je ne parlais pas du configurateur. ;-)

Au niveau de Facebook, il y a un support minimum avec les metas qui vont bien, c’est possible que ça interfère avec ton plugin. Je jeterai un œil également.

@+

52. Le par Kagou

Merci m’sieur :)

53. Le par Kagou

Tu peux m’expliquer le principe dont tu parles. Convertir les fichiers d’un plugin ne veut il pas dire que lors de la mise à jour du plugin cela sera perdu ? Éventuellement peux tu m’indiquer le pourquoi du fait que les plugins ne fonctionnent plus et vers où regarder pour réparer cela. J’aime bien devenir plus intelligent :)

54. Le par Ombre

Les plugins comme gallery, static page, blogroll page, etc, génèrent leurs propres pages HTML. Les gabarits de ces pages «spéciales» sont stockées dans le dossier du plugin concerné. Dotclear vérifie dans le dossier du thème si les gabarits n’y sont pas incorporés sinon il utilise ceux par défaut du plugin. C’est pour ça, par exemple, que les pages galeries sur ce site sont en HTML5 car je me suis amusé à reprendre les pages par défaut du plugin (en xHtml 1.0) et les décliner en HTML5 que j’ai ensuite incorporé au thème.

Il n’y a pas d’incidence avec les mise-à-jour des plugins, sauf si un plugin change radicalement ses balises dans le gabarit (jamais encore eu le cas).

55. Le par Ombre

Version 1.1

56. Le par jbusprod

Salut patidou!!

J’arrive sur ton site suite a une discution sur le forum d’alsacreation et je vois que ton theme fonction plutot bien avec les medias query.

Malgres tout il y a encore un trucs qui me chifonne, comment arrive tu a ne pas afficher les menus en version mobile?

En gros que ta page d’accueil a un menu et je trouve ca plutot agreable.

En tout cas ton blog est instructif merci!!

57. Le par Ombre

Salut,

Si tu parles de la colonne de droite, elle est en bas de la page. Tu peux fouiller la css c’est commenté. ;-)

58. Le par Ombre

Je crois que j’ai compris : tu voudrais savoir comment j’ai fait pour afficher la home sous forme de menu en mode mobile ?

En fait, j’ai tout mis en display:none sauf le titre, avec des filets et un > pour faire la flèche.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

La discussion continue ailleurs

1. Le par Themes Blog Software Dotclear

Polyvalence

  Klicken Sie auf den Screenshot des "Polyvalence" Dotclear-Themes um eine Live Demo zu starten. Download Polyvalence Theme Details: Publizierer: Ombre Version des Themes: 1.1 Lizenz: GNU GPL 2 Support: Französische Internetseite des...