travaux caroline . staf15 . atelier . march 1998
Staf15
Hyperdocument et Systèmes d'aide à
l'apprentissage
P.Mendelsohn
. Atelier de création d'un document hypertexte .
- regardez d'abord ce que vous saurez
bientôt faire ...
- présentation de l'activité
- méthode de création d'un document hypertexte
- scénario proposé
- imaginer un espace de travail
- définir le sommaire
- réorganiser le texte initial
- créer l'espace graphique
- affiner la structure générale du document
final hypertexte
- créer les aides
- sources
- votre
fiche-utilisateur
- extension : transformation de
l'hyperdocument en document .html avec Wysi.Web
- Regardez d'abord ce que vous saurez
bientôt faire ...
Voici quelques exemples de rubriques-type d'un hyperdocument :
 |
 |
une page graphique un type de page d'accueil |
une table des matière page d'accueil ou pas |
 |
une rubrique orientée texte |
retour au top
- Présentation de l'activité
- objectifs et finalités
- l'activité :
Apprendre à concevoir et réaliser un document hypertexte (hyperdocument)
. à partir de n'importe quel document linéaire informatique
(ou papier), comportant un ou plusieurs chapitres,
. à l'aide de la méthode, des outils et du modèle
d'hyperdocument proposés.
- l'atelier :
. n'est pas une aide à l'utilisation d'un logiciel hypertexte
(de type Wysi-Help),
. propose l'utilisation de logiciels à priori
maîtrisés ou en tout cas compris.
- l'objectif :
Concevoir et réaliser des documents hypertextes :
. qui remplissent pleinement leur rôle de source d'information annexe
ou autonome, d'outils d'apprentissage ou de distraction ...
. agréables, ergonomiques, faciles à utiliser : où on
navigue naturellement, où on aime lire, apprendre, circuler
et surtout revenir.
- outils proposés :
- WYSI-Help (hypertexte)
- Word (texte)
- Powerpoint (dessin, graphique)
- à qui s'adresse cette activité :
- professeurs, assistants, étudiants (organisation et présentation de
cours, de ressources, ...)
- extensions : articles de journaux, classements et archivages de
bibliothèques, bornes d'orientation et de présentation de musées,
documentation interne d'entreprise, documents plurilingues ....
Connaissances requises :
Cette activité s'adresse à des utilisateurs qui comprennent
déà la logique de circulation au sein d'un document
multimédia (web, CDRom, ...).
L'atelier s'adresse particulièrement à des utilisateurs qui
débutent dans la création d'hyperdocuments.
Pour des utilisateurs plus confirmés, cet atelier peut-être
considéreacute; comme un guide ou memo du scénario de
création d'un hyperdocument.
retour au top
- une méthode de création d'un document hypertexte
3.1 scénario proposé
Cette méthode guide le concepteur, étape par étape,
depuis le document linéaire (papier, informatique ...) jusqu'au
document hypertexte final.
3.2 . imaginer un espace de "travail"
L'espace de travail correspond à l'espace de navigation.
Pour l'ensemble du document, puis rubrique par rubrique, imaginer
l'ensemble des éléments (texte, illustrations, graphiques,
couleurs) qui constitueront l'hyperdocument.
Ce choix dépend notamment du public-cible, du type de document initial,
de la matière traité ...
Envisager différentes formes possibles d'interprétation du texte initial en
hyperdocument.
Selon le type de texte initial, certaines formes d'hyperdocuments sont plus
adaptées :
. approche hypertexte plutôt textuelle,
. approche hypertexte plutôt visuelle : illustrée et "graphique",
. approche "hybride" : texte et "graphique".
Définir des guides et repères, évidents voire
automatiques, qui permettront à l'utilisateur final :
. un gain de temps lors de la navigation,
. de s'orienter en tout temps et de ne pas se perdre ...
(icônes de navigation ou mentions facilement accessibles de type home, page up, index,
exercices ....)
Profiter d'une approche multidimensionnelle de l'information :
. dans un hyperdocument, la navigation, la lecture, l'apprentissage et la
recherche d'information ne se font plus selon un mode linéaire.
L'hyperdocument offre une richesse et une multiplicité de voies
d'accès et de points de vue mais aussi complexité du réseau
hypertexte)
. utiliser les liens de façon optimale : limiter les cascades de liens
(popup, hyperliens) pour ne pas égarer l'utilisateur !
. concevoir un document hypertexte comme une source d'information autonome
(pas seulement un support facultatif d'information).
. imaginer une organisation de l'espace de lecture agréable et
ergonomique sur un support électronique : rendre le texte lisible,
attrayant et concis, intégrer la couleur, la mobilité de
l'information, l'image, les schémas, le son ...
retour au top
3.3 . définir le sommaire
Le sommaire représente l'arborescence de l'hyperdocument.
Il donne une approche chronologique et est un guide supplémentaire
de navigation au sein du document hypertexte.
3.4 . réorganiser le texte initial
Il est important que le texte initial (de type word) soit structuré
de façon quasi-optimale avant d'être transformé en hypertexte.
Un logiciel de traitement de texte, comme son nom l'indique, offre
la flexibilité, la rapidité et le choix d'options optimal pour
modifier et restructurer un document-texte.
Les modifications ultérieures sous Wysi-Help seront nécessaires,
mais elles sont plus lentes.
1 . objectif : coordonner les éléments textuels du scénario
L'organisation du texte doit permettre de déterminer :
. la table des matières,
. les rubriques,
. les liens entre rubriques,
. la séquence de feuilletage (succession chronologique des rubriques),
- les mots-clé, les hyperliens...
Cette structure doit aussi permettre d'affiner l'organisation :
- de la page d'accueil (table des matières, graphiques, illustrations)
- des rubriques (textes, illustrations)
Voilà donc quelques propositions à appliquer au texte initial
(word):
2 . installer le texte initial dans une table (word)
Insérer le texte dans une table (largeur : 15) de :
. deux colonnes,
. et "n" lignes"
(à définir progressivement).
Organisation du texte :
. colonne 1 : titres
. colonne 2 : texte |
 |
retour au top
3 . définir une feuille de styles
Cette feuille de style est importante :
. c'est elle qui déterminera votre table des matières
. et qui précisera la structure de votre document hypertexte.
Vous devez donc déterminer plusieurs styles : (menu Format-styles)
. le texte (colonne 1): normal
. les titres (colonne 2): Heading1, Heading2, Heading3 ...
(par exemple, pour le titre 1 : Heading1, arial, 12pt, dkred, bold....)
Les Titres (Heading)
Les titres définis sous Word correspondront, dans l'hyperdocument,
à :
. des titres de paragraphe dans l'hyperdocument.
Ils ne seront donc pas sélectionnés comme titres de
rubriques lors de la compilation et de la constitution de la table des
matières.
Ils apparaîtront donc comme titres de paragraphes au sein-même
des rubriques.
. ou des titres de rubrique
Ils seront donc sélectionnés comme titres de rubriques lors de
la compilation. Ils constitueront donc les titres de la table des
matières.
Vous pouvez par exemple déterminer 5 niveaux de titres, de Heading1 à
Heading5 sous Word.
Vous choisirez au moment de la compilation (voir hypertexte),
les niveaux de titres qui apparaîtront dans la table des matières
(par exemple heading 1, 2, 3).
Les autres niveaux de titres n'apparaîtront pas dans la table des
matière mais resteront intégrés uniquement au texte,
comme titres de paragraphe.
retour au top
4 . les titres de rubriques
Les titres de rubriques de l'hyperdocument doivent être définis
précisément :
. choisir des noms différents pour chaque titre de rubrique.
Eviter les redondances.
(si le titre "exemple" apparaît dans plusieurs chapitres, il est
conseillé de donner des noms différents à :
exemple1, exemple2 ...)
. utiliser des minuscules, mais ni accents, ni caractères
particuliers (pas reconnu dans les titres de rubrique)..
Pour reconnaître plus facilement le type de rubrique
(titre, définition ...), un préfixe commun et reconnaissable
peut-être déterminé pour chaque catégorie de
rubrique.
Par exemple :
. tab pour les rubriques de la table des matière (tabintro, tabsynthese...),
. tit pour les rubriques de titres (tit1methode, tab2methode...),
. def pour les rubriques de définition (defindex, defhyperdocument...), ...
Ces noms de rubriques doivent être compréhensibles car
ils apparaissent dans le processus de navigation.
Dans la table des matières, vous pouvez modifier les titres et
enlever le préfixe tab par exemple pour retrouver des titres
cohérents.
5 . l'organisation interne du texte
La lecture et la navigation dans l'hyperdocument ne sont plus
linéaires. Certaines modifications sont donc nécessaires :
. regrouper certains paragraphes pour éviter les redondances
et favoriser une cohérence de navigation,
. définir les mots-clé sur lesquels seront établis
les liens automatiques de votre documents hypertexte,
. créer un paragraphe consacré aux définitions
de mots-clé. Ces définitions seront utiles pour créer un
éventuel glossaire dans l'hyperdocument.
6 . format d'enregistrement
Enregistrez le texte ainsi restructuré sous Word, sous 2 formats :
- .doc
- .rtf (Rich Text Format)
retour au top
3.5 . créer un espace graphique
Imaginer l'espace de lecture, d'apprentissage attrayant grâce à
l'intégration d'éléments graphiques, d'illustrations...
Vous pouvez jeter un coup d'oeil
- l'espace d'accueil
C'est le point d'arrivée du visiteur dans le document hypertexte.
Il peut se présenter sous forme d'une table des matières
ou d'un espace graphique personnalisé.
. table des matières
Ce type de page d'accueil est une table des matières traditionnelle.
Ses titres et sous-titres sont les liens directs vers les rubriques
du documents.
Cette table des matières se constitue automatiquement au moment de
la compilation en hyperdocument, à partir des titres(Headings) pré-sélectionnés
dans le documents initial.
. un espace graphique (de type powerpoint)
Cette première page est très visuelle. Elle intègre peu
de texte et laisse une place prépondérante à l'image
(construite ou issue d'une banque d'images). On peut déjà y
intégrer des liens vers les rubriques du document.
retour au top
- l'espace de lecture
Il est constitué par les rubriques.
Ce sont les pages vers lesquelles pointent les liens de la page d'accueil
(et/ou de la page des matières).
Elles intègrent la partie texte du document initial et les
illustrations.
- les él&eacte;ments graphiques constitutifs de ces espaces
les illustrations et graphiques
. créer une banque d'images nécessaires à
l'illustration et à la compréhension de votre hyperdocument :
icônes, illustrations, graphiques.
. utiliser un logiciel de dessin (ici Powerpoint), de banques d'images ...
les icônes
. définissez une série d'icônes.
Ces icônes, intégrées au bandeau fixe de votre
hyperdocument, constitueront la signalétique de l'hyperdocument.
Elles seront les points de repère indispensables à une navigation
facile et en eau claire. (ex. retour à la page d'accueil, accès à une
autre rubrique ....)
quelques exemples d'icônes
- les formats d'enregistrement
Les images sont enregistrées en ppt.
Sous WYSI-Help, le format deviendra shg.
Seul le format 16 couleurs est reconnu par WYSI-Help pour les hypergraphiques.
retour au top
3.6 . le document hypertexte
Importer le texte initial (word) sous Wysi-Help
. Lancer Wysi-Help
. Ouvrir le texte .rtf
. Déterminer les titres que vous voulez intégrer dans la
table des matières.
. la navigation
Définir le réseau hypertexte, c'est-à-dire les liens
entre les différentes rubriques et au sein des rubriques des
différents fichiers.
C'est dans ce réseau que va naviguer l'utilisateur.
Il existe plusieurs types de liens applicables au texte ou à l'image :
(popup, hypertexte, hyperlien...).
. le bandeau (fixe)
exemple de bandeau

Dans chaque rubrique (page), le bandeau représente l'un des guides
principaux de navigation.
Créez un modèle de bandeau fixe, dont vous pouvez
déterminer la couleur (différente de celle du fond)
1 . créer une rubrique-modèle appelée par exemple
bandeau0 :
vous allez y créer le bandeau-modàle et éventuellement y
intégrer des formats de texte que vous voulez voir apparaître
dans d'autres rubriques.
2 . Définir le bandeau fixe :
Déterminer la taille du bandeau fixe (=1) (Menu Insérer-Bandeau fixe),
la couleur du bandeau (Edition de projet, Main, modifier).
3 . Intégrez les icônes (powerpoint) :
positionnez le curseur dans le bandeau puis procédez aux saisies
successives d'écran (Menu Insérez-photo d'écran)
4 . Définissez le format de ces icônes (Menu Format-Image),
puis transformez-les en hypergraphiques (sélection de l'icône puis
Menu Lien-hypergraphique)
Vous pouvez appliquer ce modèle de rubrique à plusieurs rubriques
(Menu Inserez-modèle)
Ce modàle reste modifiable au sein de chaque rubrique en fonction des
spécificités de chacune.
L'intérêt d'un tel modèle est pour l'utilisateur de
retrouver un guide de navigation reconnaissable dans chaque rubrique.
. les images
Les images importées dans le document (Menu Insérer-saisie
d'écran) doivent :
- être définies dans Menu-Format-Image comme hypergraphiques (.shg)
- être enregistrée sous un nom infé ou égal à 8 lettres
- les images hypergraphiques ne sont lues qu'en 16 couleurs (les couleurs
sortant de ce cadre seront donc modifiées si l'image porte un
hyperlien)
. le texte
La table des matières que vous avez déterminée est la base
de votre réseau hypertexte.
Chaque titre de la table des matières correspond à une rubrique
du même nom. Le texte lié à chaque rubrique (sous word)
apparaît automatiquement, dans une structure de tableau telle que celle
créée sous word.
Il est encore possible et nécessaire d'apporter des modifications
à la structure depuis WYSI-Help.
. affiner le format du texte importé.
. créer des rubriques internes : rubriques de définitions
(pointeur popup de certains mots-clé ...)
Transférer éventuellement certains paragraphes d'une rubrique à
l'autre.
Plus le texte de base est juste et moins ces affinages seront fastidieux.
(Le travail de mise en page sous WYSI-Help est lent et peu flexible)
. affiner le choix des mots-clé.
3.7. Les aides
Créer une aide à la navigation au sein de l'hyperdocument et
définir la liberté de guidage.
L'aide permet à l'utilisateur de comprendre et repérer facilement les
types de liens et leurs fonctionnement.
Par exemple :
. les liens hypertextes : vert
. les popup : bleu
. les hyperliens (entre fichiers) : rouge
. les hypergraphiques ne portent pas de liens visibles; mais en balayant
l'espace graphique ou illustré, les zones sensibles sont
signalées par une main.
Dans le bandeau, les icônes ne portent pas de liens visibles mais sont
des zones sensibles : ce sont les éléments de
signalétique principaux de l'hyperdocument.
Le degré de précision de cette aide dépend en particulier
du public visé.
D'autres aides directement liées à la matière enseignée
peuvent être utiles,
. selon le degré de difficulté de la matière enseignée,
. et le public et sa connaissance de la matière.
retour au top
- sources
- Choi, J., Hannafin, M. (1995), Situated Cognition and Learning
Environments: Roles, Structures, and Implications for Design.
ETR&D, vol. 43, No. 2, pp. 53-69.
- Jacobson, M.J., Spiro, R.J. (1995), Hypertext Learning Environments,
Cognitive Flexibility, and Transfer of Complex Knowledgw: An Empirical
Investigation. Journal of Educational Computing Research, vol.12, no 4,
pp. 301-333.
- Jacobson, M.J., Maouri, C., Mishra, P., Kolar, C. (1995). Learning
with Hypertext Learning Environments: Theory, Design, and Research.
Journal of Educational Multimedia and Hypermedia, vol. 4, pp. 321-346.
- Shin, E.C., Schallert, D.L., Savenye, W.C. (1994). Effects of Learner
Control, Advisement, and Prior Knowledge on Young Students'Learning in a
Hypertext Environment. ETR&D, vol. 42, No. 1, pp. 33-46.
- Van Merrienboer, J.J.G., Jelsma, O., Paas, F.G.W.C. (1992). Training
for Reflective Expertise: A Four-Component Instructional Design Model
for Complex Cognitive Skills. ETR&D, vol. 40, No. 2, pp. 23-43.
retour au top
° travaux staf
° home tecfa
° promotion daisy 97/99 °
° my home
° personal news
° email me
°