Vous êtes sur la page 1sur 51

Technologies et

Développement Web

Cours1 – Introduction au développement web

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Objectifs du module 2

 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
 Découvertes des outils de développement web et Aptana Studio

Cours1 – Introduction au développement web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Plan du module 3

 Le Web en Chiffres
 Historique
 Technologies Web

Cours1 – Introduction au développement web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

4
Cours1 – Introduction au développement web

Section 1 : Le Web En Chiffres

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Des chiffres qui donnent le tournis ! 5

 Plus d’informations ont été produites ces 30 dernières années

Cours1 – Introduction au développement web


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é !

Section 1 : Le Web en Chiffres Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Des chiffres ! 6

 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/

Cours1 – Introduction au développement web


 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

Section 1 : Le Web en Chiffres Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Encore des chiffres ! 7

 2 milliards d’abonnés mobiles

Cours1 – Introduction au développement web


 85% des abonnés disposent d’un navigateur internet sur leur
mobile
 1 billion de vidéos sur youtube

Section 1 : Le Web en Chiffres Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Des statistiques ! 8

Cours1 – Introduction au développement web


Section 1 : Le Web en Chiffres Copyright © 2013, Mostefai Mohammed Amine
Technologies et Développement Web

Encore des statistiques ! 9

Cours1 – Introduction au développement web


Section 1 : Le Web en Chiffres Copyright © 2013, Mostefai Mohammed Amine
Technologies et Développement Web

Cours1 – Introduction au développement web

10
Section 2 : Historique

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Dates clé 11

 1958 : création du premier modem pouvant envoyer des


données binaires en utilisant une simple ligne téléphonique
(BELL)

Cours1 – Introduction au développement web


 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
Section 2 : Historique
Technologies et Développement Web

Dates clé - suite 12

 1973 : L’Angleterre et la Norvège rejoignent le réseau avec 1 ordinateur


pour chaque pays

Cours1 – Introduction au développement web


 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
Section 2 : Historique
Technologies et Développement Web

Dates clé - suite 13

 1996 : 10 000 000 ordinateurs connectés


 2000 : explosion d’internet

Cours1 – Introduction au développement web


 2012 : 2 milliards d’utilisateurs dans le monde

Section 2 : Historique
Technologies et Développement Web

Cours1 – Introduction au développement web

14
Section 3 : Technologies Web

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Architecture web 15

Cours1 – Introduction au développement web


Source : webreference.com

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Résolution 16

Cours1 – Introduction au développement web


Source : flossmanuals

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le protocole TCP/IP 17

 C’est un projet de défense nationale US destiné à connecter des réseaux de

Cours1 – Introduction au développement web


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

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le protocole HTTP 18

 HyperText Transfer Protocol

Cours1 – Introduction au développement web


 Protocole utilisé pour la communication web
 Utilise TCP comme couche de transport
 Port 80 par défaut
 Le client « normal » de HTTP est le navigateur

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

La communication HTTP 19

Requête HTTP

Cours1 – Introduction au développement web


Réponse HTTP
<HTML></HTML>

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Requête HTTP - Exemple 20

GET /mapage.html HTTP/1.1


Connection: Keep-Alive

Cours1 – Introduction au développement web


User-Agent: Mozilla/5.0
Referer:http://formation-web.dz
Pragma: no-cache
Cache-control: no-cache
Accept: text/html, image/jpeg, image/png, text/*, image/*, */*
Accept-Encoding: x-gzip, x-deflate, gzip, deflate, identity
Accept-Charset: iso-8859-1, utf-8;q=0.5, *;q=0.5
Accept-Language: fr, en
Host: formation-web.dz

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Requête HTTP – Principales constituantes 21

Mot clé / Constituante Description


Méthode Méthode de communication avec le serveur. La méthode par défaut (GET)
demande une ressource sur le web. La méthode POST permet d’envoyer des

Cours1 – Introduction au développement web


