Dave Raggett,
<[email protected]>
Hit the space bar or swipe left for next slide
Copyright © 2005-2010 W3C ® (MIT, ERCIM, Keio), All Rights Reserved.
For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:
<div class="slide"> ... your slide content ... </div> <div class="handout"> ... stuff that only appears in the handouts ... </div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Slide Shows in XHTML</title>
<meta name="copyright"
content="Copyright © 2005 your copyright notice" />
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
<!-- your custom style rules -->
</style>
</head>
<body>
... your slides marked up in XHTML ...
</body>
</html>
The head element should include the following link to the style sheet:
<link rel="stylesheet" type="text/css" media="screen, projection, print" href="http://www.w3.org/Talks/Tools/Slidy2/styles/w3c-blue.css" />
The body element's content should start with the following markup:
<div class="background">
<img id="head-icon" alt="graphic with four colored squares"
src="http://www.w3.org/Talks/Tools/Slidy2/graphics/icon-blue.png" />
<object id="head-logo" title="W3C logo" type="image/svg+xml"
data="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"><img
src="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif"
alt="W3C logo" id="head-logo-fallback" /></object>
</div>
This adds the logos on the top left and right corners of the slide.
You are of course welcome to create your own slide designs. You can provide different styles and backgrounds for different slides (more details later).
Use the meta element with name="copyright" for use in the slide show footer:
<meta name="copyright" content="Copyright © 2005-2009 W3C (MIT, ERCIM, Keio)" />
http://localhost/Talks/Tools/Slidy2
and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css",
"/Talks/Tools/Slidy2/scripts/slidy.js".<meta name="duration" content="5" />
If you want a separate title page with the W3C blue style, the first slide should be as follows:
<div class="slide cover"> <img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/keys.jpg" alt="Cover page images (keys)" class="cover" /> <br clear="all" /> <h1>HTML Slidy: Slide Shows in XHTML</h1> <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a> <a href="mailto:[email protected]">[email protected]</a></p> </div>
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.
<div class="background foo"> ... background content ... <div> ... <div class="slide foo"> ... slide content ... <div>
For incremental display, use class="incremental", for instance:
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> <p class="incremental">which is marked up as follows:</p> <pre class="incremental"> ... </pre>
An element is incrementally revealed if its parent element has class="incremental" or if itself has that attribute. Text nodes are not elements and are revealed when their parent element is revealed. You can use class="incremental" on any element except for <br />. Use class="non-incremental" to override the effect of setting the parent element's class to incremental.
Note: you will see a red asterisk on the left of the toolbar when there is still something more to reveal.
You can make your bullet points or numbered list items into outlines that you can expand or collapse
<ol class='outline'>
<!-- topic 1 starts collapsed -->
<li>Topic 1
<ol>
<li>subtopic a</li>
<li>subtopic b</li>
</ol>
</li>
<!-- topic 2 starts expanded -->
<li class="expand">Topic 2
<ol>
<li>subtopic c</li>
<li>subtopic d</li>
</ol>
</li>
</ol>
For adaptive layout, use percentage widths on images, together with CSS positioning:
<div class="slide">
<h1>Analysts - "Open standards programming will become
mainstream, focused around VoiceXML"</h1>
<!-- use CSS positioning and scaling for adaptive layout -->
<img src="trends.png" width="50%" style="float:left"
alt="projected growth of VoiceXML" />
<blockquote style="float:right;width: 35%">
VoiceXML will dominate the voice environment, due to its
flexibility and eventual multimodal capabilities
</blockquote><br clear="all" />
<p style="text-align:center">Source Data Monitor, March
2004</p>
</div>
To work around a CSS rendering bug in IE relating to margins, you can set display:inline on floated elements.
These can be marked up using CSS relative positioning, e.g.
<div class="incremental"
style="margin-left: 4em; position: relative">
<img src="graphics/face1.gif" alt="face"
style="position: static; vertical-align: bottom"/>
<img src="graphics/face2.gif" alt="eyes"
style="position: absolute; left: 0; top: 0" />
<img src="graphics/face3.gif" alt="nose"
style="position: absolute; left: 0; top: 0" />
<img src="graphics/face4.gif" alt="mouth"
style="position: absolute; left: 0; top: 0" />
</div>
You should also use transparent GIF images to avoid the IE/Win bug for alpha channel in PNG. A fix is expected in IE 7. A work around is available on skyzyx.com. My thanks to ACID2 for the graphics.
Within the div element for your slide:
<div class="vbox"></div> <div class="hbox"> Place the content here </div>
and style it with the following:
div.vbox {
float: left;
height: 40%; width: 50%;
margin-top: -220px;
}
div.hbox {
width:60%; margin-top: 0;
margin-left:auto; margin-right:auto;
height: 60%;
border:1px solid silver;
background:#F0F0F0;
overflow:auto;
text-align:left;
clear:both;
}
The above styling is included in w3c-blue.css, which is designed to be used with slidy.css, but you are encouraged to develop your own style sheet with your own look and feel.
Inclusion of SVG content can be done using the object element, for example:
has been achieved by:
<object data="graphics/example.svg" type="image/svg+xml"
width="50%" height="10%" title="Indian Office logo">
<img src="graphics/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. Providing such a fall back is very important! Don't forget the alt text for people who can't see the image.
However, there are caveats, see the next slide!
Adobe has recently withdrawn support for its SVG Viewer, so you are recommended to consider alternatives. If you still using the Adobe SVG viewer you should be aware of bugs when using the it with IE, Namely:
<meta name="font-size-adjustment" content="-1" />
div.slide.large { font-size: 200% }
Slidy now includes support for localization
"es":this.strings_es, "ca":this.strings_ca, "cs":this.strings_cs, "nl":this.strings_nl, "de":this.strings_de, "pl":this.strings_pl, "fr":this.strings_fr, "hu":this.strings_hu, "it":this.strings_it, "el":this.strings_el, "jp":this.strings_ja, "zh":this.strings_zh, "ru":this.strings_ru, "sv":this.strings_sv
// for each language there is an associative array
strings_es: {
"slide":"pág.",
"help?":"Ayuda",
"contents?":"Índice",
"table of contents":"tabla de contenidos",
"Table of Contents":"Tabla de Contenidos",
"restart presentation":"Reiniciar presentación",
"restart?":"Inicio"
},
help_es:
"Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
"o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.",
Note: Slidy now works with current slides translated into French. Use
right mouse button to open frame without Google header. To disable
automatic translation of the content of particular elements add
class="notranslate", see breaking the language barrier.
Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. The script has been rewritten to make it easier to combine with other scripts, e.g. for UI controls, and support swipes for navigation on touch screen devices. Further work is anticipated on the following:
If you have comments, suggestions for improvements, or would like to volunteer your help with further work on Slidy, please contact Dave Raggett <[email protected]>
Note that while Slidy and S5 were developed independently, both support the use of the class values "slide" and "handout" for div elements. Slidy doesn't support the "layout" class featured in S5 and Opera Show, but instead provides a more flexible alternative with the "background" class, which enables different backgrounds on different slides.
The following people have contributed localizations:
The following people have contributed bug reports:
Douglas Crockford for jsmin which was used to minify the script before compressing it with gzip.
