Dans ce livre, Dan Cederholm de Simple Bits fait le tour de la plupart des nouveautés apportés par CSS3 et de manière assez ludique. Contrairement à beaucoup de livres informatiques, la compréhension des différentes propriétés et techniques sont appréhendées dès la première lecture. Pour certains, ce livre sera une vraie découverte, pour d’autre, il apportera une nouvelle manière de voir certaines propriétés CSS grâce notamment aux exemples traités.

Et je terminerais en remerciant l’agence AL’X pour avoir eu l’amabilité de me faire parvenir une copie de cet ouvrage vraiment passionnant.

Il est possible de réaliser des inclusions de fichiers coté serveur. Pour cela, il vous faudra d’abord rendre opérationnelle l’extension mod_include sur Apache.
Rien de plus simple ! En supposant que votre serveur apache est localisé chemin « /etc/apache2/ », exécutez la commande suivante :

sudo ln -s /etc/apache2/mods-available/include.load /etc/apache2/mods-enabled

Cette commande va créer un lien symbolique du module « include » dans le dossier des modules activés de Apache.

N’oubliez pas de redémarrer Apache :

apache2 -k restart

Une fois cette opération effectuée, vous avez fait le plus gros du boulot. Nous allons maintenant utiliser ce module pour activer les inclusions au sein des fichiers javascript ayant pour extension « .includer.js »

Dans votre dossier contenant les scripts ou même à la racine de votre projet, créez un fichier .htaccess. Dans ce fichier .htaccess, nous allons d’abord définir un filtre de type de fichier (supprimez bien l’espace entre < et Filematch, mon syntax highlighter est buggé ):

< FilesMatch "\.includer\.js$">
< /FilesMatch>
 
Ensuite, il faut activer le module include de Apache :
<pre lang="apache">Options +Includes

Enfin, nous lançons le filtre qui va examiner les fichiers filtrés précédemment et gérer l’inclusion :

SetOutputFilter INCLUDES

Voici ce que vous obtenez au final dans votre fichier .htaccess :

< FilesMatch "\.includer\.js$">
Options +Includes
SetOutputFilter INCLUDES
< /FilesMatch>

Créez maintenant dans votre dossier de script un fichier nommé global.includer.js puis créez votre première inclusion.
Exemple en ayant pris le soin de mettre à disposition jquery dans le même dossier que le fichier gérant l’inclusion:

<!--#include file="jquery-1.4.4.js" -->
$('document').ready(function() {
    alert("L'inclusion fonctionne à merveille");
});

Avec cet exemple, jquery va être automatiquement inséré avant le script créant l’alerte javascript.

L’inclusion coté serveur peut être très utile aussi dans des fichiers css ou même html !

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

Dans la démonstration associée à cet article, vous aller pouvoir visualiser quelques possibilités offertes par CSS3, voici celles que j’ai utilisées :

Le pseudo-selecteur :target

:target est un pseudo-sélecteur permettant d’accéder à un élément du DOM possédant l’id du lien référent.
En clair, si je clique sur un lien dont l’attribut href est égal à #test, la propriété de style a:target { background-color:red; } affectera un fond de couleur rouge à l’élément ayant pour ID #test.

C’est de cette manière que j’obtiens la méthode de sélection des images agrandie dans la démo. Pour IE qui ne supporte par cette propriété, j’ai bidouillé grâce à l’overflow. En clair, le cadre conteneur des images agrandies a pour attribut overflow, la valeur hidden. Il dispose en outre des dimensions exactes d’une de ces images. Au clic sur le lien de la miniature, l’image cible est directement appelée par le hash du lien.

Les ombres

Pour la démo, j’ai utilisé la propriété box-shadow afin de mettre en valeur l’image miniature survolée. La syntaxe est simple :

-moz-box-shadow:0 0 0 rgba(255,255,255,0.5);
-webkit-box-shadow:0 0 0 rgba(255,255,255,0.5);

Il est à noter que cette propriété à été retiré pour le moment de la spécification CSS3.

La propriété transform

Cette propriété permet d’agir sur la forme d’un élément, qu’il s’agisse d’une image ou de toute autre balise standard.

