Vous êtes sur la page 1sur 20

Prsentation gnrale de la POW

Squence 1

Contenu
1.LesdiffrentstypesdesitesWeb 2.Lesoutilstechniques

Introduction
La POW (Programmation Oriente Web) est lensemble de toutes les techniques et outils spcifiques la cration de sites Web, cest--dire la cration dapplications accessibles via le Web. Ces techniques et outils relvent, pour la plupart, des comptences des informaticiens. Au vu de limportance croissante de lInternet et du Web (prononcer oube ), vous comprendrez pourquoi nous estimons ncessaire de vous initier certaines de ces technologies. La cration de sites Web ncessite lutilisation de langages de programmation dits de prsentation, comme le si connu HTML, dont les mots cls servent dcrire la structure des pages Web. Cependant, pour crer des sites plus labors, on utilise aussi dautres langages de programmation. Dans ce dernier cas, pour dcrire les pages dun site, on utilise de concert le langage HTML (ou un langage de la mme famille) et un ou plusieurs autres langages de programmation. La consquence de cette association de diffrents langages de dveloppement de sites Web est que les architectures logicielles des sites sont souvent compliques comprendre, mais aussi crer. Cest pourquoi ce support de cours se contente de poursuivre lobjectif modeste de vous initier aux techniques et outils les plus utiliss dans la programmation oriente Web.

Quest-cequunsiteWeb?
Du point de vue technique, et pour faire simple, un site Web est gnralement un rpertoire contenant un ensemble de pages Web relies entre elles par des liens. Le terme relies signifie ici que les pages dun mme site sont accessibles les unes par rapport aux autres. Un site Web est stock sur un serveur, spcialis dans lhbergement de sites, quelque part dans le monde. Dans dautres cas, le site est sur le serveur dun rseau local non ouvert sur Internet (on appelle a un Intranet). Quil soit ouvert sur le monde, ou au contraire confin dans un rseau local, tout site est accessible via un navigateur Web ou browser, comme Netscape, Internet Explorer, Mozilla...

8 3950 TG PA 00

Squence 1

PrsentationgnraledelaPOW

quoisertlenavigateur?
Un navigateur est un logiciel utilis par lutilisateur lorsquil souhaite accder des pages Web. Un utilisateur qui accde des pages Web (familirement, on dit qui surfe , prononcer kisseurf ) est appel un internaute. Le rle du navigateur est de charger, sur le poste de linternaute, les fichiers (et ventuellement des dossiers) contenant la description de la page demande par linternaute et de traduire (on dit dinterprter ) cette description pour afficher la page dans la fentre du navigateur. La description dune page Web est un fichier contenant les informations qui dcrivent la page et ventuellement des instructions rglant certains de ses comportements (un exemple simple : un fichier qui sappellerait maPage.html contiendrait la description de la page maPage et cette description serait crite en langage HTML). En bref, un navigateur est un interprteur de code source (ce code source est essentiellement compos de HTML). De mme quun diteur de texte interprte du code ASCII pour afficher du texte, le navigateur interprte le code source des pages pour les afficher. Ce qui transite sur le net, cest le code source dcrivant les pages, pas les pages. Les pages ne peuvent tre visualises que si on les ouvre depuis un navigateur, ou ventuellement depuis un autre logiciel sachant afficher des pages Web partir de leur description (exemple : Microsoft Word est capable de visualiser des pages Web dcrites en langage HTML). Le navigateur permet donc daccder aux pages disponibles sur le Web (en franais, on dit sur la TAM , TAM signifiant Toile dAraigne Mondiale ), ou bien il permet daccder aux pages Web dun Intranet (une structure qui ressemble lInternet, mais qui nest pas ouverte des accs extrieurs). Linternaute accde des pages Web en indiquant au navigateur leur adresse Internet ou URL, ce sigle anglais signifiant Uniform Resource Locator (avec laccent, prononcer Younifme Ouisauce Locaiteu ) ou encore adresse rticulaire, en franais. Cest moins beau et a sonne moins bien loreille en franais, je vous laccorde. Exemple dURL : http://www.leserveurWeb.fr/lapage.html

Quesaitfaireunnavigateur?
Tous les navigateurs savent afficher des pages dont les descriptions sont crites en langage HTML (Hyper Text Markup Language), DHTML (Dynamic HTML) ou XML (Extended Markup Language). Ces trois langages sont des Markup Language , en franais des langages balises . Les navigateurs savent en fait demander diffrentes ressources comme, par exemple, le code source de la page Web dont linternaute a indiqu lURL, et ventuellement les dossiers accompagnant le code source de cette page, ces dossiers contenant, par exemple, les images qui safficheront dans la page. Les navigateurs savent galement excuter des programmes, envoys avec le code source de la page. Ces programmes servent enrichir la description des pages ou rgler certains comportements de la page (on abordera cet aspect de la POW ci-dessous dans la partie intitule Outils et techniques ).

8 3950 TG PA 00

10

Squence 1

PrsentationgnraledelaPOW

Le chargement du code source de la page et de ses programmes une fois effectu, ces programmes sexcuteront sur la machine de linternaute. On appelle ces programmes des scripts clients (car il sexcutent sur la machine cliente, celle de linternaute).

Commentasepasse?
Ben, a se passe bien. Non, mais la question est juste un peu vague, je trouve, pas vous ? Comment a se passe, QUOI ? Alors je prcise ma question : comment que a se passe pour que le navigateur eh ben, il affiche les pages oubes ? L, a va, jai compris, alors jexplique. Linternaute tape une URL dans la barre dadresse du navigateur, ou bien il clique sur une URL crite dans un document. LURL que linternaute a tape contient : ladresse du serveur + lemplacement de la page souhaite sur ce serveur. Le navigateur demande donc cette page au serveur. Si la page est accessible cet internaute, le serveur renvoie sa description la machine de linternaute. Le navigateur interprte cette description et excute les ventuels programmes qui accompagnaient la description de la fentre, et la page saffiche. Un point cest tout !

