Aufbereitung des Kurses

Ich hatte den Kurs ,,Einführung in Simulink" bisher in konventioneller Form vor versammelten Teilnehmern gehalten. Die Programm-Ein- und -Ausgaben wurden dabei mit Hilfe eines Beamers projiziert. Um dieses Verfahren netzwerkfähig umzusetzen, erstellte ich zunächst ,,Film-Skripte", die die einzelnen Schritte in einen Ablauf von Bildschirm-Darstellungen und Animationen zerlegte. Um den Arbeitsaufwand möglichst zu minimieren, wurden Animationen nur im Einführungsteil verwendet, in dem das Arbeiten mit der Simulink-Oberfläche vorgestellt wird. Im weiteren Verlauf des Kurses setzte ich diese Techniken als bekannt voraus und stellte nur noch Bildschirminhalte dar.

Anhand des ,,Skripts" legte ich nun eine Sammlung der benötigten Fensterinhalte als GIF-Bilder an (s. Bild 1). Die einzelnen Bilder wurden in HTML-Seiten zu einem Gesamtbildschrim zusammengestellt, wobei viele Bilder mehrfach verwendet werden konnten, da sich zwischen den Schritten meistens nur eines der mehreren dargestellten Fenster ändert. Ein typischer Bildschirm sah dann so aus:

Die Verbindung der einzelnen Schritte erfolgte mit Hilfe von Links in den HTML-Seiten. Dabei setzte ich die aktiven Stellen im Dokument so auf die Bilder, daß das Arbeiten mit dem wirklichen Simulink-Programm imitiert wurde (,,Wir klicken jetzt das Bibliotheks-Fenster zu"). Ergab sich aus dem Ablauf heraus kein solches Fenster, setzte ich ein unsichtbares GIF als Klickpunkt für mich.

Die Animationen sollten zwei verschiedene Arbeitsvorgänge verdeutlichen:

Typ1:

Ziehen von Blöcken von einem Fenster in ein anderes (,,Drag and Drop")
Beispiel: http://www.tu-harburg.de/rzt/tuinfo/software/numsoft/matlab/
kurs/simulink/HTML/chap1-44.html

Typ2:

Verbinden von Blöcken mit Verbindungslinien
Beispiel: http://www.tu-harburg.de/rzt/tuinfo/software/numsoft/matlab/
kurs/simulink/HTML/chap1-49.html

Die Drag-and-Drop-Animation ließ sich über ein einziges Java-Applet realisieren, das über Parameter jeweils andere Bilder als Hintergrund und Objekt benutzte. Das Ziehen von Linien wurde dagegen individueller gestaltet, weil je nach Bild verschieden gewinkelte Linien benö tigt wurden. Das ,,Programmieren durch Kopieren" erschien deutlich schneller als der Versuch, ein hinreichend allgemeines Programm zu schreiben. Dabei konnten ohne großen Aufwand Simulink-spezifische Details wie Veränderungen des Cursors je nach Kontext oder das Hinzufügen einer Pfeilspitze eingebaut werden.

Schließlich enstand so eine Abfolge von Seiten, die das Verhalten von Simulink sehr realistisch nachbildete. Für den Benutzer war kaum ein Unterschied zum wirklichen Programmablauf zu bemerken.

Der Aufwand dafür allerdings war immens: Allein für das erste Kapitel, in dem jeder kleine Schritt vorgeführt wurde, wurden 57 HTML-Seiten, 45 GIFs und 10 Animationen mit 3 Java-Applets geschrieben, für die sechs anderen Abschnitte kamen noch einmal 20 HTML-Seiten und 45 GIFs dazu. Die Gesamtgröße aller Files betrug aber nur 820 KB, so daß sich die Netzbelastung in Grenzen halten sollte. Der Zeitaufwand betrug etwa vier Wochen (mit langen Abend-Sitzungen), wobei etwa die Hälfte für die Einarbeitung in Java und verschiedene Fehlversuche benötigt wurde. Insbesondere Bugs und Java-Inkompatibilitäten im Netscape-Browser sorgten für einige frustrierende Abende. Der angesetzte Termin rückte bedrohlich nahe!