- Publié le 30 Août 2008 à 15:56
Bon, il faudra encore attendre (au moins) un an pour que j'écrive le tradionnel billet anniversaire le bon jour mais je progresse :)
L'année dernière, j'étais en déplacement et très occupé sur un site de presse et cette année... pareil mais dans un tout autre style. De toute manière tout ce que je disais l'année dernière et l'année d'avant à l'ouverture est toujours ou presque valable. Les statistiques ont un peu évolué mais j'espère avoir le temps de bricoler un truc un peu plus graphique qu'une liste de chiffres d'ici peu de temps.
- Publié le 30 Août 2008 à 15:36
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 :
- le logo RSS est un PNG 24 bit pour que les arrondis soit vraiment arrondis, il restera donc seul
- 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) :
| Technique
| Image(s)
| CSS gzippée
| Total
| Ratio
|
|---|
| 6 GIF
| 1915
| 3067
| 4982
| 100%
|
| 6 PNG
| 1754
| 3067
| 4822
| 97%
|
| 1 GIF
| 3154
| 3068
| 6222
| 124%
|
| 1 PNG
| 1379
| 3068
| 4447
| 89%
|
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...
- Publié le 26 Août 2008 à 23:34
Clochix a publié cette semaine deux articles à propos de sécurité; le premier sur les CMS en général et le second plus spécifiquement sur eZ Publish. Le problème pointé est l'affichage par défaut de tous les objets dans eZ Publish par les templates par défaut même lorsque cela ne devrait pas arriver. La solution (simple) proposée est de faire des surcharges s'appliquant en dernier et n'affichant rien pour éviter d'afficher tout ce qui n'a pas été prévu. Évidemment il est toujours mieux de restreindre les droits, mais c'est un bon dernier rempart à la divulgation d'informations...
Il y a évidemment d'autres éléments à considérer et j'en oublie probablement d'ailleurs mais voici ceux qui me viennent à l'esprit.
Au niveau template, il faut toujours penser à utiliser l'opérateur wash(), il permet de s'assurer que tous les caractères spéciaux sont échappés pour produire du code XHTML valide mais aussi pour éviter des attaques de type XSS si surtout votre site propose aux internautes de contribuer.
Au niveau système pour un site en production, seul le répertoire var devrait permettre l'écriture au serveur web. On peut aussi restreindre les droits de l'utilisateur MySQL utilisé par eZ Publish pour limiter la portée d'une éventuelle mauvaise utilisation de ce compte.
On peut aussi penser à désactiver les modules et/ou les vues inutiles pour un siteaccess donné. Par exemple, pour ce site, le fichier site.ini.append.php de mon siteaccess correspondant au front comporte la configuration suivante :
[SiteAccessRules]
Rules[]
Rules[]=access;enable
Rules[]=moduleall
Rules[]=access;disable
Rules[]=module;user/register
Rules[]=module;user/forgotpassword
Rules[]=module;user/activate
Rules[]=module;user/success
Rules[]=module;ezinfo
Ces quelques lignes désactivent quelques vues du module user ainsi que le module ezinfo qui sont accessibles aux utilisateurs anonymes alors qu'ils ne me sont pas nécessaires. La vue ezinfo/about en particulier donne des informations sur les extensions activées et surtout sur la version d'eZ Publish ce qui permet de savoir à quoi est potentiellement vulnérable le site. Dans tous les cas, il vaut mieux être à jour, les versions 4.0.0, 3.10.0 et 3.9.4 sont vulnérables à quelques failles connues.
Il faut aussi penser à nommer les fichiers de configuration en .ini.append.php et à encadrer le contenu par des commentaires PHP ce qui évite toute possibilité de lecture via un accès direct par le serveur web. À ce niveau, avoir un site eZ Publish en mode Virtual Host devrait aussi apporter un gain en cachant presque complètement l'arborescence "physique" du site.
Enfin au niveau des extensions il faut évidemment penser à échapper toutes les données inconnues avant de l'utiliser dans une requête SQL (ça n'est pas spécifique à eZ Publish !), la méthode escapeString() de la classe eZDBInterface est faite pour ça.
- Publié le 26 Août 2008 à 00:30
Un des premiers réflexe est probablement d'aller chercher l'appartement rêvé sur les sites d'agences immobilières, et ce n'est pas toujours aussi simple qu'on pourrait le penser. Sans même parler d'accessibilité, on est à la limite (et parfois pas du bon côté) de l'utilisabilité ! Finalement, le meilleur est une fois de plus celui qui applique le principe KISS.
Il semble que la perfection soit atteinte non quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retrancher
Antoine de Saint-Exupéry
La FNAIM :
Vu de loin, ce formulaire a l'air vraiment bien, enfin pourvu que chaque GIF servant de titre ou de numérotation soit bien chargé ce qui a été trèèès long à ma première visite et l'est encore aux suivantes !??. Il faut aussi deviner dans la partie sélection du type de bien, un clic sur un type l'ajoute comme critère de recherche (façon checkbox), mais qu'un double clic sur un élément dé-sélectionne les autres. Mais les barres de sélection des tranches de prix, du nombre de pièces et de la surface c'est insupportable et pénible à utiliser surtout sur un PC portable et quand finalement la recherche ne fonctionne tout simplement pas... grrr Au suivant !
Foncia
Le formulaire de recherche sur le site de Foncia a au moins le bon goût d'être quasi inutilisable dès le premier champ et complètement inutilisable au deuxième ce qui est un gain de temps non négligeable ;-) En effet, ils ont visiblement voulu remplacer la bonne vieille balise <select> par un truc à base de <div> et de Javascript malheureusement sous Firefox en voulant choisir une option du menu déroulant, celui-ci disparaît. Sur le premier élément, on peut s'en sortir en passant la souris et en cliquant sur la scrollbar (!) mais sur les suivants point de scrollbar, point de salut ! Quasiment un champ sur deux inutilisables, ça fait beaucoup. Dans les mentions légales on peut lire Site optimisé pour Internet Explorer, ça doit être pour ça...
Orpi
Par rapport aux deux autres, il n'y a pas photo, c'est simple, c'est rapide, ça fonctionne et c'est relativement intuitif, reste que les intitulés blancs sur fond bleu clair c'est pas hyper lisible, mais c'est un détail par rapport au précédent.
- Publié le 24 Août 2008 à 20:56
C'est un peu long à charger (nécessite le plugin Flash), mais ça en vaut vraiment la peine. Dommage que la photo ne soit pas en meilleure résolution, couplée avec un système où on peut pointer une zone particulière on aurait pu s'amuser à trouver des détails amusants...
