Nico's dreams - Blog et pensées d'un développeur web - Nicolas Hoffmann

Une nouvelle CSS devrait arriver sous peu

contact@nicolas-hoffmann.net (Nico) — Wed, 10 Mar 2010 19:39:56 +0100

Encore plusieurs tests de routine, et une nouvelle CSS devrait arriver d'ici peu, elle est très proche de celle qui est actuellement par défaut... je n'en dis pas plus, elle sera très vite en ligne.

2 500 000 visites !

contact@nicolas-hoffmann.net (Nico) — Sun, 07 Mar 2010 16:49:33 +0100

Le cap des 2 500 000 visites a été franchi aujourd'hui même ! Joli compte rond !

Utilisation des sprites CSS, ou portes coulissantes

contact@nicolas-hoffmann.net (Nico) — Tue, 02 Mar 2010 18:32:35 +0100

Jojo m'avait demandé une petite explication sur l'intégration CSS de mon dernier skin... que les gourous m'excusent si je ne précise pas tout dans le moindre détail, mais l'idée est bien d'expliquer un principe et une logique, et pas la construction intégrale du graphisme de mon site.

Jojo, tu suis maintenant ! :)

Petite explication historique de cette technique : revenons en arrière il y a... 8 à 10 ans. Les effets de rollover, ou "images survolées" en français se faisaient ainsi :

une image

Quand la souris passait au-dessus de l'image, ça appelait un javascript qui s'occupait de charger une autre image à la place.

Principaux défauts de cette technique : si on désactive javascript... adieu le rollover, et si l'internaute navigue par exemple au clavier... la souris ne risque pas de passer au-dessus de l'image pour déclencher l'effet. Et je ne parle même pas de la lourdeur du code, de la non-séparation présentation/structure... bref, c'était pas terrible.

L'idée est donc venue avec l'arrivée des CSS : puisque cet effet est plutôt de l'ordre de la présentation, autant le gérer dans le fichier qui est prévu... pour la présentation ! La feuille de style donc.



   #id_du_lien{

   background:url("le_fichier_jpg.jpg") no-repeat 0 0;

   }

   /** on met donc en fond l'image du lien **/

   #id_du_lien:hover,#id_du_lien:active,#id_du_lien:focus{

   background:url("le_fichier_survole.jpg") no-repeat 0 0;

   }

Là, c'était déjà mieux, on utilisait une propriété en quelque sorte plus naturelle, la présentation était séparée du code du lien, et en prime on pouvait cibler plusieurs comportements : survolé (hover), focus, etc.

Seul défaut de cette technique, certains navigateurs ne préchargeaient pas le fichier de l'image survolée, d'où un clignotement désagréable lors du premier survol, le seul moyen était de recourir à un préchargement via Javascript... inefficace si ce dernier est désactivé. Mieux, mais pas encore ça !

On arrive donc à une meilleure technique : l'image du lien et l'image du rollover sont dans le même fichier image (l'une au-dessus de l'autre par exemple). On s'arrange pour ne voir que le haut de l'image qui contient le lien non survolé, et quand on le survole, on décale l'image du fond.



   #id_du_lien{

   background:url("le_fichier_final_jpg.jpg") no-repeat;

   background-position:0 0;

   }

   /** en supposant que la hauteur de l'image soit de 50 px **/

   #id_du_lien:hover,#id_du_lien:active,#id_du_lien:focus{

   background-position:0 -50px;

   }

L'illusion est parfaite, l'image est déjà chargée, on ne fait que la décaler de 50 pixels, ce qui est immédiat. Plus besoin de Javascript obstructif, le tout fonctionne sans !

Cherchons encore la petite bête... cela fait dans le cas de mon site pas moins de 10 fichiers à créer rien que pour la navigation de mon bandeau... si j'en crois les apôtres des performances des sites internet que sont les extensions Page Speed et Yslow, c'est pas encore parfait, car il faut minimiser le nombre de fichiers.

Donc l'idée est de pousser le concept de grouper les images au maximum (enfin, il faut que cela reste dans les limites du bon sens). Prenons l'image de mes liens de bandeau.

