Design für Print und Web

Opera als Präsentationstool nutzen

21.01.2006 um 15:15 Uhr
Emersacker
abgelegt unter CSS-Tipps

Emersacker. Suchmaschinenfreundliches multi-paging nur mit CSS

In dem allgemein unterschätzten Browser Opera schlummern ja viele geheime Funktionen, wie ausgefeilte Steuerung über Mausgesten und Tastaturkürzel. Doch dass man mit Opera dank CSS 2 Unterstützung auch Powerpoint-ähnliche Präsentationen in HTML erstellen kann, dürfte selbst Freunden dieses Browsers noch unbekannt sein.

Beim Umschalten in den Vollbildmodus sucht Opera nach einem speziellen Stylesheet, das mit dem "media"-Attribut und der Wertbelegung "projection" eingebunden wurde.

(Diese Funktionalität kann man auch einfach nur dazu nutzen, dem Operabenutzer beim Drücken der F11-Taste die Seite - ganz ohne Scripting - in einem anderen Style zu präsentieren, wie hier bei webdaum.de. Leider funktioniert das nicht im IE oder in Firefox! )

In diesem Stylesheet kann man dann die Teile der Seite, die nur im Normalmodus zu sehen sein sollen, per display:none ausblenden.

Den übrigen Inhalt kann man dann in appetitliche "Häppchen" zerteilen und per CSS-Anweisung: display:block; page-break-after:always Stück für Stück, wie in einer Diapräsentation auf den Bidschirm zaubern. Mittels der Tasten Bild ↑ und Bild ↓ können die einzelnen Inhalts-Häppchen dann vom Seitenbesucher gezielt angesteuert werden.

Ein solcher Anweisungsblock könnte dann so aussehen:


@media projection {



.screen-only {

display:none;

}



.projection-only {

display:block; 

page-break-after:always;

}

}

Im Quelltext der HTML-Seite müssen dann nur noch den einzelnen Inhaltsblöcken mit dem class-Attribut die Klassen .screen-only und projection-only zugewiesen werden.

Eine ausführliche Beschreibung der Projektionsfunktion von Opera im Vollbildmodus mit Tutorial und weiterführenden Links wie dem Opera Show presentation generator, mit dem man ohne Programmierkenntnisse Operapräsentationen erstellen kann, findet man bei Opera, allerdings nur in englischer Sprache.

Hier zur Demonstration noch ein Musterbeispiel einer Präsentation, die in nur 10 Minuten online mit dem Opera Showgenerator erstellt wurde.
Natürlich sollte man zum Betrachten den Opera Browser benutzen .;-) ...

Weiterführende Links:

Opera Projektion Tutorial

Opera Show presentation generator

W3C über Medientypen in CSS 2