get-TV - Online Portfolio :: Home

Projekt
get-TV
Fernsehtaugliche Webauftritte
im Zusammenarbeit mit
SS 2001

Inhalt
1. Einleitung ............................................................................................................. Seite 03
1.1 Projektrahmen ......................................................................................... Seite 04
1.2 Aufgabenstellung .................................................................................... Seite 05
2. Vorgaben ............................................................................................................. Seite 06
2.1 Die Dive-Seite ........................................................................................ Seite 06
2.2 Die Info-Seite der Get-AG ..................................................................... Seite 09
2.3 Unsere Testseite .................................................................................... Seite 10
3. Visuelle Gestaltung .............................................................................................. Seite 11
3.1 Besondere Eigenschaften der Fernsehdarstellung ..................................... Seite 11
3.2 Der erste Design-Versuch ....................................................................... Seite 12
3.3 Weitere Designs im Überblick ................................................................. Seite 13
3.4 Das endgültige Design............................................................................. Seite 14
4. Navigation und Struktur ....................................................................................... Seite 15
4.1 Vorgegebener Inhalt................................................................................ Seite 16
4.2 Strukturierung des Inhalts ....................................................................... Seite 16
4.3 Fensteraufbau .......................................................................................... Seite 17
4.5 Tastenbelegung & Navigation ................................................................ Seite 17
4.6 Das Hilfesystem ...................................................................................... Seite 18
4.7 Funktionalität .......................................................................................... Seite 19
4.8 Buttonoptik ............................................................................................ Seite 19
5. Programmierung ................................................................................................... Seite 20
5.1 Seitenaufbau ........................................................................................... Seite 20
5.2 Tastenabfrage ......................................................................................... Seite 20
5.3 Verzeichnisstruktur ................................................................................. Seite 21
5.4 Verwaltung ............................................................................................. Seite 21
6. Organisation ......................................................................................................... Seite 22
6.1 Erstes Treffen mit conTakt Ende Februar ................................................ Seite 22
6.2 Zweites Treffen mit conTakt Anfang März .............................................. Seite 23
6.3 Drittes Treffen mit contakt Ende März .................................................... Seite 24
6.4 Viertes Treffen mit conTakt Mitte April .................................................. Seite 24
6.5 Fünftes TReffen mit conTakt Ende April ................................................. Seite 25
6.6 Weiterer Verlauf bis Abgabe Mitte Juni ................................................... Seite 26
7. Und zum Schluß ................................................................................................... Seite 27
2

1. Einleitung
Das Projekt ‚Fernsehtaugliche Webauftritte’ fand im Sommersemester 2001 statt. Es war
ein halbjähriges Projekt, das in Zusammenarbeit mit der Firma conTakt aus Itzehoe
durchgeführt wurde. Ziel des Projekts war eine Homepage zu erstellen, die problemlos auf
einem Fernsehbildschirm dargestellt werden konnte. Zudem sollte eine einfache Navigation
mit Hilfe einer Fernbedienung realisiert werden, die weder Maus noch Tastatur erfordert.
Der Studienplan sieht vor, das für ein Studienprojekt ein Semester lang
(12 Wochen) jede Woche mind. 4 SWS, also 150 Minuten Zeit investiert werden (pro
Person).
Beteiligt an diesem Projekt waren die folgenden Studenten:
- Mark Carstens (MI 3998)
- Florian Steigerwald (MI 4321)
- Florian Struck (MI 4100)
- Andrej Teodorovic (MI 4101)
Betreut wurden diese Studenten seitens der FH-Wedel durch:
- Prof. J. Schwanitz
Betreuung seitens der Firma conTakt durch:
- Herrn Pähz (Projektierung und Betreuung)
- Herr Uhlmann (conTakt-IT)
- Frau Klimmek (Zentrale Ansprechpartnerin)
3

1.1 Projektrahmen
Im Rahmen der Entwicklung eines Multimedialen Zentrums für das Wohnzimmer
hat die get-AG die
“get-Box“
entwickelt, die neben einem Digitalen Videorekorder und einem DVD-Player auch die
Möglichkeit beinhaltet, über den Fernseher ins Internet zu gelangen
Die get-Box ist ein Fujitsu-Siemens Activy300 Rechner mit Windows 98SE als
Betriebssystem und Internet Explorer 5 als Standartbrowser.
Die aufklappbare Fernbedienung enthält eine Tastatur.
Diese get-Box wird im Klosterforst in Itzehoe in einem Pilotprojekt getestet, das
von der Firma conTakt durchgeführt wird.
Besonderheiten des Klosterforst sind zum einen die Tatsache, dass sich auf
kleinem Raum viele Wohnräume verschiedener Größenordnungen und Preisklassen
befinden, weshalb sich innerhalb des Geländes nahezu alle Gesellschaftlichen
Gruppen befinden. Des weiteren haben alle Haushalte im Klosterforst eine 2 MBit-
Netzwerkanbindung, über die sie ins Internet gehen können, weshalb sie im
vergleich zu analog- oder ISDN-Leitungen ein vielfaches Up- und Downstream-
Volumen haben.
Um der Informationspflicht gegenüber den Klosterforst-Anwohnern im Rahmen
dieses Pilotprojekts nachkommen zu können, gibt es eine Klosterforst-Info-Page,
die die Anwohner über die get-Box auf dem Fernseher aufrufen können.
4

