[S5-discuss] Alternate themes support in S5

[Rafael Luque]

Hi Ryan and the rest of listers,

I have been using S5 for a while in our training sessions and I really
think it is a very cool tool.

I have only worked with Eric Meyer's codebase. I have just known about
S5project.org initiative and I'm really excited about the improvements
in the current version of S5 I have read about in your announcement post.

After a time working in a new theme for S5 I realized that the current
theme support has several limitations or at least it could be improved
in several ways. For instance:

  * There is no clear separation between the core files that control S5
internals (JavaScript code and core stylesheet) and the files
responsible of presentation issues. All these files are located under
the same directory (ui/default).

  * The installation of new themes requires either overwrite the default
stylesheets included with S5 tool (framing.css and pretty.css) or create
a directory containing all the S5 stuff, and not only the theme-related
styles.

  * Lack of support for multiple alternate themes associated with a
presentation.

I have been refactoring a bit (only a couple of nights) around the S5
(Eric Meyer codebase) to follow this way. My current version is still
very early, but I have yet implemented the following changes:

  * New directory layout:
    - ui/core: for the JavaScript and core CSS files. Theme authors
should not touch here.
    - ui/themes: the directory to install new themes (the S5 default
theme has been factored out to ui/themes/default).

  * I have introduced new configuration parameters to allow the user
specify declaratively the theme or set of themes used by the
presentation. For instance:

<meta name="preferredTheme" content="orangesoft" />
<meta name="preferredThemeTitle" content="Orange Soft's theme" />
<meta name="alternateTheme" content="i18n" />
<meta name="alternateThemeTitle" content="i18n theme" />

The code will use the configuration values to autogenerate the following
link elements (corresponding to preferred and alternate sytle sheets):

<link rel="stylesheet" title="Orange Soft's theme"
href="ui/themes/orangesoft/hook.css" type="text/css" media="screen" />

<link rel="alternate stylesheet" title="i18n theme"
href="ui/themes/i18n/hook.css" type="text/css" media="screen" />

As you note, in this point I introduce a bit of convention to ease
development. The theme name specified must match with the directory in
which it is installed (under ui/themes), and all the themes must contain
a hook stylesheet with a well-known name (hook.css) to be referenced by
the tool. This file may either contain all the style rules or import the
actual theme styles.

  * The code also autogenerates a style switcher mechanism (drop-drown
menu) to allow the users switch between the themes declared in
"presentation-time". The visibility of this switcher is controlled in
the same way that navigation controls, i.e. "controlVis" configuration
parameter and the 'c' accesskey.

You can see this work-in-progress, very ugly version at an internal
presentation about the use of S5 at
http://www.orange-soft.com/training/s6/s6-intro.html (sorry, but at the
moment it is only in spanish). As you will note, I took the liberty to
name this improvement S6 (Simple Standards-based Skinnable Slide Show
System) :-)

Rafa


-- 
Rafael Luque Leiva

Orange Soft - http://www.orange-soft.com
Creando software para las personas

Urbanización Las Castañeras
Arroyo de los Combos, 26 bis
Arroyomolinos, E28939 Madrid
Tel: +34 692 613 639
Fax: +34 916 091 075

GnuPG Key ID: 0x4B9238A2