Publication d'un site WWW

La publication d'un site WWW comprend trois étapes principales, toutes aussi importantes l'une que l'autre: il s'agit d'abord de réfléchir sur la structure et d'autres points importants du site, avant même de commencer à le construire concrètement. Vient ensuite la réalisation proprement dite du site, c'est-à-dire l'écriture des différents fichiers HTML (les pages WWW). La dernière étape est celle de l'entretien du site.

4.1. Planification et conception

La planification et la conception d'un site forment une étape essentielle (voir à ce sujet l'excellent site en allemand HTML-Dateien selbst erstellen, de Stefan Münz). Voici une liste non exhaustive des points les plus importants sur lesquels réfléchir. Selon la complexité et le degré de «professionnalisme» recherchés, il ne sera pas nécessaire de tenir compte de tous les points.

4.1.1. But de la publication du site

Avant de publier quoi que ce soit, il faut déterminer le but de cette publication: présenter une école, offrir des distractions, exposer une idée, diffuser des informations, etc. Voici quelques exemples de buts possibles:

en tant qu'école, nous voulons présenter nos activités et nos buts;
en tant qu'école, nous voulons permettre aux élèves et aux enseignants d'obtenir des informations sur notre établissement et son fonctionnement;
en tant qu'école, nous voulons permettre aux élèves de s'inscrire, de faire des demandes de congé, etc. depuis le WWW;
en tant que personne, je veux présenter mes hobbies;
en tant que membre d'une société, je veux présenter les activités de mon association, mon club, etc.;
en tant qu'entreprise, nous voulons offrir un magasin en ligne pour nos clients;
je veux mettre à disposition dans un site WWW une base de données spécifique;
je veux rassembler dans un site WWW tout ce qui concerne un domaine spécifique;
etc.

Cette liste montre qu'une même organisation peut créer des sites poursuivant des buts fondamentalement différents.

L'important est de clarifier le but du site aux yeux des internautes dès le premier contact, c'est-à-dire sur la page d'accueil. Ceci peut être réalisé de façon explicite: «Le Collège XY vous présente ses buts et ses activités». Cela peut aussi être fait en choisissant une ligne plus ou moins traditionnelle pour la page d'accueil, voire pour tout le site. Il est ainsi possible de suggérer qui l'on est et ce que l'on présente, ainsi que le sérieux d'un établissement ou d'une entreprise. On ne prend guère au sérieux un site où tout clignote en couleur avec des animations!

4.1.2. Identification du groupe cible du site

Il est aussi important d'identifier le ou les groupes cibles du site. Pour une école: élèves, professeurs, parents, autorités politiques, tout le monde? Pour une entreprise: clients potentiels, concurrence?

Il est difficile de contenter tout le monde à la fois, d'où l'importance de cette identification. Il est ainsi possible de réaliser un site correspondant aux attentes du(des) groupe(s) cible(s).

On n'oubliera pas de mentionner clairement à qui s'adresse le site, afin d'éviter aux internautes de se fourvoyer sur des pages qui ne les intéressent pas.

4.1.3. Ressources disponibles

Il faut ensuite faire un inventaire des ressources à disposition pour la réalisation du site. Par ressources, il faut comprendre n'importe quelles données que l'on veut publier sur le Net.

Existe-t-il des données déjà publiées sous une autre forme (prospectus, plaquettes, brochures, etc.)? Si non, où se procurer les informations nécessaires?
Y a-t-il à disposition des données sous forme électronique? Si oui, il faut trouver la meilleure façon de les convertir dans la forme adéquate. Si non, est-il sensé de scanner les documents et de les faire traiter par un logiciel de reconnaissance optique de caractères (OCR)?
Doit-on publier des informations qui changent souvent? Dans un tel cas, il faut se demander s'il est plus judicieux d'utiliser un programme qui générerait les pages automatiquement, par exemple à partir d'une base de données.

4.1.4. Logistique

Une réflexion concernant l'aspect logistique s'impose également. D'abord, il faut fixer le délai dans lequel le site doit être terminé. Sans délai réaliste fixé, aucun travail n'est jamais terminé. L'expérience montre que le temps de développement d'un site est souvent sous-estimé.

Il faut aussi se demander quel est la grandeur de l'espace-disque à disposition, en particulier si le site sera hébergé sur le serveur d'une autre personne ou entreprise, par exemple chez un fournisseur d'accès. Dans ce dernier cas, le prix de l'hébergement du site est à prendre en compte. Une liste de tels serveurs est disponible chez Yah oo. Il est à noter qu'il existe des sites qui hébergent gratuitement les pages de quiconque le désire, en mettant à disposition un espace disque suffisant, pouvant être même illimité. On ira voir par exemple Multimania ou Chez (il en existe beaucoup d'autres; voir à ce sujet le catalogue Y a hoo).

Si l'on désire avoir un site avec une identité propre, c'est-à-dire un nom de domaine, il est nécessaire d'ajouter les coûts d'enregistrement d'un tel nom, ainsi que l'abonnement annuel pour le conserver. En Suisse, cela coûte CHF 80.- la première année, puis CHF 48.- chaque année suivante. Pour de plus amples informations, voir le site d'enregistrement des noms de domaines en Suisse. On peut passer par un provider pour faire ces démarches, mais le coût en sera bien sûr augmenté.

Il est important enfin de penser au prix (en temps et en argent) de l'entretien du site. Nous verrons plus bas l'importance de ce point.

4.1.5. Structure du site

Un site WWW comprend au début de sa réalisation quelques fichiers HTML. Petit à petit, à mesure de son développement et de son entretien, le nombre de ces fichiers augmente considérablement. Plus leur nombre est grand, et plus la nécessité d'une structure déterminée des fichiers et des liens se fait ressentir.

En prévoyant une structure claire dès le début de la vie d'un site, le webmaster s'évitera des pertes de temps ultérieures. De toute manière, il devra se demander ce qui appartient à tel ou tel fichier, dans tel ou tel dossier, et comment les différentes pages doivent être liées entre elles.

L'hypertexte n'impose aucune structure en particulier, puisqu'il n'est pas linéaire. La liberté qu'il donne à l'utilisateur peut cependant engendrer le sentiment d'être «perdu dans l'hyperespace». Il faut donc donner une structure au site. Pour faciliter la navigation aux non-spécialistes du Web, on peut proposer avec cette structure une métaphore à laquelle les internautes peuvent se raccrocher. Voici des exemples de structures possibles.

Structure linéaire: les pages sont liées entre elles et se consultent dans un sens unique. Cette structure est très peu utilisée, puisqu'elle ne profite pas des avantages de l'hypertexte. Ce type de structure peut être utilisé pour illustrer une marche à suivre, par exemple un mode d'emploi ou une recette de cuisine.
Structure linéaire bidirectionnelle: identique à la précédente, sauf que l'on peut revenir à une étape antérieure à l'aide de liens.
Structure rayonnante: toutes les pages sont accessibles depuis une page initiale. En outre, les différentes pages sont liées entre elles. Cette structure peut servir de support à la métaphore du livre: la page initiale est une table des matières, les différents fichiers constituent des chapitres, etc. Elle est bien adaptée aux sites contenant des informations sur un thème bien délimité, où les fichiers ne doivent être mis à jour que rarement. La métaphore de l'index est aussi possible pour cette structure: dans un tel site, on accède à l'information par l'intermédiaire d'un index alphabétique, géographique, temporel ou autre. Cette métaphore est idéale pour les catalogues ou les bases de données.
Structure en arbre: le site est présenté comme une liste de thèmes, eux-mêmes liés à des sous-thèmes, etc. On navigue dans un tel site comme sur le disque dur d'un ordinateur (dossiers, sous-dossiers, etc.).

Dès que l'utilisateur aura reconnu une structure, il pourra se faire une représentation de votre site. C'est donc l'aider que de lui en proposer une.

Il est essentiel que l'organisation de votre site soit déjà correcte sur l'ordinateur avec lequel vous réalisez le site. On commencera par un dossier dont le nom sur votre ordinateur sera le même que le futur répertoire sur le serveur WWW et qui contiendra votre page d'accueil. Certains logiciels serveurs ont besoin que le fichier contenant votre page d'accueil s'appelle «index.html», «index.htm», «default.html» ou «default.htm».

C'est une bonne idée, et même une nécessité pour les sites comprenant plus d'une dizaines de pages, de structurer les fichiers de votre site en dossiers et sous-dossiers, de façon à imiter la structure du site elle-même. Il n'est en effet jamais bon d'avoir un dossier (répertoire) qui contient des dizaines ou même des centaines de documents.

Dans tous les cas, il est indispensable de rassembler les fichiers contenant les images, les animations, les sons et autres données multimédia dans un dossier nommé «images», situé dans le même dossier que le fichier de votre page d'accueil.

4.1.6. Identité du site

Afin que le visiteur se rende bien compte qu'il reste sur le même site WWW, il est important de définir une identité ou une «personnalité» à votre site (Corporate Identity). Cela veut dire que chaque page doit contenir des éléments graphiques et/ou typographiques lui signalant l'appartenance de la page à votre site. Ces différents éléments peuvent être composés une fois pour toutes et réutilisés dans chaque fichier HTML. Ce sont notamment:

un logo qui apparaît dans chaque page, de préférence au même endroit;
un fond particulier, éventuellement adapté du logo;
des symboles graphiques ayant la même signification dans tout le site;
une couleur dominante;
une mise en page personnalisée (pied de page, haut de page, etc.).

L'identité du site suggère à l'utilisateur que l'entreprise ou l'organisation qui se présente est composée de professionnels expérimentés.

4.1.7. Enregistrement d'un nom de domaine

Domaines .ch

Voici comment enregistrer un nom de domaine finissant par «.ch». L'organisme qui s'occupe de ces enregistrements en Suisse peut se contacter à l'URL <http://www.nic.ch/>. Marche à suivre:

se connecter au site <http://www.nic.ch/>;
vérifier si le nom que l'on désire existe déjà: « Secure your identity on the Internet with your domain name »;
continuer la procédure en réservant le nom de domaine (option «Confirm your intention to register xxxxx.ch as inactive»). Vous ne pouvez activer votre nom de domaine que si votre hébergeur a déjà configuré de manière adéquate ses deux serveurs de noms de domaine (DNS). Dans ce cas seulement, vous pouvez activer directement votre nouveau nom de domaine (option «Confirm your intention to register xxxxx.ch as active»);
payer CHF 75.– pour la première année et CHF 35.– pour chacune des années suivantes;
chercher un hébergeur pour le site, l'informer de votre nom de domaine et lui demander de configurer ses deux DNS. Il faut également connaître les numéros IP de ces deux DNS;
activer le nom de domaine enregistré ci-dessus à l'adresse <http://www.nic.ch/>. C'est fini.

On trouvera des informations exhaustives en français sur le processus d'enregistrement à l'URL suivant: <http://www.nic.ch/fr/faq/newreg-fr.html>. Les conditions juridiques de l'utilisation et du délivrement des noms de domaines se trouvent à l'URL <http://www.nic.ch/fr/terms/policy-fr.html> également en français. De plus amples renseignements sur les tarifs sont accessibles (en anglais) à l'URL <http://www.nic.ch/terms/fees.html>.

Domaines .com, .net ou .org

Si vous voulez un nom de domaine générique (non géographique), vous trouverez chez l'IANA (Internet Assigned Numbers Authority) <http://www.iana.org> la liste des entreprises qui s'occupent de l'enregistrement. Le processus se déroule de manière analogue, mais tout est en anglais. L'une des entreprises les moins chères est <http://www.godaddy.com>.

4.1.8. Recherche d'un hébergement

À l'étranger

Il y a près de 257 hébergeurs répertoriés en juin 2004 dans le catalogue Yahoo France, et 2979 sur Yahoo.com. C'est dire le choix à votre disposition. Le tout est de trouver un hébergeur fiable et le meilleur marché possible. Voici quelques exemples pris au hasard:

Hosting 2000 <http://www.hosting2000.com/> $12.–/mois + frais de mise en place $29.–

En Suisse

On trouve un bon nombre d'hébergeurs en Suisse à l'aide par exemple du moteur de recherche <http://www.google.ch/>. Faites une recherche sur les termes «hebergement» et «www» ou bien sur «hosting ». La plupart des tarifs sont véritablement prohibitifs. on trouve cependant quelques hébergeurs raisonnables comme par exemple

Aladin <http://www.aladin.net/> CHF 5.–/mois !

Pour les enseignants fribourgeois, la solution idéale (et gratuite !) est de confier l'hébergement de ses pages à FriTic, qui peut également héberger votre nom de domaine.

Conseil

Si vous avez le choix, prenez un hébergeur le meilleur marché possible. N'ayez pas peur d'héberger votre site à l'étranger, car votre travail de mise à jour et d'entretien de site n'en sera aucunement entravé. N'oubliez pas que l'Internet abolit les distances.

4.2. Réalisation

4.2.1. Langage HTML et logiciels de création de pages

Les pages WWW sont écrites dans un langage spécial appelé HTML, ce qui signifie «HyperText Markup Language» (langage hypertexte à balises). Ce langage particulier permet de spécifier à l'aide de mots clefs appelés balises (en anglais tags), où et comment doivent apparaître les différents éléments d'un fichier (graphiques ou textes).

La figure suivante montre un fichier HTML et son apparence dans le navigateur.

Exemple de code HTML

Il saute immédiatement aux yeux que la complexité de ce langage n'est pas à la portée du premier venu. On pourra alors se poser la question: pourquoi l'utilise-t-on? La réponse tient en un seul mot: portabilité.

L'énorme avantage de ce langage est de pouvoir être interprété dans tous les navigateurs, sur n'importe quelle plateforme. Heureusement pour nous, il existe des programmes qui nous permettent de composer des pages WWW sans trop se préoccuper du code HTML qui se cache sous les apparences. Ce sont les logiciels de création de pages.

Grâce à de tels programmes, il est relativement aisé de créer des pages WWW. En effet tout se passe ici comme si l'on travaillait dans un traitement de texte relativement rudimentaire. Le webmaster peut ainsi bénéficier partiellement de l'expérience qu'il a déjà acquise dans ce domaine.

Nous voyons ci-dessous la fenêtre et la barre d'outils de Adobe Golive, un de ces logiciels. On remarque qu'elle ressemble vraiment beaucoup à celle d'un traitement de texte (barre de boutons, outils de justification, etc.).

Fenetre de Claris HomePage

Il est cependant important de garder en tête que sous cette apparence de simplicité, le code HTML est bien présent. Cela entraîne notamment des restrictions quant aux possibilités de mise en page.

En effet, il est impossible (ou difficile à tout le moins) de positionner de façon exacte tel ou tel élément de la page, comme on peut le faire avec n'importe quel traitement de texte. De ce fait la mise en page des documents WWW doit rester relativement simple.

De plus, il n'y a que très peu de flexibilité dans le choix des polices de caractères. La page WWW ne s'affichera dans une police particulière que si celle-ci est installée sur l'ordinateur de l'internaute qui visite le site.

Les tabulations n'existent pas, ce qui limite singulièrement les possibilités d'alignement. On peut disposer en revanche de tables, pouvant se substituer aux tabulations.

