L`Information circulant sur le World Wide Web

F. Dubois
L’Information circulant sur le World Wide Web
Francis Dubois
Médecine Nucléaire - CHU - St Etienne.
Résumé
Le Word Wide Web est sans conteste ce qui a permis le développement le plus spectaculaire d’Internet, à tel point que l’on confond souvent les deux notions. Le Web est basé sur des
pages en hypertexte écrit dans le langage HTML. On découvrira dans cet exposé les bases de ce
langage et toutes ses possibilités qui permettront de comprendre ce qui se passe lorsque l’on "surfe"
sur des pages Web.
Web / World Wide Web / HTML
INTRODUCTION
ðAu mois d’août 2000, 17,6 % des
foyers français étaient connectés sur
Internet soit environ 7 millions de personnes. 40 % étaient des femmes et
28 % habitaient la région parisienne.
En Grande Bretagne 31,2 % des foyers
sont connectés et 25,5 % en Allemagne. Dans le monde 300 millions de
personnes sont connectées (3000 fois
plus qu’il y a 7 ans). 51 % parle an-
glais et 78 % des pages sont en anglais. On assiste actuellement à une
révolution culturelle dont on n’a pas
encore saisi toute l’ampleur.
INTERNET : LE RÉSEAU MONDIAL
ðInternet est un vaste réseau d’ordinateurs (actuellement plus de 50 millions de machines) tous interconnectés entre eux. La grande force de cette
structure est de n’appartenir à personne et certains pensent que de ce
fait, il s’agit d’un des derniers espaces de liberté au monde. Néanmoins
des organismes définissent des normes, comme le consortium W3C
(World Wide Web Consortium : http:/
/www.w3c.org ) qui définit le langage
de communication HTML que nous
détaillerons dans la suite. On trouve
aussi des organismes qui attribuent
les noms de domaines comme
l’InterNIC (www.internic. net) dans le
monde pour les nommages en ".net"
Correspondance : Francis Dubois - Médecine Nucléaire - Centre Hospitalier - 42055 St Etienne Cedex 2
Tél : 04 77 12 77 42 - Fax : 04 77 12 05 30 - E-mail : [email protected]
Revue de l’ACOMEN - 2000 - vol.6 - n°4
207
L’information circulant sur le World Wide Web
ou ".org" ou l’AFNIC (http://www.nic.
org) en France pour les nommages en
".fr". L’information circule sous forme
de "paquets". L’information est divisée en paquet, chaque paquet est envoyé sur le réseau vers son destinataire. Des routeurs1 déterminent selon l’adresse de destination du paquet
le chemin à prendre à l’intérieur du
réseau. Si une défaillance survient sur
une voie du réseau, l’information peut
circuler sur une autre voie pour arriver à son destinataire. L’ordinateur qui
reçoit les paquets les remet dans le
bon ordre pour reconstituer l’information et demande la réémission des
paquets manquants. Tous les ordinateurs doivent utiliser le même protocole. Il a été crée en 1974 par Bob
Kahn et Vint Cerf : c’est le protocole
TCP/IP ou Transmission Control
Protocol/Internet Protocol. La fiabilité
de ce protocole est si grande que toutes les institutions (y compris l’armée) l’utilisent actuellement.
Chaque ordinateur connecté sur
Internet possède un numéro propre
(analogue à un numéro de téléphone)
ou adresse IP (Internet Protocol). Ce
numéro est formé de quatre groupes
de chiffres variant entre 0 et 255 (Par
exemple 167.20.32.29). Si l’ordinateur est relié directement au réseau
(comme dans le cas d’une université)
il possède une adresse fixe. Dans la
plupart des cas, l’utilisateur se relie à
Internet via un fournisseur d’accès
(ou provider) payant. La liaison se fait
le plus souvent par modem. Lors de
la connexion, le fournisseur d’accès
attribue à l’utilisateur une adresse IP
temporaire (que l’on peut connaître
sur PC en exécutant le programme
winipcfg.exe que l’on trouve dans le
répertoire Windows). Les modems actuels sont à la norme V90 et permettent la réception maximale de 56000
bits par secondes. D’autres types de
liaison se développent afin d’avoir
une liaison à haut débit devant permettre à terme l’accès à la vidéo en
temps réel, comme les liaisons utilisant le câble télévision, le satellite, la
boucle radio locale. La plus intéressante de ces liaisons est sans doute
ADSL qui utilise le câble téléphonique normal en superposant les signaux d’Internet aux signaux du téléphone classique. Cette offre est
malheureusement réservée aux grandes villes. L’information est contenue
dans des ordinateurs appelés "serveurs". A partir d’un ordinateur distant appelé "client", on peut aller chercher cette information. Il est nécessaire d’utiliser un programme spécifique qui dépend de la nature de l’information. Par exemple, il faut utiliser un logiciel de messagerie pour
interroger un serveur de mail. Le serveur possède une adresse IP, mais on
lui donne également un nom plus
facile à retenir (par exemple www.
acomen.asso.fr au lieu de 195.154.205.
90). Ce nom est validé par l’organisation AFNIC et possède une syntaxe
très précise : "www" est le nom de
sous domaine. Ici c’est un serveur de
page web. Acomen.asso est le nom
de domaine. L’AFNIC impose ".asso"
pour signifier qu’il s’agit d’une association. Le suffixe ".fr" est celui du
pays. Il en existe d’autres comme
".com" pour les sites de nature commerciale ou «.org» pour les organisations. Un serveur de nom appelé serveur DNS transforme le nom en
adresse IP. On peut pour interroger
le site de l’Acomen faire aussi bien
http://195.154.205.90 ou http://
www.acomen.asso.fr. La connexion avec
la première forme est plus rapide car
elle évite l’interrogation d’un serveur
DNS, mais on retient moins facilement cette succession de chiffres que
le nom en clair.
Plusieurs services coexistent sur
Internet : le courrier électronique (e-
mail), les newsgroups2 , le chat3 (IRC
ou Internet Relay Chat), l’échange de
fichier (FTP4 ). Mais le service qui a le
plus fait connaître Internet est sans
doute le World Wide Web ou plus simplement le Web ou www ou w3. On
confond souvent du reste Web et
Internet. Le Web est donc seulement
une des possibilités de l’Internet.
LE WORLD WIDE WEB5
ET SON HISTORIQUE
ðLe Web est composé d’un nombre
immense (plusieurs dizaines de millions et le nombre augmente sans
cesse) d’ordinateurs appelés serveurs
Web (ou serveurs HTTP6 ) qui sont
reliés en réseau par Internet. L’information qui y circule est sous forme
de page Web décrites dans le langage
HTML7 . Le logiciel qui permet de lire
ces pages est appelé un navigateur (ou
browser en anglais). Les plus connus
sont Internet Explorer et Netscape
Navigator. On peut facilement passer
d’une page à l’autre par l’intermédiaire de liens. Cette action de passer
très facilement d’un document à
l’autre s’appelle "surfer" et la personne qui "surfe" est un "surfeur".
Le Web est basé sur l’hypertexte qui
permet de définir des liens sur un
autre document. L’hypertexte a été
défini par Ted Nelson, mais c’est la
société APPLE qui avec son logiciel
"Hypercard" montrera une première
application de ce concept. En 1989,
Tim Berners-Lee du CERN8 jette les
bases de l’HTML et la première application tourne au CERN en octobre
1991. En janvier 1993, il existe seulement une cinquantaine de serveurs
HTTP dans le monde. Le premier navigateur "Mosaic" sur PC et MAC voit
le jour en octobre 1993.
En juillet 1993, le WWW Consortium
1
Les routeurs sont des ordinateurs qui véhiculent les paquets d’un réseau à un autre. Il choisit en fonction du point de destination le trajet le plus rapide
pour acheminer le paquet de données.
2
Newsgroup est un forum de discussion sur un sujet particulier.
3
Chat vient de l’anglais «To chat» signifiant bavarder. Le chat est une discussion en ligne entre deux ou plusieurs personnes.
4
FTP = File Transfer Protocol. C’est un protocole de transmission de fichier permettant l’échange de documents entre deux ordinateurs.
5
World Wide Web = Toile d’araignée mondiale ou plus simplement “ toile ” en français.
6
HTTP = Hypertext Transfer Protocol. C’est le protocole qui se charge du transfert de documents écrit en HTML.
7
HTML = Hypertext Markup Language. C’est un langage qui décrit le contenu et la mise en forme d’une page Web.
8
CERN = Centre Européen de la Recherche Nucléaire à Genève.
208
Revue de l’ACOMEN - 2000 - vol.6 - n°4
F. Dubois
est créé pour normaliser le Web.Alors
tout va très vite et on assiste à une
explosion du nombre de serveurs
Web. Netscape est lancé fin 1994 et la
première version d’Internet Explorer
sort en décembre 1995.
HTML par la fonction "source" des
navigateurs.
Actuellement le langage HTML en est
à la version 4, Internet Explorer à la
version 5.5 et Netscape à la version
6.0.
ðUn document HTML est toujours
entouré par les balises <html> et </
html>. Le document est divisé en
deux parties : l’en-tête (ou header) qui
donne différentes informations sur le
document, mais dont le contenu ne
s’affiche pas dans un navigateur et le
corps (ou body) dont le contenu est
affiché.
La structure de base est donc :
<html>
<head>
Partie en-tête
</head>
<body>
Partie à afficher
</body>
</html>
LE LANGAGE HTML
ðLe langage HTML permet de définir le contenu d’une page Web. Une
page HTML est une page de texte et
un simple éditeur de texte permet
d’écrire des pages HTML. Une page
HTML contient à la fois l’information
qui doit être affichée dans la fenêtre
d’un navigateur mais aussi la manière
dont ce contenu doit être affiché. Le
contenu peut être du texte, mais
aussi des images, des animations, du
son, de la vidéo…
Les balises
ðLa manière dont l’information doit
être affichée est décrite dans le langage HTML par l’intermédiaire de
balises. Une balise contient une commande (normalisé maintenant en minuscule) à l’intérieur des caractères
"<" et ">" et qui décrit l’action à porter sur l’information qui suit. Par
exemple la balise <center> indique
que le texte qui suit doit être centré.
La fin de l’action est décrite par le
même nom de commande mais précédée du caractère "/". Pour l’exemple de la balise "center" on a :
<center>. Voici le texte à centrer</
center>. Certaines balises possèdent
un attribut comme par exemple <font
color=red>Texte en rouge</font>.
L’attribut "color" permet de spécifier
la couleur du texte entouré par la
balise "font".
Il existe de très nombreuses balises
qui vont permettre de définir toutes
les possibilités de présentation (couleur, taille des caractères, italique,
gras…). On peut visualiser le texte
fond par un attribut de la balise
<body>.
Par exemple: <body bgcolor=blue>
ou <body background="image.gif">
Structure d’une page HTML
Partie en-tête
ðCette partie contient des informations importantes destinées avant tout
au moteur de recherche et décrivant
le contenu de la page. On trouve ainsi
le titre de la page (balise <title>), et
des balises <meta> donnant une description du contenu de la page, l’auteur ainsi que les mots clés. Par exemple :
<head>
<title>Scintigraphie osseuse</title>
<meta name= "description" content
= "Scintigraphie osseuse dans un cas
de maladie de Paget">
<meta name="keywords" content=
"médecine nucléaire, scintigraphie
osseuse, maladie de Paget">
</head>
Partie corps du document
ðComme on l’a vu le corps du document est situé à l’intérieur des balises <body> et </body>. Il contient
toute l’information qui sera affichée
par le navigateur. On peut définir une
couleur de fond ou une image de
Revue de l’ACOMEN - 2000 - vol.6 - n°4
Le texte
ð De nombreuses possibilités de
mise en forme du texte existent. Actuellement ces possibilités laissent la
place aux feuilles de style que nous
verrons plus loin et qui permettent
de définir de manière globale pour
toutes les pages d’un site la manière
dont le texte est présenté. En dehors
des balises simples comme <center>,
<b> ou <strong> pour gras, <i> pour
italique, existe la balise <font> qui permet de définir la nature de la police
de caractère, sa taille, sa couleur. Par
exemple: <font face="arial" size=4
color=red>.
Les titres sont particulièrement importants en HTML et ils sont définis
par les balises <h1> à <h6> selon leur
importance. Ils possèdent des attributs d’alignements.
Il existe aussi des balises de listes à
puces <ul> et <li> et listes numérotées <ol> et <li>.
Les liens
ðLes liens hypertextes permettent de
se déplacer à l’intérieur de la page
HTML (lien ancre), de charger une
page HTML présente sur le même site
(lien interne) ou de charger une page
présente sur un autre site (lien externe). Ils sont par défaut présentés
en bleu souligné et changent de couleur lorsque la page a déjà été chargée et est présente en local dans le
répertoire tampon (Windows/
Temporary Internet Files sur les PC).
Il est aussi possible de définir des
liens à partir d’une image.
Les liens permettent également d’accéder à partir du Web aux autres services d’Internet comme la messagerie (mailto:) et le transfert de fichiers
(ftp:).
209
L’information circulant sur le World Wide Web
Les liens ancres
Ce type de lien permet de se déplacer directement vers un endroit d’une
page HTML repéré par une ancre. On
définit cet endroit par <a name=
"ancre1">Ancre n°1</a> et le lien vers
cette ancre par <a href="#ancre1">
Lien vers ancre n°1</a>
Liens internes
Ils permettent de charger une autre
page situé sur le même site. On obtient ce lien par: <a href="page2.htm">
Lien vers la page 2</a>.
Liens externes
Ils permettent de charger n’importe
quel document présent sur le Web à
partir de son URL9 . On doit spécifier
tout d’abord le protocole utilisé.
- "http://" est le protocole utilisé sur
le Web.
- "file://" permet de charger n’importe quel type de fichier, comme par
exemple des fichiers ".doc" ou ".pdf".
Si le programme permettant la lecture
du document (Word ou Acrobat
Reader dans les cas précédents) est
installé alors le document s’ouvre
dans une fenêtre de ce programme,
sinon il est téléchargé.
- "ftp://" pour le téléchargement de
fichiers.
- mailto:// pour envoyer un courrier
à l’adresse indiquée.
Un lien direct vers les conférences
multimédia de l’Acomen s’écrit: <a
href=http://www.univ-st-etienne.fr/lbti/
acomen/multimedia>Lien vers les conférences multimédia<a>
On définit les attributs de couleur, de
fonte de caractère, de taille… pour les
balises HTML de base (comme h1).
On peut aussi définir de nouvelles
balises pour une présentation d’une
partie de texte (texte d’une légende
par exemple). Dans l’exemple ci-dessous on définit l’image de fond commune dans body, la couleur des liens
et en particulier le changement de
couleur d’un lien lorsque la souris
passe dessus (élément de DHTML)
dans a:hover, les attributs de h1 et h2
et la définition des caractères correspondant à une légende.
<!—body { background-image:
url(images/acomen_fond.gif)}
a:active { color: #0000FF}
a:hover { color: #3399FF}
h1 { font-size: 24pt; color: #FF0000}
h2 { font-size: 16pt; color: #336633}
.legende { font-family: "Times New Roman", Times, serif; font-size: 12pt; fontstyle: italic}
—>
les balises <th> et </th> pour les titres de colonnes et <td> et </td>
pour les cases du tableau.
Ta b leau I. Code d’un ta
b leau et résultat
tab
dans un navigateur
<table>
Colonne 1 Colonne2
<tr>
Cellule 1
Cellule 2
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>
Les cadres
Les cadres ou frames permettent le
multifenêtrage. La fenêtre d’écran est
divisée en plusieurs sous-fenêtres indépendantes et pouvant être modifiées par action sur des liens. Chaque
cadre possède des ascenseurs qui
permettent le défilement du texte
dans chaque sous fenêtre. Les cadres
utilisent les balises <frameset> et
<frame>.
Les tableaux et les cadres
Les tableaux
Les tableaux (balises <tr>, <th> et
<td>) sont très utilisés car ils permettent de positionner précisément un
texte ou une image sur la page. Le
tableau est défini entre les balises <table> et </table>. Chaque ligne du tableau est comprise entre les balises
<tr> et </tr> et les cellules utilisent
Les images
ðLes images sont certainement après
le texte l’élément le plus important
que l’on trouve sur le Web. Il peut
Les feuilles de style
Les feuilles de style permettent de définir de manière globale la façon dont
les documents sont affichés. On les
utilise pour donner un style à l’ensemble d’un site.
Les feuilles de styles sont placées
dans un fichier texte d’extension
".css" auquel toutes les pages se réfèrent. Les feuilles de style font également partie du concept du DHTML9 .
Figure 1. Trois cadres dans une page du site ACOMEN
9
URL = Uniform Resource Locator. C’est l’adresse Internet d’un document. Par exemple la page d’accueil de l’Acomen a pour URL: http://www.acomen.asso.fr.
DHTML = Dynamic HTML. Permet de créer à l’aide de feuille de style et du langage javascript des possibilités de positionnement au pixel près ainsi que
d’animation.
10
210
Revue de l’ACOMEN - 2000 - vol.6 - n°4
F. Dubois
s’agir de bandeaux, de boutons, de
graphiques ou d’images photographiques ou médicales. Les images sont
classées en deux grands groupes : les
images bitmap et les images vectorielles. Les images scintigraphiques
après transformation se classent dans
la première catégorie.
Les images bitmap
Ce sont des images constituées par
une matrice de points ou pixels. Les
points sont très proches les uns des
autres et ne deviennent distinguables
que lors d’un agrandissement. Chaque point de l’image possède sa couleur propre. Les couleurs sont codées
dans le système RVB correspondant
au mélange des trois couleurs de
base en synthèse additive R = rouge
V = vert B = bleu.
extrêmement grande va mettre un
temps de 1 440 000/(4*1024) = 351
secondes (près de 6 minutes !). Il est
donc nécessaire de coder les images
pour que celles-ci puissent se charger dans des temps raisonnables.
Il existe pour les images bitmap seulement trois formats de compression :
le format GIF, le format JPEG et le plus
récent le format PNG.
Le format GIF
Ce format (Graphics Interchange Format) a été développé spécifiquement
pour le Web par la société Compuserve. Il est actuellement très utilisé.
La compression utilise deux principes :
1. La limitation du nombre de couleurs possibles à 256.
2. L’utilisation d’un algorithme de
compression LZW (d’après le nom de
ses inventeurs Lempel, Ziv et Welch).
Cet algorithme permet la compression sans perte d’information.
Ce format possède de très nombreuses fonctionnalités :
- Il permet l’entrelacement. L’image
Figure 2. Synthèse additive des couleurs
Chaque couleur peut avoir 256 niveaux qui correspondent à un octet
(ou 8 bits). Le nombre total de couleurs possibles est de 256*256*256 =
16 777 216.
s’affiche progressivement d’abord
grossièrement puis plus finement au
fur et à mesure du chargement. Cet
effet permet à l’internaute de patienter lors du chargement d’une image
un peu grande.
- Il permet de définir une couleur
transparente. L’image apparaît comme
ayant des contours irréguliers en faisant transparaître l’arrière plan autour
de l’objet.
- Il permet dans sa version 98 de définir des animations à partir d’une
série d’images gif se succédant.
Néanmoins ce format a un certain
nombre d’inconvénients :
Figure 3. Ensemble des 16 777 216 couleurs possibles
Une image de la taille d’un écran
800*600 occupe une place de
800*600*3 = 1 440 000 octets. Une
liaison avec modem permet souvent
seulement un débit de 4 Koctets par
seconde. Cette image qui n’est pas
- Le nombre de couleur est limité à
256. S’il s’agit d’une image en noir et
blanc, 256 niveaux de gris suffisent.
Mais pour une image en couleur type
photo, le nombre de couleurs est insuffisant et l’image est dégradée.
- L’algorithme LZW est la propriété
de la société Unisys qui revendique
des droits liés au brevet (5000 dol-
Revue de l’ACOMEN - 2000 - vol.6 - n°4
lars). En pratique, on peut utiliser ce
format si on dispose pour la création
de ces images d’un logiciel ayant acquis la licence d’utilisation (type
Phoshop ou Paint Shop Pro). A cause
de ce problème, le format gif risque
d’être de moins en moins utilisé.
Au total, du fait de l’absence de perte
d’information lors de la compression,
le format gif est particulièrement utilisé pour les graphiques et pour les
boutons et bandeaux (que l’on peut
animer par la technique du gif animé).
Le format JPEG
Ce format a été défini par le Joint
Photographic Experts Group. Contrairement au format gif, il est exempt
de tout droit et est par ailleurs compatible avec tous les navigateurs actuels. La compression s’effectue avec
perte d’information. Le taux de compression peut être ajusté par des programmes de traitement d’image. C’est
le format idéal pour réduire la taille
de photographies couleurs. Pour les
graphiques type bannière, ce format
ne convient pas car des effets parasites apparaissent. Les formats JPEG
gèrent l’entrelacement, mais pas la
transparence. Ce format va être amélioré avec le format JPEG 2000 (J2K)
utilisant un algorithme de compression par ondelettes et permettant un
haut taux de compression et la diminution des artéfacts de compression.
Le format PNG
C’est le format le plus récent (Portable Networks Graphics). Il est libre
de tout droit et réunit les atouts des
deux précédents formats. Il n’est utilisable que dans les versions récentes des navigateurs. Il utilise une méthode de compression sans perte de
données et peut gérer jusqu’à 16 millions de couleurs. Il accepte l’entrelacement et surtout permet de définir une transparence variable sur 256
niveaux permettant de nombreux effets. Malheureusement, les versions
actuelles des navigateurs ne gèrent
pas encore cet effet.
211
L’information circulant sur le World Wide Web
Ta b leau II. Compar
aison des ffor
or
mats d’ima
g es
Comparaison
ormats
d’imag
Nombre de colonnes
Per
te d’inf
or
mations
erte
d’infor
ormations
Entrelacement
Transparence
Libre de droit
Utilisation
GIF
JPEG
PNG
256
non
oui
1 niveau
non
Bannière,
boutons,
schémas
16 millions
oui
oui
non
oui
Images
couleurs
16 millions
non
oui
256 niveaux
oui
Universel
mais limité
aux navigateurs
récents
Les autres formats
Acquisition d’images
Beaucoup d’autres formats d’images
existent (bmp, pcx, tiff etc..). En général, ils n’apportent rien de plus que
les formats présents sur le WEB. Il est
conseillé d’utiliser un logiciel de
conversion de format pour revenir à
un des formats précédents. Si une
image avec un de ces formats est présente sur le WEB, le navigateur propose soit de la transférer en tant que
fichier pour la sauvegarder sur votre
disque dur, soit de l’ouvrir avec un
logiciel de traitement d’image si l’un
de ceux-ci est installé sur votre ordinateur.
Il existe de nombreuses façons d’acquérir des images. On peut distinguer
les images sous une forme analogique des images sous une forme numérique. Les images analogiques doivent être transformées en images
numériques par l’intermédiaire d’un
appareil photo ou d’une caméra numérique ou par un scanner. Les images numériques peuvent être crées
par un logiciel de dessin ou récupérés à partir de diverses sources et en
particulier d’Internet. Nous traiterons
un peu plus loin le cas des images
médicales. Le plus souvent les images doivent être mises en forme par
un logiciel de dessin. Pour limiter la
taille, les images peuvent être rééchantillonnées. En effet, les images
sur le WEB ont essentiellement pour
but d’être visibles sur un écran. La
résolution de l’écran est de 72 dpi
(dot per inch) qui correspond à la
valeur standard sur le WEB. Sauf dans
le cas ou l’on souhaite imprimer les
images, cette résolution suffit par
exemple pour un scannage d’un document photo.
Figure 4. Acquisition d'imges.
212
Revue de l’ACOMEN - 2000 - vol.6 - n°4
F. Dubois
Les images scintigraphiques
Les images scintigraphiques diffèrent
des images précédentes sur deux
points :
1. Ce sont des matrices de nombres
et il est nécessaire pour une visualisation de choisir une échelle de couleur en ajustant le minimum et le
maximum par rapport à l’image.
2. Les formats dans lesquels sont archivés ces matrices dépendent de
chaque constructeur.
Dans le cas général les étapes pour
pouvoir utiliser une image scintigraphique sur le WEB sont les suivantes :
1. Passage de la matrice image du
format propriétaire vers un format général type Interfile.
2. Utilisation d’un logiciel qui gère
le format Interfile (comme le logiciel
Medvision) et affichage de l’image
avec choix de l’échelle de couleur
et réglage des contrastes.
3. Sauvegarde de l’image sous un
format PC ou MAC
4. Si le format de sauvegarde précédent n’est pas GIF, JPEC ou PNG alors
utiliser un logiciel de conversion vers
un de ces formats. L’utilisation de 16
millions de couleurs n’est pas nécessaire avec les images scintigraphiques
et le format GIF avec 256 niveaux de
couleurs convient très bien même
pour des images en couleurs.
Une autre possibilité théorique est de
développer une applet 11 Java qui
prenne en charge la transformation
et la visualisation de l’image à partir
du format Interfile. Cette applet pourrait permettre en outre à l’utilisateur
de modifier les contrastes de l’image
à l’aide d’ascenseurs voire de choisir de nouvelles échelles de couleur.
Cet outil est encore à développer ou
à diffuser.
lement des animations simples. A
l’aide d’un programme dédié, on réunit plusieurs images qui seront lues
Figure 5. Séquence d’images pour le petit logo animé "en construction"
Les images vectorielles
Au lieu d’enregistrer la couleur de
chaque pixel, on enregistre une description de l’image à l’aide de figures géométriques. On utilisera des lignes, rectangles, cercles, splines…
avec des attributs de taille et de couleur. Cette description permet un gain
de place considérable. La déformation de taille (comme un zoom) de
l’image ne fait perdre aucune qualité
à l’image, puisque celle-ci peut être
entièrement recalculée pour la nouvelle taille. Jusqu’à présent les images vectorielles n’étaient pas un format de base de HTML. C’est la société
Macromedia avec les logiciels
Director et surtout Flash qui a développé ce type d’image. Il est nécessaire d’adjoindre un plug-in 12
Shockwave ou flash au navigateur
pour que celui-ci puisse visualiser ces
images vectorielles. Ce point sera détaillé plus loin.
Un nouveau format graphique a été
défini par le consortium W3. Il s’agit
de SVG (Scabable Vector Graphics)
qui gère les images vectorielles. Les
navigateurs actuels ne le prennent pas
en charge à ce jour.
Les images vectorielles ne conviennent pas pour des documents photographiques ou des images comprenant de très nombreux détails. Elles
sont utiles pour des logos, des schémas, mais surtout permettent de réaliser facilement des animations.
Les plug-in flash et shockwave
Les images animées
Le format "GIF" permet de créer faci-
les unes derrière les autres. On définit l’intervalle de temps entre les
images et le nombre de répétitions.
ðLa société Macromédia a développé
tout un ensemble de techniques permettant une animation sur le Web.
Deux principaux programmes peuvent être utilisés. Flash (actuellement
en version 5) permet de réaliser des
animations vectorielles animées et
Director (actuellement en version 8)
permet de diffuser des présentations
multimedia associant images, animations, sons et vidéos.
La technologie flash
Le concept de f lash repose sur
l’image vectorielle. L’information
pour décrire une telle image est très
réduite et donc la taille du fichier à
charger. Les animations sont facilement possibles par modifications des
objets vectoriels décrivant l’image.
Il est nécessaire pour réaliser des animations flash d’acheter le logiciel
(des versions de démonstration limitées dans le temps sont trouvables
dans des magazines). Il est aussi nécessaire pour pouvoir lire les animations dans un navigateur, de télé-charger l’extension flash sur le site de
Macromedia.A partir de Windows 98,
l’extension flash est livrée avec le
système d’exploitation.
La technologie shockwave
Director est un programme (cher) de
la société Macromedia. Il permet de
produire des présentations multimédias sur CD ou pour le Web. Il associe la technologie flash avec les
autres éléments multimédias (images,
sons, vidéos). C’est cette technologie
qui est utilisée pour les conférences
multimédias de l’Acomen. Il est nécessaire de télécharger le plug-in
shockwave à partir du site de Macromedia pour pouvoir lire ces présen-
11
Une applet Java est une “petite application” Java, c’est à dire un programme écrit dans le langage Java et qui s’exécute à l’intérieur de votre navigateur.
L’intérêt de Java est de pouvoir s’exécuter sur n’importe quelle machine (PC, MAC, UNIX).
12
Un plug-in est un petit programme qui s’insère dans le navigateur en lui donnant de nouvelles fonctionnalités.
Revue de l’ACOMEN - 2000 - vol.6 - n°4
213
L’information circulant sur le World Wide Web
tations. A noter que l’extension
shockwave est livrée en standard à
partir de la version 98 de Windows.
Chargement du plug-in shockwave :
On trouve des explications sous la
rubrique information de la page d’accueil des conférences multimédia. Si
le plug-in shockwave n’est pas installé, lors de l’essai de lecture d’une
conférence, il doit apparaître une fenêtre demandant le téléchargement
de celui-ci. On peut aussi aller chercher directement ce plug-in sur le site
Macromedia (il n’est pas possible de
le distribuer d’une autre façon et c’est
ainsi la garantie d’avoir toujours la
dernière version). On le trouve à
l’adresse: http://www.macromedia.com/
fr/shockwave/download/?Lang=French. La
page suivante apparaît et en suivant
les indications, on peut charger cette
extension.
Figure 6. Page de téléchargement du plug-in shockwave sur le site Macromedia
Le son et la vidéo
ðOn doit disposer des programmes
et du matériel nécessaire (carte son
et haut-parleurs) pour pouvoir lire
des fichiers sons ou vidéo. Deux possibilités existent.
Téléchargement puis lecture
Le fichier est téléchargé sur le disque
dur et le fichier est ensuite exécuté
avec les programmes présents sur
l’ordinateur client.
13
Pour le son, il existe plusieurs formats de fichier. Le format midi
(".mid") est un fichier constitué des
notes de musique et pouvant être
joué grâce à la partie synthétiseur de
la carde son. La taille du fichier est
très réduite mais aussi les possibilités musicales. Le format wave (".wav")
est un fichier de sons échantillonnés.
La qualité dépend de la fréquence de
numérisation. En général la taille de
ce type de fichier est importante et
ne convient pas sur le Web pour des
sons de longue durée. Le format mp3
est un format de son fortement compressé et de très bonne qualité. Ce
format connaît une explosion actuelle
mais permet le piratage des CD audio.
Pour la vidéo, existent les formats .avi,
.mov et .mpg. En général ces fichiers
sont de grande taille et seulement de
courts extraits (quelques secondes)
peuvent être téléchargés.
Diffusion en flux continu ou
streaming1 3
Le streaming permet d’écouter ou de
regarder des fichiers audio ou vidéo
en même temps qu’ils sont chargés
à partir du Web. Il est ainsi possible
d’écouter en temps réel des émissions de radio ou de regarder des
Streaming vient de l’anglais "stream" signifiant flux de donnée
214
Revue de l’ACOMEN - 2000 - vol.6 - n°4
F. Dubois
émissions de télévision. Ceci n’est
possible que si le taux de compression est important. RealPlayer
(www.real.com) est sans conteste le
meilleur lecteur de ce type disponible actuellement. Une version gratuite
est téléchargeable.
Shockwave permet aussi la lecture en
flux continu. C’est ce principe qui est
utilisé dans les conférences multimédias de l’Acomen ou le son est
comprimé très fortement sans nette
altération. Un tampon de 5 secondes
permet de temporiser les fluctuations
de débit du Web. Néanmoins il faut
disposer d’une connection d’au
moins 2 Koctets/s, ce qui est possible avec les modems actuels.
DHTML et les langages de script
DHTML
Le DHTML ou dynamic HTML permet
de définir des pages dynamiques et
interactives. Ceci est possible depuis
la version 4.0 de HTML qui permet
de supporter les feuilles de style et
les langages de script.
Nous avons déjà vu précédemment
que les feuilles de style permettaient
de définir une apparence commune
à toutes les pages d’un site. Les feuilles
de style permettent également le positionnement précis au pixel près de
n’importe quel élément d’une page.
Par exemple on peut définir, pour le
titre d’une rubrique, la classe.rubrique1 qui est représentée dans le Tableau III
III.
Le DHTML utilise la notion de couche ou layer. Un layer est défini par
les balises <layer></layer> avec
Netscape et <div></div> avec Internet
Explorer. Un layer porte un nom (argument id) et un ensemble de propriétés qui peuvent être défini par
une classe.
<div id = "titre" class = "rubrique1">
Texte du titre de la rubrique</div>
Chacun de ces éléments peut être
modifié par un langage de script de
manière dynamique. Par exemple
l’emplacement à gauche peut être
modifié dynamiquement en javascript par l’instruction : document.
titre.left = 200 ; avec Netscape et
document.all.titre.style.top=200 ;
avec Internet Explorer. On peut faire
de même pour toutes les autres propriétés.
Ta b leau III. T itr
e d'une rrubr
ubr
ique
itre
ubrique
.rubrique1 {
font-family : Comic Sans MS ;
Font-size : 24 px ;
Color : #FF0000 ;
Position : absolute ;
Top : 10px ;
Left : 50 px ;
Visibility : visible ;
z-index : 0 ;
}
Nom de la classe
Fonte de caractère
Taille de la fonte 24 pixels
Couleur : Rouge
Le positionnement est absolu dans la page
A partir de pixels à partir du haut de page
et 50 pixels sur la gauche
L’élément est visible
Il est au niveau 0 de recouvrement. Les
éléments de z-index supérieur à 0 le recouvrent
le code HTML.Avec le javascript pour
modifier l’emplacement et la couleur
du titre de l’exemple précédent, on
insère à l’intérieur du code HTML la
séquence suivante (avec Internet Explorer) :
<script language="JavaScript"
type="text/javascript"><!—
document.all.titre.style.top=200;
document.all.titre.style.left=200;
document.all.titre.style.color="green";
//—>
</script>
Avec ces langages de script, on peut
gérer tous les événements souris ou
clavier, écrire des menus déroulants…
Les autres langages
Les applets Java
Java est un langage de programmation
à part entière qui est très proche du
C++ et qui a été développé par la société Sun. Un compilateur Java transforme le code du programme en un
code intermédiaire (appelé une
applet Java) qui est indépendant du
système sur lequel le programme va
être exécuté. L’appel à l’applet Java
est intégré dans le code HTML à l’intérieur des balises <applet code=
"nom_ applet_java.class"> </applet>.
En pratique, on peut obtenir de très
nombreux effets avec les applets Java
et on trouve sur le Web de nombreuses applets tout fait. Leur principal inconvénient est une certaine lenteur
du fait de l’interprétation sur la machine client du code intermédiaire.
Contrôles ActiveX
Les langages de script
Les langages de script s’exécutent
côté client et permettent d’animer
une page HTML. Il existe deux langages de script : le javascript et VBscript.
Le javascript a été développé par
Netscape et est disponible sur tous
les navigateurs. Il est proche du langage C++. VBscript est un dérivé de
14
Visual Basic de la société Microsoft
et n’est utilisable qu’avec Internet
Explorer. Les possibilités de ces deux
langages sont voisines, mais la limitation à Internet Explorer de VBscript
fait que javascript est de loin le langage de script le plus utilisé. Ces langages sont interprétés14. Ils peuvent
être considérés comme une extension de HTML et sont intégrés dans
ActiveX a été la réponse de la société
Microsoft à Java. ActiveX est un ensemble de techniques dérivées de
Windows. Seul Internet Explorer comprend par défaut les contrôles
ActiveX. Le principal défaut reproché
est le manque de sécurité car un contrôle ActiveX a en effet accès à tous
les éléments de la machine client.
Pour garantir l’innocuité d’un contrôle ActiveX, celui-ci peut compor-
Un langage interprété est décodé et exécuté au fur et à mesure des besoins.
Revue de l’ACOMEN - 2000 - vol.6 - n°4
215
L’information circulant sur le World Wide Web
ter un numéro d’enregistrement numérique.
VRML
Le VRML = Virtual Reality Modeling
Language permet de réaliser des effets tridimensionnels. Un environnement VRML est décrit à partir d’objets en 3 dimensions (sphères, cubes…). On peut se déplacer en 3D à
l’aide de la souris au milieu de ces
objets en se rapprochant ou s’éloignant, en tournant autour …
Le CGI
ðLe CGI = Commun Gateway Interface permet de transférer au serveur
une requête, par exemple à partir d’un
formulaire. Le serveur interprète la
requête en exécutant un programme
CGI et envoie la réponse au navigateur client.
Les formulaires
Les formulaires permettent d’envoyer
au serveur un ensemble d’informations. Un formulaire peut contenir des
zones de saisies à une ou plusieurs
lignes, des listes d’options, des cases
à cocher, des boutons.
Le fait d’appuyer sur le bouton "continuer" de l’exemple de la figure 7
provoque le déclenchement côté serveur d’un programme CGI avec interprétation des données du formulaire envoyées.
port Language a été créé en 1986 par
Larry Wall est un langage interprété
très orienté vers l’analyse de texte.
PERL existe sur la plupart des platesformes au-jourd’hui (Unix, VMS,
Windows, Mac), il est gratuit, très puissant et robuste et est de ce fait très
employé : analyse de fichiers log1 5,
programmes CGI.
PHP = Personal Home Page a été développé initialement par Rasmus
Lerdof pour un usage personnel. C’est
un langage gratuit qui s’intègre aux
pages HTML et qui s’exécute côté
serveur. Il permet une très facile
liaison avec les bases de données à
l’aide de requête SQL16 . L’ensemble
système d’exploitation LINUX + serveur APACHE + PHP + base de donnée MySQL est un ensemble gratuit
dont les codes sources sont en accès libres et constituent un ensemble de plus en plus utilisé même en
milieu professionnel.
ASP = Active Server Page est un langage développé par Microsoft. Il est
très proche de Visual Basic et est souvent associé avec les serveurs
Microsoft. Comme PHP le code ASP
s’insère dans le code HTML et s’exécute côté serveur en liaison avec les
bases de données.
Les cookies
Les cookies sont des petits fichiers
textes qui sont placés par le serveur
dans un répertoire de l’ordinateur
client. Ils permettent de mettre en
mémoire des éléments de navigation
comme les préférences de l’utilisateur. Le serveur peut lors d’une connexion interroger l’ordinateur client
pour vérifier la présence de cookies
et alors de personnaliser les pages
envoyées.
Figure 7. Formulaire d’inscription (www.amen.fr)
AVENIR DU WEB : LE XML
Les programmes CGI
Il n’y a pas de langage spécifique pour
écrire un programme CGI. Pratiquement tous les langages sont utilisables depuis les scripts shell, le langage C, C++ etc… Actuellement les
15
16
programmes CGI sont écrits essentiellement en PERL, PHP ou ASP.
PERL, PHP et ASP
PERL = Practical Extraction and Re-
ðLe langage HTML peut avoir vite de
nombreuses limites. Prenons par
exemple un site qui répertorie des
cas cliniques. Chaque cas clinique est
basé sur la même structure :
Un fichier log est un fichier qui enregistre les caractéristiques de chaque requête faite au serveur.
SQL = Structured Query Language est un langage très concis et très puissant d’interrogation de bases de données.
216
Revue de l’ACOMEN - 2000 - vol.6 - n°4
F. Dubois
-
Une histoire de la maladie
Les images
La description des images
L’interprétation finale
Chacune de ces rubriques peut être
présentée de manière différente
(taille, couleur des caractères, gras ou
italique, couleur de fond…). On peut
vouloir par ailleurs ne faire apparaître la description et l’interprétation
qu’à la demande du lecteur.
Gérer chacun de ces cas en HTML devient vite laborieux, car le langage
HTML mélange deux types d’information :
1. L’information utile de la page
(comme l’histoire de la maladie)
2. La présentation de cette information sous forme de tag (taille, couleur
des caractères…)
Le XML (eXtended Markup Language)
est un (méta)langage qui permet de
définir des types de document. Il est
dérivé d’un langage très général de
description de document le SGML
(Structured Generalized Markup
Language) mais en ayant abandonné
tout ce qui est secondaire ou trop
compliqué.
XML définit des balises sémantiques
qui précisent le type d’information
rencontré. La manière dont cette information doit être affichée est décrite
par ailleurs. Les règles en vigueur
pour les balises sémantiques sont
enregistrées dans un fichier de Définition de Type de Documents (DTD).
Dans notre exemple le fichier DTD
prend la forme :
<?xml version="1.0"?>
<!ELEMENT CAS_CLINIQUE (HISTOIRE,
IMAGE, DESCRIPTION, INTERPRETA-
TION)>
<!ELEMENT HISTOIRE (#PCDATA)>
<!ELEMENT IMAGE(#PCDATA)>
<!ELEMENT DESCRIPTION (#PCDATA)>
<!ELEMENT
INTERPRETATION
(#PCDATA)>
Le document xml décrivant le cas
clinique peut alors être structuré par
des balises du type <HISTOIRE> et </
HISTOIRE>, comme par exemple :
< ?xml version= "1.0"?>
< !DOCTYPE INFO SYSTEM
"fichier.dtd")
<CAS_CLINIQUE>
<HISTOIRE>
Il s’agit d’un patient de 48 ans ……
</HISTOIRE>
<IMAGE>
"fichierimage.jpg"
</IMAGE>
<DESCRIPTION>
Les images montrent la présence
de…
</DESCRIPTION>
<INTERPRETATION>
Devant cette histoire et le résultat de
l’examen d’imagerie, on peut évoquer
en premier lieu …
</INTERPRETATION>
</CAS_CLINIQUE>
Lorsque le fichier xml sera chargé,
l’interpréteur xml vérifiera la conformité entre l’information présente et
la structure donnée par la DTD.
La mise en forme est totalement indépendante et est faite une fois pour
toute pour tous les documents cas
cliniques. A terme ce sera des feuilles
de style appelées XSL (eXtensible
Style sheet Language). Aujourd’hui
seul Internet Explorer version 5 permet de lire des fichiers xml. La présentation est décrite à partir d’un pro-
gramme en Java Script qui indique les
emplacements et la manière dont l’information doit être présentée.
Comme on vient de le voir dans cet
exemple, xml apporte pour des sites
importants une structuration des documents qui permet une mise en
place rapide et unifiée. Xml permet
de dissocier totalement contenu et
présentation. Si on décide que toutes
les interprétations de tous les cas cliniques doivent être en italique, il suffit de modifier la présentation liée à
la balise <INTERPRETATION>. La modification sera immédiatement effective pour tous les cas cliniques du
site.
CONCLUSION
ðIl est certain qu’on est encore très
loin d’avoir découvert toutes les possibilités que peut offrir le Web. L’information disponible va devenir de
plus en plus exhaustive et les moteurs de recherche pour la retrouver
de plus en plus performants. Xml est
en passe de devenir un langage universel de présentation de documents.
La version 2000 de word l’utilise déjà.
Les liaisons à haut débit type ADSL
ou le câble vont permettre une généralisation du son et de la vidéo. Déjà
les radios du monde entier sont disponibles et bientôt la télévision le
sera. Il va devenir également possible de choisir à la carte un film vidéo
(par exemple dans le cadre de la formation médicale continue) et de le
regarder en temps réel sur son ordinateur (ou sa télé) à partir d’un site
Web.
Summary
The World Wide Web has allowed such a spectacular development of Internet that both
terms are often confused. The Web is based on hypertext pages written in HTML language. The
basis of that language will be presented as well as several capabilities allowing to understand was
happens when "surfing" on the Web.
Web / World Wide Web / HTML
Revue de l’ACOMEN - 2000 - vol.6 - n°4
217