Web-based slideshow

A Web-based slideshow is a slide show which can be played (viewed or presented) using a web browser. Some web based slide shows are generated from presentation software and may be difficult to change (they are usually not supposed to). Others offer templates allowing the slide show to be easily edited and changed.

Compared to a fully fledged presentation program the web based slide shows are usually limited in features.

A web based slide show is typically generated to or authored in HTML, JavaScript and CSS code (files).

Features

A web-based slide show usually offers the following features - here split between player (the presenter) features and features available while editing the slide show.

Player Feature	Feature type	Description
Works offline	Basic	The slide show can run without being online to the Internet. Implies that all files are available locally.
No extra runtime environments	Basic	The slide show can run in web browser without having to download extra runtime environments, e.g. Flash player or Java.
Keyboard (Prev/Next)	Basic	Supports moving to next or previous slide (page) using the keyboard. Usually Enter, Space, Arrow Right or Page Down for going to next slide (page) and Arrow Left or Page Up for going to previous slide (page).
Keyboard (Home/End)	Basic	Supports moving to first and last slide (page) using the keyboard. Usually Home and End keys.
Slide transition	Basic	Moving between slides (pages) is displayed using transitional animation (visual movement), e.g. wipe.
Full screen	Basic	Supports showing the slide show in full screen (in the browser). Usually implies some sort of automatic scaling of text and images on slides (pages).
Slide numbers	Basic	Supports viewing (toggle) the current slide (page) number and total number of slides (pages), e.g. 1/19.
Mobile device compatible	Semi-Advanced	Can be displayed on (the browser) in a mobile phone or tablet. Also implies supporting touch to move between slides (pages).
Slide URL	Semi-Advanced	Supports a direct URL to each slide (page), typically using fragment identifier #.
TOC	Semi-Advanced	Supports viewing (toggle) a table of contents.
Auto play	Advanced	Supports automatic timed play (movement) to next slide.
Cross browser compatible	Advanced	The slide show be played using a variety of different standard compliant browsers.
Toggle speaker notes	Advanced	Allow the user to see/view his/her speaker notes, e.g. as overlay or footer on the screen.
Prints	Advanced	Supports printing the slide show pages, with or without slide (page) numbers and with or without the speaker notes.
Editing Feature	Feature type	Description
Background image	Basic	Supports defining background color or image.
Header	Basic	Supports a common header (text and/or image, e.g. logo) throughout slides.
Footer	Basic	Supports a common footer (text and/or image, e.g. logo) throughout slides.
Images	Basic	Supports inserting images, e.g. a screenshot, in the slides (pages).
Headings	Basic	Supports inserting basic headings, e.g. h1, h2, ...
Paragraphs	Basic	Supports inserting paragraphs of text, e.g. p
Lists	Basic	Supports inserting lists, e.g. ul and li elements.
Background off	Semi-Advanced	Supports turning off background image for individual slides (pages).
Outline	Semi-Advanced	Supports creating outline with hidden elements (e.g. text) that can be expanded/collapsed in player.
Pretty printed source code	Advanced	Supports inserting source code, possibly pretty printed in player.
Revealed elements	Advanced	Supports marking elements, e.g. list elements, to be transitionally revealed incrementally - one by one - typically by a key/button press in player. The revelation may be animated/transitioned, e.g. via fade in, wipe, etc.
Group revelation	Advanced	Supports marking elements belonging to a ordered group of elements which are revealed together, e.g. group by group in a sequence (typically by a key press in player). The revelation may be animated/transitioned.
SVG	Advanced	Allows to embed SVG.
MathML	Advanced	Allows to embed MathML.
Speaker notes	Advanced	Allows to insert speaker notes.
Embed web page	Advanced	Allows to embed, e.g. trough iframe element, a complete web page. Scroll bars may appear.
Template based	Advanced	Support look and feel templates. By specifying another template you change the look and feel of the slideshow. Often implies that you can make your own templates, choosing your own fonts, font sizes, colors, background images, used logo etc.

List of web-based slide shows

CSSS

https://github.com/LeaVerou/CSSS CSS-based SlideShow System by Lea Verou

Slidifier

http://slidifier.com generates slideshows from plain text source. Slidifier is focused on simplicity and speed of use rather than a high number of features.

S5

S5 (Simple Standards-Based Slide Show System) is an XHTML-based file format for defining Slideshow

On July 17, 2006, Ryan King launched s5project.org, "a new community site, dedicated to the S5 Presentation software".

DokuWiki plugin for S5

