Je commençais à m’endormir sur la version 0.2.5 de mon thème WordPress ♥ Basics quand la version 2 de HTML5 Boilerplate a fait son apparition au beau milieu du mois d’août. Cette nouvelle version de HTML5 Boilerplate apporte de nombreux changements, dont le plus important est peut-être le remplacement du reset CSS par une « simple » redéfinition des balises HTML grâce à normalize.css mis au point par Nicolas Gallagher et Jonathan Neal. →
Interviews Bruno Bichet, intégration web et webdesign de 2007 à nos jours
J’ai eu quelques occasions de répondre à des demandes d’interview de la part d’acteurs de la blogosphère sur les sujets liés au graphisme, au webdesign, et sur le métier d’intégrateur web. Cet exercice demande de la sincérité et une certaine rigueur pour éviter de se répéter. J’ai la chance d’avoir eu de nombreuses expériences professionnelles dans lesquelles je peux picorer ça et là ce qu’il faut pour répondre de manière personnalisée en évitant le contenu dupliqué — le Duplicate Content ;-). Bref, voici 11 interviews qui m’ont permis de prendre du recul sur la pratique de mon métier de Chef de projet web et d’en apprendre sur moi-même. →
WordPress de A à Z — E comme Extensions (les plugins)
WordPress offre un environnement de publication complet, prêt à accueillir vos textes, vos images et les commentaires des lecteurs, dès l’installation. Cet aspect «Prêt à Publier» n’empêche pas d’avoir envie d’ajouter ou d’étendre les fonctionnalités du CMS grâce aux extensions qui s’installent en deux clics depuis l’interface d’administration. Parmi les quelques 15 000 plugins disponibles, voici les 11 que j’installe le plus souvent au lancement d’un site WordPress, et ceux que j’utilise moins souvent. Voici le sommaire complet des 26 articles de WordPress de A à Z. →
Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
Ça faisait longtemps que je n’ai pas partagé sur ce blog les bons tuyaux que je tweet depuis mon compte Twitter @br1o. Découvrez : comment contrôler la qualité de vos feuilles de styles CSS ; un journal papier à partir d’un flux de production allant de Google Documents à InDesign en passsant par WordPress ; les goulets d’étranglements qui grèvent les performances d’affichage de votre site web ; une galerie de pages d’erreur 404 ; un site sur les codes couleur ; comment gagner des encarts publicitaires sur des blogs low tech et hight tech ; un thème WordPress basé sur HTML5 Boilerplate. →
HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir
HTML5 Boilerplate et WordPress ♥ Basics par la même occasion contiennent quelques classes CSS utiles pour masquer du contenu de différentes manières en fonction de vos besoins : .hidden, .visuallyhidden, .invisible and .ir. Après un rapide survol des trois premières classes, nous allons nous attarder un peu sur la dernière classe .ir pour régler une bonne fois pour toutes le problème des images de fond non cliquables. →
WordPress Basics, mode d’emploi
Après une discussion sur Twitter avec @agence_acs04 de l’agence ACS04 sur les améliorations à apporter au thème ♥ Basics, je me suis rendu compte que j’ai fait quelques erreurs de communication que je tiens à corriger. ♥ Basics est à l’origine un blank theme (une thème minimaliste) destiné aux développeurs et aux intégrateurs web. Il n’a pas vocation à être utilisé tel quel. L’organisation des fichiers est fait de telle sorte qu’il devrait être facile pour un intégrateur HTML & CSS connaissant WordPress d’adapter ce thème à ses besoins, en mettant les mains dans le code. →
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 : →