Transcript La technologie du Web

La technologie du Web
Benoît Girard
Direction des affaires publiques et des communications
Ministère des Services gouvernementaux
[email protected]
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
Internet est l’assise
matérielle du Web
Le réseau matériel d’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.
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 protocole TCP/IP permet aux
ordinateurs du réseau de communiquer
TCP/IP
Le réseau matériel d’Internet
L’architecture du Web – 3
Nous utilisons l’infrastructure pour créer
un grand nombre de services distincts.
ICQ
@
FTP WEB Napster Usenet
TCP/IP
Le réseau matériel d’Internet
etc.
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 Napster
Napster
Listes
de MP3
Amateurs de musique
Les protocoles de pair-à-pair
ou peer-to-peer
Napster est un protocole
de type client-serveur
Serveur
Clients
Passons maintenant au Web
World Wide Web
ICQ
@ FTP
Napster Usenet
TCP/IP
Le réseau matériel d’Internet
etc.
Le protocole HTTP
• Le Web repose sur le protocle HTTP ;
• C’est une application de type clientserveur ;
• 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 HTTP
Schéma de base
Serveur
Client
Requête
Nom du fichier, adresse IP, types MIME,
modèle du fureteur, etc.
Date et heure
Document HTML
Réponse
Log
L’architecture du Web – 4
Le protocole HTTP est
le fondement du Web.
Web
Autres
services
Internet
HTTP
TCP/IP
Le réseau matériel d’Internet
Les caractéristiques
fondamentales du Web
• Adressage universel,
• Système d’hyperliens,
• Langage commun.
Le fureteur interprète
le code HTML
Serveur
Client
Nom du fichier, adresse IP, types MIME,
modèle du fureteur, etc.
Date et heure
Document HTML
Log
Une page de code HTML
La même page, interprétée
par le fureteur
Un fragment de code
HTML (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 du
fureteur sert l’objectif
d’universalité
Serveur
PC
MAC
HTML
identique
Date et heure
Linux
Log
L’architecture du Web – 5
Web
Le HTML est le langage
des documents du Web
HTML
HTTP
TCP/IP
Le réseau matériel d’Internet
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 style
ou CSS – cascading style sheet
Feuille de style
Définitions
de l’apparence
Page html
Page
html
Pages
html
(contenu
pur)
(contenu
(contenupur)
pur)
Application
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
Web
CSS – Feuilles de style
HTML
HTTP
TCP/IP
Le réseau matériel d’Internet
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ée
des 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
Web
Javascript
DOM
CSS –Feuilles de style
HTML
HTTP
TCP/IP
Le réseau matériel d’Internet
L’architecture du Web – 8
Web
Java
Javascript
JScript
VBScript
DOM
CSS – Feuilles de style
HTML
HTTP
TCP/IP
Le réseau matériel d’Internet
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
Tous les documents
sont dans le serveur
Requête pour un fichier html
Document réclamé .html
Le site « dynamique »
Le programme utilise
l’information brute d’une base de données,
pour composer
une page HTML ad hoc
qui sera envoyée au requérant
Requête pour un fichier .asp ou. php
Document réclamé .html
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
Langages de programmation des serveurs Web
Web
Javascript
ASP
PHP
DOM
CSS – Feuilles de style
HTML
HTTP
TCP/IP
Le réseau matériel d’Internet
Le commerce électronique – 1
Ordinateur de
l’entreprise
XYZ inc.
Le commerce électronique – 2
Comptes clients ;
Inventaire ;
Comptabilité ;
Commandes ;
Suivi de production ;
Etc.
Base de
données
.
Le commerce électronique - 3
Serveur HTTP
Base de
données
.
Le commerce électronique – 4
Le serveur héberge le site Web
de la compagnie, ouvert sur Internet.
Serveur
Internet
Site Web
Base de
données
.
Le commerce électronique – 5
Le site étant dynamique,
il est relié à la base de données
de l’entreprise.
Serveur
Internet
Base de
données
.
Le commerce électronique – 6
Le commerce électronique – 7
Échange
sé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
Javascript
ASP
PHP
DOM
CSS – Feuilles de style
HTML
XML
HTTP
TCP/IP
Le réseau matériel d’Internet
Une refonte
majeure :
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 ?
Contenu
Documents
XML
Matrice de mise en page
XSL
Résultat
Documents
formatés
Comment fonctionne le XML ?
Apparence
Contenu
Documents
XML
Coordination
CSS
XSL
Résultat
Documents
formatés
L’intérêt réel du XML
Entrepôts de données XML
Internet
<XML>
<XML>
<XML>
<XML>
Un nouveau départ
Entrepôts de données XML
Internet
<XML>
<XML>
<XML>
<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. ([email protected])
Merci de votre attention