What is HTML 5 export and what does it do?

While MindManager 2017 (MM 2017) did not give users everything they wanted, it did deliver a number of unexpected but mostly pleasant surprises. In this occasional series I’ll explore some of these new features, both major and minor, and provide examples of how to use them in interesting ways.

My first example is the HTML 5 export facility which allows users to export a mindmap as a web page. These maps do not require MM and in fact can be accessed by anyone with a browser. With the latest 17.1.167 update they can also use a number of layouts and are fully interactive, allowing users to expand and collapse branches and click on hyperlinks and attachments. Most aspects of mind maps including features such as topic notes are also retained in the export process. The HTML 5 export also replaces the previous somewhat unreliable interactive PDF export feature.

There is clearly a great range of potential uses for this facility. In effect, read-only but highly interactive maps can accessed easily, both by the wider community (for example, maps showing council and community facilities with expandable links to further information) and within organisations (for example project management maps, or maps of organisation policies) – and only the people directly responsible for creating and editing the maps require MM licences to use them.

In this post I’ll describe how the export facility works. I will also demonstrate a map I created for a simple purpose – the creation of a table of posts I write in 2016 for one of my blogs. Other examples where such a map could be used include as a menu for website navigation or a table of contents for an online publication.

First, a few caveats. This is a new feature and it still under development, so there are a few rough edges. While many MM features are available, not all of them are; similarly, not all the layout options work effectively and sometimes things can get messed around a little in the export process. The exported pages work better with some browsers than others and there is limited customisation of the non-map elements which include some mandatory elements such as the MM logo. These issues are relatively minor however and the exported maps are more than useable.

Setting up and exporting a map

The export process is very easy, especially if you are using a fairly straight-forward map. In fact, the export process is so quick you can repeat it and view the results multiple times, making it easy to experiment with different options.

First of course you have to make your map. The first time you create a map for export I suggest using something simple like a radial layout. Also bear in mind that when you export the map it will be the original map file name that is displayed, not the name of the HTML file generated, unless you remove the name entirely.

If you are setting up a table of contents or directory involving web content and you don’t already have a listing of the sites involved you will of course have to create or import these, along with the hyperlinks. You can do this manually or to speed up the process using the Google Search plus facility, available from Olympic Limited as a stand-alone add-in or as part of their multi-functional MAP add-in.

You have two choices about how to handle the linked sites in MM for the purpose of export. The first, which I’ll use in the following example, is to create a topic for each site with the link attached. While you can export topics with multiple links it’s probably safer to stick to one link per topic.

The second is to paste the link into the topic notes. It’s easier to have multiple links in a single topic but note you will need to consider whether the resulting layout will look good on a web page, particularly if you have a large map.

Once the map is created and saved, all you need to do to is click on the File tab, select Export and then select HTML 5 Interactive Map. You will be prompted for a file name for the HTML file (note as I said earlier that the export will display the original map name, not that of the HTML file, unless bar with the name is removed). Then press enter and the HTML 5 export file will be created.

At this point you will be given the option to view the map in your default browser. This will give you the opportunity to review the map’s appearance as a web page. Inevitably the export process will introduce some changes which will be more noticeable with some layouts and templates than others.

Uploading the HTML page to a website

Creating the HTML 5 version of the map is only half the story – you will now need to upload it to a website. How you do this depends of course on your website hosting arrangements and the applications and templates you are using. The uploaded map may look somewhat different to the preview in your default browser and you may also need to adjust settings in MM and export again to achieve the results you want.

There are other issues to consider. For example, if your website is hosted at WordPress.com you cannot upload an HTML page at all. On the other hand if you use the WordPress application on a site hosted by you or a third party you can upload an HTML file but you will need to use a plug-in to install it successfully. Andrew Wilcox’s Applications of MindManager describes the process, which requires the use of the iframe plug-in.

Another issue is that the exported HTML file contains the Mindjet logo and a toolbar with a Help button that somewhat confusingly links to the online help file for MM 2017. When this question was raised on the Mindjet community forum Mathieu van der Wal identified how the file can be edited to remove these features.

Based on the solutions provided by Andre and Mathieu I have developed the following process to uploading an HTML map and if desired removing any Mindjet additions:

