Améliorations cosmétiques et ergonomiques sur ce blog

Moyens : Javascript, CSS et déplacements de bloc

Affichez, masquez : il en restera toujours quelque chose ! Pour résoudre le petit problème de place concernant le calendrier et les archives, un petit coup de Javascript avec toggleClass() pour afficher/masquer les balises en question, et le tour est joué.

J’ai du modifier un fichier functions.php (dans le dossier tools, c’est un moindre mal) pour ajouter la classe .just-hide-it afin de masquer le calendrier au départ.

En effet, la fonction toggleClass() attend trois paramètres : l’id de la balise à atteindre, suivi des deux class à permuter. En l’occurence : .just-hide-it { display: none } et .just-display-it { display: block } pour afficher / masquer les éléments sur un événement onclick :

<h2>
    <a href="#calendrier" onclick="toggleClass('calendrier','just-display-it','just-hide-it')">
        Calendrier
    </a>
</h2>

Cela dit, en me mettant sérieusement à jQuery (dont une excellente documentation existe en français), je pourrais atteindre des éléments enfants, frères ou parents sans être obligé d’attraper la divite ou la classite, et sans même toucher au code HTML.

Ca me rappelle que j’ai déjà installé la bibliothèque Prototype et Scriptaculous que j’aurais pu utiliser. Mais, il semble que les effets Toggle ne fonctionnent pas si le style display: none est situé dans la feuille de style CSS et non dans le code HTML.

Je ne suis pas puriste à ce point, rassurez-vous. J’ai surtout voulu placer ma petite fonction quelque part sur le blog pour montrer l’exemple 😉

Toujours au sujet des liens pour afficher le calendrier ou les archives, j’hésite à faire scroller la page au niveau du lien après le clic. D’un côté ça m’a l’air assez pratique, mais de l’autre, je me dis que ça peut devenir vite agaçant.

Je vais faire un test avec le scroll sur le calendrier mais pas sur les archives. Vous pourrez ainsi vous faire une idée sur la question, et me donner votre avis à l’usage.

Pour gagner encore un peu de place en hauteur, j’ai supprimé le titre du champ de recherche qui se suffit bien à lui-même. Il n’y a pas de petit profit.

Catégories, en avant toute !

Maintenant que les catégories sont un peu plus à l’aise, il est temps de retravailler le style des liens pour les mettre en valeur :

• J’ai modifié la couleur pour l’aligner sur celle des titres des billets afin d’établir une proximité entre les deux,
• J’ai mis les liens en lettres capitales pour accentuer le fait qu’il s’agit d’une navigation privilégiée,
• Dans un mouvement inverse, j’ai mis les liens de la navigation horizontale en bas de casse, et changé la police de caractère
  • Sur le menu horizontal, je suis passé du rose au vert afin de prendre en compte l’accessibilité visuelle (par l’augmentation du contraste entre le premier et l’arrière-plan) comme me le suggérait Monique il y a quelque temps… Il n’est jamais trop tard pour bien faire même s’il reste encore beaucoup à faire en la matière. Cerise sur le pudding, l’harmonie visuelle de la page s’en trouve renforcée.
  • J’en ai profité également pour mettre en pratique mon tutoriel concernant le signalement de la page en cours grâce à quelques lignes de PHP.
  • J’ai remplacé Trebuchet pour Verdana bien plus lisible dans cette taille et sur ce fond.

Pendant que j’étais dans les modifications, j’ai ajouté un fond zébré dans le plus pur style (prononcez staïle) web 2.0 dans cette sidebar que je trouvais un peu cheap. Mais peut-être n’est-ce pas nécessaire. En même temps, ne boudons pas notre plaisir de travailler sur le web, où le retour en arrière et l’amélioration permanente sont toujours possibles !

*Tuning et conclusion »*