1.2 Aufgabenstellung
Aufgabenstellung dieses Studienprojekts war es, für die Durchführung dieses
Pilotprojekts eine Infopage zu gestalten, die folgende Kriterien erfüllt:
- Das Design der Info-Page sollte den technischen Richtlinien eines
Fernsehers entsprechen.
- Das Design der Info-Page soll ein längeres ‚surfen’ auf der Info-Page
ermöglichen, ohne das beim Betrachter Ermüdungserscheinungen der Augen
auftreten.
- Die Navigation der Info-Page soll möglicht einfach gehalten werden, damit sie
mit dem Steuerkreuz der Fernbedienung realisiert werden kann. D.h. sie muss
mit den Richtungstasten (oben, unten, links, rechts) und der OK-Taste
auskommen.
- Die Info-Seite muss alle Informationen enthalten, die die get-Box und das
Pilotprojekt betreffen.
Zielgruppe der Info-Seite waren AUSSCHLIESSLICH die Klosterforst-Haushalte,
woraus sich für uns folgende weitere Kriterien ergaben:
- Da jeder Haushalt über eine Netzwerkanbindung verfügt, sind das
Datenvolumen und die daraus resultierenden Downloadzeiten der Info-
Page nebensächlich.
- Da im Klosterforst nahezu alle Gesellschaftlichen Schichten vertreten sind,
darf die Seite für ‚Internet-Geübte’ Menschen nicht allzu sehr von der
Navigation wie man sie vom Computer her kennt abweichen
- Gleichzeitig muss sie auch für ‚Internet-Anfänger’, die keinerlei Erfahrung
mit Computern und Internat haben, leicht nachvollziehbar sein.
Zusätzlich setzten wir uns noch folgende Ziele:
- Der Inhalt muss leicht zu finden sein, was eine übersichtliche Gliederung und
Strukturierung der Seite voraussetzt.
- Das Design sollte auf das Klosterforst verweisen und gestalterisch
anspruchsvoll sein. Leer wirkende Seiten wie beim Videotext waren ebenso zu
vermeiden wie Seiten, die bei dauerhaftem Betrachten Kopfschmerzen
auslösen.
5

2. Vorgaben
2.1 Die dive-Seite
Startseite
Diese Seite erscheint, sobald man mit der get-Box online geht.
In dem Fenster rechts oben läuft ein kurzer Trailer in Endloswiederholung.
Die Seite ist oben links in einem etwas dunklen Orange und in der unten Hälfte
in einem matten Grün-Grau-Ton gehalten, der nach unten hin dunkler wird. Beide
Farbbereiche weisen eine Struktur auf, der untere Bereich zeigt einen Auschnitt der
Fernbedienung als Wasserzeichen.
Es gibt keine reinen Farbflächen, die Farben sind nicht satt, die Schrift
vergleichsweise groß, dick und ohne Serief.
Die Auswahlbuttons erscheinen 3Dimensional, ihre Ränder sind nur weich
gezeichnet und farblich heben sie sich nur unwesentlich von ihrem Hintergrund ab.
Auf der dive-Seite ist eine sogenannte Matrix-Navigation realisiert. Die
Auswahlbuttons sind in einer Matrix angeordnet, besser zu sehen auf der Hilfe-Seite
(Siehe Seite 7)
Mit den Links-Rechts-Tasten der Fernbedienung bewegt man den Auswahlfokus
zwischen den Buttons einer Zeile waagerecht hin und her, mit den Oben-Unten-
Tasten bewegt man den Fokus in der jeweiligen Spalte senkrecht raus und runter.
Eine Auswahl trifft man mit der OK-Taste, wodurch ein neues Fenster mit allen
Unterthemen der ausgewählten Kategorie angezeigt wird.
6

Hilfe-Seite
Um in die vorherige Auswahl zu kommen muß man den Fokus auf den Button
‚Zurück’ legen und ihn auswählen. Wählt man eine Unterkategorie aus, wie z.B.
‚Fernbedienung’, so wird dieses Thema erneut in einem neuen Fenster gezeigt, aus
dem man nur mit der Auswahl ‚Zurück’ in die vorherige Auswahl gelangt.
Hilfe Seite, Unterthema ‚Fernbedienung’
7

Das Design der Seite ließ sich einwandfrei auf einem Fernseher darstellen, es
kam zu keinerlei flimmern oder Überstrahlung. Einige Punkte des Designs wie das
Hintergrundbild in form eines Wasserzeichens oder die Gestaltung der Buttons
wurden in unser Konzept der Visuellen Gestaltung teilweise oder ganz mit
einbezogen.
Die Navigation hingegen erschien uns unpraktisch, zumal man leicht den
Überblick verlieren konnte in welcher Unterkategorie welchen Hauptthemas man sich
gerade befand. Außerdem war ein wechsel zwischen den Hauptthemen nur möglich,
in dem man die Unterkategorie verlässt, was Zeit kostet.
Das Navigationsverfahren wirkte auf uns sowohl für Computer- als auch für
Fernseher-Benutzer unbekannt, und zum Durchsuchen und Kennenlernen der Seite
war dieses Navigations-Prinzip zu unübersichtlich, was es erschwert, anfangs den
gewünschten Inhalt zu finden.
8

2.2 Die Info-Seite der get-AG
Info-Seite der get-AG
Die von der get-AG vorgegebene Seite wies bereits den Ansatz einer Lösung
unserer Probleme in der Wahl von Schriftart, Schriftgröße und der Farbwahl auf. Das
Bild erschien uns für ein Fernsehbild zu leer, und der Kontrast zwischen schwarz und
dem gewählten Blau schien uns trotz allem zu stark.
Die Navigation der get-Seite folgte keinem uns bekannten Schema. Mit den Links-
Rechts-Tasten Sprang die Auswahl zwischen den einzelnen Links hin- und her. Hatte
man alle Links durch, wurde das gesamte Fenster ausgewählt.
Sollte der im Fenster angezeigte Inhalt aus dem Bildschirmrand hinaus gehen, so
konnte man das Fenster auswählen und mit Hilfe der Oben-Unten-Tasten das Bild
rauf- und runterscrollen lassen.
Diese Navigation hatte zwei bedeutende Nachteile.
Erstens war einem Menschen, der keinerlei Erfahrung mit Computern hat, der
Tatbestand des Scrollens unbekannt, und es wirkt auf einem Fernseher auch
ungewohnt.
Schlimmer war die Tatsache, dass bei vielen Links in einer Seite (z.B. 16 Links
auf der Dive-Hilfe-Seite) die Auswahl des gesuchten Links nur mühsam erfolgt.
Außerdem sind Links in Form von Verweise, die man in der Mitte eines längeren
Texts mit Hilfe der Scroll-Funktion gefunden hat, nur schwer wiederzufinden.
9

