Voici donc une liste (non-exhaustive) des points de contrôle effectués :

Points de contrôle
Ergonomie
	Ne pas utiliser de soulignement de texte pour autre chose que des liens.
	La page 404 est indispensable et doit être personnalisée aux couleurs du site. Proposer éventuellement un formulaire de recherche.
	Une feuille de style d’impression doit être prévue.
Accessibilité
	En cas d’utilisation de plug-ins (vidéo, Flash), prévoir une alternative textuelle pour un utilisateur qui n’aurait pas installé et/ou ne voudrait pas installer le plug-in.
	Tester la page sans images (via l’extension Webdevelopper de Firefox) pour s’assurer que l’ensemble du contenu est lisible sans les images de fond. Exemple : Un texte blanc sur une image def fond peut devenir illisible si aucune couleur de fond n’a été spécifiée dans les propriétés du bloc conteneur.
	Toute image doit avoir un alt, renseigné ou non. Illustration : alt vide, ou image de fond
	Dans le cas où des fichiers sont proposés au téléchargement, deux points sont à respecter : format ouvert, poids du fichier à télécharger doit être indiqué.
	Le javascript doit être non-obstrusif et le site doit être parfaitement utilisable s’il est désactivé par l’utilisateur.
Intégration HTML / CSS
	Les pages sont valides W3C
	Le balisage est propre : pas de styles ou de scripts dans le code HTML
	Le doctype du document HTML sera du XHTML 1.0 Transitional dans le cas (limité) d’utilisation d’iframe.
	Le doctype du document HTML sera du XHTML 1.0 Frameset dans le cas (limité) d’utilisation de frameset.
	Bannir l’utilisation de tableaux pour la mise en page, les tableaux ne doivent être utilisée que pour des données tabulaires et non pas pour créer des mises en page.
	S’efforcer de renseigner l’intitulé « title » des liens pour des raisons de référencement et d’accessibilité. Le title du lien doit fournir plus d’informations que l’intitulé du lien lui-même (mais y compris l’intitulé ; ex : « Aide (nouvelle fenêtre) »)
	La structuration de l’information doit être cohérente par rapport au contexte général du site Web (ex : pas de pub au milieu du texte)
	Une page Web doit posséder une structure cohérente (utiliser h1 (oblig.), h2, …pour leur fonction 1ère ; les blocs d’infos doivent être distincts)
	Pour les tableaux de données, identifier les zones suivante : « thead » (pour l’entête du tableau), « tbody » (pour le corps du tableau) et « tfoot » (pour les données de pied de tableau). On s’efforcera de fournir une description du tableau au sein de la balise « summary »
	Les champs de saisie d’un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label, id et for)
	Respecter le sens sémantique des balises. Proscrire l’utilisation des balises et attributs dépréciés (ex : b, center, basefont, applet, dir, font, isindex, menu, s, strike, u et align, bgcolor, height…).
	Utiliser la balise <abbr> et/ou <acronym> ainsi que son attribut title lorsque cela est possible.
	Dans le cas d’un style spécifique à Internet Explorer, utiliser les commentaires conditionnels. Evitez les hacks du type « _margin » ou encore « *width »
	Pour conserver un maximum de souplesse aux feuilles de style, limiter tant que possible le « poids » des déclarations. Exemple : privilégier « .content » à « body.page #wrapper div.content »
	Pas de notions topographiques ou colorimétriques dans les noms de classes ou : noms faisant référence à la structure. Pas de couleur ni gauche/droite. Exemple : ne pas utiliser div.rouge ou div.left. Si on décide un jour de modifier les propriétés de placement ou d’apparence, ces classes n’auront plus de sens.
	Ne pas utiliser de cote, double ou simple, dans les chemins des CSS.
	Les sites, les pages doivent pouvoir être actualisés facilement et avec souplesse. De ce fait, les zones de contenu doivent s’étendre graphiquement en hauteur (pas de hauteur fixe donc pour les blocs)
