Technologies Web

1. Technologies Web Fabrice.Huet@sophia.inria.fr Licence Miage 2005-2006

2. Objectifs du cours • Donner une vue d’ensemble du web et de ses technologies • Aborder l’architecture d’un point de vue logique • Différencier les technologies client et serveur • Présenter un large spectre de technologies • Parler brièvement des web services

3. Plan • Bref présentation d’Internet et du www • Histoire d’Internet • Le W3C • Architecture et logiciels pour le web • Clients web • Serveurs web • Proxy Cache • CDN • HTTP • Technologies côté clients • HTML • CSS • JavaScript • Applets • Technologies côté serveur • Cookies • CGI • PHP • ASP/ASP.NET • Servlets et JSP • Moteurs de recherche et Web Services

4. Brève présentation d’Internet et du www

5. Histoire d’Internet • 1962: étude pour la création d’un réseau pour commander l’infrastructure nucléaire américaine capable de résister a une attaque nucléaire • Choix d’un réseau par commutation de paquets • 1969: construction du premier réseau physique (4 machines, 50 kbps) • 1972: envoie du premier email (23 machines, 50kpbs) • 1973: création de TCP/IP • 1974: première utilisation du terme Internet • 1979: création d’Usenet • 1982: TCP/IP devient le standard d’Internet • 1983: Création du Domain Name System

6. Histoire d’Internet - 2 • 1986: création de l’IETF • 1990: création d’un système hypertext par Tim Berners-Lee • 1992: le CERN présente le World Wide Web • 1993: création de Mosaic, premier client pour le web • 1994: création du w3c • 1995: IE 1.0 • 1997: IE 4.0 sort, Netscape a 72%, IE 18% • 1998: Netscape jette l’éponge et se fait racheter par AOL • 1998: Netscape rend le code source de son navigateur disponible sous licence open source • 2002: Mozilla 1.0 • 2004: début de la deuxième guerre des browsers

7. W3C • World Wide Web Consortium • Crée en 1994 • 3 buts • Accès universel au web à travers des technologies tenant compte des différentes cultures, langues, handicapes… • Web sémantique • Web of trust: guider le développement du web en tenant compte des aspects légaux, commerciaux et sociaux liés aux nouvelles technologies. • Rôle du w3c • Interopérabilité: les spécifications des protocoles et langages du web doivent pouvoir fonctionner ensembles. • Évolution: s’assurer que de nouvelles technologies peuvent être ajoutées au web. • Standardisation: donner des Recommandations décrivant les technologies du web.

8. W3C - Organisation • Le w3c est accueilli par 3 organisations: • MIT (USA) • KEIO (Japon) • ERCIM (France) • 3 principes • Neutralité: appel aux commentaires publics • Coordination: travaux avec d’autres organismes (IETF, Unicode Consortium…) • Consensus: si possible, décision à l’unanimité sinon à la majorité. • Membres du w3c: • Financent le w3c • Participent au choix des technologies futures • Who’s who de l’informatique: Microsoft, Cisco, Oracle, Apple… • Des membres institutionnels (universités)

9. W3C – Domaines d’activité • Architecture • XML, Web Services, Internationalization, URI (Uniform Resource Identifier), DOM • Interaction • Compound Documents, Device independence, Graphics, HTML, CSS, MathML, Synchronized Multimedia, Voice Browser, XForms • Technologie et société • Semantic Web, Platform for Privacy Preference, XML signature, XML encryption, XML key management, Patent Policy and Standards • WAI: Web Accessibility Initiative • Politique et techniques pour l’accés à l’information des personnes handicapées

10. Architecture et logiciels pour le web

11. Fonctionnement du web Client Serveur Web Client Proxy Cache Client

12. Nom de domaine • Il est plus facile de se rappeler d’un mot/phrase que d’une série de chiffres… • Les noms de domaine sont des suites alphanumériques de caractères séparées par des points • Chaque segment a une taille/valeur arbitraire (mais limitée) • Le segment le plus significatif (le plus à droite) est normalisé • com, edu, gov, info, org, net, biz… • La transformation du nom de domaine en adresse IP se fait en contactant un serveur de domaine (DNS) • Les serveurs DNS sont organisés hiérarchiquement • Au sommet se trouvent les serveurs racine • Chaque organisation peut mettre en place son serveur

