Showing off S⁵

Simple Standards-based Slide Show System (S⁵) is a slide show program for browsers. It creates presentations that do not require any specific software on any specific operating system, and whose size is significantly smaller than conventional presentation formats. And S⁵ is available under a Creative Commons Attribution-ShareAlike 2.0 license.

Driven by the limitations of Opera Show, Eric A. Meyer designed S⁵, a slide show application based entirely on XHTML, CSS (Cascading Style Sheet) and JavaScript. S⁵ is based on a slightly modified version of Tantek Çelik‘s slide show format.

You can run through S⁵‘s introductory slide show to see the application in action.

To get started with S⁵, you need only a theme, some of which are available on the developer’s site. When you uncompress the theme, you’ll get a slide file and a user interface directory that contains all the required CSS and JavaScript files. If you need to use any of your own background images in your slide show, put them in the UI directory. The UI directory also contains:

• slides.js, which handles the dynamic side of the slide show, for showing and hiding slides;
• slides.css, which points to the three CSS files that power S⁵;
• s5-core.css, which contains rules that determine how the system functions;
• framing.css, which contains information about the placement and size of the various components of a slide, such as header and footer; and
• pretty.css, which is responsible for the appearance of your presentation. You can change colors and fonts by editing this file, and if you wish to create your own theme you can do so by modifying just this file.

While it helps to have working knowledge of CSS, you hardly need to tinker with the JavaScript file as it controls only the manner in which slider are loaded during the presentation.

If you are satisfied with the size and placement of all the slide components but need to make the slides more colorful, edit the pretty.css file. When customizing a theme, refer to the actual slide file, s5.html, to determine what parts of pretty.css you need to change. For example, suppose you wish to change the color of the title of the slide. Referring to s5.html, we see that it uses <h1> to determine the properties of the title, so you look up where <h1> is described in pretty.css and modify it to meet your needs.

If you wish to display your own image as the background image in the slides, find where pretty.css defines the body background and replace the image name with that of your file. Be careful about the size of the image, though, so you don’t take up the whole screen.

When making your presentation you need to modify only the presentation HTML file. You can add new slides by copying very simple HTML directives. There is no limit to the number of slides you can have.

Limitations of S⁵

Meyer lists the application’s limitations in his introductory slide show. Among them:

• Fonts are not scaled according to the screen resolution. This means that you have to edit the CSS code manually each time you change your screen resolution.
• If you want swirl, swish, and typewriter effects to show off your presentation authoring skills, then, S⁵ is not the right option for you.

Shashank Sharma
is a computer science student who loves to write about free and open source software for new users.