La conception d'un site web

Christian Ducharme

(Texte écrit en mai 2000 - mis à jour en mars 2004)

Cette formation web a comme principal objectif de donner les bases de la conception de pages web afin que vous puissiez vous impliquer dans la création ou la mise à jour d'un site web en bibliothèque. Les ateliers sont aussi l'occasion de manipuler un logiciel de conception de pages web et de s'initier au langage html.

En petit groupe de deux ou trois personnes, vous devez concevoir un site web d'une bibliothèque comprenant au moins quatre pages dont une page d'accueil, une page de présentation générale, une page décrivant un service particulier et une page de liens extérieurs.

2. L'environnement web

Le world wide web (www) ou tout simplement le web est certainement un des services les plus intéressants du réseau Internet. Il permet de publier facilement des contenus relativement riches et organisés.

Un minimum de technique

Le web est régi par le protocole http (HyperText Transfert Protocole) qui s'appuie sur le protocole TCP/IP, base du réseau Internet. Il s'agit d'un service entièrement client/serveur, c'est-à-dire qu'un ordinateur (le serveur) envoie les informations qu'un autre ordinateur (le client) a demandées.

Attention, les mots client et serveur s'appliquent aussi au logiciel. Sur l'ordinateur dit client tourne un logiciel appelé navigateur (client web) et sur l'ordinateur dit serveur tourne un logiciel serveur web (serveur http), et tous les deux sont reliés à Internet. Les navigateurs les plus connus sont Netscape navigator, Microsoft Internet explorer, Opéra et Amaya. Les serveurs web les plus connus sont Apache, Netscape Server et Internet Information Server (Microsoft). En transposant dans le monde de l'édition, les serveurs sont les lieux de publication et les navigateurs sont les lecteurs.

Les ordinateurs sont identifiés sur le réseau Internet par une adresse IP (série de quatre nombre de 0 à 255), exemple d'adresse : 251.122.95.23. Heureusement, ces adresses ont des pseudonymes en toutes lettres. Ainsi, www.cd-script.fr représente l'adresse 213.11.110.108, ce qui est plus facile à retenir.

Une page, un fichier, une URL (une cote dirait Dominique Lahary)

Chaque page a son adresse propre et peut donc faire l'objet d'une requête (être demandée par un navigateur). L'adresse complète d'une page que l'on nomme l'URL (Uniform Resource Locator), comprend trois parties :

La conception d'une page web s'appuie sur une norme appelée HTML (HyperText Mark-up Language). HTML est un langage de description de pages qui, comme son nom l'indique, utilise des balises pour structurer le texte. Ainsi, les titres et sous-titres s'insèreront entre les balises <H?> et </H?> et le contenu d'un paragraphe dans une balise <P>...</P>. La connaissance de ce langage n'est pas obligatoire pour concevoir des sites simples. Mais elle devient vite nécessaire, lorsque l'on veut créer des sites élaborés.

3. Les outils à connaître

La création de page web se fait à l'aide d'un éditeur html. Ces logiciels sont pour la plupart de type visuel (wysiwig), c'est-à-dire que vous voyez d'amblée le résultat final au fur et à mesure que vous positionnez les objets textes ou images sur la page. Ces logiciels sont guère plus difficiles à utiliser que les traitements de texte actuels. A noter le nom d'un bon éditeur non visuel, NetEdit. Ce logiciel gratuit s'avère un très bon outil pour apprendre le langage html.