13. Nom de domaine - 2 Serveurs DNS Serveur Web IP? XXX.XXX.XXX.XXX http get Client http://www.google.com • Pour communiquer, un client doit connaître l’IP d’un serveur et un numéro de port • Cette adresse s’obtient auprès d’un serveur DNS (lookup)

14. Serveurs DNS . • Une requête DNS est envoyée au serveur du domaine dont dépend la machine • Si le serveur n’a pas autorité il demande à son parent… • Les réponses parcourent le chemin inverse et sont mises en cache com org gov biz fr amazon unice free inria

15. Les clients web • Variété des plateformes • Windows, Unix, PDA… • Variété des logiciels • IE, Firefox, Mozilla, Opera, Lynx… • Caractéristiques • Gestion d’HTML/XHTML • Gestion de CSS • Gestion de JavaScript • Gestion de plugins

16. Répartition des clients web • Source: http://www.w3schools.com/browsers/browsers_stats.asp

17. Répartition des clients web - 2 • Statistiques servent a cibler ses utilisateurs • Information globale, pas locale. Un site web attire un certain type d’utilisateur • La détection n’est pas forcément exacte • Utilisation du User-Agent • La répartition évolue en fonction du temps • Utiliser des technologies spécifiques à un navigateur est un pari sur l’avenir • Ne pas utiliser ces infos pour discriminer mais pour ajouter du contenu « Un homme s’est noyé en traversant une rivière profonde de 2 mètres en moyenne » W. I. E. Gates

18. Étapes pour la visualisation d’une page web • L’utilisateur entre une URL • Le client web effectue une résolution DNS pour avoir l’adresse du serveur • Il effectue la requête http et reçoit un document • Il analyse le document pour • Préparer l’affichage • Trouver les liens vers les images • Une requête est effectuée pour downloader les images • Cela peut se faire en parallèle ou séquentiellement

19. Serveurs Web • Programmes répondant aux requêtes des clients web • Souvent appelé serveur http ou httpd • Écoute sur le port 80 (convention) d’une machine • 2 types de ressources • Statiques: ne nécessitent pas de traitement côté serveur • Dynamiques: chaque demande de page nécessite des opérations spécifiques du serveur • Nombreux logiciels disponibles: • Apache • Internet Information Service • Sun Java System Web Server

20. Parts de marcher des serveurs(74 572 794 sites) • Apache: 70.98% • Microsoft IIS : 20.24% • Sun : 2.52% • Zeus : 0.78% Source: http://www.netcraft.com/

21. Le serveur Apache • Serveur HTTP/1.1 • Versions pour Windows, OS/2, Linux… • Utilise du pré-fork • Configuration du serveur en plaçant des directives dans un fichier texte. • httpd.conf (lu au démarrage) • .htaccess (accès au répertoire) • Syntaxe: Directive Valeur • Les directives s’appliquent à l’ensemble du serveur • Leur portée peut-être limitée avec des sections • <Directory>, <DirectoryMatch>, <Files>, <FilesMatch>, <Location>, <LocationMatch>, <VirtualHost>

22. Apache – Restriction d’accés • Directives Allow,Deny • from all • from www.xxx.yyy.zzz • from unice.fr • Peut spécifier un ordre pour les directives d’accés • order deny, allow : les deny sont évalués avant les allow • order allow, deny : les allow sont évalués avant les deny • Exemple order deny,allow deny from all allow from .ncsa.uiuc.edu

23. Apache – Restriction d’accès par mot de passe • Directives AllowOverride et AuthConfig doivent avoir été fixées • Les directives d’accès doivent être placées dans le fichier .htaccess • AuthTypeAuthentication: type d’authentification (Basic) • AuthName: Nom de la zone d’authentification • AuthUserFile: localisation du fichier des passwords (générés avec httpasswd) • AuthGroupFile: localisation du fichier de groupes (optionnel) • Require: Contraintes à satisfaire pour autoriser l’accès. • Exemple: AuthType Basic AuthName "By Invitation Only" AuthUserFile /usr/local/apache/passwd/passwords Require user rbowen sungo • http://httpd.apache.org/docs/howto/auth.html

