Show and Tell in HTML

When you need to create a presentation or slides for your talk, LibreOffice Impress may seem like an obvious choice. Indeed, it's a powerful tool that lets you build rather advanced presentations. In certain situations, however, the Impress functionality is overkill, and something more lightweight and straightforward might be a much better tool for the job. Enter the wonderful world of tools for creating HTML-based presentations that run in a regular browser.

These tools have several advantages compared with a full-blown presentation application like LibreOffice Impress. For starters, you can create slick presentations using nothing but your favorite text editor then run your presentation in any modern browser, so you are not tied to a specific application. Basic HTML and CSS skills are all you need to create swanky presentations, and you don't have to fiddle with myriad features and options to achieve the desired result. Of course, HTML-based presentations have their limitations, but in most cases, they are perfectly adequate for illustrating points or conveying a message. Quite a few lightweight tools are available for creating HTML-based presentations, and in this article, I will help you to choose the one that meets your specific needs.

Big

The Big presentation tool [1] is actually pretty small, and it consists of only three files: the big.css stylesheet that controls presentation style properties, the big.js core JavaScript file, and an HTML presentation file. Designed for "busy messy hackers" (Figure 1), Big is not overloaded with features, which makes it suitable for whipping up quick presentations when you are in a rush. Big's main attraction is the ability to scale the text automatically to make it fit the screen.

Figure 1: Big is a simple presentation tool for "busy messy hackers."

Creating presentations with Big couldn't be easier, and you can use the bundled demo.html file as a starting point. To create a slide, add <div></div> tags. Any text between these tags is treated as the slide's content. Big gives you only three formatting options to work with. The <em></em> tags can be used to color text fragments (green by default), and the <a href=''></a> tags let you create hyperlinks. Using the <img src='' /> tag, you can add a background image to a slide. Also, the text in the slide can be centered using the class="center" property. The Left and Right arrow keys let you navigate between slides. Additionally, the time-to-next property can be used to advance to the next slide automatically in the presentation after a specified period of time.

The overall appearance and styling of the presentation is controlled by the big.css file, which you can tweak to your heart's content. For example, you can easily change the default font and text styling by modifying the body **{ } properties. If tweaking the default stylesheet is not your cup of tea, you can opt for one of the ready-made themes  [2] (Figure  2).

Figure 2: You can easily spice up your presentation using one of the ready-made themes.

Big is a pretty bare-bones tool: It doesn't allow you to specify slide transitions, add code snippets, embed images, or jump to specific slides. In certain situations, however, Big's limited functionality can be an advantage rather than a drawback. If you need a tool for creating a presentation that provides key points for a fast-paced talk, Big can be just the ticket.

By the way, if you need a tool for creating Takahashi-style presentations [3], take a look at weenote [4], a simple tool inspired by Big.

HTML Slideshow

Big is a nifty little tool, but it's suited only for a certain type of presentation. If you need to create a more conventional, no-frills, HTML-based presentation, HTML Slideshow [5] might be right up your alley. Similar to Big, HTML Slideshow consists of a few JavaScript and CSS files, and the tool comes with an example presentation you can study and tweak.

Creating slides with HTML Slideshow is as easy as it gets. Each slide sits inside the <section> element:

<section>
  <hgroup>
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </hgroup>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

You can add as many slides as you want, and you can spice them up with lists and images. If you know your way around JavaScript, you can bind JavaScript scripts to specific slides using the newSlide event.

The example presentation supplied with HTML Slideshow uses web fonts in the EOT and WOFF formats. If you don't have EOT and WOFF fonts handy, you can tweak the presentation to use fonts from the Google Fonts service [6]. To do this, open the example/styles.css file in a text editor and remove the @font-face block. Then, modify the font-family properties to use the desired font; for example, font-family: 'Open Sans', sans-serif;. Save the changes, open the example/slideshow.html file, and add the link to the specified font:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Also, install the font locally, so you can use it in the presentation without an Internet connection.

HTML Slideshow hasn't been updated for a while, and it's decidedly light on features. Still, it can come in handy when you need to create a simple presentation without too much fuss.

DZSlides

Similar to Big, DZSlides [7] lets you create presentations by editing the supplied HTML file. But, whereas Big relies on the external big.js and big.css files, DZSlides consists of a single, self-contained HTML file that incorporates styles, the required JavaScript code, and the HTML presentation itself. Similar to HTML Slideshow, DZSlides emulates a more traditional presentation look, and the tool provides several useful features.

Creating a presentation with DZSlides is a matter of defining slides using the <section></section> tags and then adding content to each slide. DZSlides supports several formatting options, including headings (H1, H2, and H3), basic text styles (bold, italic, and underlined), lists, block quotes, and footers (Figure  3). Using the incremental class, you can turn a regular list into an incremental one, in which items are displayed one-by-one using the Right arrow key. DZSlides allows you to embed images and videos into slides, too.

Figure 3: DZSlides supports headings, basic text styles, lists, etc.

DZSlides' default functionality can be extended using so-called shells. A shell is a special HTML file that embeds a DZSlides-based presentation and adds extra features to it. DZSlides comes with two shells: embedder.html and onstage.html. The former adds navigation controls and a slide count. These features can be useful for viewing DZSlides presentations embedded into web pages.

The onstage.html shell (Figure 4) adds a presenter screen with the current and next slide side-by-side, the total slide count, and a clock. The shell makes it possible to open the presentation in a separate window and control the slides from the presenter screen. But, that's not all. You can add presenter notes to slides using the <div role="note"></div> tags. The onstage.html shell displays these notes in the bottom pane of the presenter screen.

Figure 4: The onstage.html shell in DZSlides adds a presenter screen to the presentation.

DZSlides has a lot going for it. The entire solution consists of a single HTML file, the default feature set covers all the basics, and the shells add useful functionality. The onstage.html shell, in particular, can prove to be a useful helper during talks and presentations.