www.ujf-grenoble.fr/JAL - Mémoire de stage : Site Internet de - Jardin Alpin du Lautaret
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Département
informatique
2ème année
Michaël ROCHE
Matthieu CUNZI
Mémoire de stage :
Site Internet de
www.ujf-grenoble.fr/JAL
I.U.T. 2 Grenoble juin - 1999
IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
REMERCIEMENTS
Nous tenons tout particulièrement à remercier les personnes qui nous ont
accueillis :
ª Paul MANDARON (directeur de l’UFR de biologie de l’Université Joseph
Fourrier) et Loïc THOMAS (responsable administratif de l’UFR):
Pour nous avoir intégré au sein de leur UFR et nous avoir permis
d’effectuer notre stage dans les meilleures conditions.
ª Serge ALLERMOZ (ingénieur informatique et administrateur réseau)
Pour avoir mis à notre disposition les moyens « matériel et logiciel »
utilisés lors de notre stage.
ª Stéphane PERRIER (objecteur de conscience et créateur du site de l’UFR)
Pour ses conseils sur l’utilisation de WebExpert et plus généralement
pour le développement de site web.
ª Jeanine DI MARCO (gestion des enseignements, scolarité DEA BCM)
Pour son aide précieuse lors de la rédaction de ce rapport.
ª Le personnel de l’UFR :
- Frank THOMAS
- Marie-José THOMAS
- Annick DIFRENZA
- Anna CORRAL
- Sophie AIME-BLANC
- Anne-Marie DORNE
- Marie-France REYNIER
- Christophe VALENCIN
- Jean-Paul BLANQUINI
Pour leur bonne humeur et leurs avis d’utilisateurs.
1
IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Mais aussi toute l’équipe de la Station Alpine du Lautaret :
Pour leur aide et leur soutien au cours de toutes les étapes du stage
ª Serge AUBERT (Directeur du Chalet Laboratoire)
Pour sa motivation et son investissement personnel tout au long de
notre stage.
ª Rolland DOUZET (Responsable botanique)
Pour son aide précieuse lors de la réalisation de la visite.
ª José LESTANI (Responsable horticole)
Pour le choix des photographies et ses explications quant à
l’organisation des rocailles.
ª Philippe CHOLER (Directeur-Adjoint du Jardin Alpin)
Pour avoir su réunir l’équipe pour les réunions.
Nous voulions aussi remercier Mr Gérard CADEL pour son œuvre et ses
magnifiques photographies.
Merci à Eric FONTENAS notre responsable de stage à l’IUT pour ses
corrections et ses conseils pour l’édition de ce rapport.
Nous adressons un remerciement tout spécial à Joëlle COUTAZ (responsable
de l’équipe IIHM du laboratoire CLIPS de l’IMAG) pour nous avoir trouvé ce
stage, nous avoir fourni une méthode de conception et pour l’intérêt qu’elle a
porté à notre travail.
2IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
SOMMAIRE
Introduction.................................................................5
I. Analyse du problème ..................................................9
1. Cahier des charges............................................................. 9
a) Objectifs généraux et critères de succès ................................................ 9
b) utilisateurs cibles.................................................................................. 10
c) Spécification technique de la plate-forme d’accueil ........................... 11
d) Requis non fonctionnels ...................................................................... 12
e) Tâches les plus importantes ................................................................. 12
f) Contraintes imposées par le cahier des charges .................................. 14
2. Outils utilisés................................................................... 14
a) présentation de WebExpert v3............................................................. 14
b) Présentation de javascript1.1 ............................................................... 15
II. Conception et réalisation ..........................................17
1. Objectifs généraux de conception ................................... 17
2. Structure du site............................................................... 18
a) Présentation de la racine du site........................................................... 18
b) Arborescence des répertoires............................................................... 19
3. Navigation au sein du site ............................................... 20
a) Navigation globale du site ................................................................... 21
b) Navigation parallèle............................................................................. 23
ª Les infos-pratiques et l’actualité :..................................................... 23
ª L’histoire :......................................................................................... 23
ª La visite :........................................................................................... 24
c) Navigation locale ................................................................................. 31
ª L’actualité de la station..................................................................... 32
4. Contenu et présentation des pages................................... 34
a) Contenu de la page d’accueil............................................................... 34
ª Aperçu de la page d'accueil .............................................................. 36
b) Contenu de la partie visite ................................................................... 37
ª Aperçu de la partie visite .................................................................. 37
c) Contenu de la partie histoire ................................................................ 38
ª Aperçu de la partie histoire............................................................... 38
III. Déroulement de l’étape de conception ...................39
1. Etape de conception pour la partie visite......................... 39
a) Première approche ............................................................................... 39
3IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
b) Seconde approche ................................................................................ 40
c) Vers une solution ................................................................................. 40
2. Etape de conception pour la page d’accueil .................... 41
a) Première approche ............................................................................... 41
b) Seconde approche ................................................................................ 42
c) Troisième approche.............................................................................. 43
d) Vers une solution ................................................................................. 43
Conclusion ................................................................44
Bibliographie ............................................................47
Annexes ....................................................................48
 Code de la colonne de navigation : .................................................... 49
 Code de la page d’accueil : ................................................................ 56
4IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
INTRODUCTION
A la fin du 19ème siècle, le professeur Lachmann, alors titulaire de la
chaire de botanique à la faculté des sciences de Grenoble, créa le jardin du
Lautaret, situé à 2050 mètres d’altitude sur un site de 2000 m2 célèbre pour sa
richesse florale, après avoir été à l’origine de celui de Chamrousse (1892) et
de Villar d’Arène (1895). Le jardin du Lautaret ouvre en 1899. Il abrite une
collection systématique de 500 espèces des Alpes occidentales et des
« rocailles », constituées de rochers rapportés de diverses zones alpines
comme les Pyrénées ou l’Himalaya. C’est à cette époque que les échanges de
graines commencent.
Le professeur Lachmann meurt en 1908 et son successeur à la chaire de
botanique à la faculté des sciences de Grenoble, le professeur Mirande,
poursuivra son œuvre en enrichissant le jardin qui contient plus de 1500
espèces en 1913. Cependant, tout est remis en cause fin 1913, en effet
l’administration des ponts et chaussées, désirant améliorer la liaison Lautaret
Galibier, décide de faire passer une route en plein milieu du jardin.
Pour sauver les collections, le professeur Mirande n’a d’autres choix
que de déplacer le jardin mais l’Université n’a pas les moyens pour
entreprendre une telle opération.
C’est alors qu’intervient Léon Auscher, l’un des responsables du
Touring Club de France et admirateur du jardin, qui va obtenir une aide de
30000 francs pour son déplacement sur le site actuel situé à 2100 mètres
d’altitude sur une surface de 20000 m2 offrant un panorama unique sur le
Briançonnais, le Grand Galibier, le Combeynot et sur les glaciers de la Meije.
L’architecte paysagiste Ginet s’occupe des plans du nouveau jardin. De
1914 à 1919, malgré la guerre, le projet prend forme, et le 5 août 1919 c’est
son inauguration officielle.
Le nouveau jardin comporte dans sa partie supérieure, un chalet
entièrement construit en pierre. Dans la grande salle qui constitue le rez-de-
chaussée est installé, pour la distraction et l’instruction du touriste, un musée
ethnographique, œuvre de Henri Müller, qui représente, à l’aide de meubles et
d’objets d’art anciens et régionaux, la reconstitution d’un intérieur haut-alpin.
Le reste du chalet est consacré à la science, et en particulier aux recherches
biologiques.
5IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
le jardin en 1920
La maintenance de ce vaste jardin et des locaux à 2100 mètres
d’altitude demande des moyens dont ne dispose pas le Chef de Culture, M.
Prével.
En 1942 « … le chalet devient peu à peu inhabitable…les rocailles se
dégradent », M. Prével envisage de réduire le jardin des deux tiers et de le
fermer au public pendant 3 ou 4 ans. Quelques années plus tard, en 1944, lors
des combats de la libération, il sera fusillé avec plusieurs dizaines de
personnes.
Après ces événements tragiques, la reconstitution des rocailles et la
remise en état des installations vont s’effectuer lentement, sous la direction de
Madame Kofler, professeur de physiologie végétale, puis de Monsieur
Ozenda, professeur de biologie végétale à l’Université Joseph Fourier de
Grenoble (UJF). Un chef de culture, Monsieur Ruffier-Lanche, excellent
botaniste, enrichit les collections, qui compteront plus de 5000 espèces du
monde entier, alors que ce nombre s’était réduit à 200 en 1950.
Cependant, bien qu’à cette époque les responsables du jardin soient
encore handicapés par le manque de personnels et de moyens, leur motivation
était toujours aussi présente. Alors progressivement une équipe va se
constituer au sein de l’Unité de Formation et de Recherche de biologie (UFR
de biologie) de l’Université Joseph Fourier qui nomme en 1981 un directeur
(M. G. Cadel) et un responsable horticole (M. J. Lestani).
Par ailleurs en 1985 un exposé, présenté par M. R.Bligny, suscite un
regain d’intérêt des scientifiques pour l’étude des plantes de montagne.
6IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Très vite le projet d’installer un laboratoire au Lautaret voit le jour et
reçoit un accueil encourageant du Conseil Général des Hautes Alpes et de
l’Université Joseph Fourier.
Le Chalet-laboratoire est inauguré en 1989 et M. Bligny (Directeur de
Recherches au CNRS) en est nommé Directeur : La Station Alpine du
Lautaret est née.
Ce chalet est un laboratoire d’altitude unique en Europe. Il est doté
d’équipements permettant d’étudier l’écologie et la physiologie des plantes
alpines, natives du Lautaret ou cultivées au Jardin Alpin.
Le chalet laboratoire accueille des étudiants et des chercheurs français
et étrangers. Les résultats obtenus sont publiés dans des journaux scientifiques
internationaux.
Au jardin Alpin du Lautaret sont cultivées plus de 2000 espèces de
plantes des montagnes de diverses régions du monde. Elles sont présentées de
façon pédagogique en fonction de leur origine géographique et de leur
écologie.
Le Jardin Alpin contribue à la conservation de cette biodiversité par la
multiplication de plantes en danger d’extinction. Le Jardin Alpin assure
également une mission de formation d’étudiants en horticulture et en
botanique.
Le jardin Alpin est géré par l’Université Joseph Fourier mais aussi par
l’Association des Amis du Jardin Alpin du Lautaret (AJAL) qui assure un
soutien financier supplémentaire par leurs subventions et la perception de
droits d’entrée.
En 1998 le jardin commence enfin a être reconnu en obtenant le label
des «Jardins Botaniques de France et des Pays Francophones ». Cependant
une telle distinction n’est pas connue du public et malgré tous ces efforts pour
faire perdurer le site du Lautaret et améliorer la richesse esthétique et
botanique du jardin, sa notoriété reste encore trop locale et n’est donc pas à la
mesure du travail fourni.
C’est pour palier à ces problèmes que l’équipe de la Station a trouvé
intéressante l’idée de créer son propre site Internet, l’année même où l’on fête
le centenaire du jardin. C’est aussi un moyen moderne et économique d’en
faire la promotion.
7IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Notre travail a donc consisté à étudier en détail les besoins de la Station
Alpine puis à mettre en place le site.
Nous débuterons donc notre étude par la rédaction du cahier des charges où
sont rassemblés : les différentes attentes des commanditaires et leurs critères
de succès, l’identification des utilisateurs cibles, les spécifications techniques
des machines des utilisateurs, les impératifs du site n’ajoutant pas de
fonctionnalités supplémentaires, et enfin la définition des tâches les plus
importantes. Ensuite nous présenterons les outils utilisés au cours du stage
c’est à dire WebExpert v3 et Javascript 1.1.
Dans un deuxième temps, nous présenterons l’aboutissement de notre
conception en définissant les objectifs généraux de conception, et en
présentant la structure du site, sa navigation interne, le contenu des pages, et
leur aspect. C’est en quelque sorte la définition du produit que nous avions
prévu de mettre en place.
Enfin nous présenterons le déroulement, étape par étape, de la
conception du site, issu des nombreuses réunions avec l’équipe du Lautaret.
8IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
I. Analyse du problème
Avant de se lancer dans la génération de pages il était primordial de
savoir quels étaient les buts d’un tel site. Il s’agissait donc de débuter le stage
par l’étude des attentes des commanditaires puis par l’identification des futurs
utilisateurs et de leurs préférences.
1. Cahier des charges
Le cahier des charges a pour but de préciser de manière formelle
l’orientation de notre projet et d’en fixer les priorités de manière à planifier et
concevoir sa réalisation.
Nous commencerons par présenter les objectifs d’un tel projet, puis
nous identifierons les utilisateurs visés et leur type de machine.
Enfin nous présenterons les qualificatifs souhaités du site (requis non
fonctionnels), les tâches les plus importantes à effectuer lors d’une visite et
nous définirons les contraintes que nous impose ce cahier des charges.
a) Objectifs généraux et critères de succès
• Les motivations des commanditaires sont :
→ de diffuser la connaissance c’est à dire de fournir des supports aux
personnes voulant faire de l’initiation à la botanique ou à l’horticulture
(but pédagogique).
→ de présenter les chercheurs grenoblois en tant qu’acteurs importants en
matière de biologie alpine (but de notoriété).
→ d’augmenter le nombre de visiteurs pour l’initiation à la visite du jardin
(but financier) et à l’horticulture.
→ d’établir de nouveaux contacts : avec des collectionneurs ou des botanistes
susceptibles d’échanger des graines, avec des chercheurs (ou des
personnes travaillant sur les mêmes sujets), avec des étudiants intéressés
par un stage au sein de l’équipe, et enfin d’augmenter le nombre
d’adhésions à l’AJAL (les Amis du Jardin Alpin du Lautaret) (but de
communication).
9IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
→ d’améliorer l’image de marque que les responsables politiques (locaux et
nationaux) et les décideurs scientifiques (CNRS, Ministère, etc.) ont de la
station (but de promotion).
• Les bénéfices attendus :
- augmenter :
→ la fréquentation du jardin d’au moins 10 %.
→ le nombre de partenaires pour les échanges de graines
d’environ une centaine.
→ les crédits octroyés à la Station.
- Susciter de nouvelles demandes de stages supplémentaires
notamment de la part des étrangers.
- doubler :
→ le nombre d’adhésions à l’AJAL (s’élevant actuellement à
environ 150 membres).
• Définition des priorités :
Le but premier est d’accroître la fréquentation du jardin afin de
conforter les finances du jardin pour d’éventuels nouveaux développements
(salle d’accueil, personnel supplémentaire, budget de communication, etc.).
La seconde priorité est d’établir de nouveaux contacts afin d’améliorer la
qualité du jardin (diversité des plantes) et augmenter les échanges de
connaissances entre équipes de recherche.
Ensuite un objectif de notoriété pour promouvoir les chercheurs grenoblois
sur le plan local, national et international.
Enfin vient l’aspect pédagogique pour faire naître chez les plus jeunes l’envie
de mieux connaître la nature (but à plus long terme).
b) utilisateurs cibles
• Les visiteurs potentiels (le grand public) qu’il faut inciter à venir sur le
terrain pour visiter le jardin : ils doivent donc trouver dans le site un
échantillon de la beauté du jardin leur laissant entrevoir la richesse des
lieux, savoir facilement quand et comment accéder au jardin et en
10IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
connaître son actualité, notamment les activités prévues
exceptionnellement à l’occasion du centenaire.
• Les chercheurs, intéressés par l’actualité scientifique du laboratoire, c’est à
dire les thèmes de recherche, les futurs colloques, les projets, les
publications de l’équipe travaillant au Lautaret. Aussi ils doivent pouvoir
contacter facilement le personnel du laboratoire (mise en place de
collaborations).
• Les stagiaires potentiels doivent pouvoir disposer d’un moyen
d’information sur les divers stages possibles en horticulture, en botanique
et en recherche, et de contacter les personnes chargées de les animer.
• Les collectionneurs qu’il faut rapidement aiguiller vers les informations
qui les intéressent c’est à dire l’index-seminum (liste de graines
disponibles) et les personnes qu’ils doivent contacter pour effectuer des
échanges.
• Les institutionnels de la botanique (Jardins Botaniques, Conservatoires)
qui, comme les collectionneurs, sont intéressés par des échanges de
graines, doivent facilement trouver l’index-seminum et les coordonnées
des personnes à contacter.
• Les enseignants qui trouveront matière à illustration pour leurs cours, et
les coordonnées des personnes à contacter pour organiser une visite avec
leurs élèves.
• Les non-francophones doivent pouvoir trouver une version du site (miroir)
ou un résumé dans une langue qui leur est familière.
c) Spécification technique de la plate-forme d’accueil
Il s’agit là de définir l’équipement minimum requis pour visiter le site.
Les seules obligations pour visiter le site de la Station Alpine du Lautaret
sont :
• d’avoir un navigateur Internet supportant les cadres (frames) et étant
capable d’interpréter le javascript1.1 (minimum Netscape 3.0 ou Internet
explorer 3.0).
11IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
• d’avoir une définition d’affichage supérieure ou égale à 800/600 pixels.
d) Requis non fonctionnels
• Attrayant : le site doit se présenter comme une vitrine du jardin, de l’UFR
de biologie et de l’Université Joseph Fourier. Il doit donc livrer une image
agréable du Lautaret auprès du grand public comme des chercheurs
étrangers et des responsables politiques.
• Incitatif : Il faut donner envie de visiter le jardin en présentant de belles
photographies de paysages et de plantes.
• Non-exhaustif : en effet il ne faut surtout pas que l’utilisateur puisse se
satisfaire d’une visite uniquement virtuelle.
• Innovant : le site de la Station Alpine du Lautaret doit être original pour
se démarquer des autres sites Internet présentant des jardins botaniques.
• Facile à utiliser : l’interface doit être intuitive et synthétique pour
permettre au « grand public » de naviguer facilement au sein du site.
• Evolutif : On doit facilement pouvoir réactualiser les pages du site de la
Station Alpine du Lautaret sans changer sa structure.
e) Tâches les plus importantes
• Savoir ce qu’il faut connaître du jardin :
- visualiser de belles photographies des plantes et des paysages du
Lautaret.
- découvrir l’organisation du jardin (rocailles thématiques).
• Découvrir l’histoire de la station :
- connaître l’historique du jardin c’est à dire les faits marquants de sa
naissance à aujourd’hui (en effet son histoire est encore méconnue
du public car beaucoup de données sont introuvables comme les
anciens textes et les anciennes photographies).
12IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
- savoir depuis quand et pourquoi un laboratoire unique en Europe
s’est implanté au Lautaret.
• Connaître la situation géographique du jardin, (de la station) :
- Disposer d’un petit plan permettant d’accéder à la station
(accompagné des horaires d’ouverture et des tarifs du jardin).
• Connaître les faits marquants de la station :
- les activités proposées à l’occasion du centenaire du jardin.
- les thèmes évoqués lors du prochain colloque (septembre 2000) et
comment y participer.
- Connaître les diverses apparitions du jardin ou du laboratoire à la
télévision et dans la presse.
• Connaître les thèmes de recherche du laboratoire :
- Etre informé des publications du personnel du chalet-laboratoire, et
leurs collaborations.
- être mis en contact avec les personnes adéquates.
• Pouvoir trouver l’interlocuteur ad’hoc :
- Dans le cadre d’un stage : le responsable du domaine qui intéresse
l’utilisateur.
- pour faire des échanges de graines :
à c’est à dire accéder facilement à l’index seminum afin de
savoir quelles plantes (et graines) sont proposées à l’échange.
à et de pouvoir transmettre un petit formulaire permettant de
demander des échanges.
- pour partager ses résultats avec les chercheurs du laboratoire du
Lautaret.
• AJAL : information sur l’association et bulletin d’adhésion à celle-ci.
13IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
f) Contraintes imposées par le cahier des charges
Etant donné les caractéristiques des différents utilisateurs, certaines
contraintes nous sont imposées par le cahier des charges.
En effet il est impératif que les pages du site soient interprétables par un
maximum de navigateurs Internet dans la mesure où il est destiné au grand
public. De plus, même si les différentes pages du site doivent répondre à un
même standard, le style de rédaction sera différent et variera en fonction des
personnes qui seront susceptibles de les lire.
Par exemple les pages concernant la recherche contiendront parfois des
termes propres au « jargon » des chercheurs en biologie alpine alors que les
pages présentant l’histoire du jardin auront un style plus simple qui sera
compréhensible par tous.
2. Outils utilisés
Au vu des nécessités de portabilité et de compatibilité avec un
maximum de navigateurs Internet nous avons choisi de nous limiter à html
version 3.2 et javascript 1.1 .
Pour réaliser ce site on a mis à notre disposition un logiciel de
conception de pages Internet : WebExpert v3
a) présentation de WebExpert v3
Même si ce logiciel peut facilement être considéré comme un logiciel
de conception au même titre que ‘Frontpage’ ou ‘Netscape Composer’,
WebExpert v3 ne présente pas du tout la même approche de la création de
pages web.
Ainsi, avec ce logiciel, le concepteur travaille sur le code HTML et non
sur le rendu de ce dernier. WebExpert n’autorise pas la production du code
d’une page à partir d’un dessin de cette page, en ce sens il ne génère pas de
code HTML. Par contre les balises dont on a besoin peuvent être générées au
coup par coup.
14IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
WebExpert est donc un éditeur de texte amélioré, pas un logiciel de
conception à part entière.
- Présentation de l’interface :
Onglets de catégories de fonctions
(html, java, javascript, dhtml, etc.)
Actions sur une portion de code
(justifier à gauche, etc.)
Onglets correspondants aux fichiers
sur lesquels on travaille.
Raccourci permettant d’insérer des
caractères spéciaux .
Arborescence des liens et des fichiers
sources utilisés dans la page
Code source de la page .
Navigateur interne permettant un
aperçu au fur et a mesure .
b) Présentation de javascript1.1
Le JavaScript est un langage orienté objet, utile pour le développement
d'applications Internet.
Les navigateurs Netscape 3.0 ou plus et Microsoft Internet Explorer 3.0 ou
plus interprètent le JavaScript qui est transcrit directement dans les documents
HTML.
Dans une application client du navigateur, le JavaScript reconnaît et réagit
aux demandes de l'utilisateur (événements), tel qu'un clic sur le bouton de la
souris, le passage de la souris au-dessus d'un lien, etc...
15IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Par exemple, le JavaScript peut s'avérer utile pour valider certaines
informations entrées dans un formulaire, tel qu'un numéro de téléphone ou
une adresse électronique.
La page HTML possédant la fonction Javascript appropriée va
interpréter le texte rentré par l'utilisateur et l'avertir, en affichant un message
d'erreur, si les informations entrées sont invalides.
Ecriture d'une fonction JavaScript :
La conception d'une fonction JavaScript nécessite une certaine
connaissance de ce langage de programmation, il existe une syntaxe standard
pour insérer du code JavaScript dans un document HTML.
Cette insertion nécessite deux implantations :
- La déclaration des fonctions en utilisant la balise :
...
qui spécifie le commencement et la fin des déclarations de fonction
SCRIPT.
L'attribut LANGUAGE est obligatoire à moins que l'attribut SRC soit
présent. Il spécifie le type de langage du script. (Actuellement, il y a
deux types de langage, le JavaScript et le VBScript).
...
L'attribut SRC est optionnel et indique l'URL (l’adresse web relative au
fichier HTML courant) où est situé le code (script).
- Comme événement en utilisant la commande HTML appropriée :
Dans ce cas il faut insérer le code à l'intérieur d'une commande HTML,
comme un attribut.
L'événement fera appel à une fonction JavaScript lorsque la commande
HTML est activée. La syntaxe habituelle est la suivante:
Exemple:
16IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
II. Conception et réalisation
1. Objectifs généraux de conception
• L’utilisateur doit pouvoir se repérer à tout moment sur le site.
• Le site doit être adapté à la langue de l’utilisateur, il faut donc faire des
pages en :
Anglais car c’est la langue internationale.
Espagnol car la station projette de mettre en place des liens avec
l’Amérique du Sud, dont les plantes sont encore peu représentées au
jardin.
Allemand car c’est la langue de nombreux pays de l’arc Alpin
(Allemagne, Autriche, Suisse, Italie du nord).
Italien car l’Italie se situe proche du Lautaret (50 Km) et compte-
tenu de la création prochaine d’une Université Franco-Italienne à
Grenoble.
• La page d’accueil doit être accessible de toutes les pages du site.
• La navigation doit être standardisée au sein du site (par exemple un menu
récurrent).
• L’utilisateur doit à tout moment savoir où il en est de sa visite du jardin.
• L’utilisateur doit pouvoir accéder directement aux pages concernant les
événements phares, notamment le programme du centenaire du jardin.
• Le site doit être évolutif pour que les informaticiens qui seront chargés de
sa mise à jour puissent facilement faire des modifications.
17IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
2. Structure du site
La structure « physique » du site c’est à dire l’arborescence des
répertoires doit être choisie en fonction des nécessités définies lors de l’étape
d’analyse.
En effet le site devant être évolutif, il faut donc pouvoir facilement
situer une page en fonction de son contenu. Pour cela, nous avons choisi de
placer les pages dans des répertoires, chacun d’eux représentant un fragment
du site.
Chaque partie du site est en fait une page logique, c’est à dire un
groupement de pages traitant du même thème.
Les différentes parties du site sont définies en fonction des liens
présents à la racine :
a) Présentation de la racine du site
histoire accueil recherche
infos-pratiques environnement
visite actualités contacts
: page logique : lien logique
D’après ce schéma, le site comporte 7 grandes parties : histoire, infos-
pratiques, visite, actualités, contacts, environnement et recherche.
18IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
b) Arborescence des répertoires
L’arborescence des répertoires est en fait la retranscription directe de nos
choix de conception
¾ Les grandes parties
Nous en déduisons donc que la
racine du site présente un dossier
pour chaque grande partie. D’où
l’arborescence ci-contre :
¾ Les images
On peut noter qu’un répertoire
Images est présent à la racine du site.
Ce dossier nous permet de classer les
images utilisées par la page d’accueil
(photos, logos…).
Nous avons opté pour une
généralisation de cette structure pour
qu’à tout endroit du site un tel
répertoire soit présent. Ainsi toute
image d’une page est placée dans le
chemin relatif à la page courante :
« Images/nom_image.jpg »
De ce fait la structure est la
suivante : chaque répertoire à son
propre sous-répertoire « Images ».
19IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
¾ Cas particulier : la visite
Pour la partie concernant la visite c’est un peu
différent car elle comporte une beaucoup plus
grande quantité d’images que de pages
HTML.
Les images de la visite sont classées en
plusieurs catégories :
- Zones géographiques (provenance
des plantes)
- Monuments et infrastructures
- Points de vues généraux
Nous avons donc choisi de construire l’arbre
de la visite de la manière décrite ci-contre,
c’est à dire un dossier pour les points de vues,
un dossier pour chaque zone géographique ou
de construction, et un dossier « Images » pour
les images utilisées dans toutes les pages de la
visite (images utilisées pour la navigation au
sein de cette partie).
Une fois la structure définie, il faut s’intéresser à la manière de se
déplacer à l’intérieur du site.
En effet la conception de la navigation est très importante car elle
détermine la facilité d’utilisation du site.
3. Navigation au sein du site
La navigation au sein du site est en fait très variable et n’est pas traitée
de la même manière selon la partie du site que l’on est en train de visiter.
20IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
En effet, les diverses branches de l’arborescence ne sont pas destinées
aux mêmes utilisateurs (par exemple la visite est prévue pour le grand public
alors que l’index seminum s’adresse uniquement à des spécialistes).
De ce fait, on peut distinguer trois niveaux de navigation dont le
premier est la navigation globale qui permet à l’utilisateur de changer de
section principale du site (branches émanant de la racine) et qui est commune
à toutes pages d’une section du site.
Le second est la navigation parallèle : elle sert à naviguer entre les
sous-sections d’une section (par exemple la navigation au sein de la visite du
jardin).
Enfin vient la navigation locale pour se déplacer à l’intérieur d’une page.
a) Navigation globale du site
¾ Conception :
Pour pouvoir aisément changer de partie, lors de l’exploration du site,
nous avons mis en place un menu général récurrent qui est présent dans toutes
les pages du site (sauf la page d'accueil) sous la forme d’un cadre en haut de
la page :
info-pratiques menu général environnement
histoire actualités
visite recherche contacts
: cadre présent sur chaque page
P : page par défaut de la partie P
: lien hypertexte
21IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
On retrouvera donc dans le menu les 7 liens principaux ainsi qu’un
retour à l’accueil.
Pour pouvoir se repérer (pour savoir dans quelle section on se trouve) le
lien correspondant à la partie que l’on visite sera clignotant.
De plus l’apparence de ce menu devra rappeler la racine du site : c’est
pourquoi nous avons choisi de lui appliquer le même fond que celui de la
page d’accueil.
Voilà donc l’aspect du menu :
¾ réalisation :
Les conséquences de telles spécifications sont importantes au niveau de
la programmation. En effet chaque grande partie du site devra avoir son
propre menu (c’est à dire son propre fichier menu.html) pour permettre le
clignotement du lien lui correspondant.
Le clignotement d’une portion de texte se fait en plaçant cette portion
de texte entre les balises et .
Pour faire un lien hypertexte on place le texte (ou l’image) qui va servir
de lien entre les balises et
Donc le code d’un lien clignotant du menu sera par exemple :
visite
Le mode « _top » permet d’afficher la nouvelle page en détruisant tous les
cadres présents.
De plus toutes les pages du site doivent être définies par un fichier
HTML mettant en place les cadres de la page. Pour cela, on remplace le corps
du fichier (partie du fichier HTML définie par les balises et )
par la définition des cadres :
22IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Les cadres sont configurés selon le sens dans lequel il partage la page :
ROWS=« 30,* « » signifie que la page est partagée à l’horizontale, que la
partie du haut a une taille de 30 pixels et le second cadre occupe le reste de la
page (on peut aussi spécifier la taille en pourcentage de la page).
Ensuite il faut affecter à chaque cadre un nom permettant de l’identifier
comme NAME=« menu » et un fichier HTML qui sera le contenu du cadre :
SRC=« menu.html » .
b) Navigation parallèle
La navigation globale a permis de dégager 7 sections. Nous allons donc
décrire les relations internes entre les différentes pages d’une partie.
Contacts, recherche et environnement ne sont pas encore définis du fait que
nous n’avons pas encore suffisamment d’informations quant à la nature de
leurs contenus.
ª Les infos-pratiques et l’actualité :
Les infos-pratiques et l’actualité ne représentent qu’une seule page, il n’y a
donc pas de navigation parallèle pour ces parties.
ª L’histoire :
¾ Conception :
Pour la partie histoire on dispose de six documents distincts ; il y aura donc
six liens vers ces documents :
historique du menu de notice
jardin l’histoire biographique
discours texte de
Mirmande Gignoux
histoire du Labels
laboratoire
23IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
¾ Réalisation :
Pour réaliser le menu de la partie histoire on procède de la même
manière que pour le menu général, c’est à dire que l’on définit un cadre
supplémentaire permettant la navigation entre ces documents. Ce menu
s’ajoute à la page de définition des cadres pour cette partie.
Il suffit pour cela, d’imbriquer les blocks FRAMESET pour partager le cadre
qui nous intéresse :
ª La visite :
La navigation de la visite est la partie de notre travail la plus complexe.
C’est la partie qui nous a pris le plus de temps tant en prototypage qu’en
recherche d’informations sur la programmation en javascript.
¾ Conception :
En effet dans un souci de réalisme nous voulions permettre aux
internautes d’être libre de visiter le jardin comme bon leur semble.
C’est à dire de pouvoir suivre la visite guidée à l’instar de ce qui se
passe réellement ou encore d’accéder directement à n’importe quelle page de
la visite selon deux méthodes :
• L’une plutôt ludique consistant à cliquer sur une zone d’une petite
carte du jardin pour la visiter.
• L’autre plus systématique permettant de choisir une étape de la
visite guidée dans un menu déroulant.
24IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
On en déduit le graphe de navigation suivant :
Carte du jardin ou
Page 1 menu déroulant Page n
… …
Page i-1 Page i Page i+1
Précédent Suivant
i est le numéro de la page courante et n celui de la dernière.
: moyen de navigation interne aux pages de la visite
: page de la visite
: lien
Remarque : la visite du jardin peut se faire de façon cyclique, il faut donc
fixer dans la visite la page n comme la précédente de la page 1, et la page 1
comme la suivante de la page n.
Ce graphe présente la particularité d’être symétrique et transitif, ceci montre
bien que de l’une de ces pages on puisse aller directement à n’importe quelle
autre page de la visite.
25IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
La colonne de navigation (ci-contre) présente la
carte du jardin qui est l’image cliquable, le menu
déroulant permettant de choisir une étape de la
visite et les flèches précédent et suivant qui serve
à suivre la visite guidée.
On voit aussi une petite planisphère où figurent
des points de couleurs qui n’est pas un moyen de
navigation mais qui figure ici dans un but
informatif, les couleurs des points rappellent
celles des zones de la carte et permettent donc de
connaître les origines géographiques des plantes
de ces rocailles.
Cependant cette image est provisoire car trop peu
explicite, à terme elle deviendra dynamique et ne
présentera que l’origine de la zone que l’on visite.
¾ Réalisation :
 Structure de donnée utilisée :