Optimisation du référencement
	Pour des raisons de référencement, limiter au maximum les paramètres et les caractères « exotiques » dans les liens.
	Les balises d’indexation <title>, <meta name= »description » /> et <meta name= »keywords » /> doivent êtres renseignées même si leur action en terme de référencement peut être discutable. Elles doivent être situées juste sous la balise définissant l’encodage et dans l’ordre suivant : title / description / keywords
	La balise <title> doit être présente et renseignée sur toutes les pages. Elle doit être en adéquation avec son contenu et donc, dans la plupart des cas, différente d’une page à l’autre.
	La balise <meta name= »description »> doit être présente et renseignée sur toutes les pages. C’est une balise visible par l’internaute. Elle doit être significative de son contenu, des services rendus par la page, des informations livrées.
	La balise <meta name= »keywords »> doit être présente et renseignée sur toutes les pages. Elle doit reprendre les quelques mots-clé de la page. On peut aussi y inclure certains pluriels, synonymes, anglicismes, etc.
	Prévoir un fichier à l’intention des robots d’indexation, à la racine du site. (robots.txt)
Compatibilité Navigateurs
	Internet Explorer 6, (N.B. : Pour cette version, il faut que le site soit un minimum exploitable)
	Internet Explorer 7 et +,
	Firefox 2 et +,
	Safari 2 et + (tolérance)
	Opera 9 et + (tolérance)
	Les pages livrées doivent s’afficher, sans ascenseur horizontal, dans un écran en 1024 x 768
Performance
	Le poids maximal d’une page, images incluses, ne doit pas dépasser 150k.
	Seule la page d’accueil fait exception et peut atteindre jusqu’à 250k, images incluses.
	Évitez les appels multiples à des feuilles de style ou à des fichiers javascript. Merger ces appels pour des raisons évidentes de performance
	L’utilisation du format PNG 24 devra être utilisé avec parcimonie pour des raisons de compatibilité navigateur (IE6 ne supporte pas les couches alpha sans l’utilisation de DirectX. Ce dernier pose des soucis de performances, les images filtrées n’étant pas mises en cache).
Autre…
	L’encodage privilégié est l’UTF-8, il est indiqué avec la balise meta « content type ».
	Les caractères suivants doivent être encodés sous forme d’entité HTML : &, <, >, €
	Prévoir une icône de favori à la racine du site.
	Les valeurs monétaires, statiques ou dynamiques, doivent suivre le format suivant : un espace insécable comme séparateur de millier une virgule comme séparateur de décimale un espace insécable entre le nombre et son unité
	Utiliser un espace insécable entre une double ponctuation et le mot qui la précède : !, ?, :, ;
	Les chemins vers les pages (mais aussi vers les scripts, feuilles de style, images, etc) doivent être en absolu en considérant le répertoire / comme la racine du site.
	Dans le cas d’envoi de paramètre dans l’URL, ne pas oublier d’encoder sous forme d’entité HTML le « & » (&amp;).

Sur la plupart des projets, je m’amusais à déléguer des évènements à des objets globaux. C’est ensuite au moment de l’appel à l’évènement que je filtrais le type d’action à effectuer. C’est un exercice plutôt fastidieux…

J’ai donc décidé de créer un plugin jQuery permettant de faciliter la gestion d’évènement via delegate. Il suffit pour cela de créer un objet recensant les objets globaux, les évènements attachés, le filtre, puis l’action a effectuer.

Voici un exemple d’objet :

var eventList = {
 'div' : {
   'mouseover' : {
     '.sidebar' : function (elem) {
       $(elem).addClass('over');
     },
     default : function(elem) {
       $(elem).css('background-color':'red');
     }
   }
   'mouseout' : function() {
      $(elem).css('background-color':'transparent');
   }
 }
}

En clair, je délègue des évènements à un ou plusieurs objets de type div. Je lui attribue un évènement de type mouseover. Par défaut, au passage de la souris sur cette div, le fond de cet objet sera rouge. Si la div possède la classe .sidebar, alors je lui ajoute une classe .over. Enfin, lorsque je quitte un objet de type div, je lui affecte un fond transparent.

Une fois cet objet créé, il ne reste plus qu’à l’insérer dans un appel au plugin eventManager :

$('#wrapper').eventManager(eventList);

Dans cet appel, seules les div placées dans un objet ayant pour ID #wrapper seront affectés par les évènements à déléguer.

Je vous propose d’accèder à la démo pour vous faire une idée des possibilités offertes. Vous pourrez ensuite, si vous le souhaitez, télécharger le plugin sur mon espace Github.