Quelprotocoletransportelespages?
Un protocole, cest une collection de rgles qui rgissent un change. Le protocole utilis pour transporter les pages Web le long des voies de lInternet (au sein dun Intranet) est le protocole HTTP (Hyper Text Transfer Protocol). Ce protocole a ici pour rle de rgir la communication entre le client HTTP (le navigateur de linternaute) et un logiciel sexcutant sur le serveur hbergeant la page, ce logiciel tant appel le serveur http, car son rle est de distribuer les pages Web demandes par les internautes. Le protocole HTTP a pour rle dtablir la connexion avec le serveur qui hberge la page que linternaute veut voir safficher, et de rapatrier le code source de cette page sur le poste de linternaute. Quand linternaute clique sur un lien hypertexte ou quil le saisit dans la barre dadresse de son navigateur, le navigateur envoie une requte http au serveur Internet. Cette requte demande au serveur denvoyer la page spcifie. Exemple : si on saisit lURL http://www.leserveurWeb.fr/lapage.html ou que lon clique dessus, le navigateur sadresse au serveur http http://www.leserveurWeb.fr et lui demande la page lapage. html.

8 3950 TG PA 00

11

Squence 1

PrsentationgnraledelaPOW

Vocabulaire
Que le site soit trs simple ou labor, le poste de linternaute est appel le poste client et la machine hbergeant le site Web est appel le serveur.

LessitesWebont-ilstouslesmmesfonctionnalits?
Non. Ils ont des fonctionnalits plus ou moins labores. Bien entendu, plus cest labor, plus cest compliqu dvelopper. Il existe diffrentes catgories de sites Web, chaque catgorie correspondant un certain degr dlaboration. Nous allons ci-dessous faire une petite visite guide dans la galerie des diffrentes catgories de sites Web.

1. Les diffrents types de sites Web


Grosso modo, il existe trois grandes familles de sites Web : les sites statiques, les sites dynamiques et les applications Web.

1A.Lessitesstatiques
Ce sont des sites de prsentation. Ils prsentent des informations. Ces sites sont dits statiques car leurs pages sont des pages statiques. Une page est dite statique quand le contenu quelle affiche est fix une fois pour toute, au moment de la cration de son code source (cest--dire au moment de sa description laide dun langage balises comme HTML, par exemple). Dans ce cas, pour modifier le contenu affich par la page et/ou son comportement, il faut modifier le code source de description de la page. Les pages des sites statiques sont hberges telles quelles sur les serveurs : dans le cas dune page statique, ce que le serveur hberge, cest le code source de la page (ceci nest pas le cas pour les autres types de sites vus plus bas). Ces pages statiques sont charges, traduites et visualises par le navigateur. Le serveur http qui sexcute sur le serveur hbergeant le site a pour seul travail denvoyer la description des pages Web dont les internautes demandent la visualisation en indiquant leurs URL. Les pages de ce type de site peuvent tre : sans animation (aucun mouvement sur la page). Ces pages sont essentiellement composes de texte, photos, tableaux... mais rien ny bouge ; animes (des petits gugus qui rigolent, des extraits de dessins anims, de la musique, un calendrier qui saffiche, etc.). Ces animations sont provoques notamment laide du langage DHTML (le D signifie Dynamic), mais galement par lexcution des programmes envoys en mme temps que le code source de la page, programmes que le navigateur est capable dexcuter sur la machine de linternaute. Pour dvelopper un site statique, diffrentes techniques sont utilisables, ne ncessitant pas toutes forcment des comptences en programmation.

8 3950 TG PA 00

12

Squence 1

PrsentationgnraledelaPOW

1B.Lessitesdynamiques
Un site dynamique est un site comportant des pages dynamiques. Une page est dite dynamique quand sa description (cest--dire son code source) est produite au moment o linternaute demande la visualiser (en ayant indiqu son URL). Exemple de site dynamique : un site de consultation de la mto. Ben oui, la mto, a change tout le temps, donc, un site statique (cest--dire un site contenant des pages dont le contenu est fixe), ne convient pas. En effet, vous nimaginez quand-mme pas que tout au long de toutes les journes de lanne, il y a un pauvre informaticien, titulaire du BTS IG, qui modifie (avec ses pauvres petits doigts pleins de crampes force de taper au clavier) la description des pages, et ce, chaque changement de temprature ou chaque fois quil se met pleuvoir quelque part. Non, l, il sagit dun site dynamique : le code source des pages est construit au moment o linternaute demande les visualiser. Cest--dire que le code source dune page (celui qui est envoy la machine de linternaute) est gnr par un logiciel install sur le serveur hbergeant le site, au moment o linternaute demande visualiser cette page en ayant tap son URL dans la barre de son navigateur. Ce logiciel, appel inteprteur de scripts, a pour rle de construire le code source dune page en excutant le fichier de script correspondant cette page. Les instructions contenues dans ce fichier de script permettent de gnrer le code source de la page. Exemples dinterprteurs de fichiers de script : un serveur Apache (interprte les fichiers de scripts crits laide du langage PhP), un serveur IIS (interprte les fichiers de scripts crits laide du langage ASP). Attention, ici, le terme serveur est prendre au sens logiciel, comme pour le serveur HTTP. Il ne sagit pas dune machine. Dans ce contexte l, les logiciels serveurs sont des logiciels excutant des services la demande dautres logiciels. Un fichier de script est une suite dinstructions dans un certain langage de programmation : cest un programme, mais qui nest pas compil (cest--dire que ce nest pas un fichier excutable). Interprter un fichier de script, cest comme excuter un programme sauf que dans le cas des fichiers de script, les lignes dinstructions sont interprtes puis excutes les unes aprs les autres, ce qui nest pas le cas des programmes compils (les programmes crits par exemple avec Windev sont compils, ce sont donc des excutables). Le fichier de script correspondant une page contient la fois des informations sur la description HTML (ou DHTML, ou XML) de la page, et des instructions crites dans un langage de script pour serveur, ces instructions concernant gnralement lacquisition des informations variables que la page affiche. Bon, le HTML (ou DHTML, ou XML) et les instructions crites en langage de script pour serveur ne sont quand mme pas ranges nimporte comment dans le fichier de script, mais, pour une page, elles sont gnralement mlanges lintrieur du mme fichier de script.

8 3950 TG PA 00

13

Squence 1

PrsentationgnraledelaPOW

