Introduction au Développement Web

L'Internet, abréviation d'"interconnexion des réseaux", est un réseau mondial d'ordinateurs interconnectés. Il permet aux individus et aux organisations de partager des informations, de communiquer et d'accéder à une multitude de services en ligne. Voici quelques points clés à retenir :

• L'Internet est un réseau décentralisé, ce qui signifie qu'aucune autorité unique ne le contrôle.
• Il repose sur un ensemble de protocoles de communication standard, tels que TCP/IP.
• L'Internet a évolué au fil des décennies pour devenir un outil essentiel dans tous les domaines de la vie moderne.

Le web (ou World Wide Web) est un système d'information qui permet de consulter des pages et des ressources via Internet. Il est composé d'un vaste ensemble de documents interconnectés (pages web, vidéos, images, etc.), accessibles via des navigateurs web tels que Google Chrome, Firefox, ou Safari. Le web utilise le protocole HTTP (Hypertext Transfer Protocol) pour transférer les données, et chaque document ou ressource est identifié par une adresse unique, appelée URL.

Le web fonctionne en mode client-serveur : un utilisateur (client) fait une demande en tapant une URL ou en cliquant sur un lien, et un serveur répond en envoyant les ressources demandées (ex. fichiers HTML, images, etc.). C'est l'interface principale par laquelle les utilisateurs accèdent aux informations et services en ligne.

Bien que les termes "Internet" et "web" soient souvent utilisés de manière interchangeable, ils ne désignent pas la même chose :

1. Internet

   Définition

   Internet est l'infrastructure physique mondiale composée d’un réseau d'ordinateurs interconnectés. Il englobe tous les équipements (serveurs, routeurs, câbles, etc.) qui permettent aux ordinateurs de communiquer entre eux à travers le monde.

   Rôle

   Internet est une plateforme permettant la transmission de différentes formes de données (texte, audio, vidéo) via des protocoles spécifiques comme TCP/IP (Transmission Control Protocol/Internet Protocol).

   Applications sur Internet

   Internet n’héberge pas uniquement le web. Il supporte plusieurs autres services et technologies comme :

   1. Email (via le protocole SMTP),
   2. FTP (pour le transfert de fichiers),
   3. VoIP (téléphonie sur IP),
   4. Jeux en ligne, etc.

2. Web

   Définition

   Le web est une des nombreuses applications qui fonctionnent sur Internet. C’est un service permettant de consulter des pages interconnectées, généralement accessibles par le biais d'un navigateur web.

   Rôle

   Le web est centré sur l'information et l'interaction utilisateur via les navigateurs. Les informations sont partagées sous forme de pages web et de documents multimédia.

   Technologie

   Il repose sur des technologies comme HTML, CSS, JavaScript, ainsi que des protocoles spécifiques comme HTTP ou HTTPS.

Internet est l'infrastructure réseau globale qui permet de faire circuler les informations, tandis que le web est un service qui utilise cette infrastructure pour permettre l'accès à des pages web.

Le web est juste une partie d'Internet. Internet englobe d'autres services comme l'email, le transfert de fichiers (FTP), les réseaux sociaux, etc.

Le web ne pourrait pas exister sans Internet, mais Internet peut exister sans le web.

Un navigateur web est un logiciel ou une application qui permet aux utilisateurs de se connecter à Internet pour consulter des pages web et interagir avec le contenu disponible en ligne. Il agit comme une interface entre l'utilisateur et le World Wide Web.

Les navigateurs web fonctionnent en envoyant des requêtes HTTP ou HTTPS aux serveurs, puis en recevant et affichant les documents (HTML, CSS, JavaScript, images, etc.) qui forment les pages web. Ils interprètent le code et le transforment en pages visuelles et interactives que l'utilisateur peut comprendre.

Bien que le navigateur web soit le moyen le plus courant et intuitif pour consulter des pages web, il existe d'autres façons d'accéder à du contenu web, mais généralement sous des formes plus spécialisées ou techniques.

1. Applications web (Webview ou UI intégrée)

   De nombreuses applications mobiles et desktop utilisent des WebViews ou des interfaces utilisateurs qui incluent une partie navigateur. Elles permettent d’accéder à du contenu web sans avoir à ouvrir un navigateur classique.

   Par exemple, dans des applications comme Facebook ou Twitter, lorsqu'on clique sur un lien, la page web s'ouvre directement à l'intérieur de l'application, grâce à un navigateur intégré.

