Polyvalence 1.3

Une nouvelle version du thème avec les améliorations suivantes :

  • Présentation de code avec lignes bleues alternées de blanc, ces lignes sont proportionnelles à la taille du caractère et à l’interlignage. Merci Lea Verou et les gars de l’équipe. Les vieux navigateurs afficheront un fond bleu.
  • Espace avant les liens « réseaux sociaux » corrigé.
  • Les liens « sociaux » fonctionnent maintenant avec des fenêtres popup, comme les boutons officiels mais sans tracking (via une idée de Korben légèrement modifiée, merci Kozlika).
  • Prise en compte du plugin shortURL de Julien pour les liens vers les réseaux sociaux.
  • Code PHP plus conforme aux versions récentes de Dotclear (merci Nikrou).
  • Cette version utilise la balise tpl:else, introduite, si je me souviens bien, à partir de la version 2.4 de DC, je ne sais pas ce que peut donner ce thème sur des versions antérieures.

Cette version devrait être la dernière, éventuellement des petites retouches ici et là si il y a des problèmes.

Le thème est disponible en pièce-jointe à ce billet pour les impatients et le sera bientôt sur dotaddict.org. :-)

Version 1.3.1

  • Textes plus explicites dans l’administration.
  • Les listes de premier niveau n’ont pas de padding à gauche en version mobile.
  • Correction html sur le lien Google+.

Version 1.3.2

  • Pour les navigateurs les plus avancés [1], ajouts des logos sur les « liens sociaux », les autres afficheront les liens comme avant.
  • Style pour <pre> dans les commentaires
  • Intégration des gabarits du plugin eventHandler (attention pour que ça fonctionne, faut bricoler un peu le plugin).
  • Encodage des titres dans les URLs twitter pour éviter les problèmes avec des titres comportant des caractères réservés (esperluettes, etc).

Note

[1] qui supportent la pseudo-class CSS :not() et le svg

Dotclear a 10 ans

Je m’apprêtais à écrire une grande tartine sur la naissance de Dotclear, pourquoi je l’ai adopté, etc. Finalement (et parce que je ne suis pas doué pour l’écriture), je dirais que je reste avec ce CMS parce que grâce à lui j’apprends énormément de choses sur les technologies web et que surtout la communauté (majoritairement francophone) est composée de gens formidables dont je partage les valeurs. C’est dit. ;-)

D’autres liens sur le sujet (vus sur twitter)

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…

- page 1 de 13