Pour construire le code source dune page dynamique, linterprteur de script excute le fichier de script permettant de gnrer le code source de la page. Lors de cette interprtation, linterprteur de fichier de script combine la description HTML (ou DHTML, ou XML) de la page avec des donnes. Linterprteur de fichier de script extrait gnralement les donnes, qui reprsentent la partie variable de la page, dans une base de donnes, laide des instructions crites en langage de script et de requtes SQL. Dans ce cas, ce qui est hberg sur le serveur, ce nest pas le code source de la page, cest le code source du programme destin crer la page, cest--dire le fichier de script correspondant la page. Un exemple simple : si maPage est une page dynamique, le fichier de script permettant de gnrer maPage sappellera maPage.PhP si le langage de script utilis est le langage PhP, ou bien maPage.asp, si le langage de script utilis est le langage ASP. Au cours de linterprtation du fichier de script, le code source de la page (cest--dire sa description dans un langage balises) est gnr. Une fois que la description de la page a t gnre, cette description est transmise au serveur http, qui, comme pour les pages statiques, envoie ce code source au navigateur, qui lui-mme traduit et affiche la page. Pour mettre en uvre cette architecture, il faut des comptences en programmation. En effet, les programmes qui permettent de produire dynamiquement les pages Web demandes par linternaute, accdent la base de donnes et construisent le code source de la page le font laide dinstructions crites dans divers langages de programmation (comme le trs connu PhP). En bref, les interprteurs de scripts pour serveurs sont des programmes sachant produire dynamiquement du code HTML partir de fichiers de script. Ils savent excuter (ou plutt, interprter) les instructions contenues dans le fichier de script dune page pour produire le contenu de cette page en rajoutant certaines informations variables afficher dans la page produite (ces informations sont gnralement extraites dune base de donnes, mais pas toujours), ils savent aussi interprter les balises (crites dans un langage balise comme HTML) contenues dans le fichier de script pour mettre en forme ces informations dans la page. Donc, dans ce cas, pour modifier le contenu affich par une page, on ne modifie pas sa description, ni le programme destin gnrer son code source, mais on modifie le contenu de la base de donnes utilise. Pour dvelopper des sites dynamiques, il existe plusieurs solutions techniques (on peut, pour un site, utiliser en mme temps ces diffrentes solutions), ncessitant toutes des comptences en programmation. Cest l que vous comprenez pourquoi il vaut mieux avoir bien avanc dans le cours de teck... euh, de base de donnes, et dans le cours dalgo/programmation, pour pouvoir dvelopper des sites dynamiques (on le fera dans le fascicule 2 de POW, que vous recevrez dans votre petit paquet de cours de deuxime anne).

8 3950 TG PA 00

14

Squence 1

PrsentationgnraledelaPOW

Les sites dynamiques, bien que plus labors que les sites statiques, restent malgr tout des sites de prsentation, mme si ce quils prsentent est variable dans le temps. Cela signifie quun site dynamique ne sait pas, pour construire une page, prendre en compte les interventions de linternaute, comme la saisie dune information, un choix spcifique, etc. Les sites sachant prendre en compte les interventions de linternaute sont appels des applications Web. Nous allons voir ci-dessous quelles sont leurs caractristiques.

1C.LesapplicationsWeb
1C1.Prsentation
Les applications Web sont des sites dynamiques qui savent, en plus des sites dynamiques de prsentation, prendre en compte certaines informations saisies dans des formulaires par linternaute (recherche, commande de produits...). Une application Web offre donc linternaute des services autres que ceux dun site de prsentation, quil soit statique ou dynamique : recherches, formulaires de saisie, achat en ligne... Le contenu des pages dune application Web dpend en partie des interventions de linternaute. Exemple : lorsquun internaute fait une recherche dans un moteur de recherche, il (ou elle) commence par se connecter sur la page daccueil du moteur de recherche. Ensuite, linternaute tape les mots relatifs sa recherche, dans une zone de saisie rserve cet effet, puis valide sa recherche. ce moment, les informations que linternaute a tapes sont envoyes, le couple serveur HTTP + interprteur de scripts rcupre ces informations, effectue la recherche demande, rcupre les rsultats de la recherche. Ensuite, en interprtant un script, il mlange , comme pour un site dynamique, les rsultats de la recherche et la description de la page qui doit contenir les rsultats. Cela donne la description dune page Web contenant ces rsultats. Le serveur http renvoie cette description au poste de linternaute. Le navigateur de linternaute na plus qu traduire cette description pour visualiser la page. Vous voyez bien que la description de la page reue dpend bien des informations que lutilisateur a tapes au pralable. Cest pourquoi la description de ce type de pages doit tre construite dynamiquement. Comme les sites dynamiques, les applications Web puisent les informations dans des bases de donnes, mais la diffrence, cest que, pour un site dynamique, il ny a pas prise en compte de saisies de linternaute, alors que pour une application Web, si. La saisie ventuelle dinformations par linternaute ne modifie pas le code de description des pages dynamiques, mais seulement ventuellement la base de donnes utilise pour construire les pages dynamiques.

8 3950 TG PA 00

15

Squence 1

PrsentationgnraledelaPOW

Donc, une application Web, cest comme un site dynamique, sauf quen plus, a sait prendre en compte les interventions de linternaute. Pour dvelopper une application Web, il faut aussi des comptences en programmation, et diffrentes techniques sont notre disposition.

1C2.LesdiffrentsmodlesdarchitecturedapplicationsWeb
Quelle que soit la technologie utilise, selon larchitecture logicielle dploye, cest--dire selon la faon dont les traitements ont t rpartis entre le client Web (le navigateur du poste de linternaute) et le serveur (la machine qui hberge le site), on utilise un certain vocabulaire pour qualifier la partie cliente (cest--dire la partie se situant sur le poste de linternaute) et le modle darchitecture logicielle utilis. Premier modle darchitecture : on dit du client quil est un client lger si cest le serveur qui excute tous les traitements significatifs (on dit toute la logique mtier ) relativement lapplication Web. Des petits traitements (de contrle de cohrence, de saisie, daffichage dun calendrier ou dun gadget amusant...) peuvent tre excuts par le poste de linternaute, mais ces traitements ne concernent pas le thme de lapplication. Exemple : si lapplication Web est une application permettant de commander des articles sur un site de commerce en ligne, les petits traitements excuts par le client lger ne concernent en rien la constitution de la commande passe par linternaute. Ce modle est utiliser lorsquon ne sait rien de la configuration du poste de linternaute. Second modle darchitecture : le client est dit client lourd lorsque le poste de linternaute excute des traitements assez significatifs (dans ce cas, une partie de la logique mtier est excute par le poste client). Exemple : le calendrier qui saffiche dans la page ne propose que les jours o le magasin est ouvert, le calcul du total de la commande saisie par linternaute est effectu par le poste client Ce modle darchitecture est utiliser lorsque la configuration des postes client est connue (par exemple, on sait que le navigateur de linternaute est configur pour permettre aux applets java, des petits programmes spcifiques, de sexcuter). Troisime modle darchitecture : on parle de livraison Web lorsquil y a une relle rpartition des traitements entre le poste client et le serveur. Les objets utiliss pour dvelopper la partie cliente communiquent avec les objets utiliss pour dvelopper la partie serveur, en utilisant ventuellement dautres protocoles que HTTP (Hyper Text Transfert Protocole), le protocole de transport des pages Web (exemple dautres protocoles : le protocole SOAP, un protocole standard destin aux services Web, lanc par IBM et Microsoft, et qui permet dutiliser des applications invoques distance via Internet). Cette solution darchitecture est adapte aux intranets ou la mise en uvre de services Web (en anglais, on dit Web services , prononcer oube seuvissise ).

