Lyon Style I - Document Structure

To get the W3C Lyon 2010 Style:

The xhtml file should match the following template, but please modify the content of the title element as appropriate for your presentation. The relative links below assume that your presentation is in a directory like /2010/Talks/your-slide-dir/ and should be modified as needed.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slidy template for Lyon 2010</title>
<meta name="copyright" content="Copyright &#169; 2010 W3C (MIT, ERCIM, Keio)" />
<link rel="stylesheet" href="../Lyon/template.css" type="text/css"
media="screen, projection, print" />
<script src="../../../Talks/Tools/Slidy2/scripts/slidy.js" type="text/javascript"></script>
</head>
<body>
  ... background, cover slide ...
  <div class="slide">
    <h1>Introduction</h1>
    ... slide content ...
  </div>
  ... other slides ...
</body>
</html>

Lyon Style II - Slide Background

To get the slide background, the body element's content should start with the following markup:

<div class="background">
  <img src="../Lyon/bullet.gif" alt="" />
  <img src="../Lyon/bullet-fold.gif" alt="" />
  <img src="../Lyon/bullet-unfold.gif" alt="" />
  <img src="../Lyon/bullet-fold-dim.gif" alt="" />
  <img src="../Lyon/bullet-nofold-dim.gif" alt="" />
  <img src="../Lyon/bullet-unfold-dim.gif" alt="" />
</div>

Most browsers don't save images referenced from style sheets. This template uses a work around that includes such images in the markup along with a style rule to hide that markup

Lyon Style III - Cover Slide

To get the cover page:

Please include the following after the background div, and remember to modify the heading and contact details to match your presentation along with the title element.

<div class="slide cover title">
<!-- modify the following text as appropriate -->
<img id="lyon-big" src="../Lyon/lyon-titlepage.002.jpg"
 alt="Lyon Bridge" />
<h1>Lyon 2010</h1>
<p class="event">Advisory Committee Meeting, 2-4 November
 2010, Lyon France</p>
<p class="author">Dave Raggett &lt;dsr@w3.org&gt;</p>
<p class="attribution"><a
 href="http://www.flickr.com/photos/christing/2205030434/">Lyon 
Bridge photo by Christine Vaufrey</a></p>
<a href="http://www.w3.org/"><img alt="W3C logo"
id="head-logo-fallback" src="../Lyon/lyon-logo.png" /></a>
</div>

Lyon Style IV - Adjusting the font size

Some people insist on crowded slides with lots of content, while other people have just a few words. Slidy allows you to adjust for this with a meta element.

To reduce the font size:

<meta name="font-size-adjustment" content="-1" />

Alternatively to boost the font size:

<meta name="font-size-adjustment" content="+2" />

Slidy computes the font size property for the body element based upon the window width. The above metadata is used to offset this computed value. Note that you can manually alter the font size during your presentation with the S (smaller) and B (bigger) keys. Another solution is to define a percentage font size on div.slide in a style element in your document.

<-- use a really large font size for slide content where the
  corresponding div looks like <div class="slide big"> -->
<style type="text/css">
  div.slide.big ul { font-size: 300% }
  div.slide.big p { font-size: 300% }
</style>

Section Title

You can divide your presentation into sections using the following template:

<div class="slide title">
<h1>Section Title</h1>
</div>

Upgrading from previous versions of Slidy

This uses a new version of the HTML Slidy script
It is designed to work better with other scripts, e.g. for UI controls within your slides
- Only adds one global name "w3c_slidy"
- Doesn't interfere with other scripts that set event handers such as onload on body element
Works for slides delivered as text/html and application/xhtml+xml
New presentation timer feature
Initial prompt on first slide to help newcomers to Slidy
Better support for styling slides and printing them
Requires additional style rules, so new script won't work with old presentations without changes to their style sheets
- See slidy.css, and w3c-blue.css
But old presentations will work unchanged as they refer to the old script!

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

Further information

Avoid placing too much content on each slide, no one will remember it all, and it will overflow the slide design.
For further guidance on slide markup see the Slidy pages
Use class="incremental" on ul and other elements for incremental display of slide content
If you want to print all the slides and you are not using IE, you will need to press the "A" key to toggle to the "all slides view" and then use the browser's print function in the normal way.
Slidy will infer the <div class="slide"> elements if you miss them out provided each of your slides begins with an h1 element.
If you want to view slides offline, be careful to save the slides with all of the content (see browser's Save As function, and "Web Page, complete" for the save as type). You will then be able to view the slides offline except with IE which refuses to execute scripts loaded directly from the local file system.
Firefox users may want the autohide extension to hide the toolbars when entering full screen with F11
If you would prefer to use Keynote, Open Office or PowerPoint, here is a matching template
If you get stuck with the slidy version, then Dave Raggett should be able to help. Ask tlr if the OpenOffice/PPT/Keynote templates don't work for you.

Great looking graphics

If you want to include graphics in SVG, you should stick to SVG Tiny to increase the chance of people seeing it on whatever browser they are using. Always, provide a fallback as a JPEG, PNG or GIF.
Most recent browsers include native SVG support.
On other browsers slides with SVG may result in users being prompted to install a plugin. The Adobe SVG plugin is reasonably effective
Some versions of browsers implement SVG in a brittle way that may cause the browser to crash. If this happens to you, please consider switching to a different version. Alternatively, you could strip out the object tag and just use the img element
Earlier versions of Firefox may show the wrong SVG file when you reload the page, this was fixed in Firefox 3.0

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 IE.

<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>