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 – 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

9. Architecture et logiciels pour le web Client Server D’application Serveur de base de données 2008/2009 Réalisé par : Mr RIAHLA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. Architecture Client-Serveur pour le Web

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

26. Technologies coté client

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

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

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

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

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

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

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

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

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

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

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

38. 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…

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

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

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

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

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

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

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

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

47. Javascript • Langage de script pour pages HTML • Crée par Netscape corp. en 1995 • RIEN A VOIR AVEC JAVA • Orienté Objet • Langage interprété au chargement de la page par le client • Peut être placé n’importe où dans la page • <script type="text/javascript"> xxxxxxx </script> • <script src="xxx.js"></script>

48. Javascript – Types, variables, fonctions • 5 types de base • Chaînes de caractères • Nombres • Booléens • Objets • Fonctions • Déclaration de variable var maVariable = valeur maVariable = valeur

49. Javascript – Types, variables, fonctions • Déclaration de fonction function maFonction(argument1,argument2,etc) { xxxxxxx } • Appel de fonction maFonction(1,2…) • Accés à un champs • Notation pointée: toto.titi

50. Javascript – Hiérarchie d’objets