La technologie du Web

Benoît GirardDirection des affaires publiques et des communications

Ministère des Services gouvernementaux

benoit.girard@msg.gouv.qc.ca

Version 3 – 21 septembre 2007

Le Web, « c’est pas sorcier ! »

• Nous n’entrerons pas dans les détails techniques.

• La technologie du Web est facile à comprendre.

Le Web, « c’est pas sorcier ! »

• Nous n’entrerons pas dans les détails techniques.

• La technologie du Web est facile à comprendre.

• Adoptons une approche tabula rasa.

Qu’est-ce qu’Internet ?

• On compare souvent Internet à une autoroute.

Qu’est-ce qu’Internet ?

• On compare souvent Internet à une autoroute.

• Par certains côtés, il ressemble davantage au réseau téléphonique.

Comme pour le téléphone…

• Chaque abonné dispose d’un numéro unique permettant de le joindre.

• Dans Internet, on appelle ce numéro « l’adresse IP » :– pour Vidéotron, par exemple, c’est le

205.151.222.250

Comme pour le téléphone…

• Chaque abonné est identifié par un nom qui lui est propre.

• Dans Internet, on l’appelle « le nom de domaine » :– deux exemples connus sont videotron.ca

et sympatico.ca

Comme pour le téléphone…

• On a senti le besoin de créer un bottin dans lequel chaque nom de domaine a une adresse IP correspondante :

– dans Internet, ce bottin s’appelle Domain Name Service, communément désigné par son acronyme DNS.

Contrairement au téléphone...

• Internet est un réseau numérique.

• Cela permet à plusieurs de partager le réseau.

L’architecture du Web – 1

Le réseau matériel d’Internet

Internet est l’assise matérielle du Web

Le protocole TCP/IP

• L’infrastructure matérielle n’a qu’un seul intérêt : permettre le fonctionnement du protocole TCP/IP.

• À bien des égards, le TCP/IP est l’Internet.

Le protocole TCP/IP

• L’infrastructure matérielle n’a qu’un seul intérêt : permettre le fonctionnement du protocole TCP/IP.

• À bien des égards, le TCP/IP est l’Internet.

• Mais qu’est-ce qu’un protocole ?

La notion de protocole

• Un code de conduite favorisant la coordination harmonieuse des comportements (Le code de la route) ;

ou encore

• Une langue qui, partagée, permet de communiquer (le français ou l’anglais).

Le protocole TCP/IP

• …est le code ou la langue qui permet aux ordinateurs du monde entier d’entrer en communication les uns avec les autres et d’échanger de l’information…

– …quel que soit leur fabricant, leur modèle ou leur système d’exploitation.

L’architecture du Web – 2

Le réseau matériel d’Internet

TCP/IP

Le protocole TCP/IP permet auxordinateurs du réseau de communiquer

ICQ @ FTP WEB Napster Usenet etc.

L’architecture du Web – 3

Le réseau matériel d’Internet

Nous utilisons l’infrastructure pour créerun grand nombre de services distincts.

TCP/IP

Les services Internet...

• Ils apparaissent quand on définit leur protocole ;

• Ils s’animent quand on les adopte et qu’on s’en sert ;

• Le protocole est le service – Le service est le protocole ;

• Le reste n’est qu’affaire d’implantation spécifique.

L’exemple de NapsterNapster

Amateurs de musique

Listesde MP3

Les protocoles de pair-à-pair ou peer-to-peer

Napster est un protocole de type client-serveur

Serveur

Clients

Passons maintenant au Web

Le réseau matériel d’Internet

TCP/IP

ICQ @ FTP

World Wide Web

Napster Usenet etc.

Le protocole HTTP

• Le Web repose sur le protocle HTTP ;• C’est une application de type client-

serveur ;• Le client est votre fureteur préféré,

Firefox ou Internet Explorer ;• Le serveur est le logiciel qui vous

accueille quand vous naviguez :– Par exemple, Apache.

