KAPITEL 2 Arbeitsumgebung

Bei der Arbeitsumgebung handelt es sich um Websites zum Lernen im Internet. Es ist jedoch nicht der eigentlich zu erlernende Inhalt gemeint, sondern die Umgebung in welcher der Inhalt presentiert wird. Hierzu zählen unter anderem das globale optische Erscheinungsbild, die Navigation durch die Inhalte, das Inhalts- und Stichwortverzeichnis und die Bildschirmaufteilung. Das Einpflegen der Inhalte in die Arbeitsumgebung wird mit Hilfe des ® Generators geschehen. Durch den Einsatz des Generators wird auch sichergestellt, dass alle Inhalte ein einheitliches Layout haben.

Rahmenbedingungen

Zielgruppe

Die Arbeitsumgebung soll von Gastronomen genutzt werden, die mit der grundsätzlichen Bedienung von Internetseiten vertraut sind. Die Inhalte sollen Gastronomen ansprechen, die sich im Internet fortbilden wollen. Da der Schwerpunkt der Inhalte im Bereitstellen von Lernunterlagen liegt, sollte die Umgebung nicht verspielt sein, sondern den Anwender mit grundlegenden Funktionen versorgen.

Plattform

Um einen einfachen und unkomplizierten Einsatz gewährleisten zu können, muss die Arbeitsumgebung sowohl unter Netscape und Microsoft Browsern ab Version 3.0 lauffähig sein. Als Betriebsysteme sollen Windows 9x, Windows NT und Mac OS unterstützt werden. Die Inhalte werden im Internet angeboten.

Funktionen

Die Funktionen der Arbeitsumgebung erstrecken sich über die bereits genannten Aufgaben wie die Navigation durch die Inhalte und das Inhalts- und Stichwortverzeichnis. Hierzu kommt noch, die Möglichkeit einzelne Seiten zu drucken. Ebenso eine Statusanzeige mit Informationen zum Lernfortschritt, besuchte Kapitel und dem aktuellen Kapitel. Wichtig ist auch eine Hilfefunktion zur Bedienung der Arbeitsumgebung. Wünschenswert wäre, dass zusätzlich noch Funktionen zur Verfügung stehen, die Möglichkeiten bieten wie Suchen im Stichwortregister oder eine Volltextsuche, Erstellen von Notizen am Seitenrand, kapitelbezogenes Diskussionsforum und ein setzen von Lesezeichen.

Da die Browser zur Darstellung von Inhalten, die über Text und Bild hinausgehen, Plug-Ins benötigen, muss sichergestellt werden das fehlende Plug-Ins das Erscheinungsbild nicht stören.

Folgerungen

Zusammenfassend ergibt sich aus den beschriebenen Kriterien Folgendes:

Um eine solche Fülle von Informationen und Möglichkeiten übersichtlich darzustellen, ist es erforderlich, einen gut strukturierten Aufbau sicherzustellen. Es muss sparsam mit Grafiken umgegangen werden, um einem überladenen, unübersichtlichen und umständlich bedienbaren Eindruck entgegen zu wirken.

Die Arbeitsumgebung muss intuitiv bedienbar sein, damit der Lernende seine volle Aufmerksamkeit auf das zu Lernende lenken kann.

Funktionen wie ein Index oder ein Stichwortverzeichnis müssen nicht ständig sichtbar sein, da diese während des normalen Lernvorganges nicht gebraucht werden. Solche Funktionen werden nur zum Nachschlagen benötigt.

Sollen einzelne Abschnitte gedruckt werden, so wird nur der Inhalt gedruckt, nicht aber die umliegende Navigation.

Die Programmierung der Arbeitsumgebung muss sich auf Funktionen beschränken, die sowohl der MSIE als auch Netscape verstehen. Um auch die Möglichkeiten der neueren Browsergenerationen nutzen zu können, müssen Alternativen für ältere Browser eingebaut werden.

Da die Arbeitsumgebung und deren Inhalte im Internet bereitgestellt werden, ist es wichtig, die Größe der Arbeitsumgebung niedrig zu halten, um unangenehm lange Ladezeiten zu vermeiden. Dies muss während der gesamten Entwicklung berücksichtigt werden.

