Université De Boumerdes

1. Université De Limoges Université De Boumerdes Département de physique/Infotronique IT/M2 Technologies Web Réalisé par : Mr RIAHLA Doctorant a l’université de limoge (France) 2009/2010

2. 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

3. Plan • 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 • 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. 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

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

14. É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

15. 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

16. 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/

17. 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>

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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é

25. Routage de contenu • 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

26. HTTP(Vue dans le cours précédent)

27. 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

28. Architecture Client-Serveur pour le Web

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

30. Technologies coté client

31. 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

32. Exemple de document 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>

33. 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>

34. 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 ">

35. 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

36. 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>

37. 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>

38. HTML (BODY) • Listes descriptives <DL> <DT> Première <DD> information <DT> Deuxième <DD> information </DL>

39. 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

40. 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>

41. HTML (BODY) • On peut mettre href et name ensembles • Les ancres doivent être uniques dans un document! • 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

42. HTML (BODY) • 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…

43. HTML (FRAME) • Frames • Offre plusieurs vues de documents • Permet de maintenir des informations fixes et d’autres temporaires • On remplace <BODY> par <FRAMESET> • On spécifie le nombre de lignes (rows) et de colonnes (column) • <FRAMESET rows="30%, 70%" cols="50%, 50%"> • ….. • </FRAMESET> • Les frames peuvent être imbriquées • Elles peuvent être nommées pour devenir la cible de liens • Un contenu alternatif peut être donné avec <NOFRAMES>

44. HTML (FRAME) • Problèmes: • Les frames définissent un rendu visuel, pas une structure • Les frames n’ont pas d’URI • La vue d’une page avec frames est déterminé par une séquence de navigation et non plus une unique action

45. HTML (FORMS) • Les forms permettent d’ajouter de l’interactivité • L’interaction se fait à travers des objets control: • buttons • checkboxes • radio buttons • menus • text input • file select • hidden controls • objects controls • Utilisation d’une balise <FORM> … </FORM> • 2 méthodes, POST et GET

46. HTML (FORMS) <FORM action="http://somesite.com/prog/adduser" method="post"> <P> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM>

47. HTML (FORMS) • 2 méthodes, POST et GET • La différence concerne la façon dont les données sont encodées • GET est utilisé dans le cas de demandes pures (pas de modifications des données sur le serveur). • POST est utilisé dans le cas de stockage/maj de données • Côté client: avec GET les données sont encodées sous forme d’une URL. Avec POST elles sont encodées dans le corps de la méthode • Côté serveur: un traitement différent est nécessaire suivant POST/GET

48. CSS • Cascading Style Sheets (http://www.w3.org/TR/CSS21/) • Famille des styles • Décrit comment un document est présenté à l’écran • Permet d’ajouter un style (font, couleur…) à une page web • CSS1 et CSS2 dispo, CSS3 en préparation • Une feuille de style se place dans la balise <HEAD> <HEAD> <link rel="stylesheet" type="text/css" href="{fichier.css}"> </HEAD> <HEAD> <style type= "text/css"> …. </style> </HEAD>

49. CSS • Une feuille de style est constituée de règles • Chacune a 3 parties • Le selector qui indique quelle partie du texte est affecté par la règle • La property qui spécifie l’aspect du rendu qui est modifié • La valeur qui indique la valeur de la property • Les règles sont appliquées de la plus spécifique à la moins spécifique

50. CSS • Exemple: appliquer un style a l’élément body (i.e. tout le document) <HEAD> <style type= "text/css"> body { color: purple; background-color: #d8da3d } </style> </HEAD>