Faculté de génie électrique et informatique L2

Département d’informatique Année : 2023/2024

Module : Développement Web

Généralités sur le
développement web
Code du cours :
2e4cv3y

Responsable du module : Mme Bousnina 1Lila

 Objectifs des cours et des TP

 Découvrir ce qu’est le Web et comment ça marche :

– Environnement réseau et mécanismes de base du Web.

 Être capable :

– De créer une page Web simple en utilisant le langage HTML.

 Mettre en forme cette page ou un ensemble de pages :

– Langage CSS.

 Rendre cette page interactive :

– Langage Java script ( côté client).

INTERNET / WEB

INTERNET :

 Internet: un réseau informatique mondial qui permet

aux ordinateurs qui y sont connectés de communiquer
entre eux et d'échanger de l'information.

 C'est l'infrastructure globale, sur laquelle s'appuient de

nombreux autres services pour échanger des données.
• courrier électronique (e-mail)
• échange de fichiers (FTP File Transfert Protocole)
• Le web (World Wide Web)

3
WEB :  Web (World Wide Web
WWW), ou toile en français :
un système conçu au départ
pour le partage et l'échange
de documents multimédia
hypertextes
( = des documents liés entre eux
par des hyperliens) en utilisant le
réseau internet.

≠
Internet n’est pas le Web 4
INTERNET

DEUX CATÉGORIES DE POINTS FINAUX 5

 Architecture client-serveur

 Définition (Serveur)
Un serveur est un ordinateur (et/ou un programme
informatique) offrant un service ou une ressource
sur un réseau.

 Définition (Client)
Un client est un programme informatique
contactant un serveur via un réseau, afin de
bénéficier d’un service ou d’une ressource.

6
Serveur Web / Navigateur Web
 Serveur Web : serveur HTTP qui transmet aux clients web les documents
demandés
Exp : Apache, Nginx, Microsoft IIS, Tomcat, Jetty……

 Navigateur Web : client HTTP qui se charge

de l'affichage de la ressource demandée (d'un
document HTML).

7
Communication client-serveur

 Le client et le serveur communiquent via un réseau.

 Un client envoie une requête à un serveur pour lui demander une information
ou un service. Le serveur reçoit cette requête, la traite et envoie une réponse
au client.

Requête HTTP

Réponse

8
Les protocoles

La communication sur Internet est régie par un ensemble de

protocoles.
Un protocole est un ensemble de règles et de conventions
utilisées pour permettre à différents dispositifs informatiques de
communiquer et d'échanger des données sur un réseau, tel
qu'Internet.
Ces protocoles définissent la façon dont les données sont
structurées (format), transmises, reçues et interprétées (la
signification) entre les dispositifs connectés.

9
HTTP (Hypertext Transfer Protocol)

HTTP est l'un des protocoles de communication les plus

fondamentaux et largement utilisés sur Internet. Il est utilisé
pour le transfert de ressources telles que des pages web, des
images, des vidéos, etc., entre un client (tel qu'un navigateur
web) et un serveur web.
Il est basé sur un modèle client-serveur, où le client envoie
des requêtes au serveur pour demander des ressources, et le
serveur répond en envoyant ces ressources demandées.
Il se situe au niveau de la couche application du modèle OSI.
10
Applications du modèle client-serveur

 Serveurs de courrier électronique

Protocole : SMTP (Simple Mail Transfer Protocol),
POP3 (Post Office Protocol version 3), …

 Serveurs de pages Web (serveur web, serveur HTTP)

Protocole : HTTP, FTP,

11
Le Web

The World Wide Web(abbreviated as WWW or W3 and commonly known as the

Web) is a system of interlinked hypertext documents accessed via the Internet.
(wikipedia)

 Qu'est ce que l'hypertexte ?

 Définition : document non linéaire constitué de pages permettant de passer
de l’une à l’autre par des liens (liens hypertexte)

 Web = hypertexte + internet

Inventé au début des années 90 par Tim Berners Lee au
CERN (Genève) en développant trois principales
technologies :
 Les adresses web (ou URL Uniform Resource Locator),
 Le protocole HTTP (Hypertext Transfer Protocol),
 Et le langage HTML (Hyper Text Markup Language). 12
