ANNEXES
Annexe 1 - Comment marche l'Internet ?
Annexe 2 - Qui fait quoi dans l'Internet ?
Annexe 3 - Ergonomie sur le web
Annexe 4 - Document de conception-réalisation de ce site
• Document de réalisation
[ Pour le document de conception, voir la première partie ]
DOCUMENT DE RÉALISATION
Conditions matérielles
- Site réalisé sur un Macintosh LC 630, système 7.5. Mis à jour en juillet 2001 sur un Macintosh PowerPC, système 8.1
- Editeur HTML : Claris HomePage 3.0.
- Illustrations : Photoshop et XPress.
- Le préprocesseur WML a tourné sur un PC Debian.
Gabarit graphique
Ambiance générale : la présentation est très sobre, et s'apparente à la mise en page d'un livre de consultation. Il n'y a pas d'images, sauf les pictos servant à la navigation (page précédente/page suivante ; retour au haut de la page), et les schémas illustrant le texte. Quelques couleurs ont été choisies en harmonie, pour les liens, l'en-tête et le titre de la section visitée. Les différents espaces sont matérialisés, horizontalement, par des filets séparateurs, d'une hauteur de 1 pixel, non ombré.
Répartitions des différents espaces d'information à l'écran
En haut : en-tête, sur la largeur de l'écran : "Conception, suivi et animation d'un site web associatif", souligné sur toute la largeur (100 %) d'un filet.
Sous l'en-tête, l'espace est divisé en 2 colonnes, séparées par une gouttière (colonne blanche séparant les textes des colonnes) large de 30 pixels. Afin de la conserver à cette taille fixe, une petite image de 1 x 1 pixel (<pix.gif>, 43 octets) y est installée, en lui donnant comme caractéristiques : WIDTH=30 HEIGHT=1
A gauche : colonne de largeur fixe (115 pixels), comprenant la navigation locale, puis la navigation générique. Les différents éléments sont séparés par un filet aligné à gauche, largeur : 60 pixels.
A droite : colonne de largeur variable (pour s'adapter à la taille de la fenêtre du navigateur utilisée par le lecteur), comprenant les éléments de l'espace de lecture, l'accès aux pages précédente/suivante, le retour en haut de la page.
En bas : les crédits sont centrés de nouveau sur toute la largeur de l'écran et précédés d'un filet, largeur 100 %.
Couleurs utilisées (coordonnées en TSL, teinte-saturation-luminosité, choisies parmi la palette de 216 couleurs communes aux Mac et PC) :
- Texte : noir
- Fond de page : blanc
- Lien non visité (vert) : TSL : 180-100-30
- Lien visité (mauve) : TSL : 270-50-40
- Lien activé (vert clair) : TSL : 180-100-50
- Rouge : TSL : 0-100-40
- Gris : TSL : 0-0-40
Eléments de style
- En-tête : H4, gris
- Les éléments de la navigation (colonne de gauche) sont en FONT SIZE="-1" ; seul, le titre du chapitre est en majuscules. Le nom de la page visitée est sans lien, et en gras
- Titre de la section (dans le corps du texte) : H2, rouge, centré
- Titres d'introduction et de sous-section (dans le corps du texte) : H3, noir
- Les références croisées sont précédées d'un filet aligné à gauche, hauteur 1 pixel, sans ombre, largeur : 40, et du titre "Complétez cette section" en H4
- Les notes sont précédées d'un filet aligné à gauche, hauteur 1 pixel, sans ombre, largeur : 40, et du titre "Notes" en H4
- Les URL de sites extérieurs sont en format préformaté <PRE>
- Les crédits sont centrés sur toute la largeur de l'écran, en H5, précédés d'un filet sur toute la largeur (100 %), hauteur 1 pixel, sans ombre.
Attributs des pictos
"top" : texte de remplacement : "retour" - Bordure = 0 - Taille = 14x12 - Alignement = droite. Revient à l'ancre "top" placée avant le titre du livre (dans l'en-tête). 95 octets.
"av" : texte de remplacement : "page precedente" et "ap" : texte de remplacement : "page suivante" - Bordure = 0 - Alignement = droite. Placées en début de page, entre le filet de titre courant et le titre de la section et en fin de page, avant les notes.
"pix" : pas de texte de remplacement, pour éviter l'incompréhension lorsque le lecteur utilise un navigateur texte. Bordure = 0 - Taille = 1x1 pixel - Placé en tête de colonne/gouttière. 43 octets.
Utilisation de WML
Le pré-processeur a été utilisé pour deux types d'actions :
- mettre à jour automatiquement, dans les crédits, des données spécifiques à chaque fichier comme l'URL et la date de dernière mise à jour ;
- placer les informations communes à toutes les pages de manière à pouvoir les modifier automatiquement, si besoin est : les attributs du <body>, l'en-tête, la navigation générique, les informations stables dans les crédits.
Les lignes de code ont été réalisées par Stéphane Bortzmeyer, ingénieur informaticien réseau. Je n'ai eu qu'à inclure les "tags" dans le HTML, en l'occurence dans le gabarit :
- <body> pour les couleurs de fonds, de texte et des liens
- <en_tete> pour les éléments de l'en-tête (fixe)
- <navigation_generique> pour les éléments de la navigation générique (fixe)
- <credits> pour les éléments des crédits comprenant une partie fixe ("Conception, suivi et animation d'un site web associatif" - Eve Demazière - Décembre 1999 - eve@internatif.org) et une partie mobile (URL de la page consultée et date de la dernière mise à jour).
Code source du gabarit
Le gabarit comprend le plus d'éléments possibles (réels, lorsqu'ils ne changent pas, ou en "faux texte" lorsqu'ils diffèrent selon les pages) avec leurs attributs, afin de faciliter la réalisation des pages. Il multiplie les commentaires, à usage pédagogique, mais aussi pour pouvoir modifier certains éléments à partir du code HTML quand c'est plus rapide et plus sûr que de passer par la fonction wisiwig de l'éditeur.
Tests techniques de validation du gabarit HTML
- Sur Mac :
- Internet Explorer 3.0 et 4.0 ; Netscape 2.0 et Netscape 4.0 : OK
- Sur MS-Windows 95 :
- Internet Exporer 3 et Netscape Navigator 3.01 : OK
Catalogage des fichiers
- Pages spéciales
- Page d'accueil : index.html
- Texte de présentation : presentation.html
- Sommaire détaillé : sommaire.html
- Moteur de recherche : recherche.html
- Contact avec l'auteur : contact.html
- Nouveautés : nouveau.html
- Bibliographie : biblio.html
- Deux pages présentant des schémas : schema1.html et schema2.html
- Pages de texte
- Le nom des fichiers reprend tout simplement l'ordre du sommaire, où les "." sont remplacés par des "_" (exemple : 2_1.html). Pour les sous-chapitres scindés, il reprendra le numéro du premier sous-titre de la seconde partie (exemple : 2_1_2.html). Ce système permet de retrouver immédiatement, à partir du sommaire, les fichiers et leur contenu. Lors de la réalisation des pages, le choix du nom du fichier se fera ainsi automatiquement, sans risque d'erreur ni perte de temps à réfléchir.
- Les annexes s'appellent anX.html, où X est le numéro de l'annexe.
Images
Toutes les images sont regroupées dans le dossier <icono> : les pictos utilisés pour la navigation, l'image "pix.gif" servant à fixer la largeur de la gouttière, et les illustrations du texte.
Pictos (créés sur Photoshop 4.0)
- <top.gif> : permet de retourner directement vers le haut de la page. Taille : 14x12 pixels - 72 dpi - Rouge (de manière à ressortir du gris du texte) - Exportée en gif 89.a - Poids : 98 octets.
- <ar.gif>, <av.gif> : permettent de passer à la section précédente ou suivante. Taille : 13x14 pixels - 72 dpi - Gris - Exportées en gif 89.a - Poids : 190 octets chacune.
Illustrations
- 2 grands schémas (schema1.gif ; schema2.gif), à partir d'originaux réalisés avec XPress. Méthode de réalisation : retravailler les fichiers XPress en choisissant des polices lisibles (Helvetica black, Helvetica bold italic) et en augmentant l'approche de paire. Enregistrer la page en EPS, au format Mac N&B, données binaires. Ouvrir l'image EPS sous Photoshop, "aplatir". La retailler au plus juste, la réduire au format 400 pixels de large. Appliquer une rotation de 0,1°. Appliquer un filtre de netteté : gain 100 % ; Rayon 1 ; Seuil 16. Passer en mode Couleurs indexées, et exporter l'image en Gif 89a. Vérifier que le poids final n'excède pas 40 ko.
Petites illustrations :
- exemple de barre de navigation : bout1.gif ; bout2.gif ; bout3.gif ; bout4.gif ; bout5.gif,
- 2 exemples de pictos de retour au haut de la page : top2.gif et top3.gif
- Le logo du moteur de recherche : ht://dig.gif
Moteur de recherche
Le moteur utilisé est ht://dig (1) : c'est un logiciel libre et gratuit, tout à fait capable de gérer un site simple comme celui-ci.
Réalisation des fichiers pour l'impression ou la lecture hors-ligne
Les associations n'étant pas riches, il était important de proposer une version à lire hors-ligne, c'est à dire non connecté. J'ai choisi deux solutions :
- "aspirer" le site pour le compresser au format .zip. J'ai utilisé pour cela l'aspirateur libre HTTrack (version 2.0), conçu et réalisé par Xavier Roche & Yann Philippot (distribué sous license GNU). La version 3.0 est en français, pour Windows 95/98/NT, Linux et Debian :
http://www.httrack.com/
Le .zip est accessible à tous les PC sous Windows, et aux Macs avec un petit utilitaire (que tout le monde n'a pas).
- Pour les Macs, j'ai utilisé les fonctionnalités "aspirateur" du logiciel Acrobat pour réaliser un fichier .PDF (accessible en fait à toutes les plate-formes), qui peut également être imprimé en une seule fois (au contraire du HTML). J'ai pris soin de préciser, pour les utilisateurs n'ayant pas le lecteur "Acrobat Reader", où ils pouvaient télécharger ce plug-in.
Marche à suivre pour la création et traitement des fichiers du texte
- Ouvrir le gabarit, copier le texte dans la partie de droite.
- Enregistrer le fichier avec son nom et son "title".
- Copier-coller la navigation locale (liste des sous-sections), placer les ancres devant chaque sous-titre dans le texte et réaliser les liens depuis la navigation locale.
- Réaliser en haut les liens des pictos de navigation "précédente/suivante" ; le copier en bas.
- Enrichir le texte (titre de la page en rouge niveau H2, texte avec "Introduction" pour les débuts de section, sous-titres niveau H3). Placer les "retour vers le haut de la page" dedans.
- Copier les notes correspondantes ; réaliser les appels de note dans le corps du texte avec les liens menant aux notes. Les sites extérieurs s'ouvrent dans une nouvelle fenêtre : Cadre cible = _blank
- Réaliser les petits textes "Complétez cette section" : pour cela, il faut relire le texte (en profiter pour mettre les italiques, les espaces insécables, les textes en gras et autres enrichissements). Réaliser les liens vers les autres pages du site, qui s'affichent, elles, dans la même fenêtre du navigateur.
- Tester en local, vérifier les liens "page précédente/page suivante", les liens des notes dans la page, les liens vers les autres pages du texte, vers les autres sites.
- Télécharger la page sur le site-test.
Sections trop longues, devant être morcelées (ex. ch. 2.1)
- Le "title" de la page doit indiquer "Web associatif - Titre de section (1)" puis "Web associatif - Titre de section (2)".
- Placer, avec les liens correspondants, juste après le texte de la première partie : [ Cette section X.X est divisée en deux fichiers : lisez donc la suite ] et avant celui de la seconde partie : [ Cette section X.X est divisée en deux fichiers : lisez donc aussi la première partie ]
Poids total du site : environ 1,3 Mo.
Tests (effectués lors de la création du nouveau site, en 1999)
- Tests de structure par les amis (pros du web, néophytes associatifs...), lorsque les deux premiers chapitres sont terminés ;
- Passer Checkbot sur la version-test pour vérifier tous les liens, à la fin.
Promotion (à chaque nouvelle version)
- Envoyer un e-mail :
- aux personnes prévenues des versions précédentes ;
- à celles qui ont pris contact après avoir lu le texte en ligne ;
- aux associations ayant pris contact ;
- aux sites qui référencent le mien ;
- aux sites orientés "associations"
- Référencer dans les principaux annuaires francophones (prospecter également le Québec, la Suisse, la Belgique...)
- Annonces dans les suppléments multimedia : Le Monde, Libération, Les Inrockuptibles, Télérama, presse spécialisée Web...
Notes
(1) Le site du moteur de recherche ht://dig :
http://www.htdig.org/