Édité le 19 juillet : Nouveauté sur le plugin, le code a été nettoyé, on peut se passer de ‘default’ lorsqu’il n’y a pas de sélecteur filtre. Autre nouveauté, on peut désormais utiliser « this » au lieu de « elem » dans les fonctions de l’objet contenant les évènements. Merci beaucoup à Sunny pour son aide !

• Accéder à la démonstration
• Télécharger le plugin

Internet Explorer a (très) souvent été la cible de critiques passionnées. En cause, son moteur de rendu (Trident) non conforme aux standards du web définis par le W3C et ses nombreux bugs.
La version 6 s’imposait de nombreuses années au sein du système Windows XP.

Microsoft décide de publier la version 7 de son navigateur qui sera en série sur le tout nouveau système, Windows Vista. Les améliorations sont nombreuses mais la firme Redmond persiste dans sa volonté d’imposer ses « standards ». Il intègre toutefois de nouveaux pseudo-sélecteurs CSS (IE6 ne supportant que les pseudo-sélecteurs affectés aux liens) et supporte enfin le format PNG alpha.
Problème, la plupart des utilisateurs de Windows XP ne migrent pas vers Vista, le système ayant une mauvaise réputation en terme de stabilité et d’ergonomie. Le passage vers IE7 prendra beaucoup de temps et encore aujourd’hui, IE6 dispose d’une part importante dans le pourcentage des navigateurs utilisés. Cette lente migration s’explique également par le fait qu’Internet Explorer 6 ne dispose d’aucun système de mise à jour automatique (à contrario de Firefox par exemple).

Un semblant de renouveau

IE8 succède à la version 7. Les effets d’annonce de cette version n’attenueront pas les critiques de la communauté web. Microsoft fait encore une fois cavalier seul. Son navigateur, en dépit de quelques améliorations ergonomiques, ne parvient pas à séduire le public de connaisseurs.
Ce navigateur met en place un nouveau principe : la définition du mode de rendu. Il est possible en effet de choisir entre le mode de rendu IE7 et celui d’IE8 via une balise meta. Ce principe va à l’encontre du concept d’amélioration progressive. On ne devrait pas choisir de développer pour un ancien navigateur.
Autre problème, le support du PNG pourtant bien géré sur IE7 est défaillant sur cette version.

Une lueur d’espoir

Intervient le projet IE9 mené par une équipe renouvelée et des consultants plus jeunes ! À l’heure où je publie cet article, cette version est encore à l’état de développement.
Première nouveauté : Microsoft communique largement sur le projet et encourage fortement la communauté à effectuer des retours.
Seconde nouveauté : IE9 se veut respectueux des standards du web. Microsoft se retrouve désormais contributeur actif du W3C. Ils insistent sur l’obligation de rendu unique sur l’ensemble des navigateurs.
Troisième et dernière nouveauté : L’équipe d’IE9 a fait beaucoup d’efforts pour améliorer les performances de son navigateur. Il dispose aujourd’hui d’un des plus puissants moteur Javascript (en comparaison avec les moteurs en version définitive et publiés avec des navigateurs stable, hein !).

Mais ce qui est surtout le plus excitant, c’est le support de nouvelles technologies web. La liste est longue : support de CSS3 (on peut enfin utiliser border-radius, ouais !), moteur de rendu capable d’interpréter HTML5 ainsi que son API (balise video, audio, geolocalisation, webworkers…), implémentation de font-face, mise en conformité de l’interpréteur javascript avec les standards, support de SVG…
Et dernièrement, le blog du navigateur Microsoft a annoncé le support de canvas ainsi que la prise en charge du format libre WOFF, on y croyait vraiment plus !

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

C’est donc une grande avancée et on s’imagine déjà développer des sites internet sans avoir à le tester sur 36 navigateurs ! Mais malgré tout, ne fantasmons pas trop vite, le chemin sera encore long et il faudra je pense attendre encore 10 ans avant de pouvoir utiliser pleinement les nouvelles possibilités offertes par HTML5 et CSS3.

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Un semblant de renouveau

IE8 succède à la version 7. Les effets d’annonce de cette version n’attenueront pas les critiques de la communauté web. Microsoft fait encore une fois cavalier seul. Son navigateur, en dépit de quelques améliorations ergonomiques, ne parvient pas à séduire le public de connaisseurs.
Ce navigateur met en place un nouveau principe : la définition du mode de rendu. Il est possible en effet de choisir entre le mode de rendu IE7 et celui d’IE8 via une balise meta. Ce principe va à l’encontre du concept d’amélioration progressive. On ne devrait pas choisir de développer pour un ancien navigateur.
Autre problème, le support du PNG pourtant bien géré sur IE7 est défaillant sur cette version.