Il peut être très utile de savoir manipuler un client FTP (File Transfert Protocole). Ce dernier permet de transférer des pages web sur un serveur distant. Cette fonction est parfois implantée dans les éditeurs html. Il existe un bon logiciel gratuit : FileZilla (pour plus d'information, vous pouvez consulter Sourceforge.net.

Il faut aussi connaître un logiciel de conception graphique pour créer, modifier ou adapter une image à son site web. Ces logiciels demandent un certain temps d'apprentissage. Il est recommandé de lire le manuel ou un bon livre sur le logiciel que vous avez choisi d'utiliser. De tous ces logiciels, Paint Shop Pro semble avoir conquis le marché grand public. Il s'agit d'un produit intéressant à prix abordable (990 F.). Pour en citer d'autres, FireWorks de Macromédia et, évidemment, Photoshop d'Adobe. Ce dernier est réservé aux professionnels du graphisme. Gimp, qui est aussi un logiciel gratuit, peut s'avérer un outil intéressant.

Une dernière fonction à ne pas négliger est la vérification des liens. Tous les liens doivent faire l'objet d'une vérification en local puis sur le serveur. Attention, un site peut très bien marcher en local et connaître des difficultés une fois installé sur le serveur. Le problème est souvent dans l'orthographe des noms de fichiers (ainsi que des liens). Par mesure de prudence, utilisez des noms de fichiers de moins de 15 caractères (limite du système Unix) et adoptez une rigueur pour les majuscules et les minuscules (exemple : tout en minuscule). Certains éditeurs proposent la vérification des liens. Vous pouvez aussi télécharger le logiciel gratuit, appelé CheckWeb, offert par Philippe Duby.

4. L'organisation d'un site

Un site web est un ensemble cohérent de pages constituant une présentation sur un sujet ou sur un organisme. Les pages sont reliées entre elles par des liens hypertextes. Et, quoiqu'il soit possible d'établir des liens dans tous les sens, il est fortement recommandé de structurer l'information de façon hiérarchique.

La possibilité de créer des liens hypertextes - afin de passer d'un élément d'information (objet) à un autre - est certainement une des caractéristiques intéressantes du web. Il existe trois types de liens :

Les liens dans une même page : on relie deux éléments situés dans la même page. Le point de départ est l'appel de lien (un mot, du texte, une image) et le point d'arrivée est le point d'ancrage (l'ancre).

