Creating Presentations with OperaShow

Date: Jul 23, 2004

While PowerPoint is a popular slide-making tool that's packed with bells and whistles, it's not always the best tool for creating presentation slides. Scott Nesbitt looks at OperaShow, a unique feature of the Opera web browser that turns the software into a presentation powerhouse.

When you think about making presentation slides, the first piece of software that probably comes to mind is PowerPoint. While Microsoft's presentation software is immensely popular, it's not without flaws.

Aside from the arguments that it's easy to make ugly slides with PowerPoint, or that PowerPoint is evil, PowerPoint slides just aren't very portable. It's hard to move slides from operating system to operating system, and if the computer to which you're moving the PowerPoint files doesn't have a copy of PowerPoint installed, you're out of luck. Importing PowerPoint slides into another presentation tool, such as OpenOffice.org's Impress, is tricky, and you can lose formatting. And if you plan to export your slides to HTML and post them on the web, you'll find that the results are not accessible and don't conform to web standards.

If PowerPoint isn't always the best the way to go, what is? One excellent alternative is OperaShow.

What Is OperaShow?

OperaShow is a feature of the Opera web browser that turns Opera into a presentation tool. You author slides in HTML or XHTML, and format them using Cascading Style Sheets (CSS). But each slide in your presentation isn't in a separate file—you put all of your content into a single file.

While this approach sounds strange, it really isn't. Thanks to CSS2 (the extended web stylesheet specification), you can target your content for multiple devices, ranging from the traditional monitor screen to PDAs to printers to projection devices. (OperaShow presentations are targeted to projectors.) And you can tell the browser where to split slides.

When you view an OperaShow presentation in the Opera browser, it looks like any other HTML file. That is, until you press the F11 key. Doing this puts the browser into full-screen mode and displays your slides in the same way that you'd expect a PowerPoint presentation to appear.

Once very useful aspect of OperaShow is that you can have both your slides and presentation handouts in one file. Thanks to some simple CSS tricks (explained later in this article), the Opera browser can hide the handout content when you're viewing slides, and vice versa. In this article, I'll create one file that contains both handouts and slides.

NOTE

This article assumes that you have at least a basic knowledge of HTML and XHTML, and are familiar with the basics of Cascading Style Sheets. If you don't already have it installed, you should also download and install the Opera web browser.

The Good and the Bad

OperaShow is a great way to create slides. Because the slides are authored in HTML, they can be used on any operating system that supports the Opera web browser. You can easily change the look and feel of the slides by using CSS. On top of that, you can further spice up your OperaShow slides using graphics or JavaScript effects.

On the other hand, you need Opera in order to use OperaShow—it won't work in any other browser. Unless you're comfortable working with the HTML, CSS, and other web authoring languages, you might find coding OperaShow presentations to be a bit daunting. Finally, an OperaShow presentation can't duplicate many of the fancy effects that some people have come to expect from PowerPoint.

Getting Started

Let's assume that you have your presentation sketched out and are ready to create your slides. Start your favorite text or HTML editor. When authoring OperaShow slides, I prefer to use a code-based editor rather than a WYSIWYG tool such as FrontPage. This is partly because I'm very comfortable working with HTML code. On top of that, there is some specific HTML code that you must add to your slides (described shortly), and I find it easier to add that code manually. That said, I've had some success preparing OperaShow presentations using Dreamweaver.

Type your presentation content in the editor, marking up the content with the appropriate HTML tags. Remember when I said that you can have both your slides and presentation handouts in one file? Using CSS, you can target specific portions of a web page to a particular device—media in CSS-speak. You do this using the standard HTML <div> tag, but applying a CSS class to it.

Text, graphics, and so on that will appear onscreen or be printed must be targeted for the screen. To do this, surround the block of text with the following tag pair:

<div class="screen"></div>

The content that will appear in your slides must be targeted for a projection device. To do this, surround the block of text with the following tag pair:

<div class="projection"></div>

NOTE

Any elements that are common to both the screen and the slides—headings, for example—should not be surrounded with <div> tags. This technique ensures that these elements are displayed regardless of how you view the HTML file.

The following is a fragment of an OperaShow file:

<h1>Switching to DocBook</h1>

<div class="screen">
<!-- this division denotes a traditional web page -->

<p>Making the switch to DocBook is a big step. It will require you to
 change your authoring tools, but may also require you to change the way
 in which you plan and write your documentation. If you already use a
 modular writing methodology, then switching to DocBook will be no problem.
 If you don't, then some retraining will be necessary. This will, obviously,
 take time and incur some expense.</p>
</div>

<div class="projection">
<!-- this division denotes a slide -->

<ul>
  <li>May have to adopt new authoring tools</li>
  <li>Will definitely need to adopt new authoring methods</li>
</ul>
</div>

Adding Some Style

