s5-1.1.orig/ 0000755 0001750 0001750 00000000000 11321203043 011304 5 ustar roam roam s5-1.1.orig/s5-blank.html 0000644 0001750 0001750 00000003522 10272240531 013617 0 ustar roam roam
This document provides the details of the S5 presentation file format based on the XOXO microformat. This will first present the minimum required structure, and then discuss optional bits of markup.
What follows is an example of the absolute minimum markup required to be considered a valid S5 file. The italicized text indicates technically optional but strongly recommended content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[slide show title]</title> <meta name="version" content="S5 1.1" /> <link rel="stylesheet" href="ui/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="ui/opera.css" type="text/css" media="projection" id="operaFix" /> <link rel="stylesheet" href="ui/print.css" type="text/css" media="print" id="slidePrint" /> <script src="ui/slides.js" type="text/javascript"></script> </head> <body> <div class="layout"> <div id="currentSlide"></div> <div id="header"></div> <div id="footer"> <div id="controls"></div> </div> </div> <ol class="presentation xoxo"> <li class="slide"> <h1>[slide title]</h1> </li> </ol> </body> </html>
The first lines of an S5 presentation file must contain an XHTML 1.0 Strict DOCTYPE declaration and a properly namespaced html
element. These are both required. Although the S5 CSS and JavaScript is compatible with any well-formed HTML or XHTML document, XHTML 1.0 Strict was originally chosen in order to be compatible with OSF 1.0.
Because of the compatibility problems present in IE6/Win, the XML prolog should not be placed at the top of the document.
head
element
In addition to the title of the slide show, the head
element must contain a meta
element that describes the file format. This is OSF 1.0 compatible.
The head
element also must contain the link
elements and script
element shown. The JavaScript file is what drives the labelling of slides, the transition from slide to slide, the creation of the navigation menu, and more. The CSS files, on the other hand, are required to set things so that the JS will work, and also to make the slides look pretty.
As of S5 1.1, CSS and JavaScript should not be embedded into the document. It is expected that a future version of S5 will change to allow embedded style sheets and scripts.
body
's beginning
At the very beginning of the body
is the "layout" div
. This is the same structure found in OSF 1.0, and can accept the same elements. S5 adds the markup shown above, which must be included in the document. The "controls" div
is where the slide show navigation controls appear, and "currentSlide" is the spot where the "slide X of Y" information appears. The "header" and "footer" div
s must be included as well. Authors are free to add markup and content to the "header" and "footer" div
s, but not to remove them entirely.
In keeping with XOXO, all of the slides are contained within a "presentation" ol
. It begins immediately after the close of the "layout" div
and contains one or more slides.
Every slide in the presentation file must be enclosed in an li
with a class
containing the word slide
in its value. While a slide li
can be given an id
, the value will be overwritten by the S5 JavaScript routines. Thus in S5, id
attributes on slide li
s are discouraged.
The title of a slide should be contained by an h1
element, as in OSF 1.0. In S5, authors are strongly encouraged to have a slide title element, even if its content is empty. This will help keep the navigation menu working as expected. The markup of content for each slide is up to the individual author. Blank slides are certainly permitted, although would seem to be sort of useless.
Pretty much everything you need outside of the slide file itself is found in the ui directory, which sits next to the slide file. That's where, if you dig into the default
subdirectory, you find the various CSS files and JavaScript that makes S5 work.
The critical files in the ui/default directory are:
The JavaScript that drives the dynamic side of the slide show. It automatically IDs the slides when the document loads, builds the navigation menu, handles the hiding and showing of slides, and so on. The script also manages the fallback to Opera Show if you're using Opera.
This is really just a hub file that points to the three files that drive S5. Those files are:
Contains a few rules that make the system run. If you mess with this file, you're likely to break the slide show unless you really know what you're doing.
Contains some rules that place and size the various slide components—things like the header, footer, slide controls, and so on. If you want to change the basic slide layout, this is where to go.
The CSS that adds the visual pizazz to the slide show—colors, fonts, text alignment, margins, and all that other good stuff. You can make a whole new theme just by editing this file, and not touching the others.
This file is what allows Opera Show to do its thing, assigning a few CSS rules that break the file up into slides. It should never have to be edited unless you go messing with the rules in s5-core.css (not recommended, but hey, it's your slide show).
The styles that are applied when the slide show is in the outline view. These are largely meant to make the document a little bit more readable as an outline.
This is what makes the printer-friendly version work. There are a couple of rules at the beginning of the file you should be careful about changing, but otherwise, it's all up to you.
A Microsoft behavior file which adds support for PNG alpha channels to IE/Win; this is called via style rules added via the JavaScript. This file is skipped over by all other browsers, which don't need hackery to honor PNG alpha channels.
For a newcomer, creating a presentation in S5 may seem a bit daunting at first. Don't panic! Writing your own presentation is very, very easy. In order to help smooth the way, here's a short primer on what to change and what to leave alone in an S5 presentation file.
First, download the S5 blank template archive. This is a 26KB ZIP archive that contains everything you'll need to create a basic slide show: the presentation file itself, the style sheets that make it look pretty, and the JavaScript that drives the actual slide showing (and hiding).
Once you've downloaded the archive and uncompressed it, you should find two things: a file named s5-blank.html and a folder (directory) called ui. Inside that folder are all the CSS and JavaScript bits that make the slide show work. We're not going to mess with those; if you want more information on them, see the file map, or ponder slide 7 of the introductory slide show. All we're going to do is edit the file s5-blank.html. Go ahead and load it up into your favorite editor, whether that's Dreamweaver, GoLive, Notepad, TopStyle, or BBEdit. I'll use BBEdit.
The first part of the presentation file, at least the part after the DOCTYPE and the <html> tag, is the head element, shown in Figure 1.
For the most part, you shouldn't have to ever touch this part of the file. In fact, it's better to avoid it. If you changed any of the link elements, for example, you might break the slide show! So you'll want to just skip past it... except for one thing. See the title element? Change its contents from "[slide show title]" to the title of the slide show. So if you're doing a presentation on the benefits of respiration, you might call the slide show "Breathing Easy: Why Air Is Good For You". Go ahead and change the title contents to say that, as shown in Figure 2.
Other than that, you don't need to make any changes to this part of the file. Let's move on to the next part.
If you move downward in the presentation file, you'll find a div with an id of layout. Inside that div are a number of slide components; these appear on every slide in the slide show. This is where we find things like the header, footer, slide controls, and so forth, as shown in Figure 3.
There are really only two parts we need to worry about: the two sets of bracketed text. Replace the first one with "Anytown, USA • 1 August 2005". (Although you can certainly fill in today's date if you prefer; that just happens to be the date on which I updated this primer.) For the second bit, just fill in the slide show title. You can copy it from the title element at the top of the file, if you want to save some keystrokes.
A few words on the XHTML structures seen here. Many of them are necessary for the slide show to work, and should not be altered; an example is <div id="controls"></div>. Inside the header and footer, however, you can insert whatever XHTML and content you like. The only real restriction is that these are expected to be fairly small, because the larger the header and footer, and less space there will be for slide content. If you change the markup inside the header and footer, you may also have to modify the CSS files to handle whatever you put in there. We aren't going to get into all that now. Let's just leave things as-is and continue on to our first actual slide.
Typically, the first slide in the slide show will be a title slide. This doesn't have to be the case, of course; you can just jump right into the slides without having a title card. Most people prefer having one, though. The template contains a typical title slide, which is highlighted in Figure 4.
If you're writing an XOXO-based slide show, the markup here will be a little different: the presentation div
will be an ol
with a different class
value, and all the slides will be li
elements. See the page Minimal S5+XOXO Structure for details.
So let's replace the bracketed text with our own information. For the slide show title and subtitle, let's actually break up the title we've been using into two parts: "Breathing Easy" and "Why Air Is Good For You". Fill in these bits for the title and subtitle, respectively. Then, for the author name and affiliation, use your own name and employer (or whatever affiliation you'd prefer to admit). I'll use my own name and affiliation in creating the figures, such as Figure 6.
Having done that, let's take a peek at how the slide show is going. Load the file s5-blank.html into a Web browser such as Firefox, Safari, or Internet Explorer. Those aren't the only browsers you can use; in general, if it was released in the 21st Century (by the Gregorian Calendar), then it's probably okay to use. You should immediately see the title slide appear. A scaled-down version appears in Figure 5, along with some highlight boxes.
Box #1 marks the footer content, which was the first thing you edited in the slide show. Box #2 surrounds the content of the title slide, which you just now edited. Box #3 points out the slide controls, which are automatically created by the JavaScript when the presentation is loaded.
Pretty easy so far, eh? Just wait: it gets even easier.
Again, move down in s5-slide.html. After the first slide, the one we made a title slide, you'll find another slide. It's shown in Figure 6.
At this point, you've probably figured out what to do. Just replace the bracketed text with your own content, and there you go: you have a slide. So the title might be "An Introduction to Air" and the five points would be various facts about air, or perhaps would be a preview summary of what the rest of the slide show will discuss. Since most slides are just a set of bullet points, using an unordered list is definitely the way to go. You can have a different number of points than five, of course, but remember that if the slide gets too long, content will disappear behind the footer.
Now, after the list, see the div with a class of handout? That's where you put any extra notes or information related to the slide content that should appear in printed handouts, but not go on the slide when it's given as a presentation. You could put URLs for more information, include code snippets, or anything else that would be useful to someone looking at the handout. If a slide doesn't have any handout material, you can delete the div, or else leave it in place but empty—it's up to you.
Go ahead and put something in the handout section for the current slide, then reload the presentation file in a Web browser. Once the title slide comes up, advance to the next slide by pressing the space bar on your keyboard (or hitting page down, right arrow, or down arrow; or by clicking the mouse button while the pointer is somewhere over the slide). You should see something like what's in Figure 7.
For a complete listing of the keyboard controls in S5, see the Features page.
Notice that the handout material doesn't appear in the slide. If you were to print out s5-blank.html, though, it would show up at the end of this slide.
In order to create a new slide, you can either type in the markup to create a new one, or (more conveniently) copy the slide you just finished, paste it into the file after the last slide, and change the content. There is no defined limit to the number of slides in a given presentation, so you shouldn't have any problems with running out of space. (Your audience might have problems if you subject them to a 100-slide presentation, though.)
font-size
of the body
element, although in some browsers you can simply scale the text size from the keyboard.)As you've seen in this quick primer, creating your own presentation is pretty simple. In the majority of cases, all you need is to have a short unordered list in each slide, but you can certainly include other kinds of material if you like.
Hopefully this primer has helped you get started creating your own presentation. If there's anything missing or unclear, please let me know.
s5-1.1.orig/structure-ref.html 0000644 0001750 0001750 00000044320 10272241430 015015 0 ustar roam roamThis document provides a full reference to the S5 presentation file format. The following conventions are used:
S5 1.1 is compatible with the Opera Show Format 1.0 (hereafter OSF 1.0). It is also capable of conforming to the XOXO microformat.
A complete example file can be found at the end of this document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="layout"> </div> <div class="presentation"> </div> </body> </html>
This is the basic top-level skeleton for an article file. Most of these top-level elements all have descendent elements, which are explained by the rest of this document.
head
— The Document's Metadata
<head>
<title>[slide show title]</title>
<meta name="version" content="S5 1.1" />
<meta name="generator" content="[generating program]" />
<meta name="presdate" content="[presentation date]" />
<meta name="author" content="[author's name]" />
<meta name="company" content="[author's employer]" />
<meta http-equiv="Content-Type" content="[content-type]" />
<meta name="defaultView" content="[value]" />
<meta name="controlVis" content="[value]" />
<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" />
<script src="ui/slides.js" type="text/javascript"></script>
</head>
intro
application/xhtml+xml;charset=utf-8
.slideshow
and outline
. The default value is slideshow
.visible
or hidden
. The default value is visible
.@import
directives that point to still other style sheets; see the file map for more details.
<div class="layout">
<div id="controls"></div>
<div id="currentSlide"></div>
<div id="header">[any header content]</div>
<div id="footer">[any footer content]</div>
<div class="topleft">[top left layout bit]</div>
<div class="topright">[top right layout bit]</div>
<div class="bottomleft">[bottom left layout bit]</div>
<div class="bottomright">[bottom right layout bit]</div>
</div>
<div class="topleft">
. They may also be given an optional id attribute that refers to the relevant meta element, so editors can determine what information was positioned and use this to their advantage in the editing UI. Copied from OSF 1.0.<div class="presentation"> <div class="slide"> <h1>[slide title]</h1> <div class="slidecontent"> [slide content] </div> <div class="handout"> [extra content not displayed in slide show] </div> </div> </div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[slide show title]</title> <meta name="version" content="S5 1.1" /> <meta name="generator" content="[generating program]" /> <meta name="presdate" content="[presentation date]" /> <meta name="author" content="[author's name]" /> <meta name="company" content="[author's employer]" /> <meta http-equiv="Content-Type" content="[content-type]" /> <meta name="defaultView" content="[value]" /> <meta name="controlVis" content="[value]" /> <link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" /> <link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" /> <link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" /> <script src="ui/slides.js" type="text/javascript"></script> </head> <body> <div class="layout"> <div id="controls"></div> <div id="currentSlide"></div> <div id="header">[any header content]</div> <div id="footer">[any footer content]</div> <div class="topleft">[top left layout bit]</div> <div class="topright">[top right layout bit]</div> <div class="bottomleft">[bottom left layout bit]</div> <div class="bottomright">[bottom right layout bit]</div> </div> <div class="presentation"> <div class="slide"> <h1>[slide show title]</h1> <h2>[slide show subtitle]</h2> <h3>[author's name]</h3> <h4>[author's employer]</h4> </div> <div class="slide"> <h1>[slide title]</h1> <div class="slidecontent"> [slide content] </div> <div class="handout"> [extra content not displayed in slide show] </div> </div> </div> </body> </html>s5-1.1.orig/primer/ 0000755 0001750 0001750 00000000000 10274651430 012617 5 ustar roam roam s5-1.1.orig/primer/s5-primer02.png 0000644 0001750 0001750 00000112143 10274651204 015313 0 ustar roam roam PNG IHDR b gAMA BO pHYs $tEXtSoftware QuickTime 7.0.1 (Mac OS X) tIME2|{ IDATxyTGgz6f`67AP"BTT49$UD&QEF9F&.WWFECĈ{XEhT@`YϜ@܂{_UѢnqU,c@ Ê⒬K709<c1