In Bezug auf Plug-Ins ist zu bemerken, dass für fehlende Plug-Ins Alternativen einspringen. Dies könnte bei einem Film zum Beispiel ein Bild sein.

Entwurf

Die Erstellung der Arbeitsumgebung gliedert sich in zwei Teile:

Obwohl beide Teile fest miteinander verbunden sind, so werden sie doch unabhängig voneinander entworfen.

Der getrennte Entwurf wird jedoch dadurch eingeschränkt, dass eine relativ umfangreiche Schnittstelle zwischen beiden Teilen nötig ist. Da diese Schnittstelle überwiegend durch das Layout und der damit verbundenen Aufteilung in einzelne Bereiche bestimmt wird, kann dieses auch nur in einem sehr engen Rahmen nachträglich noch geändert werden.

Layout

Das Layout ist der Teil der Arbeitsumgebung, mit dem der Anwender in Berührung kommt. Daher muss es übersichtlich und ansprechend sein und eine intuitive Bedienung ermöglichen. Es soll nur wirklich benötigte und sinnvolle Bedienelemente zur Verfügung stellen, um dies zu gewährleisten.

Weder dürfen wichtige oder benötigte Bedienungselemente fehlen, noch dürfen zu viele Bedienungselemente vorhanden sein. Der Anwender soll nicht dazu animiert werden, mit der Arbeitsumgebung herumzuspielen, und doch muss diese über ein ansprechendes Design verfügen, um einen seriösen Eindruck zu vermitteln und den Anwender nicht abzuschrecken.

Das Layout bestimmt jedoch nicht nur die Arbeitsumgebung und die Bildschirmaufteilung. Auch die Inhalte die mit Hilfe der Arbeitsumgebung vermittelt werden sollen, werden vom Layout mitbestimmt. Schließlich sollen sie ja im Rahmen der Arbeitsumgebung leicht lesbar und angenehm zu betrachten sein. Das Layout bestimmt also auch die grundlegende Darstellung des Inhaltes.

Ein letzter Punkt, der durch das Layout bestimmt wird ist die Farbgebung. Auch dieser Teil fließt sowohl in die Arbeitsumgebung als auch in die Inhalte ein.

Bedienelemente

Aus den Anforderungen ergibt sich, dass die Arbeitsumgebung über folgende Bedienungselemente verfügen muss:

  • Weiter"- Button
  • Zurück"- Button
  • Hilfe"- Button
  • Drucken"- Button
  • Inhalt"- Button (da das Inhaltsverzeichnis nicht ständig sichtbar sein soll)
  • Index"- Button (da das Indexverzeichnis nicht ständig sichtbar sein soll)
  • Suchen"- Button mit Eingabefeld für Suchbegriff

Hinzu kommen noch folgende Anzeigen:

  • Besuchte Seiten
  • Bestandener Wissenstest

Beim Erstellen des Layouts ist also zu beachten, dass die genannten Elemente sinnvoll plaziert werden.

Zusätzliche Fenster

Immer wenn ein zusätzliches Fenster geöffnet werden muss, sollte dieses einem einheitlichen Erscheinungsbild entsprechen. Zusätzliche Fenster werden z.B. für das Inhaltsverzeichnis, das Index oder die Hilfeseite benötigt.

Es muss also auch ein Layout für zusätzlich geöffnete Fenster festgelegt werden.

Funktionalität

Dieser Teil beschreibt, welche Funktionalität die Arbeitsumgebung bieten sollte.

Navigation

Einen wesentlichen Bestandteil der Funktionalität macht die Navigation aus. Es muss eine Funktion zur direkten Anwahl eines beliebigen Kapitels zur Verfügung stehen sowie eine Funktion zum sequenziellen Durchlaufen der Inhalte. Natürlich muss auch vom Ergebnis der Suchfunktion aus direkt in des entsprechende Kapitel gesprungen werden können.

Um das Nachschlagen zu vereinfachen, sollten bei einem Rollover über ein Kapitelllink Informationen zu diesem angezeigt werden. Dies könnte durch eine Kurzbeschreibung zu den Kapiteln sowie durch ein beschreibendes Bild geschehen.

