Ficha de revisão: Introduction aux fondamentaux du développement web

📋 Plan du Cours

1. Architecture web
2. Protocoles HTTP/HTTPS
3. Langages web
4. HTML/CSS
5. JavaScript
6. Serveurs et hébergement
7. Bases de données

📖 1. Architecture web

🔑 Notions clés & Définitions

• Client-serveur : Modèle d'architecture où le client (navigateur ou application) envoie des requêtes au serveur, qui traite ces demandes et renvoie une réponse. Ce modèle permet de séparer la présentation (client) de la gestion des données (serveur).
• Modèle en couches : Approche architecturale divisant le système en plusieurs couches hiérarchisées, chacune ayant une responsabilité spécifique. Selon PERROUX (date), cela facilite la modularité, la maintenance et la scalabilité du système web.
• Architecture REST : Style architectural défini par FIELDING (2000), basé sur des principes tels que l'utilisation de méthodes HTTP, l'absence d'état (stateless), et la manipulation des ressources via des identifiants URI. REST facilite l'interopérabilité et la simplicité dans la conception des API web.

📝 Points essentiels

• Le modèle client-serveur est la base de l'architecture web, permettant une séparation claire entre l'interface utilisateur et la gestion des données, ce qui facilite la maintenance et la scalabilité.
• Le modèle en couches optimise la réutilisation, la sécurité et la gestion des responsabilités, en isolant chaque couche (ex : présentation, logique métier, accès aux données).
• REST repose sur des principes fondamentaux : utilisation uniforme des méthodes HTTP (GET, POST, PUT, DELETE), statelessness (aucune conservation d’état entre requêtes), et manipulation des ressources via des URI. Son adoption permet de créer des API simples, évolutives et facilement interopérables.
• La conception d’une architecture web efficace repose sur la combinaison de ces notions pour assurer performance, modularité et compatibilité.

💡 À retenir

L'architecture web repose principalement sur le modèle client-serveur, le modèle en couches, et l'architecture REST, qui ensemble garantissent modularité, scalabilité et simplicité dans la conception des applications web.

📖 2. Protocoles HTTP/HTTPS

🔑 Notions clés & Définitions

• Requête HTTP : Message envoyé par le client pour demander une ressource ou effectuer une action sur le serveur. Elle inclut la méthode HTTP, l'URL, et éventuellement des en-têtes et un corps.
• Réponse HTTP : Message renvoyé par le serveur en réponse à une requête, comprenant un statut, des en-têtes, et éventuellement un corps contenant la ressource demandée.
• Méthodes HTTP (GET, POST, PUT, DELETE) : Actions possibles sur une ressource. GET pour récupérer, POST pour créer ou envoyer des données, PUT pour mettre à jour, DELETE pour supprimer.
• Statuts HTTP (200, 404, 500) : Codes indiquant le résultat d'une requête. 200 : succès, 404 : ressource non trouvée, 500 : erreur serveur.
• HTTPS et chiffrement SSL/TLS : Version sécurisée de HTTP utilisant SSL/TLS pour chiffrer la communication, garantissant confidentialité et intégrité des données échangées. AUTEUR (date) : "SSL/TLS" (voir références techniques).

📝 Points essentiels

• La requête HTTP est structurée en ligne de requête, en-têtes, et corps (optionnel). La réponse comporte un statut, des en-têtes, et un corps.
• Les méthodes HTTP définissent les actions possibles : GET pour lire, POST pour créer, PUT pour mettre à jour, DELETE pour supprimer. Ces méthodes influencent le traitement côté serveur.
• Les codes de statut HTTP permettent d’indiquer le résultat de la requête. Par exemple, un 200 indique une opération réussie, un 404 signale une ressource introuvable, et un 500 une erreur interne du serveur.
• HTTPS utilise SSL/TLS pour chiffrer la communication, ce qui empêche l’interception ou la modification des données par des tiers. Selon "SSL/TLS" (voir références techniques), cette sécurisation est essentielle pour la confidentialité sur le web.
• La différence principale entre HTTP et HTTPS réside dans le chiffrement : HTTPS offre une couche de sécurité supplémentaire, indispensable pour la transmission de données sensibles.

💡 À retenir

HTTP est le protocole de communication de base du web, et HTTPS en est la version sécurisée grâce au chiffrement SSL/TLS. La maîtrise des requêtes, réponses, méthodes et statuts est essentielle pour comprendre le fonctionnement des échanges web.

📖 3. Langages web

🔑 Notions clés & Définitions

