Université De Boumerdes Département de physique/Infotronique IT/M2 Technologies Web Réalisé par : Mr RIAHLA Doctorant a luniversité de limoge (France)

Universit De Boumerdes Dpartement de physique/Infotronique IT/M2 Technologies Web Ralis par : Mr RIAHLA Doctorant a luniversit de limoge (France) 2009/2010 Universit De Limoges

Plan Bref prsentation dInternet et du www Histoire dInternet Le W3C Architecture et logiciels pour le web Clients web Serveurs web Proxy Cache CDN HTTP Technologies ct clients HTML CSS JavaScript Applets

Plan Technologies ct serveur Cookies CGI PHP ASP/ASP.NET Servlets et JSP Moteurs de recherche et Web Services

Brve prsentation dInternet et du www

Histoire dInternet 1962: tude pour la cration dun rseau pour commander linfrastructure nuclaire amricaine capable de rsister a une attaque nuclaire Choix dun rseau par commutation de paquets 1969: construction du premier rseau physique (4 machines, 50 kbps) 1972: envoie du premier email (23 machines, 50kpbs) 1973: cration de TCP/IP 1974: premire utilisation du terme Internet 1979: cration dUsenet 1982: TCP/IP devient le standard dInternet 1983: Cration du Domain Name System

Histoire dInternet 1986: cration de lIETF 1990: cration dun systme hypertext par Tim Berners-Lee 1992: le CERN prsente le World Wide Web 1993: cration de Mosaic, premier client pour le web 1994: cration du w3c 1995: IE 1.0 1997: IE 4.0 sort, Netscape a 72%, IE 18% 1998: Netscape jette lponge 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: dbut de la deuxime guerre des browsers

W3C World Wide Web Consortium Cre en 1994 3 buts Accs universel au web travers des technologies tenant compte des diffrentes cultures, langues, handicapes Web smantique Web of trust: guider le dveloppement du web en tenant compte des aspects lgaux, commerciaux et sociaux lis aux nouvelles technologies. Rle du w3c Interoprabilit: les spcifications des protocoles et langages du web doivent pouvoir fonctionner ensembles. volution: sassurer que de nouvelles technologies peuvent tre ajoutes au web. Standardisation: donner des Recommandations dcrivant les technologies du web.

W3C Domaines dactivit 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 socit 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 laccs linformation des personnes handicapes

2008/2009 Architecture et logiciels pour le web Ralis par : Mr RIAHLA

Fonctionnement du web Serveur Web Client Proxy Cache

Les clients web Varit des plateformes Windows, Unix, PDA Varit des logiciels IE, Firefox, Mozilla, Opera, Lynx Caractristiques Gestion dHTML/XHTML Gestion de CSS Gestion de JavaScript Gestion de plugins

Rpartition des clients web Source: http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp Dcembre 2004 Octobre 2005 IE665.5%68.9% IE59.9%5.6% Mozilla et Firefox 17%21.3% Opra 7/81.8%1.3% Netscape1.6%

tapes pour la visualisation dune page web Lutilisateur entre une URL Le client web effectue une rsolution DNS pour avoir ladresse du serveur Il effectue la requte http et reoit un document Il analyse le document pour Prparer laffichage Trouver les liens vers les images Une requte est effectue pour downloader les images Cela peut se faire en parallle ou squentiellement

Serveurs Web Programmes rpondant aux requtes des clients web Souvent appel serveur http ou httpd coute sur le port 80 (convention) dune machine 2 types de ressources Statiques: ne ncessitent pas de traitement ct serveur Dynamiques: chaque demande de page ncessite des oprations spcifiques du serveur Nombreux logiciels disponibles: Apache Internet Information Service Sun Java System Web Server

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/http://www.netcraft.com/

Le serveur Apache Serveur HTTP/1.1 Versions pour Windows, OS/2, Linux Utilise du pr-fork Configuration du serveur en plaant des directives dans un fichier texte. httpd.conf (lu au dmarrage).htaccess (accs au rpertoire) Syntaxe: Directive Valeur Les directives sappliquent lensemble du serveur Leur porte peut-tre limite avec des sections,,,,,,