Um die Navigation zu erleichtern, sollte kenntlich gemacht sein, welche Kapitel zu einem früheren Zeitpunkt bereits besucht wurden.

Inhalt

Das Inhaltsverzeichnis sollte in einem eigenen Fenster dargestellt werden, da dieses während des normalen Lernens nicht benötigt wird, jedoch auch parallel zum eigentlichen Inhalt dargestellt werden soll.

Es ist sinnvoll, das Inhaltsverzeichnis nicht einfach als eine lange Liste darzustellen, da geplant ist umfangreiche Lerninhalte einzubinden. Eine lange Liste wäre dann sehr unübersichtlich. Besser ist in diesem Fall, wenn beim ersten Aufruf nur die Hauptthemen dargestellt werden und erst nach einem Mausklick weitere Unterkapitel sichtbar werden.

Index

Es wehre gut das Index ebenfalls in einem eigenem Fenster darzustellen. Auch dieses wird nur selten benötigt und sollte parallel zu dem eigentlichen Inhalt sichtbar sein. Es sollte wie für ein Index üblich alphabetisch sortiert sein und über Sprungmarken zu den einzelnen Buchstaben verfügen.

Lesezeichen

Lesezeichen brauchen nur im Index sichtbar sein, um unnötig viele Informationen zu vermeiden. Sie sollten lokal gespeichert werden. Es sollten mehrere Lesezeichen gesetzt werden können. Es wäre sinnvoll, wenn das zuletzt besuchte Kapitel anhand eines Lesezeichens erkennbar wäre.

Notizen

Es muss auch die Möglichkeit bestehen Notizen einzugeben, welche am rechten Bildschirmrand angezeigt werden. Solche Notizen sollen lokal gespeichert werden und bei einer späteren Betrachtung des Kapitels wieder angezeigt werden.

Wissenstest

Die erreichten Ergebnisse bei Wissenstests müssen lokal gespeichert werden. Eine Auswertung sollte möglichst zu jeder einzelnen Frage möglich sein. Fehlerhaft beantwortete Fragen sollten Verweise auf die Textstellen anbieten, wo der entsprechende Stoff noch einmal nachgelesen werden kann.

Der Lernende sollte ständig einen Überblick darüber haben, in wieweit er den zu lernenden Stoff bereits verstanden hat und in welchen Kapiteln noch Lücken sind.

Drucken

Es ist sinnvoll, die Druckfunktion so zu gestalten, dass sie es erlaubt den Inhalt einzelner Kapitel auszudrucken. Die Navigationselemente sollen jedoch nicht mit gedruckt werden.

Hilfe

Die Hilfeseite sollte Informationen zur Bedienung der Arbeitsumgebung leicht verständlich und übersichtlich zur Verfügung stellen. Hinzu kommen Informationen zum Herausgeber.

Plug-Ins

Es ist wichtig sicherzustellen, dass für alle Inhalte, die über einfachen Text oder Bilder hinaus gehen die benötigten Plug-Ins existieren. Fehlt ein Plug-In so muss ein alternatives Element einspringen, bzw. dieses Element muss ganz weggelassen werden. Es soll nicht vorkommen, dass fehlende oder zu alte Plug-Ins zu Fehlermeldungen führen oder ständig Meldungen erscheinen, die den Benutzer auffordern, das entsprechende Plug-In zu installieren.

Umsetzung

Nachdem nun die Rahmenbedingungen und der Entwurf abgehandelt wurden, geht es auch an die Umsetzung der Arbeitsumgebung. Der folgende Teil beschreibt die Feinheiten und die technischen Details.

Umgebung

Bevor ich mich jedoch intensiv mit der Arbeitsumgebung auseinander setze und Entscheidungen zur Umsetzung treffe, gilt es, die Sprachen, in welchen die Arbeitsumgebung erstellt wird, festzulegen. Erst danach macht es Sinn, sich mit den Feinheiten zu beschäftigen.

Sprachen

Dies scheint auf den ersten Blick widersprüchlich. Es kommt jedoch nicht nur Html zur Erstellung von Websites in Betracht. Genauso könnte ich ja auch Xml oder Xhtml verwenden. Hierzu kommt noch die Möglichkeit der serverseitigen Unterstützung der Websites, welche wieder eine Fülle von weiteren Sprachen wie PHP oder Perl zur Verfügung stellt.