Il est par exemple possible d’effectuer une rotation sur un objet via cette syntaxe :

img {
  transform:rotate(20deg);
}

Il vous sera également possible de mettre à l’échelle certains élements. Voici un exemple :

div#button {
  transform:scale(0.8); /* réduira la div de 20% */
}

Sur la démonstration, je m’en suis servi pour agrandir les miniatures au survol de la souris.

Les transitions

J’ai également utilisé les transitions (qui ne fonctionnent qu’avec la version 3.7 de Firefox et avec les dernières versions de Safari).  Les transitions CSS permettent de modifier les valeurs de propriétés CSS progressivement, sur une durée déterminée. On construit la valeur en spécifiant d’abord la ou les propriétés sur lesquelles on souhaite agir (background-color par exemple ou all pour toute les propriétés liées au sélecteur), on indique ensuite une durée d’animation (en secondes ou millisecondes), puis le type d’effet de transition (default, linear, ease-in, ease-out, ease-in-out ou cubic-bezier).
Voici un exemple de propriété :

transition: all 1s ease-in-out;

Les animations de la galerie CSS3 utilisent pleinement les possibilités offertes par les transitions.

Dernière astuce liées à cette propriétés : pour donner cette impression d’image tournoyante lorsqu’une miniature est sélectionnée, j’ai juste initialisée la rotation de l’image à -360 degrés. Une fois l’image sélectionnée, l’image cible (:target) subit une rotation de 0 degré.

La démonstration

Voici donc la démonstration d’une galerie full-CSS. Pour le fun, visualisez cette galerie sur différents navigateurs (IE 6, Firefox 3.6, Safari). Vous verrez ainsi que la galerie utilise le concept d’amélioration progressive.

Édit le 04/10/2010 : MAJ de la feuille de style suite au commentaire de mekal. Le zip est à jour également sur mon espace GitHub.

• Accéder à la démonstration
• Télécharger la démo

<a href="http://www.smashingmagazine.com">
  <h1>Smashing Magazine</h1>
  <h2>online magazine dedicated to designers and developers.</h2>
</a>

Le lien devient ainsi actif sur l’ensemble des balises bloc. Ceci évite d’insérer plusieurs fois le même lien.

Ce balisage marche sur la plupart des navigateurs dont IE6 seulement voilà, sur ce dernier, le curseur n’est pas correct au survol des balises de type bloc. A la place du pointeur, on à le curseur de type de texte.

Voici ce que l’on peut ajouter dans la feuille de style pour corriger celà :

a * { cursor:pointer; }

Et miracle, le curseur par défaut des liens fonctionne également sur les balises type bloc.

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

Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.

Revenons donc à Duoh.com. Définissons d’abord ce qu’ils font. C’est une agence de design web et print qui existe depuis 1992 et composée de deux personnes : Geert Leyseele, le directeur de projet et Veerle Pieters au secteur de l’illustration et ’intégration. Duoh produit essentiellement de l’interface web mais également des logos, des illustrations, des icones et enfin du print.

Nous allons étudier dans un premier temps l’aspect graphique puis nous nous concentrerons sur l’aspect technique.

Une grille peu conventionnelle

Réalisée sous Illustrator, la maquette du site Duoh.com a pris un certain nombre de liberté graphique. Il ne s’agissait pas ici de s’enfermer dans les contraintes d’une grille.

Pourtant la tentation aurait été grande. On sait à quel point le design suisse (design que voulais évoque le nouveau Duoh) est très cubique et il aurait été évident de se caler précisément sur une grille régulière. Mais ici, il fallait du mouvement, de la vie. Comme on peut le voir sur l’image ci-dessous, certains éléments sont délibérement décalés par rapport à la grille de base.

Cela créé une certaine dynamique dans la mise en page. L’idée est également d’avoir un aspect différent à chaque scroll dans la page.

