Freeplane : exporter en Flash des cartes imbriquées

Rassurez-vous, ce billet n'est pas un n-ième tutoriel expliquant comment exporter au format Flash une carte créée avec Freeplane. Je vais en effet m'attarder sur un scenario bien particulier d'exportation Flash. Quand une carte est devenue trop imposante ou que les parties sont si différentes les unes des autres que vous souhaitez l' "éclater", La fonction "Exporter la branche en nouvelle carte" du menu "Fichier" permet dans ce cas d'éclaircir le sujet.

Pour pouvoir publier, en Flash sur votre site Internet, toutes les cartes ainsi créées en conservant bien évidemment les liens entre elles, des solutions existent  mais elles nécessitent de bricoler un peu les pages html et vous avez certainement mieux à faire.

Dans la vidéo présentée ci-dessous, je vous propose une solution extrêmement simple même si elle parait peu académique.

Avant de vous lancer, vérifiez par acquis de conscience que les liens sont bien exprimés en Relatif, dans le menu Outils/Préférences, bouton "Environnement" puis "Liens hypertextes"

La vidéo ne contient aucun commentaire audio, juste quelques consignes écrites sur un fond musical signé Trio JMK qui m'a aimablement autorisé à utiliser l'un des morceaux de son album Astronoz (merci Tristan ;-) !).

Freeplane - Exporter en Flash des cartes imbriquées from Franck Maintenay on Vimeo.

Tout Mindomo en HTML 5