Ich habe mich entschieden, soweit wie möglich auf serverseitige Lösungen zu verzichten. Damit möchte ich die Möglichkeit offen halten, dass die Arbeitsumgebung auch offline ohne eine Verbindung zu einem Webserver lauffähig ist. Es ist in Deutschland immer noch üblich, dass Benutzer des Internets für die Zeit bezahlen müssen, die sie online sind. Es ist unwahrscheinlich, dass jemand entspannt lernt, wenn er immer im Hinterkopf die Kosten sieht. Ist die Website in ihren Grundfunktionen schon auf einen Webserver angewiesen, würde dies ein Offline Arbeiten von vornherein ausschließen.

Die Arbeitsumgebung soll also die grundlegende Funktionalität auch ohne serverseitige Unterstützung gewährleisten. Diese Einschränkung lässt weiterhin offen, dass für Funktionen die während des normalen Lernens nicht benötigt werden, z.B. eine Volltextsuche, eine serverseitige Unterstützung erforderlich ist.

Die Arbeitsumgebung soll in Html erstellt werden. Durch diese Entscheidung stelle ich sicher, dass auch ältere Browser sie darstellen können. Selbst der Einsatz von Dhtml würde Browser der Dreier-Generation ausschließen. Einer Erweiterung der Möglichkeiten durch den Einsatz von JavaScript spricht nichts entgegen, jedoch darf auch hier nur der Befehlssatz benutzt werden, der auch von älteren Browsern unterstützt wird. Auch Java-Applets dürfen zum Einsatz kommen, sollten jedoch nur wenn nötig eingesetzt werden, da dies die Ladezeiten steigern würde.

Serverseitig sollte soweit möglich nur Perl zum Einsatz kommen. Perl wird von fast allen Webspace Providern unterstützt und führt von daher kaum zu Schwierigkeiten, wenn die Webseite auf einen anderen Server portiert werden soll. Die Portierbarkeit auf andere Server als den, den ich zum Testen einsetze, ist erforderlich, da es nicht sicher ist, dass der Kunde, für den die Webseite erstellt wird, dauerhaft bei dem selben Webspace Provider bleibt.

Layout

Auch das Layout ist nicht völlig sprachenunabhängig. Würde beispielsweise die Arbeitsumgebung teilweise mit Flash realisiert werden, so könnten schon beim Layout wesentlich umfangreichere dynamische Elemente eingeplant werden als bei dem einfachen Einsatz von Html.

Globales Erscheinungsbild

Da die Arbeitsumgebung ein Teil von Gastromarketing ist, soll sie auch als ein solcher erkannt werden. Dies erreiche ich durch eine Farbgebung, welche sich an die der bestehenden Gastromarketing-Seiten orientiert.

Die Weiterbildungsseiten, die in der Arbeitsumgebungenthalten sind, werden über einen Link von Gastromarketing erreicht werden. Die Arbeitsumgebung soll in einem eigenen Fenster laufen. Um anzudeuten das es sich nur um einen Teil von Gastromarketing handelt, soll das Fenster der Arbeitsumgebung kleiner als das von Gastromarketing sein.

Aufteilung

Die Aufteilung beschreibt, wo welche Bedienelemente plaziert werden. Hierzu habe ich mehrere Entwürfe (Skizzen) gemacht und diese mit dem Creative Director vom Kiwi besprochen. Zu dem Entwurf, für den wir uns entschieden haben, habe ich dann die in der Siehe Das Layout der Arbeitsumgebung. und Siehe Das Layout für Fenster. dargestellten Vorlagen vom Screendesigner bekommen.

Das Layout der Arbeitsumgebung
Das Layout für Fenster

Diese Vorlagen wurden vom Designer in Photoshop erstellt und dienen bei der Implementierung als Richtlinie für die Farbwahl und die Positionierung der einzelnen Elemente.

Beschreibung