Les liens internes : on relie un élément d'une page à une autre page (du même site). Le point d'arrivée peut alors être une page (nom de fichier) ou un endroit précis dans une page (nom de fichier suivi du nom de l'ancre).

Les liens externes : on relie un élément d'une page à une autre page située sur un autre site web. Il s'agit donc d'un lien vers une page distante. Il faut définir dans l'appel du lien l'adresse complète de la page (URL), éventuellement suivi de l'ancre.

Quelques conseils

Créer un site web c'est publier de l'information officielle sur sa bibliothèque. C'est aussi offrir un nouveau service aux usagers. Il faut donc penser et organiser le contenu de façon à répondre aux besoins des usagers, tout en gardant à l'esprit la tâche que peut représenter la maintenance des pages que vous allez publier. Un site web qui n'est pas mis à jour ne sera pas consulté.

• Prenez le temps d'organiser le contenu sur du papier ; d'établir une sorte de diagramme du site.
• Ne soyez pas trop ambitieux : les sites simples à contenu vivant sont les plus appréciés.
• Mettez en valeur les particularités de votre bibliothèque.
• Agrémentez vos pages de quelques illustrations.
• Consultez les sites d'autres bibliothèques, de vos partenaires.

5. La création de pages

Une page html peut contenir du texte, des images, des tableaux, du son, des animations et, de façon récursive, d'autres pages html ! Tous les éléments d'une page possèdent des propriétés : taille, couleur, etc. Et, tout élément d'une page peut servir d'appel de lien. Commençons par définir les propriétés de la page elle-même.

Les propriétés d'une page

La première propriété d'une page est son titre (souvent appelé méta-titre puisqu'il n'est pas visible sur la page). En consultation, ce titre s'affiche dans la barre supérieure de la fenêtre Windows. Puis, on peut définir des valeurs pour les propriétés suivantes : image d'arrière-plan, couleur d'arrière-plan, couleur du texte, couleur des liens, des liens visités, des liens actifs. On peut aussi insérer des méta-données tels que les mots-clés et la description.

Le texte

On peut saisir plusieurs niveaux de titres (représentant des têtes de section). Quoiqu'il soit possible de déclarer six niveaux hiérarchiques, dans la pratique seuls trois niveaux sont utiliser. On constitue des paragraphes dont le texte peut être indenté, centré ou justifié. On a la possibilité de créer des listes : simples, numérotés ou de définitions. On peut attribuer des propriétés au texte : de style, de taille et de couleur.

Voici un exemple de texte avec diverses propriétés de style.

Les images

Mentionnons tout d'abord que les images doivent appartenir à un des formats suivants : gif ou jpg. Le format gif, pour des raisons de conflits de droit d'auteur, sera bientôt remplacé par le format png. Pour ne pas éterniser les temps de chargement de vos pages, il faut porter une attention particulière au poids des images. Ce qui implique de limiter le nombre d'images ou leur taille.

Une règle dans le métier annonce qu'une image ne doit pas dépasser 50 ko. Les bons logiciels graphiques optimisent le poids des images pour la consultation sur le web. Les images ont aussi des propriétés : positionnement dans la page (gauche, droite, centrée), alignement du texte (haut, bas, milieu, etc.), bordure (0 pour aucune bordure) et taille (on peut facilement modifier leur taille).

Par exemple, voici une image transparente dans un cadre de fond gris avec une bordure noire.

Les tableaux

Les tableaux ou les tables (en anglais) sont utiles pour présenter des données textes ou numériques. On peut insérer un tableau avec un en-tête, le nombre défini de lignes et de colonnes, avec ou sans bordure. Voici un tableau centré de trois lignes et de trois colonnes avec une bordure à 1, avec un titre de couleur orange.

Mais les concepteurs web utilisent fréquemment les tableaux pour réaliser des mises en pages élaborées. Le tableau ci-dessous n'est utilisé qu'à des fins de mise en pages.

Dans l'illustration ci-dessus, il y a trois tableaux : un premier de trois lignes et trois colonnes qui contient les deux autres, un deuxième avec une bordure qui contient le titre et un troisième qui contient les trois rubriques.

Les cadres

Les cadres nous permettent de diviser un écran en plusieurs parties. Une page peut contenir plusieurs cadres. Chaque cadre fait référence à une page web. On utilise souvent les cadres pour rendre l'affichage d'un menu toujours visible à l'écran.

Par exemple, un menu peut être placé dans la partie de droite de l'écran et un clic de la souris sur le titre d'une rubrique lance le chargement d'une page web dans la partie gauche. On peut alors passer d'une rubrique à une autre sans revenir constamment à une page d'accueil.

Chaque cadre possède deux propriétés très importantes : le nom de la page qui s'affiche par défaut (lien) et le nom du cadre lui-même (la cible). Le nom du cadre sera utilisé par les liens d'appel pour indiquer dans quel partie de l'écran doit s'afficher la page liée. Pour revenir à un affichage dans une fenêtre complète (qui occupe complètement l'écran), il faut mettre la valeur "_top" pour la propriété cible de l'appel du lien.

6. Les feuilles de styles

Le principe de base du langage HTML est de décrire la structure logique du document, c'est-à-dire son organisation intellectuelle (titre, sous-titre, chapitre, paragraphe, etc.). Les éléments appartenant à la forme physique du document : type de caractère, couleur, bordures deviennent secondaires.

Au début du web, les pages étaient sobres et leur appenrence visuelle plutôt fade. Rapidement, la demande pour l'amélioration de la présentation graphique se fit sentir. Les deux principales sociétés impliquées dans le développement de navigateur ont ajouté des fonctions pour rendre les pages web plus attrayantes. Le problème c'est qu'un écart de plus en plus grand se creuse entre les deux tenants du marché. Et, il devient de plus en plus difficile de concevoir des pages pouvant convenir aux deux navigateurs. Pour cette raison, le W3C, qui gère les spécifications du web, suggère de séparer les aspects logiques et physiques des pages web. Et c'est ainsi que les feuilles de style sont apparues.

Les feuilles de style

Le W3C recommande de décrire les éléments de mise en forme à l'aide des feuilles de style. Le concepteur de pages web dispose de plusieurs méthodes pour définir une règle de style. Les méthodes font appel soit aux balises <STYLE> et </STYLE> ou à l'attribut "style". Attention de ne pas confondre les deux : dans le premier cas, on définit une règle de style dans l'entête et on l'applique ensuite dans la page et, dans le deuxième cas, on définit un style localement en plaçant l'attribut "style" à l'intérieur d'une balise.

Définition d'une règle de style qui s'applique à une balise en particulier :

<STYLE type="text/css">
 H1 {font-family:Arial; color:red}
 H3 {font-family:Arial; color:orange}
</STYLE>

Dans le corps de la page, le texte entre les balises <H1> et </H1> apparaîtra en Arial et en rouge et le texte entre les balises <H3> et </H3> apparaîtra en Arial et en orange.

<STYLE type="text/css">
.actu {background-color: gray; text-align: justify}
</STYLE>

Dans cet exemple, on déclare une règle de style, appelée "actu", que l'on peut ensuite utiliser dans le corps de la page en y faisant référence de la façon suivant :
<P class="actu">Ce texte apparaître sur fond gris et sera justifié</P>.

<P style="font-family: sans-serif; color: green">Ce texte s'affichera 
avec une police de caractère sans-serif et sera en vert</P>

Vous remarquerez que, dans les deux cas, la syntaxe et les possibilités de style sont les mêmes. La règles de style sont entre accolades ou entre guillements ; sont séparées par des points-virgules et comprennent une propriété suivie d'une valeur. Voici les principales propriétés impliquées dans les feuilles de style.

Les calques

Les spécifications du W3C sur les feuilles de style comprennent la possibilité de créer des blocs, appelés calques, dont la position dans la page peut varier. On peut faire le rapprochement avec les livres aux pages transparentes que l'on peut superposées les unes après les autres. Dans une page web, on peut définir autant de calques que l'on veut et les faire apparaître et disparaître à volonté.

Les balises <DIV> et </DIV> servent généralement à définir les calques. Mais on peut aussi utiliser les balises <SPAN> et </SPAN>.

On utilise l'attribut "style" pour définir les propriétés des calques. Voici les principales propriétés :

Voici un exemple d'utilisation des calques : bonjour !

7. La conception d'un site

Depuis la version 4 de HTML, le W3C nous incite à séparer les éléments servant à la structuration du contenu de ceux décrivant sa présentation (règles de style). L'utilisation de certaines balises sont maintenant déconseillées, par exemple <Font> pour la police de caractère.

Il faut dès le début de la conception, penser aux styles qui vont servir à la élaboration du site. Les éléments de présentation d'un organisme sont habituellement concentrés dans un document appelé charte graphique. Il faut s'en inspirer pour élaborer les feuilles de style du site web.

En règle générale, on regroupe souvent dans un seul fichier tous les styles servant à présenter le contenu d'un site. Le fichier, dont l'extension est .css, est placé à la racine du site et un lien est créé depuis chaque page web vers le fichier css.

Par exemple, cette ligne insérée dans l'en-tête d'une page

<LINK REL=STYLESHEET HREF="messtyles.css" TYPE="text/css">

indique que les styles de la page sont décrits dans le fichier "messtyles.css".

Structure et navigation

Les deux points importants de la conception d'un site restent la structuration du contenu et les éléments de navigation.

Un site web ressemble à plusieurs niveaux à un livre. La table des matières, les chapitres, les sections peuvent être réprésentés par le menu, les pages et les ancres. Ainsi, il est intéressant d'utiliser les balises Head pour représenter la hiérarchie d'un site. Par exemple, H1 pour le titre du site, H2 pour les titres des pages liées (chapitres) et H3 pour les sections d'une page.

Un site comprend aussi des éléments qui permettent à l'utilisateur de naviger à l'intérieur du contenu. Le menu à gauche ou la barre de nagigation dans le haut de l'écran sont fréquemment utilisés. Mais qu'importe le moyen que vous mettez en place, soyez simple et cohérent.

Diverses techniques peuvent être utilisées : les cadres, les tableaux, avec les valeurs spécifiées en absolue ou en relatif.

8. Les pages dynamiques

Traditionnellement, les pages web sont statiques. Les changements sont initiés par un clic sur un lien qui renvoie à une autre section de la page ou à une autre page (locale ou distante). Mais cela n'est pas très interactif. L'exemple des calques (bonjour) nous donne un avant goût de ce que peut signifier l'expression pages dynamiques. Les concepteurs de pages web ont besoin d'éléments mobiles dans une page soit pour maintenir l'attention de la personne qui consulte, soit pour adapter l'information à différents besoins. Puis, l'interactivité devient nécessaire lorque l'information se trouve non pas dans des pages web mais dans une base de données.

Aussitôt que l'on parle de pages dynamiques, on aborde le domaine de la programmation, même si certains logiciels de conception de pages web permettent d'intégrer de l'interactivité sans écrire une seule ligne de programmation. Mais dans ces cas, les programmes sont générés automatiquement par le logiciel... Il y a deux types de programme : ceux qui s'exécutent du côté client (le programme est dans la page web) et ceux qui s'exécutent du côté serveur (le programme est stocké sur le serveur).

Le langage côté client : Javascript

Le langage de programmation le plus utilisé pour créer des pages dynamiques au niveau du client est Javascript. D'ailleurs, l'animation des calques (bonjour) a nécessité quelques lignes de ce langage. Quoique simple, ce langage requiert de réels compétences en programmation. Mais, avec quelques notions de base, on peut réussir à créer certains effets qui peuvent rendre une page plus attractive. Les instructions Javascript sont placées entre les balises <SCRIPT> et </SCRIPT> dans l'entête de la page.

Les langages côté serveur

Il y a plusieurs langages de programmation qui permettent créer des pages dynamiques au niveau du serveur. Ces programmes sont souvent appelées script CGI (Common Gateway Interface). Ils sont généralement utilisés pour interroger une base de données. Le programme génère une page web en fonction de paramètres qui ont été envoyés par le navigateur (client) : la page est donc entièrement créée en dynamique.

Les serveurs web exploitent un des trois langages suivants : Perl, PHP et ASP. Jusqu'à récemment, Perl était le langage le plus utilisé pour l'écriture de CGI. Il est puissant et s'applique à toutes les plateformes. Les langages PHP, surtout utilisé avec le système d'exploitation Linux et, ASP, utilisé avec le système NT, gagnent du terrain dans leur plateforme respective.

Les sources consultés

HTML et création de sites internet

Charton, Eric et Pavie, Olivier. Créer un site internet. (Solutions.net). Paris : CampusPress, 2000. 450 pages.

Ouvrage complet sur la création d'un site internet : du choix des outils au référencement de votre site.

Dreyfus, Michel. Le dico référence HTML 4. Paris : Campus Press, 2e trimestre 2000. 264 pages.

Plus qu'un dictionnaire, une véritable source de référence avec un glossaire, des conseils d'utilisation des balises et des explications sur les feuilles de style.

Buyens, Jim. Le web malin : secrets d'expert pour réussir vos pages web. Les Ulis : Microsoft Press, 1998. 376 pages.

Malgré un penchant pour Microsoft, cet ouvrage donne un aperçu du métier de webmestre et livre plusieurs astuces intéressantes.

Javascript

Baier, Martin. Javascript : bien débuter. (Compétence micro, no 13). Fontainebleau : KnowWare, mars 2000. 79 pages.

Ce petit fascicule est une bonne initiation à Javascript. Toutes les notions de base sont bien expliquées et illustrées d'exemples.

Moncur, Michael. Javascript 1.3 : de l'initiation à la maîtrise. (Le tout en poche). Paris : CampusPress, 1999. 400 pages.

Ce livre de poche de 400 pages constitue un ouvrage complet sur Javascript : notions de programmation, caractéristiques de Javascript et exemples variés.

Pages dynamiques

Herellier, Jean-Marc et Mérigod, Philippe. Pages web dynamiques avec ASP - PHP - SQL. Paris : CampusPress, 1999. 326 pages.

Excellente introduction aux pages web dynamiques. Il permet de comprendre toutes les notions de base et d'effectuer un choix sur le type de langage à utiliser pour vos pages dynamiques ou vos bases de données.