Diplomarbeit WebPublisher Gian Reto Strimer WP992627 Konzept
Transcrição
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