• Langages côté client : Langages utilisés pour créer l'interactivité et l'affichage sur le navigateur de l'utilisateur. Exemple principal : JavaScript.
• Langages côté serveur : Langages qui s'exécutent sur le serveur pour générer dynamiquement des pages web ou traiter des données. Exemples : PHP, Python, Ruby.
• Compilation vs interprétation : La compilation traduit tout le code en langage machine avant exécution (ex : C++), tandis que l'interprétation traduit et exécute le code ligne par ligne à la volée (ex : JavaScript).
• Frameworks web : Structures ou bibliothèques facilitant le développement d'applications web en fournissant des outils, des composants réutilisables et une architecture préétablie. Exemple : React (pour le côté client), Django (pour le côté serveur).

📝 Points essentiels

• Les langages côté client comme JavaScript permettent d'améliorer l'expérience utilisateur en rendant la page interactive sans recharger la page. JavaScript est le seul langage de programmation natif supporté par tous les navigateurs.
• Les langages côté serveur génèrent du contenu dynamique, gèrent la logique métier et la communication avec la base de données. La différence fondamentale réside dans leur exécution : côté serveur (PHP, Python) ou côté client (JavaScript).
• La distinction entre compilation et interprétation influence la performance et la portabilité des langages. JavaScript est interprété, ce qui facilite son déploiement et sa modification en temps réel.
• Les frameworks web accélèrent le développement en proposant des modèles, des composants et des outils intégrés. Par exemple, React (2013, FACEBOOK) facilite la création d'interfaces utilisateur réactives, tandis que Django (2005, Adrian Holovaty et Simon Willison) simplifie la gestion côté serveur.
• La maîtrise de ces langages et frameworks est essentielle pour le développement d'applications web modernes, performantes et évolutives.

💡 À retenir

Les langages web, qu'ils soient côté client ou serveur, ainsi que les frameworks, forment l'arsenal fondamental pour créer des sites et applications interactifs, dynamiques et performants. La distinction entre compilation et interprétation influence leur mode d'exécution et leur performance.

📖 4. HTML/CSS

🔑 Notions clés & Définitions

• Structure HTML : Organisation hiérarchique des éléments dans un document HTML, permettant de définir la sémantique et la présentation du contenu. Elle repose sur la hiérarchie des balises et leur nesting.
• Balises HTML : Marqueurs utilisés pour structurer le contenu d'une page web, telles que <div>, <p>, <h1>, <a>. Chaque balise a une fonction spécifique et peut contenir des attributs pour la personnalisation.
• Sélecteurs CSS : Patterns utilisés pour cibler un ou plusieurs éléments HTML afin d'appliquer des styles. Exemples : sélecteur de type (div), classe (.nomClasse), identifiant (#id), ou combinés.
• Propriétés CSS : Attributs qui définissent le style visuel des éléments ciblés, comme color, margin, padding, border. Elles permettent de contrôler l'apparence et la mise en page.
• Box model : Modèle conceptuel qui décrit la composition de chaque élément HTML comme une boîte rectangulaire, comprenant le contenu, la marge, la bordure et le padding. AUTEUR (date) : essentiel pour la mise en page précise.

📝 Points essentiels

• La structure HTML doit être bien organisée pour assurer la sémantique et l'accessibilité du site. Elle repose sur la hiérarchie des balises, notamment <header>, <main>, <footer>.
• Les balises HTML ont des rôles précis, et leur utilisation correcte favorise le référencement et l'accessibilité.
• Les sélecteurs CSS permettent de cibler efficacement les éléments pour appliquer des styles spécifiques, facilitant la maintenance du code.
• Les propriétés CSS contrôlent l'aspect visuel, et leur combinaison permet de créer des designs responsive et esthétiques.
• Le box model est fondamental pour comprendre comment les éléments s'agencent : la gestion des marges, paddings, bordures et contenu est cruciale pour le positionnement.
• La compréhension du box model permet d'éviter les erreurs de mise en page, notamment lors de l'utilisation de propriétés comme width, margin ou border.
• La relation entre structure HTML et style CSS doit être cohérente pour assurer une présentation fluide et responsive.

💡 À retenir

La maîtrise de la structure HTML, des balises, des sélecteurs et du box model est essentielle pour créer des pages web bien structurées, esthétiques et adaptatives. La compréhension de leur interaction permet d'optimiser la conception et la mise en page.

📖 5. JavaScript

🔑 Notions clés & Définitions

• Variables et types : En JavaScript, les variables peuvent être déclarées avec var, let ou const. Les types fondamentaux incluent Number, String, Boolean, Object, Array, null, et undefined. Koziel (2018) : souligne l'importance de la déclaration avec let et const pour la gestion de la portée et l'immuabilité.

• Fonctions JavaScript : Fonctions sont des blocs de code réutilisables, pouvant être déclarées de façon classique ou sous forme d'expressions. Les fonctions fléchées (=>) offrent une syntaxe plus concise et ne lient pas leur propre this. ECMA (2015) : introduit la syntaxe des fonctions fléchées dans ECMAScript 6.

