Slide tools

There are a bunch of tools in this directory and elsewhere for making slides using standards:

Slidy
B5
Slidemaker/slideme

Slidy

The current recommendation (2005/5) is to use Dave Raggett's slideshow tool HTML Slidy, with its accompanying style sheet. If you are a member of the W3C staff, you must add a W3C icon. Some reasons for doing it this way:

Only one file to edit and show - much less fuss than generating slides
either page up/down or left/right arrow for moving between slides backward/forward
Support for incrementally revealing slide content
< and > (or - and + ) keys allow easy font scaling
Good contrast between foreground and background, dark on light.

But ...

Some browsers trap certain keystrokes, so that they are not available to the web page. This particularly applies to Safari and Konqueror, and to a lesser extent to Opera.
The back and forward buttons on the browser don't work reliably due to problems with how browsers expose history to web applications.
If the network is slow and you have a lot of graphics, there will be a wait until the first slide appears correctly formatted, be patient!

Some example talks of various vintages:

1. Edit the HEAD of your [x]HTML document

It should include the following:

<html xmlns="http://www.w3.org/1999/xhtml" 
 lang="en" xml:lang="en"> 
<head> 
  <title>your titleL</title> 
  <link rel="stylesheet" href="show.css" type="text/css" media="
  screen, projection" />
  <link rel="stylesheet" href="print.css" type="text/css"
  media="print" />
  <script src="slidy.js" type="text/javascript">
  </script>
</head>

For W3C staff members, talks must include the W3C icon. The head of the document will therefore include altogether:

<html xmlns="http://www.w3.org/1999/xhtml" 
 lang="en" xml:lang="en"> 
<head>
  <meta name="copyright" 
  content="Copyright © 2005 W3C (MIT, ERCIM, Keio) />
  <title>Slide Shows in XHTML</title> 
  <link rel="stylesheet" href="show.css" type="text/css" media="
  screen, projection" />
  <link rel="stylesheet" href="print.css" type="text/css"
  media="print" />
  <link rel="stylesheet" href="w3c-blue.css" type="text/css" media="
  screen, projection" />
  <script src="slidy.js" type="text/javascript">
  </script>
</head>

There are more details on the HTML Slidy page.

If yours slides are on the www.w3.org server, make the paths relative such as ../../../2005/03 and so on, so they can be used in checked out CVS file space.

2. Put divisions around each slide

Each slide has to be wrapped in <div class="slide"> ... </div>

If you have an existing talk using the earlier slideme tools, then you use the ,slideme comma tool to convert it automatically. Just append ",slideme" after "all.htm" for your slideme base file. Alternatively, you can do a global change of all <h1> to </div><div class="slide"><h1> and then fix up the first and last slides by deleting the extra </div> at the top and putting in the missing one at the bottom.

Editing the slides with Amaya

This can be done. You just have to be careful to preserve the divs. You can move slides around, by pressing ESC until you have a whole slide selected, cutting it, and then pasting it in between two slides (i.e. not in a div). Note that if you accidentally put text in which is not in a slide division, it will appear in all slides!

The B5 script and style

The traditional W3C slide format doesn't use DIVs around each slide, instead each H1 starts a slide. The styles for slidemaker & slideme rely on that format. The B5 script is an alternative to Slidy and can be used on slides both with and without DIVs. It's function is to emulate projection mode on browsers that don't support it yet.

To use the B5 script, include something like the following:

<link href="../Tools/w3ctalk-proj.css">
  rel=stylesheet media=projection>

<script src="../Tools/b5/b5.js"
  type="text/javascript"></script>

Then turn on Javascript, load the slides and press “A”.

[screendump of B5] There is also a B5 style sheet, which is the slide style for W3C's MMI and Mobile activities. It can be used independently of the B5 script:

<link href="../Tools/b5/b5.css">
  rel=stylesheet media=projection>

See the B5 documentation for more info on the B5 script and style, including how to add logos and signatures to the slides.

Slidemaker, slideme and the standard W3C style

[screendump of W3C style The traditional W3C style for slides consists of three style sheets:

w3ctalk-all.css – for screen mode.
w3ctalk-print.css – for print mode.
w3ctalk-proj.css – for projection mode (a.k.a. “OperaShow”).

There must be no DIV around the slides and each H1 starts a new slide. See “How to make slides with the W3C style” for documentation.

The last of these style sheets imports slide-1024.css, which is also the style used by slidemaker & slideme. Slidemaker and slideme are (Perl) scripts to split a slide file into multiple files, one slide per file, which is useful if you need to use a browser that doesn't support projection mode and you can't use the Ma href="#b5">B5

or Slidy Javascript files either.

For more info, see the documentation on slidemaker and the documentation on slideme. (Slideme is a version of slidemaker that is only available to the W3C Team.)

Last change $Id: Overview.html,v 1.26 2005/11/02 15:42:42 bbos Exp $

Sign me