As I previously mentioned my abstract for MWLUG2012 has been accepted and so I have gone about looking for an assessing different JavaScript presentation libraries to use as part of my demonstrations.

I am a firm believer in demonstrating the techniques I want to talk about rather than going through boring slide after boring slide. Any old vacuum cleaner salesman can blow smoke up your ass about how awesome their product is – but if I want to talk about how you use a JavaScript library then I want to be able to show it in action. Using a JavaScript presentation platform also negates the need for me to constantly flick back and forwards from PowerPoint to a Web Browser. I realize that sometimes that is a cruel necessity but it is not easy on the audience.

So I found these three examples – I am sure there are others but here we go – All these are firefox or chrome or safari to get the best out of the HTML5/CSS3 support

Turn.js

http://www.turnjs.com is a really nice look and feel “book-like” presentation format. It allows to the user to grab the corner of the page and turn it to the next one. I did not go with this one because I found some issues with the display and it was also quite finicky to use – not good for a presentation but might be good for an online advert or something of that ilk

Impress.js

http://bartaz.github.com/impress.js

This is just an amazing demonstration of CSS3 transitions – This would be my preferred presentation library because I was SO impressed (pun intended) with the demonstration and the flexibility of the usage. I started to pan out my slides using this capability (mimicking the example slide types) and I was really enjoying it.

The problem I ran into was that it did not play well with the demonstrations I wanted to do. I want to include XPage code and the dojo CSS created by the XPage really screwed up the presentation CSS 😦 It was also  really time consuming to manage the canvas and where all the slides were going to go – kinda disappointed this didn’t work out because the WOW factor would be worth every minute!

“the only limit is your imagination“

This would be great if I was not using demonstrations within the presentation and if I had more time to play with it….

Ascensor.js

http://kirkas.ch/ascensor/

“Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system”

So this is the library I finally decided to go with. It is very simple one slide to the next you can use the arrow keys to move left and right up and down through the website. There are some nice examples of how this has been used in commercial sites and it struck me that it would make a very nice way of telling a story in a presentation. What I also liked was the simplicity of the stylesheet and the simplicity in which I could construct my slideshow.

In the main XPage I am able to just create a separate custom control for each presentation page and at any time I can jump from one slide to the next. This also allows me to ensure that each example can be treated individually. Unlike Impress where the content and positioning are controlled from the div attributes, Ascensor controls the slide order from the plugin attributes at creation.

<div>
	<div class="contenu">
		<!-- Narrowing the selection -->
		<xc:form2_4></xc:form2_4>
	</div>
</div>
<div>
	<div class="contenu">
	<!-- Returning the jQuery Object -->
		<xc:form2_5></xc:form2_5>
	</div>
</div>
<div>
	<div class="contenu">
	<!-- Chaining -->
		<xc:form2_6></xc:form2_6>
	</div>
</div>

Here is how the presentation is instantiated using the plugin call.

$(document).ready(function() {
    //google code prettyfier
    prettyPrint();

    var cCoord='1|1 & 1|2 & 1|3 & 1|4 & 1|5 & 1|6 & 1|7 & 1|8 & 1|9 & 1|10'
    	cCoord+=' & 2|1 & 2|2 & 2|3 & 2|4 & 2|5 & 2|6 & 2|7 & 2|8 & 2|9 & 2|10'
    	cCoord+=' & 3|1 & 3|2 & 3|3 & 3|4 & 3|5 & 3|6 & 3|7 & 3|8 & 3|9 & 3|10 & 3|11 & 3|12'
        cCoord+=' & 4|1 & 4|2 & 4|3 & 4|4 & 4|5 & 4|6 & 4|7 & 4|8 & 4|9'
        cCoord+=' & 5|1 & 5|2 & 5|3 & 5|4 & 5|5 & 5|6 & 5|7 & 5|8 & 5|9'
        cCoord+=' & 6|1 & 6|2'

	//ascensor
	$('#content').ascensor({
		AscensorName:'house',
		WindowsFocus:true,
		WindowsOn:0,

		NavigationDirection:'xy',
		Direction: 'y',
		Navig:true,
		Link:false,
		ReturnURL:true,
		PrevNext:true,
		CSSstyles:true,

		KeyArrow:true,
		keySwitch:true,
		ReturnCode:false,

		ChocolateAscensor:true,
		AscensorMap: '9|2',
		ContentCoord: cCoord
	});
});

More to come on the presentation as it comes together and I will certainly be blogging about the how as this goes along.