1. Create a map and then export the HTML 5 version as described in the previous section.
2. If you don’t want the Mindjet logo and toolbar to be displayed, open the HTML exported file in Notepad or another plain text editor. Find the line containing “toolbar-container” and delete it, then do the same to the line containing the phrase “mj-logo-link” (it’s difficult to show the lines in full as they interfere with the code for this page). Then resave the file.
3. Install the iframe plug-in on your WordPress site.
4. Create a new page, add an appropriate heading and introductory text and switch to Text edit mode.
5. Go to the iframe plug-in on the Plugins page and click on View Details. Click on the Installation tab and follow the instructions there to insert some shortcode on the page you have created (the line beginning [iframe src” followed by a URL link name and ending with width=”100%” height=”500″] or similar (the actual name doesn’t matter as it will be replaced in step 7 below). Save the page as a draft.
6. Upload your exported HTML 5 file to the media library in your WordPress installation. Copy the resulting URL address in full.
7. Switch back to the draft page then carefully highlight the URL within the quotation marks in the iframe shortcode you pasted in step 5. Replace this with the name of the file you uploaded.
8. Save the page and review its appearance – the uploaded map should be visible on the page in a window – if not, you may need to use scroll vertically or horizontally within the window to find it.
9. You can now experiment with both the width and height of the map window and with the controls that form part of the uploaded file. For example the window may be a bit narrow at 100%, even if the map is resized. It is possible however to increase the width over 100%, though this may affect the page sidebar if it has one.

 Customising the map – an example

For many purposes the standard map layouts will be fine but in some cases the appearance can be, well, a bit too “mappy”. If you want something a bit different you will need to choose a more appropriate layout and undertake more sophisticated formatting, but the more complex these both become the more likely the resulting export will not reflect what you want, at least initially.

Therefore there could be a fair degree of trail and error involved getting the exported map to look the way you want. As noted before, however, the HTML export process does make it very easy to trial different approaches, refining them until you get the desired result – or at least something close to it, given that there are some limitations. The following example, based on an HTML 5 map of posts made in 2016 to this website, demonstrates some of the formatting options and how to implement them.

The first step was to create a fairly standard map of the posts. There were only nine of them (I’ll concede a pathetically low number) which I organised into four groupings, as follows:

I then collapsed the map to the four main topics and exported it to an HTML 5 file. While the resulting map was functional it’s appearance was not what I had in mind:

I then experimented with a conventional tree layout and even a vertical timeline, but neither gave me the look I wanted, particularly when exported. Eventually I decided on a right-sided map:

This was closer to the mark, but I wanted the map title to be at the top. First I made the central topic “disappear” by selecting “no line” in Topic Shape in the Design tab on the ribbon and also making the topic fill colour the same as the background. Then I inserted a floating topic containing the map title above the main topics: Again I removed the topic line and made the fill the same colour as the background:

This was almost right but I went one step further. I uploaded the image header from the Sociamind blog page to Photoshop, added the title and saved the result as a new JPG file. Then returning to the map I deleted the floating topic with the title and in its place inserted the edited JPG file as a picture, taking care to remove its topic line and to ensure that the fill matched the background.

I also used the MAP add-in’s facility to apply a fixed topic width to the main topics and added a simple instruction as a fifth main topic, but one with no line and a fill colour matching the background.

Finally I went to the Show/Hide drop-down menu (in the detail section of the View tab) and unticked Revision Number and Modification date along with Main Topic Handles. The final result (which can be accessed here) looked like this when exported:

How could the HTML 5 export be improved?

There is no doubt that this is a great feature which has the potential to substantially increase exposure to mind maps and encourage their use. As I said at the beginning, however, the export process has a few rough edges which need to be ironed out. There are a few other areas for potential improvement:

1. The range of layouts that work with HTML 5 export need to be expanded – and the degree to which the process correctly reproduces these layouts improved.
2. The ability to navigate a web map should be made easier. Windows in many website templates are often constrained, which means that maps, particularly smaller ones, may not always be visible in the windows containing them.
3. The ability to access links also needs to be improved. At the moment there appears to be a bug which removes favicons and replaces then with the generic link icon, which should be fixed.
4. Going further there should be recognition that clicking on a small icon to access links may be counterintuitive for people who have limited experience of mindmaps. To make exported maps more user-friendly Mindjet should look at adding the ability to customise the size and appearance of the link and attachment icons.
5. Ideally, there should also be an option to make either topics themselves, and/or images or text inside topics, directly clickable as links to web pages or attachments.
6. Finally there should be greater opportunities to customise the appearance of the exported files, for example, the ability to add custom headers. As a start Mindjet should make it easier to remove their default logo and help elements.

bron: https://sociamind.com/2017/01/10/html-5-export/