|
#REDIRECT [[Slide show#Web-based slide show]]
{{cleanuplist|date=April 2012}}
{{Original research|date=April 2012}}
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.
{{R from merge}}
Compared to a fully fledged [[presentation program]] the web based slide shows are usually limited in features.
{{R to section}}
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.
{| class="wikitable"
|-
! 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 {{Anchor|List}} ==
=== 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 (file format)|S5]] (Simple Standards-Based Slide Show System) is an XHTML-based file format for defining [[slideshows|Slideshow]]
On July 17, 2006, Ryan King launched ''s5project.org'', "a new community site, dedicated to the S5 Presentation software".<ref>{{cite web|url=http://meyerweb.com/eric/thoughts/2006/07/19/s5projectorg/|title=S5Project.org|date=19 July 2006|first=Eric|last=Meyer|authorlink=Eric Meyer|accessdate=17 August 2010}}</ref><ref>{{cite web|url=http://theryanking.com/entries/2006/07/17/s5projectorg/|title=S5Project.org|date=17 July 2006|first=Ryan|last=King|accessdate=17 August 2010}}</ref><ref>{{cite web|url=http://s5project.org/news/2006/07/annoucing-s5projectorg.html|title=Annoucing S5Project.org|archivedate=16 May 2008|archiveurl=http://web.archive.org/web/20080516011758/s5project.org/news/2006/07/annoucing-s5projectorg.html|date=16 July 2006|first=Ryan|last=King|accessdate=17 August 2010}}</ref><ref>{{cite web|archiveurl=http://web.archive.org/web/20080524211509/s5project.org/news/2006/07/whats-new-in-s5.html|archivedate=24 May 2008|title=What’s new in S5?|url=http://s5project.org/news/2006/07/whats-new-in-s5.html|date=26 July 2006|first=Ryan|last=King|accessdate=17 August 2010}}</ref>
=== DokuWiki plugin for S5 ===
On December 4, 2006, Andreas Gohr announced a [[DokuWiki]] plugin that converts [[Wiki markup]] to XHTML-compatible S5 presentations.<ref>{{cite web|url=http://www.splitbrain.org/blog/2006-12/04-presentations_in_dokuwiki|title=Presentations in DokuWiki|first=Andreas|last=Gohr|authorlink=Andreas Gohr|date=4 December 2006|accessdate=29 August 2010}}</ref>
=== 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, [https://github.com/minad/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 (stylesheet language)|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 [https://github.com/geraldb/s6 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 ===
[https://github.com/Seldaek/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]]
==References==
{{Reflist}}
[[Category:Presentation software]]
| 