A little history . . .

• Epidiascopes, glass slides and opaque objects
• 35mm slides and hand drawn foils
• The impact of inkjet printers
• Video projectors and the emergence of PowerPoint
  • 1987 Forefront's black and white slide maker for the Macintosh
  • Microsoft spots the opportunity and buys Forefront
  • 1990 - PowerPoint becomes part of the Microsoft Office suite
  • Comments on the cult of PowerPoint

    The Globe and Mail, September 6, 2002

    It’s the most misused technological innovation since the handgun. It’s a major reason why business leaders give less effective speeches and presentations today than they did just a few years ago. It’s PowerPoint – and it now ruins more presentations than it helps.

    Edward Tufte, Wired, September 2003
    PowerPoint is Evil, Power Corrupts, PowerPoint Corrupts Absolutely

• The emergence of Web-based alternatives
  • Pouring more gasoline onto the fire?

Web Presentations

The promise . . .

• Web-based alternative to PowerPoint
• No more need for large email attachments
• Just include the link to your slides
• Create and update your slides in your web browser
• Record and share the audio as well!
• Integration as part of Web meeting frameworks

Background

• W3C Slidemaker tool which splits an HTML file into individual slides with navigation buttons
• Opera Show and CSS @media projection
• Using Web page scripts to simulate paged media
• Pioneering work by Tantek Çelik
• Eric Meyer's excellent S5
• Dave Raggett's HTML Slidy

HTML Slidy

• Web-based alternative to PowerPoint that works on Firefox, Opera, Safari and Internet Explorer
• Uses JavaScript to render div element's as slides via CSS positioning
• Clean XHTML markup with linked CSS style sheet and script
• Slidy's style sheets and script available free under W3C's software licensing and document use policies
  • You are recommended to link to the slidy script at W3C rather than to your own local copy
• Three benefits of web applications
  • Automatic access to bug fixes and enhancements without the need to install upgrades on a zillion machines
  • Your slides won't be lost if your laptop is stolen or your hard drive fails
  • Web applications are often free (c.f. Windows apps)

HTML Slidy Features

• Each slide marked up in a div element with class="slide"
  • Slides are visible with JavaScript turned off
• Font size automatically adapts to window size
• Incremental revealing of slide contents
• Outline lists for revealing hidden detail
• Different backgrounds for different slides
• Handout notes with <div class="handout">
• Automatically created table of contents
• External link to a given slide in a presentation
  • This slide's URI is http://www.w3.org/2006/05/Slidy-XTech/#(6)
  • Slides are trivially bookmarkable
• Links between slides in the same presentation

Incremental display of slide contents

For incremental display, use class="incremental", for instance:

• First bullet point
• Second bullet point
• Third bullet point

which is marked up as follows:

<ul class="incremental"> 
  <li>First bullet point</li> 
  <li>Second bullet point</li> 
  <li>Third bullet point</li> 
</ul> 

You can also set class="incremental" or "non-incremental" on individual elements (except for <br />)

Use Pg Up and Pg Dn keys to skip over incremental content for faster navigation between slides

Incremental display of layered images

These can be marked up using CSS relative positioning, e.g.

<div class="incremental" 
 style="margin-left: 10em; position: relative"> 
  <img src="face1.gif" alt="face" 
   style="position: static; vertical-align: bottom"/> 
  <img src="face2.gif" alt="eyes" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face3.gif" alt="nose" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face4.gif" alt="mouth" 
    style="position: absolute; left: 0; top: 0" /> 
</div> 

Create outline lists with hidden content

You can make your bullet points or numbered list items into outlines that you can expand or collapse

• Just add class="outline" to the ul or ol element. Click on this list item for more details.
  • The Slidy script will then treat the list as an outline list.
  • Clicking on outline list items will expand/collapse block-level elements within that list item.
  • Click on the above to make this list item collapse again.
• Users will then see expand/collapse icons as appropriate and may click anywhere on the list item to change its state. This particular list item can't be expanded or collapsed.
• Add class="expand" to any li elements that you want to start in an expanded state.
  • By default Slidy hides all the block level elements within the outline list items unless you have specified class="expand".
  • Such pre-expanded items can be collapsed by clicking on them.

Slide Backgrounds

• Use CSS to style slides directly

  div.slide { CSS properties }

• Sub-class slides for slide specific styles

  <div class="slide title">
  
  div.slide.title { CSS properties }
  

• For extra control use markup

  <div class="background">
    ...
  </div>
  

• Use explicit backgrounds when you want to
  • Stretch background image to cover entire slide
  • Position text and graphics as needed

Slide Backgrounds

The background for this presentation is defined as:

<div class="background">
  <div class="margin">
    <div class="header">
    <!-- sized and colored via CSS -->
    </div>
    <img class="sharpener" src="sharpener.gif" alt="sharpener" />
    <img class="pencil" src="pencil3.gif" alt="pencil" />
  </div>
</div>

with the following CSS rules

