Intense, simple, active demonstrations

I'm starting to see more people catching on to the idea of embedding small screencasts directly into web pages. In this blog entry, for example, Pascal van Hecke uses the technique to illustrate a nice recipe for organizing what he calls loose MP3s -- that is, MP3 files that are linked from web pages you visit. The first half of the recipe involves a simple Greasemonkey script that rewrites the page you're on to include the same inline MP3 player that's used on pages like To see the player in action, click one of the right-pointing blue arrows on that page.

The second half of the recipe involves using the tag this option that appears when you activate the player. As Pascal's screencast illustrates, will generate a podcast-style feed (i.e, an RSS feed with enclosures) for URLs that point to MP3s. His method, which I'm now using as well, is to preview an MP3 file using the inline player and, if it's interesting, bookmark it with the tag tolisten. Then you can use a podcatcher to subscribe to the generated feed, e.g.:

By the way, although Pascal's screencast suggests that you have to assign tags like system:media:audio or system:media:mp3 to make this work, it appears that will just infer those tags if the URL ends with an MP3 filename.

I found another nice example of embedded screencasting on the CoComment start page. It's just a little animated GIF that shows Firefox users how to drag the button that represents the bookmarklet to the toolbar. Here's one frame1 from the animation:

You can see the animated version here.

The more complex procedure for IE users isn't illustrated in this way, but if it were, that would be more focused and effective for this purpose than my standalone Bookmarklets 101 tutorial.

Edward Tufte's mission statement for sparklines is: intense, simple, word-size graphics. In a similar vein, there's an emerging species of embedded screencasts for which the mission statement might be: intense, simple, active demonstrations.

1 Note to my future self, and others needing to learn (or remember) how to extract one frame from an animated GIF using ImageMagick:

convert animated.gif[0] frame0.gif

Former URL: