xzoom : un petit outil bien pratique pour le montage HTML

• Publié le 21 Septembre 2009 à 22:31
• 0 commentaire - 0 trackback

xzoom fait partie de ces petits outils peu connus mais qui peuvent rendre de grands services. xzoom permet de d'agrandir une zone de l'écran quasiment en temps réel, en d'autres termes, à partir du moment où une zone a été choisie (en glissant sur la zone à partie de sa fenêtre), la fenêtre de xzoom se met à jour en même temps que la zone concernée (à l'inverse de xmag par exemple). Cet outil est une aide précieuse pour le montage / l'intégration HTML/CSS lorsqu'il faut caler des blocs avec plus ou moins de contrastes au pixel près.

L'exemple typique d'utilisation est de mettre la fenêtre toujours au dessus des autres dans un coin de l'écran après avoir choisi la zone sur laquelle zoomer. Il est ensuite beaucoup moins fatiguant de vérifier l'alignement correct de zones précises d'une page par un simple rafraîchissement.

Mes yeux remercient l'auteur de xzoom mais continuent de maudir Internet Explorer :-)

Optimiser son site : limiter le nombre de requêtes HTTP

• Publié le 30 Août 2008 à 13:36
• 0 commentaire - 0 trackback

Limiter le nombre de requêtes HTTP est la première règle (la plus efficace) pour l'optimisation d'un site bien avant la configuration de l'entête d'expiration et la compression gzip des contenus textuels, mais il peut aussi s'agir de la plus complexe à mettre en place. Si il est assez simple de rassembler les feuilles de style CSS et les fichiers Javascript pour limiter le nombre de téléchargements, le cas des images est un peu plus complexe. On peut appliquer la technique dite des CSS Sprites sur les images utilisées pour la décoration via la propriété CSS background. Cette technique consiste à rassembler les images en un seul fichier et à jouer avec la position pour n'afficher que la zone voulue. En effet un navigateur mettra moins de temps à télécharger 1 fichier que 6 petits fichiers de taille totale équivalente et en plus le fichier réunissant les 6 premiers est généralement plus petit, double bénéfice donc. Au niveau montage, il faut par contre savoir qu'une dimension doit nécessairement être fixée ou au moins contrôlée (par exemple le texte contenu est toujours le même), il ne me semble pas possible de remplacer des images qui se répètent sur les axes X et Y à la fois.

J'ai donc expérimenté cela sur ce site dont le design est suffisamment simple. Le design utilise 8 images via la feuille de style, mais 2 restent un peu à part :

1. le logo RSS est un PNG 24 bit pour que les arrondis soit vraiment arrondis, il restera donc seul
2. l'image utilisée en fond des citations est assez large alors que toutes les autres le sont beaucoup moins ou sont répètées sur l'axe horizontale, elle reste intacte également.

Les 6 images restantes sont à l'origine des GIF, j'en ai profité pour les convertir en PNG pour comparer les tailles des différents agencements, ce qui donne le tableau récapitulatif suivant (les tailles sont en octets) :

Je suis très étonné par la taille du GIF rassemblant les 6 images d'origine. Pour le reste, le PNG est légèrement plus efficace presque partout et le CSS Sprites à base de PNG est 11% plus petit que les 6 GIF originaux (et presque autant avec les 6 PNG), j'ai aussi l'impression que l'affichage du site est un peu plus rapide avec ou sans cache navigateur. Il faut quand même noter que cette technique fait légèrement grossir la feuille de style mais comme celle-ci est compressée l'augmentation est plus que faible (1 octet !) et en m'y replongeant j'ai trouvé quelques optimisations qui ont largement compensées cet écart et je n'ai pas encore réellement minifié la feuille de style...

Finalement sur ce site rien de très compliqué, la mise en page est très simple, le plus dur étant d'ordonner correctement les images pour ne pas se retrouver avec une belle mosaïque. Pour voir un exemple un peu plus complexe, on peut étudier le montage du site Yahoo.fr par exemple même si il ne s'agit pas non plus de la page la plus complexe du monde...

