Enhance Your Next Presentation with HTML5 - Jster Javascript Catalog

I remember the days when Opera team came to our university with presenting their features of their browser and sharing their vision of the future of Web. I was amazed by the fact that all their slides (with animations) were done in pure HTML5. All presentation was held in the Opera browser itself. "Awesome", that was what I thought. But, honestly, in those days only real geeks would choose coding HTML, CSS, JS over drag-n-drop style of PowerPoint. It was the time were HTML5 support was limited, and browsers were trying to at least pass the new ACID tests. And I'm not really sure whether Opera's presentation engine was a real HTML5 implementation or just a built-in feature of their browser.

But times change and HTML5 came for all the web, all platforms, all browser (mostly). Even games are built with HTML5. So why should we choose PowerPoint. You know, it's not free. Actually, I have an answer for this. We still need some knowledge of HTML5, CSS3, JavaScript to build a good presentation. But that should not actually matter for us, web developers.

Here is a list of presentation HTML5 engines you want to try. Engines like Deck.js, Impress.js of them are pretty complex, but they give you all the control and flexibility of presentation. Engines like Reveal.js are simple in use and provide you with nice prebuilt, themes and markdown engine to design slides pragmatically. And you now what? Opera has it's presentation engine too. It's Shower looks pretty simple to start. Also please take a look at Bespoke.js, it was released a few months ago but already got a lot of attention and 1000 stars on Github.

1

deck.js

Modern HTML Presentations A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

2

Shower

Cross-browser HTML5 presentation template.

3

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com

4

reveal.js

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

5

Bespoke.js

DIY Presentation Micro-Framework Less than 1KB minified and gzipped, with no dependencies. Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.

6

Landslide

Landslide generates a slideshow using the slides that power the html5-slides presentation. Requires Python with jinja2 and pygments modules for code blocks syntax coloration.

7

Fathom.js

Present JavaScript in its native environment. If you're making a presentation on JavaScript, make it in JavaScript.

8

io-2012-slides

HTML5 slide template for Google I/O 2012

As you see, presentations are ready to move into the web. They can even export slides to PDF so you could upload them to your favorite SpeakerDeck. By using HTML5 you get a full control of the slides and you can customize their look with CSS. Don't forget for CSS3 transitions and JS animations. They look awesome and would certainly impress your audience. Add this post to bookmarks and get back when you need to prepare slides for a speech. Geeks love to see presentations in browser!

Follow, JSter in Twitter or subscribe to our RSS to discover new JavaScript libraries and tools.