Gestaltungsempfehlungen für Webprojekte
Intro
Übersicht
Konzept
Seitenaufbau
Seitengestaltung
Navigation
Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns
Glossar
Ressourcen
Druckversion

Konzept

Wie umfangreich wird das Projekt?
Kein Printmedium eins-zu-eins als Webprojekt umsetzen!

Wen soll mein Projekt erreichen?

Themen strukturieren.

Zu Anfang gilt es abzuschätzen wie groß das Projekt werden soll. Es ist ein Unterschied ob man für sich selbst eine Homepage, mit Unterseiten, ein kleines Plattenlabels auf dem Web präsentieren, oder die Datenbank eines Grossunternehmens einbinden will. Die jeweiligen Anforderungen hier trennen Lichtjahre an Konzeption, Aufwand und Funktionalitäten.

Grob sieht das so aus:

  • Material sammeln, sichten, gliedern
  • Einzelne Rubriken bilden
  • Gestaltung der Kontextmetaphern
    (Wie sollen die Navigation und Orientierung aufgebaut sein?)
  • Gestaltung der Kontentpräsentation
    (Raster, Schriftgrößen, Hilfe, Suchen, Orientierung?) Als nächstes muß man bedenken, daß ein Printmedium nicht eins zu eins als Webprojekt umgesetzt werden sollte. Auf dem Web habe ich ganz andere Möglichkeiten der Präsentation, Umsetzung und Strukturierung. Außerdem erwartet der Nutzer auch ganz andere Funktionalität.

  • Vorausschauend planen
    Wieviele Seiten wird es benötigen? Selbst wenn man eine Struktur erstellt hat, muß man bedenken, das das Projekt mitwachsen soll. Neue Themen können im Laufe der Zeit entstehen. Wie auch die Ansprüche in der Gliederung und der Gestaltung mit der Zeit - ich rede hier von Wochen bzw. ein paar Monaten - (das Web ist sehr schnelllebig), plötzlich anderen Gesichtspunkten unterliegen.

    Das ganze Projekt muß also mitwachsen können, wie die eigenen Ansprüche sich ändern. Es kann nichts schaden schon einmal zu überlegen wie 12 anstelle von 8 Menüpunkten lauten und aussehen würden.

    Ordnerhierarchien
    Ordner muß sein!

    Von Anfang an sollte man die zur Seitengestaltung notwendigen Elemente von denjenigen die zum eigentlichen Inhalt der Seite gehören, trennen. So bleiben die Verzeichnisse übersichtlicher.

    intro.html? Gibt es nicht!

    Jedes Hauptverzeichnis muß ein welcome.html bzw. index.html Dokument enthalten. Da hier intro.html die erste Seite sein sollte, mußte sie index.html genannt werden.

    Das ist von Server zu Server verschieden und man sollte sich bei seinem Provider danach erkundigen.

    Natürlich könnte man auch alle Files in einen Ordner werfen. Das Problem ist nur, daß wenn Bilder, Töne, Texte und Filme wie Kraut und Rüben durcheinanderliegen der überblick verloren geht! Bei ein paar Seiten mit wenigen Bildern ist das kein Problem. Unübersichtlich wird es bei zwanzig Seiten, den dazugehörigen Navigationsbuttons (also Bildern), "richtigen" Bildern oder Image Maps.

    Das ganze Projekt muß also mitwachsen können, wie die eigenen Ansprüche sich ändern.

    Bei diesem Projekt sieht das dann so aus:

    Ordner styleguide
    Ordner beispiele
    Datei druckversion.html
    Datei gifojpeg.html
    Ordner gifs
    Datei glossar.html
    Datei html.html
    Ordner images
    Datei index.html
    Datei konzept.html
    Datei laden.html
    Datei nav.html
    Datei plugins.html
    Datei ressourcen.html
    Datei seitenaufbau.html
    Datei seitengestaltung.html
    Datei uebersicht.html

    Namensgebung
    .html oder .htm
    muß die Endung des Namens jedes Textdokumentes sein.

    Klare, sinnfällige Titel geben.

    Keine Sonderzeichen, Leerstellen oder Umlaute verwenden! ~_ä sind verboten!

    Wichtig ist darauf zu achten das die Namen der Textdokumente immer mit .html zu enden haben. Was davor steht ist der Phantasie des Entwerfenden überlassen. Enorm hilfreich jedoch ist die Angewohnheit Titel zu vergeben, die konkret mit dem Inhalt des Dokuments in Verbindung stehen.
    Dies erleichtert Suchen bei Korrekturwünschen ungemein.

    Damit ein Link (Verweis) auch funktioniert muß er exakt so geschrieben sein wie der Dokumenttitel lautet. (Am besten hat sich hier die Methode cut-and-paste bewährt.)

    Umlaute und Sonderzeichen sind selbstredend verboten. (Auch von Ziffern wurde mir schon abgeraten.) Was bleibt sind also Buchstaben.

    Diese Konvention rührt daher das die Mac Tastaturbelegung nicht dem Standard-ASCII Code entspricht. Verschiedene Zeichen sind außerdem Steuerbefehlen vorbehalten seien diese nun TCP/IP oder Unix.

    Formulare bzw. CGI
    Alles was Spaß macht:

    Scripts werden in den Sprachen Perl, CGI oder JavaScript geschrieben.

    Oft kann einem hier der Provider oder ein Informatiker weiterhelfen.

    Online-Account

    Alles was Webprojekte interessant macht, die Funktionalität erhöht, Abfragen oder Messages zu posten erlaubt und sonstwie Spaß macht geht nur mit Hilfe eines Scripts. Buttons auf Seiten einzubauen ist kein Problem, erst das Script erweckt sie jedoch zum Leben.

    (Ein Script ist ebenfalls eine Textdatei (File) die auf dem Server liegt, mit dem Unterschied, daß es ein Programm enthält, das ausgeführt wird wenn der Browser die Werte zurückschickt. Der Name endet mit .cgi.)

    Dazu benötigt man entweder Programmierkenntnisse oder einen Programmierer. Schon in der Anfangsphase des Projekts gilt es also die Programmiererin einzubeziehen, vorzuschlagen was man sich vorstellt und sich auf eventuelle Einschränkungen vorzubereiten. z.B. werden mehr als zehn Features eines Formulars vom Benutzer als zuviel empfunden.

    Rechtzeitig den Provider zu informieren ist auch empfohlen da man hierzu oft auch einen etwas besseren, nämlich Online-Account braucht. Das ist zwar nur ein kleine Tastenübung am anderen Ende der Leitung, erhöht aber die Attraktivität des Account ungemein. Das bedeutet das es auch etwas mehr kosten kann.

    Java bzw. Javascript
    Bei Stephan Görgens gibt es jede Menge Links zum Thema Java und Javascript Java selbst ist eine komplexe, objekt-orientierte Programmiersprache und ein Fall für Programmierer.
    Java-Script ist weniger komplex und bietet einfache Funtionalitäten die sich innerhalb des Browser abspielen, wie etwa der "Ticker" der Text durch das Bowserfenster scrollen lässt oder Icons die "on mouseover" durch ein anderes ersetzt werden.

    Stephans Links: http://www.snafu.de/~sg/links.html


    Intro
    Übersicht
    Konzept
    Seitenaufbau
    Seitengestaltung
    Navigation
    Gif oder Jpeg?
    Schnelles Laden
    HTML
    PlugIns
    Glossar
    Ressourcen
    Druckversion

    Kommentare oder Vorschläge ?
    http://www.digital.hdk-berlin.de/~mhohl/styleguide/konzept.html
    © Hochschule der Künste Berlin
    Michael Hohl
    26-Juni-96
    Gestaltungsempfehlungen für Webseiten