Les technologies du Web

Rappels

Programmation Web 2 de Philippe

TANGUY est mis à disposition selon les Bachelor IMTN
termes de la licence Creative Commons
Attribution - Pas d'Utilisation
Commerciale - Partage à l'Identique 3.0 Philippe TANGUY (IMT Atlantique)
non transposé.

Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

2 Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

3 Bachelor IMTN – Programmation Web 2

Web
¢ World Wide Web
• Différentes désignations possibles : WWW, W3, Web, etc.
§ Toile (d’araignée) mondiale
• Inventé par Tim Berners-Lee au début des années 1990, physicien travaillant
au CERN à Genève (Centre Européen pour la Recherche Nucléaire) :
§ Objectif du projet : partage de documents techniques au sein du CERN utilisant le principe
des liens hypertextes au dessus d’Internet.
• Les 3 principales technologies sont développées :
§ Les adresses Web : les URL (Uniform Resource Locator)
§ Le protocole HTTP (HyperText Transfer Protocol)
§ Le langage HTML (HyperText Markup Language)
• Évolutions :
§ Gros développements techniques dans les années 1990, le Web sort du domaine
scientifique.
§ Explosion du Web dans les années 2000 qui, en plus d’un système de consultation de
documents, devient une interface graphique pour les applications Web.

4 Bachelor IMTN – Programmation Web 2

Web
¢ Le Web n’est qu’une des applications d’Internet :
• E-Mail : courrier électronique
• Messagerie instantanée
• FTP
• Telnet, SSH
• Téléphonie sur IP
• Etc.

¢ World Wide Web Consortium (W3C)

• Organisme de normalisation créé en 1994 chargé de promouvoir les
technologies du Web. Créé par l’inventeur du Web : Tim Berners-Lee.
• Le W3C supervise le développement de standards (~normes) :
§ HTML, XHTML, XML, RDF, SPARQL, CSS, XSL, PNG, SVG, SOAP, etc.
§ HTML (v. 4.01) : http://www.w3.org/TR/1999/REC-html401-19991224/
§ CSS : http://www.w3.org/TR/CSS1/

5 Bachelor IMTN – Programmation Web 2

Les éléments principaux du Web
¢ Modèle client/serveur
¢ Client HTTP
§ Navigateur Web (mais pas seulement…)
§ Envoie une demande à un serveur
particulier : codée par l’URL
§ Affichage de la réponse (en général au
format HTML)
§ Chaque lien est une nouvelle requête au
serveur
¢ Serveur HTTP
§ En attente sur le réseau IP (port par défaut : 80) d’une requête par un client.
§ Gère les ressources locales (du serveur) : documents HTML, images, vidéos, etc.
§ Chaque ressource correspond à une URL.
¢ URL
§ Description de l’emplacement d’une ressource
¢ HTML
§ Format de document affichable par le navigateur
6 Bachelor IMTN – Programmation Web 2
Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

7 Bachelor IMTN – Programmation Web 2

Terminologie (1)
¢ Web statique / Web dynamique
• Web statique :
§ L’ensemble des documents préexistent sur
le serveur qui ne fait que les transférer sur
le client : « mini » FTP.
• Web dynamique :
§ Des documents statiques peuvent exister sur
le serveur mais certains d’entre-eux sont
générés dynamiquement, à la volée.
§ Très souvent, le contenu dynamique est
obtenu au sein d’une base de données.
§ Applications hébergées sur le serveur (PHP,
.NET, Java, etc.)
§ Technologies à la base des systèmes
d’information : on parle ici d’applications
Web.

8 Bachelor IMTN – Programmation Web 2

Terminologie (2)
¢ Modèle client/serveur
- Wikipedia : « mode de communication à travers un réseau entre plusieurs
programmes ou logiciels : l'un, qualifié de client, envoie des requêtes ; l'autre ou les
autres, qualifiés de serveurs, attendent les requêtes des clients et y répondent. »
- Non spécifique au Web : FTP, serveur de mail (POP, IMAP), SSH, peer-to-peer, SGBD
(Oracle, PostgreSQL, MySQL, etc.).
¢ Dans la formation, on distinguera :
- Serveurs Web : Apache, serveur Microsoft II S, etc.
- Serveurs d’applications : Jboss, IBM WebSphere, Oracle WebLogic, Apache Tomcat,
JOnAS, Oracle GlassFish, etc.
§ Nécessaire dans le cadre du Web dynamique
§ Les serveurs d’applications embarquent un serveur Web.
¢ Attention, les termes client et serveur sont ambigus :
- Ils désignent à la fois l’ordinateur et le processus logiciel qui assure la
fonctionnalité : potentielle source de confusion.