Le Web (2)

 Web ≠ Internet qui supporte de nombreux autres services :

 Messagerie électronique (ou e-mail) : POP ou IMAP
 Transfert de fichiers : FTP
 Listes de discussion : "news"
 Forum de discussion en ligne : IRC (internet relay chat)
 Connexion sur une machine distante : telnet, rlogin, ssh(secure shell)
 …

13
Web : URL Uniform Resource Locator

 Localisation d'un document sur le Web : Indiquant le Comment ? Où ?

Quoi ?, par exemple : http://ummto.dz/elearning/

requête
spécifiée
à travers
l’URL

interprète
réponse

14
La programmation web / le développement web :

 La programmation web c’est l'écriture de code informatique, généralement

en langages tels que HTML, CSS, JavaScript,… pour créer des pages web.
Destinés à être déployées sur Internet ou en Intranet (un réseau).

 Le développement web englobe un processus plus large qui comprend la

programmation, mais également d'autres aspects tels que la conception de sites
web, la gestion de bases de données, l'optimisation des performances, la
sécurité et le déploiement.
 Le développement web implique la création complète d'un site web ou d'une
application web, du concept initial à la mise en ligne et à la maintenance
continue.

15
Page Web :

C'est un document
o Contenant :
 Textes, images, vidéo ...
 Liens hypertextes.
 Avec possibilité d'interaction.
o Stocké dans un fichier .html (ou .htm, .xml);
o Interpreté et affiché par un navigateur;
o Localisé sur internet à l'aide d'une adresse (URL);
o Permet d'accéder à d'autres pages en suivant des liens.
16
Site Web :

 Regroupement de pages web :

 Autour d'une thématique commune;

 Reliées entre elles par des liens hypertextes ;

 Émanant d'une même entité (organisation, entreprise,

particulier. .. );

 Accessibles à partir d'une page d'accueil commune;

 Accessibles à partir d'une URL de base commune;

 En général, localisées sur un même serveur. 17

Site Web (2)

 Organisation hiérarchique :
 Structuré sous forme d'arborescence de dossiers et de
fichiers (comme un disque local);

 Liens vers et à partir d'autres sites :

 Permettent de naviguer d'un site à un autre;
 Composent la « toile » mondiale (World Wide Web).

18
Pages statiques / pages dynamiques

 Pages statiques :
 Documents HTML sous la forme de fichiers.
 Transmises telles quelles (contenu invariable) par le serveur HTTP.

 Pages dynamiques :
 Documents HTML construits dynamiquement (à la volée) par le
serveur.
 Exécution du programme désigné par l'url (sur le serveur)
 Construction d'une page HTML résultat (sur le serveur) contenant
des données extraites à partir de bases de données régulièrement
mises à jour. => web «dynamique»
19
Pages statiques / pages dynamiques

20
Application Web / site Web :

Site Web :

 Un site web est principalement axé sur la diffusion d'informations.

