Maps/drawings/diagrams with "clickable" web links

Open Learning Commons (Meta)
1

Writing text on web pages is easy. Creating maps – drawings or diagrams with links to other pages – requires more effort.

The current standard way of creating maps (HTML5, onwards) is with Scalable Vector Graphcs (SVG). There are free (and/or open source tools that can help with this.

A popular open source SVG editor is Inkscape. From this, you can create SVG from scratch, and then edit. This has the advantage of power … and the disadvantage of sufficient options to confuse the novice.

  • An easier path is to start off with LibreOffice Draw, that more simply draws shapes and enables positioning of text. One the map has been created, there’s the option to …

    • Export as SVG (which could then be embedded into a web-oriented HTML document, or further edited in Inkscape); or
    • Export as WMF, PDF or other options, to be used in a page-oriented document…

An easy way – free, but not (yet fully) open source – is to use diagrams.net (renamed from draw.io in February 2020).

A prior open source technology that is no longer under active development is the Visual Understanding Environment (VUE) from Tufts University.

There is a variety of other ways to create pages with SVG content. For a person used to coding HTML, there’s a small learning curve to do so.

[I can edit! Benjamin…]

2

Helpful to have all these references in one place, thanks,

3

Or another alternative is HTML image maps, which are in HTML for a very long time now (I even made a bad little editor myself back in Web 1.0 days). Composing a larger image from smaller ones with CSS and have the individual images clickable might be another option, or just go with a rendering engine for a HTML5 canvas. Not sure about the CSS option, but HTML Image Maps, SVG, HTML5 canvas are fairly trivial to set up for presentation and developing an editor for it, which is why there are plenty of editors and components already out there. Keep in mind that they have different rendering properties, fitting better or worse for certain use cases.

4

Thanks for the responses, @zaid_khan @skreutzer .

This entry is an experiment using the wiki function on Discourse, based on conversation about a potential use by @antlerboy with @Robert_Best . If you can make additions or edits (even changing punctuation satisfies the test!), we would appreciate your participation!

Most pages on discuss.openlearning.cc are straightforward forum entries. We’ve created Wiki as a separate category, as the commenting feature would be complemented by crowdsourced editing (and reversion, if we errors crop up).

1 Like
5

Oh, OK, wasn’t apparent :slight_smile: Kind of problematic with Discourse appearing to be a board-/forum-like UI, therefore having the talk-/discussion page right below what would be considered the canonical, collaborative article (we’re not editing each other’s replies, are we?), with little indication that this is what’s going on.

In terms of this specific content, who has an interest in or need for clickable portions in an image for UI programming or content creation? Little bit too busy to simply write articles about a random topic that may come along, and there’s plenty to write about, many topics, for/in/at many “places”. On the other hand, with a lot of work, maybe the content on this Discourse could be developed into a decent/interesting/useful collection, for which, ironically, I would assume that the conversational discussion/replies/talk-page would get stripped first, right? :slight_smile: And what about the other wiki you already also have and is running?

6

Success. I can see that @antlerboy did a “Kilroy was here” addition.

The history of edits shows up with a pen-on-paper icon. Mousing over it gives information on the last edit.

image

Going into the history, I can see that it’s easy to revert or redo edits.

First we understand the technical features, and then we can figure out the social affordances. We’ll have to see if there’s dissonance between the comments and the main content. On Wikipedia, the “Talk” is on a separate tab, and not many people go there.

Different wiki technologies may suit different use cases. The specific one we’re testing for, here, is an easy place to crowdsource small revisions to a podcast transcript. It looks like it’s feasible on the Discourse technology … and if we don’t need too many other features, we won’t have to mess with more signup and authentication subsystems.

1 Like