Créez des sites web dans le respect des standards (tout en restant pragmatique), des bonnes pratiques et des chartes graphiques avec le blog d'un intégrateur html et css. Contient aussi du référencement dans Google et du design web. Sans compter tous les articles relatifs au blogging en général et aux CMS DotClear et WordPress en particulier -- Stay tuned and mind the gap!

Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire de Bruno Bichet | 26 février 2008 | Développement web, XHTML & CSS | 18 avis

Il y a quelques temps, je m’étais interrogé sur les différentes manières de rétablir le flux après un float. A l’époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d’un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j’en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j’assure le service après-vente, ce qui fait de moi une espèce de Darty Monsieur Plus du CSS… ^_^ Lire l’article »

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web de Bruno Bichet | 25 février 2008 | Conception web, Design & Graphisme | 36 avis

petit-nautile.pngDans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié. Lire l’article »

S’il ne devait rester qu’un tutoriel pour faire un menu CSS avec onglets… de Bruno Bichet | 17 août 2007 | Développement web, XHTML & CSS | 8 avis

Vous pensiez avoir fait le tour des tutoriels pour réaliser des menus avec onglets en CSS ? Moi aussi, mais c’était sans compter les facéties googliennes : je cherchais tranquillement des ressources sur le poids des sélecteurs css pour ajouter une information ou deux à mon billet sur les Reset CSS quand un résultat au titre alléchant a retenu mon attention : Lire l’article »

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs de Bruno Bichet | 14 août 2007 | XHTML & CSS | 14 avis

Vous n’utilisez pas de styles CSS pour votre page web ? Ce n’est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C’est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l’immense majorité présente des différences plus ou moins importantes. Ce fameux manque de “consistance” décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous… Lire l’article »

WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() de Bruno Bichet | 10 juin 2007 | Outils de blog, WordPress | 9 avis

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()… Lire l’article »

Tutoriel WordPress 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" de Bruno Bichet | 29 mai 2007 | Outils de blog, WordPress | 28 avis

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étisationnable à 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…) ;) Lire l’article »

Framework JQuery pour écrire du Javascript non-intrusif de Bruno Bichet | 26 avril 2007 | Javascript & PHP | 30 avis

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… Lire l’article »

Menu HTML et CSS, sliding doors et item current en PHP de Bruno Bichet | 7 mars 2007 | Développement web, Javascript & PHP | 23 avis

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. Lire l’article »

Détourer les cheveux avec Photoshop de Bruno Bichet | 12 novembre 2006 | Design & Graphisme | 11 avis

detourage-cheveux.jpg Le web design est aussi fait de photo, et Photoshop est un logiciel fascinant. Deux bonnes raisons pour vous proposer ce tutoriel qui expose une des techniques que j’utilise pour détourer un personnage en vue de le placer sur un autre fond. J’ai souvent obtenu de bons résultats en utilisant les outils Plume, Lasso, Masque de fusion et Pinceau. Le filtre Flou gaussien, toujours vaillant, sera de la partie pour ajouter du naturel. Dans le monde des effets spéciaux ça s’appelle du mate painting. Mais restons simple, c’est un photomontage ;)

Lire l’article »

Exercice de style CSS et HTML : table vs div de Bruno Bichet | 26 octobre 2006 | XHTML & CSS | 7 avis

sivom-nautique L’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

Lire l’article »

Utilisez le DOM et Javascript comme un chef de Bruno Bichet | 4 octobre 2006 | Javascript & PHP | 21 avis

dom-javascript Comment remplacer les gestionnaires d’événements présents dans nos pages web en redéfinissant le comportement onclick, onmouseover… des éléments XHTML ? Tout simplement en utilisant la magie du DOM et de Javascript.

Lire l’article »

Adriana K, Google et balises meta dans DotClear de Bruno Bichet | 18 septembre 2006 | Dotclear, Outils de blog | 18 avis

Comment ça y dit qu’y voit pas l’rapport…

Google, balises meta, DotClear... Moi c'est tout les jours, et vous ? La particularité d’un bon système de publication de blog comme DotClear ou WordPress est, entre autre, d’opérer une séparation entre les données et leur affichage. Comme le fait une bonne page web avec le contenu et le design grâce à XHTML et CSS. Cela se traduit souvent par l’existence d’un dossier themes qui contient généralement un fichier template.php. Ce fichier regroupe les parties communes de votre site, dont notamment les balises meta. Ce qui peut avoir des conséquences sur la visibilité de vos pages dans Google. Voyons comment…

Lire l’article »

Vos positions s’affaissent ? Mettez le bottom à zéro… de Bruno Bichet | 15 septembre 2006 | XHTML & CSS | 3 avis

