générer un site web à partir d'une map...
TRANSCRIPT
Générer un site web à partir d'une map MindManager
Ou comment faire un site Web avec MindManager.
Les habitués de map et de MindManager travaillent beaucoup avec cet outil pour réfléchir et écrire sur un sujet.
L'idée est donc d'utiliser MindManager pour créer des pages HTML sur un sujet donné.
Tout commence avec une map et se termine avec des pages HTML publiées sur un serveur.
Cette formalisation est un retour d'expérience personnel sur le sujet.
1
SOMMAIRE
GÉNÉRER UN SITE WEB À PARTIR D'UNE MAP MINDMANAGER......................................................................1
1 PRINCIPES................................................................................................................................................... 4
1.1 UNE MAP AVEC DES LIENS SUR D'AUTRES MAPS OU DES DOCUMENTS..........................................................................41.2 PUBLIER SUR UN SITE WEB.................................................................................................................................4
1.2.1 Des pages HTML...................................................................................................................................41.2.2 Une version document (Word publié en PDF)........................................................................................41.2.3 La Map en flash.....................................................................................................................................4
2 LE PROCESSUS............................................................................................................................................. 5
2.1 RÉALISATION DE LA MAP....................................................................................................................................72.1.1 Création de la Map...............................................................................................................................82.1.2 Correction du texte avec Word et génération d’une version document................................................8
2.2 GÉNÉRATION DE PAGES EN HTML.....................................................................................................................122.2.1 Création d’une Map pour publication.................................................................................................132.2.2 Exportation en page Web...................................................................................................................132.2.3 Vérification des pages et modification de la Map...............................................................................14
2.3 FINALISATION DU SITE.....................................................................................................................................142.3.1 Importation du dossier dans un site....................................................................................................142.3.2 Modification des pages HTML.............................................................................................................142.3.3 Publication du site...............................................................................................................................162.3.4 Sauvegarde et publication du fichier Word en PDF.............................................................................17
3 CONSEILS.................................................................................................................................................. 18
4 LES CONCEPTS........................................................................................................................................... 19
5 AVANTAGES & INCONVÉNIENTS................................................................................................................ 20
5.1 AVANTAGES.............................................................................................................................................205.1.1 Rapidité de la formalisation................................................................................................................205.1.2 Site Web généré..................................................................................................................................205.1.3 Générer un site et un document Word................................................................................................21
5.2 INCONVÉNIENTS........................................................................................................................................215.2.1 Plusieurs fichiers.................................................................................................................................215.2.2 Liens hypertextes................................................................................................................................215.2.3 Processus de publication "lourd".........................................................................................................225.2.4 Le menu du site dynamique à déplier pour voir les sous options.........................................................235.2.5 Map en flash.......................................................................................................................................23
6 LES OUTILS................................................................................................................................................ 24
6.1 MINDMANAGER.............................................................................................................................................246.2 LOGICIEL ÉDITION HTML.................................................................................................................................24
6.2.1 Expression Web 4................................................................................................................................246.3 LOGICIEL PUBLICATION.....................................................................................................................................24
6.3.1 Expression Web 4................................................................................................................................246.3.2 Filezela................................................................................................................................................24
6.4 LOGICIEL IMAGE.............................................................................................................................................24
7 EXEMPLES................................................................................................................................................. 25
2
7.1 PC OU MAC ?................................................................................................................................................257.1.1 La map................................................................................................................................................257.1.2 Le site web..........................................................................................................................................25
7.2 ECOLOINFORMATIQUE.....................................................................................................................................257.2.1 La map................................................................................................................................................257.2.2 Le site..................................................................................................................................................25
8 AUTRES POSSIBILITÉS................................................................................................................................ 26
8.1 LA MAP EN MINDMANAGER.............................................................................................................................268.2 LA MAP EN FLASH...........................................................................................................................................268.3 LE SITE WEB...................................................................................................................................................26
3
1 Principes
Le principe est de livrer le résultat de la capitalisation des connaissances sous forme d'un site web qui sera publié sur un CDROM ou sur dans un intranet.
Cependant, le LC peut aussi être livré sous forme du map MindManager....
1.1 Une map avec des liens sur d'autres maps ou des documentsCette map par exemple, a des liens sur d'autres map et d'autres fichiers (PDF).
Les liens sont généralement enregistrés en mode "relatif" dans la map.
1.2 Publier sur un site WebL'idée est de générer des pages Web (ou HTML) avec l'export de MindManager.
1.2.1 Des pages HTML
1.2.2 Une version document (Word publié en PDF)
1.2.3 La Map en flash
Une possibilité est d'exporter la ou les maps en flash (SWF). Avec MindManager, la map est présentée de manière dynamique avec la possibilité d'ouvrir ou fermer les branches. Cette exportation à quelques limitations, en particulier les notes avec des images insérées ne sont pas affichées.
Cette technique nécessite d'exporter les maps appelées en lien hypertexte avant et de changer les liens sur le fichier flash.
Attention, les liens relatifs ne fonctionnent pas, et flash n'autorise pas de liens sur un PC, il faut donc refaire les liens sur un site web où les documents sont publiés, et mettre les chemins complet.
4
2 Le processusVoir le(s) document(s): Activite SiteWeb MM V2.pdf
5
6
2.1 Réalisation de la Map
7
Les différentes descriptions seront intégrées dans une map "Livre de Connaissance". Les images des modélisations sont intégrées, et ensuite décrites.
Le plan du LC peut varier selon le sujet.
2.1.1 Création de la Map
La création d'une map, la map va servir de plan aux pages HTML. Le niveau de profondeur du menu peut être paramétré et conditionne la création des pages par la fonction d'exportation de MindManager.
Il est important donc de voir ce que donne l'exportation en fonction de la map.
Généralement, on essaye d'avoir une cohérence dans les niveaux des sujets et sous-sujets.
Map V0
2.1.2 Correction du texte avec Word et génération d’une version document
Le correcteur orthographique et grammatical de Word est plus puissant que celui de MindManager. Même s'il n'est pas parfait, il permet de corriger les fautes de frappes et les principales fautes de grammaire.
D'autre part, en recadrant les images souvent trop larges pour la largeur de la page, la map régénérée aura des images moins grandes et donc moins gourmandes en taille de fichier.
Map V0
Exportation sous Word
Le document Word est généré par MindManager avec une table des matières, et l'image de la Map.
Je vérifie les styles qui seront utilisés pour convertir la mise en forme des textes. Selon, je choisis la profondeur de numérotation des chapitres (généralement 3).
Map V0
LC en Word
8
Modification du document
Je travaille ma mise en page à partir de Word. En particulier, je fais en sorte qu'un modèle tienne sur une page, que celle- ci soit en mode paysage ou portrait.
Cela implique parfois de revoir la mise en page des modèles.
En passant, je revois l'orthographe et la grammaire (qu'il faudra quand même faire relire par une personne compétente en "relecture et correction de document"
Je modifie la table des matières, j'inclue une table des illustrations.
LC en Word
Modifier un document Avec WordVoir le(s) document(s): Tache Modifier le document genere.swf
9
10
LC en WordVoir le(s) document(s): Publier une map.docx
Importation dans une nouvelle Map
Je réimporte le document Word en une Map MindManager pour prendre en compte les corrections.
Il y a parfois des problèmes avec l'importation d'images. Il faut vérifier toutes les images et éventuellement réimporter celles mal intégrées soit à partir de Word par copier-coller, soit à partir de l'image d'origine.
Les images de la map ont la taille du document Word, elles sont donc moins "lourdes" que les images d'origine.
Ces images seront mieux visibles dans les pages Web avec une résolution d'écran en 1024 par 712.
LC en Word
Map corrigée
LC en Word
LC en PDF
Map corrigée
11
2.2 Génération de pages en HTML
12
2.2.1 Création d’une Map pour publication
Lorsqu'une map a des liens sur un document, un PDF par exemple, ce dernier est copié et le lien est modifié dans la page HTML.
Lorsque que des liens hypertextes soient faits sur des documents Word, PowerPoint... l'idée est de publier les fichiers sous la forme PDF. Pour la publication on va donc sauvegarder en PDF tous les documents Word, PowerPoint, etc.
Il faut donc copier la map de départ et lui modifier les liens sur les documents PDF générés.
Map corrigée
Modification des liens hypertextes entre document appelant et document appelé
Map à publier
2.2.2 Exportation en page Web
Attention, sur la version française de MindManager 7, le paramètre "Accueil" propose par défaut "Page d'accueil" avec l'apostrophe. Ce qui provoque un bug, le menu ne s'affiche pas. Je remplace systématiquement par "Accueil" plus court et sans apostrophe dans Advances.
13
Map à publier
Pages HTML
2.2.3 Vérification des pages et modification de la MapVoir aussi: Exportation en page Web
Je vérifie la mise en page des pages HTML. J'affiche les pages générées dans le navigateur et je modifie la map en fonction des problèmes détectés.
Map à publier
Pages HTML
Pages HTML
2.3 Finalisation du Site
Cette activité consiste à finaliser le site web avant sa publication. J'utilise Microsoft Expression Web (ou FrontPage) qui permet de bien gérer les liens hypertextes et la publication.
2.3.1 Importation du dossier dans un site
J'importe le dossier contenant les pages Web dans le site. Cela permettra ensuite de recopier tout le dossier si le LC a été mis à jour.
Pages HTML
Pages HTML dans le site
2.3.2 Modification des pages HTMLVoir aussi: Intégrer les pages Web dans le site
Pour chaque modèle, je créée des liens hypertextes entre l'image et l'élément de connaissance correspondant (par exemple, la description d'un agent du modèle OIDC), et je créée des liens hypertextes entre les pages de modèles pour permettre de naviguer de modélisation en modélisation.
Note : dans le cas d'une mise à jour du LC et donc une régénération des pages HTML, cette activité sera entièrement à refaire... Dur !
Dans la version française de MindManager, les documents liés sont mis dans un dossier appelé "documentsliés", les caractères accentués posent des problèmes selon le serveur Web utilisé, en particulier sur les serveurs Linux. Il est donc recommandé de
14
remplacer les caractères accentués. Le mieux est de faire cette tâche avec ForntPage qui modifie les liens hypertexte sur toutes les pages ou documents appelés. Cependant, il ne faut pas oublié de modifier le menu si celui-ci appelle directement un document lié. Il suffit de vérifier le fichier "tree_items.js" dans le sous- dossier "votre_dossier_genere\\Res\tree\".
Pages HTML dans le site
Intégrer les pages Web dans le site
Si le Livre de Connaissance généré au format HTML fait partie d'un site web, le répertoire des fichiers peut être importé dans le site.
Les liens sur le livre de connaissance peuvent être gérés avec un logiciel comme FrontPage ou Expression Web de Microsoft.
§ Importer le dossier dans le site
§ Ajouter les liens hypertextes dans les images
§ Ajouter les liens sur les autres modèles
Remplacer le logo
Le logo affiché se trouve dans le répertoire "Res\images" et se nomme "logo.gif". Il suffit de remplacer ce fichier par le logo de son choix
Cas de liens sur une page Web qui seront inclus dans le site
Ce cas se présente lorsque l'on fait un lien sur des pages HTML déjà générées. Par exemple, il peut être intéressant de pointer sur les pages web générées avec Visio (cf. Faire du café), ce qui permet d'afficher le schéma et les données associées.
La fonction d'exportation copie la page HTML mais ne copie pas le sous- dossier associé avec les images. Dans ce cas, les sous-dossiers doivent être copiés après génération dans le sous-dossier du site web de la map.
Suis-je clair ?
15
Visio génère une page HTML et un dossier associé comme suit :
· Concepts.htm
· Concepts_files (dossier contenant tous les objets)
Si vous faites un lien hypertexte dans la map sur cette page HTML, en indiquant dans les paramètres :
MindManager copiera la page HTML dans le dossier "Documentsliés" mais pas le dossier associé à la page HTML. Il suffit de le copier après la génération.
Renommer le dossier "\Documentsliés"
La version française de MindManager génère un dossier "\Documentsliés" dans lequel il copie tous les fichiers liés par des liens hypertextes (voir les options des liens hypertextes).
Si cela fonctionne sur un PC sous Windows, les liens ne fonctionnent plus lorsque les pages sont publiées sur un site sous Linux où les caractères accentués sont remplacés.
FrontPage ou Microsoft Expression Web gère les liens hypertextes, il suffit donc de renommer le nom du dossier et le logiciel change tous les liens hypertextes concernés.
Pages HTML dans le site
2.3.3 Publication du siteLe site est ensuite publié sur un CDROM ou un site Internet.
Pages HTML dans le site
Publier le site
Tâche de publication des pages Web sur un site internet ou intranet de publication.
16
Pages HTML publiées
2.3.4 Sauvegarde et publication du fichier Word en PDFPour la publication, une version PDF sera mise à disposition. Depuis, Word 2007 permet d'enregistrer dans ce format.
Autrement, il existe des logiciels gratuits comme PDF Creator qui permettent d'imprimer le document avec une imprimante virtuelle qui génère un PDF.
Une fois que le document sera sauvegardé en PDF et publié, les liens hypertextes originalement sur des documents dans le dossier du PC ne fonctionneront plus, même avec des liens en relatif.
La technique consiste à publier une première fois les pages sur le site web, puis modifier tous les liens du document Word sur les documents publiés.
17
3 ConseilsRéorganiser la map pour sa publication
· Menu· Pages
Certaines pages vont être vide (pas de note), il faut "déplier le menu" pour accéder aux "sous-sujets"· Remplir le sujet avec le sommaire des sous-sujets
Images· Pas trop grande ou trop large
18
4 Les conceptsVoir le(s) document(s): Concepts pour publication Map.swf
Concepts de la publication d'une map en pages HTML.
19
5 Avantages & inconvénientsCette solution a des avantages et des inconvénients.
5.1 Avantages
5.1.1 Rapidité de la formalisationMindManager permet de formaliser rapidement un sujet.
Pas de souci de mise en page
Le principal problème de Visio ou PowerPoint est la page. Pour un processus, un diagramme des tâches ou des concepts, cela implique de gérer la mise en page, de faire des allers-retours entre les pages, gérer la lecture avec des liens hypertextes (qui ne fonctionne pas sur une impression papier), etc.
Réorganisation de la structure facile
Modifier la structure se fait rapidement en déplaçant une branche soit par copier-coller, soit par glisser-lâcher
Possibilité de faire des désignations de sujets explicites
En effet, la contrainte de la mise en page sous PowerPoint ou Visio entraîne de créer des désignations courtes.
Avec MindManager, le problème de mise en page disparaît. Les désignations peuvent donc être des phrases, en particulier pour décrire des tâches.
5.1.2 Site Web généré
MindManager exporte en HTML. Le site n'est peut-être pas parfait, mais le temps de réalisation est court.
PlanLe plan du site reprend la map. Il est donc organisé,
Un site structuréMindManager permet de faire un livre de connaissance structuré.
Liens entre les pages
Des liens entre les pages peuvent être créés dans MindManager, et les liens hypertextes sur les images peuvent être créés avec FrontPage.
Cette possibilité permet de faire un site qui peut être lu de manière séquentielle ou de manière "logique", de liens en liens.
Le site Web généré par MindManager contient des liens qui permettent à l'utilisateur de se situer et revenir à l'accueil à tout moment. Cela diminue le risque du syndrome du labyrinthe.
20
5.1.3 Générer un site et un document Word
MindManager permet de générer aussi un document Word, lui-même pouvant être généré sous forme PDF via la version 2007 de Word, ou une "imprimante virtuelle" comme PDFCreator.
Ainsi, le Livre de Connaissance peut se présenter sous forme HTML ou sous une forme de document.
5.2 Inconvénients
5.2.1 Plusieurs fichiersCette méthode implique d'avoir plusieurs fichiers.
La MapQuand il n'y en a pas deux pour gérer les liens sur des documents appelés.
Word
La mise en page Word est souvent à reprendre, les images sont parfois trop large, soit il faut les diminuer, soit mettre la page en format Portrait.
Une table des illustrations peut être ajoutée.
Les sujets sans texte sont à transformer en points.
Le pages Web
Une fois les liens sur les images ajoutés, régénérer les pages Web écrase tout le travail effectué...
5.2.2 Liens hypertextes
La gestion des liens hypertextes peut se compliquer si, par exemple, on utilise des pages HTML générées par d'autres programmes ou avec MindManager.
On peut d'abord faire le lien sur le fichier source, mais il faut le modifier une fois généré en HTML.
Ce cas se présente aussi lorsqu'on publie une map (les concepts, les tâches) en flash ou en PDF. On peut avoir le lien d'origine sur la map, ce qui permet de travailler la modélisation, puis sur une image ou le fichier généré dans la map qui sera générée en HTML.
21
Si liens sur une autre map, cela ne fonctionnera plus avec les pages web
Parfois des liens sur des documents qui seront perdus à l'exportation
Si des liens sont créés avec FrontPage (par exemple) sur les images, ils seront perdus à la prochaine génération des pages
5.2.3 Processus de publication "lourd"
Le processus de publication peut paraître lourd, la map dans MindManager, les pages HTML générées dans FrontPage, vérification et recréation des liens sur chaque image, puis publication sur le site.
Travailler les modèlesLes modèles sont mis à jour (modification du textes, des images...).
Les réintégrer dans MM
Les images générées à partir de la modélisation sont réintégrées dans MindManager.
PublierLes pages générées sont intégrées au site Web et modifiées.
Changer les liens hypertextes
Les liens hypertextes sont parfois modifiés lorsque les pages sont copiées dans un autre répertoire du disque dur.
Ils doivent être contrôlés et modifiés au besoin.
Les liens hypertextes du menu sont définis dans un fichier ".js" nommé "tree_items.js" dans le sous- répertoire "res".
Ajouter les liens sur les imagesSi des liens ont été créés sur des images, ils doivent être recréés.
22
5.2.4 Le menu du site dynamique à déplier pour voir les sous options
Le menu ne se "déplie" pas automatiquement pour montrer les options. Le lecteur doit comprendre qu'il faut cliquer sur le "+".
5.2.5 Map en flash
Pas visible sur iPad et iPhone
Image des notes non prises en charge dans la map flash
Les notes avec images ne sont pas affichées dans la map en flash. Il faut alors faire un sujet avec l'image dans le sujet.
23
6 Les outils
6.1 MindManager
Logiciel de Mind Mapping ou carte heuristique (map mind) de MindJet. Il permet de traiter un sujet sous forme d'une "Map".
Ce logiciel permet de générer des pages HTML ou des documents Word.
6.2 Logiciel édition HTML
6.2.1 Expression Web 4
Ces logiciels de Microsoft permettent de gérer un site Web avec ses pages, les liens hypertextes.
Les pages HTML sont importées dans un site Web, des liens hypertextes sont ajoutés sur les images et le site est publié sur un serveur (intranet ou internet)
6.3 Logiciel publication
6.3.1 Expression Web 4
6.3.2 Filezela
6.4 Logiciel Image
Un logiciel comme Paint Shop Pro, Paint.Net ou The Gimp, permet d'affiner les images pour les illustrations, fond transparent, compression de l'image pour alléger la taille du fichier, diminution de la taille de l'image pour la mise en page, etc.
PowerPoint peut être utilisé pour composer des images, il suffit de soit exporter le groupe d'objets en image, soit enregistrer la diapositive en image.
24
7 Exemples
Deux exemples de LC sont présentés. Le premier a été fait avec Visio et MindManager, le second est une reprise d'un LC fait sous PowerPoint par l'UTT.
7.1 PC ou Mac ?
7.1.1 La mapVoir le(s) document(s): Mac ou PC.mmap
7.1.2 Le site webVoir le(s) document(s): index.html
7.2 Ecoloinformatique
7.2.1 La mapVoir le(s) document(s): Informatique écologique V2.mmap
7.2.2 Le siteVoir le(s) document(s): index.html
25
8 Autres possibilités
8.1 La map en MindManager
La map est en téléchargement depuis le site web. Les liens sur les autres maps pointent sur les maps en ligne.
Il suffit de télécharger cette map, l'ouvrir avec MindManager, les autres maps en lien seront téléchargées dans MindManager (Attendre un peu selon la taille du fichier, MindManager n'indique pas qu'il télécharge).
Voir le(s) document(s): Publier une map.mmap
8.2 La map en flash
Cette map exportée en flash (Mindjet Viewer) avec les liens sur les autres map en flash.
Il est conseillé de refaire une map spécifique pour gérer les liens sur les autres maps exportées et publiées sur le site web (les liens relatifs ne fonctionnent pas avec flash).
Les images dans les notes ne sont pas affichées dans le viewer Flash. Par contre, elles peuvent être affichées dans un sujet. Il arrive parfois que le format de l'image insérée dans la note soit mal géré par le viewer, il est alors nécessaire de refaire une image et de la réinsérer.
Voir le(s) document(s): Publier une map.swf
8.3 Le site webPages HTML exportées depuis la map.
Voir le(s) document(s): Générer n site web avec MindManager
26