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