Générateur de sites web

IMPORTANT

Ce site web est un prototype en cours de construction, destiné à valider le code source généré par le logiciel Thot (version 0.0.1), projet personnel lui-même en phase de développement. Son contenu ainsi que son graphisme sont donc expérimentaux et n'ont de ce fait aucune valeur commerciale et/ou juridique. Pour obtenir plus d'information sur cet environnement, vous pouvez vous reporter à la page intitulée Questions fréquentes. Une page Facebook consacrée au projet peut par ailleurs être consultée. Un compte Twitter fournit des informations sur l'avancement du projet.

Composant web vs grille CSS

Par sepecat - publié le

Dans la conception d'un site web, il y a d'une part le contenu proprement dit, représenté par les pages HTML et d'autre part son affichage à l'écran (ou sur une imprimante) défini via les feuilles de style CSS (Cascading Style Sheets - une spécification édictée par le W3C).

L'évolution récente des périphériques sur lesquels vont être présentés ces sites web va dans le sens d'une hétérogéité croissante des dimensions en terme d'écrans, leur taille allant du téléphone portable disposant d'une zone d'affichage réduite jusqu'au écrans de taille XXL dotés d'une densité de pixels très élevée (ex. écrans Retina d'Apple).

Tenir compte de cette évolution a contraint les concepteurs de sites web à revoir en profonteur leur façon de travailler et inventer le concept de sites dits « responsives », c'est à dire aptes à s'afficher correctement sur différents types de périphériques, quelle que soient leur résolution, à partir d'un code source unique.

Pour répondre à ce besoin, il a donc été nécessaire de prendre en compte des largeurs d'écrans intermédiaires, dites « points de rupture », en deça et au-delà desquelles le contenu d'une page HTML est automatiquement restructuré pour s'afficher de façon satisfaisante et rester lisible par la personne visitant le site web.

Une réorganisation « responsive » va notamment consister à agrandir la taille des boutons ou des liens hypertexte afin de tenir compte du mode de sélection en usage sur les téléphones portables. En effet, sélectionner ces éléments d'interface avec le doigt plutôt qu'avec la souris habituellement utilisée sur les ordinateurs de bureau s'avère être un exercice plus difficile lorsque rien n'a été prévu à cet effet.

Il convient de noter par ailleurs que cette capacité des sites web à se réorganiser automatiquement en fonction des caractéristiques d'affichage des périphériques sur lesquels ils s'affichent est de plus en plus prise en compte par les moteurs de recherche. L'examen des statistiques de connexion démontre en effet que le nombre d'utilisateurs visitant des sites à partir de téléphones portables ou de tablettes est en constante augmentation, la fraction de connexions ayant lieu à partir d'un ordinateur de bureau étant par voie de conséquence elle-même en diminution constante.

La notion de grille CSS

La solution adoptée par la plupart des ateliers logiciels tels que Bootstrap ou Materialize repose sur une notion de grille comportant un certain nombre de divisions verticales (en règle générale une douzaine). Il suffit ensuite de définir au niveau de la feuille de style CSS différents sélecteurs en fonction des points de rupture à gérer. Par exemple, dans sa version 4.1 Boostrap définit une suite de points de rupture exprimés en pixels, dont les valeurs s'établissent respectivement à 576, 768, 992 et 1200 pixels. Le pixel est l'unité de mesure adoptée la plupart du temps mais dans l'absolu rien n'empêche de définir une grille CSS dont les points de rupture soient exprimés en pourcentage ou tout autre unité CSS.