données à partir de formulaires.
Host Le site web concernant la requête
Referer l’URI du document qui a donné un lien sur la ressource demandée. Très utile pour
établir des statistiques sur les visites
User-Agent Logiciel utilisé pour émettre la requête. Très souvent, il s’agit du navigateur.
Connection: Keep-Alive Ne pas couper la connexion après avoir rendu la réponse (1.1)
Pragma-nocache / Ne pas utiliser le cache
Cache-control
Accept Les formats acceptés par le client
Accept-encoding Les encodage acceptés par le client

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Requête HTTP – Principales constituantes, suite 22

Mot clé / Constituante Description


Accept-Charset Les encodages de texte supportés (par exemple UTF8)

Cours1 – Introduction au développement web


Accept-Language Les langues acceptées

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Méthodes HTTP 23

Méthodes Description
GET La plus utilisée, permet d’accéder à des ressources web

Cours1 – Introduction au développement web


POST Permet d’envoyer des données à partir de formulaires. Plus sécurisée que GET.
Permet aussi de joindre des fichiers.
HEAD Permet d’avoir des informations sur une ressource web sans la télécharger.
PUT Permet de remplacer une ressource dans le serveur
DELETE Permet de supprimer une ressource sur le serveur
CONNECT Permet de se connecter à un serveur

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Réponse HTTP - Exemple 24

HTTP/1.1 200 OK (Statut)


Date: Tue, 22 Jun 2004 13:18:15 GMT (Date)
Server: Apache/0.8.4 (Serveur)

Cours1 – Introduction au développement web


Last-Modified: Tue, 22 Jan 2013 17:15:43 GMT (Date modification)
Accept-Ranges: bytes (Transfert en paquets)
Content-Length: 142 (Taille du contenu)
Keep-Alive: timeout=15, max=2000 (Maintien de la connexion)
Connection: Keep-Alive (Maintien de la connexion)
Content-Type: text/html (Type de contenu)

<html> (Contenu)
<body>
<p>Bonjour, dans la formation </p>
</body>
<html>
Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine
Technologies et Développement Web

Réponse HTTP – Principales constituantes 25

Mot clé / Constituante Description


Ligne de statut Statut de l’opération qui s’est déroulée dans le serveur. Contient la version du
protocole et code de statut.

Cours1 – Introduction au développement web


Date La date dans laquelle la réponse a été générée
Server Le serveur qui a traité la requête (Apache / IIS)
Maintien de la connexion Maintien de la connexion avec le serveur et avec quelle durée
Type de contenu Contenu intégré dans la réponse (HTML, Images,…)
Accept-Ranges Transfert par morceaux

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Réponse HTTP – Codes Statuts 26

Code Statut Description


1xx Codes d’information

Cours1 – Introduction au développement web


100 Attente de la suite de la requête
101 Acceptation du changement de protocole
118 Délai imparti à l’opération dépassé
2xx Succès
200 OK : Requête traitée avec succès
201 Created : Requête traitée avec succès avec création d’une ressource
202 Accepted : Requête traitée mais sans garantie de résultat
203 Non-Authoritative : Information retournée mais générée par une source non
certifiée

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Réponse HTTP – Codes Statuts 27

Code Statut Description


204 No Content : Requête traitée avec succès mais pas d’information à renvoyer

Cours1 – Introduction au développement web


205 Reset Content : Requête traitée avec succès, la page courante peut être
effacée
206 Partial Content : Une partie seulement de la requête a été transmise
3xx Codes de redirection
300 Multiple Choices : L’URI demandée se rapporte à plusieurs ressources
301 Moved Permanently : Ressource déplacée de façon permanente
302 Found Document : déplacé de façon temporaire
303 See Other : La réponse à cette requête est ailleurs
304 Not Modified : Document non modifié depuis la dernière requête

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Réponse HTTP – Codes Statuts 28

Code Statut Description


305 Use Proxy : La requête doit être réadressée au proxy

Cours1 – Introduction au développement web


