1. Développement web
Module 1 : Introduction
Cours développement web Copyright © 2012, ESI
1
Module 1 - Introduction Mostefai Mohammed Amine

2. Objectifs du cours
• Prise de contact avec les technologies web
• Avoir les connaissances de base permettant de développer ou de
maintenir un site web et aussi de gérer un projet web
Cours développement web Copyright © 2012, ESI
2
Module 1 - Introduction Mostefai Mohammed Amine

3. Objectifs du module
• Acquérir les connaissances introductives des technologies web
• Se mettre dans le bain du développement web
Cours développement web Copyright © 2012, ESI
3
Module 1 - Introduction Mostefai Mohammed Amine

4. Plan
• Le web en chiffres
• Historique
• Fonctionnement
• Les outils
Cours développement web Copyright © 2012, ESI
4
Module 1 - Introduction Mostefai Mohammed Amine

5. Section 1 – Le web en chiffres
Cours développement web Copyright © 2012, ESI
5
Module 1 - Introduction Mostefai Mohammed Amine

6. 1 – Le web en chiffres
Internet : des chiffres qui donnent le
tournis !
• Plus d’informations ont été produites ces 30 dernières années que
durant les cinq derniers millénaires
• Une personne intellectuellement moyenne nécessiterait six cent mille
décennies de lecture non-stop pour lire internet
• Entrer dans le monde de la nouvelle technologie d’information est
un pari intéressant et risqué !
Cours développement web Copyright © 2012, ESI
6
Module 1 - Introduction Mostefai Mohammed Amine

7. 1 – Le web en chiffres
Des chiffres !
• Une compilation de certaines statistiques très intéressantes peut
être consultée ici : http://royal.pingdom.com/2012/01/17/internet-
2011-in-numbers/
• Une personne intellectuellement moyenne nécessiterait six cent
mille décennies de lecture non-stop pour lire internet
• 555 millions de sites web
• 95,5 millions de noms de domaine en .com
• 2,1 milliards d’utilisateurs
• 800 millions d’utilisateurs facebook
Cours développement web Copyright © 2012, ESI
7
Module 1 - Introduction Mostefai Mohammed Amine

8. 1 – Le web en chiffres
Encore des chiffres !
• 2 milliards d’abonnés mobiles
• 85% des abonnés disposent d’un navigateur internet sur leur
mobile
• 1 billion de vidéos sur youtube
Cours développement web Copyright © 2012, ESI
8
Module 1 - Introduction Mostefai Mohammed Amine

9. 1 – Le web en chiffres
Encore des chiffres !
• 2 milliards d’abonnés mobiles
• 85% des abonnés disposent d’un navigateur internet sur leur
mobile
• 1 billion de vidéos sur youtube
Cours développement web Copyright © 2012, ESI
9
Module 1 - Introduction Mostefai Mohammed Amine

10. 1 – Le web en chiffres
Encore des chiffres !
Cours développement web Copyright © 2012, ESI
10
Module 1 - Introduction Mostefai Mohammed Amine

11. 1 – Le web en chiffres
Encore des chiffres !
Cours développement web Copyright © 2012, ESI
11
Module 1 - Introduction Mostefai Mohammed Amine

12. 1 – Le web en chiffres
Encore des chiffres !
Cours développement web Copyright © 2012, ESI
12
Module 1 - Introduction Mostefai Mohammed Amine

13. Section 2 – Historique
Cours développement web Copyright © 2012, ESI
13
Module 1 - Introduction Mostefai Mohammed Amine

14. Dates clé
2 – Historique
• 1958 : création du premier modem pouvant envoyer des
données binaires en utilisant 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
américaines
• 23 ordinateurs sont reliés sur ARPANET. Envoi du premier
courriel par Ray Tomlinson
Cours développement web Copyright © 2012, ESI
14
Module 1 - Introduction Mostefai Mohammed Amine

15. Dates clé
2 – Historique
• 1973 : L’Angleterre et la Norvège rejoignent le réseau avec 1
ordinateur pour chaque pays
• 1974 : Le protocole TCP / IP est créé pour être utilisé dans
ARPANet
• 1979 : Création de Newsgroup par des étudiants américains
• 1983 : Premier serveur de noms de domaine
• 1989 : 100 000 ordinateurs connectés
• 1990 : Disparition de l’ARPAnet
• 1991 : Apparition du World Wide Web
• 1993 : Apparition du navigateur NSCA Mosaic
Cours développement web Copyright © 2012, ESI
15
Module 1 - Introduction Mostefai Mohammed Amine