Depuis peu, la norme HTML 4.0 propose un mécanisme pour définir des styles et les appliquer à un document ou à un ensemble de documents. Ce sont les feuilles de style en cascade (Cascading Style Sheets ou CSS). Pour mettre en oeuvre la cohérence dans un site, les CSS sont un outil de première importance qu'il faut maîtriser absolument. Les CSS permettent en outre de positionner de manière absolue des éléments, permettant ainsi de rapprocher l'édition sur le WWW à la publication de documents sur papier. Toutefois, les navigateurs n'interprètent pas complètement, ni correctement tout le langage des feuilles de style. Il faudra donc être prudent lors de leur utilisation.

4.2.2. Quelques règles générales de composition

Lors de la composition d'un document WWW, il faut prendre en compte certains aspects importants.

La première d'entre elles est l'accessibilité. Un site Web est destiné à être visité par le plus grand nombre possible d'internautes. Pour cette raison, il faut le rendre accessible au maximum de personnes. Dans le monde, seule une minorité a accès à des ordinateurs dernier cri, et encore moins à des navigateurs de la dernière génération (c'est-à-dire Communicator, Explorer dans une version ultérieure à 4.x ou Opera). Ceci implique que les derniers développements du langage HTML doivent être utilisés avec beaucoup de circonspection. On fera attention en particulier aux tableaux et aux cadres (frames). Une version d'un site pour des cadres devrait toujours être assortie d'une version sans cadres, afin de permettre à tous de visiter le site.

En outre, la majorité des moniteurs en service actuellement ont une résolution maximale de 640 x 480 pixels. Pour permettre à leur possesseur de consulter votre site sans problème, il est judicieux de faire en sorte qu'il tienne dans une fenêtre de 510 pixels de largeur et de 388 pixels de hauteur, ce qui laisse un peu de place pour les bords de la fenêtre.

Un site accessible est aussi un site qui peut être consulté quel que soit le navigateur utilisé. Le webmaster avisé tiendra compte des incompatibilités entre les différents logiciels de navigation. Le site Optimisé pour n'importe quel navigateur donne d'excellents conseils pour rendre votre site accessible au maximum d'internautes.

Il est superflu de mentionner que l'orthographe et la syntaxe d'un site doivent être irréprochables.

Pour ne pas agresser vos visiteurs, choisissez de préférences des couleurs calmes.

Bien sûr votre site, comme toute publication, devrait être signé et daté , la date étant celle de la dernière mise à jour. On peut profiter de la signature pour proposer un lien avec l'adresse e-mail du webmaster.

4.2.3. Typographie

Les préceptes de la bonne composition typographique doivent être mis en pratique aussi sur le Web, pour des questions de lisibilité. Il est particulièrement conseillé d'éviter de souligner quelque terme que ce soit. D'abord parce que c'est de la mauvaise typographie, ensuite parce que l'on pourrait confondre l'expression soulignée avec un lien.

Pour ne pas lasser, voire énerver l'internaute, les effets de clignotement (tag <BLINK>) et ceux de défilement (tag <MARQUEE>) sont à proscrire, le dernier des deux tout spécialement, puisqu'il est en outre complètement incompatible avec les navigateurs de Netscape.

4.2.4. Tableaux

Le premier usage des tableaux est de présenter des données sous une forme agréable à lire. En HTML, puisque l'on ne dispose que d'outils très limités pour la mise en page d'un document, c'est une bonne idée d'utiliser les tableaux pour pallier ces carences. On peut en effet masquer tout à fait les bordures disgracieuses des tables (option BORDER=0), pour ne faire apparaître qu'une disposition plus élégante.

En formatant de façon adéquate un tableau sans bordures, il est ainsi possible d'obtenir des mises en pages plus élaborées, par exemple sur plusieurs colonnes, ou avec des marges, ou de proposer un habillage rudimentaire d'illustrations. Il est possible d'inclure un tableau dans une cellule d'un tableau.

Si l'on désire une disposition fixe, qui apparaisse toujours la même, quelles que soient les dimensions de la fenêtre de navigation, on spécifiera la largeur (option WIDTH) du tableau et des colonnes et la hauteur (option HEIGHT) des lignes de façon absolue, c'est-à-dire en pixels.

Dans le cas contraire, ces grandeurs seront spécifiées en pour-cents de la largeur de la fenêtre, et le tableau et ses différentes cellules se dimensionneront selon la grandeur de celle-ci. À chaque redimensionnement de la fenêtre interviendra un rafraîchissement de l'affichage, et donc un léger délai dans la consultation.

Les bordures ont les mêmes attributs (épaisseur, couleur) dans tout le tableau. Pour qu'elles soient affichées de façon identique dans tous les navigateurs, il faut toujours spécifier leur épaisseur avec l'option BORDER. L'espace entre cellules (option CELLSPACING) et autour de leur contenu (option CELLPADDING) peuvent être spécifiés, ici encore pour tout le tableau.

En insérant un tag <P> (paragraphe) dans la première cellule de chaque ligne du tableau, les internautes ne disposant pas de navigateur capable d'afficher les tableaux bénéficieront malgré tout d'une disposition correcte des données.

4.2.5. Couleurs

La couleur permet d'égayer les sites WWW. Le langage HTML définit un code permettant de définir ces couleurs sur une palette de plus de 16 millions de couleurs différentes. Ce code fonctionne de la manière suivante.

Chaque couleur est représentée par une suite de 6 chiffres hexadécimaux (0 à 9 et A à F), précédés par un caractère dièse #. Les deux premiers de ces chiffres représentent l'intensité de rouge, de 0 à 255, les deux suivants l'intensité de vert et les deux derniers l'intensité de bleu. Ainsi par exemple, le code #FF0000 représente la couleur rouge avec une intensité maximale, et qui ne comporte pas de vert ni de bleu, tandis que le code #008080 désigne un mélange de vert et de bleu d'intensité 50%, sans rouge. De façon analogue, on voit que le code #FFFFFF représente une couleur comportant le maximum d'intensité de rouge, de vert et de bleu. Il s'agit de la couleur blanche.

Malheureusement la plupart des moniteurs ne sont pas capables d'afficher des millions de couleurs différentes. La majorité d'entre eux ne peuvent afficher que 256 couleurs. Cela pose un réel problème lors du transfert d'une image par le Web.

En effet quand le navigateur s'aperçoit que l'image qu'il charge comporte plus de couleurs qu'il ne pourra en afficher, il la convertit par un processus appelé en anglais «dithering». Ce processus place côte à côte des pixels de couleurs différentes pour simuler une couleur ne pouvant être affichée. Les images ayant subi ce traitement sont remplies de petits points, ce qui diminue notablement leur qualité.

Le dithering est particulièrement malvenu quand il s'agit d'images contenant des grandes plages de la même couleur, comme les images de fond des pages WWW ou les textes en couleur. Il est donc essentiel de s'assurer que tout ce qui est publié en couleur sur le Web ne subisse pas un tel sort.

Pour ce faire, il existe une solution simple, appelée «palette Web», «palette Netscape» ou encore «cube Netscape». Cette palette comprend 216 (216 = 6³) couleurs constantes sur toutes les plateformes. En utilisant cette palette, on peut être sûr que les couleurs resteront telles que désirées par le webmaster. La plupart des logiciels permettant de créer des graphiques ou des images incluent cette palette.