9 Bachelor IMTN – Programmation Web 2

Terminologie (3)
¢ Différents types de clients dans les applications Web
• Client léger
§ Le client accède à une application située sur un serveur via un navigateur Web.
L'application fonctionne entièrement sur le serveur, le poste client reçoit la réponse à la
demande (requête) qu'il a formulée.
§ HTML, CSS
• Client riche
§ L’interface graphique est plus évoluée : mise en œuvre de fonctionnalités comparables à
celles d'un client « lourd ». Traitements possibles côté client.
§ RIA : Rich Internet Application
§ HTML, CSS + JavaScript, Ajax, HTML5, etc.
• Client lourd
§ Le poste client doit comporter un système d'exploitation capable d'exécuter en local une
partie des traitements. Le traitement de la réponse à la requête du client utilisateur va
mettre en œuvre un travail combiné entre l'ordinateur serveur et le poste client.
§ On n’est plus dans le domaine des applications Web.
§ Citrix, Xwindows (Unix), Remote Desktop Connection, etc.

10 Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

11 Bachelor IMTN – Programmation Web 2

HTTP(S)
¢ Définition (IETF : Internet Engineering Task Force)
- The Hypertext Tansfer Protocol (HTTP) is an application-level protocol for distributed,
collaborated, hypermedia information systems.
- Pas tout neuf… la version actuelle, HTTP/1.1, a été publiée en 1997 !
¢ Basé sur le système d’adressage URL (Uniform Resource Locator)
- http: (avec https:) est l’un des services les plus utilisés dans les URL
- Les URL sont des URI HTTP (Uniform Resource Identifier)
¢ Protocole client/serveur
- Le client (en général un navigateur mais pas que…) envoie une requête et le serveur
renvoie une réponse, en général un contenu HTML mais pas que…
- La requête est associée à une commande : GET, HEAD, PUT, POST, etc.
- Protocole sans connexion et sans état : chaque requête/réponse est considérée
indépendante à pas de mémorisation du contexte de connexion.
§ Différentes technologies permettent d’outrepasser cette limite (cookies, session HTTP,
etc.) afin de simuler une connexion nécessaire dans la majorité des applications Web :
sites Web commerciaux, intranet, etc.

12 Bachelor IMTN – Programmation Web 2

HTTP(S)
¢ Type MIME (Multipurpose Internet Mail Extensions)
- Spécifie le format de donnée de la réponse : contenu HTML, XML, JSON, formats
binaires, etc.
¢ Les principales méthodes HTTP
• Elles permettent la manipulation en lecture/écriture
/modification/effacement de ressources sur le serveur (fonctionnalités
CRUD).
- GET : téléchargement d’une ressource, le format de celle-ci est connue à
l’aide du type MIME.
- HEAD : idem GET mais sans le téléchargement. Seuls les en-têtes sont transmis,
test sur la ressource : existence, date, etc.
- POST : transfert de données du client vers le serveur en vue d’un traitement. Le
plus souvent à l’aide d’un formulaire HTML.
- PUT : mise à jour d’une ressource sur le serveur.
- DELETE : effacement d’une ressource sur le serveur.

13 Bachelor IMTN – Programmation Web 2

Exemple requête HTTP
¢ Appel d’un Web Service REST à l’URL
• http://74.125.71.95/maps/api/distancematrix/xml?origins=Paris&destinations=Brest
(première partie du TP)

GET /maps/api/distancematrix/xml?origins=Paris&destinations=Brest HTTP/1.1

