INTRODUCTION GÉNÉRALE

Module : PIN
Année Universitaire : 2014 – 2015
S1

M.SAIDANI
Plan

Définitions des termes

Fonctionnement d’un site Web

Architecture d’un site Web

Les languages du Web

Evolution du Web

2
 Définitions des termes
Internet ?
Infrastructure réseau qui connecte des ordinateurs du monde entier. Son nom vient de
"réseaux interconnectés" : INTERconnected NETworks et sa date d'inauguration retenue
le plus souvent est le 1er janvier 1983 avec l'apparition du protocole TCP/IP.
Internet est donc un réseau de transport de données et permet de transporter un paquet
de données d'un ordinateur A à un ordinateur B.

Web ?
Un service qui utilise internet et qui permet l'échange d'informations apparu en 1991
Il met en œuvre des langages et des protocoles (protocole HTTP, formats HTML, CSS,
JPEG...).
3
 Définitions des termes
Les autres applications qui sont construites au dessus d'internet

Internet

Web
(HTTP)

la vidéo
Mail (protocoles le chat
(SMTP,POP3..) Real, etc.) (Jabber, AIM)

le système
les VPN
DNS

4
 Définitions des termes
Hyperdocument ?
• Un hyperdocument est un document électronique contenant des images, du son, du
texte, parfois des petits morceaux de programme, mais surtout des liens vers d'autres
hyperdocuments : des liens hypertextes.
• Les liens hypertextes apparaissent dans un style qui les distinguent, et une simple
action de la souris sur un lien suffit à ouvrir le document lié.

5
 Définitions des termes
HTTP ?
• HTTP (HyperText Transfer Protocol) protocole de transfère de page HyperText. Il peut
fonctionner sur n'importe quelle connexion fiable, dans les faits on utilise le protocol
TCP comme couche de transport. Un serveur HTTP utilise par défaut le port 80 (443
pour HTTPS).
• Les clients HTTP les plus connus sont les navigateurs Web permettant à un utilisateur
d'accéder à un serveur contenant les données. Il existe aussi des systèmes pour
récupérer automatiquement le contenu d'un site tel que les aspirateurs de site Web.
• Ces clients se connectent à des serveurs HTTP tels qu'Apache HTTP Server ou Internet
Information Services.

6
 Définitions des termes
Navigateur ?
• Un navigateur est l'outil qui permet de lire les hyperdocuments. On l'appelle aussi
browser (MicroSoft Internet Explorer (MSIE), Mozilla, Chrome, Firefox…). Au début
conçu pour ne lire que les hyperdocuments, le navigateur intègre aujourd'hui tous les
services de l'Internet (e-mail, ftp,...)

• Le navigateur désigne par une adresse URL (Uniform Resource Locator), les adresses
complètes de l'Internet. C'est une adresse qui contient à la fois le nom d'une machine
mais aussi le nom du service demandé, le nom d'un document,...

7
 Historique
Evolution du Web ?
Création du web (et non pas internet) par Tim Berners-Lee en 1991 en créant le W3C
(world Wide Web Consortium) qui définit les nouvelles versions des langages liées au
web.

World Wide Web Consortium : Organisme de normalisation chargé de promouvoir la

compatibilité des technologies du World Wide Web telles que HTML,
XHTML, XML, CSS, PNG et SOAP.

L'idée c’était de lire des hyper documents à l'aide d'un navigateur.

8
Evolution

9
Evolution

10
Evolution

11
Fonctionnement d’un
site Web

12
Fonctionnement d’un site Web

Lorsque vous voulez visiter un site web, vous

tapez son adresse dans votre navigateur (URL),
que ce soit Mozilla Firefox, Internet Explorer,
Chrome ou un autre. Mais ne vous êtes-vous
jamais demandé comment faisait la page web
pour arriver jusqu'à vous ?

13
 Fonctionnement d’un site Web
Analyse d’une adresse URL
Le serveur
est localisé Nom de fichier
Utilisation du Appel au en Nom de
protocole http html que l’url va
serveur du Angleterre répertoire nous télécharger
pour le transfère nom de bps
des données

http://www.bps.org.uk/publication/periodicals/Psych/PSY9_2013.html

Le serveur contient
C’est un site un répertoire
www nommé publication

Le serveur est Nom de

enregistrer en tant répertoire
qu’une organisation

14
Fonctionnement d’un site Web

15
Fonctionnement d’un site Web

16
Fonctionnement d’un site Web

Internet est un réseau composé d'ordinateurs.

