WordPress for Presentations (part 1)

For a while now, I’ve been wanting to get rid of using presentation software (like Microsoft Powerpoint and LibreOffice Impress). Since I’m mainly presenting stuff on the web, about the web, I want to use a web-based tool. Like my blog. And now I can! Here’s part one of the journey.

Doing presentations with WordPress, part 1

  • Why?
  • How?

Why a web-based presentation tool?

Current presentation software sucks…

  • Poor conversion of formats
  • Hard to publish on your own site
  • Need to switch to a browser to demo anything

Obviously, I’m not only one with this itch. I’ve explored a couple of options.

I’ve also tried a few plugins for WordPress. The one I liked the most was (a)SlideShow.

Cool effects and all, but hard to have a post live as a blog post (with texts between the slides), and being able to switch it to presentation mode.

The web standard for style sheets (CSS) provides a mode for presentations: @media:projection. It should be possible to switch to a “projection style”, and use CSS to eliminate all the text in between the slides, provide basic pagination, and so on. But browsers still don’t really support this:

  • Opera uses the “projection” style (if available) when going into full-screen mode.
  • Firefox has a FullerScreen add-on that allows similar functionality, but needs to be installed separately.

With the Firefox add-on, it wasn’t hard to start working on a style sheet for presentations that works on my own laptop.

But… I’d like to be able to present from another machine as well, and to enable web visitors to my blog to also see how the slides look.

So the search continued for a simple library that would do the trick.

In the end, I mostly liked Zack Grossbart’s simple and clean version in the browser. And it should work well with the style sheet already prepared.

I’ve spent a bit of time integrating it into my web theme, and to strip Zack’s version further: no extra interface, just the same as the F11 key in my own “Firefox+FullerScreen” set-up.
It took a bit of hacking to put it into WordPress.

Doing presentations with WordPress, part 1

What the code does now?

  • Are we presenting a single post?
  • And is it in the category “Presentations”?
    • Is there a URL parameter “projection=1”?
      • Load the “projection” style sheet for all modes.
      • Load javascript to enable keys for “forward, back”.
    • Else
      • Load the “projection” style sheet for “projection” only.
      • Load another style sheet to present the slides in “screen” mode.

It can do pretty cool stuff already. Use standard embed codes (but you’ll have to add the div code with class="slide" yourself).

What it supports

  • Switching to “projection” mode
  • Including IFRAME’s for interactive demo’s
    • Show a live website
    • Include a presentation from Slideshare
  • Using embed codes for e.g. Youtube video’s

What is needed

  • (Much) more testing
  • Better styling
  • Easier editing
  • Making it a plugin?

This is part one. There still is work to be done 🙂


Leave a comment

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.