Playing the Slideshow

If you’re looking to build your own presentation with this technology, please skip to the ‘Developing Your Own Sinatra Slideshow’ section below. If you’re looking to view this presentation, you should start here:
Dan DeMeyere’s SEO presentation.

Here are the controls to view the presentation:
Use your keyboard arrows (left and right) to navigate the slides. If you see ‘(i) info’ in the top right corner of the slide, it means there’s additional information for that slide so press the ‘i’ button on your keyboard to display that information.

If you have feedback, please view/comment at: http://www.dandemeyere.com/blog/SEO-for-developers.

Developing Your Own Sinatra Slideshow

Background

This is a simple Sinatra app to present a slideshow. It requires Ruby 1.9 and uses ultraviolet to render code snippets, and HAML to render the slides. jQuery powers the UI and CSS provides the styling. This was originally forked from cjsmith’s sinatra slideshow repo.

Dependancies

• RVM
• Bundler
• Familiarity with HAML

How to Start

• First clone (or fork) the repository
• Create/use a new gemset (I used 1.9.2)

rvm gemset create slideshow

rvm use 1.9.2@slideshow

• Install the gems

bundle install

• Fire up the server

ruby slideshow.rb

• (Optional) Use shotgun to dynamically serve up the slides (so you can edit on the fly and not have to restart the Sinatra server)

shotgun slideshow.rb

How to Use

If you use standard ruby to start up the server, the slides will be accessible through 0.0.0.0:4567. If you use shotgun, the address will be 0.0.0.0:9393.

You can use the right arrow to advance to the next slide, the left arrow to go back to the previous slide and ‘i’ to get my notes (or supplementary information) on the slide.

How to Edit

All of the slides are stored inside of slideshow.rb. It should be straight forward. The slides that have a notes sections (#notes) can be viewed by clicking ‘i’ while the presentation is running. Custom functionality for this is inside of public/js/jquery.controls.js.

I also use HAML data attributes to apply additional classes to the notes slides. The two I use in my presentation are ‘alternate’ and ‘emphasis’, which are styled in public/css/slideshow.css.