WEB-ENGINEERING - DYNAMISCH UND INTERAKTIV

------------------------------------------------
Schlechte Seiten:
- zu langsam
   (Bildgröße, viele Bilder, kein "Alt")
- fehlerhafte ("tote") Links
- Link-Sackgassen
- scroll-Seiten
- zu bunt
- nicht aktuell (trotz Zeitbezug)

Gute Seiten:
- Sitemap
- Index
- Suchmaschine
- Archiv:
   Download / Printversion
- Schutz?
- von überallher kommt man zurück
- eindeutige Links
- Kundenzentrierung, z.B. mehrsprachig
- Zielgruppen analyse
- Rücksicht auf Barrieren, z.B. Farbblindheit
- Alt-Texte für Blinde etc.
- Berücksichtigung technischer Voraussetzungen
- Aufbaureihenfolge beachten
- Inhalte (Links z.B. zu verwandten Seiten)

Development Circle:
Phase 1: Informationsbeschaffung (Beachte: Skalierbarkeit, d.h. Erweiterungsfähigkeit)

Phase 2: Strategie, Zielgruppe

Phase 3: Prototyping, Navigationstypen

Phase 4: Implementation, Technik

Phase 5: Launch ("Stapellauf"), z.B. Werbung für die Seite,
   Schulung der Kundenmitarbeiter

Phase 6: Pflege, Erweiterung

      wieder anknüpfen bei Phase 1...

-----------------------------------------------------------------

Site-Plan
Entry führt zum Kern, vom Kern kommt man
 einerseits zu Inhalten (best. Produktgruppen o.ä.)
 andererseits zum Service (help, kontakt etc.)

Storyboard: Siteplan mit Seiten + Funktionen der Seiten

-----------------------------------------------------------------

Ziel: In die Bookmarks kommen / Kundenbindung
1. Ebene
   Wo bin ich?
   Wohin kann ich gehen?
   Wie komme ich dahin?
   Wie komme ich dorthin zurück, wo ich schon mal war?

2. Ebene
   Datenschutz (Motivation für Nutzung des Webs)
   Ist die Seite vertrauenswürdig, sicher (Bezahlung)?
   Weitergehende Informationen (Auswahlformular)

3. Ebene
   Mehrwert!
   Produktorientierte Fragen
      Was unterscheidet mein Produkt von anderen?
      Vorteile meines Produkts
      Hintergrundinformationen (Gesundheitsaspekte von Spielzeug,
      Pflegeleichte Produkte, Ökologische Aspekte...)
      Chat / Communities (themenbezogen)
      verwandte Seiten

---------------------------------------------------------------

Kundenmotivation
Kunden nutzen das Internet wegen der Anonymität

----------------------------------------------------------------

Drei Grundlagen einer Präsenz
content (Inhalt), Format bzw. Design und Organisation

Umsetzung mittels
- Menus
- context sensitivity (Inhalt und Darstellung ergänzen einander)
- Retrieval (Stöbern führt zum Erfolg)
- Navigation (intuitiv)
- Text search (gezielte Suche)

Analyse
- Zielgruppe, Aufgaben

Design
- Logische Gliederung
- Verlinkung festlegen
- grafische Aufbereitung
- Textaufbereitung

Aufbau
- Prototyp erstellen
- Grafiken, Texte etc. testen

----------------------------------------------------------------------

Arbeitsweise
Do it -> Do it right -> Do it better -> ... -> Do it better

Kunde, der die Internetpräsenz kauft, vorbereiten: Man muss emails beantworten!!!

----------------------------------------------------------------------

Layout

No:
- oben und unten zweigeteilte Tabelle, mittig viel Zusammenhängendes
- ca. 1995
Yes:
- Anlehnung an Layout in Zeitungen (Titelseite)
- heute
No:
- small areas in center
Yes:
- small areas at edge

No:
- unbalanced display (alles in die linke obere Ecke gequetscht)
Yes:
- balanced display

------------------------------------------------------------------

Sitemap
- von jeder Seite aus erreichbar
- Extra-Fenster (pop up): Anklickbar, nicht automatisch
- im Zweifel textuelle Version (schnell)

Beispiele
- www.akademiedienst.de
- www.audi.de
- www.adobe.de (com?)

--------------------------------------------

Bilder
Download unter http://ipix.yahoo.com

------------------------------------------

JavaScript
- Tutorium unter www.webmonkey.com
- Bsp: document.write ("<h1> ... </h1>") 
   HTML-Tags werden innerhalb des JS-Teils befolgt
- Kein Carriage Return innerhalb des Javascript-Codes!!!
- Variable: Nur einmal ändern für mehrere Textstellen
- Zuweisung mit einfachem '='

Bsp: herkunft="Berlin"   <!-- Definition von herkunft --> 
ichbin="ich komme aus" 
document.write (ichbin+herkunft)   <!-- Javascript im Body -->

Literatur: Seeboerger-Weichselbaum, M. "Java Script", bhv-Taschenbuch,
ISBN 3-8287-5020-6


------------------------------------------------------------------

Template
- txt-Template in dasselbe Verzeichnis legen, nicht mehr verändern
- Inklusive Stylesheets, scripts (global)
- Tabellen für die Formatierung mit absoluten Größen
- Bildschirmgröße: 800 x 600 pixel zugrundelegen
- Tabellengröße entsprechend: 720 x ? pixel
- Haupt-Spalte: 560 pixel breit

-------------------------------------------------

Kommentare
<!-- -->      HTML-Kommentar
//      Kommentarelement von Javascript

Javascript-Kommentar ins Template (stört nicht):
<!--

// -->

----------------------------------------------------

Alert-Boxen
Sinnvoll als Fehlermeldung, sonst nervig

----------------------------------------

Dozentin: Karin Wunderlich