Pour savoir pourquoi et comment vous lisez mon blog, j’ai installé quatre scripts de mesure d’audience : Google Analytics, phpMyVisites, MyBlogLog et HitTail. Sans compter Webalizer… Ce billet est découpé en deux parties qui devaient faire chacune l’objet d’un article séparé. Or, les statistiques fournies par les outils présentés dans la partie Quatre outils de mesure d’audience sont utiles parce qu’elles fournissent des éléments objectifs et quantifiables pour faire évoluer un site : améliorer le design ou encore réorganiser les rubriques. Dans une optique de positionnement dans l’index de Google, les stats peuvent également contribuer à optimiser ce qui fait l’intérêt d’un site : son contenu. Attention à la longueur du billet qui pourrait heurter la sensibilité des plus jeunes ! →
Détourer les cheveux avec Photoshop
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 😉 →
Exercice de style CSS et HTML : table vs div
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… →
Utilisez le DOM et Javascript comme un chef
Comment remplacer les gestionnaires d’événements présents dans une page web en redéfinissant le comportement onclick, onmouseover… des éléments XHTML ? Tout simplement en utilisant la magie du DOM et de Javascript. Généralement, lorsqu’on veut appliquer une fonction sur un élément XHTML (ouvrir un popup lorsqu’on clique sur une image, par exemple), on utilise une fonction popup() déclenchée par un événement onclick placé dans la balise comme ici : <img src= »/img1.gif » onclick= »popup() » />. C’est parait simple, efficace et rapide… Or, ça peut vite devenir compliqué, inefficace et lent… →
Adriana K, Google et balises meta dans DotClear
Comment ça y dit qu’y voit pas l’rapport…
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…
Vos positions s’affaissent ? Mettez le bottom à zéro…
Background CSS avec motifs double-fond et effet d’opacité multiple sur le texte et les images
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 ? →
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… Je vais vous proposer une méthode full CSS et une autre permettant d’utiliser des images GIF ou PNG transparentes de manière créative avec une page d’exemples à la clé.
Pied de page toujours en bas avec Javascript et CSS
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. Certes, vous y croyez, et votre interlocuteur commence même à trouver que ce pauvre footer tout seul en bas a l’air de s’ennuyer ferme. Seulement, vous êtes un professionnel, et même si ça ne sert à rien, vous aimeriez bien trouver la solution 😉 →
Commentaires conditionnels d’IE vs hacks CSS ?
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 ci, une largeur différente par là… et la tentation est grande d’envoyer paitre 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… →