24. Apache – Virtual Host • Permet d’avoir plusieurs serveurs sur une même machine • Virtual Host basé sur IP • Utilise l’IP de la connexion pour déterminer le bon serveur • Virtual Host basé sur le nom • Utilise le nom de domaine fourni par le client pour déterminer le serveur • Exemple NameVirtualHost * <VirtualHost *> ServerName www.domain.tld DocumentRoot /www/domain </VirtualHost> <VirtualHost *> ServerName www.otherdomain.tld DocumentRoot /www/otherdomain </VirtualHost> • http://httpd.apache.org/docs/vhosts/name-based.html

25. Le proxy cache • Pourquoi demander plusieurs fois la même chose à un serveur? • Certains clients web ont un cache personnel à l’utilisateur. Le proxy travaille au niveau d’un domaine (ensemble de clients). • Les clients demandent au proxy, le proxy demande au serveur • Améliore la réactivité • Diminue la charge d’un serveur • Diminue l’utilisation de la bande passante • Rôle du proxy cache: • Maintenir un cache des objets récemment demandés • Recharger ceux qui ont expiré quand ils sont demandés • Possibilité de forcer le chargement d’une nouvelle copie si Pragma: no-cache

26. Le proxy cache • Fonctionnalités avancées • Interdire l’accès au web a certaines heures/personnes • Limiter l’accès à certains sites • Changer le contenu (supprimer les images, ajouter des informations…) • Qu’est-ce qui est mis en cache? • Tout HTML • Certains résultats de scripts CGI (si Expires header présent) • Pas ce qui nécessite une authentification Au final, cela dépend de la configuration, du logiciel et de http

27. CDN • Content Delivery Network • Un (très) gros serveur peut supporter plusieurs centaines de milliers de connexions par secondes • MAIS: • Rien pour la latence • Le réseau peut être un goulot d’étranglement (cf. 9/11) • Solutions: • Diriger un client vers un serveur « proche » • Approcher physiquement le contenu du client • Problèmes: • Diriger le client • Assurer la synchronisations des miroirs

28. Routage de contenu • Donner au client le contenu disponible à l’endroit le plus approprié • Plusieurs métriques • Proximité au sens réseau • Proximité géographique • Temps de réponse • Type d’utilisateur (payant…) • Routage global par redirection DNS • Sous un même nom sont regroupés plusieurs serveurs • Le serveur DNS retourne au client la « bonne » IP • Mais • Risque de latence élevée pour le lookup • La requête DNS ne contient pas d’information sur le contenu demandé • Routage par port TCP • La requête est redirigée par un serveur vers d’autres serveurs suivant le numéro de port • Routage de niveau 7 • Analyse du contenu de la requête • Une requête peut générer plusieurs sous requêtes transparentes • Web Cache Communication Protocol • Un routeur intercepte les demandes des clients et les envoient à des caches • Les caches indiquent aux routeurs (avec WCPP) quels protocoles ils servent

29. HTTP • HyperText Transfer Protocol (RFC 2616 pour http/1.1) • Permet le transfert de fichiers localisés grâce à une Universal Resource Locator (URL) • Utilise TCP et port 80 par défaut • Protocole sans état • Historiquement très simple • Permet maintenant des dialogues complexes • Plusieurs requêtes avec unique connexion • Connexions "keepalive" de HTTP 1.1

30. Transaction HTTP Client Serveur 1 – Ouverture de connexion 2 – Envoie de la requête 3 – Réponse du serveur (html) 4 – Fermeture de connexion

31. Requête HTTP • Une requête http est un ensemble de lignes envoyées au serveur par un client • Elle comprend: • Une ligne de requête comprenant 3 éléments • Méthode à appliquer • L’URL • La version du protocole (par exemple HTTP/1.0) • Les champs d’entête de la requête • Liste optionnelle de champ:valeur • Le corps de la requête • Liste optionnelle commençant par une ligne vide • Permet l’envoie de données

