Non-LaTeX presentations using org-mode – S5 and HTML5 slides

I recently had frustrations with presentations written using MS Powerpoint; I’m not even going to mention KeyNote as it is only available on a Mac. LibreOffice is my WYSIWYG editor on my Linux machine for writing quick and nicely formatted content. I also have MS Office installed on my machine using WINE. I sometimes use Google Docs for presentation when I have to collaborate. Most of the times, viewing MS-generated files on LibreOffice suffices. When it doesn’t work well, I opt for MS Office. However, I recently had to open a powerpoint presentation with an audio link. It didn’t play on LibreOffice and it didn’t play on my WINE MS Office. I started thinking about a possible route for presentation files that are self-contained and cross-platform. PDF comes to mind first, but to do so would mean I have to use Beamer to generate the slides or to use Adobe Acrobat to create the slides. I don’t want to do either as I’m referring to the scenario of creating quick slides.

HTML came to my mind next. I recalled S5. I remember this post which outlines how one could export to S5 using org-mode. I tried it out finally and things work nicely. This tutorial also mentions an alternative method to generate S5 presentations in org-mode based on the org-export-as-s5 function. Hopefully it will be integrated in the MASTER branch of org-mode soon. To embed audio or video, just paste the html code an html chunk, linking the file multimedia file in the current directory. Now the directory could be transferred to any computer and viewed.

I also stumbled on this link, which allows me to export org files to HTML5 slides. I think the latest file is here, with instructions on how to set up in the comments.

With the S5 and HTML5 slides exporting methods in org-mode, now I can make cross-platform presentations very easily using org-mode. I will probably use the HTML5 method as it doesn’t come with any dependencies like the ui directory from S5.

Presentations/slideshows in a web browser using S5

I use LaTeX Beamer whenever I write a a presentation because

  1. I’m familiar with LaTeX and want to keep up with the skillset,
  2. I prefer to write in plain text, especially in emacs, and
  3. I don’t have to spend time working on the how the presentation looks and just have to worry about content.

I recently re-discovered S5, a way to make presentations using html, viewable by any web browser. I think it is safe to assume that more computers have a web browser than a pdf viewer (especially more than MS Powerpoint, for sure). I don’t really know html, so I searched for org-mode or markdown support. Of course, these exist. For org-mode, check out org-s5. For markdown support, there is Instiki and pandoc. I hope to try these out soon. S5 seems to be a good alternative when my presentation doesn’t involve math equations or source code on display. You can also create Beamer slides easily using org-mode; see this and this.

Create a video slideshow from images automatically

On a Mac, creating a video slideshow with some pictures is easy with iPhoto and iMovie. I haven’t found similar programs on the Linux side (yet). I mean, there are many photo manager apps such as F-Spot and Shotwell that can create a quick slideshow from the selected pictures, but they don’t export the slideshow into a video format that can be played anywhere (platform-indepedent). Also, they don’t have nice transitions between pictures. digiKam supposedly supports these features, but I think they’ve been taken out.

I found dvd-slideshow that lets me create a video slideshow with transitions from the command line. On ubuntu, install by

 <pre class="src src-sh">sudo apt-get install dvd-slideshow

Suppose I copy all the pictures I want in a directory. Run the following commands to create a vob (dvd) file:

 <pre class="src src-sh">dir2slideshow -t 5 -c 1 -n <span style="color: #ffa07a;">"Title"</span> -r /path/to/pics/ <span style="color: #ff4500;">## </span><span style="color: #ff4500;">title should be ascii only ## generate some files (txt file contains instructions)</span>

dvd-slideshow -n Name.Of.VOB.file -a /path/to/mp3/song Title.txt ## select name of out file, add audio to be played, and point to txt file with instructions ## for multiple audio files, add multiple -a /path/to/song; songs do not repeat, so add multiple -a if you want songs to repeat

## let’s convert to avi: mencoder out.vob -ofps 30 -ovc xvid -oac mp3lame -lameopts abr:br=128 -srate 48000 -vf scale -zoom -xy 720 -xvidencopts fixed_quant=4 -o out.avi

UPDATE 12/24/2010: dvd-slideshow-editor

My example above is very basic. You can actually modify the generated text file to modify the way the picture is presented (cropping and ken burn effects). You can also create a dvd-menu for your dvd. See this post for one person’s overview. See the wiki for a more complete overview.

Note that there are many GUI frontends to dvd-slideshow, the simplest of which is probably dvd-slideshow-editor. To install on Ubuntu,

sudo apt-get install python-wxgtk2.8 python-wxtools wx2.8-i18n
## now download the python script of dvd-slideshow-editor.

I can imagine using this program to add ken burn effects to my slideshow.

vcasmo: video/presentation + picture/slides together!

I was reading this blog post on Revolutions Computing’s blog and discovered the vcasmo service, a way to post a presentation or video with the slides right next to it. This is DEFINITELY something I will use. Often times I watch talks or presentation videos online and most of the time the videos are either focused on the speaker and the projected slides or on the presentation slides with voice-over from the speaker. This method of presentation highlights both the presentation slides and what the speaker has to say, making me feel that I didn’t miss much from not being at the talk physically. Here is the embedded talk that made me discover vcasmo:

slideshows from photobucket or flickr etc. in google sites

Google sites is great. It allows for easy website creation, and easy group collaboration on projects, wiki, intranets.

What am I using google sites for? Well, for the non-profit youth group that i volunteer with at my local church, I created:

  1. A webpage for the group, where i mapped the domain that we registered to it. It is great in that i can have many people work on the site using the built-in features; no html or javascript experience needed. It is as easy as a WYSIWYG word processor, but here, a webpage creator. You can embed such things as a picasa slideshow, google map, youtube video, and everything google. For each page that you create for the site, you can make it a page, a file cabinet, a discussion (announcements), or a list…really useful for my group.
  2. An intranet-type site where I keep private – only the management board of the group gets access. I created this site to upload all the documents and paperwork we deal with. There is a page for each term (every management term is 2 years), and the site serves as a repository of documents for future management boards to use, and as a record/history.

Yes, so google sites is great. What i wanted to blog about was that it is very easy to embed a picasa slide show in the site, but most of the pictures for our group is located on photobucket. There is an old method that uses an iframe hack to get this, but google sites will throw out all “illegal” iframes now. Thissite talks about it, and mentions that it no longer works. However, we can embed google gadgets to get the slideshow to work from photobucket. From the site: “”” To use them, simply select “more” from the “insert” menu (while editing a page in your site) and search for “sites iframe gadget”. “””

You can find a gadget that will take feeds. Get the feed url from photobucket (on bottom…. *.rss) and paste it into the gadget. Now things work. very cool!

UPDATE: search for “takeslides.” There are a few, take the 3rd one (the one to www.takeslides.com). Info: takeslides Slideshow Gadget

Jeremy R. Geerdes for takeslides.com Uses the Google AJAX Feeds API and GFslideShow to create a simple slide show of your favorite media RSS feed

http://www.takeslides.com