Historique - LabUnix

10/09/15 Programma2on du web INF2005 h>p://www.labunix.uqam.ca/~obaid/INF2005 Abdel Obaid UQAM INF2005– Programma2on web– A. Obaid Historique •  WWW est proposé par Tim Berners-­‐Lee en 1990 au CERN. •  Les premiers serveurs web servaient à l'échange de documents entre chercheurs •  Le premier navigateur, MOSAIC, est construit en 1992 au Na2onal Center for Supercompu2ng Applica2ons (NCSA) de l'université de l'Illinois. •  Fin 1994, le web comptait 10000 serveurs. 927,812,119 en 2015. •  Nouvelles stats: –  h>p://www.internetlivestats.com/internet-­‐users/ INF2005– Programma2on web– A. Obaid 2 1 10/09/15 Défini2ons •  WWW : World Wide Web –  Infrastructure de serveurs d’informa2ons 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 –  Applica2on sur un ordinateur. Implante le protocole HTTP INF2005– Programma2on web– A. Obaid 3 Les navigateurs •  Mosaic : Premier navigateur de la NCSA. •  Lynx: ancien navigateur basé texte. •  Netscape : Mosaic Communica2on, devenu par la suite MozillaFouda2on. •  Internet Explorer : Produit de Microsog •  FireFox: Projet Mozilla -­‐ Open source. •  Chrome – Open Source Google •  Safari: U2lisé dans l'environnement Apple •  Opera : U2lisé surtout en Europe. •  … INF2005– Programma2on web– A. Obaid 4 2 10/09/15 Usage des navigateurs •  Internet Explorer est introduit en 1995 par Microsog. •  Le code de Netscape est rendu public. Sa version Mozilla est introduite en 2005 et maintenue par la Fonda2on Mozilla qui a introduit Firefox. •  Plusieurs navigateurs: IE, Firefox, Chrome, Safari. Opera. •  La part du marché en 2015: – 
– 
– 
– 
– 
– 
Chrome: 64.0 % Firefox: 21.2 % IE:
6.6 % Safari: 4.5 % Opera: 2.2 % Ref: h>p://www.w3schools.com/browsers/browsers_stats.asp INF2005– Programma2on web– A. Obaid 5 Historique des navigateurs • 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
1991 1993 1994 1995 1997 1998 1999 2002 2004 2005 2006 2008 … 2015 World wide web Mosaic (CERN), Lynx 2.0, Netscape Navigator, Internet Explorer 1, Netscape Navigator 2.0, Netscape Communicator 4.0, Opera 3.0] Internet Explorer 5.0 , Mozilla Mozilla M3, Internet Explorer 5.0 Netscape 7, Mozilla 1.0 Firefox 1.0, Netscape Browser Safari 2.0, Netscape Browser 8.0, Opera 8 Firefox 2.0 Chrome 1 IE: 11, Firefox : 23, Chrome: 28, Safari: 6, Opera: 15. INF2005– Programma2on web– A. Obaid 6 3 10/09/15 Marquage •  Formatage des documents et hypertexte (ac2ons associées à des éléments du texte). •  SGML (Standard GraphicsMarkupLanguage ) : Premier langage de marquage conçu pour la créa2on, la ges2on, l'entreposage et l'acheminement de produits d'informa2on. •  HTML (HypertextMarkupLanguage) : langage de marquage avec des balises de formatage, des types de données, d’inclusion de documents mul2média, des liens hypertexte, etc. Basé sur SGML . •  XML (eXtensibleMarkupLanguage) : plus général et comporte des éléments de valida2on rigoureuse. A permis de définir XHTML. 7 INF2005– Programma2on web– A. Obaid HTML •  Les balises HTML sont les mots-­‐clés entourés de crochets comme •  Elément HTML: –  Général: –  Général avec a>ribut:
–  Sans contenu: <balise> Contenu </balise> <balise a>r=“valeur”> Contenu </balise> <balise/>: •  Un document HTML = Page Web •  Le navigateur n'affiche pas les balises HTML, mais les u2lise pour interpréter le contenu de la page. •  Langage standardisé par W3C (WWW Consor2m) –  h>p://www.w3.org/ INF2005– Programma2on web– A. Obaid 8 4 10/09/15 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 : recommanda2on de W3C. 1997 : HTML 4.0 : recommanda2on W3C et conformeISO8879 2000: HTML 4.01 : ISO 15445. –  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. INF2005– Programma2on web– A. Obaid 9 Format de page HTML <HTML> <HEAD> <TITLE> Ma page web ! </TITLE> </HEAD> <BODY> <H1> Titre de niveau 1 </H1> Par2e visible <P> Un paragraphe</P> <!-­‐-­‐ Commentaire: Reste de la page -­‐-­‐> </BODY> </HTML> INF2005– Programma2on web– A. Obaid 10 5 10/09/15 Exemples Liens <html> <body> <h1> En-­‐tete de sec2on – Niveau 1</h1> < h2>En-­‐tete de sec2on – Niveau 2 </h2> < h3>En-­‐tete de sec2on – Niveau 3 </h3> </body> </html> <html> <body> <p><a href="h>p://www.uqam.com">Vers l'UQAM</a></p> <p><a href="h>p://www.sitel.uqam.com">Vers le SITEL</a></p> </body> </html> Listes Sec2ons <html> <body> <p>Exemple d'u2lisa2on de la balise de paragraphe.</p> <p>Ceci est un autre paragraphe.</p> </body> </html> Paragraphes <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> INF2005– Programma2on web– A. Obaid 11 Édi2on de documents html •  On peut éditer un fichier avec un éditeur de texte –  Notepad, Notepad++. C ’est fas)dieux ! –  On le stocke avec l’extension .html. •  Localement ou sur un serveur –  On affiche ce fichier avec un navigateur. •  On peut u2liser un ou2l d’édi2on de contenu web INF2005– Programma2on web– A. Obaid 12 6 10/09/15 Ou2ls HTML Commerciaux •  Dreamweaver (W/A): –  Considéré comme le meilleur éditeur HTML •  ColdFusion –  Permet de créer des applica2ons web orientés bases de données Bon pour les développeurs professionnels. •  FrontPage (W): –  Facile d’u2lisa2on. •  Adobe GoLive (W/A): –  Adapté pour les infographistes. •  WebExpert (W) : –  Pas WYSIWYG. Préféré des codeurs HTML. •  Web Fast (W): –  Éditeur et ou2l de ges2on de sites web. •  MS Word (W) : –  Permet de sauvegarde un document Word en HTML. INF2005– Programma2on web– A. Obaid 13 Ou2ls gratuits •  Netbeans (W/L) –  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. •  Aptana Studio –  Editeur HTML, JavaScript ,…. •  Bluefish –  Editeur web complet (L). •  Eclipse –  Environnement de développement complet (W/L) •  ... INF2005– Programma2on web– A. Obaid 14 7 10/09/15 Les styles dans HTML •  Cascading style sheets (CSS) •  Perme>ent 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. INF2005– Programma2on web– A. Obaid 15 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> <html> <p style="font-­‐family:2mes;color:green"> <head> Cetexteest en Times -­‐ vert</p> <p style="font-­‐size:30px">La taille de cetexteest <style type=“text/css”`> body { background-­‐color:blue;} 30 pixels </p> h1 {font-­‐size: 18pt;} </body> #p1 { font-­‐family:arial; color:red; } </html> #p2 { font-­‐family:2mes; 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> 16 INF2005– Programma2on web– A. Obaid 8 10/09/15 Sépara2on de préoccupa2ons •  Sépara2on of concerns •  HTML et CSS sont des langages perme>ant de séparer le contenu et sa structure du style de présenta2on. •  Les éléments HTML présentent une structure abstraite du document. •  Les direc2ves de CSS sont interprétées par le navigateur pour présenter ces éléments HTML dans un format visuel approprié. 17 INF2005– Programma2on web– A. Obaid Rôle des feuilles de style Présenta2on 1 (Ecran) Style 1 Document HTML Style 2 Style 3 INF2005– Programma2on web– A. Obaid Présenta2on 2 (Ecran– Jean) Présenta2on 3 (iPhone) 18 9 10/09/15 Versions HTML •  HTML4 -­‐ Trois versions définies par une DTD (Document Type Defini2on)  
Loose ou Transi2onal – 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. HTML5 : la version la plus srécente-­‐ Encore en développement INF2005– Programma2on web– A. Obaid 19 Valida2on de documents HTML •  Un document HTML possède une déclara2on de type (DOCTYPE) qui peut être u2lisée pour le valider •  Validateur w3c: –  h>p://validator.w3.org <!DOCTYPE HTML PUBLIC "-­‐//W3C//DTD HTML 4.01 Transi2onal//EN" "h>p://www.w3.org/TR/html4/loose.dtd"> HTML4 <!DOCTYPE HTML PUBLIC "-­‐//W3C//DTD HTML 4.01 Frameset//EN" "h>p://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE HTML PUBLIC "-­‐//W3C//DTD HTML 4.01//EN" "h>p://www.w3.org/TR/html4/strict.dtd"> HTML5 <!doctype html> INF2005– Programma2on web– A. Obaid 20 10 10/09/15 Fonc2ons du navigateur • 
• 
• 
• 
• 
• 
Présenta2ons des interfaces Communica2on client-­‐serveur Ges2on de la mémoire cache Ges2on des cookies Manipula2on d'objets embarqués (embedded objects) Interpréta2on de programme scripts 21 INF2005– Programma2on web– A. Obaid Fonc2ons du navigateur Réponse HTTP: HTTP/1.1 200 OK Server: Apache-­‐Coyote/1.1 Last-­‐Modified: Thu, 1 Sep 2011 10:05:06 GMT Cache-­‐Control: Private Expires: Wed, 8 sep 2011 21:00:00 GMT Content-­‐Type: text/html …. Cookie:couleur=bleue; expires=Thu, 15 Sept 2011 20:47:11 UTC; path=/; secure; Navigateur Serveur GET www.xyz.com/document1.html HTTP/1.1 200 OK Set-­‐Cookie: Couleur=blue; path=/; secure; GET www.xyz.com/document2.html Cookie: Couleur=blue Requête-­‐Réponse HTTP avec Cookie INF2005– Programma2on web– A. Obaid 22 11 10/09/15 Le modèle client-­‐serveur •  Le client-­‐serveur est un modèle de communica2on   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 communica2on Transport-­‐Applica2on se fait à travers un port Plateforme client Requête Plateforme Applica2on Client Serveur Réponse port Transport port Protocole de Transport Transport 23 INF2005– Programma2on web– A. Obaid Serveur et connexions mul2ples •  Un serveur peut servir plusieurs clients à la fois. •  Il dédie un processus ou thread par client/connexion. Serveur INF2005– Programma2on web– A. Obaid Requête Réponse Requête Client Réponse P P Client 24 12 10/09/15 Client-­‐Serveur HTTP Plateforme client Navigateur (Firefox) nnn Requête HTTP Réponse HTTP (HTML) Plateforme serveur Serveur web (Apache) TCP 80 TCP INF2005– Programma2on web– A. Obaid 25 Le protocole HTTP •  HTTP (Hyper Text Transfer Protocol) est un protocole de transfert de données hypermédia sur Internet. •  HTTP u2lise le modèle client-­‐serveur sur TCP: –  Le serveur Web (Apache, Netscape, IIS, …) –  Le client est le navigateur (IE, Firefox, …) INF2005– Programma2on web– A. Obaid 26 13 10/09/15 Modèle du web Page courante affichée Client xxxx xxxx Serveur: abc.zzz.uk Serveur: www.xyx.com Hyperlien xxxx xxxx HTTP sur TCP Hyperlien xxxx xxxx HTTP sur TCP Internet 27 INF2005– Programma2on web– A. Obaid Client Serveur – Client Léger •  Le client se contente de la présenta2on des résultats (Interpréta2on et interface graphique) •  Le serveur se charge du traitement (Logique d'affaire) et de la ges2on des données (SGBD tel que Oracle) Plateforme client Navigateur Requête HTTP Réponse HTTP Plateforme serveur Serveur web Ges2on des données (HTML) Traitement INF2005– Programma2on web– A. Obaid 28 14 10/09/15 Client Serveur – Client Lourd •  Le client fait la présenta2on et une par2e du traitement en u2lisant un langage approprié (ex. JavaScript). •  Le serveur se charge de la ges2on des données. Plateforme client Requête HTTP Navigateur Réponse HTTP Plateforme serveur Serveur web (HTML) Traitement Ges2on des données 29 INF2005– Programma2on web– A. Obaid Réplica2on de serveurs •  On peut u2liser plusieurs serveurs d'applica2ons pour équilibrer la charge entre serveurs •  On peut assigner certains serveurs d'applica2ons à des serveurs de données Serveur d'applica2ons Client Serveur web Serveur d'applica2ons Serveur d'applica2ons INF2005– Programma2on web– A. Obaid Serveur de données Serveur de données 30 15 10/09/15 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 sta2que : un document qui existe sur le serveur. –  Contenu dynamique: le résultat de l'exécu2on d'un programme sur le serveur (ex. Moteur de recherche). –  Informa2on : données à propos des ressources –  Redirec2on: vers une autre ressource sur le web. –  Erreur : code d'erreur de HTTP. 31 INF2005– Programma2on web– A. Obaid Pour chaque objet inclus Réponse HTTP Fermeture de connexion TCP Ouverture de connexion TCP Requête HTTP Réponse HTTP Requête HTTP Serveur Réponse HTTP Client Requête HTTP Pour chaque objet inclus Ouverture de connexion TCP Requête HTTP Serveur Client Requête-­‐réponse HTTP Réponse HTTP Fermeture de connexion TCP HTTP 1.1 Fermeture de connexion TCP HTTP 1.0 INF2005– Programma2on web– A. Obaid 32 16 10/09/15 Les logiciels du serveur Web •  Apache HTTP Server (h>p://h>pd.apache.org): -­‐ Le plus u2lisé. Open source. •  Tomcat de Apache – Connu pou son container des servlets. •  Microsog IIS •  Sun Java Web Server -­‐ Compétemment en Java. •  Ngnix (h>p://www.nginx.org/) – “Engine X”: Très populaire. Alterna2ve à Apache. •  Ligh>pd (h>p://www.ligh>pd.net/) •  Google Web Server (GWS) -­‐ U2lisé par Google pour ses services. •  ... INF2005– Programma2on web– A. Obaid 33 17