User-Agent: Java/1.7.0_51
Host: 74.125.71.95
Accept: text/html, image/gif, image/jpeg, *; q=.2, */*; q=.2
Connection: keep-alive

¢ Contenu de la requête :
- La méthode est GET = donne moi un document
- Le serveur a pour adresse IP 74.125.71.95 (maps.googleapis.com)
- L’URL à partir de ce serveur est indiquée : /maps/api/distancematrix/xml?...
- Le logiciel à l’origine de la requête est écrit en Java (User-Agent)

14 Bachelor IMTN – Programmation Web 2

Exemple de réponse HTTP
HTTP/1.1 200 OK
Content-Type: application/xml; charset=UTF-8 ¢ Contenu de la réponse :
Date: Mon, 08 Dec 2014 14:19:49 GMT
Expires: Tue, 09 Dec 2014 14:19:49 GMT - Code de retour : 200 à OK
Cache-Control: public, max-age=86400
Vary: Accept-Language - Type mime du contenu : application/xml
Server: mafe
X-XSS-Protection: 1; mode=block
- Informations diverses : date, etc.
X-Frame-Options: SAMEORIGIN
Alternate-Protocol: 80:quic,p=0.02
- Le contenu en lui-même : les
Transfer-Encoding: chunked informations demandées au format XML
<?xml version="1.0" encoding="UTF-8"?>
<DistanceMatrixResponse>
<status>OK</status>
<origin_address>Paris, France</origin_address>
<destination_address>Brest, France</destination_address>
<row>
<element>
<status>OK</status>
<duration>
<value>19610</value>
<text>5 hours 27 mins</text>
</duration>
<distance>
<value>590935</value>
<text>591 km</text>
</distance>
</element>
</row>
</DistanceMatrixResponse>

¢15 sdqsdqsd Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

16 Bachelor IMTN – Programmation Web 2

Le langage HTML
¢ HTML : Hypertext Markup Language
- Format de données pour la
représentation des pages web.
- Langage de balisage dont les balises
permettent la mise en forme du
contenu des pages, d’inclure des
ressources multimédias, des
formulaires de saisie, et des
programmes informatiques.
- Souvent utilisé conjointement avec
des langages de programmation
(JavaScript) et des formats de
présentation (CSS).
- HTML est initialement dérivé du SGML
(XHTML du XML).

17 Bachelor IMTN – Programmation Web 2

Page HTML minimale…
¢ Une page HTML est un simple fichier texte commençant par <HTML> et
finissant par </HTML>.
• Contient un en-tête décrivant le titre de la page, puis un corps dans lequel on
place le contenu de la page
• L'en-tête du document est délimité par les balises <head> et </head>
• Le corps du document est délimité par les balises <body> et </body>

¢ Ainsi la page minimum sera:

<html>
<head>
<title>Le titre </title>
</head>
<body>
Contenu de votre page
</body>
</html>

18 Bachelor IMTN – Programmation Web 2

En-tête + corps
¢ Deux parties dans un
document HTML :
• L’en-tête
• Le corps du
document En-tête

Corps

19 Bachelor IMTN – Programmation Web 2

Structure d’une page HTML
¢ Structure arborescente

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
[Télécom Bretagne] Une Grande École d'ingénieur et un centre de
recherche international dans les sciences et technologies de
l'information
</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
</head>

<body>
<div class="art_description">
<p>
Les 7 présidents des 7 technopoles* de Bretagne se sont réunis...
</p>
</div>
</body>

</html>

20 Bachelor IMTN – Programmation Web 2

HTML : langage de balises
¢ Une page HTML est un ensemble d’éléments
• Chaque élément est composé de :
§ balise ouvrante + contenu + balise fermante
Exemple : <title>Titre de de la page</title>
§ Les balises peuvent avoir des attributs
Exemple : <img src="logo.png" width="10" height="30" />

¢ Les balises HTML peuvent être réparties en 2 sous-groupes :

• Celles qui modifient la structure de la page
§ En-têtes, les paragraphes, les listes ...
• Celles qui modifient le style du texte.
§ Gras, italique, titre, …
§ Préférer l’utilisation des styles CSS à ces balises afin de mieux gérer la séparation entre le
texte (sa structure) et la mise en page

21 Bachelor IMTN – Programmation Web 2

Titre
<h1>titre niveau 1</h1>
<h2>titre niveau 2</h2>
<h3>titre niveau 3</h3>
<h4>titre niveau 4</h4>
<h5>titre niveau 5</h5>
<h6>titre niveau 6</h6>
<p>
Du texte dans un paragraphe. Du texte
dans un paragraphe. Du texte dans un
paragraphe. Du texte dans un
paragraphe. Du texte dans un
paragraphe. Du texte dans un paragraphe. Du texte dans un
paragraphe. Du texte dans un paragraphe.
</p>

22 Bachelor IMTN – Programmation Web 2

Style physique et logique
ce <em>mot</em> est mis en valeur
ce <strong>mot</strong> est important
H₂O
E=mc²
ce <big>mot</big> est plus grand que
les autres
ce <small>mot</small> est plus petit
que les autres
ce <b>mot</b> est en gras
ce <i>mot</i> est en italique
ce <tt>mot</tt> est en caractères
télétype

23 Bachelor IMTN – Programmation Web 2

Paragraphes
<p>
Vends deux entrées pour La Mouette,
pièce de Tchekhov, pour le mardi 19
mars, jour de la St. Joseph, file
DD46-48 au prix de 30 euros (les deux).
</p>
<p><blockquote>
J'attends de nombreux appels. C'est
fantastique. En plus, il y a
Dominique Blanc.
</blockquote></p>
<p>
Nous avons le plaisir de vous annoncer le lancement d'un
service E-mail baptisé Mises à jour Test et Mesure par
E-mail.
</p>
24 Bachelor IMTN – Programmation Web 2
Listes
<ul>
<li>liste à puces 1 </li>
<li>liste à puces 2 </li>
<li>liste à puces 3 </li>
</ul>

<ol>
<li>liste numérotée</li>
<li>liste numérotée</li>
<li>liste numérotée</li>
<li>liste numérotée</li>
</ol>

25 Bachelor IMTN – Programmation Web 2

Tableaux
<table border="0">
<caption>Titre (sans bordure)</caption>
<th>Désignation</th>
<th>Prix</th>
<tr>
<td>voiture</td>
<td>20 000</td>
</tr>
<tr>
<td>pain</td>
<td>0,50</td>
</tr>
</table>

<table border="1">
<caption>Titre (avec bordure)</caption>
<th>Désignation</th>
<th>Prix</th>
<tr>
<td>voiture</td>
<td>20 000</td>
</tr>
<tr>
<td>pain</td>
<td>0,50</td>
</tr>
</table>

26 Bachelor IMTN – Programmation Web 2

Gestion des formulaires
¢ Formulaires HTML
• Permet d’ajouter aux pages Web des éléments interactifs permettant par
exemple un dialogue avec l’utilisateur.
• L’utilisateur saisit des informations en remplissant des champs ou en cliquant
sur des boutons, puis appuie sur un bouton de soumission (submit) pour
l'envoi sur le serveur.
• La réception des informations saisies se fait par un script de page web
dynamique.
- Différentes technologies sont possibles : PHP, ASP, script CGI ou, dans notre cas,
une servlet Java ou une page JSP.

¢ Le codage du formulaire se fait en langage HTML à l’aide de la balise <FORM>.

27 Bachelor IMTN – Programmation Web 2

Codage du formulaire en HTML
¢ Les formulaires sont délimités une balise <FORM> . . . </FORM>
• Les différents éléments du formulaire sont inclus entre la balise ouvrante et
la balise fermante : c’est un conteneur.
• La balise <FORM> prend deux attributs obligatoires :
- L’attribut METHOD indique sous quelle forme seront envoyées les données. Deux
valeurs possibles : POST ou GET.
Avec la méthode GET, les données sont envoyées dans l’URL. La taille des données
qui peuvent être transmises est limitée à la taille maximale d’une URL (~ 2000
caractères).
Avec la méthode POST, les données sont transmises dans l’en-tête HTTP : plus de
limite.
- L’attribut ACTION indique l’adresse d’envoi qui récupérera les données du
formulaire pour le traitement ultérieur.
• <form method="GET" action="http://www.google.fr/search>
...
</form>

28 Bachelor IMTN – Programmation Web 2

À l’intérieur de la balise <FORM>
¢ Un formulaire : éléments interactifs (saisie des données par l’utilisateur) + les
éléments de mise en page du formulaire.
• La mise en page se fait classiquement par des éléments HTML : <table>,
<div>, etc.
• Les éléments interactifs :
- <INPUT> : un ensemble de boutons et de champs de saisie.
- <TEXTAREA> : zone de saisie sur plusieurs lignes.
- <SELECT> : liste à choix multiple.
¢ Envoi des données :
• Les données sont envoyées sous la forme de paires nom/valeur :
- nom1=valeur1&nom2=valeur2&nom3=nom3 (dans le cas d’un envoi par l’URL avec
la méthode GET, le séparateur entre les paires est le caractère &).
• À chaque élément interactif correspond un nom (attribut name) qui sert pour
identifier la donnée saisie lors de l’envoi.
- <input name="prenom" type="text" /> à prenom=Philippe&…

29 Bachelor IMTN – Programmation Web 2

La balise <INPUT>

30 Bachelor IMTN – Programmation Web 2

La balise <INPUT>
¢ Mais aussi :

• hidden: champ caché (non affiché dans la page HTML).

Précise un paramètre fixe qui sera envoyé au serveur.

• file: emplacement d'un fichier qui sera envoyé avec le formulaire (upload).

• image: bouton de soumission personnalisé, dont l'apparence est l'image

située à l'emplacement précisé par son attribut SRC.

• reset: bouton de remise à zéro permettant uniquement de rétablir

l'ensemble des éléments du formulaire à leurs valeurs par défaut.

31 Bachelor IMTN – Programmation Web 2

La balise <SELECT>

32 Bachelor IMTN – Programmation Web 2

La balise <TEXTAREA>

33 Bachelor IMTN – Programmation Web 2

Envoi des paramètres (méthode GET)

34 Bachelor IMTN – Programmation Web 2

Envoi des paramètres (méthode GET)

35 Bachelor IMTN – Programmation Web 2

Envoi des paramètres (méthode GET)

http://localhost:8080/GestionFormulaire/autorisation?nom_utilisateur=ptanguy&mot_de_passe=abcdefg

36 Bachelor IMTN – Programmation Web 2

Envoi des paramètres (méthode GET)

http://localhost:8080/GestionFormulaire/autorisation?nom_utilisateur=ptanguy&mot_de_passe=abcdefg

37 Bachelor IMTN – Programmation Web 2

Envoi des paramètres (méthode POST)

http://localhost:8080/GestionFormulaire/autorisation

¢ Même syntaxe HTML.

- Seule change la valeur de l’attribut method de la balise <form>.
¢ Même rendu dans le navigateur.
¢ Les paramètres ne sont plus transmis dans l’URL mais dans l’en-tête de
requête HTTP.
38 Bachelor IMTN – Programmation Web 2
Envoi des paramètres (méthode POST)
¢ Les données sont cependant toujours envoyées sous la forme de paires nom/valeur :
• Plus discret mais cependant toujours visible avec un analyseur réseau (Wireshark, …).

POST /GestionFormulaire/autorisation HTTP/1.1

Host: 192.168.1.103:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://192.168.1.103:8080/GestionFormulaire/login.html
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 44
nom_utilisateur=ptanguy&mot_de_passe=abcdefg
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=UTF-8
Content-Length: 387
Date: Sat, 31 Jan 2015 19:35:27 GMT

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

/><link rel="stylesheet" type="text/css" href="styles.css" /><title>GestionFormulaire</title></head><body><h1>Connexion
:</h1>
<p id="erreur">L'utilisateur <b><i>ptanguy</i></b> n'est pas autoris.. .. se connecter</p>
<p><a href="login.html">Retour</a></p></body></html>

39 Bachelor IMTN – Programmation Web 2

HTML5
¢ Dernière révision majeure d'HTML
¢ Version est en développement depuis 2011 : version Release
candidate en 2014.
• HTML4 à 1999 !
¢ HTML 5 s'intéresse aux applications Web.
• La première définition s'appelait Web Application 1.0 avant de changer de
nom pour mieux se poser en successeur de HTML4.
¢ Différences entre HTML 4 et HTML 5
• Le format est toujours en cours de définition mais beaucoup de composants
sont acquis:
§ Suppression des frames.
§ HTML 5 est compatible avec HTML 4 et XHTML bien que certaines balises deviennent
obsolètes.
§ Il comporte de nouveaux formulaires, intègre des médias variées, et ajoute un support de
dessin et d'images.

40 Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

41 Bachelor IMTN – Programmation Web 2

CSS
¢ CSS : Cascading Style Sheets
• Langage informatique qui assure la présentation des documents HTML (mise
en page, taille, couleur, etc.).
• Le standard CSS est développé par le W3C.
• Dernière version : CSS 4 en 2010
• Enjeux :
§ Séparer la structure d'un document de ses styles de présentation
La présentation peut être différente pour un même document : présentation pour lecture
à l’écran ou pour impression par exemple.
§ Décliner les styles de présentation selon le récepteur
La rendu d’un même document peut être différent pour un même document suivant le
média : téléphone portable ou ordinateur par exemple.
§ Permettre la cascade des styles
Les feuilles de styles peuvent se combiner les unes avec les autres : une feuille de styles
générique qui factorise les styles de base + une feuille de styles par récepteur.

42 Bachelor IMTN – Programmation Web 2

CSS : styles internes
¢ Au sein d’une page HTML : ils ne s’appliquent qu’à la page
<html>

<head>
<style type="text/css">
/**/
p
{
font-size: 110%;
font-family: Helvetica, sans-serif;
}
/**/
</style>
...
</head>

