View source for S5SlideShow

[http://meyerweb.com/eric/tools/s5/ S<sup>5</sup> or simply S5] is a cross-browser slide-show system using pure HTML and JavaScript. Its name is derived from ''Simple Standards-based Slide Show System'' — 5 times «S», or simply S<sup>5</sup>.

[[S5SlideShow]] is a MediaWiki extension allowing simple, fast and convenient creation of slide shows using S5 in the context of MediaWiki and Wiki pages.

The source code lives in Google Code:
* …And is mirrored to our SVN to allow partly checkout: http://wiki.4intra.net/svn/mediawiki4intranet/extensions/S5SlideShow/
* Google code link to Mercurial repository: http://code.google.com/p/mediawiki4intranet/source/browse?r=mw4i-ext#hg%2Fextensions%2FS5SlideShow
* (TBZ2-archived version from 2011-11-01): http://mediawiki4intranet.googlecode.com/files/S5SlideShow-2011-11-01.tar.bz2

Extension page on mediawiki.org: [[mediawikiwiki:Extension:S5SlideShow|Extension:S5SlideShow]].

Slide show example (russian language): [[User:StasFomin/VideoKnowHow]].

== Usage ==

S5SlideShow gives a simple, convenient and fast method for creating slide shows from plaintext. Of course, it supports the full range of MediaWiki features such as [[FLVHandler|Flash video]], [[MMHandler|Mindmaps]], [[mediawikiwiki:Extension:SyntaxHighlight_GeSHi|code highlighting]] and etc.

You can turn any wiki page into a slide show. To do so, put there a block (slide show definition) with following content:

<pre>
<slideshow attribute="value" [attribute="value" ...]>
;attribute: Value
[;attribute: Value ...]
</slideshow>
</pre>

I.e. attributes may be specified either as XML-like <tt>&lt;slide&gt;</tt> tag attributes, or as definition list items inside it. There are the following attributes:

{| class="wikitable" style="width:100%;"
!style="width:15%;"|Attribute
!Description
|-
|style || 6 skins are available «out-of-the-box»: blue, default, custis, flower, yatil, pixel. You can also create your own styles using wiki pages. See [[#Skins]].
|-
|headingmark|| A character sequence, which is searched inside all headings text (== Just a simple MediaWiki headings ==), and if it’s there, the heading will be mapped to slide in the slide show mode. If the heading includes this substring — it will be a slide. If the headingmark attribute value is empty, '''no''' headings will be mapped to slides, just lt;slides&gt; tag will be used. <br />Example: <tt>; headingmark: Slide:</tt>.
|-
|incmark || A similar seq for selecting «step-by-step» slides. Step-by-step means that if there are any lists (ordered # or unordered *) on the slide, they will be shown grayed, and with each mouse or Enter key click, the next list item will be highlighted.
|-
|centermark|| This sequence is used to center the slide content without removing the heading.
|-
|scaled|| If this attribute’s value is '''<tt>1</tt>''', '''<tt>true</tt>''' or '''<tt>yes</tt>''' (case insensitive), then all slides' content is scaled automatically to fit the screen. Images, including SVG ones, are scaled too, and will always have size «relative» to the font size. This is not the basic S5 ability, but an our feature.
|-
|author || Slide show author (for the first (title) slide). Can contain Wiki markup.
|-
|title || Slide show title. Can contain Wiki markup.
|-
|subtitle || Slide show subtitle (for the title slide). Can contain Wiki markup.
|-
|subfooter || A string displayed in page footer on each slide. Can contain Wiki markup. Also, the word <tt><nowiki>{{date}}</nowiki></tt> is special inside it — it is replaced with last article edit timestamp.
|}

After adding the slide show definition, you only need to click the skin preview image emerged in the place of the definition in article view. Then, if you’re in Opera, click F11, and if you’re in Firefox or Chrome, the presentation will begin itself.

So, slides are specified as article sections with «headingmark» in their titles. You can also specify slides using &lt;slides&gt; tag. Slides specified like this are shown as «live thumbnails» (html DIVs with scaled content). This mode is considered experimental and should not be used for the whole presentations, as the resulting presentation will be much less readable. You should use it only for generating slides for some «floating illustrations»:
<pre>
<slides float="right" width="300">
[[File:Image.jpg]]
</slides>
</pre>

== Skins ==

There are 6 different skins available:

<tab sep="bar" head="top">
custis|default|blue
{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/custis/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/default/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/blue/preview.png
</tab>
<tab sep="bar" head="top">
flower|yatil|pixel
{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/flower/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/yatil/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/pixel/preview.png
</tab>

=== Creating your own skins ===

With the S5SlideShow extension you can easily create your own S5 skins, using only wiki-page editing. S5 skin is simply a file with CSS styles for specific HTML elements. To be correct, there are several CSS’s, but most of the time you need only one «'''<tt>pretty.css</tt>'''» to change how the slide show looks.

CSS styles can be put on Wiki pages with names like '''<tt>[[MediaWiki:S5/custis/pretty.css]]</tt>''', where '''<tt>custis</tt>''' is the skin name (replace with yours), and '''<tt>pretty.css</tt>''' is the CSS stylesheet name. Most of the time you only need to edit <tt>pretty.css</tt>, but if you’ll need to change other builtin styles — you can also change '''<tt>core.css</tt>''', '''<tt>base.css</tt>''' and '''<tt>framing.css</tt>'''. Builtin S5 skins can be changed in the same manner — the wiki page content overrides files from the extension distribution.

CSS styles could obviously use some images, and here, all is also simple — if you want to use your own image in the style, just [[Special:Upload|upload it to MediaWiki]] (using '''only''' latin letters, numbers and '.', '-', and '_' characters in file name), and add it your CSS as following: '''<tt>url(filename.png)</tt>'''. When S5SlideShow will generate CSS for your skin, this construction will be replaced with a correct path to your image.

After that, passing your skin name as '''<tt>&lt;slide style=""&gt;</tt>''' will work in all presentations.

Example style links — open them despite of they’re red (article does not exist), they’ll show you the default CSS stylesheets of '''blue''' skin:
* [[MediaWiki:S5/blue/core.css]]
* [[MediaWiki:S5/blue/base.css]]
* [[MediaWiki:S5/blue/framing.css]]
* [[MediaWiki:S5/blue/pretty.css]]

{{note}} You can use custis’s [[MediaWiki:S5/custis/pretty.css|pretty.css]] as a base for your own skin — just replace the logo :)

You can also upload the preview image for your newly created skin — use filenames like [[Media:S5-devconf-preview.png]] (where «devconf» is the skin name). It will be scaled to ~200px automatically.

== Remarks ==

; Duality: There are several features that make S5 in combination with MediaWiki a unique technology — firstly, slide shows are created '''very simply''', and secondly, there is no more need to maintain two versions of presentation «with» and «without» remarks — «for slide show» and «for home reading». For «home reading» the normal article view mode can be used, because you can make its part non-mapped to slides. Moreover, such slide shows allow simple collaborative work, version control and other normal Wiki features.
; Opera: As it was already mentioned, you need to press F11 to go into slideshow and fullscreen mode in Opera browser. It’s not required in Firefox and Chrome.
; Control panel: If you move the mouse cursor over the lower-right corner of the slide show, you can see a simple slide show control panel.
; Skin selection: Any slide show can be opened using any available skin without changing its definition — you only need to add <tt>&s5skin=NAME</tt> to slide show URL (where NAME is the skin name).
; WISYWIM: In [[MediaWiki4Intranet]], you can use «live auto-preview» to perform «almost WISYWIM» (What You See Is What You Mean) mode editing. To do so you need to check the «slides» checkbox below the edit area, select desired auto-refresh time (30 seconds by default) and click «Auto-preview» (FIXME checkboxes may be not translated from russian by now). A new browser tab or window will be opened, and you can place it at the right side of edit window or, for example, on the second display. It will contain the slideshow you are editing, and position within it (slide #) will be preserved, and it will refresh each XX seconds (30 by default).
; Incremental (step-by-step) display: There are 3 ways to do it.<br />'''First''': If the slide is marked with «incremental» mark ('''incmark''' attribute) all lists — ordered and unordered ones — will be displayed item-by-item.<br />'''Second''': On any slide, the contents of any element with CSS <tt><nowiki>class="anim"</nowiki></tt> will be shown item-by-item (for example <tt><nowiki><div class="anim"><div>i.1</div><div>i.2</div></div></nowiki></tt> and etc).<br />'''Third''': a single element can be marked with <tt><nowiki>class="incremental"</nowiki></tt> and it will become an «additional step» for display.
; Step-by-step «animations»: If you mark some element (most commonly &lt;div&gt;) with <tt><nowiki>class="anim over"</nowiki></tt>, then the contents of this element will be shown not just step-by-step, but each next subelement will replace the previous one. You can use it for effects like this: [http://meyerweb.com/eric/tools/s5/s5-intro.html#slide10 animation example from S5 author] (works only in Firefox/Chrome, because there is an old S5 version). This also isn’t a basic S5 ability and also is our feature.
; Link to slide: If you want to make a link to specific slide, add the <tt>#slideN</tt> anchor to slide show URL. N is slide number, beginning with 0 which is the title slide. Also, our S5 version preserves the position (current slide number) on page reload (F5, Ctrl-R). And this is also our feature :)

== Example ==

Slide show definition example (can be used as a stub for copy-paste):

<pre>
<slide style="custis" headingmark="Slide:" incmark="(step)" scaled="true">
;author: Presentation Author
;title: Multithreading in Java (beginning)
;subtitle: Multithreading in Java (beginning)
;subfooter: {{date}}
</slide>
</pre>

== Installation ==

Installation is very simple. All you need is to get the code into <tt>/extensions/S5SlideShow</tt> subdirectory (you can’t use other path as it’s hardcoded by now) and add a line to LocalSettings.php:
<code-php>
require_once "$IP/extensions/S5SlideShow/S5SlideShow.php";
</code-php>

Also you can specify some configuration, but this is not required:
<code-php>
// headingmark attribute default value
$egS5SlideHeadingMark = '';
// incmark attribute default value
$egS5SlideIncMark = '\(step\)';
// hack into parser for better image quality in presentations
$egS5BrowserScaleHack = true;
</code-php>

== Changes ==

* 2011-11-01: Removed all warnings under E_STRICT. Removed register_globals vulnerabilities. Allow centered slides with titles (centermark).
* 2011-09-19: Parser hack for better image quality in presentations ($egS5BrowserScaleHack). Images inserted with a specified width will be scaled by browser instead of MediaWiki software.
* 2011-09-12: Fix SVG scaling errors.
* 2011-06-17: Allow custom style previews to be stored as uploaded files.
* 2011-06-15: «noslide» and «slideonly» CSS classes to allow hiding/showing certain elements.
* 2011-06-10: Fix non-working «incmark» error.
* 2011-06-06: Follow redirects in presentation mode.
* 2011-05-29: Refactoring — totally new article parsing method, &lt;slide> is renamed to &lt;slideshow>, much better content scaler (+images +SVG +CSS3), always scales content relatively to the text. Also new optional experimental method for specifying slides — &lt;slides&gt; tag, allows «live thumbnails» mode when viewing article. «pagebreak» option is removed.
* 2011-05-10: Allow to create own skins using Wiki pages.

== Open issue(s) ==

* FIXME remove hardcode extensions/S5SlideShow/
* TODO cache generated stylesheets and flush the cache after saving style articles
* TODO remove support for loading text from session object and replace it by support for save-staying-in-edit-mode extension

[[Category:MediaWiki]]
[[ru:S5/ru]]