2.3 Unsere Testseite
Testseite zur Ermittlung von Toleranzbereich und ASCII-Codes
Mit Hilfe dieser Seite Testeten wir, wie verschiedene Schriften in verschiedenen
Größen,in ihrer Standardform und Fett und/oder Kursiv auf dem Fernseher wirkten.
Der rote Rand zeigt immer den genauen Rand des sichtbaren Abschnitts und
dessen Auflösung an. Zusammen mit dem blauen Rahmen, der eine exakte Größe
von 640*480 Pixeln hat, und dem grünen Rahmen, dessen Abmessung 768*576 und
somit maximalse Fernseherauflösung (PAL) beträgt, konnten wir genau ermitteln,
wie viel von welchem Bildschrimrand abgeschnitten wird.
Unter dem gelben Schriftsatz ‚Key(ASCII CODE)’ wird der ASCII-CODE der zuletzt
gedrückten Taste ausgegeben. Damit war es uns möglich, herauszufinden, mit
welchem ASCII-CODE die Tasten der Fernbedienung belegt sind, damit wir sie in
unserer Programmierung einsetzen kontnen.
10

3. Visuelle Gestaltung
Bei der visuellen Gestaltung war es uns wichtig, uns von der bisher bekannten
‚Computerdarstellung’ zu lösen und ein neues, dem Fernseher angepasstes Konzept
zu entwickeln.
Dabei waren vor allem die technischen Unterschiede zwischen einem
Computermonitor und einem PAL-Fernseher zu beachten.
Gleichzeitig ist man von einem Fernseher ein anderes ‚Bild’ gewohnt. Während
auf dem Computer reiner Text auf weißem Hintergrund dem Betrachter als ‚normal’
erscheint, erwartet man vom Fernseher bewegte Bilder in verschiedenen Farben.
Selbst der rein schwarze Videotext mit bunter Schrift ist ein wenig ‚Fremd’.
3.1 Besondere Eigenschaften der Fernsehdarstellung
Computermonitor:
- Auflösung bis 1600 * 1200 und mehr
- Bildwiederholfrequenz 75 – 95Hz und mehr
- Optimiert für statische Bilder: Klare Kontraste, scharfe Kanten
PAL-Fernseher:
- Auflösung PAL-Format: 768*576 Pixel. Abzüglich nicht dargestellter
Randbereich: ca. 640*480 Pixel.
- Bildwiederholfrequenz: 25 Voll- bzw. 50 Halbbilder pro Minute.
- Darstellung ist auf bewegte Bilder optimiert: unscharfe Kanten, verwischen
von Farbübergängen.
Aufgrund der Halbbilddarstellung und der geringen Auflösung sind bei der
Darstellung starrer Bilder auf dem PAL-Fernseher folgende Dinge zu beachten:
- Flickering: Aufgrund der Halbbilddarstellung und der niedrigen
Bildwiederholfrequenz scheinen Linien an ihren Horizontalen Kanten zu
flackern. Dies tritt besonders bei scharfen Kanten und starken Farbkontrasten
zwischen den Linien auf.
- Farben: Andere Farbdarstellung reines weiß Blendet, zu satte Farben
übersteuern, Farbkontraste werden verwischt
- Größere Schrift (Mindestens 14, besser 16) und andere Schriftarten (kein
Serief, keine zu kleinen Einschüsse) notwendig)
Es galt also, Schriften, Schriftgrößen und Farbkombinationen zu finden, die
keinerlei Flackern auslösen und die Augen des Betrachters nicht ermüden.
Zudem sollte die Info Seite eine Hintergrundgrafik haben, um den Bildschirm
nicht so leer erscheinen zu lassen. Da diese Grafik sich nicht zu sehr in den
Fordergrund drängen sollte, gleichzeitig keine zu starken farblichen Kontraste zu den
Schriften aufweisen durfte (Vermeidung des Flickerings) und selbst keine scharfen
Kanten beinhalten durften, versuchten wir eine art ‚Wasserzeichen’ aus den Grafiken
zu erstellen, die uns zur Verfügung standen.
11

3.2 Der erste Design-Versuch
Erster Design-Versuch
In unserem ersten Design-Versuch griffen wir das Blau der Info-Seite der Get-AG
für die Top-Leiste auf und unterlegten unsere Auswahl-Buttons in Top- und
Seitenleisten mit verschiedenen Farben, um deren Wirkung auf dem Monitor zu
testen.
Den Rest der Seite hielten wir in zwei Orange-Tönen, als Hintergrundbild diente
uns ein Wasserzeichen des Klosterforst-Logos, zusammen mit einem Schriftzug, der
die momentane Auswahl in der Top-Leiste anzeigte (im Beispielbild ‚Home’). Um das
Bild ‚verschwimmen’ zu lassen wurde es horizontal schraffiert, in der Vermutung,
dass die Linien in der Halbbilddarstellung verschwimmen und das Bild weicher
erscheinen lassen würden.
Die Schrifttyp ist Arial, in den Farben dunkelblau und weiß. Die Schriftgröße
variiert zwischen 14 und 16.
Dieses Design wurde vorerst beibehalten um daran die Navigation weiter
auszuarbeiten. Gleichzeitig wurden weitere Design-Versuche ausgearbeitet, da dieses
Design einige Mängel aufwies.
Zum einen passte die Farbgebung der Topleiste nicht zueinander. Dann mussten
die Buttons in Top- und Seitenleiste ein einheitliches Design bekommen. Die weiße
Schrift war auf dem Hintergrundbild nur schwer zu lesen, und die dünnen Streifen
auf dem Hintergrundbild waren auf dem Fernseher doch zu sehen und flackerten
dort, wo sie an die dunkelblaue Schrift grenzten.
12

Nicht realisierter Entwurf
3.3 Weitere Designs im Überblick
13
Testseite zum Ausprobieren
von Schriften und Farben
Nicht realisierter Entwurf