<body>
...
</body>
</html>

43 Bachelor IMTN – Programmation Web 2

CSS : styles externes
¢ Les styles CSS sont disponibles pour toutes les pages qui en ont besoin
• Fichier exemple.css
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Arial, SunSans-Regular, Sans-Serif;
color: #564b47;
margin: 0;
}

p,pre,h2,table {
padding: 10px;
margin: 0;
}

• Référencement de la feuille de style dans une page Web

<html>
<head>
<link rel="stylesheet" type="text/css" href="exemple.css" />
...
</head>
<body>
...
</body>
</html>

44 Bachelor IMTN – Programmation Web 2

Avantages des styles externes
¢ Uniformité sur tout le site Web

¢ Le changement de présentation est facilité : la modification du(des) fichier(s)

CSS impacte tout le site.

¢ L’adaptation du contenu est facilitée : version pour impression, etc.

45 Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

46 Bachelor IMTN – Programmation Web 2

JavaScript
¢ JavaScript
• Langage de programmation de scripts employé dans les pages Web
interactives mais aussi pour les serveurs.
• Langage orienté objet créé en 1995 pour le compte de Netscape
Communications Corporation (Netscape est l’ancêtre de Firefox).
• La syntaxe est inspirée de Java mais attention : JavaScript != Java

¢ Le code JavaScript embarqué dans une page Web est exécuté par le navigateur
• Les scripts ont accès au contenu de la page qui les appelle.
• Restrictions de sécurité : ils n’ont pas accès aux données du serveur ni, aux
fichiers de la machine locale.
• Utilité : traitements d’actions utilisateurs :
§ Vérification de zones de saisies
§ Interaction avec le document HTML via le DOM (Document Object Model)
§ Services dynamiques cosmétiques et/ou ergonomiques, etc.