Concernant le choix des couleurs, là aussi, l’originalité était de mise. La maquette est un vrai arc-en-ciel. Une dizaine de couleurs ont été utilisées (rien que ça !). Mais c’est surtout leur utilisation qui est intéressante. On peut observer en fond de page, une gris très foncé (#3e373c) et dans la zone principale de contenu du blanc. En termes de contraste, on ne peut pas faire mieux. Et sur cette structure monochrome, viennent s’ajouter des couleurs « flashy » qui donnent force et vivacité.

Chaque maquette de page se présente comme une surprise pour le visiteur. Le fond de page change en permanence. En voici quelques exemples ci-dessous :

Il en est de même pour la sidebar…

L’innovation dans l’intégration

Si l’on met de côté un instant l’aspect graphique, on pourra remarquer un certain nombre de techniques d’intégration assez intéressantes et qui peuvent être aussi contestables.

Pour ce qui est des remplacements de texte par des images dans le menu principal, il y a un choix d’utiliser des balises span vides. A première vue, ça peut faire enrager les adeptes de la validité stricte ! Mais là, il est question d’accessibilité. En effet, contrairement aux techniques de remplacements d’image utilisées largement (text-indent :-9999px ou top :-9999px), il n’y aura aucun de souci lors de la lecture de la page si la CSS est activée et si les images ne sont pas chargées. L’astuce est de placer les span avec pour fond l’image au dessus (en position absolue) du texte.

Il peut paraitre également surprenant de trouver parfois des remplacements de texte par des images qui n’ont pas du tout le même contenu. Il y a par exemple sur la page Contact us, un titre de niveau 2 qui contient le texte « Contact us for an estimate? » et qui sous forme d’image est remplacé par « Want a site that beautiful and brainy too ? » ou le texte sur la homepage « Who we are » qui est tout bonnement remplacé par une image de séparation. J’argumenterais qu’ici on différencie l’aspect que le site aura lorsqu’il sera chargé avec tous les éléments graphique et son aspect dans aucune illustration. Aucun aspect n’est handicapé par ces pratiques et l’utilisateur ne manque aucune informations d’un coté comme de l’autre.

Ce qui a le plus perturbé les utilisateurs au premier coup d’œil sur ce site est l’utilisation de l’espace par la mise en page. Le site a été pensé de manière à ce qu’il soit agréable à lire autant sur des petites résolutions que sur des énormes résolutions (type iMac).Ce qui a rebuté plus d’un utilisateur est le fait qu’on ne puisse pas avoir accès sur les résolutions 1024*768 aux citations. D’autres qui avaient des résolutions intermédiaires se lamentaient d’avoir des citations coupées.

Ce genre de commentaires sont anti-productifs et ne feront jamais avancer le web. Il faut replacer le projet dans un contexte. Ici on parle de la vitrine d’un site de création web et print et pas d’un site destiné à un client. Ici, l’aspect novateur est qu’aucune résolution ne souffre de la mise en page. Le site s’adapte très bien à tout type d’écran. Il est enfin plaisant pour des personnes ayant des résolutions de type 1900*1200 de naviguer sur des sites web.

On notera également l’utilisation de la police de caractère Corbel (police distribuée avec Vista) et qui est remplacée par l’Helvetica au cas où cette dernière n’est pas disponible.

Au rang de la technique

Le site utilise le CMS Expression Engine et est hébergé chez Engine Hosting qui met à disposition ce CMS de base. Je ne connais pas encore totalement cet outil, je suis dans la découverte mais il semble qu’il soit très souple et offre grand nombre de fonctionnalités.

Les pages pèse en moyenne 200 ko, les fichiers les plus lourds étant les images de fonds bien évidemment mais on a rien sans rien

Coté javascript, Duoh a fait le choix « tendance » de la librairie Mootools. Ce qui est dommage, c’est d’avoir utilisé une librairie javascript uniquement pour les effets d’images sur la homepage et pour les tooltips de la sidebar. Là encore, ça se discute…

Le site est strictement valide W3C sur le code XHTML. Seule la CSS ne valide pas mais est-ce bien grave ?

Conclusion

Veerle qui a réalisé la maquette et l’intégration html de Duoh propose sans cesse ses idées en matière d’illustrations ou de réalisations web et Duoh.com constitue, une fois de plus, une nouvelle source d’inspiration.

Je vous invite à consulter ces liens pour plus d’informations :

• New Duoh! dot com has launched
• Tweaks to Duoh! dot com

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