1 / 78

Université De Boumerdes

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. Plan. Bref présentation d’Internet et du www Histoire d’Internet

kaden
Download Presentation

Université De Boumerdes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related