Leverage Outline Transclusion
activeRenderer tutorial - part 7
What are we talking about ?
Transclusion is hardly a new concept, Ted Nelson came up with the idea and christened it transclusion in the early sixties: instead of copying an existing information and pasting it into some new content (the way Xerox then Apple popularized later), better to create a link through a universal network to the unique original so that it appears inside its new context.
A visionary idea, specially since the Internet wasn't even in prototype stage. It never gained critical mass though, despite Ted's best efforts.
Almost 40 years later, Dave Winer and the Userland team raised the ante when pioneering outline transclusion within Radio's built-in outliner. Dave refers to outline transclusion as 'inclusion'.
In October 2002, after some experimenting and a little help from my friends, I achieved the same transclusion effect inside a web browser, gradually expanding it to most Web popular multimedia formats.
Browser based transclusion replaces the now classic Web hypertext link, which substitutes the linked material to the current window's content (or opens it in a new window), with a more sophisticated inclusion of the linked material inside the current web page, preserving the viewing context.
Step 1: A picture is worth a thousand words.
Click the camera icon which replaces the 'standard' wedge at the left of this paragraph.
How cool is that ? Now try resizing your browser window, reload/refresh this page and try again.
Got the picture ?
The transclusion property lets you create a sort of 'attachment' to an outline node (or paragraph).
But unlike an email attachment, the attached content is not part of the document: the outline only carries a link to the attached content.
Any 'linked' picture, in JPG, GIF or PNG format, is loaded over the Web, resized according to the current width of the paragraph it is attached, and inserted in the outline as a child node of the current one.
Thereafter, you can collapse and expand the parent paragraph to hide or reveal the picture.
Step 2: But it's not only about pictures...
Click the 'film reel' icon on this node.
Macromedia Flash animations (SWF files) are rendered like pictures. So are Apple Quicktime movies (MOV files).
I have plans to support Microsoft AVI, Real RPG and generic MPEG movie formats in a not too distant future.
As with the picture example in Step 1, the first child node of Step 2 only carries a 'link' to the attached multimedia content.
Step 3: And it's even worse than it appears :-)
Now click on the 'up arrow' icon that serves as this node's wedge.
How weird! This outline expands into itself, it literarily has no end :-)
If you are reading this under MacOS with Microsoft Internet Explorer 5.2 or Apple Safari, then the included outline opens in a different window in your browser. There is a bug in the current MSIE that prevents the inclusion Javascript code to work, and Safari does not seem to be standards compliant enough yet.
I received reliable information that the bug was indeed corrected in the MSIE 6.0 source tree. The only problem being that Microsoft will never release any MacOS 6.0 version :-)
I need to check newer, MacOS 10.3 only versions - mine is only 1.0.1 (v85.6) - to see if there has been recent progress with Safari.
Of course, it's far more interesting to include other OPML outlines. This way, they can be expanded inside the current page, preserving the context around the linking node.
There's more: click the 'up arrow' wedge at the left of this paragraph.
activeRenderer can display RSS news feeds as outlines, allowing their insertion in regular outlines.
Outline inclusion also allows the creation of distributed directories, as you can see by clicking on this paragraph's wedge.
If the linked content is simple HTML, as opposed to OPML/RSS/GIF/JPG/PNG/SWF/MOV, the link is rendered as a small 'page' icon in the wedge, and it opens in a new window when clicked.
Step 4: Creating included content with Radio's outliner.
First: what is needed to create outline inclusions ?
It certainly helps if you have an outliner available :-)
If you're a Radio Userland blogger, then you're in business.
You also need the complete URL (or Web address) of the content you want to include in your outline.
For instance, the URL of this document is: http://www.activerenderer.com/opml/tutor/aRTutorial7.opml.
This is an outline I saved on my local machine, in the www:opml:tutor folder (I'm using a MacOS X Powerbook laptop).
All files saved under the opml folder are upstreamed to your weblog's public site without any rendering.
The URL for the Gisele Bundchen picture in step one is: http://www.activerenderer.com/images/tutor/gisele.jpg
This is a JPEG image file I saved in the www:images:tutor folder in my laptop.
All image files saved under the images folder are also upstreamed to the public site.
I could have used the orginal URL for the image just as well: http://www.keg.com/bgs/runway/jens/Gisele-gibue015.jpg
But this server seems to be under a lot of pressure these days :-)
Start by creating a new outline as described in Tutorial 1 - or load an existing outline into the outliner.
Then select the node where you want the included content to appear.
This node will become the parent node of the included content. With the current version of activeRenderer, it should not have children nodes.
To add the link to the included content, select the Outline / Add Link menu option (cmd-K under MacOS, ctrl-K under Windows)
In the small window that pops up, type in, or paste in the URL to the document you want to attach.
Click Ok, you will notice that the node's wedge in the outliner has changed to an up-arrow.
Now save your outline and check the rendered version as described in step 5 of Tutorial 1.
Step 5: OPML links nuts and bolts.
In the OPML format file your outline is stored in, there is one outline tag per outline node.
The textual content of the node is coded in the aptly named text attribute of the tag.
Inclusion links are coded as type and url or xmlUrl attributes of the outline tag.
The OPML specification is extremely loose, to the dismay of most XML literati.
Dave Winer, who invented the format, recommends that when specifying a link to some RSS content, usually in a subscriptions directory, one uses type="rss" with xmlUrl="some_url", and type="link" with url="some_url" in all other cases.
I think it makes sense to extend the type attribute values to describe all the formats possibly linked to an outline node, while standardizing in the url attribute (over xmlUrl) for specifying the link's destination.
But this is part of a discussion on the future of OPML, which has no place in this document :-)
Outline transclusion, or inclusion, is a way of creating richer online documents, preserving both the integrity of the reference original and the context in which it is viewed. Another of activeRenderer's tricks lets you add RSS content inside your published pages: check out part 8.