Comme tu peux le voir Jojo (tu suis ?), elle contient toutes les images des liens, et toutes les images des rollovers. Reste plus qu'à les positionner avec style (si j'ose dire) via la CSS, chaque lien affichant la même image de fond... mais décalée juste comme il faut pour donner l'illusion.



   /** tous les liens ont la même image de fond **/

   #menugauche li a{

   background:url("bandeau.jpg") no-repeat;

   }

   /** l'image de fond est décalée pour le lien CV **/

   #menugauche .cv{

   background-position:2px 0;

   }

   /** et la version survolée utilise le même principe, 

   mais décalée de 52 px en vertical =  elle est en-dessous **/

   #menugauche .cv:hover,#menugauche .cv:active,#menugauche .cv:focus{

   background-position:2px -52px;

   }

Ainsi, on a une unique image pour tous les liens. Les titres de pages utilisent le même principe. Ainsi, je groupe pas moins de 24 images... dans 2 fichiers images.

La totalité du graphisme du dernier skin est chargée via CSS avec 6 images seulement. Je pourrais encore réduire ce nombre en groupant l'entête et le pied de page... mais le fichier résultant serait assez lourd, et le bénéfice serait très relatif.

Voilà pour l'explication du schimili... schilimi... du schmilblick !

Statistiques des navigateurs des visiteurs, Février 2010

contact@nicolas-hoffmann.net (Nico) — Tue, 02 Mar 2010 08:23:54 +0100

La tendance de début d'année se confirme, Firefox grignote petit à petit des parts sur mon site, avec 48% des visites, toutes versions confondues.

Internet Explorer chute légèrement, avec 37% toutes versions confondues... dont 10,8% pour la version 6. La version 8 est en tête... mais c'est timide, seulement 14,4% des visites.

En troisième place, Safari récolte 10,8% des visites (en très légère hausse).

Opéra reste marginal... avec seulement 1,7% des visites au compteur.

D'ailleurs, à partir de maintenant, je ferai un petit topo des navigateurs utilisés à chaque fin de mois. Histoire de savoir quand Internet Explorer 6 passera en-dessous des 5% ! (entre autres)

HTML 5, ça bouge !

contact@nicolas-hoffmann.net (Nico) — Thu, 25 Feb 2010 09:37:22 +0100

Autant XHTML 2 a peiné pour faire son chemin... et n'y est jamais vraiment arrivé, autant HTML 5 semble remporter l'adhésion générale... alors qu'il n'est pas encore un standard officiel.

J'en veux pour preuve quelques articles :

Soyons clairs : je n'ai pas vu un tel engouement pour une technologie non encore standard depuis pas mal de temps.

Bref, si vous êtes développeur ou curieux... suivez l'actualité de HTML 5, c'est un conseil avisé !

Salve d'optimisations et de changements

contact@nicolas-hoffmann.net (Nico) — Mon, 22 Feb 2010 09:21:30 +0100

Je profite du changement de skin pour apporter bon nombre de changements et d'optimisations, je travaille depuis plusieurs semaines sur certaines d'entre elles :

Certains auront peut-être constaté une amélioration de la vitesse d'affichage, j'ai activé la compression de plusieurs types de fichiers, en résulte un téléchargement beaucoup plus rapide de divers éléments, les fichiers PHP/XHTML et CSS ont par exemple perdu 3/4 de leur poids !
J'ai enlevé les CSS alternatives, comme aucun navigateur ne se décide à mieux les supporter (en tout cas de manière permanente), cette possibilité se cantonnera à la page des skins en attendant mieux...
... ce qui permet de fortement alléger le site : environ 50 ko (compressés) et 20 fichiers de CSS alternatives de gagnés.
La page des liens a été réorganisée : des liens relatifs permettent d'accéder directement aux catégories, et les derniers liens ajoutés se retrouvent en tête de chaque catégorie.

Au passage, j'en profite pour signaler trois extensions Firefox qui m'ont bien aidé pour ce travail d'optimisation et que je vous recommande chaudement si vous ne les connaissez pas encore :