Dans le codage des couleurs HTML que l'on a défini ci-dessus, il est très facile de reconnaître une couleur de la palette Web. Les seuls chiffres hexadécimaux permis dans leur code sont les multiples de 3 (c'est-à-dire 0, 3, 6, 9, C, F). De plus, pour chacune des intensités de couleur, le chiffre est répété. Ainsi, le code #0366CC ne désigne pas une couleur de cet ensemble, puisque les deux premiers chiffres ne sont pas identiques. Par contre, le code #CC6633 définit une couleur Web. On remarque qu'il y a dans ce schéma 6 possibilités pour chacune des trois couleurs, ce qui donne bien 216 couleurs différentes.

La palette Web est décrite dans le fichier htmlrgb.gif, de Douglas R. Jacobson, qui peut être utilisé à titre de référence. Dans ce fichier, chaque couleur est associée à son code HTML.

4.2.6. Images

Enrichir une page WWW d'images n'est pas difficile. Cependant, pour que tout se passe bien pour le visiteur de votre site, il faut tenir compte ici encore de quelques points.

Avant toute chose, puisque l'internaute paie pour sa connexion à Internet, il est essentiel de lui garantir un bon confort, notamment quant au temps de chargement d'une page. Plus une page Web contient d'images et plus celles-ci sont volumineuses, et plus le temps de chargement sera grand. En conséquence, on considère qu'il n'est pas judicieux de proposer comme page d'accueil d'un site une page contenant plus de 20 kilo-octets d'images. De plus, les images dans le reste du site ne devraient en principe pas dépasser 50 kilo-octets chacune.

Si l'on doit publier une image plus volumineuse, il faut proposer une vignette de cette image avec un lien vers l'image elle-même ou encore un lien texte vers cette image. On mentionnera dans tous les cas le volume (en Ko ou Mo) de l'image.

Pour permettre aux visiteurs de se retrouver dans un site même sans les images, on assortit l'image d'un texte alternatif (option ALT) décrivant ce que montre l'image. Ce texte s'affiche notamment lorsque l'on demande au logiciel de navigation de ne pas charger les images.

En spécifiant la hauteur et la largeur de chaque image à l'aide des options HEIGHT et WIDTH, on permet en outre au navigateur de mettre en place tout de suite la bonne mise en page, avant même que les images ne soient chargées. De cette manière, le texte sera lisible beaucoup plus vite.

Si l'image est elle-même un lien, pour cacher la bordure bleue, on peut spécifier l'option BORDER=0. Comme pour les tableaux, il est judicieux de toujours spécifier la largeur de la bordure. On veillera à toujours mettre en place une possibilité de navigation sans les images, par exemple des liens texte pour le cas où l'internaute ne veut pas voir les images.

La couleur du texte devrait toujours être lisible, même si l'image de fond n'est pas chargée. Pour atteindre ce but, il faut spécifier en plus de l'image de fond, une couleur de fond proche de la teinte de l'image de fond.

Sur le Web, on emploie deux formats d'images: GIF (Graphic Images Format) et JPEG (Joint Photographic Experts Group). Ces deux formats ont chacun leurs spécificités. On les utilise pour différents types d'images, afin de profiter de leurs avantages respectifs.

Le format GIF (on prononce «djiffe»), dans sa version la plus récente GIF89a, est utilisé pour les graphiques contenant de grandes plages de la même couleur. Il a les propriétés suivantes:

compression des images sans perte de qualité. Cette compression n'est pas efficace si l'image contient des mélanges de beaucoup de couleurs différentes;
entrelaçage simple (en anglais «interleaving» ou «interlacing»): l'image va s'afficher progressivement, ligne par ligne, en augmentant la finesse de résolution. Cette propriété est intéressante pour le Web, car elle donne au visiteur du site l'impression d'un chargement plus rapide de l'image;
une (seule) couleur transparente;
256 couleurs au maximum.

En GIF il est en outre possible de créer de petites animations, pourvu que l'on dispose de la suite des images à faire défiler.

Le format JPEG doit être utilisé, comme son nom le suggère, pour des photographies, ou pour des dessins contenant beaucoup de nuances. Il possède les propriétés suivantes:

compression destructive: ce terme signifie que lors de la compression, il y a une perte de qualité. Cette perte de qualité est souvent peu importante sur le Web, vu la faible résolution des images. L'algorithme de compression JPEG fonctionne particulièrement bien sur les photographies;
entrelaçage simple;
pas de transparence: il n'est pas possible de disposer d'une couleur transparente;
support de millions de couleurs.

Pour diminuer le volume des images, il faut passer par plusieurs étapes. D'abord diminuer la résolution à 72 ppp (points par pouces), puisque les écrans ne disposent pas d'une résolution plus élevée. Ensuite diminuer les dimensions de l'image et éventuellement le nombre de ses couleurs. Choisir pour terminer le format adéquat, et, s'il s'agit de JPEG, comprimer le fichier au maximum sans que la perte de qualité ne se remarque. On s'efforcera dans la mesure du possible d'utiliser des couleurs sûres: celle de la palette Web (voir plus haut).

Un nouveau format a été développé récemment pour remplacer le format GIF et ses limitations. C'est le format PNG (on prononce «ping», comme dans ping-pong) pour Portable Network Graphics. Ce format possède les propriétés suivantes:

compression sans perte de qualité, en général meilleure que celle de GIF;
entrelaçage bidimensionnel, c'est-à-dire suivant les lignes et les colonnes de l'image;
transparence variable pour chaque couleur (canal alpha);
support de millions de couleurs.

Le PNG est destiné à remplacer petit à petit le format GIF, ce qui arrive déjà partiellement.

4.2.7. Cadres

Ce que l'on appelle les cadres (en anglais «frames») sur le WWW ne fait pas partie de la syntaxe officielle du code HTML Il est intégré dans la version 4.0. En outre, tous les navigateurs ne permettent pas de visualiser des sites avec cadres. Pour cette raison, il est nécessaire de fournir à vos visiteurs une version sans cadres.

La plupart des logiciels de création de pages permettent de créer des cadres très facilement. Les cadres définissent uniquement une mise en page. Dans chaque cadre sera affiché le contenu d'un fichier HTML classique. Voici quelques conseils pour l'aspect visuel de vos cadres.

Il faut absolument donner un nom à chacun des cadres que vous créez. Ce nom doit correspondre au contenu que vous désirez y afficher. Il faut bien penser que des fichiers différents s'afficheront à tour de rôle dans un même cadre. Grâce au nom des cadres, il sera possible de spécifier tel ou tel cadre comme cible d'un lien.

Il est possible d'empêcher l'utilisateur de redimensionner les cadres, en utilisant l'option NORESIZE. Cette option est particulièrement utile si vous avez une mise en page qui doit rester fixe. Des barres de défilement apparaissent automatiquement s'il y a lieu dans les différents cadres. On peut forcer leur affichage ou au contraire l'empêcher avec l'option SCROLLING=YES respectivement SCROLLING=NO. Il est impossible de forcer l'affichage d'une barre de défilement et d'empêcher l'affichage de l'autre.

Pour supprimer la barre séparant deux cadres, on spécifiera les options FRAMEBORDER=0 et FRAMESPACING=0 pour chacun des cadres. La spécification HTML 4.0 pour les bordures des cadres est BORDER=0. Il est donc judicieux d'ajouter cette option aux deux autres.

La gestion des liens dans les cadres se fait de manière identique à celle d'un document HTML normal. Cela signifie qu'en cliquant sur un lien, le contenu du cadre va être remplacé par le fichier cible du lien. On peut cependant faire en sorte qu'en cliquant un lien dans un cadre, le contenu d'un autre cadre change. Pour ce faire, on utilise dans la définition du lien l'option TARGET, à laquelle on donne le nom du cadre où doit s'afficher le fichier lié. Si l'on veut pas exemple que le fichier apparaisse dans le cadre nommé «contenu», on écrira par exemple: TARGET="contenu".

On peut aussi faire en sorte que le fichier lié apparaisse dans une nouvelle fenêtre, en spécifiant TARGET="_blank", dans même cadre (option par défaut) avec TARGET="_self" et dans la totalité de la fenêtre, c'est-à-dire en effaçant tous les cadres présents, en écrivant TARGET="_top".

Si on lie depuis un cadre une page Web appartenant à un autre site, il faut absolument spécifier cette dernière option. De cette façon, le visiteur ne sera jamais «prisonnier» de vos cadres, et les auteurs de site WWW n'auront pas l'impression que vous leur «volez» leurs pages.

4.2.8. Interaction avec l'utilisateur

L'ordinateur n'a pas été conçu pour lire des documents à l'écran. C'est pourquoi il est fastidieux et même désagréable d'être planté devant un écran sans rien faire. En proposant une interactivité avec les internautes visitant votre site, vous augmentez les chances que le visiteurs y reviennent.

Il y a de nombreuses manières de rendre votre site interactif. En voici une liste non exhaustive.

Intégrer un compteur au site.
Permettre au visiteur d'envoyer des remarques au responsable du site, directement à l'aide d'un lien du type <mailto:webmaster@unifr.ch> ou mieux, à l'aide d'un formulaire que l'internaute devra remplir.
Offrir aux internautes un livre d'or qu'il puissent signer, en mentionnant des commentaires.
Mettre à la disposition des visiteurs du site un BBS (Bulletin Board System), c'est-à-dire un forum de discussion écrite en différé.
Mettre en place un chat, c'est-à-dire un forum de discussion écrite en direct.

Presque toutes ces solutions impliquent des techniques sophistiquées: Server Side Includes (SSI), Common Gateway Interface (CGI), PHP, JavaScript, Java, etc. La manipulation de ces outils outrepasse largement les objectifs de ce cours. Pour cette raison je ne m'étendrai pas sur le sujet.

4.2.9. Tests

Pour être sûr que votre site fonctionne de la façon voulue, il est essentiel de le tester. À l'heure actuelle, les principaux navigateurs sont Communicator et Explorer. Il faut donc tester vos pages WWW au moins sur chacun de ces programmes, de préférence sur plusieurs plateformes (en principe sur MacOS et sur Windows).

Une première phase de test peut être effectuée en local, c'est-à-dire sur l'ordinateur avec lequel vous développez le site. Mais dans tous les cas, une fois le site chez votre fournisseur d'accès, lorsqu'il est en ligne, il faut de nouveau le tester. En effet, votre fournisseur ne possède peut-être pas le même type de machine que vous et des erreurs de transmissions ont pu être commises.

Plusieurs sites sur Internet permettent d'effectuer des diagnostics sur une page ou un site, par exemple de déterminer si le code est exempt d'erreur, si les images sont suffisamment optimisées, si les liens ne pointent pas vers des pages inexistantes, etc. Ce sont:

W3C HTML Validation Service: service officiel de contrôle du code HTML, proposé par le W3C.
Bobby: un autre service de validation du code HTML, axé sur la lisibilité des pages web par les personnes souffrant d'un handicap.
Doctor HTML: même type de site que le précédent.

Il est aussi possible de vérifier comment s'affichera une page, si elle est visualisée avec des navigateurs incapables d'interpréter les dernières trouvailles technologiques du Web. On consultera à ce sujet le site Web Page Backward Compatibility Viewer.

N'oubliez pas de vérifier une dernière fois l'orthographe de vos pages, en les faisant lire au besoin par une tierce personne.

4.3. Entretien

4.3.1. Nécessité de soigner un site web

Avant tout, il est important de comprendre ce que je veux dire par «soigner» un site web. C'est faire en sorte que le site soit le plus parfait possible, sur tous les plans (visibles ou invisibles pour le visiteur): accessibilité, temps de chargement, accès aux informations, navigation, design, organisation, sécurité, portabilité, etc. Pourquoi se préoccuper de tels détails? Les raisons sont multiples, mais tendent toutes vers le même but: l'information que vous offrez doit être vue par le plus grand nombre possible d'internautes de votre groupe cible. Il faut donc faire en sorte de supprimer ou d'éviter tous les obstacles qui pourraient entraver l'atteinte de cet objectif, par exemple:

un design peu attractif,
la difficulté de trouver une information,
la difficulté de naviguer dans le site,
la lenteur de chargement,
les liens «cassés»,
la panne totale du site,
etc.

Les conseils décrits ci-dessous devraient bien sûr être pris en compte dès le début de la conception d'un site, pour éviter de perdre un temps considérable à remettre en état un site mal géré. Il est toujours plus facile d'entretenir un site bien commencé qu'un autre. Pensez-y lors de la création de votre prochain site.

4.3.2. Travaux à effectuer

Nous classons les travaux à effectuer en deux catégories: ceux qui auront une incidence visible pour l'internaute, et ceux qui affectent les rouages internes du site.

Aspects extérieurs

Conseil 1. Définissez et utilisez une mise en page standard et cohérente

Rien n'est plus important pour un site que l'utilisation d'un même style pour tout le site. C'est véritablement le point essentiel, et si une seule chose doit être entreprise pour améliorer un site www, c'est celle-ci. Chaque page doit avoir un air de famille avec toutes les autres. Un internaute qui visite une page quelconque du site et plus tard arrive sur la page d'accueil, doit être capable de dire en un coup d'oeil que les deux pages proviennent du même site. On arrive à ce résultat de plusieurs façons. La plus simple est l'utilisation cohérente de la couleur et du texte.

Le fond de page (couleur ou image) est-il le même sur chaque page web? Si ce n'est pas le cas, les couleurs et images utilisées peuvent-elles être reconnues comme faisant partie d'un ensemble cohérent? Les fonds de pages sont très puissants pour donner un aspect standard à vos pages. Choisissez-les donc avec beaucoup de soin.
La structure de vos pages est-elle cohérente? Utilisez-vous les mêmes grandeurs de titres sur toutes les pages? Tout comme les couleurs et le fond de page, la structure permet de reconnaître facilement que deux pages font partie d'un même site. Pour cette raison, il est primordial d'utiliser les commandes HTML existantes pour structurer une page. Par exemple, choisissez la balise <H2> pour le titre de chacune de vos pages. Évitez absolument de modifier manuellement la grandeur ou le style des caractères. Concevez votre site comme un livre: les chapitres, sections, etc. ont partout la même forme et la même mise en page. Ce doit être la même chose pour votre site.

Pour gérer une mise en page standard, l'utilisation des feuilles de style est d'un grand secours. Le concept de feuille de style est bien connu des utilisateurs de traitements de textes. Il permet justement d'uniformiser la mise en page d'un document ou, le cas échéant, de plusieurs documents. La syntaxe du langage HTML a été récemment enrichie d'un système de feuilles de style, appelé CSS pour Cascading Style Sheet. À l'aide des CSS, il est possible de faire en sorte que le texte composé dans une balise, par exemple <H2> ou plus simplement <P>, le soit dans chaque page web de la même manière.

Conseil 2. Utilisez les images de façon efficace et cohérente

Malgré l'étroitesse de la bande passante, les webmasters enrichissent le plus souvent leurs pages d'images (logos, graphiques, photos, dessins, etc.). C'est à coup sûr une très bonne idée, pour autant que l'on respecte quelques règles essentielles. La première d'entre elles est d'utiliser les images de façon efficace, c'est-à-dire de réduire au maximum la bande passante nécessaire à leur chargement. Voici quelques recettes utiles pour obtenir un bon résultat. Nous en avons déjà parlé plus haut, mais il n'est pas inutile de les rappeler ici.

