INKUERZE 2/03: Der WWW-Browser als Präsentationswerkzeug

Vielleicht haben Sie sich auch schon einmal Gedanken darüber gemacht, warum Forschungsergebnisse, Vorlesungsunterlagen oder andere wissenschaftliche Dokumente einmal mit PowerPoint, einmal als PDF-Dateien mit dem Adrobat Reader und ein andermal über HTML mit WWW-Browsern präsentiert werden. In einem anderen Vortrag werden Dias gezeigt oder ein Film mit einem VHS-Recorder oder DVD-Player auf die Projektionswand geworfen. Braucht man all diese Medien wirklich oder nur um auch im Multimedia-Trend mitzuschwimmen? Mit dem WWW-Browser Opera soll anhand von Beispielen gezeigt werden, dass man sehr wohl sein Wissen in einem einzigen Dokument so aufbereiten kann, dass es gleichzeitig WWW-, präsentations-, druck-, datenbankabfrage- und audiovisuell-tauglich ist.

Die heutigen Web-Technologien (HTML, CSS, XML, JavaScript, CGI, PERL, PHP) bieten ziemlich alles, um Texte, Animationen, Video, Audio, Datenbankzugang usw. zu integrieren. Was spricht also dagegen, diese Technologien auch zur Präsentation im Hörsaal zu verwenden?

Außerdem basieren diese Technologien auf Standards und freier Software, so dass man herstellerunabhängig und kostengünstig operieren kann. Also, warum denn in die Ferne schweifen ... Sie werden sich jetzt fragen, warum dann hier auf Opera und nicht auf Browser wie Internet Explorer, Mozilla oder Netscape gesetzt wird. Der Grund liegt darin, dass sich Opera am besten des CSS-Standards (Cascading Style Sheets) annimmt. CSS ist eine Erweiterung von HTML. Es definiert Formateigenschaften einzelner HTML-Elemente und erleichtert somit eine einheitliche und angepasste Gestaltung für die Präsentation am Bildschirm, an der Leinwand, auf dem Papier, der behindertengerechten Computerperipherie, dem Handheld-Computer oder dem WAP-Handy - und das ohne das Dokument, das die Wisseninhalte enthält, anpassen zu müssen.

Anhand einer einfachen Kurzpräsentation mit drei Folien soll nun gezeigt werden, wie das gehen kann. In Abbildung 1 sieht man eine einfache HTML-Seite, die im Web-Stil die Vor- und Nachteile einer - nicht ganz zufällig unserer - Thematik beschreibt. Diese Seite sieht immer gleich aus, egal ob Sie Opera, den Internet Explorer oder irgend einen anderen Browser verwenden.

Wenn Sie jedoch bei Opera auf den Vollbildmodus (z. B. mit der Funktionstaste " F11") umschalten, sehen Sie auf einer Bildschirmseite zunächst die Überschrift, dann die Vorteile (vgl. Abb. 2) und schließlich die Nachteile. Um von "Folie" zu "Folie" zu kommen, drücken Sie einfach die Leertaste oder die Bild-nach-unten-Taste, den Rückwärtsgang legen Sie mit der Bild-nach-oben-Taste ein. Die Buchstaben im Vollbildmodus, auch Projektionsmodus genannt, sind meist bunter und größer gestaltet, so auch in unserem Beispiel. Mit der Esc-Taste beendet man die Präsentation. Wenn Sie Opera schon installiert haben, können Sie sich dieses Beispiel live ansehen unter http://www1.ku-eichstaett.de/urz/inkuerze/2_03/opera/beispiel1.html. Opera gibt es kostenlos unter oder auf unserem Novell-Server im Verzeichnis I:\archiv\opera.

Die CSS-Definition in Abb. 3 beschreibt die Formatierung des Textes für die normale Anzeige. Hier heißt es nur, dass der Text schwarz sein soll. Abb. 4 beschreibt die Formatierung für den Projektionsmodus: hier ist die Farbe des Textes blau, es gibt ein Hintergrundbild und die Buchstaben sind um 180% größer als normal. Der Trick ist aber das CSS-Statement page-break-before:, das heißt, dass bei jedem <h1>-Tag (Formatierungsbefehl für große Überschriften) auf die nächste Seite geblättert wird, also die nächste Folie gezeigt wird. Den Auslöser dazu gibt der Tastendruck auf die Leertaste oder die Bild-nach-unten-Taste.

/* Datei projektion1.css  */

body {
 background: url("heb.gif");   /* Hintergrundbild */
 color: blue;                  /* Farbe des Textes */
 font-size: 180%;              /* Die Buchstaben sollen um x Prozent
                                größer sein */
}

h1 {
page-break-before: always;     /* immer wenn der Tag <h1> (d. h. große
                                Überschrift) kommt, wird nach dem Drücken
                                der Leertaste oder der "Bild nach unten"-
                                Taste die nächste "Folie" angezeigt */
}

Im HTML-Code (Abb. 5) wird dann auf die beiden CSS-Dateien verwiesen. Im normalen Modus gilt also media="screen" mit der CSS-Definition von bildschirm1.css während im Vollbildmodus oder Projektionsmodus media="projection" mit projektion1.css gilt.

