Tuesday, May 29, 2007

Slides in web pages

Peter Sefton has done a wonderful job getting his ICE education system to produce web based slides, as well as printed and web based learning materials, all from the one word processing document.

ICE uses the remarkable Slidy, which uses some CSS and a lot of Javascrpit, to turn a simple HTML document into a pretty slide show which can be driven from a web browser.

Previously I laboriously hand coded web pages to would work as slides, web documents and printed documents . But my hand coded system has some advantages over Slidy and ICE:
  1. One file: ICE generates a web version of your document, a PDF versions for printing and the slide version. This is three files to keep track of: I just want one. I don't want a PDF version, just a printable web page will do. I want the slide notes in the same file as the slides.
  2. Notes default: Slidy allows for notes to be included along with the presentation slides. You can press a button to see the hidden notes and can print them out. But you have to know to be able to do this. In most cases I want people to be able to see the notes: very rarely will they want to just see the slides. So I want the default changed so you see the notes and press a button to hid them.
  3. Simple web page: Slidy uses H1 as the heading for each slide. But I want my web page to have one H1 for the title and H2 for the slides.
I have tried changing Slidy's behavior, without changing the Slidy code. After some thought I reasoned that it is the Javascript which made Slidy show slides. So if I turn off the Javascript I will get the notes showing by default. To do this I added some commands to the web server. To get the slides you supply the parameter "Slides"; without this, you get the notes:
  1. Slides: http://www.tomw.net.au/technology/it/xml_publishing/index.shtml?slides
  2. Notes: http://www.tomw.net.au/technology/it/xml_publishing/
This technique has the bonus that, as most people will not be looking at the slides, they will not need to download the Javascript.

But so far I have not worked out an easy way to change the H1 headings to H2. I could modify the Slidy Javascript to use H2, but am reluctant to create my own version of Slidy. Another option would be some XSLT to turn the H1s to H2s for Slidy.

No comments: