Matt Kopala

Software Development, Technology, Travel

Creating an HTML Slide Deck

| Comments

Yesterday I gave a presentation on Git at the monthly azPHP meeting. I’ve created most of my presentations in the past using PowerPoint, but now I always found it tedious to get the slides to come out how I wanted, so I decided to look for something different this time around.

I ended up using Slide Show, a free tool written in Ruby, that let me create my presentation using Markdown, and generate an HTML slideshow. It worked decently well, and got the job (mostly) done, but it’s not quite what I was hoping for as a PowerPoint replacement.

Requirements

Before starting my search for a PowerPoint alternative, I did a bit of brainstorming to come up with a set of features that I wanted:

  • lightweight markup
  • single text file
  • image embedding
  • export to PDF
  • swipe left/right for viewing on iPad
  • incremental display of text / animation
  • easy to style

For whatever reason, I got stuck on the first two requirements and focused on finding a solution that provided those features.
I was convinced that being able to type up my slides win Vim and a wiki syntax would be elegant and fast.

The Search

I jumped on Google and started looking for tools. I found some free PowerPoint alternatives, but they didn’t meet my criteria. I found a tool called Impressive that looked interesting, but I didn’t pursue it, and I’m not sure it was going to do what I wanted.

I ended up finding Slide Show (S9) and decided that it was the closest to what I wanted. It’s based on S5, which lets you create HTML presentations using … HTML. No thanks. Just look at the example. Yuck. The author of S9 rewrote S5 using jQuery, and called it S6. Still not good enough. On to S9.

S9 lets you create your HTML presentation using Markdown, and it generates the HTML for you. The resulting slide deck can be viewed in a browser, using the keyboard or mouse for navigating the slides.

Creating the Slides

S9 is based on Ruby. I used RVM to install it. If you don’t have RVM installed already:

bash -s stable < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer) 

Then, in the directory that I created for my presentation:

rvm use 1.9.2
gem install slideshow

I created my content in a slides.md file using Markdown. You also have the option of using Textile. I chose Markdown since I’ve become somewhat used to it from writing my blog using it.

I found the documentation on S9 disappointing. It seemed like for a lot of the things I wanted to do, there was no documentation (or I couldn’t find it quickly).

Figuring out how to change the style of the slides, and modify the slide transistions wasn’t obvious in the docs. After some trial and error, I figured out how modify the theme, and get rid of the annoying Javascript animation that was generated by default. I had to copy the s6 directory from the templates directory in the slideshow-0.9.9 source to my presentation directory, and edit these files:

  • styles.css.erb –> changed/added CSS
  • jquery.slideshow.jjs –> changed Slideshow.transition function

To generate the HTML output, I ran:

slideshow -t s6/s6.txt -o out slides.md

To add images, I created an images directory in my out directory, and put the files in:

$ ls out/images/
dist-vc.png  local-op.png  object-diag.png

Then, I just used plain HTML inside the slides.md file to include them:

<img src="images/object-diag.png">

I used the left/right two-column layout stuff described on the plugins page, but found that the Markdown inside left and end wasn’t getting converted to HTML properly. More annoyances.

The Result

After spending way more time than I should have, I ended up with this set of slides.

Generating the presentation took much longer than I wanted, for these reasons:

  • I’m a slow typer
  • my Markdown was broken half the time
  • I didn’t have a WYSIWYG editor and had to keep regenerating the slides, and then reloading in the browser

I also ended up not getting half of what I wanted (listed in the Requirements above). Opening my slides on an iPad is bascially useless.

It was a good learning experience, and I’m glad I now have something that I can use to generate slides with using only a text editor, but it’s not at the point where I’m ready to go evangelizing it.

Summary

Pros:

  • use Markdown and preferred text editor to write presentation
  • HTML version of slides

Cons:

  • need to regenerate HTML after each change (could have something watch the files)
  • Markdown is a pain sometimes (bullet points need an empty line above them. WTF?)
  • figuring out how to style
  • ended up having to embed too much HTML and CSS in the markdown
  • PDF output was crap with default options

Ideally, I would like a WYSIWYG rich text editor that generates Markdown (or similar) on the back-end. I’d like to be able to drag & drop images on to my presentation, and copy & paste of slides even more quickly than using Vim to edit the source. I want to be able to display content incrementally. I’d like to be able to style my presentation using a GUI, but be able to tweak the CSS manually if I want.

Links

Some other pages and threads:

Other tools I didn’t check out yet:

Comments