a web-based alternative to PowerPoint (original) (raw)

• Slidy shows matching backgrounds as well as backgrounds with class="background"

This slide combines a specific background (W3C logo) with the presentation background (notebook).

Include SVG Content

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

has been achieved by:

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.
• 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 supportdesignMode
• 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 andTinyMCE
• 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 beextremely 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 <dsr@w3.org>