Technologie Web
Le 5 Novembre 2010
Présentation
Benoît Simard
• Sorti de l'IMA en 2007 (IMA 9)
• Smile (SSII / SSLL)
• 3 ans
• Spécialisé dans :
• Le web
• L...
Plan
1. Internet c'est quoi ?
2. Et le web ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur Apache
6. Le ser...
Plan
 1. Internet c'est quoi ?
2. Le web, c'est quoi alors ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur...
Internet c'est quoi ?
Vos réponses ?
Internet c'est quoi ?
Ne pas confondre Internet et Web
Le web n'est qu'une des applications
d'Internet
Internet c'est quoi ?
Voici d'autres applications d'Internet :
• Les mails (IMAP / SMTP / POP)
• La messagerie Instantanée...
Pour la petite histoire
• Le terme internet existe depuis 1983
• Internet découle d'ARPANET (1969) :
• Reliait des ordinat...
Pour la petite histoire
Internet c'est quoi ?
Internet c'est du client / Serveur
Client
• Client : est une application qui envoie des
demandes à une application distante (serveur).
• thunderbird
• fileZi...
Serveur
• Serveur : est une application dont le rôle est de
répondre de manière automatique à des
demandes clients
• Postf...
Client léger
• Client
• Ne traite que la couche de présentation
• Ne fait aucun traitement (ou peu)
• Pas de logiciel spéc...
Client léger
Client de rhabillage
• Client
• Ne traite que la couche de présentation
• Ne fait aucun traitement (ou peu)
• Pas de logic...
Client de rhabillage
Client lourd
• Client
• Fait tout le traitement
• Logiciel spécifique
• Pour les upgrades de version, on doit mettre à jou...
Client lourd
Client / Serveur
Beaucoup d'autres
architectures ...
Client / Serveur
Internet c'est quoi ?
« Internet est un réseau
informatique qui utilise le protocole
de communication (i.e. réseau) IP
(In...
La pile réseau
1. Physique
2. Liaison
3. Réseau (IP) : construit une voie de communication
entres les machines (ce sont le...
Le protocole réseau IP
• permettant un service d'adressage unique pour
l'ensemble des terminaux connectés
• Ne se préoccup...
Les protocoles de transport
TCP & UDP
TCP UDP
Mode connecté ?
Nécessite d'établir une
connexion avant
d'envoyer des paquet...
Communication
client / serveur
Communication
client / serveur
Domain Name System
« service permettant d'établir une
correspondance entre une adresse
IP et son nom de domaine »
Les info...
Plan

1. Internet c'est quoi ?
2. Le web, c'est quoi alors ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur...
Le web, c'est quoi ?
• C'est un système hypertexte qui permet de
consulter avec un navigateur des pages d'un
site
• le web...
La base du web
• Architecture Client (léger) / Serveur
• Basé sur le protocole Http
URL, URN & URI
• URL : Uniform Ressource Locator
• Spécification de la localisation d’une ressource de manière
unique
• URN...
URL
• Format :
• <protocole>://<serveur>:<port>/<chemin>/<ressour
ce>
• Attention : les caractères spéciaux doivent être
e...
Les ressources web
• Ressources Statiques
• HTML
• Images
• Son
• Vidéo
• Ressources dynamiques
• Coté client : applet, ja...
Le web c'est quoi ?
Et le web 2.0, c'est quoi ?
Plan

1. Internet c'est quoi ?
2. Le web, c'est quoi alors ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur...
Le protocole HTTP
• Http://www.w3.org
• Hyper transfer protocole
• Stateless
• Protocole orienté caractères :
• Les requêt...
Le protocole HTTP
• Stateless
• Le résultat d'une requête ne dépend pas de
l'état du serveur
• Si on exécute plusieurs foi...
Le protocole HTTP
Request : GET www.google.fr/ HTTP/1.1
Response :
HTTP/1.1 200 OK ← Version du protocole et code de retou...
Le protocole HTTP
Request line : METHODE URI Version HTTP
Les méthodes
• OPTIONS : demande les méthodes utilisables sur l'URI
• HEAD : demande uniquement les information de l'URI
•...
Les codes de retrour
• 5 Classes de retour (Status-Code)
• 1XX : Information
• 2XX : Succès
• 3XX : Redirection
• 4XX : Er...
Les éléments de la requête / de
la réponse
• Cache-Control : définit la politique de cache pour la ressource
• Connection :...
Les éléments de la requête / de
la réponse
• Allow : liste les méthodes autorisées
• Content-Encoding : indique l’encodage...
Les éléments de la requête
●
Accept : définit les types de médias acceptés
●
Accept-Charset : spécifie les jeux de caractère...
Les codes de retour
• 200 : OK
• 301 : Moved permanently
• 302 : Moved temporarily
• 400 : Bad Request
• 401 : Unauthorize...
Les éléments de la réponse
• Etag : identifiant d'une ressource dans la cache
(un pour chaque version de la ressource)
• L...
Le protocole HTTP
Le client exprime ses capacités
Le serveur retourne la ressource la
plus adéquate
• Langue : fr, en
• Co...
Le protocole HTTP 1.1
• Ne gère pas les sessions !
• => On utilise les cookies
• Fichiers textes stockés sur le disque dur...
Le protocole HTTP 1.1
• N'est pas sécurisé !
• => protocole HTTPS
• Vérification de l'identité d'un site par un
certificat...
L'architecture REST
• C'est une manière de construire une
application web
• Ce n'est pas un protocole ou un
format
• C'est...
L'architecture REST
• L'URI est importante
• 1 URI = 1 ressource / action
• Stateless
• Chaque opération est auto-suffisan...
Prochain SlideShare
Chargement dans…5
×

technologie web

3 444 vues

Publié le

Cours sur les technologies web part 1
Internet c'est quoi ?
Et le web ?
Le protocole HTTP
Architecture REST

Publié dans : Formation
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 444
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
128
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

technologie web

  1. 1. Technologie Web Le 5 Novembre 2010
  2. 2. Présentation Benoît Simard • Sorti de l'IMA en 2007 (IMA 9) • Smile (SSII / SSLL) • 3 ans • Spécialisé dans : • Le web • Le logiciel libre • Chef de projet technique
  3. 3. Plan 1. Internet c'est quoi ? 2. Et le web ? 3. Le protocole HTTP 4. HTML, CSS & Javascript 5. Le serveur Apache 6. Le serveur Tomcat 7. Les applications web en Java 8. Le modèle MVC 9. Exemple de framework
  4. 4. Plan  1. Internet c'est quoi ? 2. Le web, c'est quoi alors ? 3. Le protocole HTTP 4. HTML, CSS & Javascript 5. Le serveur Apache 6. Le serveur Tomcat 7. Les applications web en Java 8. Le modèle MVC 9. Exemple de framework
  5. 5. Internet c'est quoi ? Vos réponses ?
  6. 6. Internet c'est quoi ? Ne pas confondre Internet et Web Le web n'est qu'une des applications d'Internet
  7. 7. Internet c'est quoi ? Voici d'autres applications d'Internet : • Les mails (IMAP / SMTP / POP) • La messagerie Instantanée (XMPP) • Transfert de fichier (FTP) • Serveur de fichier (SAMBA/CIFS) • VOIP
  8. 8. Pour la petite histoire • Le terme internet existe depuis 1983 • Internet découle d'ARPANET (1969) : • Reliait des ordinateurs d'université • Sponsorisé par la DARPA (Defense Advanced Reseach Projects Agency) • Mythe : permettre au réseaux militaires de continuer à fonctionner malgré une attaque massive. • 1969 : 4 ; 1971 : 15 ; 1972 : 37
  9. 9. Pour la petite histoire
  10. 10. Internet c'est quoi ? Internet c'est du client / Serveur
  11. 11. Client • Client : est une application qui envoie des demandes à une application distante (serveur). • thunderbird • fileZila • Firefox • Gtalk
  12. 12. Serveur • Serveur : est une application dont le rôle est de répondre de manière automatique à des demandes clients • Postfix / imapd • proFTPD • Apache • Jabber
  13. 13. Client léger • Client • Ne traite que la couche de présentation • Ne fait aucun traitement (ou peu) • Pas de logiciel spécifique • Serveur • Serveur puissant ! Il fait tout et pour tout le monde • Pour un upgrade de version, il n'y a que le serveur à mettre à jour
  14. 14. Client léger
  15. 15. Client de rhabillage • Client • Ne traite que la couche de présentation • Ne fait aucun traitement (ou peu) • Pas de logiciel spécifique • Serveur • Serveur puissant ! Il fait tout et pour tout le monde • Pour un upgrade de version, il n'y a que le serveur à mettre à jour • Possède aussi une IHM
  16. 16. Client de rhabillage
  17. 17. Client lourd • Client • Fait tout le traitement • Logiciel spécifique • Pour les upgrades de version, on doit mettre à jour tous les clients installés ! • Serveur • Serveur accède aux données • Traite l'accès aux données • Doit gérer les transactions
  18. 18. Client lourd
  19. 19. Client / Serveur Beaucoup d'autres architectures ...
  20. 20. Client / Serveur
  21. 21. Internet c'est quoi ? « Internet est un réseau informatique qui utilise le protocole de communication (i.e. réseau) IP (Internet Protocol) » Internet est basé sur le TCP/IP
  22. 22. La pile réseau 1. Physique 2. Liaison 3. Réseau (IP) : construit une voie de communication entres les machines (ce sont les routes) 4. Transport (TCP & UDP) : gère la transmission des données. 5. Session : gère les transactions (absent dans le monde IP, sauf SIP) 6. Présentation : converti les données applicatives en données transmises 7. Application (HTTP) : est le point d'entrée aux services réseaux.
  23. 23. Le protocole réseau IP • permettant un service d'adressage unique pour l'ensemble des terminaux connectés • Ne se préoccupe pas du contenu des paquets • Ipv4 • 127.0.0.1 (32bits) • ~ 4 milliards d'adresses (4.10^9) • Moins de 5% d'adresse Ipv4 depuis ce mois-ci • Ipv6 • 2001:0db8:0000:85a3:0000:0000:ac1f:8001 (128bits) • 4.10^38
  24. 24. Les protocoles de transport TCP & UDP TCP UDP Mode connecté ? Nécessite d'établir une connexion avant d'envoyer des paquets Non Protocole fiable ? Garantie de livraison Numéro de séquence Contrôle des données Aucune garantie de livraison Aucune garantie de séquence Contrôle des données Résumé Protocole très fiable. On est sur de la transmission des données. Transport lent et consommateur de ressources Protocole non fiable, on est pas sur de la transmission des données, ni de leur ordre d'arrivée Transport rapide et consomme peu de ressources.
  25. 25. Communication client / serveur
  26. 26. Communication client / serveur
  27. 27. Domain Name System « service permettant d'établir une correspondance entre une adresse IP et son nom de domaine » Les informations de DNS sont redondantes sur Internet (beaucoup de cache) !
  28. 28. Plan  1. Internet c'est quoi ? 2. Le web, c'est quoi alors ? 3. Le protocole HTTP 4. HTML, CSS & Javascript 5. Le serveur Apache 6. Le serveur Tomcat 7. Les applications web en Java 8. Le modèle MVC 9. Exemple de framework
  29. 29. Le web, c'est quoi ? • C'est un système hypertexte qui permet de consulter avec un navigateur des pages d'un site • le web quoi ! • Un système hypertexte contient des noeuds liés entre eux par des hyperliens
  30. 30. La base du web • Architecture Client (léger) / Serveur • Basé sur le protocole Http
  31. 31. URL, URN & URI • URL : Uniform Ressource Locator • Spécification de la localisation d’une ressource de manière unique • URN : Uniform Ressource Name • Mécanisme de nommage des ressources • urn:<Namespace>:<SpecificString> • Namespace : identificateur de nommage (ex : isbn) • SpecificString : chaîne de caractères spécifique désignant la ressource de manière unique • URI : Uniform Resource Identifier • URI = URL + URN • En pratique, la forme d’URI la plus utilisée est l’URL
  32. 32. URL • Format : • <protocole>://<serveur>:<port>/<chemin>/<ressour ce> • Attention : les caractères spéciaux doivent être encodés ! • # = %23 | = %20 | / = %2F • Exemple : • http://www.ima.uco.fr • ftp://ftp.uco.fr • mailto://contact@bsimard.com
  33. 33. Les ressources web • Ressources Statiques • HTML • Images • Son • Vidéo • Ressources dynamiques • Coté client : applet, javascript, ActiveX, • Coté serveur : CGI, J2EE, PHP, .Net, ...
  34. 34. Le web c'est quoi ? Et le web 2.0, c'est quoi ?
  35. 35. Plan  1. Internet c'est quoi ? 2. Le web, c'est quoi alors ? 3. Le protocole HTTP 4. HTML, CSS & Javascript 5. Le serveur Apache 6. Le serveur Tomcat 7. Les applications web en Java 8. Le modèle MVC 9. Exemple de framework
  36. 36. Le protocole HTTP • Http://www.w3.org • Hyper transfer protocole • Stateless • Protocole orienté caractères : • Les requêtes et réponses ne sont que des caractères • Exemple avec un telnet / netcat • GET www.google.fr HTTP/1.1
  37. 37. Le protocole HTTP • Stateless • Le résultat d'une requête ne dépend pas de l'état du serveur • Si on exécute plusieurs fois une même requête, on obtient la même réponse
  38. 38. Le protocole HTTP Request : GET www.google.fr/ HTTP/1.1 Response : HTTP/1.1 200 OK ← Version du protocole et code de retour Date: Mon, 01 Nov 2010 17:25:58 GMT ← la date de la réponse Expires: -1 ← la date d'expiration de la ressource Cache-Control: private, max-age=0 ← politique de cache Content-Type: text/html; charset=ISO-8859-1 ← le type et l'encodage de la réponse Set-Cookie: PREF=ID=e02fe0bed019bbc4:FF=0:TM=1288632358:LM=1288632358:S=UUr mM8ba6F1ynQNc; expires=Wed, 31-Oct-2012 17:25:58 GMT; path=/; domain=.google.fr <- Création d'un cookie
  39. 39. Le protocole HTTP Request line : METHODE URI Version HTTP
  40. 40. Les méthodes • OPTIONS : demande les méthodes utilisables sur l'URI • HEAD : demande uniquement les information de l'URI • TRACE : Fait un echo de la requête envoyé • GET : Demande d'info sur l'URI • POST : Demande de données à traiter par l'URI • PUT : Demande d'enregistrement de données à l'URI • DELETE : Demande de suppression les données pointées par l'URI
  41. 41. Les codes de retrour • 5 Classes de retour (Status-Code) • 1XX : Information • 2XX : Succès • 3XX : Redirection • 4XX : Erreur client • 5XX : Erreur serveur
  42. 42. Les éléments de la requête / de la réponse • Cache-Control : définit la politique de cache pour la ressource • Connection : paramètre de gestion de la connexion (ex : Connection: close) • Date : date du message • Pragma : utilisé pour spécifier des comportements aux serveurs intermédiaires (proxy) • Transfer-Encoding : types de transformations appliquées au corps du message • Upgrade : spécifie quels autres protocoles supporte le client • Via : indique les intermédiaires par lesquels est passée la requête
  43. 43. Les éléments de la requête / de la réponse • Allow : liste les méthodes autorisées • Content-Encoding : indique l’encodage utilisé pour la ressource (complément au type de média du Content-Type) • Content-Language : défini la langue utilisée • Content-length : taille du corps du message • Content-Location : donne la véritable URI de la ressource si celle-ci a été trouvée grâce à une autre URI • Content-Type : le type du média (ex : text/html ; charset=ISO- 8859-1) • Expires : date d’expiration de la ressource • Last-Modified : date de dernière modification
  44. 44. Les éléments de la requête ● Accept : définit les types de médias acceptés ● Accept-Charset : spécifie les jeux de caractères acceptés ● Accept-Encoding : spécifie les types de transformations (compressions) du message acceptés ● Accept-Language : spécifie les langues acceptées ● Host : spécifie le serveur (et le port) pour la requête ● Referer : spécifie l’URI à l’origine de la requête ● User-Agent : contient l’identifiant du navigateur client
  45. 45. Les codes de retour • 200 : OK • 301 : Moved permanently • 302 : Moved temporarily • 400 : Bad Request • 401 : Unauthorized • 403 : Forbidden • 404 : Not Found • 500 : Internal Server Error • 502 : Bad Gateway • 504 : Gateway Time-out • 503 : Service Unvailable
  46. 46. Les éléments de la réponse • Etag : identifiant d'une ressource dans la cache (un pour chaque version de la ressource) • Location: redirige la requête vers une autre URI (ex : Status-Code : 3XX) • Server: indique le type du serveur web répondant à la requête
  47. 47. Le protocole HTTP Le client exprime ses capacités Le serveur retourne la ressource la plus adéquate • Langue : fr, en • Content Type (ou Type MIME) : text/css • Charset : utf8, ISO-8859 • Encodage : gzip
  48. 48. Le protocole HTTP 1.1 • Ne gère pas les sessions ! • => On utilise les cookies • Fichiers textes stockés sur le disque dur du client • Informations stockées en clair • Date d'expiration fixé par le serveur
  49. 49. Le protocole HTTP 1.1 • N'est pas sécurisé ! • => protocole HTTPS • Vérification de l'identité d'un site par un certificat • Les données sont scriptées
  50. 50. L'architecture REST • C'est une manière de construire une application web • Ce n'est pas un protocole ou un format • C'est un style d'architecture d'application • Respecte le protocole HTPP
  51. 51. L'architecture REST • L'URI est importante • 1 URI = 1 ressource / action • Stateless • Chaque opération est auto-suffisante • Respecte le protocole HTTP • Respecte les méthodes • GET = SELECT • PUT = UPDATE • POST = INSERT • DELETE = DELETE

×