clickable concept map

February 24, 2007 2:43 PM

How did he make this? Its a 'clickable concept map' on a webpage. Any ideas? What software to use, etc? Easiest way to create something like this?

Check out this link (which was posted on boingboing).
http://navigator.carolon.net/
Click on the 'start' button on the page. It takes you to a 'clickable concept map'. It seems different from a regular file directry tree that one sees on websites. Is there a specific program that creates 'clickable concept maps' like this? When you click on a branch, it expands; you can 'navigate' through the whole concept map. Annotated notes can appear in the bottom pane.
I'm definitely an html noob, but I've never come across something like this on websites. Seems very useful especially for education sites (as this one is, too; and as boingboing describes it: "intuitive" and "groovy", indeed).
I'm just wondering if there is a standard software package that can easily produce such clickable concept maps.

posted by jak68 to computers & internet (20 comments total)

(sorry for not linkifying the link - here it is:)
http://navigator.carolon.net/
posted by jak68 at 2:48 PM on February 24, 2007

Looking at how the example page was implemented, it looks like they had a tool to do it. They have more than 100 (didn't go too deep) html pages with all the various combinations in it.

I've never seen any software packages that did that, but I can't imagine it'd be hard to hack one together. You'd need a definition file with all the details, and then just run the (not yet written) program against it, and it would generate all the pages.

I'd like to know if a program like this exists as well, because if it didn't, I could probably be convinced to hack something together.
posted by cschneid at 2:59 PM on February 24, 2007

Yes, i'm very interested in knowing if there was a specific program that made this. I was hoping the hive-mind here might know... ;)
Else i'll have to bother the author with an email ;)
posted by jak68 at 3:06 PM on February 24, 2007

Something I've learned is that 99% of people appreciate an email. I've emailed blog authors, and asked a question, and they were happy to explain what I had asked. Go ahead and email the author to the tool, the worst that can happen is they ignore you.
posted by cschneid at 3:30 PM on February 24, 2007

eh, about 11 years ago I did something almost exactly similar using gd and imagemaps and some custom pre-generating type code. nowadays it would likely be much more dynamic (and less kludgy), but in any case fairly trivial (esp with the sort of tools available today)

really, why not write your own. it is honestly not that hard, and would be quite a nice learning experience.
posted by dorian at 3:40 PM on February 24, 2007

googling "converting mindmaps to html" might get you some good info. Also, a lot of the mindmap programs export xml that could get made into something like this.

Some mindmapping programs:

Dia (free)
cmap tools (free)

mindmanager
mindmap
inspiration
posted by craniac at 3:46 PM on February 24, 2007

Emailing him... I hope he responds. I'll post any results here. Meanwhile - any other ideas ;)

Could it have been Visio? Does Visio export to flash or html?

I thought about desktop mindmap apps that export to html. I use Conceptdraw which exports static html pages with images. His map though seems far more dynamic than that. Each object is clickable; the page changes seem very organized.
posted by jak68 at 3:56 PM on February 24, 2007

The fact that the extensions are all caps'd ".HTM" makes me think it's a microsoft product.
posted by frecklefaerie at 4:14 PM on February 24, 2007

While waiting for a response and poking around on google, came across this: A flash reader for freemind (which is an opensource concept mapper). The results are impressive and along the lines of the 'copyright navigator' example above. Apparently its still being developed tho (ie, has limits, is buggy), but check out the possibilities:

- a brilliant example

- info at freemind page

- info on the flash browser

- notes from techblog writeup
posted by jak68 at 5:15 PM on February 24, 2007

Visio exports to HTML & that looks very Visio-like, especially some of the icons.
posted by Good Brain at 5:18 PM on February 24, 2007

Those are image maps - there are tons of image map utilities out there. The images could have come from Visio (and there may be an image map utility with it.)

The image maps were then placed in MS Frontpage 4.0 HTM files (this shows up in the meta tags if you view the source on different pages).
posted by fluffy battle kitten at 5:29 PM on February 24, 2007

Ok, given the above and additional poking around, my best guess:

-He seems to have used image maps, with visio or front page, and a very labor-intensive page layout method similar to whats described in these instructions on prototyping a website.
He seems to have placed/wrapped the resulting code in a regular page frame on the right side of the page.

Image maps can be made directly in Visio, frontpage, dreamweaver, etc. Even Powerpoint can apparently hyperlink slides and export as image maps in html code.
Not to mention lots of free image map standalone utilities.

The hard work here, then, was laying out the pages of his flowchart (100 plus pages), and hyperlinking each via the image maps method. Extremely painstaking, and the illusion of fold/unfold behavior was created simply by page-flipping and helped by simple graphics that loaded in an instant. The result, however, is functionally very fluid and 'browsable'.

-If that is what he did, then I suppose a follow up question would be: Is there any way to create a "true" fold/unfold on the branches of a concept map in a webpage? (and not just via fast page loads?). Any program out there that can be used to design/create a true fold/unfold?

I suppose the freemind flash reader linked above comes close. Cmap, also mentioned above, looks pretty as well but isnt as fluid since it reloads whole page much more slowly.
posted by jak68 at 8:10 PM on February 24, 2007

You can do similar web-based stuff using Freemind.

An example.
posted by lunchbox at 8:55 PM on February 24, 2007

Oops, sorry for the redundant post. Good Brain had it.
posted by lunchbox at 8:56 PM on February 24, 2007

...I meant jak68.
posted by lunchbox at 8:57 PM on February 24, 2007

In a professional context these kind of tools can be called a number of things: knowledge management, ontology browser, ontology viewer, ontology navigator.
Here's an example of an ontology browser in a medical setting.
Really good ontology browsers are commercial and expensive.
posted by jouke at 10:38 PM on February 24, 2007

Business related Process Modelling tools include Casewise Corporate Modeler that includes the functionality to generate this type of thing in HTML.

However, suspect this might be over-kill for the purpose you describe.
posted by pettins at 1:09 AM on February 25, 2007

Prof. Sobel (the author of Copyright Navigator) responds:

"I created the all of the Navigator slides -- including the links among them -- using PowerPoint. To create the charts, I used the shapes and lines available from PowerPoint's "Draw" toolbar. To create the links, I used PowerPoint's "Hyperlink" feature.

I then converted the PowerPoint slides to html using a program called PPT2HTML. It's available here: . I used this program, rather than PowerPoint's built-in "Save as Web Page" feature, because PPT2HTML creates very clean, uncluttered html code, while PowerPoint's built in "Save as Web Page" feature creates complex html code that I have difficulty understanding.

I needed clean and uncluttered code because in order to link to sections of the Copyright Act, I had to edit some html code "by hand." I was able to find the code that needed editing when I used the code generated by PPT2HTML, but couldn't do so when I used the html code generated by PowerPoint."

So we were pretty close! Thanks for the responses, everyone.
posted by jak68 at 2:41 PM on February 25, 2007

sorry, the PPT2HTML link Prof. Sobel mentions is here.
posted by jak68 at 2:42 PM on February 25, 2007

csshneid said:
"I'd like to know if a program like this exists as well, because if it didn't, I could probably be convinced to hack something together."

Cschneid, if you do I'd be willing to buy it for a reasonable shareware price. ;) I'm qute sure a lot of others would too.
posted by jak68 at 4:34 PM on February 25, 2007