47 Bachelor IMTN – Programmation Web 2

JavaScript
¢ Évolutions apportées par le langage JavaScript
• Ajax (Asynchronous Javascript And XML) : sert à modifier le contenu des
pages Web par programmation :
- Permet de réaliser des applications Internet riches : meilleure maniabilité, confort
supérieur
- Sujets phares du mouvement Web 2.0.
• JSON (JavaScript Object Notation) :
- Format utilisant la notation des objets JavaScript pour transmettre de l'information
structurée, d'une façon plus compacte et plus proche des langages de
programmation, que XML.
- Format très utilisé actuellement en dehors de JavaScript.
• Sur un serveur web :
- JavaScript peut également être utilisé comme langage de programmation sur un
serveur HTTP à l'image des langages comme PHP, ASP, etc.
- CommonJS : projet de développement d'une API pour écrire des programmes
JavaScript s'exécutant ailleurs que dans un navigateur Web.
48 Bachelor IMTN – Programmation Web 2
Exemple JavaScript
<html>

<head>
<script type="text/javascript">
<!-- Debut
function verifMail(a) {
testm = false ;
for (var j=1 ; j<(a.length) ; j++) {
if (a.charAt(j)=='@') {
if (j<(a.length-4)){
for (var k=j ; k<(a.length-2) ; k++) {
if (a.charAt(k)=='.') testm = true;
}
}
}
}
if (testm==false) alert('Votre adresse e-mail est incorrecte.');
else alert('Votre adresse e-mail semble correcte.');
return testm ;
}
// fin du script -->
</script>
</head>

