Diplomarbeit WebPublisher Gian Reto Strimer WP992627 Konzept

Diplomarbeit
WebPublisher
Gian Reto Strimer
WP992627
Konzept Webauftritt
Galerie Grüne Au
www.gruene-au.ch
Inhaltsverzeichnis
1
LEITGEDANKEN
5
2
AUSGANGSLAGE
5
3
AUFTRAG UND ZIELSETZUNG
5
4
3.1 Auftrag
5
3.2 Systemanforderungen
3.2.1 Funktionsorientierte fachliche Anforderungen an das System
3.2.2 Sicherheitsanforderungen
3.2.3 Anforderungen an die Entwicklungs- und Wartungsumgebung
5
5
5
6
3.3 Ziele
3.3.1 Definition
3.3.2 Zielkatalog
3.3.3 Allgemeine Marketingziele
3.3.4 Designziele
3.3.5 Inhaltsziele
3.3.6 Systemziele
6
6
6
6
6
6
7
3.4 Zielgruppen
7
MARKETINGKONZEPTION
7
4.1 Marketingmix
4.1.1 Produkt & Dienstleitung
4.1.2 Preis
4.1.3 Kommunikation
4.1.4 Distribution
4.1.5 Zusatzleistungen
7
7
7
7
7
8
4.2 Zielgruppen
8
4.3 Konkurrenz
8
4.4 Marktstruktur
8
4.5 Werbung
4.5.1 Klassische Werbung
4.5.2 Online Werbung
8
8
8
Seite 2
5
PROJEKTORGANISATION
9
6
TERMINE UND KOSTEN
9
6.1 Termine und Aktivitätenliste
6.1.1 Milestones
6.1.2 Ressourcenplan
6.1.3 Testplan
6.1.4 Schulung
9
9
10
10
10
6.2 Mittelbedarf
6.2.1 Sachmittel
6.2.2 Personalressourcen
6.2.3 Finanzen
6.2.3.1 Investitionskosten
6.2.3.2 Betriebskosten
10
10
10
10
11
11
INHALT DER WEBSITE
11
7
8
7.1 Bilder
7.1.1 Bild des Monats
7.1.2 KünstlerIn
7.1.3 Galerie
7.1.4 Ausstellungen
11
11
11
11
11
7.2 Bücher
7.2.1 Buchempfehlung
7.2.2 AutorIn
7.2.3 Verlag
7.2.4 Programm
11
11
12
12
12
7.3 Bildung
7.3.1 Bildungstipp
7.3.2 Porträt
7.3.3 Tätigkeitsfeld
12
12
12
12
7.4 Grüne Au
7.4.1 Über uns
7.4.2 Kontakt
7.4.3 Links
7.4.4 Sitemap
12
12
12
12
12
STRUKTUR UND NAVIGATION
13
8.1 Benutzerkonzept
13
8.2 Navigationskonzept
13
Seite 3
9
FESTLEGUNG DER TECHNISCHEN PARAMETER
14
9.1 Systemanforderungen
9.1.1 Allgemein
9.1.2 Eingebundene Elemente
9.1.2.1 Image Map
9.1.2.2 Animiertes GIF
9.1.2.3 JavaScript
9.1.2.4 DHTML
9.1.2.5 CSS
9.1.2.6 Flashanimation
9.1.2.7 Java Applet
14
14
14
14
14
15
15
15
15
15
10 ZUSAMMENSTELLUNG DER INHALTE UND
MATERIALSAMMLUNG
15
10.1
Firmenlogo
16
10.2
Texte
16
10.3
Bilder
16
11 BASISDESIGN UND CI
16
11.1
CI und CD
16
11.2
Seiteneinteilung und Frameaufteilung
17
11.3
Farben
18
11.4
Fonts
18
11.5
Navigationsbuttons
18
12 BETRIEB UND WARTUNG
18
13 ORGANISATORISCHE UND RECHTLICHE AUSWIRKUNGEN
18
14 SCHLUSSWORT
19
Seite 4
1 Leitgedanken
Die Projektarbeit entstand im Rahmen der Diplomarbeit zum Web Publisher SIZ. In
erster Linie soll mit dieser Arbeit ein Internetauftritt für die Firma Galerie Zur Grünen
Au realisiert werden. Die Projektarbeit soll alle vom Auftraggeber gewünschten
Anforderungen enthalten. Gleichzeitig sollen aber auch die von der SIZ geforderten
Elemente möglichst sinnvoll in den Internetauftritt eingebaut werden.
2 Ausgangslage
Mit der Anmeldung zur Diplomarbeit bei der SIZ wurde der Abgabetermin 21. Juli
2000 vorgegeben. Der Kunde möchte den Internetauftritt nach diesem Termin
veröffentlichen und hat aus diesem Grund den URL gruene-au.ch bei Switch
registrieren lassen. Die Firma Tiscalinet wird diesen Webauftritt nach Abschluss der
Diplomarbeit „hosten“.
Bei der Firma Galerie Zur Grünen Au handelt es sich um einen kleinen privaten
Dienstleistungsbetrieb. Eine Malerin und ein Ausbildner betreiben zusammen eine
Ateliergalerie, einen Buchverlag und ein Bildungsinstitut.
Mit diesem Internetauftritt sollen die drei Hauptprodukte Bilder, Bücher und Bildung
erstmals unter einen Hut gebracht und miteinander vermarktet werden. Bisher wurde
unter diesem Namen noch keine Werbung gemacht und dementsprechend sind bis
anhin kein Coorperate Design und Coorperate Identity vorhanden.
Der Internetauftritt soll bestehende und potentielle Kunden im deutschsprachigen
Raum ansprechen.
3 Auftrag und Zielsetzung
3.1 Auftrag
Der Auftrag für den Internetauftritt der Firma Galerie Zur Grünen Au besteht
zwischen Eugen Roth, Geschäftsführer der Galerie und Gian Reto Strimer.
3.2 Systemanforderungen
•
•
•
•
Vorstellen der Galerie Zur Grünen Au
Umfassende Beschreibung der Dienstleistungen und Produkte
Umfassende Beschreibung der Tätigkeitsfelder
Bestellformular für Online-Buchbestellungen
3.2.1 Funktionsorientierte fachliche Anforderungen an das System
• Einfache, transparente Navigation
• Die Lösung soll zielgruppenorientiert sein
3.2.2 Sicherheitsanforderungen
Die Lösung darf zu keinem betrieblichen Risiko werden. Dies ist nicht der Fall, da
kein eigener Webserver betrieben wird und der Auftritt nach der Diplomarbeit bei der
Firma Tiscalinet „gehostet“ wird.
Seite 5
3.2.3 Anforderungen an die Entwicklungs- und Wartungsumgebung
•
•
•
•
Einfacher Update der bestehenden Seite
Logischer Aufbau der Ordnerstruktur
Klare und verständliche Namensgebung
Keine Mehrfachspeicherung gleicher Bilder
3.3 Ziele
3.3.1 Definition
Die Galerie Zur Grünen Au verfügt über einen Webauftritt, der
• wirtschaftlich sinnvoll ist. Das heisst der Aufwand für Realisierung, Betrieb und
Wartung muss in einem angemessenen Verhältnis zum Nutzen stehen
• die Erreichung der Firmenziele erhöht
• die im Marketing festgelegten Ziele zu erreichen hilft
• die im Marketingmix definierten Lösungsansätze umsetzt
3.3.2 Zielkatalog
Finanzielle und wirtschaftliche - Zusätzlicher Verkauf von Büchern 3%
Ziele
- Zusätzlicher Verkauf von Bildern 3%
- Zusätzliche Aufträge im Bereich Bildung und Beratung
3%
Image Ziele
- Imagegewinn
- Grösserer Bekanntheitsgrad der Galerie
Qualitätsziele
Die drei verschiedenen Kundensegmente fühlen sich
durch ein attraktives Design der Seite angesprochen
Personelle Ziele
Der Internetauftritt generiert keinen grossen
Zusatzaufwand
3.3.3 Allgemeine Marketingziele
•
•
•
•
•
Vorstellen der Dienstleistungen und der Produkte
Anwerben neuer Kunden
Vertiefen bestehender Kundenbeziehungen
Kundschaft auf aktuellem Stand des Dienstleistungsangebots halten
Vereinfachen der Kommunikation
3.3.4 Designziele
• Das Design soll modern und trotzdem seriös wirken. Alle drei Kundensegmente
fühlen sich angesprochen
• Einheitliches Design für die drei Kategorien Bilder, Bücher und Bildung
• Verknüpfung der drei Themen zu einer Einheit
3.3.5 Inhaltsziele
•
•
•
•
Qualität kommt vor Quantität
Die Sprache beschränkt sich auf Deutsch
Benutzerorientierte Anordnung der Kapitel und Präsentation der Inhalte
Der Benutzer soll sich leicht auf der Seite zurechtfinden. Sitemap und
Stichwortverzeichnis sind auf jeder Seite zu finden
• Die Navigationsleiste hat maximal 7 Kapitel
• Bestellformular für Buchbestellungen
Seite 6
3.3.6 Systemziele
• HTML Seiten und Bilder sind logisch benannt und strukturiert in Verzeichnissen
abgelegt
• Der Auftraggeber legt Wert auf eine kundenfreundliche und einfach gegliederte
Website, welche jederzeit ausbaubar ist
• Bilder müssen in einem optimalen Grössen - Qualitätsverhältnis gespeichert
werden. Bilder der Navigation werden vorgeladen
• Die Ladezeiten müssen so kurz wie möglich sein
3.4 Zielgruppen
Name der
Zielgruppe
Stammkunden
Soziodemografie
soziale Schicht
mittel bis hoch
Neukunden mit
Kunstinteresse
Neukunden
Leserkreise
soziale Schicht
mittel bis hoch
alle sozialen
Schichten.
Kinder bis
Manager
soziale Schicht
mittel bis hoch
Neukunden mit
Bildungsinteresse
Verhalten
Neugierig bis kritisch.
Produkte grösstenteils schon
bekannt.
Auf Qualität bedacht. Hohe
Erwartungen
Modern bis konservativ.
Auf Qualität bedacht.
Neugierig bis kritisch.
Sehr interessiert, aber auch
sehr kritisch.
Nutzung des
Internet
Altersabhängig
Altersabhängig
Sehr
unterschiedlich.
Vom Anfänger bis
zum Internetcrack
Grosse Nutzung
dank hohem
Ausbildungsstand
4 Marketingkonzeption
4.1 Marketingmix
4.1.1 Produkt & Dienstleitung
Produkte und Dienstleistungen können auf der Homepage im Detail aufgezeigt
werden. Mit dem Bild des Monats, der Buchempfehlung und dem Bildungstipp kann
auf jeweilige Neuigkeiten hingewiesen werden.
4.1.2 Preis
Die Verkaufspreise von Büchern werden in einer Preisliste angezeigt. Es wird auch
auf die Zahlungsbedingungen hingewiesen.
4.1.3 Kommunikation
Der Webauftritt soll als Werbeträger dienen. Es wird auf Ausstellungen und Messen
hingewiesen. Alle Produkte und Dienstleistungen werden im Detail aufgezeigt.
Bildmaterial sowie Buch- und Bildungsinformationen werden veröffentlicht. Die
Korrespondenz kann via E-mail erledigt werden.
4.1.4 Distribution
Online Buchbestellungen sind neuerdings möglich. In einem Übersichtsplan von
Männedorf wird der Standort der Galerie gezeigt und auf die Möglichkeit eines
Besuchs hingewiesen.
Seite 7
4.1.5 Zusatzleistungen
Vorerst werden keine Zusatzleistungen, wie z.B. FAQ oder Support zur Verfügung
gestellt. Anfragen zu den Themen Bilder, Bücher und Bildung können jedoch via Email an die Galerie Zur Grünen Au geschickt werden.
4.2 Zielgruppen
Siehe Zielgruppenkatalog im Kapitel 3.4
4.3 Konkurrenz
Konkurrenz gibt es in den jeweiligen Sparten Bilder, Bücher und Bildung. Da jedoch
in allen drei Bereichen eine grosse individuelle Prägung besteht, kann von einer
vergleichbaren Konkurrenz nicht gesprochen werden.
4.4 Marktstruktur
20% der Schweizer Bevölkerung (1.5 Mio.) benutzen das Internet heute regelmässig.
Diese Tendenz ist zunehmend. Von den Internetbenutzern kaufen ca. 9% über das
Internet ein. Der Grund für diese Zurückhaltung liegt vor allem in der Sicherheit der
Online-Bezahlung.
In erster Linie soll der Internetauftritt der Galerie Zur Grünen Au zu Informationszwecken dienen. Bücher können jedoch in Zukunft direkt über das Internet bestellt
werden. Die Galerie hat keine Verbindung zu einer Kreditkartenfirma. Rechnung oder
Eurocheques werden als mögliche Zahlungsmittel eingesetzt.
4.5 Werbung
4.5.1 Klassische Werbung
• URL Adresse sowie E-mail Adresse sind in Inseraten und Broschüren ersichtlich
• URL wird auf jeglicher Korrespondenz publiziert
• URL wird in Telefonbüchern eingetragen
4.5.2 Online Werbung
•
•
•
•
Eintrag in Suchmaschinen und Kataloge
Cross-Selling, d.h. Link-Austausch mit Partnern, Kunden und Lieferanten
E-mail Versand an bestehende und potentielle Kunden (Push-mail)
Eigene Homepage. Mit einem interessanten Inhalt und einem attraktiven Design
sollen Besucher animiert werden, regelmässig diese Seite zu besuchen
Seite 8
5 Projektorganisation
Für dieses Projekt wurde eine reine Projektorganisation mit folgenden Rollen
gewählt:
Auftraggeber Eugen Roth
Überwachung des Projekts und des Budgets, Kontrolle der Meilensteine, Lieferung
von Inhalt, Finanz- und Terminverantwortung.
Projektleiter und Webpublisher Gian Reto Strimer
Formulierung des Auftrags in Absprache mit dem Auftraggeber, Planung und
Koordination der Arbeiten, Verantwortung für Konzept und Design, Programmierung
und Umsetzung der Website.
6 Termine und Kosten
6.1 Termine und Aktivitätenliste
Zwischen dem Auftraggeber und dem Projektleiter finden regelmässig Sitzungen
statt. Der Auftraggeber kann den Stand der Arbeiten jederzeit mitverfolgen.
Anregungen und Feedback sind umgehend dem Projektleiter mitzuteilen.
Der Projektleiter erstellt und verwaltet den Terminplan in einem Balkendiagramm,
welches den kritischen Pfad und die Pufferzeiten übersichtlich darstellt. Die
Aktivitätenliste wird ebenfalls durch den Projektleiter erstellt und vom Auftraggeber
kontrolliert. Abweichungen sind dem Auftraggeber umgehend mitzuteilen.
6.1.1 Milestones
Datum
09.04.00
17.04.00
12.05.00
19.05.00
19.05.00
26.05.00
30.06.00
30.06.00
14.07.00
20.07.00
21.07.00
07.08.00
September 00
laufend
Milestone
Einreichen Realisierungsantrag SIZ
Bewilligung Realisierungsantrag durch SIZ
Drei Designvorschläge ausgearbeitet
Entscheid für ein Design
Draftversion des Konzepts erstellt
Texte und Bilder vom Auftraggeber geliefert
Programmierung abgeschlossen
Konzept fertiggestellt
Tests abgeschlossen
Nachbearbeitung abgeschlossen
Daten auf SIZ Server geladen
Block 3 und 4 der Diplomarbeit
Aufschalten der Website bei Tiscalinet
Wartung und Weiterentwicklung
Seite 9
6.1.2 Ressourcenplan
Gian Reto Strimer
Eugen Roth
diverse Personen
Total
Web Publisher und Projektleiter
Auftraggeber
Test der Website
25 - 30
2-3
1-2
28 - 35
Bei diesem Internetauftritt handelt es sich um das erste Webprojekt von Gian Reto
Strimer. Entsprechend ist der geleistete Aufwand um einiges höher als bei einem
erfahrenen Web Publisher. Der Auftraggeber ist sich dieser Situation voll bewusst und
akzeptiert dies im Rahmen der Ausbildung.
6.1.3 Testplan
Die Website wird durch mehrere Personen auf beiden Plattformen getestet.
Bei den Tests soll vor allem auf fehlende Bilder, falsche Links, Rechtschreibefehler
etc. geachtet werden. Fehler werden umgehend dem Projektleiter gemeldet und
entsprechende Korrekturen vorgenommen.
6.1.4 Schulung
Da der Arbeitgeber bereits mit dem Internet und dem Umgang von E-mail vertraut
ist, muss keine Schulung durchgeführt werden. Der Unterhalt der Website wird
vorläufig durch Gian Reto Strimer vorgenommen. Kleine Unterhaltsarbeiten sollen in
Zukunft vom Auftraggeber selbst ausgeführt werden können. Die dazu notwendigen
Instruktionen werden vom Projektleiter gegeben.
6.2 Mittelbedarf
6.2.1 Sachmittel
Es sollen keine zusätzlichen Mittel angeschafft werden.
6.2.2 Personalressourcen
- Auftraggeber und Projektleiter, max. 33 PT in 3 Monaten
- Testpersonen, max. 2 PT
6.2.3 Finanzen
Da der Internetauftritt im Rahmen der Diplomarbeit SIZ erstellt wird, müssen keine
Kosten für Konzeption, Design und Umsetzung berücksichtigt werden.
Seite 10
PT
PT
PT
PT
6.2.3.1 Investitionskosten
Anschaffung von SW (Design- und Entwicklungstools)
Anschaffung von HW (PC, Modem, ISDN, Scanner)
Anmeldung Switch
Marketingmassnahmen
Personal (Projektleiter und Web Publisher)
Grafikkosten (3 Grafiken von Photodisc)
Total
SFr.
SFr.
SFr.
SFr.
SFr.
SFr.
SFr.
0.0.80.2000.0.120.2200.-
SFr.
SFr.
SFr.
SFr.
SFr.
360.48.500.240.1148.-
6.2.3.2 Betriebskosten
Hostinggebühren Tiscalinet
Domain gruene-au.ch
Wartung und Update der Website
Gebühren Telefon/E-mail
Total
7 Inhalt der Website
Der ganze Internetauftritt besteht aus den drei Hauptthemen Bilder, Bücher und
Bildung. Zusätzliche Inhalte, die unabhängig zu den Hauptthemen stehen, werden
unter dem Kapitel Grüne Au zusammengefasst.
7.1 Bilder
7.1.1 Bild des Monats
Die Seite, Bild des Monats, ist das jeweilige Startbild des Kapitels Bilder und soll, wie
der Name schon sagt, jeden Monat aktualisiert werden. Dies soll Benutzern einen
zusätzlichen Anreiz geben, die Seite regelmässig zu besuchen.
Auf dieser Seite besteht auch eine Verknüpfung zur Diashow, einem Java Applet,
welches weitere Bilder in einer kurzen Sequenz ablaufen lässt.
7.1.2 KünstlerIn
In wenigen Stichworten wird auf dieser Seite die Biographie der Malerin sowie ihr
bisheriger Werdegang wiedergegeben.
7.1.3 Galerie
In kurzen und prägnanten Sätzen wird die Hausgalerie der Familie Roth-Bodmer
vorgestellt.
7.1.4 Ausstellungen
Hier wird auf aktuelle Ausstellungen hingewiesen.
7.2 Bücher
7.2.1 Buchempfehlung
Analog zum Bild des Monats soll auf dieser Seite ein aktueller Buchtitel vorgestellt
werden. Gleichzeitig findet man einen Link zum Bestellformular.
Seite 11
7.2.2 AutorIn
Diese Seite zeigt eine Zusammenfassung über den Werdegang des Autors sowie eine
Übersicht der Publikationen.
7.2.3 Verlag
Hier werden dem Benutzer Informationen zum Buchverlag gegeben.
7.2.4 Programm
Das ganze Buchprogramm wird auf dieser Seite aufgelistet. Die Bücher sind in 3
Themengruppen gegliedert.
Das Bestellformular wurde der Seite Programm angegliedert. Es enthält alle
Angaben, welche zum Versand von Büchern benötigt werden.
Die Verkaufskonditionen sind ebenfalls auf diesem Formular ersichtlich.
7.3 Bildung
7.3.1 Bildungstipp
Im Bildungstipp wird jeweils ein aktuelles Seminar vorgestellt. Auch dieser
Seiteninhalt wird in Zukunft regelmässig ausgewechselt und soll den Benutzer zum
regelmässigen Besuchen auffordern.
7.3.2 Porträt
Auf dieser Seite ist das Trainerporträt und das Persönlichkeitsprofil von Eugen Roth
beschrieben.
7.3.3 Tätigkeitsfeld
Das ganze Tätigkeitsspektrum des Ausbildners wird auf dieser Seite gezeigt.
7.4 Grüne Au
7.4.1 Über uns
Hier werden die beiden Galeriebesitzer kurz vorgestellt, und es wird auf ihre
Tätigkeiten verwiesen.
7.4.2 Kontakt
Mit einem kleinem Kartenausschnitt von Männedorf wird der Standort der Galerie
gezeigt. Hier werden auch die verschiedenen Kontaktmöglichkeiten aufgelistet.
7.4.3 Links
Auf dieser Liste sollen Links zu Geschäftspartnern aufgeführt werden.
7.4.4 Sitemap
Die Sitemap soll einen kurzen und klaren Überblick des ganzen Auftritts geben. Jedes
Kapitel kann dank Imagemap angesteuert werden. Zusätzlich steht dem Benutzer ein
Stichwortverzeichnis zur Verfügung. Auch hier sind alle Stichwörter mit der jeweils
gewünschten Seite verknüpft.
Seite 12
8 Struktur und Navigation
8.1 Benutzerkonzept
Der Fokus bei der Realisierung dieses Internetauftritts liegt bei einer kundenfreundlichen Benutzerführung. Eine übersichtliche Navigation soll dem Benutzer ein
einfaches Auffinden des Gesuchten ermöglichen.
Obwohl die Seiten auf Frames basieren, hat der Internetsurfer die Möglichkeit, die
verschiedenen Hauptthemen (Bilder, Bücher, Bildung) zu „bookmarken“.
Der Benutzer findet auf jeder Seite die Navigationsleiste und weiss immer, wo er sich
gerade befindet. Die Navigationsleiste zeigt ein Maximum von 7 Menupunkten auf
und ist somit übersichtlich. Will man von einem Hauptthema zum anderen wechslen,
kann dies von jeder Seite aus getan werden, ohne auf die Startseite zurückzukehren.
Die Menupunkte tragen klare und aussagekräftige Titel, damit der Benutzer den
gesuchten Inhalt schnell und einfach finden kann. Der Titel wird jeweils auch in der
Statuszeile angezeigt.
Mit Hilfe der Sitemap ist es möglich, einen Überblick des ganzen Auftritts zu
gewinnen. Zusätzlich soll ein Stichwortverzeichnis die Suche nach ausgewählten
Begriffen vereinfachen. Die Sitemap kann von jeder Seite aus angesteuert werden.
Der ganze Webauftritt wird ausschliesslich in deutscher Sprache angeboten.
8.2 Navigationskonzept
Die einzelnen Seiten und Kapitel sind in der folgenden Grafik festgehalten:
Flash Intro
Homepage
Bilder
Diashow
Bücher
Bildung
Über uns
Bild des
Monats
Buchempfehlung
Bildungstipp
KünstlerIn
AutorIn
Porträt
Kontakt
Galerie
Verlag
Tätigkeitsfeld
Links
Bestellformular
Ausstellungen
Programm
Sitemap /
Stichwortverzeichnis
Seite 13
9 Festlegung der technischen Parameter
9.1 Systemanforderungen
9.1.1 Allgemein
Der Internetauftritt Galerie Grüne Au wurde für Browser der Marken Netscape
Communicator und Internet Explorer ab Version 4.0 optimiert. Die Seitengrösse
wurde für Bildschirmauflösungen von mindestens 800x600 Pixel geplant. Der Auftritt
sollte auf beiden Applikationen, Macintosh sowie Windows PC, möglichst identisch
erscheinen. CSS-Seiten werden eingesetzt, um die Schriftgrösse der beiden
Plattformen zu steuern. Bei der Farbauswahl wurden, wo möglich, nur Webfarben
eingesetzt.
Der Aufbau der Site soll einfach und konsistent sein. Auf kurze Ladezeiten wird
besonderen Wert gelegt. Die Website muss für weitere Entwicklungen ausbaufähig
sein.
Die Dateinamen sind selbsterklärend und die Ordner klar aufgeteilt, d.h. logisch und
einfach nachzuvollziehen. Das Hosting und der Unterhalt der Seiten kann somit ohne
Probleme von anderen Personen übernommen werden. Mit dem Einsatz von Frames
und CSS-Scripts wird der Unterhalt zusätzlich vereinfacht.
Der ganze Webauftritt wurde auf einem Performa 6500 und einem Powerbook der
Marke Macintosh entwickelt. Zur Erstellung des HTML-Codes wurde der Editor von
BB-Edit verwendet. Zur Bildbearbeitung wurde ausschliesslich der Photoshop 5.5 von
Adobe eingesetzt. Die Filmanimation wurde mit Flash 4.0 von Macromedia erarbeitet.
Das animierte GIF wurde mit dem GIF-Builder erstellt. Für das Erstellen von Image
Maps wurde der Image Mapper von Stuart Snaddon verwendet.
9.1.2 Eingebundene Elemente
Entsprechend den Anforderungen der SIZ wurden folgende Elemente in den
Webauftritt eingebunden:
9.1.2.1 Image Map
Der Einsatz von Image Maps wurde zweimal gewählt. Das Logo, welches jeweils im
rechten oberen Frame (top_right) der jeweiligen Frameseiten erscheint, führt durch
anklicken zurück auf die Startseite.
Alle Kapitel der Sitemap sind mit einem Image Map belegt. Mit einem Click auf das
entsprechende Feld wird die gewünschte Seite geladen.
9.1.2.2 Animiertes GIF
Vom Auftraggeber wurde eine ruhige Seite gewünscht und darum auf ein animiertes
GIF verzichtet. Um den Prüfungsanforderungen zu entsprechen, wird der Einsatz von
einem animierten GIF auf einer zusätzlichen Seite gezeigt à zusatz.html.
Seite 14
9.1.2.3 JavaScript
Auf der Einstiegsseite wird mit einem JavaScript die Browserversion abgefragt. Da
dieser Auftritt für Netscape- und Internet Explorer-Versionen ab 4.0 entwickelt
wurde, erscheint bei älteren Browsern ein zusätzliches Fenster version.html. Mittels
Link zu Netscape oder IE kann eine aktuelle Browserversion auf den PC/Mac geladen
werden.
Die Abfrage des Flash Plug-ins kontrolliert, ob der Intro Film abgespielt werden kann.
Ist das Plug-in clientseitig nicht vorhanden, wird automatisch auf die Seite start.html
gewechselt.
Auf den restlichen Seiten findet jeweils eine Applikationsabfrage mittels JavaScript
statt. Um die Schriftgrösse der Applikation (Macintosh oder Windows PC)
anzupassen, wird auf die entsprechenden CSS-Seiten zugewiesen.
Zusätzlich wird JavaScript für MouseOver Funktionen sowie die clientseitige
Inputvalidierung des Formulars eingesetzt.
9.1.2.4 DHTML
Wie beim animierten GIF handelt es sich auch bei DHTML nicht um eine Anforderung
des Auftraggebers. Da keine sinnvolle Anwendung für diese Technik innerhalb des
Auftritts gefunden werden konnte, wird auch dieses Element auf der zusätzlichen
Seite gezeigt à zusatz.html.
9.1.2.5 CSS
Mit dem Einsatz von Cascading Style Sheets wird in erster Linie die Formatierung
(Grösse und Farbe) von Text, der Titel H1-H7, Anchor Tags sowie der Ordered und
Unordered Lists gesteuert. Zusätzlich werden Hintergrundfarbe und Hintergrundbild
vorgegeben. Da es sich bei diesem Internetauftritt um drei Hauptthemen handelt,
wird mit verschiedenen Farben gearbeitet. Um einen einfacheren Überblick über die
verschiedenen CSS-Formatierungen zu erhalten, wurde mit mehreren Style Sheets
gearbeitet.
9.1.2.6 Flashanimation
Auch bei der Flashanimation, welche automatisch auf der Einstiegsseite startet,
handelt es sich nicht um eine Anforderung des Auftraggebers. Ob dieses Intro auch in
Zukunft eingesetzt wird, ist noch fraglich. Die Melodie wird auf jeden Fall ausgebaut,
da die Urheberrechte nicht vorhanden sind und auch die erforderliche Genehmigung
bei Swica nicht eingeholt wurde.
9.1.2.7 Java Applet
Beim Java Applet handelt es sich um Freeware von anfyteam.com. Für den Einsatz
einer Diashow, welches Bilder in regelmässigen Zeitabschnitten auswechselt und
beim Bildwechsel einen „Fading“-Effekt entwickelt, eignet sich dieses Applet ideal.
10 Zusammenstellung der Inhalte und Materialsammlung
Wie bereits in Kapitel 2 erwähnt, handelt es sich um ein erstmaliges Auftreten der
Galerie Zur Grünen Au in dieser Form. Dementsprechend lag noch kein Cooperate
Identity / Design vor. Dies hatte Vorteile, da weniger Einschränkungen bei der Wahl
der Schrift und der Farben vorlagen. Dafür war der Zeitaufwand für das Design eines
passenden Logos entsprechend grösser.
Seite 15
10.1 Firmenlogo
Das Firmenlogo wurde speziell für diesen Internetauftritt von Gian Reto Strimer
kreiert. Aufgrund der klaren Schrift soll Kontinuität und mit den geschwungenen
Linien Dynamik vermittelt werden. Der Buchstabe I wird durch einen Baum ersetzt
und reflektiert sinnbildlich die grüne Au. Das Logo wird zukünftig auch in
Korrespondenz sowie für Inserate und Werbung eingesetzt.
10.2 Texte
Alle Texte sind vom Auftraggeber selbst gewählt und verfasst worden.
10.3 Bilder
Bei allen eingesetzten Bildern handelt es sich um GIFs oder JPGs, die im Photoshop
optimiert wurden. Die Bilder der Navigation sind vom Webpublisher gewählt und
wurden auch durch ihn bearbeitet. Die Hintergrundbilder (Staffelei, Bücher und
Diplomrolle) wurden bei photodisc.com offiziell erworben.
Alle Bilder im Kapitel Bilder sind von Frau Verena Roth-Bodmer gemalt und zur
Verfügung gestellt.
Der Kartenausschnitt von Männedorf wurde einer Karte des Bundesamtes für
Landestopografie entnommen. Bei der Veröffentlichung nach Abschluss der
Diplomarbeit muss das Einverständnis des Urhebers eingeholt werden.
11 Basisdesign und CI
11.1 CI und CD
Freie Wahl des Designs, da bis anhin kein einheitlicher Auftritt der drei Produkte
bestand.
Verschiedene Vorschläge wurden dem Auftraggeber unterbreitet. Das neu kreierte
Logo wird auch in Zukunft in Korrespondenz sowie für Inserate und Werbung
eingesetzt.
Seite 16
11.2 Seiteneinteilung und Frameaufteilung
Abgesehen von der Indexseite mit Intro und der Startseite wird auf allen weiteren
Seiten mit folgender Frameaufteilung gearbeitet:
1
2
3
6
4
5
1. Frame top_left
Darin wird die Hauptnavigation der Website gesteuert (Bilder, Bücher, Bildung).
Grösse: 200 x 100 px
2. Frame top_right
Zeigt rechtsbündig das Logo der Galerie.
Grösse: dynamisch bis max. 550 x 100 px
3. Frame nav
Hier steht die Unternavigation der drei Hauptthemen.
Grösse: 200 x 300 px
4. Frame blank
Dieses Frame wird einzig als „Placeholder“ gebraucht.
Grösse: 200 px x dynamisch
5. Frame foot
Startseite, Sitemap und E-mail können auf jeder Seite via dieses Frame erreicht
werden.
Grösse: 200 x 40 px
6. Frame main
Eigentliche Inhaltseite.
Grösse: dynamisch x dynamisch (die maximale Breite wird jeweils in Tabellen
restriktiert, die Höhe passt sich der Bildschirmgrösse an)
Seite 17
11.3 Farben
Der Webauftritt wird in vier Farben gegliedert:
schwarz
#000000
wird für die neutralen Kapitel der Galerie verwendet
grün
#006600
wird für Bilder verwendet
grau
#333333
wird für Bücher verwendet
blau
#000099
wird für Bildung verwendet
11.4 Fonts
Wo immer möglich wird der Font Verdana eingesetzt. Die Definition der Fonts
geschieht im Current Style Sheet. Erkennt ein Browser diesen Font nicht wird vom
CSS die Schrift Arial für PC oder Helvetica für Mac vorgeschlagen. Bei diesen drei
Schriften handelt es sich um Fonts ohne Serifen. Diese Schriften erscheinen auf
Computerbildschirmen klarer und sind somit angenehmer zu lesen.
Auch die restliche Formatierung der Fonts, H1-H4, Anchor Tags etc. wird im CSS
geregelt.
11.5 Navigationsbuttons
Die Navigationsbuttons sind transparente GIF Bilder, welche im Photoshop kreiert
wurden.
Bei den B’s der Hauptnavigation wurde jeweils ein Bild hinterlegt, um einen
speziellen Effekt zu erreichen. Die restlichen Buttons wurden in Verdana-Schrift
erstellt und mit einem Reliefeffekt bearbeitet. Die Farbe der Buttons ist den
jeweiligen Themen angepasst.
12 Betrieb und Wartung
Der Webauftritt wird nach der Diplomarbeit bei Tiscalinet „gehostet“. Abweichungen
und Änderungen zur Diplomarbeit werden vom Projektleiter vorgenommen. Der
Betrieb und die Wartung der Site wird vorerst noch bei Gian Reto Strimer bleiben,
soll aber in der Zukunft dem Auftraggeber übetragen werden.
13 Organisatorische und rechtliche Auswirkungen
Der Internetauftritt der Galerie Zur Grünen Au hat keine grossen Auswirkungen auf
die Organisation, da bereits jetzt schon per E-mail mit Kunden kommuniziert wird.
Bestellungen oder Anfragen, welche neu per E-mail übermittelt werden, können ohne
Probleme in den bisherigen betrieblichen Organisationsablauf integriert werden.
Um rechtliche Auswirkungen zu vermeiden, wurde ausschliesslich eigenes
Bildmaterial eingesetzt. Fremdes Bildmaterial, z.B. Hintergrundbilder, wurden bei
photodisc.com erworben.
Die Konditionen bei Buchbestellungen sind beim Bestellformular ersichtlich.
Das Urheberrecht des Designs bleibt bei Gian Reto Strimer.
Seite 18
14 Schlusswort
Hiermit erkläre ich, das Konzept selbständig geschrieben und die Website
eigenhändig designed und programmiert zu haben.
Männedorf, 14. 7. 2000
Gian Reto Strimer
Seite 19