div.margin {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("binding.gif") transparent top left repeat-y;
}
div.background img.pencil {
  position: absolute;
  bottom: 0.5em;
  right: 0;
  z-index: 21;
}
div.background img.sharpener {
  position: absolute;
  bottom: 0.4em;
  left: 0.8em;
  z-index: 21;
}

Include SVG Content

Inclusion of SVG content can be done using the object element, for example:

has been achieved by:

<object data="example.svg" type="image/svg+xml" 
  width="50%" height="10%" title="Indian Office logo"> 
    <img src="example.png" width="50%" 
          alt="Indian Office logo" /> 
</object> 

This ensures that the enclosed png is displayed when the browser has no plugin installed or can't display SVG directly.

However, there are caveats, see the next slide!

Caveats with SVG+object

There is a serious bug in IE6+Adobe Plugin that can create problems. Namely:

• IE6 makes a copy of the SVG file on the local disc when displaying it; but doesn't pass the original URI to the plugin
• As a result relative references from within the SVG to external resources (scripts, CSS, images, other SVG) will break.
• The work around is to use absolute references within your SVG.
• This problem doesn't effect Mozilla/Firefox. No idea as to whether it will be fixed in IE7.

On Windows, the Adobe SVG plugin doesn't respect the CSS z-index property, and if used on backgrounds will always show through other content.

Most browsers only support SVG Tiny, which doesn't support external style sheets or style elements within SVG.

Are there any tools for downgrading SVG to SVG Tiny?

Miscellaneous Features

• Slidy Footer
  • Press "F" key to toggle visibility of Slidy footer
  • Links to help and table of contents
  • Automatically generated slide numbering
  • Incremental display indicator (is there more to reveal?)
  • Optional copyright statement set via meta element, e.g.

    <meta name="copyright" 
    content="Copyright © 2006 Dave Raggett" />
    

• Restart link for Konqueror which doesn't supply events for Home and Cursor Left keys
  • Without restart you couldn't easily go back to the beginning of the presentation, but this was before table of contents mechanism was added
  • Will probably drop this feature in favor of edit link!
• Manual control over font size via "S" (smaller) and "B" (bigger)
  • Slidy automatically sets body font-size property based on window size

Localizaton

Slidy now includes support for localization

• The tool bar is localized according to the language of the presentation
  • This is taken from the xml:lang or lang attributes on the html element
• The help file is selected based upon your browser's language preferences
• As of 18th March 2006, the languages supported are: English, Spanish and Dutch
  • Volunteers are needed for other languages
  • The following illustrates what was used for Spanish

// for each language there is an associative array
var strings_es = {
  "slide":"pág.",
  "help?":"Ayuda",
  "contents?":"Índice",
  "table of contents":"tabla de contenidos",
  "restart presentation":"Reiniciar presentación",
  "restart?":"Inicio"
   };

Slidy implementation notes

• Slidy is designed to work on most modern browsers
  • Firefox, Opera, Safari and Internet Explorer 6
  • Slidy is evolving in response to user feedback
    • Incremental display, Contents, Handout notes, etc.
    • User complaints on wysiwyg editors and div elements
• IE6 woes
  • Working around lack of support for CSS fixed positioning
  • Having to manually set styles on elements added through the DOM
  • Failure to support background on li for print media
  • Failure to scale bullets with font size
  • PNG transparency bug (fixed in IE7)
  • Image toolbar pop-up and galleryimg="no"

Slidy implementation notes

• Other problems
  • Using setTimeout to work around reflow bugs
  • Konqueror, Opera 8 not providing events for all keys
  • Browser variations for history and location field
  • Workaround for Firefox SVG reload bug
  • Workaround for percentage widths on SVG and Flash
  • Work around for CSS background images Save As bug
  • Printing and onbeforeprint, onafterprint events
  • Suppressing the loading "flash"
  • Including outline list items in the tab sequence

Further work

• Slide editor (see screenshot)
  • Using contentEditable/designMode when available, otherwise falling back to textarea and plain text conventions
  • Using XMLHttpRequest to dynamically reflect changes to server
• Mechanism for remotely driving Slidy as part of distributed meetings
  • Using XMLHttpRequest to listen for navigation commands
  • Using VoIP for accompanying audio and teleconferencing
    • controlled via HTTP requests
  • Synchronizing recorded spoken presentation with currently viewed slide
• Filters
  • Server-side import from PowerPoint and Open Office
  • Export to PDF via PrinceXML
  • Transformation of SVG into VML for Internet Explorer

Browser-based editing

• Slidy supports very simple markup, but many people still find HTML too difficult to edit directly
• The Challenge -- to develop a Web-based editor that is at least as easy to use as Microsoft PowerPoint, and which works on all modern browsers without any need for plugins
• The editor should enable editing of presentations, one slide at a time, including graphics
• Slide templates for title slides, bullet point slides, etc.
• Simple selection of predefined presentation themes
• A server-side script (written in Perl) supports uploading of new or updated presentations
  • Could use XMLHttpRequest for synchronizing changes as you move between slides