CestquoiunserviceWeb?
En gros, cest un logiciel (ou plutt une partie de logiciel) quun autre logiciel peut appeler distance via Internet (un peu comme une procdure ou une fonction qui serait hberge sur un site au Canada et quun programme appelle depuis une machine situe dans la Vosge profonde). Nous naborderons pas, dans ce support, ce troisime modle darchitecture qui ncessite une infrastructure matrielle et logicielle, ainsi que des comptences, mon got trop complexes.
8 3950 TG PA 00

16

Squence 1

PrsentationgnraledelaPOW

En outre, ce 3e modle darchitecture peut tre utilis pour concevoir des applications qui ne sont pas des sites Web : on peut trs bien concevoir une application de gestion des payes tournant sur un poste dans une entreprise de Trifouillis-les-Oies, application qui appelle en invoquant le protocole SOAP (le protocole utilis pour appeler les Web services) des fonctions de calcul hberges sur un serveur au Nebraska, sans que cette application de gestion soit un site Web. Ceci sort donc du cadre de ce support. Ce qui diffrencie ici les diffrents modles darchitecture, ce ne sont pas les technologies utilises, mais la rpartition des traitements significatifs ( la logique mtier ) entre les postes clients et le serveur. Nous allons aborder maintenant laspect technique de la POW. Cest--dire que nous allons recenser les diffrents outils et techniques existants sur le march et permettant de concevoir les diffrentes catgories de sites Web vus ci-dessus.

2. Les outils techniques


Il existe tout un tas doutils techniques (langages, environnements de dveloppement, etc.) permettant de crer des sites ou des applications Web. Chacun de ces outils et techniques permet plus ou moins de crer soit des sites (statiques ou dynamiques), soit des applications Web. Je vous prsente quelques-uns de ces outils et techniques. Je mefforcerai de vous prciser ce que chaque outil technique permet ou ne permet pas de faire.

2A.LeslangagesdedescriptiondepagesWebetleursacolytes
Ce sont les langages balises dont jai dj parl plus haut. Je citerai nouveau les 4 principaux langages balises : HTML, DHTML, XML et XHTML. Utiliss seuls (cest--dire sans autre langage), ils permettent de dvelopper des sites statiques. Les pages Web, pour pouvoir tre visualises par un navigateur, doivent tre dcrites dans un de ces langages, mme si elles sont gnres automatiquement par un interprteur de scripts pour serveur. Les pages dcrites dans tous ces langages sont transportes laide du protocole HTTP.

2A1.HTML,lelangagedebasededescriptiondepagesWeb
HTML signifie Hyper Text Markup Language. Il sagit dun langage qui dcrit sous forme de balises la manire dont les informations doivent tre visualises dans le navigateur. La description dune page Web qui utilise le langage HTML est stocke dans un fichier dextension .htm ou .html. Pour dcrire des pages Web laide du langage HTML, on peut : Soit utiliser un logiciel comme Frontpage, Webexpert, DreamWeaver ou autre, permettant de construire les pages Web sans mme connatre le langage HTML. Ces logiciels sont des diteurs de pages Web capables de produire du code HTML partir de la conception graphique des pages. On na pas besoin de connatre la programmation pour faire a. a, on ne va pas le faire, car vous navez pas besoin de moi. Rien ne vous empche de vous y mettre seul en utilisant les sujets de TP proposs pour ce support.

8 3950 TG PA 00

17

Squence 1

PrsentationgnraledelaPOW

Dans ce support, je ne veux pas consacrer ni trop de pages, ni trop de temps, vous apprendre utiliser diffrents environnements de dveloppement orients Web. Nous nous contenterons donc dutiliser un simple diteur de texte (comme notepad par exemple), dans lequel nous taperons le code source. Mais rien ne vous empche de faire lacquisition dun logiciel de conception de sites Web (gratuit ou payant). Dans ce cas je vous conseille lditeur hapedit, il est simple et gratuit). Soit taper la description en HTML depuis un diteur de texte, enregistrer le texte tap dans un fichier dextension .html. Ce fichier sera visualis par notre navigateur sous forme dune page Web. Cest ce que lon va faire, lon la, lon lre.

2A2.LeDHTML,pourmettreunpeudeviedansnospages
DHTML signifie Dynamic HTML. Ce langage est du HTML enrichi. Les lments supplmentaires prsents dans ce langage permettent denrichir la description des pages dun site statique, histoire de lanimer un peu, le site. En fait, et pour vous dire la vrit, DHTML nest pas un langage en soi, mais la conjugaison de 3 langages complmentaires : le HTML, dont je viens de vous parler et auquel vous vous initierez la squence 2 ; le javascript, un langage de script client, qui fait lobjet dune bonne grosse initiation dans la squence 3 de ce fascicule ; CSS, un langage permettant de dfinir des styles applicables aux pages, que lon verra dans le support servi en 2e anne.