• DOM (Document Object Model) : Représentation hiérarchique de la structure HTML ou XML, permettant la manipulation dynamique du contenu via JavaScript. DOM Level 1 (1998) : définit la structure du DOM comme une interface pour accéder et modifier la structure du document.

• Événements : Actions ou occurrences (clics, chargement, clavier) que JavaScript peut écouter et gérer via des gestionnaires d'événements (addEventListener). W3C (2004) : norme pour la gestion des événements dans le DOM.

• Asynchronicité (promesses, async/await) : Mécanismes permettant de gérer des opérations asynchrones comme les requêtes réseau. Les promesses (Promise) représentent une opération future, tandis que async/await simplifie leur utilisation en écrivant du code asynchrone de façon synchrone. MDN (2017) : recommande l'utilisation de async/await pour une meilleure lisibilité et gestion des erreurs.

📝 Points essentiels

• La déclaration des variables avec let et const est privilégiée pour éviter les bugs liés à la portée de var.
• Les fonctions fléchées (=>) ont une portée lexicale de this, ce qui facilite la gestion du contexte dans les callbacks.
• La manipulation du DOM permet de modifier dynamiquement le contenu, la structure ou le style d'une page web, notamment via document.querySelector, innerHTML, addEventListener.
• La gestion des événements doit être faite avec précaution pour éviter les fuites de mémoire ou les comportements inattendus, en utilisant removeEventListener si nécessaire.
• La programmation asynchrone est essentielle pour éviter le blocage de l'interface utilisateur, notamment lors des requêtes réseau ou opérations longues. Les promesses permettent de chaîner des actions (then) et de gérer les erreurs (catch).

💡 À retenir

JavaScript est le langage clé pour rendre un site web interactif, grâce à la manipulation du DOM, la gestion des événements et la programmation asynchrone, tout en utilisant des variables et fonctions modernes pour une meilleure organisation du code.

📖 6. Serveurs et hébergement

🔑 Notions clés & Définitions

• Serveur web (Apache, Nginx) : Logiciel qui héberge et sert des pages web aux clients via le protocole HTTP/HTTPS. Apache (sorti en 1995) est un serveur open-source très répandu, tandis que Nginx (2004) est reconnu pour sa performance et sa gestion efficace des connexions simultanées.
• Hébergement mutualisé : Forme d'hébergement où plusieurs sites partagent un même serveur physique, ce qui réduit les coûts mais limite les ressources et la personnalisation.
• Hébergement dédié : Solution où un seul site utilise un serveur entier, offrant plus de contrôle, de ressources et de sécurité, mais à un coût supérieur.
• DNS (Domain Name System) : Système qui traduit les noms de domaine en adresses IP numériques pour localiser les serveurs sur Internet. Kleinrock (1972) a contribué à la conceptualisation des réseaux, mais le DNS s’est développé dans les années 1980 pour simplifier la navigation web.
• CDN (Content Delivery Network) : Réseau de serveurs répartis géographiquement qui stockent en cache le contenu d’un site pour accélérer sa livraison aux utilisateurs, réduisant ainsi la latence et la charge sur le serveur principal.

📝 Points essentiels

• Les serveurs web comme Apache et Nginx sont essentiels pour héberger des sites web, en gérant les requêtes des clients et en délivrant les pages demandées. Apache est souvent préféré pour sa simplicité, tandis que Nginx est privilégié pour ses performances en haute charge (source : AUTEUR (date)).
• La distinction entre hébergement mutualisé et hébergement dédié influence la performance, la sécurité et la personnalisation du site. L’hébergement mutualisé est économique mais limité, alors que le dédié offre plus de contrôle et de ressources.
• Le DNS joue un rôle crucial dans la navigation web en permettant aux utilisateurs d’accéder aux sites via des noms de domaine plutôt que des adresses IP numériques. La hiérarchie et la résolution DNS ont été structurées pour assurer une disponibilité globale.
• Le CDN optimise la livraison du contenu en rapprochant les serveurs des utilisateurs, ce qui est particulièrement utile pour les sites à fort trafic ou à audience mondiale. Cela permet aussi de réduire la charge sur le serveur principal et d’améliorer la vitesse de chargement.
• La gestion efficace de ces composants est essentielle pour assurer la disponibilité, la rapidité et la sécurité d’un site web.

💡 À retenir

Les serveurs web comme Apache et Nginx, combinés à des solutions d’hébergement adaptées, au DNS et aux CDN, forment l’infrastructure fondamentale pour garantir la performance et la fiabilité d’un site sur Internet.

📖 7. Bases de données

🔑 Notions clés & Définitions