L'indispensable et incontournable Firebug, qui permet d'ailleurs de faire tourner les deux autres extensions ci-dessous.
Page Speed pour Firebug, par Google, permet de vite voir ce qui pêche sur une page et d'y remédier aisément (problèmes de cache, trop nombreux fichiers, etc.),
et l'extension Yslow pour Firebug, par Yahoo permet aussi d'optimiser les pages d'un site.

Page speed donne une note sur 100, et Yslow donne des notes de "A" à "F".

Pour donner un ordre d'idée avec Page Speed : le site est passé d'une note de 65 à 80/100 durant les précédentes optimisations puis 89/100 avec la nouvelle CSS et la suppression des CSS alternatives.
Avec Yslow, le site est passé d'un honteux "D" à "B" durant les précédentes optimisations puis à "A" avec la dernière CSS et les CSS alternatives en moins.

Et c'est encore en cours d'amélioration. :)

Nouvelle CSS et nouveau skin : ND

contact@nicolas-hoffmann.net (Nico) — Mon, 22 Feb 2010 08:17:44 +0100

Comme vous pouvez le voir si vous utilisez le skin par défaut, le site vient de s'offrir un redesign complet.

Côté technique pour les curieux, j'ai essayé de réduire au maximum le nombre d'images à charger... les éléments du bandeau (rollovers compris) ne tiennent qu'en un seul fichier image, les titres de pages sont également tous compris dans un unique fichier image.

Seule contrepartie de cette méthode, la CSS est un tout petit peu plus lourde... c'est très relatif : la CSS pèse 8 ko (2 ko de téléchargement effectif, cette dernière étant compressée à l'envoi).

Au final, ce nouveau graphisme est totalement chargé via 6 images.

Je vous invite à donner votre avis sur ce changement assez radical de design en commentaire !

Prochain skin !

contact@nicolas-hoffmann.net (Nico) — Fri, 19 Feb 2010 22:26:43 +0100

Le prochain skin avance à pas de géants, plus que quelques images pour les titres, divers tests, et c'est une affaire qui roule ! :)

En fait, je navigue déjà avec, même s'il n'est pas encore terminé... à vous de deviner la querystring à activer sur la page des skins si vous voulez le voir.

Statistiques des navigateurs des visiteurs

contact@nicolas-hoffmann.net (Nico) — Mon, 15 Feb 2010 15:16:10 +0100

Je ne parlerai bien évidemment que des navigateurs ayant une part significative des visites sur mon site... je ne vais pas parler des 0,01% de Netscape non plus !

Le grand gagnant est depuis le début de l'année... Firefox, avec 44,6% des visites. Les versions les plus utilisées sont la 3.5.7 et la 3.6... normal serais-je tenté de dire, vu que la mise à jour vers la 3.6 a eu lieu il y a peu.

Le second est Internet Explorer, avec 40,9% toutes versions confondues. 17,5% pour la version 8 (bieeeeen), 12,7% pour la version 7 (moins bieeeen), et encore 10,5% pour la version 6 (paaaaas bieeeeeen).

En troisième place, Safari (je suspecte l'iPhone d'y être pour quelque chose) truste 10,7% des visites.

Opéra a la médaille en chocolat... avec seulement 1,5% des visites.

Un petit refresh du site pour tout bientôt

contact@nicolas-hoffmann.net (Nico) — Mon, 15 Feb 2010 14:02:32 +0100

Le graphisme avance bien, le site va s'offrir un petit lifting incessamment sous peu...

Les ordinateurs/interfaces du futur

contact@nicolas-hoffmann.net (Nico) — Tue, 09 Feb 2010 08:40:41 +0100