Demandez-vous avant tout si telle ou telle image apporte ou non quelque chose à votre site (valeur ajoutée). Ne cédez pas à la tentation, présente surtout chez les débutants, de remplir votre site de petites images animées qui ne font qu'entraver une bonne lecture des pages et augmenter la charge du réseau.
Choisissez le format JPEG pour les photos et le format GIF dans tous les autres cas (cette règle a cependant de rares exceptions). Ceci permet de compresser les images de manière adéquate.
Diminuez la résolution de vos images à 72 dpi (points par pouces). De toute façon, les moniteurs ne profitent que très rarement d'une résolution supérieure.
Utilisez de préférence les couleurs web (palette web, couleurs Netscape) dans vos graphiques, afin d'éviter le dithering.
Diminuez au maximum la palette des couleurs nécessaire à votre image.
Compressez vos photos JPEG le plus possible sans que la perte de qualité ne se remarque.

Pour effectuer ces opérations, il vous faut un logiciel de retouche d'image. Adobe Photoshop est bien sûr une possibilité, mais sa maîtrise requiert un long et difficile apprentissage, alors que l'on a en fait besoin que d'un nombre limité de ses fonctionnalités. Son coût est en outre très important. Je conseille plutôt l'utilisation du shareware GraphicConverter, très bon marché et qui dispose de toutes les fonctionnalités dont j'ai parlé ci-dessus. En second lieu, il est important de bien réfléchir à la disposition des images, et de les assortir avec goût:

les schémas des couleurs sont en correspondance,
les images ne sont pas trop dissemblables et vont bien ensemble,
le texte s'écoule de manière agréable autour des images (habillage), de façon à rendre la page facile à lire et bien compréhensible, même lorsque l'on redimensionne la fenêtre.

N'hésitez pas à prendre conseil auprès d'une personne ayant une bonne sensibilité artistique, un graphiste de préférence. Il faut bien avouer que nous n'avons pas tous l'oeil formé pour avoir un jugement sûr dans ces matières. En utilisant intelligemment de bonnes images, vous pouvez améliorer considérablement la présentation de votre site, tout en préservant une vitesse de chargement honorable. N'oubliez jamais que bon nombre d'internautes ont encore un modem 28800 baud.

Conseil 3. Fournissez aux internautes des outils de navigation

Tant qu'un site web est petit, il est facile de fournir des liens entre toutes les pages, ce qui simplifie la navigation dans le site. Mais à mesure de l'augmentation du nombre de pages, il devient de plus en plus difficile de maintenir une cohérence pour les liens entre pages. Il peut même arriver d'oublier de lier une page au reste de la structure du site.

Au bout d'un certain temps, votre site n'est qu'un paquet de groupes de fichiers disjoints reliés les uns aux autres de manière plus ou moins anarchique. L'internaute pourra dans ce cas avoir l'impression, pas totalement injustifiée, d'être complètement perdu («lost in the cyberspace»). Pour remédier à cela, chaque page doit avoir une place déterminée et planifiée dans le site. Vous devez créer des outils de navigation apparaissant sur chaque page du site. La façon de concevoir ces aides à la navigation, ainsi que leur fonctionnement ne sont limités que par votre imagination. Ils devraient dans le meilleur des cas être prévus dans le design du site. Le strict minimum de l'outil de navigation devrait au moins permettre aux visiteurs d'atteindre directement la page d'accueil principale de votre site depuis n'importe quelle autre page, en un seul clic de souris.

En effet, si votre site est catalogué par un moteur de recherche, nombreux seront les internautes à arriver sur une page profondément enfouie dans la structure du site. Il faut que ces personnes puissent facilement retrouver la page d'accueil. Il est judicieux par ailleurs de fournir des liens vers les pages d'accueil intermédiaires, le cas échéant.

Dans tous les cas, prenez du temps pour concevoir vos outils de navigation et testez-les de manière approfondie. Demandez par exemple à quelqu'un qui ne connaît pas du tout votre site, ou mieux encore, à un néophyte parfait en matière de navigation sur l'Internet, de trouver une ressource spécifique. Ou bien allez sur une page prise au hasard, et de là, vérifiez si vous pouvez revenir à la page d'accueil.

Conseil 4. Soyez fier de votre travail

Il n'est pas nécessaire, ni souhaitable pour un webmaster de flatter son ego en prétextant que son site est le meilleur. Toutefois, puisque votre site est de grande qualité, n'oubliez pas de signer votre travail, et d'y placer la date de la dernière mise à jour de la page en question.

Il est important pour les internautes de savoir qui est responsable d'une publication. Il ne viendrait à l'idée d'aucune personne sensée d'écrire des articles anonymes dans un journal. Assortissez votre nom d'un lien à votre courrier électronique (<mailto:webmaster@monsite.ch>). Les visiteurs pourront ainsi vous contacter pour vous féliciter de votre travail ou vous proposez des améliorations.

Si plusieurs personnes travaillent sur un même site, et si la responsabilité rédactionnelle est partagée, mentionnez ces indications au fond de chaque page. Il peut être utile de mentionner un numéro de téléphone, ou un lien mail générique pour un établissement ou une entreprise (par exemple <mailto:info@monsite.ch>). Dans tous les cas, assurez-vous que quelqu'un lise les messages délivrés à cette adresse et y réponde, même si c'est par une réponse automatique du style «merci de votre message».

Conseil 5. Pensez à vos droits d'auteur et à ceux des autres

Le matériel publié sur l'Internet est en majeure partie mis gratuitement à disposition, et il est impossible d'empêcher quiconque de prendre une ressource de votre site (texte, image, etc.). Cependant, le contenu et la forme de votre site constitue une certaine valeur, et vous devez la protéger de la même façon que toute autre publication. Cela n'empêchera personne de voler votre travail, mais c'est facile à faire et vous rendra peut-être service un jour. Il suffit de placer une simple notice de copyright sur vos pages, par exemple «© 2000 Philéas Fogg». N'oubliez pas non plus de placer des notices de copyright sur vos images. Les formats GIF, JPEG et PNG permettent d'inclure un commentaire facilement. Ne volez pas le travail des autres webmasters. Si vous voulez publier sur votre site des images ou du texte créés par d'autres personnes, demandez-en la permission à l'intéressé.

Rouages internes

La beauté n'est pas qu'une affaire de peau, et un bon site devrait être aussi bien rangé à l'intérieur qu'à l'extérieur. De même que la plus belle des plantes dépérit dans un pauvre sol, un site de splendide apparence n'est pas viable sans une bonne planification et une bonne structure. Si vous ne vous occupez que de l'esthétique de vos pages, sans regarder le dessous des cartes, vous allez créer et développer un site difficile à administrer, difficile à mettre à jour et condamné à l'échec, même si vous déployez des trésors d'ingéniosité pour le rendre dynamique et attractif. Les quelques conseils ci-dessous vous permettront d'éviter d'en arriver là.

Conseil 7. Créez une structure hiérarchique claire de votre site

Pour créer et maintenir un site bien organisé, le meilleur outil à disposition est le répertoire, appelé aussi dossier. Un répertoire est un endroit d'un disque dur où l'on peut placer ensemble des documents semblables et organiser des pages web.

La tentation de nombreux webmasters est de faire un site plat: toutes les pages, toutes les images, en bref tous les fichiers du site web sont placés dans un même répertoire. Il est facile de reconnaître les sites plats: les URLs de chaque page comportent le nom du serveur et le nom du fichier, mais pas de chemin d'accès. Si votre site n'a que quelques pages, il peut être judicieux de les conserver tous dans le même répertoire. Toutefois, dans la très grande majorité des cas, les pages peuvent être groupées logiquement. Les fichiers appartenant à l'un de ces groupes doivent alors être placés dans un dossier commun. Ils sont accessibles par une page d'accueil située au sommet de la hiérarchie. Comme les visiteurs voient l'information du chemin d'accès et peuvent la manipuler, aidons-les en donnant aux répertoires des noms ayant un sens précis.