2A3.XML,lepredetousleslangagesdedescriptiondepagesWeb
Mme si je vous en prsente un nombre restreint, il existe tout un tas de langages du mme type quHTML, cest--dire utilisant des balises pour dcrire la structure et le contenu des pages Web (exemple : MathML, SGML, etc.). Parmi eux, XML, un des plus rcents, est un langage permettant de crer des langages comme HTML. Cest pour a que je dis que cest le pre de tous les langages balises, mais cest idiot ce que je dis, puisque XML est un des plus rcents parmi ces langages, mais quand mme, on peut dire que conceptuellement, cest leur pre, tous les langages balises. Contrairement HTML, XML permet de crer de nouvelles balises. Alors quHTML prcise comment les lments dune page sont prsents, XML dfinit ce que contiendront les pages. Mais XML, cest bien plus quun simple langage de description de pages Web. Depuis 17, XML est devenu la norme en matire de format de documents changs via le net. Rsultat : XML est au centre dun fourmillement de nouvelles techniques, de nouveaux outils et de nouveaux langages. Il existe des bases de donnes qui savent stocker des documents au format XML, il existe des langages de programmation permettant daccder au contenu de documents XML (exemple : Xquery, un peu lquivalent du SQL, mais pour les documents XML), il existe des outils de cration de style pour les documents XML, etc. On fera un peu de XML dans le support servi en 2e anne.

8 3950 TG PA 00

18

Squence 1

PrsentationgnraledelaPOW

2A4.DonnerdustylenospagesavecCSS
Je viens de vous le dire en vous prsentant sommairement DHTML, le langage CSS permet de crer un style de page Web, et dutiliser ce style dans toutes les pages que lon veut.

Lavantagedecetypedelangage?
On cre un style, et on lapplique toutes nos pages, ce qui nous vite de refaire le travail pour chaque page.

2B.Utilisationdeprogrammessexcutantsurleposteclient
Lorsquon dveloppe un site statique, on peut vouloir enrichir, animer son comportement. Il se peut que HTML ne suffise pas toujours, auquel cas, le dveloppeur du site utilise des langages de programmation pour crire des petits morceaux de programmes qui seront excuts par le navigateur. Dautre part, lorsque lon dveloppe un site dynamique ou une application Web, on peut vouloir donner une partie du travail faire au poste de linternaute. Par exemple, si on propose linternaute une page contenant des zones o il doit saisir des informations, et que parmi ces zones, certaines doivent tre obligatoirement renseignes, on a deux solutions, une fute, lautre moins. La soluce pas trs fute fute : contrler si linternaute a bien renseign les zones obligatoires au moment o le formulaire rempli arrive sur le serveur. Pourquoi cest pas fut ? Parce que tout dabord, on donne au serveur un travail supplmentaire faire, travail qui pourrait tout fait tre effectu par le navigateur du poste client. Ensuite, parce que si jamais linternaute na pas renseign certaines zones obligatoires, il faut que le formulaire lui soit renvoy pour tre complt, puis nouveau renvoy, puis recontrl... Ce qui rallonge considrablement le temps de traitement. La soluce fute : contrler directement depuis le navigateur de linternaute si toutes les donnes obligatoires ont bien t saisies, laide de programmes sexcutant sur le poste client. Dans ces deux cas (enrichissement de site statique et dlgation dune partie du travail dun site dynamique ou dune application Web), on doit crire des programmes qui sexcuteront sur le poste de linternaute. Do viennent ces traitements ? Il existe plusieurs solutions dont certaines sont dcrites ci-dessous. Encore une fois, la liste ci-dessous nest pas complte. Je me suis efforce de prsenter les solutions les plus connues.

8 3950 TG PA 00

1

Squence 1

PrsentationgnraledelaPOW

2B1.Utilisationdescriptsclients
Dans le cas de lutilisation de scripts clients, les traitements sont intgrs la description de la page envoye. Il sagit, dans ce cas, de scripts (crits dans un langage de script), intgrs au code source de la page, et qui sont excuts par le navigateur de linternaute. Le dveloppeur (cest--dire vous !) crit, par exemple en javascript ou VBscript, des morceaux de programmes appels scripts, intgrs dans le code HTML dcrivant la page, et traduits par le navigateur avant visualisation. Donc, pour crer ce type de site, on utilise du langage HTML et un langage de script client. Nous, on va faire du javascript, car tous les navigateurs savent dcoder ce langage de script. Par contre, nous ne verrons pas VBScript, car seul Internet Explorer sait le traduire.

2B2.Utilisationdapplets
Le code excutable de ces traitements nest pas intgr au code source de la page envoye. Il est envoy au poste de linternaute par le serveur HTTP, en mme temps que la description HTML de la page. Ces programmes sont crits gnralement en langage java, mais aussi maintenant en langage C#, le langage de programmation de la plateforme .Net (pour faire classe , prononcer DotNet ). On les appelle des applets, pour APPlication Light WEighT (en franais, il faut dire Appliquette... Non !! Cest pas une blague, cest bien comme a quil faut dire en franais !!). Ce sont des petits programmes compils. Ils servent amliorer les fonctionnalits de la page charge. Ils sont chargs en mme temps que la page, sont stocks temporairement sur la machine de linternaute et ont une dure dexistence limite. Ils sont automatiquement supprims la fin de lchange entre le poste client et le serveur (on dit la fin de la session ), et sont supprims de la mmoire de la machine la fermeture de la page. Lexcution de ces traitements par le navigateur de linternaute ncessite que le navigateur soit configur de manire savoir excuter les applets. Nous ncrirons pas dapplets dans ce support.

2B3.Latroisimesolution:lesplug-in
Ces programmes ont t automatiquement tlchargs sur le poste de linternaute lorsque celui-ci en a eu besoin pour la premire fois, et se sont installs dfinitivement sur la machine de linternaute. Il permettent gnralement de manipuler (visualiser, couter) certains lments de la page tlcharge. La prochaine fois que linternaute aura besoin du plug-in, il ne sera pas tlcharg nouveau, sauf si la version dont dispose le serveur est plus rcente que celle dont dispose linternaute. Exemple : shockWave de Macromdia. Ce support de cours ne vous apprendra pas crire des plug-in.

8 3950 TG PA 00

20

Squence 1

PrsentationgnraledelaPOW

