Gerald Himmelein
Warum Zeit und Geld in aufgeblasene Präsentationssoftware wie Impress oder PowerPoint investieren, wenn man Slides auch in schlankem HTML schreiben kann, den die Browser-Alternative Opera dann im Vollbildmodus darstellt. Dazu benötigt man lediglich ein bisschen Wissen um CSS und HTML.
(Präsentationsversion)
Was die Anzahl der Darstellungsmodi angeht, macht Opera niemand was vor: Kein anderer Browser kann Webseiten so vielseitig anzeigen wie die Browser-Alternative aus Norwegen.
Seiten erscheinen entweder nach der Präferenz des Seitenautors, in einem Spartanermodus ohne jeden Schnickschnack (Strg-G) oder wie in einem PDA (Umschalt-F11).
Beim Druck auf die F11-Taste hin wechselt Opera nicht nur wie seine Browser-Kollegen in den Vollbildmodus, sondern blendet alle Bildlaufleisten und sonstigen Navigationselemente aus. Aus diesem Grund haben die Entwickler den Modus auf „OperaShow" getauft: Der Browser verwandelt sich in ein Präsentationswerkzeug. Wer sich ein bisschen mit HTML und Cascading Style Sheets (CSS) auskennt, kann über diesen Modus relativ unkompliziert professionell wirkende Präsentationen produzieren.
Der Clou daran ist, dass ein und dasselbe HTML-Dokument den Vortrag sowohl als Fließtext zum Surfen und Ausdrucken enthalten kann als auch als Präsentations-Slides. Sie teilen somit die gleiche Grundstruktur, was die Synchronisierung der Versionen erleichtert. Idealerweise surft man auf einer Konferenz nur eine Webseite aus dem Internet an und wechselt dann in den Präsentationsmodus – und schon kanns losgehen.
Ladezeiten sind kein Problem: Die ganze Präsentation kommt in einer Seite unter; zwischen den Slides wechseln die Tasten Bildnach- oben und Bild-nach-unten. Zur Einteilung kann man ein beliebiges HTML-Tag nehmen; in der Praxis haben sich Heading- Tags bewährt – konkret <h1> und <h2>.
OperaShow macht sich dabei die mit CSS eingeführten Möglichkeiten zur Texttransformation zu Nutze. Im Vollbildmodus nimmt OperaShow den Media Type „projection" an, bei der normalen Darstellung dagegen den für Browser vorgesehenen Typ „screen". Eine Erklärung der Media Types findet sich in [1].
Dass die aktuellen Versionen von Internet Explorer (MSIE) und Mozilla/Netscape stets nur den Media Type „Screen" anzeigen, ist zwar schade, schadet aber nicht: Auch wenn sie von den aufbereiteten Webseiten nicht profitieren, blenden sie die für den Präsentationsmodus reservierten Seitenbestandteile pflichtschuldigst aus.
Die konkreten Vorbereitungsschritte hängen davon ab, wie man eine Präsentation angeht: Einige formulieren erst den ganzen Vortrag aus, andere beginnen mit den Slides und stricken den Vortrag um die darin festgehaltenen Stichpunkte. Die Frage ist auch, welche Bereiche man in beiden Modi unterbringen will.
Zunächst entwirft man ein Style Sheet, das die beiden benötigten Media Types berücksichtigt. Hier ein stark verkürztes Beispiel:
@media screen {
body { background: #ffff66; }
h1 { font: bold 18px "Courier New", monospace; }
div.projekt { display: none; }
div.standard { display: block; }
}
@media projection {
body { background: #99ff99; }
h1 { font: bold 30px Verdana, sans-serif; }
div.projekt { display: block; }
div.standard { display: none; }
}
Unter den Media Types enthält das Style Sheet neben Formatierungen der Tags <body> und <h1> zwei Klassendefinitionen. Der Inhalt des Tags div class="standard" ist für die Browser-Anzeige definiert; von div class="projekt" eingeschlossene Bereiche der Seite erscheinen nur im Vollbildmodus von Opera. In einer HTMLSeite sähe das beispielsweise so aus:
<h1>Der Projektionsmodus von Opera</h1>
<div class="projekt">
<p>Zusammenfassung für Projektionsmodus</p>
</div>
<div class="standard">
<p>Dieser Text wird im Browser angezeigt,
und auch nur im Browser-Modus.</p>
</div>
Nur die Überschrift wird in beiden Modi angezeigt – im Präsentationsmodus am Anfang der aktuellen Folie mit einer Höhe von 30 Pixel im Verdana-Font; in der Browser-Ansicht in 18 Pixel hoher Courier-Schrift. Browser zeigen den Text vor einem knallgelben Hintergrund, der im Präsentationsmodus zu einem beruhigenden Grün wird.
Wer einen komplett ausformulierten Vortrag um Slides ergänzen will, bringt den Fließtext in Containern div class="standard" unter und umfasst die für die Präsentation benötigte Zusammenfassung mit div class="projekt". Wer erst die Präsentation ausformuliert, platziert den Text entweder zwischen den Überschriften und den Stichworten in einem mit div class="standard" ausgewiesenen Bereich oder unter den Inhalten der Slides vor der Überschrift des jeweils nächsten Absatzes.
[1] Alexander Oberdörster, So schick wie möglich, HTML 4.0: Cascading Style Sheets, Level 2 mit Media Types, c’t 9/99, S. 162
[2] Einführung in OperaShow (englisch), http://www.opera.com/support/tutorials/operashow