Une fois ces points de rupture définis, des media queries sont ensuite associées à chacun d'entre eux dans la feuille de style CSS et des sélecteurs permettent d'attribuer une largeur correspondant à une ou plusieurs colonnes de la grille. Un sélecteur Bootstrap dénommé col-4 correspondra ainsi à 4 colonnes de large dans la grille en vigueur pour un point de rupture (et donc une largeur d'écran) donné. Par exemple, si le point de rupture courant vaut 576 pixels, la zone affichée représentera in fine une largeur effective de 192 pixels (soit 576 divisé par le nombre de colonnes de la grille, douze, puis multiplié par le nombre de colonnes du sélecteur fixé à 4). En appliquant le même mode de calcul cette largeur passera à 400 lorsque le point de rupture aura été positionné à 1 200 pixels.

Pour une explication plus détaillée sur le mode de fonctionnement des grilles CSS et leur intégration dans un fichier HTML, le lecteur pourra utilement se référer au site 960 Grid System et notamment à la page de démonstration comportant une représentation graphique d'une grille et de ses colonnes.

Ce système de grille CSS, utilisé par de très nombreux sites sur le web, fonctionne correctement mais présente l'inconvénient, à mon sens, d'être rigide car n'étant pas prévu en l'état pour définir une largeur qui ne soit pas égale à une fraction exacte de la grille de référence. Le concepteur de site web ne peut sélectionner qu'une largeur de N colonnes par rapport au nombre disponible dans la grille et la mise en page correspond en sortie à une largeur fixe par rapport au point de rupture en vigueur à ce moment là. Ainsi, il n'est pas possible d'indiquer un sélecteur représentant 4,5 colonnes de la grille sans adaptation de la feuille de style…

Une nouvelle approche via les composants

Le générateur de sites web Thot étant basé sur la notion de composants, sorte de briques logicielles assemblées pour structurer une page HTML, chacun de ces composants est reponsable de l'affichage d'une zone bien définie à l'écran, en tenant compte de la diversité des périphériques pouvant être utilisés.

Pour répondre à ce besoin, il n'est pas défini de grille CSS basée sur un certain nombre de colonnes et des points de rupture fixes. C'est au niveau de chaque composant que se décident les conditions d'affichage et notamment les différentes largeurs auxquelles cette brique logique procédera à une restructuration automatique de son contenu lorsque le navigateur et donc la page web auront été redimensionnés.

Par exemple, dans un document HTML un bloc de type paragraphe n'opérera que très peu d'ajustements lorsque la largeur d'écran diminuera ou augmentera. A contrario, une section d'entête de page comportant plusieurs zones distinctes (titre, logo, barre de navigation, etc.) sera plus complexe à réajuster en réaction à ce changement. Les paragraphes n'auront ainsi que très peu voire aucun point de rupture associé, alors que l'entête de page en aura probablement plusieurs de définis en fonction des propriétés du composant à ce moment là.

La définition des points de rupture étant déléguée au niveau des composants et non plus de façon globale via la feuille de style CSS, le générateur de sites web Thot va, pour chaque page HTML, collecter les informations et les agréger pour définir les attributs de style devant être associés aux balises HTML constituant la structure d'une page. Ces attributs seront par ailleurs analysés et optimisés de façon à réduire la taille du flux CSS et par voie de conséquence la consommation de bande passante.

N'étant plus contraint par une grille CSS et des points de rupture fixes, un composant est donc de facto libre de positionner ses blocs internes et de les afficher de la meilleure façon possible en fonction de l'espace effectivement disponible à un instant T sur la fenêtre d'un navigateur. Ce positionnement est par ailleurs indépendant des autres composants et peut définir ses taquets correspondant à autant de largeurs d'écrans comme bon lui semble.

Contrairement à l'usage le plus fréquent constaté sur les grilles CSS, les composants mis en œuvre par le générateur de sites web Thot basent leurs points de rupture sur des mesures exprimées en « rem » et non pas en pixels. L'avantage est d'intégrer dans le positionnement une proportionnalité par rapport à la taille de base de police de caractères choisie par l'utilisateur pour la configuration de son navigateur web. L'ajustement sera ainsi plus précis, notamment lorsque le périphérique de sortie se trouve avoir une haute résolution. Toute largeur exprimée en pixels par référence à un écran standard apparaîtrait a contrario particulièrement petite sur ce type de terminal HD, alors qu'une valeur en rem restera correctement ajustée par rapport au code CSS.

L'optimisation de la mise en forme

Comme indiqué supra, chaque composant agit de façon indépendante pour définir ses propres points de rupture. Il remonte esuite vers la page les media queries qui lui sont nécessaire pour s'afficher correctement, quelle que soit la résolution du périphérique de sortie.

Cette indépendance signifie un risque accru d'apparition de doublons dans les mises en forme, avec des attributs CSS dont les valeurs seront redondantes (ex. définition des marges internes et externes, mise en gras ou en italique, etc.). Cette duplication de valeurs, si elle n'est pas maîtrisée, aurait pour effet d'alourdir le poids du fichier lors du téléchargement d'une page par le navigateur web.

Pour y remédier, le générateur de sites web Thot procéde à la collecte des attributs CSS pour une page donnée en analysant chacun des composants intervenant dans sa structure. Il factorise ensuite les valeurs identiques en regroupant dans un même script CSS les sélecteurs qui les utilisents. Par ailleurs, toute valeur qui s'avère identique à celle définie par défaut par le sélecteur universel est ignorée puisque ne venant pas modifier un contexte déjà défini.

De façon globale, la feuille de style CSS réinitialise à 0 par exemple les marges internes et externes des éléments HTML présents sur une page. Si un composant définit à son niveau une règle ayant pour effet d'attribuer la même valeur nulle à une marge, cette attribution est purement et simplement ignorée car redondante.

Ce genre d'optimisation permet d'alléger les besoins mémoire du navigateur devant afficher la page, tant en ce qui concerne l'analyse du flux CSS téléchargé que le stockage et l'indexation des différents sélecteurs utilisés. La diminution de besoins en matière de bande passante constaté l'est dans une proportion qui est loin d'être négligeable.

Dans le même ordre d'idée, d'autres optimisations sont opérées par ailleurs, telles que la suppression automatique des commentaires dans la version mise en production et le retrait de certains caractères lorsque la syntaxe CSS le permet (ex. dernier « ; » présent avant une « } » de femeture de bloc attribut).

Niveau de qualité CSS constant

Bien qu'elles puissent être effectuées de façon manuelle, toutes les optimisations précitées requièrent cependant une solide connaissance de la part des intervenants, se révèlent chronophages et restent sujettes à d'inévitables erreurs..

L'avantage de recourir à un générateur est ici mis en évidence dans la mesure où cet outil, une fois parfaitement validé, est capable de délivrer des fichiers HTML5 et scripts CSS dont le niveau de qualité restera constant. La connaissance des règles et contraintes devant être appliquées étant intégrée dans le générateur, celle-ci n'est par ailleurs plus dépendante du niveau de compétence des intervenants appelés à mettre en œuvre ce générateur.

Lorsqu'une non conformité est constatée dans un balise HTML ou un attribut CSS produits par le logiciel, il est possible après correction de relancer la génération des sites web préexistants, remettant ainsi l'ensemble du code HTML et CSS du parc au même niveau de qualité garanti.

De même, lorsque des règles de sécurité évoluent et requièrent la mise en place de nouvelles instructions (ex. Content Security Policy) pour accroître le niveau de protection des pages web d'un site sur les navigateurs, la mise à jour du parc existant étant relancée en suivant après mise à jour du générateur.

Image bouton cliquable permettant le retour en haut de page