Et qu’est-ce qu’il résume si bien ? Ma  démarche qualité. C’est à dire le dialogue indispensable qu’il faut avoir avec son client pour pas se planter.

L’intérêt est aussi les « petits détails » à ne pas oublier dans le dialogue : fixer une limite dans le nombre de maquette ou faire signer un bon à tirer quand le client en valide une.

Le casse-tête de la charte graphique dans le design de site web – Presse-citron – Le blog

9 conseils pour mieux coder son CSS

1. Ecrire les tailles de police en pixel ou en em, le débat continue.
2. Faire des déclarations sur une ligne : si il n’y a qu’une seule propriété, sinon sur plusieurs lignes. Des économies d’octets à la clef
3. Classer ses styles : d’abord les sélecteurs de balise, puis les classes, et enfin les déclarations par section
4. Savoir s’il faut coder pour IE4, pour Opera, Safari. Jonathan a abandonné, Roger aussi, sauf quand un client le demande. Sinon, se concentrer sur les navigateurs les plus récents.
5. Deux méthodes pour gérer le float, par un hack ou sans passer par des artifices dans la structure HTML
6. Comprendre le flux, ou le folttement (float en anglais) : la base du CSS
7. Saisir margin et width pour les blocs flottants, afin d’éviter le bug du modèle de boîte dans IE5.
8. Utiliser les raccourcis CSS, du genre : #content {font: bold 16px/20px Georgia, serif;}
9. Eliminer les sélecteurs superflus : on peut coder sans citer tous les parents !
10. Et enfin faire simple !

Ca reste une méthode personnelle de développement, orientée vers l’économie de bande passante, mais aussi de relecture. Des conseils à suivre.

Avec Equal Height Columns using CSS, Edward Eliot essaye plusieurs possibilités : « Faux Columns et l’astuce de l’image d’arrière-plan dans le parent ; du javascript (bonjour l’usine à gaz) ; et enfn du pur CSS, que je vous laisserai le soin de traduire (ah le bougre !)

Ou l’on nous encourage encore plus à virer vers le XHTML Strict ! Un article de Jack Packard publié sur Accessites.org : montrer des sites web accessibles, conformes, beaux et précis ! Sur soumission, l’équipe accepte ou refuse un site ; et l’une des règles est d’avoir une DTD en Strict. Pour 4 raisons :

• The Transitional DOCTYPE tells you to use a Strict DOCTYPE : c’est écrit dans la DTD, quand on prend la peine de la lire en entier
• A Strict DOCTYPE forces separation of presentation and content : ça, on le savait déjà. Et de citer les balises dépréciées (genre basefont)
• Separating your presentation from your content is a Good Thing : on en rajoute, des fois que… L’utilisateur peut reprendre la main avec sa propre feuille CSS ; La maintenance est facilitée ; la bande passante est économisée ; et c’est une recommandation du WCAG
• What about new windows? Les nouvelle fenêtres, ouvertes avec target="_blank" sont à bannir : l’utilisateur doit maitriser sa navigation. Pour les maniaques, le site propose le javascript de 456BereaStreet.

Bref on n’apprend rien de nouveau (mis à part le premier point), mais ça a le mérite de rebondir sur ce que disait Raphaël Goëtter sur son blog.

En fait, c’est pas vraiment la dernière étape : il reste encore le référencement, l’audit de positionnement, le plan média de diffusion de l’adresse web, pourquoi pas, en amont, la validation utilisateur et, encore après, la mise à jour de contenu, les offres promotionnelles et tous les moyens de conservation des internautes.

Bref. Il n’empêche que la question de l’hébergement est vitale : pour des questions de coût, de qualité de connexion, d’administration, de retour en cas de faille technique, etc.

Quelques comparateurs :

• phwinfo
• www.guide-hebergeur.fr

D’où des appels de fonction par la balise script.

Javascript peut faire beaucoup de choses, trop même. C’est pourquoi il a eu pendant des années mauvaise presse et s’est vu désactivé sur beaucoup de machines (10%). Néanmoins, il revient en force depuis peu, notamment dans sa gestion du DOM (Document Object Model : Modèle de Document Objet = structure hiérarchique du document, rendue principalement par le balisage sémantique et les id). Il porte même un nouveau nom : ECMAScript, du fait de l’organisme européen (ECMA) en charge de sa standardisation (combinaison de Javascript et de JScript, le même version IE).

On parle aussi beaucoup de AJAX (pour Asynchronous Javascript And XML) : une combinaison qui permet notamment de modifier l’aspect (et le contenu) d’une page sans avoir à la recharger depuis le serveur (comme le fait PHP) : très utile pour des navigations dynamiques ou des utilisation de formulaires.

Javascript, le DOM et AJAX sont des éléments essentiels aujourd’hui en webdesign : il faut les maîtriser un minimum, afin de pouvoir intégrer les nombreuses bibliothèques (opensource) qui existent aujourd’hui.

Pour en citer quelques unes :

• Lightbox pour l’affichage dynamique d’image (sans Flash !) ; dans la même veine, on peut citer Moo.fx
• Mochikit qui donne des librairies de simplification du code
• Script.aculo.us offre de librairies de panier virtuel (shopping cart), des formulaires, etc..
• Vous pouvez aussi vous plonger dans les librairies mises à disposition par Yahoo, et qu’on retrouve sur leurs sites.
• NiftyCorners, qui permet (en attendant CSS3) de faire des coins arrondis pour nos boîtes.
• Prototype, un framework en Javascript, une sorte d’assistant pour développer des mini-applications en Javascript
• Unobtrusive qui propose plusieurs scripts dynamique (galerie, arborescence, CMS)

