Sharing a Mind Map: Using the Best of Mobile and Web Featuressil

Exclusive offer: get 50% off this eBook here
Mind Mapping with FreeMind

Mind Mapping with FreeMind — Save 50%

Easy recipes to increase productivity and creativity using powerful free tools—FreeMind and Freeplane with this book and ebook.

$14.99    $7.50
by Silvina P. Hillar | November 2012 | Cookbooks Open Source

FreeMind is the powerful, free mind mapping software used by millions of people worldwide to capture their ideas and communicate them visually.

In this article by Silvina P. Hillar, author of Mind Mapping with FreeMind, we will cover:

  • Exporting a branch as a new map or HTML
  • Exporting the mind map to bitmaps or vector graphics
  • Uploading the mind map on Flickr and sharing it
  • Exporting the mind map as HTML
  • Exporting the mind map as XHTML
  • Exporting the mind map as Flash
  • Exporting the mind map as an OpenOffice Writer document and uploading to Google Docs
  • Viewing an interactive mind map in a web browser

(For more resources related to this topic, see here.)

Mind Mapping

Sharing the mind map, using the exporting features of FreeMind, is to be explored in this Article. Besides, we can export and upload the mind map on the Web. We are going to deal with the options offered, and we are also adding another condiment to the recipes to spice them up.

There are plenty of features that can make our mind map more attractive to the reader, but we have to dig into the different alternatives to make it happen. Moreover, taking into account the pros and cons of each exporting feature, we are going to consider them before exporting our mind map.

When designing the activity considering how useful the reader can find the mind map, we are also bearing in mind, at the same time, which exporting features to work with afterwards. Therefore, it is very important to learn the options and their possibilities. Besides, we can improve the exporting possibilities by using a multimedia asset, which can enhance our mind map as well.

Exporting the mind map in different formats is going to be the main concern when designing and creating mind maps. We are working with FreeMind, and we see the maps as we design them. However, when exporting the maps, we can see them in different ways; thus the importance of the exporting feature.

Exporting a branch as a new map or HTML

In this recipe we are going to split the mind map in order to create a new one, using one part of the original one. It is very important to do it when the mind map is getting overwritten, that is to say when we add too much information and we want to represent the subject matter and write the exact information.

Getting ready

It is time to design a new mind map out of a node that already exists in the one that we are designing; therefore, we will export a branch in order to create a new one. Another option for exporting a branch is to export it as HTML.

How to do it...

When writing the mind map, if we feel that we do need to split it or if we want to keep on writing but the space that we have is not enough, it means that we have to export a branch as a new mind map. We must bear in mind that this branch appears as the root node of the new one. The sibling nodes that it has are to be exported as well.

In the first part of the recipe we are going to focus on the two ways to export the branch; in the second part of the recipe we will compare the results when exporting them in one way or another. The following are the steps that you have to perform:

  1. Open the file that you are going to work with. In case you are working with a new file, you do need to save it before exporting the branch.

  2. Click on the node that you want to make the root node, as shown in the following screenshot:

  3. Click on File | Export | Branch As New Mind, as shown in the following screenshot:

  4. A pop-up window appears. Write a name for your file and click on Save.

  5. A red arrow appears on the branch, indicating that the branch was exported as a new mind map, as shown in the following screenshot:

  6. The branch exported as a mind map looks like the following screenshot:

    It is important to point out that when exporting the branch of the mind map, the nodes—whether folded or not—no longer appear in the original one, as they are going to be exported to the new mind map.

  7. To export another branch of the mind map as HTML, click on the node to export, as shown in the following screenshot:

  8. Click on File | Export | Branch as HTML, as shown in the following screenshot:

How it works...

The main difference between exporting the branch as HTML instead of exporting the branch itself, is that the sibling nodes remain in the original mind map. So, we only export the branch and it appears in our default web browser. Another relevant feature is that when exporting the branch of the mind map as HTML, we see the map in a different format, not as a mind map itself. It is shown in the following screenshot:

We can also save this HTML file. Click on the down arrow next to Firefox. Click on Save Page As, write a name for the file, and click on Save. The file is saved as shown in the preceding screenshot, on your computer.

Exporting the mind map to bitmaps or vector graphics

We can export a mind map as an image, using any of the following three graphic file formats—JPEG, PNG, and SVG. We are going to analyze the options, although they are very simple.