Livre : "High Performances Web Sites"

• Publié le 10 Août 2008 à 22:29
• 3 commentaires - 0 trackback

Only 10-20% of the end user response time is spent downloading the HTML document. The other 80-90% is spent downloading all the components in the page.

Traduction libre :

Seulement 10 à 20% du temps de réponse ressenti par l'utilisateur provient du téléchargement du document HTML. Les 80 à 90% restant viennent du téléchargement des autres composantes de la page.

Voila la Performance Golden Rule qui sert de base à ce court mais excellent bouquin High Performances Web Sites de Steve Souders (employé chez Yahoo!) expliquant 14 règles pour améliorer la rapidité d'affichage d'un site web. En fait ce livre reprend les 14 premières bonnes pratiques listées par Yahoo! pour améliorer les performances générales d'un site web. Ces points sont applicables à quasiment tous les sites (à part peut être l'utilisation d'un Content Delivery Network qui est hors de porté du commun des mortels...) quelque soit la technologie employée puisqu'il s'agit essentiellement de configuration au niveau du serveur web ou dans la construction des pages.

Ces 14 règles sont les suivantes :

1. Limitez le nombre de requêtes HTTP
2. Utilisez un content delivery network
3. Ajoutez l'entête Expires
4. Compressez avec gzip
5. Placez les feuilles de styles en haut de page
6. Placez les scripts javascript en bas de page
7. Évitez les expressions CSS
8. Externalisez les feuilles de styles et les scripts Javascript
9. Réduisez les résolutions DNS
10. Réduisez la taille les scripts Javascripts
11. Évitez les redirections
12. Supprimez les scripts en double
13. Configurez l'entête ETags
14. Rendez vos appels AJAX cachables

En plus de ces règles, le livre explique succintement quelques concepts du protocole HTTP liés aux performances et propose une analyse des 10 plus gros sites américains (MSN, Google, Yahoo!, CNN, Wikipedia, MySpace...). Si ces règles sont assez connues (et pour certaines de l'ordre du bon sens), l'intérêt principal du livre réside dans la quantification des gains éventuels ainsi que dans les explications amenant à ces règles sur le fonctionnement des navigateurs sur la construction d'une page, la parallélisation des téléchargements ou le cache DNS.

Bref, il s'agit vraiment d'un très bon livre pour tout développeur ou administrateur où la plupart des recettes sont applicables en quelques minutes seulement pour un résultat immédiat et assez spectaculaire.

pwet 2.0

• Publié le 05 Août 2008 à 20:48
• 4 commentaires - 0 trackback

Nouveau design, nouvelles couleurs, nouveaux templates, nouveaux bugs peut-être mais toujours eZ Publish ! ça me démangeait depuis un moment, je repoussais toujours en attendant l'intégration du composant Template d'eZ Components bien plus performant mais vue la nouvelle roadmap d'eZ Publish et le projet V, ce n'est pas encore pour tout de suite !

J'espère donc que c'est plus clair et lisible, moins buggé sous Internet Explorer notamment (fini les Peekaboo normalement) et surtout bien plus performant avec une gestion des caches plus fines (oui j'ai appris quelques trucs depuis Août 2006).

Email Standards Project

• Publié le 10 Décembre 2007 à 19:07
• 0 commentaire - 0 trackback

Je viens de découvrir via un billet de Frédéric de Villamil, le site Email Standard Project qui milite pour le support des standards du web au niveau des clients de messagerie mais surtout dresse l'état actuel du support des principaux clients de messagerie de manière simple et synthétique. Comme je le disais précédemment dans Word 2007 comme moteur de rendu d'Outlook 2007, on peut voir le rendu lamentable de leur test avec ce client de messagerie et pourtant le test est pas très compliqué... Même certain webmails font mieux.