Dotclear

Le fonctionnement de ce blog

Fil des billets - Fil des commentaires

Polyvalence 1.2

J’ai préféré créer un nouveau billet car il y a pas mal de nouveautés dans cette version (voir la page de configuration du thème) :

Intégration des réseaux sociaux Facebook, Twitter et Google+

  • Au premier niveau : ajout des metadonnées dans les pages de type « Billet » (pages, static, galeries, image, etc). Ces métas fournissent des renseignements comme la catégorie, les mots-clés, la première image, etc.
  • Au 2e niveau : insertion de liens en dessous des billets pour faciliter le partage.
  • Au 3e niveau : boutons officiels. Attention, l’ajout de ces boutons provoquent le téléchargement de scripts supplémentaires. Ces script sont téléchargés de manière asynchrone de façon à ce que la page soit complètement visualisable avant la fin du chargement. Si votre public utilise plutôt le réseau 3G ou Edge, il est peut-être préférable de garder cette option désactivée.

Avertissements :

  • Google+ et Twitter n’aiment pas xhtml5, ne cochez pas cette case si vous intégrez les metas et/ou les boutons.
  • J’utilise une méthode un peu spéciale pour intégrer le bouton officiel Facebook : je crée l’iframe via script, la méthode préconisée (je ne sais pas pourquoi, si quelqu’un a une idée) n’ayant jamais marché. Cette méthode est aussi asynchrone.
  • Google ne supporte plus IE6 et donc il n’y a pas de bouton officiel, il y aura le lien à la place.
  • Si vous avez un plugin qui gère les réseaux sociaux, ne cochez pas ces cases : il risque d’y avoir des conflits.

Intégration de schema.org en RDFa

C’est quoi ça le RDFa et c’est quoi schema.org? Le RDFa permet d’insérer des métadonnées dans le code html suivant un vocabulaire précis. Celui de schema.org permet de définir votre site comme un blog, comportant des billets, des galeries d’images, des photographies, etc. À l’intérieur des pages on définit le titre du billet, sa catégorie, les mots-clés, les commentaires…

Dans le futur, les moteurs de recherche présenteront vos billets avec beaucoup plus d’informations, pour l’instant ils se focalisent plutôt sur tout ce qui est commercial, événements… Ça viendra, faut leur laisser le temps. ;)

Le DC.core

Certains regrettaient que les métas du Dublin Core étaient invalides en html5. Elles sont maintenant traduites en version RDFa et ne font plus couiner le validateur.

Logos en SVG

Les petits logos « commentaires », « pings », « fichiers attachés », etc, sont maintenant en SVG sur les navigateurs récents. Avantage : ils sont vectoriels donc indépendants de la résolution de votre appareil, vous pouvez zoomer très fort dessus sans voir de pixels, pratique quand on a un écran haute définition (retina, hidpi). Un fallback bitmap est prévu pour les ancêtres.

Diverses petites corrections

  1. Les attributs webkit sur le champs de recherche ont été enlevés car toujours pas dans la spec.
  2. Résolution d’un bug sur tablette, lors du changement d’orientation.
  3. Prise en compte d’une particularité de IE10 au niveau du viewport.

Ouais, la 1.2 c’est bien mais quand sort-elle la 1.3?

Ceci est la version définitive du thème, la 1.3 sera juste une version avec des correctifs suivant les retours des utilisateurs (ou des copains de Dotclear). ;-)

En effet, comme je ne suis pas informaticien, il me faut un temps fou pour faire fonctionner des choses assez basiques et ça me bouffe pas mal de mon temps. Notez que je ne le regrette pas, j’ai appris énormément sur plein de techniques : html5, css3, javascript (m’a bien fait suer le bouton Facebook), le RDFa (un autre gros morceau) et ça c’est génial.

Et je ne parle pas de la configuration du .htaccess pour optimiser mon site. :-)

J’ai toujours l’intention de continuer à créer des thèmes en html5, l’avantage c’est que maintenant les gabarits sont faits et donc je ne devrai pas réinventer la roue à chaque fois.

Le thème se trouve en pièce-jointe à ce billet, je vais l’envoyer pour dépôt sur dotaddict.org le plus tôt possible ainsi il vous sera proposé une mise à jour si vous avez le plugin daInstaller.

