Langages et outils de l’environnement web

7/28/2019 Langages et outils de lenvironnement web

1/116

SUPPORT STAGIAIRE

LANGAGES ET OUTILSDE L'ENVIRONNEMENT WEB


2/116


3/116

page 3

SOMMAIRE

LES TAPES CLS DES TECHNOLOGIES DU WEB..........................................7

1. INTRODUCTION ....................................................................................................................... 7

2. LE DEBUT DU WEB STATIQUE - 1990 .................................................................................. 72.1. Naissance de larchitecture client-serveur ........................................................................ 72.2. Bases du principe de fonctionnement client - serveur...................................................... 72.3. limites du web statique...................................................................................................... 8

3. LE WEB ORIENTE CLIENT - 1995 .......................................................................................... 83.1. Une recommandation et deux nouveaux langages .......................................................... 83.2. Fonctionnement des sites interactifs ct client............................................................... 93.3. Limites du web orient client ............................................................................................ 9

4. LE WEB ORIENTE SERVEUR - 2000.................................................................................... 104.1. Architecture trois tiers ..................................................................................................... 104.2. Fonctionnement des sites web dynamiques................................................................... 114.3. Limites du web orient serveur....................................................................................... 11

5. LE COMPROMIS CLIENT - SERVEUR - 2005 ...................................................................... 125.1. Applications riches (RAI)................................................................................................. 125.2. Fonctionnement des applications riches......................................................................... 13

LES FONDEMENTS DU WEB STATIQUE...........................................................14

1. LES TECHNOLOGIES DE BASE........................................................................................... 14

1.1. introduction ..................................................................................................................... 142. LES PROTOCOLES DE COMMUNICATION DU WEB ......................................................... 14

2.1. Les rgles du TCP/IP...................................................................................................... 142.2. Le protocole HTTP.......................................................................................................... 152.3. Le CGI............................................................................................................................. 16

3. LE NAVIGATEUR OU LE CLIENT......................................................................................... 173.1. Gnralits...................................................................................................................... 173.2. Le plug-in firebug de Firefox ........................................................................................... 18

4. LHYPERTEXT MARKUP LANGUAGE - HTML.................................................................... 194.1. Introduction ..................................................................................................................... 194.2. Le langage HTML ........................................................................................................... 21

5. LE SERVEUR WEB ................................................................................................................ 245.1. Gnralits...................................................................................................................... 245.2. Fonctionnement dApache .............................................................................................. 265.3. Installation dApache....................................................................................................... 275.4. Installation dun site statique sur Apache local............................................................... 285.5. Analyse dune transaction HTTP avec firebug ............................................................... 29

6. LES LIMITES DU WEB STATIQUE ....................................................................................... 30

LE WEB ORIENTE CLIENT .................................................................................31

1. LES TECHNOLOGIES DE BASE........................................................................................... 311.1. Introduction ..................................................................................................................... 31

2. LA RECOMMANDATION DOM.............................................................................................. 31


4/116

page 4

2.1. Gnralits......................................................................................................................312.2. Larbre DOM et les mthodes avec firebug.....................................................................322.3. La navigation dans larbre DOM...................................................................................... 33

3. LES LANGAGES JAVASCRIPT, JSCRIPT, ECMASCRIPT .................................................343.1. Un langage orient objet cot client................................................................................343.2. Insertion du javascript dans la page html........................................................................343.3. Les botes de dialogue ....................................................................................................373.4. La programmation avec javascript .................................................................................. 393.5. La technologie objet dans la page web...........................................................................44

4. LE LANGAGE DES FEUILLES DE STYLE (CSS).................................................................454.1. Gnralits......................................................................................................................454.2. Ecriture et syntaxe des rgles css .................................................................................. 474.3. Le formatage par style dun ensemble de pages............................................................ 474.4. Les classes pour une discrimination des mmes balises ............................................... 49

5. LE DHTML DYNAMIC HTML...............................................................................................515.1. Gnralits......................................................................................................................51

5.2. Principe des couches ou calques.................................................................................... 515.3. Majax au cur de lelectronique ..................................................................................... 535.4. Multiplication des actions sur un vnement ..................................................................54

TRANSFERT DE DONNES CLIENT - SERVEUR .............................................56

1. LE FORMULAIRE.................................................................................................................... 561.1. Gnralits......................................................................................................................561.2. Un formulaire en direct ....................................................................................................57

2. LA TRANSMISSION DES DONNEES .................................................................................... 572.1. Schma du mecanisme de transfert des saisies ............................................................ 572.2. Le contrle des zones de saisies du formulaire..............................................................60

LES FONDEMENTS DU WEB ORIENTE SERVEUR ..........................................64

1. UNE EVOLUTION STRUCTURELLE DES SERVEURS WEB ..............................................641.1. Gnralits......................................................................................................................64

2. LINTERFACE CGI ..................................................................................................................642.1. Gnralits et fonctionnement ........................................................................................642.2. Installation de Perl........................................................................................................... 672.3. Structure dun script CGI................................................................................................. 682.4. Premier script cgi............................................................................................................. 692.5. Le traitement des donnes..............................................................................................702.6. Le module CGI.pm ..........................................................................................................74

3. LES SSI (Server Side Includes) ............................................................................................ 783.1. Gnralits......................................................................................................................783.2. Fonctionnement des ssi ..................................................................................................783.3. Configuration du serveur pour ssi ...................................................................................793.4. Des commandes serveur dans la page...........................................................................81

4. PHP UN LANGAGE SERVEUR..............................................................................................834.1. Gnralits......................................................................................................................834.2. Le langage.......................................................................................................................844.3. Installation de PHP5 et configuration dApache..............................................................854.4. Exploiter un formulaire avec php.....................................................................................86

LA PLATE-FORME DE DEVELOPPEMENT WEB.............................................. 87


5/116

page 5

1. LA PLATE-FORME WAMPSERVER ..................................................................................... 871.1. Gnralits...................................................................................................................... 871.2. Architecture de wamp..................................................................................................... 871.3. Installation de WAMP...................................................................................................... 881.4. Connexions aux bases de donnees MySQL .................................................................. 91

1.5. Les bases de donnes MySQL....................................................................................... 93

LES FONDEMENTS DU WEB 2.0......................................................................103

1. LES TACHES PARTAGEES ................................................................................................ 1031.1. Gnralits.................................................................................................................... 1031.2. Le concept AJAX .......................................................................................................... 1031.3. Une application sans rechargement de la page ........................................................... 104

LE STANDARD DECHANGE............................................................................105

1. LE METALANGAGE XML .................................................................................................... 105

1.1. Gnralits.................................................................................................................... 1051.2. Des outils pour des classes de documents .................................................................. 1051.3. Un document xml conforme.......................................................................................... 1061.4. Des applications pour le traitement ou l affichage ....................................................... 107

DES OUTILS POUR LE WEB ............................................................................110

1. SYSTEMES DE GESTION DE CONTENU (sgc cms)...................................................... 1101.1. Les outils de site Web de type ditorial ........................................................................ 1101.2. Le principe de base....................................................................................................... 1101.3. Le blog WordPress ....................................................................................................... 111


6/116


7/116

Les tapes cls des technologies du WEB

Langages et outils de l'environnement Web page 7

LES TAPES CLS DES TECHNOLOGIES DU WEB

1. INTRODUCTION

Depuis le dbut de lInternet, les technologies directement associes nont cessde se dvelopper et dvoluer sous les exigences des utilisateurs et du trafic sanscesse croissant. Lvolution sest faite par tape denviron cinq ans, temps quisemble ncessaire pour que toutes les parties impliques (W3C, entreprises,dveloppeurs, internautes) prennent la pleine mesure des limites destechnologies existantes et se donnent les moyens de les repousser. Cela sest faittour tour en exploitant des technologies mergentes, en ditant de nouvellesrecommandations ou en rpondant aux nouveaux besoins par des outils et deslangages plus adapts.

2. LE DEBUT DU WEB STATIQUE - 1990

2.1. NAISSANCE DE LARCHITECTURE CLIENT-SERVEUR

