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
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
<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, 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
Jonathan Chetwynd
Nicolas Frisby
Douglas Crockford for jsmin
which was used to minify the script before compressing it with gzip.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<htmllang="en-US">
<head>
<metaname="generator"content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
<p>This adds the logos on the top left and right corners of the
slide.</p>
<p>You are of course welcome to create your own slide designs.
You can provide different styles and backgrounds for
different slides (more details later).</p>
<h1>Upgrading from previous versions of Slidy</h1>
<ul>
<li>This uses a new version of the HTML Slidy script</li>
<li>
It is designed to work better with other scripts,
e.g. for UI controls within your slides
<ul>
<li>Only adds one global name "w3c_slidy"</li>
<li>Doesn't interfere with other scripts that set event handers
such as onload on body element</li>
...
</ul>
...
</li>
<li>Works for slides delivered as text/html and application/xhtml+xml</li>
<li>New presentation timer feature</li>
<li>Initial prompt on first slide to help newcomers to Slidy</li>
<li>Better support for styling slides and printing them</li>
<li>
Requires additional style rules, so new script won't work
with old presentations without changes to their style sheets
<ul>
<li>
See
<ahref="styles/slidy.css">slidy.css</a>
, and
<ahref="styles/w3c-blue.css">w3c-blue.css</a>
...
</li>
...
</ul>
...
</li>
<li>But old presentations will work unchanged as they refer to
the old script!</li>
...
</ul>
...
</div>
<divclass="slide">
<h1>To use it off-line</h1>
<ul>
<li>
You can download
<ahref="slidy.zip">slidy.zip</a>
and unzip
it to create a Slidy directory on your machine
...
</li>
<li>If you have cvs access to the W3C site you can check out the Slidy
directory</li>
<li>Remember to periodically check for updates</li>
<li>
You then have two choices:
<ol>
<li>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/...".</li>
<li>
Run a Web server on your machine so that the directory above
can be accessed via
<code>http://localhost/Talks/Tools/Slidy2</code>
and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css",
"/Talks/Tools/Slidy2/scripts/slidy.js".
...
</li>
...
</ol>
...
</li>
<li>In both cases you can then publish your files on the W3C server
unchanged.</li>
<li>
<strong>NOTE</strong>
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
...
</li>
<li>Please feel free to create your own designs, and help us to build
a gallery of Slidy styles.</li>
<li>
My
<ahref="/2006/02/woa/">Google TechTalk</a>
(1st Feb 2006)
uses a notebook themed style
...
</li>
...
</ul>
...
</div>
<divclass="slide">
<h1>Timing Your Presentation</h1>
<ul>
<li>Sometimes it is handy to know just how much time you have to
left to finish your presentation</li>
<li>
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
<pre><meta name="duration" content="5" /></pre>
...
</li>
<li>The time left in minutes and seconds is shown in the footer
next to the slide number</li>
<li>The clock starts to run when you move away from the first slide</li>
<li>Moving back to the first slide pauses the clock</li>
...
</ul>
...
</div>
<divclass="slide slanty">
<h1>Generate a Title Page</h1>
<p>If you want a separate title page with the W3C blue style, the
first slide should be as follows:</p>
style sheet looks for the classes "slide" and "cover" on div
and img elements using the CSS selector
<em>div.slide.cover</em>
...
</p>
<p>This technique can be used to assign your slides to different
classes with a different appearence for each such class.</p>
<p>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.</p>
<p>For incremental display, use class="incremental", for
instance:</p>
<ulclass="incremental">
<li>First bullet point</li>
<li>Second bullet point</li>
<li>Third bullet point</li>
...
</ul>
<pclass="incremental">which is marked up as follows:</p>
<preclass="incremental">
<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>
</pre>
<divclass="footnote">
<p>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.</p>
<p>Note: you will see a red asterisk on the left of the toolbar
when there is still something more to reveal.</p>
...
</div>
...
</div>
<divclass="slide">
<h1>Create outline lists with hidden content</h1>
<p>You can make your bullet points or numbered list items
into outlines that you can expand or collapse</p>
<ulclass="outline">
<li>
Just add
<em>class="outline"</em>
to the ul or ol
element. Click on this list item for more details.
<ul>
<li>The Slidy script will then treat the list
as an outline list.</li>
<li>Clicking on outline list items will expand/collapse
block-level elements within that list item.</li>
<li>Click on the above to make this list item
collapse again.</li>
...
</ul>
...
</li>
<li>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.</li>
<liclass="expand">
Add class="expand" to any li elements that
you want to start in an expanded state.
<ul>
<li>By default Slidy hides all the block level elements within the
outline list items unless you have specified class="expand".</li>
<li>Such pre-expanded items can be collapsed by clicking on them.</li>
...
</ul>
...
</li>
<li>
Note expand/collapse icon highlighting requires browser
support for :hover which isn't supported by IE6.
<ul>
<li>Microsoft says it will be supported by IE7 along with
many fixes for other CSS woes in IE6.</li>
<!-- useful info at http://www.howtocreate.co.uk/wrongWithIE/ -->
<divclass="slide">
<h1>Make your images scale with the browser window size</h1>
<p>For adaptive layout, use percentage widths on images, together
with CSS positioning:</p>
<ul>
<li>CSS positioning is simpler and more reliable than using
tables</li>
...
</ul>
<pre>
<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>
</pre>
<p>To work around a CSS rendering bug in IE relating
to margins, you can set display:inline on floated elements.</p>
...
</div>
<divclass="slide">
<h1>Incremental display of layered images</h1>
<p>These can be marked up using CSS relative positioning, e.g.</p>
<p>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.</p>
<p>However, there are caveats, see the next slide!</p>
...
</div>
<divclass="slide">
<h1>Caveats with SVG+object</h1>
<p>
Adobe has recently withdrawn support for its SVG Viewer, so you are
recommended to consider
.
If you still using the Adobe SVG viewer you should be aware of bugs
when using the it with IE, Namely:
...
</p>
<ul>
<li>Most modern browsers generally support SVG SVG Tiny 1.1 or better
natively without the need for a plugin</li>
<li>If you need to use Internet Explorer you are advised to upgrade
to IE9 which includes native support for SVG.</li>
<li>
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
<li>Previous versions of Slidy used square brackets, which will
also work.</li>
...
</ul>
...
</li>
<li>Note that the browser's back/forward buttons may not work as
you might expect due to browser problems.</li>
...
</ul>
...
</li>
<li>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)</li>
<li>
If your slides have more content than normal, use a
<em>meta
element</em>
to request a smaller font
<ul>
<li>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</li>
<li>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.</li>
...
</ul>
<pre>div.slide.large { font-size: 200% }</pre>
...
</li>
<li>
You are encouraged to ensure your markup is valid.
is
selected based upon your browser's language preferences
...
</li>
<li>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</li>
<li>If you would like to contribute localizations for other languages,
please get in touch with Dave Raggett <dsr@w3.org></li>
<li>The following illustrates what was used for Spanish</li>
...
</ul>
<pre>
// 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.",
</pre>
<p>
<strong>Note:</strong>
Slidy now works with
<ahref="http://translate.google.com/translate?js=n&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.w3.org%2FTalks%2FTools%2FSlidy2%2F&sl=en&tl=fr&history_state0=">current slides translated into French</a>
. Use
right mouse button to open frame without Google header. To disable
automatic translation of the content of particular elements add
<code>class="notranslate"</code>
, see
<ahref="http://googlewebmastercentral.blogspot.com/2008/10/helping-you-break-language-barrier.html">breaking the language barrier</a>
.
...
</p>
...
</div>
<divclass="slide">
<h1>Future Plans</h1>
<p>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:</p>
<ul>
<li>
Collecting a gallery of good looking slide themes
<ul>
<li>Opportunities for graphics designers!</li>
...
</ul>
...
</li>
<li>
Bob Ferris has worked on
<ahref="https://github.com/zazi/slidy_tud/blob/master/README.md">a
number of UI extensions</a>
which could be incorporated into the
W3C slidy script.
...
</li>
<li>
Getting SVG Tiny to work on IE without need for SVG plugin
<ul>
<li>Using scripts to dynamically convert SVG Tiny to VML</li>
<li>Note that IE9 introduces native SVG support, so it may
no longer be worth working on SVG to VML for rendering of SVG</li>
which supported a means to create presentations via splitting
html files on h2 elements
...
</li>
<li>Many sites with advice on JavaScript work arounds for browser
variations</li>
<li>Microsoft for pioneering contentEditable and XMLHTTP which
both provide tremendous opportunities for Web applications</li>
<li>Microsoft Office which provided the impetus for creating
Slidy as a Web-based alternative to the ubiquitous use of PowerPoint</li>
...
</ul>
<pclass="smaller">
<strong>Note</strong>
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.
...
</p>
...
</div>
<divclass="slide">
<h1>Acknowledgements</h1>
<p>The following people have contributed localizations:</p>
<ul>
<li>Emmanuelle Gutiérrez y Restrepo, Spanish</li>
<li>Joan V. Baz, Catalan</li>
<li>Jakub Vrána, Czech</li>
<li>Ruud Steltenpool, Dutch</li>
<li>Beat Vontobel, German</li>
<li>Krzysztof Kotowicz, Polish</li>
<li>Tamas Horvath, Hungarian</li>
<li>Creso Moraes, Brazilian Portuguese</li>
<li>Giuseppe Scollo, Italian</li>
<li>Konstantinos Koukopoulos, Greek</li>
<li>Yoshikazu Sawa (澤 義和), Japanese</li>
<li>Shelley Shyan, Chinese</li>
<li>Andrew Pantyukhin, Russian</li>
<li>Saasha Metsärantala, Swedish</li>
...
</ul>
<p>The following people have contributed bug reports:</p>