Une lueur d’espoir

Intervient le projet IE9 mené par une équipe renouvelée et des consultants plus jeunes ! À l’heure où je publie cet article, cette version est encore à l’état de développement.
Première nouveauté : Microsoft communique largement sur le projet et encourage fortement la communauté à effectuer des retours.
Seconde nouveauté : IE9 se veut respectueux des standards du web. Microsoft se retrouve désormais contributeur actif du W3C. Ils insistent sur l’obligation de rendu unique sur l’ensemble des navigateurs.
Troisième et dernière nouveauté : L’équipe d’IE9 a fait beaucoup d’efforts pour améliorer les performances de son navigateur. Il dispose aujourd’hui d’un des plus puissants moteur Javascript (en comparaison avec les moteurs en version définitive et publiés avec des navigateurs stable, hein !).

Mais ce qui est surtout le plus excitant, c’est le support de nouvelles technologies web. La liste est longue : support de CSS3 (on peut enfin utiliser border-radius, ouais !), moteur de rendu capable d’interpréter HTML5 ainsi que son API (balise video, audio, geolocalisation, webworkers…), implémentation de font-face, mise en conformité de l’interpréteur javascript avec les standards, support de SVG…
Et dernièrement, le blog du navigateur Microsoft a annoncé le support de canvas ainsi que la prise en charge du format libre WOFF, on y croyait vraiment plus !

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

C’est donc une grande avancée et on s’imagine déjà développer des sites internet sans avoir à le tester sur 36 navigateurs ! Mais malgré tout, ne fantasmons pas trop vite, le chemin sera encore long et il faudra je pense attendre encore 10 ans avant de pouvoir utiliser pleinement les nouvelles possibilités offertes par HTML5 et CSS3.

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Un semblant de renouveau

IE8 succède à la version 7. Les effets d’annonce de cette version n’attenueront pas les critiques de la communauté web. Microsoft fait encore une fois cavalier seul. Son navigateur, en dépit de quelques améliorations ergonomiques, ne parvient pas à séduire le public de connaisseurs.
Ce navigateur met en place un nouveau principe : la définition du mode de rendu. Il est possible en effet de choisir entre le mode de rendu IE7 et celui d’IE8 via une balise meta. Ce principe va à l’encontre du concept d’amélioration progressive. On ne devrait pas choisir de développer pour un ancien navigateur.
Autre problème, le support du PNG pourtant bien géré sur IE7 est défaillant sur cette version.

Une lueur d’espoir

Intervient le projet IE9 mené par une équipe renouvelée et des consultants plus jeunes ! À l’heure où je publie cet article, cette version est encore à l’état de développement.
Première nouveauté : Microsoft communique largement sur le projet et encourage fortement la communauté à effectuer des retours.
Seconde nouveauté : IE9 se veut respectueux des standards du web. Microsoft se retrouve désormais contributeur actif du W3C. Ils insistent sur l’obligation de rendu unique sur l’ensemble des navigateurs.
Troisième et dernière nouveauté : L’équipe d’IE9 a fait beaucoup d’efforts pour améliorer les performances de son navigateur. Il dispose aujourd’hui d’un des plus puissants moteur Javascript (en comparaison avec les moteurs en version définitive et publiés avec des navigateurs stable, hein !).

Mais ce qui est surtout le plus excitant, c’est le support de nouvelles technologies web. La liste est longue : support de CSS3 (on peut enfin utiliser border-radius, ouais !), moteur de rendu capable d’interpréter HTML5 ainsi que son API (balise video, audio, geolocalisation, webworkers…), implémentation de font-face, mise en conformité de l’interpréteur javascript avec les standards, support de SVG…
Et dernièrement, le blog du navigateur Microsoft a annoncé le support de canvas ainsi que la prise en charge du format libre WOFF, on y croyait vraiment plus !

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

C’est donc une grande avancée et on s’imagine déjà développer des sites internet sans avoir à le tester sur 36 navigateurs ! Mais malgré tout, ne fantasmons pas trop vite, le chemin sera encore long et il faudra je pense attendre encore 10 ans avant de pouvoir utiliser pleinement les nouvelles possibilités offertes par HTML5 et CSS3.

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Utilisateur régulier de jQuery, j’ai décidé de porter ces scripts au sein de la fonction $.support.