3.4 Das endgültige Design
Endgültige Version
Für die endgültige Version lag ein neues Strukturkonzept vor, weshalb die
Auswahlbuttons in der Top-Leiste umbenannt wurden. Die Farbwahl geht vom
matten Rot in der Überschrift über Braun- und Beige-Töne in den Auswahl-Buttons
der Top-Leiste bis zum leicht violetten Blau in den ungenutztem und dem
ausgewählten Button der Seitenleiste.
Alle Farben sind Mischfarben, die sich gut auf einem Fernseher darstellen lassen und
die Augen nicht ermüden.
Die Schriften in Top- und Seitenleiste haben keine scharfen Kanten, sondern sind
durch Relief-Optik oder einem leichten Blur-Effekt abgerundet.
Im Hauptfenster wurde die dunkelblaue Arial-Schrift in den Größen 14 bis 17
beibehalten.
Das Hintergrundbild ist ein Bild von einem Klosterforst-Modell als Wasserzeichen
eines mattgrauen Vordergrunds. Somit hat das Bild eine Struktur und erscheint nicht
ungewohnt leer, gleichzeitig treten keine starken Farbkontraste oder scharfe Kanten
auf, die zu einem Flickering führen könnten.
14

4. Navigation & Struktur
Der Benutzer der get-Box ruft die Info-Seite auf während er fern sieht. Aus
diesem Grund konnte man nicht von ihm erwarten, dass er eine Tastatur oder Maus
benutzt. Die Info-Seite musste eher den Charakter eines Videotexts haben, und die
Navigation musste mit einigen wenigen Tasten der Fernbedienung möglich sein.
Letztendlich standen uns nur die oben dargestellten Tasten der Fernbedienung
zur Verfügung. Ein Steuerkreuz (Links, Rechts, Oben, Unten), eine Ok-Taste zum
Bestätigen und eine Back-Taste, um zurückzuspringen.
Auch bei der Strukturierung und Darstellung der Inhalte musste ein neues
Konzept erstellt werden. Bei einem Computer können Links überall im Text
untergebracht werden, da man sie mit einer Maus auswählt. Sie können ach auf
Bildern oder Animationen liegen. Der Inhalt einer Seite ist nicht durch die
Fenstergröße oder die Auflösung des Monitors begrenzt, da man nach oben oder
unten Scrollen kann.
Beim Fernseher hingegen ist keine Maus vorhanden, die Links müssen manuell
mit dem Steuerkreuz ausgewählt werden. Zudem sind Scroll-Balken oder das
Scrollen an sich auf Fernsehern ungewohnt. Die bekannte Form der Navigation auf
dem Fernseher ist ein Umschalten zwischen Programmen oder Videotextseiten. Da
wir auf die Zahlentasten nicht zugreifen konnten und auch nicht wollten, bleibt als
Alternative das Prinzip des ‚Zappens’, also eine Art ‚Blättern’.
Wir mussten davon ausgehen dass sich in der Zielgruppe auch Menschen
befanden, die keinen Computer besaßen. Deshalb galt es einen Kompromiss zu
finden zwischen dem, was die Menschen von Fernseher und Videotext gewohnt sind
und dem, was die Strukturierung und Navigation einer Info-Seite in Form einer
Homepage erfordert.
15

4.1 Vorgegebener Inhalt
Das Pilotprojekt erfordert von der Firma conTakt, folgende Informationen an die
Klosterforst-Anwohner zu übermitteln:
- Hilfe zur Navigation auf der Info-Seite
- Neuigkeiten bezüglich des Projekts, als da wären Termine zum Aufspielen
neuer Software, die Freischaltung neuer Fernseh- und Radiokanäle etc.
- Das Repartoire an Fernseh- und Radiokanälen, dass mit Hilfe der get-Box
empfangen werden kann, und deren Programmbelegung.
- Die Filme, die auf den klosterforst-internen Fernsehkanälen gezeigt werden,
und deren Sendezeiten
- Möglichkeiten der Kontaktaufnahme zu den Ausführenden des Pilotprojekts
zwecks Fragen, Reklamationen und Feedback.
4.2 Strukturierung des Inhalts
Als erstes wurde der Inhalt auf Fünf Seiten aufgeteilt, als da wären die Startseite
mit einem Verweis auf die Navigationshilfe, die News-Seite mit den aktuellen
Neuigkeiten, die Kanal-Seite mit den Fernseh- und Radiokanälen, die Film/Video-
Seite mit den Inhalten der klosterforst-internen Kanälen und die Kontakt-Seite mit
Telefonnummer und E-Mail-Adresse der zuständigen Abteilungen von conTakt.
Die Startseite teilt sich in folgende drei Teile auf:
- Eine Begrüßungsseite, die automatisch geladen wird sobald man auf die
Info-Seite kommt.
- Eine Seite, die die Navigation mit der Fernedienung erläutert
- Eine Übersichtsseite, die den Inhalt der Info-Seite kurz erläutert
Die News-Seite, später Umbenannt in ‚Aktuelles’, zeigt aktuelle Meldungen und
Termine an.
Die Kanal-Seite besteht aus einer Übersicht, die erläutert, was auf dieser Seite zu
finden ist, und einer Seite, auf der alle zu empfangenden Fernseh- und Radiokanäle
(einschließlich der 8 klosterforst-internen Fernsehkanäle) tabellarisch aufgelistet
sind.
Die Video-Seite besteht aus einer Übersicht, die erläutert, was auf dieser Seite zu
finden ist. Dazu hat jeder der 8 klosterforst-internen Kanäle eine eigene Seite. Jede
Seite enthält eine Kurzbeschreibung des Films, der auf diesem Kanal läuft, und die
jeweiligen Sendezeiten.
Auf der News-Seite, die später in ‚Aktuelles’ umbenannt wurde, sind die
Meldungen in chronologisch abfallenden Reihenfolge zu lesen, die neusten Meldung
zuerst.
16