2B4.Utilisationdecookies
Ce terme de cookie, outre le fait de dsigner de dlicieux gteaux, trs faciles faire (voir recette de ma copine Vro ci-dessous), dsigne, en info(rmatique), un petit fichier qui contient des informations particulires. Ce petit fichier est un tmoin de connexion . La taille dun cookie ne peut pas dpasser 4 Ko. Il est envoy sur la machine de linternaute, souvent son insu (on peut aussi dire linsu de son plein gr je crois), par le site quil consulte. Tout internaute peut paramtrer son navigateur pour accepter ou non les cookies. Si le navigateur de linternaute est paramtr pour les accepter, les cookies sont stocks sur le disque dur de linternaute et non sur le serveur hbergeant le site consult. Ce petit fichier contient des informations sur la nature de la relation que linternaute entretient avec le site consult. Le rle des cookies est de faciliter la navigation sur la TAM (Toile dAraigne Mondiale).

Exemplesdutilisationdecookies
Pour identifier linternaute plus rapidement, ce qui lui fait gagner du temps, linternaute. Le cookie contient des informations qui doivent normalement tre saisies par linternaute lors de sa connexion au site. La prsence du cookie sur le poste de linternaute lui vite de ressaisir ces informations. Il les a saisies la premire fois quil a consult le site, un cookie a t cr, et maintenant, quand il consulte nouveau ce site, les informations contenues dans le cookie sont utilises, il na donc plus les saisir. Pourpersonnaliserlarelationentrelinternauteetlesite, cest--dire mieux connatre linternaute et lui proposer des produits personnaliss. Exemple : une librairie en ligne qui va cibler ce quelle propose linternaute en fonction des informations contenues dans le cookie (ce qui suppose que linternaute sest dj connect au moins une fois cette librairie en ligne, et que lors de cette premire visite, le site a observ ce que faisait linternaute, constitu un cookie et envoy ce cookie sur le poste de linternaute). Pourgrer soncaddy sur un site marchand. ourviter linternaute de saisir identifiant et mot de passe lors de chaque accs un site. P Pourtransmettredesinformations saisies par linternaute dune page une autre dun mme site, ce qui vite linternaute de ressaisir ces informations et permet de personnaliser les pages. Les cookies ne peuvent contenir que des informations saisies par linternaute, ou des informations comme la configuration de sa machine par exemple. Ils ne permettent pas despionner le contenu de lordinateur de linternaute. Certains sites ne peuvent fonctionner quen les utilisant. Les cookies ne sont pas tous dtruits en fin de session, cest pourquoi il faut songer faire le mnage de temps en temps.

8 3950 TG PA 00

21

Squence 1

PrsentationgnraledelaPOW

Techniquement,commentamarche?
Vous savez dj que quand on surfe sur lInternet, cest le protocole http qui est utilis. Quand on clique sur un lien hypertexte, notre navigateur (Internet Explorer, Netscape Navigator, etc.) envoie une requte http un serveur Internet, lui demandant la page spcifie. Le serveur HTTP retourne une rponse http contenant la page demande. Les cookies transitent par le biais de ces changes, en sintroduisant dans les enttes des requtes et des rponses HTTP. Quand on consulte un site, le navigateur lance une requte http pour chaque page que lon souhaite afficher. Chaque requte http est indpendante des autres. Le serveur Internet na donc pas la possibilit de savoir que cest une seule et mme personne qui demande laffichage de ces diffrentes pages. Un exemple tout bte : imaginez un site commercial qui propose un catalogue et qui permet de passer des commandes en ligne. Linternaute (et dans ce cas, souvent, linternautesse...) se balade sur les diffrentes pages du catalogue en ligne et slectionne, souvent par un clic, les produits quil (elle) souhaite commander. Les produits sont rajouts au panier. Puis linternaute(sse) valide sa commande sur une page spciale galement destine au rglement de sa commande. Si ce site nutilisait pas, par exemple, les cookies, linternaute(sse) devrait ressaisir sur cette page, les rfrences des articles quil ou elle a slectionnes dans les pages du catalogue. En effet, les pages tant, pour le serveur Internet, indpendantes les unes des autres, chaque changement de page, les informations de la page prcdente seraient perdues (exemple : les articles retenus par cet(te) internaute(sse) sur la page prcdente). Dans le cas dun site commercial, le cookie dpos sur le disque dur de linternaute contient, entre autre, un identifiant, cest--dire un code unique attribu linternaute. Quand linternaute slectionne, dans une page, un article quil souhaite commander, le serveur enregistre la rfrence de larticle ainsi que la quantit souhaite et y associe lidentifiant quil va rcuprer dans le cookie dpos sur le disque dur de linternaute. Le serveur est donc en mesure de savoir tout instant quels articles ont t commands par linternaute, mme aprs que celui-ci ait quitt les pages des produits quil a commands. Les cookies ne sont pas le seul moyen technique de conserver ces informations, mais ils sont un moyen simple de le faire. Pour amliorer lergonomie de la navigation, les sites utilisent donc les cookies.

Olescookiessecachent-ils?
Sur la machine de linternaute, lemplacement du dossier ou du fichier contenant ces tmoins de connexion varie selon les versions de systme dexploitation et de navigateur prsentes sur la machine de linternaute. Exemple : si le navigateur de linternaute est Internet Explorer, les cookies sont stocks dans un dossier cookies, situ des endroits diffrents selon le systme dexploitation. Avec Netscape Navigator, les cookies sont dans un fichier cookies.txt. 22

8 3950 TG PA 00

Squence 1

PrsentationgnraledelaPOW