Apache Restriction daccs Directives Allow,Deny from all from www.xxx.yyy.zzzwww.xxx.yyy.zzz from unice.fr Peut spcifier un ordre pour les directives daccs order deny, allow : les deny sont valus avant les allow order allow, deny : les allow sont valus avant les deny Exemple order deny,allow deny from all allow from.ncsa.uiuc.edu

Apache Virtual Host Permet davoir plusieurs serveurs sur une mme machine Virtual Host bas sur IP Utilise lIP de la connexion pour dterminer le bon serveur Virtual Host bas sur le nom Utilise le nom de domaine fourni par le client pour dterminer le serveur Exemple NameVirtualHost * ServerName www.domain.tld DocumentRoot /www/domain ServerName www.otherdomain.tld DocumentRoot /www/otherdomain http://httpd.apache.org/docs/vhosts/name-based.html

Le proxy cache Pourquoi demander plusieurs fois la mme chose un serveur? Certains clients web ont un cache personnel lutilisateur. Le proxy travaille au niveau dun domaine (ensemble de clients). Les clients demandent au proxy, le proxy demande au serveur Amliore la ractivit Diminue la charge dun serveur Diminue lutilisation de la bande passante Rle du proxy cache: Maintenir un cache des objets rcemment demands Recharger ceux qui ont expir quand ils sont demands Possibilit de forcer le chargement dune nouvelle copie si Pragma: no- cache

Le proxy cache Fonctionnalits avances Interdire laccs au web a certaines heures/personnes Limiter laccs certains sites Changer le contenu (supprimer les images, ajouter des informations) Quest-ce qui est mis en cache? Tout HTML Certains rsultats de scripts CGI (si Expires header prsent) Pas ce qui ncessite une authentification Au final, cela dpend de la configuration, du logiciel et de http

Routage de contenu Donner au client le contenu disponible lendroit le plus appropri Plusieurs mtriques Proximit au sens rseau Proximit gographique Temps de rponse Type dutilisateur (payant)

HTTP (Vue dans le cours prcdent)

Types MIME Multipurpose Internet Mail Extension Originellement pour le mail, maintenant utilis par http Permet dindiquer ce que des donnes (des paquets de 8 bits) reprsentent afin de faciliter leur utilisation 2 informations sont ncessaires Content-Transfer-Encoding: type dencodage utilis Content-Type: champs type/soustype Types MIME communs image/jpeg text/plain video/mpeg

Architecture Client-Serveur pour le Web

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

Technologies cot client

HTML HyperText Markup Language Langage utilis pour les documents portables Driv de SGML qui tait plus complexe Mlange structure et prsentation Utilise des balises Actuellement disponible dans la version 4.0 Amlioration de laccessibilit Meilleur sparation de la structure et de la prsentation Support des frames Tables avances Successeur: XHTML

Exemple de document HTML Document HTML Test

Un document HTML commence par un entte Il indique quelle version dHTML est utilise (ici 4.01 transitional). Il est possible de prciser 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

Les balises permettent de mettre des informations qui ne sont pas du contenu Titre (title) Mots Clefs Autres informations Les informations ne sont donc souvent pas affiches lcran Un document doit avoir un dans la section Des Meta-Data sont optionnelles Certaines Meta-Data servent aux moteurs de recherche HTML (HEAD)

Le corps du document se trouve entre Autrefois possible de spcifier des informations de rendu visuel background (image de fond) text (couleur du texte) link (couleur dun lien) vlink (couleur dun lien visit) alink (couleur dun lien slectionn) Maintenant deprecated, utiliser des feuilles de style HTML (BODY)

Headings Dcrit brivement le contenu ou le sujet dune section Dans un browser, change la taille de la police 6 niveaux, de H1 (plus important) H6 (moins important) Elephant Souris Paragraphes Permet dindiquer un paragraphe sans balise fermente Retour la ligne HTML (BODY)

Listes Doivent contenir au moins un lement 3 possibilits: libres, ordonnes, descriptives On peut mlanger/imbriquer diffrentes listes Listes libres Premire information Deuxime information Listes ordonnes Premire information Deuxime information HTML (BODY)

Listes descriptives Premire information Deuxime information 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 dduit du code HTML Lignes lment sans fermeture Cellule lment pour lentte dune cellule lment pour le contenu HTML (BODY)