4.3 Fensteraufbau
Das Fenster besteht aus folgenden drei Teilen:
- Die Top-Leiste, die den oberen Rand des Fensters einnimmt. Hier findet
man die Fünf Inhaltsthemen Start, Aktuelles, Kanäle, Videos und Kontakt.
- Die linke Leiste, die unterhalb der Topleiste den linken Rand des Fensters
einnimmt. Hier findet man die Unterkategorien zu den in der Topleiste
ausgewählten Themen, z. B. beim Thema Videos die Übersicht und die
Kanäle Klosterforst 1 bis Klosterforst 8
- Der Hauptteil. Der von den beiden Leisten umrahmte Rest des Fensters.
Hier werden die gewählten Inhalte angezeigt.
Manche Inhalte, wie die Tabelle mit den Fernseh- und Radiokanälen, die
Filmbeschreibungen oder die neusten Meldungen, waren zu umfangreich um bei der
geringen Auflösung und mit der großen Schrift im Hauptteil des Fernsehbildschirms
komplett dargestellt zu werden.
Um ein Scrollen zu verhindern wurden die Inhalte soweit zerteilt, bis die
einzelnen Teile in den Hauptteil des Bildschirms passten. Die einzelnen Teile wurden
in ihrer Reihenfolge durchnummeriert, so dass man sie in der angeordneten
Reihenfolge hintereinander weg anzeigen kann.
4.4 Tastenbelegung & Navigation
Mit Hilfe der Links- und Rechts-Taste (entspricht ASCII-Code 37,39; Tab und
Shift+Tab) wird der Fokus in der Top-Leiste bewegt, also das Thema ausgewählt.
Ist ein Thema in der Top-Leiste ausgewählt, bewegt man den Fokus in der linken
Leiste mit der Rauf- und Runter-Taste (entspricht ASCII-Code 38,40; Pfeil
hoch, Pfeil runter).
Mit der OK-Taste (ASCII-Code 13; Return) wählt man in Top- und der linken
Leiste ein Thema aus und blättert durch die Inhalte im Hauptteil.
Die Back-Taste wurde später noch für die Navigation freigeschaltet. Da wir sie
nicht in unser Navigationskonzept eingebaut haben, wurde sie deaktiviert.
Mit Hilfe dieser Auswahl und Fensterstruktur ist es einfacher, sich auf der Seite
zurecht zu finden, da gleichzeitig Hauptthemen, Unterkategorien und der
ausgewählte Inhalt angezeigt werden. Man kann sich also ganz leicht merken, wo
sich was befindet, und problemlos zwischen den einzelnen Themen und Kategorien
hin und her blättern ohne erneut einen Menü-Blidschirm aufrufen zu müssen.
17

4.5 Das Hilfesystem
Die Seite ist so konstruiert, das allein durch rumprobieren die Navigation schnell
erlernt werden kann. Um es auch Neulingen einfach zu machen, wurden zusätzlich
mehrere Hilfen eingebaut.
Ein Übersicht über die Tastenfunktionen erhält man unter dem Menüpunkt ‚Start’.
Hier werden alle Tasten kurz erklärt.
Des weiteren gibt es eine Hilfe- bzw. Infozeile, die sich ständig sichtbar unter der
Topleiste befindet. Hier wird die Seitennummer der aktuell aufgeschlagenen Seite
angezeigt und wie viele Seiten es insgesamt sind. Eine Grafik zeigt die aktuelle
Funktion der OK-Taste an, also ob mit Tastendruck geblättert werden kann, oder ein
Thema ausgewählt und aufgerufen wird.
18

4.5 Funktionalität
Die Besonderheit ist durch die knappen Belegungsmöglichkeiten der
Fernbedienung begründet. Um möglichst einfach und intuitiv zu den gewünschten
Themen zu kommen, muss der Fokus lediglich eine gewisse Zeit (1 Sekunde) auf
einem Button liegen und der Seiteninhalt wird geladen.
Die Cursortasten reichen somit aus, um in die einzelnen Themengebiete zu
gelangen.
Die OK-Taste wird Seitenspezifisch entweder zum Blättern (falls mehrere Seiten)
oder z.B zum Aufrufen einer Hilfe-Funktion verwendet. Aber auch, falls die Sekunde
noch nicht abgelaufen ist, zum aktivieren des Themen-Buttons.
4.6 Buttonoptik
Jedes Thema in der Topleiste und jede Kategorie in der linken Leiste liegt als
Button vor. (Siehe Bild unten)
Jeder Button beinhaltet einen Text (Überschrift) und liegt in vier Versionen vor.
Ein normaler Button, ein aktivierter Button (Highlight - die Seite wird angezeigt; im
Bild unten die Buttons ‚Start’ und ‚Information’) und beide Stile nochmal erfasst von
einem Fokus (Rahmen; siehe Button ‚Information’).
Der Fokus wird wegen der Wartesekunde vor der Aktivierung benötigt. Diese wird
abgebrochen wenn der Fokus weiter bewegt wird.
19

