Chapitre I : Introduction au WWW

1.1 Historique
1989 : Tim Berners-Lee lance l'idée de la Toile
En tant qu’utilisateur de CERNET, le réseau du CERN, le chercheur Tim Berners-Lee conçoit l’idée
de naviguer simplement d’un espace à un autre d’Internet à l’aide de liens hypertextes et grâce à un
navigateur. Tim Berners-Lee parle de la création d’une toile, tout internaute pouvant aller d’un
contenu à l’autre suivant des voies multiples. Il présentera son projet au CERN en Novembre 1990.
Pendant les trois années suivantes, il travaillera à l’apparition du World Wide Web, « toile d’araignée
mondiale ».

1990 : L'Université de l'Illinois présente Mosaic

L’université de l’Illinois présente son navigateur Web graphique, reposant sur les principes de la Toile
tels qu’ils ont été formulés par l’équipe du CERN de Tim Berners-Lee, notamment le HTTP.
Nommée Mosaic, l’application fonctionnant sur Windows simplifie considérablement la navigation.
Elle annonce le développement ultérieur de Netscape et autres navigateurs.

1994 : Création de Yahoo!

Deux étudiants de Stanford, David Filo et Jerry Yang, créent l’annuaire Internet Yahoo! Celui-ci doit
permettre aux Internautes de trouver rapidement des sites grâce à un classement hiérarchique.
L’entreprise sera fondée en 1995 et connaîtra un rapide succès.

1994 : Naissance du W3C

Tim Berners-Lee fonde le World Wide Web Consortium, également appelé W3C. Cet organisme a
pour objectif et fonction d’émettre des recommandations afin de promouvoir et d’assurer la
compatibilité des technologies utilisées sur le Web. Toutefois les standards proposés ne sont pas des
normes absolues. L’organisme, essentiel pour assurer l’efficacité des applications tels que les
navigateurs, est géré conjointement par des universités et centres de recherche américains, européens
et japonais.

1.2 LES CONCEPTS DE BASE :

- Le World Wide Web, littéralement la « toile (d’araignée) mondiale », communément appelé le
Web, le web parfois la Toile ou le WWW, est un système hypertexte public fonctionnant sur Internet
qui permet de consulter, avec un navigateur, des pages accessibles sur des sites.

- Une ressource du web est une entité informatique (texte, image, forum Usenet, boîte aux lettres
électronique, etc.) accessible indépendamment d’autres ressources. Une ressource en accès public est
librement accessible depuis Internet. Une ressource locale est présente sur l’ordinateur utilisé, par
opposition à une ressource distante (ou en ligne), accessible à travers un réseau.
On ne peut accéder à une ressource distante qu’en respectant un protocole de communication. Les
fonctionnalités de chaque protocole varient : réception, envoi, voire échange continu d’informations.

- HTTP (pour HyperText Transfer Protocol) est le protocole de communication communément utilisé
pour transférer les ressources du Web. HTTPS est la variante sécurisée de ce protocole.

