Faculté Polytechnique

I-ILIA-011 – TECHNOLOGIES DU WEB

INTRODUCTION AUX TECHNOLOGIES DE WEB

Titulaire : Pr. Sidi Ahmed Mahmoudi

sidi.mahmoudi@umons.ac.be 22 Février 2021

 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 2
 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 3
 Introduction
• Définition de « internet » ?

• Un réseau mondial de machines interconnectées

• Un réseau de réseaux
• Communication à l’aides protocoles TCP-IP
• Diverses applications : courrier, transfert de fichier, partage de
fichiers, www (World Wide Web), etc.

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 4

 Introduction
• Définition du « web » ?

• Le web a été inventé par Tim Berners-Lee en 1989

• Le web repose sur internet
• Système d’information réparti en pages web (documents web)
• Le web utilise :
▪ hypertextes et hyperliens : naviguer entre pages web
▪ protocoles de communications : HTTP, HTTPS (TCP-IP)
▪ des adresses pour repérer les documents : URL
• Des langages pour créer pages web
• Des navigateurs qui interprètent et affichent les documents

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 5

 Introduction
• Définition du « w3c » ?

• w3c : World Wide Web Consortium

• Organisme de normalisation : promouvoir la compatibilité des
technologies du web
• Slogan « un seul web partout et pour tous »
• Exemple : normalisation de HTML5 = HTML5 (contenu) + CSS3
(forme) + javascript (interactivité)

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 6

 Introduction

• Utilisateurs d’internet : > 4 milliards

• Sites web : presque 2 milliards

http://www.internetlivestats.com/

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 7

 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 8
 Le web en chiffres

https://www.blogdumoderateur.com/chiffres-internet/
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 9
 Le web en chiffres

http://www.internetlivestats.com/total-number-of-
websites/
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 10
 Le web en chiffres

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 11

 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 12
 Historique

• 1958 : création du premier modem pouvant envoyer des données binaires via

une simple ligne téléphonique (BELL)

• 1962 : début du projet ARPA visant à relier des ordinateurs

• 1967 : première conférence sur ARPANet

• 1971 : connexion des premiers ordinateurs de 4 universités (23 ordinateurs

sont reliés sur ARPANET)

• 1974 : Le protocole TCP/IP est créé pour être utilisé dans ARPANet

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 13

 Historique

• 1983 : Premier serveur de noms de domaine

• 1989 : 100 000 ordinateurs connectés + naissance du Web

• 1991 : Apparition du World Wide Web

• 1993 : Apparition du navigateur NSCA Mosaic

• 1996 : 10 000 000 ordinateurs connectés

• 2000 : explosion d’internet

• 2012 : 2 milliards d’utilisateurs dans le monde

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 14

 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 15
 Architecture client-serveur

Pennons un simple exemple : si vous tapez taper l’adresse :

http://staff.umons.ac.be/sidi.mahmoudi/pubsfr.html
• Contact via internet du serveur : http://www.umons.ac.be
• Sur ce serveur, un logiciel (serveur Web) est toujours en écoute
• Dès réception de la demande, envoie de confirmation et de disponibilité
• Votre navigateur envoie une demande pour : /sidi.mahmoudi/pubsfr.html
• Le serveur Web envoie le fichier demandé à votre navigateur
• Une fois le fichier reçu, votre navigateur utilise le programme HTML du fichier
pubsfr.html pour construire le document
• La navigateur Web affiche le résultat sur votre écran.

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 16

 Architecture client-serveur

Client Serveur

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 17

 Architecture client-serveur

Requête http://staff.umons.ac.be/sidi.mahmoudi/pubsfr.html

Client Serveur

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 18

 Architecture client-serveur

Client Serveur

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 19

 Architecture client-serveur

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 20

 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 21
 Le protocole HTTP

• HTTP : Hyper Text Transfer Protocol

• Protocole utilisé pour la communication web

• But : transférer les fichiers (essentiellement au format HTML) entre un

navigateur (le client) et un serveur Web

• Utilise le protocole TCP/IP pour le transfert de fichiers

• Les fichiers sont localisés grâce à une chaîne de caractères URL

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 22

 Le protocole HTTP

• Communication entre le navigateur et le serveur en deux temps :

▪ Le navigateur effectue la requête HTTP
▪ Le serveur traite la requête puis envoie une réponse HTTP

• Pour aller plus loin :

