Web-Based Presentations

XML-Tage Berlin 2007

Erik Wilde, iSchool, UC Berkeley
Philippe Cattin, ETH Zürich
Felix Michel, ETH Zürich
September 24, 2007; Berlin, Germany
Creative Commons License

This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 2.5 License.


The management and publishing of complex presentations is poorly supported by available presentation software. This makes it hard to publish usable and accessible presentation material, and to reuse that material for continuously evolving events.
Hotspot provides an XSLT-based approach to generate presentations out of a mix of general-purpose HTML and a small number of presentation-specific structural elements.
Using Hotspot, the management and reuse of complex presentations becomes easier, and the results are more user-friendly in terms of usability and accessibility.


A Word of Precaution First


Outline (Motivation)

  1. Motivation [2]
  2. Hotspot [14]
    1. Hotspot Extensions [2]
    2. Kilauea [7]

Presentation Software Today

Use Case Scenario


Outline (Hotspot)

  1. Motivation [2]
  2. Hotspot [14]
    1. Hotspot Extensions [2]
    2. Kilauea [7]


Hotspot Architecture

Features: Listings

Hotspot Extensions

Outline (Hotspot Extensions)

  1. Motivation [2]
  2. Hotspot [14]
    1. Hotspot Extensions [2]
    2. Kilauea [7]


  • The Formu\LaTeX extension brings the full power of \LaTeX to Hotspot
  • \LaTeX code can directly be inserted in <tex/> elements:
    <tex>$\calF{F}\{f(x)\} = F(u) = \\
  • The Formu\LaTeX extension then produces image files and alignment information, and the formula looks...
    <img src=... alt=$\calF\{f(x)\} = ...
         style=height: 5.37ex; 
                vertical-align: -2.11ex; />
  • ...just perfect: $\calF{F}\{f(x)\} = F(u) = \int_{-\infty}^{\infty}f(x)e^{-j2\pi{}ux}dx$

FormuLaTeX (II)

  • Furthermore, \LaTeX packages can easily be included:
    <tex pkg="amsmath">...</tex>
  • The Formu\LaTeX extension is implemented in Perl and XSLT
    • all you need is Perl and a working \LaTeX installation
  • A caching mechanism ensures economic processing and no redundant HTTP transfers


Outline (Kilauea)

  1. Motivation [2]
  2. Hotspot [14]
    1. Hotspot Extensions [2]
    2. Kilauea [7]


  • Browser-based slideshow presentations
  • Implemented with Javascript and CSS
  • Cross-browser operation
    • No substantial browser-dependencies

      Tested Browser Chart:

      Browser Version OS
      Firefox 1.5 OS X 10.3
      2.0 OS X 10.4
      Windows XP
      Camino 1.0 OS X 10.4
      Safari 2 OS X 10.4
      Safari 3 beta OS X 10.4
      Konqueror 2.4 Linux
      Shiira 2.0 beta OS X 10.4
      Opera 8.45 Linux
      9.22 Linux
      OS X 10.4
      MSIE 6 Windows XP
      MSIE 7 Windows XP
    • No plugins required

Kilauea Features

  • True hypertext:
    • Structured content (including parts and sub-parts)
    • Logical, not physical, markup
    • Hyperlinks (link to parts, slides, and everything else)

      In the latter case, the hyperlink target is formatted via:

      #fourier:target { border: 1ex solid #36C; }
  • Flexible (wide variety of initialization configurations)
  • Customizable (e.g., via CSS)
  • Extensible (sophisticated plugin architecture)
  • It is possible to embed presentations

Kilauea Javascript

  • Localization support
  • Small footprint (24 kB packed)
  • Backwards-compatible with Slidy
  • State-of-the-art Javascript:
    • Inserts only one variable into the global symbol space
    • Browser-independant, W3C-like event model
    • → no problems with third-party Javascript
  • Offers custom events (e.g., slideChange events)

Kilauea Plugin Architecture

  • Plugins unleash the true power of Kilauea
  • Plugin development is easy with Kilauea, but almost impossible for existing presentation software
  • Extensive developer documentation eases plugin development
  • Architectural details:
    • Plugins are identified by URIs
    • Object-oriented: each plugin is a class, which inherits some utility properties
    • Plugins are loaded at run-time
  • Currently available plugins include:
    • remote: Support for distributed, remote presentations
    • logger: Sophisticated logging facilities
    • doublescreen: Presentator mode with two browser windows

Remote Presentations

Logging Facilities

  • Sophisticated logging and evaluation of presentations
  • Export as HTML or CSV


  • Currently, we are working on a plugin which enables basic transition effects
    • This might not seem to be very important, but it is a nice-to-have for moments like today's presentation
    • Once the transition plugin has been included, transitions can be assigned to slides in a declarative way:
<div class=slide transition:fade</div>
    <li>Currently, we are working on a...