Cours 01 : Notions de base sur le Web

 

1. Qu'est-ce qu'un Site Web ? Définition et Composants

Un site web est un ensemble de pages w
eb interconnectées et de contenus multimédias (images, vidéos, sons, etc.) accessibles via une adresse unique sur Internet, appelée URL (Uniform Resource Locator). L'objectif principal d'un site web est de fournir des informations, des services ou du divertissement à un public mondial.

Définition simple : Un site web est une collection de documents numériques et de ressources multimédias hébergées sur un serveur web, accessibles à l'aide d'un navigateur web sur Internet.

Composants principaux d'un site web :

Un site web moderne est généralement divisé en deux grandes parties qui collaborent pour offrir une expérience utilisateur complète : le Frontend et le Backend.

1.1. Frontend (Partie Client)

Le Frontend représente tout ce que l'utilisateur voit et avec quoi il interagit directement dans son navigateur web. C'est la "face visible" du site.

• Rôle : Afficher le contenu, gérer l'interface utilisateur (boutons, formulaires, menus), et permettre l'interactivité côté client.
• Technologies clés :
• HTML (HyperText Markup Language) : La structure de base de toute page web. Il définit les éléments (titres, paragraphes, images, liens, etc.) et leur organisation. Sans HTML, une page web n'est qu'un simple texte brut.
• CSS (Cascading Style Sheets) : Gère l'apparence et le style du site (couleurs, polices, espacements, mise en page). Il permet de rendre le site visuellement attrayant et réactif (adapté aux différents écrans : ordinateurs, tablettes, mobiles).
• JavaScript (JS) : Ajoute de l'interactivité et du dynamisme aux pages web. Il permet des animations, des validations de formulaires côté client, des requêtes asynchrones au serveur (AJAX) pour mettre à jour une partie de la page sans recharger l'intégralité, etc.
• Exemples : Le texte que vous lisez, les boutons sur lesquels vous cliquez, les images que vous voyez, les formulaires que vous remplissez sont tous des éléments du frontend.

 

1.2. Backend (Partie Serveur)

Le Backend est la partie du site web qui fonctionne sur le serveur et qui est invisible pour l'utilisateur. C'est le "moteur" du site qui gère la logique métier, le stockage des données, la sécurité et la communication avec le frontend.

• Rôle : Traiter les requêtes du frontend, interagir avec la base de données, exécuter la logique applicative, gérer l'authentification des utilisateurs, et envoyer les données nécessaires au frontend.
• Technologies clés :
• Langages de programmation côté serveur :
• PHP : Très populaire pour le développement web, notamment pour les CMS comme WordPress.
• Python : Utilisé avec des frameworks comme Django ou Flask.
• Node.js (JavaScript côté serveur) : Permet d'utiliser JavaScript pour le backend.
• Ruby : Avec le framework Ruby on Rails.
• Java : Avec des frameworks comme Spring.
• C# : Avec ASP.NET de Microsoft.
• Bases de données : Pour stocker et organiser les informations du site (utilisateurs, produits, articles de blog, commentaires, etc.).
• SQL (Structured Query Language) : MySQL, PostgreSQL, SQL Server, Oracle.
• NoSQL : MongoDB, Cassandra.
• Serveurs web : Logiciels qui attendent les requêtes HTTP des navigateurs et y répondent en servant les pages web.
• Apache HTTP Server
• Nginx
• Microsoft IIS
• Exemples : Lorsque vous remplissez un formulaire d'inscription, le backend prendra vos données, les validera, les enregistrera dans la base de données et confirmera votre inscription. Lorsque vous consultez un article de blog, le backend récupère l'article de la base de données et l'envoie au frontend pour affichage.

2. Types de Sites Web

Les sites web peuvent être classés en plusieurs catégories en fonction de leur fonctionnement, de leur contenu et de leur objectif.

2.1. Sites Statiques

• Définition : Un site statique est composé de pages HTML, CSS et JavaScript prédéfinies, qui sont envoyées au navigateur exactement telles qu'elles sont stockées sur le serveur. Il n'y a pas de traitement côté serveur lors de l'affichage de la page.
• Caractéristiques :
• Contenu fixe et ne change pas souvent.
• Faciles à créer et à héberger.
• Chargement rapide.
• Peu coûteux.
• Cas d'utilisation : Sites vitrines simples, portfolios personnels, petites entreprises, pages de destination (landing pages).
• Limitations : Difficiles à mettre à jour pour des non-développeurs, pas d'interactivité dynamique avec une base de données.

2.2. Sites Dynamiques