307 Temporary Redirect : La requête doit être redirigée temporairement vers l’URI
spéecifiée
310 Too many Redirect : La requête doit être redirigée de trop nombreuses fois, ou est
victime d’une boucle de redirection
324 Empty response : Le serveur a mis fin à la connexion sans envoyer de données
4xx Codes d’erreur
400 Bad Request : La syntaxe de la requête est erronée
401 Unauthorized : Une authentification est nécessaire pour accéder à la ressource
403 Forbidden : L’authentification est refusée. Contrairement à l’erreur 401, aucune
demande d’authentification ne sera faite
404 Not Found : Ressource non trouvée

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Réponse HTTP – Codes Statuts 29

Code Statut Description


405 Method Not Allowed : Méthode de requête non autorisée

Cours1 – Introduction au développement web


406 Not Acceptable : Toutes les r´eponses possibles seront refusées
408 Request Time-out : Temps d’attente d’une réeponse du serveur écoulé
409 Conflict : La requête ne peut pas être traitée `a l’état actuel
410 Gone : La ressource est indisponible et aucune adressede redirection n’est connue
412 Precondition Failed : Préconditions envoyées par la requête non-vérifiées
414 Request-URI Too Long : URI trop longue
415 Unsupported Media Type : Format de requête non-supporté
416 Requested range unsatisfiable : Champs d’entête de requête incorrects

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Réponse HTTP – Codes Statuts 30

Code Statut Description


5xx Erreurs de serveur

Cours1 – Introduction au développement web


500 Internal Server Error : Erreur interne du serveur
501 Not Implemented : Fonctionnalité non supportée par le serveur
502 Bad Gateway or Proxy Error : Mauvaise réponse envoyée `a un serveur intermédiaire
503 Service Unavailable : Service temporairement indisponible ou en maintenance
504 Gateway Time-out : Temps d’attente d’une réponse d’un serveur à un serveur intermédiaire
écoulé
505 HTTP Version not supported : Version HTTP non gérée par le serveur
509 Bandwidth Limit Exceeded : Utilisé par de nombreux serveurs pour indiquer un
déepassement de quota de bande passante

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Types de contenu 31

 Le web permet d’accéder à des centaines de types de contenu

Cours1 – Introduction au développement web


 Le serveur web et le client web (navigateur) utilisent des codifications
permettant d’identifier et de traiter ces types
 Ces types peuvent êtres du HTML, du texte, des images,…

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Types de contenu / Exemples 32

Type de contenu Extension


text/html html htm

Cours1 – Introduction au développement web


image/jpeg jpeg jpg jpe
audio/mpeg mpeg mp2 mp3
video/mpeg mpeg mpg mpe

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le Langage HTML 33

 Un document HTML contient un texte ordinaire qui contient des balises

Cours1 – Introduction au développement web


 Un document HTML contient donc des balises et du contenu
 Les balises indiquent au navigateur comment afficher et traiter le contenu
 Les balises peuvent pointer sur des ressources externes telles que des
images ou d’autres documents
 Un document HTML peut être créé par un simple éditeur de texte mais
des outils dédiés tels que Dreamweaver, Aptana Studio ou Visual Studio
sont plus adéquats

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le Langage HTML - Exemple 34

<!DOCTYPE html>

Cours1 – Introduction au développement web


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>Bienvenue dans la formation</p>
</body>
</html>

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le Langage CSS 35

 Le langage CSS permet de définir comment les éléments HTML sont

Cours1 – Introduction au développement web


présentés
 CSS s’occupe essentiellement de l’affichage et de la disposition des
éléments

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le Langage CSS- Exemple 36

body {

Cours1 – Introduction au développement web


margin: 0;
padding: 0;
}

div.myClass {
color: aqua;
}

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le Langage JavaScript 37

 Le langage Javascript est un langage côté client (exécuté par le navigateur)

Cours1 – Introduction au développement web


qui permet d’effectuer certaines fonctions telles que la manipulation
d’éléments HTML, l’ajout d’effets, la validation ou l’invocation de services
web
 Plusieurs bibliothèques Javascript très populaires telles que JQuery ou