Mais avant tout, les répertoires permettent de maintenir une bonne organisation du site. Si par exemple vous ne devez mettre à jour que certaines pages sur le même thème, cela sera beaucoup plus facile si elles sont bien rangées ensemble dans un dossier.

Les dossiers permettent en outre de fournir aux internautes des pages d'accueil intermédiaires, permettant d'accéder facilement à des sous-ensembles de votre site. Dans les illustrations ci-dessus et ci-dessous, on remarque la page d'accueil principale, nommée «index.html», un dossier contenant les images en rapport avec cette page, ainsi que trois dossiers regroupant chacun un domaine logique bien particulier. Si l'on ouvre le dossier «informations», on découvre bien sûr les pages web, mais aussi une page d'accueil intermédiaire, que rien n'interdit, bien au contraire, d'appeler «index.html». On découvre également un dossier qui contient les images des pages web de ce dossier.

On remarque au passage que les noms des fichiers sont entièrement écrits en minuscules, sans caractères spéciaux (accents et autres marques diacritiques), et que chacun d'eux possède une extension appropriée. Ces précautions sont nécessaires pour éviter tout problème de portabilité sur des serveurs de différentes plates-formes. Pour terminer, rappelez-vous qu'un site bien organisé en dossiers est plus facile à maintenir entre plusieurs personnes. Si de plus, appelé à d'autres tâches, vous deviez confier votre site à une tierce personne, il lui sera beaucoup plus simple de se mettre dans le coup si votre site est bien hiérarchisé.

Conseil 8. Corrigez vos liens cassés

Les liens cassés, c'est-à-dire ne menant à aucune page ou menant à une mauvaise page (pas celle qui est désirée) sont la marque d'un site web mal entretenu. Un bon webmaster doit être constamment à la recherche des mauvais liens, pour les mettre à jour ou les supprimer le cas échéant. Ce genre de travail est particulièrement fastidieux, c'est pourquoi il vaut mieux automatiser le procédé à l'aide d'un logiciel adéquat, comme Big Brother (logiciel Open Source).

Un problème plus subtil intervient parfois lorsque le webmaster utilise mal les références relatives et absolues. Les références absolues incluent dans le chemin d'accès le nom du serveur, ou au moins le répertoire le plus haut placé dans la hiérarchie d'un site. Les références relatives omettent ces indications, et ne spécifient qu'un chemin d'accès relativement au dossier courant.

Dans les figures ci-dessus, si la page «services.html» contient un lien vers la page d'accueil principale, c'est-à-dire dans le dossier immédiatement au-dessus, la référence absolue sera </index.html>. Notez la barre oblique au début du chemin d'accès, pour désigner le répertoire le plus haut placé. La référence relative correspondant au même lien est ici <../index.html>. On note par deux points successifs le répertoire père. Remarquez dans ce cas l'absence de barre oblique au début du chemin d'accès.

Voici un deuxième exemple. Si la page «services.html» contient un lien vers le fichier «index.html» du même dossier, la référence absolue est </informations/index.html>, alors que la référence relative est tout simplement <index.html>. Il faut systématiquement n'utiliser que des références relatives, si l'on veut maintenir facilement la portabilité du site. Il est ainsi possible de modifier le nom d'un site sans intervenir sur aucun lien. Avec des références absolues, tous les liens devraient être modifiés dans un tel cas. Avec des références relatives, il est aussi possible de déplacer des répertoires entiers sans casser aucun lien. On peut même télécharger son site sur un disque dur, ou en presser un CD-Rom pour le visionner off-line sans aucune difficulté. Les références absolues ne doivent être utilisées que pour des liens vers d'autres sites, ou pour d'autres cas très particuliers.

Conseil 9. Référencez votre site auprès des moteurs de recherche

Votre site peut être le plus beau et le mieux structuré au monde, si personne ne sait qu'il existe et ne connaît son adresse, il ne servira à rien. Il faut donc faire en sorte que votre site soit connu, ou tout au moins que l'on puisse le retrouver sur les moteurs de recherche courants.

La plupart de ces moteurs surfent automatiquement sur le web et finiront donc par trouver vos pages. Il est cependant beaucoup plus efficace d'y inscrire vous-même votre site. Le procédé en sera grandement accéléré. L'expérience montre en outre que les personnes cherchant une information sur un moteur de recherche ne regardent pas la liste des liens au-delà de la vingtième position. Le problème est donc de faire en sorte que votre site soit placé le plus haut dans la liste, de préférence dans les vingt premiers.

Pour ce faire, il faut connaître la façon dont travaillent les moteurs. Ces robots surfent sur chaque page qu'ils rencontrent. Ils y recherchent de manière plus ou moins intelligente les mots décrivant le thème de la page et indexent celle-ci dans une énorme base de données en fonction du nombre de fois que ces mots apparaissent dans la page. Le titre de vos pages est particulièrement important dans ce cas. En effet il donne l'information la plus importante sur le thème de la page. Vos titres doivent contenir des mots en rapport avec le thème de la page. Il doit être cohérent, car il apparaîtra en outre comme le titre de la page chez votre visiteur. Pour augmenter vos chances d'apparaître en tête de liste, il faut également utiliser judicieusement les «meta-tags». Les meta-tags sont des balises particulières du langage HTML qui permettent de donner aux logiciels de navigation et aux moteurs de recherche des indications importantes, sans que l'internaute ne les remarquent. Ces balises se placent dans l'entête du fichier HTML. Pour notre objectif, nous allons utiliser les meta-tags description et keywords. Le premier sert à donner une courte description de votre page et le deuxième permet de donner une liste de mots-clefs. L'illustration ci-dessous montre à quoi ressemblent ces deux balises dans le code source d'une page web.

Le texte de la balise description doit contenir un bref résumé de votre page. Il influencera le classement de la page sur un moteur, et de plus apparaîtra immédiatement sous le titre dans le résultat d'une recherche. Il sera donc vu par les internautes et doit être composé en conséquence. Il doit contenir environ 200 caractères.

