HTML modulaire

Spécifications pour un développement durable

Sommaire

HTML ou XHTML ?

La performance du code

Structure des CSS

Les pages dynamiques

La version 5 du HTML apporte son lot de spécificités et de simplifications. Associé au CSS 3, il est possible (et temps) de réaliser des développements faciles à maintenir et à migrer, tout en permettant une meilleure intégration dans les navigateurs.

HTML ou XHTML ?

La grande question qui taraude les développeurs est de savoir quel format choisir. Le XHTML, dérivé du XML et obéissant à des règles strictes de notations ou bien du HTML, moins strict ?

En général, le HTML est conseillé pour les pages statiques et le XHTML pour les pages dynamiques, notamment celles générées à partir de XML (même s'il est possible et facile de générer du HTML à partir de XML). Cependant, pour des raisons de maintenance, il sera plus logique de s'orienter vers du XHTML. Le HTML pur sera, quant à lui, réservé aux pages générées automatiquement (pour les navigateurs ne gérant pas le XML/XSL par exemple).

La maintenance des pages

En effet, au fur et à mesure des évolutions du web, le format des pages change un peu, de nouveaux objets apparaissent (ou disparaissent), les navigateurs intègrent de nouvelles technologies... Tout cela impose que les pages web doivent régulièrement évoluer pour s'adapter au changement.

Or, lorsqu'un site web commence à contenir quelques centaines (voire quelques milliers) de pages web, il est aisé de comprendre qu'une telle migration n'est pas possible sans automatisation. Et pour migrer simplement des pages web, même statiques, rien ne vaut une transformation automatisée, fondée de préférence sur une technologie ouverte. Le plus simple est d'employer le XSLT, ce qui impose au départ des documents au format XML.

Donc, pour permettre une migration de pages web automatisée, il vaut mieux utiliser le XHTML. Les migrations se feront simplement avec une transformation XSL.

La génération d'autres formats

Si l'on veut générer du contenu RSS à partir d'une (ou plusieurs) page(s) web, plutôt que de recopier les données utiles, il sera plus efficace de le générer à partir de la source (page web). Dans ce cas, là encore, rien de mieux que du XHTML + XSL pour générer le résultat attendu.

Ainsi, on pourra générer automatiquement :

La performance du code

Un développement durable nécessite aussi de s'intéresser au coût énergétique d'une page web tant à sa contruction (ou migration) qu'à son usage. En effet, une page web lourde, chargée de scripts sera énergivore et lente à charger, ce qui aboutira à une impatience et un abandon des utilisateurs (donc contre-productif). Pour diminuer les coûts du serveur (stockage, énergie, bande passante, etc.), il faut privilégier le code compact (mais lisible) et réutilisable. Pour cela, des bonnes pratiques s'imposent :

Pour les administrateurs :

  • Configurer les options de cache HTTP proprement. Par exemple mettre des dates d’expiration avec une date plus ou moins éloignée. Google Allemagne met par exemple pour l’image du logo une date d’expiration de 1 an. Sans date d’expiration, les éléments de la page sont rechargés à chaque visualisation de la page.

  • Utiliser la compression HTTP. Ceci permet de réduire la taille des fichiers de 50 à 70%.

  • Appliquer des principes Green IT (virtualisation, green webhosting…)

Pour les développeurs :

  • Supporter le cache HTTP coté serveur pour les contenus générés dynamiquement

  • Minimiser et optimaliser les scripts. Des outils permettent de faire cela : ShrinkSafe de Dojo-Toolkit, CSSTidy, ...

  • Optimaliser les éléments graphiques (Jusqu’à 96% d’optimisation possible sans dégradation notable)

  • Optimaliser les vidéos et animations

Pour les utilisateurs (navigateur) :

  • Configurer des larges caches. Ceci permet de ne pas recharger tous les éléments à chaque visualisation des pages. Ne pas supprimer le cache à la fermeture du navigateur.

  • Utiliser des bloqueurs de publicité

  • Utiliser des navigateurs supportant la compression HTTP

Structure des CSS

Le principe du CSS est de séparer le fond de la forme, l'information de la mise en page. Cependant, tous les styles sont chargés en même temps, même s'ils ne sont pas tous utilisés dans la page.

Il y a la possibilité d'appeler plusieurs CSS dans une même page en fonction des styles dont elle aura besoin. Ce qui multiplie les requêtes de chargement et le code de la page.

Le plus simple est donc de réaliser un CSS modulaire.

Un CSS modulaire est une feuille de style divisée en modules fonctionnels qui permettent de ne charger que ce qui est vraiment utile.

Pour ce que nous voulons appliquer, les CSS peuvent être divisées en :

  • Commun : styles communs à toutes les pages (conventions, accessibilité, typographie, initialisation des propriétés, ...).

  • Thème : tout ce qui concerne la définition des thèmes, c'est-à-dire les propriétés des éléments graphiques (taille de police, couleurs, graisse, ...).

  • Options : traitements optionnels ou spécifiques définis au cas par cas par le contexte (styles qu'on ne retrouve qu'à un seul endroit).

  • Structure : structure des pages, c'est-à-dire proportions, dimensions des éléments principaux de la page, en fonction de la taille de l'affichage (HD, normal, téléphone, iPad, ...).

Pour éviter les différences de styles entre les pages, il faut lier les styles définis non pas au style d'affichage mais au type de la donnée. Ainsi, on évitera d'avoir, pour une même donnée, un bloc avec des bords arrondis sur une page et carrés dans une autre. Il est alors aisé de changer le thème sans avoir besoin de retoucher le code des pages.

Les pages dynamiques

Pour un web rapide, il vaut mieux alléger au maximum la charge de travail du serveur et laisser le plus possible le client effectuer les traitements lourds. Il ne faut garder sur le serveur que le strict minimum.

Ainsi, générer une page HTML dynamique complète du côté du serveur est peu rentable et peu performant.

La solution la plus simple et la plus efficace consiste à ne générer que les données côté serveur et de construire l'affichage de la page côté client. L'exemple le plus simple repose sur l'emploi du XML (données)/XSL (structure), au lieu d'utiliser du HTML qui contient les données mélangées à la structure et qui oblige à recharger systématiquement l'ensemble.

Le serveur génère les données utiles au format XML et les envoie au client. La transformation et l'affichage se fera sur celui-ci grâce à l'appel d'une feuille de style XSL.

Lors de la première visualisation, le client charge en cache tous les styles et les fichiers nécessaires à la structure et ensuite, il n'aura plus qu'à accéder à son cache pour la structure (statique) et la mise en forme au lieu de les charger à partir du serveur. Il ne faut pas hésiter à augmenter la taille du cache de son navigateur.

Bien entendu, cette méthode n'empêche pas d'appliquer les mêmes règles déjà énoncées...