Archives mensuelles :

juin 2006

Design de formulaire : faites moche, c’est mieux !

Un point de vue intéressant au sujet du design des formulaires que je soumets à votre sagacité. Que ceci ne vous empêche pas de n’en faire qu’à votre tête et de continuer de styler vos formulaires pour le plaisir des yeux. Mais au moins vous serez prévenu : on ne joue pas impunément avec l’expérience utilisateur 😉

Et si nous aidions Google à mieux indexer nos sites !

Parmi les nombreux outils proposés par Google, les webmasters et blogueurs soucieux de leur positionnement seront certainement intéressés par le service Sitemap qui aide le moteur à mieux connaitre la structure de votre site pour mieux l’indexer.

Avec quels outils peut-on faire cette sitemap ? Après quelques recherches, j’ai choisi d’utiliser xml-sitemaps.com qui propose pas moins de 4 formats :

  • xml non-compressé,
  • xml compressé,
  • html
  • text,

Il ne reste plus qu’à uploader votre sitemap à la racine de votre site, proposer la version xml non-compressée à Google et attendre quelques heures. Si vous voulez approfondir la question, venez puiser l’info à sa source.

En-tête, 2 colonnes, 1 pied de page (fixe ou liquide)

Au menu Design CSS, je vous propose un exemple de mise en pages classique composé d’un header, de deux colonnes et d’un footer. Pour profiter de l’avantage des CSS par rapport aux tableaux, je ferais en sort qu’en supprimant deux lignes dans la feuille de style CSS, nous passions de deux à une colonne.

Trucs et astuces CSS

Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, 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.

Trucs et astuces Javascript

Ce billet regroupe quelques fonctions simples et utiles en Javascript ou en PHP. Comme pour la boite à outils CSS, celle-ci est destinée à s’enrichir régulièrement.

Avec Color Blender, Eric Meyer ne me quitte plus ;)

En plus de ses bouquins, Eric Meyer, un maitre ès CSS, a eu la bonne idée de mettre des outils à la disposition des webmasters sur son site web. Color Blender permet de déduire les couleurs intermédiaires à partir d’une couleur de départ et une couleur d’arrivée. Je vous propose une traduction (approximative) du mode d’emploi :

  • Choisissez un format de couleur (hex, rgb, rgb%), entrez deux couleurs dans le format voulu, et indiquez le nombre de couleurs intermédiaires que vous désirez. Cliquez sur Blend et le résultat apparait plus bas.
  • Toutes les valeurs sont arrondies au nombre entier le plus proche.
  • Vous pouvez cliquer sur un carré de couleur de la palette des couleurs à droite pour remplir le champ qui a le focus, avec la valeur appropriée.
  • Passer d’un format à un autre aura pour effet de traduire toutes les valeurs déjà en place.
  • Le bouton Clear efface toutes les valeurs et les couleurs, mais ne change pas la valeur du format de couleur en cours.
  • Si vous voulez utiliser Color Blender offline, enregistrez la page sur votre disque dur.

Attention, utiliser Color Blender une fois, c’est l’utiliser toujours !

MAJ du 24/11/06 : colorblender.com propose à peu près les mêmes fonctionnalités.

Worth1000 – le paradis pour Photoshop ?

Si vous êtes un adepte de Photoshop, venez vous mesurer aux meilleurs sur Worth1000 ! Ce site communautaire organise des concours Photoshop pour les niveaux débutant ou avancé : vous trouverez forcément un concours où briller – ou pas !

Rechercher sur css 4 design

var googleSearchIframeName = « cse-search-results »;
var googleSearchFormName = « cse-search-box »;
var googleSearchFrameWidth = 795;
var googleSearchDomain = « www.google.fr »;
var googleSearchPath = « /cse »;

Tracker les liens sortants

Les pages de redirection sont souvent utilisées pour assurer le tracking des liens sortants. Ce système — lourd à mettre en place — peut être avantageusement remplacé par la classe XHRConnection de Thanh qui ne cesse de trouver des applications aussi pratiques qu’élégantes.

Ce tutoriel explique comment — tout en laissant les liens en dur dans la page et en redéfinissant leur comportement onclick — associer une action pour envoyer à un script côté serveur (tracker.php) l’URL de la page courante ainsi que l’URL de la page demandée par l’utilisateur.

La fonction track() renvoit ensuite true pour que le navigateur effectue la requête de l’utilisateur en accédant à l’URL demandée. Le résultat apparait sous la forme d’un tableau affichant la date, l’heure, l’URL demandée ainsi que l’url de la page appelante. Deux derniers mots : merci Thanh !