<body>
<form name="formulaire_saisie_email" action="xxx.jsp" method="post">
Entrez une adresse e-mail
<input type="text" name="email" size=30 maxlength=40>
<input type="button" value="Vérifier" onClick="verifMail(document.formulaire_saisie_email.email.value)">
</form>
</body>

</html>

49 Bachelor IMTN – Programmation Web 2

Plan de la présentation
¢ Web (World Wide Web )

¢ Web statique / Web dynamique

¢ Protocole HTTP

¢ Langage HTML

¢ Langage CSS

¢ Langages de script (JavaScript)

¢ Programmation Web

50 Bachelor IMTN – Programmation Web 2

Programmation Web
¢ Différentes technologies sont possibles suivant les besoins :

• Insertion d’objets graphiques dans une page Web

• Programmation web côté client

• Programmation web côté Serveur

51 Bachelor IMTN – Programmation Web 2

Insertion d’objets graphiques
¢ Animation Flash (Adobe Systems - Macromedia)
- Programme qui permet de créer des animations dans un format vectoriel
propriétaire relativement léger.
- Nécessite l'installation du plug-in Flash Player qui n'est pas disponible pour tous les
systèmes.
- Utilisation(s) : interfaces dynamiques (déplacements d'images, petites animations). ,
jeux, etc.

¢ Applet Java (appliquettes)

- Programmes Java avec interface graphique autonomes intégrées dans une page
web. Ils sont téléchargés avec la page web et exécutés par l'ordinateur client.
- Plus guère utilisées.

¢ ActiveX
- Technologie développée par Microsoft. Principes de fonctionnement très
semblables au fonctionnement des applets.

52 Bachelor IMTN – Programmation Web 2

Programmation Web côté client
¢ Domaine des langages de script :
- JavaScript
- JScript : adaptation du langage JavaScript par Microsoft
- VBScript : langage de script basé sur le langage Visual Basic de Microsoft

• Avantages :
- programmation légère et relativement simple

• Inconvénients :
- Code est envoyé tel quel au client, et donc visible par celui-ci (s'il regarde les sources
de sa page) et donc peu sécurisé. Le bon déroulement du programme dépend
entièrement du navigateur du client, de sa configuration et de son niveau de
sécurité.
- Il n'est donc pas question ici de lier le site web à une base de données.

53 Bachelor IMTN – Programmation Web 2

Programmation Web côté serveur
¢ Comparatif des différentes solutions :
§ http://www.gladir.com/LEXIQUE/ARTICLES/comparelanguagewebphpvsaspnetvsjsp.htm

¢ ASP.NET (Active Server Pages) :

- Technologie développée par Microsoft sur base du Framework.Net.
- Bonne séparation du contenu de la page web, de sa mise en forme et la
programmation des aspects dynamiques
- Langages utilisés : C#, VB.Net, JavaScript.Net, etc. à les nombreux autres langages
partageant le Common Runtime Language du Framework.Net (la machine virtuelle
Microsoft).
- Technologie implémentée sur les serveurs web de Microsoft (IIS).

¢ PHP (PHP: Hypertext Preprocessor) :

- Langage de script interprété côté serveur. Le code lu par le serveur et interprété
pour produire une page HTML à chaque fois que la page sera demandée. Tout type
d'application web peut être créé avec PHP
- Dernière version : PHP 5.6.
54 Bachelor IMTN – Programmation Web 2
Programmation Web côté serveur
¢ ColdFusion
- Technologie de création de pages dynamiques développée par Macromedia.
- Les pages d’application sont des pages web contenant des instructions de
programmation écrite à l’aide d’un langage propriétaire, le CFML (ColdFusion
Markup Language).

¢ AJAX (Asynchronous JavaScript And XML)

- Combinaison de plusieurs éléments :
§ XHTML pour la structure de la page,
§ CSS pour la mise en forme de la page,
§ JavaScript et DOM pour la partie dynamique,
§ XML, XSLT et XMLHttpRequest pour la manipulation des données (ou d'autres formats de
fichiers de données).

55 Bachelor IMTN – Programmation Web 2

Programmation Web côté serveur
¢ Technologies Java
- Servlets
§ Le nom vient d'une analogie possible avec les applets.
§ Programmes créés en Java et tournant sur le serveur web.
§ L'exécution du programme génère les pages web renvoyées au client.

- JSP (Java Server Pages)

§ Création des pages dynamiques avec le langage Java.
§ Les JSP sont une autre manière (plus facile…) d’écrire des servlets Java.
§ Les JSP permettent d'ajouter du code Java dans la page HTML qui sera interprété par le
serveur.

- Évolutions de ces deux technologies

§ JSTL (Java server page Standard Tag Library) : création de tags personnalisés
§ JSF (Java Server Faces) : framework Java, pour le développement d'applications Web
basées sur la notion de composants graphiques intégrés dans une page Web.

56 Bachelor IMTN – Programmation Web 2