HTML & CSS

Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Dans le prolongement du billet précédent concernant une mise en pages CSS avec la propriété float, je me suis intéressé aux différentes manières de styler la balise hr pour rétablir le flux après en avoir sorti des éléments en les faisant flotter à gauche ou à droite. J’utilise généralement hr avec le traditionnel clear: both et visibility: hidden et je jongle ensuite avec les marges ou la hauteur pour espacer les éléments. Or, depuis que j’utilise le reset.css d’Eric Meyer, j’ai tendance à supprimer les marges de tout ce qui bouge, mais cette chère règle horizontale reste récalcitrante à la remise à zéro cross browser… →

CMS WordPress

WordPress : astuces pour afficher une page « autonome » avec wp_list_pages()

Tandis que fran6 s’interrogeait sur la création d’une page statique comme page d’accueil d’un blog WordPress, je me demandais comment créer une page prestations.php (teasing inside) affichant certaines catégories de billets dans une maquette spécifique. Je parle d’une page utilisant les boucles WordPress se suffisant donc à elle-même, et pas d’un Modèle de Page à remplir ultérieurement. Tout en sachant que j’ai besoin que cette page soit considérée comme une Page afin d’apparaître avec le marqueur wp_list_pages()… →

HTML & CSS

Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats

Lors d’un précédent billet concernant la sortie de WordPress 2.2, j’avais évoqué la version 0.6.1 du thème Sandbox. Je profite du passage en version 0.9 pour passer la deuxième couche car Sandbox est intéressant à plus d’un titre. Cest le thème idéal pour les intégrateurs html qui trouveront une palanquée (et le mot est faible) de classes prêtes à styler avec un regard tourné vers l’avenir du web sémantique grâce aux microformats hAtom et hCard à l’horizon. →

Autres CMS

Installer Dotclear 2 bêta 6 et migrer depuis une version 1.2.5

Installer Dotclear 2 bêta 6 et migrer depuis une version 1.2.5 Il y a presque un an, je testais rapidement Dotclear 2. Je renouvelle aujourd’hui l’expérience. A force de comparer WordPress et Dotclear sur les dernières fonctions à la mode, j’ai finis par oublier l’essentiel : quand je vois que les fonctions d’internationalisation de WordPress ne permettent pas de localiser le front-end de n’importe quel thème sans mettre les mains dans le cambouis, je me dis qu’un produit conçu dans la langue de Molière, multi-blogs et tags ready en natif a de l’avenir ^_^ →

Pages : 1 2 3
CMS WordPress

Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets et déclarer une « WAR »

A l’installation de WordPress 2.2, le thème par défaut propose une barre latérale contenant le champs de recherche, les catégories, les pages ou encore la blogoliste. Le tout, affichés via une liste non ordonnée contenant elle-même d’autres listes. C’est pratique en plus d’avoir du sens. Mais si je voulais séparer ces éléments pour respecter une charte graphique allant au-delà de la présentation habituelle, je devrais modifier le code HTML en plus de modifier la feuille de style CSS. Dans ce tutoriel, j’aborde la transformation de cette liste globale en plusieurs blocs transpositionnables, en enfilant des gants pour commencer, puis avec les Widgets qui ont fait leur apparition. Je termine en ajoutant une deuxième zone widgétisable à un thème qui n’en comportait qu’une au départ. J’en ai profité pour rendre le code du Widget Texte 1 plus sémantique en remplaçant une div par un p (c’est élégant, tiens…) 😉 →

HTML & CSS

Organiser ses feuilles de style CSS

Organiser ses feuilles de style CSS J’ai regardé l’organisation des CSS dans de nombreux CMS, de Dotclear à WordPress en passant par des plate-formes de e-commerce. Il n’y a pas deux feuilles de style qui partagent la même organisation, exceptée la remise à zéro du padding et du margin via le sélecteur universel ou seulement pour les éléments html et body, ou encore le choix de la police de caractère (famille, taille, interlignage et couleur du texte) pour le seul élément body. Certaines commencent par la structure pour finir avec les éléments html quand d’autres mettent les déclarations dans l’ordre alphabétique… →

Design & Graphisme

Conception d’une charte graphique pas à pas

Quelques notes sur la conception d'une charte graphique ? Le processus de création d’une charte graphique devrait idéalement s’appuyer sur un contenu validé par le client et bien compris par l’équipe créative chargé du projet. Le contenu est roi, parait-il. Ce cher contenu… Le moins que l’on puisse dire, c’est que si l’exactitude est la politesse des rois, le contenu se fait souvent désirer, alors que dans le même temps le client attend sa maquette. Dans ces conditions comment « sortir » une charte qui ne soit pas seulement l’application de vieilles recettes — aussi bonnes soient-elles — ou le résultat d’une bonne pioche, fut-elle issue de la tendance Web 2.0 ? →

Javascript & PHP

Framework JQuery pour écrire du Javascript non-intrusif

JQuery, librairie Javascript. Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie1 Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2ème millénaire… →

Pages : 1 2 3 4 5
Intégration web

Menu HTML et CSS, sliding doors et item current en PHP

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP. →