3 open source tools to make your presentations pop

1 reader likes this.
IRC screenshot

Opensource.com

Love them or hate them, presentations are a major part of life in both academia and business. Traditionally, creating a presentation meant using Microsoft's PowerPoint, but Apple's Keynote and LibreOffice/OpenOffice.org's Impress are solid alternatives. The problem with all those applications (aside from the closed source nature of the first two) is that you need those applications installed in order to view the presentations you've created. You can try your luck opening the file in Google Drive or the like, but your success will vary.

In recent years, web frameworks designed for creating presentations have proliferated. These take advantage of HTML5, CSS3, and JavaScript to create presentations that display in just about any modern web browser. And, as an added bonus, presentation designers remains in complete control of their presentations. They need not worry about file compatibility or being locked into a particular web-based service. Because these presentation frameworks are open source, they can be extended and enhanced in any way you wish—though to be fair, writing HTML, CSS, and JavaScript is a little more complicated than just using PowerPoint, Keynote, or Impress.

One of the most interesting presentation frameworks is impress.js, which aims to move presentations beyond the standard slide deck. Below, I'll introduce you to impress.js and two tools that make it easy to create impress.js presentations.

Impress.js

Impress.js is a JavaScript presentation framework developed by Bartek Szopka. Inspired by Prezi, it makes use of CCS3 transformations to provide a presentation experience that goes way beyond the traditional slide deck. Using impress.js for presentations allows speakers to wow their audiences with presentations that slide, rotate, and zoom in three dimensions.

Being based on standard web technologies (HTML, CSS, and JavaScript) means that impress.js does not lock users into using a particular application or web-based service to create presentations. Because it is released under the MIT and GPLv2+ licenses, if impress.js does not work the way you'd like, you have the freedom to change it yourself. However, unlike some other open source JavaScript presentation frameworks, impress.js requires a very modern web browser to view the presentations. It is designed to take full advantage of up-to-date web technologies. Legacy browser support is not a development priority. But recent releases of Chrome, Firefox, Safari, and Internet Explorer should work just fine with impress.js.

Creating an impress.js presentation is no easy task, even for someone with decent HTML and CSS skills. The basic markup is easy to understand, but impress.js presentations can be very complex and require a lot of thought and planning. There is no default theme, so you'll have to design the look and feel of your presentation yourself. And the flow of your presentation is entirely up to you, so you'll have to plan how each slide will transition to the next and the layout of the slides' relative positions in the canvas. Creating an impress.js presentation from scratch can be a lot of work, but the results can be impressive. A selection of demos and examples are available to provide inspiration and guidance, and there are tutorials for those who want to dig deeper and learn more.

If creating an impress.js presentation from scratch is too complicated for you, there are tools to make creating impress.js presentations easier. The two listed below have different strengths and weaknesses. Give them both a try, and see if one works for you.

Hovercraft

Hovercraft simplifies the creation of impress.js presentations by allowing you to create presentations using reStructedText markup. Instead of having to write HTML markup while crafting a presentation, you can focus on just writing the text. You can move things around and change things without having to mess with complicated markup. For example, the following text creates a slide that is five times larger than the previous slide and rotated 90 degrees.

----

:data-scale: 5
:data-rotate: 90

Heading
=======
* Bullet Point 1
* Bullet Point 2

----

Creating an impress.js presentation using Hovercraft greatly simplifies the process and enhances impress.js. Hovercraft supports four different methods for positing slides in a presentation. If you specify no positing in your markup, you end up with a traditional slide-to-the-left slide show. If you want something a little fancier, you can use relative positioning and slides are positioned based on the offset you specify relative to the previous slide. This method allows you to easily insert a new slide in the middle of a presentation and have all the following slides readjust their positions. If you want total control, you can use absolute positioning, which allows you to specify the precise coordinates of a slide. And finally, you can specify a SVG path for the presentation to follow. According to Hovercraft's documentation, SVG layouts are "a bit fiddly to use," but having such precise control over the layout can result in some pretty impressive slide shows. In addition, Hovercraft supports syntax highlighting for any source code you want to include in your presentation, and it adds a presenter screen with timer and notes. When you're done writing your presentation (or want to test what you have written so far), a very simple command converts the reStructuredText file into an HTML presentation:

