Construire des images "cliquables" dans Curriculum Forge

Une version video du tutoriel est disponnible sur Youtube :)

Présenté par Benjamin Morency et Jean-François Houde.

Présentation du projet

Notre projet consiste en la création d'un tutoriel facile d'accès et complet permettant à nos collègues et même futurement à nos élèves de construire des images cliquables qu'ils pourront par la suite mettre sur leurs wikis, et même sur leurs sites internet.

La démarche, accompagnée d'images, énonce pas à pas la démarche à suivre afin de créer de telles images cliquables.

Nous avons aussi créé un petit vidéo qui, avec commentaires vocaux, permet de suivre la démarche encore plus précisément. (Ce vidéo a été fait à l'aide du logiciel de capture vidéo Camstudio, téléchargeable gratuitement sur le site web http://www.framasoft.net, où sont d'ailleurs disponibles une multitude d'autres logiciels libres pouvant répondre à vos plus nombreux besoins!)

Ainsi, commençons le tutoriel.

Pour pour profiter pleinement de toutes l'information qui suivra, il est important de vous assurer que vous utilisez les mêmes logiciels que nous. Avec d'autres logiciels, certaines variantes peuvent entrer en conflit avec le résultat final. Il est à noter qu'à l'exception du logiciel Inspiration, aucun des logiciels utilisés dans la réalisation des images cliquables n'est payant.

Logiciels recommandés:

Gimp (logiciel de retouche d'images, téléchargeable sur le site : http://www.gimp.org) Mozilla Firefox (navigateur internet, téléchargeable sur le site : http://www.mozilla-europe.org/fr/products/firefox/) Wordpad (logiciel de traitement de texte offert de base sur les ordinateurs ayant Windows) Inspiration (logicial payant, qui vous permet de créer des schémas conceptuels. Par contre, il est à noter que vous n'en aurez pas besoin si vous avez déjà une image en particulier que vous désirez rendre cliquable.)

Vous-êtes prêts? Vous avez choisi votre image? Allons-y!

Tutoriel Images cliquables

1. Tout d'abord, ouvrez Gimp, le logiciel de retouche d'image installé au préalable.

2. Une fois le logiciel Gimp ouvert, cliquez sur l'onglet Fichier de la barre de menu. Le sous-menu s'ouvre alors et, comme vous avez en premier lieu trouvé l'image que vous désiriez rendre cliquable, vous pouvez cliquer sur ouvrir pour aller la chercher.

3. Lorsque vous avez ouvert l'image que vous désirez modifier, vous avez au dessus de celle-ci un menu. Parmi les options disponibles se trouve le menu Filtres. Cliquez sur celui-ci et ensuite apparaîtra un sous-menu duquel vous devez cliquer sur Web. La seule option qui vous sera alors disponible sera alors : Image cliquable Web... Cliquez sur cette option et le plaisir commence.

4. Après avoir cliqué sur Image cliquable Web, une nouvelle fenêtre apparait. À la toute gauche de celle-ci, vous pouvez voir divers outils. Ceux-ci servent à déterminer la forme que vous voulez donner à votre zone cliquable. Par exemple, les zones rectangulaire et circulaire vous permettent de délimiter les sections cliquables par ces mêmes formes, alors que la zone polygonale vous permet de mieux suivre une forme qui n'est peut-être pas standard. (Note: Pour la zone circulaire, vous cliquez d'abord au centre de la figure et après vous agrandissez le cercle selon la grosseur désirée.

5. La délimitation d'une première forme est terminée? Vous devez maintenant assigner une adresse URL (une adresse de site Web) auquel vous voulez que le lien renvoit. Dans le cas d'une zone polygonale, vous devrez double-cliquer pour accéder à la nouvelle fenêtre. La fenêtre suivante présente ce qui vous est offert une fois la délimitation terminée. Comme j'ai choisi ici le logo de Myspace, on peut voir que l'URL qui y est rattaché est http://www.myspace.com. Faites de même pour le site auquel vous voulez renvoyer avec cette section de votre image cliquable. Une fois l'adresse URL entrée, cliquez sur Accepter puis Valider, dans cet ordre.

Maintenant, faites de même pour toutes les sections de votre image que vous désirez rendre cliquable. Vous n'avez qu'à répéter les étapes 4 et 5 de la procédure (c'est-à-dire délimiter toutes les zones et leur attribuer une adresse URL) pour les autres zones. Il est à notre que vous n'êtes pas obligés d'inscrire quoi que ce soit dans les autres zones, seulement la zone "URL à activer lorsque cette zone est cliquée" n'a qu'à être remplie.

6. Une fois la procédure faite pour toutes les zones de l'image, il est temps de sauvegarder l'image cliquable. Pour se faire, cliquez sur l'onglet Fichier du menu, et ensuite sur Enregistrer Sous.

7. Vous verrez alors apparaître une fenêtre. Vous êtes alors invités à inscrire le nom que vous désirez donner à l'image cliquable ainsi que l'emplacement où vous désirez le sauvegarder. Assurez-vous de bien vous souvenir de l'endroit où vous l'enregistrés. Pour le nom, vous devez vous assurer qu'il soit de la forme : nomdelimagecliquable.html . L'extension .html est de mise. Alors veillez à ce que votre extension soit bien en .html.

Upload new attachment "EnregistrerPart2"

Après l'avoir enregistré, vous pouvez maintenant fermer Gimp. Il est maintenant temps de faire les tests préliminaires afin de constater s'il y a eu des erreurs dans la procédure. Ainsi, ouvrez Mozilla firefox, le navigateur Web téléchargé et installé au préalable. Bien sûr, l'étape du test préliminaire est optionnelle, par contre, vous n'avez certainement pas envi de faire toutes les étapes qui suivent sans que ça fonctionne :).

Ensuite, cliquez sur l'onglet Fichier, et ensuite sur Ouvrir un fichier. Maintenant, allez chercher l'image cliquable à l'endroit où vous l'avez sauvegardé! (Vous vous en souvenez hein?). Si vous n'avez pas remarqué l'endroit où vous l'avez sauvegardé, il se peut fortement que celle-ci se trouve dans Mes Documents, Mes Images. L'image que vous devez ouvrir est celle dont l'extension est .html. Lorsque vous allez cliquer dessus, vous allez sûrement voir Firefox document ou quelque chose du genre. C'est la bonne!

Pour tester le lien, vous pouvez cliquer sur les diverses zones attitrées d'une adresse URL pour les essayer.

Maintenant, nous allons ajouter l'image cliquable au wiki!

D'abord, dirigez-vous vers les site du wiki, dans le cas présent http://www.fr.curriculumforge.org/ et connectez-vous sous votre compte. Un fois que vous êtes connectés, nous pouvons commencer!

8. Il vous faut maintenant créer une nouvelle page. Pour se faire, vous pouvez ajouter à l'adresse du wiki le nom de la page que vous voulez créer, par exemple, ici nous prendrons http://www.fr.curriculumforge.org/SchemaWeb2MorencyHoude. Les majuscules sont importantes, si vous voulez accéder à cette page, il vous faudra absolument mettre les majuscules aux mêmes endroits.

9. Lorsque vous appuyez sur Entrée ou Enter, vous arriverez à une nouvelle page vous invitant à créer une nouvelle page blanche. Faites le. Vous serez alors invités à écrire ce que vous désirez écrire sur la nouvelle page wiki. Ici, nous nous en tiendrons à une simple image. Donc, écrivez le texte suivant, où bien sûr, vous remplacerez Web2MorencyHoude par le nom de votre image en conservant l'extension .jpg.

Une fois que c'est fait, Enregistrez les modifications. Nous pouvons passer à l'étape suivante.

10. Nous vous invitons maintenant à ouvrir Wordpad, le logiciel de traitement de texte que nous vous suggérions au départ.

11. Une fois celui-ci ouvert, vous devez ouvrir l'image cliquable. Pour ce faire, cliquez sur l'onglet Fichier et ensuite Ouvrir. Choisissez l'image rendue cliquable, c'est-à-dire l'image dont l'extension est .html.

Vous verrez du langage html. Vous n'avez pas à vous poser de questions et tenter de comprendre. Vous n'avez qu'à copier le texte. Pour se faire, sélectionnez tout le texte et faites : Clique droit, copier.

Nous allons maintenant aller sur le Wiki. Retournez sur curriculumforge.

12. Créez une nouvelle page. Cette fois-ci, donnez lui un nom très significatif, ce sera la page qui contiendra votre image cliquable (l'autre ne fait que contenir l'image que vous désirez rendre cliquable). Dans notre cas, nous avons choisi http://www.fr.curriculumforge.org/Web2MorencyHoude.

13. Dans l'édition texte, écrivez le texte suivant #format raw. Ensuite, collez le texte que vous aviez copié du Wordpad. Voici ce que ça donne pour notre schéma cliquable:

Enregistrez les modifications et retournez à la première page, celle où vous avez ajouté l'image non cliquable.

14. Lorsque vous y êtes, faites clique droit sur l'image et choisissez Copier l'adresse de l'image.

Retournez maintenant à l'image cliquable et cliquez sur Éditer.

Vous devez modifier l'adresse de l'image. Vous voyez l'inscription "<img src" (source de l'image). Modifiez maintenant le lien de l'image en changeant tout ce qui est inclu à l'intérieur des guillemets par ce que vous avez copié (Copier l'adresse de l'image effectué en 14). Pour ce faire, sélectionnez tout le texte entre guillemets et faites : Clique droit, coller.