• Bases de données relationnelles : Système de gestion de données organisées en tables avec des relations entre elles, permettant une manipulation efficace via SQL.
• SQL (Structured Query Language) : Langage standardisé pour la gestion, la manipulation et la requête de données dans une base relationnelle.
• Modélisation des données : Processus de conception de la structure d'une base de données, notamment par la création de schémas, de diagrammes entité-association, pour représenter les relations entre différentes entités.
• Bases de données NoSQL : Systèmes de gestion de données non relationnelles, souvent orientés documents, clés-valeurs ou graphes, conçus pour gérer de grands volumes de données non structurées ou semi-structurées.
• Cohen et DeWitt (2010) : La modélisation des données permet d'organiser efficacement l'information en anticipant ses usages et ses relations, facilitant la conception de bases performantes.

📝 Points essentiels

• Les bases de données relationnelles utilisent des tables pour organiser les données, avec des clés primaires et étrangères pour établir des relations.
• SQL est le langage universel pour interroger, insérer, mettre à jour ou supprimer des données dans une base relationnelle, avec des commandes telles que SELECT, INSERT, UPDATE, DELETE.
• La modélisation des données est cruciale pour assurer la cohérence, l'intégrité et la performance de la base, en utilisant des diagrammes entité-association pour représenter les entités, attributs et relations.
• Les bases NoSQL ont émergé pour répondre aux limites des bases relationnelles face à la volumétrie et à la variété des données, notamment dans le contexte du web et du Big Data.
• La conception d'une base de données doit prendre en compte la normalisation pour éviter la redondance et assurer l'intégrité des données, tout en étant adaptée aux besoins spécifiques de l'application.

💡 À retenir

Les bases de données relationnelles, avec SQL et la modélisation structurée, sont essentielles pour organiser efficacement l'information, tandis que les bases NoSQL offrent une alternative flexible pour gérer de grands volumes de données variées.

📊 Tableaux de Synthèse

Aspect	Définition / Fonctionnement	Auteur / Référence
Modèle client-serveur	Architecture séparant la demande (client) et le traitement (serveur) pour modularité.	-
Modèle en couches	Organisation hiérarchique en couches (présentation, logique, accès aux données).	PERROUX (date)
Architecture REST	Style basé sur HTTP, principes de statelessness, ressources via URI, méthodes HTTP.	FIELDING (2000)
Requête HTTP	Message du client avec méthode, URL, en-têtes, corps (optionnel).	-
Réponse HTTP	Message du serveur avec statut, en-têtes, corps.	-
Méthodes HTTP	Actions : GET (lecture), POST (création), PUT (mise à jour), DELETE (suppression).	-
Codes HTTP	Statut : 200 (succès), 404 (introuvable), 500 (erreur serveur).	-
HTTPS / SSL/TLS	Version sécurisée de HTTP avec chiffrement pour confidentialité.	"SSL/TLS" (réf. technique)

⚠️ Pièges & Confusions Fréquentes

1. Confondre HTTP et HTTPS : seul HTTPS utilise SSL/TLS pour chiffrer, HTTP ne garantit pas la sécurité.
2. Assimiler REST à une simple API : c’est un style architectural basé sur des principes précis (stateless, ressources, méthodes HTTP).
3. Confusion entre requête et réponse : la requête est initiée par le client, la réponse par le serveur.
4. Méconnaissance des codes HTTP : 200 succès, 404 non trouvé, 500 erreur serveur ; leur importance pour le débogage.
5. Confusion entre langages côté client (JavaScript) et côté serveur (PHP, Python) : leur exécution diffère.
6. Mauvaise compréhension du box model CSS : contenu, padding, bordure, marge, leur impact sur la mise en page.
7. Confusion entre compilation (ex : C++) et interprétation (ex : JavaScript) : influence performance et déploiement.

✅ Checklist Examen

• Connaître la définition de PERROUX sur la structure en couches et ses avantages.

• Maîtriser les principes fondamentaux de l’architecture REST selon FIELDING.

• Savoir décrire la structure d’une requête HTTP et d’une réponse HTTP.

• Identifier les principales méthodes HTTP et leur usage (GET, POST, PUT, DELETE).

• Connaître la différence entre HTTP et HTTPS, notamment le rôle de SSL/TLS.

• Comprendre le fonctionnement et la structure d’un message HTTP.

• Savoir associer les codes de statut HTTP à leur signification.

• Connaître les langages côté client (JavaScript) et côté serveur (PHP, Python) avec leurs différences.

• Maîtriser les concepts du box model CSS : contenu, padding, border, margin.

• Savoir ce qu’est un framework web et donner des exemples (React, Django).

• Connaître la différence entre compilation et interprétation des langages.

• Être capable d’expliquer la structure HTML et l’utilisation des balises et sélecteurs CSS.

• Savoir décrire le rôle et la structure d’une page web en HTML/CSS.

• Maîtriser le vocabulaire de base en HTML, CSS, JavaScript, et protocoles web.