Je livre ma copie en réponse à un défi de Cap° concernant la mise en place d’une liste dans laquelle l’ajout d’un ou plusieurs éléments ferait remonter le texte au lieu de le faire descendre. Tout ça dans le but de garantir à notre liste une base fixe. Rien de bien fou, mais un défi est un défi :p

Lire l’article »

Background CSS avec motifs double-fond… de Bruno Bichet | 29 juillet 2006 | XHTML & CSS | 5 avis

… et effet d’opacité multiple sur le texte et les images

Exemple d'un background CSS avec motifs double-fond La création de motifs répétés est un plaisir de chaque instant dont je ne me lasse pas. Quelle joie de remplir un grand espace avec une image de quelques pixels… Oui, mais c’est parfois un peu… trop répétitif, tout ça. Et si nous faisions en sorte d’avoir un motif un peu plus riche pour le haut de la page, tandis qu’un autre remplirait le reste de la fenêtre en étant raccord avec le premier ?

Lire l’article »

Opacité CSS et effet de trame avec GIF/PNG transparent de Bruno Bichet | 26 juillet 2006 | XHTML & CSS | 5 avis

Exemple d'opacité CSS et effet de trame avec GIF/PNG transparent Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique…

Lire l’article »

Pied de page toujours en bas avec Javascript et CSS de Bruno Bichet | 21 juillet 2006 | Javascript & PHP | 6 avis

footer.png C’est possible ? Parce qu’avec les tableaux… Tôt ou tard, ça ne rate jamais, la question revient sur le tapis de souris. Et là, de vous lancer dans une diatribe comme quoi ça ne sert absolument à rien de vouloir ce footer toujours en bas, que si on manque de contenu, on n’a qu’à en créer, etc.

Lire l’article »

Commentaires conditionnels d’IE vs hacks CSS ? de Bruno Bichet | 18 juillet 2006 | XHTML & CSS | 7 avis

Les différences de rendu entre les différents navigateurs sont le lot quotidien de l’intégrateur CSS : un léger décalage par çi, une largeur différente par là… La tentation est grande d’envoyer paître le dernier de la classe, au grand dam de la voix de la sagesse (souvent commerciale ;) qui vous prie de ne pas négliger 85% de ses clients potentiels… Lire l’article »

Design de formulaire HTML avec CSS de Bruno Bichet | 12 juillet 2006 | XHTML & CSS | 9 avis

Depuis longtemps, l’intégrateur web pressé d’aller manger, dresse la table pour mettre en forme ses formulaires. Et vas-y que je te mets du texte dans un td, un champ texte dans l’autre, et ce, jusqu’à la nausée. Lire l’article »

Menu à onglet avec javascript et css. de Bruno Bichet | 5 juillet 2006 | Javascript & PHP | 18 avis

Les menus à onglets sont à la mode depuis déjà quelques temps. Et c’est temps mieux car ils sont bien pratiques. Ils permettent de résoudre un des problème fondamentaux des interfaces utilisateurs : comment présenter toujours plus d’informations sur une page, tout en en facilitant l’accès. Ou tout au moins sans transformer votre site en usine à gaz dont le parfum ferait fuir vos visiteurs ;) Lire l’article »

CSS et portes coulissantes pour un effet de zoom :hover de Bruno Bichet | 4 juillet 2006 | XHTML & CSS | 7 avis

zoom.jpg Réaliser un effet de zoom sur une image nécessite généralement deux versions d’un même visuel : la première à 100%, et la deuxième à taille réduite. Les événements onmouseover et onmouseout pilotent traditionnellement le changement de source de l’image pour gérer la permutation.

Lire l’article »

En-tête, 2 colonnes, 1 pied de page (fixe ou liquide) de Bruno Bichet | 27 juin 2006 | Développement web, XHTML & CSS | Un avis

Ce soir, dans le menu design css, un exemple de mise en pages classique. Je voulais qu’en supprimant deux lignes dans la feuille de style, nous passions de deux à une colonne. Et celà sans que rien d’autre ne change.

Lire l’article »

Trucs et astuces CSS de Bruno Bichet | 21 juin 2006 | XHTML & CSS | 5 avis

Cette page regroupe quelques trucs & astuces CSS que j’ajoute au fur et à mesure. Cette page est donc mise à jour assez régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complet, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser ;)

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

Lire l’article »

Design CSS : fixe, élastique ou liquide ? de Bruno Bichet | 13 juin 2006 | XHTML & CSS | 4 avis

Difficile, en effet, de choisir la bonne formule pour ses mises en pages CSS. Surtout si l’on se préocuppe des standards web et des bonnes manières pour un web qui prenne du sens et perde du poids ! bon, ne nous emballons pas et entrons dans le vif du sujet en précisant rapidement de quoi il s’agit :

Lire l’article »