32. Requête HTTP METHODE URL VERSION<crlf> EN-TETE : Valeur<crlf> … EN-TETE : Valeur<crlf> Ligne vide<crlf> CORPS DE LA REQUETE • Format général d’une requête HTTP • Exemple GET http://www.commentcamarche.net HTTP/1.0 Accept : text/html If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

33. Requête HTTP • Commandes: • GET: requête de la ressource située à l’URL • HEAD: requête de l’entête de la ressource • POST: envoie de données au programme spécifié par URL • PUT: envoie de données à l’URL • DELETE: supression de la ressource située à l’URL • Entêtes • AcceptType: de contenu accepté par le browser (par exemple text/html). • Accept-Charset: Jeu de caractères attendu par le browser • Accept-Encoding: Codage de données accepté par le browser • Accept-Language: Langage attendu par le browser (anglais par défaut) • Authorization: Identification du browser auprès du serveur • Content-Encoding: Type de codage du corps de la requête • Content-Language: Type de langage du corps de la requête • Content-Length: Longueur du corps de la requête • Content-Type: Type de contenu du corps de la requête (par exemple text/html) • Date: Date de début de transfert des données • Forwarded: Utilisé par les machines intermédiaires entre le browser et le serveur • From: Permet de spécifier l'adresse e-mail du client • If-Modified-Since: le document doit être envoyé si il a été modifié depuis une certaine date • Link: relation entre deux URL • Orig-URL: URL d'origine de la requête • Referer: URL du lien à partir duquel la requête a été effectuée • User-Agent: Chaîne donnant des informations sur le client, comme le nom et la version du navigateur, du système d'exploitation

34. Réponse HTTP • Une réponse http est un ensemble de lignes envoyées au client par le serveur • Elle comprend: • Une ligne de statut • Version du protocole utilisé • Code de statut • La signification du code • Les champs d’entête de la requête • Liste optionnelle de champ:valeur • Le corps de la réponse • Liste optionnelle commençant par une ligne vide • Permet l’envoie de données

35. Réponses HTTP/1.1 • 1xx: requête reçue, traitement en cours • 2xx: succés, la demande a été recue, comprise et acceptée • 200: OK • 201: Created • 202: Accepted … • 3xx: redirection, une action est nécessaire pour poursuivre le traitement • 300: Multiple Choices • 301: Moved permanently … • 4xx: Erreur client, impossible a traiter ou mauvaise syntaxe • 403: Forbidden • 404: Not Found … • 5xx: Erreur serveur • 500: Internal Server Error • 501: Not Implemented …

36. Réponse HTTP • Entêtes • Content-Encoding: Type de codage du corps de la réponse • Content-Language: Type de langage du corps de la réponse • Content-Length: Longueur du corps de la réponse • Content-Type: Type de contenu du corps de la réponse (par exemple text/html). • Date: Date de début de transfert des données • Expires: Date limite de consommation des données • Forwarded: Utilisé par les machines intermédiaires entre le browser et le serveur • Location: Redirection vers une nouvelle URL associée au document • Server: Caractéristiques du serveur ayant envoyé la réponse

37. Types MIME • Multipurpose Internet Mail Extension • Originellement pour le mail, maintenant utilisé par http • Permet d’indiquer ce que des données (des paquets de 8 bits) représentent afin de faciliter leur utilisation • 2 informations sont nécessaires • Content-Transfer-Encoding: type d’encodage utilisé • Content-Type: champs type/soustype • Types MIME communs • image/jpeg • text/plain • video/mpeg

38. Architecture Client-Serveur pour le Web

39. Client Serveur CGI Serveur BD HTML XHTML CSS ASP PHP Applets Java JSP ActiveX Servlet Java JDBC/ ODBC

40. Technologies coté client

41. HTML • HyperText Markup Language • Langage utilisé pour les documents portables • Dérivé de SGML qui était plus complexe • Mélange structure et présentation • Utilise des balises <balise> … </balise> • Actuellement disponible dans la version 4.0 • Amélioration de l’accessibilité • Meilleur séparation de la structure et de la présentation • Support des frames • Tables avancées • Successeur: XHTML

