systemdokumentation

Transcription

systemdokumentation

systemdokumentation
Diplomarbeit WebPublisher SIZ
[WP032H0132]
kosmetikstudio
I diplomarbeit webpublisher siz I systemdokumentation life & beauty I
I Reto Good, 17. Februar 2004 I
inhaltsverzeichnis
realisierungsplattform................................................................................................................. 3
Entwicklungsplattform ....................................................... 3
Entwicklungssoftware ........................................................ 3
Datenbank ...................................................................... 3
Administration
Daten ........................................................ 3
mindestanforderungen an die website ........................................................................................ 3
META-Tags ...................................................................... 3
Imagemap ....................................................................... 4
Animated
GIF .................................................................. 4
Rollover-Effekt ................................................................ 4
Weitere
eingebundene
JavaScripts ........................................ 4
Multimedia-Element........................................................... 5
DHTML-Elemente............................................................... 5
Einsatz
von
Formular
Cascading
zur
Eingabe
Style
von
Sheets
Daten
(CSS) .............................. 5
durch
den
Benutzer ................. 7
Konformität .................................................................... 7
Browserkompatibilität ....................................................... 7
Aktives
Handling
verschiedener
Client-Systemplattformen .......... 8
Stabilität ....................................................................... 8
style guide .................................................................................................................................. 8
Farben ........................................................................... 8
Schrift .......................................................................... 9
Logo ............................................................................. 9
inhalte der website...................................................................................................................... 9
ordnerstruktur der website........................................................................................................ 12
Sitemap ........................................................................ 13
benutzer- und navigationskonzept............................................................................................ 13
Navigatonskonzept........................................................... 13
Benutzerführung ............................................................. 14
Rechtliche
Auswirkungen
.................................................. 15
I Seite 2 / 15 I
realisierungsplattform
Entwicklungsplattform
Entwickelt wurde die Site auf einem Windows NT Workstation Rechner mit installiertem ApacheServer 2.0, PHP 4.0 und MySQL 3.23.56.
Entwicklungssoftware
Folgende Software wurde für die Erstellung des Webauftritts verwendet:
- Macromedia Dreamweaver MX 6.0
>> HTML-Seiten / CSS / PHP
- Macromedia Fireworks MX 6.0
>> Layout / Grafik
- Macromedia Flash MX 6.0
>> Flashanimation
- Adobe Photoshop 7.0
>> Bildbearbeitung / Scan
- WS-FTP 95 / Dreamweaver MX
>> Datentransfer
- phpMyAdmin 2.52
>> Datenbank
Datenbank
Es wurden zwei Datenbanken mit dem phpMyAdmin-Tool erstellt.
produkte
In dieser Datenbank werden alle Produkte der vier verschiedenen Produktelinien erfasst.
kontakt
In dieser Datenbank werden die geforderten Personalien, Interessen und
Anregungen vom Kontaktformular abgelegt.
Administration Daten
Die Auftraggeberin hat die Möglichkeit über die Administrationsseiten direkt die Daten in der Datenbank zu mutieren. Mit der URL – Erweiterung "/admin" hat sie Zugriff auf die Administrationsseiten, die
nach der Aufschaltung mit .htaccess passwortgeschützt werden. Nach Auswahl der entsprechender
Adminseite können die nötigen Änderungen vollzogen werden.
Verzeichnis "admin":
index.htm
kontakt.php
produkte.php
Administrationsseite zur Auswahl der Administrationsbereiche
Administrationsseite "Kontakt"
Administrationsseite "Produkte"
mindestanforderungen an die website
META-Tags
Sämtliche Seiten wurden mit den üblichen Meta-Tags für Suchmaschinen und Browser versehen.
Für die Diplomarbeit vorgeschriebene META-Tags
<meta name="author" Content="Reto Good">
<meta name="description" content="Kosmetikstudio Life & Beauty in Chur - Gesichts- und Körperbehandlungen, Haarentfernung und Make-up">
<meta name="keywords" content="Kosmetikstudio, Kosmetik, Studio, Life, Beauty, Chur, Graubünden, Schweiz, Sonja, Furter, Beratung, Produkte, Dienstleistungen, Gesichtsbehandlung, Körperbehandlung, Gesichtspflege, Körperpflege, Behandlung, Gesicht, Haarentfernung, Make-up, Manicure,
Fusspflege, Musiktherapie, Rückenmassage, Peeling, Maske, Lymphdrainage, Akne, Wimpern, Augenbrauen, 66 Days, Aloe Vera, Marinaction, !QMS, Plasmalite 600+">
I Seite 3 / 15 I
Zusätzliche META-Tags
<meta name="title" content="Kosmetikstudio Life & Beauty, Gesichts- und Körperbehandlungen,
Haarentfernung">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="14 days">
<meta name="publisher" Content="Reto Good - www.net-magic.ch">
<meta name="autor" Content="Reto Good">
<meta name="copyright" Content="by Reto Good, Chur 01/2004">
<meta name="Content-Language" Content="de_CH">
<meta name="audience" content="Alle">
<meta name="page-topic" Content="Dienstleistung">
<meta name="page-type" Content="Bericht">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Imagemap
Auf der Sitemap können die einzelnen Seiten mittels eines Imagemap angeklickt werden. Zusätzlich
sind in der Hauptnavigation vier Symbole eingebaut, die über ein rechteckiges Imagemap betätigt
werden.
Animated GIF
Um unnötige Ablenkung durch nervöses Blinken zu vermeiden wurden nur zwei animierte Bilder in
den Seiten Gesichtspflege und Körperpflege, die sich unter dem Navigationspunkt "Dienstleistungen"
befinden, eingebaut. Es wurde bewusst nur eine Schleife in die animierten Bilder eingebaut, damit
nicht zu viel Aufmerksamkeit auf die Slogans erregt wird.
ani_schoen.gif
ani_gesicht.gif
Site
Site
>>
>>
koerper.htm
gesicht.htm
Rollover-Effekt
In den vier Hauptlinks in der Navigation wurden die Rollover-Effekte eingebunden, die beim Überqueren mit der Maus die Farbe wechseln. Gleichzeitig ändert sich die Schriftfarbe und Grösse der Linkbezeichnung vom Rollover-Objekt. Sobald man mit der Maus über den aktiven Bereich fährt, hat man
den Eindruck, man könne die Links hinunterdrücken.
onMouseOver="MM_swapImage()";
onMouseOut="MM_swapImgRestore()";
>>
>>
Bildwechsel beim Ueberqueren
Bildwechsel beim Verlassen
Weitere eingebundene JavaScripts
In der Website sind verschiedene clientseitige Scripts eingebaut. Alle sind in JavaScript realisiert. Mit
dem Event-Handler onClick wird zum Beispiel ein separates Fenster mit einer fest definierten Grösse
und Positionierung geöffnet.
onClick Browserfenster öffenen
> öffnet über die Hauptnavigation den Flash-Film
> öffnet über die Sitemap den Flash-Film
onClick Browserfenster öffenen
> öffnet den Situationsplan in der Rubrik Geschichte
> öffnet über die Sitemap den Situationsplan
onClick Browserfenster öffnen
> öffnet die optimierten Printfenster der Produktesortimente
Vorlage >> vorlage.dwt
startet Funktion="MM_openBrWindow()"
Site
>> geschichte.htm
Site
>>
66days_sor.php
Site
>>
aloevera_sor.php
Site
>>
marinaction_sor.php
Site
>>
qms_sor.php
I Seite 4 / 15 I
onLoad="javascript:window.print()"
> öffnet beim laden der Site das "Drucken-Fenster"
(befindet sich im Body-Tag)
javascript: windows.close ()
> schliesst die aktuelle Site
javascript: windows.print ()
> druckt die aktuelle Site
javascript: history.back ()
> zurück zur letzten Site
Site
Site
Site
Site
Site
>>
>>
>>
>>
>>
66days_sor_p.php
aloevera_sor_p.php
marinaction_sor_p.php
qms_sor_p.php
karte.htm
Site
>>
karte.htm
Site
>>
sendmail.php
Multimedia-Element
Als Multimediaelement wurde ein Flash-Film eingebunden. Er präsentiert eine spezielle Gesichtsmaske für zu Hause. Der Kurzfilm ist auf eine feste Grösse von 400 x 300 Pixel gestaltet, was die bestmögliche Optimierung des Bildmaterials und eine dementsprechend kleine Ladezeit ermöglicht.
Der Flash-Film ist in der Hauptnavigation über ein Symbol aufrufbar.
life-beauty.swf
Hauptnavigation >>
Symbol
>>
vorlage.dwt
DHTML-Elemente
Dynamisches HTML ermöglicht das dynamische Ändern von beliebigen Elementen einer Page während der Anzeige. Dies kann automatisch oder durch Einwirken des Anwenders geschehen.
Unter diese Rubrik fällt die Funktion "MM_showHideLayers()", die das dynamische Verändern von
Layern ermöglicht. Im vorliegendem Projekt wurde die Funktion eingesetzt, um dem Benutzer Zusatzinformationen zu den Links im Hauptmenü zu vermitteln. Sobald man über die Hauptlinks fährt, wird
über die Event-Handler "onMouseOut" oder "onMouseOver" die Funktion "MM_showHideLayers" ausgeführt.
onMouseOver="MM_showHideLayers()"
onMouseOut="MM_showHideLayers()"
Layer
Hauptnavigation
>> Layers einblenden
>> Layers ausblenden
>> vorlage.dwt
Einsatz von Cascading Style Sheets (CSS)
Der gesamte Inhaltstext der Website wird mit CSS vordefiniert. Dadurch ist eine eventuelle spätere
Anpassung der Farben oder Schriftarten leicht zu bewerkstelligen. Für die Schrift- und Linkformatierung wurden zwei Externe CSS-Formate definiert. Die CSS-Datei "css.css" ist in der Vorlage eingebunden.
Die zwei Cascading Style Sheets befinden sich im Verzeichnis "css".
<link href="../css/css.css" rel="stylesheet" type="text/css">
p
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
Absatzformatierung
li
font-size: 12px;
color: #000000;
Listenformatierung
td
font-size: 12px;
color: #000000;
Zellenformatierung
I Seite 5 / 15 I
textarea
font-size: 12px;
color: #000000;
Mehrzeiliges Eingabefeld
Formular
input
font-size: 12px;
color: #000000;
Eingabefeld
Formular
.form1
width: 100px;
Feste Breitendefinition der
Formular Eingabefelder
.form2
width: 50px;
.form3
width: 200px;
.fett
font-size: 12px;
font-weight: bold;
class="fett"
Textformatierung
.titel1
font-size: 18px;
color: #84407D;
class=“titel1“
Titelformatierung
div
font-size: 12px;
<link href="../css/link.css" rel="stylesheet" type="text/css">
a:link
font-size: 12px;
text-decoration: none;
color: #84407D;
font-weight: bold;
Formatierung Hyperlinks
a:hover
font-size: 12px;
font-weight: bold;
color: #C187A6;
Formatierung Befahren der
Hyperlinks
a:visited
font-size: 12px;
font-weight: bold;
color: #434114;
Formatierung Besuchte
Hyperlinks
I Seite 6 / 15 I
Formular zur Eingabe von Daten durch den Benutzer
Das Kontaktformular ist in der Hauptnavigation über ein Symbol aufrufbar. Im Formular ist eine Plausibilitätsprüfung in bestimmten Eingabefeldern eingebaut. Diese Prüfung geschieht mit JavaScript
clientseitig. Sind alle benötigten Eingabefelder ausgefüllt, werden über den Button senden die eingegebenen Daten in einer Datenbank abgelegt. Der Benutzer bekommt eine Rückmeldung in Form einer
Bestätigunsseite und eines E-Mails. Gleichzeitig bekommt die Betreiberin der Website ein E-Mail mit
den versendeten Daten des Benutzers.
Die Betreiberin hat die Möglichkeit die Daten in der Datenbank über eine Administrationsseite zu bearbeiten.
Formular mit Plausibilitätsprüfung
(Plausibilitätsprüfung erfolgt mit JavaScript)
Ausgabe von Bestätigunsseite an Benutzer
Ausgabe von Bestätigungsmail an Benutzer
Ausgabe von Datenmail an Betreiberin
Speicherung der Daten in der Datenbank
Administrationsseite
kontakt.htm
sendmail.php
E-Mail Adresse Benutzer
E-Mail Adresse Betreiberin
Datenbank >> WP032H0132
Tabelle
>> kontakt
kontakt.php
Funktionsdiagramm Kontaktformular
Konformität
Alle Anforderungen des zugehörigen Konzepts sind berücksichtigt und realisiert. Ich habe die Site
nach bestem Wissen und Gewissen erstellt und dabei die Anforderungen des Konzepts berücksichtigt
und realisiert.
Browserkompatibilität
Die Site wurde mit folgenden Plattform/Browser-Kombinationen mit erfolgreichem Ergebnis getestet:
• Windows / Internet Explorer ab Version 5.0
• Windows / Netscape ab Version 4.7
• Windows / Opera ab Version 5.0
• Windows / Mozilla Firebird 0.7 de
Es wurde bewusst auf ein Browser-Handling mit JavaScript verzichtet, da Suchmaschinen gegenwärtig noch kein Javascript interpretieren und die Indizierung der Website somit eingeschränkt würde. Der
Einbau einer solchen Indexseite im root-Verzeichnis hat negativen Einfluss auf die Robots der Suchmaschinen.
I Seite 7 / 15 I
Da in den oben erwähnten Browsern keine Fehlermeldungen aufgetreten sind und damit eine Zielgruppe von ca. 99% angesprochen wird kann auf eine Browserkontrolle verzichtet werden. Da die Site
für den Normalverbraucher bestimmt ist und nicht ein spezielles Publikum anspricht, wird davon ausgegangen, dass ein "neuerer" Browser vorhanden ist, d.h. mindestens ab Version 4.0.
Aktives Handling verschiedener ClientSystemplattformen
Abfrage Flash Plugin: Besitzt ein Browser kein Flash Plugin, wird er zu einer alternativen Seite umgeleitet, wo ein Verweis zum herunterladen des PlugIn zur Verfügung steht.
Verzeichnis "flash":
onLoad="MM_checkPlugin()"
> Checkt beim laden der Site ob das aktuelle Plugin vorhanden ist.
Alternativ-Seite zum herunterladen des Plugin
Flash-Film
Site
>>
index.htm
Site
Site
>>
>>
download.htm
beauty-flash.htm
Stabilität
Während den Tests auf den verschiedenen Client-Plattformen und Browsern sind keine Fehlermeldungen aufgetreten.
style guide
Farben
Das Interieur des Studios Life & Beauty ist in rosa- und lilafarbenen Tönen gehalten, deshalb sollen
diese Farbtöne im Layout dominieren. Auch andere inhaltliche Gegenstände, wie zum Beispiel der
Laser für die Haarentfernung, oder ein antiker, personenähnlich geformter Stuhl enthalten ähnliche
Farbwerte wie die Innengrundierung. Somit können sich Besucher der Site direkt mit dem Kosmetikstudio identifizieren und sich gedanklich in die farbliche Umgebung versetzen.
Folgende drei Hauptfarben wurden fürs Layout angewendet:
RGB
255 204 204
HEX #FFCCCC
RGB
205 159 184
HEX #C187A6
RGB
132 64 125
HEX #84407D
Für den Websitehintergrund wird die Grundfarbe der Innengrundierung verwendet:
RGB
255 204 204
HEX #FFCCCC
Für die Schrift und Überschriften im inhaltlichen Text wurde die Farbe Schwarz gewählt.
RGB
0
0
0
HEX #000000
I Seite 8 / 15 I
Für die Links in den Seiten wurden hauptsächlich folgende drei Farben verwendet:
RGB
132 64 125
HEX #84407D
Standardfarbe
RGB
205 159 184
HEX #C187A6
Farbe beim Überqueren
RGB
255 204 204
HEX #434114
Farbe besuchter Link
Die Farbwerte der Links wurden mit CSS definiert.
Für die Hauptüberschriften in der Website, die zugleich auch als Orientierungshilfe für die
Sitenavigation dienen, wurden folgende zwei Farben verwendet:
RGB
255 204 204
HEX #434114
Farbwert für die Bezeichnung der Hautpseite.
z. B. Produkte
RGB
255 255 255
HEX #FFFFFF
Farbwert für die Bezeichnung der aktiven Seite.
z. B. Produkt "Aloe Vera"
Schrift
Für die Typographie des Kosmetikstudios wurde für das Web die seriefenlose Schriftenfamilie "Arial,
Helvetica, Sans-serif" 12 Pixel gross gewählt. Dies gewährleistet plattformunabhängige, gut leserliche
Texte.
Logo
Das Logo wurde vom Kosmetikstudio geliefert. Es wird in Visitenkarten, Briefpapier, Inseraten und
Werbeplakaten verwendet. Der Hintergrund des Logos wurde mit einem Grauton versehen, damit die
Farbverläufe und Kontrastverhältnisse der Site besser zur Geltung kommen.
>> gelieferte Version
>> Version Website
inhalte der website
home
>> index.htm
Die Homepage begrüsst die Besucher im persönlichen Kosmetikstudio Life & Beauty im Herzen der
Altstadt von Chur. Die Farben des Interieurs des modern eingerichteten Kosmetikstudios wiederspiegeln sich auf der Startseite. Der Kunde soll sich sofort mit dem Studio identifizieren. Die Federn mit
Schlagschatten haben eine symbolische Bedeutung und sind beim Betreten des Kosmetikstudios
nicht zu übersehen. Die einladende Startseite animiert den Kunden zum Besuch der weiteren Seiten.
geschichte
>> geschichte.htm
Diese Rubrik beinhaltet die Philosophie des Kosmetikstudios und ein Kurzportrait von Sonja Furter
sowie ein Standortbeschrieb des Studios mit Situationsplan. Der Kunde soll einen Eindruck der Behandlungsmethoden gewinnen und sich von der kompetenten Beratung überzeugen lassen. Diese
Seite hat eine persönliche Note und soll den Kunden unaufdringlich ansprechen.
I Seite 9 / 15 I
produkte
>> produkte.htm
Frau Furter arbeitet mit vier Produktelinien. Der Kunde soll einen Einblick in die verschiedenen Produkte nehmen können. Jede Produktelinie wird mit einer eigenen Seite informationsreich vorgestellt.
Unter jeder Produktesite befindet sich ein Link zum Sortiment, wo alle Produkte aufgelistet werden.
Damit diese immer aktuell sind können sie von Frau Furter selbständig online administriert werden.
Produkte Name
66 days
Aloe Vera
!QMS
Marinaction
Produte Sites
66days.htm
aloevera.htm
qms.htm
marinaction.htm
Sortiment Sites
66days_sor.php
aloevera_sor.php
qms_sor.php
marinaction_sor.php
Print Sites
66days_sor_p.php
aloevera_sor_p.php
qms_sor_p.php
marinaction_sor_p.php
Funktionsdiagramm Ausgabe Produktedaten
dienstleistungen
>> gesicht.htm
Alle Behandlungsangebote sind unter der Rubrik "Dienstleistungen" aufgeführt. Gesichtspflege, Körperpflege, Haarentfernung und die Zusatzangebote sind übersichtlich, informativ und detailliert mit
einer eigenen Seite dargestellt. Dank den anwenderfreundlichen Darstellungen findet der Kunde rasch
die gewünschten Dienstleistungen.
Angebot
Gesichtspflege
Körperpflege
Haarentfernung
Zusatzangebote
Sites
gesicht.htm
koerper.htm
haar.htm
zusatz.htm
kontaktformular
>> kontakt.htm
Über das Kontaktformular kann der Besucher Unterlagen und Informationen über die Produkte oder
Dienstleistungen anfordern. Hauptsächlich ist das Kontaktformular für neue Kunden, die das Medium
Internet zur Anforderung von Produkteinfos nutzen möchten. Selbstverständlich können auch Anregungen oder sonstige Bemerkungen gesendet werden.
Zusätzlich sind die E-Mail Adresse, die Adresse und die Öffnungszeiten des Kosmetikstudios aufgeführt. Alle gesendeten, eingegebenen Daten der Kunden können ebenfalls von Frau Furter selbständig online administriert werden.
flash-film
>> beauty-flash.htm → life-beauty.swf
Zeigt eine spezielle Gesichtsmaske für zu Hause. Der Flash-Film soll dem Kunden in Erinnerung rufen, dass man mit einfachen "Hausmittelchen" und ohne grossen Aufwand sich auch zu Hause verwöhnen lassen kann. Preiswert, einfach und natürlich, eine Alternative für den dynamischen Kunden.
I Seite 10 / 15 I
sitemap und hilfe
>> sitemap.htm
Die Sitemap zeigt die Gliederung aller in der Website integrierter Seiten. Alle Punkte sind anklickbar
und führen direkt zur entsprechenden Seite. Ein Kurzbeschrieb der Symbole ist ebenfalls enthalten.
suche
>> suche.php
Das Suchformular führt eine Suche auf der Website durch. Das Suchergebnis wird in zwei Varianten
ausgegeben. Zuerst werden alle Produkteseiten und anschliessend alle gefundenen übrigen Seiten
aufgelistet. Das Ergebnis der Suchabfrage wird auf der gleichen Website angezeigt.
Funktionsdiagramm Sucheformular
I Seite 11 / 15 I
ordnerstruktur der website
Gesamtes Bildmaterial wurde im Ordner "Images"
für Symbole, Logos usw. abgelegt. Im Ordner
"png" befinden sich alle aus Fireworks exportierten Dateien.
admin – enthält die PHP-Dateien für die Administrationsseiten und die Datenbankverbindung.
css – enthält die Style-Sheets css.css und
link.css.
flash – enthält alle benötigten Dateien für den
Flash-Film. Die Bilder und die png-Dateien sind in
separaten Ordnern "pic" und "png" abgelegt.
segmente – enthält alle segmentierten Dateien
des Bildmaterials.
templates – enthält die Vorlage der Site.
suche – enthält alle notwendigen Dateien für die
Suchfunktion.
siz – wurde für die Diplomprüfung Web Publisher
SIZ erfasst und enthält die PDF-Files, die integrierter Bestandteil des 2. Prüfungsteils sind.
I Seite 12 / 15 I
Sitemap
Das nachfolgende Schema erläutert den Aufbau der Sitemap für den Webauftritt Life & Beauty. Die
einzelnen Seiten sind mittels Imagemap anklickbar und öffnen direkt die entsprechende Seite.
benutzer- und navigationskonzept
Navigatonskonzept
Ein optimales Navigationskonzept ist einer der wichtigsten Erfolgsfaktoren für eine Website. Da im
Internet auch mit unerfahrenen Benutzern gerechnet wird, wird besonderen Wert darauf gelegt, dass
die gewünschten Informationen leicht zu finden sind.
Die Site des Kosmetikstudios Life & Beauty verfolgt eine nonlineare Navigation. Der Besucher kann
also uneingeschränkt durch die Informationen navigieren. Das Grundmodell der Navigation ist eine
Baumstruktur. Ausgehend vom Hauptmenü befinden sich in drei der vier Rubriken weitere Untermenüs, von denen aus wieder Inhalte aufgerufen werden. Trotzdem wurde, ausgehend von
der Zielgruppe der Site, auf tiefe Sitestrukturen
verzichtet. Da die Hauptnavigation zu jedem
Zeitpunkt des Sitebesuches angezeigt wird, ist
es für den Besucher jederzeit ein Leichtes von
jedem beliebigen Punkt der Site aus in eine andere Rubrik zu wechseln. Einzig der Flash-Film
ist linear und völlig ohne Einwirkungsmöglichkeiten aufgebaut. Dies wurde aber sehr bewusst
so gestaltet, da der Film vorwiegend als WerbeClip erarbeitet wurde.
I Seite 13 / 15 I
Benutzerführung
Das Internet ist längst nicht mehr ausschliesslich ein Werkzeug zur Informationsbeschaffung. Mehr
und mehr wird es auch zum Erfahrungsmedium, zum Handlungsraum. Entsprechend ist es von Vorteil
eine Benutzerführung anzubieten, die es dem Anwender ermöglicht, zwischen zielorientierter Informationsbeschaffung und ziellosem Umhersurfen und Abtasten zu wechseln. Ausgehend vom geringen
Umfang der Site, bietet das vorliegende Benutzerkonzept nicht Lösungen für beide Benutzerverhalten
an, sondern lässt die beiden Möglichkeiten miteinander verschmelzen.
Grafische Benutzerführung
Die Benutzerführung der vorliegenden Site erfolgt primär über grafische Elemente. Sämtliche Links
von der Homepage sind als schwarze symbolische oder weisse typographische Elemente plaziert. Die
Menüstruktur ist benutzergerecht und konsistent strukturiert.
Zentraler Orientierungspunkt der Benutzerführung ist die Hauptnavigation. Sie bildet mit ihren Menüpunkten die erste Ebene [1]. Auffallend ist, dass beim Überqueren der Links die Farbe des Elements ändert. Ebenfalls in der ersten Ebene befinden sich im grafischen Abschluss der Navigation
Verweise zum Such-, Kontaktformular und zu den Zusatzinformationen. Da diese in der Wichtigkeit
nicht so hoch eingestuft sind wie die vier Hauptrubriken, diese also nicht konkurrieren sollen, gleichzeitig dem Benutzer aber jederzeit zur Verfügung stehen müssen, wurden diese Links als Symbole
aufgeführt [2]. Beim Mauseintritt in Navigationspunkte der ersten Ebene wird dem Benutzer ein Kurzbeschrieb der Inhalte der Rubrik eingeblendet. Dieser ist dem Besucher bei der Wahl des richtigen
Links behilflich und bildet zugleich den zweiten Schritt [3] im räumlichen Ablauf der Benutzerführung.
Durch die Hauptüberschriften [4] auf jeder Site, weiss der Benutzer immer in welcher Hierarchie er
sich gerade befindet. In der zweiten Ebene der Website sind in den Rubriken "produkte und dienstleistungen" im Kopfteil übersichtliche Links [5] (Sub-Navigation) zu den entsprechenden Unterseiten
aufgeführt, die beim Überqueren den Farbwert ändern.
Im Fussbereich der meisten Sites ist ein "nach oben-Gif" plaziert, wodurch beim Anklick direkt zum
Sitebeginn gesprungen wird. Durch die gut abgestimmten Navigationselemente wirkt die Website sehr
strukturiert und benutzerfreundlich.
Die Benutzerführung ist unkompliziert und klar strukturiert aufgebaut. Der räumliche Ablauf
verläuft im Uhrzeigersinn, wobei
der Surfer weiter zu den Untermenüs und den Inhalten geführt
wird – siehe Linienverlauf.
[1] Navigation – Erste Ebene
[2] Symbole für Such-, Kontaktformular
und Zusatzinformationen
[3] Infotext zu Links der ersten Ebene
[4] Hauptüberschriften zweite Ebene
[5] Untermenüs auf zweiter Ebene
[6] nach oben -Gif
Skizze Benutzerführung
I Seite 14 / 15 I
Rechtliche Auswirkungen
Inhalt der Website
Der Inhalt ist weder rechts- noch sittenwidrig. Es gibt auch keine Links auf dieser Website, die auf
rechts oder sittenwidrige Seiten führen.
Bildmaterial
§
§
Der grösste Teil des Bildmaterials wurde mit Einwilligung der Auftraggeberin durch den Auftragnehmer/Webdesigner erstellt.
Alle anderen Fotos wurden von der Firma Vanity Cosmetics AG in Zürich für den Webauftritt und
alle damit in Verbindung stehenden Publikationen zur Verfügung gestellt.
Rechte
§
Die Urheberrechte des Webauftritts verbleiben vollständig bei Reto Good, Chur
Domain-Name
Der Domain-Name www.life-beauty.ch wurde bereits reserviert. Die Aufschaltung der Website erfolgt
erst nach der SIZ Prüfung.
I Seite 15 / 15 I

systemdokumentation

Transcription

Similar documents

MeteoCom 6

FE 1 - Fotoespresso

ArtemiS suite Basic Analysis Module