• Définition : Un site dynamique génère le contenu de la page en temps réel, côté serveur, en fonction des interactions de l'utilisateur, des données d'une base de données ou d'autres logiques.
• Caractéristiques :
• Contenu personnalisé et mis à jour fréquemment.
• Interaction avec les utilisateurs (formulaires, commentaires, profils).
• Utilisent un langage de programmation côté serveur (PHP, Python, Node.js, etc.) et une base de données.
• Peuvent inclure des systèmes de gestion de contenu (CMS).
• Cas d'utilisation : Blogs, réseaux sociaux, sites d'actualités, applications web complexes, e-commerce.
• Exemple : Un site d'actualités qui affiche les derniers articles, ou un site de météo qui affiche les prévisions actuelles.

2.3. Sites E-commerce (Commerce Électronique)

• Définition : Un type de site dynamique spécifiquement conçu pour l'achat et la vente de produits ou services en ligne.
• Caractéristiques :
• Catalogue de produits, fiches produits détaillées.
• Panier d'achat.
• Système de paiement sécurisé (passerelles de paiement).
• Gestion des commandes, des stocks, des clients.
• Souvent basés sur des CMS dédiés comme WooCommerce (WordPress), PrestaShop, Magento, Shopify.
• Cas d'utilisation : Boutiques en ligne de toutes tailles.

2.4. Blogs

• Définition : Sites web principalement dédiés à la publication régulière d'articles (posts) sur un ou plusieurs sujets.
• Caractéristiques :
• Articles organisés par date, catégories, tags.
• Possibilité de commentaires pour les lecteurs.
• Fonctionnalités de recherche, d'archivage.
• Souvent basés sur des CMS comme WordPress.
• Cas d'utilisation : Partage d'informations, opinion, journalisme, marketing de contenu.

2.5. Autres Types de Sites Web

• Réseaux Sociaux : Sites permettant aux utilisateurs de créer des profils, de se connecter avec d'autres et de partager du contenu (Facebook, Twitter, Instagram).
• Portfolios en Ligne : Pour présenter le travail d'un individu ou d'une agence (graphistes, photographes, développeurs). Peuvent être statiques ou dynamiques.
• Sites de Médias/Actualités : Sites d'information avec des articles, vidéos, galeries de photos (BBC News, CNN).
• Forums de Discussion : Plateformes où les utilisateurs peuvent poser des questions et échanger sur des sujets spécifiques.
• Wikis : Sites collaboratifs où les utilisateurs peuvent créer et modifier du contenu (Wikipédia).
• Applications Web (Web Apps) : Des logiciels accessibles via un navigateur web qui offrent des fonctionnalités complexes similaires à des applications de bureau (Google Docs, Figma, Trello).

 

 

 

 

 

 

·         Types de sites web :

 

3. Protocoles Essentiels du Web

Les protocoles sont des ensembles de règles qui régissent la manière dont les données sont formatées et transmises entre différents appareils sur un réseau. Ils sont fondamentaux pour le fonctionnement d'Internet.

3.1. HTTP (HyperText Transfer Protocol)

• Rôle : C'est le protocole fondamental pour la communication sur le World Wide Web. Il permet aux navigateurs web (clients) de demander des pages web et d'autres ressources à des serveurs web et aux serveurs de répondre à ces requêtes.
• Fonctionnement :
1. Le navigateur envoie une requête HTTP (ex: GET /index.html HTTP/1.1) au serveur web pour obtenir une ressource.
2. Le serveur web traite la requête et renvoie une réponse HTTP (ex: HTTP/1.1 200 OK) contenant la ressource demandée (le code HTML de la page, une image, etc.) ou un code d'erreur.
• Port par défaut : 80.
• Caractéristique : HTTP est un protocole sans état (stateless), ce qui signifie que chaque requête est traitée indépendamment des précédentes. Pour maintenir l'état (comme une session utilisateur), d'autres mécanismes (sessions, cookies) sont utilisés.

3.2. HTTPS (HyperText Transfer Protocol Secure)

• Rôle : C'est la version sécurisée de HTTP. Il utilise un cryptage (SSL/TLS - Secure Sockets Layer / Transport Layer Security) pour établir une connexion sécurisée entre le navigateur et le serveur. Cela protège les données échangées contre l'interception et la falsification.
• Fonctionnement : Avant l'échange de données, un "handshake" SSL/TLS a lieu pour négocier les paramètres de cryptage et vérifier l'identité du serveur (via un certificat numérique). Une fois la connexion sécurisée établie, toutes les données sont cryptées.
• Port par défaut : 443.
• Importance : Essentiel pour les sites e-commerce, les banques en ligne, les formulaires de connexion, et tout site manipulant des informations sensibles. Les moteurs de recherche (comme Google) favorisent également les sites utilisant HTTPS.
• Indicateur : Un cadenas dans la barre d'adresse du navigateur indique que la connexion est sécurisée via HTTPS.

3.3. FTP (File Transfer Protocol)

