Advisory Committee Meeting, 2-4 November 2010, Lyon France
Dave Raggett <dsr@w3.org>
Lyon Bridge photo by Christine Vaufrey
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 © 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>
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
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 <dsr@w3.org></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>
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>
You can divide your presentation into sections using the following template:
<div class="slide title"> <h1>Section Title</h1> </div>
<meta name="duration" content="5" />
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>