Liens et ancres: Permet de relier une ressources une autre Chaque lien a 2 ancres et une direction Il part de lancre source et va lancre destination Cration de lien Balise Attribut href pour indiquer une source Attribut name pour indiquer une destination Attribut title pour donner des informations (tooltip, son) INRIA Sophia Antipolis http://www-sop.inria.fr/ Voici une ancre accessible avec # On va a lancre . HTML (BODY)

On peut mettre href et name ensembles Les ancres doivent tre uniques dans un document! Objets, Images, Applets: Avant, utilisation de et Limits lexistant (comment grer les nouveaux mdia) Applet tait seulement pour les applets Java Problme de laccessibilit Tout est remplac par mais est toujours valide HTML (BODY)

Inclusion dimage par On indique la localisation de limage Une description courte alt Une description longue longdesc (optionnel) Inclusion dimage par la photo de toto Pour les applets, plus tard HTML (BODY)

HTML (FRAME) Frames Offre plusieurs vues de documents Permet de maintenir des informations fixes et dautres temporaires On remplace par On spcifie le nombre de lignes (rows) et de colonnes (column) .. Les frames peuvent tre imbriques Elles peuvent tre nommes pour devenir la cible de liens Un contenu alternatif peut tre donn avec

HTML (FRAME) Problmes: Les frames dfinissent un rendu visuel, pas une structure Les frames nont pas dURI La vue dune page avec frames est dtermin par une squence de navigation et non plus une unique action

HTML (FORMS) Les forms permettent dajouter de linteractivit Linteraction se fait travers des objets control: buttons checkboxes radio buttons menus text input file select hidden controls objects controls Utilisation dune balise 2 mthodes, POST et GET

HTML (FORMS) First name: Last name: email: Male Female

HTML (FORMS) 2 mthodes, POST et GET La diffrence concerne la faon dont les donnes sont encodes GET est utilis dans le cas de demandes pures (pas de modifications des donnes sur le serveur). POST est utilis dans le cas de stockage/maj de donnes Ct client: avec GET les donnes sont encodes sous forme dune URL. Avec POST elles sont encodes dans le corps de la mthode Ct serveur: un traitement diffrent est ncessaire suivant POST/GET

