De nombreux thèmes WordPress utilisent les nouvelles balises associées à la sémantique HTML 5. Voici une sélection de thèmes plus ou moins minimalistes qui devrait prendre place dans le dossier «themes» de votre installation WordPress. J’ai privilégié ceux qui pouvaient servir de base pour des développements plus personnels. Comme on n’est jamais mieux servi que par soi-même, j’ai pris la liberté de placer mon thème Basics en première position 😉 →
Quelques notes sur les éléments graphiques du webdesign
Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire. →
Un « Logothic » pour WordPress Basics
Une dizaine de jour après le lancement du thème Basics pour WordPress, j’ai fais quelques recherches d’ambiance pour un logo et je me suis arrêté sur le style Gothic, assez peu employé dans l’univers de WordPress. Ce logo repose sur deux éléments bien distincts qui s’opposent l’un à l’autre (ce qui les rend donc complémentaires) : la lettre «W» dans le coeur plein de courbes de WordPress je thème et le mot «basics» tout en angles et agressivité. For Those About To Rock, Fire! →
Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
L’ajout des classes CSS pour spécifier la largeur des colonnes dans le code HTML est le lot des frameworks CSS qui proposent tous un mécanisme pour créer une grille de mise en page. Dans leur très grande majorité, ces frameworks ont besoin d’une classe pour la première colonne (.first pour The Simpler Grid) ou la dernière colonne (.last pour Blueprint CSS) voire pour la première et la dernière colonne (.alpha et .omega pour 960 Grid System) pour annuler les marges droites et/ou gauches attribuées par avance aux colonnes. →
Astuce CSS3 et RGBA avec les outils de développement de Google Chrome
J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence. →
WordPress de A à Z — C comme CSS & Composé HTML5
«For Those About To Rock…» Dans B comme Basics, j’ai abordé la mise en place d’un Blank Theme pour démarrer différents projets de site web. Je pensais réserver la lettre «C» pour les commentaires(1), mais après le marquage HTML5, il m’a semblé important d’aborder au plus vite la partie CSS. Une des difficultés à surmonter lorsqu’on crée un thème de base, c’est d’éviter 1) d’avoir trop d’éléments à ajouter et 2) d’en avoir trop à supprimer. L’équilibre est délicat. D’autant plus que les intitulés des éléments doivent être le plus générique possible pour s’adapter à toutes les situations et permettre de se repérer facilement. «Fire !» Voici le sommaire complet des 26 articles de WordPress de A à Z. →
Créer des « Call to Action » ou des « boutons CSS » dans l’éditeur WYSIWYG TinyMCE
Cette petite astuce toute simple permettra à vos clients(1) de styler certains liens différemment des autres (Call to action, bouton, etc.) depuis TinyMCE, l’éditeur WYSIWYG de WordPress. Il suffit de créer un lien et de le mettre en «gras» avec l’icône B. Cette combinaison toute simple vous donnera le composé HTML suivant : →
Création de site WordPress de A à Z — B comme Basics
Je comptais terminer la série WordPress de A à Z avec la livraison d’un thème de base, mais il m’a semblé que livrer un thème minimaliste dès le début serait une meilleure idée. J’ai donc plongé plus profondément dans le Codex pour voir si l’eau était bonne. J’en ai profité pour organiser concrètement les éléments abordés dans WordPress de A à Z — A comme Allons-y ! : installer la dernière version de WordPress en français et HTML5 Boilerplate, puis ajouter les fonctionnalités du moteur de WordPress à l’aide du Codex. A l’issue de cet article, vous aurez donc un Blank Theme qui servira de support pour la suite des articles de cette série et de base pour de nouveaux thèmes WordPress. Dans cet article, j’ai choisi de détailler (parfois brièvement) l’ensemble des éléments composant Basics. D’autres articles viendront bientôt pour justifier certains choix ou expliciter certaines notions ; il reste encore pas mal de lettres dans l’alphabet après la lettre «B» 😉 Voici le sommaire complet des 26 articles de WordPress de A à Z. →
JbhSlider — Slider en jQuery
JbhSlider permet de réaliser des diaporamas en jQuery avec la particularité de gérer les évènements rapprochés. Il n’y aura pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider. Oui, les visiteurs font ça 🙂 Outre la gestion des liens «Suivants et Précédent, JbhSlider gère la pagination entre les diapos et permet des effets de transition. →
hgroup disparait du brouillon HTML5, une chance pour logo et motto ?
Suite à la demande de Lars Gunther, la balise `hgroup` ne fait plus partie du brouillon HTML5 des spécifications du W3C. Les raisons de cet abandon semblent assez subjectives. Il semblerait que Lars Gunther n’aimait pas vraiment cet élément et que Ian ‘Hixie’ Hickson non plus. Il n’en fallait pas plus pour que cette balise disparaisse purement et simplement du brouillon HTML5. →