Präsentationen mit Opera (2)
Nachdem ich die Vorzüge von Opera als Präsentationstool beschrieben habe, möchte ich nun ein wenig ins Detail gehen und erklären, wie man die XHTML-Präsentation sowohl für das Web als auch für die Vortragsprojektion sinnvoll gestalten kann.
Eine grundlegende und wichtige Funktion von PowerPoint ist das schrittweise Einblenden einzelner Elemente auf einer Folie. So können z.B. Aufzählungen in kleinen Happen präsentiert werden und die Aufmerksamkeit der Zuhörer fokussiert jeweils auf das neue Element. Diese Funktion ist mit OperaShow und XHTML auch möglich, allerdings muss man einen kleinen CSS-Kniff anwenden: Man packt quasi zwei Dokumente in eines und lässt nur bestimmte Bereiche für das entsprechende Ausgabemedium anzeigen.
Das Attribut media erlaubt es, Stylesheets oder Teile davon für verschiedene Ausgabemedien zu definieren. Die beiden Medien, die in unserem Fall relevant sind heißen screen und projection.
Für die Monitorausgabe möchten wir ein einfaches Dokument, das alle “Folien” in Komplettansicht enthält. Für den Präsentationsmodus möchten wir die einzelnen Folienelemente aber nacheinander einblenden.
Da Opera aber nur “folienweise” blättern kann, müssen wir jeden einzelnen Schritt als eigene Folie definieren. Das bringt zwar ein wenig Redundanz im Markup, was aber kaum ins Gewicht fällt: meine XHTML-Präsentation war trotzdem noch wesentlich kleiner als eine durchschnittliche PowerPoint-Datei.
Wir erstellen also z.B. für eine Folie mit einer Vier-Punkt Liste fünf Einzelfolien:
- Nur die Überschrift
- Überschrift plus Listenpunkt 1
- Überschrift plus Listenpunkte 1 + 2
- Überschrift plus Listenpunkte 1 + 2 + 3
- Überschrift plus Listenpunkte 1 + 2 + 3 + 4
Die ersten vier brauchen wir nur für das schrittweise Einblenden, die letzte kommt zusätzlich auch im “normalen” Monitormodus zum Einsatz. Diese Trennung erreichen wir, indem wir im Markup die ersten vier Folien in ein div-Element packen, das für media="screen" ausgeblendet wird.
Das Markup könnte also z.B. folgendermaßen aussehen:
<!-- dieses div wird nur im Praesentationsmodus angezeigt --><div class="projection"><h2>Überschrift</h2> <!-- neue Folie --><h2>Überschrift</h2> <!-- neue Folie --><ul><li>Argument 1</li></ul><h2>Überschrift</h2> <!-- neue Folie --><ul><li>Argument 1</li><li>Argument 2</li></ul><h2>Überschrift</h2> <!-- neue Folie --><ul><li>Argument 1</li><li>Argument 2</li><li>Argument 3</li></ul></div> <!-- /.projection --><h2>Überschrift</h2> <!-- neue Folie --><ul><li>Argument 1</li><li>Argument 2</li><li>Argument 3</li><li>Argument 4</li></ul>- Code-Download: /code/praesentationen-opera-01.txt
Im Stylesheet steht Folgendes:
/* Styles, die nur im normalen Browsermodus wirksam sind */@media screen {/* Elemente, die bei der Praesentation schrittweise aufgebaut werden, werden im Browsermodus versteckt */.projection {display:none;}}- Code-Download: /code/praesentationen-opera-02.txt
Die Klasse projection kann man natürlich auch für weitere Elemente verwenden, die nur im Präsentationsmodus erscheinen sollen, bei meinem Votrag z.B. der WEBGEO-Schriftzug im Hintergrund oder die Grafik am rechten Rand, die die einzelnen Schritte visualisiert.
Das war’s schon. Opera macht (wie in Teil 1 beschrieben) bei jedem <h2>-Element einen “Folienumbruch” , so dass wir die eine Folie scheinbar in fünf Schritten einblenden können. Diese Methode ist zwar nicht besonders elegant, ermöglicht aber den Einsatz einer sinnvollen Vortragstechnik in XHTML-basierten Präsentationen, die wiederum deutlich flexibler sind als PowerPoint.