Ceux-ci peuvent être classés en deux catégories.
• Les clients : ce sont les ordinateurs des
internautes comme vous. Votre ordinateur
fait donc partie de la catégorie des clients.
Chaque client représente un visiteur d'un site
web.
• Les serveurs : ce sont des ordinateurs qui
stockent et délivrent des sites web aux
internautes, c'est-à-dire aux clients.
17
Fonctionnement d’un site Web

On résume : votre ordinateur est appelé le

client, tandis que l'ordinateur qui détient le site
web est appelé le serveur. Comment les deux
communiquent-ils ?
C'est justement là que se fait la différence entre
un site statique et un site dynamique. Voyons
ensemble ce qui change.

18
 Les sites statiques
• Leur contenu ne peut pas être mis à jour
automatiquement : il faut que le propriétaire du
site (le webmaster) modifie le code source.
• Les sites statiques sont donc bien adaptés pour
réaliser des sites « vitrine », présenter son
entreprise par exemple.
• Ce type de site se fait rare aujourd'hui, car dès
que l'on rajoute un élément d'interaction (comme
un formulaire), on ne parle plus de site statique
mais de site dynamique.

19
 Les sites dynamiques
• Plus complexes, ils utilisent d'autres langages en
plus de HTML et CSS, tels que PHP et MySQL.
• Leur contenu est dit « dynamique » parce qu'il
peut changer sans l'intervention du webmaster.
• La plupart des sites web que vous visitez
aujourd'hui, sont des sites dynamiques. Le seul
pré-requis pour apprendre à créer ce type de
sites est de déjà savoir réaliser des sites statiques
en HTML et CSS.

20
Architecture des sites dynamiques
Architecture à 2 niveaux

21
Architecture des sites dynamiques
Architecture à 2 niveaux

L'architecture à deux niveaux (appelée aussi

architecture 2 tiers).
• Caractérise les systèmes clients/serveurs
pour lesquels le client demande une
ressource et le serveur la lui fournit
directement, en utilisant ses propres
ressources.
le serveur ne fait pas appel à une autre
application afin de fournir une partie du
service.
22
Architecture des sites dynamiques
Architecture à 3 niveaux

23
Architecture des sites dynamiques
Architecture à 3 niveaux

Dans l'architecture à 3 niveaux, il existe un niveau

intermédiaire, c'est-à-dire que l'on a généralement une
architecture partagée entre :
Un client, c'est-à-dire l'ordinateur demandeur de
ressources.
Le serveur d'application (appelé aussi middleware),
chargé de fournir la ressource mais faisant appel à un
autre serveur.
Le serveur de données, fournissant au serveur
d'application les données dont il a besoin.
24
Comparaison des architectures
• Architecture 2 niveaux
• architecture client/serveur
• le serveur est polyvalent
Fournit directement l'ensemble des ressources demandées par
le client.

• Architecture 3 niveaux
• Les applications au niveau serveur sont
délocalisées.
Chaque serveur est spécialisé dans une tâche
(serveur web et serveur de base de données par exemple).

25
 Comparaison des architectures

VS

Avantages architecture 3 tiers

Une plus grande flexibilité/souplesse.
Une sécurité accrue car la sécurité peut être définie
indépendamment pour chaque service, et à chaque
niveau .
De meilleures performances, étant donné le partage
des tâches entre les différents serveurs.
26
 Les languages du Web
Lors de la création d’un site web plusieurs langages sont utilisés

Navigateurs Serveurs
Serveurs
(Firefox, Safari, (Apache
(BD)
Chrome…) Jbos,…)
HTML PHP Oracle
CSS ASP MySQL
XML JSP Access
Javascript
27
 Les languages du Web
Le langage HTML

• Hypertext Markup Language

• Langage de balisage permettant d’écrire de
l’hypertexte
• Structurer sémantiquement et de mettre en
forme le contenu des pages
• Inclure des ressources multimédias : Images,
formulaires, son, programme informatique

Le langage HTML est souvent utilisé conjointement avec des langages

de programmation (JavaScript) et des formats de présentation (feuilles
de style en cascade - CSS)
28
Les languages du Web
Exemple

<!DOCTYPE>
<html>
<head>
<title>Ma première page<title>
<head>
<body>
<p>Bonjour, je suis un <strong>paragraphe</strong> de texte
!</p>
<body>
<html>

Avec HTML vous pouvez crée votre propre site web

29
MERCI POUR VOTRE ATTENTION

30