Une sitemap interactive pour mon site web avec XMind et Thinglink

Comment créer une sitemap – ou carte de navigation dans votre site – à partir d’une mindmap XMind ?

Une fois de plus, j’ai fait appel à Thinglink pour résoudre ce problème : l’absence de carte interactive en ligne chez XMind.

Et j’ai créé la sitemap de mon nouveau site web avec cette solution : une carte heuristique XMind contenant des liens et une description de contenu avec Thinglink!

J’avais déjà utilisé Thinglink avec le logiciel de mindmapping Novamind pour réaliser une carte interactive sur mes ateliers Apprendre A Apprendre ainsi que pour un cycle de formations sur le mindmapping pour l’entreprise.

Mais j’avais envie d’aller plus loin et de donner à mon nouveau site web – marco-bertolini.com – une sitemap interactive basée sur XMind et sur Thinglink.

Chacun des sujets de ma mindmap représenterait une page : les visiteurs pourraient promener leur souris sur la carte pour voir apparaître les liens, ainsi qu’une brève description du contenu de la page.  Il leur suffirait de cliquer sur ces liens pour atterrir sur la bonne page.

Une sitemap claire et ludique

En outre, une mindmap est un outil visuel particulièrement clair  et ludique : le visiteur pourrait avoir une vision globale du contenu du site d’un seul coup d’oeil.

Et l’utilisation des images et des couleurs transformerait un document « obligatoire » en une image attractive !

Je m’y suis donc attelé.  J’ai d’abord créé une mindmap ou carte heuristique avec XMind, reprenant chaque page du site web.  Ensuite, j’ai exporté cette carte au format d’image PNG.    Puis, j’ai téléchargé cette image sur le site de Thinglink.  Et j’y ai édité les liens et les descriptions de page.

Comment éditer des liens et la description de l'image dans Thinglink

Edition des liens et des description de pages de la sitemap dans Thinglink

Ensuite, j’ai sauvegardé l’image sur Thinglink.   Et enfin, j’ai choisi l’option « embed » – ou intégrer dans un site web – et j’ai recopié le code HTML de mon image.

Il m’a suffit de l’intégrer dans la page Sitemap de mon site web pour pouvoir l’afficher.  Il n’y a donc pas besoin d’être programmeur ou de connaître le code HTML pour éditer une sitemap sous forme de carte interactive avec Thinglink, contrairement à d’autres solutions.  J’ai créé mon site avec Weebly : une solution qui me permet de concevoir et de mettre à jour mes sites web de manière très simple.

Voici la sitemap terminée : cliquez sur l’image pour voir l’original avec les liens et la description du contenu des pages.

Sitemap interactive du site Marco Bertolini - Conseil et Formation réalisée avec XMind et Thinglink

Sitemap interactive du site Marco Bertolini – Conseil et Formation

Cela veut dire aussi qu’à chaque mise à jour du site, je vais devoir modifier la map et y inclure tous les liens à nouveau.

Mais je crois que le résultat en vaut la peine.

Cette carte a été entièrement réalisée avec la version gratuite d’XMind !

Et vous ? Qu’en pensez-vous ? Avez-vous déjà utilisé ce type de carte interactive pour votre site web ?  Quelle solution avez-vous adoptée ?  Et quels logiciels ou applications avez-vous utilisé ?

Vous avez aimé cet article ?  Inscrivez-vous à ma newsletter et ne ratez plus aucun article ou événément !

Publicités


Catégories :Uncategorized

Tags:, , , , , , , , , , , , , , , , , ,

9 réponses

  1. Super intéressant comme article, parfaitement parfait… ce qui m’a permis de faire celui de Oh ! la Vache Bleue : http://www.thinglink.com/scene/590637600163758080

    Et de découvrir ThingLink cerise sur le gâteau ! Merci !
    Je suis ouverte à toute critique.

    J'aime

  2. Merci pour cette présentation! Pour répondre à la question à la fin du billet…
    J’ai utilisé aussi Thinglink pour créer des images interactives :
    http://sandrinemeldener.wordpress.com/2013/12/04/les-images-interactives-essai-de-loutil-thinglink-tp/
    y compris à partir d’une carte mentale :
    http://sandrinemeldener.wordpress.com/2014/05/27/ma-biographie-langagiere/

    Mais wordpress n’acceptait pas le code embed de Thinglink, peut-être parce que j’utilise la version gratuite…

    J'aime

    • Superbe carte de présentation !

      WordPress accepte peu de logiciels et d’objets. J’ai le même problème.

      Ou alors, il faut opter pour un WordPress hébergé sur un serveur et jouer avec des plugins…

      Vos élèves ont de la chance d’avoir une prof’ curieuse comme vous 😉

      A bientôt,

      Marco.

      J'aime

  3. Bonjour Vincent,

    Merci pour ce commentaire positif 😉

    Heureusement il n’y a pas que des sites d’agence… Il y a aussi des créateurs ! Un des sites les plus originaux que j’aie jamais vu est celui du réalisateur belge Manu Coeman. Un peu long à charger, mais ça vaut le déplacement : http://www.manucoeman.com/

    Bonne visite et bonne journée, Vincent 😉

    J'aime

  4. Si seulement les agence web avaient la bonne idée de généraliser cette méthode de présentation à leurs clients… il y’aurai moins de places pour les pseudo-experts !

    J'aime

Rétroliens

  1. BTP - theine777 | Pearltrees
  2. Documentaliste - theine777 | Pearltrees

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :