On Point

Some time ago, I spoke at an open source software event; I made a nice presentation with my OpenOffice Impress and was ready to go. On event day, however, I opened the presentation on the organizer's computer with PowerPoint (OpenOffice was not available), and the file looked completely garbled. I somehow managed to cobble up the presentation and finish the event.

I think you already know what was wrong here; I naively assumed that compatibility with .ppt format meant the files would open properly, across tools. Isn't that how it should be? Several other problems exist with the way presentations are made and presented today. For example, editing or reformatting takes a lot of time, and mainstream presentation tools are basically desktop tools with similar-looking GUIs – you have no option but to use them to open presentations. In spite of so many issues, few steps have been taken to resolve them – at least by the mainstream presentation tools.

In this article, I will introduce you to a tool that aims to bring a revolution in the way people use presentations. The tool is called Strut (Figure 1) [1]. It is an open source, server-client-model-based tool that you can use to create awesome presentations. Deploy it on a server, access it from a browser, and create presentations. It lets you do quick editing of presentations, presents no hassles of checking compatibility, and offers a refreshing new experience for your audience. I will first look at various JavaScript libraries integrated with Strut and then move on to installation steps.

Figure 1: Strut offers quick presentation creation and editing.

Introduction

Several JavaScript-based, open source presentation frameworks are available. These frameworks, which are mostly based on CSS3 and HTML5, help you create better-looking presentations. However, installing all of them separately isn't a good idea; a simple solution is Strut. It integrates the major libraries  – Impress.js and Bespoke.js within one framework (with scope for more). That means you can install Strut and create presentations based on different libraries, without actually having to get into the bare details of the library – minimal learning curve! The simple yet very useful Strut GUI is another way Strut makes your life easier – both as a presenter and a viewer – but more on that later.

I'll look at the external presentation frameworks that are integrated with Strut out of the box. The first is Impress.js, which uses the power of CSS3 transforms and transitions and is supported by almost all the latest browsers. Some of its effects include pan, rotate, zoom, scale, and even 3D effects. Needless to say, presentations generated are plain HTML files. Impress.js requires you to write HTML and CSS to create presentations.

The next framework to consider is Bespoke.js, a super-lightweight presentation framework, with the core library size being about just 1KB. Although the core library provides sufficient features to create basic presentations, several plugins are already available if you want to extend functionality. Bespoke.js, unlike Impress.js, has a generator to help you create presentations, but still you need to install and run commands in the prompt.

Apart from these presentation frameworks, Strut uses other JavaScript libraries for several other purposes, including:

• Backbone.js – As you may already know, Backbone.js provides structure to web applications. It makes sure the code is modular and easy to maintain. Because Strut is a client-based tool (runs in a browser most of the time) with lots of integrated JavaScript libraries, it's an ideal use case for Backbone.js.
• Require.js – This is a JavaScript file and module loader optimized for in-browser use. Because Strut uses a lot of other JavaScript libraries, it is quite important to use a system optimized for loading other files and modules.
• Grunt.js – This is a JavaScript task runner. With several plugins already available in the Grunt [2] ecosystem, it is a nice way to automate repetitive tasks. You can configure it though a Gruntfile. In Strut, it automatically compiles templates and runs the web server task. I will talk more about Grunt in the next section.

Installation

You might be thinking that because Strut has so many dependencies, it must be a difficult task to install them all before you can finally install Strut. Fortunately, that's not true – installation takes just a few minutes following the steps below. Note that I have used Ubuntu 14.04 as the host platform for the installation. You might need to change the steps accordingly if you are on other Linux distros.

1. Open a terminal and type:

sudo npm install -g grunt-cli

• This installs the latest Grunt to your system (Figure 2). As discussed earlier, Grunt is the task runner for Strut and hence a very important component.

Figure 2: You'll need the latest version of Grunt on your system.

2. The next step is to clone the Strut repository from GitHub [3]. You do this using the command:

sudo git clone git://github.com/tantaman/Strut.git

• This downloads the repository and saves it in a folder called Strut. This folder is created in your current folder.

3. Go to the Strut folder. Because the folder is created inside your current folder, you can move to it directly using cd Strut. If this doesn't work, you might need to make sure the repository was downloaded properly.

4. Once Strut is in place, you need to install the other required dependencies, which can be accomplished using the

sudo npm install

• command. This command can sometimes fail, though, because the node package manager, or npm command, sometimes cannot link to the Node.js library. The reason is a change in name of the Node.js executable to prevent namespace collision with some other package. The solution is to install the Node.js-legacy package. Just type

sudo apt-get install nodejs-legacy

• to install the legacy package. The command npm install should work after this (Figure 3).

Figure 3: Use the node package manager command to install dependencies.

5. You can now start the web server using Grunt with:

grunt server

• The server runs on port 9000, so you can access your Strut installation (via your browser) at the address http://localhost:9000 (Figure 4).

Figure 4: Start the web server using Grunt.

If you want to make a production build of Strut, you can use the command:

grunt build

The output build gets created in the dist folder (inside the Strut folder).

First Presentation

Now that Strut is installed on your system, I will show you how to create your first Strut presentation. As you open Strut in your browser, click on the drop-down box next to the Strut logo. You can see various options available here. Click on New to start with a blank canvas (Figure 5). Click on the Text link on the header. A text box appears in the foreground. You can click on the box to edit the contents. Several options are available around the text box – scale, rotate, and even position the box as you wish. Similarly, if you'd like to add images, click on the Image link next to the Text link. You'll get an option to upload images directly.

Figure 5: Your presentation starts with a blank slide.

After you have added your slides, you can click on the Save or Save as links to save the presentation file as a .strut file. Note that if you use these links, the file is saved on the server and not your computer. If you want to save the files to your computer, you should use the Export link. The exported files can be downloaded to your computer and imported later for editing. If you don't want to save the .strut file, but just the presentation HTML files, you can click on the green button on the extreme right. This opens a new window running the presentation; you can then save it using Ctrl+S.

These steps just give you an idea of how things work; several advanced features are also available, such as adding transitions, customization with images, background colors, and so on. I will talk more about these in the next sections.