Pour effectuer ces trois modes de visite nous avons choisi d’utiliser un tableau
d’URL et une variable entière position, qui nous permettra de nous situer
dans la visite.
- tableau d’URL :
il faut donc définir celui-ci grâce à la fonction javascript CreerArray() :
function CreerArray()
{
this.length = CreerArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = CreerArray.arguments[i];
}
Cette fonction va donc placer dans le tableau toutes les URL dont on a
besoin pour la visite, et ce dans l’ordre normal de visite tel qu’il est proposé
au jardin.
26IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Le premier élément du tableau étant la page par défaut explicitant les
différentes façons de naviguer au sein de la visite.
Le tableau doit être valable pour toutes les méthodes de navigation et
surtout dès que la colonne de navigation est visible de l’utilisateur, c’est pour
cela que sa déclaration doit être incluse dès le chargement du fichier dans la
balise pour cela on utilise l’événement javascript onLoad qui permet
d’appeler la fonction de création du tableau au chargement du fichier
colonne.html (c’est le fichier source de la colonne de navigation au sein de la
visite ).
De plus il faut impérativement tester la version du navigateur grâce à la
fonction : VersionNavigateur() pour savoir si le javascript est supporté,
dans le cas contraire on enverra l’internaute vers une version de la visite sans
javascript (voir extension du site).
- variable position :
La variable position est un entier destiné à repérer la position de
l’utilisateur dans la visite par exemple : si position vaut ‘ i ’ alors on est à
la ième étape de la visite.
 Programmation de la navigation :
27IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
- Le menu déroulant d’URL :
Le menu déroulant d’URL est une fonctionnalité
indirecte du langage HTML, en effet c’est un formulaire
auquel on a ajouté des fonctionnalités javascript il se déclare
de la manière suivante :
-Zones-
Etats
unis
Cairn de
Scott
………………
point de
vue(4)
Alpes
chaque entité utilisée ici, c’est à dire un formulaire(
) et un menu déroulant ( ), à
un nom permettant de l’identifier dans des fonctions
javascript.
Le contenu des balises du menu déroulant est une liste
d’options (une liste de destination possible) :
Japon
l’attribut value est la valeur de l’option, donc dans notre cas
l’URL du fichier correspondant à l’étape en question.
Le texte à droite de la balise option est le texte qui sera affiché dans le menu.
A chaque fois que l’utilisateur changera la sélection dans ce menu
(événement onChange), on mettra à jour la variable position et on changera le
fichier associé au corps du document (changement d’étape dans la visite).
Le code javascript pour effectuer une telle opération est le suivant :
onChange=
"if (form.liste1.selectedIndex != 0)
{parent.corps.location =
form.liste1.options[form.liste1.selectedIndex].value;
position=form.liste1.selectedIndex;}
else alert('Veuillez faire un choix au menu.')">
28IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Dans le cas où l’internaute clique sur le texte par défaut (-zones-) on
affichera une boite de messages lui demandant de faire un choix :
- la visite guidée (navigation grâce aux flèches précédente et suivante) :
Lorsque l’internaute va cliquer sur une flèche pour changer d’étape de la
visite le fichier associé au corps de la page va changer, il faut donc
incrémenter (respectivement decrémenter) la position courante dans le tableau
par la fonction incremente (respectivement decremente) :
incremente(index_fichier_courant)
(respectivement decremente(index_fichier_courant)).
Pour incrémenter :
Il faut que cette fonction teste si le fichier courant est le dernier élément du
tableau et dans ce cas le fichier à afficher sera associé à la seconde URL du
tableau (variable position mise à 1).
function incremente(les_liens)
{
if (positionIUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
function decremente(les_liens)
{
if (position>1) position--;
else position=les_liens.length-1;
}
Il faut ensuite changer le fichier du cadre correspondant au corps du
document (le nom du cadre a été défini dans le FRAMESET et son nom est
« corps ») en affectant au cadre l’URL désirée par l’appel suivant :
parent.corps.location=liens[position+1]
L’appel de ces fonctions se fera à l’intérieur de la balise par l’événement
« onclick », qui signifie que si l’on clic sur le lien (ici une image), la page
suivante (ou précédente) va être affichée dans le corps du document.
- La carte cliquable (image MAP) :
Lorsque l’internaute va utiliser la carte pour naviguer, il va cliquer sur une
zone de l’image. Au moment de son clique on devra donc mettre à jour
l’élément sélectionné dans le menu déroulant d’URL et la variable position :
onclick="zones.liste1.selectedIndex=13;position=13"
Une image MAP se code comme suit :
Aussi il faut définir les zones cliquables, pour cela il faut insérer les
déclarations de zones entre les balises et .
30IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Il y a trois possibilités de formes :
- zone polygonale :
dans ce cas les coordonnées (attribut : coords) sont définies par :
"x1, y1, x2 ,y2, …. , x(n-1), y(n-1), x(n), y(n)"
ou x et y sont les coordonnées en pixels des points du polygone.
l’attribut href défini le fichier cible et target le cadre visé
- zone circulaire :
Pour ce type de zone, le cercle est défini par trois entiers : les deux premiers
sont les coordonnées en pixels du centre et le troisième est le rayon (en pixels)
- zone rectangulaire :
Dans ce cas (que nous n’avons pas utilisé) l’attribut coords représente les
coordonnées du coin haut gauche et du coin bas droit du rectangle.
c) Navigation locale
La navigation locale concerne trois pages de notre site : historique.html
(qui présente l’historique du jardin), actualite.html (qui présente les actualités
de la station) et les pages provisoires de résumé en version étrangère. Il s’agit
de textes longs, nécessitant la mise en place d’un sommaire pour favoriser la
navigation au sein de ces pages.
31IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
ª L’actualité de la station
¾ Conception
La page d’actualité est composé de trois sous-parties donc il y aura trois
liens dans le sommaire de cette page.
sommaire de
l’actualité
Actualité Colloque
médiatique 2000
Centenaire du
jardin
: parties de la page actualite.html
: sommaire accessible de toute la page
¾ Réalisation
L’utilisation d’un sommaire nécessite la création d’un fichier de cadres
supplémentaires définissant deux cadres, l’un pour le menu et l’autre pour le
corps du document.
Il est nécessaire de définir des marqueurs internes dans le fichier
actualite.html par l’intermédiaire de la balise avec l’attribut name.
Par exemple :
L’implémentation des liens dans le sommaire se fera alors pour cet exemple :
ª L’historique du jardin
¾ Conception
32IUT2 Grenoble – Département Informatique Deuxième année – Juin 1999
Le sommaire de l'historique va présenter les différentes parties de ce
texte (premier jardin, transfert, période sombre, le jardin actuel) et un retour
au début de la page.
Retour en le
haut de sommaire de jardin
page l'historique actuel
premier transfert période
jardin sombre
: parties de la page actualite.html
: sommaire accessible de toute la page
La programmation de la page historique du jardin est similaire à celle
de la partie actualité avec l'utilisation d'un nouveau cadre et de l'attribut name
de la balise .
ª Les versions étrangères provisoires
¾ Conception
Le sommaire des versions étrangères présente les différentes parties du
résumé (le jardin botanique, le laboratoire, les collaborations et les personnes
de la station à contacter) et un retour en haut de la page.
Quelle que soit la langue, le texte a la même structure. En effet, pour chaque
version étrangère, il s'agit d'une traduction d'un résumé en français.
retour en sommaire de
chaque version les contacts
haut de la
page étrangère
le jardin le les collaborations
botanique laboratoire
: parties de la page actualite.html
: sommaire accessible de toute la page 33Vous pouvez aussi lire