• Rôle : FTP est un protocole utilisé pour transférer des fichiers entre un client et un serveur sur un réseau.
• Fonctionnement : Les utilisateurs peuvent se connecter à un serveur FTP pour télécharger des fichiers depuis le serveur ou télécharger des fichiers vers le serveur. Il est couramment utilisé par les développeurs web pour envoyer les fichiers de leurs sites web vers les serveurs d'hébergement.
• Ports par défaut : 21 (pour le contrôle) et 20 (pour les données en mode actif).
• Variantes sécurisées :
• SFTP (SSH File Transfer Protocol) : Utilise le protocole SSH pour le transfert sécurisé de fichiers.
• FTPS (FTP Secure) : Ajoute une couche SSL/TLS au protocole FTP.
• Importance : Moins utilisé par le grand public, mais toujours pertinent pour les administrateurs de serveurs et les développeurs pour le déploiement de sites web.

4. Introduction aux Serveurs Web

Un serveur web est un logiciel (et le matériel sur lequel il s'exécute) dont la fonction principale est de stocker les fichiers d'un site web (pages HTML, feuilles de style CSS, scripts JavaScript, images, vidéos, etc.) et de les livrer aux navigateurs web des utilisateurs qui en font la demande.

4.1. Rôle d'un Serveur Web

Le rôle d'un serveur web peut être résumé en quelques points :

1. Stockage : Il stocke tous les fichiers du site web.
2. Écoute des requêtes : Il est constamment à l'écoute sur un port spécifique (généralement 80 pour HTTP et 443 pour HTTPS) pour les requêtes HTTP/HTTPS provenant des navigateurs.
3. Traitement des requêtes : Lorsqu'une requête arrive, le serveur web analyse l'URL demandée pour identifier la ressource (fichier HTML, image, script PHP, etc.) que le client souhaite.
4. Exécution de scripts (pour les sites dynamiques) : Si la ressource demandée est un script côté serveur (ex: un fichier PHP), le serveur web passe la requête à un interpréteur PHP (ou autre langage) qui exécute le script, interagit éventuellement avec une base de données, et génère une page HTML dynamique.
5. Envoi de la réponse : Une fois la ressource trouvée ou la page dynamique générée, le serveur web envoie cette ressource (souvent sous forme de code HTML) au navigateur du client via une réponse HTTP/HTTPS.
6. Gestion des erreurs : Il gère également les erreurs (ex: 404 Not Found si la page n'existe pas, 500 Internal Server Error).

4.2. Fonctionnement d'un Serveur Web (Processus simplifié)

Imaginez que vous tapez www.example.com dans votre navigateur :

1. Résolution DNS : Votre ordinateur demande à un serveur DNS (Domain Name System) de traduire www.example.com en une adresse IP (ex: 192.0.2.1). C'est comme chercher un numéro de téléphone dans un annuaire.
2. Connexion au serveur : Votre navigateur établit une connexion TCP/IP avec le serveur web dont l'adresse IP a été trouvée.
3. Requête HTTP/HTTPS : Votre navigateur envoie une requête HTTP (ou HTTPS si le site est sécurisé) au serveur web, demandant la page d'accueil (généralement index.html ou index.php).
4. Traitement côté serveur :
• Si c'est un site statique, le serveur web trouve simplement le fichier index.html et le prépare à l'envoi.
• Si c'est un site dynamique (ex: index.php), le serveur web passe le fichier index.php à l'interpréteur PHP. PHP exécute le script, qui peut interroger une base de données (ex: pour récupérer les derniers articles de blog). Le résultat de l'exécution de PHP est du code HTML.
5. Réponse du serveur : Le serveur web renvoie une réponse HTTP/HTTPS contenant le code HTML de la page, ainsi que d'autres ressources nécessaires (CSS, JavaScript, images, etc.).
6. Rendu par le navigateur : Votre navigateur reçoit le code HTML, le CSS et le JavaScript. Il interprète ces fichiers et affiche la page web sur votre écran. Les scripts JavaScript sont exécutés côté client pour ajouter de l'interactivité.

4.3. Exemples de Logiciels de Serveurs Web

• Apache HTTP Server : Le serveur web le plus ancien et l'un des plus utilisés. C'est un logiciel open source, très flexible et configurable. Il est souvent utilisé avec PHP et MySQL dans les environnements LAMP (Linux, Apache, MySQL, PHP) ou WAMP (Windows, Apache, MySQL, PHP).
• Nginx (prononcé "Engine-X") : Gagne en popularité pour sa performance et sa capacité à gérer un grand nombre de connexions simultanées. Il est souvent utilisé comme proxy inverse ou pour servir du contenu statique rapidement.
• Microsoft IIS (Internet Information Services) : Le serveur web de Microsoft, intégré aux systèmes d'exploitation Windows Server. Il est souvent utilisé avec les technologies Microsoft (.NET, ASP.NET).