Sites Statiques vs. Sites Dynamiques
Il y a deux grands types de sites web : les sites dits “statiques” et, ceux dits “dynamiques”.
Site Statique 🖥️
Un site statique est un site qui permet d’afficher le même contenu à chaque utilisateur et généralement écrit en HTML.
Il est affiché dans un navigateur web de la même manière qu’il est stocké sur un serveur web et ne changera pas, le contenu reste le même de manière fixe.
Avantages
- Plus rapide
- Facile à développer
- Hébergement et développement moins coûteux
Inconvénients
- Le contenu peut devenir stagnant
- Nécessite un suivi pour pouvoir mettre à jour le site
Ce sont des sites qui sont principalement en front-end.
Site Dynamique 🔄
Un site dynamique est un site qui pourra afficher un contenu différent et avoir une interaction avec l’utilisateur grâce à des programmations avancées et des bases de données en plus de l’HTML.
Le contenu du site est stocké sur une base de données ou un système de gestion de contenu et les informations se mettent à jour quand il y a des modifications.
Avantages
- Facilite la mise à jour du site
- Plus de fonctionnalités
- Attire plus facilement les visiteurs (SEO)
Inconvénients
- Plus chers à héberger
- Performance beaucoup plus lente qu’un site statique
- Nécessite plus de travail et de connaissances
Il se compose d’un Front-end et d’un Back-end.
Site Vitrine (Statique)
C’est un site qui sert principalement à présenter une entreprise, une marque ou activité sans vente directe ou pour un site portfolio, CV.
Le site n’a pas de base de données et est principalement front-end. Les sites vitrines font partie des sites statiques.
Les sites à contenu Dynamique
Exemples : Youtube, Facebook, Twitter, Amazon
Amazon
Amazon est un site web dynamique qui adapte ses recommandations de produits en fonction de l’historique d’achats et des recherches de chaque utilisateur. Ses options de livraison se modifient également automatiquement selon la localisation du visiteur. En tant que plateforme de commerce en ligne, Amazon s’appuie sur une base de données pour gérer les fonctionnalités essentielles comme le suivi des commandes et le traitement des paiements.
Facebook est considéré comme un site web dynamique, car son contenu varie selon plusieurs facteurs : l’utilisateur, le moment de la journée, le fuseau horaire et la langue utilisée.
En tant que réseau social, Twitter repose sur une structure dynamique qui actualise son contenu en temps réel. Cette conception interactive permet aux utilisateurs d’interagir directement avec la plateforme, notamment en publiant des tweets. Le contenu affiché sur Twitter s’adapte en fonction de l’activité de l’utilisateur, de sa localisation et de ses préférences de compte. Par exemple, la plateforme met en avant les hashtags tendance dans le pays de l’utilisateur ainsi que des tweets semblables à ceux des comptes qu’il suit.
Youtube
Comme des millions de vidéos sont mises en ligne chaque jour sur YouTube, les recommandations personnalisées et les mises à jour en temps réel jouent un rôle essentiel. Elles permettent aux utilisateurs de découvrir facilement de nouveaux contenus adaptés à leurs préférences actuelles. YouTube personnalise ses suggestions en tenant compte de la localisation de l’utilisateur, de ses abonnements, de ses recherches passées et de son historique de visionnage. La plateforme propose également des recommandations basées sur les vidéos aimées et sur la pertinence des sujets consultés.
Sources
- https://ibracilinks.com/blog/quelle-est-la-difference-entre-un-site-web-statique-et-un-site-web-dynamique
- https://fr.strikingly.com/content/blog/site-web-statique-ou-dynamique-qu-est-ce-qui-vous-convient-le-mieux/
- https://fr.wikipedia.org/wiki/Page_web_dynamique
- https://fr.siteground.com/kb/site-web-dynamique/
- https://www.hostinger.com/fr/tutoriels/site-web-dynamique
- https://iconicdigitalworld.com/how-to-check-if-a-website-is-dynamic-or-or-static/
Tous ces sites dynamiques sont programmés dans ce qu’on appelle des “langages back-end".
On peut associer ceux-ci à des langages “serveur”, qui gèrent l’aspect interactif du site (login, chat, etc.) ainsi que la base de données ; à l’inverse, les langages “front-end” sont ceux utilisés sur votre machine pour présenter l’information d’une manière visuellement agréable et intuitive (positionnement des fonctionnalités, des menus, couleurs et images, etc.)
“La distinction entre les langages Front-End et Back-End est fondamentale dans le développement web. Chaque ensemble de langages a des responsabilités spécifiques pour garantir le bon fonctionnement et l'expérience utilisateur d'une application. Voici une explication plus détaillée :”
Langages Back-End vs. Front-End
PHP
Un langage de script côté serveur, PHP est couramment utilisé pour le développement web dynamique. Il est souvent intégré dans le code HTML pour créer des pages web interactives.
Développement web côté serveur pour la création de sites dynamiques, PHP, est principalement utilisé pour la gestion côté serveur dans le développement web, génère du contenu dynamique, traite les formulaires et communique avec la base de données. PHP est un langage de script côté serveur utilisé pour générer du contenu dynamique sur les sites web. Il est souvent intégré dans du code HTML.
PHP est utilisé dans des projets tels que WordPress et les premières versions de Facebook, où il joue un rôle essentiel dans le développement de l'infrastructure, des fonctionnalités et de la flexibilité des systèmes.
Python
Populaire pour sa lisibilité et sa polyvalence, Python est largement utilisé dans le développement web, en particulier avec des frameworks tels que Django et Flask pour la création d'applications web.
Programmation générale, développement web, science des données, intelligence artificielle, automatisation, …, Python est utilisé pour la logique côté serveur, le traitement des données, et peut être utilisé dans le développement web à l'aide de frameworks tels que Django ou Flask. Python est un langage de programmation polyvalent et facile à apprendre. Il est apprécié pour sa lisibilité et sa simplicité syntaxique.
Python est utilisé dans des projets tels qu'Instagram et YouTube, où il joue un rôle dans le développement de l'infrastructure, des fonctionnalités et des algorithmes clés.
Langages Front-End (client)
La conception de pages web exige l'utilisation d'un langage de balisage tel que le HTML pour la structure et d'un langage de mise en forme comme le CSS pour le style. Ces deux langages, associés au JavaScript, forment les fondations du développement web.
HTML (HyperText Markup Language)
Bien qu'il ne soit pas un langage de programmation à part entière, HTML est essentiel pour créer la structure de base des pages web en définissant la hiérarchie des éléments.
Fondamental pour la structuration des pages web, HTML, définit la structure de base de la page web en utilisant des balises. HTML est un langage de balisage utilisé pour décrire la structure et la présentation du contenu sur le web.
CSS (Cascading Style Sheets)
Comme HTML, CSS n'est pas un langage de programmation, mais il est crucial pour la mise en forme et la présentation des pages web en définissant les styles et les mises en page.
Responsable de la mise en page et de la conception visuelle des pages web CSS, contrôle la présentation visuelle de la page, y compris la mise en page, la couleur et le style. CSS est un langage de style qui permet de définir la présentation des éléments HTML, y compris la couleur, la disposition et le formatage.
HTML et CSS sont des langages fondamentaux pour la création de sites web modernes et sont largement utilisés dans l'industrie du développement web.
JavaScript
C'est un langage de script côté client incontournable pour le développement web. Il est utilisé pour rendre les pages web interactives et dynamiques. Des frameworks populaires tels que React, Angular et Vue.js sont basés sur JavaScript.
Langage de programmation côté client pour rendre les pages web interactives, Javascript permet de rendre les pages web interactives en ajoutant des fonctionnalités dynamiques et en réagissant aux actions de l'utilisateur. JavaScript est un langage de script qui permet d'ajouter des fonctionnalités dynamiques et interactives aux pages web. Il est souvent utilisé en conjonction avec HTML et CSS.
JavaScript est utilisé dans des projets tels que Facebook et Netflix, où il contribue à créer des interfaces utilisateur interactives, réactives et riches en fonctionnalités, améliorant ainsi l'expérience utilisateur globale.
Interaction Front-End et Back-End
Lorsqu'un utilisateur interagit avec une page web, le front-end (HTML, CSS, JavaScript) gère l'interface utilisateur, les animations, et envoie des requêtes au back-end.
Le back-end (Python, PHP) reçoit ces requêtes, effectue le traitement nécessaire, communique avec la base de données (si nécessaire), puis renvoie les données ou le résultat au front-end.
En résumé
Chaque langage a un rôle spécifique dans le développement web, et ils sont souvent utilisés en tandem pour créer des applications web complexes. En voici une brève description :
- HTML : crée la structure de base d'une page web en utilisant des balises.
- CSS : gère l'apparence visuelle de la page, y compris la mise en page, les couleurs et les polices.
- JavaScript : permet d'ajouter des fonctionnalités dynamiques, des animations et des interactions utilisateur aux pages web.
- Python : utilisé pour des tâches de programmation générales et est souvent utilisé dans le développement web, la science des données et d'autres domaines.
- PHP : principalement utilisé pour le développement côté serveur pour générer des pages web dynamiques.
La combinaison de ces langages offre aux développeurs la possibilité de créer des applications web riches en fonctionnalités et interactives. Chacun de ces langages a une place importante dans l'écosystème du développement web.”
Frameworks
Pour créer un site facilement, et surtout si l’aspect back-end/serveur vous semble hors de portée, ou superflu pour l’usage que vous escomptez faire de votre site, des solutions existent :
Un framework permet d’avoir une boite à outils qui se représente comme une bibliothèque avec des modèles de code prêts à l‘emploi, pour gagner du temps en créant l’architecture du site et résoudre des problèmes récurrents !
Il existe plusieurs frameworks de différents types :
- Pour le front-end : VueJS, Angular, Boostrap, React
- Pour le back-end : Symfony, Laravel, Django, Flask, Node.JS
Django : c’est un framework python open source utilisé par des entreprises comme Pinterest, Instagram, Mozilla.
« Il existe aussi des frameworks spécifiques pour la plateforme voulue comme le web, mobile, base de données »
Il est avantageux d’utilisé un Framework pour gagner en rapidité, flexibilité, productivité mais aussi car cela permet de bien structurer son code et une large communauté pour corriger d’éventuels bugs et résoudre certains problèmes de programmation.
Avantages
- Rapidité : une base de travail existe déjà, donc le développeur web n’a pas besoin de partir de zéro pour créer votre site web.
- Flexibilité : vous pouvez choisir d’utiliser ou non certains composants du Framework pour améliorer le référencement naturel de votre site.
- Architecture : en utilisant un bon Framework, vous avez du code propre et fonctionnel qui ne ralentit pas le fonctionnement du site.
- Productivité : que ce soit un développement en solo ou en équipe, un Framework est un outil puissant puisque tout est parfaitement organisé.
- Communauté : vous bénéficiez de l’appui de toute une communauté en ligne (support et forum) qui vous aidera à corriger les bugs ou résoudre des problèmes de programmation.
Inconvénients
Malgré tous ses avantages, la complexité de certains codes peut freiner des personnes débutantes, un manque de personnalisation à cause des modèles préétablis et une incertitude de garder le projet dans le temps.
Enfin il peut aussi être une contrainte de poids et alourdir le code comme ajouter des fonctionnalités qu’on ne voudrait pas apporter !
Sources
- https://www.vigicorp.fr/qu-est-ce-qu-un-framework/
- https://fr.wikipedia.org/wiki/Framework
- https://www.pure-illusion.com/lexique/definition-de-framework
- https://www.fed-group.ca/fed-it/conseils/framework
- https://hello-pomelo.com/articles/les-frameworks-avantages-et-inconvenients/
Tous ces sites dynamiques sont programmés dans ce qu’on appelle des “langages back-end".
On peut associer ceux-ci à des langages “serveur”, qui gèrent l’aspect interactif du site (login, chat, etc.) ainsi que la base de données ; à l’inverse, les langages “front-end” sont ceux utilisés sur votre machine pour présenter l’information d’une manière visuellement agréable et intuitive (positionnement des fonctionnalités, des menus, couleurs et images, etc.)
“La distinction entre les langages Front-End et Back-End est fondamentale dans le développement web. Chaque ensemble de langages a des responsabilités spécifiques pour garantir le bon fonctionnement et l'expérience utilisateur d'une application. Voici une explication plus détaillée :”
Langages Back-End vs. Front-End
Langages Back-End (serveur)
PHP
Un langage de script côté serveur, PHP est couramment utilisé pour le développement web dynamique. Il est souvent intégré dans le code HTML pour créer des pages web interactives.
Développement web côté serveur pour la création de sites dynamiques, PHP, est principalement utilisé pour la gestion côté serveur dans le développement web, génère du contenu dynamique, traite les formulaires et communique avec la base de données. PHP est un langage de script côté serveur utilisé pour générer du contenu dynamique sur les sites web. Il est souvent intégré dans du code HTML.
PHP est utilisé dans des projets tels que WordPress et les premières versions de Facebook, où il joue un rôle essentiel dans le développement de l'infrastructure, des fonctionnalités et de la flexibilité des systèmes.
Python
Populaire pour sa lisibilité et sa polyvalence, Python est largement utilisé dans le développement web, en particulier avec des frameworks tels que Django et Flask pour la création d'applications web.
Programmation générale, développement web, science des données, intelligence artificielle, automatisation, …, Python est utilisé pour la logique côté serveur, le traitement des données, et peut être utilisé dans le développement web à l'aide de frameworks tels que Django ou Flask. Python est un langage de programmation polyvalent et facile à apprendre. Il est apprécié pour sa lisibilité et sa simplicité syntaxique.
Python est utilisé dans des projets tels qu'Instagram et YouTube, où il joue un rôle dans le développement de l'infrastructure, des fonctionnalités et des algorithmes clés.
Langages Front-End (client)
La conception de pages web exige l'utilisation d'un langage de balisage tel que le HTML pour la structure et d'un langage de mise en forme comme le CSS pour le style. Ces deux langages, associés au JavaScript, forment les fondations du développement web.
HTML (HyperText Markup Language)
Bien qu'il ne soit pas un langage de programmation à part entière, HTML est essentiel pour créer la structure de base des pages web en définissant la hiérarchie des éléments.
Fondamental pour la structuration des pages web, HTML, définit la structure de base de la page web en utilisant des balises. HTML est un langage de balisage utilisé pour décrire la structure et la présentation du contenu sur le web.
CSS (Cascading Style Sheets)
Comme HTML, CSS n'est pas un langage de programmation, mais il est crucial pour la mise en forme et la présentation des pages web en définissant les styles et les mises en page.
Responsable de la mise en page et de la conception visuelle des pages web CSS, contrôle la présentation visuelle de la page, y compris la mise en page, la couleur et le style. CSS est un langage de style qui permet de définir la présentation des éléments HTML, y compris la couleur, la disposition et le formatage.
HTML et CSS sont des langages fondamentaux pour la création de sites web modernes et sont largement utilisés dans l'industrie du développement web.
JavaScript
C'est un langage de script côté client incontournable pour le développement web. Il est utilisé pour rendre les pages web interactives et dynamiques. Des frameworks populaires tels que React, Angular et Vue.js sont basés sur JavaScript.
Langage de programmation côté client pour rendre les pages web interactives, Javascript permet de rendre les pages web interactives en ajoutant des fonctionnalités dynamiques et en réagissant aux actions de l'utilisateur. JavaScript est un langage de script qui permet d'ajouter des fonctionnalités dynamiques et interactives aux pages web. Il est souvent utilisé en conjonction avec HTML et CSS.
JavaScript est utilisé dans des projets tels que Facebook et Netflix, où il contribue à créer des interfaces utilisateur interactives, réactives et riches en fonctionnalités, améliorant ainsi l'expérience utilisateur globale.
Interaction Front-End et Back-End
Lorsqu'un utilisateur interagit avec une page web, le front-end (HTML, CSS, JavaScript) gère l'interface utilisateur, les animations, et envoie des requêtes au back-end.
Le back-end (Python, PHP) reçoit ces requêtes, effectue le traitement nécessaire, communique avec la base de données (si nécessaire), puis renvoie les données ou le résultat au front-end.
En résumé
Chaque langage a un rôle spécifique dans le développement web, et ils sont souvent utilisés en tandem pour créer des applications web complexes. En voici une brève description :
- HTML : crée la structure de base d'une page web en utilisant des balises.
- CSS : gère l'apparence visuelle de la page, y compris la mise en page, les couleurs et les polices.
- JavaScript : permet d'ajouter des fonctionnalités dynamiques, des animations et des interactions utilisateur aux pages web.
- Python : utilisé pour des tâches de programmation générales et est souvent utilisé dans le développement web, la science des données et d'autres domaines.
- PHP : principalement utilisé pour le développement côté serveur pour générer des pages web dynamiques.
La combinaison de ces langages offre aux développeurs la possibilité de créer des applications web riches en fonctionnalités et interactives. Chacun de ces langages a une place importante dans l'écosystème du développement web.”
Frameworks
Pour créer un site facilement, et surtout si l’aspect back-end/serveur vous semble hors de portée, ou superflu pour l’usage que vous escomptez faire de votre site, des solutions existent :
Un framework permet d’avoir une boite à outils qui se représente comme une bibliothèque avec des modèles de code prêts à l‘emploi, pour gagner du temps en créant l’architecture du site et résoudre des problèmes récurrents !
Il existe plusieurs frameworks de différents types :
- Pour le front-end : VueJS, Angular, Boostrap, React
- Pour le back-end : Symfony, Laravel, Django, Flask, Node.JS
Django : c’est un framework python open source utilisé par des entreprises comme Pinterest, Instagram, Mozilla.
« Il existe aussi des frameworks spécifiques pour la plateforme voulue comme le web, mobile, base de données »
Il est avantageux d’utilisé un Framework pour gagner en rapidité, flexibilité, productivité mais aussi car cela permet de bien structurer son code et une large communauté pour corriger d’éventuels bugs et résoudre certains problèmes de programmation.
Avantages
- Rapidité : une base de travail existe déjà, donc le développeur web n’a pas besoin de partir de zéro pour créer votre site web.
- Flexibilité : vous pouvez choisir d’utiliser ou non certains composants du Framework pour améliorer le référencement naturel de votre site.
- Architecture : en utilisant un bon Framework, vous avez du code propre et fonctionnel qui ne ralentit pas le fonctionnement du site.
- Productivité : que ce soit un développement en solo ou en équipe, un Framework est un outil puissant puisque tout est parfaitement organisé.
- Communauté : vous bénéficiez de l’appui de toute une communauté en ligne (support et forum) qui vous aidera à corriger les bugs ou résoudre des problèmes de programmation.
Inconvénients
Malgré tous ses avantages, la complexité de certains codes peut freiner des personnes débutantes, un manque de personnalisation à cause des modèles préétablis et une incertitude de garder le projet dans le temps.
Enfin il peut aussi être une contrainte de poids et alourdir le code comme ajouter des fonctionnalités qu’on ne voudrait pas apporter !