S5 Presentation Mode

S5 stands for "Simple Standards-Based Slide Show System." It is a method of using CSS, HTML and Javascript to create PowerPoint style slide slide shows. It is an open standards-based and machine independent presentation format. It was created by Eric Meyer, a CSS guru. Learn more about S5 at his web site.

The benefit of S5 is that you can take content from a standard wiki page and display it as presentation slides without needing to create a separate  presentation in PowerPoint. It can all be done from within your web browser. JSPwiki and Dokuwiki have S5 plugins. Here is a demo using Dokuwiki. As you can see you start out with a basic outline on a wiki page with some bulleted text or images. Each H1 section starts a new slide. Click the Presentation icon and you are in full page presentation mode.

There is a S5 persentation Greasemonkey script for Wikipedia that works with Firefox. With some editing it probably could be adapted to Deki Wiki, however an integrated solution would be preferred and work with other browsers.

I have attached the latest version of S5 from Eric Meyer's web site. It should not be too difficult to implement and it would be a nice feature where mutiple people could contribute to a presentation up to the last minute and be able to display it anywhere on the web with no need to mess with Powerpoint or Keynote if you want a simple presentation. It is much easier and faster to use once it is in place.

I would imagine that a Presentation mode option in the More drop down menu would be the ideal means by which end users could activate the feature. A pop-up window with the option to select different templates would be nice. To accomodate custom templates, there could be a section for the administrator to edit the S5 templates, specify a default and upload custom graphics.

There is an enhanced version of S5 called S5 Reloaded which inlcudes support for scaling images, soft transitions, more user controls and audio.

// ==UserScript==
// @name Wikipedia Presentation
// @namespace http://phiffer.org
/// @description Turn a Wikipedia article into a presentation
// ==/UserScript==
var wikipedia_presentation = { 
	setup: function() { 
		this.sections = []; 
		this.pos = 0; 
		var body = document.getElementsByTagName('body')[0]; 
		this.orig_markup = body.innerHTML; 
		var markup = body.innerHTML; 
		var start = 0; 
		var end = markup.indexOf('<span class="editsection"'); 
		while (end != -1) { 
			start = markup.indexOf('</span>', end); 
			end = markup.indexOf('<span class="editsection"', start); 
			if (end == -1) { 
				end = markup.indexOf('<div class="printfooter">', start); 
				this.sections.push(markup.substr(start, end - start)); 
				end = -1; 
			} 
			this.sections.push(markup.substr(start, end - start)); 
		} 
		if (this.sections.length > 0) { 
			var div = document.getElementById('bodyContent'); 
			var link = div.insertBefore(document.createElement('a'), div.firstChild); 
			link.innerHTML = 'Start presentation'; 
			link.setAttribute('href', '#presentation'); 
			link.addEventListener('click', this.start, false); 
		} 
	}, 
	start: function() { 
		var body = document.getElementsByTagName('body')[0]; 
		body.innerHTML = ''; 
		body.style.textAlign = 'center'; 
		var prev = body.appendChild(document.createElement('a')); 
		prev.innerHTML = '&larr; 
		Prev'; prev.setAttribute('href', '#prev'); 
		prev.style.font = '11px verdana, sans-serif'; 
		prev.addEventListener('click', function() { wikipedia_presentation.prev(); }, false); 
		body.appendChild(document.createTextNode(' / ')); 
		var stop = body.appendChild(document.createElement('a')); 
		stop.innerHTML = 'Exit'; 
		stop.setAttribute('href', '#exit'); 
		stop.style.font = '11px verdana, sans-serif'; 
		stop.addEventListener('click', function() { wikipedia_presentation.stop(); }, false); 
		body.appendChild(document.createTextNode(' / ')); 
		var next = body.appendChild(document.createElement('a')); 
		next.innerHTML = 'Next &rarr;'; 
		next.setAttribute('href', '#next'); 
		next.style.font = '11px verdana, sans-serif'; 
		next.addEventListener('click', function() { wikipedia_presentation.next(); }, false); 
		var slide = body.appendChild(document.createElement('div')); 
		slide.setAttribute('id', 'wikipedia_presentation'); 
		slide.style.width = '500px'; 
		slide.style.margin = '100px auto'; 
		slide.style.textAlign = 'left'; 
		slide.style.font = '2em verdana, sans-serif';
		slide.innerHTML = wikipedia_presentation.sections[0]; 
		var items = slide.getElementsByTagName('li'); 
		for (var i = 1; i < items.length; i++) { 
			items[i].style.display = 'none'; 
		} 
		document.addEventListener('keypress', wikipedia_presentation.keypress, false); 
	}, 
	stop: function() { 
		var body = document.getElementsByTagName('body')[0]; 
		body.innerHTML = wikipedia_presentation.orig_markup; 
		body.style.textAlign = 'left'; 
		wikipedia_presentation.setup(); 
		document.removeEventListener('keypress', wikipedia_presentation.keypress, false); 
	}, 
	keypress: function(event) { 
		if (event.keyCode == 39) { 
			wikipedia_presentation.next(); 
		} else if (event.keyCode == 37) { 
			wikipedia_presentation.prev(); 
		} 
	}, 
	prev: function() { 
		this.pos--; 
		if (this.pos == -1) { this.pos = this.sections.length - 1; } 
		var slide = document.getElementById('wikipedia_presentation'); 
		slide.innerHTML = wikipedia_presentation.sections[this.pos]; 
	}, 
	next: function() { 
		var slide = document.getElementById('wikipedia_presentation'); 
		var items = slide.getElementsByTagName('li'); 
		var hidden = 0; 
		for (var i = 0; i < items.length; i++) { 
			if (items[i].style.display == 'none') { hidden++; } 
		} 
		if (hidden > 0) { 
			items[items.length - hidden].style.display = 'list-item'; 
			return; 
		} 
		this.pos++; 
		if (this.pos == this.sections.length) { 
			this.pos = 0; 
		} 
		slide.innerHTML = wikipedia_presentation.sections[this.pos]; 
		var items = slide.getElementsByTagName('li'); 
		for (var i = 1; i < items.length; i++) { 
			items[i].style.display = 'none'; 
		} 
	}
};
wikipedia_presentation.setup();