Slidy template for Cambridge 2010

Advisory Committee Meeting, 21–23 March 2010, Cambridge MA

Dave Raggett <dsr@w3.org>

Cambridge-10 Style I - Document Structure

To get the W3C Cambridge 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 Cambridge 2010</title>
<meta name="copyright" content="Copyright &#169; 2010 W3C (MIT, ERCIM, Keio)" />
<link rel="stylesheet" href="../Cambridge2/template.css" type="text/css"
media="screen, projection, print" />
<script src="../../../Talks/Tools/Slidy/slidy.js" type="text/javascript"></script>
</head>
<body>
  ... background, cover slide ...
  <div class="slide">
    <h1>Introduction</h1>
    ... slide content ...
  </div>
  ... other slides ...
</body>
</html>

Cambridge-10 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="../Cambridge2/bullet.gif" alt="" />
  <img src="../Cambridge2/fold.gif" alt="" />
  <img src="../Cambridge2/fold-dim.gif" alt="" />
  <img src="../Cambridge2/nofold-dim.gif" alt="" />
  <img src="../Cambridge2/unfold-dim.gif" alt="" />
  <img src="../Cambridge2/bullet-fold.gif" alt="" />
  <img src="../Cambridge2/bullet-unfold.gif" alt="" />
  <img src="../Cambridge2/bullet-fold-dim.gif" alt="" />
  <img src="../Cambridge2/bullet-nofold-dim.gif" alt="" />
  <img src="../Cambridge2/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

Cambridge-10 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">
<object id="head-logo"
data="w3c-logo-white.svg" type="image/svg+xml"
title="W3C logo"><a href="http://www.w3.org/"><img
alt="W3C logo" id="head-logo-fallback"
src="w3c-logo-white.gif" /></a></object>
<h1>Slidy template for Cambridge 2010</h1>
<p class="event">Advisory Committee Meeting, 21–23 March 2010,
Cambridge MA</p>
<p class="author">Dave Raggett &lt;dsr@w3.org&gt;</p>
<p class="event">Advisory Committee Meeting, 21–23 March
2010, Cambridge MA</p>
<p class="attribution"><a
 href="http://www.flickr.com/photos/seeminglee/3791607622/">Stata
building photo by See-ming Lee</a></p>
</div>

Cambridge-10 Style IV - Adjusting the font size

Some people insist on have busy slides with lots of content, while some other people are at the other extreme. 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>

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 Open Office or PowerPoint, here is a matching template
- http://www.w3.org/2010/Talks/Cambridge/template.odp
- http://www.w3.org/2010/Talks/Cambridge/template.ppt
If you get stuck then Dave Raggett should be able to help.

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
The W3C logo uses SVG for jaggy free scaling via the markup for the cover slide, see slide 4

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>