2.1 - Le HTML, un langage simple
• 2.1.1 - Du côté de chez le client
• 2.1.2 - Du côté de chez le serveur
• 2.1.3 - Du côté de chez l'auteur
• 2.1.4 - Les enjeux de la technique
[ Cette section 2.1 est divisée en deux fichiers : lisez donc aussi son introduction dans la première partie ]
2.1.1 - Du côté de chez le client
Le développement des capacités des navigateurs, côté client donc, a été dans le sens de l'explosion du multimédia sur le web, ces deux dernières années. Citons les Javascripts (introduits par Netscape dans sa version 2 et interprétés par Internet Explorer à partir de sa version 3), Java (rien à voir avec Javascript) et son pendant ActiveX (réalisé par Microsoft) qui vous permettent, par exemple, de faire apparaître du texte ou un menu en glissant le curseur sur un élément donné (comme les effets des CD-rom). La dernière version du HTML (HTML 4) inclut certaines de ces fonctionnalités : il n'empêche que ces langages (particulièrement ActiveX) posent des problèmes de sécurité (9), qu'ils leur arrivent de faire planter les machines et que les navigateurs proposent une option permettant de les désactiver, ce que font bon nombre d'internautes avertis.
Les plug-ins, eux, sont de petits programmes externes, qui se lancent automatiquement lorsque le navigateur rencontre la balise appropriée, dans le code HTML. Citons, au hasard, parmi les plus connus, Acrobat Reader qui permet de visualiser une page enregistrée au format PDF (10), RealAudio et Real Video qui permettent, respectivement, d'écouter des sons ou de regarder de la "video" (?) en streaming (11), ou encore Shockwave/Flash, qui permet de visualiser des animations (plein de petites images qui bougent et sur lesquelles on peut cliquer) réalisées par les logiciels Flash ou Director (12). Les plug-ins sont de petits logiciels qui ajoutent des fonctionnalités à votre navigateur. Ils sont la plupart du temps gratuits, mais le lecteur doit avoir des navigateurs capables de les lire (13), il doit télécharger (14) les plug-ins (ça prend du temps et des sous en communication) puis les installer (ça prend du temps et des soucis, et ça peut désorganiser les machines les mieux rangées, en occasionnant des incompatibilités), puis les paramétrer pour qu'ils fonctionnent avec son navigateur. Ils sont gratuits, certes, et la prochaine version elle aussi est gratuite, mais là, il vous faudra changer d'ordinateur parce qu'elle ne marchera que sur le prochain microprocesseur, ou avec la prochaine mise à jour du système. Bien des gens renâclent à devoir en passer par là pour lire un site web. Moi aussi. Sachez enfin que si les plug-ins sont gratuits, les logiciels qui permettent de créer ces effets, si vous tenez à en orner votre site, sont payants, et assez chers (15).
Enfin, certains effets sont liés à des balises comprises uniquement par un navigateur : le texte qui défile en haut ou en bas de l'écran (c'est horripilant, au bout de 3 secondes) n'est rendu que par Internet Explorer, l'affichage ultra-rapide d'une version très légère de l'image (en attendant que l'image définitive soit chargée) dépend d'une balise comprise uniquement par Nestcape Navigator, etc.
Les "frames" sont un excellent exemple de ces technologies qui suscitent un engouement aussi puissant qu'éphémère. La possibilité de diviser la fenêtre du navigateur (d'où la traduction "multifenêtrage" en français, qui n'a jamais vraiment été utilisée) en plusieurs portions aux comportements indépendants est apparu dans Netscape Navigator 2. A l'époque, les discussions pro- ou anti-frames ont été passionnées. Avec comme résultat que vous étiez un vieux dinosaure réactionnaire et anti-progrès, si vous décidiez, comme moi, de vous en passer sur votre site. Allez donc faire un tour chez www.netscape.com : même eux ne les utilisent plus...
Les feuilles de style (ou CSS, cascading style sheets) permettent d'enrichir le texte à l'instar d'un logiciel de mise en page type XPress (positionnement exact des éléments sur l'écran, variations des polices de caractère, etc.). Elles sont dorénavant intégrées au HTML 4 et comprises par les navigateurs à partir des versions 4 de chacun. L'idée vaut qu'on s'y arrête, car elle permet de dissocier l'apparence, de la structure du texte, un peu comme les niveaux de titre que vous attribuez dans un document texte : un "Titre 1" reste un "Titre 1", qu'il soit en corps 18, gras, bleu, ou en corps 14, italique, vert, et vous n'avez, pour changer la présentation, qu'à modifier les attributs du style "Titre 1". De même, dans les CSS, un autre avantage consiste en pouvoir modifier toutes les apparences d'un niveau de titre donné, en ne modifiant qu'un petit fichier qui s'applique à toutes vos pages. Enfin, vous unifiez la présentation sans douleur... Bien sûr, pour un accès universel, vous aurez soin de souligner la hiérarchie de votre texte de balises HTML simples, pour les navigateurs ne supportant pas les CSS, afin qu'un niveau d'information aussi important que la structure de votre texte ne soit pas lié à une technique parfois non interprétée par les navigateurs.
Voilà une liste très brève des différentes techniques mises en place côté client (vous en trouverez d'autres dans votre manuel de HTML). J'imagine que vous en aurez compris, lors de l'énumération, les désavantages : elles présupposent une configuration assez sophistiquée de la part du lecteur, que ce soit la dernière version du navigateur X, ou l'ajout de logiciels plug-ins non standards. Nous voilà bien loin des prétentions universels du web, et pour un résultat somme toute assez superficiel. Que se passe-t-il si le lecteur ne peut profiter de ces techniques (s'il possède une version antérieure du navigateur, ou le mauvais navigateur, ou le mauvais système d'exploitation, ou s'il n'a pas le plug-in...) ? Et bien les balises sont tout simplement ignorées : au mieux, rien ne se passe, l'information n'est pas délivrée, au pire, un bout de code HTML incompréhensible s'affiche sur l'écran du pauvre lecteur, ou pire encore, c'est le plantage, la rupture de la communication avec le réseau et l'ordinateur qui se bloque. Si vous décidez que ces fonctionnalités vous sont absolument nécessaires, nous verrons ensemble comment faire au mieux, dans le chapitre suivant : 2.2 - Accès universel.
2.1.2 - Du côté de chez le serveur
Certaines techniques nouvelles se basent sur une série d'opérations effectuées par la machine serveur et sont donc indépendantes de votre lecteur, de sa machine, de ses logiciels. Elles participent ainsi tout à fait de la logique d'interopérabilité du web. Vous devez par contre, si vous voulez les utiliser, vous assurer auprès de votre fournisseur d'accès que ses machines supportent ces techniques (et vérifiez qu'il ne vous fait pas payer beaucoup plus cher pour cela, par la même occasion).
Les scripts CGI (Computer Gateway Interface) sont des programmes exécutés par le serveur en réponse à une demande d'un client, par exemple suite au remplissage d'un formulaire. C'est typiquement ce qu'utilise un moteur de recherche comme AltaVista pour fabriquer la page web de réponses à votre question. Comme ces scripts tournent sur le serveur, le navigateur du lecteur n'a rien de particulier à faire : il reçoit une page web normale. Le fait de s'exécuter sur le serveur permet à ces programmes, par exemple, d'accéder facilement aux bases de données présentes sur ce serveur. Pour l'auteur, il s'agit de programmes à part entière, et leur réalisation demande donc des compétences solides en informatique.
Le SHTML (Server HTML, également appelé SSI, Server-Side Include), plus simple à maîtriser que les CGI pour l'auteur, est un langage HTML enrichi de directives permettant par exemple d'inclure un fichier. C'est une solution très pratique pour avoir, par exemple, une barre de navigation identique sur toutes les pages : en effet, celle-ci existe sous la forme d'un petit fichier indépendant, que vous pouvez modifier à volonté, et dont la nouvelle version apparaîtra automatiquement sur toutes les pages faisant appel à lui.
2.1.3 - Du côté de chez l'auteur
Le WML (Web Meta Language) est un des nombreux pré-processeurs HTML. Cela veut dire que l'auteur rédige des pages web en HTML, mais qu'il peut inclure dans ce HTML de nombreuses balises supplémentaires qui vont être traduites en HTML normal. Comme pour les techniques côté serveur, le navigateur ne verra que du HTML habituel. Mais contrairement à elles, vous n'avez pas besoin de l'accord du serveur : tout se fera sur votre machine d'auteur. WML permet de définir ses propres balises, d'inclure des fichiers dans vos pages, de définir des gabarits auxquels vont se conformer les pages et même, si vous êtes programmeur, d'inclure des bouts de programmes dans vos pages. Il est important de comprendre que, contrairement à la technique du SHTML, la traduction en HTML standard se fera hors ligne, sur votre machine d'auteur, une fois pour toutes, sans ralentir le serveur.
Quelques exemples d'utilisation. Problème n° 1 : vous voulez rajouter une rubrique à la navigation de votre site. S'il contient déjà 200 pages, avec la navigation sur chaque page, vous devrez modifier les 200 pages. Avec WML, vous avez la possibilité de séparer la navigation en la plaçant sur un fichier à part : c'est WML qui reconstitue la page entière (navigation + texte). Ainsi, pour ajouter une rubrique à la navigation, vous n'aurez qu'un seul fichier à modifier pour que vos 200 pages incluent la nouvelle rubrique à leur navigation.
Problème n° 2 : vous voulez indiquer automatiquement, en bas de chaque page, sa date de mise à jour (une des plaies du web est la persistance de pages vieillies, que rien ne signale comme telles). Avec WML, vous pouvez créer une balise "date", qui sera automatiquement remplacée par la date de dernière modification sur la page (16).
2.1.4 - Les enjeux de la technique
Dans le monde de l'informatique, nous avons été habitués à renouveler sans cesse notre parc afin de posséder la machine la plus récente, parce que les logiciels évoluent constamment et ne tournent plus sur les anciennes, parce que les protocoles de communication changent et que les nouvelles machines ne peuvent plus fonctionner en réseau, parce que les versions récentes des logiciels exigent les versions récentes des systèmes d'exploitation... Tout utilisateur un peu habitué de l'informatique se sera rendu compte, déjà, que les quelques nouveautés qu'on lui propose n'ont pas de commune mesure avec l'énorme et coûteux battage publicitaire qu'occasionne la sortie de la dernière version d'un système d'exploitation (que ce soit Mac OS ou Windows). Quant à l'évolution des logiciels, comme par exemple les traitements de texte, tout pratiquant de la bureautique sait qu'il n'utilise pas 20 % de ses fonctions, mais que par contre le logiciel est de plus en plus obèse dans son espace disque, et gourmand en mémoire. Fabricants de logiciels et fabricants de machines fonctionnent main dans la main pour créer le besoin et vendre leurs nouveaux produits : que ce soit le père de famille, le patron de PME ou le grand décideur, on assiste au même souci de posséder le dernier type d'ordinateur qui les poussait, il y a encore dix ans, à changer de voiture tous les deux ans, pour acquérir le dernier modèle du Salon de l'auto. Les mécanismes psychologiques utilisés par les promoteurs sont sensiblement les mêmes (le besoin de paraître personnifié - si j'ose dire - par la machine, la peur d'être dépassé, de ne pas être à la hauteur, toutes cordes dont on joue particulièrement facilement chez les hommes, grands prescripteurs en matière d'informatique).
Le même processus atteint les navigateurs. Bien sûr ils sont gratuits, me dit-on, on peut donc sans débourser les télécharger sur son ordinateur. Mais voyez leur complexité accrue : il m'a fallu l'aide d'un ami informaticien pour modifier les paramètres de la version 4 de Netscape, que j'utilise, ceci afin qu'elle puisse fonctionner avec le plug-in Acrobat Reader. Remarquez, ça fait marcher la presse informatique et ses dossiers spéciaux ("Les plug-ins pour les abrutis"), mais on est loin de l'ère "zéro papier" promise par l'informatique... Un dernier exemple : je consulte actuellement le web et met à jour mon site sur un Mac 68040, bien gonflé en mémoire, qui me convient tout à fait question configuration et capacités. Mais pour visiter le site musical conseillé par un ami, il me fallait le plug-in RealAudio (c'est gratuit). Une visite un peu longue sur le site de ce dernier (il est assez confus) m'a laissée désolée : le constructeur ne proposait que la dernière version, qui ne tourne que sur la nouvelle génération des PowerMac. Qu'est-ce que ça lui coûtait de proposer également, dans un sous-menu loin de la page d'accueil et de ses annonceurs, la version antérieure, compatible avec les 68000 ?
Et voyez l'évolution de la taille des navigateurs : j'ai sur mon ordinateur plusieurs versions de Netscape et d'Internet Explorer, pour tester mes sites. En voici les poids et les exigences en mémoire comparés, pour le logiciel de consultation seul :
- Netscape 1.1 : taille : 1,3 Mo ; mémoire conseillée : 3 072 ko
- Netscape 2.0 : taille : 2 Mo ; mémoire conseillée : 4 296 ko
- Netscape 4.05 : taille : 4,2 Mo ; mémoire conseillée : 8 000 ko
- Internet Explorer 3.0 : taille : 1,5 Mo ; mémoire conseillée : 4 096 ko
- Internet Explorer 4.0 : taille : 2,4 Mo ; mémoire conseillée : 4 096 ko
- Internet Explorer 5.0 : taille 17 Mo (pour une installation standard : si vous ne me croyez pas, allez donc voir sur le site de Microsoft...) ; mémoire conseillée, pour Windows cette fois: 16 Mo avec Windows 95 ou 98 ; 32 Mo avec NT et 64 Mo avec Windows 2000...
Si je vous affirme qu'un humble PC 386, ou qu'un Mac 68030 vous suffit pour consulter le web, je suis consciente qu'il vous faudra gérer avec soin espace disque et mémoire, et ne pas vous encombrer des dernières versions des navigateurs ou de multiples plug-ins. Or, il existe bon nombre de pays, au Sud, où les universités ne possèdent pas autre chose qu'un (seul) PC 386 pour se connecter au web, où les connexions téléphoniques sont de mauvaise qualité et très coûteuses, pour un salaire moyen. Et où les particuliers possesseurs de telles machines ne se comptent qu'en centaines ou en milliers, au lieu des millions comptabilisés par les pays du Nord.
En guise de conclusion, je dirais que les techniques utilisées ne seront pas les mêmes pour un site commercial, visant à séduire et à attirer le lecteur, que pour un site associatif. A priori, il ne s'agit pas pour vous de réaliser une jolie plaquette publicitaire (site de communication), mais de faire connaître votre action (site d'information) : j'insiste sur cette distinction et y reviendrai plus tard. Je me souviens encore de la réaction d'un lecteur, juste après le lancement de notre site web. Il se présentait comme un expert en HTML, et m'assurait que mon site était intéressant, mais pas très moderne, surtout par rapport à celui réalisé par le parti d'extrême-droite français, qui offrait, chose rare à l'époque, des extraits de discours du dirigeant suprême. Bien que ne faisant pas de politique, il s'offrait à m'aider à ce que mon site soit aussi bien que le leur. Je ne pense pas avoir pris la peine de lui répondre (d'autant que j'aurais été bien en peine de trouver un enregistrement de discours, vu que nous manquons de dirigeant suprême...).
De plus, gardez en tête que les machines "obsolètes", avec des versions anciennes des navigateurs, ne finissent pas toutes à la casse : beaucoup sont données à des personnes qui sinon ne pourraient pas s'équiper (petite association ou étudiant peu argentés, pour une utilisation simple, type traitement de texte, avec possibilité de connexion à l'Internet). On peut donc imaginer un parc informatique plus conséquent et plus vieux que ce qu'annoncent les constructeurs.
On note également que les récents utilisateurs, plus "grand public" que les "pionniers" d'il y a quelques années, sont moins anxieux de télécharger les dernières versions des navigateurs, tout simplement parce qu'il sont satisfaits du leur.
Bref, si vous êtes soucieux, avec votre site web, d'atteindre le plus grand nombre de gens sur notre planète ; si vous privilégiez le fond et non la forme ; si vous pensez que vos idées se valent pour elles-mêmes et non pour la manière dont vous les mettez en scène : faites du HTML, et faites-le simplement (17).
Complétez cette section :
- pour en savoir plus sur les "frames", cf. par 3.3.8 - Les "frames"
- Voyez, dans la section "Technique" de la bibliographie, le paragraphe "Le HTML > Sur le web".
- A propos des nouvelles versions de navigateurs, voyez l'article de Jakob Nielsen : "Stuck with old browsers until 2003" (en anglais) :
http://www.useit.com/alertbox/990418.html
Notes
(9) En effet, ces langages permettent d'écrire des programmes qui vont être exécutés sur l'ordinateur du lecteur, avec les droits et les privilèges de ce dernier. Bien sûr, des précautions sont prises pour empêcher ces programmes de faire n'importe quoi, par exemple d'effacer un fichier ! Mais ces précautions ne sont pas toujours suffisantes (surtout pour ActiveX) et elles ne sont jamais parfaites : plusieurs alertes de sécurité ont déjà eu lieu.
(10) Une page de texte enregistrée au format PDF conserve intégralement tous les effets de mise en page, et s'affiche, à n'importe quelle taille, avec les polices de caractère originelles, même si l'ordinateur du lecteur ne les possède pas. On peut également en sélectionner le texte pour le copier/coller dans un éditeur de texte. Les fichiers, s'ils sont bien travaillés, ne sont pas très lourds (pensez à les "optimiser" : voir la doc. d'Acrobat).
(11) Le "streaming" est un procédé qui permet de commencer à écouter la musique ou à regarder les images avant que le fichier (en général assez volumineux) soit arrivé entièrement sur la machine client, ce qui écourte l'attente du lecteur (de l'auditeur, en l'occurrence). Pour la vidéo, on peut par exemple, sur les sites du Sénat ou de l'Assemblée nationale, assister à la séance parlementaire en direct, mais la qualité est encore très médiocre, la numérisation nécessite un appareillage professionnel et coûteux, et l'hébergement spécialisé.
(12) L'extension Shockwave/Flash fait désormais partie, en standard, des dernières versions des navigateurs. Un bon point à son actif : Flash réalise ses animations à partir d'images vectoriels, dont le poids est donc tout à fait raisonnable...
(13) Versions à partir de Navigator 2.0 ou Internet Explorer 3.0.
(14) Certains sont compris dans la version complète (et éléphantesque) des derniers navigateurs, Netscape ou Internet Explorer.
(15) Quelques idées de prix TTC : Acrobat, d'Adobe, qui génère les fichiers PDF : 2 500 FF ; Flash, de Macromedia, pour les animations : 2 800 FF ; Director : 10 000 FF. Si certaines fonctions vous semblent réellement apporter un "plus" à votre site, vous pouvez envisager de faire réaliser celui-ci par un prestataire extérieur, qui possède ces logiciels. Mais vous ne pourrez alors plus modifier ces pages en interne... Et adieu la mise à jour décentralisée : seul un pro (cher payé ou surbooké) pourra rajouter une virgule à votre texte. Pensez de toutes façons, si vous proposez des effets accessibles uniquement par plug-in, à donner en lien la page où l'on peut le télécharger (et pas seulement le site du fabricant...). Si besoin, mettez en garde contre les versions payantes, inutiles (ça existe).
(16) Notez que WML ne tourne que sur les machines dotées d'un système d'exploitation Unix : il est par contre relativement simple d'emploi, car très progressif. Le site de référence en est :
http://thewml.org/
Il existe d'autres pré-processeurs tournant sur plate-forme MS-Windows ou MacOS, par exemple (merci à Alexandre, du GISTI, pour sa recherche) :
GTML : http://www.lifl.fr/~beaufils/gtml/,
HTMLpp : http://www.imatix.com/html/htmlpp/index.htm...
Aucun n'est d'un abord immédiat. Leur intérêt n'est visible que si vous réalisez des sites web, pas juste quelques pages isolées.
(17) Allez, une petite dernière pour vous faire rire. Voici les deux premiers écrans, lorsque vous consultiez [en 1999, mais ça n'a guère changé] le site d'une mutuelle d'assurance que je ne citerai pas, avec Netscape 4, sans le plug-in Flash ni Java :
[Premier écran]
"Chargement en cours...
Si après quelques instants vous ne voyez pas le site
XXX cliquez ici"
[Je clique, apparaît un deuxième écran, dénommé "Aide" (?...)]
"Avertissement :
Si vous possédez Internet Explorer 3, ou un
navigateur inférieur à une version 3, ou une
plate-forme telle que Unix ou Sun
Nous ne pouvons détecter le plug-in Flash 3 qui
permet l'affichage de pages animées.
Pour profiter pleinement du site, vous devez disposer d'un
navigateur, Netscape ou Microsoft Internet Explorer,
intégrant le plug-in Flash 3 de Macromedia,
téléchargeable gratuitement en vous rendant
sur le site correspondant à votre navigateur
actuel.
Si vous ne souhaitez pas télécharger de
navigateur récent vous pouvez simplement
télécharger le plug-in Flash 3, qui fonctionne
sur des versions de navigateurs supérieures à
3 et donc sur Explorer 3. Suivez les aides fournies sur le
site de téléchargement pour installer le
plug-in.
Vous ne souhaitez pas opérer de
téléchargement, nous vous proposons un retour
au site XXX statique.
L'accès au site et certaines fonctionnalités
sont développés en Javascript. Ne
désactivez pas l'interprétation Javascript de
votre navigateur.
Si malgré tout, vous constatiez une
incompatibilité avec votre navigateur, nous vous
remercions de nous la signaler par e-mail."
C'est sûr, tout ce charabia incompréhensible pour l'internaute moyen donne envie d'écrire, et surtout de consulter le site...