If the mind map has bitmaps, we can export the mind map as PNG (short for Portable Network Graphics). It is a file format that provides advanced graphic features and lossless compression. It is advisable to use this type of file format while working with bitmaps when we don't want to lose image quality while rendering the mind map to the final bitmap.

In case we want to export the mind map in the file form with the smallest possible size, we can use the JPEG (short for Joint Photographic Experts Group) file format, which uses lossy compression. Pixels with different colors add noise to the image, and delete color information and replace it with pixels of approximated values. If the mind map has many photographs, the best choice for the smallest file size that will lose some image quality is JPEG. JPEG is a compressed graphic file that is used for images that have many colors, that is to say, pictures taken with any type of photographic camera.

The third option is to export the mind map as SVG (short for Scalable Vector Graphics). It is advisable to export the mind map in this format if we want to edit the geometric forms that make up the mind map. We can use software that deals with vector graphics and can edit this format. An example of such software is Inkscape.

Getting ready

It is time to think which mind map we want to export! The steps are the same for any of the exports, what differs is that we are going to choose a different type of file extension.

How to do it...

We have designed several types of mind maps, using different elements. We are now going to choose a mind map to export and a file extension that suits it. The following are the steps to be performed:

  1. Open the file that you want to export.

  2. Remember to unfold all the nodes, otherwise they are going to be exported as folded.

  3. Click on File | Export | As SVG…, as shown in the following screenshot:

  4. Write a name for the file and click on Save.

How it works...

We must take into consideration that the software that deals with SVG should be Inkscape or any other similar commercial one, such as Paint. When we look for the file on our computer and click on it, any of the said software will open and show the file. It is shown in the following screenshot:

Uploading the mind map on Flickr and sharing it

In this recipe we are going to upload our mind map on Flickr in order to share it. We must bear in mind that we have to unfold all its branches at the time of exporting, because we won't be able to unfold a branch if it is exported in a folded form. So, the first step is to prepare a mind map in order to be exported.

Another important aspect to consider when uploading a file on Flickr is that it does not accept SVG files; therefore, we have to export our mind map either as PNG or JPEG, taking into account how they are designed. So, let's get ready!

Getting ready

It is time to sign up on Flickr; to do it, we must go to http://www.flickr.com/. In this recipe, we are going to upload that mind map on Flickr. Why? So that we can have access to the HTML code and embed it, and have the URL and create a link with it. There are plenty of options to have our mind map uploaded on this photo-sharing site. Furthermore, there are several activities that teachers can create using this mind map.

How to do it...

The first step that we have to perform in order to upload the mind map is to export it. We have to choose a mind map with pictures or photographs. After that, we have to export it as PNG or JPEG. In this recipe we are going to export it as PNG, because the mind map has bitmaps. The following are the steps that you have to perform:

  1. Open the file that you are going to work with.

  2. Click on File | Export | As PNG....

  3. Write a name for the file and click on Save, as shown in the following screenshot:

  4. The file is saved in order to upload it on Flickr

  5. Sign in to your Flickr account and personalize your profile. Go to http://www.flickr.com/, and sign in for your account. You can also sign in with your Facebook account if you happen to have one.

  6. Click on Upload, as shown in the following screenshot:

  7. Click on Choose photos and videos.

  8. Search for the mind map that you have just exported as PNG. Click on the name of the file and click on Open.

  9. Choose the type of privacy for this file, within the Set Privacy block, as shown in the following screenshot:

  10. Click on Upload Photos and Videos. Wait for the file to upload.

  11. Click on add a description, as shown in the following screenshot:

  12. Complete the blocks, as shown in the following screenshot:

  13. Click on SAVE.

How it works...

After uploading the mind map to Flickr, we can now click on it. We can share it through different ways—by grabbing the link or copying and pasting the HTML/BBCode, as shown in the following screenshot:

Exporting the mind map as HTML

In this recipe we are going to export the mind map as HTML. In order to export the mind map as HTML, it is important to consider the fact that it has to be designed using words rather than images. Furthermore, it is also convenient to create the mind map using different types of sizes, fonts, as well as colors, in order to show the importance and differences after being exported.

Getting ready

The mind map has only text, and it is appropriate for exporting as HTML.

How to do it...

