Différentes versions de ces pages web se sont succédées. Le positionnement des éléments (les feuilles de style) ont été les principales raisons de ces versions.

Le contenu de ce site est à mi chemin entre un blog avec un contenu et des exemples techniques et un wiki.

Principales technologies de développement web

La majorité des blogs sous forme de pages web, utilisent une base de données pour stocker et publier des articles. Des technologies de développement web comme php symphony, laravel peuvent être utilisées de manière autonome pour la gestion d'un blog ou conjointement avec d'autres technologies comme Nodejs, react... Les technologies comme Nodejs, react, vuejs peuvent également fonctionner de manière autonome sur un serveur dédié.

Des outils moins techniques existent également sous la forme de CMS (Wordpress, Joomla, Drupal...).

Actuellement des outils low-code, no-code (weweb...) peuvent également être utilisés pour développer des pages web sous la forme de blog/wiki.

Les outils web évoluent assez rapidement, des frameworks peuvent apparaître, avoir un succès soudain et moîns être maintenus par la suite (react...) ou remplacés par des outils qui apportent des améliorations ou simplifications (AlpineJS, htmx...). Ces outils ont en majorité un socle commun qui est le langage javascript.

Javascript fonctionnement principalement côté navigateur et permet d'économiser les ressources d'un serveur. A l'heure des datacenters, économies d'énergies, certaines technologies évoluent vers des fonctionnements moins énergivores comme par exemple l'utilisation des ressources du navigateur en lieu et place d'un traitement de données par un serveur web.

Techniques utilisées pour les pages de ce site

Pour ces pages web, le principal outil de développement est l'éditeur de texte et pour certains exemples sur quelques pages une base de données.

Ce choix est justifié par la motivation pour comprendre les bases du développement web.

Une version existe sur le cms wordpress et joomla.

Avantages et inconvénients du choix

Le tableau ci-dessous présente les principaux éléments qui peuvent être pris en compte pour quelques modes de développement communs avec des moyens et des outils simples.

Explications détaillées

L'avantage de l'utilisation d'un framework comme par exemple symphony ou laravel ou un cms, le contenu est associé à des étiquettes (labels) et stocké dans une base de données. Les étiquettes apparaissent sous forme de liens sur les pages web et c'est assez simplement configurable dans le menu de configuration du cms.

L'inconvénient du mode texte est l'organisation du contenu qui doit être pensé en avance ou utiliser des outils en local qui peuvent agir sur des fichiers texte (html) pour automatiser une mise à jour.

L'avantage du mode éditeur de texte est la possibilité de stocker entièrement le contenu en local et de travailler sur le contenu sans nécessairement être connecté au serveur. C'est également un avantage pour avoir un backup rapidement utilisable.

Le transfert des pages web vers le serveur est assez simple et le plus souvent significativement plus rapide. Il y a toujours une copie des pages publiées stockées sur le serveur et une cope sur une ou plusieurs machines locales (physiques ou virtuelles) ou sur des supports amovibles (clé usb, disque dur, bdr...).

L'inconvénient de l'utilisation d'un cms notamment est qu'il peut être assez difficile de configurer une version locale (le moteur et la base de données) identique à la version sur le serveur. Il est possible avec des modules de faire des backups par incrémentation mais c'est assez technique et assez contraignant surtout pour la mise à jour des données locales vers le serveur.

L'avantage du mode texte est la possibilité d'appliquer simplement des fonctionnalités comme le mode clair/sombre ou d'autres fonctionnalités.

Archive de cette version en téléchargement

Ce dessous en téléchargement la version complète (balises html et feuille de style) de la structure de ces pages web.

Version complète avec positionnement par grid et mode responsive

🏁️     index_demo_v25.html     🏁️

Autre version avec le position flex et le mode responsive

🏁️     index_demo_v25.html     🏁️

Ces pages utilisent un positionnement de type css holy grail layout mais avec quelques variations comme l'en-tête et pied de page (header et footer) fixes.

Le design holy grail layout se retrouve fréquemment sur des sites web et des pages web avec différentes variations.

Pour ce design avec les variations mentionnées, il faut combiner le positionnement grid avec un positionnement de type block. Pour obtenir ce positionnement, j'ai utilisé l'IA mais avec quelques modifications. Pour le mode responsive, j'ai trouvé des exemples existants que j'ai adaptés à ce positionnement.

Dans les différents choix de techniques, le positionnement flexbox s'est présenté comme une alternative possible au positionnement grid. Les techniques de positionnement flexbox nécessitent quelques heures pour comprendre les bases et pour retenir cette technique, il faut pratiquer régulièrement.

Le positionnement grid peut sembler plus intuitif mais le positionnement flexbox propose certaines techniques pratiques. Le positionnement flexbox peut s'appliquer sur cette page web à l'intérieur des éléments définis par le positionnement grid.

Cette page peut servir pour comprendre les bases du développement web et très probablement être modifiée, améliorée et évoluer vers un design alternatif.