5. Programmierung
Bei der Programmierung war vor allem zum einen die Einfachheit der Verwaltung
und zum anderen die Umsetzung einer möglichst intuitiven Navigation durch den
Infokanal.
Programmiert wurde in HTML und Javascript. Auf Besonderheiten von Javascript
unter Nutzung eines Browsers von Netscape musste nicht geachtet werden, da auf
der get-Box lediglich ein Windowssystem (Zur Zeit der Erstellung Windows 98
Second Edition) mit Internet Explorer 5.x läuft.
Der Klosterforst verfügt über ein Netzwerk, in dem jeder Anwohner mit einer
Verbindung von 2 Mbit/s auf Daten zugreifen kann. Größere Grafikdateien stellen
also kein Problem dar.
5.1 Seitenaufbau
Die Seite enthält ein eingebettetes Frame (iframe), in dem der Inhalt dargestellt
wird. Die Navigation wird beim Laden der Hauptseite komplett geladen.
Es werden alle Buttons, Links über Javascript in Variabeln abgelegt, und in das
HTML-Gerüst eingefügt. Die Seite lädt zuerst eine temporäre Grafik (ein
transparentes Gif) in alle Positionen, die später mit einem Button belegt werden.
Diese werden mit Hilfe von Javascript je nach Auswahl des Benutzers in die
Positionen geladen.
Vorteil ist hierbei, das alle Grafiken ständig verfügbar sind, und nicht jedes Mal
nachgeladen werden müssen. Aufgrund der Geschwindigkeit mit der die linke Leiste,
beim bewegen des Fokus auf der Topleiste, ihre Unterthemen verändert, ist dies
ebenfalls sinnvoll.
Der Seiteninhalt wird bei Auswahl in das iframe geladen.
5.2 Verwaltung
Alle Links und Buttons werden beim Seitenaufruf in Variabeln abgelegt. Damit die
Grafiken gefunden werden müssen in Konfigurationsdateien die Pfade zu den
Grafiken sowie die Links eingetragen werden. Anzahl der Buttons und der
dazugehörigen Links muss übereinstimmen.
VTopLnks[Button] ist ein Array das einen Link in Form eines Strings enthält. Für
Button=0 den Link des ersten Buttons usw. Ähnlich bei den Buttons:
vTopBtns[Button][Stil] enthält bei Button=0 die Grafiken für den ersten Button. Stil
gibt das Aussehen an. Es gibt vier Formen. Normal, Normal mit Fokus, Aktiviert und
Aktiviert mit Fokus. Also Stile 0..3.
Genau so ist es bei den Konfigurationsdateien der linken Navigationsleiste auch.
VLftLnks[Button][Seite] enthält jedoch noch zusätzlich ein Array in dem die Links zu
den Seiten gespeichert werden, falls ein Umblättern in dem Thema nötig ist.
20

5.3 Tastenabfrage
Über Javascript werden die Events OnKeyDown, OnClick, OnMousover mit einer
Anweisungsfolge belegt. Wird eine Taste gedrückt, wird sie ausgewertet.
- Links und Shift-Tab bewegen den Fokus auf der Topleiste um einen Button
nach links bzw. wenn er sich ganz links befindet auf den letzten Button.
Daraufhin werden die Unterthemen in der linken Leiste, die zu dem
neufokussierten Button gehören angezeigt. Der Inhalt bleibt jedoch so lange
noch erhalten, bis mit der OK-Taste ein neues Thema bestätigt wird.
- Oben und Tab haben dieselbe Funktion nur in die andere Richtung.
- Hoch setzt den Fokus auf der linken Leiste eine Position höher mit OK wird
der Button aktiviert und der Inhalt geladen.
- Unten, der Fokus wird eine Position runter bewegt.
- OK-Taste aktiviert einen Button. Lädt also die Grafik des aktiviertem Buttons
(highlight) und lädt über den Link des Buttons den passenden Inhalt in das
iframe. Daraufhin wird die Funktion der OK-Taste auf Blättern gesetzt
(Hilfsgrafik angezeigt) und die Nummer der aktuellen Seite bzw. Anzahl der
Seiten in der Hilfs-/Infozeile dargestellt.
5.4 Verzeichnisstruktur
Im Hauptverzeichnis befindet sich die index.htm, die den HTML Seitenaufbau
beinhaltet. Eine Javascript Datei control.js ist für die Funktion der Steuerung
zuständig. Ein Stylesheet style.css definiert die Schriftarten und weitere optische
Bestandteile der Seite. Die wichtigsten Dateien befinden sich also im
Hauptverzeichnis.
Der Ordner top enthält alle Grafiken top_... und eine Konfigurationsdatei
(top_config.js) in der die Links der Buttons und die Grafiken auf eine Variable
überschrieben werden.
Das Verzeichnis left enthält weitere Ordner. Gegliedert nach den einzelnen
Themen der Topleiste. Die Buttons und die zugehörige Konfigurationsdatei für das
Thema Aktuelles befinden sich beispielsweise im Ordner Aktuelles.
Der Ordner main enthält schließlich alle Seiten die in das iframe geladen werden
können. Beinhalten also die Informationen. Gegliedert ebenfalls nach Thema (z.B.
Ordner Aktuelles) und weitere Unterthemen (Ordner Heute, Gestern...). Diese
können dann schließlich mehrere Seiten enthalten, die natürlich in der jeweiligen
Konfigurationsdatei im Ordner left angegeben sein sollten.
21

6. Organisation
Ziel einer Projektstudie ist, für eine zum Ende des vorhergehenden Semesters
ausgegebene Problemstellung eine Lösung zu erarbeiten und die ergebnisorientierte
Teamfähigkeit nachzuweisen. Dazu gehört die Selbstorganisation der Gruppe im
Sinne einer effektiven Projektplanung und Koordination, die effiziente Nutzung der
individuellen Fähigkeiten, die zielgerichtete Vor- und Nachbereitung von
Teamsitzungen sowie die professionelle Dokumentation von Zwischen- und
Endergebnissen.
Die Hochschule legt also besonderen Wert auf die formale Durchführung des
Projekts, das heißt z.B. die Erstellung eines Projektplanes und die Zuteilung von
Aufgaben an einzelne Personen, so dass Zuständigkeiten und Verantwortlichkeiten
erkannt werden können. Daneben sollte ein straffes Zeitgerüst absteckt werden, z.B.
für Termine für Zwischen- und Endpräsentation und für die Abgabe der
Ausarbeitung.
(Beschreibung einer Projektstudie)
6.1 Erstes Treffen mit conTakt, Ende Februar 2001
Um nicht in Zeitdruck zu geraten fand das erste Treffen zwischen der
Projektgruppe und den Vertretern der conTakt-AG bereits Ende Februar 2001 statt.
Bei diesem Treffen wurde die Projektgruppe mit der Firma conTakt, den
Besonderheiten des Klosterforst und der Get-Box mit allen bis dato vorhandenen
Funktionalitäten bekannt gemacht.
Danach wurde die Aufgabenstellung klar definiert, also dass die Projektgruppe
eine Info-Seite für das Klosterforst erstellen soll. Die dabei zu beachtenden Kriterien
wurden gemeinsam festgesetzt.
Da die Projektgruppe nicht mit der Materie vertraut war und einige Technische
und Organisatorische Fragen noch geklärt werden mussten, wurde die Festlegung
eines genauen Zeitplans auf das nächste Treffen verschoben.
22