42. HTML <!DOCTYPE HTML PUBLIC  " -//W3C/DTD HTML 4.01 Transitional//EN"  "http://www/w3.org/TR/html4/strict.dtd" > <HTML> <HEAD> <TITLE> Document HTML </TITLE> </HEAD> <BODY> <P> Test </BODY> </HTML> • Exemple de document HTML

43. HTML • Un document HTML commence par un entête <!DOCTYPE HTML PUBLIC  " -//W3C/DTD HTML 4.01 Transitional//EN"  "http://www/w3.org/TR/html4/strict.dtd" > • Il indique quelle version d’HTML est utilisée (ici 4.01 transitional). • Il est possible de préciser des sous-versions • HTML 4.01 strict • HTML 4.01 transitional • HTML 4.01 framset • Le reste du document se trouve encadré par les balises <HTML> </HTML>

44. HTML (HEAD) • Les balises <HEAD> </HEAD> permettent de mettre des informations qui ne sont pas du contenu • Titre (title) • Mots Clefs • Autres informations • Les informations ne sont donc souvent pas affichées à l’écran • Un document doit avoir un <TITLE> dans la section <HEAD> • Des Meta-Data sont optionnelles <META name="Auteur" content="Fabrice Huet"> • Certaines Meta-Data servent aux moteurs de recherche <META name="keywords" lang="fr" content="Argent Rapide Viagra">

45. HTML (BODY) • Le corps du document se trouve entre <BODY> </BODY> • Autrefois possible de spécifier des informations de rendu visuel • background (image de fond) • text (couleur du texte) • link (couleur d’un lien) • vlink (couleur d’un lien visité) • alink (couleur d’un lien sélectionné) • Maintenant deprecated, utiliser des feuilles de style

46. HTML (BODY) • Headings • Décrit brièvement le contenu ou le sujet d’une section • Dans un browser, change la taille de la police • 6 niveaux, de H1 (plus important) à H6 (moins important) • <H1> Elephant </H1> <H6> Souris </H6> • Paragraphes • Permet d’indiquer un paragraphe • <P> sans balise fermente • Retour à la ligne • <br>

47. HTML (BODY) • Listes • Doivent contenir au moins un élement • 3 possibilités: libres, ordonnées, descriptives • On peut mélanger/imbriquer différentes listes • Listes libres <UL> <LI> Première information <LI> Deuxième information </UL> • Listes ordonnées <OL> <LI> Première information <LI> Deuxième information </OL> • Listes descriptives <DL> <DT> Première <DD> information <DT> Deuxième <DD> information </DL>

48. HTML (BODY) • Tables: • Permet de ranger des informations en lignes et colonnes • Peut avoir une CAPTION (son nom) • Peut avoir un SUMMARY • Possibilité de grouper des lignes ou des colonnes • Le nombre de lignes et colonnes est déduit du code HTML • Lignes • Élément <TR> sans fermeture • Cellule • Élément <TH> pour l’entête d’une cellule • Élément <TD> pour le contenu

49. HTML (BODY) • Liens et ancres: • Permet de relier une ressources à une autre • Chaque lien a 2 ancres et une direction • Il part de l’ancre source et va à l’ancre destination • Création de lien • Balise <A> … </A> • Attribut href pour indiquer une source • Attribut name pour indiquer une destination • Attribut title pour donner des informations (tooltip, son…) <A href="http://www-sop.inria.fr/"> INRIA Sophia Antipolis</A> <A name="ancre"> Voici une ancre accessible avec #</A> <A href="….#ancre"> On va a l’ancre</A> • On peut mettre href et name ensembles • Les ancres doivent être uniques dans un document!

50. HTML (BODY) • Objets, Images, Applets: • Avant, utilisation de <IMG> et <APPLET> • Limités à l’existant (comment gérer les nouveaux média) • Applet était seulement pour les applets Java • Problème de l’accessibilité • Tout est remplacé par <OBJECT> mais <IMG> est toujours valide • Inclusion d’image par <IMG> • On indique la localisation de l’image • Une description courte alt • Une description longue longdesc (optionnel) <IMG src="toto.png" alt="la photo de toto"> • Inclusion d’image par <OBJECT> <OBJECT data="toto.png" type="img/png"> la photo de toto </OBJECT> • Pour les applets, plus tard…