Way Beyond Powerpoint: XML-driven SVG for Presentations

Background

This paper was presented at the XML 2004 conference, November 18 2004, at the Marriott Wardman Park hotel in Washington DC. A written version appears in the conference Proceedings at http://www.idealliance.org/proceedings/xml04/abstracts/paper156.html. Neither the written version nor this post-delivery version (packaged to be intelligible stand-alone) should be presumed to exactly replicate the paper as delivered (part of the point is don't talk from your slides!), although their content and arguments are mainly the same.

How to read this

This document is originally based on the speaker's notes, provided with links to the visuals used in the presentation. (These links can be found with the slide's respective headlines, but it is as easy to open the first of them and browse the others from there using the on-screen navigation.)

A “focus”

Nested segments like this one indicate where the focus of the discussion went; consider their headings like stage directions indicating where on screen to focus.

Inset notes like this one provide additional queues, remarks or hints. Occasionally they add information or commentary not directly related to the presentation..

The most effective way to consider this material together, in addition to reading the conference paper itself, would probably be to print this document and to browse the visuals alongside it, following the notes where they indicate a change in focus. In order to get the most out of the visuals, you should take the trouble to make yourself familiar with the user interface of your SVG viewer: typically a number of useful commands are available through the context menu (right mouse button).

Note that these visuals are in SVG, and in some cases were tuned for the Adobe SVG Viewer, version 3 (available from Adobe's SVG Viewer page. (Other SVG Viewers should work also, but had not been tested.) The images are set to display on a screen 1024 by 768 pixels in size. (In the event, the Adobe Viewer was run on Internet Explorer on a system with this screen size, maximized to use the entire screen.) If your screen is too small for this, you can use the zoom feature of your SVG viewer to compensate.

Also note that at several points in the SVG, links appear to external resources. Get very far into these and you will need to use the back button to return. An XML source and XSL stylesheet are also included in this package (and linked to from the central slide) for those who want to examine a functioning instance.

Finally, in order to reduce the size of this download from over 12MB to (only!) 7MB, some raster images were scaled down. This will not affect the presentation or any linked examples unless you try zooming in on one of these images, in which case you will hit its limits of resolution before you would if you were running the full version.

Acknowledgements

Development of this project has occurred intermittently since 2002, usually in connection with one or another presentation for which I applied this technology to develop the visuals. Some design features were worked out collaboratively with Mr Jim Surkamp of Shepherdstown WV. An earlier version of this paper was delivered at ALLC/ACH 2004 in Gothenburg, Sweden; I would like to thank that audience for useful feedback that helped refine the arguments for this fuller version. My colleagues at Mulberry Technologies, Inc., also provided support, critical attention and encouragement.

Title slide^{[link to slide]}

This photo was taken from an airplane over Western Germany (the Hunsrueck), in the Summer of 2004.

Powerpoint face off^{[link to slide]}

Clicking on either of the faces will remove them, allowing better views of the quote blocks.

This is not really about PowerPoint ...

Not even “slideware” itself is really the issue.

Zoom and pan to look at these in more detail

Being able to zoom into these block quotes makes discussing them much easier ...

Tufte

Identifies common patterns of misuse of slideware.

But ultimately, the problem is not the tool we misuse, but our misuse of it: it is us .

Byrne

Indicates how PowerPoint too is a medium, even (in the hands of an artist) an expressive one.

Back out

Of course these positions do not contradict one another.

So why ask these questions at all?

Slideware can be a problem.

Even when it's not, it may not be the best thing ever, or even the best available.

A new medium (SVG) allows us to rethink several assumptions.

The opportunity provided by a format like this can engage the present status quo by addressing its defects.

Presentations Visuals will be an interesting issue notwithstanding, raising many questions about presentations and lectures in general, and how they are best served by various media.

The SVG Option^{[link to slide]}

Zoom in on Mona Lisa

Here I zoomed all the way in on La Gioconda, to the limit allowed by the Adobe Viewer (try it: it's quite far in)

SVG has a number of advantages for presentations.

Scalability gives us an obvious way to get away from Slideware's linear organization.

Entire context is evident even as we look into detail.

It's pretty easy to code and as soon as we have patterns (“widgets”) we can automate.

Zoom out to examples

This is managed in the Adobe Viewer by centering the mouse at the upper right of the screen, then using the Zoom Out option from the context menu (right mouse click).

Surkamp example

EMDC (Eastern Management Development Center) of the US Govt (Shepherdstown WV) -- Jim Surkamp's lecture about the 1787 Constitutional Convention.

Jim came to me saying he needed visuals. But PowerPoint wasn't going to work for him. He needed something that would suit his lecturing style:

interactive, not interfering
Jim is a skilled lecturer, but not a techie
flexible (and degrade gracefully)
support, and background (a map!), to provide context for actual focus (lecture / role play / discussion)
But our solution doesn't have to scale (one-off document is okay)

I implemented the design, while Jim implemented the code in XML. Transformation into SVG and there you have it.

Results: ratings have been altogether positive; most class participants did not know this wasn't PowerPoint.

Front-end functionality (link to Surkamp)

Link to run this example live by clicking on the picture of Jim on the slide. It is convenient to open in a new window (you may be able to right-click and choose the option) to avoid having to traverse back to this point when done.

Upper of boxes to lower left switches view to start position: map at full color, delegates in the background.

In Adobe Viewer, Context menu (right-click) gives access to menu of choices.

Selecting a delegate zooms to that point.

Click on a delegate's picture to toggle the “cameo” between views.

Narrative of Surkamp presentation is strung along this track.

Choosing Full screen from context menu (right-click) resets screen; Original View restores zoom settings.

These “widgets” could be created automatically by a transform once we had identified how they were to be designed and laid out.

SVG output (View Source)

Don't neglect to look at the SVG code of the Surkamp presentation, if only to show how one doesn't want to code it by hand.

XML code source

The XML code source Jim has to compose is a simple format which he can edit readily in a text editor.

XSLT source

A relatively straightforward XSLT transform by the author is applied to the XML source to generate the SVG.

Other examples

Link or not, as time permits.

SVG and the XML Architecture

This represents an opportunity for the XML industry.

XML 2004 conference keynote addresses offered views of network effects operating inside organizations with adoption of XML.

The same thing is possible for small- and medium-sized operations as for large enterprises.

The Goldilocks problem (zoom on architectures)

(Called “Goldilocks” because in the story of Goldilocks and the three bears, she has to try all three of everything before she finds the one that fits).

Proprietary slideware app

PowerPoint or any proprietary architecture insulates application from environment.

Becomes a stovepipe (lock-in etc).

Provides user with strong interface (as far as it goes).

Some software has taken this to comical lengths (“Auto-Content Wizard”).

Roll your own

On the other hand, “coding PostScript” (Syd Bauman).

Requires much deeper expertise than XML/XSLT.

Assemble an entire team of programmers and graphic designers? (Maybe if you're a Fortune 500 company).

Standards-based development

XML is a happy in-between.

Is relatively easy to implement on top of an XML toolkit.

e.g. the stylesheet that convert's Jim's data is 21K in size; XML source and stylesheet are barely over 1000 lines of code together.

Bedrock of standards (XML, XSLT, DTD/Schema/datatypes, app standards like SVG) provides a “plateau” on which we can build.

This architecture has been explained, demonstrated, documented and presented several times:

Next session upcoming
XML 2001 (Mansfield, Philip A., and Darryl W. Fuller. Graphical Stylesheets Using XSLT to Generate SVG)
Numerous others, including a number of attendees at this conference and members of this audience.
Also ably documented in public (Eisenberg, Mangano, Mulberry's Walk the walk page, among others).

Any XML newcomers who are impressed, be informed that transformations of this kind are par for the course for XML: it may be easy or difficult, but it's done all the time.

XML really does prove to be the rising tide that lifts all boats.

XML/XSLT skills are transferable to a wide range of tasks without formal training as a programmer. Typesetters, graphic designers and English professors have learned XML and how to program for it.

This may be disconcerting if you have owned, or have depended on someone else's owning, a particular “layer” or application domain.

Particularly if it proves to be a responsible guardian, a large company may sometimes own an entire layer or domain: that's okay (anti-trust issues aside), just as it's okay to work with integrators and applications developers. Large, well-capitalized corporations are one model for software development.

On the other hand, when a free market can operate in any space, we see lots of new efficiencies, sometimes in surprising ways.

Slideware applications, or computer-driven visuals for presentations in general, have only started to live up to their potential. There is no reason PowerPoint couldn't emulate everything I have shown today. For that matter, real interoperation with XML would be a killer feature for PowerPoint — so SVG represents an opportunity not only for the little guy. In that respect this talk is not about technology and its features, but about how we relate to it.

Yet the fact that this boundaries here are moved not by any great concentration of developer resources, but only by a straightforward application of “off-the-shelf” XML technologies such as SVG and XSLT, is not insignificant. The compounding advantages of XML applications even in a loose and ad-hoc way (formal modeling is here an afterthought), prove to be extremely powerful.

Suggests ultimately that both large and small vendors stand to benefit from XML.

Standards must stay simple and the tech, lightweight.
Users/designers can and must be multi-disciplinary (like XML's inventors).
All kinds of capabilities emerge from the design/transformation skill set.
This is as true outside of big corps as well as within.
That is, XML changes what is possible.

Closer slide^{[link to slide]}

My remark on the closer slide was ad hoc, something to the effect of how it represents something about semantics and in particular about the semantics of the visual, which can be quite different from the verbal. “Here, I know this picture means something; I just don't know what.”