6.2 Zweites Treffen mit conTakt, Anfang März 2001
Bereits zwei Wochen später traf man sich erneut. Die zwei Wochen dienten zum
allgemeinen Sammeln von Informationen seitens der Studenten und der
Beantwortung erster Technischer und Organisatorischer Fragen seitens den
Vertretern der Firma conTakt.
Da im Bereich ‚Fernsehtaugliche Webauftritte’ sowohl in Design-Fragen als auch
in Sachen Navigation nur wenig Informationsmaterial und nur eine begrenzte
Auswahl an Beispielen aus der Praxis vorhanden sind war abzusehen, dass die
Projektarbeit vor allem auf das Ausprobieren und Entwickeln von eigenen Ideen
hinauslaufen würde. Aus diesem Grund war eine klare Zeitplanung schwierig. Daher
wurden monatliche Meetings mit den Vertretern conTakts festgelegt. Bei diesem
Meetings würden die bisher erreichten Zwischenergebnisse präsentiert werden und
der weitere Ablauf und die Zielsetzung für den nächsten Monat besprochen.
All diese Treffen wurden von der Projektgruppe protokolliert, die Protokolle an
die Vertreter von conTakt und Professor Schwanitz geschickt damit alle über den
letzten Stand informiert sind.
Von Anfang an stand ein Abgabetermin für ein endgültiges Ergebnis fest, den wir
auf Ende Juni setzten.
Als Kurzfristiges Ziel wurde ein Treffen für Ende März angesetzt. Bis dahin sollte
die Projektgruppe mehrere Ideen ausprobieren ein grobes Konzept für Design und
Navigation vorgelegt haben.
Gleichzeitig wurde der Projektgruppe die bestehende Info-Seite von der get-AG
zur Verfügung gestellt, und die Aufgaben Gruppenintern wie folgt verteilt:
Florian Struck wurde zum Teamleiter. Seine Aufgaben waren die Koordination
und der Informationsfluss zwischen den einzelnen Gruppenmitgliedern. Gleichzeitig
pflegte Florian Struck den steten Kontakt zu der Firma conTakt. Als ‚Supervisor’
arbeitete er an allen anderen Aufgabenbereichen mit.
Mark Carstens übernahm die Dokumentation des gesamten Projekts, und alle
Präsentationen, die im Rahmen des Projekts anfielen. Gleichzeitig arbeitete er an der
Gliederung und Strukturierung der Inhalte, deren Länge und Aufteilung.
Florian Steigerwald setzte das gemeinsam erarbeitet Navigationskonzept
programmiertechnisch um und merzte alle Fehler aus, die Browserbedingt oder
durch die Programmierung selbst aufgetreten waren.
Andrej Teodorovic war nach einer allgemeinen Probierphase der gesamten
Gruppe für das Design zuständig und arbeitete später mit Florian Steigerwald an der
Einbindung des ‚Navigations-Focus’.
23

6.3 Drittes Treffen mit conTakt, Ende März 2001
Bei diesem Treffen waren Vertreter der Web-Design-Abteilung von conTakt
Anwesend um Richtlinien des Designs zu klären. Die Web-Designer erklärte sich
damit einverstanden, der Projektgruppe bei der Gestaltung der Seite freie Hand zu
lassen und stellte ihr weiteres Bildmaterial zur Verfügung.
Die Projektgruppe stellte den ersten Entwurf der Info-Seite vor, vor allem die
Navigation. Da die von der Projektgruppe erstellte Navigation von der Navigation der
ersten Info-Seite von der get-AG abweicht, wurde auf die Notwendigkeit einer
Navigationshilfe hingewiesen.
Die neue Seite sollte zu diesem Zeitpunkt auf eine get-Box aufgespielt werden,
um zu sehen welcher Teil des Bildes vom Bildschirmrand abgeschnitten wird. Dies
konnte leider nicht realisiert werden.
Statt dessen erhielt die Projektgruppe von der Firma conTakt leihweise eine alte
get-Box, auf die man Internetseiten aufspielen konnte, die sich dann mit Hilfe der
Box auf einem Fernseher darstellen ließen. So konnte die Projektgruppe alleine die
Toleranzbereiche für die Fernsehdarstellung feststellen.
Ein weiteres Treffen wurde für Ende April angesetzt. Zielsetzung bis dahin war
ein fertiges Design und eine funktionierende Navigation für eine Info-Seite, die
Inhaltlich vorerst mit der alten Info-Seite der get-AG übereinstimmen sollte.
6.4 Viertes Treffen mit conTakt, Mitte April 2001
Da die Projektgruppe bereits Mitte April eine vorläufige funktionsfähige Version
der Info-Page fertiggestellt hatte, wurde das Treffen vorverlegt.
Das Navigationskonzept wurde so wie es war angenommen.
Das Design hingegen wies einige Fehler auf, weshalb es überarbeitet werden
musste. (Siehe 3.2 Der erste Design-Versuch)
Die Projektgruppe sollte bis zum nächsten Treffen das Design noch einmal
überarbeiten und die Entwicklung der Navigation fortsetzen, da zu diesem Zeitpunkt
die Back-Taste freigegeben worden war.
24

