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
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
Des outils moins techniques existent également sous la forme de CMS (Wordpress, Joomla, Drupal...).
Actuellement des outils low-code, no-code (
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 (
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'
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.
Mode de développement | Editeur de texte | Framework PHP | CMS |
---|---|---|---|
Niveau technique requis | intermédiaire | avancé | débutant/intermédiaire/avancé |
Vitesse de développement | lent/moyen (selon niveau technique et besoins) | lent/moyen (selon niveau technique et besoins) | rapide (nombreux modules prédéfinis accessibles en téléchargement) |
Dev local/staging | Très simple et rapide | Rapide | Peut être long et compliqué |
Temps d'accès | Très rapide | Rapide selon le serveur | Moyen ou rapide selon le serveur |
Sécurité | manuelle | manuelle/framework | automatique |
Coûts dev et fonctionnalités | gratuit | gratuit | gratuit/payant |
Applications | site personnel, blog... | personnel, professionel, commercial | personnel, professionel, commercial |
Explications détaillées
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
    🏁️
wamp, ou
xamp.
Ces pages utilisent un
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 responsive
, j'ai trouvé des exemples existants que j'ai adaptés à ce positionnement.
Dans les différents choix de techniques, flexbox
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.