Free HTML5 Presentation Systems

Source : http://www.sitepoint.com/5-free-html5-presentation-systems/

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

 

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away.

Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

  • it’s quicker to add a few HTML tags than use a WYSIWYG interface
  • you can update a presentation using a basic text editor on any device
  • files can be hosted on the web; you need never lose a PPT again
  • you can easily distribute a presentation without viewing software
  • it’s not PowerPoint and your audience will be amazed by your technical prowess.

Admittedly, HTML5 presentations are not quite as powerful:

  • you require web coding skills
  • positioning, effects and transitions are more limited
  • few systems offer slide notes (it’s a little awkward to show them separately)
  • it’s more difficult to print handouts

But those are not necessarily killer drawbacks — you’re forced to concentrate on the presentation content rather than frivolous tweaks and awful animations.

 

Here are the best HTML5 presentation systems I’ve found. Click the headings to view a demonstration — most work best in Chrome, Safari or Firefox…

Reveal.js

This is my current favorite. Slides look great and can be positioned horizontally or vertically. It’s also easy to change the CSS to add your own effects — I managed to add a rudimentary notes facility doing just that.

Slides are defined in separate section tags and Reveal.js offers a choice of several 3D slide transitions … although they look fairly similar.

Download the reveal.js files…

Impress.js

Impress.js is, well, impressive. It’s been influenced by the commercial prezi.com; slides are arranged in a 3-dimensional space and your view rotates and pans accordingly. I won’t attempt to explain it further — just try itand you’ll understand what I mean.

Slides are defined in div elements with data attributes controlling the x, y, z locations and rotations. That’s the only drawback; it’s a little difficult to visualize and define those values. Persevere, though, and you’ll be able to create some stunning and original slide shows.

Download the Impress.js files…

Google Slides Template

As you’d expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs). It’s fairly basic when compared to Reveal.js or Impress.js; it’s restricted to right-to-left slide transitions and fade-in effects, but it still looks great.

Slides are defined in article tags and it’s easy to add extra stylesheets to override the default CSS.

Download the Google Slides Template file…

Deck.js

Deck.js was one of the first HTML5 presentation systems. It looks similar to Google’s offering — perhaps a little prettier, but without slide transition effects.

Slides are defined within semantically correct section blocks in an outer article. There’s also adocumented API so it’s possible to create your own extensions.

Download the Deck.js files…

Shower

Shower is a presentation system by Vadim Makeev of Opera Software. While it’s one of the simpler systems, it’s fast and works well in all browsers. The slide thumbnail view is especially cool (press ESC).

Shower’s main drawback is it’s convoluted HTML. Slides are defined in a section within a div within anotherdiv and contain their own header and content. A little more development could make it easier to use.

Download the Shower files…

Other worthy mentions:

Have I neglected to mention your favorite HTML5 presentation system…

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

 

 

 

5 of the Best Free HTML5 Presentation Systems

By  | February 23, 2012 | HTML | HTML5 | Programming

 

www.stisitelkom.ac.id www.di.stisitelkom.ac.id www.ktm.stisitelkom.ac.id
www.dkv.stisitelkom.ac.id www.dp.stisitelkom.ac.id www.srm.stisitelkom.ac.id
www.blog.stisitelkom.ac.id www.multimedia.stisitelkom.ac.id
www.elearning.stisitelkom.ac.id www.library.stisitelkom.ac.id
www.repository.stisitelkom.ac.id www.cloudbox.stisitelkom.ac.id
www.digilib.stisitelkom.ac.id www.mirror.stisitelkom.ac.id
www.sisfo.stisitelkom.ac.id www.hilfan.blog.stisitelkom.ac.id
www.telkomuniversity.ac.id www.stisitelkom.academia.edu
www.kuningmas-autocare.co.id www.usnadibrata.co.id www.askaf.co.id www.hilfans.wordpress.com www.hilfan-s.blogspot.com www.profesorjaket.co.id

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s