Links oben befinden sich die grundlegenden Bedienungselemente. Rechts daneben wird eine Übersicht über die zur aktuellen Lerneinheit existierenden Kapitel dargestellt. Über diese Buttons ist auch zu erkennen, welche Kapitel / Unterkapitel bereits besucht wurden und wo noch Übungen zu absolvieren sind. Ganz rechts wird ein Bild gezeigt, welches das aktuelle Kapitel repräsentiert. Links in der Mitte steht ein kurzer beschreibender Text zu dem aktuellen Kapitel. Rechts in der Mitte steht das Logo von Gastromarketing.

Im unteren Teil befindet sich der eigentliche Inhalt. Dieser Teil soll sich in drei Spalten aufteilen. In der linken Spalte sollen den Abschnitt beschreibende Grafiken stehen, in der Mittleren Spalte der Text und andere vermittelnde Inhalte, am rechten Rand stehen Bemerkungen des Anwenders.

Um eine übersichtliche und gut lesbare Form des Inhaltes sicherzustellen, soll das Fenster die dargestellte Breite nicht übersteigen.

Bei einem Rollover über einen der Button rechts oben soll sowohl das Bild als auch der beschreibende Text zum jeweiligen Kapitel angezeigt werden. Dies ermöglicht eine einfache Suche nach Inhalten.

Zusätzliche Fenster wie in Siehe Das Layout für Fenster. dargestellt teilen sich lediglich in zwei Teile. Im oberen Teil steht der Titel des Fensters, im unteren Teil der Inhalt. Die zusätzlichen Fenster sollen ungefähr die in Siehe Das Layout für Fenster. gezeigte Breite haben.

Funktionalität

Grundsätzlich gibt es drei Möglichkeiten, die geforderte Funktionalität zu realisieren.

Die einfachste Lösung scheint auf den ersten Blick die meistens übliche Methode, bei welcher auf jeder Seite Links zum nächsten und vorherigen Kapitel stehen. In diesem Fall müsste eine zusätzliche Seite erstellt werden, welche das Inhaltsverzeichnis enthält. Eine Anzeige im Inhaltsverzeichnis, welches Kapitel gerade besucht wird, ist so nicht möglich.

Eine andere Möglichkeit wäre, dass jede Seite zusätzlich zu den Links zur vorherigen und nächsten Seite noch per Funktionsaufruf bei dem Inhaltsverzeichnis bekanntgibt, dass sie gerade angezeigt wird. Im Inhaltsverzeichnis könnte dann alles weitere erledigt werden, damit angezeigt wird, welche Seite aktiv ist.

Die von mir gewählte Methode funktioniert auf andere Weise. Die einzelnen Seiten kennen nicht mehr die vorherige und nächste Seite. Stattdessen werden diese Informationen in einer separaten Datei gespeichert. Hierdurch steht ständig der gesamte Navigationsbaum zur Verfügung. Es müssen auch nicht zwei separate Navigationslisten erstellt werden, wie es in der zuvor vorgestellten Methode der Fall ist.

Kapitelliste

Sämtliche Informationen über den Navigationsbaum werden in einer Kapitelliste gespeichert. Es wird zu jeder Lerneinheit eine Kapitelliste erstellt. In dieser Liste stehen folgende Informationen zu jedem Kapitel:

  • Name des Kapitels
  • Dateiname der Website (Adresse)
  • Kurze Beschreibung zu dem Kapitel
  • Stichworte zu diesem Kapitel
  • Beschreibendes Bild zu dem Kapitel

Die Bearbeitungsreihenfolge und der Zusammenhang zwischen Kapitel und Unterkapitel wird durch die Reihenfolge in der Liste und einem zusätzlichen Parameter bestimmt.

Dadurch, dass für jede Lerneinheit eine eigene Kapitelliste besteht, können Lerneinheiten einfach zu den Gastromarketing-Seiten hinzugefügt und auch wieder entfernt werden.

Navigation

Die gesamte Navigation läuft nur noch über JavaScript Funktionen, die das Austauschen der Inhalte übernehmen. Es kann auch leicht das aktuelle Kapitel angezeigt werden, da die Aktualisierung der Anzeige von diesen Funktionen gleich miterledigt wird.

Notizen