P.S. : ce site repasse en html5 au lieu de xhtml5…

Polyvalence, xhtml5, espace insécable et typographie

Comme énoncé dans le billet officiel sur le thème Polyvalence, il y a de nombreuses contraintes à utiliser xhtml 5 :

  • le contenu des billets doit être valide ;
  • les pages des plugins hors-thèmes doivent être valide ;
  • et, le plus ennuyant, il ne doit pas y avoir d’entité littérale (autre que les basiques) dans le code html généré. Ce qui veut dire : pas de  .

Et là ça coince pour la plupart d’entre vous… Personnellement, je m’amusais à taper l’espace insécable manuellement au lieu de laisser Dotclear corriger le tout comme un grand (alt-espace sur mac ou alt-0160 sur PC Windows), mais c’est assez fastidieux.

La solution est d’utiliser un plugin qui va corriger tout ça, en plus d’ajouter plein d’autre fonctions pour avoir un texte typographiquement plus correct : le plugin typo[1]. Ce greffon passe outre le système de correction automatique de Dotclear et utilise le sien : les espaces insécables sont remplacées par des entités numériques   compatibles xhtml5.

Si on suit plus rigoureusement les règles typographiques, ce n’est pas une espace normale insécable que l’on place avant un point d’interrogation mais une espace fine insécable[2], j’ai donc repris le code du plugin et changé les réglages par défaut. Le voici au téléchargement[3].

Dotclear a 8 ans

Le programme que j’utilise depuis 2004 pour faire tourner ce site a 8 ans. Il ne m’a jamais déçu : pas de problèmes de sécurité, rapide, pages bien indexées, etc.[1] Que demander de plus ? ;-)

Notes

[1] J’entends des soi-disant SEO grincer des dents :-p

Dotclear a 7 ans, bon anniversaire Dotclear !

Le programme qui fait tourner ce site a maintenant 7 ans ! Beaucoup d’eau a coulé sous les ponts depuis la version 1.2, Dotclear est devenu un CMS de blog reconnu et apprécié mais permet également de créer des sites plus généralistes grâce à des extensions comme Muppets ou Mymeta.

Ce que j’aime particulièrement :

  1. l’installation d’une extension : on donne l’url du fichier zip ou on l’envoie via l’interface d’administration ;
  2. il faut rarement modifier les gabarits pour utiliser les extensions, on installe et ça roule ;
  3. le multiblog intégré, qui peut aussi servir à créer un petit site avec plusieurs rubriques ;
  4. les efforts constants pour que le programme soit accessible au plus grand nombre ;
  5. la mise à jour automatique de Dotclear, pas besoin de chipoter avec le FTP ;
  6. si on installe daInstaller, c’est carrément les extensions qui se mettent à jour d’elles-même.

Passage à html 5 : installation du thème

Vous ne verrez pas de différence avec le thème par défaut, pour l’instant[1], toute la différence est au niveau du code html.

Si vous utilisez Opera vous aurez une vérification automatique des formulaires (webforms 2.0)[2]. Si vous utilisez Safari Mobile, vous aurez un clavier virtuel adapté aux champs à remplir.

Je livrerai le tout quand il sera terminé. Au niveau design, c’est pas trop mon truc, je vais essayer de faire un truc simple (même composition) mais joli. Gloups. :-)

EDIT : ah oui faut encore passer les galeries en html 5 également :-/

Notes

[1] Je m’attaque au design dans les jours qui viennent.

[2] Les autres navigateurs y viendront aussi.

Une extension Dotclear 2 pour exporter ses billets ou son blog au format ODT

Je l’avais rêvé (même si je n’en ai pas l’utilité) et il l’a fait : une extension pour exporter le contenu au format OpenDocument[1].

Ça marche bien[2], pas de bidouillages, pas de modifications dans les gabarits, on installe, on active pour le blog voulu et ça roule tout seul. Il faut que vos billets soient valides xhtml pour que ça fonctionne. Une icône, en mode billet, se trouve à côté du titre pour le téléchargement. Un lien en page d’accueil permet de télécharger le blog (ou juste le contenu de la page).

Cette extension pourrait être sympa avec, par exemple, un blog livre ou un blog documentation : les gens peuvent télécharger le contenu en étant sûr d’avoir la dernière version à jour. :-)

- page 1 de 3