Le contenu de la balise keywords est une liste de termes (mots-clefs) écrits de préférence en minuscules et séparés par des virgules (voir l'exemple ci-dessus). Il ne doit pas dépasser 1000 caractères. Il ne sert à rien de répéter plusieurs fois le même terme dans les mots-clefs. Certains moteurs de recherche vous pénaliseront s'ils remarquent une tentative peu élégante d'améliorer le classement d'une page.

Assurez-vous bien que les mots-clefs correspondent au contenu de votre page. On trouvera de nombreux autres conseils pour bien classer une page dans un moteur de recherche sur le site Search Engine Watch. Il existe de bons logiciels qui permettent de simplifier le travail de création du titre, des mots-clefs et de la description d'une page et même d'un site web. Un bon exemple est le programme VSE Be Found.

Conseil 10. Soignez votre syntaxe HTML

Il est incroyable de voir à quel point la syntaxe HTML de nombreux sites est mauvaise. Cela provient de deux causes principales: les logiciels de navigation sont très tolérants et corrigent d'eux-mêmes bon nombres d'erreurs et les standards du langage HTML ont mis du temps à évoluer.

Le langage HTML est maintenant un standard bien établi, avec des règles précises qui devraient être respectées pour deux raisons. Bien que les versions les plus récentes des navigateurs principaux affichent correctement des pages mal écrites, il subsiste encore un très grand nombre d'autres logiciels de navigation plus anciens, qui pardonnent beaucoup moins. Avec un code correct, vous augmentez le nombre des internautes qui pourront consulter votre site sans désagréments.

Mais la deuxième raison est plus importante. Le HTML syntaxiquement correct est du HTML facile à entretenir. Si d'autres personnes doivent s'occuper un jour de votre site, ce serait un mauvais service que de leur léguer un code impossible à déchiffrer. Heureusement, les logiciels de création de pages wysiwyg actuels font de manière générale du bon travail pour ce qui est de la syntaxe HTML, et ce problème tend heureusement à disparaître. Il est cependant conseillé de tester si votre code est bon auprès d'un site officiel de vérification du code, comme le W3C HTML Validation Service.

Conseil 11. Automatisez vos pages

Créer des pages web prend du temps, surtout si elles sont de bonne qualité. Les sites bien conçus comporte un design standard, ce qui signifie qu'une bonne partie du code est identique sur la plupart des pages du site. Ces parties identiques sont par exemple l'outil de navigation que vous offrez à vos visiteurs, le copyright, les informations concernant la responsabilité rédactionnelle, etc. La pire solution consiste à retaper ce même code chaque fois que vous créez une nouvelle page.

Avec de la pratique, on peut à peine améliorer cette technique en copiant/collant les morceaux de code qui se répètent. Mieux encore, le webmaster habile créera un modèle avec tous ces éléments de code. Il ne lui restera alors qu'à insérer le reste de la page dans le modèle. Si vous voulez vraiment vous éviter du travail, la meilleure solution est de faire insérer automatiquement par le serveur les morceaux de code identiques dans vos pages. Ce tour de passe-passe se fait à l'aide des «Server-Side Includes», autrement dit les SSI. Les SSI sont des balises spéciales qui indiquent au serveur web d'insérer quelque chose à leur place. La plupart du temps, le quelque chose que l'on insère est un morceau de code HTML contenu dans un fichier.

Il y a cependant d'autres possibilités, comme insérer la date de modification de la page, sa taille ou encore le résultat d'un script qui tourne sur le serveur, par exemple un AppleScript ou un script PERL. Mais cela est déjà plus compliqué. La grande majorité des serveurs web sont capables de traiter correctement les SSI, notamment Apache, le serveur le plus répandu, mais aussi les autres serveurs tournant sous MacOS ou sous Wintel. La figure ci-dessous montre comment intégrer deux fichiers «header.txt» et «footer.txt» dans une page web. On remarque que les commandes SSI sont inclues dans des commentaires. Le nom et, le cas échéant, le chemin d'accès du fichier à inclure est placé entre guillemets. Dans l'exemple ci-dessous, les fichiers sont placés dans un dossier nommé «common». Attention à l'utilisation des références relatives ou absolues. Dans le cas des SSI, il est parfois judicieux d'utiliser les références absolues.

Pour des informations plus détaillées sur les SSI, consultez par exemple le site All HTML.

Conseil 12. Sécurisez vos répertoires

Ce dernier conseil est simple à mettre en oeuvre et pour cette raison peut-être souvent oublié. Lorsque l'URL présenté à un serveur web est un répertoire, le serveur cherche à délivrer par défaut une page web. Pour la plupart des serveurs, ce fichier porte le nom <index.html> et moins souvent <default.html>. Si une telle page existe dans le dossier, elle sera affichée. Dans le cas contraire, suivant le serveur, celui-ci construira automatiquement une page d'index qui contiendra une liste des noms de tous les fichiers et sous-répertoires du dossier en question. Chacun des noms est un lien vers le fichier qui porte ce nom.

Il faut absolument éviter ceci. En effet le répertoire contient peut-être d'anciennes versions, ou au contraire des versions en développement de vos pages. Les visiteurs n'ont pas à voir votre atelier de travail, et encore moins votre corbeille. Vous n'auriez jamais l'idée de lier ces pages sur votre site. Le serveur ne le sait malheureusement pas.

4.4. Quelques outils nécessaires à la gestion d'un site WWW

Cette section donne une liste largement non exhaustive d'outils utilisables lors de réalisation et de l'entretien d'un site.

4.4.1. Logiciels de création de pages et de gestion de sites web

Pour MacOS et Windows 9x/NT:

Adobe Golive CS: logiciel professionnel très complet, mais assez complexe.
Macromedia Dreamweaver MX: logiciel professionnel très complet, mais assez complexe.

Ces deux logiciels sont les standards actuels pour la création et la gestion de sites web.

Pour MacOS :

FreeWay: imite du mieux possible les programmes de mise en page (comme PageMaker ou XPress).

Pour Windows :

Microsoft FrontPage 2003: le logiciel de Microsoft.

4.4.2. Logiciels de retouche et compression d'images

Pour MacOS et Windows 9x/NT:

Adobe Photoshop: le nec plus ultra de la retouche image. Très complet, mais complexe et assez cher.
Adobe ImageReady: logiciel de très bonne qualité spécifiquement destiné à la création d'image pour le web. Est livré avec Photoshop 7.
Macromedia FireWorks: logiciel de très bonne qualité spécifiquement destiné à la création d'image pour le web.

Pour MacOS:

GraphicC onverter : shareware à 30$, amplement suffisant pour travailler les images en amateur. Excellent produit, mis à jour très régulièrement; traduit entre autres en français et en allemand.
Logiciel Open Source gratuit : Gimp

Pour Windows 9x/NT:

PaintShop Pro: bon programme de retouche d'image pour Wintel.
ImageShow shareware d'édition et de création d'images pour le web (environ 60$).

4.4.3. Logiciels d'édition de textes

Pour MacOS:

BBEdit: excellent éditeur de textes avec de très puissants outils pour retoucher ou créer le code HTML. Pas cher, notamment pour l'éducation.

4.4.4. Logiciels de navigation

Pour MacOS, Windows 9x/NT et beaucoup d'autres plateformes:

Netscape Communicator
Microsoft Explorer pour MacOS pour Wintel

Communicator et Explorer ont quelques défauts communs: ils demandent de grandes ressources à la machine, que ce soit en mémoire de masse (disque dur) ou en mémoire vive (RAM). De plus ils ne sont pas très rapides. En dernier lieu, ils ont tendance à ne pas être très stables (attention aux plantages intempestifs).

Opera: navigateur multi-plateforme très rapide et de très bonne qualité. Demande infiniment moins de ressources que les deux leaders du marché. Malheureusement payant, mais bon marché: $20 pour l'éducation. Le programme n'est pas encore disponible pour MacOS, mais sortira très prochainement.

Pour MacOS:

Safari: le navigateur d'Apple pour Mac OS 10.2, très rapide, léger et agréable à utiliser
Camino: navigateur basé sur Mozilla, tout comme FireFox

4.4.5. Logiciels de téléchargement de sites WWW

Pour MacOS X:

SiteSucker

Pour Windows 95/NT:

wwwDigger

4.4.6. Logiciels de vérification des liens

Pour MacOS

BigBrother: outil pour vérifier si les liens d'un site sont valides. Ancien, mais rapide, gratuit et Open Source. Version française disponible chez MicMac.
VSE Link Tester: outil présentant les mêmes fonctionnalités que le précédent. Version de démonstration.

BigBrother en version 2 existe sur beaucoup d'autres plateformes (Open Source).

4.4.7. Logiciels d'enregistrement auprès des moteurs de recherche

Pour MacOS:

VSE Be Found: excellent logiciel permettant d'automatiser le travail complexe et fastidieux d'enregistrement du site auprès des moteurs de recherche. Rapport qualité/prix extraordinaire. Version de démonstration. Pas de version pour Mac OS X malheureusement.

Chapitre précédent
Table des matières