Notizen werden in einem separaten Fenster eingegeben, welches beim Anklicken einer Notiz geöffnet wird. Es kann zu jedem Absatz eine Notiz erstellt werden. Die Stellen, an denen noch keine Notizen eingegeben sind, jedoch zur Eingabe von Notizen zur Verfügung stehen, sind dezent markiert.

Wissenstest

Um eine sofortige Kontrolle der eingegebenen Antworten zu ermöglichen, soll zu jeder Frage ein Button zum Überprüfen der Antwort bestehen. Das Ergebnis der Antwortauswertung wird direkt bei der Antwort angezeigt. Zusätzlich wird in der Übersicht angezeigt, ob alle Fragen zu einem Kapitel und zu den Unterkapiteln richtig beantwortet wurden. So lässt sich leicht erkennen, in welchen Kapiteln noch Fragen unbeantwortet sind.

Implementierung

In den vorherigen Abschnitten habe ich bereits die Voraussetzungen und die Struktur der Website beschrieben. Im letzten Abschnitt bin ich dann auf die Besonderheiten der Umsetzung eingegangen. In diesem Abschnitt nun beschreibe ich die programmiertechnische Umsetzung.

Layout

Die Arbeitsumgebung habe ich in die in der Grafik ( Siehe Aufteilung in Frames. ) dargestellten Frames unterteilt.

 

 
1
 

 
2
 

 
3
 

 

 
4
 

 

 
5
 

 

 

 
6
 

 

Aufteilung in Frames

Im ersten Frame befindet sich die gesamte Navigation, also alle Buttons der Arbeitsumgebung. Hierzu kommt noch das Vorschaubild.

Der zweite Frame enthält lediglich den Trennbalken als optisches Element. Im unsichtbaren Bereich findet das Abspielen von Sounds statt.

Der dritte Frame bleibt leer. Jedoch findet auch hier im unsichtbaren Bereich etwas statt. In diesem Frame wird geprüft welche Plug-Ins bereitstehen.

Im vierten Frame wird eine kurze Beschreibung zu dem aktuellen Kapitel angezeigt.

Der fünfte Frame enthält lediglich das Gastromarketing Weiterbildung"-Logo.

Im sechsten Frame schließlich steht der zu lernende Inhalt. Die einzelnen Spalten dieses Frames sind über Tabellen realisiert.

Die Unterteilung der einzelnen Bereiche in Frames hat den Vorteil, dass sich die einzelnen Inhalte auch ohne den Einsatz von Dhtml ändern lassen.

Funktionalität

In diesem Abschnitt werde ich noch einmal vertieft auf die Bereiche eingehen, die nicht einfach durch Betrachten des Sourcecodes zu verstehen sind.

Verzeichnisstruktur

Die Arbeitsumgebung hat die folgende Verzeichnisstruktur:

  • / - im Rootverzeichnis befindet sich die Einstiegsseite index.htm , welche das Fenster öffnet in dem die Arbeitsumgebung dargestellt wird. Weiterhin steht hier noch die Seite weiterbildung.html , welche die Aufteilung in die einzelne Frames übernimmt.
  • /scripts - hier befinden sich alle Skripts zur Arbeitsumgebung.
  • /images - hier sind alle Bilder zu finden, welche global benötigt werden.
  • /images/navi - hier stehen alle Bilder, welche für die Navigation benötigt werden.
  • /htm - hier befindet sich die Willkommensseite und alle weiteren Seiten, die direkt zur Arbeitsumgebung gehören. Hier ist auch die Datei style.css zu finden, welche das globale Aussehen bestimmt.
  • /htm/brandl_barkunde - in diesem Verzeichnis steht die erste umgesetzte Lerneinheit.
  • /htm/beispiel - in diesem Verzeichnis befinden sich Beispiele zu den Funktionen des Generators.
  • /htm/brandl_barkunde/images - hier befinden sich Bilder zur Lerneinheit
  • /htm/brandl_barkunde/src - hier befinden sich die Quellen zur Lerneinheit, welche der Generator für die Erstellung der Lerneinheit benutzt.

Jede Lerneinheit wird in einem eigenem Verzeichnis erstellt, welches unterhalb von /htm anzusiedeln ist.

