Mode d'emploi

Chaque présentation se présente sous la forme d'un seul fichier XHTML
Chaque diapo est définie par les balises <div class="slide"> ... </div>
On utilise les balises habituelles à l'intérieur de chaque diapo.
L'en-tête du document contient deux liens :
- La feuille de style de la présentation : http://www.w3.org/Talks/Tools/Slidy/slidy.css
- Le script de la présentation : http://www.w3.org/Talks/Tools/Slidy/slidy.js

Il peut être intéressant de rajouter dans la version poly des notes supplémentaires à l'aide de l'élément div class="handout" après chaque diapo :

<div class="slide"> 
 ... le contenu d'une diapo ...
</div>

<div class="handout">
 ... des notes qui n'apparaîtront que sur le poly, à la suite de la diapo précédente ...
</div>

Générer une Page de Titre

If you want a separate title page with the W3C blue style, the first slide should be as follows:

The w3c-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

L'affichage incrémental

Pour afficher item par item, utiliser class="incremental", par exemple :

Premier item
Deuxième item
Et troisième item

Un élément est affiché au coup par coup s'il est fils d'un parent ayant l'attribut class="incremental" ou s'il possède lui-même cet attribut. L'attribut class="non-incremental" désactive l'effet défini au niveau parental.

Note : un astérisque rouge est affiché en bas à gauche, tant qu'il reste quelque chose à dévoiler.

Listes avec paragraphes masqués

Il est possible de dérouler ou de replier les items d'une liste numérotée ou pas

On ajoute class="outline" à l'élément ul ou ol. Démonstration en cliquant sur cet item ...
- Slidy traite alors cette liste comme une liste composée.
- En cliquant dessus, on la déroule ou on la replie.
L'état de la liste est indiqué par l'icone en tête de liste. Cet item, sans sous-éléments, n'est ni déroulable, ni repliable.
On rajoute class="expand" à tout élément li devant être déroulé dès le départ.
- Par defaut Slidy replie toute liste déroulable sauf si on a spécifié class="expand".
- Une liste pré-déroulée est repliable d'un click.

Affichage progressif des éléments d'une image

On utilisera le positionnement relatif des CSS :

Raccourcis claviers

Click ou barre d'espacement pour aller à la diapo suivante
Déplacement entre diapo avec Cursor Left, Cursor Right, Pg Up and Pg Dn
Home ramène à la première diapo, End à la dernière
La touche "C" génère automatiquement une table des matière (ou bien cliquer sur "contents" dans la barre inférieure)
La fonction F11 bascule en plein écran et vice-versa (sur Windows ?)
La touche "F" active ou désactive l'affichage de la barre inférieure.
La touche "A" active la fonction "all slides view"
- Pour imprimer l'ensemble de la présentation, presser la touche "A", puis imprimer normalement selon le navigateur.
- Permet ainsi d'imprimer les notes attachées aux diapos pour les poly.
La taille des fontes est adaptée automatiquement à la taille de la fenêtre du navigateur
- les touches S et B permettent de contrôler manuellement la taille d'affichage
Si JavaScript est désactivé, toutes les diapos sont affichées.
Pour visualiser la présentation offline, il faut penser à sauvegarder toute la hiérarchie (voir la fonction "Save As" du navigateur et sauvegarder avec le type "Web Page, complete").

Make your images scale with the browser window size

For adaptive layout, use percentage widths on images, together with CSS positioning:

CSS positioning is simpler and more reliable than using tables

Divers

Slides are auto-numbered on the slide show footer
You can link into the middle of a slide show:
- It works out which slide you want and hides the rest
- You can even link between slides in the same slide show
- Individual sides can be addressed with the syntax #(slide number),
  e.g. slide 3 of this presentation is: http://www.w3.org/Talks/Tools/Slidy#(3)
  - Previous versions of Slidy used square brackets, which will also work.
- Note that the browser's back/forward buttons may not work as you might expect due to browser problems.
If your slides have more content than normal, use a meta element to request a smaller font
- the following requests fonts to be one step smaller than the Slidy default for the current window width, and positive integers will make the fonts correspondingly larger
```
<meta name="font-size-adjustment" content="-1" /> 
```
- Slidy uses JavaScript to dynamically set the font size on the body element, but it is okay to specify relative font changes on other elements within your own style sheet.
You are encouraged to ensure your markup is valid. HTML Tidy can be used to find and correct common markup problems
The slide show script and style sheet can be used freely under W3C's software licensing and document use policies
At XTech2006 I gave this presentation on Slidy (Paper).

Future Plans

Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. Further work is anticipated on the following:

Collecting a gallery of good looking slide themes
- Opportunities for graphics designers!
Getting SVG Tiny to work on IE without need for SVG plugin
- Using scripts to dynamically convert SVG Tiny to VML
Tweaks for working with IE7 when that becomes available
Alpha version of wysiwyg slide editor (see screenshot)
- Using contentEditable 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
- Synchronizing recorded spoken presentation with currently viewed slide
Filters from PowerPoint and Open Office
- and export to PDF via PrinceXML

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>

Mes tests avec Slidy : faire sa présentation en XHTML