XTech, Amsterdam
19th May 2006
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
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;
}
Slide Backgrounds
Slidy also allows you to subclass background div's
<div class="background foo">
... background content ...
<div>
...
<div class="slide foo">
... slide content ...
<div>
- 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:
<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
- 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
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 <dsr@w3.org>