Vous pourrez trouver d’autres infos sur wikipedia : Tutoriels.

Mais Google a d’autres atouts qui peuvent séduire le développeur web : la liste complète, et mieux encore : la liste ultra-complète.
Attention toutefois : de nombreux services requiert la création d’un compte Google.

• Google Analytics : système de statistiques (basé sur Javascript, origine : rachat de Urchin) sur la fréquentation d’un site web (par plateforme, parcours, mot-clé, etc.)
• Google Alert : abonnez-vous à la diffusion des nouveaux résultats d’une recherche. Vous voulez savoir si le nom de votre entreprise ou de votre client est employé dans une page web, vous désirez être tenu informer dès qu’une page web contenant un mot-clé (produit client, URL) est indéxée par Google, alors Google Alert vous propose de vous envoyer un mail dès que cela se produit : un bon moyen de faire un audit sur le positionnement ou les mots-clés.
• Google AdWords est un système qui permet d’acheter des mots-clés (positionnement payant), et ainsi de mieux positionner son lien en fonction des requêtes utilisateurs. Basé sur un système d’enchères, a connu des dérives mais peut être intéressant à étudier.
• Google AdSense : permet d’associer des liens sponsorisés pertinents par rapport à son site. Peu devenir rémunérateur à terme.
• Google SiteMaps : création d’une carte de site, ce qui rend plus efficace le parcours du robot. Cherchez bien, il y a un générateur quelque part ! Sinon…
• Moteur de recherche interne : utilisez Google comme moteur de recherche interne (plus d’explications…) qu’on complètera avec un soupçon d’AJAX (Google Suggest)

Après ça, vous serez en droit de remercier Google, et de vous inquiéter de sa domination sur le Web !

Microsoft a mis en ligne (il y a quelques temps déjà) une barre d’outils pour les développeurs web (uniquement en anglais).

Or, PHP, c’est pas simple… (déjà que le xHTML/CSS…)

Pour d’aider, on peut se tourner vers le site www.php.net et sa documentation sur PHP traduite en français.

On peut aussi aller voir tous les sites qui abordent le sujet : commentçamarche, phpfrance et tout ceux présent chez Google.

Mais la qualité d’un site web peut aussi se retrouver dans l’usage des scripts (client ou serveur ?), dan sles requêtes HTTP, l’accessibilité, le référencement, etc, etc..

Pour gérer tous ses points, ou découvrir ceux qu’on ignorait encore, rien de tel que de s’inscrire sur Mon-Opquast, l‘outil qualité du site www.opquast.com.

Avec Mon-Opquast, vous vous retrouvez avec une charte qualité (les bonnes pratiques)que vous validez point après point. Les procédures sont parfois simples, les principes y référant sont souvent placés sous le coup du bon sens. Mais pas toujours : alors si on est paumé, Mon-Opquast nous explique comment faire. Et c’est à un intérêt majeur du site.

Rajoutons à cela la possibilité de gérer collectivement la qualité d’un site (graphiste/intégrateur), de publier des rapports PDF (pour votre client), d’afficher une icône sur son site, etc..

Son équipe de rédacteurs constitue le who’s who du webdev en France.

Heureusement pour nous, certains sites se proposent de lister les bugs des navigateurs, et en particulier IE (toute version confondue). Evidemment, ils proposent les solutions qui vont avec !

Citons parmi ces sites ressources :

• positioniseverything
• Chez delicious, on trouvera les combinaisons bug+css, bug+ie
• J’en ai recensé certains sur mes delicious

A noter, via un mail envoyé par Monique (merci Monique, mais… et les commentaires alors !?) le site webdevout, effectivement riche en ressources.

Il nous reste donc la possibilité de bricoler (possibilités que j’avais listées précédemment)

Ou alors, on peut utiliser la solution de d’Alessandro Fulcitini: le javascript NiftyCube pour faire des boites rondes.

L’auteur préconise l’usage basique du papier et du crayon, du croquis et des ratures pour formaliser réellement l’idée, le concept, avant de le traduire sous forme numérique dans Photoshop ou Dreamweaver. Intéressant.

• Le premier, jotform.com permet de sauvegarder 1 ou plusieurs formulaires sur le site (enregistrement nécessaire, mais gratuit).
• Le deuxième, wufoo.com très prometteur, est surtout intéressant par son interface très Web2.0, avec Flash et Javascript. Malheureusement encore en béta, on ne peut pas enregistrer le résultat final.

J’en profite pour donner d’autres ressources.

• Pour styler son formulaire, on peut aller voir les astuces proposées chez picment.com ou chez badboy. Enfin, on pourra aller voir sur le site d’ibilab des explications pour mettre en forme uniquement les boutons radios et les cases à cocher.
• Pour obtenir un formulaire correctement saisi, on utilisera le code Javascript fourni par Fransjo Leihitu ou celui de Peter Tornstrand. On pourra aussi s’intéresser à une solution en PHP.
• On pourra aussi utiliser Javascript pour faciliter l’utilisation du formulaire par l’internaute, toujours avec du Javascript, mais ce coup-ci en allant sur le site All that Malarkey.
• Pour une meilleure accessibilité, on ira voir la recommandation de Opquast à ce sujet, ainsi que l’article d’openweb.eu.org.