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:
But old presentations will work unchanged as they refer to
+the old script!
+
+
+
+
+
To use it off-line
+
+
+
You can download slidy.zip and unzip
+it to create a Slidy directory on your machine
+
+
If you have cvs access to the W3C site you can check out the Slidy
+directory
+
+
Remember to periodically check for updates
+
+
You then have two choices:
+
+
+
Use relative URIs depending on your local setup to access the
+appropriate files. Use the same directory structure as on the W3C
+server, ie, ".../2005/Talks/...".
+
+
Run a Web server on your machine so that the directory above
+can be accessed via http://localhost/Talks/Tools/Slidy2
+and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css",
+"/Talks/Tools/Slidy2/scripts/slidy.js".
+
+
+
In both cases you can then publish your files on the W3C server
+unchanged.
+
+
NOTE Internet Explorer on Windows XP now disables
+scripting for web pages loaded directly from the local file system,
+a work around is to use another browser, e.g. Firefox or Opera
+
+
Please feel free to create your own designs, and help us to build
+a gallery of Slidy styles.
+
+
My Google TechTalk (1st Feb 2006)
+uses a notebook themed style
+
+
+
+
+
Timing Your Presentation
+
+
+
Sometimes it is handy to know just how much time you have to
+left to finish your presentation
+
To get this feature, add the following markup to the
+content of the head element, replacing 5 by the duration
+of your presentation in minutes
+
<meta name="duration" content="5" />
+
+
The time left in minutes and seconds is shown in the footer
+next to the slide number
+
The clock starts to run when you move away from the first slide
+
Moving back to the first slide pauses the clock
+
+
+
+
+
+
+
Generate a Title Page
+
+
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.
For incremental display, use class="incremental", for
+instance:
+
+
+
First bullet point
+
+
Second bullet point
+
+
Third bullet point
+
+
+
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.
+
+
+
+
+
Create outline lists with hidden content
+
+
You can make your bullet points or numbered list items
+into outlines that you can expand or collapse
+
+
+
Just add class="outline" to the ul or ol
+element. Click on this list item for more details.
+
+
+
The Slidy script will then treat the list
+as an outline list.
+
Clicking on outline list items will expand/collapse
+block-level elements within that list item.
+
Click on the above to make this list item
+collapse again.
+
+
+
Users will then see expand/collapse icons as appropriate
+and may click anywhere on the list item to change its state.
+This particular list item can't be expanded or collapsed.
+
Add class="expand" to any li elements that
+you want to start in an expanded state.
+
+
+
By default Slidy hides all the block level elements within the
+outline list items unless you have specified class="expand".
+
Such pre-expanded items can be collapsed by clicking on them.
+
+
+
Note expand/collapse icon highlighting requires browser
+support for :hover which isn't supported by IE6.
+
+
+
Microsoft says it will be supported by IE7 along with
+many fixes for other CSS woes in IE6.
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
+
+
+
+<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.
+
+
+
+
Incremental display of layered images
+
+
These can be marked up using CSS relative positioning, e.g.
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.
+
+
+
+
+
+
+
+
How to center content vertically and horizontally
+
+
+
Within the div element for your slide:
+
+<div class="vbox"></div>
+<div class="hbox">
+Place the content here
+</div>
+
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.
+
+
+
+
+
Include SVG Content
+
+
Inclusion of SVG content can be done using the object element,
+for example:
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!
+
+
+
+
Caveats with SVG+object
+
+
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:
+
+
+
Most modern browsers generally support SVG SVG Tiny 1.1 or better
+natively without the need for a plugin
+
+
If you need to use Internet Explorer you are advised to upgrade
+to IE9 which includes native support for SVG.
+
+
Patches to Internet Explorer mean that the Adobe SVG Viewer
+version 3.03 no longer works with IE6. You are therefore recommended
+to uninstall version 3.03 and instead install Adobe SVG Viewer
+6.0 preview if this is available to to you.
+
+
IE6 makes a copy of the SVG file on the local disc
+when displaying it; but doesn't pass the original URI to the plugin
+
+
As a result relative references from within the SVG to external
+resources (scripts, CSS, images, other SVG) will break.
+
+
The work around is to use absolute references within your SVG.
+
+
On Windows, the Adobe SVG plugin doesn't respect the CSS z-index
+property, and if used on backgrounds will always show through other
+content
+
+
+
+
+
Additional Remarks
+
+
+
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
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.
+
+
+
+
Adding "title" to the list of classes for div elements that serve
+as title pages will render the corresponding entry in the table of
+contents in bold italic text (press "C" now for an example)
+
+
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
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, e.g.
+
+
div.slide.large { font-size: 200% }
+
+
+
You are encouraged to ensure your markup is valid. HTML Tidy can be used
+to find and correct common markup problems
The tool bar is localized according to the language of the presentation
+
This is taken from the xml:lang or lang attributes on the html element
+
The help file is
+selected based upon your browser's language preferences
+
As of 29th July 2010, the languages supported are: English,
+Spanish, Catalonian, Czech, Dutch, German, Polish, French,
+Hungarian, Italian, Greek, Japanese, Chinese, Russian and
+Swedish
+
If you would like to contribute localizations for other languages,
+please get in touch with Dave Raggett <dsr@w3.org>
+
The following illustrates what was used for Spanish
+
+
+// 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.",
+
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:
+
+
+
Collecting a gallery of good looking slide themes
+
+
Opportunities for graphics designers!
+
+
+
Bob Ferris has worked on a
+number of UI extensions which could be incorporated into the
+W3C slidy script.
+
Getting SVG Tiny to work on IE without need for SVG plugin
+
+
Using scripts to dynamically convert SVG Tiny to VML
+
Note that IE9 introduces native SVG support, so it may
+no longer be worth working on SVG to VML for rendering of SVG
+
+
+
Pre-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
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>
+
+
+
+
Acknowledgements
+
+
+
My thanks to everyone who sent in bug reports and feature
+requests
+
Opera Software for implementing CSS @media projection and
+promoting the idea of using the Web for presentations with
+Opera
+Show
+
Tantek Çelik for his
+pioneering work on applying JavaScript for slide presentations on
+other browsers
+
Eric Meyer for taking this further with the excellent S5
+
W3C's slidemaker
+tool, which uses a perl script to split an html file up into
+one file per slide with navigation buttons
+
Early versions of HTML
+Tidy which supported a means to create presentations via splitting
+html files on h2 elements
+
Many sites with advice on JavaScript work arounds for browser
+variations
+
Microsoft for pioneering contentEditable and XMLHTTP which
+both provide tremendous opportunities for Web applications
+
Microsoft Office which provided the impetus for creating
+Slidy as a Web-based alternative to the ubiquitous use of PowerPoint
+
+
+
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.
+
+
+
+
Acknowledgements
+
+
The following people have contributed localizations:
+
+
+
Emmanuelle Gutiérrez y Restrepo, Spanish
+
Joan V. Baz, Catalan
+
Jakub Vrána, Czech
+
Ruud Steltenpool, Dutch
+
Beat Vontobel, German
+
Krzysztof Kotowicz, Polish
+
Tamas Horvath, Hungarian
+
Creso Moraes, Brazilian Portuguese
+
Giuseppe Scollo, Italian
+
Konstantinos Koukopoulos, Greek
+
Yoshikazu Sawa (澤 義和), Japanese
+
Shelley Shyan, Chinese
+
Andrew Pantyukhin, Russian
+
Saasha Metsärantala, Swedish
+
+
+
The following people have contributed bug reports:
+
+
+
Ivan Herman
+
Steve Bratt
+
Peter Patel-Schneider
+
Matthew Coller
+
Rune Heggtveit
+
Gopal Venkatesan
+
Cay Horstmann
+
Schuyler Duveen
+
Matteo Nannini
+
Ralph Swick
+
Jakub Vrána
+
Philip Bolt
+
Jon Frost
+
+
+
Douglas Crockford for jsmin
+which was used to minify the script before compressing it with gzip.