Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
INF2005 Abdel Obaid Professeur
Programmation du web INF2005 Abdel Obaid Professeur
2
Historique Le WWW est proposé par Tim Berners-Lee en 1990 au CERN (Centre Européen de Recherche Nucléaire) en Suisse. Les premiers serveurs web étaient implantés dans des laboratoires et servaient pour l'échange de documents entre chercheurs. Le premier navigateur, MOSAIC, est construit en 1992 au National Center for Supercomputing Applications (NCSA) de l'université de l'Illinois. Fin 1994, le web comptait serveurs. EnOctobre2010:
3
Définitions WWW : World Wide Web HTTP : HyperText Transport Protocol,
Infrastructure de serveurs d’informations sur l'Internet basée sur le protocole HTTP. HTTP : HyperText Transport Protocol, Protocole de transport de données au dessus de TCP HTML : HyperText MarkupLanguage, Langage de marquage Navigateur : Browser Client pour HTTP Serveur Web Serveur pour HTTP Application sur un ordinateur. Implante le protocole HTTP
4
Les navigateurs Mosaic : Premier navigateur de la NCSA.
Lynx: ancien navigateur basé texte. Netscape : Mosaic Communication, devenu par la suite MozillaFoudation. Internet Explorer : Produit de Microsoft FireFox: Projet Mozilla - Open source. Chrome – Open Source Google Safari: Utilisé dans l'environnement Apple Opera : Utilisé surtout en Europe. …
5
Usage des navigateurs Internet Explorer est introduit en 1995 par Microsoft. Le code de Netscape est rendu public. Sa version Mozilla est introduite en 2005 et maintenue par la Fondation Mozilla qui a introduit Firefox. L’utilisation de IE décroit et celle de Firefoxet autres croit. La part du marché en 2011: IE: Plus de37% Firefox: 28% Chrome: 13% Safari : 6% Opera : 3%
6
Historique des navigateurs
1991 World wide web 1993 Mosaic (CERN), Lynx 2.0, Netscape Navigator, 1995 Internet Explorer 1, Netscape Navigator 2.0, 1997 Netscape Communicator 4.0, Opera 3.0] 1998 Internet Explorer 5.0 , Mozilla 1999 Mozilla M3, Internet Explorer 5.0 2002 Netscape 7, Mozilla 1.0 2004 Firefox 1.0, Netscape Browser 2005 Safari 2.0, Netscape Browser 8.0, Opera 8 Firefox 2.0 Chrome 1 Internet Explorer 8, Chrome 3, Firefox 3.5 2011 Firefox 3.6, Chrome 13.x , Safari 5.x 2012 Chrome 17-23, Firefox10-18, Internet Explorer 10, Opera 12, Safari 6.
7
Évolution des navigateurs
WordWideWorld 1990 1992 1993 1994 1995 2002 2003 violaWWW Samba Mosaic Lynx Netscape/Mozilla Opera Internet Explorer Firefox Safari
8
Marquage Formatage des documents et hypertexte (actions associées à des éléments du texte). SGML (Standard GraphicsMarkupLanguage ) : Premier langage de marquage conçu pour la création, la gestion, l'entreposage et l'acheminement de produits d'information. HTML (HypertextMarkupLanguage) : langage de marquage avec des balises de formatage, des types de données, d’inclusion de documents multimédia, des liens hypertexte, etc. Basé sur SGML . XML (eXtensibleMarkupLanguage) : plus général et comporte des éléments de validation rigoureuse. A permis de définir XHTML.
9
HTML Les balises HTML sont les mots-clés entourés de crochets comme <html> Normalement par paires (ex. <b>et </b> ) Unebalisepeutavoir des attributs <h1 style="text-align:center"> En-tetecentré</h1> Un document HTML = Page Web Le navigateur n'affiche pas les balises HTML, mais les utilise pour interpréter le contenu de la page. Langage standardisé par W3C (WWW Consortim)
10
Versions de HTML 1994 : HTML 1: Langage original. Développé par le CERN. 1995: HTML 2.0 : publié par l'IETF - RFC 1866. 1997 : HTML 3.2 : recommandation de W3C. 1997 : HTML 4.0 : recommandation W3C et conformeISO8879 2000: HTML 4.01 : ISO Quelque éléments sont rendus obsolètes mais acceptés. 2008 : HTML 5 : Encore en développement Quelques éléments HTML 4 éliminés et remplacés par les CSS. Mieux adapté aux sites modernes avec l’ajout de nouvelles balises.
11
Évolution de HTML XTML/2 SGML HTML/1 XTML HTML/4 XTML/1 XTML/1.1
Strict Transitional Frameset Strict Transitional Frameset XTML/1 XTML/1.1 XTML/2 HTML/5 XHTML/5
12
Format de page HTML <HTML> <HEAD>
<TITLE> Ma page web ! </TITLE> </HEAD> <BODY> <H1> En-tête de section de niveau 1 </H1> <P> Un paragraphe</P> <!-- Commentaire: Reste de la page --> </BODY> </HTML> Partie visible
13
Exemples Listes Paragraphes Liens Sections <html> <html>
<body> <h1> En-tete de section – Niveau 1</h1> < h2>En-tete de section – Niveau 2 </h2> < h3>En-tete de section – Niveau 3 </h3> </body> </html> <html> <body> <p><a href=" l'UQAM</a></p> <p><a href=" le SITEL</a></p> </body> </html> Listes Sections <html> <body> <h3> Liste non ordonnée </h3> <ul> <li> Pommes </li> < li> Oranges </li> < li> Poires </li> </ul> <h3> Liste ordonnée </h3> <ol> <li> Item 1 </li> < li> Item 2 </li> < li> Item 3 </li> </ol> </body> </html> <html> <body> <p>Exemple d'utilisation de la balise de paragraphe.</p> <p>Ceci est un autre paragraphe.</p> </body> </html> Paragraphes
14
Édition de documents html
On peut éditer un fichier avec un éditeur de texte Notepad, Notepad++. C’est fastidieux ! On le stocke avec l’extension .html. Localement ou sur un serveur On affiche ce fichier avec un navigateur. On peut utiliser un outil d’édition de contenu web
15
Outils HTML Commerciaux
Dreamweaver (W/A): Considéré comme le meilleur éditeur HTML ColdFusion Permet de créer des applications web orientés bases de données Bon pour les développeurs professionnels. FrontPage (W): Facile d’utilisation. Adobe GoLive (W/A): Adapté pour les infographistes. WebExpert (W) : Pas WYSIWYG. Préféré des codeurs HTML. Web Fast (W): Éditeur et outil de gestion de sites web. MS Word (W) : Permet de sauvegarde un document Word en HTML.
16
Outilsgratuits Eclipse ... Netbeans (W/L) Amaya (W/A/L) AptanaStudio
IDE pour Java et les pages web Amaya (W/A/L) Proposé par le W3C – Permet d’expérimenter avec les nouveaux langages et protocoles du W3C. AptanaStudio Editeur HTML, JavaScript ,… pour Rich Internet Applications. Bluefish Editeur web complet (L). Eclipse Environnement de développement complet (W/L) ...
17
Les styles dans HTML Cascading style sheets (CSS)
Permettent de styliser de manière uniforme les éléments HTML: Couleur de fond, fontes, alignement, etc. Peuvent être : Ajoutés directement dans les éléments HTML. Ce n’est pas recommandé. Définis dans une balise <style> Mis dans un fichier de style appelé Feuille de style et référencés dans une page HTML.
18
Exemple de style <html>
<body style="background-color:blue;"> <h1> Styles et coleurs</h1> <p style="font-family:arial;color:red">Cetexteest en Arial - rouge </p> <p style="font-family:times;color:green"> Cetexteest en Times - vert</p> <p style="font-size:30px">La taille de cetexteest 30 pixels </p> </body> </html> <html> <head> <style type=“text/css”`> body { background-color:blue;} h {font-size: 18pt;} #p1 { font-family:arial; color:red; } #p2 { font-family:times; color:green; } #p3 { font-size:30px ; } </style> </head> <body> <h1> Styles et coleurs</h1> <p id=“p1”>Cetexteest en Arial - rouge </p> <p id=“p2” >Cetexteest en Times - vert</p> <p id=“p3” >La taille de cetexteest 30 pixels </p> </html>
19
Séparation de préoccupations
Séparation of concerns HTML et CSS sont des langages permettant de séparer le contenu et sa structure du style de présentation. Les éléments HTML présentent une structure abstraite du document. Les directives de CSS sont interprétées par le navigateur pour présenter ces éléments HTML dans un format visuel approprié.
20
Rôle des feuilles de style
Présentation 1 (Ecran) Style 1 Document HTML Présentation 2 (Ecran– Jean) Style 2 Présentation 3 (iPhone) Style 3
21
Versions HTML Trois versions définies par une DTD (Document Type Definition) Loose ou Transitional – Très tolérant Frameset – Accepte les frames (Cadres) Strict – Dernière version de HTML basée sur XML Une DTD spécifie les règles du langage Pour que le navigateur puisse bien le présenter.
22
Validation de documents HTML
Un document HTML possède une déclaration de type (DOCTYPE) qui peut être utilisée pour le valider Validateur w3c: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
23
Fonctions du navigateur
Présentations des interfaces Communication client-serveur Gestion de la mémoire cache Gestion des cookies Manipulation d'objets embarqués (embedded objects) Interprétation de programme scripts
24
Fonctions du navigateur
Réponse HTTP: HTTP/ OK Server: Apache-Coyote/1.1 Last-Modified: Thu, 1 Sep :05:06 GMT Cache-Control: Private Expires: Wed, 8 sep :00:00 GMT Content-Type: text/html …. Cookie:couleur=bleue; expires=Thu, 15 Sept :47:11 UTC; path=/; secure; Navigateur Serveur GET HTTP/ OK Set-Cookie: Couleur=blue; path=/; secure; GET Cookie: Couleur=blue Requête-Réponse HTTP avec Cookie
25
Le modèle client-serveur
Le client-serveur est un modèle de communication Client : envoie des requêtes, reçoit les réponses et les affiche. Serveur: reçoit les requêtes et envoie les réponses appropriées La communication Transport-Application se fait à travers un port Plateforme client Requête Plateforme Client Réponse Serveur Application port port Protocole de Transport Transport Transport
26
Serveur et connexions multiples
Un serveur peut servir plusieurs clients à la fois. Il dédie un processus ou thread par client/connexion. Serveur P P Requête Réponse Requête Réponse Client Client
27
Client-Serveur HTTP Navigateur Serveur web (Firefox) (Apache) nnn 80
Plateforme client Plateforme serveur Requête HTTP Navigateur (Firefox) Serveur web (Apache) Réponse HTTP (HTML) nnn 80 TCP TCP
28
Le protocole HTTP HTTP (Hyper Text Transfer Protocol) est un protocole de transfert de données hypermédia sur Internet. HTTP utilise le modèle client-serveur sur TCP: Le serveur Web (Apache, Netscape, IIS, …) Le client est le navigateur (IE, Firefox, …)
29
Modèle du web Serveur: abc.zzz.uk Serveur: www.xyx.com Page courante
affichée Serveur: abc.zzz.uk Serveur: Client xxxx Hyperlien xxxx xxxx Hyperlien HTTP sur TCP HTTP sur TCP Internet
30
Client Serveur – Client Léger
Le client se contente de la présentation des résultats (Interprétation et interface graphique) Le serveur se charge du traitement (Logique d'affaire) et de la gestion des données (SGBD tel que Oracle) Plateforme serveur Plateforme client Requête HTTP Serveur web Gestion des données Navigateur Réponse HTTP (HTML) Traitement
31
Client Serveur – Client Lourd
Le client fait la présentation et une partie du traitement en utilisant un langage approprié (ex. JavaScript). Le serveur se charge de la gestion des données. Plateforme serveur Plateforme client Requête HTTP Navigateur Serveur web Réponse HTTP (HTML) Traitement Gestion des données
32
Serveurs multi-segments
Un serveur au milieu peut invoquer un autre serveur (3-tired) ou plusieurs autres serveurs. Celui-ci reçoit la requête et demande à l’autre serveur de collaborer afin de rendre le service demandé par le client Serveur d'applications Client Serveur de données Requête HTTP Serveur web Navigateur Requête Gestion des données Réponse HTTP Réponse Traitement
33
Réplication de serveurs
On peut utiliser plusieurs serveurs d'applications pour équilibrer la charge entre serveurs On peut assigner certains serveurs d'applications à des serveurs de données Serveur d'applications Serveur de données Client Serveur web Serveur d'applications Serveur de données Serveur d'applications
34
Services de portail Répartiteur de charge: Moniteur de transactions:
dirige des requêtes à des serveurs spécifiques maximise l’utilisation des serveuse évite de surcharger certains serveurs. Moniteur de transactions: reçoit les requêtes et les envoie aux serveurs d’applications impliqués dans cette transaction. Serveur de données Serveur de transctions Client Serveur Firewall (web) Rapartiteur de charge Serveur d'applications Serveur de données
35
Serveurs proxy Serveur du milieu entre un client et un serveur.
Intercepte les requêtes et les réponses. Fonctions: Filtre des contenus: analyse les contenus des requêtes et des réponses Filtre de sécurité: bloque l’accès à des ressources protégées ou à risque Service d’authentification: vérifie les autorisation d’accès. Monitoring de l’utilisation: assemble des informations sur les utilisations individuelles ou de groupe des ressources. Service de cache: garde en mémoire des copies des pages les plus fréquemment utilisées pour les servir à nouveau
36
Serveur Web Interprète les requêtes HTTP et envoie les réponses appropriées. Localise la ressource demandée dans la requête à l’aide de son URL (Uniform Resource Locator) La ressource peut être: Un contenu statique : un document qui existe sur le serveur. Contenu dynamique: le résultat de l'exécution d'un programme sur le serveur (ex. Moteur de recherche). Information : données à propos des ressources Redirection: vers une autre ressource sur le web. Erreur : code d'erreur de HTTP.
37
Requête-réponse HTTP Ouverture de connexion TCP Requête HTTP
Serveur Client Requête HTTP Fermeture de connexion TCP objet inclus Pour chaque Réponse HTTP Client Serveur Ouverture de connexion TCP Fermeture de connexion TCP Requête HTTP Pour chaque objet inclus Réponse HTTP HTTP 1.1 Fermeture de connexion TCP HTTP 1.0
38
Serveurs avec ou sans état
Serveur (Statefull) avec état: Garde des information sur l’exécution des requêtes. Lien entre requêtes successives d’un client Serveurs (Stateless) sans états: Ne garde pas d’informations sur les requêtes. Plus léger car le serveur n’est pas obligé de maintenir des informations d’état. On peut simuler le statefull en cas de stateless: Exemple: Utilisation des cookies.
39
Les logiciels du serveur Web
Apache HTTP Server ( - Le plus utilisé. Open source. Tomcat de Apache – Connu pou son container des servlets. Microsoft IIS Sun Java Web Server - Compétemment en Java. Ngnix ( – “Engine X”: Très populaire. Alternative à Apache. Lighttpd ( Google Web Server (GWS) - Utilisé par Google pour ses services. ...
40
Les URL Un URL (Uniform Resource Locator) est un mécanisme d'identification des ressources sur le Web: service://NomDeDomaine:[port]/ressource La ressource peut être: Un document (texte, image,…) Un exécutable (binaire, Perl, Python, …) Un objet (servlet, bean, ….) Le service peut êtreHTTP, FTP, TELNET, SMTP, …
41
Exemples d'URLs http://www.info.uqam.ca/index.html
/Recherche?Abdel+Obaid ftp://ftp.info.uqam.ca/PUBLIC/documentation.zip
42
Ouverture de pages web Exemple: demande de la page:
Le client se connecte (via une socket TCP) au serveur (port 80 ). Le client émet une requête HTTP à TCP. Dans la requête figure le chemin relatif de la ressource: Programmation/webp.html Le serveur cherche la ressource demandée, l’enveloppe dans un message HTTP et l’envoie au client . Le serveur demande la fermeture de la connexion.
43
Ouverture d’une page web
Le client reçoit le document et un en-tête qui indique qu’il est de type HTML. Le client interprète le texte HTML et l’affiche. Pour chacun des objets (image,vidéo…) contenus dans le document, le client doit trouver son URL et effectuer une nouvelle requête HTTP pour l'obtenir et l'afficher. Certains objets nécessitent l‘utilisation d'applications externes pour les afficher (ex. Real Player, Windows Media Player, QuickTime Player,…)
Présentations similaires
