Slide-Drive is Live
I had the privilege this summer of working with Jeremy Banks, a Google Summer of Code student whose project, Slide-Drive, explored what a web-native presentation tool might be. Jeremy’s work, which is a continuation of David Seifried’s (described in these posts), tries to solve a double-barrelled problem:
- Desktop presentation tools (like PowerPoint and Impress) allow people to mix text and graphics freely, just as they would on a whiteboard, but don’t play nicely with the web. If you export a PowerPoint presentation, what you get is a bunch of image files that are opaque to search engines and accessibility tools. More importantly, perhaps, any hyperlinks in them are lost, and any CSS styling you apply to the page has no effect on what’s in the slides.
- With HTML-based slideshow tools like S5 and deck.js, on the other hand, text is text, but they severely restrict what can go in a page—basically, you’re back to paragraphs, bullet points, and tables. If you want to draw an arrow from one word to another as you would on a whiteboard, you have to fall back on embedded images (with all the limitations discussed above).
- Neither class of tool takes advantage of HTML5′s multimedia features. For example, if you want to connect a slideshow to a voiceover, you have to either create a movie, which means your content is just pixels painted on the screen once again.
Slide-Drive’s approach is to use SVG for the slides rather than PNG or JPEG images, so that hyperlinks work, text can be selected and copied, accessibility tools and search engines can “see” the text, and so on. Synchronization with other media (like a voiceover soundtrack) is done using Popcorn.js (think “jQuery for video”) and Butter, a browser-based multimedia editing tool. This recorded Slide-Drive presentation will show you how it all works, but if you want to see it in action, you can run the presentation in your own browser. (Warning: the source file is large, so it may take a while to load.)
Slide-Drive isn’t ready for everyday use just yet: there turned out to be a lot of nasty surprises lurking in the darker corners of the SVG standard, various browsers’ handling of fonts, and other areas discussed in Jeremy’s blog. But we’re more excited than ever about this approach’s potential; as I said a few weeks ago, some of these ideas could and should be part of any next-generation web-based ebook-slash-teaching-platform. If you’d like to explore it with us, please check it out.
I think using libreoffice to export slides makes them less web-like almost by definition. Your slides become an intersection of what’s possible on the web and in the presentation tool. For example in my presentations, I like to embed interactive demos directly into slides. I’m not sure how that would be possible in your framework.
The voiceover feature is cool however. It would be handy to integrate that into impress.js.
I think an etherpad-style slide editor with some basic design tools make for some impressive web presos.
We are using LibreOffice so that we can explore the presentation side of things without first having to write an in-browser slide editor: we can’t know what to put in the latter until we know what we can do with the former. As for embedding interactive demos, if you can do it in HTML5, you can add it to a presentation (though it may require a bit of hacking).
This is pretty great!
I wonder if any of blue griffon’s code would be handy here?
I’m glad to see that using LibreOffice is a transitional step as I was going to comment that it’s too bad this is such a multistep process and not in a clean package. Creating slides in one program, exporting them, importing them, more editing, more exporting is a hard sell. “Here, download this.” is a much easier sell
Did you have a look at WebODF? It can display ODF presentations. Not all features are supported at the moment, but embedded SVG files are rendered.
WebODF has no server side components. LibreOffice could be used to edit the presentations.
There is a Firefox add-on that uses WebODF.
https://addons.mozilla.org/en-US/firefox/addon/webodf/