+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
Dave Raggett,
+<dsr@w3.org>
+
+
+
+
Hit the space bar or swipe right 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:dsr@w3.org">dsr@w3.org</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 <dsr@w3.org>
+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.
+