Université De Boumerdes Département de physique/Infotronique IT/M2 Technologies Web Réalisé par...
Preview:
Citation preview
- Page 1
- 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
- Page 2
- 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
- Page 3
- Plan Technologies ct serveur Cookies CGI PHP ASP/ASP.NET
Servlets et JSP Moteurs de recherche et Web Services
- Page 4
- Brve prsentation dInternet et du www
- Page 5
- 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
- Page 6
- 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
- Page 7
- 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.
- Page 8
- 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
- Page 9
- 2008/2009 Architecture et logiciels pour le web Ralis par : Mr
RIAHLA
- Page 10
- Fonctionnement du web Serveur Web Client Proxy Cache
- Page 11
- 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
- Page 12
- 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%
- Page 13
- 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
- Page 14
- 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
- Page 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/http://www.netcraft.com/
- Page 16
- 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,,,,,,
- Page 17
- 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
- Page 18
- 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
- Page 19
- 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
- Page 20
- 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
- Page 21
- 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)
- Page 22
- HTTP (Vue dans le cours prcdent)
- Page 23
- 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
- Page 24
- Architecture Client-Serveur pour le Web
- Page 25
- Client Serveur HTML XHTML CSS Applets Java ActiveX Servlet Java
CGI ASP PHP JSP Serveur BD JDBC/ ODBC
- Page 26
- Technologies cot client
- Page 27
- 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
- Page 28
- Exemple de document HTML Document HTML Test
- Page 29
- 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
- Page 30
- 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)
- Page 31
- 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)
- Page 32
- 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)
- Page 33
- 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)
- Page 34
- Listes descriptives Premire information Deuxime information
HTML (BODY)
- Page 35
- 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)
- Page 36
- 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)
- Page 37
- 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)
- Page 38
- 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)
- Page 39
- 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
- Page 40
- 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
- Page 41
- 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
- Page 42
- HTML (FORMS) First name: Last name: email: Male Female
- Page 43
- 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
- Page 44
- 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
.
- Page 45
- 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
- Page 46
- CSS Exemple: appliquer un style a llment body (i.e. tout le
document) body { color: purple; background-color: #d8da3d }
- Page 47
- 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
- Page 48
- Javascript Types, variables, fonctions 5 types de base Chanes
de caractres Nombres Boolens Objets Fonctions Dclaration de
variable var maVariable = valeur maVariable = valeur
- Page 49
- 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
- Page 50
- Javascript Hirarchie dobjets
- Page 51
- 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
- Page 52
- 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
- Page 53
- Javascript Aujourd'hui ExtJs Jquerry Ajax
- Page 54
- 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
- Page 55
- 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
- Page 56
- Technologies ct serveur
- Page 57
- 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)
- Page 58
- 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
- Page 59
- 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
- Page 60
- 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
- Page 61
- 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 ;
- Page 62
- PHP PHP Test Hello World '; ?> PHP Test Hello World Excution
par le serveur
- Page 63
- 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
- Page 64
- 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)
- Page 65
- 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
- Page 66
- 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.
- Page 67
- 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
- Page 68
- JSP - Exemples Salut! La date est < % out.println( On
cherche la date ); java.util.Date date = new java.util.Date();
%> Salut! La date est
- Page 69
- 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"); }
- Page 70
- Moteurs de recherche et Web Services
- Page 71
- 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
- Page 72
- 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
- Page 73
- 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?
- Page 74
- 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
- Page 75
- WSDL - Exemple
- Page 76
- 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
- Page 77 14.5">
- SOAP - Exemple HTTP/1.1 200 OK Content-Type: text/xml;
charset="utf-8" Content- Length:nnnn 14.5
- Page 78
- 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
Fabrice.Huet@sophia.inria.fr Licence Miage 2005-2006
Fabrice.Huet@sophia.inria.fr