Voici la liste des tests possibles : audio, audioMp3, audioVorbis, audioWav, audioAAC, canvas, canvasTxt, command, datalist, details, device, formConstraints, iframeSandbox, iframeSrcDoc, autofocus, placeholder, color, email, number, range, search, tel, url, date, time, datetime, datetime-local, month, week, meter, output, progress, time, video, videoCaptions, videoPoster, videoWebM, videoH264, videoTheora, contentEditable, dragAndDrop, fileAPI, geoLocation, history, localStorage, microdata, applicationCache, eventSource, sessionStorage, svg, svgInHtml, webSimpleDb, webSocket, openDatabase, webWorkers, undo.

Vous trouverez une démonstration des possibilités offertes par le script sur cette page de test du support HTML5 de votre navigateur.

Si vous souhaitez par exemple tester le support du SVG, insérez la ligne suivante au sein de votre fichier Javascript :

$.support.svg // retourne false sur IE et true sur les versions récentes de Firefox

Le script est léger : 8ko en version source et 3ko en version minifiée.

Vous pouvez télécharger l’extend jQuery sur mon espace Github

N’hésitez pas à me signaler le moindre bug.

Édit : correction d’un lien

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

On obtiendra avec jQuery ce type de code pour la div #frontvines

$("body").mousemove(function(event){
   $("#frontvines").css({ 
      backgroundPosition: (event.clientX * 1.1) + 'px 0px'
   });
});

Sur la première ligne, on cherche l’évènement qui indique que l’utilisateur bouge sa souris sur la page. Dans la partie fonction, on place en paramètre la position du curseur pour la réutiliser ensuite pour modifier les propriétés de styles associées à la balise comportant l’id #frontvines. Pour observer le résultat, rendez-vous sur la page dédié à cette démonstration disponible ici.

Pour aller plus loin, je me suis amusé, dans une seconde démonstration, à réutiliser une photo de paysage pour y introduire du parallax. Le principe reste le même, je vous laisse le soin de télécharger le script sur la page de la seconde démonstration, vous y trouverez la manière de procéder dans les commentaires du fichier Javascript.

Quelques liens en rapport avec Parallax :

Effet parallax à l’aide de CSS ou de Javascript

• Le futur site de service Dumago.net (CSS)
• Effet parallax aux mouvements de la souris sur Umaghetzeggen.nl (Javascript)
• Le site des tests de performances Javascript Dromaeo (CSS)
• Démo expérimentale de footer avec effet de vagues (CSS)

Utilisation de parallax sous Flash

• Une démo assez bluffante en Flash
• Effet de rotation rendu grâce à parallax
• Un header construit en parallax
• Le site Freedent White

Tutorial

• Un tutos sur Sitepoint.com sur les effet parallax en CSS

Le principe est simple. On génère en local un fichier XML à partir du fichier distant présent sur le site officiel Vélib via PHP. Une fois cette étape effectuée, on a plus qu’à charger le fichier xml à l’aide de Javascript.

La page de démonstration du script utilise le framework jQuery mais vous pourrez trouver dans l’archive une version en javascript pur et une autre version associée à l’autre framework Prototype (Merci d’ailleurs à Sunny pour son aide )

Vous trouverez toutes les informations nécessaires dans les commentaires des différents fichiers javascript. N’oubliez pas d’aller générer une clé API Google Map sur le site dédié.

Pour pouvoir accéder à la carte et télécharger le script associé, rendez-vous sur la page de démo du script de carte Vélib. L’archive contient le script php pour générer les fichiers xml de la carte Vélib et des informations associées à chaque borne, les fichiers Javascript correspondants, la feuille de style CSS et les images requises.

De part l’intéret grandissant pour cette librairie javascript, j’ai décidé de casser ma tirelire pour m’acheter le livre Premières applications Web 2.0 avec Ajax et PHP de Jean-Marie Defrance et paru aux éditions Eyrolles. Ce n’est pas un ouvrage qui traite véritablement de la bibliothèque jQuery mais il consacre tout de même deux grands chapitres qui permettent d’apprivoiser la bête. A lire donc de toute urgence

Pour en savoir plus :

• Le site officiel de jQuery
• Présentation des fonctions essentielles de jQuery