First, we have to choose the mind map to export; in this case, the one of British onarchs. After exporting the mind map, we can also save it in this new format on our computer.

When exporting as HTML, we have two options. We can export the mind map folded or unfolded. If we export it as folded, we also have the possibility to unfold it when exported; but if we export it as unfolded, we do not have the possibility to fold it afterwards. These possibilities are explored in this recipe. So, the following are the steps that we have to perform:

  1. Open the file to export. Fold all the nodes.

  2. Click on File | Export | As HTML…, as shown in the following screenshot:

  3. The mind map is exported. There appear + signs next to the nodes that have subnodes, as shown in the following screenshot:

  4. Click on the + sign to unfold the nodes, as shown in the following screenshot:

How it works...

When exporting the mind map with its nodes folded, the result is different. The mind map looks the same as the previous screenshot, but the + or - signs do not appear next to the nodes that contain subnodes. The exported mind map, with its nodes unfolded, appears as shown in the following screenshot:

Exporting the mind map as XHTML

There are three options when exporting our mind maps as XHTML. Two of them are available in the menu, but the third one depends on whether the mind map is folded or not. Therefore, before exporting it, we have to analyze the options. When the mind map is exported, it looks similar to HTML, but it is more colorful and the information in the note window appears below the node in which we have added it.

Getting ready

We are going to export the same mind map using the three different alternatives, so that we can notice the different results. The mind map to be exported is the one of British monarchs. In the previous recipe we exported the mind map as HTML, so we can also compare the difference with that exportation.

How to do it...

We are going to export the mind map as XHTML (clickable map image version). But, we are going to export it with its nodes folded. So, the following are the steps that you have to perform:

  1. Open the file that you are going to work with.

  2. Fold all the nodes containing subnodes.

  3. Click on File | Export | As XHTML (Clickable map image version) …, as shown in the following screenshot:

  4. Enter a name for the file and click on Save.

  5. The exported map appears in the default web browser, as shown in the following screenshot:

  6. Minimize your default web browser and go back to FreeMind. Unfold all the nodes in the same mind map.

  7. Repeat steps 3 and 4.

  8. The exported map appears in your default web browser, as shown in the following screenshot:

How it works...

It is time to explore the third option when exporting the mind map as XHTML. The option that we are exploring here does not export the image of the map, so it does not matter whether the nodes are folded or not. The information about the different nodes is exported, and we can expand or collapse the nodes, by clicking on the upper part. Perform the following steps:

  1. Open the mind map you want to export.

  2. Click on File | Export | As XHTML (JavaScript version)…, as shown in the following screenshot:

  3. Enter a name for the file. Click on Save.

  4. The mind map is exported to your default web browser, as shown in the following screenshot:

    Save the files on your computer in any of these cases, when the mind map is exported.

Exporting the mind map as Flash

Exporting the mind map as Flash is very interesting, because it maintains the characteristics that we have added to the mind map. Besides, whether exported with the nodes folded or not, we can open them by clicking on the nodes. In the case that the nodes contain information in the note window, we can read them if we hover the mouse over those nodes.

Getting ready

It is time to see how to export the mind map in a different way. We have to bear in mind that Flash is not available in some operating systems.

How to do it...

We are going to keep on exporting the same mind map, so that the difference in the exportations is noticeable. The following are the steps to perform:

  1. Open the file that you are going to work with.

  2. Click on File | Export | As Flash…, as shown in the following screenshot:

  3. Write a name for the file. Click on Save.

How it works...

The exported mind map appears in the default web browser. The mind map looks the same as in FreeMind. When clicking on the nodes, they fold or unfold. If there is a node that contains information in the note window, it appears while hovering the mouse over it. It is shown in the following screenshot:

Mind Mapping with FreeMind Easy recipes to increase productivity and creativity using powerful free tools—FreeMind and Freeplane with this book and ebook.
Published: October 2012
eBook Price: $14.99
Book Price: $24.99
See more
Select your format and quantity:

Exporting the mind map as an OpenOffice Writer document and uploading to Google Docs

As the title of this recipe indicates, we are going to export our mind map to OpenOffice; therefore, it is necessary to have it installed on the computer. To download OpenOffice, go to http://www.openoffice.org/download/, and follow the installation wizard.

Getting ready