Knockout.js

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Le Langage Javascript - Exemple 38

function sayHello() {

Cours1 – Introduction au développement web


alert('hello');
}

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Noms de domaine 39

 L’accès à un site web via une URL requiert l’acquisition d’un nom de

Cours1 – Introduction au développement web


domaine
 Plusieurs fournisseurs proposent des noms de domaine généralistes tels
que .com, .net et .org
 L’acquisition de noms de domaines régionaux (.dz) dépend des lois et des
procédures en vigueur de la région
 Les services WHOIS permettent de connaître les propriétaires d’un nom
de domaine existant

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Web Dynamique 40

 Un document HTML est un document fixe qui ne change de contenu que par
une intervention d’un développeur web
 Les sites web faits exclusivement en HTML sont dits statiques

Cours1 – Introduction au développement web


 Les sites statiques ne s’adaptent pas à beaucoup de situations : par exemple
refléter le contenu d’une base de données ou adapter le contenu à un profil
 Le web dynamique est un processus consistant en la génération de
documents HTML par des scripts ou des programmes au lieu d’être créés
manuellement
 Ces scripts sont dits scripts côté serveur
 ASP.NET et PHP sont des langages permettant le développement de web
dynamique
Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine
Technologies et Développement Web

Web Dynamique - Architecture 41

Script
Script
/ App

Cours1 – Introduction au développement web


Requête SQL

Environnement
Serveur web
Réponse
HTML Données

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Introduction à AJAX 42

 Asynchronous Javascript And XML


 AJAX est un ensemble de technologies intégrant le web 2.0

Cours1 – Introduction au développement web


 AJAX permet d’augmenter la réactivité des pages et des
applications web
 Entre autres, AJAX permet le rafraîchissement partiel des pages et
l’invocation asynchrone des services web*
 AJAX est indépendant des plateformes, des navigateurs et des
langages de programmation

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Requêtes AJAX 43

 Ajax crée des requêtes de type « XMLHttpRequest » permettant le


dialogue avec le serveur

Cours1 – Introduction au développement web


 Plusieurs formats peuvent être utilisés pour les données échangées
entre serveurs et clients : XML ou JSON (JavaScript Object
Notation)
 JSON est de plus en plus apprécié par la communauté des
développeurs car il permet aux réponses d’être directement
manipulées par JavaScript et réduit la taille des données

Section 3 : Technologies Web Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Cours1 – Introduction au développement web

44
Section 4 : Outils

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Outils Utilisés 45

 Un éditeur web (par exemple notepad, Aptana, …)

Cours1 – Introduction au développement web


 Un serveur web (par exemple WebMatrix, apache, …)
 Des éditeurs d’image (par exemple Photoshop
 Un client FTP (par exemple FileZilla)

Section 4 : Outils Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Cours1 – Introduction au développement web

46
Section 5 : Travaux Pratiques

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

TP1 47

 En utilisant votre navigateur usuel, suivez les requêtes et

Cours1 – Introduction au développement web


réponses HTTP qui ont lieu en utilisant votre site préféré

Section 5 : Travaux Pratiques Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

TP2 48

 Installez et découvrez les fonctionnalités de Aptana Studio

Cours1 – Introduction au développement web


 Créez une page web contenant du texte simple

Section 5 : Travaux Pratiques Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

TP3 49

 Installez un serveur FTP (FileZilla Server)

Cours1 – Introduction au développement web


 Installez un serveur FTP client
 Effectuez des transferts FTP entre le client et le serveur

Section 5 : Travaux Pratiques Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Cours1 – Introduction au développement web

50
Bibliographie

Copyright © 2013, Mostefai Mohammed Amine


Technologies et Développement Web

Bibliographie 51

 Introduction à HTTP, Patrick Cégielski, http://www.lacl.fr/cegielski/serveur/ch3.pdf

Cours1 – Introduction au développement web Copyright © 2013, Mostefai Mohammed Amine