I've created a framework that translates XML into visual graphics. I want to showcase the main features of my framework on the web and wonder what the simplest approach would be. I'd like to show XML being written and the visual effects it has (in form of static or animated images). I'm not up-to-date with web-development so I'm not sure if there is any tools available for showcasing things like this. I'd like to avoid having to record and edit videos and would rather script the sequence.

The simple sequence would be:

  • Show three lines of XML being written.
  • Show some popup text explaining what is done.
  • Cut to a static image/gif.
  • Cut to more XML being written.
  • Show popup text.
  • etc.

Features I'm looking for:

  1. Allow the user to forward/rewind/pause the sequence.
  2. Easy to edit/change the sequence.
  3. Clear and readable (mainly when showing the popup text and code) that doesn't require the user to maximize the "video".
  • This doesn't appear to be a UX question but rather a production question. – DA01 May 13 '15 at 16:41
  • It's hard to see the lines when you're straddling the sides as a solo developer :). I'm looking for providing a good user experience not just solving a technical problem. – Pking May 13 '15 at 16:51
  • For the type of audience I assume you may be targetting, I'd say a link to a live code example may make more sense. Otherwise, a simple video presentation would hit most of your features. Just keep it short. – DA01 May 13 '15 at 17:09
  • It looks like the best reference would be HTML emulators, e.g. jsfiddle, htmledit, w3schools tryit. – Vitaly Mijiritsky May 13 '15 at 17:11

The best example I've seen for this kind of demonstration comes from Bret Victor: http://worrydream.com/#!/LearnableProgramming http://worrydream.com/LadderOfAbstraction/

Both pages are rather long, but as you read through the articles there are many cool examples that have inline videos and interactive graphics that you can scrub through to see the cause and effect. There are even sections where the example code itself is interactive and you can drag variables to see what would happen when you change them.

  • Those are really cool examples :). – Pking May 13 '15 at 14:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.