Sous le capot...

<a href="http://www.mri.gouv.qc.ca/">Ministère des Relations internationales</a>

Une requête HTTPSchéma de base

Nom du fichier, adresse IP, types MIME,modèle du fureteur, etc.

Document HTML

Client

Serveur

Log

Date et heure

Requête

Réponse

L’architecture du Web – 4

Le réseau matériel d’Internet

TCP/IP

HTTP

Autresservices Internet

Web

Le protocole HTTP estle fondement du Web.

Les caractéristiques fondamentales du Web

• Adressage universel,

• Système d’hyperliens,

• Langage commun.

Le fureteur interprète le code HTML

Nom du fichier, adresse IP, types MIME,modèle du fureteur, etc.

Document HTML

Client

Serveur

Log

Date et heure

Une page de code HTML

La même page, interprétée par le fureteur

Un fragment de codeHTML (dépassé)

et son interprétation

<font size=+3> Bienvenue à <u>chacun</u> et à

<u>chacune</u> d’entre vous! </font>

Bienvenue à chacun et à chacune d’entre vous !

L’interprétation dufureteur sert l’objectif

d’universalité

Serveur

Log

Date et heure

PC

MAC

Linux

HTMLidentique

L’architecture du Web – 5

Le réseau matériel d’Internet

TCP/IP

HTTP

Web Le HTML est le langagedes documents du Web

HTML

Le Web a évolué très rapidement

• Le matériel d’ordinateur s’est standardisé.

Le Web a évolué très rapidement

• Le matériel d’ordinateur s’est standardisé.

• Les pressions se sont faites nombreuses pour :

– maîtriser l’apparence des pages Web.

La feuille de styleou CSS – cascading style sheet

Page html(contenu pur)

Définitions de l’apparence

Application

Feuille de style

Page html(contenu pur)

Pages html(contenu pur)

L’utilité des feuilles de style

• Elles améliorent la précision des commandes faites au fureteur en ce qui concerne :– l’apparence des éléments ;– le positionnement des éléments d’une

page ;– la superposition des éléments.

• Elles facilitent l’entretien des sites.• Elles permettent l’adaptation aux

différents médias de diffusion.

Les feuilles de style peuvent être développées

pour plusieurs supports• L’écran ;

• Le braille ;

• La synthèse vocale ;

• L’ordinateur de poche ;

• L’imprimante ;

• L’écran de télévision ;

• Etc.

L’architecture du Web – 6

Le réseau matériel d’Internet

TCP/IP

HTTP

Web

HTML

CSS – Feuilles de style

Le Web a évoluétrès rapidement

• Le matériel d’ordinateur s’est standardisé ;

• Les pressions se sont faites nombreuses pour :

– maîtriser l’apparence des pages Web ; – ajouter des possibilités au Web :

• le son, l’animation et le vidéo : le multimédia.

Le multimédia créedes problèmes

• Il surcharge le réseau ;

• Il rend précaire un protocole qui n’a jamais été conçu pour ce genre de prestation.

Le Web a évolué très rapidement

• Le matériel d’ordinateur s’est standardisé ;

• Les pressions se sont faites nombreuses pour :

– maîtriser l’apparence des pages Web ; – ajouter des possibilités au Web :

• le son, l’animation et le vidéo : le multimédia,• la programmation des pages Web.

L’animation intelligente : le javascript

HTML

Javascript

Grâce au DOM,le javascript est très flexible

• De l’affichage d’un sous-menu quand la souris passe devant la zone du menu principal…

• À la validation d’un questionnaire avant son expédition,

• Le javascript permet, à peu de frais, l’animation des pages Web, en plus de rendre de nombreux autres services.

L’architecture du Web – 7

Le réseau matériel d’Internet

TCP/IP

HTTP

Web

HTML

CSS –Feuilles de style

DOM

Javascript

L’architecture du Web – 8

Le réseau matériel d’Internet

TCP/IP

HTTP

Web

HTML