16. Dates clé
2 – Historique
• 1996 : 10 000 000 ordinateurs connectés
• 2000 : explosion d’internet
• 2012 : 2 milliards d’utilisateurs dans le monde
Cours développement web Copyright © 2012, ESI
16
Module 1 - Introduction Mostefai Mohammed Amine

17. Section 3 – Fonctionnement
Cours développement web Copyright © 2012, ESI
17
Module 1 - Introduction Mostefai Mohammed Amine

18. De quoi ai-je besoin pour me connecter ?
3 – Fonctionnement
Navigateur Dispositif
+ +
Serveur web Contenu
+
Cours développement web Copyright © 2012, ESI
18
Module 1 - Introduction Mostefai Mohammed Amine

19. Comment ça se passe ?
3 – Fonctionnement
1. L’utilisateur tape une URL en utilisant des termes familiers
(par exemple nomdelentreprise.com)
2. Le navigateur contacte un serveur dit de nom qui traduit
l’adresse tapée en une adresse IP
3. Le navigateur utilise l’adresse IP derrière pour contacter le
serveur et télécharger le contenu
Cours développement web Copyright © 2012, ESI
19
Module 1 - Introduction Mostefai Mohammed Amine

20. Le protocole TCP/IP
3 – Fonctionnement
• C’est un projet de défense nationale US destiné à connecter des
réseaux de réseaux
• TCP/IP est composée de la couche IP et de la couche TCP
• La transition de données entre les machines se fait par
commutation de paquet
• IP (Internet Protocol) permet de faire transiter les paquets d’un
nœud vers un autre où chaque nœud est représenté par une
adresse IP
• TCP se charge de vérifier les données reçues
Cours développement web Copyright © 2012, ESI
20
Module 1 - Introduction Mostefai Mohammed Amine

21. Le protocole HTTP
3 – Fonctionnement
• HTTP (HyperText Transport Protocol) est le protocole
permettant d’envoyer et de recevoir des documents sur le web
• La communication se fait en envoyant et en recevant des
messages
Cours développement web Copyright © 2012, ESI
21
Module 1 - Introduction Mostefai Mohammed Amine

22. Le protocole HTTP
3 – Fonctionnement
Exemple de requête HTTP
GET www.monsite.com HTTP/1.1
Accept:*/*
Accept-Language: en-gb
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0)
Host: www.httpwatch.com
Connection: Keep-Alive
Cours développement web Copyright © 2012, ESI
22
Module 1 - Introduction Mostefai Mohammed Amine

23. Le protocole HTTP
3 – Fonctionnement
Exemple de réponse HTTP
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Mon, 04 Oct 2004 12:04:43 GMT
X-Powered-By: ASP.NET
X-AspNet-Version: 1.1.4322
Cache-Control: no-cache
Pragma: no-cache Expires: -1
Content-Type: text/html; charset=utf-8
Content-Length: 8307
<html>
<head>
...
Cours développement web Copyright © 2012, ESI
23
Module 1 - Introduction Mostefai Mohammed Amine

24. Section 4 – Les outils
Cours développement web Copyright © 2012, ESI
24
Module 1 - Introduction Mostefai Mohammed Amine

25. De quoi avons-nous besoin ?
4 – Outils
1. Un éditeur web (par exemple notepad, Aptana, …)
2. Un serveur web (par exemple WebMatrix, apache, …)
3. Des éditeurs d’image (par exemple Photoshop
4. Un client FTP (par exemple FileZilla)
Cours développement web Copyright © 2012, ESI
25
Module 1 - Introduction Mostefai Mohammed Amine

26. Exercice 1
4 – Outils
1. Installer les outils : WebMatrix, Aptana
2. Héberger la première page créée avec Aptana
Cours développement web Copyright © 2012, ESI
26
Module 1 - Introduction Mostefai Mohammed Amine

27. Exercice 2 (Optionnel)
4 – Outils
1. Installer un serveur FTP
2. Mettre à jour le site en utilisant le client FTP
Cours développement web Copyright © 2012, ESI
27
Module 1 - Introduction Mostefai Mohammed Amine

28. Bibliographie
• Internet 2011 in numbers :
http://royal.pingdom.com/2012/01/17/internet-2011-in-numbers/
• Histoire d’internet, http://fr.wikipedia.org/wiki/Histoire_d'Internet
• Le réseau ARPANet: http://fr.wikipedia.org/wiki/ARPANET
Cours développement web Copyright © 2012, ESI
28
Module 1 - Introduction Mostefai Mohammed Amine