Die Verzeichnisse .../src werden nicht auf den Webserver gestellt, sie werden nur zur Generierung der Lerneinheiten benötigt.

Kapitelliste

Die Kapitelliste ist eine verkettete Liste. Jeder Eintrag kennt das nächste Kapitel und das nächste Unterkapitel. Die Siehe Beispiel zur Verkettung von Kapiteln. zeigt ein Beispiel einer Verkettung.

 
K0 - K1 - K2 - K3
 
     |         |
 
     K1.1      K3.1 - K3.2 - K3.3
 
               |             |
 
               K3.1.1        K3.3.1 - K3.3.2
Beispiel zur Verkettung von Kapiteln

Erstellt werden Einträge in die Kapitelliste, indem ein neues Objekt vom Type 'Kapitel' angelegt wird. Diese Klasse ist in der Datei kapitel.js definiert. Der Konstruktor von 'Kapitel' übernimmt das Einketten in die Liste. In der Datei kapitelliste.js steht ein JavaScript-Programm, welches lediglich neue Objekte von Kapitel erzeugt. Das hat dann folgendes Aussehen:

 
new Kapitel( 1, name, adr, beschr, stichworte, bild );    // Buch 1
 
  new Kapitel( 2, name, adr, beschr, stichworte, bild );  // Kapitel 1
 
  new Kapitel( 2, name, adr, beschr, stichworte, bild );  // Kapitel 2
 
    new Kapitel( 3, name, adr, beschr, stichworte, bild );// Kapitel 2.1
 
  new Kapitel( 2, name, adr, beschr, stichworte, bild );  // Kapitel 3
 
 
new Kapitel( 1, name, adr, beschr, stichworte, bild );    // Buch 2

Der erste Parameter gibt lediglich an, ob es sich bei dem Eintrag um ein Buch/Lerneinheit (1), ein Kapitel (2), ein Unterkapitel (3) oder ein Unterunterkapitel (4) handelt. Durchnummeriert werden die Kapitel dann selbstständig.

Die Kapitelliste ist in der Datei kapitelliste.js gespeichert. Eine solche Datei befindet sich in dem Hauptverzeichnis zu jeder Lerneinheit.

Welche Lerneinheiten und somit auch Kapitellisten bereitstehen, ist in der Datei bücherliste.js im Verzeichnis /scripts eingetragen. Über diese Datei werden Lerneinheiten also zur Arbeitsumgebung hinzugefügt oder entfernt.

Navigation

Alle zur Navigation benötigten Funktionen befinden sich in der Datei navibar.js . In dieser Datei ist zu jedem Button eine gleichnamige Funktion definiert, welche beim Klick auf einen Button aufgerufen wird.

Zusätzlich zu diesen Funktionen sind in dieser Datei noch Funktionen definiert, die zur Darstellung der Vorschau und der Statusinformationen benötigt werden.

Der Vorschautext wird direkt in den Frame geschrieben. Hierfür wird also keine neue Seite geladen, sondern eine generiert. Das hat den Vorteil, dass es erheblich schneller geht als das Laden einer neuen Seite. Der darzustellende Text ist in der Klasse 'Kapitel' gespeichert.

Inhalt

Die Funktionen, die zur Darstellung des Inhaltsverzeichnisses benötigt werden sind in der Datei sitemap.js definiert.

Um nicht lediglich eine starre Liste anzuzeigen wird das Inhaltsverzeichnis beim Öffnen des Fensters generiert. Beim Anklicken von Kapiteln wird die Anzeige mit aus- oder eingeklappten Unterkapiteln erneut dargestellt. Die benötigten Informationen zur Darstellung des Inhaltsverzeichnisses holt sich die Anzeigefunktion aus der Kapitelliste.

Index

Alle Funktionen zur Darstellung eines Indexverzeichnisses sind in content.js definiert. Die Suche im Index ist jedoch in navibar.js gespeichert, da diese Funktion ohne Aufruf einer neuen Seite funktioniert.

Das Index wird erst beim Öffnen des Fensters generiert. Auch hier stammen die benötigten Informationen aus der Kapitelliste.

Utilities

Zu dieser Rubrik zählen alle Funktionen, die nicht direkt zur Navigation gehören oder zur Darstellung des Inhaltes benötigt werden. Sie sind in der Datei utility.js gespeichert.

