Accueil du site La classe numérique

Accueil Réalisations Année scolaire 2004-2005 L’imagier interactif Construire l’imagier

Construire l’imagier Didactitiel

La construction de l’imagier s’opère un peu comme une matriochka [1], à la différence qu’ici, une poupée peut en contenir plusieurs de même taille.

Terminologie

Chaque élément de l’imagier est nommé « fiche ». Chacune d’elle représente une page dans la partie publique du site.
Une fiche est constituée de plusieurs parties :
- Son niveau qui défini sa nature dans l’organisation de l’imagier :

  • Univers,
  • Thème,
  • Sous thème,
  • Objet.

- Son parent qui cible la fiche qui l’appelle (ou la poupée dans laquelle elle est contenue)

  • Ce parent est le nom de la fiche. Ce nom est un formatage du mot affiché sur le site. Par exemple :
  • mot : « la maison » / nom : « la_maison »
  • mot : « l’étagère » / nom : « l-etagere »

Hiérarchie

Les fiches peuvent être liées entre elles comme suit :

- Un univers peut être parent :

  • d’un thème
  • d’un objet

- Un thème peut être parent :

  • d’un sous thème
  • d’un objet

- Un sous thème peut être parent :

  • d’un objet

Construire des liens

Avant toute chose, toutes les fiches doivent être créées et avoir un parent. Il faut donc toujours commencer lors de la création des fiches par la plus « contenante », à savoir :

  1. l’univers
  2. puis les thèmes
  3. puis les sous-thèmes
  4. et enfin les objets

Pour lier ces fiches entre elles, il suffit d’appliquer un mappage [2] sur l’image qui représente un parent et y lier ses enfants.

Pour ce faire, il est nécessaire d’utiliser un éditeur de page web afin de générer le code HTML du mappage. Ce code sera ensuite inséré dans l’imagier via la page de modification de la fiche.

Je n’entrerai pas ici dans les détails de la création d’une image map mais seulement dans la récupération des liens pour les fiches et dans l’insertion de ce code dans l’imagier.
Je vous conseille tout de même d’utiliser la page web jointe à cet article (fichier Zip) et qui sert de modèle pour le code HTML.

En créant le mappage sur l’image dans un éditeur de page web, vous aurez à spécifier :
- un lien
- un commentaire alternatif (ou titre)

Pour récupérer le lien, allez dans la partie « privée » de l’imagier, et cliquez sur le lien « lien » :) Copiez-le (click droit sur le lien qui apparaît) : Puis collez-le dans la partie réservée à cet effet dans l’editeur pour la zone définie sur l’image.

Une fois le mappage terminé, copiez la partie code HTML de l’image et son mappage, cela doit ressembler à ceci :


<img src="media/images/maison.gif" width="322" height="390" usemap="#Map" alt="nom de l'image" />
 <map name="Map">
   <area shape="RECT" coords="27,168,135,231" href="fiche.php?nom=cuisine" alt="Cuisine" />
   <area shape="RECT" coords="123,44,217,129" href="fiche.php?nom=salon" alt="Salon" />
 </map>

Pour insérer le code HTML du mappage dans l’imagier, toujours dans la partie privée, cliquez sur « modifier » Collez ensuite le code HTML, précédement copié, dans la zone de texte « 2. Code HTML de l’image mappée : » et enregistrez la modification.


[1] Poupée russe

[2] C’est à dire créer sur cette image plusieurs zones auxquelles on affectera des liens hypertextes. Il y aura donc pour une seule image, plusieurs liens.


Documents joints :


Modèle de mappage [Zip / 967 octets]
Ce zip contient un répertoire « imagier » qui représente l’arborescence du site. Il contient le fichier « modele.html » ainsi qu’un sous-répertoire « media » contenant lui-même un sous-sous-répertoire « images » dans lequel vous placerez les images pour créer le mappage.
Présentation générale de l’imagier [OpenOffice Impress / 1 Mo]
Présentation OpenOffice
Outils pour écrire dans d’autres graphies que le type latin [Zip / 28.5 ko]
Ce kit contient :
- Une police de caractères punjabi
- Un lien vers un site de leçons de punjabi (contôle de vocabulaire)
- Un lien vers Lexilogos qui permettra de saisir des mots dans plusieurs langues
- Un lien vers un site permettant d’écrire en tamoul
- Un lien vers un site pour installer les caractères chinois sur son ordinateur (PC)
Par Stéphanie DE NADAï
Le 21 mars 2005
Répondre à cet article

Version imprimable

[Retour] [Privé]


[ Contact ] [ Plan du site ] [ SPIP ] [ Privé ] [ Carrefour numérique ] [ Haut de page ]
Site optimisé pour les navigateurs Internet Explorer 5.5 et Mozilla FireFox 1.0 minimum
Écran 800 x 600