Faszination Mikrosystemtechnik

Transcription

Studienarbeit: „Faszination Mikrosystemtechnik“
Informations-CD für Schülerinnen und Schüler“
„Faszination Mikrosystemtechnik“
Informations-CD für Schülerinnen und Schüler
Studienarbeit von:
Andreas Horstmann (ah)
[email protected]
Markus Krebs (mk)
[email protected]
Katharina Schmidt (ks)
[email protected]
Simon Zolg (sz)
[email protected]
Auftraggeber:
Prof. Dr. Oliver Paul
Institut für Mikrosystemtechnik der Universität Freiburg
Leitender Professor:
Prof. Dr. Thomas Ottmann
Institut für Informatik der Universität Freiburg
Betreuer:
Stephan Trahasch
Bearbeitungszeitraum:
Praktischer Teil: März 2001-August 2001
Ausarbeitung: November 2001-Januar 2002
___________________________________________________________________________
Bearbeitet von: Andreas Horstmann, Markus Krebs, Katharina Schmidt, Simon Zolg
Seite 1 von 84
Inhaltsverzeichnis
1
2
Einleitung
5
Vom Auftrag zur Konzeption
6
2.1
Der Auftrag ................................................................................................................ 6
2.2
Die Zielgruppe............................................................................................................ 7
2.3
Das Produkt ................................................................................................................ 7
2.3.1
Produktskizze ..................................................................................................... 7
2.4
Wege zur Konzeption............................................................................................... 10
2.4.1
Feinkonzept: Die ersten drei Ebenen ............................................................... 11
3
Konzeption und Planung
12
3.1
Von ersten Grundsätzen und einem Problem........................................................... 12
3.2
Darstellung der inhaltlichen Konzeption.................................................................. 12
3.2.1
Die Übersichtsseite........................................................................................... 12
3.2.2
Die einzelnen Gliederungszweige.................................................................... 14
3.2.2.1 „Die Mikrosystemtechnik“........................................................................... 14
3.2.2.2 „Das Studium“.............................................................................................. 15
3.2.2.3 „Der Beruf“ .................................................................................................. 16
3.2.2.4 „Freiburg“..................................................................................................... 17
3.2.2.5 „Und Du“...................................................................................................... 18
3.2.3
Fazit.................................................................................................................. 19
3.3
Zeitplan..................................................................................................................... 19
4
Vorbereitungen
21
4.1
Konventionen ........................................................................................................... 21
4.2
Infrastruktur.............................................................................................................. 22
4.2.1
Raum ................................................................................................................ 22
4.2.2
Hardware .......................................................................................................... 23
4.2.3
Software ........................................................................................................... 23
5
Layout
25
5.1
Vorbemerkung.......................................................................................................... 25
5.2
Inhaltsseiten.............................................................................................................. 25
5.2.1
Technische Überlegungen ................................................................................ 26
5.2.1.1 Größe............................................................................................................ 26
5.2.1.2 Frames verwenden ?..................................................................................... 26
5.2.1.3 Position innerhalb der CD ............................................................................ 27
5.2.1.4 Einfache Erstellung der Textseiten .............................................................. 27
5.2.1.5 Weg vom HTML-Stil ................................................................................... 27
5.2.1.6 Weitere stilistische Überlegungen................................................................ 27
5.2.2
Die vier Vorlagen ............................................................................................. 28
5.2.2.1 Bild/Text/Links ............................................................................................ 28
5.2.2.2 Nur Rolltext.................................................................................................. 28
5.2.2.3 Flash zentriert............................................................................................... 28
5.2.2.4 Universallayout ............................................................................................ 29
5.2.3
Dreamweaver 4 ................................................................................................ 29
5.2.3.1 Vorlagenerstellung ....................................................................................... 29
5.2.3.2 Vorlagenverwendung ................................................................................... 30
5.2.3.3 Vorlagenveränderung ................................................................................... 30
___________________________________________________________________________
Seite 2 von 84
5.2.3.4 Probleme: ..................................................................................................... 30
5.3
Cascading Stylesheets .............................................................................................. 31
5.3.1
Textlayout......................................................................................................... 31
5.3.1.1 Grundeinstelllungen: body-tag..................................................................... 32
5.3.1.2 Hyperlinks: das a-tag.................................................................................... 32
5.3.1.3 Standardtexte................................................................................................ 32
5.3.1.4 Spezielle Dokumente mit Tabellen .............................................................. 33
6
Bausteine der CD 35
6.1
Vorbemerkung.......................................................................................................... 35
6.2
Texte......................................................................................................................... 35
6.3
Bilder........................................................................................................................ 36
6.4
Ton ........................................................................................................................... 37
6.4.1
Vorbemerkung.................................................................................................. 37
6.4.2
Musik................................................................................................................ 37
6.4.3
„Kochrezept“ für Sounds als Flash-Filme........................................................ 38
6.5
Interviews und Schnitt mit Cool Edit....................................................................... 39
6.5.1
Interviews mit Professoren............................................................................... 40
6.5.2
Interviews mit Studenten.................................................................................. 41
6.5.3
Interviews mit Firmen- und Uni-Vertretern ..................................................... 42
6.5.4
Cool Edit 2000 ................................................................................................. 43
6.6
Animationen mit Flash ............................................................................................. 43
6.6.1
Vorweg ............................................................................................................. 43
6.6.2
Das Programm Flash 5 – eine Kurzbeschreibung ............................................ 43
6.6.3
Nutzung im Rahmen des CD-Projekts ............................................................. 45
6.6.3.1 Die vier Animationsklassen ......................................................................... 46
6.6.4
Abschließende Bemerkungen........................................................................... 51
6.7
Benutzerführung....................................................................................................... 51
6.7.1
Navigationsleiste .............................................................................................. 52
6.7.2
Direkte Hyperlinks auf den Seiten ................................................................... 52
6.7.3
Navigationsbaum.............................................................................................. 52
6.7.4
SiteMap ............................................................................................................ 53
6.7.5
Links in Rolltext-Seiten ................................................................................... 54
6.8
Verzeichnisstruktur: ................................................................................................. 54
6.8.1
Installation........................................................................................................ 54
6.8.2
JavaScript ......................................................................................................... 54
6.8.3
Layout............................................................................................................... 54
6.8.4
Bereiche............................................................................................................ 54
6.9
Autostart (Windows) ................................................................................................ 55
6.9.1
Programmstart-Datei ........................................................................................ 55
6.9.2
Weitere mögliche Angaben in AutoRun.inf..................................................... 55
6.9.2.1 "CD-Bild"..................................................................................................... 55
6.9.2.2 Kontextmenü ................................................................................................ 55
6.9.3
Die fertige AutoRun.inf-Datei.......................................................................... 55
6.10 Programmierung....................................................................................................... 56
6.10.1
div.js: ................................................................................................................ 56
6.10.2
getjspath.js........................................................................................................ 58
6.10.3
baum_link.js ..................................................................................................... 58
6.10.4
navbaum.js........................................................................................................ 58
6.10.5
navbaum.html................................................................................................... 60
6.10.6
navcontrol.js ..................................................................................................... 60
6.10.7
rolltext.js........................................................................................................... 61
___________________________________________________________________________
Seite 3 von 84
6.10.8
sitemap_start.js................................................................................................. 63
6.10.9
sitemap.js.......................................................................................................... 63
6.10.10 soundcontrol.js ................................................................................................. 64
6.10.11 startup.js ........................................................................................................... 67
6.10.12 checkall.js......................................................................................................... 68
6.10.13 Installationshinweise ........................................................................................ 69
6.10.14 “…ist cool” – Seite........................................................................................... 70
6.10.15 Ladekontrolle / Seiten-Aktualisierung ............................................................. 71
6.10.16 Browserkompatibilitätsprobleme ..................................................................... 72
6.11 Erstellung grafischer Übersichtsseiten mit Macromedia Fireworks 4.0 .................. 73
7
Produktionsphasen
7.1
7.2
7.3
8
77
Alpha Test (Stichtag: Sensormesse am 7. Mai 2001) .............................................. 77
Beta Test 1 (Stichtag: 1. Juni 2001) ......................................................................... 77
Beta Test 2 (Stichtag: 31. Juli 2001) ........................................................................ 78
Das fertige Produkt
79
8.1
Rechtliches ............................................................................................................... 79
8.2
CD Cover.................................................................................................................. 79
8.3
Mastering und Vervielfältigung ............................................................................... 81
8.3.1
Vorwort ............................................................................................................ 81
8.3.2
Brennen mit Toast ............................................................................................ 81
8.3.3
Vervielfältigung ............................................................................................... 82
9
Schluß
83
10
Abbildungsverzeichnis 84
___________________________________________________________________________
Seite 4 von 84
1 Einleitung
(ks) Die vorliegende Studienarbeit ist entstanden im Zeitraum März bis August 2001. In
dieser Zeit haben wir viele Erfahrungen gesammelt, es gibt vieles, was wir bei künftigen
Projekten anders machen würden aber auch vieles, von dem wir überzeugt sind, dass es der
richtige Weg war, den wir beschritten haben.
Im Anschluss an das Seminar „Lehren und Lernen im Netz“ fragte uns Prof. Ottman, ob wir
uns vorstellen könnten, eine Informations-CD-ROM über den Studiengang
Mikrosystemtechnik zu erstellen.
Unser Team bestand aus vier Leuten. Von Anfang an trafen wir uns einmal wöchentlich mit
Prof. Paul vom Lehrstuhl Materialen am Institut für Mikrosystemtechnik, um Fortschritte zu
zeigen und Fragen zu besprechen. In der Anfangsphase, arbeiteten wir überwiegend
gemeinsam, nachdem wir uns auf eine gemeinsame Konzeption geeinigt hatten und die
Planung für die weiteren Arbeitsschritte angelaufen war, teilten wir unsere
Verantwortungsbereiche auf und trafen uns gemeinsam weiterhin mindestens einmal pro
Woche.
Wir sind froh darüber, die Gelegenheit erhalten zu haben, als Studienarbeit ein echtes
Produkt zu erarbeiten. Wir konnten Erfahrungen sammeln in Teamarbeit und einen Einblick
in echte, unter Termindruck zu entwickelnde, Softwareentwicklung gewinnen.
In der Zeit der Erarbeitung gab es Termine, es gab Kritik und es gab Lob. Und wir
profitierten von Anfang an davon, dass in unserem Team sehr unterschiedliche Charaktere
und Qualifikationen vertreten waren.
Alles in allem war es eine bereichernde Erfahrung. Wir danken all denjenigen, die uns diese
Arbeit ermöglicht haben und uns mit vielen kleinen und großen Tipps zur Seite standen. Ganz
besonders möchten wir Herrn Prof. Paul danken, der unserer Phantasie und Kreativität breiten
Raum ließ, eng mit uns zusammenarbeitete und uns alle erdenklichen Hilfsmittel zur
Verfügung stellte.
Der vorliegende Text soll einen Überblick geben über die Arbeitsschritte, die erforderlich
waren vom Auftrag bis zum fertigen Produkt.
___________________________________________________________________________
Seite 5 von 84
2 Vom Auftrag zur Konzeption
2.1 Der Auftrag
(ks) Zu Beginn erhielten wir eine Auflistung all dessen was die CD leisten sollte. Zur ersten
Besprechung legte uns Prof. Paul folgendes Dokument vor.
Zielpublikum
Schüler vor Abitur
Form
Browser-kompatibel
Interaktiv
Graphisch attraktiv
Akustisch attraktiv
Textuell informativ, nicht überladen
Erweiterbar
Zeitplan*
1. MST-Studium mindestens PC Beta-Version: Sensormesse Nürnberg, 8.10.Mai
2. MST-Studium Final Version: Sommersemester: CD-ROM
3. Integration mit Forschung MST: CD-ROM
4. Integration mit Informatik
Organisation
PR-Team1
Direkter Ansprechpartner MST: Prof. Paul
Software- und Hardware-Issues: Herr Trahasch, Prof. Korvink
Arbeitsteilung PR-Team
Inhalt
PR-Team: graphisch; akustisch; z.T.
Inhalte: Team von Professoren/Mittelbau/Studenten = PR-Team
Texte: Professoren und Mitarbeiter der MST
Bilder: z.T. Professoren und Mitarbeiter
Fragen
Infrastruktur
Software
Hardware
-Computer
-Cameras
-Pensa
Sonstige Ideen
Interviews mit Industrie-Vertretern
-Firmen: Sick, Sensirion, AMS, Bosch, Intermetall, E&H
-Betätigungsbereich für Absolventen
-Aussichten der MST allgemein
CD Uni Hamburg-Harburg: Struktur
*
unsere Aufgabe sollte die Bereiche 1. und 2. umfassen
1
diesen Namen hatte Prof. Paul unserem 4-er-Team gegeben
___________________________________________________________________________
Seite 6 von 84
Nicht alles blieb so, wie in dieser ersten Skizze angedeutet, ein Produkt entsteht in
wechselseitigen Auseinandersetzungen und steht und fällt mit den Personen, die daran
beteiligt sind. Wir erlebten genügend Freiräume und Unterstützung, um eigene Ideen
einbringen und realisieren zu können und bald war klar, dass die meisten der Inhalte von
unserem kleinen motivierten Team in enger Zusammenarbeit mit Prof. Paul produziert
werden sollten. Damit kamen zwar mehr Aufgaben auf uns zu, als wir ursprünglich erwartet
hatten, dafür wurde uns ermöglicht, jeweils eigene Stärken in das Projekt einzubringen.
Meines Erachtens stellt das ein Erfolgsrezept für gelungene Softwareproduktionen dar.
2.2 Die Zielgruppe
(ks) Die CD-ROM sollte Schülerinnen und Schülern als Informationsmedium über den
Studiengang Mikrosystemtechnik dienen. Sie sollte die Altersgruppe adäquat ansprechen und
neben informierenden auch motivierende Aspekte beinhalten.
Als Vorlage für die inhaltlichen Aspekte stellte uns Prof. Paul eine CD-ROM der Universität
Hamburg Harburg vor, als gestalterische Vorlage diente die Informatik-CD-ROM, ein
Produkt das über den Studiengang Informatik an der Universität Freiburg informiert.
Zu Beginn spielten wir mit dem Gedanken eine repräsentative Schulklasse bzw. einen
Oberstufenleistungskurs als kontinuierliche Testzielgruppe auszuwählen, und mit dieser
Gruppe die einzelnen Phasen des Produkts zu testen und abzusprechen.
Aus Zeitgründen (der Zeitplan sah anfangs eine Vollentwicklung innerhalb von zwei Monaten
vor) verzichteten wir darauf. In einer weiteren Produktion fände ich diesen Aspekt aber als
Verbesserungsvorschlag zu bedenken. Bezieht man eine Schulkasse mit ein, so hat man ein
kontinuierliches Testpublikum und kann gezielter auf diese hin entwickeln.
Als weitere Personengruppen, die in die Tests miteinfließen müssen, (was auch geschehen
ist), sind repräsentative Personen des Unternehmens zu nennen, für das geworben werden
soll. In unserem Fall handelte es sich um Mitarbeiter des Lehrstuhls für Mikrosystemtechnik
und hier überwiegend Mitarbeiter des Lehrstuhls Materialien, denen wir an dieser Stelle
nochmals herzlich für Anregungen und Kritik danken wollen.
2.3 Das Produkt
(ks) Anders als die Informatik-CD-Rom, die mit der Autorenumgebung „Macromedia
Director“ hergestellt wurde, sollten wir ein browserkompatibles Produkt entwickeln, d.h. eine
auf den Standard-Webbrowsern lauffähige Version abliefern. Dabei sollten wir uns um
Benutzerfreundlichkeit, attraktives Design und die Integration multimedialer Elemente
bemühen. Dass diese Aufgabe nicht immer leicht war, wird Markus im Punkt
„Browserkompatibilität“ ausführlich darstellen.
Um die Ergebnisse der Gespräche untereinander und mit Prof. Paul in eine Form zu bringen
und um eine Grundlage für unsere weitere Vorgehensweise zu erhalten, erstellte ich als ersten
Arbeitsschritt ein Dokument: Produktskizze. Dieses Dokument wurde auch den Angehörigen
der IMTEK-Runde vorgestellt.
2.3.1
Produktskizze
Produktbeschreibung
Es soll eine Präsentation der Mikrosystemtechnik erstellt werden, die Schüler
und Schülerinnen als Adressaten über den Studiengang Mikrosystemtechnik an
der Universität Freiburg informieren soll. Die Präsentation soll
Werbungscharakter haben, sie soll ansprechend gestaltet sein und zur
___________________________________________________________________________
Seite 7 von 84
Aufnahme des Studiengangs Mikrosystemtechnik motivieren. Dabei sollen
unterschiedliche Medien wie Bild, Ton, Video integriert werden und eine
browserkompatible Darstellung, die leicht wartbar ist, entstehen. Das Produkt
soll in Form einer CD-ROM erstellt werden, auf der evt. nötige Plugins bereits
vorinstalliert sind.
Funktionsumfang
Das Produkt soll zum einen eine multimediale Präsentation sein, zum anderen
im Gegensatz zu Präsentationen, die mit Macromedia Director erstellt werden,
ein offenes System darstellen, bei dem eventuelle Änderungen leicht möglich
sind und die Integration vorhandener Ressourcen in Form von Hyperlinks
möglich ist.
Benutzerprofil
Die Präsentation soll an Schulen verschickt werden. Die Frage, die sich stellt,
ist, ob bestimmte Zielgruppen besonders motiviert werden sollen. Vielleicht
sind vor allem Absolventen technischer Gymnasien gefragt, denkbar wäre
auch, dass junge Frauen, die bisher in den Ingenieurswissenschaften und vor
allem in der Mikrosystemtechnik bisher stark unterrepräsentiert sind (weniger
als 5 Prozent) besonders für den Studiengang motiviert werden sollen. Wichtig
erscheint uns hier die Herausarbeitung eines Benutzerprofils, bei dem geklärt
wird, welche individuellen Voraussetzungen für das Studium nötig sind.
Frage an den Lehrstuhl:
Was sollen künftige Studis mitbringen?
Welche Kompetenzen sind in Studium und Beruf besonders gefragt?
Benutzerführung
Die Benutzerführung soll offen gestaltet sein. Benutzer und Benutzerinnen des
Systems sollen es sich aussuchen dürfen, ob sie sich eine Präsentation
vorführen lassen oder ob sie sich die für sie relevanten Informationen
eigenständig erarbeiten.
Inhalte
Inhalte sollen zum einen eine Präsentation der Mikrosystemtechnik sein, dazu
zählen studienspezifische Inhalte. Zum anderen sollen Informationen über das
Berufsbild Mikrosystemtechnik und Zukunftsaussichten dargestellt werden.
Neben diesen studien- und berufsbildbezogenen Inhalten sollen auch
Informationen über den Studienstandort Freiburg und eine Rubrik „jenseits des
Studiums“ in der CD enthalten sein. Zweck davon soll sein, auch für den
Studienstandort Freiburg zu werben und möglichen Studienanfängern
Informationen zu geben, die sie benötigen, wenn sie sich für ein Studium in
Freiburg entscheiden,
Zeitplan
Eine erste Fassung soll Anfang Mai vorliegen, die endgültige Fassung Mitte
Juni fertig sein
Entwicklungsumgebung
Verwendet man eine Autorenumgebung wie Macromedia Director ist es
einfach, verschiedene Medien wie Bild, Ton, Video, Standbild zu integrieren
und eine ansprechende multimediale Präsentation zu erstellen, Verwendet man
ein Tool wie Dreamweaver oder Front Page ist es einfach, ein nett gestaltetes
___________________________________________________________________________
Seite 8 von 84
browserkompatibles HTML-Dokument zu erstellen. Ob man damit auch
Multimedia-Präsentationen erstellen kann, ist fraglich. Will man eine später
noch ausbaufähige und gut wartbare Darstellung, so macht es Sinn eine XMLbasierte Präsentation zu erstellen, damit besteht die Möglichkeit, timelinebasierte multimediale Präsentationen (smil) zu erstellen, allerdings ist die
Entwicklung nicht so komfortabel wie die einfache Entwicklung von HTMLDokumenten. XML ist bisher noch nicht auf allen Browsern darstellbar.
Auswege wären hier eine Konvertierung von XML in HTML oder ein
Dazupacken des nötigen Browsers auf die CD-ROM. Ob das erlaubt ist, muss
noch geklärt werden
Offene Fragen
Welche Art der Präsentation soll gewählt werden? Will man eine
browserkompatible Darstellung, ist unter Umständen eine multimediale
Präsentation nicht in vollem Funktionsumfang, wie bspw. auf der InformatikCD möglich.
Benötigte Software
Dreamweaver 4.0, Flash, Fireworks (alles Produkte von Macromedia), Cool
Edit (Audioschnitttool) Adobe Premiere (Videoschnitttool)
Benötigte Hardware
Scanner, digitale Videokamera, digitales Audio-Aufnahmegerät, Zugang zu
Drucker, CD-Brenner, Netzwerkkarte
(ks) Auf einige der angesprochenen Punkte wird in späteren Teilen noch eingegangen.
Dennoch möchte ich bereits an dieser Stelle kurz auf die Punkte der Produktskizze eingehen,
die in der Produktionsphase noch Änderungen unterworfen wurden.
Den Funktionsumfang konnten wir uneingeschränkt wie in der Produktskizze vorgesehen
realisieren.
Ein bestimmtes Benutzerprofil wurde uns nicht vorgegeben. Das Studium soll offen sein für
alle, die sich dafür interessieren. Einiges Kopfzerbrechen bereitete uns der Punkt „Frauen und
Mikrosystemtechnik“. Vermeiden wollten wir einen Alibipunkt „Frauen und
Mikrosystemtechnik“. Andererseits gibt es einen enorm geringen Frauenanteil unter den
Studierenden der Mikrosystemtechnik (unter 5 %). Die anfangs angedachten Inhalte: “Die
Mikrosystemtechnik ist weiblich“, „das Studium ist sachlich“, „der Beruf ist männlich“,
wurden jedoch mangels Akzeptanz wieder herausgestrichen. Merke: Man kann es nie allen
rechtmachen!
Die von uns intendierte Benutzerführung konnten wir in Teilen der CD, den FlashAnimationen, realisieren. In den anderen Teilen verzichteten wir bewusst auf eine
Benutzerführung, ermöglichten aber unter anderem eine benutzergesteuerte Navigation durch
die Bereitstellung eines Sitemaps.
Die Inhalte konnten wir uneingeschränkt wie in der Produktskizze intendiert realisieren.
Der Zeitplan hat sich aus unterschiedlichen Gründen verschoben. Zum Ersten hatten wir uns
zunächst eine Infrastruktur zu organisieren und uns in viele Programme einzuarbeiten. Zum
Zweiten war viel Zeit nötig, um Material zu besorgen, zu sichten und zu verarbeiten oder
selbst zu erstellen. Zum Dritten wurden nach der Haupttestphase Anfang Juni noch
entscheidende Änderungen erwünscht. Zudem
erkannten wir, dass wir die
Schulabgänger/innen
sowieso
nicht
rechtzeitig
erreichen
würden.
Unser
___________________________________________________________________________
Seite 9 von 84
Entwicklungszeitfenster wurde daraufhin nach der Testphase auf Ende Sommersemester
ausgedehnt. Unseres Erachtens ist das auch ein realistischer Zeitrahmen um ein derartig
umfangreiches Projekt zu entwickeln und erfolgreich abzuschließen. Vier bis Sechs Monate
Entwicklungszeit sollte man einkalkulieren. Bei komplett vorhandenem Material und
Erfahrung genügen auch zwei bis drei Monate.
Entwicklungsumgebung, Software, Hardware, Offene Fragen:
Deutlich wurde bei der Besprechung der Produktskizze, dass eine Kompatibilität mit
gängigen Browsern (Netscape ab Version 4.5 Internet Explorer ab Version 4.75 ) und eine
Basierung auf HTML ein Hauptkriterium bei der Entwicklung darstellen sollte. Es sollte ein
Produkt erstellt werden, das gängigen Standards entspricht und auf möglichst vielen
Plattformen unter möglichst vielen Browsern lauffähig sein.
Aus diesem Grund verzichteten wir auf die Entwicklung mit XML und SMIL, da sich SMILAnimationen immer noch im Versuchsstadium befinden und nur mit wenigen Browsern (z.B.
Opera) abspielen lassen. Für die Verwendung einer Entwicklungsumgebung sprach das
Argument, dass hier zahlreiche Hilfen für Entwickler (z.B. ein WYSIWYG-Modus, ein
automatisierbares Testen auf diversen Browsern etc.) vorgesehen sind, damit die
Entwicklungszeit verkürzt wird und der entwickelte Code robust und mehrbenutzerfähig ist.
Da wir unter den gängigen Browsern dennoch größtmögliche Multimedialität gewährleisten
wollten, entschieden wir uns für die Macromedia-Palette: Flash, Fireworks und
Dreamweaver. Flash deshalb, weil es zum Zeitpunkt der Entwicklung der Standard für
Animationen im Web war und immer noch ist, Dreamweaver, weil selbiger nach
unterschiedlichen Tests den brauchbarsten HTML-Code für die gängigen Browser erzeugt
und wir nur an manchen Stellen in den erzeugten Quellcode korrigierend eingreifen mussten
und Fireworks, weil das Zusammenspiel innerhalb der Macromedia-Palette bei einfachen
Anwendungen (z.B. Bildgrößenänderungen etc.) sehr bequem war.
Daneben kamen Bildbetrachter wie ACDSee und ThumbPlus zum Einsatz, um vorhandene
Bilder in allen möglichen Formaten betrachten zu können. Für die Konvertierung von Bildern
in JPEGS und für aufwändigere Bildbearbeitung kamen wir um Adobe Photoshop nicht
herum. Mit der Entscheidung für Flash konnten wir den Multimediaaspekt für alle gängigen
Plattformen und Browserversionen gewährleisten, die neuesten Browserversionen und das
Flash-Plugin durften wir lizensiert als Produkt auf die CD mit dazupacken.
Für die auf der CD verwendeten Animationen und Töne erstellten wir nach einer
Vorverarbeitung durch Bild- bzw. Soundbearbeitungsprogramme und Konvertierung in gifs,
JPEGS und mp3 (Cool Edit) ausschließlich Flash-Filme. Damit konnten wir uns auf wenige
Formate einigen mit dem Vorteil des immer gleichen Erscheinungsbildes und der
größtmöglichen Multimedia-Performance.
Lediglich bei Videos konnten wir Abspielen und Erscheinungsbild nicht gezielt steuern und
verzichteten auch aus Zeitgründen auf deren Erstellung und Einbindung. Ein digitales AudioAufnahmegerät konnten wir über das Uniradio entleihen. Mit diesem wurden die Interviews
durchgeführt. Andreas wird später noch ausführlicher darüber berichten.
2.4 Wege zur Konzeption
(ks) Nachdem wir die noch offenen Fragen geklärt hatten, sammelten wir die Inhalte für die
CD-ROM und brachten sie in eine Form. Zunächst hatten wir eine sehr flache Baumstruktur
mit nur zwei Ebenen und weiten Verzweigungen. Aus Gründen der Übersichtlichkeit,
Gestaltbarkeit und Benutzerfreundlichkeit, versuchten wir die Inhalte anders einzuordnen: Es
entstand die Konzeption. In Kapitel 2 wird diese ausführlich dargestellt.
Das erste Modell der Konzeption, für die Besprechung mit Prof. Paul erarbeitet, sah,
ursprünglich noch mit teilweise anderen Überschriften bis zur Ebene 2, so aus:
___________________________________________________________________________
Seite 10 von 84
2.4.1
Feinkonzept: Die ersten drei Ebenen
Phase 1 SchülerInneninfo
0. Ebene: Intro
Animation
1. Ebene: Startseite
Die Mikrosystemtechnik ...
BILD:
Das Studium ...
BILD:
Der Beruf ...
BILD:
Freiburg ...
BILD: Münsterturm
und Du ...
Bilderrahmen oder Spiegel
2. Ebene: Einzelseiten
Die Mikrosystemtechnik
... ist innovativ
... ist winzig
... ist wichtig
Topaktuell in Freiburg
(Die Fachbereiche stellen sich vor)
Das Studium
... ist spannend
... ist vielseitig
... ist cool
Studium an der Uni Freiburg
Der Beruf...
... ist Dipl. Ing.
... ist Zukunft
... eine Männerdomäne?
Einblicke in den Berufsalltag
Und du...
... Bist richtig hier!
... Bewirbst Dich
... Informierst Dich
Weitere Orientierungshilfen
Damit hatten wir schon ein akzeptiertes Grundgerüst für die Feinkonzeption, wie sich diese
dann entwickelte, stellt Simon im Abschnitt 3 „Konzeption und Planung“ vor.
___________________________________________________________________________
Seite 11 von 84
3 Konzeption und Planung
(sz) In diesem Teil der Studienarbeit soll es vor allem um die inhaltliche Planung der CDRom gehen. Die Vorgaben sind aus dem vorherigen Kapitel bekannt.
Technische Konzeptionen (wie beispielsweise Benutzerführung) werden aus zweierlei
Gründen unter diesem Punkt nicht weiter berücksichtigt; einerseits, weil unter dem Überpunkt
„Bausteine der CD“ ausgiebig über die technischen Aspekte der CD gesprochen wird,
andererseits, weil durch die Wahl der Hard- und Software Rahmenbedingungen für die
technischen Aspekte der Konzeption vorgegeben werden.
3.1 Von ersten Grundsätzen und einem Problem
(sz) Als erste Anhaltspunkte für eine Gliederung dienten die Informatik-CD der Universität
Freiburg und die Informations-CD der Technischen Universität Hamburg-Harburg (TUHH).
Ein großer Unterschied zwischen beiden CD´s lässt sich auf der ersten Übersichtsseite
feststellen. Die Freiburger CD bietet fünf Auswahlpunkte an, die CD von der TUHH
insgesamt 15, die nicht sofort auf einen Blick erfassbar sind. Deutlich mehr als fünf Links
erfordern ein hohes Maß an Aufnahmebereitschaft seitens des Benutzers. Um diese nicht
übermäßig zu beanspruchen, wurde im Team festgelegt, dass die Linkzahl maximal fünf
betragen dürfe.2
Des weiteren wurde von Seiten des Entwicklungsteams Wert darauf gelegt, dass die
verschiedenen Informationsebenen nicht zu tief geschachtelt werden. Ausschlaggebend
hierfür war die Überlegung, dass sich kein Nutzer in den ‚Tiefen’ des Informationsangebotes
verlieren sollte. Außerdem wird dadurch die Navigation mit einer Navigationsleiste, die in
ihrer Funktionalität der eines Browsers entspricht, vereinfacht. Wird die erste Auswahlebene
als 0. gezählt, kamen wir mit drei bis fünf Unterebenen aus.
Auf Sprünge (also querverweisende Links) von einem Themenkomplex zu einem anderen
wurde gänzlich verzichtet. Auch hierfür war der Wunsch nach einer möglichst einfachen
Benutzerführung ausschlaggebend.
Als größeres Problem stellte sich von Beginn an die Informationsfülle dar. Es war nicht
möglich, sämtliches Material weiterzuverarbeiten. Ein solches Vorgehen hätte unweigerlich
zum Informationsoverkill beim Betrachtenden geführt. Erstes Auswahlkriterium für das
Material war die Frage, ob es für die Zielgruppe3 der CD von Bedeutung.
3.2 Darstellung der inhaltlichen Konzeption
3.2.1
Die Übersichtsseite
(sz) Betrachtet man die Übersichtsseite, so erklären sich die Gliederungspunkte „Das
Studium“ und „Freiburg“ von selbst. Schließlich soll die CD Werbung für den Studiengang
‚Mikrosystemtechnik’ in Freiburg machen.
„Das Studium“ enthält Motivation und Information zum Studium des Faches
Mikrosystemtechnik und zu Einrichtungen an der Universität. „Freiburg“ versucht dem User,
die Lebensqualität der Stadt näher zu bringen. Es ist sicher ein Gewinn, von Beginn an mit
dieser Qualität ausgiebig zu werben.
2
Da dies bei der Vorstellung der Fachbereiche nicht einzuhalten war, wurde hier großer Wert
auf Übersichtlichkeit und schnelle Erfassbarkeit gelegt.
3
Wie oben (Abschnitt 2.2) genannt vor allem SchulabgängerInnen mit Abitur.
___________________________________________________________________________
Seite 12 von 84
Der Punkt die „Die Mikrosystemtechnik“ trägt der Tatsache Rechnung, dass nicht davon
ausgegangen werden kann, dass ein Schüler weiß, was sich hinter dem Begriff
‚Mikrosystemtechnik’ verbirgt. Es war also unumgänglich, dieses mit großer
Wahrscheinlichkeit vorhandene Wissensdefizit auszugleichen. Hinzu kommt, dass dem
Ausgleich eines solchen Defizits eine hohe Priorität zukommt. Schließlich ist es unmöglich
einem Schüler den Studiengang ‚Mikrosystemtechnik’ näher zu bringen, wenn dieser nichts
mit dem Begriff an sich anzufangen weiß.
Unter dem Punkt „Die Mikrosystemtechnik“ verbirgt sich des weiteren, wie
Mikrosystemtechnik an der Universität in Freiburg betrieben wird; d.h. Vorstellung von
Gebäuden und Lehrstühlen samt ihren Inhabern.
Abbildung 1 Übersichtsseite in der ersten Ebene
Die Punkte „und Du“ sowie „Der Beruf“ scheinen auf den ersten Blick ein wenig aus dem
Rahmen zu fallen. Schließlich haben beide zunächst einmal nichts mit dem Studiengang
Mikrosystemtechnik an sich zu tun. Was verbirgt sich also dahinter?
„Der Beruf“ beinhaltet Perspektiven für die Zeit nach dem Studium. Konkret die Fragen: wie
sieht der Abschluss aus? Was für Berufsaussichten ergeben sich bei abgeschlossenem
Studium? Ist das Ganze auch etwas für Frauen? Und schließlich werden noch perspektivisch
die Arbeitsbereiche Universität (Promotion), selbständiger Unternehmer und Angestellter
aufgezeigt.
Die Motivation für diesen Punkt ist, dass für eine Studienwahl wichtig ist, wie das spätere
Berufsbild aussieht. Beim Studiengang Mikrosystemtechnik ist dieses Bild aber nicht so klar
definiert wie beispielsweise bei der Lehrerausbildung. Aus diesem Grund erschien es dem
Team besonders wichtig, Perspektiven nach dem Studium zu eröffnen.
Mit dem Punkt „und Du“ soll der Nutzer direkt angesprochen werden. Der User soll in eine
direkte Beziehung zu den Inhalten der gesamten CD gesetzt werden. Dieser ‚Trick’ soll also
___________________________________________________________________________
Seite 13 von 84
den Nutzer motivieren, selbst tätig zu werden. Entsprechend sind die Inhalte, die sich unter
diesem Punkt verbergen. Weitere Informationsmöglichkeiten, Bewerbungsmodalitäten, und
sonstige Orientierungshilfen (wie z.B. Lagepläne der Fakultäten, Wohnungsmarkt, etc.) sind
diesem Gliederungszweig angehängt.
3.2.2
Die einzelnen Gliederungszweige
(sz) Im Folgenden werde ich kurz auf die einzelnen Gliederungszweige eingehen. Ich werde
kurz erklären, warum etwas an einer bestimmten Stelle auftaucht. Zur besseren
Veranschaulichung kann der Leser die Schemata zu den einzelnen Zweigen betrachten.
Vorweg sei noch ein Grundsatz erwähnt, der auf alle Zweige gleichermaßen zutrifft. Von der
ersten Ebene4 an sind alle fünf Zweige aufgeteilt in drei Unterebenen, überschrieben etwa „...
[ist winzig]“ und eine weitere, die sich in der Art der Überschrift von den anderen drei absetzt
„[z.B. Topaktuell in Freiburg]“. Die Idee hierzu ist, Punkte mit einer Gewichtung an
motivationalen Elementen und eben einen Punkt überwiegend mit Informationen angereichert
zu schaffen. Diese Idee drückt sich sowohl in der Wahl der Inhalte, als auch in den
Überschriften aus.
Natürlich ist und war sich das Team bewusst, dass keine klare Trennlinie zwischen
motivationalen und informativen Elementen zu ziehen ist. Schließlich lassen sich
verschiedene Menschen unterschiedlich motivieren und oft ist Information gleich Motivation.
Trotzdem gibt es Unterschiede. Denn die Information zur Adresse der 15. Fakultät wird sich
weniger motivierend auf die Wahl des Studiengangs Mikrosystemtechnik auswirken als die
Information zu bestimmten Forschungsergebnissen. Entsprechend diesem etwas überspitzt
dargestellten Beispiel wurde das zur Verfügung stehende Material aufgeteilt.
Zugegebenermaßen war das nicht immer einfach.
3.2.2.1 „Die Mikrosystemtechnik“
Wie dem unten abgebildeten Schema zu entnehmen ist, hat der User auf der Übersichtsseite
zum Thema „Die Mikrosystemtechnik“ die Wahl zwischen „... ist winzig“, „... ist wichtig“,
„... ist innovativ“, sowie „Topaktuell in Freiburg“. Hinzu kommt ein Einsatztext, der kurz
beschreibt, was Mikrosystemtechnik ist.
Die drei erstgenannten Punkte beinhalten je einen Text zur in der Überschrift formulierten
Aussage, gefolgt von einer Flashanimation zum Thema. Mit diesen Punkten sollen die User
an die Faszination Mikrosystemtechnik herangeführt werden.
„Topaktuell in Freiburg“ beschreibt nun die Rahmenbedingungen der Mikrosystemtechnik
vor Ort. Weitergeführt wird dieser Punkt durch die Vorstellung der Räumlichkeiten und der
einzelnen Fachbereich. An jeden einzelnen Fachbereiche schließt sich die Vorstellung des
leitenden Professors an (textuell und auditiv in Form eines Interviews).5
4
Zur Erinnerung, die erste Übersichtsseite ist Ebene 0.
5
Das Schema stellt die entsprechende Stelle aus Platzgründen etwas vereinfacht dar.
___________________________________________________________________________
Seite 14 von 84
Abbildung 2 Der Gliederungszweig "Die Mikrosystemtechnik"
3.2.2.2 „Das Studium“
Entsprechend den anderen Übersichtsseiten dieser ersten Ebene stehen zur Thematik „Das
Studium“ dem User folgende Pfade zur Auswahl: „... ist spannend“, „... ist vielseitig“, „... ist
cool ?“ und „Studium an der Uni Freiburg“.
Die drei ‚Ist’-Punkte sollen motivieren. Sie wurden realisiert über ansprechende Texte, bzw.
„... ist cool“ im Stile einer Klangcollage. Das heißt, Interviewausschnitte von Studenten, die
Statements zu ihrem Studium der Mikrosystemtechnik abgeben.
Der Punkt „Studium an der Uni Freiburg“ deckt, soweit das in der gebotenen Kürze möglich
ist, die wesentlichen Punkte ab, die das Studium der Mikrosystemtechnik betreffen:
a) „Die Uni Freiburg“ soll die Universität im gesamten kurz vorstellen. Deshalb auch die
Unterpunkte „Geschichte der Uni Freiburg“ und „Impressionen“ vom Campus.
___________________________________________________________________________
Seite 15 von 84
b) Der Punkt „Universitätsstudium“ wurde aufgenommen, weil Freiburg die einzige
Universität in Deutschland hat, die den Studiengang ‚Mikrosystemtechnik’ anbietet.
Üblicherweise wird diese Ingenieurswissenschaft an Fachhochschulen gelehrt. Auf
diese Besonderheit wird hier eingegangen.
c) Unter „Studieninhalte“ werden die Inhalte des Mikrosystemtechnikstudiums
dargestellt.
d) Im Punkt „Studienverlauf“ wird beispielhaft der Fortgang eines Studiums beschrieben.
e) „Das erste Semester“ ist als Einstiegshilfe gedacht. Da sich das Studium doch
wesentlich von der Schule unterscheidet, soll unter diesem Punkt auf einige dieser
Unterschiede hingewiesen werden, damit der Umstieg nicht so schwer fällt. Die
Unterpunkte „Lernformen“ und „Modellstundenplan“ sollen dies unterstützen.
f) „Überleben an der Uni“ soll einige Seiten des universitären Lebens neben den
Lehrveranstaltungen aufzeigen. Natürlich ist das nur in Ausschnitten möglich. Die
Punkte „Essen und Trinken“, „Fachschaft“, „Hochschulsport“, „Studium Generale“
und „Uniradio“ sind eben diese Ausschnitte.
Abbildung 3 Der Gliederungszweig "Das Studium"
3.2.2.3 „Der Beruf“
Wie oben schon erwähnt, war es in den Augen des Teams wichtig, Perspektiven aufzuzeigen,
die über das Studium hinausgehen. Der Gliederungszweig „Der Beruf“ trägt eben diesem
Anliegen Rechnung.
___________________________________________________________________________
Seite 16 von 84
Der Start ins Berufsleben beginnt mit dem Abschluss als Diplom Ingenieur. Unter dem Punkt
„... ist Dipl. Ing.“ wird etwas näher betrachtet, was ein Diplom Ingenieur ist und wie sich das
Berufsbild im Laufe der Zeit auch geändert hat.
Was sich hinter dem Punkt „... ist Zukunft“ verbirgt, dürfte klar sein. Die ausgesprochen
guten Zukunftsaussichten für Mikrosystemtechniker stellt mit Sicherheit ein Motiv dar, diesen
Studiengang zu ergreifen.
Frauen sind in Ingenieurberufen nach wie vor kaum vertreten. Dieses Problem wird in der CD
unter dem Punkt „... eine Männerdomäne?“ angesprochen. Diese Gender-Perspektive hat
gesellschaftlich nach wie vor eine hohe Relevanz. Entsprechend wurde der Punkt nicht
irgendwo versteckt, sondern ist gleich auf der ersten Ebenen anwählbar.
Die „Einblicke in den Berufsalltag“ können natürlich nicht allzu ausführlich sein. Sie
ermöglichen dem Nutzer aber einen kurzen Ausblick auf das, was mit einem abgeschlossenen
Studium der Mikrosystemtechnik möglich ist.
Abbildung 4 Der Gliederungszweig "Der Beruf"
3.2.2.4 „Freiburg“
Dieser Punkt wurde inhaltlich fast vollständig aus der Informatik CD übernommen.
Allerdings unterscheidet er sich die Gliederung der Inhalte doch deutlich von dieser.
In dem Gliederungszweig „Freiburg“ finden sich nur Informationen und Impressionen die
wirklich die Stadt an sich betreffen. Diese strikte Trennung von den anderen Punkten ergab
sich aus zweierlei Überlegungen.
Einerseits sollte wirklich mit Freiburg geworben werden. Ein Überpunkt mit dem Titel
„Leben“ hätte nicht per se mit Freiburg geworben. Diese Überlegung setzt natürlich voraus,
dass die Stadt einen gewissen Ruf besitzt.
Andererseits sprachen Gründe der Wartbarkeit dafür. Da sich die Adressen von Museen und
Kneipen nicht so schnell ändern wie studientechnische Gegebenheiten, wurde der Punkt
„Freiburg“ inhaltlich von den anderen getrennt. Entsprechend einfach wäre er auch auf die
Werbe-CD eines anderen Studienganges zu übertragen.
___________________________________________________________________________
Seite 17 von 84
Wie das abgebildete Schema verdeutlicht wird unter dem Punkt „Freiburg“ die Stadt selbst,
ihre Geschichte und ihre repräsentativen Seiten in Form eines Bilddurchlaufes („... ist
beeindruckend“) zum Thema gemacht.
Der Unterpunkt „Freiburg-er-leben“ nennt Adressen zu „Theater und Kinos“, „Nightlife“,
„Museen“ und „Cafés und Kneipen“.
Abbildung 5 Der Gliederungszweig "Der Beruf"
3.2.2.5 „Und Du“
Mit diesem Punkt soll eine direkte Beziehung zum User aufgebaut werden. Entsprechend
fordern die Inhalte zum ‚aktiv-werden’ auf. Hier ist unter den weiterführenden Punkten
zusammengefasst, was den User selbst herausfordert.
„... bist richtig hier!“, „... informierst Dich“ und „... bewirbst Dich“ geben als Überschriften
die Inhalte vor. Unter erstgenannter werden dem Betrachter Qualifikationen zugewiesen, die
er für ein Studium der Mikrosystemtechnik mitbringen sollte.
Unter „... informierst Dich“ finden sich Adressen und Links zu weiterführenden
Informationen. Entsprechendes gilt für „... bewirbst Dich“. Hier werden zusätzlich relevante
Termine und Fristen für eine Bewerbung genannt.
Der Punkt „Weitere Orientierungshilfen“ beinhaltet geographische Orientierung und solche,
die den Wohnungsmarkt betreffen.
___________________________________________________________________________
Seite 18 von 84
Abbildung 6 Der Gliederungszweig "Und Du"
3.2.3
Fazit
(sz) Leider ist an der ein oder anderen Stelle eine ausführlichere Erklärung nicht möglich. Das
liegt vor allem an der gebotenen Kürze. Schließlich gebietet der Rahmen einer Studienarbeit,
nicht allzu ausführlich zu argumentieren. Andernfalls würde ihr Rahmen gänzlich gesprengt
werden.
Als ersten Erfahrungswert nahm das Team im Laufe der Arbeit mit, dass man fast nicht genug
Zeit in die Konzeptionsphase investieren kann. Jede kleine Änderung ist im nachhinein sehr
zeitintensiv. Als Beispiel sei angeführt, dass in der ersten Konzeption unter dem Punkt „Das
Studium“ zunächst fünf Unterpunkte der „...ist ...“-Kategorie angedacht waren. Die
Neuaufteilung der Inhalte die durch Streichung zweier Unterpunkte nötig war, die damit
verbundenen Änderungen der Überschriften usw. hat dem Team einiges an Zeit und Nerven
gekostet, was vermeidbar gewesen wäre.
Zur Art der inhaltlichen Konzeption sei noch gesagt, dass vielleicht manch ein Punkt
kritikwürdig ist. Allerdings ist in den Augen des Teams die Aufteilung und das Angebot der
Inhalte ausgereift und der Zielgruppe entsprechend und die Konzeption im Gesamten in sich
schlüssig.
3.3 Zeitplan
(sz) Es soll nun um den zeitlichen Ablauf des Projekts gehen. Ich werde mich in meinen
Ausführungen jedoch kurz fassen und lediglich die größeren Milestones skizzieren.
Die erste Zeitplanung sah vor, von Beginn der Arbeit, dem 01.03.2001, bis zum 01.05. eine
erste funktionstüchtige Betaversion erarbeitet zu haben, ein Puffer von zwei Wochen nicht
mit eingerechnet.6
Schon bald stellte sich heraus, dass diese Planung trotz eines hohen Stundeneinsatzes von
Seiten des Teams vollkommen utopisch war. Viele Inhalte der Informatik CD ließen sich eben
doch nicht so einfach auf die veränderten Vorgaben umsetzen, die Einarbeitung in die
6
Dieser Zeitrahmen schien allen Beteiligten realistisch.
___________________________________________________________________________
Seite 19 von 84
Programme nahm doch mehr Zeit in Anspruch, der Programmieraufwand war höher als
erwartet, eine Browserkompatibilität nur mit hohem Aufwand zu erreichen, etc. pp.
Es kam zu einer Verschiebung nach hinten. Ziel blieb aber, die CD Mitte/Ende Juni
fertiggestellt zu haben, damit die Schulabgänger des Jahres 2001 noch über die Schule
erreicht werden können.
Anfang Juni legte das Team dann eine erste Betaversion vor. Es gab allerdings einige
kritische Anmerkung und auch leichte Änderungen in den Vorgaben kamen hinzu. War bis zu
diesem Test die Zielgruppe als ‚Schulabgänger’ eindeutig festgelegt, so tauchte nun die
Forderung auf, auch an die eventuell am Entscheidungsprozess beteiligten Erwachsenen zu
denken. Das hatte einiges an Änderungen zur Konsequenz.
Letztlich wurde das Ziel, die aktuellen Schulabgänger noch zu erreichen, fallen gelassen.
Ende Juli kam es dann zur zweiten Betaversion, die ihren Testlauf bis auf kleinere
Korrekturen bestand. Mitte August wurde die erste Auflage der CD gepresst; Ende des Jahres
schon die zweite Auflage.
Das Gesamtvolumen der vom Team aufgebrachten Arbeitszeit beträgt ca. 2140 Stunden. Wie
der Zeitplan sich letztendlich darstellte, wird in der folgenden Abbildung noch einmal
veranschaulicht.
Abbildung 7 Zeitraster der tatsächlich benötigten Zeit
___________________________________________________________________________
Seite 20 von 84
4 Vorbereitungen
4.1 Konventionen
(ah) Um bei einem solch großen Projekt mit mehreren Teammitgliedern nicht ein totales
Wirrwarr von Formaten, Schreibweisen und Stilen zu bekommen, ist es sehr wichtig
möglichst vieles vorher festzulegen. Wird dieses, wie leider sehr oft zu beobachten,
vergessen, benötigt man hinterher für derartige Korrekturen sehr viel Zeit, die man in die
Qualität des Produktes hätte stecken können.
Bei Texten gibt es die so genannten Cascading Stylesheets (CSS), oder auch Formatvorlagen
genannt. Mit Ihnen kann man Schriftgrade, Schriftarten, Überschriften und Formatierungen
festlegen. Benutzt jedes Teammitglied diese Möglichkeit, sind schon sehr viele
Inkonsistenzen beseitigt. Allerdings gibt es noch einige andere Dinge die nicht via CSS
gesteuert werden können. In einem Projekt mit viel Texten, tauchen immer wieder Elemente
wie Telefonnummern, ISBN-Nummern, Hyperlinks, Adressen etc. auf. Gerade bei
Telefonnummern gibt es zig Möglichkeiten diese zu formatieren. Hätten wir dies zu Anfang
alles festgelegt, hätten wir später keine Probleme mit Inkonsistenzen gehabt.
Ein eher banal klingendes Problem ist, die männliche und weibliche Schreibweise von
Worten. Früher war es üblich nur die männliche Schreibweise zu verwenden. Neuerdings
sieht man des Öfteren (z.B. Diplomstudienordnung) rein mit weiblicher Schreibweise
verfasste Texte. Auch diese kommt dem Ziel einer gleichberechtigten Darstellung sicher nicht
entgegen. Die Schreibweise StudentIn kam uns auch weniger entgegen. Somit haben wir uns
darauf geeinigt in den sauren Apfel zu beißen und jeweils beide Schreibweisen zu verwenden,
also z.B. „…Studentinnen und Studenten…“.
Ein Problem, welches fast nicht zu lösen ist, ist ein einheitlicher Schreibstil. So stand uns
einiges Material von Professoren zur Verfügung. Insbesondere wollten wir von den
Professoren Lebensläufe und Beschreibungen der Lehrstühle. Da wir hierbei leider nur einen
groben Rahmen was den Umfang betrifft gegeben haben, waren die Ergebnisse sehr
unterschiedlich, was viel Arbeit zur Nachbesserung mit sich brachte.
In einem Multimediaprojekt stecken sehr viele Elemente multimedialer Art. Leider gibt es
aber unzählige Grafik-, Video- und Soundformate. Um hier nicht den Überblick zu verlieren,
muss auch hier eine Konvention verabschiedet werden. Für Bilder kamen die drei im Web
sehr verbreiteten Formate *.jpg, *.gif und *.png zum Einsatz. Das JPeg (*.jpg) Format (Joint
Photographic Expert Group - Dateinamen-Erweiterung für stark komprimierte unbewegte
Bilder) eignet sich hervorragend zum Darstellen von Fotos. Da JPeg z.T. mit sehr starker
Kompression arbeitet, sind Verwaschungen an Kanten zu sehen, weshalb es nicht für die
Darstellung von Konstruktionszeichnungen wie z.B. CAD geeignet ist. Für Fotoaufnahmen ist
es aber sehr gut geeignet, zumal eine nahezu unbegrenzte Farbtiefe und Bildgröße möglich ist.
Beim Gif Format (Graphic Interchange Format - CompuServe-Entwicklung für's Internet)
zeigen sich die bei JPeg geschilderten Verwaschungen nicht, die Bilder wirken insgesamt
schärfer und benötigen auch rel. wenig Platz. Ein sehr großer Vorteil ist die Möglichkeit
transparente Bereiche in einem Bild zu definieren. Auf diese Weise bettet sich das Bild besser
in den Hintergrund der Seite ein. Eine weitere, von uns nur beim Anfangslogo
(„Mikrosystemtechnik“ genutzte Möglichkeit ist das Erstellen von so genannten „animierten
Gifs“. Man kann dabei mehrere Bilder in ein Gif-File einbinden und diese wie einen Film
ablaufen lassen. Der Film wiederholt sich dann automatisch immer wieder. Programme wie
ULEAD Gif-Animator (www.ulead.com) sind zur Erstellung besonders gut geeignet. Bei
unserem Gif sieht es dann so aus, als würde der Schriftzug funkeln. Der leider größte Nachteil
___________________________________________________________________________
Seite 21 von 84
von Gif ist die beschränkte Farbtiefe von 8 Bit bzw. 256 Farben. Eine Darstellung von Fotos
ist damit nur bedingt möglich. Das dritte von uns verwendetet Grafikformat ist das PNG
Grafikformat (Portable Network Graphics). Es kam bei uns vor allem im Programm
Macromedia Fireworks zur Anwendung. Es war damit sehr einfach möglich sehr schöne
Übersichtsseiten in hervorragender Qualität zu erstellen. Da alle aktuellen Browser dieses
etwas weniger verbreitete Format unterstützen, haben wir es ebenfalls genutzt.
Als Multimediaformat kam bei uns das sehr weit verbreitete Macromedia Flash (*.swf)
Format (ShockWave Flash) zum Einsatz. Mit diesem Format kann man die Elemente Sound
und Animation vereinen. Auf das Tool Flash5 wird im Abschnitt 6.6 „Animationen mit
Flash“ genauer eingegangen.
Eine letzte Konvention war der Aufbau der Verzeichnisstruktur. Diese haben wir uns zuvor
sehr genau überlegt, bestimmte Ordner für z.B. Stylesheets angelegt und auch die ganzen
Ordner für die Inhalte. Jede neue Seite sollte in ein eigenes Unterverzeichnis und sollte dort
inhalt.html heißen. Um hier nicht zuviel zur Verzeichnisstruktur vorwegzunehmen, möchten
wir auf den Abschnitt 6.8 „Verzeichnisstruktur“ verweisen
4.2
Infrastruktur
(ah) Ein wichtiger Punkt ist die Schaffung einer angemessenen Infrastruktur, bzw. eines
geeigneten Arbeitsumfeldes.
4.2.1
Raum
(ah) Nach diversen Sitzungen in studentischen Seminarräumen und Laborhinterzimmern,
hatten wir die Möglichkeit das Büro eines scheidenden Gastprofessors zu übernehmen. Es war
nicht sehr groß, bot aber drei Teammitgliedern Platz zur parallelen Arbeit. Da ohnehin immer
mal jemand nicht da war, kam es nicht zu Engpässen..
Abbildung 8 Unser Büro: Katharina (links), Simon (hinten), Markus (vorne), Andreas (nicht sichtbar hinter der
Kamera)
___________________________________________________________________________
Seite 22 von 84
Großzügig mit Schränken und Bürostühlen ausgestattet, konnten alle Materialien gut verstaut
werden. Eine Flip-Chart-Tafel für noch ausstehende Probleme, Diagramme und
Besprechungspunkte wurde uns zur Verfügung gestellt. Wichtig in diesem Raum, war die
vorhandene Netzwerkanbindung. Ein schon vorhandener Apple G4 mit externem CD-Brenner
rundete das Ganze ab
4.2.2
Hardware
(ah) Neben dem schon erwähnten Apple G4 kam insbesondere unsere Hauptarbeitsplatz-PC
und ein etwas kleiner dimensionierter Zweitplatz-PC hinzu. Der Haupt-PC war ein IntelPentium III mit 1 GHz, 512 MB RAM, 40 GB HDD, CD-RW Brenner, DVD-Laufwerk, USB
und Firewire-Schnittstelle. Die Firewire Schnittstelle war für die ebenfalls angeschaffte Sony
Digital-Video Kamera gedacht, die aber letztendlich nicht eingesetzt wurde. Eine akzeptable
Soundkarte nebst Aktivboxen war selbstverständlich. Ein 17“ IIyama TFT-Display an einer
mit TV-Out bestückten Grafikkarte rundeten unseren Hauptarbeitsplatz ab. Der zweite PC
war ein Standard Gerät ohne CD-Brenner. Alle drei vorhandenen Rechner waren an das UniNetz angeschlossen und verfügten somit über Internetzugang und Zugriff auf einen ca. 120
GB großen via RAID (Redundant Array of inexpensive Disks) geschützten Workspace, von
welchem wir Zeitweise 20-30 GB in Gebrauch hatten.
Da ursprünglich auch Videosequenzen von Interviews geplant waren, wurde wie gesagt
zusätzlich eine DV Videokamera von Sony angeschafft. Die Nutzung dieser passte allerdings
erstens nicht in den Zeitrahmen und war zweitens für die geplante Nutzung, nämlich das
Mitschneiden eines Interviews, impraktikabel.
Weiter stand uns eine Digitalkamera von Nikon mit 2.1 Megapixel zur Verfügung. Der
Einfachkeit wegen griffen wir aber auf eine private AGFA ePhoto 1680 und später auf eine
CASIO QV-2800 zurück, da die Nikon Kamera primär im Institut bleiben sollte. Ein Scanner
kam nicht zur Anwendung.
Um digitale Tonaufnahmen möglich zu machen, hat uns das Uni-Radio freundlicherweise
mehrmals einen portablen DAT-Recorder nebst qualitativ hochwertigem Mikrofon zur
Verfügung gestellt. 4 DAT Kassetten zur pausenlosen Aufnahme während der Interviews
haben wir selbst angeschafft.
4.2.3
Software
(ah) Da die Funktionen einiger Programme genauer in den spezifischen Bereichen, wie
„Animationen mit Flash“ erläutert werden, möchten wir an dieser Stelle nur einen
tabellarischen Überblick über die Programme geben.
Hersteller
Macromedia
Macromedia
Macromedia
Name
Flash
Dreamweaver
Fireworks
Ver.
5
4
4
Syntrillium
Ulead
CoolEdit
PhotoImpact
2000
5
ACDSystems
Adobe
Adobe
Ahead Software
ACDSee
Photoshop
Acrobat
Nero Burning
3
5
4
5
Art des Programms
Animationseditor
HTML Entwicklungsumgebung
Grafikprogramm insbesondere
für DHTML Objekte und Seiten
Professioneller Soundeditor
Grafikprogramm zur
Nachbearbeitung
Bildbetrachter
Professionelles Grafiktool
Dokument nach PDF Konverter
CD-Brenner Software für
Bem.
Trial
Trial
___________________________________________________________________________
Seite 23 von 84
Globalscape
Rom
CuteFTP
Multi-Edit
3
8
Adaptec
Toast
4
Mastering
FTP-Client
Editor mit Syntax highlighting für
HTML bzw. JavaScript
Mac Brennersoftware
Trial
Trial
___________________________________________________________________________
Seite 24 von 84
5 Layout
5.1 Vorbemerkung
(ks) Das Layout stellte eine zentrale Weiche für spätere Arbeiten her. Für künftige Projekte
sollte darauf geachtet werden, dass sich für diesen Punkt mindestens zwei Leute
verantwortlich fühlen, und bereits in der Frühphase weichenstellende Entwürfe gemacht
werden. Unter Umständen lohnt es sich durchaus, dafür einen Grafiker zu engagieren, der die
optische Gestaltung übernimmt. Grundlage für das Layout stellt die Konzeption dar.
Unbedingt sollte daran gedacht werden, konsistente Entwürfe für alle Arten von Inhaltsseiten
zu erstellen, dabei sollte die grafische und technische Gestaltung Hand in Hand gehen.
Im Idealfall sollte die Entwicklung eines Layouts der Konzeption unmittelbar folgen.
Wichtig: genug Zeit dafür verwenden und einen Rahmen erstellen, der sowohl zur Darstellung
von Animationen, Text-Bildseiten, reinen Bildseiten und reinen Textseiten geeignet ist.
Bezüglich des Layouts kann es durchaus unterschiedliche „Geschmacks“-Vorstellungen
geben, was auch bei uns der Fall war. Technisch waren wir uns einig, bezüglich der
Darstellung wäre mir persönlich ein Design lieber gewesen, das sich an den Inhaltsseiten
orientiert und weniger sichtbare Balken aufweist. Doch leider kam ich erst so spät mit einem
alternativen Designvorschlag, dass meine Kollegen meinten, es sei zu spät ihn umzusetzen.
Deshalb: es lohnt sich durchaus, viel Zeit in die Erstellung des Layouts zu verwenden, um ein
Ergebnis zu erzielen, mit dem alle Teammitglieder einverstanden sind, diese Zeit war bei uns
jedoch anfangs leider nicht vorhanden.
Technisch war uns wichtig, dass nur wenige unterschiedliche Layouts verwendet werden,
deshalb arbeiteten wir mit Vorlagen. Die graphischen Übersichtsseiten für die in Kapitel 1
genannten Ebenen 1 und 2 könnte man auch zum Layout rechnen, da diese jedoch gleichzeitig
Inhaltsseiten darstellen, findet sich deren Beschreibung im Kapitel „Bausteine der CD“.
Vorlagen wurden erstellt für Inhaltsseiten wie HTML-Texte, Flash-Animationen usw. Was
für Arten von Vorlagen erstellt wurden und wie, ist Gegenstand des folgenden Kapitels, ein
weiterer Abschnitt behandelt die Formatierung der HTML-Texte mit CSS-Stylesheets. (siehe
Abschnitt 5.3 „Cascading Stylesheets“)
5.2 Inhaltsseiten
(mk) Nach mehreren Ideen für das Aussehen unserer Unter-Seiten kamen wir zu folgendem
groben Layout:
___________________________________________________________________________
Seite 25 von 84
Thema
Bereich
logo
Startseite
Zurück Vorwärts
Beenden
Baum
Layout
Abbildung 9 Layout der Inhaltsseiten
Wie man sehen kann ist links ein senkrechter Textbereich, in dem angezeigt wird, in welchem
der fünf Bereiche der CD („Das Studium“, „Der Beruf“, etc.) man sich gerade aufhält. Oben,
im Thema-Bereich, steht etwas genauer, wo innerhalb des Bereiches man sich befindet, und
schließlich rechts oben in der Ecke ist das MST-Logo (Mikro-Zahnrad-Bild) untergebracht.
Unten sind dann die Navigationsmöglichkeiten.
Wie wir zu diesem Layout kamen, wie wir es verfeinert haben, und welche Überlegungen wir
dazu gemacht haben, wird in den folgenden Abschnitten beschrieben:
5.2.1
Technische Überlegungen
(mk) Zu dem Layout mussten bestimmte technisch bedingte Überlegungen gemacht werden:
5.2.1.1 Größe
Es war bald klar, dass die Seiten auf eine fixe Größe von 800 Punkte Breite, und 600 Punkte
Höhe gebracht werden mussten, denn das zentrale Problem ist, das Bilder beim Vergrößern
des Browserfensters nicht mitskalieren, was ein großes Chaos zur Folge hätte. Ein weiterer
Grund diese Größe anzustreben war, dass auch Benutzer mit älteren Monitoren, die nur eine
Auflösung von 800x600 unterstützen, die CD auch betrachten können. Um andere, größere
Auflösungen zu realisieren, hätte man die CD komplett mehrmals erstellen müssen, also für
jede Auflösung einmal. So wurde dies z.B. bei der TU-Hamburg-CD gemacht.
5.2.1.2 Frames verwenden ?
Die nächste Frage war, ob wir Frames verwenden wollen, oder nicht. Auf Grund unseren
angestrebten Layouts (siehe oben), war klar, dass wir nur zwei Frames verwenden. Ein oberes
Frame (main) und ein Navigations-Frame (navigation). Später kam dann für das Abspielen
von Sounds ein unsichtbares Frame (soundframe) dazu. Wie dies dann aussieht, kann man in
dem nachfolgenden Bild erkennen:
___________________________________________________________________________
Seite 26 von 84
fullframe
main
navigation
soundframe
Abbildung 10 Frameaufbau
Da Internet Explorer, im Gegensatz zu Netscape, immer einen Rand einfügt, mussten die drei
Frames in ein weiteres Frame (fullframe) eingefügt werden, welches einen Rand von 0 Pixel
hat.
5.2.1.3 Position innerhalb der CD
Wichtig war auch dass man jederzeit weiß, wo man sich gerade innerhalb der CD aufhält.
Deshalb musste auf jeder Seite untergebracht werden, in welchem der fünf Bereiche („Die
Mikrosystemtechnik“, „Der Beruf“, usw.) man sich befand, und wo innerhalb des Bereichs.
Untergebracht haben wir diese Informationen dann am linken (Bereich) und am oberen Rand
(Thema).
5.2.1.4 Einfache Erstellung der Textseiten
Damit die Textseiten relativ einfach zu erstellen sind, haben wir uns entschieden, dass Text
und Layout getrennt, bzw. unabhängig voneinander sind, d.h. dass der Text in einer separaten
HTML-Datei (rolltext.html) steht, und dann später in das Layout eingebunden wird.
Aus dieser Idee heraus entstand das JavaScript-Programm „rolltext.js“ (siehe Abschnitt 6.10.7
„rolltext.js“). Dieser Rolltext sollte so implementiert werden, dass er auch größer sein kann
als man auf einer Seite darstellen kann, d.h. er sollte Möglichkeiten zum Scrollen des Textes
bieten. Hierbei hielten wir uns an die Informatik-CD, in der es zwei Möglichkeiten zum
Rollen des Textes gibt. Einerseits konnte man sehr schnell rollen, und andererseits in
Lesegeschwindigkeit.
5.2.1.5 Weg vom HTML-Stil
Um das Layout etwas vom „Normalen“ abzuheben, haben wir uns überlegt, dass wir uns in
der Darstellung eher vom HTML-Stil wegbewegen wollen. Also das nicht die unschönen
Rollbalken zu sehen sind, oder keine Browser-bedingten Schaltflächen (wie z.B. Vor- und
Zurück-Buttons) usw. Wie dies technisch realisiert wurde, steht in Abschnitt 6.10.11.2.2
„goto_intro()“.
5.2.1.6 Weitere stilistische Überlegungen
Des weiteren sollten die einzelnen Seiten nicht mehrere Schriftarten haben, sondern
einheitlich aussehen. Außerdem sollten die Seiten in den so genannten MST-Farben
dargestellt werden. Also in schwarz, blau und lila.
___________________________________________________________________________
Seite 27 von 84
5.2.2
Die vier Vorlagen
(mk) Anhand des oberen groben Layouts haben wir dann vier speziellere Vorlagen erstellt.
Alle Inhaltsseiten haben als Grundgerüst eine dieser vier Vorlagen. Die jeweils
unterschiedlichen Bereiche sind mit einer grauen Hinterlegung im Bild markiert:
5.2.2.1
Bild/Text/Links
BereichsGIF
thema
bild
rolltext
links
bild_text_links.dwt
Abbildung 11 Layout „Bild/Text/Links“
Bei dieser Vorlage gibt es ein Rolltext-Fenster, einen Bereich rechts oben für ein Bild, und
rechts unten einen Bereich für Links auf andere Seiten. Die Links gehen hierbei immer eine
Hierarchie-Ebene nach unten in der CD.
5.2.2.2
Nur Rolltext
BereichsGIF
thema
rolltext
nurrolltext.dwt
Abbildung 12 Layout "Nur Rolltext"
Hier gibt es nur einen großen Textbereich. Diese Vorlage wurde immer dann verwendet,
wenn man sich bereits auf der untersten Hierarchie-Ebene der CD befindet, und es keine
Links gibt.
5.2.2.3
Flash zentriert
BereichsGIF
thema
flash
flash_zentriert.dwt
Abbildung 13 Layout "Flash zentriert"
Dieses Layout ist speziell für Seiten gedacht, die nur eine große Flash-Animation beinhalten.
___________________________________________________________________________
Seite 28 von 84
5.2.2.4
Universallayout
BereichsGIF
thema
UNIVERSAL
universal.dwt
Abbildung 14 Universallayout
Schlussendlich gibt es noch ein Universallayout, welches immer dann verwendet wurde, wenn
sich keine Unterseite in eine der oberen 3 Vorlagen unterbringen ließ, oder wenn die Seite
stilistisch besonders hervorgehoben werden sollte, wie dies z.B. bei den Berufs-InterviewSeiten der Fall war.
5.2.3
Dreamweaver 4
(mk) Die gesamte Funktionalität von Dreamweaver zu erklären, würde den Rahmen dieser
Ausarbeitung sprengen, deshalb möchte ich hier nur auf die Erstellung von Vorlagen
eingehen. Vorlagen werden dann benutzt, wenn es mehrere Seiten im gleichen Stil gibt (siehe
die 4 Vorlagen von oben).
5.2.3.1 Vorlagenerstellung
Die Erstellung von Vorlagen mit Dreamweaver ist gleichzusetzen mit der Erstellung einer
einzelnen Seite, wobei man diese Seite dann nicht normal speichert, sondern „Als Vorlage
speichern“ auswählt. Wichtig hierbei ist jedoch, dass man vorher über „Site definieren“ den
Stammordner angibt, in der die komplette spätere Verzeichnisstruktur stehen soll. Denn
Dreamweaver speichert die Vorlagen in diesem Stammordner im Unterordner „Templates“
mit der Endung „.dwt“ ab. Wird der Stammordner später verändert, muss das Verzeichnis
Templates eventuell von Hand in diesen neuen Ordner verschoben werden, um später diese
Vorlage verwenden zu können.
Der Unterschied von einer Vorlage zu einer normalen HTML-Seite ist nun, dass sich
bearbeitbare Bereich festlegen lassen, d.h. es lassen sich die Bereiche festlegen die
unterschiedlich sein dürfen. Um diese Bereich festzulegen, markiert man den entsprechenden
Bereich, und wählt im Menu „Modifizieren/Vorlagen/neuer bearbeitbarer Bereich“ aus. Jetzt
muss man dem Bereich nur noch einen Namen geben, und er ist erstellt.
Technisch gesehen fügt Dreamweaver bei dieser Prozedur Kommentare der folgenden Form
ein:
-
Start des bearbeitbaren Bereiches: 
Ende des bearbeitbaren Bereiches: 
Die Angabe „doctitle“ bei BeginEditable ist dann der Name des bearbeitbaren Bereichs. Da
sich manchmal ein bearbeitbarer Bereich (z.B. kurz vor dem Ende der HTML-Datei) nicht
einfach erstellen lässt, kann man auch direkt diese 2 Kommentare einfügen, ohne das Menu
zu benutzen. Es lässt sich nun auch schon etwas in den bearbeitbaren Bereich einfügen (also
zwischen die Kommentare), nur kann später jemand der eine Seite durch diese Vorlage
erstellt, diesen Text verändern oder wieder entfernen. Ich wollte diese Möglichkeit nur
erwähnen, da es manchmal nützlich sein kann, dass man auf einer Seite bestimmte Dinge
___________________________________________________________________________
Seite 29 von 84
gleich halten will, aber trotzdem die Möglichkeit geben will, es in Spezialfällen zu verändern.
Man muss dabei aber dann nur beachten, dass wenn man diesen Text in der Vorlage
verändert, es sich nicht mehr auf die Seiten auswirkt, die man mit dieser Vorlage erstellt hat!
5.2.3.2 Vorlagenverwendung
Um eine Seite auf der Basis einer Vorlage zu erstellen, muss man im Menu einfach nur „Neu
von Vorlage“ selektieren, und die entsprechende Vorlage anklicken. Nun lassen sich nur die
Bereiche verändern die „bearbeitbar“ sind.
Speichert man die Datei dann schließlich ab, speichert Dreamweaver alles in eine neue,
angegebene HTML-Datei, d.h. sie ist schon komplett fertig, und kann mit dem Browser
betrachtet werden. Das wichtige hierbei ist, dass die Vorlage zum Betrachten nicht mehr
benötigt wird, und könnte dann auch gelöscht werden. Die Vorlage wird also nur für die
Erstellung neuer Seiten gebraucht, und nicht für die Betrachtung!
5.2.3.3 Vorlagenveränderung
Verändert man in einer Vorlage einen bestimmten Teil, so werden ab dem Stammordner
(siehe oben: „Site definieren“) alle HTML-Dateien die durch diese Vorlage erstellt wurden,
angepasst. Dies kann bei sehr vielen Seiten ein Weile dauern.
Bei verteilter Arbeit, also wenn jemand eine HTML-Datei nach Hause nimmt, und ein anderer
die Vorlage, und beide machen Änderungen, kann man später beides trotzdem noch
zusammenfügen, in dem beide ihre Dateien wieder einfügen. Die Vorlage muss hierbei
natürlich wieder ins Templates-Verzeichnis. Um die HTML-Datei die mitgenommen wurde
wieder der Vorlage anzupassen, muss man irgendwo in der Vorlage etwas unwesentliches
verändern, und diese speichern. Anschließend werden alle Dateien gemäß der Vorlage
aktualisiert.
Ich möchte damit sagen, dass Dreamweaver keine Extra-Informationen, wie z.B. welche
Dateien wurden von der Vorlage übernommen, in einer separaten Datei speichert. Alle
Informationen stecken direkt in den HTML-Dateien. So steht z.B. die Vorlage, die Basis für
die HTML-Datei war auch in einem Kommentar der Art:
<html>
…
…
</html>
5.2.3.4
Probleme:
5.2.3.4.1
Transparente bearbeitbare Bereiche
Ein großes Problem steckt darin, bearbeitbare Bereiche so zu gestalten, das sie wahlweise
auch transparent gemacht werden können. Viel schwieriger wird es dann noch, wenn man es
so haben will, dass man sich selber aussuchen kann was von dem bearbeitbaren Bereich
transparent sein soll.
Zu diesem Problem habe ich nur eine Möglichkeit gefunden, und das ist, in einem
bearbeitbaren Bereich eine Tabelle zu platzieren. Da diese schon bearbeitbar ist, lassen sich
beliebig Zellen definieren, und in der Größe verändern. Nun kann man sich fragen, wieso
nicht einen leeren bearbeitbaren Bereich machen, und, nach der Vorlagenverwendung, per
Dreamweaver eine Tabelle darin zu erstellen? Die Antwort darauf ist ganz einfach: Es geht
___________________________________________________________________________
Seite 30 von 84
nicht! Dreamweaver weigert sich strikt in einen bearbeitbaren Bereich eine Tabelle
einzufügen. Ich nehme an, dass das Einfügen einer Tabelle das Programm veranlasst, die
anderen Tabellen die nicht im bearbeitbaren Bereich liegen, zu verändern, was aber nicht
erlaubt ist.
Die einzige Möglichkeit ist es den Tabellen-HTML-Code von Hand einzufügen. Da dies aber
etwas mühsam ist, macht man dies besser in der Vorlage, denn dort funktioniert das
Tabellenerstellen mittels Dreamweaver.
5.2.3.4.2
Tabellen bzw. Zellen
Ein weiteres Problem ist das Selektieren von bestimmten Tabellen oder Zellen, um diese in
der Größe zu verändern. Ständig erwischt man die falsche Zelle. Da Tabellen aber aus einer
schön formatierten Seite nicht wegzudenken sind, muss man alles mit Tabellen machen.
Wenn dann Tabellen noch verschachtelt werden (siehe Problem: transparente bearbeitbare
Bereiche), wird es relativ kompliziert. Ein Veränderung der Größe einer Tabellenzelle direkt
im HTML-Code ist auch problematisch, da man damit eventuell die komplette Tabelle in der
Breite verändert, und somit andere Zellen in der Größe ungewollt verändert. Am besten man
macht die Veränderung in der Werkzeugleiste ganz unten am Rand von Dreamweaver.
Außerdem bringen Bilder, die größer als eine Zelle sind, das ganze Layout durcheinander, da
in diesem Falle die Tabelle nach rechts und unten ausgedehnt wird, was sich dann auch auf
mehrere andere Zellen auswirkt.
Bei leeren Zellen muss darauf geachtet werden, dass die Zeichenfolge „ “ drinsteht, da
es ohne diese Angabe Verschiebungen im Pixel-Bereich gibt.
5.3 Cascading Stylesheets
(ks) Cascading Stylesheets (CSS) sind gut und schön, sie erlauben eine konsistente
Formatierung von Inhaltsseiten, haben aber einen entscheidenden Haken: In unterschiedlichen
Browsern werden sie unterschiedlich dargestellt. Netscape stellt die Cascading Stylesheets nur
sehr eingeschränkt dar.
Dennoch ersparte uns die frühe Entscheidung für CSS sehr viel Ärger,
Formatierungsänderungen konnten damit relativ leicht über alle Dokumente hinweg
vorgenommen werden. Ärgerlich ist, dass Schriftgröße und Hintergrundbild in Netscape und
auf MAC-Plattformen schlicht ignoriert wird. Ausweg: alternativ Hintergrundfarbe und
Zeilenhöhe einstellen, das ermöglicht eine Steuerung des Dokumentes auch in Netscape.
Erstellt, eingefügt und bearbeitet werden die CSS-Stylesheets in Dreamweaver mit dem Icon
in der unteren Menüleiste „Einblenden CSS-Stile“. Das sich nun öffnende Fenster CSS-Stile
zählt alle Stile auf. Werden CSS- Stile neu erstellt, wird gefragt, mit welcher Vorlage die
Stylesheets verknüpft werden sollen. In unseren Texten war die Vorlage immer „rolltext“.
Wichtig. Beim Formatieren mit CSS-Stilen nie den Text markieren, sondern immer irgendwo
an die zu formatierende Stelle hineinklicken, (sonst gibt es eine span-class Formatierung, die
nicht immer das tut, was sie soll)
5.3.1
Textlayout
(ks) Die Binsenweisheiten grafischer Gestaltungsrichtlinien sollten beherzigt werden: Wenig
Schriftarten, wenig unterschiedliche Hervorhebungen. Das war uns anfangs zwar durchaus
bewusst. Im Eifer des Schaffens vergaßen wir es aber wieder. Folge: Nach der ersten
Testphase mussten sämtliche Inhaltsseiten mühsam auf einheitliche Schriften, Stile usw.
___________________________________________________________________________
Seite 31 von 84
umformatiert werden. Besser: Von Anfang an eine konsensfähige Struktur festlegen und sich
daran halten.
Merke: Verwendet man viel Zeit für die Erstellung des Gesamtlayouts, so spart man
hinterher viel Zeit für Korrekturen.
Im Folgenden liste ich alle für die Textformatierung verwendeten CSS-Stylesheets auf. Einige
der aufgeführten Stylesheets sind etwas exotisch und tauchen nur an einer Stelle auf, andere
werden vielfach verwendet. Die häufigsten Formatierungen sind fliesstext, kleineueberschrift,
ueberschrift. Diese Formatierungen tauchen in den Standardseiten auf. Eine komplette
Darstellung der Textseiten und der verwendeten Formatierungen finden sich im Anhang1.
5.3.1.1 Grundeinstelllungen: body-tag
Um Texte grafisch ansprechend darzustellen, wählte ich ein Hintergrundbild, das den
dominierenden Gesamtrahmen etwas auflockern sollte, Eingebunden wurde dieses im bodytag. Nachteil: Netscape stellt das Bild nicht dar, (hängt mit den Vorlagen zusammen), deshalb
wurde im body-tag eine Alternativhintergrundfarbe #E5E5E5 eingestellt.
body { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left:
10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000066;
background-image: url(../images_background/tolltexthintergrund.jpg); backgroundrepeat: repeat; font-style: normal; line-height: 22px; background-color: #E5E5E5;
text-align: justify}
5.3.1.2 Hyperlinks: das a-tag
Bei den Hyperlinks wurde darauf geachtet, dass sie der gleichen font-family entsprechen, Die
Farbe lässt sich beliebig einstellen. Wir wählten die für Hyperlinks gebräuchliche Farbe
„blau“.
a { font-family: Arial, Helvetica, sans-serif; color: #0033FF}
5.3.1.3 Standardtexte
Die gängige Formatierung für die allgemeinen Textseiten ist Blocksatz. Die Schriftfarbe
wurde passend zum Rahmen gewählt und ist bis auf wenige Ausnahmen überall gleich,
ebenso die font-familiy. Variationen betreffen nur die Schriftgröße, sowie die
Formatierungseigenschaften fett oder kursiv (sehr sparsam verwenden, kursiv kam bei
unseren Testern nicht so gut an!).
Die Einstellung: line-height ist ein kleiner Trick. Da, wie bereits erwähnt, die Schriftgrößen
nicht von allen Plattformen und Browsern übernommen werden, stellt die Einstellung dieses
Attributs eine Möglichkeit dar, das Erscheinungsbild dennoch zu kontrollieren. Mit der
Einstellung „line-height: 24 px“ werden die Zeilen auseinandergezogen, die Schrift wirkt
damit optisch größer.
.fliesstext {font family: Arial, Helvetica, Sans Serif; font-size: 14 px; text-align:
justify; color: #000066; line-height: 24 px }
Eine auf Blocksatz verzichtende Formatierung wurde für Listings innerhalb von Texten, für
Adressen und tabellarische Lebensläufe verwendet.
.fliesstextohneblocksatz
{font family: Arial, Helvetica, Sans Serif; font-size: 14 px; color: #000066; lineheight: 24 px ; text-align: left }
Die Standardschrift für Hervorhebungen in Texten und, wie der Name schon sagt, kleine
Überschriften, der einzige Unterschied zur sonstigen Schriftformatierung ist die Option fett.
___________________________________________________________________________
Seite 32 von 84
.kleineueberschrift
{font family: Arial, Helvetica, Sans Serif; font-size: 14 px; font-weight: bold; color:
#000066; line-height: 22 px }
Die große Überschrift wurde für Hauptüberschriften verwendet, z.B. für Namensüberschriften
der Professoren in den Lebensläufen. In den Standardtexten wurde sie nur sparsam verwendet,
um zu häufige Schriftartwechsel zu vermeiden.
.ueberschrift { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight:
bold; color: #000066; cursor: hand; font-style: normal; line-height: 24px}
5.3.1.3.1
Adressen
Innerhalb von Textdokumenten angeführte Adressen wurden mit zwei Formatierungen
versehen. Die schon oben erwähnte Formatierung „fliesstextohneblocksatz“ für die Anrede
und Strasse.
.fliesstextohneblocksatz
{font family: Arial, Helvetica, Sans Serif; font-size: 14 px; color: #000066; lineheight: 24 px ; text-align: left }
Innerhalb von mehrspaltigen Tabellen auftauchende Adressen wurden anders formatiert, (
Beispielseite „Und Du ... Informierst Dich) nämlich mit
.textintabelle { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:
#000066; line-height: 24px; text-align: left ; margin-right: 10px}
Ort und Postleitzahl sollte bei allen Adressen gleich formatiert sein, wir entschieden uns für
die “unterstrichen“-Variante. Diese Formatierung wurde nur für die Postleitzahlen (auch
innerhalb von Tabellen) verwendet.
.unterstrichenblau { font-family: Arial, Helvetica, sans-serif; font-size: 14px; fontstyle: normal; color: #000066; text-decoration: underline ; line-height: 24px}
5.3.1.3.2
Spezielle Formatierungen:
Manchmal lässt es sich auch nicht vermeiden, spezielle Formatierungen zu verwenden. So
taucht im Text „Das erwartet dich im ersten Semester“ eine Ausnahmeformatierung auf, die
nur in diesem Dokument verwendet wird, es handelt sich um ein Zitat, das im Original kursiv
fett formatiert war und deshalb so übernommen wurde .
.kursivfett {font family: Arial, Helvetica, Sans Serif; font-size: 14 px; font-style:
italic; color: #000066; font-weight: bold; line-height: 24 px}
5.3.1.4 Spezielle Dokumente mit Tabellen
Wichtig: Bei Tabellen muss entweder der linke oder der rechte Rand oder beide Ränder
eingestellt sein, sonst kleben die Zeilen zu sehr am Rand. (Eine andere Möglichkeit stellt die
„div align= „center“ Einstellung dar, wie im Dokument Studieninhalte verwendet).
5.3.1.4.1
Dokument Studieninhalte
Achtung: Die Bezeichnung „fliesstexthervorhebung“ ist irreführend, kommt daher, dass die
Formatierung anfangs in Standardtexten häufig verwendet wurde, verwendet wurde die
kursive Schrift für die erste Spalte und die Überschriften.
.fliesstexthervorhebung {font family: Arial, Helvetica, Sans Serif; font-size: 14 px;
font-weight: bold; font-style: italic; color: #000066; line-height: 24 px }
(Das ist eben jene „kursiv“- Formatierung, die bemängelt wurde und aus diesem Grund nur
noch an dieser Stelle auftaucht. D.h. die hier vorgestellte Formatierung ist eher eine
Ausnahmeformatierung).
5.3.1.4.2
Modellstundenplan
___________________________________________________________________________
Seite 33 von 84
Um den Text zentriert darzustellen, wurde in diesem Dokument mit der div-Marke gearbeitet.
<div align="center" class="verwendete Formatierung">
Verwendete Schriftarten sind:
weiße Schrift für dunklen Hintergrund, in der ersten Zeile verwendet,
Achtung: d.i. eine spezielle Formatierung mit vielleicht irreführender Bezeichnung,
verwendet wurde sie in Tabellen und Stundenplan mit dunklem Hintergrund (Beispielseiten:
„Modellstundenplan“ und Adresstabellen in „Und Du ...Informierst Dich“).
.fliesstexthervorhebungnichkursiv
{font family: Arial, Helvetica, Sans Serif; font-size: 14 px; font-weight: bold; fontstyle: normal; color: #FFFFFF; line-height: 24 px }
kleine Schrift: schwarz, die eigentlichen Zelleninhalte:
.zelleninhalte { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:
#000000}
kleine Schrift, fett, in der ersten Spalte verwendet:
randbeschriftung
{font family: Arial, Helvetica, Sans Serif; font-size: 12 px; font-weight: bold}
5.3.1.4.3
Und du... Bist richtig hier
Hier war eine spezielle Formatierung nötig um die langen fetten Überschriften, die sich zum
Teil über zwei Zeilen erstrecken in einer Tabelle mit farbigem Hintergrund auf
unterschiedlichsten Browsern noch annehmbar darzustellen, d.h. der linke und rechte Rand
musste eingestellt sein
Überschriften:
.tabellenueberschrift {font family: Arial, Helvetica, Sans Serif; font-size: 14 px; fontweight: bold; margin-left: 20 px; margin-right: 10 px}
Für die Zeilen darunter, eine Tabelle mit zwei Spalten, konnte die Formatierung „fliesstext“
beibehalten werden, weil der Tabellenhintergrund transparent war und für das Bild in der
ersten Spalte (ein Ausrufezeichen) ein ausreichend großer Rand eingestellt war.
5.3.1.4.4
Und Du ... Informierst Dich
Auf dieser Seite gibt es eine Tabelle mit drei Spalten und farbigem Hintergrund, in der die
wichtigsten Adressen an der Fakultät aufgeführt sind
Verwendet wurden für die weißen Überschriften auf dunkelblauem Hintergrund die bereits
bekannte Formatierung:
.fliesstexthervorhebungnichkursiv
{font family: Arial, Helvetica, Sans Serif; font-size: 14 px; font-weight: bold; fontstyle: normal; color: #FFFFFF; line-height: 24 px }
Bei den Adressen musste darauf geachtet werden, dass sie nicht zu sehr aneinander kleben,
deshalb eine Formatierung mit rechtem Rand.
.textintabelle { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:
#000066; line-height: 24px; text-align: left ; margin-right: 10px}
___________________________________________________________________________
Seite 34 von 84
6 Bausteine der CD
6.1 Vorbemerkung
(ks) Nachdem wir uns auf eine Konzeption geeinigt hatten und einen Prioritätsplan erstellt
hatten, starteten wir die Phase der Materialbeschaffung. Für die Animationen waren wir auf
der Suche nach Bildern, die den Gegenstand Mikrosystemtechnik beleuchteten, Sounds
mussten ausgesucht und erstellt werden. Für die Darstellung der Unis mussten Fotos
angefertigt werden, Texte und Hintergrundmaterial mussten angefordert und erstellt werden
und vorhandene Fotos gesichtet und archiviert werden. Wie diese Schritte aussahen, wie wir
Material suchten, fanden und einbetteten, ist Gegenstand dieses Kapitels.
Wichtige weitere Bestandteile der CD stellen die Programmierung mit Javascript und die
Gestaltung von grafischen Übersichtsseiten dar. Obwohl das eine eher zum Bereich Technik
gehört und das andere eher zum Bereich Layout, haben wir uns entschlossen, es diesem
Kapitel zuzuordnen.
6.2 Texte
(ks) Was den Textumfang betrifft, so gab es nach der ersten Testphase einige wesentliche
Änderungen. Gewünscht wurde „mehr Information“ und so wurde der Umfang der Textseiten
auf das Dreifache des ursprünglich geplanten Textumfangs ausgedehnt. Auch das war eine
wichtige Erfahrung innerhalb einer Produktionsphase: Die Interessen des Auftraggebers
können sich ändern.
Unser ursprüngliches Ziel: nur kurze Texte zu verwenden, mussten wir damit zwangsläufig
aufgeben.
Um die Texte zu erstellen waren unterschiedlichste Schritte nötig:
Fachbereiche. Hier forderten wir von sämtlichen Lehrstuhlinhabern Texte an, die den
Lehrstuhl in einer für Schüler/innen verständlichen Form darstellten, sowie kurze
Lebensläufe. Dass die Vorstellungen darüber, was für Schüler/innen verständlich ist, sehr
divergieren, dürfte jedem auffallen, der die Lehrstuhlbeschreibungen und die Lebensläufe
liest. Obwohl wir die Texte überarbeiteten, merkt man deutlich, dass sie nicht aus einem Guss
stammen.
Merke: Will man einheitlichere Darstellungen, so ist es am sinnvollsten Beispieltexte
vorzulegen oder einen Standardtext vorzugeben, der von den Betreffenden leicht
abgewandelt werden kann. Wir entschlossen uns aber, die Vielfalt hier stehen zu lassen.
Die Texte zum Bereich „Freiburg“ extrahierten wir aus der Informatik-CD, die Texte zu den
Themenbereichen „Die Mikrosystemtechnik“, „Der Beruf“, „Und du“ entstanden in enger
Kooperation mit Prof. Paul und zweien von uns.
Vorlagen zu den Texten stammten aus Internetrecherchen und aus Broschüren und
Informationstexten, die ich besorgt oder angefordert hatte (z.B. Texte zum Berufsbild, Studien
zur Arbeitsmarktsituation etc.). Weitere Vorlagen bestanden aus Texten, die wir oder Prof.
Paul selbst erstellten.
Merke: Textarbeit ist sehr zeitintensiv: Texte müssen IMMER mehrmals überarbeitet
werden, Wichtig ist, dass sich dafür zwei bis drei Leute verantwortlich fühlen, was bei uns
auch der Fall war und sehr gut geklappt hat.
Im Hinblick auf das Textlayout (vgl. Abschnitt Kapitel 5.3.1 „Textlayout“) macht es
bestimmt Sinn, sich schon im Voraus über Verwendung und Formatierung unterschiedlicher
___________________________________________________________________________
Seite 35 von 84
Textarten Gedanken zu machen. Als unterschiedliche Textarten tauchten bei uns Adressen
und Telefonnummern auf, die wir leider erst im Nachhinein einheitlich formatierten.
Tabellen wie Stundenpläne oder Adresstabellen sollten ebenso ein einheitliches Format
aufweisen. Bei Lebensläufen kann man sich schon im Voraus Gedanken darüber machen, ob
man sie tabellarisch oder in Prosaform anfordert etc.
Die allgemeinen Informationstexte sollten einheitlich formatiert werden. Wir verwendeten
zwei Arten von Überschriften und eine einheitliche Formatierung für den Textkörper.
(Blocksatz). Sobald aber Tabellen auftauchen, muss eine Formatierungsmöglichkeit ohne
Blocksatz aber sonst in der gleichen Schriftart gewählt werden. Ist der Tabellenhintergrund
farbig, müssen linker und rechter Rand eingestellt werden.
Frühzeitig sollte auch über immer wieder auftauchende Bezeichnungen nachgedacht werden.
Wichtig ist, dass diese einheitlich erfolgen. Wir hatten leider anfangs nicht darauf geachtet
und mussten sehr viel Zeit aufwenden, um Adressen, männlich/weibliche Schreibweisen,
Bezeichnungen wie 15. Fakultät oder Fakultät für Angewandte Wissenschaften im
Nachhinein zu vereinheitlichen. (vgl. Abschnitt 4.1 Konventionen)
6.3 Bilder
(ah) Multimedia braucht Bilder, und Bilder faszinieren den Betrachter. Deshalb war es für uns
sehr wichtig den Nutzern der CD nicht nur mittels spannender Texte die Mikrosystemtechnik
in Freiburg näher zu bringen, sondern vor allem durch schöne, manchmal auch skurrile Bilder
zu überzeugen. Wir konnten hier auf einen riesigen Fundus bereits vorhandener Materialien
zurückgreifen. Für den bereich „Freiburg“ und „Das Studium“ standen uns viele Bilder von
der bereits gefertigten „INFOrmatik CD“ zur Verfügung. Für packendes aus der
Mikrosystemtechnik konnten wir ebenfalls auf viele Materialien insbesondere von Herrn Prof.
Menz zurückgreifen, der von seiner früheren Tätigkeit bei BOSCH wahre Schätze hatte.
Schnell stellten wir jedoch fest, dass zuviel Material sehr schwer zu verwalten war, deshalb
galt es die Bilder zu sichten und Brauchbare gesondert zu sortieren. Hierbei konnte das
Programm ACDSee seine Stärke zeigen.
Die Hauptfunktion von ACDSee ist es, viele Bildformate schnell anzeigen zu können, vor
allem das häufig genutzte JPeg Format kann mit ACDSee sehr schnell angesehen werden,
dabei lädt das Programm schon das nächste anzuzeigende Bild vor, während man noch am
Betrachten des aktuellen ist. Ein flüssiges durchsehen von Bilderdatenbanken ist somit (fast)
ohne Wartezeit möglich. Einige Features von ACDSee sind noch: Aus- bzw. Einzoomen auf
die aktuelle Bildschirmgröße zur optimalen Betrachtung, schnelles vergrößern und
verkleinern via „+“ und „-“, schnelles verschieben und kopieren von Bildern in z.B. BildAuswahlordner und das Rotieren von Bildern, was bei Hochkant-Digitalaufnahmen ständig
gebraucht wird.
Nachdem die vielen vorhandenen Bilder gesichtet waren, zeigte sich welche Aufnahmen
noch fehlten. Da die Bilder schon ein paar Jahre alt waren, gab es von den neuen
Fakultätsgebäuden noch keine aktuellen Bilder, aber auch Innenaufnahmen von Poolraum und
der neu gestalteten Mensa in den alten Gebäuden waren notwendig. Bilder einer Vorlesung,
Übungsgruppe und eines lernenden Teams durften auch nicht fehlen. Das ein oder andere Bild
was im Verlauf der Arbeit noch in den Sinn kam wurde auch abgelichtet. Bei den später im
Teil „Ton“ noch genauer erläuterten Interviews wurden von jedem Interviewpartner Bilder
gemacht. Gerade Portraitaufnahmen sind hier eine besondere Herausforderung an den
Fotografen, muss man doch mindestens 10 Bilder einer Person machen um ein gutes Bild zu
erhalten. Vor allem für gestresste Professoren ein sehr schwieriger Part. Als Fotoausrüstung
kam hier überwiegend die bereits erwähnte AGFA ePhoto 1680 Digitalkamera zum Einsatz.
___________________________________________________________________________
Seite 36 von 84
Obwohl nur mit 1 Megapixel ausgestattet, machte diese Kamera für unsere Zwecke sehr gute
Bilder, die sowieso mittels Bildbearbeitung noch deutlich weiter heruntergerechnet wurden.
Als Letztes kamen noch einige Screenshots für die Hilfeseiten zum Einsatz, die man ganz
einfach durch Drücken der „Druck“ Taste in die Zwischenablage kopieren kann. Danach kann
man diesen einfach in z.B. PhotoImpact einfügen um ihn zuzuschneiden und
weiterzuverarbeiten.
PhotoImpact ist ein semiprofessionelles Grafikbearbeitungsprogramm mit sehr vielen
Möglichkeiten Bilder zu verändern aus dem Hause ULead. Besonders die Funktionen
„Helligkeit und Kontrast“, „Zuschneiden“, „Größe ändern“ und „schärfen“ sind wichtige
Basishilfsmittel, die bei uns auch hauptsächlich zur Anwendung kamen. Natürlich kann das
Programm noch sehr viel mehr, darunter verschieden Effekte, wie „verzerren“, „Mosaik“ oder
„rote Augen entfernen“ um nur einen Bruchteil zu nennen. Zur einfachen und schnellen
Bildbearbeitung ist dies eines der besten Tools die es gibt. Das später noch angesprochene
Adobe Photoshop kann zwar all diese Funktionen auch, ist aber für einfache
Bildbearbeitungszwecke total oversized.
6.4 Ton
6.4.1
Vorbemerkung
(ks) Ton taucht auf der CD in vier Varianten auf, als Interviews, als Hintergrundsound, als
Effektsound beim Anklicken der Rolltextleiste und als Hintergrundsound für die
Animationen. Um das Erscheinungsbild der Sounds einheitlich zu gestalten, verwendeten wir
für sämtliche Sounds ausschließlich Flash-Filme.
In diesem Kapitel geht es um die Erstellung der Töne, die Verarbeitung von Sounds mit Cool
Edit und die Erstellung von Sounds als Flash-Filme, die Einbindung von Sounds in
Animationen und die Umgebung wird in den
Kapiteln
„Animationen“ bzw.
„Programmierung“ beschrieben.
6.4.2
Musik
(ks) Anfängliche Überlegungen waren auch hier, dass der Ton aus einem Guss stammen solle
und die von uns intendierte Übertragung der Inhalte stützen sollte, also motivieren, Inhalte
akustisch untermalen solle etc. Aus Zeitgründen beschlossen wir einen professionellen
Musiker heranzuziehen, der uns eine akustische Grundstruktur erstellen sollte, mit der wir
dann arbeiten können.
Das einzige Problem dabei war folgendes. Im allgemeinen empfiehlt es sich, den Ton erst zu
erstellen und einzubinden, wenn die Inhalte fertig sind, das war jedoch aus zweierlei Gründen
nicht möglich.
Erstens war unser Musiker (Michael Summ vom Acoustic Media Studio in Freiburg) zu dem
Zeitpunkt, zu dem die ursprüngliche Endphase geplant war, auf einem längeren Arbeitseinsatz
im Ausland, zweitens sollten Animationen, die wir soundgestützt untermalen wollten,
Hauptinhalt unseres ersten Prototyps sein.
Zu dem Zeitpunkt, an dem der Musiker Zeit hatte, war jedoch noch keine Animation fertig.
Was tun:
Ich erstellte einen Intro-Prototyp, erstellte ein WEB-Photoalbum mit sämtlichen Bildern, die
wir von den Lehrstühlen und Firmen bekommen hatten und erstellte einen Text für das Intro.
Meine Kollegen und Prof. Paul fragte ich, was für eine Art von Musik sie sich vorstellen
___________________________________________________________________________
Seite 37 von 84
würden. Heraus kamen Attribute, wie jung, modern, metallisch, irgendwas, was die
„Winzigkeit“ illustriert etc.
Mit diesen Vorgaben und Materialien ausgestattet, verbrachte ich einen Tag im Tonstudio.
Dort nahmen wir die Intro-Sprachaufnahme auf, suchten beispielhafte Sounds und entwarfen
schließlich gemeinsam eine Melodie für das Intro.
Den fertigen Sound legte ich hinter den Intro-Prototyp und stellte beides meinen Kollegen
vor. Der Sound wurde einstimmig angenommen und ich durfte noch mal für einen halben
Tag ins Studio um Fragmente zu erstellen, die ich als Basis für die Animationen und für die
unterschiedlichen Bereiche verwenden konnte.
Insgesamt hatte ich so ca. 10 Minuten Musik und Soundschnipsel, Kostenpunkt 1000,-- DM
(darin enthalten ca. 10 Studiostunden)
Die Musik für das Intro war fertig, die Soundschnipsel passte ich an die Animationen an und
schnitt einzelne Fragmente neu zusammen mit dem Audiotool „Cool Edit“.
Achtung: Cool Edit kann zwar als swf-files gespeicherte Audios öffnen und man kann sie
auch schneiden aber danach funktionieren sie unter den Flash-Animationen nicht mehr!!!
Deshalb empfiehlt es sich die untenstehende Reihenfolge einzuhalten:
6.4.3
„Kochrezept“ für Sounds als Flash-Filme
Vorverarbeitung im Audiotool, (Hier: Schneiden in Cool Edit )
(ks) Abspeichern des fertig geschnittenen Soundfragments als mp3 und zur Sicherheit auch
noch mal als „wav“ (um spätere Änderungen zu erleichtern)
Verarbeitung in Flash
Neuen Flash Film erstellen:
Importieren: das mit Cool Edit erstellte mp3-file
Anwählen der Bibliothek
das in der Bibliothek dargestellte mp3-file auf die „Bühne ziehen“
Film exportieren als *.swf
ACHTUNG: Export-Einstellungen überprüfen!
Für eine CD-ROM und für die vergleichsweise kurzen Animationen wie unter „ist winzig“,
„ist wichtig“ etc. wählten wir die Export-Einstellungen: raw (weil die raw-datei ja schon als
mp3 gespeichert war), 44 khz, Stereo (das entspricht CD-Qualität),
Merke: diese Einstellung durften wir nur auswählen, weil klar war, dass wir das Medium als
CD-ROM abliefern sollten. Im Internet hätte man ein tradeoff zwischen Soundqualität und
Übertragungsrate zu berücksichtigen.
Wichtig, den Film *.fla unbedingt speichern! Sonst kommt es nochmals zu massiven
Qualitätsverlusten beim Abspielen der swf-Dateien.
Einbinden des Sounds in Animationen
Wie der fertig erstellte Soundfilm dann in Flashanimationen eingebunden wird, berichtet
Simon im Kapitel „Animationen mit Flash“ (Achtung, auch hier müssen die
Exporteigenschaften wieder richtig eingestellt werden und die *.fla Datei unbedingt
gespeichert werden)
Einbinden der Sounds in die Umgebung
___________________________________________________________________________
Seite 38 von 84
Wie die fertigen swf-Files (entweder Hintergrundsounds, Interviews, Effektsounds oder
Animationen mit eingebundenem Sound) dann in die Umgebung eingebunden werden,
berichtet Markus im Kapitel (Soundkontrolle)
Merke: „Manche seltsamen Dinge versteht man nie zur Gänze, man stellt nur staunend fest!“
So ging es mir hier mit den Programmen Flash und Cool Edit, die nicht immer ganz das tun,
was sie sollen oder vorgeben zu tun. Manche Bugs in den Programmen sind etwas nervig,
vielleicht sind die ja behoben, wenn sich evt. Nachfolger an die Arbeit machen, aber besser,
Ihr seid auf alles vorbereitet!
Merke: (gilt nicht nur für Ton- sondern auch für Photodateien.)
Wenn man Bild- oder Tondateien verlustbehaftet abspeichert (also als JPEGS und mp3’s) gibt
es manchmal einen ziemlichen Qualitätsverlust, je nachdem, womit man das tut. So führt das
Abspeichern von Sounds als mp3’s unter Flash mitunter zu einem gravierenden
Qualitätsverlust, egal welche Qualität man dabei einstellt. (Bei Bilddateien gilt das z.B. für
das Konvertieren in JPEGS in ACDSee)
Das Bearbeiten von Sounds (Schneiden) sollte, wenn möglich, im Ursprungsformat erfolgen,
sonst gibt es nochmals einen Qualitätsverlust.
Um ein Ruckeln innerhalb der Animationen zu vermeiden und einen gleichmäßiges Abspielen
der Musik zu ermöglichen wurden die Sound als separater Flash-Film gespeichert und als
solcher in die Flash-Animationen eingebunden.
Da wir das Produkt als CD-ROM anbieten sollten, mussten wir keine
Qualitätseinschränkungen bei der Musik hinnehmen, beim Intro gab es allerdings Probleme,
wegen der doch sehr großen Datenmenge des Bild- und des Soundfiles.
Sehr ärgerlich war, dass die Animationen sehr häufig überarbeitet werden mussten, weil mehr
Text gewünscht wurde, die Länge ein paar Mal verändert wurde und auch die Anzahl der
Bilder sich verändert hatte.
Merke:
Es erspart sehr viel Stress und Mehrfacharbeit, wenn der Sound wirklich erst ganz am Schluss
erstellt wird.
Persönlicher Kommentar: Dennoch war die Tonarbeit die Arbeit, die mir am meisten Spaß
gemacht hat. Das lag bestimmt auch daran, dass wir einen Profi heranziehen durften. Mit ihm
gemeinsam das Sounddesign zu entwerfen, dann alleine die Einzelteile zu schneiden und sie
an die Inhalte der CD einzupassen, war eines meiner persönlichen Highlights bei der
Produktion der CD-ROM.
6.5 Interviews und Schnitt mit Cool Edit
(ah) Multimedia versteht den Einsatz verschiedener Medienformate, so auch Sound, Klang
und Musik. In auditiver Form bekommt man auf der CD Hintergrundmusik und Klangeffekte
bei jedem Bereich zu hören. Um dem Benutzer etwas Persönliches des Institut für
Mikrosystemtechnik entgegen zu bringen haben wir verschiedenste Personen zum Thema
Mikrosystemtechnik interviewt. Mit den Professoren haben wir den Anfang gemacht, dann
einige Studenten zu ihrem (bisherigen) Studium befragt und letztendlich haben wir 2 Vertreter
der Industrie herausgegriffen, die dem Interessenten einiges über Selbständigkeit und Arbeit
in einer großen MST-Nahen Firma berichteten. Auch die Möglichkeit einer Promotion nach
dem Diplomstudium haben wir von einem Uni-Vertreter erörtern lassen. Als erstes möchten
wir jedoch über die Interviews mit den Professoren berichten.
___________________________________________________________________________
Seite 39 von 84
6.5.1
Interviews mit Professoren
(ah) Ausgerechnet der Umgang mit „Hochgebildeten“ Professoren stellte uns vor große
Herausforderungen. Durch einige Vorwarnung von anderen, haben wir uns auf diese
Schwierigkeit mit einem genauen Ablaufplan, welcher an die Professoren einige Tage vor
dem Interview verteilt wurde, vorbereitet. Es ist unbedingt erforderlich dem Interviewpartner
genaue Instruktionen zu geben um gute Ergebnisse zu erhalten:
1
Selbstdarstellung der Lehrstuhlinhaber
Hier erst einmal ein paar Facts:
•
•
•
•
•
•
•
Die Selbstdarstellung wird mit einem digitalen Tonaufnahmegerät aufgezeichnet.
Die Aufnahme wird in Ihrem Büro stattfinden.
Der Termin dauert ungefähr 30 Minuten.
Die Selbstdarstellung wird später von Schülern angehört und soll deshalb in einfachem, verständlichem Deutsch abgefasst sein.
Die Selbstdarstellung soll eine gesprochene Länge von 60 Sekunden (höchstens 90 Sekunden) betragen.
Bei diesem Termin werden von Ihnen einige Fotos in Ihrer „gewohnten Atmosphäre“ geschossen.
Die gesammelten Daten werden in der „SchülerInnen-Info CD MST“ verwendet und somit einer breiten Öffentlichkeit zugänglich gemacht.
Einige Leitfragen welche in der Selbstdarstellung enthalten sein sollen:
1.
2.
3.
4.
5.
6.
7.
8.
Wie ist Ihr Name und Titel ?
In welchem Jahr sind Sie geboren ?
Wie ist Ihr Heimatort aus dem sie (ursprünglich) kommen ?
Wie haben Sie zur Mikrosystemtechnik gefunden ?
Wie sind sie zur MST in Freiburg gekommen ?
Wie heißt Ihr Fachbereich (Lehrstuhl) ?
Womit beschäftigt sich Ihr Fachbereich ?
Welches sind Ihre besonderen Forschungsinteressen ?
Bitte legen sie sich für den Aufnahmetermin einen vorbereiteten Text zurecht.
Dieser Text könnte so, oder so ähnlich, aussehen:
Mein Name ist Prof. Dr. <Vorname, Name>. Ich bin im Jahr 19xx geboren und komme ursprünglich aus <Heimatort>. Zur MST bin ich gekommen weil
<2-3 Sätze, siehe *>. Der Grund warum ich gerade nach Freiburg gekommen bin, war <2 Sätze>. Ich bin hier der Leiter des Fachbereiches <Name
des Lehrstuhls>. Wir beschäftigen uns hier mit <3 Sätze>. Mein/Unser besonderes Forschungsinteresse ist <1-2 Sätze>.
Zu *: hier wollen wir keinen akademischen Werdegang von Ihnen hören, da dieser bereits im (tabellarischen) Lebenslauf enthalten sein soll. Vielmehr möchten wir hier eine
persönliche Motivation von Ihnen hören wie sie schon als Kind in die Richtung MST tendiert haben, also z.B. als Kind schon viel mit dem Physikexperimentierkasten gebastelt;
Vater war selber Ingenieur in einem technischen Beruf; In der Schule besonderes Interesse an Naturwissenschaften und Technik etc.
Das Ganze sollten Sie immer vor dem Hintergrund betrachten, dass eine breite Schülermenge diese Interviews anhört und daraufhin eine Motivation sucht MST zu studieren.
Anhand dieser Auflistung, sieht man nun wie genau wir den Ablauf erklärt hatten. In den
Facts haben wir die wesentlichen Punkte beschrieben die das Interview und das zugehörige
Projekt betreffen. Interview ist eigentlich nicht das richtige Wort, da es sich vielmehr um eine
Selbstdarstellung, also um einen Monolog
handelt. Der Interviewpartner wird also nicht
befragt, sondern hangelt sich an Leitfragen
entlang und beantwortet diese der Reihe nach.
Diese Leitfragen sollten sicherstellen, dass alle
von uns gewünschten Informationen enthalten
sind, diese in bestimmter Abfolge gesagt
werden und dass nicht über Belangloses
berichtet wird. Beim letzten Abschnitt mit dem
Textbeispiel werden jetzt sicher einige die
Hände über dem Kopf zusammenschlagen,
aber wir sind im Nachhinein froh, dieses
Beispiel mit angegeben zu haben. Denn auf
diese Weise haben sich wirklich mehr als die
Hälfte der Interviewpartner an die nötige Abbildung 15 Professoren Übersicht
Länge, die Form und den gewünschten Inhalt
gehalten. 90 Sekunden sind sehr kurz, da ist für mehr als 10-15 kürzere Sätze kein Platz. Auf
der anderen Seite wollten wir die Interviews nicht länger haben, da der Zuhörer sonst nach
___________________________________________________________________________
Seite 40 von 84
kürzester Zeit ermüdet. Bei einigen Aufnahmen hat das leider nicht so geklappt, entweder
wurde unser Merkblatt nicht oder nicht richtig gelesen oder einfach übergangen. Gerade
deshalb ist es wichtig hier als Gesprächsführer die Oberhand zu behalten und das
Wesentliche zu Verlangen ohne unsensibel zu werden. Die Ergebnisse waren schlussendlich
bei allen Professoren nach 3-4 Aufnahmen und nachfolgendem digitalem Schnitt sehr
befriedigend. Auf diesen möchten wir im späteren Abschnitt 6.5.4 „CoolEdit 2000“ über das
Musikbearbeitungsprogramm CoolEdit 2000 genauer eingehen. Bevor wir zu den
Studenteninterviews kommen sollte man auf jeden Fall noch einen Blick auf die
Übersichtsseite der Professoren Interviews oben, rechts werfen.
6.5.2
Interviews mit Studenten
(ah) Nachdem wir die Interviews mit den Professoren weitgehend beendet hatten, begannen
wir damit, Studenten zu interviewen. Bei den Studenteninterviews haben wir auch einen
Fragenkatalog zusammengestellt. Dabei war uns besonders wichtig, welche Fragen einen
jungen, angehenden Studenten besonders bewegen würden. Immerhin kommen sehr viele
Studenten nicht aus der Region Freiburg und stehen somit vor einem Neuanfang was
Wohnung, Freunde und Umfeld betrifft. Des Weiteren stellt sich sicher jeder neue Student die
Frage wie die ersten Wochen wohl verlaufen, ob er den Anforderungen gewachsen ist und wie
man Unterstützung bekommt. Neben Starthilfen haben wir auch versucht
Zukunftsperspektiven für einen Mikrosystemtechnikstudent in spe von den Interviewpartnern
zu erhalten. Folgende Fragen haben wir im Einzelnen gestellt:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
Warum studierst du Mikrosystemtechnik?
Welche Interessen sollte man mitbringen um Mikrosystemtechnik zu studieren?
Wie war dein erstes Semester?
Wie gut hast du dich am Anfang an der Uni zurechtgefunden?
Wie hast du eine Wohnung in Freiburg gefunden?
Wie war der Übergang vom Gymnasium zur Uni?
Was für einen ersten Eindruck hattest du von der Uni, insbesondere vom Institut für Mikrosystemtechnik?
Wie würdest du Mikrosystemtechnik definieren?
Was sind die typischen Anwendungsgebiete der Mikrosystemtechnik, wo steckt Mikrosystemtechnik drin?
Mit welchem Adjektiv könntest du die Mikrosystemtechnik beschreiben?
Was wirst du nach dem Studium machen?
Was machst du dann, um einen guten Job zu bekommen?
Welche Aufgabenbereiche möchtest du in deinem späteren Job wahrnehmen?
Als erstes mussten einige Hiwis des Lehrstuhls, also höhere Semester, Rede und Antwort
stehen. Nach diesen recht guten Ergebnissen haben wir uns in die Seminarräume getraut um
Erst- und Drittsemester zu befragen. Hier zeigte sich deutlich, dass diese mit manchen Fragen
größere Schwierigkeiten hatten, da bei Ihnen die
Orientierungsphase noch nicht abgeschlossen war.
Aber auch hier kamen wirklich tolle und nette
Antworten heraus. Das größte Problem zeigte sich
nun
bei
genauerer
Betrachtung
der
Interviewpartner, wir hatten keine Frauen erwischt!
Bei dem geringen Frauenanteil und auch noch in
den Semesterferien kein leichtes Unterfangen. Mit
Hilfe von Herrn Pauls Sekretariat gelang es uns
dann aber 3 Damen per E-Mail zu erreichen, die
wir alle zusammen zu einem Termin einluden. Mit
dem nun künstlich nach oben gedrückten
Frauenanteil von 30% konnten wir gut leben, denn
der reale Wert liegt irgendwo zwischen 3 und 8 %.
Abbildung 16 Studenteninterviews
___________________________________________________________________________
Seite 41 von 84
Nun hatten wir also von Ingesamt 10 Studenten und Studentinnen jeweils ca. 10 brauchbare
Antworten. Da sicher kein Nutzer der CD-Rom 100 kleine Soundschnipsel durchhören will,
haben wir beschlossen von jedem Student die beste und Aussagekräftigste Antwort
herauszunehmen. So manche Antwort eines gerade durch die Elektrotechnikklausur
gefallenen Erstsemesters wäre aus motivationalen Gründen ohnehin unförderlich gewesen. Da
wie bei den Professoren von jedem Studenten auch ein Foto gemacht wurde, konnten wir die
obige mit Links versehene Collage basteln. Geht man mit dem Mauszeiger über ein Bild
(MousOver) erscheint auf der rechten Bildseite Name, Alter, Semester und beantwortete
Frage des Studenten. Beim Klick darauf wird die Antwort abgespielt. Alle Sounddateien, auch
bei den Professoreninterviews, sind übrigens MPeg3 komprimiert, aber im Flash Format
(*.swf) abgespeichert. Wie dies technisch funktioniert, erfährt man im Abschnitt 6.4.2
„Musik“.
6.5.3
Interviews mit Firmen- und Uni-Vertretern
(ah) Der Wunsch auch die Stimmen der Industrie zu hören kam erst später, nachdem wir die
anderen Interviews abgeschlossen hatten. Aber gerade um die berufliche, zurzeit sehr gute,
Perspektive zu unterstreichen, wollten wir unbedingt auch ein positives Echo direkt von der
Industrie haben. Um diese Interviews gut in unsere Umgebung einzubetten stellten wir sie im
Bereich „Der Beruf“ unter den Punkt „Einblicke in den Berufsalltag“. Dabei ging es uns
darum die verschiedenen Möglichkeiten herauszustellen, die ein Student nach dem
abgeschlossenen Diplomstudium hat, nämlich zu promovieren, sich selbstständig zu machen
oder den normalen Weg mit Anstellung in einer Firma zu gehen. Wir haben auch Herrn
Ruther vom Institut für Mikrosystemtechnik interviewt, welcher für die Betreuung von
Doktoranden verantwortlich ist. Er berichtete uns unter anderem, welche Fähigkeiten ein
Student mitbringen sollte um den weiteren Weg der Promotion einzuschlagen. Herr Mayer
von der Firma Sensirion in Zürich ist selbst Firmengründer und erzählte uns einiges über die
Hürden aber auch die Perspektiven eine eigene Firma zu gründen. Hierzu haben wir extra eine
Geschäftsreise nach Zürich angetreten.
„Einblicke in den Berufsalltag“
Abbildung 17 Interview Micronas
Abbildung 18 Interview Sensirion
Abbildung 19 Interview Ruther
Das Interview mit Herrn Janke von der Firma Micronas war wieder vor Ort in Freiburg. Herr
Janke ist seit einiger Zeit Angestellter bei der für Mikrosystementwicklungen bekannten
Firma Micronas (früher ITT). Begleitet von einer Pressesprecherin der Firma berichtete er
einiges über seine Arbeit bei Micronas und der dort hergestellten Produkte. Nach diesen 3
sehr anspruchsvollen Interviews hatten wir jede Menge zu tun mit dem Schneiden und
Zusammenfassen der Interviews. Besonders bei Herrn Janke war die Schwierigkeit aus einem
10 minütigen (!) Monolog ein 90 Sekundenstück zu schneiden. Eine große Schwierigkeit
dabei st es möglichst gleiche Stimmlagen ohne Übergänge bei Schnitten zu bekommen.
___________________________________________________________________________
Seite 42 von 84
6.5.4
Cool Edit 2000
(ah) Jetzt ist es an der Zeit das wirklich sehr professionelle Werkzeug Cool Edit 200 zu
besprechen. Von diesem Programm gibt es auch eine „Professional“ Version, welche aber
zusätzlich nur über Mehrspurbetrieb verfügte, was wir gar nicht benötigten. Die
Hauptaufgaben die CoolEdit für uns zu erledigen hatte war: Das Samplen der bereits
aufgezeichneten Interviews. Bei jedem Interviewpartner kamen ca. 3-20 Minuten an Material
zusammen. Nach dem Samplen wurde das Material Probe gehört, und gute Stellen gemerkt.
Oft war es nun möglich einfach einen guten Bereich herauszuschneiden, ihn in eine neue
Datei zu kopieren und ggf. weitere Teilinterviews hinten anzuhängen. Hat man mehrere Teile
zusammengefügt kann man nun bei CoolEdit die Normalize Funktion verwenden. Diese passt
die Lautstärken der Einzelnen Teile an. Natürlich sind nun noch relativ harte Übergänge an
den Schnittstellen, welche sehr sauber, auf tausendstel Sekunde genau geschnitten werden
können. Grenzen setzt einem CoolEdit dabei eigentlich keine. Besonders die Zoom Funktion
ist sehr gut, man kann den Bereich von einer halben Sekunde beispielsweise auf die Größe
des Bildschirms zoomen, sodass man einzelne Wellen genau sehen und bearbeiten kann.
Diverse Pegelanpassungen, Rauschfilter oder Mixfunktionen nennt das Programm
selbstverständlich auch sein eigen. Ein rundum perfektes Tool zur digitalen
Soundbearbeitung, welches wir uneingeschränkt weiterempfehlen können. Das Tool wurde
sowohl für die Bearbeitung der Hintergrundsounds als auch für die Bearbeitung der
Interviews verwendet (Siehe Abschnitt 6.4 „Ton“).
6.6 Animationen mit Flash
6.6.1
Vorweg
(sz) Natürlich ist es im Rahmen dieser Studienarbeit nicht möglich, Flash 5 ausführlich in
seiner Funktionsweise zu beschreiben und zu erklären. Hierzu verweise ich lieber auf
einschlägige Einstiegsliteratur7. Trotzdem möchte ich im folgenden Punkt einen kurzen
Einblick in Flash 5 geben.
Daran schließen sich einige Ausführungen zu den einzelnen Flash-Filmen an
6.6.2
Das Programm Flash 5 – eine Kurzbeschreibung
(sz) Flash ist mittlerweile der Standard für interaktive Vektorgrafiken und Animationen im
World-Wide-Web. Inzwischen sind 98,3%8 der Online-User in der Lage über den Flash
Player Inhalte im SWF-Format9 zu betrachten.
Obwohl Macromedia das SWF-Fromat offen gelegt hat, ist es kein Standard im eigentlichen
Sinn. Für Intranets und – wie in unserem Fall – CD-Rom Publikationen muss mit
Macromedia ein Vertriebsabkommen zum Verteilen des Flash-Player geschlossen werden.
Neben der schon großen Verbreitung des Flash-Players unter Internetusern ist von Vorteil,
dass das Flash-Plug-in mit ca. 0,3 MB nicht all zu groß ist. Die etwaigen Downloadzeiten
befinden sich also auch für weniger schnelle Internetzugänge im Bereich des Ertragbaren. Das
7
Vgl. zum Beispiel: Wolter, S., Flash 5, Bonn, 2000; Dangel, D. , Becker, Th., Flash5, Düsseldorf
2001.
8
Quelle: Macromedia, Online im Internet: http://www.macromedia.com/software/flash/ [Stand
12.01.2002]
9
Das Format der mit Falsh 5 generierten Dateien ist SWF. Die Rohdaten speichert Flash 5 im FLAFormat.
___________________________________________________________________________
Seite 43 von 84
ist ein Argument, das für die Entwicklung der CD-Rom keine allzu große Rolle spielte, da der
Player direkt mit auf die CD gelegt werden konnte. Für eine spätere Portierung in das Internet
ist diese Tatsache aber eine nicht zu vernachlässigende Größe.
Nun aber zur Programmkurzbeschreibung: Um mich nicht allzu sehr in Details zu verlieren,
werde ich mich auf fünf wesentliche Stichpunkte beschränken. Zur besseren
Veranschaulichung soll der folgende Screenshot dienen.
1. Auf der unteren Abbildung mit 1 gekennzeichnet ist die Werkzeugleiste (rechter
Rand). Hier finden sich kleinere Werkzeuge, die bei der Erstellung eines Films
nützlich sein sollen. Wer sich mit gängigen Bildbearbeitungsprogrammen auskennt,
wird sich hier problemlos zurecht finden.
2. Mit dem blauen Punkt zwei ist die Zeitleiste gekennzeichnet. Sie besteht aus einzelnen
durchnummerierten Bildern. Die Bilder werden in einem fertigen Film dann
nacheinander abgespielt. Der Default-Wert für die Abspielgeschwindigkeit beträgt
zwölf Bilder pro Sekunde. Die Gesamtbildzahl darf 16000 nicht überschreiten. Das
16001 Bild würde vom Flash-Player nicht mehr wiedergegeben. Diese Grenze war
während des Projekts allerdings nicht relevant (zum Vergleich: das Intro besteht aus
1553 Bildern).
Die Bilder wiederum bestehen aus verschiedenen Ebenen, die gleichsam aufeinander
gelegt werden. In der Beispielabbildung unten befinden sich die Ebenen der Schriften
‚auf’ der Hintergrundebene.
3. Das Herzstück der Filmentwicklung: die Bühne. In diesem Fall sieht man das Bild zur
Bildnummer 25 samt den geöffneten Bedienfeldern Bibliothek und Film-Explorer (s.
Punkt 4). In der Bibliothek werden die Symbole zum Film zusammengefasst. Es
werden drei Arten von Symbolen unterschieden: Filmsequenzen, Schaltflächen und
Grafiken.
4. Der Punkt 4 kennzeichnet den Filmexplorer und die integrierte Bildaktionsanzeige.
Der Filmexplorer sorgt für eine Übersichtliche Aufstellung der Filmelemente. Er hilft
so, Elemente auszuwählen, zu manipulieren oder zu organisieren. Die
Bildaktionsanzeige zeigt das Action-Script zu den einzelnen Bildelementen an. Bei
ActionScript handelt es sich seit Flash 5 um eine vollwertige Programmiersprache. In
ihrer Struktur ähnelt sie JavaScript. ActionScript bietet eine Vielzahl von
Möglichkeiten Animationen bzw. Flashseiten interaktiv zu gestalten.
___________________________________________________________________________
Seite 44 von 84
Abbildung 20 Flash 5 Desktop
Flash 5 ermöglicht Import und Export (bspw. zur Nachbearbeitung von Bildern) von Dateien
in vielfältigen Formaten. Dazu zählen unter anderem diverse Bitmap- und Vektor-Formate.
Um hier nicht alle Formate aufzählen zu müssen, verweise ich auf das Kapitel „Importieren
und Exportieren“ von Wolters Flash 510.
6.6.3
Nutzung im Rahmen des CD-Projekts
(sz) Flash 5 eröffnet Dank ActionScript vielfältigste Möglichkeiten. So ist von der
Realisierung kleinerer Spiele über interaktive Webseiten bis hin zu den verschiedensten
Animationen alles denkbar. Einen Überblick über die Möglichkeiten von Flash 5 kann man
sich unter der Adresse www.flashforum.de verschaffen.
Bei dieser Mächtigkeit des Programms kristallisierte sich während unserer Arbeit die Frage
heraus, welche Art des Einsatzes von Flash 5 ist die Richtige? So stellte sich bspw. bei den
Animationen zum Punkt Mikrosystemtechnik heraus, dass zu viel „Spielerei“ nicht erwünscht
ist. Denn ansonsten tritt die Information zu den Bildern all zu sehr in den Hintergrund.
Um nicht jede Animation einzeln besprechen zu müssen, habe ich die verschiedenen
Animationen in drei unterschiedliche Klassen eingeteilt, auf die ich nun eingehen werde.
Vorweg verweise ich zum Thema „Sound und Flash“ auf die Ausführungen in Abschnitt 6.4.3
„Kochrezept für Sounds als Flash-Filme“, die auf unseren Erfahrungen rund um das Thema
Sound und Flash beruhen.
10
Wolter, S., 2000, 174-179.
___________________________________________________________________________
Seite 45 von 84
6.6.3.1
Die vier Animationsklassen
6.6.3.1.1
Intro:
Eigentlich muss auch das Intro den Bildanimationen zugerechnet werden. Auf Grund seiner
exponierten Stellung in der CD gehe ich hier jedoch gesondert darauf ein.
Das Intro ist eine Animation die mit dem Default-Wert von 12 Bilder pro Sekunde abgespielt
wird. Die Größe des Intro beträgt 790 x 547 Pixel, die zeitliche Länge liegt bei 155,3
Sekunden, also rund 2,5 Minuten.
Die Animation setzt sich aus neun Ebenen zusammen. Neben einer Soundebene (in dieser
wird lediglich der Soundfilm eingeladen) sind das drei Textebenen, drei Bildebenen, eine
Ebene für den Hintergrund und eine für den Skipbutton. Der ActionScript-Befehl
‚geturl(``beispielseite.html``)’ sorgt dafür, dass das Intro übersprungen werden kann.
Weil die Stärke des Intros die aussagekräftigen Bilder der Mikrosystemtechnik sein sollte,
bestand die Hauptarbeit an der Intro-Animation daraus die Tweenings zu erstellen. Das heißt
das Richtige Einpassen der Bilder und ihre Bewegungen.
Die Bilder für das Intro wurden rein nach ästhetischen Gesichtspunkten ausgewählt.
Schließlich steht beim Intro primär das Wecken von Interesse über Bild und Ton im
Vordergrund und nicht die Vermittlung von Informationen.
Der Sound wurde als eigener Flash-Film mit dem Action-Script Kommando „loadMovieNum
("intro_musik.swf", 1);“ eingebunden. Die Einbindung des Sound´s als eigener Flash-Film
war notwendig, weil es ansonsten zu ‚Ruckelgeräuschen’ kommt. Bei den Bildanimationen
(s.u.) wurden die Hintergrundtöne analog eingebunden.11
6.6.3.1.2
Bildanimationen:
Die Bildanimationen sollen visuelle Reizpunkte innerhalb der CD setzen. Bei den „Diashows“
zu Freiburg12 und zur Universität13 wurde in der Umsetzung ein einfacher Bilderdurchlauf
gewählt. Die Bilder sollen für sich sprechen. Sie wurden größtenteils der Informatik-CD
entnommen.
Bei den Animationen unter dem Punkt „Mikrosystemtechnik“ wurden die Bilder aus dem
Bereich Mikrosystemtechnik mit Erklärungen versehen. Denn die Bilder sind ansonsten für
einen mit der Materie nicht vertrauten Betrachter kaum einzuordnen. Dabei ergab sich
folgendes Problem: Aufwendige Animation von Bildern oder Bildunterschriften bewirkte,
dass die Information zum Bild zu sehr in den Hintergrund trat, bzw. – wenn die Anzahl der
Bilder nicht auf maximal drei beschränkt sein sollte – die Zielzeit von ca. 30-45 Sekunden
weit übertroffen wurde.
Es zeigte sich also, dass ein Weniger an „Bewegung“ von Schriften und Bildern angebracht
war. Entsprechend traten die animierten Elemente zu Gunsten der Bildinformation zurück.
An Hand des Films zu „... ist winzig“ soll nun der Aufbau der Filme samt ihrer Steuerung
beispielhaft erklärt werden.
11
Hierzu sein angemerkt, das bei diesen Animationen der Ton im Gegensatz zur Animation nicht
gestoppt werden kann.
12
„... ist beeindruckend“
13
„Impressionen“ unter dem Punkt „Die Uni Freiburg stellt sich vor“
___________________________________________________________________________
Seite 46 von 84
Der Film wurde auf insgesamt 10 Ebenen realisiert. Die verschiedenen Texte
(Bildunterschriften, Referenzen, „the end“) sind der besseren Übersichtlichkeit wegen auf drei
Ebenen verteilt. Der Hintergrund und die Bilder besetzen je eine Ebene, die Buttonleiste
gliedert sich in vier Ebenen14, eine für die Leiste und je eine für die einzelnen Button.. Die
Button selbst wurden der Vorlagenbibliothek entnommen und sowohl in der Größe als auch
farblich den Erfordernissen angepasst.
Der Film läuft mit einer Bildrate von 8 Bildern pro Sekunde, die Größe beträgt 550 auf 350
Pixel.15
Der Benutzer kann über die Buttons „vor“, „zurück“ und „Pause“ in den Film eingreifen. Er
hat die Möglichkeit, sowohl bei laufender als auch bei gestoppter Animation vor und zurück
zuspringen.
Mit dem ersten Bild wird bei gestarteter Animation der Variablen a der Wert ‚1’ übergeben.
Ein Drücken des Pausebuttons bewirkt einerseits ein stoppen des Films beim aktuellen Bild
andererseits eine Neubelegung der Variablen a mit ‚0’. Zusätzlich wird der Film ‚pause.swf’
eingeladen, so dass dem Nutzer oben rechts ein blinkendes Pause ins Auge springt (vgl.
Abbildung. Bildaufbau durch Drücken der Pausetaste gestoppt).
Abbildung 21 Beispiel Flash-Animation "...ist winzig"
14
Die Buttonleiste wurde in diesem Film entwickelt und getestet. Anschließend mit Copy and Paste in
die anderen Filme eingefügt und das Action-scripting entsprechend geändert.
15
Der Unterschied zu der tatsächlichen Größe im Browserfenster erklärt durch nachträgliche
Änderungen im Layout.
___________________________________________________________________________
Seite 47 von 84
Über eine Abfrage des Wertes der Variablen a lassen sich nun die unterschiedlichen Sprünge
vor/zurück während laufender Animation bzw. vor/zurück während gestoppter Animation
steuern. Das ActionScript ermöglicht mit einer if-then-else Schleife eine einfache
Überprüfung16 des Wertes von a und davon abhängig, den Sprung an die richtige Stelle
innerhalb des Films.
Zu einem besseren Verständnis folgt nun das ActionScript zu den einzelnen Buttons. Die
unterschiedlichen Bildnummern bei einem gestoppten Sprung bzw. einem Sprung (vor oder
zurück) bei laufendem Film ergeben sich dadurch, dass bei gestoppten Film in der Abfolge
nur das Endbild einer Sequenz von Interesse ist; bei laufendem Film ist jedoch das erste Bild
einer Sequenz relevant.
Pausebutton
on (release) {
Vor
on (release) {
on (release) {
if (a<>1) {
if (a<>1) {
var a;
gotoAndStop (137); //Bildnr.
if (a<>0) {
gotoAndStop (58);
} else {
stop ();
} else {
gotoAndPlay (98);
a=0;
loadMovieNum
Zurück
}
("pause.swf",
1);
gotoAndPlay (1);
}
}
}
} else {
play ();
a=1;
unloadMovieNum (1);
}
}
6.6.3.1.3
Roll-Over Flashs
Die Roll-Over Flashs sollen an dieser Stelle nicht allzu ausführlich behandelt werden. Es
handelt sich um die beiden Animationen zu den Punkten „... ist Geschichte“ und die
„Geschichte der Uni Freiburg“. Die Animation beruht auf den drei Ebenen Hintergrund,
Jahreszahlen und Ereignisse. Das Event, dass bei einem Roll-Over über die Jahreszahl das
entsprechende Ereignis erscheinen lässt, wird gesteuert von dem ActionScript:
on (rollOver){
gotoAndStop (Bildnummer);
}
16
Es reicht die Fälle a=1 bzw. a<>1 zu unterscheiden.
___________________________________________________________________________
Seite 48 von 84
Als Beispiel ist hier die „Geschichte der Uni-Freiburg“ abgebildet, wobei der Button 1996
aktiviert ist.
Abbildung 22 Beispiel "Roll-Over Flash"
6.6.3.1.4
Informations-Flashs
Wie der Begriff, unter den ich diese Flashanimationen zusammengefasst habe, schon
anklingen lässt, steht hier die Vermittlung von Informationen an erster Stelle. Die
Animationen werden noch einmal in zwei Einheiten unterteilt. Unter Kategorie I fallen die
Animationen, die durch „Bild zu Bild“-Sprünge und maximal einen Szenenwechsel realisiert
wurden. Die Filme aus Kategorie II zeichnen sich allesamt dadurch aus, dass hier von einer
Szene in die nächste gesprungen wird.
Kategorie I
Theater & Kinos
Cafés & Kneipen
Museen
Nightlife
Studentenwohnheime
Lagepläne
Kategorie II
Lernformen
Studienverlauf
... ist Zukunft
6.6.3.1.4.1 Zu Kategorie I:
___________________________________________________________________________
Seite 49 von 84
Die Szenenwechsel wurden nur bei „Theater und Kinos“ und „Cafés und Kneipen“ benutzt,
um eben die Thematik (bspw. von Theater zu Kinos) zu wechseln. Näheres dazu bei den
Filmen zu Kategorie II. Ansonsten ist den Filmen gemein, dass die Animation mit Bild 1
gestoppt wird und anschließend über die Pfeiltasten (vgl. Abbildung, rechte Pfeiltaste in
Aktion) navigiert wird. Das ActionScript sieht dabei wie folgt aus:
on (press, release){
//wahlweise auch nur release
gotoAndStop (Bildnummer);
}
Abbildung 23 Beispiel "Informationsflash "
6.6.3.1.4.2 Zu Kategorie II:
Im Prinzip ist der Unterschied zu Kategorie I nicht groß. Nun aber sind die Sprünge, die der
User vornimmt, strenggenommen Szenenwechsel. Da eine Szene in Flash eine recht
unabhängig zu handhabende Einheit bildet, ergibt sich eine bessere Wartbarkeit für kurze
Animationssequenzen. Folgende Grafik veranschaulicht, die auf einander folgenden Szenen,
wie sie Flash 5 im Filmexplorer anzeigt. Als Beispiel dient der Film „... ist Zukunft“:
___________________________________________________________________________
Seite 50 von 84
Abbildung 24 Beispiel: Auf einander folgende Szenen bei Flash-Animationen
Szene 1 „intro“ ist eine kurze Animation des Schriftzugs ‚Der Beruf ... ist Zukunft’. Die
Sequenz startet automatisch und wird erst in Szene zwei gestoppt. Anschließend erfolgt die
Navigation wieder per Pfeilbuttons. Das ActionScript zum Szenenwechsel per Pfeilbutton
sieht wie folgt aus:
on ( release){
gotoAndStop („Szenenname“, Bildnummer);
}
6.6.4
Abschließende Bemerkungen
(sz) An dieser Stelle möchte ich noch zwei Erfahrungswerte festhalten. Wie vielleicht in
Bisherigem schon deutlich wurde, ist Flash 5 ein sehr komplexes Programm. Es lässt sich
zwar relativ schnell und intuitiv eine kurze Animation erstellen, jedoch sind die Feinheiten
nicht mehr ganz so offensichtlich. Wer also Flash wirklich ausnutzen will, der sollte
ausreichend Zeit zum Ausprobieren einplanen.
Denn, und damit bin ich gleich bei einem weiteren Erfahrungswert, ein Flash-Film im
Nachhinein zu ändern kann sehr zeitaufwendig und nervenaufreibend sein. Dies ist vor allem
auch dann der Fall, wenn viel mit Tweenings gearbeitet wurde oder der Film unzureichend
strukturiert ist.
6.7 Benutzerführung
(mk) Im Team überlegten wir uns, welche Arten der Navigation durch die CD schlussendlich
möglich sein sollten. Dabei ergaben sich folgende Möglichkeiten:
___________________________________________________________________________
Seite 51 von 84
6.7.1
Navigationsleiste
(mk) Es war bald klar, das wir aus ästhetischen und Platz-Gründen die Browserseitige
Navigationsleiste weglassen wollten, und am unteren Rand des Bildschirms diese selbst
einzubauen. Somit ergab sich dann, dass wir die Vor- & Zurück-Buttons selbst erstellten und
realisierten. Außerdem gibt es in dieser Leiste einen Button mit der man zur Startseite der CD
kommen, und mittels eines Beenden-Buttons die CD verlassen kann. Der Navigations-Button
schließlich führt zur Öffnung des Navigationsbaums.
Abbildung 25 Navigationsleiste
6.7.2
Direkte Hyperlinks auf den Seiten
(mk) Die nächste Navigationsmöglichkeit ist durch die Links auf den Inhaltsseiten gegeben.
Mit diesen Links kommt man eine Ebene tiefer in den Bereich, in dem man sich befindet.
Diese Links befinden sich rechts unten auf den Inhaltsseiten.
Abbildung 26 Direkte Hyperlinks auf den Seiten
6.7.3
Navigationsbaum
(mk) Es lässt sich jederzeit ein gekürzter Navigationsbaum aufklappen, was heißt, dass in
diesem Baum im Unterschied zur SiteMap nicht der komplette Verzeichnisbaum der CD
angezeigt wird, sondern nur die für die aktuelle Position relevanten Seiten. Befindet man sich
z.B. im Bereich „Die Mikrosystemtechnik“, dann werden die Unterbereiche von „Das
Studium“, „Der Beruf“, „Freiburg“ und „Und Du“ nicht angezeigt. Außerdem werden nur die
Einträge angezeigt, die sich unmittelbar auf der gleichen Ebene, oder eins darunter, wie die
aktuelle Seite befinden. Durch diese Kürzungen enthält der Baum meist weniger als 20
Einträge, und kann somit auch zur Orientierung innerhalb der CD verwendet werden.
Im nachfolgenden Bild befindet man sich auf der Seite „Die Mikrosystemtechnik/Topaktuell
in Freiburg“:
___________________________________________________________________________
Seite 52 von 84
Abbildung 27 Gekürzter Navigationsbaum
6.7.4
SiteMap
(mk) In der SiteMap, die in einem separaten, ständig geöffneten Fenster angezeigt wird,
erscheint die komplette Verzeichnisstruktur der CD. Somit kann man sehr schnell, und wenn
man die CD kennt, sehr zielgerichtet in der CD herumstöbern. Außerdem wird die aktuelle
Position, in der man sich befindet, durch Fett- und Kursiv-Schrift hervorgehoben. Da die
SiteMap jedoch bei einer Auflösung von 800x600 Punkten etwa ein Drittel des Bildschirms
einnimmt, ist sie wohl eher für Benutzer, die größere Bildschirme besitzen, geeignet.
Im nachfolgenden Bild befindet man sich ebenfalls auf
Mikrosystemtechnik/Topaktuell in Freiburg“ (Fett- und Kursiv-Schrift):
der
Seite
„Die
Abbildung 28 SiteMap (links im Bild)
___________________________________________________________________________
Seite 53 von 84
6.7.5
Links in Rolltext-Seiten
(mk) Die letzte Möglichkeit ist, direkt Links in den Rolltext einzubauen. Meist sind dies
Links, die direkt ins Internet führen, wie z.B. ein Link auf die Fachschaftsseite.
Technische Aspekte dazu:
-
Die Links die aus der CD gehen, müssen als target „_blank“ haben, damit sich
ein neues Browserfenster öffnet.
Bei Links die auf andere Inhaltseiten innerhalb der CD verweisen, muss das
target-Attribut auf „main“ gesetzt werden (siehe Abschnitt 5.2.1.2 „Frames
verwenden ?“).
6.8 Verzeichnisstruktur:
(mk) In diesem Abschnitt möchte ich grob auf die von uns verwendete Verzeichnisstruktur
eingehen.
Primär teilt sich die CD auf in die Verzeichnisse browser, plugins und html_contents. Hierbei
sind in browser und plugins die Installationsprogramme abgelegt. Alle HTML-seitigen Dinge
stehen dann in html_contents. Dort wird folgendermaßen geteilt:
6.8.1
Installation
(mk) Hier sind sämtliche HTML-Seiten zu den Installationshinweisen abgelegt, wobei sich
diese in browser (falscher Browser), css (CSS deaktiviert), flash (Flash-PlugIn Probleme) und
javascript (JavaScript deaktiviert) aufteilen.
6.8.2
JavaScript
(mk) In diesem Verzeichnis sind alle JavaScript-Programme abgelegt.
6.8.3
Layout
(mk) Dinge die etwas mit dem Layout zu tun haben, findet man in diesem Verzeichnis.
Hierbei handelt es sich um Bilder (Hintergrundbilder sowohl für die Inhaltsseiten, als auch für
den Rolltext und die Bilder mit dem senkrechten Schriftzug für die 5 Bereiche), CSSStylesheets (layout.css für die Vorlagen, rolltext.css für den Rolltext, ...) und Sounds
(Hintergrundsounds für die 5 Bereiche).
6.8.4
Bereiche
(mk) In diesem Verzeichnis befindet sich der Hauptteil der CD, d.h. die Übersichtsseiten und
Inhaltsseiten. Dabei haben wir uns folgende Konventionen ausgedacht:
1. Jede dargestellte Seite bekommt einen eigenen Ordner, der den Namen aus der zu
Anfangs gemachten (ausgedachten) Baumstruktur erhält.
2. Die Inhaltsseiten, in jedem der unter 1. gemachten Ordner, sollen immer inhalt.html
heißen.
3. Falls es eine Inhaltseite mit Rolltext ist, muss der Text, in dem erstellten Ordner (1.),
in rolltext.html abgespeichert werden.
Die Gründe für diese drei Konventionen entstanden daraus, dass wir uns mit der
Verzeichnisstruktur möglichst an den von uns ausgedachten Baum halten wollten, damit jeder
weiß, wo er seine erstellten Seiten unterbringen muss. Andere Gründe waren, dass es aus
JavaScript-technischen Dingen sinnvoll war, eine solche Struktur anzustreben, um Arbeit zu
ersparen. So vereinfachen die Punkte 1 und 2, die Erstellung der Programme navcontrol.js
(Hintergrundsound Ermittlungs- und Abspielprogramm), navbaum.js (gekürzter
___________________________________________________________________________
Seite 54 von 84
Navigationsbaum) und sitemap.js (vollständiger Baum) in der Art, dass leicht festzustellen ist,
wo innerhalb der CD man sich befindet (Ermittlung über Pfad in der URL) und auch müssen
bei den Seitenlinks für SiteMap und Navbaum (baum_link.js) keine HTML-Seitennamen
angegeben werden, da die ja laut 2 alle inhalt.html heißen. Außerdem ist es, durch
Konvention 3, auch einfach festzustellen, in welcher Datei sich der Rolltext befindet. Hätte
man hier verschiedene Namen verwendet, müsste im Rolltext-Programm erst festgestellt
werden, welche Datei geladen werden muss, was sehr schwierig wäre.
6.9 Autostart (Windows)
6.9.1
Programmstart-Datei
(mk) Der automatische Start einer CD lässt sich über die Datei AutoRun.inf (Abzulegen im
Hauptverzeichnis der CD) ermöglichen. Dort muss angegeben werden, welches Programm
beim Einlegen der CD, gestartet werden soll. Da man dort nur Programme (EXE-Dateien)
angeben kann, muss man beim Start von HTML-Dateien ein Programm, mit der HTML-Datei
als Parameter, angeben, dass diese dann anzeigen kann. Theoretisch könnte man hier den
Browser, den der Benutzer auf der Festplatte installiert hat, angeben. Da jedoch nicht bekannt
ist, ob ein Browser installiert ist, oder wenn einer installiert ist, um welchen es sich handelt,
und wo er sich befindet, fällt diese Möglichkeit flach. Unter Windows 95 und 98 gibt es dazu
das Programm „start“. Der Aufruf der HTML-Seite kann dann z.B. über "start index.html"
erfolgen. Die Probleme hierbei sind allerdings, dass sich dabei ein unschönes DOS-Fenster
öffnet, und das dieses Startprogramm bei Windows 2000 nicht existiert, oder nicht gefunden
wird. Deshalb musste eine andere Lösung her. Im Internet ließ sich dann schließlich ein
Programm (DocStart.exe) finden (Author: Wolfgang Wirth, Link: http://www.lab1.de),
welches auf allen Windows-Plattformen einwandfrei funktioniert, und den Standardbrowser
mit der angegebenen HTML-Seite aufruft.
6.9.2
Weitere mögliche Angaben in AutoRun.inf
(mk)
6.9.2.1 "CD-Bild"
Es ist möglich, das im Datei-Explorer neben dem CD-Namen ein eigens definiertes Bild
angezeigt wird. Hierzu muss man nur angeben, wo auf der CD sich das Bild befindet. Das
Bild muss hierzu in folgendem Format gespeichert werden:
- 4-Bit (also 16 Farben)
- 32 x 32 Pixel
- Format: ICO
Am besten man nimmt sich eine fertige ICO-Datei, und verändert diese.
6.9.2.2 Kontextmenü
Per Rechtsklick auf den CD-Namen lässt sich ja ein Menü öffnen. Dabei ist es möglich eigene
Einträge und Aktionen zu diesem Menu hinzuzufügen.
6.9.3
Die fertige AutoRun.inf-Datei
(mk) Mit dem Programm von Wolfgang Wirth, ist es nun möglich diese AutoRun.inf-Datei,
über ein GUI, komfortabel zu erstellen. Und so sieht die fertige Datei (ohne Kommentare)
dann aus:
[autorun]
open = DocStart.Exe start.html
___________________________________________________________________________
Seite 55 von 84
icon = html_contents/start.ico
shell\ww = &Über DocStart ...
shell\ww\command = DocStart.Exe
6.10 Programmierung
(mk) Im folgenden möchte ich die verschiedenen JavaScript-Programme beschreiben. Die
Beschreibung ist folgendermaßen aufgebaut:
-
Programmname: der Dateiname, in der das Programm steht.
Kurzbeschreibung: grob zusammengefasst was das Programm macht.
Erläuterungen zum Source: Im allgemeinen erkläre ich hier nur was die einzelnen
Funktionen machen. Sollte jedoch eine interessante Code-Zeile dabei sein, werde ich
diese genauer erläutern. Die blauen Zahlen in eckigen Klammern hinter dem
Funktionsname ist der Zeilenverweis auf den Anhang „JavaScript-Programme“.
Am Schluss werde ich dann noch auf Spezialgebiete der JavaScript-Programmierung
eingehen:
-
Installationshinweise
„...ist cool“ – Seite
Ladekontrolle / Seiten-Aktualisierung
Browserkompatibilitätsprobleme
6.10.1 div.js:
6.10.1.1 Kurzbeschreibung:
Dieses Programm führt eine Browsererkennung durch und bietet Funktionen für das Handling
von Ebenen, so genannten Layern, die ein wichtiger Bestandteil von DHTML sind, an.
Mittlerweile (seit etwa Oktober 2001) gibt es zu DHTML eine kleine Bibliothek. Zu finden ist
diese Bibliothek im Self-HTML Version 8.0, und heißt „dhtml.js“. Leider bietet diese
Bibliothek keine Clipping-Funktionen an.
6.10.1.2 Kurzer Kommentar zu Ebenen:
In Ebenen lässt sich HTML-Code über einem anderen HTML-Code anzeigen. Dabei ist es
möglich diese Ebenen per JavaScript zu verschieben, ein- und auszublenden, zu clippen (nur
einen Teil des Ebenen-HTML-Codes) anzuzeigen, oder den Inhalts-HTML-Code durch einen
anderen zu ersetzen bzw. zu verändern. Dies kann alles während der Laufzeit erfolgen, also
wenn die Seite schon fertig aufgebaut ist.
6.10.1.3 Erläuterungen zum Source (die Funktionen):
6.10.1.3.1 getBrowserValues() [12]
Diese Funktion weist den globalen Variablen ie_version, ns_version und isMac die richtigen
Werte zu. D.h., wenn der benutzte Browser "Internet Explorer" ist, dann steht in ie_version
die Versionsnummer dieses Browsers, und ns_version wird auf Null gelassen. Umgekehrt,
wenn der benutzte Browser "Netscape" ist, wird ns_version auf die Versionsnummer gesetzt,
und ie_version bleibt auf Null. Die Variable isMac wird auf TRUE gesetzt, wenn der benutzte
Rechner ein Macintosh-Rechner ist.
6.10.1.3.2 createDiv(name,px,py,z,b,h,cx,cy,cb,ch) [40]
Diese Funktion erzeugt eine neues "Ebenenobjekt", mit folgenden Übergabeparametern:
___________________________________________________________________________
Seite 56 von 84
name: Der Name mit dem das Objekt später angesprochen werden kann.
px:
Absolute X-Position der Ebene
py:
Absolute Y-Position der Ebene
z:
Der z-Index der Ebene. Dieser Wert wird gebraucht, wenn mehrere Ebenen nicht
überschneidungsfrei positioniert sind. Die Ebene mit dem höheren z-Index wird dann über
allen Ebenen mit kleinerem z-Index angezeigt.
b:
Die Breite der Ebene in Pixeln.
h:
Die Höhe der Ebene in Pixeln.
cx,cy: Die x- bzw. y-Position fürs Clipping innerhalb der Ebene, d.h. wie viel Pixel links
bzw. oben von der Ebene abgeschnitten werden sollen. (im Endeffekt Transparent machen)
cb,ch: Die Breite und Höhe des auszuschneidenden Bereichs aus der Ebene.
Dieses Objekt kann auch auf eine Ebene erzeugt werden, die bereits direkt im HTML-Code
erzeugt wurde. In diesem Falle muss der name dann natürlich das ID der Ebene sein, und man
darf dann eben nicht die init-Methode aufrufen.
Die Anweisungen innerhalb der Funktion weisen dann zu this (zu diesem Objekt) die
Variablen und Funktionen zu. Um dies etwas genauer zu erklären mache ich hier ein kleines
Beispiel. Die Zeile "myLayer = createDiv(.....)" erzeugt ein neues Objekt. Nun kann man per
myLayer.show(); die Funktion showDiv (definiert durch die Code-Zeile: this.show=showDiv)
aufrufen, die dann den Code zur Sichtbarmachung der Ebene enthält. D.h. man kann durch
diese this-Zuweisungen, ähnlich wie bei Java, Objekte mit eigenen Variablen und Funktionen
erzeugen, wobei die auszuführenden Funktionen aber nicht innerhalb der objekterzeugenden
Funktion stehen.
6.10.1.3.3 get_element(id) [61]
Mit dieser Funktion lassen sich benannte HTML-Tags ansprechen. Also wenn man z.B.
folgendes Ebenen-Tag hat:
<div id="myLayer">code</div>
So lässt sich dieses über get_element("myLayer") ansprechen.
6.10.1.3.4 setDivClip(x,y,w,h) [69]
Hiermit lässt sich nur ein Ausschnitt des im div-Tag angegebenen HTML-Codes anzeigen,
wobei x und y die obere linke Ecke des Ausschnitts angeben, und w und h die Breite und
Höhe des Clips sind.
6.10.1.3.5 setDivPosition(x,y) [85]
Veränderung der Position der Ebene. Die x- und y-Angaben, sind hierbei absolute
Koordinaten zu der linken oberen Ecke des Anzeigebereichs im Browserfenster. Theoretisch
sind auch relative Angaben zur Position des Ortes des erzeugten div-Tags möglich, jedoch
lassen sich relativ positionierte Ebenen nicht clippen. Außerdem ist darauf zu achten, wenn
mit setDivClip(...) nur ein Teil des HTML-Codes angezeigt werden soll, der Bezugspunkt, für
die Positionierung, immer noch ganz links oben ist, und nicht die linke obere Ecke des
sichtbaren Bereichs des Clips. Um den Clipeckpunkt als Bezugspunkt zu betrachten, habe ich
eine Boolean-Variable clipreposition eingeführt, die beim Wert TRUE das Programm
veranlasst, den Clip-Eckpunkt als Bezugspunkt zu nehmen (automatische Ausgleichung durch
Aufruf von setDivPosition in der Routine setDivClip(...)).
6.10.1.3.6 initDiv(innerText) [96]
Diese Funktion fügt, per sogenanntem active-Scripting, HTML-Code in das aktuelle
___________________________________________________________________________
Seite 57 von 84
Dokument ein. D.h., das hiermit, je nach verwendetem Browser, ein div- (Internet Explorer,
Netscape6) oder layer-(Netscape4.x) Tag mit dem Inhalt "innerText", in die bereits (teilweise)
vorhandene HTML-Seite eingefügt wird. Teilweise deshalb, weil das JavaScript-Programm
eventuell nicht am Ende der HTML-Seite aufgerufen wird, und nach dem Programm
vielleicht noch "normaler" HTML-Code angehängt wird.
6.10.1.3.7 showDiv() [111]
Macht die Ebene für den Betrachter sichtbar.
6.10.1.3.8 hideDiv() [119]
Macht die Ebene transparent, d.h. sie wird unsichtbar.
6.10.1.3.9 setInnerHTML(t) [127]
Ersetzt den HTML-Code innerhalb des Ebenentags (div oder layer), durch den Code der in
der Übergabevariablen t steht.
6.10.2 getjspath.js
Ermittelt den Pfad vom Stammverzeichnis zu dem "javascript"- und dem "html_contents"Ordner, und speichert diese in den Variablen "javascriptpath" und "htmlcontentspath" ab.
Diese absoluten Pfadnamen sind notwendig, um Bilder, die von JavaScript verwendet werden,
zu lokalisieren, da fast alle JavaScript-Programme auf allen HTML-Seiten vorkommen, und
zum Laden der Bilder ein Pfad gebraucht wird. Am einfachsten war dieses Problem durch
absolute Pfade zu lösen. Relative Pfade wären auch ok, nur müssen diese dann etwas
kompliziert berechnet werden. Z.B.: wie oft muss "../" im Pfad vorkommen, bis man auf der
Höhe vom Verzeichnis "javascript" ist ?
6.10.3 baum_link.js
Enthält die Einträge für die SiteMap und den gekürzten Navigationsbaum, in Form von 2
Arrays. Das erste Array "baum[..]" enthält die Texteinträge für den Baum, und das zweite
Array link[..], die Hyperlinks zu den entsprechenden Seiten. Es ist dabei darauf zu achten,
dass die Verschachtelungstiefe im Baum durch Leerzeichen am Anfang der "baum"-Strings
repräsentiert wird, und die Links als Ausgangspunkt den "html_contents"-Ordners haben
(später: vorschalten des "htmlcontentspath"-String aus dem Programm getjspath.js(siehe
oben)).
Wird bei einem Eintrag im link[..]-Array "NOLINK" angegeben, so erscheint später dieser
Eintrag im Baum, lässt sich aber nicht auswählen.
6.10.4 navbaum.js
Programm zur Initialisierung und Darstellung des gekürzten Navigationsbaumes in der
rechten unteren Ecke.
6.10.4.2 Screenshot:
Siehe Benutzerführung (siehe Abschnitt 6.7.3 „Navigationsbaum“).
6.10.4.3 Erläuterungen zum Source:
Am Anfang werden mehrere Variablen initialisiert, die angeben, wo z.B. der Baum angezeigt
werden soll, was er für eine Farbe haben soll, welcher Sound beim Öffnen abgespielt werden
___________________________________________________________________________
Seite 58 von 84
soll, usw... Da es sehr viele Variablen sind, und ich diese im Source-Code schon dokumentiert
habe, möchte ich diese hier sinnvollerweise nicht aufführen.
6.10.4.4 Die Funktionen:
6.10.4.4.1 NB_init() [304]
Diese Funktion erzeugt den HTML-Code der später in einer Ebene angezeigt werden soll.
D.h. es wird die momentane URL ermittelt und entsprechend bearbeitet, so dass sich
feststellen lässt, wo man sich, in der durch baum_link.js definierten Struktur, befindet.
Anschließend werden nur die Einträge genommen, die unmittelbar mit der aktuellen Position
zu tun haben. Befindet man sich z.B. im Bereich "Die Mikrosystemtechnik" wird der
komplette Unterbaum von z.B. "Der Beruf" nicht angezeigt.
Steht fest, welche Einträge in den Baum kommen, wird eine HTML-Tabelle mit table-,tr- und
td-Tags erzeugt. Eine Tabelle ist deshalb notwendig, weil HTML-Text nicht durch führende
Leerzeichen eingerückt werden kann (werden ignoriert), und somit die Einrückung durch ein
oder mehrere leere führende Tabellenzellen realisiert werden muss. Der fertige HTML-Code
zu dem Baum wird dann in der globalen Variablen "NB_html" abgespeichert.
6.10.4.4.2 mover(zeile) [452], mout(zeile) [461], mclick(zeile) [468]
Diese Funktionen werden ausgeführt, wenn man mit der Maus über eine Zeile fährt, von der
Zeile weg fährt, oder auf die entsprechende Zeile im Baum klickt. Somit lässt sich der
typische Menueffekt erzielen, was heißt, das die aktuelle Zeile farblich hervorgehoben wird,
und man feststellen kann, wann auf eine Zeile geklickt wird.
Die Funktion mclick(...) führt dann die Funktion gotoLink(...), nach einer kurzen
Zeitverzögerung, aus.
Um den Baum nach Verlassen des Menus automatisch zu schließen, wird in mout() ein
Timeout von 500ms Sekunden gestartet, welches bei mover() wieder entfernt wird. D.h. wenn
nicht nach spätestens einer halben Sekunde nach Verlassen eine Zeile, keine neue Zeile mit
der Maus angefahren wird, bedeutet dies, dass sich der Anwender nicht mehr innerhalb des
Baumes befindet, und somit wird der Baum geschlossen (Aufruf von closenavtree()).
6.10.4.4.3 gotoLink(zeile) [475]
Veranlasst den Browser zu dem Link, der zu der entsprechenden Zeile gehört, zu springen.
6.10.4.4.4 opennavtree() [492]
Öffnet den Navigationsbaum, durch ein sinusförmiges Einblenden (Aufruf der Funktion
fadein()) (bei Internet Explorer und Netscape 6), bzw. bei Netscape4.x durch ein neues
Fenster (Aufruf von NB_openwindow()). Diese Funktion wird durch den Button, namens
Navigation im unteren Frame, aufgerufen (Aufruf durch: "parent.frames[0].opennavtree();").
6.10.4.4.5 fadein() [518]
Routine die den Baum sinusförmig von unten her einblenden lässt.
6.10.4.4.6 closenavtree() [528]
Schliesst den Baum wieder.
6.10.4.4.7 NB_openwindow() [544]
Zeigt den Navigationsbaum in einem neuen Fenster an.
___________________________________________________________________________
Seite 59 von 84
6.10.4.4.8 NB_wintestmove() [566]
Überprüft, ob das von NB_openwindow() geöffnete Fenster verschoben wird. Ist dies der Fall,
wird es geschlossen.
Diese Funktion habe ich aus dem Grund eingebaut, weil der Navigationsbaum ähnlich wie ein
Menu funktionieren soll, was heisst, das er beim Verlassen des Menus geschlossen werden
soll.
6.10.5 navbaum.html
Dies ist die HTML-Seite, die bei Aufruf von NB_openwindow() (siehe navbaum.js) im neuen
Fenster angezeigt wird. Hier finden sich auch die Routinen mover, mout, mclick wieder. Der
HTML-Code für den Baum wird dann per active-Scripting noch hinzugefügt (Auslesen der
globalen Variable NB_html des Hauptfensters).
Notwendig ist diese HTML-Seite deshalb, weil das neue Fenster wissen muss, was es tun soll.
Der Zugriff auf das Hauptfenster erfolgt über das opener-Objekt, was das öffnende Fenster
(bzw. Frame) bezeichnet.
6.10.6 navcontrol.js
Dieses Programm wird im Navigationsframe (untere Leiste mit den Navigationsbuttons)
ausgeführt. Es steuert die einzelnen Hintergrundsounds für die 5 Bereiche (Die MST, Der
Beruf, etc.) und passt den Hintergrund dem Hauptframe (oberes Frame) an.
Zunächst werden zwei verschiedene Datenstrukturen erzeugt.
1. Bei welchen URLs im oberen Frame sollen die Hintergrundsounds gestartet werden
(URLs der Übersichtsseiten).
2. Bei welchen URLs im oberen Frame soll der Hintergrundsound gestoppt werden.
(Meistens Flash-Animationen mit eigenem Sound).
6.10.6.3.1 update(type, mainframepic) [672]
Diese Routine wird vom oberen Frame her aufgerufen, wenn oben eine neue Seite angezeigt
wird. Somit kann festgestellt werden, wann sich im oberen Frame etwas verändert.
type muss hierbei einer der folgenden sein:
- „overview“: Oben wird eine Übersichtsseite aufgebaut.
- „flash“: Oben wird eine Seite aufgebaut, die ein Flash beinhaltet.
- „normal“: alle anderen Seiten.
mainframepic gibt an was das obere Frame für ein Hintergrundbild verwendet.
Ein gültiger Aufruf aus der oberen HTML-Seite wäre z.B.:
parent.frames[1].update("overview","blau_schwarz.jpg").
Aus diesen Angaben lässt sich dann ermitteln, welches Hintergrundbild, und welcher
Hintergrundsound abgespielt werden soll.
___________________________________________________________________________
Seite 60 von 84
6.10.6.3.2 checkHgSound() [716]
Diese Routine ermittelt die aktuelle URL des oberen Frames, und entscheidet dann, welcher
Sound abgespielt werden soll.
Zum Abspielen der Sounds wird die Routine play_sound(...) aus soundcontrol.js aufgerufen.
6.10.7 rolltext.js
Programm zum Darstellen des rechteckigen Rolltext-Fensters auf Informationsseiten (TextSeiten).
Abbildung 29 Beispiel für Rolltext
Am Anfang werden eine Unzahl von Variablen initialisiert, die unter anderem angeben,
welche Sounds bei den Pfeiltasten abgespielt werden soll, wie schnell die Scroll-Bewegung
ist, usw. Da diese Variablen im Quelltext gut kommentiert sind, werde ich sie hier nicht alle
auflisten. Die wichtigsten Variablen sind RT_x, RT_y, RT_width, RT_height, RT_htmlheight
und RT_htmlheightns4, die auf jeder neuen Textseite angegeben werden müssen (also nicht in
rolltext.js). Die ersten Zwei geben die linke obere Ecke des Rolltext-Bereiches an, die
nächsten Zwei die Ausmaße. Da ich keine Möglichkeit gefunden habe die Gesamttexthöhe zu
ermitteln, sind RT_htmlheight und RT_htmlheightns4 notwendig, die die Höhe in Pixel
___________________________________________________________________________
Seite 61 von 84
angeben. Zwei sind deshalb nötig, da Netscape4 die Texte anders darstellt, als Microsoft
Internet Explorer und Netscape6, und sich somit eine andere Höhe ergibt. Damit diese
Methode der Höhenangabe funktioniert, ist es dringend notwendig, dass die Stylesheets (CSS)
browserseitig aktiviert sind!
6.10.7.4.1 RT_showNS6h() [803]
Erzeugt den HTML-Code für die Darstellung des Textfensters (speziell für Netscape6), und
fügt ihn ins aktuelle Dokument ein. Hierbei wird ein normales iframe verwendet, was zur
Folge hat, das der normale Scrollbar, um im Dokument rauf und runter zu blättern, erscheint.
6.10.7.4.2 RT_initOther() [816]
Erzeugt den HTML-Code des Textfensters für die anderen Browser (MSIE, Netscape4).
Hierbei werden insgesamt sieben Ebenen erzeugt:
-
Textfenster
vier Pfeile zum scrollen (schnell/langsam nach oben/unten)
Block zwischen den Pfeilen (zur Verschönerung)
Rahmen um das Ganze
Außerdem werden die Images für die Roll-Over-Effekte (bei den Pfeilen) geladen.
In dieser Routine wird der Rolltext (rolltext.html) nur bei Netscape4 geladen, d.h. bei Internet
Explorer geschieht dies erst in RT_showIE5h().
6.10.7.4.3 RT_showIE5h() [897]
Laden von rolltext.html in die Rolltext-Ebene mit anschließendem Fade-In durch die fadeRoutine.
6.10.7.4.4 scrollFastUp() [913], scrollSlowUp() [914], scrollSlowDown() [915],
scrollFastDown() [916]
Die Scroll-Routinen für die einzelnen Scroll-Buttons. Hier wird die globale Variable
RT_scrollSteps auf den entsprechenden Wert gesetzt, d.h. das z.B. bei schnellem
Aufwärtsscrollen diese Variable auf -20 gesetzt. Um das Scrollen nicht nur einmal bei
Drücken eines Buttons durchzuführen, wird die Routine scroll() aufgerufen, die sich selber
immer wieder aufruft.
6.10.7.4.5 setArrow(name) [917]
Ändern der Images der einzelnen Scroll-Buttons (Knopf-Effekt), und eventuell abspielen
eines Sounds dazu.
6.10.7.4.6 scroll() [922]
Diese Routine bewegt letztendlich den Rolltext um RT_scrollsteps (Variable) Schritten. Um
ein permanentes Scrollen zu erreichen ruft sich die Routine nach einem bestimmten Timeout
immer wieder selbst auf.
6.10.7.4.7 stopScrolling() [933]
Diese Methode wird aufgerufen, wenn der Anwender einer der Scroll-Buttons loslässt. Sie
löscht dann das Timeout, das bei scroll definiert wird, und hält somit den Text an.
___________________________________________________________________________
Seite 62 von 84
6.10.7.4.8 RT_fadein() [978], fade() [941], makefade() [955]
Einblenden des Rolltextes durch verschiedene Effekte. Momentan sind nur zwei Effekte
implementiert, die nach dem Zufallsprinzip ausgewählt werden:
1. Effekt: Einblenden des Rolltextes aus der Mitte heraus.
2. Effekt: Einblenden des Rolltextes aus der oberen linken Ecke.
Anmerkung: Es ist relativ einfach neue Einblendeffekte zu generieren, und ich hätte dies
eigentlich auch sehr gerne noch gemacht, aber leider war es von der Zeit her nicht möglich.
6.10.7.4.9 showALL() [963]
Alle sieben Ebenen ohne irgendwelche Einblendeffekte sofort anzeigen.
6.10.7.4.10 RT_hideALL() [973]
Alle sieben Ebenen des Rolltextes sofort ausblenden (Transparent machen).
6.10.7.4.11 RT_show() [986]
Diese Routine führt in dem Fall, das Netscape4 oder MSIE verwendet wird, die Routine
RT_showIE5h() aus.
Bemerkung: Dies ist etwas verwirrend, da die Routine RT_showIE5h heißt, aber ich hatte
zuerst alle Routinen getrennt für die verschiedenen Browser, wobei sich dann aber
herausgestellt hat, dass Netscape4 und MSIE den gleichen Code benutzen können.
6.10.8 sitemap_start.js
Dieses Programm dient dazu, ein Fenster zu öffnen, welches die Sitemap anzeigt.
In das neu geöffnete Fenster wird die HTML-Datei „sitemap.html“ hineingeladen, welche
dann das Programm „sitemap.js“ ausführt, das ich später erklären werde. Die Anzeige der
Sitemap hab ich in einer Tabelle realisiert, da das Einrücken von Text mit führenden
Leerzeichen in HTML nicht geht. Um einen Textumbruch bei Verkleinerung des Fensters zu
vermeiden, hat die Tabelle eine feste Breite, in die alle Einträge hineinpassen.
6.10.8.3.1 open_sitemap_window(url) [991]
Öffnet ein Fenster links oben am Bildschirm mit der Größe 320x542 auf dem Bildschirm.
Dieses Fenster lässt sich vergrößern, und erlaubt die Anzeige von Rollbalken.
6.10.9 sitemap.js
Generiert den HTML-Code für das Sitemap-Fenster, d.h. es wird eine Tabelle mit den
verschiedenen Links auf die einzelnen Seiten erzeugt.
___________________________________________________________________________
Seite 63 von 84
Siehe Benutzerführung (Abschnitt 6.7.4 „SiteMap“).
6.10.9.3.1 SM_init() [1046]
Erzeugt den Tabellen-HTML-Code und fügt ihn in das aktuelle Dokument per
„document.write“ ein. Bei einem Klick auf eine Zeile wird „SM_gotoLink(Zeilennummer)“
aufgerufen.
6.10.9.3.2 SM_gotoLink(z) [1094]
Testet zunächst ob das Hauptframe, in der die Seite angezeigt werden soll bereit ist für einen
Seitenwechsel (siehe Abschnitt 6.10.15 „Ladekontrolle / Seiten-Aktualisierung“), und falls
dies der Fall ist, wird eine neue URL ins Hauptframe geladen. Ist die neue URL die
Impressum Seite, dann kann diese auch dann angezeigt werden, wenn das Hauptframe nicht
bereit ist, da sie vom Layout her in einem eigenen Frameset angezeigt wird.
Ist das Hauptframe nicht bereit für einen
„SM_tryGotoLink(Zeilennummer)“ aufgerufen.
Seitenwechsel,
wird
die
Funktion
6.10.9.3.3 SM_tryGotoLink(z) [1110]
Diese Funktion ruft sich in einem Intervall von 1000ms solange selber auf bis das Hauptframe
bereit für einen Seitenwechsel ist. Wenn das Hauptframe schließlich bereit ist, wird die
Funktion „SM_gotoLink(Zeilennummer)“ aufgerufen.
6.10.9.3.4 check_mainwin() [1117]
Diese Funktion überprüft periodisch, ob das Hauptfenster geschlossen worden ist, was dann
auch zur Schließung des Sitemap-Fensters führt, oder ob sich im Hauptfenster was verändert
hat. Bei einem Seitenwechsel im Hauptfenster, wird im Sitemap-Fenster die Zeile die zu der
Seite im Hauptfenster gehört durch Fett- und Kursiv-Schrift hervorgehoben. Die Markierung
der
Zeile
erfolgt
durch
die
drei
Routinen
„SM_find_and_mark_row()“,
„SM_demark_row(Zeile)“ und „SM_mark_row(Zeile)“.
Bemerkung: Leider funktioniert die automatische Schließung des SiteMap-Fensters nicht bei
allen Browsern.
6.10.9.3.5 SM_find_and_mark_row() [1013], SM_mark_row(row) [1037],
SM_demark_row(row) [1030]
Ermittelt zur URL im Hauptfenster die passende Zeile im Sitemap-Fenster, und markiert diese
durch die Routine „SM_mark_row(Zeile)“. Die alte Zeile wird mittels
„SM_demark_row(Zeile)“ abmarkiert.
6.10.10
soundcontrol.js
Bietet Routinen zum Abspielen und Stoppen von Sounds an.
6.10.10.2 Allgemeines zur Sound-Ansteuerung:
Da ich zur Soundsteuerung nichts brauchbares im Internet gefunden habe, musste ich mir
selbst etwas überlegen. Zur Umsetzung mussten folgende Probleme gelöst werden:
___________________________________________________________________________
Seite 64 von 84
-
Starten von Sounds
Stoppen von Sounds
Erkennung, ob Sound noch läuft oder nicht
Spezialeffekt-Sounds (z.B. überfahren bzw. drücken eines Pfeilbuttons beim Rolltext,
Einblendungssound des Navigationsbaums, usw.) sollten parallel zu anderen Sounds
ablaufen.
Wiedergabelogik (zwei Beispiele):
1. Also z.B. stoppen des Hintergrundsounds (zu den fünf Bereichen), wenn im
oberen Frame eine Flash-Animation läuft, die einen eigenen Sound hat.
2. Hintergrundsound soll bei Seitenwechseln im oberen Frame trotzdem
weiterlaufen.
Um diese Probleme zu lösen war bald klar, das der Sound in einem eigenen Frame ablaufen
musste, da, um die Wiedergabelogik einzuhalten, der Sound nicht in die Hauptframe-HTMLDatei eingebettet werden kann. Denn dann würde der Sound bei einem Seitenwechsel sofort
abbrechen.
Im folgenden möchte ich die Umsetzungsideen zu den Problemen, die ich hatte kurz
erläutern:
Für das Starten und Stoppen von Sounds hatte ich mir mehrere Varianten überlegt:
Variante 1: Ein Sound lässt sich starten, in dem man per embed- oder object-Tag eine SoundDatei, wie z.B. mp3, wav, usw. in ein Ebenen-Tag (div, layer) einfügt. Die Probleme hierbei
waren allerdings, das dies nur bei Internet Explorer richtig funktioniert hatte, denn bei
Netscape wurde bei dieser Variante der Windows Media-Player gestartet, und es erschien das
Abspiel-Fenster.
Variante 2: Eine bessere Lösung war, das Flash-Format zur Abspielung von Sounds zu
verwenden, und diese dann in ein Ebenen-Tag einzufügen. Diese Variante hatte ich zuerst
sehr lange verwendet, und hatte meinen JavaScript-Code auf diese Variante ausgelegt. Leider
merkte ich sehr spät, dass Netscape4 sehr unstabil mit dieser Methode lief, d.h. nach
mehrmaligem wechseln des Inhalts des layer-Tags, stürzte Netscape ab, und zwar in der
Form, dass er einfach das Fenster geschlossen hat.
Variante 3: Somit musste ich eine Lösung finden, die überall ohne Probleme lief, und kam
dann zur folgenden Umsetzung: Für jeden Sound habe ich eine HTML-Datei erzeugt, in dem
die fertigen object/embed-Tags stehen. Um nun den entsprechenden Sound zu starten habe ich
ein unsichtbares Frame am unteren Bildschirmrand erzeugt, in welches dann diese HTMLDatei geladen wird. Um den Sound schließlich zu stoppen lädt man einfach eine leere HTMLDatei in dieses Frame.
Für das Erkennen ob ein Sound nocht läuft, gab es nur eine Möglichkeit, und das war die
direkte Angabe einer Länge zu den unterschiedlichen Sounds, denn ich habe keine
Möglichkeit gefunden die Länge des Sounds einer Flash-Datei zu ermitteln. Also musste bei
jeder HTML-Datei (Variante 3) ein kurzer JavaScript-Code mit einem Timeout hinein, der
nach einer bestimmten Zeit eine JavaScript-Variable „stopped“ (die zu Anfangs auf false
steht) auf true gesetzt wird.
Das parallele Ablaufen zweier Sounds war bei Variante 2 kein Problem, da man ja so viele
Ebenen-Tags wie man will in ein Dokument einfügen kann. Dies war auch der Grund, warum
ich zuerst alles nach Variante 2 programmiert hatte. Nach der Umstellung auf Variante 3
ergab sich dann ein Problem, da für jeden weiteren Sound der parallel ablaufen soll ein
weiteres unsichtbares Frame erzeugt werden musste. Da aber Netscape4 trotz einer Frame___________________________________________________________________________
Seite 65 von 84
Höhe von 0 Pixel etwas Platz beansprucht, wollte ich kein weiteres Frame dazunehmen.
Schlussendlich habe ich es dann nach Absprache mit den anderen Team-Mitgliedern so
gelöst, dass man Spezialeffekt-Sounds nur bei Internet Explorer und Netscape6 hat
(Verwendung eines embed/object-Tags in einem Ebenen-Tag) und bei Netscape4 gibt es dann
eben keine.
Die Wiedergabelogik war bei Variante 3 relativ einfach, da dort der Sound weiterlief bei
Seitenwechseln im oberen Frame. Aber trotzdem musste auf einiges geachtet werden:
-
Hintergrundsound, bei einem Seitenwechsel auf eine Seite mit einer Flash-Animation
die einen eigenen Sound hat, muss abbrechen.
Wird von einer Übersichtsseite (z.B. „Die Mikrosystemtechnik“) kurz auf eine
Unterseite, und dann wieder auf die Übersichtsseite gewechselt, und der
Hintergrundsound läuft noch, darf dieser nicht wieder von vorne anfangen.
Wird von einer Übersichtsseite auf eine andere Übersichtsseite gewechselt, muss der
neue Hintergrund-Sound abgespielt werden.
Usw.
Um diese Probleme zu lösen, muss in jeder Sound-HTML-Datei noch ein Sound-Typ stehen,
der angibt, was für eine Art von Sound gerade abgespielt wird. Hierzu habe ich die Variable
„sndtype“ verwendet. Mögliche Werte sind „background“, „special“, „interview“ oder
„none“.
6.10.10.3.1 SC_getSoundHTML(soundfile) [1145]
Erstellen des HTML-Codes der später in ein Ebenen-Tag (div) eingefügt wird. Hierbei muss
bei Internet Explorer das object-Tag und bei Netscape das embed-Tag verwendet werden.
Will man den Code allgemein halten, ist es möglich beide Tags zu verschachteln.
6.10.10.3.2 play_sound(sndfilename,sndlength) [1165]
Abspielen eines Sounds durch setzen einer HTML-Datei im unsichtbaren Frame.
„sndfilename“ muss ein Pfad zu einer Flash-Datei (Endung „.swf) sein. Wird der Pfad
weggelassen wird automatisch im Verzeichnis „html_contents/layout/sounds“ gesucht. Die
Angabe sndlength wird nicht mehr benutzt (steht jetzt direkt in der Sound-HTML-Datei).
6.10.10.3.3 stop_sound() [1179]
Stoppen des Sounds durch laden von „html_contents/layout/sounds/nosound.html“ in das
unsichtbare Frame.
6.10.10.3.4 play_sound_special(sndfilename,sndlength) [1188]
Spezial-Effekt-Sound in einem Ebenen-Tag starten.
6.10.10.3.5 stop_sound_special() [1192]
Stoppen des Spezial-Effekt-Sounds, in dem der Inhalt des Ebenen-Tags auf Leer gesetzt wird.
___________________________________________________________________________
Seite 66 von 84
6.10.11
startup.js
Hier geht es rund um das Starten der CD, also sowohl um die Abfragen, ob JavaScript oder
Stylesheets aktiviert sind, als auch die Vorbereitungen die beim Sprung zum Intro gemacht
werden müssen.
6.10.11.2.1 positionWindow() [1202]
Positioniert das Fenster für die Installationshinweise so, das es die volle Bildschirmgröße
beansprucht. Das Fenster wird hier also nicht fix auf eine Größe von 800x600 gebracht, wie
es später bei den Inhalten der CD ist, sondern so groß wie die Bildschirmauflösung des
Benutzers ist. Hierbei ist darauf zu achten, dass die Fenstergrößenangaben bei Internet
Explorer und Netscape 6 die Größe des Bereichs ist, in dem später der HTML-Code angezeigt
wird, und nicht wie bei Netscape 4 bei dem die Außenmaße des Fensters angegeben werden.
6.10.11.2.2 goto_intro() [1219]
Diese Routine bereitet den Sprung zum Flash-Intro vor. Es wird also das alte Fenster
verkleinert und eine leere Seite hineingeladen, und ein neues Fenster geöffnet, welches die
Größe von 800x600 hat, in dem dann die Intro-HTML-Seite angezeigt wird.
Dadurch das beim Fensteröffnen die Attribute locationbar und menubar nicht angegeben
werden, besitzt dieses Fenster keine Browser-seitigen Navigationsmöglichkeiten (DefaultWerte bei keiner Angabe sind ‚no’).
6.10.11.2.3 check_browser() [1247]
Überprüft ob der verwendete Browser in Ordnung ist, und gibt in diesem Falle TRUE zurück,
und andernfalls FALSE. Für die Abfrage wird das navigator-Objekt von JavaScript
verwendet.
6.10.11.2.4 check_css() [1278]
Überprüft, ob Cascading-Stylesheets aktiviert sind, und falls dies der Fall ist, wird TRUE
zurückgeliefert.
Da im Internet nichts zu finden war, musste ich mir selbst etwas Überlegen, wie man dies
realisieren kann. Ich kam dann auf die Idee einen Text mit CSS zu formatieren, und dahinter
eine Ebene mittels dem layer-Tag (Netscape 4) in die gleiche Zeile zu setzen. Der HTMLCode (in html_contents/check_start.html) dazu sieht dann folgendermaßen aus:

<font color=#FFFFFF>
<span id="test" style="font-size:4px; font-weight:bold;">MSIE:CSS</span>
<layer name="testlayer">
<span style="font-size:4px; font-weight:bold;">NS4:CSS</span>
</layer>
</font><BR>
Mit dieser Konstellation lassen sich für alle Browser Abfragen realisieren, denn bei
deaktiviertem CSS wird der erste Text „MSIE :CSS“ sehr groß dargestellt, und das layerObjekt verschiebt sich nach rechts.
___________________________________________________________________________
Seite 67 von 84
Bei Internet Explorer und Netscape 6 lässt sich die Breite des ersten Textes direkt über das
Attribut „offsetWidth“ abfragen. Diese Funktionalität besitzt aber Netscape 4 noch nicht, und
darum braucht man hier den zweiten Text („NS4:CSS“). Die Abfrage erfolgt hier über die
Position des layer-Tags, d.h. wenn der layer sehr weit links platziert ist, sind CSSs aktiviert.
Um dies etwas zu verdeutlichen, hier der JavaScript-Code dazu:
if(ns_version==4) {
if(get_element("testlayer").left<40) return true; else return false;
}
if(ns_version>4||ie_version>0) {
if(get_element("test").offsetWidth<30) return true; else return false;
}
return true;
6.10.12
checkall.js
Ruft die Abfrage-Routinen („check_browser“ und „check_css“) aus „startup.js“ auf, und
veranlasst den Browser zu den richtigen Installationshinweisseiten zu springen.
___________________________________________________________________________
Seite 68 von 84
6.10.13
Installationshinweise
6.10.13.1 Vorwort:
In diesem Abschnitt möchte ich mich mit dem Ablauf der Installationshinweise befassen. Da
ein Bild mehr sagt als 1000 Worte, habe ich ein graphisches Flussdiagramm des Ablaufs
erstellt, beginnend mit der Startseite „start.html“ der CD:
6.10.13.2 Flussdiagramm:
start.html
Fensterpositionierung
Browser installieren
CD starten
html_contents/installation/browser/
browser_table.html
Installation:
Win
schritte
Mac
Ohne Überprüfungen starten
Nur Flash5 checken
html_contents/
check_start.html
[JavaScript deaktiviert]
div.js
startup.js
checkall.js
html_contents/installation/flash/
flash5_check.html
CSS&Browser
OK
TIMEOUT 10000ms
schritte
Linux
Falscher Browser
if IE && Macintosh
CSS deaktiviert
NS4.x
check_mac.html
flash_alt.html
NS6
else
div.js
startup.js
html_contents/installation/css/ns6h
einstellen.html
check.html
Installation:
Win
Mac
Linux
Flash: MATH.COS(0)≠1
html_contents/installation/css/ns4h/
einstellen.html
div.js
flash_keines.html
IE
Flash: MATH.COS(0)=1
html_contents/installation/css/ie5h/
einstellen.html
div.js
Installation:
Win
Mac
Linux
flash_ok.html
div.js
startup.js
⇒ gotoIntro()
INTRO
Legende:
Schwache gepunktete Pfeile: Benutzerauswahl
Durchgezogene dicke Pfeile: automatischer Sprung
Abbildung 30 Flussdiagramm der Installationshinweise
6.10.13.3 Erklärungen zum Flussdiagramm:
In dem Bild ist alles wesentliche dargestellt von der Startseite „start.html“ über die Abfragen
bis zum Flash-Intro („html_contents/intro.html“).
Die dünnen schwach gepunkteten Pfeile bedeuten, dass der Benutzer selbst eine Entscheidung
treffen muss, wohingegen die dicken durchgezogenen Pfeile automatische Sprünge (durch
JavaScript-Programme, oder Flash-Programme) bezeichnen. Die Sprungbedingung steht im
Fettdruck neben den Pfeilen.
In den Knoten (Rechtecke) steht oben immer der Pfad, ausgehend vom Hauptverzeichnis der
CD, zur HTML-Datei, und schließlich der Dateiname selbst. Anschließend werden dann die
JavaScript-Programme aufgeführt, die in die entsprechende HTML-Datei eingebunden
werden.
___________________________________________________________________________
Seite 69 von 84
Um das Diagramm klein zu halten, habe ich die Sprünge zu den Installationshinweisseiten
abgekürzt, in dem die Pfeile nicht auf Rechtecke verweisen, sondern direkt auf einen Text
(z.B.: die 5 Pfeile die von dem Rechteck („browser_table.html“) ausgehen.
6.10.13.4 Beispiel: Normaler erfolgreicher Ablauf
Der normale Ablauf ist, dass man „CD starten“ wählt, und dadurch zur Seite
„check_start.html“ springt. Diese Seite beinhaltet die Abfragen für JavaScript, Browser und
CSS. Ist nun z.B. JavaScript deaktiviert, bleibt der Browser auf genau dieser Seite stehen, und
der Inhalt der Seite wird angezeigt. Andernfalls, falls Browser und CSS in Ordnung sind, wird
zu „flash5_check.html“ gesprungen, in die eine besondere Flash-Animation eingebunden ist.
Diese Flash-Animation beinhaltet ein kleines Programm, das den Browser veranlasst, unter
bestimmten Bedingungen, zu bestimmten Seiten zu springen. Diese Flash-Animation mit
Programm, habe ich im Internet gefunden. Das Flash-Programm sieht folgendermaßen aus:
a = Math.cos(0);
if (a=1) {
getURL(„flash_ok.html“);
} else {
getURL(“flash_alt.html”);
}
stop();
Bei diesem Programm wird ausgenutzt, dass Flash-PlugIns deren Versionen kleiner als 5 sind,
den Cosinus von 0 falsch berechnen. D.h. wenn es sich um ein Flash5-PlugIn handelt, wird
zur Seite „flash_ok.html“ gesprungen, andernfalls zu „flash_alt.html“.
Ist nun gar kein Flash-PlugIn vorhanden, wird nach einem Timeout von 10 Sekunden per
JavaScript zur Seite „flash_keines.html“ gesprungen. 10 Sekunden mag einem vielleicht
etwas lang erscheinen, aber es muss gewährleistet sein, dass auch auf einem langsamen
Rechner mit Flash-PlugIn die Flash-Animation vor dem Timeout ausgeführt wird.
In „flash_ok.html“ wird schließlich die JavaScript-Routine „gotoIntro()“ aus dem Programm
„startup.js“ aufgerufen, und zum Intro gesprungen.
Da nun ab „check_start.html“, bei einem richtig installierten Rechner, alles automatisch
abläuft, muss der Benutzer nur am Anfang eine Auswahl treffen (in diesem Falle „CD
starten“), und der Benutzer gelangt sofort zum Intro.
6.10.14
“…ist cool” – Seite
6.10.14.1 Vorwort:
Zu Finden ist die Seite unter: „html_contents/bereiche/das_studium/ist_cool/inhalt.html“. Auf
dieser Seite sind die Studenteninterviews untergebracht. Das Ziel auf dieser Seite war, dass
beim Überfahren der einzelnen Bilder der Studenten, angezeigt wird, wie die Frage hieß, die
dem betreffendem Studenten gestellt wurde. Hierzu musste JavaScript eingesetzt werden.
6.10.14.2 Umsetzung:
Zu jedem Studenten musste ein div-Tag (Inhalt = gestellte Frage) erstellt werden, dass beim
Überfahren des jeweiligen Bildes angezeigt wird. Hierzu werden die Ereignisse onMouseOver
und on MouseOut verwendet, die dann ausgelöst werden, wenn der Benutzer über ein Bild
fährt, oder es gerade verlässt. Bei onMouseOver wird „flyout_show(name)“, und bei
onMouseOut „flyout_hide(name)“ ausgeführt. “name” muss hierbei das Id des
entsprechenden div-Tags sein.
___________________________________________________________________________
Seite 70 von 84
6.10.14.3.1 flyout_show(id)
Hier muss der Name des Studenten übergeben werden, von dem man die Frage anzeigen will.
Anschließend wird die entsprechende Ebene angezeigt.
6.10.14.3.2 flyout_hide(id)
Ausblenden der entsprechenden Ebene.
6.10.15
Ladekontrolle / Seiten-Aktualisierung
Um JavaScript-Fehler zu vermeiden, muss bei allen Seiten eine Seitenaufbaukontrolle
eingefügt werden. D.h. das es für Frame-übergreifende JavaScript-Aufrufe nötig ist, zu wissen
ob die Seite schon komplett (fertig) geladen ist. Um die Notwendigkeit zu zeigen, mache ich
hier ein kleines Beispiel:
Es ist z.B. so, dass man im unteren Frame (Navigations-Frame) den gekürzten
Navigationsbaum im oberen Frame per „parent.frames[0].opennavtree()“ aufrufen kann.
Macht man dies, wenn die Seite im oberen Frame noch nicht fertig geladen ist, so entsteht ein
JavaScript-Fehler, weil er die Routine „opennavtree()“ im oberen Frame nicht findet.
Um diese Fehler zu vermeiden ist auf jeder Seite im HEAD-Tag ein kleines Programm
untergebracht:
<script>
var pageLoaded=false;
function pageReady() {
pageLoaded=true;
if(parent.frames[1].pageLoaded) parent.frames[1].update("normal","dunkle_platine.jpg");
}
</script>
Die Unterbringung im HEAD-Tag ist dazu zwingend notwendig, da dieses Programm, noch
bevor der Seitenaufbau startet, ausgeführt wird.
In diesem Programm wird eine Variable „pageLoaded“ eingeführt, die zu Anfangs auf false
gesetzt wird. Die Funktion „pageReady()“ wird dann durch das Ereignis onLoad im body-Tag
ausgeführt:
<body ....... onLoad=“pageReady();“>
Somit wird die Variable “pageLoaded” erst dann auf true gesetzt, wenn die Seite fertig
geladen ist.
In der if-Bedingung der pageReady-Routine wird dann, falls das Navigations-Frame fertig
geladen ist, die Routine „update“ aufgerufen (siehe Programm „navcontrol.js“). Theoretisch
müsste die if-Bedingung, falls das Navigations-Frame noch nicht bereit ist, nach einem
kleinen Timeout noch mal aufgerufen werden, aber diesen Fehler habe ich erst bemerkt, als
ich die Ausarbeitung geschrieben habe. Somit sollte eigentlich noch eine else-Bedingung der
folgenden Art folgen:
else setTimeout(„pageReady();“,1000);
___________________________________________________________________________
Seite 71 von 84
6.10.16
Browserkompatibilitätsprobleme
6.10.16.1 Vorwort
Wie ich mit der Zeit herausgefunden habe, ist das Programmieren in JavaScript eine sehr
komplizierte Sache, da nicht alle Browser dieselbe Funktionalität aufweisen. Gerade im
DHTML-Bereich gibt es sehr große Unterschiede, da am Anfang fast nichts standardisiert
oder normiert wurde. So wie es scheint gab es damals einen Wettlauf zwischen den
verschiedenen Browser-Herstellern. Jeder wollte so früh wie möglich DHTML-Funktionen
anbieten, und jeder realisierte dies auf eine andere Art und Weise. Später, nach meiner
Meinung viel zu spät, kam dann ein Standard heraus, nämlich der W3C-Standard. An diesen
Standard hielten sich dann Netscape (ab der Version 6) und Internet Explorer (so ab der
Version 5). Dabei hat sich Netscape, meiner Meinung nach, einen großen
Unbeliebtheitsfaktor eingefangen, in dem er die Version 6 nicht mehr Abwärtskompatibel zu
den 4-er Versionen, im DHTML-Bereich, machte. So wird das layer-Tag (bei Internet
Explorer: div-Tag) bei der Version 6 gar nicht mehr unterstützt, d.h. das z.B. alle Homepages
die das layer-Tag verwendeten, nicht mehr richtig angezeigt werden. Stattdessen wurde die
gleiche Funktionalität in das schon bei Internet Explorer obligatorische div-Tag verlegt.
Außerdem hat es den Anschein, dass die Version 6 viel zu früh herausgekommen ist, da ich
relativ viele kleine, aber wesentliche und zeitraubende Bugs (Fehler) entdeckt habe.
6.10.16.2 Einige Probleme gelistet
Im folgenden werde ich einen Auszug meiner Erfahrungen die ich mit den unterschiedlichen
Browsern gemacht habe stichpunktartig auflisten.
6.10.16.2.1 Netscape 4:
- Flash-Animationen die man in ein layer-Tag legt lassen sich nicht ausblenden
(transparent machen)
- Dynamisch eingefügte Flash-Animationen in einem layer-Tag führen zu sehr
instabilem Lauf.
- Flash-Animationen haben höchste Priorität, d.h. es lässt sich kein anderer HTMLCode über einer Flash-Animation anzeigen. Will man es doch tun, so geht dies nur
über ein Fenster, dass man darüber öffnet.
- onMouseOver nur im a-Tag erlaubt, d.h. DHTML-Ereignisse, die normalerweise in
jedem Tag erlaubt sind, funktionieren bei Netscape 4 nur im Anker- oder anders
genannt im Hyperlink-Tag. Im Prinzip ist es keine große Einschränkung, da man jedes
andere Tag auch zusätzlich in ein a-Tag einbetten kann.
- Cascading-Stylesheets (CSS) werden nicht richtig dargestellt. Im Allgemeinen werden
sie mit gleicher Schriftgröße, im Vergleich zu den anderen Browsern, kleiner
dargestellt. Außerdem ist es mir immer noch ein Rätsel, wann CSS formatierte Texte
richtig dargestellt werden. Ich hatte einmal die Idee das Texte nur richtig angezeigt
werden, wenn sie in dem span-Tag stehen, was dann allerdings auch nicht immer
funktionierte.
- CSS-body-background wird nicht unterstützt, d.h. das wenn das body-Tag per CSS
überschrieben wird, und mit dem Attribut background=“bild.jpg“ ein Hintergrundbild
angegeben wird, wird dies nicht angezeigt. Wahrscheinlich liegt dies daran, das er das
Bild nicht findet.
- Fügt man per embed-Tag mp3- oder WAV-Sounds ein, öffnet sich das Media-PlayerFenster beim Abspielen.
___________________________________________________________________________
Seite 72 von 84
-
-
Keine Unterstützung des iframe-Tags, welches benutzt wird um andere HTMLDateien, ähnlich wie bei Frames, in der aktuellen HTML-Datei darzustellen. Lässt sich
aber realisieren durch das src-Attribut im layer-Tag.
Stylesheets wirken sich auch auf das layer-Tag aus. Also wenn man z.B. eine Seite
„page1.html“ hat, und diese per CSS formatiert, und anschließend mittels „<layer
src=’page2.html’></layer>“ eine extra per CSS formatierte Seite einfügt, dürfen sich
die Stylesheet-Namen nicht überschneiden! Dieses Problem hatte ich z.B. als
Katharina an dem Stylesheet für den Rolltext dem a-Tag einen anderen Zeilenabstand
(line-height=...) zugewiesen hatte. Die Konsequenz war, das beim Rolltext die PfeilButtons alle nach unten verschoben wurden!
Kleine Fehler in JavaScript-Programmen werden manchmal nicht, wie bei Internet
Explorer übergangen, sondern führen zum Abbruch des Programms.
Nur bedingte Unterstützung des div-Tags, also nur Ein- und Ausblenden.
6.10.16.2.2 Netscape 6.0 und 6.01:
Diese Probleme traten bei Netscape 6.0 und 6.01 auf, und könnten aber mittlerweile in
späteren Versionen behoben worden sein. Aber damals war 6.01 der neueste Browser von
Netscape.
-
-
keine dynamische ID-Vergabe bei div-Tags mittels active-Scripting, d.h. wenn durch
document.write(„<div id=’ebene’>text</div>“); eine Ebene erzeugt wird, kann man
auf diese Ebene nicht mit dem ID „ebene“ zugreifen. Die Lösung war, alle div-Tags
direkt auf der HTML-Seite leer zu erstellen.
Das layer-Tag von Netscape 4 wird gar nicht mehr unterstützt!
Fügt man per embed-Tag mp3- oder WAV-Sounds ein, öffnet sich das Media-PlayerFenster beim Abspielen.
Legt man in ein div-Tag ein iframe-Tag, so funktioniert das Clipping
(Transparentmachen von verschiedenen Bereichen) nicht.
Kleine Fehler in JavaScript-Programmen werden manchmal nicht, wie bei Internet
Explorer übergangen, sondern führen zum Abbruch des Programms.
6.10.16.2.3 Internet Explorer:
- Beim Öffnen eines Fensters gelten die Abmessungen die man angibt für den Bereich
in dem später der HTML-Code angezeigt wird. Will man also ein Fenster
Bildschirmfüllend öffnen muss man die obere Höhe der Leiste mit den Buttons (Vorund Zurück, usw.) abziehen.
- Bei der Version 5 hat eine Flash-Animation immer noch höhere Priorität als ein divTag. Erst ab der Version 5.5 lassen sich Ebenen auch über Flash-Animationen
anzeigen.
6.10.16.2.4 Macintosh:
- Erstellt man in einem Tag ein onMouseClick-Ereignis, wird ein störendes KontextMenü geöffnet. Deshalb sollte man keine Maus-Klick-Ereignisse verwenden.
6.11 Erstellung grafischer Übersichtsseiten mit Macromedia
Fireworks 4.0
(ah) Die Wurzel der CD sind insgesamt 6 grafische Seiten, die im Folgenden Übersichtsseiten
genannt werden:
___________________________________________________________________________
Seite 73 von 84
Abbildung 31 Übersichtsseiten
___________________________________________________________________________
Seite 74 von 84
Bevor wir genauer auf die Erstellung eingehen, möchten wir zunächst ein paar Worte über
den Aufbau der Seiten verlieren. Das Hauptmenü unterteilt sich im Wesentlichen in nur 5
Untermenüs, was dem Benutzer eine einfache Navigation ermöglicht. Für bereits
fortgeschrittene Nutzer gibt es noch die Möglichkeit eine Sitemap (unten, Mitte) aufzurufen.
Ein „Beenden“ Button sowie eine Impressumsinformation ist auch vorhanden (links und
rechts unten). Auf den Inhalt der Impressumsseiten gehen wir später genauer ein. Beim
Layout der Seiten haben wir uns an die Farben, bzw. den Aufbau der Homepage des IMTEK
gehalten. Der Wieder Erkennungswert für Nutzer, die die IMTEK Homepage kennen ist auf
jeden Fall gegeben. Auch das IMTEK-Logo bzw. das Logo der Universität Freiburg ist
allgegenwärtig. Ansonsten haben wir uns an die üblichen Layoutrichtlinien gehalten, also
höchstens 2 Schriftarten, nicht zu viele Flächen und sehr gute Lesbarkeit. Als Schriftart kam
ausschließlich die Schrift „Arial“ zur Anwendung. Auf jeder Untergeordneten Seite gibt es
genau 4 weiterführende Links. Da die drei ersten Links den Benutzer direkt ansprechen sollen
sind diese vom unteren, Informationsgeladenen Link etwas abgesetzt. Die Überschrift wie
z.B. „Der Beruf“ ist immer in „Arial-Bold“ gedruckt.
Zur Bearbeitung der auf den Seiten vorhandenen Bilder wurde das bereits besprochene
Programm ULead PhotoImpact genommen. Nachdem nun der Aufbau kurz erklärt wurde,
möchten wir nun auf das Grafiktool Macromedia Fireworks eingehen. Es ist Teil der
bekannten Macromedia Produktfamilie, zu der auch die Programme Dreamweaver und Flash
5 gehören. Es gliedert sich hervorragend in die Webdevelopment Umgebung von
Dreamweaver ein.
Ohne Probleme lassen sich Fireworks-Elemente in Dreamweaver einbinden. Mit ein wenig
Einarbeitung ist es mit Fireworks sehr einfach Webelemente wie z.B. Buttons zu erstellen.
Auch ganze Seiten wir die von uns erstellten sind mit diesem Tool sehr gut zu erstellen. Dabei
war unsere Grundlage immer der blau-schwarze IMTEK Hintergrund. Auf diesen kann man
nun verschiedene Objekte setzen, also z.B. das IMTEK Logo am oberen Rand, der Schriftzug
„SchülerInnen-Information“, das für jede Seite charakteristische Bild oder die einzelnen
Links. Gesetzte Objekte kann man nun auch in Buttons umwandeln. So geschehen bei den
Links. Ändert man ein Objekt in einen Button kann man mehrere Zustände des Objekts
erstellen, welche den DHTML Zuständen „MouseOver“, „MouseDown“ oder z.B.
MouseOverDown“ entsprechen. Es sind dabei Effekte wie „Glühen“, „hervorheben“, 3DEffekte, Farbverläufe oder ähnliches möglich. Beim späteren anwählen des Links wird also
nicht nur die „Hand“ sichtbar, sondern der Link verändert sich auch dementsprechend. Bei
uns entsteht eine strahlende Corona um den Link wenn man mit der Maus darüber ist und
beim Klicken sinkt der Text (2,2) Pixel nach links unten ab. Natürlich kann man auch viel
mehr Effekte kombinieren, aber weniger ist manchmal mehr. Da Fireworks mit Objekten
arbeitet ist ein nachträgliches Ändern sehr einfach. Damit man die Seite verlinken kann wird
die Gesamtgrafik in Slices aufgeteilt, Slices sind Bereiche die einzeln anwählbar sind, denen
man also, entweder gleich in Fireworks oder später im HTML-Editor, Links zuweisen kann.
Ein Button, also DHTML Objekt, ist dabei immer ein Slice. Beim Setzen der Slices sollte
man auf jeden Fall darauf achten, möglichst wenig Flächen zu erzeugen, also verschiedene
Slices von Buttons beispielsweise immer bündig zueinander zu setzen. Ansonsten erhält man
Unmengen an Grafikteilen, die viel längere Ladezeiten haben. Die Seiten kann man beim
Exportieren im qualitativ hochwertigen PNG Format abspeichern oder auch in den
verlustbehafteten Formaten JPeg oder Gif. Dabei erstellt Fireworks eine HTML-Seite und
viele Teilgrafiken den einzelnen Slices entsprechend. Wir haben überwiegend das PNG
Format gewählt, da die Qualität davon überzeugt hat. Hat man nun eine Seite abgespeichert
kann man diese in Dreamweaver sehr einfach über „Einfügen“ – „Fireworks Element“
einbinden.
___________________________________________________________________________
Seite 75 von 84
Neben den bereits erwähnten, so genannten Übersichtsseiten, sind auch die Impressumsseiten
vollständig mit Fireworks entwickelt worden. In vielen anderen Seiten, wie z.B. sämtlichen
Interviewseiten, sind große Teile mit Fireworks entwickelt. Es ist ein sehr nützliches Tool um
ansprechende Seiten zu erstellen und wäre für uns nicht wegzudenken gewesen.
___________________________________________________________________________
Seite 76 von 84
7 Produktionsphasen
(ah) Wie in jedem Softwareprojekt haben auch wir in unserem Multimediaprojekt einige
Teststufen eingebaut. Diese sollten der Evaluation der CD dienen. Bei den Teststufen
unterscheidet man im Allgemeinen zwischen 2 Stadien. Das erste Stadium ist das AlphaStadium. In diesem frühen Stadium sind schon einige Funktionen implementiert und man
kann schon einiges benutzen. Bei Softwareentwicklungen sind die Alphatests meist einem
sehr engen Entwickler- und Betreuerteam vorbehalten. Bei nachfolgenden Betatests wird eine
größere Menge ausgewählter Personen in den Test involviert. In unserem Projekt war
ursprünglich nur ein Alpha Test und nur ein Betatest geplant. Der zweite Betatest wurde, nach
grundlegenden Änderungen und Verbesserungen nach dem ersten Betatest, angesetzt.
7.1 Alpha Test (Stichtag: Sensormesse am 7. Mai 2001)
(ah) Mit dem Termin der Sensormesse am 7.Mai 2001 vor Augen haben wir unsere erste
Produktionsphase durchgeführt. Begonnen hat das Projekt am 1. März 2001. Es waren also
etwas mehr als 2 Monate Zeit eine funktionierende Vorabversion unserer CD zu erstellen, die
auf der Sensormesse präsentiert werden konnte. Viel Zeit ein großes Testteam
zusammenzusuchen hatten wir nicht, denn am Freitag, den 4. Mai, nachmittags, sollte die
Vorabversion fertig sein. Noch an diesem Tag haben wir etliche Teile in die CD eingebunden,
Texte verarbeitet, Bilder und Animationen eingestellt. Ein abschließender Check aller
Funktionen und Links wurde von uns selber durchgeführt. Alle Animatonen wurden noch mal
durchgespielt und alles angeklickt, was anzuklicken war. Nachdem alles nach bestem Wissen
und Gewissen überprüft war, haben wir alles auf CD gebrannt und diese mit „Alphaversion 7.
Mai 2001“ beschriftet. Unser Glück war, dass die CD nur auf einem einzigen Rechner laufen
musste, den wir selber zuvor entsprechend installiert hatten. Schnell haben wir noch die
aktuellste Version des Internet Explorer installiert, das Flash Plug-In installiert und auch auf
diesem Rechner die CD noch einmal angespielt. Alles hat funktioniert. Auf der Sensormesse
wurde die CD dann einem ersten Praxistest unterzogen, welchen wir leider mangels eigener
Anwesenheit nicht verfolgen konnten, aber offensichtlich ging alles ganz gut. Nach diesem
Stichtag sind uns jede Menge Dinge aufgefallen, die noch zu ändern und verbessern waren.
7.2 Beta Test 1 (Stichtag: 1. Juni 2001)
(ah) Nach dem sehr stressigen Alphatest und der nur sehr kurzen Zeit bis zum Beta Test der
zu Aller erschrecken auch noch der Final Beta Test sein sollte, ahnten wir schon, dass es
knapp wird, zu knapp! Da wir aber unbedingt mit unserer CD noch die Abiturienten des
Jahrgangs 2001 erwischen wollten, und diese aber Anfang Juli fertig waren, arbeiteten wir ab
dem 7. Mai mit mehr als doppelter Intensität und hatten schließlich am 1. Juni eine sehr gute
und lauffähige Version fertig. Vor dem endgültigen CD Mastering haben wir die CD auf
verschiedensten Systemen getestet, darunter ein IMac G3 und ein G4 (aus unserem Büro)
beide haben wir sowohl mit Internetexplorer als auch Netscape getestet. Die CD lief auf den
Macs mehr oder weniger rund. Auf dem Unix Maschinen im Informatik Pool lief die CD
ebenfalls ganz ordentlich, wenn auch nicht 100%ig. So richtig gut lief sie auf jeden Fall auf
unserem PC mit Internet Explorer 5.5. Das Mastering war diese Mal besonders aufwendig, da
die CD auch auf Macs laufen sollte, der Mac aber ein anderes CD Format hat. So mussten wir
eine Hybrid-CD erstellen, die von beiden Systemen gelesen werden konnte. Der
Betatesttermin wurde schon ca. 1 Woche zuvor im gesamten Institut bekannt gegeben und
jeder Lehrstuhl bekam eine oder mehrere Test CDs am Stichtag. Ein Evaluationsbogen für
Kritik und Verbesserungsvorschläge war ebenfalls beigelegt. Jede CD wurde außerdem
nummeriert, damit eine einzelne eventuelle Fehlpressung identifiziert werden konnte. Nach
___________________________________________________________________________
Seite 77 von 84
dem Start des Betatest warteten wir die kommenden Tage gespannt auf die ersten Rückläufer.
Diese kamen auch, einige waren recht angetan, andere wiederum hatten große Probleme
schon bei der Installation. Ein eigens von Herrn Paul beauftragter Mitarbeiter hat die CD
zusätzlich 12 Stunden lang auf Herz und Nieren getestet. Ein wichtiger, wenn auch für uns
erschreckender Test. Grundlegende Änderungen waren notwendig geworden, einige für uns
verständliche, andere wiederum nicht. Da die Aufzählung aller Änderungen diesen Rahmen
sprengen würde, wollen wir nur einzelne wichtige nennen: Die Verzeichnisstruktur wurde
ausbalanciert, d.h. die einzelnen Zweige waren dann gleichmäßiger verteilt. Viele Tippfehler
wurden gefunden. Ein Inhaltverzeichnis in Form einer Sitemap wurde gefordert. Viele Tester
hatten in Ermangelung einfachsten technischen Verständnisses größte Probleme bei der
Installation, was eine detaillierte Installationsbeschreibung und noch einfachere
Benutzerführung erforderte. Auch diesem Wunsch wurden wir danach gerecht. Gänzlich
unmöglich war das Abspielen der CD für Benutzer des Onlinedienstes AOL. Da AOL nur
über eine proprietäre Softwareschnittstelle ins Internet geht und auch den eigenen
Internetbrowser automatisch als Standard erzwingt, war ein Abspielen dort fast unmöglich.
Ein bis heute ungelöstes Problem. Das Abspielen der ursprünglich geplanten Quicktime
Videos war wegen unvereinbarer bzw. zu langsamer Plug-Ins der verschiedenen Systeme
auch nicht geglückt und wurde somit aus der CD herausgenommen. Mittlerweile gibt es
allerdings Software, die Filmsequenzen ins Flash Format konvertieren kann. Eine gute
Herausforderung für ein neues Entwicklerteam. Neben dem Geraderücken schiefer
Fotoaufnahmen gab es noch zahlreiche kleinere andere Änderungen und Verbesserungen.
Dies alles waren Änderungen die auch in unserem Sinn waren. Weniger in unserem Sinn war
der Ruf nach mehr Information, denn genau das war es, was wir vermeiden wollten, ein
Informationsgeladenes Megawerk, welches man nur mit akademischem Grad lesen kann.
7.3 Beta Test 2 (Stichtag: 31. Juli 2001)
(ah) Als nach dem ersten Betatest klar war, dass wir das Projekt niemals in einer Woche fertig
bekämen, da die Menge der Änderungen einfach zu riesig war, konnten wir glücklicherweise
die Produktionsgeschwindigkeit etwas drosseln und uns mit mehr Bedacht auf die nun neue
Arbeit stürzen. 2 ganze Monate hatten wir nun noch einmal Zeit unser Projekt zur Perfektion
zu bringen. Nahezu jeder Wunsch der beim ersten Test geäußert wurde, wurde berücksichtigt.
Alle Inhalte wurden ausführlichst überarbeitet und verbessert, neue Bilder ergänzt, Texte
geändert, Inhalte umgestellt, das Layout verbessert und Teile hinzugefügt. Der 31.Juli kam.
Ergebnis war eine für uns und auch die Tester rundum gute Informations-CD. Bis auf wirklich
winzige Korrekturen war die CD fertig und konnte somit 14 Tage später in Produktion und
wir in unseren wohlverdienten Sommerurlaub gehen.
___________________________________________________________________________
Seite 78 von 84
8 Das fertige Produkt
8.1 Rechtliches
(ah) Ein sehr wichtiger Aspekt des Projekt ist die Wahrung der Rechte. Sowohl unsere
Rechte, als auch die Rechte Dritter dürfen nicht verletzt werden. Unser Copyright haben wir
auf der Seite „Rechtliches“ ausführlich dargelegt. Das wohl auffälligste fremde
Lizenzmerkmal auf unserer CD ist das bereits auf dem CD Cover enthaltene Macromedia
Flash Enabled Logo. Dieses Logo muss auf dem Cover und auf der CD aufgedruckt sein,
damit man ermächtigt ist, eine Installationsversion des Macromedia Flash-Players auf der CD
zur Verfügung zu stellen. Ein Grund warum wir auf die Implementierung des Quicktime
Players verzichtet haben, waren die Lizenzrechte von Apple, welche einfach zu
undurchsichtig waren. Microsoft macht es dem Entwickler sehr einfach und stellt ein fertiges
Tool zur Erstellung einer spezifischen Internet Explorer Installation. Man bekommt beim
Anmelden direkt eine Lizenznummer zugewiesen und darf dann mit Hilfe des „Microsoft
Internet Explorer Administration Kit“ kurz MSIEAK eine individuelle Internet Explorer
Installation erstellen. Den MSIEAK gab es dabei sowohl für Mac als auch für Windows
Umgebungen. Für die Linux/Unix Welt kam nur der Netscape in Frage, da es dafür keinen
Internetexplorer gab. Beim Netscape fanden wir keine speziellen Lizenzbedingungen. Zur
Erstellung des Autostarts nutzten wir das Programm DocStart, dessen Verwendung uns der
Autor freundlicherweise genehmigte. Der Aufmerksame Betrachter der CD wird sicher
feststellen, dass bei jedem Bild in Flash Animationen die Quellen dabei stehen. Denn auch auf
Bildern sind Rechte die es nicht zu verletzen gilt. Zwar haben uns die jeweiligen Firmen die
Bilder großzügigerweise zur Verfügung gestellt, dennoch darf man sich diese natürlich nicht
zu Eigen machen. Die Rechte der Bilder ohne Quellennachweis sollten bei uns oder beim
Institut für Informatik liegen, Denn viele Inhalte stammen von deren bereits entwickelten
„INFOrmatik CD. Auf jeden Fall sollte jeder Entwickler eines solchen Projektes bei der
Nutzung fremder Quellen stets darauf achten, keine fremden Inhalte zu „klauen“ sondern sich
mit dem jeweiligen Rechteinhaber in Verbindung zu setzen. Im Allgemeinen sind diese sehr
kooperativ und man vermeidet so späteren Ärger.
8.2 CD Cover
(ah) Das geplante CD Cover sollte sich im Aussehen von der gesamten CD nicht
unterscheiden. So haben wir auch hier den Standardhintergrund als Grundlage verwendet.
Einzig das eingesetzte Programm sollte für das Cover noch
professioneller sein. Das Werkzeug unserer Wahl ist hier
das professionelle Adobe Photoshop 6 gewesen. Durch die
Verwendung verschiedener Ebenen kann man Teile eines
Bildes noch besser zusammenfassen und bearbeiten als bei
Objekttools wie Fireworks. Ebenen können z.B. teilweise
Transparent gewählt werden. Ansonsten hat Photoshop
einen sehr ähnlichen Funktionsumfang wie Fireworks. Vor
allem die Effekte sind annähernd gleich, denn es gibt das
bereits erwähnte „Eye Candy 4000“ Plug-In auch für Adobe
Photoshop. Vier Teile mussten insgesamt entworfen
Abbildung 32 CD Aufdruck
werden: Das Frontcover, jeweils Außen- und Innenseite,
das Backcover und der Aufdruck für die CD selbst. Alle
wichtigen Startinformationen sollten enthalten sein. Das Cover musste aber auf jeden Fall
ansprechend wirken und professionell aussehen.
___________________________________________________________________________
Seite 79 von 84
Auf die CD sollte die wichtige Information, was der Nutzer mit der CD machen muss, um sie
starten zu können. Also bei Windows PCs einfach einlegen und auf das hoffentlich nicht
deaktivierte Autostart warten. Von einem Nutzer der dieses deaktiviert hat, erwarten wir
ausreichende Kenntnisse, die CD trotzdem zu starten, nämlich mit start.html im CD
Hauptverzeichnis. Genauso müssen es die MAC und Unix Nutzer ohnehin machen, da es ein
Autostart hier nicht gibt. Die anderen Elemente wie Logos und Titel sind auf allen anderen
Coverteilen ebenfalls enthalten. Es war wichtig zu sehen, die CD kommt vom Institut für
Mikrosystemtechnik, also Imtek aber auch von der Universität Freiburg als Oberinstanz. Der
Begriff „Fakultät für Angewandte Wissenschaften“ sollte, wie in der CD selbst, auftauchen.
Das Logo Macromedia „Flash-Enabled“ war eine Lizenzoption von Macromedia, um den
Flash-Player auf der CD zur Verfügung zu stellen.
Das Backcover ist im „Look and Feel“ dem Druck auf der
CD entsprechend. Nur steht hier wie auch auf anderen
CDs üblich, die Mindestsystemanforderung, die
Kontaktadresse und was die CD ist, eine „InformationsCD für Schülerinnen und Schüler. Ein kurzer in die
Mikrosystemtechnik einleitender Text steht gleich
darunter.
Als Systemanforderungen haben wir einen Pentium 200
MMX mit Internet Explorer 5.5 oder Netscape 4.7, als
installierten Standardbrowser, angegeben. Des Weiteren Abbildung 33 CD Inlay
sollte er mindestens über ein 32-fach CD-ROM Laufwerk
verfügen um die CD in ausreichender Performance zu laden. 32 MB Hauptspeicher und eine
Grafikkarte mit 800x600 bei 256 Farben sollten bei den meisten Rechnern ohnehin vorhanden
sein. Eine Soundkarte zum Abspielen unserer Töne etc. ist ebenfalls fast überall eingebaut.
Für den Mac verlangten wir wegen Kompatibilitätsproblemen neben den PC Attributen noch
einen Netscape 6.0.
Der wichtigste Teil des Covers ist
das Frontcover. Es fällt dem
Betrachter als Erstes ins Auge.
Deshalb müssen hier alle wichtigen
Elemente enthalten sein. Die beiden
Uni-Logos sind selbstverständlich,
ebenso der Schriftzug der Fakultät.
Die
CD
selber
nennt
sich
„Faszination Mikrosystemtechnik“,
was durch ein Nanobild eines
staubkorngroßen
Zahnrades
unterstrichen wird. Die CD ist eine
Abbildung 34 Booklet aussen
„Informations-CD für Schülerinnen
und Schüler“ was hier auf der Titelseite gleich unübersehbar klar gemacht wird. Auf der
linken, nur beim aufklappen der CD sichtbaren Seite stehen weitere
Informationsmöglichkeiten sowie wichtigsten Facts zum Studium
wie Studienzeit,
Bewerbungszeitraum, NC und Abschluss.
Da das Angebot der Druckerei für den Druck auch eine Innenseite des Frontcovers, allerdings
in schwarz/weiß vorsah, füllten wir auch dieses mit Information. Da die Chance für den
Benutzer diese Information zu Entdecken deutlich geringer war, durfte die hier enthaltene
___________________________________________________________________________
Seite 80 von 84
Information allenfalls redundant sein.
So haben wir hier noch einmal die
Publishers, also das Imtek nebst
Adresse aufgeführt, sowie die Editors,
also unsere Namen. Die rechte Seite
haben wir mit dem am Anfang beim
Intro gesprochenen Text geschmückt.
Vor dem Entwurf eines solchen
Covers, ist es auf jeden Fall wichtig die
Modalitäten mit der betreffenden
Abbildung 35 Booklet innen
Druckerei
abzusprechen,
Zwecks
Format, Farbpalette und benötigter Auflösung. Jetzt musste nur die CD noch für das
Presswerk gemastert werden. Die beiden Teile konnten dann zusammen in Produktion gehen.
8.3 Mastering und Vervielfältigung
8.3.1
Vorwort
(mk) Das Brennen hat sich als relativ schwierig erwiesen, da wir die verschiedenen Browser
als Installationsprogramme auf die CD legen wollten. Hierbei mussten zwei
Betriebssystemformate auf dieselbe CD gebracht werden, und zwar Windows und Macintosh.
Der wesentliche Unterschied zwischen diesen zwei Systemen ist die Erkennung des
Dateityps. Bei Windows wird der Dateityp schlicht über die Dateiendung erkannt,
wohingegen bei Macintosh diese Information in einem zusätzlichen Header
(Informationsblock am Anfang jeder Datei) abgespeichert wird.
Gemischte Datei-Formate auf der Festplatte des Uni-Servers abzulegen war kein Problem, da
dies durch den so genannten Samba-Server verwaltet wird, der sozusagen die Dateien immer
richtig speichert und einliest. Allerdings kann man, wenn man von Windows her auf
Macintosh-Dateien zugreift, mit diesen nicht viel anfangen, da Windows den Header nicht
interpretieren kann. Somit ist es nicht möglich die CD auf einem Windows-Rechner zu
brennen. Andererseits ist es aber möglich die CD auf einem Macintosh-Rechner zu brennen,
da Macintosh kein Problem mit den Windows-Dateiendungen hat.
Bemerkung:
Die Macintosh-Informationen werden im Windows-Explorer und unter UNIX durch
Verzeichnisse wie „DesktopFolderDB“ oder „resource.frk“ dargestellt. Diese Ordner dürfen
nicht gelöscht werden, da die Installationsprogramme dann unter Macintosh nicht mehr
ausführbar sind.
8.3.2
Brennen mit Toast
(mk) Als Brennprogramm haben wir schließlich „Toast“ (Macintosh) verwendet. Allerdings
muss man auf die richtigen Einstellungen achten:
-
ISO 9660
Mac-Extensions aktivieren
„Mac-Dateinamen“ erlauben
Da ich leider vergessen habe die Einstellung zu dokumentieren, möchte ich hier noch kurz
erläutern, wie man feststellen kann, ob die CD richtig gebrannt wurde:
___________________________________________________________________________
Seite 81 von 84
-
Beim Betrachten im Dateiexplorer von Macintosh, müssen die Bildsymbole (Icons)
für die Programme erscheinen.
Die Datei- und Verzeichnisnamen dürfen am Ende nicht abgeschnitten sein.
Installationsprogramme müssen sich sowohl unter Windows als auch unter Macintosh
starten lassen.
Am Besten noch mal mit dem Browser durch die CD klicken und testen, ob alles
funktioniert.
Funktionieren alle oberen Tests, so ist die CD fertig zum Vervielfältigen. Allerdings muss
darauf geachtet werden, dass dann später beim Aufgeben in eine Druckfirma die CD nicht
vorher auf eine z.B. Windows-Festplatte per Datei-Explorer kopiert wird, da dann eventuell
Informationen (z.B. Macintosh-Header-Information) verloren gehen.
8.3.3
Vervielfältigung
(ks) Für das Brennen der CD hatten wir ein verblüffend günstiges Angebot von der Freiburger
Firma Klangpark erhalten. Für eine Auflage von 3.000 Stück inklusive Glas-Mastering,
Filmen für Booklet, Inlaycard und Label mussten knapp 5000,-- DM bezahlt werden.
Wichtig ist, wenn man Cover, Booklet und Label selbst gestaltet, sich wegen der verwendeten
Farbtabelle und des Formates mit der Druckerei abzusprechen, die die Filme herstellt.
___________________________________________________________________________
Seite 82 von 84
9 Schluß
(ks) Damit dass die CD- ROM erstellt und vervielfältigt wurde, war unsere Arbeit noch nicht
ganz beendet, es wurde noch ein Plan für den Vertrieb erstellt, Adressen vom
Oberschulamtbezirk Freiburg (140 Gymnasien) und Adressen von den Arbeitsämtern
angefordert, Ansprechpartner/innen wurden gesucht und Vorlagen für Pressemitteilungen
erstellt.
Vieles haben wir nur angerissen und hoffen dennoch, dass wir mit dieser Ausarbeitung
zweierlei Ansprüchen gerecht werden konnten, einmal wollten wir darstellen, welche
Prozesse die Entwicklung einer CD-Rom begleiten, was für Entscheidungen zu treffen sind
und wie wir vorgegangen sind. Außerdem wollten wir ein Dokument erstellen, mit dem evt.
Nachfolger von uns verstehen können, was wir wo und wie gemacht haben, um selbst an der
Info-CD Mikrosystemtechnik weiterarbeiten zu können.
Die Arbeit hat uns Spaß gemacht und wir hoffen, dass sie auch all denn Spaß macht, die sie
lesen und damit arbeiten
Das PR-TEAM
___________________________________________________________________________
Seite 83 von 84
10 Abbildungsverzeichnis
Abbildung 1 Übersichtsseite in der ersten Ebene..................................................................... 13
Abbildung 2 Der Gliederungszweig "Die Mikrosystemtechnik"............................................. 15
Abbildung 3 Der Gliederungszweig "Das Studium"................................................................ 16
Abbildung 4 Der Gliederungszweig "Der Beruf" ................................................................... 17
Abbildung 5 Der Gliederungszweig "Der Beruf" .................................................................... 18
Abbildung 6 Der Gliederungszweig "Und Du"........................................................................ 19
Abbildung 7 Zeitraster der tatsächlich benötigten Zeit............................................................ 20
Abbildung 8 Unser Büro .......................................................................................................... 22
Abbildung 9 Layout der Inhaltsseiten ...................................................................................... 26
Abbildung 10 Frameaufbau...................................................................................................... 27
Abbildung 11 Layout „Bild/Text/Links“ ................................................................................. 28
Abbildung 12 Layout "Nur Rolltext" ....................................................................................... 28
Abbildung 13 Layout "Flash zentriert" .................................................................................... 28
Abbildung 14 Universallayout ................................................................................................. 29
Abbildung 17 Interview Micronas ........................................................................................... 42
Abbildung 18 Interview Sensirion ........................................................................................... 42
Abbildung 19 Interview Ruther................................................................................................ 42
Abbildung 20 Flash 5 Desktop................................................................................................. 45
Abbildung 21 Beispiel Flash-Animation "...ist winzig"........................................................... 47
Abbildung 24 Beispiel: Auf einander folgende Szenen bei Flash-Animationen ..................... 51
Abbildung 25 Navigationsleiste ............................................................................................... 52
Abbildung 26 Direkte Hyperlinks auf den Seiten .................................................................... 52
Abbildung 27 Gekürzter Navigationsbaum.............................................................................. 53
Abbildung 28 SiteMap (links im Bild)..................................................................................... 53
Abbildung 29 Beispiel für Rolltext .......................................................................................... 61
Abbildung 30 Flussdiagramm der Installationshinweise ......................................................... 69
Abbildung 31 Übersichtsseiten ................................................................................................ 74
Abbildung 32 CD Aufdruck…………………………………………………………………. 78
Abbildung 33 CD Inlay……………………………………………………………………….79
Abbildung 34 Booklet aussen………………………………………………………………...80
Abbidlung 35 Booklet innen………………………………………………………………….81
___________________________________________________________________________
Seite 84 von 84

Faszination Mikrosystemtechnik

Transcription

Similar documents

S0 - Tiptel

Altova UModel 2016

Ultra korregd Alder

Inkajournal 09 - Staufer

CD-Autostart

Freaks (1932) - Das Dokument des Grauens