<html>
  <head>
    <title>Der WWW-Browser als Präsentationswerkzeug, Beispiel 1</title>
    <link rel="stylesheet" type="text/css"
       href="bildschirm1.css"
       media="screen" />
    <link rel="stylesheet" type="text/css"
       href="projektion1.css"
       media="projection" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
<body>

<center style="font-size:xx-large; font-weight:bold;»
Der WWW-Browser <br> als Präsentationswerkzeug</center>

<h1>Die Vorteile</h1>
Im Vergleich zu anderen Präsentations-Programmen hat der WWW-Browser viele
Vorteile:<ul><li>
Information wird mit ein und derselben Software aufbereitet und kann dann als
Präsentation mit dem Projektor gezeigt und gleichzeitig im Web veröffentlicht
werden.</li><li>
Die Information wird in Standardformaten (HTML, CSS ...) repräsentiert und
nicht verborgen in herstellerspezifischen, proprietären Dateien.</li><li>
WWW-Browser sind im Gegensatz zu anderen beliebten Präsentations-Programmen
kostenlos.</li><li>
Die Möglichkeiten der Einbindung von Multimedia und Online-Abfragen ist nahezu
unbegrenzt.</li><li>
Die Präsentation kann auf verschiedenen Betriebssystemen (Microsoft Windows,
UNIX, Macintosh) genutzt werden.
</li></ul>

<h1>Die Nachteile</h1>
Für folgende Nachteile gibt es gute Chancen, dass sie in Zukunft wegfallen
werden:<ul><li>
So lange es kein äuthoring tool" dafür gibt, muss der Ersteller zumindest
Grundkenntnisse in HTML und CSS haben.</li><li>
Ein layout-getreues Drucken a la PDF ist zwar laut CSS-Standard schon möglich,
aber für die Browser noch Zukunftsmusik.</li><li>
Derzeit unterstützt nur der WWW-Browser Opera einen praktikablen
Präsentationsmodus. </li><li>
Eine einfach strukturierte Präsentation muss genau einer HTML-Datei entsprechen.
Ohne zusätzliche Tricks schränkt das die Gestaltungsmöglichkeiten ein.</li></ul>

</body>
</html>

Abb. 7 zeigt den relativ einfachen Code. Starter.mov ist das Foto und TastaturFilm.mp4 ein Film im MPEG-4-Format. Leider wird das Abspielen von Filmen innerhalb des Browserfensters nicht von allen Browserherstellern in einheitlicher Form unterstützt. Für Präsentationen ist das kein Problem, weil man da ja ohnehin Opera benützt. Problematisch kann es werden, wenn die Seiten über das Internet beliebigen Browserbenutzern zugänglich gemacht werden sollen.

HTML-Seiten kommen häufig nicht so aus dem Drucker wie man es erwartet. Mal enden Zeilen am Papierrand oder es sind Seiten halb leer, weil als nächstes ein Foto kommt, das nicht mehr auf die Seite passte etc. PDF-Dateien sind nicht unbedingt die Alternative, da sie wieder eigens erstellt werden müssen.

Mit CSS können Seitenränder, Papierformat, Seitenvorschub etc. in einer MeinDruckformat.css-Datei ähnlich wie in Abb. 1 und Abb. 2 gezeigt definiert werden. Die Verknüpfung erfolgt dann in der HTML-Datei mit media="print".

Dynamisches Programmieren, Interaktion und die Präsentation von aktuellsten Daten durch Datenbankabfragen

Beim Web-basierten Präsentieren erübrigt sich das Umschalten zwischen einem Präsentationsgrafik-Programm und dem Browser, um aktuelle Daten aus einer Webseite anzeigen zu können. Aktuelle Informationen können durch eine online-Datenbankabfrage zum Zeitpunkt der Präsentation automatisch am Bildschirm angezeigt werden. Es können auch interaktive Elemente in die Präsentation eingebaut werden wie z. B. das Ausfüllen eines Fragebogens und dessen unmittelbare Auswertung, das Errechnen von Werten aufgrund der Eingabe von Parametern etc. Solche Anwendungen können z. B. mit PHP, Perl oder Java programmiert werden.

Jetzt fehlt eigentlich nur noch, die Software vorzustellen, die mit einer einfachen, "plug&work"-Technologie, a la PowerPoint oder Dreamweaver diese Dokumente erstellt. Ideal wäre ein Werkzeug, das das Wissen gleich in XML repräsentiert und von dort eine Präsentation generiert. Die Entwicklung einer solchen Software ist denkbar einfach, zumindest um die Grundfunktionen abzudecken. Leider steht aber ein solches Werkzeug noch aus - eine Marktlücke. Ansonsten bleibt nur - der aufmerksame Leser hat es bereits bemerkt - sich mit HTML und CSS zu beschäftigen.

Ansprechpartner im URZ:	Zimmer:	Telefon:	PMail:
Peter Ihrler	EI: eO-004	-1585	peter.ihrler
Dr. Bernward Tewes	EI: eO-106	-1667	bernward.tewes