CSS Cascading Style Sheets (http://www.w3.org/TR/CSS21/)http://www.w3.org/TR/CSS21/ Famille des styles Dcrit comment un document est prsent lcran Permet dajouter un style (font, couleur) une page web CSS1 et CSS2 dispo, CSS3 en prparation Une feuille de style se place dans la balise .

CSS Une feuille de style est constitue de rgles Chacune a 3 parties Le selector qui indique quelle partie du texte est affect par la rgle La property qui spcifie laspect du rendu qui est modifi La valeur qui indique la valeur de la property Les rgles sont appliques de la plus spcifique la moins spcifique

CSS Exemple: appliquer un style a llment body (i.e. tout le document) body { color: purple; background-color: #d8da3d }

Javascript Langage de script pour pages HTML Cre par Netscape corp. en 1995 RIEN A VOIR AVEC JAVA Orient Objet Langage interprt au chargement de la page par le client Peut tre plac nimporte o dans la page xxxxxxx

Javascript Types, variables, fonctions 5 types de base Chanes de caractres Nombres Boolens Objets Fonctions Dclaration de variable var maVariable = valeur maVariable = valeur

Javascript Types, variables, fonctions Dclaration de fonction function maFonction(argument1,argument2,etc) { xxxxxxx } Appel de fonction maFonction(1,2) Accs un champs Notation pointe: toto.titi

Javascript Hirarchie dobjets

Javascript Objets par dfaut navigator Contient le nom et la version du navigateur, les plugins installs window Proprits qui sappliquent la fentre tout entire document Proprits sur le contenu du document (titre, couleur) location URL actuelle history URLs visites

Javascript Exemples var name = "Hege" document.write(name) document.write(" "+name+" ") var browserName=navigator.appName; if (browserName=="Netscape") { alert("Hi Netscape User!"); } Affichage de la valeur dune variable Dtection du nom du navigateur

Javascript Aujourd'hui ExtJs Jquerry Ajax

Applets Java Cre par Sun Microsystems Un plugin permet de faire tourner une machine virtuelle (JVM) dans un navigateur Un client download le code java compile (.class,.jar) et lexcute localement Lapplet sexcute dans une "Sand Box", elle a des capacits trs limites, elle ne peut pas Lire/Ecrire/Effacer de fichiers localement Crer des connexions rseau vers dautres machines que celle dont elle est originaire Cre un ClassLoader .. On peut saffranchir de ces limitations en signant les applets

Applets Java Cycle de vie Une applet passe par diffrentes phase Chargement par le browser Mthode init() Excution Mthode start() Fin dexcution temporaire Mthode stop() Fin dexcution dfinitive Mthode destroy() Il est possible de surcharger ces mthodes pour changer les comportements par dfaut

Technologies ct serveur

Les Cookies Chane de caractre gnre par le serveur et stocke par le navigateur Utiliss pour maintenir des informations de navigations Voyagent dans les headers http Structure: Nom Valeur Date dexpiration Chemin de validit Domaine de validit Attribut de scurit (si secure, alors SSL)

CGI Common Gateway Interface Permet lexcution de programmes externes par un serveur http Le CGI permet de faire communiquer le serveur et des programmes pour gnrer des pages web Un programme CGI peut tre crit dans un langage qui Peut lire des flux en entre Sait traiter des chanes de caractres crire des flux en sortie Peut tre excut sur un serveur Les plus utiliss sont Perl, C, C++, Java

PHP PHP: Hypertext Processor Langage de script avec syntaxe perl/C Cre en 1994, actuellement en version 4 PHP3: totalement interpret PHP4: utilise un moteur de script (ZEND) pour amliorer les performances PHP vient avec une norme librairie de fonctions

PHP PHP vient avec une norme librairie de fonctions 10.38 Fonctions mathmatiques 10.39 Fonctions MCAL 10.40 Cryptage 10.41 Hash 10.42 Fonctions diverses 10.43 fonctions mSQL 10.44 Fonctions Microsoft SQL Server 10.45 Fonctions MySQL 10.46 Rseau 10.47 Fonctions NIS 10.48 Oracle 8 functions 10.49 Fonctions Oracle 10.50 Entres/sorties 10.51 Ovrimos SQL 10.52 Expressions rgulires compatibles Perl 10.53 Fonctions PDF 10.54 Verisign Payflow Pro functions 10.55 Fonctions PostgreSQL 10.56 Fonctions POSIX 10.57 Pspell 10.58 GNU Readline 10.59 Fonction GNU Recode 10.60 Expressions rgulires 10.61 Satellite CORBA client extension 10.62 Smaphores et gestion de la mmoire partage 10.63 Gestion des sessions 10.64 Mmoire partage 10.65 SNMP functions 10.66 Socket 10.67 Fonctions de chane de caractres 10.68 Fonctions Shockwave Flash 10.69 Sybase 10.70 ODBC 10.71 Fonctions URL 10.72 Fonctions sur les variables 10.73 WDDX functions 10.74 Analyseur syntaxique XML 10.75 XSLT 10.76 YAZ 10.77 Zlib (Compression) 10.19 Fonction d'excution de programmes 10.20 Forms Data Format 10.21 Fonctions filePro 10.22 Systme de fichiers 10.23 FTP 10.24 Fonctions de fonctions 10.25 Fonctions GNU Gettext 10.26 GMP 10.27 Fonctions HTTP 10.28 Fonctions Hyperwave 10.29 Fonctions InterBase 10.30 Fonctions ICAP 10.31 Fonctions Informix 10.32 Images 10.33 Fonctions IMAP 10.34 Options PHP & informations 10.35 Fonctions Ingres II 10.36 Fonctions LDAP 10.37 Fonction mail 10.1 Apache 10.2 Tableaux 10.3 Fonctions Aspell 10.4 Fonctions mathmatiques sur des nombres de taille arbitraire 10.5 Fonctions de calendrier 10.6 Fonctions CCVS API 10.7 Fonctions Objets 10.8 Support COM pour Windows 10.9 Fonctions ClibPDF 10.10 CURL 10.11 Fonctions de paiement Cybercash 10.12 Fonctions de dates et heures 10.13 Fonctions dba 10.14 Fonctions dBase 10.15 Fonctions dbm 10.16 Accs aux dossiers 10.17 Fonctions DOM XML 10.18 Gestion des erreurs

PHP Le code PHP se trouve dans le fichier HTML ct serveur Le serveur interprte le code PHP et envoie la page modifie au client Le serveur dtecte les fichiers PHP grce a leur extension Intgration dans un fichier: code php Les instructions sont spares par ;

PHP PHP Test Hello World '; ?> PHP Test Hello World Excution par le serveur

PHP On peut interfacer facilement PHP et les forms HTML Your name: Your age: Hi. You are years old. Hi Joe. You are 22 years old. Client Serveur

ASP/ASP.net Active Server Pages cre par Microsoft Pages HTML contenant du code de script excut par le serveur Scripts supports par dfaut: VBScript, JScript, Perl, et REXX ASP.net ajoute tous les langages.net (VB.net, C#, Scheme, Smalltalk)

Servlets et JSP Rponse de Sun a CGI Servlets vs CGI: Efficacit: la machine virtuelle tourne en permanence, les requtes sont traites par des threads, non des process Ergonomie: Java Portabilit: Java Lourdeur: Java Java Server Pages: ASP version Sun, langage de script Java Pages identifies par lextension.jsp

Servlets et JSP Pour dvelopper: Java Servlet Development Kit (JSDK) Ncessite lajout dun module au serveur: Tomcat pour Apache Allaire JRun pour IIS Les servlets sont places dans un rpertoire du serveur et sont accdes travers une URL.

Servlets et JSP - Fonctionnement JSP a un fonctionnement en 4 tapes Requte reue par le serveur La page demande est traduite en servlets Les servlets sont compiles Puis excuts puis le rsultat transmis au client

JSP - Exemples Salut! La date est < % out.println( On cherche la date ); java.util.Date date = new java.util.Date(); %> Salut! La date est

Servlets (A tudier) Se programme comme un classe Java classique Implmente javax.servlet.http ou sous-classe javax.servlet.http.HttpServlet import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println("Hello World"); }

Moteurs de recherche et Web Services

Moteurs de recherches Permettent de trouver de linformation sur le web Indexent rgulirement des sites pour construirent une base de donnes (possibilit de lempcher avec le fichier robots.txt) Une recherche se fait dans la base de donnes important davoir une BD jour Actuellement 2me gnration 1ere gnration: utilisation des mots clefs et des tags META 2eme gnration: analyse de la structure des pages (liens entrant, sortant) et construction dun indice de rputation 3eme gnration: utilisation des habitudes de recherche et meilleure extraction dinformations contextuelles

Google et PageRank Google est un moteur de 2eme gnration Utilise lalgorithme PageRank pour dterminer ladquation dune page la demande PageRank est un indice de limportance dune page web Chaque lien sortant est un vote pour une page Plus une page a de votes, plus elle est importante Variation de lalgorithme limination des liens venant de link farms Diminution de limportance dun vote suivant la cible

Web services - Principes Accs au web traditionnellement travers des browsers Web Services: API permettant des programmes de communiquer avec des technologies www Technologies clefs: XML, HTTP, SOAP, WSDL, UDDI Ide: Des services sont publis sur Internet Des applications cherchent ces services et y accdent Questions Quels services sont offerts? Comment invoque-t-on ces services? De quelles informations ont-il besoin? Comment fournir ces informations? Comment les rponses sont-elles envoyes?

WSDL Web Service Description Language Fichier XML contient la description des services groupe de mthode exposes mthode expose paramtre valeur de retour description du paramtre

WSDL - Exemple

UDDI SOAP Universal Description, Discovery and Integration Annuaire dinformations (WSDL) sur les WS Ressemble un DNS ou un broker Corba En gnral, les WS communiquent avec SOAP Simple Object Access Protocol XML sur http

14.5">

SOAP - Exemple HTTP/1.1 200 OK Content-Type: text/xml; charset="utf-8" Content- Length:nnnn 14.5

Rfrences http://www.w3.org http://www.commentcamarche.net/internet/http.php3 http://www.cookiecentral.com http://www- mrim.imag.fr/ressources/docPHP4_v4c/manuel_toc.html http://www- mrim.imag.fr/ressources/docPHP4_v4c/manuel_toc.html http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/ Cours de Master STIC Programmation et scurit du Web, Philippe Poulard : http://disc.inria.fr/perso/philippe.poulard/cours/masterhttp://disc.inria.fr/perso/philippe.poulard/cours/master [email protected] Licence Miage 2005-2006 [email protected]