You're probably wondering what the class="projection" and class="screen" attributes are all about. As mentioned earlier, they target sections of the HTML file to a projection device or a monitor. Each division lets you apply different styles to your slides and handouts, respectively. Using CSS, you can give the handouts the look and feel of a document created in a word processor, and make your slides look however you want them to look.

Whether you're combining the slides and handouts into a single file or just making standalone slides, you can encapsulate all the formatting information you need in one CSS file. When combining slides and handouts, your CSS file will consist of three sections:

Style definitions for elements common to both the handouts and the slides (such as headings)
Style definitions for the handouts
Style definitions for the slides

Start by creating a new CSS file with the name operashow.css. At the top of the file, add the style information for the common elements. In this case, the common elements will be <h1> and <h2> elements. For example:

h1, h2 {
    margin-top: 6px;
    padding-bottom: 10px;
    font-weight: bold;
    }

This style definition simply adds some space above and below the headings, and sets them in bold.

Now, set up the sections for the projection and screen classes. Set up the projection section like this:

@media projection {

}

And set up the screen section like this:

@media screen {

}

The @media elements are a way that CSS tells a browser when and where to apply formatting. You simply put your style definitions for each medium between the braces ({ }). The style definitions that you use are up to you, but your options are limited only by your imagination and the limitations of CSS. Here's a sample of how you can style a bulleted list:

ul  {
   padding-top: 0.5em;
   list-style-type: disc;
   width: 75%;
   height: 50%;
   border-top: solid blue 3px;
   border-left: solid blue 3px;
   list-style-position: outside;
   padding-left: 10%;
   }

Notice the border-top and border-left properties. They put a blue line at the top and to the left of the list, respectively, as shown in Figure 1.

Figure 1 An OperaShow slide demonstrating the border effect we just defined.

One style definition you must add to both the screen and projection sections of the style sheet is display: none. For example, in the projection section, add this:

div.screen {display: none}

This line tells the Opera browser not to display any content surrounded by the <div class="screen"> tag when viewing slides.

For your slides, you must also add the following style definitions to the @media projection block:

h1, h2 {page-break-before: always}

div.presentation {display: block}

The page-break-before property ensures that there's always a page break before any <h1> or <h2> tag. This is what enables the Opera browser to display the content as individual slides. The display: block property ensures that the slide contents are displayed normally.

Once you've defined your styles, save the CSS file. To link the stylesheet to your HTML file, add the following line to the header of the HTML file:

<link rel="stylesheet" type="text/css" media="all" href="operashow.css" />

The media="all" attribute tells the Opera browser that this is a stylesheet for all display devices, and that it might contain instructions for displaying the file on other types of media.

Giving the Presentation

Once you have your OperaShow slides finished, you're ready to give your slides a look. You'll want to do this to make sure that everything looks good:

The slides are formatted properly.
There isn't too much text on a slide.
Nothing extends beyond the bottom of a slide.

If you notice any problems, just open the HTML file in your editor and fix the errors.

To view your slides, open the HTML file that you created in Opera. Figure 2 shows such a file that's just been opened in Opera:

Figure 2 An OperaShow file in screen display mode.

Don't worry if you can't see your slides. You haven't started OperaShow yet. To start OperaShow, press F11. Your slides will appear, as in the sample in Figure 3.

Figure 3 An actual OperaShow slide in action.

To maneuver through the slide show, just press the Page Down and Page Up buttons on your keyboard.

Of course, your slides don't have to look like this. Using CSS, you can apply any formatting that you want. I've seen OperaShow slides that use watermarked background images, GIF animations, and a variety of font techniques. What you can do with your slides is limited only by your imagination and knowledge of CSS.

Other Ways of Working with OperaShow

There are those who like coding HTML. And there are those who don't. If you fall into the latter group, but really want to use OperaShow, you still can do it without getting your hands dirty. Windows users can try QuickShow, a graphical tool for authoring and viewing OperaShow presentations. With QuickShow, you don't have to see any HTML or CSS—you just choose a look and feel for your slides and start typing. QuickShow is shareware, and will set you back $22. But it's a great way to take advantage of the power of OperaShow.

If you don't want to shell out $22 for QuickShow, or if you use an operating system other than Windows and are looking for a way to avoid coding, check out the online OperaShow generator from Opera Software. The OperaShow generator is simply an online form that enables you to set page and font formatting, as well as build a handful of slides. It's simple to use and fast, but requires you to be using Opera version 7 or higher. But the OperaShow generator is a great way to build simple OperaShow slides, or to experiment with OperaShow, if you're still unsure of it.

Conclusion

OperaShow is a great way to create and view clean, elegant presentation slides. It takes a bit of work to create your first OperaShow presentation. But once you have your stylesheet and slide template in place, subsequent OperaShow presentations will be easy to put together. While the presentation used as an example in this article is visually very simple, yours don't have to be. With a bit of creativity and some clever use of HTML and CSS, you can create stunning OperaShow slides that have as much impact as those created using PowerPoint or any other presentation tool.