CSS – Feuilles de style

Javascript

DOM

JScript VBScriptJava

Le Web a évolué très rapidement

• Le matériel d’ordinateur s’est standardisé ;

• Les pressions se sont faites nombreuses pour :

– maîtriser l’apparence des pages Web; – ajouter des possibilités au Web :

• le son, l’animation et le vidéo : le multimédia,• la programmation des pages Web,• l’interactivité.

L’interactivité : la plus belle promesse du Web

• L’interactivité rend possible le commerce électronique…

• … et, en milieu gouvernemental, la prestation électronique de services.

Sites web « statiques » et « dynamiques »

• L’interactivité du Web repose sur la capacité « dynamique » du protocole HTTP ;

• Commençons donc par établir la distinction entre sites Web « statiques » et sites Web « dynamiques ».

Le site Web « statique »

Serveur

Requête pour un fichier html

Document réclamé .html

Tous les documents sont dans le serveur

Le site « dynamique »

Requête pour un fichier .asp ou. php

Document réclamé .html

Le programme utilisel’information brute d’une base de données,

pour composerune page HTML ad hoc

qui sera envoyée au requérant

Le site « dynamique »

• Le programme s’exécute sur le serveur,

• À l’aide de langages comme :– le ASP de Microsoft (active server pages),

associé à la base de données Access ;– le PHP, très populaire, surtout en milieu

UNIX et Linux, associé à la base de données open source (code source libre) MySQL.

L’architecture du Web – 9

Le réseau matériel d’Internet

TCP/IP

HTTP

Web

HTML

CSS – Feuilles de style

Javascript

DOM

ASP PHP

Langages de programmation des serveurs Web

Le commerce électronique – 1

Ordinateur de l’entreprise

XYZ inc.

Le commerce électronique – 2

.

Comptes clients ;Inventaire ;

Comptabilité ;Commandes ;

Suivi de production ;Etc.

Base dedonnées

Le commerce électronique - 3

.

Base dedonnées

Serveur HTTP

Le commerce électronique – 4

.

Base dedonnées

Serveur

Internet Site Web

Le serveur héberge le site Webde la compagnie, ouvert sur Internet.

Le commerce électronique – 5

.

Base dedonnées

Serveur

Le site étant dynamique, il est relié à la base de données

de l’entreprise.

Internet

Le commerce électronique – 6

Le commerce électronique – 7

Échangesécurisépar SSL

Explorer

Netscape

Les problèmes du Web

• Les standards sont incomplets ;

• Les standards ne sont pas entièrement respectés ;

• Les bases sont fragiles.

L’architecture du Web – 10

Le réseau matériel d’Internet

TCP/IP

HTTP

HTML

CSS – Feuilles de style

Javascript

DOM

ASP PHP

XML

Une refontemajeure :

le XML

Comment fonctionne le XML ?

<livre><titre>L'Ingénieux Hidalgo Don Quichotte de la Manche </titre><auteur><nom>Cervantès</nom> <prénom>Miguel</prénom></auteur><chapitre no=8><titre>Du beau succès que le valeureux Don Quichotte eut en…</titre></chapitre> </livre>

Comment fonctionne le XML ?

DocumentsXML XSL

Contenu Matrice de mise en page

Résultat

Documentsformatés

Comment fonctionne le XML ?

CSSDocumentsXML XSL

Contenu

Apparence

Coordination

Résultat

Documentsformatés

L’intérêt réel du XML

<XML>

<XML>

<XML>

<XML>

Internet

Entrepôts de données XML

Un nouveau départ

<XML>

<XML>

<XML>

<XML>

Internet

Entrepôts de données XML

La technologie du Web

• Nous n’avons qu’effleuré le sujet ;• Malgré la simplification, ce qui a été dit

représente fidèlement la réalité ;• Je vous invite à m’acheminer toute

remarque susceptible d’améliorer cette présentation. (benoit.girard@msg.gouv.qc.ca)

Merci de votre attention