6.5 Fünftes Treffen mit conTakt, Ende April 2001
Etwa eine Woche später legte die Projektgruppe eine überarbeitete Version der
Info-Seite vor. (Design siehe 3.4 Das endgültige Design)
Design und Navigation waren an sich zufriedenstellend.
Im gemeinsamen Gespräch fielen jedoch noch einige Punkte auf, die
Nachbesserungen erforderten:
- Oben im Bild wurde von der neuen get-Box ein weißer Balken angezeigt
- Rechts wurde ein Teil der Seite abgeschnitten
(Beide Probleme waren eventuell auf die Tatsache zurückzuführen, dass die
Homepage auf einer alten get-Box getestet worden waren)
- Prüfen der Notwendigkeit der OK-Button-Anzeige unterhalb der Top-Leiste
(Zu der Zeit noch animiert; Siehe 4.5 Hilfesystem)
- Trennen zwischen real angezeigten Komponenten und dem Auswahlfokus (Zu
dem Zeitpunkt noch kein ‚Highlight’; Siehe 4.6 Buttonoptik)
- Deutlichmachen des Auswahlfokus
- Ausgewählte Parts sollen stärker hervorgehoben werden
Der User soll wissen, was gerade angezeigt wird. Der Fokus ersetzt den
Mauszeiger, durch den OK-Knopf wird neu ausgewählt.
- Das Vorblättern mit der OK-Taste zwischen den Seiten sollte eventuell durch
Vor- und Zurückblättern mit den Links-Rechts-Tasten ersetzt werden
- Belegung der Back-Taste soll geprüft werden
Folgende Lösungsvorschläge wurden gemeinsam erarbeitet:
- Da die Back-Taste etwas abseits des Navigationskreuzes liegt soll sie nicht in
die Navigation mit einbezogen werden
- Die Abmessung der Seite wird mit Hilfe der neuen Get-Box geprüft und bei
Bedarf geändert
- Ausgewählte Teile der Auswahlleisten werden mit den gleichen Farben
hervorgehoben, eventuell auch durch optisches „hochheben“ oder
„reindrücken“
- Der Auswahlfokus wird durch Umrandung oder einen Zeiger realisiert, um
deutlich zu trennen
- Erweiterung der bestehenden Hilfeseite, eher ‚Einführungsseite’
- Prüfen einer kurzen Anzeige der ‚Startseite’ der mit dem Auswahlfokus
ausgewählten Kategorie als Vorschau. Danach wieder Anzeige der zuletzt
Ausgewählten Seite bei Nichtauswahl der neuen.
25

6.6 Weiterer Verlauf bis zur Abgabe Mitte Juni
Die Projektgruppe hatte nun eine neue Version der get-Box zur Verfügung.
Das Konzept für die neue Info-Seite war fertig und musste nur noch
nachgebessert werden.
Vondiesem Zeitpunkt an war ein Treffen zwischen der Projektgruppe und den
Vertretern der Firma conTakt nicht mehr notwendig, Fragen wurden Telefonisch
oder per E-Mail beantwortet, neuere Versionen der Info-Seite wurden ebenfalls per
E-Mail an conTakt geschickt, die per E-Mail ein Feedback gaben.
Am 02.Mai 2001 fand eine interne Projektpräsentation der IFIM statt, an der auch
die Projektgruppe teilnahm. Sie präsentierte dort ihre Projektaufgabe, die
Schwierigkeiten bei der Navigation und Darstellung so wie die Derzeitige Version der
Info-Seite im endgültigen Design.
Am 29. Mai 2001 fand der tag der offenen Tür bei der IFIm statt, wo die
Projektgruppe ihr Projekt und das derzeitige Ergebnis der Direktion der FH-Wedel,
der Presse und Vertretern aus der Industrie präsentierten.
Mitte Juni wurde eine endgültige Version der Info-Page an conTakt geschickt und
von conTakt ins Netz gestellt.
26

7. Und zum Schluß
Die besonderheit dieses Projektes lagen in der engen Zusammenarbeit mit den
Vertretern der Firma conTakt, dem ständigen Informationsaustausch und der
gemeinsamen Entwicklung eines Konzepts, das es in der Form vorher nicht gab. Auf
einem Gebiet, für das es bislang nur wenig Material und Referenzen gibt.
Es war sehr interessant, an der Neuentwicklung eines neuen Mediums (Fernseher
als Internetportal), dass sich in Zukunft wohl stark verbreiten wird, mitgewirkt zu
haben, auch wenn dies bedeutete, dass man tage- und nächtelang ausprobieren
musste, nur um das Ergebnis zu verwerfen und wieder von vorne Anzufangen. Den
Monat März und somit einen Teil der Vorlesungsfreien Zeit für diese schwierige
Anlaufphase zu nutzen war sehr hilfreich und hat es uns erspart, später in Zeitdruck
zu geraten.
Gelohnt hat sich auch der Einblick hinter die Kulissen der Firma conTakt und
deren Informationstechnischen Struktur und natürlich auch der Blick ins Klosterforst,
wo viele verschiedene soziale Schichten und Altersgruppen auf vergleichsweise
engem Gebiet zusammenwohnen und gemeinsam vo den neusten
Informationstechnischen Errungenschaften profitieren. Angefangen bei einer 2MBit-
Datenleitung in jedem Haushalt, unabhängig von der Telefonleitung.
Gefallen hat uns auch an dem Projekt, dass wir etwas erstellt haben, das in der
Praxis seine Anwendung findet. Natürlich sind dadurch entsprechend mehr Kriterien
zu erfüllen, aber dafür staubt das Ergebnis nicht in irgendwelchen Archiven ein ohne
einen parktischen Nutzen zu haben.
Es war ebenso ein interessanter Einblick wie durch sinnvolle AUfgabenteilung und
vor allem guter Koordination (Danke, Supervisor) die Entwicklung eines Produkts
zügig und ohne Zeitverluste, aber auch ohne unnötigen Druck vorangetrieben
werden kann, und wie man die Kommunikation mit dem ‚Auftraggeber’ sinnvoll in
den Entwicklungsprozess einbauen kann.
Wir bedanken uns an dieser Stelle ganz herzlich bei den Vertretern der conTakt-
IT und Web-Design. Dafür, dass sie sich immer wieder die Zeit genommen haben
um sich mit uns zusammenzusetzen. Dafür, dass wir zum größten Teil freie Hand
hatten und unsere Konzepte nach unseren Vorstellungen ausarbeiten durften. Und
natürlich für die ganzzeitige Betreuung und die Einladung nach Klosterforst nach
Beendigen des Projekts Anfang Juli.
Wir bedanken uns ebenfalls bei Prof. Schwanitz für die ganzzeitige Betreuung
seitens der FH.
Mark Carstens, MI3998
Florian Steigerwald, MI 4321
Florian Struck, MI 4100
Andrej Teodorovic, MI 4101
27