hovercraft [markupfile] [output directory]

Despite Hovercraft's strengths, it still requires the user to be fairly CSS savvy. The default Hovercraft theme is extremely spartan, so you'll still need to stylize your presentation if you want anything fancier than plain black text on a white background. Adding CSS to a presentation is not complicated, but it is not as easy as selecting a new presentation theme in PowerPoint.

You can read Hovercraft's documentation to learn more.

Hovercraft was created by Lennart Regebro and is licensed under a Creative Commons CC0 1.0 Universal license.

Strut

If you'd like a tool that works more like traditional presentation software, Strut is the tool for you. Strut is a web-based application that provides the traditional slide sorter and editing tools. The graphical tools let you add text, images, videos, websites, and pre-designed shapes to your slides. You can also easily change the color of the slides' backgrounds and the surface (the backdrop in front of which the slides appear) for the entire presentation all at once, or on a slide-by-slide basis. Strut also supports adding text to slides using Markdown. And for power users, you can apply custom CSS classes to objects and write custom CSS rules from inside Strut. Once you have your slides designed, you can switch to Overview mode and graphically layout your slides. You just drag around the slides and enter values for depth, rotation, and scale. In addition to creating impress.js presentations, Strut can also create presentations using the bespoke.js framework.

Strut is very nice, but it does still have a few rough edges. Users will encounter the occasional bug, and the project's to-do list is somewhat long (though that is not a major issue). The project has followed the "release early, release often" maxim, and anyone who wishes to can help make the project better by contributing on GitHub.

Give Strut a try using the editor on the project's site, or download the source from GitHub and run it locally (or on a server). You'll need Node.js's npm and Grunt to install the dependencies and build Strut.

Strut's creator, Matthew Crinklaw-Vogt, has released the application under the GNU Affero General Public License, Version 3.

6 Comments

It's ironic that the day that this article was published, I was working with Slides (based on the reveal.js Javascript framework). I'll be checking out Strut after saving this comment.

Thanks for taking the time to write this article!

I'm a big fan of Reveal.js, but certainly interested in exploring what the other options are out there (including those in this excellent article!). Also worth poking around with is the Google I/O presentation template, which is under an Apache 2.0 license.

In reply to by ScottNesbitt

Joshua, you've introduced me to a whole new world. Thanks!

There is also Sozi: http://sozi.baierouge.fr/ which is very much like Prezi, but FLOSS.
You draw with Inkscape.org, and then tell where are the areas to show and in which order. :)

Hi Sir Joshua,

This is amazing! =) I'm now ready leveling my skills in presentation with this.
Thanks for the great article!

Thank you,

Aggarao, Kristian John

these are really great and I certainly will try Impress, Hovercraft and Strut.

nowadays your audience wants a flashy presentation -- sometimes I even wonder if they care more about your Prezi than the things you say, but that's a matter of having the right content. for me the more tech comes to the presentation the more likely it will fail on the platform I'll have to work on professionally. cloud based? with poor wifi you'll have to find something to tell without the pictures you prepared. even the corporate 'ppt' sometimes fails because of different versions.

therefore I always carry my presentation in pdf, together with an installed version of impress!ve. this wonderful piece of software saves your day and only needs the bare minimum. besides there are some nifty tricks to emphasize text or use a flashlight like mouse pointer. impress!ve is avaliable from most Linux repos, but is also ported to Windows and portable version on flash drive in case your surroundings are different.

and at the end you simply hand over the pdf for after reading.

no offence to more appealing presentation software, but maybe impress!ve can be an option to use and save your bits.

[http://impressive.sourceforge.net/]

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.