Plain Text Editors

• Standard HTML forms doesn't support rich-text editing
• Work around by using plain text conventions that the script can map into markup
• Wiki markup as an obvious candidate
• Usability problems with textarea element
  • MediaWiki requires list item text to be on one line
  • But was the line wrapped by the browser or did you press the Enter key without realizing?
• Bigger problem is that the users who find HTML difficult also find wiki markup difficult

Wysirwyg Editing

• Could we override the behavior of the textarea element to provide a rough approximation to what you see is what you get?
• Think of this as what you see is roughly what you get (wysirwyg)
• Here is an example for a nested list:

   * The first point
  
      - A subsidiary point
  
   * The second point
  

• Pressing the Enter key starts the next list item and inserts the bullet symbol, this can be reversed by pressing Backspace
• Pressing Enter twice gets you out of the list altogether

Implementation challenges

• To achieve this, the script needs to be able to
  • Intercept and override the default behavior for key strokes
  • Locate and set the position of the text editing caret
  • Insert and remove strings
  • Determine the current text selection
  • Wrap text within the view and indent as needed
  • Override the default behavior for cut and paste operations
• The above is hard to do with current browsers
  • DOM2 ranges work well on most browsers but are not supported by IE
  • Work around by pasting test string, searching for it and removing it
  • On Firefox, it is hard to measure width of textarea element in characters, necessitating the use of a hidden dummy element
  • Opera 8 has buggy support for keystroke events (should be fixed in Opera 9)

Wysiwyg Editing

• IE, Firefox, Safari 1.3 and Opera 9 all support designMode
• This offers limited wysiwyg editing support, but the markup it produces is pretty ugly
• There are a number of script libraries that exploit it to offer HTML editor components for use in web pages, e.g. WidgEditor, FCKEditor and TinyMCE
• The markup can be cleaned up when exporting the edited markup
• But there are problems with that approach
  • It is too easy to accidentally delete structural markup, and this causes major usability problems
  • The default behavior doesn't match what you would expect for a slide editor
• The solution is to implement the model-view-controller design pattern and completely override the browser's built-in behaviour!

Implementation Challenges

• Finding the current caret position in designMode proved to be extremely hard with Internet Explorer
  • If anyone from Microsoft's IE team is present, please please please make this easier!
• The editor needs to be fully accessible
• This includes being able to drive the editor from the keyboard without the use of a mouse or trackpad
• Adding an event handler for mouse clicks to images makes for nice looking, but inaccessible controls
  • On IE6 and FireFox 1.5 you can add an img element into the tab index by including the tabindex attribute with the value of zero or a positive integer
    • Will Safari, Opera and other browsers support this behaviour?
  • A more broadly supported solution is to wrap the image in a button element and use CSS to override the button element's default border style

Template based editing

• What should the Slidy editor look like?
• Should be easy to learn for PowerPoint users
• When adding a new slide, you are invited to pick from a list of slide templates
• The template defines a number of fields that you have to fill out, e.g. title and description for a title slide
• The template fields are protected from accidental deletion whilst editing
• This is implemented by overriding the behavior of the Backspace and Delete keys
• This is very much work in progress, and not yet ready for release

Screen shots for IE6 and Firefox 1.5

Adding an audio feed to Slidy

• Saving a presentation without the audio is like a sandwich without the filling!

The following components are under consideration:

• An open source browser plugin that can capture audio from the microphone and stream it to the server via RTP and iLBC or Speex
• A server-side module for saving the audio to a file
  • Implemented as an http application server using epoll for event driven IO, this is accessed via a regular HTTP server, e.g. Apache
• Using XMLHttpRequest to log the times of slide transitions

Adding an audio feed to Slidy

For replay the following occurs:

• The web page loads the slides and uses XMLHttpRequest to load the log file with the slide transition times
  • The web page decodes the log file's URI from the fragment identifier for the web page URI
• XMLHttpRequest is used to request the streaming of the audio file, the server responds with the IP address and port number for the RTP connection
• The Web page commands the browser plugin to stream the audio to the local audio system
• If the user manually moves to a slide, the script uses XMLHttpRequest to command the server to seek to the appropriate point in the stream

Integration as part of Web meetings

• The same browser plugin could be used for Web meetings where slides are presented live to a remote audience
• The application server forwards the audio to all of the participants
  • With the iLBC codec you just copy the packets
• The application server also forwards the slide transition events
• This relies on the web page script using XMLHttpRequest to poll the server for these events
• A reverse audio channel is used for posing questions or making comments
• AJAX could be used by a moderator to determine who can speak at any given time
• The plugin supports accoustic echo cancelation to avoid the need to use headsets

Your opportunity to help

Jon Udell, Infoworld, May 17, 2006, Web-based alternatives to PowerPoint

Online tools can deliver presentations that
are just as rich, but a little less evil

• There is lots of further work to do
• If you have comments, suggestions for improvements, or would like to volunteer your help with further work on Slidy, please contact Dave Raggett <[email protected]>