Les premiers sites se limitaient un ensemble de pages html enregistres sur unserveur, des liens hypertextes assurant la navigation entre elles. Pour ralisercette navigation, des rgles de communication sont utilises entre le serveur et leclient: le HTTP (HyperText Transfert Protocol. Le client appel aussi le navigateur

est install sur un poste indpendant connect lInternet. Il est linterprteur dulangage html dont sont composes les pages. Son rle se limitait laffichage desimples textes et de quelques images, pas trop lourdes, pour la fluidit de lanavigation.

2.2. BASES DU PRINCIPE DE FONCTIONNEMENT CLIENT - SERVEUR

Le client adresse une requte http au serveur sous une forme bien prcise (parexemple : protocole://nom de domaine/nom de page.html) dite URL (UniformResource Locator). Lorsque le serveur reoit cette requte, il cherche la pageparmi celles qui composent le site et la renvoie au client sous la syntaxe html. Lecode est rceptionn, interprt et affich par le navigateur.


8/116


page 8 Langages et outils de l'environnement Web

2.3. LIMITES DU WEB STATIQUE

Sous cet environnement, la seule interactivit possible est donne parlhyperlien lors de son activation. Elle se limite laffichage dune nouvelle

page.Dans ce contexte, est apparu trs vite le besoin de technologiescomplmentaires pour rpondre plus dinteractivit, produire des effetsvisuels et dsengorger les rseaux. En effet, le cycle de traitement deshyperliens est long et fastidieux entranant une perte de ractivit desapplications. De plus, le succs sans cesse croissant de ce nouveaumode de communication engendrait un trafic en perptuelle augmentationrvlant des serveurs et un rseau sous dimensionns.

Ainsi pour rpondre aux besoins du trafic et de la ractivit les efforts

technologiques ont port sur lamlioration de la capacit de transfert dedonnes, lamlioration des PC et lexploitation dune nouvellerecommandation du W3C, le DOM (Data Objet Model). Cette dernirevisant apporter plus dinteractivit et en mme temps limiter lescommunications entre client et serveur en transfrant une partie dudveloppement sur le poste client.

3. LE WEB ORIENTE CLIENT - 1995

3.1. UNE RECOMMANDATION ET DEUX NOUVEAUX LANGAGES

Larchitecture client serveur ne change pas, par contre le client senrichitdune recommandation du W3C, dun langage de programmation pourexploiter cette recommandation et dun langage de feuille de style pourrationaliser la prsentation des pages html et rpondre la rgle desparation des donnes et du formatage.

La recommandation concerne le DOM. Elle commande aux diteurs denavigateurs de faire en sorte que tous les lments dune page marque ausens des langages de marquage (html, xml,) ; soient traduits par lenavigateur en objets identifis dans le cache de lordinateur et que desmthodes soient mises disposition pour accder ces objets en vue dechanger leurs proprits. Ainsi, par le biais dun vritable langage deprogrammation, interprt par le navigateur, souvre la possibilitdinteractivit, deffets visuels et dutiliser de vritables applications sur leposte client.

Le langage de programmation est lECMAScript, standard europen, censtre adopt par les diteurs de navigateurs. Il dispose dune bibliothquevnementielle, offrant aux dveloppeurs de grandes possibilits de mettreen place des effets visuels, et rendre les applications conviviales enfonction de la raction des utilisateurs.


9/116



Le langage de prsentation est le langage de feuille de style CSS (CascadingStyleSheet), pour rpondre la sparation des donnes et du formatage dans unbut douvrir linterconnexion des donnes entre applications et leurrutilisation.

Cest le navigateur qui volue considrablement en intgrant ces technologies. Ilse conforme une recommandation et senrichit de deux nouveaux interprteurs,un pour le langage de programmation, lautre pour le langage de style.

3.2. FONCTIONNEMENT DES SITES INTERACTIFS CT CLIENT

Les pages qui composent les sites interactifs ct client contiennent des lignes decodes javascript dans la page html. Le langage a t cr pour tre utilis ainsi.Notons que ces scripts sont simples mettre en uvre (criture dans la pagehtml), ne ncessitent pas de configuration spcifiques du serveur, et sont trsractifs puisque excuts en local.

A la suite dune requte (demande de page) au serveur, une page contenant un

script est retourne au navigateur comme dans le cas de lchange prcdentconcernant les sites statiques. Le navigateur interprte le code html et le codejavascript quand lvnement survient.

3.3. LIMITES DU WEB ORIENT CLIENT

Ces technologies dvelopper et mettre en place devaient dlester le serveur decertaines tches notamment celles dune partie du contrle des formulaires. Lenavigateur devant assurer le travail, les principaux constructeurs (Microsoft et sun)sattachent intgrer les nouvelles technologies sans concertation, chacunimplmentant son propre langage (JavaScript pour Nestcape et JScript pour

Microsoft) malgr ldition dun standard (ECMAScript) du W3C. Il sensuit bienvidemment des incompatibilits daffichages entre navigateurs et lobligation pourles dveloppeurs de procder un double dveloppement des pages.

Plus grave, ces nouvelles technologies fragilisent la scurit des utilisateurs. Ainsiapparat dans les navigateurs une fonction de dsactivation des scripts pour leverleurs craintes. L encore les dveloppeurs devaient prendre en compte le fait decette dsactivation et crer aussi une version dgrade de la page (version sansscript).


10/116



De plus, des socits ont dvelopps des programmes propritaires (appletsJava, ActiveX, Flash) sexcutant par le biais du navigateur mais ncessitantdans la plupart des cas le chargement de plug-in (extension du navigateur).

Le Web disposait alors dune mosaque de technologies ct client avec unmanque de standardisation, une incompatibilit des navigateurs et surtoutdes risques pour la scurit des utilisateurs.

Lamlioration des technologies de transfert (ADSL), de la capacit decommunication des PC, des possibilits des serveurs ont progressivementconduit les dveloppeurs migrer leurs applications cot serveur pourcontourner les difficults issues du modle orient client.

4. LE WEB ORIENTE SERVEUR - 2000

4.1. ARCHITECTURE TROIS TIERS

La migration va bouleverser dun point de vue structurel les sites et voirlmergence de langages serveurs comme PHP, Java, Python...Larchitecture du serveur va aussi se complexifier en raison de lusage desnouveaux langages et de leur interprteur. Par contre les pages Webadresses au client sont traduites sans problme par les navigateurspuisque composes que de code html.

Ces langages serveurs disposent aussi de fonctions puissantes pour

raliser des connexions aux bases de donnes et rcuprer des donnescorrespondant des requtes prcises en langage SQL. La page html estproduite la vole et rpond exactement la demande du client. Ainsisouvrent des possibilits jusqu lors inconnues de ce qui est baptis siteWeb dynamique .


11/116



Larchitecture bipolaire Client Serveur devient une architecture trois tiers :Client-ServeurServeur de bases de donnes. Ce nouvel environnement vapermettre de produire des modles de pages dont le contenu change enfonction de la demande. L encore une rvolution pour les dveloppeurs.

Par exemple une mme page de description technique pour les pices duncatalogue dont le contenu sadapte en fonction de la pice choisie enrfrence

4.2. FONCTIONNEMENT DES SITES WEB DYNAMIQUES

Les pages qui composent les sites dynamiques ct serveur regroupent lemarquage html et la syntaxe du langage serveur (PHP, Java, Perl).Lassociation de ces codes dans la page est trs souple et parfaitement identifie, limage de ce qui se faisait sur le poste client avec javascript. Notons qulinverse de lexcution du script ct client, dans ce cas le script est excut par

linterprteur sur le serveur. Ce dernier donc besoin dtre configur pour lancerlinterprteur du langage utilis quand cest ncessaire.

A la suite dune requte, gnralement envoye par le biais dun formulaire afin depersonnaliser la demande, le serveur identifie lapplication vise (par exemple enidentifiant lextension de lapplication sil sagit de php) et lance linterprteur(Prprocesseur PHP) pour que celui-ci excute le traitement et recompose unepage html ladresse du client.

4.3. LIMITES DU WEB ORIENT SERVEUR

Malgr lapport positif de larchitecture trois tiers et une plus grande scurit pourles utilisateurs, lutilisation intensive des technologies serveurs prsente aussi desinconvnients. En effet, un grand nombre de requtes aboutit un engorgementdes rseaux et un ralentissement de la ractivit des applications. En effet, Laractivit dun script ct serveur un vnement ncessite lenvoi dune requteau serveur, son excution par linterprteur sur le serveur, le retour de la rponsepar le rseau, son chargement et son affichage par le navigateur. Rien decomparable avec lexcution dun script javascript qui se fait en local.

Notons enfin que lors dune requte, lordinateur du client est plac en attente dela rponse et que le plus souvent un flot important dinformations redondantes y

sont contenues, ralentissant dautant la procdure de transfert et le chargement.Heureusement, bien que des diffrences existent encore entre les navigateurs, lesditeurs tentent de se rapprocher des standards prconiss par le W3C, ce quitend diminuer les problmes dincompatibilit. De plus la valeur ajoute desapplications clients et une plus grande fiabilit des pare-feux et autres anti-virusont progressivement annihils les craintes des utilisateurs qui ne dsactivent plusles scripts.

Ces volutions ont permis une ventilation des applications en raffectant unepartie des tches au client. Il sensuit un allgement de la charge de transfert sur

le rseau et une amlioration de la ractivit des applications.


12/116



5. LE COMPROMIS CLIENT - SERVEUR - 2005

5.1. APPLICATIONS RICHES (RAI)

Les applications quitablement rparties entre client et serveur ont permisde normaliser lemploi de la recommandation DOM et des langagesHTML, JavaScript, et CSS, par ailleurs fortement conseills pourlaccessibilit des agents utilisateurs notamment les appareils ddis auxhandicaps.

Pour palier aux inconvnients dcrits prcdemment sur le blocage desapplications en attente de rponse et lenvoi dinformations redondantes,de nouvelles technologies ont vu le jour comme AJAX (AsynchronusJavascript And Xml) ou les applications java dployes sur le net. Lessolutions se basent sur la technologie objet en permettant denvoyer une

requte en tache de fond sans bloquer lapplication client en attente de larponse. Par exemple la technologie AJAX utilise lobjet XMLHttpRequest.Ainsi les applications deviennent plus souples et plus ractives.

Les applications Internet Riche (RIA Rich Internet Application) sont desapplications qui exploitent ces technologies et qui permettent de disposeren ligne des mmes services quune application de bureau. Ellesdploient un nouveau mode de transfert des donnes entre client etserveur : le mode asynchrone. Lchange est considrablement rduitpuisquil ne concerne que les donnes et la ractivit de lapplication sentrouve renforce.


13/116



5.2. FONCTIONNEMENT DES APPLICATIONS RICHES

Une application riche se compose dune page html regroupant du marquage html

et des scripts javascript qui sont chargs lors de linterprtation par le navigateuren attente de lvnement. Parmi ces scripts, celui quon nomme le moteurdAJAX, habilit grer les requtes en tache de fond suivant lvnement. Quandlvnement se produit, il envoie une requte par le biais de lobjetXMLHttpRequest au serveur qui lance lapplication (par exemple une applicationPHP). Lapplication rcupre les donnes et les retourne au navigateur au formattexte (txt, xml, html, JSON) dans le mme objet. Le script semploie rcuprer larponse dans lobjet et placer les nouvelles donnes dans la page.

En mode asynchrone, la tche est transparente pour lutilisateur qui na pas leblocage en attente de rponse.

Remarque :Plus une volution quun concept, les applications riches (Rich Internet

Application - RIA) sont les termes utiliss pour qualifier les nouveauxtypes dinterface, dergonomie et dusage sur internet. Cela englobe desnotions trs diffrentes que ce soit les plates-formes sur lesquelles lesservices sont dvelopps, les technologies utilises (langages) pour lesapplications ou encore les designs des interfaces. Lobjectif de cettevolution est rendre la navigation plus conviviale et intuitive. Aujourdhui,la forme dun site et son utilisation deviennent deux lments essentiels

dans la conception dapplication web.Les RIA offrent de nouvelles possibilits, notamment la dcentralisationdes donnes en ligne ce qui permet denvisager de nouvelles utilisationsdu web, par exemple : la retouche photo, le mixage vido ou toutes lesmanipulations de contenu riche travers un site internet.

Les pages web deviennent de vritables logiciels, quelles soient chargesdun ordinateur ou dun mobile et permettent de manipuler nativement desvidos, effectuer des glisser - dplacer , stocker des donnes en local,diter directement le contenu dun blog,

Les principaux acteurs du march sur ces RIA sont Adobe, Microsoft etMozilla qui ont dvelopps chacun des technologies propres et noninter oprables. Adobe base sa solution autour de Flash, Mozilla seconforme aux recommandations du web et au standard XML pour dcriredes interfaces riches travers la technologie XML et Microsoftdveloppe un plugin pour navigateur appel Silverlight (comparable Flash).


14/116

les fondements du web statique


LES FONDEMENTS DU WEB STATIQUE

1. LES TECHNOLOGIES DE BASE

1.1. INTRODUCTIONLaccs sans borne aux informations du monde repose sur des rgles decommunication (TCP/IP, HTTP,) pour le transport et lchange de donnes, unlangage de marquage (lHyperText Markup Language -HTML) pour le transfertdinformation et un interprteur du langage (le navigateur) pour traduire et afficherles informations.

2. LES PROTOCOLES DE COMMUNICATION DU WEBLes protocoles dfinissent comment les choses doivent se passer pour quundispositif informatique communique sur un rseau.

2.1. LES R GLES DU TCP/IP

Le protocole TCP/IP (TCP - Transfer Control Protocol et IP - Internet Protocol) estune suite de logiciels permettant de connecter entre eux les diffrentescomposantes informatiques des entreprises, des administrations, des universitset des ordinateurs de particuliers en rseaux mondiaux interconnects. Il a t

conu de faon tre indpendant de tout systme dexploitation et de touteplate-forme. Il regroupe lensemble des rgles de communication pourlacheminement des donnes et la reconnaissance de cibles.

La technologie TCP concerne lacheminement des donnes alors que IP concernele mode dadressage. Ce dernier est bas sur un format dadresse numriquepour identifier de manire unique chaque ordinateur du rseau. Il se compose de4 chiffres la suite compris entre 0 et 255. La partie droite des chiffres identifielhte, la partie gauche le rseau. On distingue alors trois classes de rseaux laclasse A (3 premiers chiffres), la classe B (6 premiers chiffres), la classe C (9premiers chiffres).


15/116



2.2. LE PROTOCOLE HTTP

Paralllement au protocole TCP/IP, navigateurs et serveurs utilisent des rglesspcifiques pour communiquer entre eux : le HTTP (HyperText Transfer Protocol).

Ce protocole permet de lancer une requte du navigateur vers le serveur et delancer une application sur le serveur. Aprs traitement, le serveur retourne lersultat de la requte. Dans cette procdure dchange normalise, navigateur etserveur construisent une chane denvoi dinformations comprenant trois parties :

La ligne de requte ou la ligne de rponse

La section den-tte (groupant des informations caches sur le client ou leserveur)

Le corps de rponse ou denvoi

La description mme de cette transaction distingue deux entits : le poste client et

le serveur do la terminologie client - serveur . Le poste client (navigateur) esthabilit traduire et envoyer les requtes au serveur en sappuyant sur unstandard et en retour, interprter les rponses du serveur (en gnral des pageshtml). Le serveur ralise, au moins trois oprations, la rcupration etlinterprtation de la requte, le lancement de lapplication (sil y a lieu), laconstruction et lenvoi de la rponse.


16/116



2.3. LE CGI

Le CGI reprsente une procdure dchange normalise entre le client et leserveur. Elle regroupe une srie de conventions toutes prises en charge par le

navigateur et permettant ce dernier de communiquer avec le serveur Web et delancer des applications distance.

Linterface CGI (Common Gateway Interface) est la plate-forme dominante pourconstruire des applications Web interactives. Elle a t mise en place sur lun despremiers serveurs dapplication (NCSA HTTPD). Sa simplicit et la mise disposition libre de son code, en ont fait (1994) un standard de limplmentationdapplications Web. Depuis lors, dautres mthodes de dveloppementsdapplications Web on vu le jour, comme Active Serveur Page (ASP) de Microsoft,Allaire Cold Fusion, PHP, Servlets JAVA, .

2.3.1. LE FONCTIONNEMENTUn programme CGI sexcute sur le serveur (Apache), en rponse la requtedun client (navigateur).

Son lancement se ralise laide dun lien excutable (URL longue) par le biaisdun formulaire. Il est suivi de lexcution dune application, puis du renvoi au clientdune page HTML construite la vole, sans tre stocke dans un fichier.

Le programme CGI fournit un en-tte pour que le navigateur puisse identifier lecontenu du document, retourn sous ltiquette "Content-type".

Remarque :Dans une transaction http "client-serveur" un certain nombre dinformations

invisibles sont changes entre le serveur et le navigateur, comme len-tte

retourn par tout programme CGI. Il indique au navigateur, le type de

transaction, la date, le nom et la version du serveur, ltat de la connexion,

comment traiter le contenu du document retourn

La ligne den-tte fournie sous ltiquette Content-type par le programme CGI,

permet au navigateur didentifier le document retourn. Par exemple, pour du

code html, linformation produite est : content-type :text/html

2.3.2. LEMPLACEMENT DES SCRIPTS CGI

Lors de lenvoi dune requte par un lien excutable, le serveur reconnat le scriptCGI et lexcute automatiquement, il est configur par dfaut pour cela.

Dans le cas dun serveur Apache, le rpertoire "cgi-bin" regroupe tous les scriptsCGI. Ainsi, toute requte dun client sur un fichier de ce rpertoire est interprtepar le serveur comme une demande dexcution dun programme CGI.

Dune manire gnrale, les informations ddies un programme CGI sontrassembles dans des formulaires HTML, puis encodes par le navigateur lors delenvoi, sous forme dune chane de caractres dite "chane de requte". Dans lecas de la mthode GET, cette dernire est ajoute la suite du lien excutable


17/116



aprs un point dinterrogation et dirig vers linterface CGI. Dans la mthodePOST la chane de requte est place dans la partie cache de la chane etvhicule vers lentre standard du serveur.

2.3.3. LES LANGAGES DCRITURE DES SCRIPTS CGITout langage capable de gnrer une sortie standard peut tre utilis pour criredes scripts CGI. Sur un environnement UNIX, on pourra utiliser les langages C,Fortran, Perl, Tcl. Sur un environnement Windows-NT, on utilisera Visual C++,Visual Basic. Sur un environnement MacIntosh, Apple Script,

Le langage le plus rpandu du monde UNIX est Perl. Il se prte particulirementbien au script CGI. Son inconvnient majeur est dtre un programme interprt(de ce fait, davoir besoin dun interprteur) et doffrir un niveau de scurit

moindre quun langage compil (Ex : C). Ses avantages sont de disposer dungrand nombre de bibliothques (module "CGI.pm") et dune multitude deprogrammes librement interchangeables sur Internet, facilitant et allgeantlcriture des scripts. Notons que le module "CGI.pm" associ linterprteur,facilite les oprations de conversion de donnes dentre en donnes Perl et degnration du code HTML.

Remarque :Les langages C et Java sont aussi parfaitement adapts lcriture de scripts

CGI. Il sagit de langages compils, pouvant gnrer des fichiers directement

excutables. Toutefois, ces langages sont plus compliqus mettre en application

dans le dveloppement et plus difficile dboguer quun langage interprt. Les

avantages rsident dans la performance, la scurit et laptitude aux multi-tches.

3. LE NAVIGATEUR OU LE CLIENT

3.1. GNRALITS

Le navigateur, un outil indispensable pour naviguer sur le Web. Il est linterprteurdu langage html. Sans lui pas de dcodage des pages envoyes par le serveur,pas daffichage et encore moins de prsentation. Au fil des annes, il volue limage des technologies lies au Web sous la pression des utilisateurs.

Au dpart simple interprteur du seul langage html, il intgre aujourdhui des outilspermettant dexcuter des scripts javascript, de prsenter des pages formatespar feuille de style CSS ou XSLT, de vrifier les rgles syntaxiques desdocuments xml, de mettre en uvre la technologie objet Il est un outil puissantpour interprter mais aussi pour communiquer avec le serveur. En effet il prend encharge la normalisation de la chane requte de manire transparente pourlutilisateur.


18/116



Cet outil a pourtant un inconvnient majeur, son manque de standardisation. Eneffet produit sur un march libre, il souffre de la concurrence des deux principauxacteurs du Web en matire de navigateur, Sun et Microsoft. Malgr des efforts denormalisation vers un standard ces dernires annes, on peut encore constater

que des incompatibilits subsistent entre les deux principaux outils que sontMozilla (Sun) et Internet explorer (Microsoft).

3.2. LE PLUG-IN FIREBUG DE FIREFOX

Un certain nombre doutils intgrer au sein du navigateur peuvent tre employspour aider les utilisateurs dans le dveloppement, lanalyse de transaction HTTP,le dboguage de scripts Ces outils se prsentent sous la forme de programmes charger (plug-in), mis disposition en gnral sur le site de lditeur.

Lun des plus utilis est le plug-in "firebug" du navigateur Firefox. Il permet

danalyser une transaction HTTP ou encore dexploiter les mthodes du DOMnotamment pour la mise au point de scripts javascript.

3.2.1. INSTALLATION DE FIREBUG

"Ouvrir" le navigateur Firefox. Aller dans le menu "Outils" et activer la commande"Modules complmentaires". Dans la zone de recherche de linterface "Modulescomplmentaires" qui apparat indiquer firebug, puis valider. Aprs la recherchecliquer sur lhyperlien "voir les rsultats".

Menu "Outils" commande"Modules complmentaires".

Interface "Modulescomplmentaires", saisie Firebug.

La page daccueil des modules complmentaires de Mozilla-Firefox donne lesrsultats de la recherche : cliquer sur le bouton Tlcharger Firebug.

Page daccueildes modulescomplmentaires deMozilla. TlchargerFirebug.


19/116



puis louverture de linterface "installation du logiciel", cliquer sur le bouton"installer maintenant".

Dans linterface "Installation dun logiciel",cliquer sur le bouton" installer maintenant".

4. LHYPERTEXT MARKUP LANGUAGE - HTML

4.1. INTRODUCTION

Le HTML est le langage utilis pour encoder les documents du World Wide Web .Ilsagit du langage standard de mise en page et de liens hypertextes, interprt parle navigateur, quelque soit le systme dexploitation (DOS, Mac Intosh, UNIX,Windows, ). Il indique au navigateur de quelle manire le contenu dune page(images, textes, vido) doit tre affich et comment associer dautres pages parle biais de liens hypertextes.

Le langage HTML dans sa version dorigine se limitait la cration de pages pourle transfert de textes et de quelques images, avec pour seul dynamisme lesliaisons hypertextes. Ds 1999, avec la dfinition du langage XML, le W3C

privilgie lchange de donnes entre agents utilisateurs en dsignant unsuccesseur, le XHTML, et permettre linterconnexion des applications et desservices c'est--dire la rutilisation des informations quelque soit le mdia.

Dans sa premire version (XHTML 1.0), ce standard nest rien dautre quuneadaptation de HTML en application XML 1.0, sans changement de syntaxe, niapport de nouvelles fonctionnalits. Seule, la dclaration se modifie avec unepremire ligne de page Web indiquant quil sagit dun document XML.

La dclaration du document XHTML

Entre cette partie et la page balise par llment html (dsormais nommeracine), sinscrit le prologue. Cest l que figure une succession de dclarations,appeles DOCTYPE, qui prcisent les lments et les entits figurant dans ledocument ainsi que lespace de noms. Il sagit de lidentifiant dun sous ensembleXML identifi. Ces informations sont ddies linterprteur de cette nouvellepage Web, c'est--dire le navigateur de tout agent utilisateur (mobile, portable,agenda lectronique, diffuseurs mdia pour handicap).


20/116



La dclaration est prise en compte par les navigateurs pour dclencher uncontrle syntaxique et adapter les donnes lapplication.

Le prologue et la racine dun document XHTML

La version XHTML 1.1 est une reformulation plus stricte de la version 1.0. Elleprne la sparation des donnes et du formatage qui devient entirement gr parles feuilles de style. Certains lments et quasiment tous les attributs du HTML debase sont dclars obsoltes dans la cette version, notamment ceux ddis auxfonctions de prsentations. Le W3C entend avec cette avance largir la

possibilit daccder Internet partir de tout terminal en particulier des mobiles.La version 1.1 sappuie sur une DTD centrale (celle de XHTML 1.0) autour delaquelle gravitent 28 modules pouvant la complter suivant le terminal vis. Souscette forme modulaire, le dveloppeur construit ses pages en ne prenant que lesmodules dont il a besoin autour dun noyau central. Il cre un langage spcifiquepour un agent utilisateur ddi.

Remarque :

Ces avances nont pas fait lunanimit des acteurs du Web qui, pousss

par les entreprises ont souhait labandon de la norme XHTML 2.0(vritable labyrinthe dont la normalisation tardait venir) et la mise en

place dun nouveau standard HTML (version 5.0). Il prendrait en compteles nouvelles possibilits technologiques des mobiles et fixes en faisantdes pages Web de vritables logiciels utilisant le moteur des navigateurs.Cette volution entrane le passage dun Web constitu de documents un Web constitu dapplications en ligne. Ces applications sontaujourdhui dveloppes partir dune mosaque de technologies

propritaires (Framework, Ajax, Flash, Java, Silverlight, XML, ) souventincompatibles. Il sagit pour le W3C de dfinir ce nouveau standard

XHTML 5.0 pour viter les incompatibilits et donner un large accs auxtlphones portables de nouvelle gnration, aujourdhui principaux


21/116



agents utilisateurs dInternet.

En conclusion, lInternet riche est le mariage entre graphistes et

dveloppeurs pour penser de nouveau usages du web. Toutefois, uncertain nombre dinconvnients demeurent, comme par exemple changerles murs et habitudes de navigation ou installer des plug-in au sein desnavigateurs. Le vritable dfi du W3C pour de HTML 5.0 est de trouver unvritable consensus des diteurs autour des technologies existantes.

4.2. LE LANGAGE HTML

HTML nest pas un langage au sens informatique du terme comme on lentendavec les langages JAVA, C++, javascript ou PHP. Il est un langage de marquagedont le rle principal est de distinguer des portions de texte, des titres, des

paragraphes, des listes

4.2.1. STRUCTURE DUNE PAGE HTML

La page HTML comprend deux parties (fig 4.2a), inclues dans un conteneur(balises ouvrante et fermante de mme nom) :

Len-tte dlimite par les balises , dans laquelle sontdfinis des commandes et des paramtres stratgiques, non ddis laffichage (par exemple, la liaison une feuille de styles CSS ou lesmta-informations). Aucune information daffichage ne doit apparatredans cette partie

Le corps dlimit par les balises contenant linformation afficher, les images, le son, les liens hypertextes et aussi du codeJavaScript et des balises de formatage


22/116



4.2.2. LA SYNTAXE HTML ET LE BALISAGE

Chaque lment HTML est appel balise ou marqueur. Il est constitu dun nom

prdfini (br pour un retour ligne, h1 pour un titre de premier niveau, ) encadrpar deux dlimiteurs ouvrant (). La plupart des lments HTMLvont par paire et sont constitus dune balise de dbut et dune balise de fin. Leprincipe du balisage tant de distinguer des portions de texte, ou des zones de lapage Web et leur attribuer des proprits de formatage par le biais de feuille destyle ou des proprits daction par le biais dun langage de script. La balise defermeture se distingue de celle douverture par le signe (/) plac avant le nom. Parexemple :

ceci est un titre de 1er niveau

Limbrication des balises permet de personnaliser le formatage, toutefois, il doit

suivre imprativement la rgle de fermer en premier les balises dernirementouvertes . Il sagit dailleurs dune rgle syntaxique respecter pour le XHTML.

Dans la balise douverture peut sinscrire un ou plusieurs attributs spars par unespace, respectant la syntaxe :

Nom_d_attribut="valeur"

Ce complment dinformation vise indiquer au navigateur un formatagespcifique par feuille de style (style="color:blue"), une adresse(href=http://www.w3c.org/) ou encore une gestion dvnement(onclick="document").

Certaines balises en nombre limit, ne possdent pas leur homologue defermeture. Elles apparaissent comme des commandes daction directes pour lenavigateur (Img pour limage, br pour le retour ligne, p pour le paragraphe ).

Remarque :HTML 4.01 regroupe les spcifications les plus rcentes dites par le W3C. La

plupart des navigateurs le prennent en charge presque totalement dans leur

dernire version. Attention, toutefois les plus anciens ne reconnaissent pas

toujours le standard (par exemple : la commande @import ou la liaison

plusieurs feuilles de styles, ). Cependant, il existe des attributs et des balises

propritaires chaque navigateur quil convient dviter pour crire les pages leplus universellement possible. On sattache vrifier la prise en charge des pages

HTML par les deux principaux navigateurs savoir, Internet explorer et Mozilla

ou Firefox .


23/116



4.2.3. LHYPERLIEN

Parmi les lments HTML, lhyperlien est sans conteste celui qui a contribu pour

une large part au succs dInternet. Sa syntaxe stablit comme suit :

Il sagit de la balise ouvrante et fermante "a", avec un contenu texte donnant uneinformation sur la page qui sera charge si le lien est activ. A lintrieur de labalise ouvrante lattribut "href" indique le chemin de la page HTML rcuprer engnral sur un site distant par le biais du protocole HTTP.

4.2.4. LA PAGE DACCUEIL DUN SITE

"Ouvrir" dans lditeur de texte un modle de page html et lenregistrer sous"marmiton.html". En utilisant la convivialit des raccourcis offerts par lditeur de

texte, concevoir la page regroupant un titre, deux traits, une image ("toque.bmp"dans le dossier image), le tout centr dans la page, puis une liste.

Chaque lment de la liste est un hyperlien, associant le texte aux pagessuivantes :

"Pommes la moutardes" associe la page : recette_pomme.html"Lasagnes de courgettes" associe la page : recette_lasagne.html"Paupiettes aux pruneaux" associe la page : recette_paupiette.html"Philtre dAmour" associe la page : recette_philtre.html

Les pages "recette_xxx.html" sont ralises et enregistres dans le rpertoirecourant. Voir le rsultat attendu figure ci-dessous


24/116



4.2.5. PRSENTATION AMLIORE AVEC DU STYLE

"Reprendre" dans lditeur detexte la page "marmiton.html".En utilisant le langage defeuille de style, amliorer laprsentation de la page pourconserver son intgrit deforme, quelque soitlouverture de la fentre dunavigateur.

Voir le rsultat attendu figure

ci-contre

5. LE SERVEUR WEB

5.1. GNRALITSLe serveur http est un logiciel servant des requtes respectant le protocole HTTPentre client et serveur. Un ordinateur sur lequel fonctionne un serveur http estappel serveur Web.

Il y a deux sens communment admis aux termes de serveur Web :

Le service : il concerne lhbergement des applications et des servicesauxquels le client accde par un navigateur (courrier lectronique, moteurde recherche, sites Internet, )

Lenvironnement : il sagit des composants logiciels regroups au sein du

serveur pour excuter les applications et fournir les services. Cela


25/116



regroupe le systme dexploitation du serveur lui-mme et les diffrentsinterprteurs, compilateurs, moteurs dexcution et autres outilsncessaires pour excuter les scripts du langage serveur choisi pourraliser un site Web dynamique.

Deux serveurs se partagent environ 90% des parts du march : Apache, serveurgratuit (environ 70% des parts de march fin 2008) et Microsoft (Personal WebServer et Internet Information Service), serveur payant.

Le succs dApache est facilement comprhensible : il est gratuit, portable duneplate-forme lautre, complet, robuste et ses performances sont excellentes (siteApache : http://www.apache.org). De plus, le protocole TCP/IP fait partie de sonnoyau dexploitation.


26/116



Remarque :Lhbergement sur un serveur personnel est une tche dlicate, car elle implique

en particulier ladministration et la scurit du systme. Il est recommand

dopter pour lhbergement Web auprs dentreprises spcialises et laisser les

charges de gestion du systme lhte, mme si lespace doit tre lou.

5.2. FONCTIONNEMENT DAPACHE

Au dmarrage, Apache lit le fichier de configuration "httpd.conf". Les modificationsde lignes dinstructions dans ce fichier conduit une modification ducomportement du serveur. Par exemple, pour limiter laccs, spcifier lescaractristiques avances (utilisation des SSI) ou indiquer le chemin delinterprteur de PHP.

Ce fichier regroupe des instructions actives (non prcdes du signe #), desinstructions dsactives et des commentaires (prcdes du signe #). Ainsilinsertion ou la suppression du #, permet dactiver tous les modules dont leserveur a besoin pour sa configuration. Cela comprend les spcifications daccset de ressources (au sein du mme fichier).

Une fois dmarr, le travail dApache est de se mettre lcoute des requtes, ladresse o il a t configur.

Remarque :Apache excute automatiquement la page nomme index.html situe dans un

rpertoire cibl par un lien http, cela afin de faciliter laccs la page daccueil

dun site sans besoin de la nommer. Notons que le test de fonctionnement

dApache en lanant la ligne de commande : http://localhost , renvoi la page

index.fr, page daccueil du serveur qui se trouve dans le rpertoire htdocs

(rpertoire cibl par dfaut dans la configuration dapache).


27/116



5.3. INSTALLATION DAPACHE

Crer un rpertoire apache sous C:/ .

1- INSTALLATION DAPACHE"Ouvrir" le rpertoire "apachexecut" et lancer lexecutable :

apache_2.0.43-win32-x86-no_ssl.exe

Suivre les instructions en indiquant le moment venu, le rpertoire "C:/apache"comme rpertoire dinstallation et "localhost" comme nom de serveur et nom dedomaine.

2- CONFIGURATION DAPACHE

- Rcuprer dans lditeur de texte le fichier "httpd.conf" (ou http.conf suivant laversion dapache) du rpertoire "conf" dapache.

Vrifier (ou remplacer sil y a lieu) les lignes suivantes :

Ligne ServerName conforme :ServerName localhost

Ligne ServerAdmi conforme : ServerAdmi me@localhost

Ligne DocumentRoot conforme lidentification du chemin du rpertoire htdocsdapache :

DocumentRoot C:/apache//htdocs

Enregistrer et fermer le document "httpd.conf".

3- TEST DE BON FONCTIONNEMENT

- Apache est lanc automatiquement (icne dans la barre dtat). Si ce nestpas le cas, lancer apache partir du menu "dmarrer" de windows. "Ouvrir" unnavigateur et dans la fentre dadresse inscrire :

http://localhost

puis valider. Si linstallation est correcte, le rsultat attendu dans le navigateurest conforme la figure ci-dessous.

Page daccueil du serveur

Apache dans le cas duneinstallation russie.


28/116



5.4. INSTALLATION DUN SITE STATIQUE SUR APACHE LOCAL

"Copier" dans le rpertoire "htdocs" dapache le rpertoire "recettes" du stage. Ala suite, vrifier que le serveur est bien lanc et inscrire dans la ligne dadresse

dun navigateur la commande :http://localhost/recettes/marmiton.html

Cette fois laffichage de la page "marmiton.html" est ralise par le protocole httpconformment ce qui se fait pour la consultation des sites Web.

LANCEMENT AUTOMATIQUE DE LA PAGE DACCUEIL DUN SITE

"Ouvrir" dans lditeur de texte la page "marmiton.html" du rpertoire"htdocs/recettes " dapache et la renommer "index.html". Changer la couleur dutitre. Enregistrer, puis inscrire dans la ligne dadresse du navigateur :

http://localhost/recettes


29/116



5.5. ANALYSE DUNE TRANSACTION HTTP AVEC FIREBUG

"Ouvrir" lditeur de texte et charger les pages "livre_d_or. html" et"livre_d_or2. html" du stage. Vrifier que la mthode denvoi du formulaire est bieninitialiser "get" (attribut method="get" de llment form).

Indiquer dans la ligne dadresse du navigateur Firefox l url suivante :http://localhost/livre_d_or.html

A laffichage du formulaire, faire commande "Outils/Firebug/Ouvrir Firebug" (ouF12) pour ouvrir linterface Firebug dans lditeur.

Vrifier que le panneau rseau est activ (sinon dans la barre des tche cliquer laide du bouton droit de la souris sur le scarab (logo de firebug) pour faireapparatre le menu contextuel, puis cliquer sur la commande "activer tous les

panneaux"). Renseigner les zones de saisie du formulaire puis "valider". Voir lersultat de la transaction dans la zone Firebug, onglet reseau.

Refaire une transaction en modifiant la mthode (attribut method="post" dellment form).

Le formulaire denvoi du

client

Le retour de la rponsedu serveur

Panneau rseau de firebug :Mthode Get (les paramtres dans la partie visible

de la transaction,)

Panneau rseau de firebubMthode Post (les paramtres dans la

partie cache de la transaction)


30/116



6. LES LIMITES DU WEB STATIQUE

Absence totale dinteractivit

Impossibilit dobtenir un effet visuel

Cycle de traitement des hyperliens long et fastidieux

Serveur sous dimensionn pour un trafic en forte augmentation

Engorgement des rseaux

La solution envisage, mettre en uvre des technologies cot client pourdsengorger les rseaux et amliorer linteractivit.


31/116

Le Web oriente client


LE WEB ORIENTE CLIENT

1. LES TECHNOLOGIES DE BASE

1.1. INTRODUCTION

Larchitecture client serveur ne change pas fondamentalement mais le clientsenrichit de nouvelles technologies visant dcharger le serveur de certainestches (par exemple le contrle de formulaires), dsengorger le rseau,rationaliser le formatage en sparant les donnes de la prsentation et par lmme, en ouvrant lchange de donnes entre applications c'est--direlinteroprabilit.

Cette avance repose sur une recommandation du W3C, le Data Objet Model(DOM), un langage de programmation excut chez le client (javascript, Jscript,ECMAScript) et un langage de feuille de style, le Cascading StyleSheet (CSS).

2. LA RECOMMANDATION DOM

2.1. GNRALITS

Le DOM (Data Objet Model) du W3C est une recommandation laquelle lesnavigateurs sont censs se conformer et qui a pour finalit de transformer tous leslments de la page Web en objets dans le cache de lordinateur.

Ainsi lors du chargement dune page HTML, le navigateur cre une tracelectronique (dite arbre du document) en mmoire et met disposition des outilspour y accder. Chaque lment composant la page est transform en un objetappel nud, positionn suivant une hirarchie, dfinissant ainsi un chemindaccs llment.

Il devient alors possible en utilisant un langage de script oprant au sein du clientde modifier les proprits de llment et dagir sur le positionnement, la visibilitou encore lordre dempilement Ces modifications soprent par le biais desoutils mis disposition par le navigateur, lors de la cration de larbre. Cest delassociation de ces concepts, langages et recommandations que sarticule latechnologie DHTML (Dynamic HTML). Un vritable dynamisme des pages HTMLest cr sur une action vnementielle, sans recours au serveur.


32/116



2.2. LARBRE DOM ET LES MTHODES AVEC FIREBUG

"Ouvrir" dans lditeur de texte la page "essaiDom.html". Afficher cette page parle biais du navigateur Mozilla. Activer firebug et cliquer sur longlet DOM pourdrouler lensemble des mthodes mises disposition pour retrouver les lmentsde la page dans le cache.

Cliquer sur document.

A la suite cliquer sur "get childNodes" pour rvler les lments composant ledocument, le doctype de la page (lien 0) et llment html (lien 1). Cliquer sur lelien 1 pour rvler le contenu de llment html puis de nouveau cliquer sur " getchildNodes" pour rvler les enfants head et body de llment Poursuivre lamanipulation jusqu drouler tout larbre DOM.

Fentre de firebug sous longlet HTML pour le code de la Page essaiDom.html

Fentre de firebug sous longlet DOM pour le dploiement de larbre de la pageessaiDom.html dans le cache de lordinateur. Dans la fentre, la liste des enfants(ChildNodes) de llment body : Le premier enfant correspond llment h2 etau nud [0] du nud parent body dans larbre.


33/116



2.3. LA NAVIGATION DANS LARBRE DOM

"Ouvrir" dans lditeur de texte la page "essaiDom.html". Complter le documenten ajoutant un titre de niveau 3 (balise h3) avec du texte conformment limage

ci-contre.Ouvrir firebug et cliquer sur longlet console. Si la fentre ddition nest pas visiblecliquer sur le bouton rouge dans le coin infrieur gauche de la fentre.

Console sans fentre ddition. Cliquer sur pour avoir la fentre ddition

Dans la console crire diffrentes lignes de commandes pour extraire le type dunlment, son nom, sa valeur... (voir exemples ci dessous)

A la suite cliquer sur le bouton excuter de la fentre ddition pour faireapparatre le rsultat du script de lditeur dans la fentre de la console.


34/116



3. LES LANGAGES JAVASCRIPT, JSCRIPT, ECMASCRIPT

3.1. UN LANGAGE ORIENT OBJET COT CLIENT

Cest un langage interprt, qui ncessite un interprteur. Il possde denombreuses caractristiques des langages objets sans tre un langage objetcomme le langage JAVA dont il est driv. Il est dit "orient objet". Les objets quilmanipule sont ceux dfinis par les balises HTML (liens, images, champs, ) ouceux prdfinis (botes de dialogue). Le noyau du langage est intgr au sein dunavigateur et permet dinsrer dans les pages Web des scripts (petitsprogrammes), pour produire des traitements de contrle ou du dynamisme.

Cest le langage le plus populaire pour crire des programmes excutables ctclient. Le langage a t cr par Netscape (JavaScript) puis repris par Microsoft,sous le nom de JScript. Il a t standardis par le W3C sous le nom dECMAScript(ou encore ECMA-262). Cependant, les deux principaux constructeurs ont refusle standard et pour sen tenir leurs propres implmentations, ce qui gnre biensouvent des incompatibilits dans linterprtation des pages par les navigateurs.

3.2. INSERTION DU JAVASCRIPT DANS LA PAGE HTML

Il y a trois mthodes possibles pour insrer du code JavaScript dans un document

HTML :

Ecriture du code entre les balises . Ces balises dlimitentune zone interprte par le navigateur comme un programme excuter lorsdu chargement. Lattribut "language" indique au navigateur le nom du langageet sa version. Le script sinscrit soit dans len-tte de la page entre les balises (stockage dune fonction en mmoire), soit dans le corpsde la page (entre les tags ). Le navigateur interprte le codeau cours du chargement et affiche le rsultat sil y a lieu ou le garde enmmoire, en attente dun vnement. Le programme JavaScript peut treaussi externe pour le rendre accessible dautres pages. Il sera charg dans

la page par le biais de lattribut "src" associ une URL, suivant la syntaxe :

Utilisation du pseudo-protocole JavaScript dans une URL. Il sagit dexploiter lapossibilit de remplacer le protocole http dune URL par le terme JavaScript etdappliquer un code la suite. Le terme de pseudo protocole vient delanalogie qui existe avec la syntaxe du protocole dadresse classique. Cetteprocdure associe un vnement provoque lexcution du code lorsquelvnement se produit. Par exemple pour lancer une fonction prdfinie partir dun hyperlien) la syntaxe est la suivante :

Excuter la fonction1


35/116



Exploitation des attributs du gestionnaire dvnements. JavaScript a t crpour tre intimement li HTML. Pour cette raison un certain nombredvnements produits par lutilisateur ont t rpertoris et regroups dansune sorte de bibliothque appele gestionnaire dvnements. Lobjectif tant

de programmer trs simplement par une fonction, la raction des navigateursface des vnements utilisateurs (clic de souris, modification de la valeurdun champ, frappe sur une touche du clavier). Par exemple, le passage ducurseur de la souris sur un hyperlien pour dclencher lexcution du code dfinidans une fonction se formalise sous la syntaxe :

cliquer ici

Remarque :De ce qui prcde, le dclenchement de linterprteur javascript au sein

du navigateur se rsume trois indicateurs. La balise qui dlimite la zone dinterprtation du code par lenavigateur jusqu la balise de fermeture . Un attribut dugestionnaire dvnement dans une balise html (ils dbutent tous paron).. Un protocole javascript appliqu un hyperlienPour viter laffichage du code JavaScript par les navigateurs anciens,lensemble du code est mis sous forme de commentaire (entre ). Cela ne perturbe en rien les navigateurs habilits lire ce code. Leconteneur sera insr la suite, porteur dunmessage indiquant que le navigateur ne lit pas le code JavaScript.

3.2.1. UTILISATION DES MTHODES DU GESTIONNAIRE D VNEMENTS"Reprendre" dans lditeur de texte les pages "recette_pomme.html","recette_lasagne.html", "recette_paupiette.html" et "recette_philtre.html".Remplacer lhyperlien de chacune des pages par un bouton suivant la syntaxe :

Liste des recettes

Reprendre" la page "marmiton.html" pour insrer un script javascript dans la page,indiquant lheure.

Le script sinsre sous le titre dans un lment div centr. Aprs avoir constatson bon fonctionnement, en faire un script externe et nomm le fichier javascript :"heure.js". Voir le rsultat attendu figure ci-dessous


36/116




37/116



3.3. LES BOTES DE DIALOGUE

JavaScript utilise trois types de botes de dialogue, appeles respectivement par :

alert() : Pour afficher un texte court (texte mis entre guillemets dans laparenthse de la mthode alert(). La bote est referme par un bouton [OK](figure 3.3a)

confirm() : Pour poser une question ou passer un message en attente duneconfirmation par le boutons [OK] ou d invalidation par le bouton [Annuler]. Laquestion ou le message sont mis entre guillemets dans la parenthse de lamthode (figure 3.3b)

prompt() : Pour saisir un mot de passe ou un code comme rponse unequestion. Lenvoi de la saisie sopre par le bouton [OK]. Le bouton [Annuler]rinitialise la saisie et bloque lenvoi. (figure 3.3c)

Figure 3.3a

Bote message alert()

Figure 3.3b

Bote de dialogue confirm()

Figure 3.3c

Zone de saisie prompt()

Remarque :

Lappel de ces botes de dialogue peut se faire de diverses manires. Par

exemple : - louverture de la page (automatique)

- par lactivation dun bouton

- par un vnement (clic sur image)


38/116



3.3.1. UTILISATION DES BOTES DE DIALOGUE (BOTE CONFIRM())

"Reprendre" dans lditeur de texte les pages "recette_pomme.html","recette_lasagne.html", "recette_paupiette.html" et "recette_philtre.html". Pour

chacune de ces pages, lors de lactivation du bouton "liste des recettes", ondemande au visiteur par le biais dune boite de dialogue confirm(), sil a bien nottous les ingrdients de la recette. Le code javascript est dclench surlvnement onclick et dtermine sil y a retour ou non la liste. Un testconditionnel dtermine le traitement suivre li au choix du visiteur. Insrer leslignes de code suivante :


39/116



3.4. LA PROGRAMMATION AVEC JAVASCRIPT

3.4.1. GNRALITS

La syntaxe JavaScript est issue du langage JAVA, lui-mme issu des langages Cet C++. Toutefois, JAVA et JavaScript sont deux langages diffrents. JAVA est unlangage de programmation au mme titre que C, C++, Pascal, Quand ilsexcute dans le contexte Internet (applet dans une page HTML), il reste localisdans une zone de la page HTML, bien distinct du code HTML et ncessite lemoteur dexcution JAVA intgr au navigateur, diffrent des interprteursrsidents. De plus, les objets dfinis dans la page ne sont pas accessibles depuislapplet.

A linverse, JavaScript est parfaitement intgr HTML. Le langage a t

dvelopp pour dynamiser les pages. Sa force rside dans sa simplicit.

3.4.2. LES RGLES DE BASE

Ce sont des rgles gnrales qui se trouvent dans la plupart des langages deprogrammation :

JavaScript distingue les majuscules et les minuscules. Par convention, lesmots-cls sont crits en minuscules

JavaScript ignore les espaces entre symboles. Espaces, tabulations et sautsde ligne seront utiliss pour la lisibilit du programme

Toutes les instructions se terminent par un point virgule (;). Dans le cas olinstruction est suivie dun saut de ligne, on peut se dispenser de le placer.Cela contraint de ne jamais couper une instruction par un saut de ligne

Les commentaires sont placs gnralement entre les dlimitations /* et */ etignors par le navigateur. De mme, toute ligne prcde par // est ignore etdonc peut tre utilise pour le commentaire

// voici un commentaire (C++)

/* voici un second commentaire dans la ligne */

Les noms de variables, de fonctions ou dtiquettes sont des identificateurs. Ilssont composs de lettres, de chiffres, de (-), de ($) ou (_) en nombrequelconque. Le premier caractre de lidentificateur ne peut pas tre un chiffre

Les mots-cls et les mots rservs sont des mots prdfinis qui ont unesignification ou une fonction prcise pour linterprteur JavaScript. De ce fait,ils ne peuvent pas tre utiliss comme identificateur. Ils sont les lments dulangage JavaScript


40/116



3.4.3. LES LMENTS DE PROGRAMMATION

Les oprateurs : Ils servent dfinir des conditions de traitements particuliers(dfinition dune fonction, application dune boucle, gestion dlments, ) ou

combiner ou associer diffrents lments (constantes et variables), pourcrer des expressions. On distingue : les oprateurs de comparaison (+ ;== ; != ; < ; ; >=) et les oprateurs logiques ( !; || ; &&).

Les variables : Il sagit dobjets simples, reprsents sous la formenom="valeur". Les rgles de base du langage sappliquent aux noms desvariables (voir prcdent). La valeur reprsente un nombre, une chane decaractres ou un objet. Les variables peuvent tre utilises dans le programmesans tre dclares. Toutefois, la dclaration est conseille lors duneutilisation locale de cette variable. Par exemple dans la dfinition dunefonction. Elles sont dclares par le mot-cl "var".

Les types de donnes : On distingue trois types de donnes simples (lesnombres, les valeurs boolennes, les chanes de caractres) et deux types dedonnes composes (les objets et les tableaux).

Les conditions et les boucles : Ce sont les instructions de traitement. On lesretrouve dans la plupart des langages de programmation suivant la mmesyntaxe. On distingue trois principales :

- if: charg dexcuter un traitement lorsquune condition donneest remplie

If (condition) {traitement excuter si la condition est vrifie}

- ifelse : extension de linstruction if... Le mot-cl else ajoute lapossibilit de spcifier entre accolades une ou plusieursinstructions qui sexcutent si la condition if nest pas vrifie

if (condition) {traitement excuter}else {traitement excuter dfaut de la condition}

- for : charg de raliser des boucles (excution dune action, uncertain nombre de fois). Cette instruction est associe troisparamtres (respectivement une instruction, une condition, uneitration) mis entre parenthses, qui sont suivis par une pairedaccolades, contenant le traitement raliser dans le cadre de laboucle.

for (instruction; condition; itrateur) {traitement}

- while: correspond la boucle for pour laquelle le paramtreditration a disparu, seule subsiste la condition. Tant que lacondition est vrifie, le traitement dune ou plusieurs instructionsest excut

while (condition) {traitement}


41/116



- dowhile: est comparable aux fonctions de linstruction while la diffrence que les instructions de traitement sont places entreaccolades avant la condition vrifier et aprs linstruction do.Ainsi, le traitement est excut au moins une fois avant la

vrification de la condition

do {traitement} while (condition)

- break: pour interrompre une boucle en cours dexcution

- switchcasebreak: compare une valeur plusieurs autresvaleurs et dclenche autant dactions diffrentes quil y a decomparaison. Equivalent un multi-if.

switch(valeur) {casevaleur1 :instruction1 ; break ;

casevaleur2 :instruction2 ; break ;

casevaleurn : instruction ; break ;}

3.4.4. UN TABLEAU DE CALCUL DYNAMIQUE

"Ouvrir" dans lditeur de texte la page "tableaujs.html", et lenregistrer sous "tableaujs1.html ". Raliser un script javascript laide dune boucle pour crer leslignes dun tableau dans lequel apparat dans chacune des cellulesrespectivement un nombre son carr et son cube, pour des valeurs variant de 1 9.

Script ci-dessous

Amliorer le script en passant en paramtre le nombre de lignes du tableau par lebiais dune bote de dialogue "prompt()" et en ajoutant un bouton sous le tableaupour relancer la procdure.

La page daccueil


42/116



Le tableau dvelopp avec le nombre de lignes indiques aprs validation ok

Linterface lors de lannulation ou dindications errones dans la zone de saisie dela bote prompt().

Remarque :Le rsultat dun traitement peut tre affich dans une fentre laide de

linstruction : document.write("valeur"), o "valeur" prend la forme duneconcatnation dindices, variables, fonctions, balises HTML pour le formatage, .

3.4.5. LES FONCTIONS POUR REGROUPER DES INSTRUCTIONS

Il sagit dune suite dinstructions (voire dun petit programme de traitement)enregistre sous un nom vrifiant les rgles de base JavaScript. Quand Lafonction est appele par le biais dun vnement ou dun hyperlien les instructions


43/116



sexcutent. La dfinition dune fonction sinscrit en gnral dans un script denttesuivant la syntaxe :

function nom() {instruction}

Remarque :Dans la dfinition dune fonction on utilise souvent linstruction "return" pour

retourner une valeur lvnement qui a appel la fonction.

3.4.6. CRATION DUNE FONCTION DE CONTRLE

"Reprendre" dans lditeur de texte les pages "recette_pomme.html","recette_lasagne.html", "recette_paupiette.html" et "recette_philtre.html". Pour

chacune de ces pages, lactivation du bouton "liste des recettes", ouvre une boitede dialogue et lance une procdure de traitement. Crer une fonctionconfirmation() qui regroupe cette procdure ()

et linscrire dans un script externe la page nomm confirmer.js. Modifier la valeurde lvnement onclick dans chacune des pages conformment aux lignessuivantes :

puis associer le script aux pages concerns par la ligne de commande suivanteinscrite dans lentte de la page :


44/116



3.5. LA TECHNOLOGIE OBJET DANS LA PAGE WEB

Le langage JavaScript permet la cration dobjets auxquels sont associs desproprits et des mthodes. Ces objets ne sont pas les seuls pouvoir dynamiserune page html. Il est possible dutiliser des programmes chargs depuis le serveuret sexcutant sous le contrle du navigateur. Il sagit l des applets JAVA ou desActivesX.

Ces programmes ne peuvent pas avoir daction sur les lments de la page enparticulier sur larbre DOM.

3.5.1. EXEMPLE DINSERTION DUNE APPLET JAVA

"Ouvrir" dans lditeur de texte les pages "bannire1.html" et "ESSAI_applet.html"du rpertoire applet. Lobjet de lexercice est de copier llment applet de la page"bannire1.html" dans la page ESSAI_applet.html, sous le titre. Puis de modifierles paramtres votre convenance et de faire un aperu dans le navigateur.

Constater lindpendance de lapplet par rapport la page (la boite "alert()" bloquela page mais pas le fonctionnement de la bannire (Noter, suivant la version dunavigateur, ce comportement nest pas toujours vrifi).


45/116



Exemple du paramtrage de lapplet Bannire

4. LE LANGAGE DES FEUILLES DE STYLE (CSS)

4.1. GNRALITS

La feuille de style CSS (Cascading StyleSheet) permet de grer laspect gnralde laffichage (police, taille et style de caractres, couleurs, arrire-plans, ) et dedonner une homognit de prsentation plusieurs documents. HTML a toujoursprivilgi le contenu la prsentation, cependant larrive de la feuille de style apermis dapporter une cohrence de prsentation des pages et en mme temps

de faciliter la maintenance de cette prsentation.

Le principe est de contrler les attributs de prsentation dune collection compltede documents partir dun nombre limit de feuille de style voire une seule.

Il existe trois manires dassocier une prsentation au contenu dune ou plusieurspages :

Le style en ligne : il confre une balise, une rgle daffichage pour le contenuquelle encadre (taille de caractres, police, couleur, ). Il sagit du styleprioritaire (priorit absolu)

LE TITRE


46/116



Le style du document: il est dfini dans len-tte de la page par une zoneconteneur, dlimite par les balises (fig 2.1a). Il regroupeune ou plusieurs rgles communes ou spcifiques aux lments HTML dudocument. Ces rgles agissent sur toutes les balises concernes, rencontres

dans le document, lexception de celles contenant un style en ligne. Il sagitdun style priorit de second ordre (fig 4.1a)

fig 4.1a

Le style de la feuille de style externe : ce sont des rgles inscrites dans unfichier indpendant de la page HTML, avec une extension .css, que le

navigateur charge en mme temps que la page HTML. Ce fichier (dit feuille destyle) est rutilisable et permet dhomogniser le style un ensemble dedocuments. Il sagit l, du style par dfaut, priorit minimale par rapport auxdeux autres formes de styles. On distingue deux manires dassocier unefeuille de style une page :

- La liaison : la commande de liaison sinscrit dans la zone den-tte de lapage suivant la syntaxe :

- Limportation: Elle sinscrit exclusivement dans une feuille de style ou dansune zone de style dfinie par les balises dans lentte de lapage. Dans tous les cas elle apparat avant toute autre instruction, et peuttre suivie dautres importations de style suivant la syntaxe :

@import url(url1);

Linstruction "@import url()" commande au navigateur le chargement de rglesde style indiques ladresse inscrite entre parenthses (ici url1).


47/116



Remarque :La one de style du document inscrite dans un entte de page (dans llment

head) est aussi appele feuille de style interne.

Les rgles de styles importes dans la feuille de style interne ont la priorit sur lesrgles des feuilles de styles lies (externes).

Dans le cas de plusieurs feuilles de styles importes, le navigateur fusionne les

styles pour ne constituer quune seule rfrence de style. Les styles sajoutent sauf

en cas de conflit, alors le dernier style lu a priorit sur le prcdent qui est

cras.

Les rgles ci-dessus sont communment prises en compte par les dernires

versions des navigateurs.

4.2. ECRITURE ET SYNTAXE DES RGLES CSS

Le DOM confre chaque lment des proprits de style. Le formatage pardfaut de ces lments identifis individuellement se fait par le langage CSS partir de rgles inscrites dans la feuille de style interne, externe ou dans llmentlui-mme. Chaque rgle est compos dune suite de dclarations spares entreelles par un point virgule " ;". La dclaration tant sous la forme : "proprit :valeur".

Remarque :Dans lexemple ci-dessus on relve un formatage de tous les lments paragraphe

de html (balise

) pour lesquels le texte prend la taille de caractre de 16

pixels et la couleur identifie par #000066 dans le systme des couleurs RGB(systme hexadcimal, base sur les couleurs lectroniques fondamentales rouge,

vert, blue cela donne une palette denviron 16.7 million de couleurs).

4.3. LE FORMATAGE PAR STYLE DUN ENSEMBLE DE PAGES

4.3.1. LE STYLE PAR DEFAUT

"Ouvrir" dans lditeur de texte les pages "VTA01.html" et "VTA02.html". "Ouvrir"une nouvelle feuille de style css et lenregistrer sous "VTA.css". Crer lesinstructions pour :


48/116



- le titre de niveau h1 de couleur bleu (color:blue;) et de police arial(font-family :arial ;)- le titre de niveau h3 de couleur marine (color:navy ;)- le trait hr de couleur gris (gray), de largeur 70% de la fentre (width :70% ;)

et dpaisseur 3px (height :3px ;)puis oprer la liaison dans chacune des pages html, enregistrer tout et fairelaffichage dans les navigateurs.

Le mme style pour les deux pagesVTA01.html et VTA02.html.


49/116



4.3.2. AMELIORATION DU STYLE PAR REGLES IMPORTEES

"Ouvrir" une nouvelle feuille de style css et lenregistrer sous "VTA_plus.css".Inscrire les instructions pour :

- le titre de niveau h1 centr (text-align:center;) et de couleur pourpre(color :purple;)- llment div justifi (text-align:justify;), couleur marine, police en arial, avecune taille de caractre 11pt (font-size:11pt;)

puis oprer une liaison dans une des pages html, et une importation dans lafeuille de style vta.css. Enregistrer tout et faire laffichage dans les navigateurs.

Les diffrences daffichage dans lenavigateur sexpliquent par les rglesde priorit. Noter en particulier lapriorit des rgles CSS par rapport auxattributs html.

4.4. LES CLASSES POUR UNE DISCRIMINATION DES MMES BALISES

La classe de style est un moyen didentifier entre eux les lments html de mmenom et de diffrentier leur formatage. Elle permet ainsi d'accrotre la prcision dela prsentation. Lidentification de llment html est ralise en inscrivant dans sabalise douverture lattribut "class" auquel on associe une valeur qui est un motpertinent et respecte les rgles dcriture des valeurs dattributs (pas de blanc,alphanumrique, ne commenant pas par un chiffre).

TEXTE DU BLOC

Une fois llment cibl on dfinit les rgles de cette classe nomme dans lafeuille de style interne ou externe. Pour indiquer linterprteur quil sagit dune

classe on fait prcder le nom dun point et on indique la suite la rgle associecomme pour un lment html.

CHAPITRE1 {PROPRIT1; PROPRIT2;;}


50/116



4.4.1. AJOUT D UNE CLASSE POUR SINGULARISER UN CONTENU

Dans la feuille de style css "VTA_plus.css", dfinir une classe pour centrer le textede lappel doffre. Nommer la classe "centrage" et associer la rgle suivante :

- text-align:center ;

puis une seconde classe pour mettre en avant par un encadrement un articlepertinent. Nommer la classe "special" et associer les rgles suivantes :

- pour lencadrement (border :double ; border-color :navy ;)- pour le dgagement du texte (padding :5px ;)- pour la mise en gras (font-weight :bold ;)

puis inscrire les deux classes dans les balises appropries des pages html.Enregistrer tout et faire laffichage dans les navigateurs.


51/116



5. LE DHTML DYNAMIC HTML

5.1. GNRALITS

Les trois langages HTML, JavaScript, CSS et la recommandation DOM donnent lapossibilit de modifier les proprits des lments html dans le cache delordinateur. Ces modifications soprent par le biais des outils mis dispositionpar le navigateur, lors de la cration de larbre DOM. Cest de lassociation de ceslangages et de la recommandation quest ne la technologie DHTML (DynamicHTML) rvlant un vritable dynamisme des pages sous lvnement, sansrecours au serveur. Elle est un concurrent direct des Applets JAVA ou ActiveX

5.2. PRINCIPE DES COUCHES OU CALQUESLe principe de dynamisme des couches est bas sur la possibilit dempilerplusieurs pages HTML (dont le fond est transparent par dfaut) dans une mmepage, suivant un axe de profondeur, crant un espace tridimensionnel.

Il est important de comprendre que les lments qui apparaissent ou disparaissentau gr des vnements, existent au chargement de la page. Laction sur les

indices de visibilit ou dempilement est code partir de scripts javascript. Ellefait appel des mthodes associes des vnements ("onfocus","onmouseover", ).

Afin de pouvoir agir sur nimporte quel lment de la page, tous les lments sontidentifis par lattribut "id" qui sinscrit dans la balise douverture de llment. Ildfinit ainsi une sorte de sous classe de llment avec la diffrence cest que savaleur est unique dans la page contrairement la classe (cette valeur respecte lesmmes contraintes de nom que la classe). Cest en quelque sorte le code barre dellment dans la page.


52/116



Une fois llment identifi, on dfinit les rgles de son identificateur dans la feuillede style interne ou externe. Pour indiquer linterprteur quil sagit dunidentificateur on fait prcd son nom dun dise (#) et on indique la suite la

rgle associe comme on le fait pour la classe ou pour llment html.#coucheA {position:absolute; margin-left:50pt; margin-top:100pt;}

Remarque :Pour dfinir une couche dans la page, on utilise les lments html span ou div,

puis on inscrit dans la balise douverture de cet lment un attribut "id" associ

une valeur (un nom) unique dans la page).

Contenu de la coucheA

La programmation de lvnement se rfre lun des attributs vnementiels("onclick", "onblur", "onmouseover", ...), auquel est donn une valeurcorrespondant au changement de la proprit de style de llment.

Par exemple : faire disparatre une couche sur un clic de souris, revient changerla valeur de la proprit de style "visibility", tablie par dfaut "visible", en"hidden". Pour laccs cet attribut, on utilise la syntaxe de la programmation objet(.) en inscrivant le chemin dans larbre du document cr en mmoire jusqullment. Lvnement choisi tant "onclick" cela signifie quau clic de souris surla zone dfinie comme la coucheA, la proprit "visible" de la couche sera

modifie en "invisible" (cache). La syntaxe prise en compte tant par Internetexplorer que Mozilla est la suivante :

Onclick ="document.getElementById(coucheA).style.visibility=hidden;"

Langages et outils de l’environnement web

Documents

Transcript of Langages et outils de l’environnement web