- Une URL (pour Uniform Resource Locator) pointe sur une ressource. C’est une chaîne de caractères
permettant d’indiquer un protocole de communication et un emplacement pour toute ressource du
Web. (exemple : http://www.univ-km.dz).

- Un hyperlien (ou lien) est un élément dans une ressource associé à une URL. Les hyperliens du Web
sont orientés : ils permettent d’aller d’une source à une destination.

- HTML (pour HyperText Markup Language) et XHTML (Extensible HyperText Markup Language )
sont les langages informatiques permettant de décrire le contenu d’un document (titres, paragraphes,
disposition des images, etc.) et d’y inclure des hyperliens. Un document HTML est un document décrit
avec le langage HTML. Les documents HTML sont les ressources les plus consultées du Web.

- Dans un mode de communication client-serveur, un serveur est un hôte sur lequel fonctionne un
logiciel serveur auquel peuvent se connecter des logiciels clients fonctionnant sur des hôtes clients.

- Un serveur Web est un hôte sur lequel fonctionne un serveur HTTP (ou serveur Web). Un serveur
Web héberge les ressources qu’il dessert.

- Un navigateur Web est un logiciel client HTTP conçu pour accéder aux ressources du Web. Sa
fonction de base est de permettre la consultation des documents HTML disponibles sur les serveurs
HTTP. Le support d’autres types de ressource et d’autres protocoles de communication dépend du
navigateur considéré.

- Une page Web (ou page) est un document destiné à être consulté avec un navigateur Web. Une page
Web est toujours constituée d’une ressource centrale (généralement un document HTML) et
d’éventuelles ressources liées automatiquement accédées (typiquement des images).

- Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour faciliter l’écriture de documents
HTML et de pages Web en général.(voir les WYSIWYG)
- Un site Web (ou site) est un ensemble de pages Web et d’éventuelles autres ressources, liées dans
une structure cohérente, publiées par un propriétaire (une entreprise, une administration, une
association, un particulier, etc.) et hébergées sur un ou plusieurs serveurs Web.

- Une adresse Web est une URL de page Web, généralement écrite sous une forme simplifiée limitée
à un nom d’hôte. Une adresse de site Web est en fait l’adresse d’une page du site prévue pour
accueillir les visiteurs.

- Un hébergeur Web est une entreprise de services informatiques hébergeant (mettant en ligne) sur
ses serveurs Web les ressources constituant les sites Web de ses clients.

- Une agence Web est une entreprise de services informatiques réalisant des sites Web pour ses
clients.

- Un annuaire Web est un site Web répertoriant des sites Web.

- Un portail Web est un site Web tentant de regrouper la plus large palette d’informations et de
services possibles dans un site Web. Certains portails sont thématiques.

- Un service Web est une technologie client-serveur basée sur les protocoles du Web.

1.3 Les applications web

1.3.1 Définition
- Une application web (Web app), est une application manipulable grâce à un navigateur
web. De la même manière que les sites web, une application web est généralement placée sur
un serveur et se manipule en actionnant des widgets à l'aide d'un navigateur web, via un
réseau informatique (Internet, intranet, réseau local, etc.).

- Exemples d’applications web : messageries web, systèmes de gestion de contenu, wikis,

blogs, Les moteurs de recherches, les logiciels de commerce électronique, les jeux en ligne,
les logiciels de forum peuvent être sous forme d'application web.

Les applications web font partie de l'évolution des usages et de la technologie du Web appelée
Web 2.0.
1.3.2 ARCHITECTURE DU WEB :
L’architecture du web se base sur les modèles de Client/Serveur. Le client envoie des requêtes au
serveur.
Exemples de requêtes :
- Transfert de fichiers
- Exécution de programmes sur le serveur
- Mise à jour de fichiers
Les objets manipulés sont repérés par leur URL.
Le transfert se fait en utilisant le protocole http. Il définit le langage utilisé pour les échanges entre
client et serveur Web. Ce protocole n’exige pas de session permanente entre client/serveur.
1.3.3 DEROULEMENT D’UNE REQUETE :

1. Demande d’une connexion

2. Attente de la réponse du serveur
3. Etablissement de la connexion
4. Envoi d’une requête URL
5. Réponse du serveur
6. Affichage de la réponse
7. Fermeture de la connexion
1.3.4 Composantes d’une application web

Fig 1. Composantes d’une application web

N° Rôle Exemples courant

1 OS Serveur Linux, Windows

2 Serveur Web Serveur Web

IIS (NT), PWS(Win9x)

3 Scripts exécutés côté serveur. Ils PERL (Apache, IIS, PWS)

peuvent l'être par des modules du
serveur ou par des programmes VBSCRIPT (IIS,PWS)
externes au serveur (CGI). JAVASCRIPT (IIS,PWS)

PHP (Apache, IIS, PWS)

JAVA (Apache, IIS, PWS)

C#, VB.NET (IIS)

4 Base de données - Celle-ci peut être Oracle (Linux, Windows)

sur la même machine que le
programme qui l'exploite ou sur une
autre via Internet.
MySQL (Linux, Windows)
Access (Windows)
SQL Server (Windows)

5 OS Client Linux, Windows

6 Navigateur Web Netscape, Internet Explorer

7 Scripts exécutés côté client au sein VBscript (IE)

du navigateur. Ces scripts n'ont
Javascript (IE, Netscape)
aucun accès aux disques du
Perlscript (IE)
poste client.
Applets JAVA
1.3.5 Les échanges de données dans une application web avec formulaire

Fig 2. Les échanges de données dans une application web avec formulaire
N° Rôle

1 Le navigateur demande une URL pour la 1ère fois (http://machine/url). Aucun paramètre
n'est passé.

2 Le serveur Web lui envoie la page Web de cette URL. Elle peut être statique ou bien
dynamiquement générée par un script serveur (SA) qui a pu utiliser le contenu de bases de
données (SB, SC). Ici, le script détectera que l'URL a été demandée sans passage de
paramètres et génèrera la page WEB initiale.
Le navigateur reçoit la page et l'affiche (CA). Des scripts côté navigateur (CB) ont pu
modifier la page initiale envoyée par le serveur. Ensuite par des interactions entre
l'utilisateur (CD) et les scripts (CB) la page Web va être modifiée. Lesformulaires vont
notamment être remplis.

3 L'utilisateur valide les données du formulaire qui doivent alors être envoyées au serveur
web. Le navigateur redemande l'URL initiale ou une autre selon les cas et transmet en même
temps au serveur les valeurs du formulaire. Il peut utiliser pour ce faire deux méthodes
appelées GET et POST. A réception de la demande du client, le serveur déclenche le script
(SA) associé à l'URL demandée, script qui va détecter les paramètres et les traiter.

4 Le serveur délivre la page WEB construite par programme (SA, SB, SC). Cette étape est
identique à l'étape 2 précédente. Les échanges se font désormais selon les étapes 2 et 3.
1.3.6 LE PROTOCOLE HTTP
Les applications web se trouvent dans la couche Application et s'appuient donc sur les protocoles
TCP-IP. Les couches Application des machines clientes et serveur s'échangent des messages qui sont
confiées aux couches 1 à 4 du modèle pour être acheminées à destination. Pour se comprendre, les
couches application des deux machines doivent "parler" un même langage ou protocole. Celui des
applications Web s'appelle HTTP (HyperText Transfer Protocol). C'est un protocole de type texte,
c.a.d. que les machines échangent des lignes de texte sur le réseau pour se comprendre. Ces échanges
sont normalisés, c.a.d. que le client dispose d'un certain nombre de messages pour indiquer exactement
ce qu'il veut au serveur et ce dernier dispose également d'un certain nombre de messages pour donner
au client sa réponse. Cet échange de messages a la forme décrite sur le tableau ci-dessus.

Le HTTP est un protocole simple, basé sur l'émission d'une requête vers un serveur HTTP, en vue de
l'obtention d'une ressource. Cette ressource est identifiée par un URL = une position "logique" dans le
réseau. L'objectif initial du HTTP est la requête sur des pages hypertexte (HTML), lesquelles servent
de base à la construction d'un document composite, par combinaison de divers types de ressources
annexes :
- des images
- des feuilles de style
- des scripts clients attachés
L’un des plus importants avantages du protocole http est de « découper » les documents à transférer en
blocs. Ces blocs peuvent être acheminés de manière indépendante du serveur vers le client. Ils seront
ensuite assemblés au niveau du récepteur.

1.4 Le web 2.0 : notions de base

1.4.1 Les sites Web 2.0 : se caractérisent par leurs fonctionnalités, leur ergonomie et leur réactivité
qui s’apparentent davantage à des applications d’ordinateurs de bureau qu’aux applications
traditionnelles du Web.
Quand on souhaite mettre en œuvre un site de type Web 2.0 avec les avantages que nous avons
énumérés précédemment, il faut faire appel à des applications Internet riches (RIA). Contrairement
aux applications Web traditionnelles pour lesquelles le traitement des données est principalement
réalisé côté serveur (le client ne faisant qu’en assurer la présentation), les applications Internet riches
déportent les traitements sur le client (navigateur) afin de mettre à la disposition de l’utilisateur des
fonctionnalités avancées et très réactives.

1.4.2 Les RIA :

Les RIA (Rich Internet Application) sont des applications Web qui permettent de disposer en ligne des
mêmes services que sur une application habituellement installée sur un ordinateur de bureau.
Le webmail est bon exemple de RIA simple car il permet de consulter ses messages électroniques
depuis un navigateur, alors que cela nécessitait auparavant l’utilisation d’un gestionnaire de
messagerie préalablement installé sur son ordinateur (Outlook par exemple).

1.4.3 AJAX
Différentes technologies peuvent être mises en œuvre pour réaliser des applications web réactives.
Parmi ces technologies, il en existe une qui se distingue particulièrement et qui fait beaucoup parler
d’elle : Ajax, mais d’autres solutions permettent aussi de créer des clients riches Internet tel que Flash
couplé avec Flex ou encore les applications Java déployées sur Internet à l’aide de Java Web Start.
Cependant, Ajax est souvent préféré par les développeurs car, contrairement aux autres RIA, il a
l’énorme avantage de ne pas nécessiter la présence d’un plug-in puisqu’il exploite des technologies
intégrées par défaut dans tous les navigateurs récents (CSS, DOM, JavaScript et son objet
XMLHttpRequest, XML).

1.4.4 Plug-in
Le plug-in est un programme devant être installé préalablement sur le navigateur pour qu’une
application puisse fonctionner.

1.5 Etapes de création d’une application web

- Définition du projet
•Objectif du site, sa cible, sa rentabilité, les moyens financiers
•Autonomie souhaitée et type de moyens humains pour la mise à jour
•Contenu: pages, services attendus, principe de navigation
- Mise en œuvre
•Dépôt d’un nom de domaine et choix d’un hébergeur
•Choix et installation d’un système de gestion de contenu ou un éditeur de sites web
- Conception
•Etablissement de la structure des pages HTML ou XHTML
•Définition d’une arborescence
•Mise au point d’une charte graphique et éditoriale
- Réalisation
•Création des pages
•Mise en place de la charte graphique via les CSS
•Eventuels développements dynamiques (formulaires, services, etc)
- Suivi
•Recette du site une fois prêt
•Lancement du site: mise en ligne
•Annonce: faire connaître son site
•Maintenance (nouveaux contenus, améliorations,..)

1.6 Outils de création de sites web

1.6.1 Les éditeurs de texte

1.6.2 Les éditeurs WYSIWYG

WYSIWYG : What You See Is What You Get, c’est-à-dire « ce que vous voyez est ce que
vous obtenez », « tel écran tel écrit »...

Ils Permettent de rédiger le contenu du site sans avoir à taper la moindre ligne de code.

1.6.3 Les systèmes de gestion de contenu (CMS : Content Management System)

1.6.3.1 Caractéristiques des CMS

- Se charge de la partie commune aux pages du site et génère les pages à partir du texte ou des
données qui lui sont fournis.

- Peut être statique (créer les pages avant qu’elles ne soient mises en lignes), ou dynamique
(créer la page à la demande du visiteur).
- N’apporte rien quant au contenu lui-même, mais permet de gérer la structure du site,
utilisation de FAQ (Foire Aux Questions), de documents, de blogs, de forums de discussion,
etc.), ajouter et classer les pages

- Permet d’adapter l’interface du site, de générer des pages imprimables plus dépouillées ou
de faire participer des contributeurs au site.

1.6.3.2 Types de CMS

- Les blogs:
Wordpress: le plus répandu. Génère automatiquement les pages HTML à partir du texte édité
qui est stocké dans une base de données. On peut créer un post sur son blog par envoi d’un e-
mail. http://www.wordpress-fr.net/
DotClear: Prend en charge l’administration du blog, recherches, catégorisation, etc.
http://fr.dotclear.org/

- Les wikis: des sites dont le contenu est édité par les visiteurs
MediaWiki utilise PHP et MySQL. http://www.mediawiki.org/wiki/MediaWiki/fr
PmWiki et DokuWiki sont en PHP mais n’utilisent pas de base de donnée.
http://www.pmwiki.org/wiki/PmWikiFr/PmWikiFr

- Les forums
PunBB http://punbb.informer.com/
phpBB est le plus utilisé sur les sites dédiés au forum. http://www.phpbb-fr.com/
MyBB et SMF sont équivalents en fonctionnalités à phpBB.

- Les portails
Joomla. Projet collaboratif de CMS Internet et intranet en PHP. http://www.joomla.fr/
Drupal. http://drupalfr.org/
Xoops. http://www.frxoops.org/