To finish the recipe, the other important ingredient that we need is to get an account on docs.google.com/. Therefore, if you do not have an account yet, go to Google at http://www.google.com/, click on Documents, and follow the necessary steps to sign in and create your account.

It is also important to export the mind map as an image, because we are also going to use it afterwards. So, taking into account what type of information the mind map has, you can export it as PNG or JPEG (docs.google.com/ does not work with SVG files).

How to do it...

It is time to export our mind map. Start OpenOffice and minimize it. Open FreeMind and perform the following steps:

  1. Open the file to export.

  2. Click on File | Export | As Open Office Writer Document…, as shown in the following screenshot:

  3. Enter a name for the file and click on Save.

  4. Maximize OpenOffice.

  5. Click on File | Open…. Look for the file that you have just saved and click on Open.

  6. The file appears as shown in the following screenshot:

    Note that the mind map of The Phantom of the Opera—designed in the previous chapters—contains pictures, but they do not appear. We have exported a branch in this mind map, so there appears a link to FreeMind in the document. You can click on that hyperlink pressing the Ctrl key and the mind map of background information opens. It is shown in the following screenshot:

     

  7. Click on Edit | Select all.

  8. Click on Edit | Copy.

How it works...

It is time to work with Google Docs. Sign in to your Google account and create a new document. Perform the following steps to share the mind map:

  1. Click on Edit | Paste (you have pasted the selected information in OpenOffice).

  2. Click on File | Rename. Enter a name for the file and click on OK.

  3. If you have exported the mind map as an image, you can insert it in the document as well. Click on Insert | Image.

  4. A pop-up window appears. Click on Upload, choose an image to upload, and click on Open.

  5. The file looks as shown in the following screenshot:

  6. You can share the file or embed it. Click on Share on the upper-right margin and choose the desired settings.

Viewing an interactive mind map in a web browser

Freemind has a web applet that lets the users view the mind map from their web browser. The Java applet allows you to see the interactive mind map on a Java-enabled web browser. Therefore, we have to get ready to install that applet.

Getting ready

The very first step that we have to take is to download the Java applet. Go to the following URL in order to download it:

http://sourceforge.net/projects/freemind/files/

How to do it...

After entering the preceding URL, you have to perform the following steps in order to install the Java web applet:

  1. Click on the freemind-browser link, as shown in the following screenshot:

  2. Go to http://sourceforge.net/projects/freemind/files/freemindbrowser/.

  3. Click on 0.7.1, which was the latest version during the writing of this book, as shown in the following screenshot:

  4. Click on the 0.7.1 link, and you will see the name of a ZIP file—freemind-browser-0 7 1.zip, as shown in the following screenshot:

  5. Download it by clicking on its name.

  6. Decompress the downloaded ZIP file into any folder.

  7. You will have the following two files—freemindbrowser.html and freemindbrowser.jar.

  8. Copy freemindbrowser.html, paste it, and rename the pasted file with the desired name, such as freemindbrowser_test.html.

  9. Open freemindbrowser_test.html using Windows Notepad (Start | All Programs | Accessories | Notepad).

  10. Select File | Open, and select All Files in the drop-down list on the right-hand side of the File name textbox.

  11. Go to the folder and select freemindbrowser_test.html, as shown in the following screenshot:

  12. You will see the following HTML code snippet:

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <!-- This launcher works fine with Explorer (with Javascript or without) as well as with Mozilla on Windows --> <head> <title>Mind Map</title> <!-- ^ Put the name of your mind map here --> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <APPLET CODE="freemind.main.FreeMindApplet.class" ARCHIVE="freemindbrowser.jar" WIDTH="100%" HEIGHT="100%"> <PARAM NAME="type" VALUE="application/x-javaapplet; version=1.4"> <PARAM NAME="scriptable" VALUE="false"> <PARAM NAME="modes" VALUE="freemind.modes.browsemode. BrowseMode"> <PARAM NAME="browsemode_initial_map" VALUE="http://freemind.sourceforge.net/maps/freemind.mm"> <!-- ^ Put the path to your map here --> <param NAME="initial_mode" VALUE="Browse"> <param NAME="selection_method" VALUE="selection_method_direct"> </applet> </body> </html>

  13. Enter the desired title between <title> and </title>. For example, replace <title>Mind Map</title> with <title>English Monarchs</title>.

  14. Enter the path to your mind map file in the line that starts with VALUE. Replace http://freemind.sourceforge.net/maps/freemind.mm with the complete path for your .mm file. For example, replace VALUE="http://freemind.sourceforge.net/maps/freemind.mm"> with VALUE="file:///C:/Users/Silvina/Documents/Mindmapping/7621OS_03_British Monarchs.mm">.

  15. The following code snippet shows the complete example of the freemindbrowser_test.html file that opens C:\Users\Silvina\Documents\Mindmapping\7621OS_03_British Monarchs:

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <!-- This launcher works fine with Explorer (with Javascript or without) as well as with Mozilla on Windows --> <head> <title>English Monarchs</title> <!-- ^ Put the name of your mind map here --> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <APPLET CODE="freemind.main.FreeMindApplet.class" ARCHIVE="freemindbrowser.jar" WIDTH="100%" HEIGHT="100%"> <PARAM NAME="type" VALUE="application/x-javaapplet; version=1.4"> <PARAM NAME="scriptable" VALUE="false"> <PARAM NAME="modes" VALUE="freemind.modes.browsemode.BrowseMode"> <PARAM NAME="browsemode_initial_map" VALUE="file:///C:/Users/Silvina/Documents/Mindmapping/7621OS_03_ British Monarchs.mm"> <!-- ^ Put the path to your map here --> <param NAME="initial_mode" VALUE="Browse"> <param NAME="selection_method" VALUE="selection_method_direct"> </applet> </body> </html>