Le combat opposant le langage HTML 5 au format Flash (propriété d'Adobe) se poursuit. Peu à peu, les éditeurs de logiciels en-ligne s'affranchissent des contraintes de ce format dont l'hégémonie était presque totale sur les applications interactives disponibles sur Internet. Depuis peu, Mindomo a également effectué sa mue. En tout début d'année, Mindomo avait déjà mis à disposition la version "player" de Mindomo en HTML 5. Le résultat était tout à fait satisfaisant, les repères étant strictement identiques à la version Flash. Désormais, c'est le logiciel en ligne complet qui a fait l'objet de cette refonte : Mindomo 7 .

Au passage, l'interface a été revue sans perturber les habitudes des utilisateurs.

A titre d'exemple, la barre de menu principale a été simplifée. Elle ressemblait  auparavant à ça : 

et elle se présente désormais sous cette forme :

Seuls les menus Fichiers, Annuler/Rétablir, Ajouter un sujet, Relations (insérer un lien entre deux sujets positionnés à deux endroits différents) et Thèmes (de la carte) ont été conservés.

Dorénavant, l'accès aux éléments  plus particuliers s'effectue au niveau des sujets, directement, à partir de la flèche située en haut à droite du cadre :

Sur le même principe, la barre d'outils verticale a été revue pour une meilleure ergonomie :

 Au final, Mindomo a profité de cette mue pour rendre encore plus simples et efficaces la création et l'édition de Mind-Maps. Bien entendu, le mode présentation est toujours présent et son utilisation reste simplissime.

Des nouveautés sont également apparues, comme l'exportation des cartes au format pdf ou l'intégration d'images par simple copier/coller.

L'utilisation d'HTML 5 par Mindomo est une excellente nouvelle. Mindomo pourra enfin être introduit là où le Flash était banni pour d'autres utilisations plus courantes, comme les jeux par exemple.

PowToon ou l'art de créer des diaporamas sympas mais efficaces

Décidément, la philosophie Powerpoint (et autres logiciels de PréAO) est malmenée depuis quelques temps ! Les spécialistes de la cartographie de l'information s'accordent pour dire que de tels logiciels exploités selon les règles de leurs concepteurs n'ont qu'une efficacité très relative : trop de mots sur une diapo (parfois de simples copier/coller d'un traitement de texte), listes à puce inefficaces, logos "corporate" omniprésents mais inutiles,...

Certains, comme Garr Reynolds et son excellent livre Présentation Zen, proposent d'utiliser différemment ces logiciels. D'autres solutions consistent à utiliser des logiciels spécifiques qui permettent de créer des présentations nécessairement différentes puisque basées sur des concepts situés à l'opposé de Powerpoint, Impress,...Le logiciel le plus connu dans ce domaine reste vraisemblablement Prezi, dont j'ai eu déjà l'occasion de parler sur le blog de Mapping-Experts. Mais d'autres solutions sont en embuscade : c'est le cas de Powtoon, tout droit venu d'outre-manche.

Powtoon, logiciel en ligne et en Flash, se situe sur le même créneau que Prezi (créer des présentations originales et dynamiques), mais la conception est un peu différente. Comme avec les logiciels classiques, vous devrez créer une suite de diapos entre lesquelles vous pourrez ajouter des transitions. Le jeu (car oui, c'est ludique !) consiste à ajouter des éléments tels que des personnages, du texte, des photos,...qui arrivent d'un côté, repartent de l'autre, le tout selon un timing que vous aurez imposé. Le logiciel fonctionne en effet comme un logiciel de montage vidéo : une ligne de temps prend place sous l'éditeur de diapo. A vous de déterminer le moment et l'endroit où arrive un élément et sa durée d'affichage sur l'écran. En quelques minutes, vous pourrez créer rapidement une animation complète. A ce stade du développement, on peut regretter qu'une diffusion pas-à-pas "télécommandable" du diaporama ne soit pas encore prévue. Cela laisse peu de chance au logiciel de pouvoir être utilisé en séance publique. Mais aujourd'hui, Powtoon est en version Beta. Cela peut donc encore évoluer.

Une vidéo de présentation (un brin moqueuse à propos de Prezi !)  vous livre tout le potentiel de ce logiciel, même si, en réalité, toutes les fonctionnalités présentées ne sont pas encore accessibles : exportation, plein écran, ajout de photos locales,...

Si vous faites partie de ceux qui pensent qu'un message sérieux ne peut être véhiculé que de manière solennelle, passez votre chemin : ce logiciel n'est pas fait pour vous. Profitez-en pour vous rappeler ce que disait Montesquieu : "la gravité est le bonheur des imbéciles". Pour les autres, n'hésitez pas à vous inscrire pour bénéficier d'un accès, même si les inscriptions semblent gelées pour le moment.

Exporter les cartes en SVG : pour quoi faire ?

Si vous êtes utilisateur(trice) de Freemind ou Freeplane, et accessoirement lecteur(trice) de ce blog, vous savez maintenant que votre logiciel de Mind-Mapping préféré sait convertir ses cartes dans de nombreux formats. On peut distinguer deux familles de formats :
- les formats dynamiques. Le résultat est totalement manipulable : Flash,Java, XHTML
- les formats statiques. Le résultat est alors figé. C'est le cas pour l'exportation PDF ou JPG.

Il existe néanmoins un format un peu à la croisée des chemins : c'est le SVG.

Un peu d'explications techniques
Si on se réfère à l'encyclopédie Wikipédia, le format SVG est l'acronyme de "Scalable Vector Graphics qui, traduit de l’anglais, signifie « graphique vectoriel adaptable », et couramment abrégé par SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.". A noter que le format natif des cartes Freemind et Freeplane sont justement du XML (caché derrière une extension .mm).

Donc contrairement au format graphique classique type Bitmap (bmp, jpg,...) qui est composé de points immuables, le format SVG est un système vectoriel. Le graphique est donc constamment recalculé.

Voyons cela concrètement.

Voici une carte exportée en format JPG, non zoomée (valeur du zoom : 100%). repérez bien le carré rouge : vous pourrez constatez la différence entre les JPG et le SVG sur cette portion.




La même carte, toujours en JPG mais zoomée à 400%



On remarque très nettement les effets d'escalier qui se dessinent sur les polices de caractères. D'autre part, le format JPG fonctionnant sur un principe de "destruction d'informations", des points grisatres apparaissent notamment autour des zones colorées

Le même image mais grossi 800 fois :



Cette fois, les caractères sont sinon illisibles, au moins compliqués à déchiffrer. Le rendu est plus que médiocre.


Regardons maintenant le résultat au format SVG avec les mêmes facteurs de zoom.
Tout d'abord, un zoom de 400% :



Alors que le format JPG commence à laisser apparaitre de nombreuses imperfections, le format SVG est toujours aussi net. Notez toutefois que les éléments Bitmap d'origine (icône et flèche) subissent une nette déformation

Grossie 800 fois, la qualité visuelle de la carte (ou plutôt ce qui en reste de visible) ne bouge pas d'un cil, que ce soit pour les caractères ou les lignes :



Juste pour constater que qu'on peut effectuer un zoom presque jusqu'à l'infini, voici ce que l'on voit quand la carte est grossie 12800 fois :



Oui, il s'agit bien de la même carte. En l'état (sous forme d'image fixe), une exportation en SVG présente peu d'intérêt par rapport à une image jpg. En effet, si les fichiers au format JPG sont très bien gérés, en natif, par les différents systêmes d'exploitation, c'est totalement différent pour les fichiers SVG. Les logiciels, nécessairement spécifiques, ne sont pas légion. Notons toutefois Inkscape, de la famille des logiciels libres, et le très connu Adobe Illustrator, mastodonte du dessin vectoriel.

De par sa structure, ce format est tout à fait adapté pour une impression "en grand" sur table traçante par exemple. Mais tout le monde n'a pas nécessairement du tel matériel à disposition et surtout l'utilité, nos cartes comportant rarement 20000 branches.

Indépendamment de l'impression, une autre idée fait son chemin et qui présente infiniment plus d'intérêt (à lire sur le forum de Freeplane): pouvoir utiliser une carte Freeplane ou Freemind exporté en SVG pour en faire une animation à la sauce Prezi (je vous invite à lire un billet que j'ai pu écrire au sujet de ce logiciel sur Mapping-Experts, blog qui, soit dit en passant, vient de subir un lifting graphique très réussi). En effet, un logiciel comme Illustrator peut créer des animations flash à partir de fichiers SVG. Il est donc tout à fait imaginable qu'une telle animation puisse se faire de manière presque automatique. Je serai en tout cas vigilant sur le sujet et ne manquerai pas d'en reparler si ce projet devait avancer.

SpicyNodes : dynamisez vos cartes Freemind/Freeplane

Utilisateurs réguliers de Freemind et Freeplane, vous le savez autant que moi : si ces logiciels sont exceptionnels pour la gestion de l'information, les cartes produites ne sont pas des plus "sexy". Heureusement, il existe des moyens de contourner le problème. L'importation de cartes Freemind et Freeplane dans des logiciels plus adaptés sont possibles (Xmind, Dropmind, Comapping par exemple).
Parmi les logiciels "en ligne", il en existe un dont la fonction essentielle est de construire des cartes très stylisées à intégrer ensuite sur un blog ou un site internet : SpicyNodes. Une vue plein écran vous permettra même d'envisager de faire une présentation complète sur vidéo-projecteur par exemple. Cartes soignées et fluidité extrême sont les principaux atouts de cet applicatif.
L'une des caractéristiques de SpicyNodes est également de pouvoir importer vos cartes Freemind directement.
La mise en forme étant très cadrée, n'espérez pas voir apparaitre nuages et autres liens graphiques dans la carte SpicyNodes. J'ai pu malgré tout constater que les liens hypertextes vers les sites étaient conservés. Voici ce que peut donner une carte Freeplane importées dans SpicyNodes :



Le résultat est produit dans l'incontournable format Flash.
La création d'un compte est gratuit, mais il est également possible de s'abonner. Dans ce cas, la bibliothèque de modèles proposés est plus importante et les paramétrages possibles, plus nombreux.

Exporter les cartes Freemind : tour d'horizon des possibilités

Régulièrement, je reçois des mails concernant les formats d'exportation inclus dans Freemind : à quoi servent-ils ? comment les utiliser ? etc...
Ces questions sont légitimes, dans la mesure où Freemind n'est pas nécessairement utilisé par tout le monde, et en particulier par le public visé. J'ai pu déjà écrire quelques lignes sur le sujet. Voici donc un petit tour d'horizon des modèles ou formats d'exportation inclus dans Freemind et accessibles à partir du menu Fichier/Exporter. Vous pourrez consulter ou télécharger les résultats en cliquant sur les liens. Pour cet exemple, j'ai utilisé la désormais classique carte "nettoyage maison".

-1- HTML. Freemind construit à partir de la carte une liste hierarchisée des données. En l'état, ce format présente peu d'intérêt (en dehors de poids plume du fichier généré). Par contre le fichier HTML peut aisément être intégré dans un script plus dense.
-2- XHTML. On commence à entrer dans un niveau de structure et de navigation développé, sans pour autant conserver le format de carte de Freemind. Les icônes sont conservées En passant la souris sur les items vous constaterez que les champs sont dynamiques (ouverture/fermeture de l'arborescence,...). De la même manière, les attributs apparaissent lorsqu'on effleure les items, ce qui permet d'accéder à leur contenu sans qu'ils surchargent l'écran de manière systématique : un véritable réussite.
-3- XHTML Image cliquable. Ce mode s'apparente au mode précédent, mais l'image de la carte s'affiche dans la partie supérieure de la page. Cliquer sur l'une des branches nous ramène directement aux informations sous forme de liste. Cette liste est elle-même dynamique, puisqu'il suffit de cliquer sur les '-' ou '+' pour fermer ou ouvrir le contenu d'une branche.
-4- Applet JAVA. J'ai pu déjà présenté ce format d'exportation. A mon sens, il s'agit du meilleur mode d'exportation pour une utilisation sur navigateur internet : on utilise Freemind sans le savoir !!
-5- Flash. C'est le mode d'exportation sur navigateur le plus souvent rencontré sur "la toile" dès qu'il s'agit de parler de Freemind. Ceci se comprend aisément : simplicité de mise en oeuvre et possibilité, même limitée, de personnaliser la carte par l'utilisateur ont contribué à ce succès. A noter qu'à l'origine, il fallait entrer dans le "code" de la page html générée par Freemind pour que le tout fonctionne. Aujourd'hui, Freemind s'occupe de tout. Il convient seulement de lui indiquer l'endroit où on souhaite voir les fichiers créés et le tour est joué.
-6- Document Open Office Writer. Comme pour le format HTML, ce format est totalement brut et le fichier de sortie doit être retravailler pour être présentable. Il permet simplement (et c'est déjà bien) d'éviter de tout retaper dans le traitement de texte les informations saisie dans Freemind.
-7- Format PNG, PDF, JPG : on ne les présente plus, le PDF étant assurément le mode d'exportation "statique" le plus commun.
-8- Format SVG : sans doute le moins connu et pourtant le plus intéressant des modes d'exportations graphique : le format SVG est un format graphique vectoriel. Cela signifie que vous pourrez imprimer vos immenses cartes sur des panneaux de 25x10 mètres sans perte de qualité (sauf si vous avez intégré des images ou icônes). A tester donc, avec, par exemple, le logiciel OpenSource InkScape.
-9- en utilisant une XSLT. Les XSLT sont des scripts permettant de synthétiser les informations d'une carte dans un format compréhensibles dans un autre programme. Il en existe, par exemple pour MS Project. En théorie, cela permet d'exporter les cartes Freemind vers tous les programmes possibles et imaginables...mais leur programmation nécessite des bases informatiques certaines.

Exportation de cartes dynamiques : Flash ou Java ?

L'exportation de cartes Freemind a, pour moi, une grande importance, pour deux raisons essentielles. La première est que Freemind n'est pas nécessairement installé sur tous les postes; il faut donc trouver un moyen de partager ses cartes et leur valeur ajoutée : fonctions de recherche et liens hypertextes essentiellement.
La seconde raison est que le concept même des cartes heuristiques échappe encore à un grand nombre de personnes : pour un non habitué et sans un minimum d'explications, l'aspect graphique des cartes peut, au mieux, étonner ou, au pire, rebuter. Dans les deux cas
le risque est que l'information contenue dans la carte ne "passe" pas (je travaille dans une administration ou la qualité d'un travail se mesure d'abord au nombre de pages, et le plaisir est complet quand c'est écrit en Times new Roman taille 8 !!)
Pour cette raison, il est important que l'exportation soit réussie pour être acceptée
Les options d'exportation de Freemind, unique en leur genre, sont donc parmi les fonctionnalités les plus intéressantes de notre logiciel préféré : elles sont stratégiquement essentielles pour faire accepter leur forme.
Il en existe deux :
-1- Exportation en Flash. C'est de loin le mode le plus utilisé à travers le net. En effet, tous les PC, ou presque, sont équipés du célèbre FlashPlayer (indispensable pour regarder ses vidéos préférées sur Youtube ;-) !!). L'exportation en flash offre, sur l'écran même, la possibilité de personnaliser la carte : modifiction de la couleur du fond d'écran, zoom, mini-moteur de recherche très pratique,... Le résultat est plutôt réussi, même si quelques bugs d'affichage sont à déplorer.
-2- Exportation en Java. Beaucoup moins répandue, sur internet en tout cas, que les cartes exportées en Flash, celles exportées en Java sont pourtant celles qui se rapprochent le plus des cartes originelles, sous Freemind.

Je vous propose de voir tout cela dans CETTE VIDEO.
erratum : cette vidéo se présente en 3 parties : la première pour présenter la carte d'origine sous Freemind, la deuxième l'exportation en Flash et la troisième concerne effectivement l'exportation en
Java, bien que je commence le commentaire en indiquant qu'il s'agit d'une exportation en Flash...l'heure tardive sans doute ;-).

Le plan du blog en carte

Afin d'offrir un résumé à la fois concis et précis du blog, j'ai créé un carte en Flash permettant de retrouver tous les sujets abordés. Elles sera bien évidemment mise à jour, au fur et à mesure de l'ajout de nouveaux billets. la carte se trouve ICI.
Un lien se trouve également sur le bandeau, juste à gauche.