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 php symphony, laravel peuvent être utilisées pour la gestion d'un blog.
Des outils moins techniques existent également sous la forme de CMS (Wordpress, Joomla, Drupal...).
Actuellement des outils supplémentaires low-code, no-code peuvent également être utilisés pour développer des pages web sous la forme de blog/wiki.
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.
🏁️     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.