Il peut fournir du contenu statique (comme des pages de texte et
d'images) ou dynamique (comme des mises à jour de flux
d'actualités).
 Les sites web sont généralement constitués de plusieurs pages reliées
entre elles par des hyperliens. Ils sont souvent utilisés pour présenter
des informations, des produits, des services ou des portfolios.
 Les utilisateurs interagissent principalement en naviguant entre les
pages via des liens hypertextes.
21
Application Web :

 Une application web est plus interactive et dynamique qu'un site web.
Elle offre souvent des fonctionnalités avancées et des interactions en
temps réel.
 Contrairement à un site web, une application web peut permettre aux
utilisateurs de se connecter, d'interagir avec des bases de données, de
personnaliser leur expérience utilisateur, etc.

Note : un site web peut contenir un ou des applications web.

22
Les types de développements web :

 Le programme qui s’exécute sur le navigateur = Front

 Le programme qui s’exécute sur le serveur web = Back

23
Programmation coté Client (Front end) – JavaScript

 La page HTML est renvoyée telle quelle au navigateur.

 C'est le moteur JavaScript du navigateur interprète le script et modifie le DOM
(Document Object Model) de la page HTML.

24
Programmation coté Serveur (Back end)

 Le programme coté serveur traite les données envoyées par les clients, telles
que les formulaires soumis ou les requêtes de données, en les stockant, en les
récupérant, en les modifiant ou en les supprimant dans une base de données ou
un système de fichiers.

25
Les langages du web
a. Côté client

 Les 3 standards du web sont :

 Html (HyperText Markup Language): est le langage utilisé pour structurer

une page web et son contenu. Ce langage est compréhensible par des
programmes informatiques (navigateur web ou robots des moteurs de
recherche).
 Css (Cascading StyleSheet): permet de mettre en forme (définir les styles)
en modifiant les couleurs, polices... de de la page
 js (javaScript): permet de rendre les pages web interactives, pour par
exemple récupérer les données d'un utilisateur entrées dans un formulaire,
en exécutant un programme par le navigateur.

26
b. Côté serveur

 Pages générées dynamiquement.

 Le serveur doit calculer la ressource avant de la renvoyer :

 En exécutant des « modules» (programmes).

 Sécurité, scripting, redirection ...
 Avec un langage de programmation côté serveur :
 PHP, Node Js, ASP, java, python ...
 En fonction des données :
 Indiquées par le client (formulaires, cookies).
 Présentes sur le serveur (fichiers de données, pages statiques).
 Présentes sur d'autres serveurs (web, bases de données, mail. .. ) :
 Le serveur considéré est le client d'autres serveurs.
 Le mécanisme de requête/réponse reste le même. 27
Le développement d'une page Web
Avant de publier le site sur internet, on commence par le développer
localement sur son ordinateur avec deux logiciels:
1. Un éditeur de code :
Des éditeurs de code qui permettent de colorer le code, l'indenter, le
vérifier, l'auto compléter..., par exemple:
 Notepad ++
 Atom
 Visual Studio Code
 Brackets
2. Un navigateur web :
Un navigateur qui permet de visualiser le rendu du code, par exemple :
 Mozilla Firefox
 Google Chrome
 Microsoft Edge 28
Les différentes versions du web :
Le Web 1.0 : ou web traditionnel (Simple Web)
 Démarre dans les années 1990.
 C’est avant tout un web statique, centré sur la distribution
d’informations (un portail d’informations ).
 Majoritairement associé aux grandes entreprises.
 Il se caractérise par des sites orientés produits, qui sollicitent peu
l’intervention des utilisateurs (sans la possibilité de publier des
commentaires ou des réactions).
 C’est souvent la transcription en ligne des catalogues papier.

Connecter des informations

29
Le Web 2.0 : ou web social (2000-2010)
 Il privilégie la dimension de partage et d’échange d’informations et
de contenus (textes, vidéos, images ou autres).
 Il voit l’émergence des réseaux sociaux, des smartphones et des
blogs.
 Le web se démocratise et se dynamise.
 C’est l’époque des forums, des wikis (Le terme désigne un logiciel ou
un contenu collaboratif, c'est-à-dire accessible à tous les visiteurs qui
peuvent le modifier à leur gré.), etc.
 L’avis du consommateur est sollicité en permanence et il prend goût à
cette socialisation virtuelle.
 Toutefois, la prolifération de contenus de qualité inégale engendre
une infobésité difficile à contrôler.

Connecter les gens 30

Le Web 3.0 ou web sémantique (2010-2020),
 Vise à organiser la masse d’informations disponibles en fonction
du contexte et des besoins de chaque utilisateur, en tenant
compte de sa localisation, de ses préférences, etc.
 C’est un web qui tente de donner sens aux données.
 C’est aussi un web plus portable qui répond aux besoins
d’utilisateurs mobiles, toujours connectés à travers une
multitude de supports et d’applications.

Connecter les connaissances

31
Le web 4.0, ou web intelligent ,
 Il vise à immerger l’individu dans un environnement digital
de plus en plus prégnant (durable).
 Basé sur la communication sans fil reliant les personnes et les
objets (IoT : Internet of Things) à tout moment et en tout lieu
dans le monde physique ou virtuel en temps réel.

Connecter l’intelligence

32
33
34