got2be : gotapi ça décoiffe !

Vous connaissiez peut-être les sites htmlhelp.com, w3school.com ou encore php.net… Que ce soit le cas ou non, vous serez ravi d’apprendre que l’ensemble des références qu’ils contiennent en matière de code html, de javascript, de css, de php, et de presque tout ce qui peut nous intéresser en matière de développement web est disponible sur… tatatin…

Design de formulaire HTML avec CSS

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. Désormais, plus d’excuses. Nous pouvons tous (oui, j’ai bien dit tous !) aligner des éléments de formulaires sans table. Mais pas sans les mains ni sans CSS.

Menu à onglets avec javascript et css

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 : présenter plus d’informations sur une page, tout en permettant d’y accéder facilement. Ou tout au moins sans transformer votre site en usine à gaz dont le parfum ferait fuir vos visiteurs 😉

CSS et portes coulissantes pour un effet de zoom :hover

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.

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.