On December 4, 2006, Andreas Gohr announced a DokuWiki plugin that converts Wiki markup to XHTML-compatible S5 presentations.

S5 Reloaded

In December 2006, Christian Effenberger launched S5 Reloaded, an extended version of S5 with new features such as autorun, scalable images, sound support, transition effects and new themes.

Diascope

In July 2010, Daniel Mendler created diascope, Diascope is a mostly-S5-compatible implementation which sucks less. It is inspired by s5-reloaded. It has support for embedded SVG and MathML, theme switching. CSS is handled by SASS.

Gnome-S5

Todd A. Jacobs host git repo CodeGnome-S5 https://github.com/CodeGnome/s5

Presentista

http://Presentista.com is a presentation tool that currently allows users to enter content (text and/or images from the tool itself) on a blank canvas; Presentista then creates a zooming presentation from your content.

S6

Gerald Bauer maintains S6 Project S6 started as a rewrite of Eric Meyer’s S5 using the jQuery JavaScript library – offering easier to understand and easier to extend code. Add plugins, effects and more.

Slippy

slippy is S5 compatible project By Jordi Boggiano which has capability to export html slideshow into pdf

Rst2S5

One can use reStructuredText to generate S5 presentation using rst2s5.py http://docutils.sourceforge.net/docs/user/slide-shows.html

html-slideshow

Rob Flaherty created a light weight HTML SlideShow https://github.com/robflaherty/html-slideshow, it has feature to execute Javascript for particular slides by binding the "newSlide" events.

Django S5

http://github.com/myles/django-s5

Drupal S5

http://drupal.org/project/s5

Dokuwiki S5 Reloaded

http://www.dokuwiki.org/plugin:s5reloaded

jQuery.s5

http://www.visop-dev.com/Project+jQuery.s5

Tiki Wiki CMS Groupware

http://doc.tiki.org/JQS5 (uses jQuery.s5)

Plone S5

http://www.enfoldsystems.com/developer/software/plones5

spod5 (Perl POD to S5)

http://search.cpan.org/dist/spod5/

or:

http://search.cpan.org/dist/Pod-S5/

HTML Slidy

http://www.w3.org/Talks/Tools/Slidy2/

Similar to S5, from W3C.

HTML5 Slides

http://code.google.com/p/html5slides/

A slide show template by Google using HTML 5 & CSS features. Using a Apache License 2.0.

HTML5 Rocks

http://slides.html5rocks.com/#slide1

A slide presentation by Google using HTML 5 & CSS 3 features (e.g. CSS transitions). The Apache licensed presentation system is seemingly unnamed.

Landslide

https://github.com/adamzap/landslide

Generates HTML5 slides (see above) from markdown/rst documents.

ShowOff

https://github.com/schacon/showoff/

from Scott Chacon; it's a little heavier in the sense that it requires interaction with a custom Sinatra web application to work properly, even though the underlying slides are still HTML and CSS.

Slimey

http://slimey.sourceforge.net/

A rough attempt at a web-based presentation editor. Works for basic use, but no updates in over a year. It produces an extension of the S5 format it calls "SLIM" (Slideshows Microformat). Includes the "Slime" engine to display these presentations.

Slidy editor prototype

http://people.w3.org/~dsr/editor/old/editor.html

An old attempt at a WYSIWYG slide editor using contentEditable. Not in a usable state.

Slideshow (S9)

http://slideshow.rubyforge.org/

Lets you create slide shows and author slides in plain text using a wiki-style markup language that's easy-to-write and easy-to-read. Supports S5, S6, Slidy, Google HTML5 Rocks, and other template packs.

HTML5 Slideshow

http://www.ravelrumba.com/blog/html5-slideshow/

https://github.com/robflaherty/html-slideshow

slideous

A Lightweight HTML-based presentation tool, inspired by S5 and Html Slidy

http://goessner.net/articles/slideous/slideous.html

DZSlides

DZSlides is just a single all-in-one HTML template and the blurb reads:

https://github.com/paulrouget/dzslides

DZSlides is a one-page-template to build your presentation in HTML5 and CSS3. [Note: Uses CSS3 transitions and, hus, requires Firefox 4+.]

jQuery-Presentation

A jQuery based slideshow system https://github.com/davist11/jQuery-Presentation

deck.js

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow. https://github.com/imakewebthings/deck.js

Also supports input in ReStructuredText thanks to https://github.com/marianoguerra/rst2html5

impress.js

A presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Created in 2011 by Bartek Szopka under the MIT license. For source and example see http://bartaz.github.com/impress.js

Flash-based Slideshow

• Prezi