Quellessontlesinformationscontenuesdansuncookie?
Un cookie est un fichier qui contient des informations de type texte (que lon peut donc afficher dans tout diteur de texte). Le cookie contient : un nom. Cest le nom de la valeur qui est associe au cookie ; une valeur. Cest la valeur de linformation associe au cookie. Remarque : seuls le nom et la valeur sont obligatoirement renseigns lors de la cration dun cookie. Les informations ci-dessous sont optionnelles, mais parfois bien utiles : une date dexpiration. Cette information indique jusqu quelle date le cookie peut tre utilis. Au-del de cette date, le cookie sera effac. Si la date dexpiration nest pas renseigne, il sera supprim de la machine de linternaute ds la fin de la session Internet, cest--dire ds la fermeture du navigateur ; un domaine. Cette information indique le domaine pour lequel le cookie est valable (exemple : http://www.mondomaine.fr). Si le domaine nest pas renseign, cest celui du serveur hbergeant le document qui a cr le cookie qui sera retenu ; un chemin. Cette information indique la partie de lURL pour laquelle le cookie est valable (exemple : http://www.mondomaine.fr/monsite/). Si le chemin nest pas renseign, cest celui du document qui a cr le cookie qui sera retenu ; un attribut de scurit. Cette information indique si le cookie peut ou non tre transmis lors dune connexion non scurise.

Pourensavoirplus
Vous pouvez tlcharger lutilitaire FireFox, pour observer le contenu des cookies se trouvant sur votre machine. Sur le site de la CNIL (Commission nationale de linformatique et des liberts), vous pouvez consulter cette page spciale cookies : http://www.cnil.fr/traces/comment/cooki.htm. Sur le site de lATICA (lAgence pour les technologies de linformation et de la communication dans ladministration), vous trouverez la description technique du fonctionnement des cookies : http://www.atica.pm.gouv.fr/dossiers/documents/cookies.shtml. Dautres explications sur le site CommentaMarche : http://www.commentcamarche.net/securite/cookies.php3. Et aussi sur : http://www.linternaute.com/surfer/cookie/cookiesomm.shtml. http://www.linternaute.com/surfer/cookie/cookiestrat.shtml. Jean-Claude Bellamy propose sur son site un petit utilitaire (seulement pour Internet Explorer) qui rajoute dans le menu contextuel une commande voir les cookies qui affiche dans une page Internet le contenu de lventuel cookie : http://www.bellamyjc.net/doWnload/cookieinst.exe. Un dernier lien : http://www.tactika.com/cookie/. 23

8 3950 TG PA 00

Squence 1

PrsentationgnraledelaPOW

Est-cequonvafairedescookies?
Oui. On va en crer ds la squence 3 de ce fascicule. Vous verrez, cest trs simple. On utilise des instructions javascript prvues pour crer et consulter des cookies, et hop, le tour est jou. Et puis on va en faire aussi, des qui sentent bon. On peut y mettre des raisins, des ppites de chocolat, des petits morceaux de fruits secs bon, les raisins, notre navigateur naime pas trop, mais nous, si

2B5.Recettedescookies
Cest la recette de ma copine Vro. Vous verrez, ils sont dlicieux, et trs facile faire.

Mlanger : 350 grammes de farine, 250 grammes de sucre, 1 pince de sel, 12 sachet de levure chimique. Ajouter : 1 uf, 200 grammes de beurre fondu, 1 sachet de sucre vanill, du lait si la pte est trop paisse ventuellement : rajouter des ppites de chocolat, des noisettes, des amandes, du nougat coup en petits morceaux etc. Remarque importante : ne pas mettre dans la pte de morceaux de denres non comestibles comme des vis, des composants lectroniques, ou du fil lectrique. Bien mlanger le tout. Prlever avec une cuillre soupe la quantit de pte pour un cookie, dposer cette pte sur la plaque du four, lui donner une forme ronde et laplatir un peu (en clair : ne pas taper dessus comme un forcen, mais laplatir dlicatement avec le dos de la cuiller). Recommencer jusqu ce que la plaque soit pleine (moi, je mets 12 cookies par plaque). Cuire four chaud pendant 10 minutes (thermostat 7 ou 8 = 210 ). Recommencer jusqu ce que vous ayez utilis toute la pte, sauf si vous prfrez jeter la pte qui reste, mais a, cest vous qui voyez.

8 3950 TG PA 00

24

Squence 1

PrsentationgnraledelaPOW

2C.Utilisationdeprogrammessexcutantsurleserveur
Cette technique permet de dvelopper des applications Web, des sites dynamiques, mais galement, si on est maso et quon adore faire compliqu quand on peut faire simple, des sites statiques. Encore une fois, il existe plusieurs solutions et je ne prsente ci-dessous quune partie dentre elles.

2C1.Utilisationdelangagesdescriptpourserveur
Actuellement, les langages les plus utiliss sont les deux langages de script suivants : PhP (Personal Home Page), langage cr en 14 par Rasmus Lerdoft, cest une solution faisant partie du monde des logiciels libres ; ASP (Active Server Pages), langage de script dvelopp par Microsoft, cest une solution faisant partie du monde des logiciels commerciaux, mais il y a moyen de lutiliser gratuitement.

Commentafonctionneavecdeslangagesdescriptpourserveurs?
On en a dj parl dans le paragraphe 1B. sur les sites dynamiques, mais ce nest pas du luxe dexpliquer une seconde fois. Linternaute saisit lURL de la page dynamique, hberge sur un serveur. La description de la page, sur le serveur, contient des instructions crites dans un langage de script pour serveur. Ces instructions se trouvent dans le code HTML de la page. Ces instructions ont pour rle de construire dynamiquement la description de la page entirement en langage HTML, cest cette description en code HTML qui sera envoye au navigateur de linternaute. Le serveur Web (cest--dire le serveur http) hbergeant la page dtecte la demande de visualisation dune page dynamique avec script. Il envoie la page linterprteur de script correspondant lextension de la page. Exemple : le serveur enverra la page au logiciel apache (cest linterprteur de scripts PhP) si la description de la page dynamique possde lextension php. Lextension PhP signifie que la partie dynamique de cette page est dcrite laide dinstructions crites en PhP. Linterprteur interprte les instructions PhP, qui concernent gnralement laccs une base de donnes qui contient les informations variables de la page dynamique, ou bien la prise en compte des saisies effectues par linternaute. Il traduit tout a en HTML : il convertit en langage HTML le rsultat dexcution des instructions crites en langage de script, en prenant en compte les informations ventuellement saisies par lutilisateur et/ou puises dans une base de donnes. Linterprteur retransmet le code HTML de la page au serveur http, qui la transmet au navigateur de linternaute. Le navigateur de linternaute visualise la page HTML reue. Et voil, super fastoche !

8 3950 TG PA 00

25

Squence 1

PrsentationgnraledelaPOW

2C2.UtilisationdelinterfaceCGI
Linterface CGI (Common GateWay Interface) est un logiciel spcialis qui permet au navigateur (se trouvant sur le poste de lutilisateur) de demander un serveur distant de lancer un programme excutable se trouvant sur le serveur lui-mme. Le serveur excute le programme demand, traduit le rsultat dexcution du programme en une page HTML quil envoie au navigateur du poste client (le poste de lutilisateur). On dit que le rsultat dexcution du programme est traduit la vole , et cest pour cela que la page HTML qui en rsulte est dite dynamique . LURL saisie par lutilisateur pointe en fait sur un programme excutable (dextension .exe) crit dans un langage compil (en gnral C, mais aussi Delphi, Windev ... ou tout autre langage permettant de crer des programmes excutables). La diffrence avec les langages de scripts pour serveur est que les programmes hbergs par le serveur sont des excutables, pas des scripts. Lautre diffrence est que cette interface est un standard. part ces deux diffrences, on peut, avec linterface CGI, faire tout ce quon fait avec les langages de script pour serveurs. Cette solution est la plus ancienne, elle souffre de lenteur. Ces lenteurs ne sont pas dues lge, mais surviennent dans les cas de sollicitations trs nombreuses car le programme excut mobilise chaque fois des ressources importantes sur le serveur.

2D.Utiliserdesplates-formesdedveloppement
Actuellement, les deux principales plates-formes permettant de dvelopper pour le Web sont la plate-forme J2EE de lditeur Sun (utilisant le langage de programmation java), et la plus rcente plate-forme .net (rappel : pour faire bien, ne pas dire point net mais dot net ), de Microsoft dont le langage de programmation est le C# (second rappel : prononcer C Sharp , avec laccent, a fait si shp ). Il existe galement une troisime plate-forme, trs en vogue outre Atlantique : il sagit de la plateforme zope, dont le langage de programmation est Python. Avec ces outils, on peut dvelopper tout ce quon veut, du site statique lapplication Web, en passant par le site dynamique et lapplication non Web (du genre : application de gestion qui tourne en local sur un poste). Par contre, je pense, encore une fois, quil faut tre maso pour sembter utiliser ces outils complexes pour dvelopper un simple site de prsentation, surtout sil y a moyen dutiliser un outil plus simple. Les langages de ces plates-formes (le langage java, le langage C#, le langage Python) permettent galement de dvelopper des applications non destines au Web, comme si on utilisait un environnement de dveloppement non spcialis dans le dveloppement des applications Web.

8 3950 TG PA 00

26

Squence 1

PrsentationgnraledelaPOW

Bref, on peut tout faire avec ces outils (enfin, quand je dis tout... a ne fait pas la lessive ni le mnage hein !). Cest notamment parce quils sont gnralistes que ces outils sappellent des FrameWorks (cest-dire des plates-formes de dveloppement), et galement parce quils font appel la programmation objet et utilisent des bibliothques dobjets (galement appeles des bibliothques de composants). Les applications sont en fait un assemblage de ces composants et le travail du dveloppeur consiste intgrer les composants dans une mme application, en faisant en sorte, au moyen des instructions du langage, que les composants collaborent entre eux. Avec ces outils, on peut implmenter (cest--dire appliquer ) le modle MVC (Model View Controller), recommand par le W3C pour la conception de sites dynamiques et dapplications Web. Le W3C, cest le World Wide Web Consortium : un groupe de personnes trs comptentes, charg de pondre les normes pour le dveloppement Web. Allez voir sur leur site (http ://www.w3c.com), si vous voulez : il y a toutes les normes concernant les langages quon va utiliser... et oh joie! Cest tout en anglais!). Appliquer le modle MVC consiste dvelopper toute application Web en plusieurs couches logicielles classes par fonctionnalits : la couche de prsentation : cest en fait ce que linternaute voit du site Web. Cette couche est prise en charge par des scripts qui sexcutent sur le poste de linternaute (donc, des scripts clients) ; la couche application : ce sont les traitements du site Web qui sexcutent sur le serveur ; la couche de contrle : cette couche a pour rle de contrler larticulation de fonctionnement entre la couche de prsentation et la couche application. Ces architectures logicielles sont complexes. Mais quel est donc lavantage de ce modle de dveloppement de sites Web ? Ah a oui, on se le demande ! Et bien le graphiste (galement appel Web designer , prononcer oube dizailleneu ), qui a t charg de crer la couche prsentation du site, peut trs bien modifier sa couche prsentation sans toucher au code source des traitements, puisquon a une sparation entre prsentation et traitements. Mais on peut trs bien dvelopper un site Web avec les plateformes J2EE ou .net sans sparer la couche prsentation, la couche application et la couche contrle. Simplement, dans ce cas, on nutilisera pas toute la puissance que permettent ces plateformes. Remarque : on peut aussi implmenter le modle MVC avec par exemple du PHP.

2E.Etlascuritdanstouta?
Vous en tes bien conscient, ds que linternaute saisit des informations et les envoie sur la TAM (rappel : a veut dire la Toile dAraigne Mondiale, le Web quoi !), nimporte quel pirate (ou hacker) un peu fut peut rcuprer ces informations pour en faire bon (et hlas plus souvent mauvais) usage. Toute application Web suppose donc des contrles de scurit.
8 3950 TG PA 00

27

Squence 1

PrsentationgnraledelaPOW

Les contrles de scurit concernent : le poste client (celui de linternaute) : il y a en effet risque de tlchargement de programmes non authentifis (des virus par exemple, ou des espions qui scrutent le disque dur de linternaute) ; le rseau : il faut crypter certaines informations comme par exemple les numros de cartes bancaires, afin que les mchants hackers ne puissent pas sacheter de bonbons avec les sous quon a sur notre compte ; le serveur : il y a en effet ncessit de scuriser laccs certaines pages, par exemple par des mots de passe et des systmes dauthentification. Il existe pour cela diverses solutions, comme par exemple le protocole HTTPS, un protocole scuris denvoi des pages sur le Web, qui sappuie sur SSL (Secure Socket Layer), un protocole grant lauthentification et la confidentialit, utilis pour les transactions financires (les paiements, virements) effectues via Internet. Bon, jai peu prs fait le tour de ce dont je voulais vous parler dans cette squence dintro. Maintenant, il sagit de faire. Dans ce premier fascicule, on va commencer par faire un peu de HTML, puis on fera du javascript, et pis cest tout et cest dj pas si mal. Dans le fascicule 2, on abordera le reste : scripts serveurs, feuilles de style, XML, et peut-tre quelques autres trucs sympas si le volume du fascicule nest pas trop important (pas plus de 2 000 pages pour le fascicule 2, promis jur). Alors on se retrouve la squence 2, pour dmarrer notre apprentissage de html tout de suite !

8 3950 TG PA 00

28