2. Interfaces en ligne de commande (CLI)

   Il est possible d'accéder à des pages web en utilisant des outils en ligne de commande, comme le navigateur texte Lynx, ou en envoyant des requêtes HTTP via des outils comme cURL ou Wget. Ces outils n’affichent pas le contenu de manière visuelle comme les navigateurs classiques, mais permettent d'obtenir et d’analyser le contenu brut (HTML) d'une page.

   Ces méthodes sont souvent utilisées par les développeurs ou administrateurs pour récupérer ou tester des informations sur des sites web sans interface graphique.

3. API et services web

   Certains services ne nécessitent pas d'interface visuelle et utilisent des APIs web pour interagir avec le contenu en ligne. Par exemple, au lieu de charger une page web dans un navigateur, une application peut faire des requêtes HTTP directement à une API pour récupérer des données (souvent en format JSON ou XML) et les traiter.

   Exemple : Une application météo pourrait interroger une API pour obtenir des prévisions météorologiques sans jamais afficher une page web.

4. Lecteurs RSS

   Les lecteurs RSS (Really Simple Syndication) permettent de recevoir du contenu web (généralement des articles ou des flux d'actualité) sans avoir à naviguer sur les sites eux-mêmes. Les utilisateurs s’abonnent à des flux RSS, et le lecteur récupère et affiche les nouveaux contenus publiés.

5. Applications desktop spécifiques

   Certaines applications spécifiques peuvent récupérer des données web et les présenter sous forme d’interface locale. Un exemple serait un client de messagerie comme Outlook, qui récupère des e-mails (parfois stockés sur des pages web comme dans le cas de Gmail) sans avoir besoin de les consulter via un navigateur.

6. Scraping et analyse automatique

   Des outils comme web scrapers sont utilisés pour accéder et récupérer automatiquement des informations sur des pages web. Ces outils ne présentent pas les pages de manière visuelle mais extraient des données spécifiques à des fins d'analyse ou de traitement.

Le fonctionnement du web repose sur plusieurs concepts fondamentaux qui permettent aux utilisateurs d’accéder à des pages et services en ligne. Voici les principales notions à maîtriser :

1. Le modèle Client-Serveur

   1. Introduction

      Le modèle client-serveur est l’architecture sous-jacente au fonctionnement du web. Il définit la manière dont les différents acteurs du web (les clients et les serveurs) communiquent et interagissent entre eux.

      1. Client : Le client est l’appareil utilisé par l’utilisateur pour accéder au web, généralement à travers un navigateur web (comme Chrome, Firefox ou Edge). Le rôle du client est d’envoyer des requêtes pour obtenir des informations ou des fichiers hébergés sur des serveurs distants. Le client peut être un ordinateur, un smartphone, une tablette, ou même une application spécialisée.
      2. Serveur : Le serveur est une machine (ou un groupe de machines) qui stocke les ressources et les fichiers nécessaires pour afficher un site web. Il répond aux requêtes des clients en fournissant ces ressources (ex : fichiers HTML, images, styles CSS, scripts JavaScript). Le serveur peut aussi effectuer des traitements avant de renvoyer la réponse, par exemple interagir avec une base de données pour générer dynamiquement une page web.

      Ce modèle fonctionne de manière très simple : le client demande une ressource, et le serveur la lui fournit.

   2. Exemple concret d’interaction client-serveur

      1. Un utilisateur ouvre son navigateur et tape l’URL (ex. www.exemple.com) dans la barre d'adresse.
      2. Le navigateur (client) envoie une requête HTTP au serveur où le site est hébergé.
      3. Le serveur reçoit la requête, traite la demande, et envoie une réponse au client, qui contient le fichier HTML demandé et d'autres ressources associées (CSS, JavaScript, images).
      4. Le navigateur interprète les fichiers reçus et affiche la page web à l'utilisateur.

2. Les requêtes et réponses HTTP

   Le HTTP (Hypertext Transfer Protocol) est le protocole utilisé pour la communication entre le client et le serveur sur le web.

   1. Requête HTTP

      Une requête HTTP est envoyée par le client pour demander une ressource au serveur. Chaque requête contient plusieurs informations :

      1. Méthode : La méthode de requête (comme GET ou POST) indique l’action à effectuer :
         1. GET : Demande de récupérer une ressource (ex. une page HTML).
         2. POST : Envoi de données au serveur (ex. lors du remplissage d’un formulaire).
      2. URL : L'adresse de la ressource demandée.
      3. En-têtes HTTP : Informations supplémentaires sur la requête (ex. type de contenu, langage du navigateur).
      4. Corps (facultatif) : Dans certaines requêtes, des données supplémentaires peuvent être envoyées dans le corps de la requête (ex. lors de l’envoi d’un formulaire).

   2. Réponse HTTP

      Une réponse HTTP est envoyée par le serveur pour répondre à la requête du client. Elle contient :

      1. Code de statut HTTP : Ce code indique le résultat de la requête (ex. 200 pour succès, 404 pour ressource non trouvée).
      2. En-têtes HTTP : Informations sur la réponse (ex. type de contenu, taille du fichier).
      3. Corps : Le contenu réel de la ressource demandée (ex. le fichier HTML, un fichier CSS, une image).

   3. Exemple d’échange HTTP

      1. Requête GET : Un utilisateur demande la page www.exemple.com/about.html.

         
         GET /about.html HTTP/1.1
         Host: www.exemple.com

      2. Réponse du serveur : Le serveur envoie le fichier demandé avec un code de statut 200 pour indiquer que la requête a réussi.

          
          HTTP/1.1 200 OK
          Content-Type: text/html
          Content-Length: 1024
          <html>
           <head>...</head> 
           <body>...</body>
          </html>
                                                                             

3. Les noms de domaine et les adresses IP

   1. Nom de domaine

      Un nom de domaine est un identifiant unique, facile à mémoriser, qui permet d'accéder à un site web sans avoir besoin de connaître son adresse IP (qui est une suite de chiffres difficile à retenir). Par exemple, www.google.com est un nom de domaine.

   2. Fonctionnement du DNS (Domain Name System)

      Le DNS est un système qui permet de traduire un nom de domaine (ex. www.google.com) en une adresse IP (ex. 142.250.185.206), qui est l’adresse réelle du serveur sur lequel le site web est hébergé. Chaque fois que vous tapez un nom de domaine dans votre navigateur, une requête DNS est envoyée pour obtenir l’adresse IP associée à ce nom.

   3. Adresses IP

      L’adresse IP (Internet Protocol) est un identifiant unique attribué à chaque machine connectée à Internet. Il existe deux versions d’adresses IP :

      1. IPv4 : Format traditionnel composé de quatre nombres séparés par des points (ex. 192.168.1.1).
      2. IPv6 : Format plus récent, composé de huit groupes de quatre chiffres hexadécimaux séparés par des deux-points (ex. 2001:0db8:85a3:0000:0000:8a2e:0370:7334), conçu pour pallier la pénurie d’adresses IPv4.

   4. Importance des adresses IP

      Chaque appareil connecté à Internet (serveur, ordinateur, smartphone) possède une adresse IP unique. Cela permet de localiser l’appareil sur le réseau et d'établir des connexions entre les différents appareils via des requêtes/réponses. Sans adresses IP, la communication entre le client et le serveur ne pourrait pas être réalisée.

4. Exemple global du fonctionnement du web

   1. Saisie de l'URL : L’utilisateur entre l’adresse www.exemple.com dans son navigateur.
   2. Requête DNS : Le navigateur interroge un serveur DNS pour obtenir l’adresse IP associée à ce nom de domaine (par ex. 192.168.1.1).
   3. Requête HTTP : Le navigateur envoie une requête HTTP à l’adresse IP obtenue pour demander la ressource (ex. index.html).
   4. Réponse du serveur : Le serveur reçoit la requête et envoie la réponse HTTP avec les ressources demandées (fichier HTML, CSS, images).
   5. Affichage de la page : Le navigateur interprète les fichiers reçus et affiche la page web à l’utilisateur.

Le développement web consiste à créer des sites web et des applications web pour être accessibles via Internet. Cela implique l'utilisation de langages de programmation, de technologies front-end et back-end, et la compréhension des principes de conception web. Voici quelques concepts clés :

• Les langages de base du développement web incluent HTML (HyperText Markup Language) pour la structure, CSS (Cascading Style Sheets) pour la mise en forme, et JavaScript pour l'interactivité.
• Le développement web peut être divisé en deux catégories principales : le développement front-end (ce que l'utilisateur voit et interagit) et le développement back-end (la gestion des données et de la logique côté serveur).
• Le développement web moderne comprend des frameworks et des bibliothèques qui accélèrent le processus de création de sites web.

Le développement web joue un rôle crucial dans notre société contemporaine. Il alimente les sites web que nous utilisons au quotidien, des réseaux sociaux aux sites de commerce électronique. Il permet également la création d'applications en ligne pour résoudre divers problèmes. Internet, quant à lui, a transformé la façon dont nous communiquons, travaillons, apprenons et divertissons.

En combinant ces deux domaines, ce cours vous préparera à devenir un créateur et un utilisateur averti de la technologie web.

Pour la prochaine séance, nous explorerons davantage les concepts de base du développement web, notamment HTML, CSS et JavaScript, pour commencer à créer votre propre site web simple.

Une page web, qu'elle soit statique ou dynamique, repose sur trois technologies principales :

1. HTML (HyperText Markup Language)

   Rôle

   HTML est le langage de balisage utilisé pour structurer et organiser le contenu de la page. Il définit les éléments comme les titres, paragraphes, images, liens, etc.

   Balises

   Chaque élément HTML est encadré par des balises ( <h1>, <p>, <img>, <a>).

   Importance

   Sans HTML, il n'y aurait pas de contenu visible ou structuré sur la page web.

2. CSS (Cascading Style Sheets)

   Rôle

   CSS est utilisé pour définir l'apparence et la présentation d'un document HTML. Il permet de styliser les éléments avec des couleurs, des polices, des marges, des bordures, etc.

   Exemple

   On utilise le CSS pour rendre un site visuellement attrayant, en ajustant la mise en page (layout), les couleurs de fond, les transitions, etc.

   Méthode

   Le CSS peut être inclus directement dans le fichier HTML, ou bien dans des fichiers séparés reliés au HTML.

3. JavaScript

   Rôle

   JavaScript est un langage de programmation qui permet d’ajouter de l’interactivité aux pages web, comme les animations, la gestion des événements (clics, défilement), ou la manipulation du DOM (Document Object Model).

   Exemples

   Validation des formulaires, carrousels d’images, affichage dynamique de contenu.

   Importance

   Grâce à JavaScript, une page web devient interactive et réactive aux actions des utilisateurs.

   Exemple de synergie HTML/CSS/JavaScript

   Un site web peut avoir un formulaire (HTML), stylisé avec des couleurs et des bordures (CSS), et lorsqu'un utilisateur soumet le formulaire, une vérification de données se fait (JavaScript). Si les données sont incorrectes, un message d'erreur s’affiche immédiatement sans qu’il soit nécessaire de recharger la page.

Le développement front-end concerne tout ce que les utilisateurs voient et avec quoi ils interagissent directement dans leur navigateur. C'est la partie visible d'un site ou d'une application web.

Technologies principales :

• HTML : Structure et contenu des pages web
• CSS : Mise en forme et style
• JavaScript : Interactivité et logique côté client

Frameworks populaires :

• React.js
• Vue.js
• Angular

En savoir plus sur le développement Front-end

Le back-end gère tout ce qui se passe en arrière-plan : logique métier, base de données, authentification, etc. C'est le moteur qui fait fonctionner les applications web.

Technologies principales :

• Langages : PHP, Python, Java, C#, Ruby, Node.js
• Bases de données : MySQL, PostgreSQL, MongoDB
• Serveurs : Apache, Nginx, Node.js

Frameworks populaires :

• Symfony, Laravel (PHP)
• Django, Flask (Python)
• Express.js (Node.js)
• Spring Boot (Java)

Découvrir le développement Back-end

Un développeur full-stack maîtrise à la fois le front-end et le back-end, lui permettant de créer des applications web complètes de A à Z.

Compétences clés :

• Maîtrise des technologies front-end et back-end
• Gestion des bases de données
• Déploiement et DevOps de base
• Sécurité web

Stacks populaires :

• MERN : MongoDB, Express.js, React, Node.js
• MEAN : MongoDB, Express.js, Angular, Node.js
• LAMP : Linux, Apache, MySQL, PHP
• JAMstack : JavaScript, APIs, Markup

Explorer le développement Full-Stack