Besonders interessant sind hier die Funktionen zur Überprüfung von Antworten auf Wissensfragen. Diese Funktionen überprüfen, ob Antworten richtig sind, speichern die Antwort in Cookies und zeigen an ob die Antwort richtig war. Dieser Teil muss mit Sicherheit noch erweitert werden, damit eine umfassende und komfortable Abfrage von Gelerntem möglich ist. Bisher sind nur grundlegende Abfragemethoden umgesetzt.

Ebenso interessant sind die Funktionen zur Eingabe und Darstellung von Notizen. Auch diese Informationen werden in Cookies gespeichert.

Zusätzlich sind in dieser Datei noch die Funktionen zum Vorladen von Bildern, Öffnen von Fenstern, speichern von Cookies und Abspielen von Sound realisiert.

Drucken

Um lediglich den Inhalt drucken zu können ist es beim MSIE erforderlich ein VBScript auf jeder Inhaltsseite einzufügen, welches das Drucken eines einzelnen Frames ermöglicht.

Plug-Ins

Die Abfrage der installierten Plug-Ins geschieht bereits beim Starten der Arbeitsumgebung in einem eigenen Frame. Zu jedem abgefragten Plug-In wird eine globale Variable gesetzt, welche speichert, ob das entsprechende Plug-In vorhanden ist.

Auf diese Weise ist beim Anzeigen einer Seite bereits bekannt, ob alle benötigten Plug-Ins vorhanden sind. Es muss nicht immer wieder auf das selbe Plug-In getestet werden. Informationen über Plug-Ins, bei denen der Test, ob es existiert, länger dauert, stehen ebenfalls zum benötigten Zeitpunkt bereit.

Test

Die Arbeitsumgebung wurde in drei Phasen getestet.

In der ersten Phase habe ich jede Funktionen einzeln und im Zusammenspiel mit der Arbeitsumgebung getestet. Hierdurch konnte ich sicherstellen, dass jede Funktion auch so reagiert wie ich es erwarte. Dieser Teil fand während der Erstellung der Arbeitsumgebung statt.

In der zweiten Phase habe ich das Zusammenspiel der Funktionen untereinander und mit der Arbeitsumgebung getestet. Hierzu habe ich die Beispielseiten verwendet. Getestet habe ich unter anderem das sequentielle Navigieren innerhalb der Lerneinheit und das zufällige Navigieren über das Inhaltsverzeichnis und Stichwortverzeichnis. Hinzu kam das willkürliche richtige und falsche Beantworten von Fragen, das Setzen von Notizen und das Drucken von einzelnen Seiten.

Diese Tests habe ich unter verschiedenen Betriebsystemen, unterschiedlichen Browsern und Browser-Versionen wiederholt.

In der dritten Phase wurde die Arbeitsumgebung mit der Lerneinheit" 'Brandels Barkunde' verbunden. Die Tests fanden überwiegend durch Mitarbeiter der Firma Kiwi statt. Es wurde nicht mehr explizit nach Fehlern gesucht, sondern die Arbeitsumgebung im Alltagsgebrauch getestet.

Testergebnis

Die Tests zeigten, dass die Arbeitsumgebung entsprechend der Aufgabenstellung arbeitet.

Alle während der Tests noch auftretenden Fehler konnten behoben werden. Zusätzlich zu der Behebung der Fehler wurde die Arbeitsumgebung in Bezug auf die Benutzerfreundlichkeit noch in einigen Feinheiten optimiert.

Zu diesen Feinheiten gehört z.B. die Art, wie die Notizen dargestellt werden und die Anpassung von StyleSheet und Fenstergrößen an weitere Browser.

Es hat sich auch gezeigt, dass es vorteilhaft wäre, wenn die Möglichkeit besteht, mehrere Benutzerprofile abzuspeichern. Es müssten die bereits besuchten Seiten und die beantworteten Fragen benutzerabhängig gespeichert werden. Dies würde die Möglichkeit bieten, dass mehrere Anwender an einem PC arbeiten.

Zu Hauptfenster wechseln Zu Vorherigem wechseln Zu Nächstem wechseln