Background-image

OperaShow — using Opera as a presentation tool

Opera5 for Windows introduces an exciting new feature -- code-named OperaShow -- which turns the browser into an advanced presentation tool. If you give presentations from your computer, this feature is for you! The document you are reading explains how to use and author OperaShow documents.

Compared to other popular presentation tools (e.g. PowerPoint from Microsoft), Opera5 has several advantages :

This tutorial is written to help you get started with OperaShow. It it targeted towards speakers who have used other presentation tools (such as Microsoft PowerPoint) and who are familiar with basic HTML and the Web.

Presentation tools help presenters convey their message to an audience. By presenting a set of slides containing text and images, the talk is enlivened and the speaker is gently kept on track. Also, by printing out the slides or publishing them on the Web (which is the authors' preferred method) the audience can easily review your presentation later.

How to use OperaShow

Using Opera5 as a presentation tool is very easy. By pressing the Show key -- a.k.a. F11 -- Opera5 performs four actions :

Try pressing F11 now! Assuming you are using Opera 5 for Windows (you can easily download it) Opera will go into fullscreen mode and you will be shown slides suitable for projection. Unless you already were in fullscreen mode, in which case Opera will revert back to normal screen mode suitable for reading. In other words, the Show key toggles between fullscreen and normal screen mode.

When you are in fullscreen mode, you will see no scrollbar on the right side of the document. You can still scroll downwards with the arrow keys, and you can move from one page to another using the PgUp and PgDn keys.

If you don't use Opera5, you will only be able to read about OperaShow, not experience it yourself.

You can switch into fullscreen mode with any document. However, most documents will look almost the same; they will have the same content and the same layout, only shown on a larger canvas. What makes some documents -- for example the one you are reading now -- look different when the Show key is pressed? This is the topic of the next section.

The role of style sheets

In order for documents to become OperaShow presentations, Opera must be told how to turn the HTML document (which is the common document format on the Web) into a presentation. This is done by adding a CSS2 style sheet at the top of the document. If you have written documents for the Web, you may be familiar with the concept of style sheets. Style sheets allow authors to describe how documents are to be presented on the Web.

There are many web sites and books about Cascading Style Sheets (CSS). Most of them describe CSS1, which was the first generation of style sheets. Opera5 goes one step further by supporting CSS2. CSS2 adds a number of new features, among them the ability to write style sheets for different media types such as screen, print, speech and projection. When you press the Show key, Opera5 will look for style sheets written especially for projections. If found, these style sheets will be applied and the presentation will change accordingly. Let's do it!

How to author OperaShow presentations

1< style type="text/css">
2	@media projection {
3	BODY {
4		font : 30px Gill Sans, sans-serif;
5		color : #000000;
6		background : yellow;
7		}
8
9	H1, H2 {
10	 page-break-before : always;
11 	}
12     
13	 DIV.projection { display : block }
14	 DIV.screen { display : none }
15 	}
16 < /style>

Currently, there exists no authoring tools that generate OperaShow presentations. But this is now being remedied by Phil Burns! However, authoring for OperaShow is easy. You need to know a little about HTML. For example, the HTML document you are reading now has this above section in the head.

[The line numbers are only present for explanation purposes, they do not appear in the real style sheet. To see the style sheet, select View/Source in your browser]

Let's go through it line for line. Line 1 declares there's a CSS style sheet ahead, and line 2 says that the style is meant for the "projection" media type. When you press F11 in Opera5, it will be looking for style sheets like this one. Line 3-15 contains the style sheet itself and line 16 marks the end of the style sheet. If you're totally lost by now, you should probably start by reading up on HTML and CSS.

The style sheet (line 3-15) consists of three main sections :

Setting fonts and colors

3	BODY {
4		font : 30px Gill Sans, sans-serif;
5		color : #000000;
6		background : yellow;
7		}

Changing fonts and colors are among the most common tasks style sheets are used for. In line 4, the font size -- i.e. the height of the letters -- is set to 30 pixels. Also, the font family is set to "Gill Sans", with the generic "sans-serif" as a replacement if "Gill Sans" doesn't exist on the machine.

Line 5 sets the text color to black, and line 6 sets the background color to yellow. All properties are set on the BODY element (see line 3) from which all visible HTML elements inherit. Therefore, the color of all text will be black on yellow.

Breaking Pages

9	H1, H2 {
10	 page-break-before : always;
11 	}

When you give a presentation, you move from one page (or "slide") to the other. Normally, browsers show documents with a scrollbar on the right side to move down and up in the text. When you press the Show key, Opera goes into fullscreen mode and tries to split the document into pages. The style sheet declares where page breaks should occur -- in our example line 9-10 says that they should occur before H1 and H2 element. Thus, H1 and H1 elements will always appear on the top of a new page.

Instead of using the scrollbar to move up and down in the document, the arrow keys and "PgDn" and "PgUp" are used in fullscreen mode.

H1 and H2 are among the "heading" elements in HTML. Some authors create headings by using the FONT tag and a SIZE attribute, but this is not recommended since the FONT element says nothing about the structure of the document. And it's the structure of the document we are using when splitting the document into pages.

Hiding and showing content

13	 DIV.projection { display : block }
14	 DIV.screen { display : none }

You may have noticed that when you press the Show key, not only the appearance of the document (fonts, colors, pagination) changes, but also the content of the document. This is one of the more advanced features of CSS and most authors will not need to make this kind of documents. However, if you want to impress your audience with technology indistinguishable from magic, this one is for you.

CSS can do simple transformations in document -- style sheets can e.g. hide text which would otherwise appear. Here are the rules used in this document :

Line 13 makes a certain class of DIV elements (those with a class names "projection") visible, and line 14 hides another class of elements (those with class names of "screen").

When Opera 5 reverts back to normal screen mode, a different set of rules are applied :

@media screen {
	 DIV.projection { display : block }
	 DIV.screen { display : none }
}

In other words: the document you are reading is actually two documents in one. When you toggle between fullscreen and normal mode, Opera switches from one document to the other. Only the headings remain visible at all times.

XML and OperaShow

As most documents on the Web, this document is written in HTML. HTML is the main document format of the Web and the simplicity of HTML is one of the main reasons why the Web has gotten so popular.

As more people enter the web, they bring with them specialized information which is cumbersome to represent in a general document format such as HTML. XML is a framework for defining new data formats for authors with specific needs. One possible use of XML is to design a document format for OperaShow presentations. The author of this document has tried to do just that, and has published one of his talks in the new format.

Feel free to reuse the document you are reading, and the XML document refereced above, as templates for your own presentations.

May your projector always shine.


howcome 2000-07-13