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 .

  1. regardez d'abord ce que vous saurez bientôt faire ...

  2. présentation de l'activité

  3. méthode de création d'un document hypertexte
    1. scénario proposé
    2. imaginer un espace de travail
    3. définir le sommaire
    4. réorganiser le texte initial
    5. créer l'espace graphique
    6. affiner la structure générale du document final hypertexte
    7. créer les aides

  4. sources

  5. votre fiche-utilisateur

  6. extension : transformation de l'hyperdocument en document .html avec Wysi.Web


  1. 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

  2. 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

  3. 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

    1. 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

    2. 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.

    3. 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

    4. 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

  4. 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 °