How it works...

After editing some HTML code, we can finally open freemindbrowser_test.html in our web browser and enable the execution of the blocked content. We will be able to interact with the mind map, as shown in the following screenshot:

Summary

We have seen how to export the mind map to different formats such as HTML, XHTML, and so on. This article also examined the uploading of mind map on flicker along with the view of mind map on browsers.

Resources for Article :


Further resources on this topic:


Mind Mapping with FreeMind Easy recipes to increase productivity and creativity using powerful free tools—FreeMind and Freeplane with this book and ebook.
Published: October 2012
eBook Price: $14.99
Book Price: $24.99
See more
Select your format and quantity:

About the Author :


Silvina P. Hillar

Silvina P. Hillar is an Italian, who has been teaching English since 1993. She has always had a great interest in teaching writing and composing techniques, and has done a lot of research on this subject. She has been investigating and using mind mapping for more than ten years in order to embed it into teaching.

She is an English teacher, a certified legal translator (English/Spanish) and has a post graduate degree in Education (in which she graduated with honors).

Silvina has been working in several schools and institutes with native English speaking students and as an independent consultant for many international companies as an interpreter, translator, and VLE (Virtual Learning Environment) course designer.

She has always had a passion for technological devices concerning education. Former videos and cassettes were a must in her teaching lessons, and the computer was and still is present. Her brother Gastón C. Hillar designed some programs and games for her teaching. Lately, she has been teaching using Moodle and the Web 2.0. She believes that one of the most amazing challenges in education is bridging the gap between classic education and modern technologies.

She has been doing a lot of research on multimedia assets which enhance the teaching and learning through VLE platforms. She tries to embed the learning of students through new resources which are appealing and innovative for them. Thus, multimedia stimulates cognitive as well as creative abilities.

Silvina has also authored three books at Packt Publishing, which are Moodle 1.9: The English Teacher’s Cookbook, Moodle 2 Multimedia Cookbook, and MindMapping with FreeMind.

Books From Packt


 Moodle 1.9: The English Teacher's Cookbook
Moodle 1.9: The English Teacher's Cookbook

Inkscape Beginner’s Guide
Inkscape Beginner’s Guide

Learn OpenOffice.org Spreadsheet Macro Programming: OOoBasic and Calc automation
Learn OpenOffice.org Spreadsheet Macro Programming: OOoBasic and Calc automation

Python 2.6 Graphics Cookbook
Python 2.6 Graphics Cookbook

GDI+ Application Custom Controls with Visual C# 2005
GDI+ Application Custom Controls with Visual C# 2005

Inkscape 0.48 Illustrator's Cookbook
Inkscape 0.48 Illustrator's Cookbook

Google Apps: Mastering Integration and Customization
Google Apps: Mastering Integration and Customization

Flash Multiplayer Virtual Worlds
Flash Multiplayer Virtual Worlds


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
i
v
v
T
3
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software