Après avoir fait cela, enregistrez les modifications!

Nous allons maintenant faire le test final!! Vous devriez maintenant voir l'image sur la page où vous vous trouvez. Si vous cliquez sur les zones de l'image auxquelles vous aviez affecté des adresses URL, vous devriez y être redirigés.

Si tout fonctionne, c'est que vous avez suivi à la lettre les étapes. Si tout jamais ça ne fonctionnait pas et que tout fonctionnait jusqu'à l'étape 10, assurez vous que vous avez bien pris les bonnes images au bon endroit!

Ceci met fin au tutoriel!

Si toutefois certaines étapes pouvaient vous sembler floues ou difficiles à comprendre, veuillez nous en faire part et nous ajusterons en conséquence.

Merci pour tous les commentaires que vous ferez!! :)

Commentaires

  • :) :)) :( ;) :\ |) X-( B)
    ;) AudreyGilbert   C'est très intéressant de monter une page pour expliquer la manière de rendre des images cliquables. Cela a dû demander beaucoup de temps, puisqu'ils vous fallait d'abord bien maîtrisé les images cliquable. Je vous trouve très brillant d'avoir su monter ce projet. Ce projet est très facile à suivre, puisque les images nous permettent de comprendre davantage ce qu'il faut faire. Bravo à votre ingéniosité!!!
    		 2008-04-23 16:24:15
    :)) IsabelleRousseau   IsabelleRousseau
    Bravo! L'idée de votre projet est intéressante et le projet est vraiment bien monté. La démarche à suivre pour réaliser votre projet est vraiment très claire grâce aux images et aux explications claires et bien détaillées. Avoir mis des commentaires vocaux pour expliquer le projet est vraiment une bonne idée. De plus, la plupart des lociels que vous utilisez sont gratuits ce qui est vraiment un plus. Même les moins bon élèves en informatique n'auront pas de difficultés à suivre. Le projet est très bien détaillé et il est très complet sur le contenu, mais il manque peut-être certains éléments. Quelles sont les consignes que vous donneriez à vos élèves pour réaliser un tel projet? Il serait aussi intéressant de mentionner en quoi cette technologie va améliorer les apprentissages et dans quel cadre pourrait s'inscrire un tel projet.  Encore bravo pour votre projet!
    		 2008-04-23 20:48:46
    :) MarieveMorasseDelisle   C'est fantastique! Ce tutorial favorisera grandement les personnnes qui sont plutôt visuelles. J'ai moi-même eu de la difficulté à rendre ma carte web cliquable seulement avec les explications à l'écrit, sans image ou son. Vous avez démontré votre grand savoir faire informatique! Le fait que vous le rendiez disponible sur youtube garanti presque à 100% une personne de réussir à rendre une image cliquable. Ce tutorial pourrait très bien servir d'exemple pour faire d'autres genre de projets auxprès d'élèves ayant une certaine facilité avec les ordinateurs, ce qui n'est vraiment pas rares de nos jours.  Ce projet donne de belles idées...
    		 2008-04-24 21:12:05
    JoanieFontaine   Wow, j'ai trouvé cela très bien expliqué et facile à suivre. Et vous pouvez me croire, si je suis capable de la faire, tout le monde le peut! C'est d'ailleurs à cause de l'aspect visuel que le tutoriel m'a semblé si facile, mais en plus, il est très bien décrit ce que l'on doit faire!! Ceci convient donc très bien tant aux visuels qu'aux auditifs! Il manque peut-être l'aspect éduatif de votre projet en ce sens de quels sont vos buts et en quoi cela améliorera les apprentissages des élèves.. Sinon, je trouve votre projet super!
    		 2008-04-26 14:32:47
    :) DavidTrepanier   Félicitation pour votre projet! J'aime beaucoup votre de faire un tutoriel qui a la possibilité d'être en texte ou en vidéo. De plus, l'explication pour rendre les images cliquables nous donne un bagage additionnel pour créer du matériel didactique pour nos étudiants. Je trouve que votre tutoriel texte est bien structuré et très facile à suivre. Le fait d'utiliser que des logiciels libres ouvre l'accès de vos tutoriels à quiconque veut les utiliser. Bravo encore! Très bon projet!
    		 2008-04-27 21:15:59
    B) ReneeFountain   SUPERBE! Quel beau cadeau que vous offrez aux autres qui vous suivront dans le cours! Merci MILLE fois! une actualisation Web 2.0 par excellence!
    Vous avez incarné le "constructivisme communal" ]Nous nous réclamons du constructivisme communautaire, où étudiants et enseignants s'engagent au-delà d'une simple élaboration de leurs propres connaissances pour participer activement à la création de connaissances qui serviront à d'autres étudiants. Selon ce cadre théorique, les étudiants ne font que suivre le cours ; par leur travail, ils contribueront à l'amélioration du cours, de l'école ou de l'université, et idéalement, à la discipline elle-même.   [https://www.cs.tcd.ie/publications/tech-reports/reports.01/TCD-CS-2001-04.pdf Source]
    Une seule "critique".. .pourquoi n'aviez-vous pas mis vos noms à la fin de vidéo?  Est-ce difficile à les ajouter?
    		 2008-05-10 18:28:41
    ReneeFountain   Voyez-vous à quel point vos pairs ont apprécié votre travail :-)

    S.V.P Il sera IMPORTANT de mettre vos   noms wiki sur cette page.
    		 2008-05-10 18:32:15