Autant le dernier né d'Apple (l'Ipad) me faisait ni chaud ni froid (même plutôt froid d'ailleurs), autant cette présentation de Pranav Mistry sur les interfaces du futur... j'ai rarement vu quelque chose d'aussi bluffant et impressionnant.

Jetez un oeil à la présentation de Pranav Mistry : l'ordinateur du futur... c'est tout bonnement incroyable.

Son système SixthSense dépasse de loin les interfaces actuelles... vous n'arriverez pas à penser à autre chose une fois que vous aurez vu cette vidéo (les sous-titres sont disponibles en français).

Coup de grâce... l'auteur annonce que ce système... sera Open source.

Prochaine animation en cours de calcul

contact@nicolas-hoffmann.net (Nico) — Sun, 07 Feb 2010 12:21:47 +0100

La prochaine animation se calcule tranquillement... environ 500 images déjà de rendues. Encore un bon paquet à faire avant la fin ! (et les nuages et l'eau, c'est long)

Prière du malade atteint de gastro-entérite

contact@nicolas-hoffmann.net (Nico) — Thu, 04 Feb 2010 12:27:39 +0100

Notre père qui comme moi êtes sur le trône,
que l'inventeur du smecta soit sanctifié,
que le bol de riz vienne,
que le colombin soit bien fait,
dans la vie comme aux toilettes.

Donne-moi mon imodium de ce jour,
Pardonne-moi de boire du coca,
comme je pardonne à celui qui venter n'osera pas,
Et ne me soumets pas à la tentation de manger des noix,
mais délivre-moi de ce mal.

Oui, je sors... enfin, j'aimerais bien. Cette création originale a été sponsorisée par Lotus.

Firefox 3.6 est sorti

contact@nicolas-hoffmann.net (Nico) — Fri, 22 Jan 2010 07:54:27 +0100

Hormis Page Speed qui n'est pas encore compatible avec Firefox 3.6 (ça ne saurait tarder), Firefox s'est installé comme une fleur via la mise à jour chez moi.

Au menu, de nouvelles possibilités d'extensions (via Personas, qui permet de skinner Firefox très rapidement), une stabilité et une rapidité améliorées (c'est sensible pour la rapidité), et diverses choses pour les développeurs que je n'ai pas encore pu apprécier.

Du très bon boulot !

Nouvelle réalisation : PNL Coach, le site de BrieF'R Formations ®

contact@nicolas-hoffmann.net (Nico) — Wed, 20 Jan 2010 19:50:02 +0100

Je viens de mettre à jour la page de mes réalisations web, avec, en l'état actuel des choses, le projet le plus conséquent que j'ai fait à ce jour : PNL Coach.

Pour le présenter brièvement, PNL Coach est le site de l'institut international BrieF'R Formations®, créé par Floriane Briefer et basé à Genève. Cet institut propose des enseignements dans beaucoup de domaines :

des formations certifiantes en Programmation Neuro-Linguistique (PNL), des formations certifiantes en Coaching, en hypnose éricksonienne, etc.
des stages à thème, que ce soit dans le développement personnel, dans le perfectionnement professionnel, etc.,
des conférences ainsi que des rencontres au sommet avec des sommités dans divers domaines,
des ateliers spécial entreprises,
etc. la liste est longue !

Bref, l'occasion pour moi de découvrir de nombreux domaines très intéressants.

Cette refonte a été l'occasion pour moi :

de rassembler et de mobiliser toutes mes connaissances,
d'en apprendre beaucoup de nouvelles (Jquery notamment),
d'être le point central de nombreuses demandes (référencement, possibilités d'administrations sur mesure, etc.),
d'imaginer et de concevoir toutes sortes de solutions à divers problèmes et contraintes donnés,
de travailler à une échelle largement supérieure à toutes mes réalisations précédentes,
et de prouver qu'un site aussi riche et touffu soit-il peut être administrable de manière aisée et sur mesure !

L'idée étant que l'administrateur du site ne s'occupe que de gérer le contenu et l'activité (les calendriers, les formations, etc.), le site s'occupant en quelque sorte de "mouliner" tout cela pour permettre l'affichage de toutes ces données... tout en se parant des atours d'un site moderne : XHTML/CSS, UTF-8, etc.

Un travail de chef d'orchestre technique en quelque sorte ! Ceci dit, cette refonte assez complexe n'aurait pas été possible sans l'implication très forte de Floriane Briefer dans la conception de son nouveau site... que je salue au passage pour son dynamisme, son énergie impressionnante et pour son talent dans de nombreux domaines.