https://openclassrooms.com/fr/courses/1118811-les-requetes-http

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 23

 Le protocole TCP/IP

• TCP/IP : communication entre processus exécutés éventuellement sur

différentes machines

• TCP/IP : composé de la couche IP et de la couche TCP

• La transition de données entres machines se fait par communication de

paquet

• IP (Internet Protocol) : transiter les paquet d’un nœud vers un autre nœud

• Les nœuds sont représentés par une adresse IP

• TCP (Transfer Control Protocol) se charge de vérifier les données reçus

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 24

 Types de contenu

• Le web permet d’accéder à plusieurs types de contenu

• Le serveur web ainsi que le client web (navigateur) utilisent des codifications

permettant d’identifier et de traiter ces différents types de contenu

• Types de contenu : HTM, texte, image, vidéos, etc.

Type de contenu Extension

text/html Html htm
image/jpeg jpeg jpg jpe
audio/mpeg mpeg mp2 mp3
video/mpeg mpeg mp2 mp3

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 25

 PLAN
Introduction

I. Le web en chiffres

II. Historique de l’internet et web

III. Architecture client-serveur

IV. Les protocoles HTTP, TCP/IP et types de contenu

V. Développement Front-End vs. Back-End

Conclusion
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 26
 Développement Front-End vs Back-End

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 27

 Développement Front-End vs Back-End
• Les termes Front-End et Back-End reviennent fréquemment dans un projet
de développement web

• Il existe différents langages et frameworks pour le développement Front-end

• De même, il existe différents langages et frameworks pour le
développement Back-end

• Besoin cruciale de collaborer entre développeur Front-End et développeur

Back-End dans un projet.

• On parle de développeur Front-end, Back-End et Full-Stack.

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 28

 Front-End

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 29

Développement Front-End (développement frontal)
• Partie visible d’une application web

• Affichage des pages web permettant aux utilisateurs d’interagir via des
navigateurs web (code client)

• Le code client s’appuie sur trois langages de programmation :

▪ HTML: pour gérer le contenu des pages web
▪ CSS: pour gérer la forme des pages web
▪ Javascript : pour gérer l’interactivité avec utilisateurs

• La combinaison de ces trois langages est exécutée par votre navigateur et

permet un affichage de la plateforme
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 30
Développement Front-End (développement frontal)

• Il existe aussi des frameworks basés sur ces langages : JQuery, Boostrap,
AngularJS, React, vue.js, etc.

• Front-End: développement de sites statiques

• Le Front-End nécessite une intelligence derrière pour gérer les actions,

connexions aux serveurs de données, etc. : rôle du Back-End

• La création de sites dynamiques nécessite des compétences en

développement Back-End

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 31

 Back-End

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 32

Développement Back-End (développement arrière-plan)
• Partie invisible d’une application web : mais la plus importante

• Back-End: considéré comme le moteur de l’application web

• On peut avoir une belle interface mais qui restera inutile sans
développement Back-End.

• Back-End : représenté par trois parties

▪ Le serveur: pour l’hébergement de l’outil sur le web
▪ L’application: pour gérer les informations et requêtes utilisateur
▪ La base de données: pour conserver toutes les données
nécessaires au fonctionne de la page web
Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 33
Développement Back-End (développement arrière-plan)

• Exemple : « Utilisateur se connecte à site e-commerce : commander un PC »

• Rôle du Backend:
▪ Enregistrer les données de l’achat dans la BDD (hébergée sur serveur)
▪ Permettre au client de consulter l’état de sa commande
▪ Permettre à l’utilisateur de demander un retour (en cas d’insatisfaction)
▪ Etc.
• Le Back-En permet d’effectuer des actions ayant un impact à long terme
• Langages développement Back-End : PHP, Python, Java, Ruby, etc.
• Frameworks développement Back-End: Symfony, Flask, Django, Node.js, etc.

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 34

 Full-Stack

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 35

 Développement Full-Stack

• Développement Full Stack : nécessite à la fois des compétences Front-End et

Back-End ;

• Conduire des projets dans leur globalité ;

• Développeurs Full-Stack fortement recherchés : projets à courte durée ;

• Pour des projets (développements) de grande envergure, une dissociation

entre équipes (compétences) Front-End et Back-End est plus adéquate pour
avoir une meilleure gestion des tâches.

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 36

 Question ?

Université de Mons Pr. Sidi Ahmed Mahmoudi Technologies d e Web 37