Internet und Präsentation » Internetpräsentation -> Feinkonzept (1)

Feinkonzept (1) Internet - Weltnetz

->Grobkonzept Feinkonzept ->
-> -> ->

zum Inhaltsverzeichniszum Seitenanfangzum Seitenende

Nachdem Sie nun wissen, was Sie alles an Infos verwenden können, sollten Sie sich Gedanken machen, welche und wie viele Seiten vorerst entstehen sollen. Danach kommt die Planung, wie die Homepage und die Unter-Seiten aussehen sollen. Berücksichtigen Sie vor allem bei der Planung der Navigationselemente eine mögliche spätere Erweiterung.

 zum Seitenanfangzum Seitenende

. 1. Layout
Auch im Computerzeitalter ist ein Schmierzettel und ein oder mehrere (verschiedenfarbige) Stifte die Grundlage der Planung. Legen Sie die Farbkombinationen fest und skizzieren Sie, wo sich auf einer Seite welche Elemente befinden sollen. Denken Sie dabei weniger an die konkreten Inhalte, sondern machen Sie das pauschal, ohne zunächst auf die speziellen Belange der einzelnen Seiten einzugehen. Für den späteren Surfer ist es wichtig, daß er sich auf allen Seiten der Website zurechtfindet und nicht ein Kuddelmuddel unterschiedlicher Seiten vorfindet. Das betrifft in erster Linie die Navigationselemente. Aber auch der Seiten-Kopf (Header), die Fußleiste (Footer), die Anzahl der Spalten, die Lage von Spots und Bannern, das grundsätzliche Aussehen von Überschriften und Zwischenüberschriften und deren Lage sollten Sie skizzieren. So können Sie sich einen recht guten Überblick verschaffen, wie das Layout aussehen wird und wie es wirkt.

 zum Seitenanfangzum Seitenende

. 2. Vorlage erstellen
Haben Sie Ihre Skizze auf dem Papier fertig und haben Sie sich Notizen gemacht, welche Effekte (3D-Schrift mit oder ohne Schatten, Rollover-Buttons, Explorer-Navigation usw.) Sie einbauen wollen, können Sie beginnen, Ihr Layout am PC umzusetzen. Wohlgemerkt - das Layout und nicht der Inhalt. Suchen Sie sich Buttons, Banner, Linien, Bullets und andere grafische Elemente zusammen, die Sie verwenden wollen. Es können auch ein paar mehr sein, damit Sie probieren können, welche Elemente am Besten miteinander harmonieren. Schreiben Sie sich die Dateinamen auf, damit Sie nicht ständig suchen müssen, welche Datei welche Grafik ist. Hervorragend ist ein Programm wie Thumbs Plus (gesprochen: ßams plass), mit dem Sie sich einen Bilderkatalog anlegen können und somit auf einen Blick alle Grafiken im Zugriff haben.
Legen Sie eine neue Seite mit Ihrem HTML-Programm an. Teilen Sie diese entsprechend Ihrer Skizze mit leeren Tabellen ein. Wenn Ihr Programm Cascading Style Sheets (CSS) verarbeiten kann, können Sie auch alles ohne Tabellen aufbauen. Das können alte Browser dann aber meistens nicht richtig darstellen. Bei vielen HTML-Programmen können Sie in der WYSIWIG-Ansicht Ihre Elemente (fast) wahlfrei positionieren. Die Tabellen (oder die CSS-Tags) legt das Programm dann selbständig an, ohne daß Sie das merken. Fügen Sie die Elemente entsprechend Ihrer Skizze ein. Speichern Sie die Seite ab (z.B. vorlage.htm). Testen Sie das Ergebnis mit verschiedenen Browsern (am Besten mit Mozilla, Netscape Navigator, MS Internet Explorer und Opera in der aktuellen Version und möglichst mit den gleichen Programmen einen Versionssprung vor dem Komma niedriger). Sie bauen sich damit eine Vorlage auf, die Sie später beim erstellen der einzelnen Seiten immer wieder heranziehen können.
Ein durchgängiges Seitendesign hat den Vorteil, daß die Grafiken, die auf mehreren Seiten gleich sind, nur einmal geladen werden müssen. Ruft der Surfer eine Seite auf, werden die Grafiken in den Browser-Cache geladen. Beim aufrufen der nächsten Seite müssen sie dann nicht mehr neu geladen werden.
Egal was Sie sich für Ihre Präsentation ausdenken, Sie sollten auf jeden Fall darauf achten, daß
- der Text in jedem Fall lesbar ist
- der Kontrast so gewählt ist, daß dem Leser auch nach längerer Zeit nicht die Augen weh tun
- Hintergrundbilder nicht zu kräftige Strukturen haben
- eine klare Seitenstruktur zu erkennen ist
- sich die Ladezeit in Grenzen hält
- auf allen Seiten einheitliche Navigationselemente verwendet werden
- die Navigationselemente immer an den gleichen Stellen zu finden sind
- der Surfer immer weiß, wo er sich befindet, egal wie verschachtelt die Site ist.

 zum Seitenanfangzum Seitenende

. 3. ganze Seite oder Frames
Bei der Erstellung der Vorlage sollten Sie auch überlegen, ob Sie Ihre Site mit Frames aufbauen oder ob Sie die Navigation auf jeder Seite anbringen. Wenn Sie später weitere Seiten hinzufügen, müssen Sie das auf jeder Seite tun. Bei modernen HTML-Programmen ist das kein allzu großes Problem.

 zum Seitenanfangzum Seitenende

. 3.1. Frames
Es geht aber auch mit einer einzelnen Navigationsdatei, die in einem separaten Frame angezeigt wird. Dort brauchen Sie nur die Navigationsdatei ergänzen und können sich bei den einzelnen Seiten ganz auf deren Inhalt konzentrieren. Sie müssen dabei nur wenige zusätzliche Tags bzw. Optionen der Tags beachten. Ist alles richtig aufgebaut, klickt der Surfer auf einen Link in der Navigationsleiste und die Seite wird im anderen Fenster geöffnet.
Damit das funktioniert, müssen Sie jeden Link der Navigationsdatei um eine TARGET-Anweisung ergänzen:
<A HREF="page2.htm" TARGET="rechts">Seite 2</A> Oder Sie definieren das Ziel global im <HEAD>-Bereich:
<BASE TARGET="rechts"> Das erspart viel Schreiberei, ist aber nur sinnvoll, wenn wirklich (fast) sämtliche Links den gleichen Ziel-Frame haben. Links mit anderen Zielen müssen dann zwingend mit der ersten Target-Anweisung versehen werden.
Sorgen Sie dafür, daß in der Framedefinition immer ein NOFRAMES-Bereich existiert, über den ein Surfer dessen Browser Frames nicht darstellen kann, mindestens zum Inhaltsverzeichnis Ihrer Website gelangt und dann von dort auf die einzelnen Seiten springen kann.
Aber auch dann, wenn der Surfer z.B. über eine Suchmaschine auf einer einzelnen Seite gelandet ist, sollte auf der Seite ein Link vorhanden sein, der ihn auf die Startseite (Homepage) oder die Framedefinition führt. Sonst muß er in der Adreßzeile des Browsers per Hand den Dateinamen und die Ordner löschen. Insbesondere bei kostenlosem Webspace ist aber schnell ein Ordnername zu viel gelöscht und der Surfer findet die Homepage nicht. Helfen Sie ihm mit dem extra eingebauten Link.
Ich habe für mich herausgefunden, daß es besser ist, die Startseite als komplette Seite auszuführen und erst von dort über einen gut sichtbaren Link auf die Framedefinition zu verweisen. Das hat den Vorteil, daß verschiedene Einstiegsmöglichkeiten angelegt werden können (mit Frames, ohne Frames, mit und ohne Java-Script oder Java oder Flash) und die für das Ranking der Suchmaschinen wichtigen Daten ohne Tricks dargestellt werden können.

 zum Seitenanfangzum Seitenende

. 3.2. ohne Frames
Ob Sie ohne Frames später beim hinzufügen neuer Seiten sämtliche Seiten aktualisieren müssen, hängt davon ab, wie geschickt Sie die Navigation aufbauen. Arbeiten Sie mit Haupt- und Unter-Rubriken, brauchen Sie nur die Navigation der Unter-Rubrik auf allen zu dieser gehörenden Seiten ändern. Erst beim hinzufügen einer neuen Haupt-Rubrik müssen Sie an sämtliche Seiten heran.
Nachteilig ist bei dieser Art der Navigation, daß die Navigationselemente beim scrollen der Seite aus dem Blickfeld verschwinden.

 zum Seitenanfangzum Seitenende

. 4. Strukturieren
Wenn Sie ein Projekt anlegen, ist das Verzeichnis (Ordner) noch recht leer und übersichtlich. Kommen aber viele Seiten und mit ihnen viele Grafiken und Bilder hinzu, kann die Sache schnell recht unübersichtlich werden. Insbesondere bei größeren Projekten sollten Sie deshalb von vornherein Unterverzeichnisse (Unter-Ordner) anlegen.
 
web-root     Hauptverzeichnis (entspricht später auf dem Server dem /)
  images   für global verwendete Grafiken
  aktuell   Themenbereich
  fragen Unter-Themenbereich
  antwort Unter-Themenbereich
  archiv   Themenbereich

Bilder und Grafiken, die nur für einen Themenbereich oder Unter-Themenbereich verwendet werden, werden im entsprechenden Ordner abgelegt. Sie sollten aber dann, wenn dieser Bereich sehr viele Seiten umfaßt, weiter strukturieren. Entweder einen Unter-Ordner für die Bilder oder jede Seite mitsamt ihren Bildern in ihrem eigenen Unter-Ordner.
Wenn der Server so konfiguriert ist, daß man bei der Eingabe eines URL ohne Dateinamen (z.B. http://www.name.de/ordner/) den Inhalt des Verzeichnisses sieht, sollte eine der dort vorhandenen Dateien den Namen index.htm erhalten. In der Regel ist der Server so konfiguriert, daß beim weglassen eines Dateinamens nach index.htm gesucht wird. Manche Provider geben auch noch andere Dateinamen vor, nach denen der Server sucht, wenn kein Dateiname angegeben ist. Dies geschieht in einer vom Provider festgelegten Reihenfolge (z.B. index.htm, index.html, default.htm, default.html ...).

 zum Seitenanfangzum Seitenende

. 4.1. Namenskonvention
Arbeiten Sie unter Windows, ist es egal ob Datei- und Verzeichnisnamen Großbuchstaben enthalten oder nicht.  Ein Großes A ist gleich einem kleinen a. Aber im Internet arbeiten die meisten Server mit UNIX und verwandten Betriebssystemen. Die unterscheiden sehr wohl zwischen A und a. Sorgen Sie deshalb unbedingt dafür, daß die Schreibung eines Dateinamens mit der Schreibung in der Linkdefinition übereinstimmt. Am wenigsten Probleme haben Sie, wenn Sie grundsätzlich alles klein schreiben (z.B. forum.htm).
Vermeiden Sie auch Leerzeichen, denn wenn Sie nicht aufpassen, wird es mit %20 codiert (Unicode). Dann wird die entsprechende Datei natürlich nicht gefunden. Verwenden Sie statt eines Leerzeichens den Unterstrich (z.B. flag_de.gif). Auch andere Sonderzeichen wie Punkte (außer dem Punkt vor der Extension), Klammern, %, /, &, @, ?, * usw. haben in Dateinamen und Verzeichnisnamen nichts zu suchen. Aber auch deutsche Umlaute wie ä, ö, ü und das ß sollten vermieden werden, denn nicht jedes Betriebssystem kann damit umgehen (und auch dann nur, wenn der deutsche Zeichensatz eingestellt ist).
Sie können mit einem Dateinamen die Seite recht gut beschreiben (z.B. hier_wird_eine_geburtstagsfeier_dargestellt.htm). Das ist natürlich ganz schön lang und verbraucht viel Speicherplatz. Dagegen kann man sich unter gbf.htm nicht viel vorstellen. Trotzdem sollte man darauf bedacht sein, möglichst die 8.3-Dateinamenskonvention einzuhalten. Diese funktioniert nämlich unter sämtlichen Betriebssystemen.
Manche Surfer schauen auch in der Statuszeile nach, wie der Pfad heißt, bevor sie auf einen Link klicken. Für diese, aber auch für den Ersteller einer Website (damit man auch später noch weiß, was sich hinter welcher Datei verbirgt) ist es besser, sprechende Dateinamen zu verwenden. Sind diese länger als die 8.3-Konvention, dann sollten sie nur so lang sein, wie unbedingt erforderlich (in unserem Beispiel wäre das geburtstagsfeier.htm). Vielleicht würde aber doch gebfeier.htm (8.3) ausreichen.

 zum Seitenanfangzum Seitenende

. 5. Navigation
Welche Navigation wollen Sie verwenden? Einen Teil der Antwort zu dieser Frage haben Sie bereits bei den Frames erhalten. Aber neben der Frage ob mit Frames oder ohne, gibt es noch weitere Möglichkeiten zur Navigation.

 zum Seitenanfangzum Seitenende

. 5.1. Textlink
Dies ist die einfachste und immer funktionierende Möglichkeit, eine Navigation aufzubauen. Die Alternativ-Navigation von KleingartenWeb ist so aufgebaut. Selbst die ältesten Browser können damit umgehen und die Ladezeiten werden nicht so lang wie bei Buttons. Die Anordnung der Textlinks kann relativ beliebig erfolgen. Sie müssen nur darauf achten, daß aussagekräftig sind und leicht zu finden sind. Meistens werden sie innerhalb einer Tabelle plaziert. Ob diese sichtbar oder unsichtbar sein soll, einen Rahmen haben soll oder nicht, hängt vom Layout der Seite ab.
Aber auch in einem Text kann man einzelne Wörter, Satzteile oder auch ganze Sätze mit Links versehen.
Beispiele:
- Zeile nur mit Links - Zeile mit Tabelle in Button-Form - Zeile mit Tabelle nur farblich unterlegter Balken - Tabelle in einer Spalte

Wenn die übliche Unterstreichung eines Textlinks stört, benutzen Sie drei Zeilen CSS (Cascading Style Sheet) und alle Links auf der ganzen Seite werden ohne den Unterstrich dargestellt.
   <STYLE TYPE="text/css">
   <!-- A {text-decoration: none} -->
   </STYLE>
Allerdings sollte man dies nur in einem solchen Fall tun, wenn für einen Besucher ziemlich eindeutig ist, daß es sich hier um Navigationselemente handelt. Gerade inmitten eines Textes ist es sehr schwierig, einen Link zu finden, wenn dieser nicht eindeutig gekennzeichnet ist. Solche Fälle, wo Links wie normaler Text aussehen und dafür andere Wörter unterstrichen sind, gibt es leider. Dies ist eine Unart, die sich manche "Webmaster" (in diesem Fall eindeutig mit Anführungszeichen) gegenüber den Besuchern ihrer Site herausnehmen.

 zum Seitenanfangzum Seitenende

. 5.2. Bild/Grafik (Button)
Natürlich können Sie auch das verwenden, was man gewöhnlich als Bild bezeichnet. Gemeint ist hier aber ein Rechteck oder auch ein anders geformtes Element, welches als Taste (engl.: Button) fungieren soll. Sie benötigen dazu einen Grundkörper, der in der Regel bei allen Elementen gleich sein wird. Auf diesen bringen Sie einen Text oder ein Symbol auf, das einen Bezug zu der Seite hat, die damit angesteuert werden soll.
Auch hier kann mit Hilfe einer unsichtbaren Tabelle eine paßgenaue Anordnung der Elemente erreicht werden. Die Anordnung erfolgt wahlweise untereinander oder nebeneinander. Einzelne Elemente wie Pfeile oder auch das E-Mail-Symbol können auch losgelöst von allen anderen Elementen auf einer Seite vorkommen. Man sollte nur darauf achten, das sich diese auf allen Seiten an der gleichen Stelle befinden.
Achten Sie darauf, jedem Bild und jedem mittels einer Grafik hergestellten Navigationsbutton einen ALT-Text zu spendieren. Gerade, wenn die Leitungen verstopft sind, schalten viele Leute die Bildanzeige ab. Außerdem benötigen Browser für Blinde den ALT-Text, weil sie keine Bilder vorlesen oder in Braille-Schrift umwandeln können.
 
Beispiele:  Buttons in allen Farben, Formen und Größen
Beispiel: SuchenBeispiel: InfoBeispiel: InformationBeispiel: Click HereBeispiel: Home

 zum Seitenanfangzum Seitenende

. 5.3. Imagemap
Eine Imagemap ist ein größeres Bild, welches so aufgebaut ist, daß man in verschiedenen Bereichen bestimmte Bedeutungen erkennen kann. Dies kann natürlich auch Text sein. Mittels der entsprechenden HTML-Tags werden diese Bereiche mit einem Koordinatennetz hinterlegt und so voneinander abgegrenzte aktive Bereiche geschaffen. Das bedeutet, daß man auf einen Bereich klickt und damit eine Aktion, z.B. den Sprung auf eine andere Seite auslöst.
Mit Hilfe von Javascript können Sie auch noch Effekte erzeugen. Z.B. daß der aktive Bereich, den Sie gerade mit dem Mauszeiger überfahren, etwas heller wird oder ein anderes Bild eingeblendet wird. Dazu müssen Sie die Imagemap-Datei kopieren, einzelne Bereiche aus dem Kopie Ihrer Imagemap herausschneiden, bearbeiten (z.B. heller gestalten) und jeweils in einer eigenen Datei abspeichern. Oder Sie nehmen anstelle der kopierten Einzelteile völlig andere Bilder, die zum jeweiligen Thema des aktiven Bereichs passen.
Beispiel:
Beispiel Imagemap, © ver.di
© ver.di
Mit dieser Imagemap ließen sich (nicht aktiviert) die Websites der 5 in ver.di vereinten Gewerkschaften aufrufen, indem die Koordinaten des dazugehörigen Codes aktive Bereiche in der Größe der einzelnen Logos erzeugen.

 zum Seitenanfangzum Seitenende

. 5.4. Pull-Down-Menü
Hier benutzen Sie ein Formular. Mittels des Formularfeldes "Dropdown-Menü", eines "Submit-Buttons" und ein wenig Javascript erstellen Sie eine sehr viel Platz sparende Navigationsmöglichkeit. Fügen Sie noch einige Zeilen mehr Javascript-Code hinzu, können Sie auch auf den Submit-Button verzichten und es reicht aus, auf eine Menüzeile zu klicken, um die gewünschte Aktion auszuführen. So ist auch die Haupt-Navigation von KleingartenWeb aufgebaut.
Wenn Sie mit Javascript arbeiten, sollten Sie auch eine Alternative anzubieten, denn aus Sicherheitsgründen hat nicht jeder Surfer Javascript aktiviert.

 
Beispiele:
- Menü mit Button
  
  Erst durch Betätigung des "go"-Buttons wird die Aktion ausgeführt.

- Menü mit Javascript
  siehe Menü im linken Frame (wenn Sie über den Haupteingang gekommen sind)
  Sie brauchen nur den gewünschten Eintrag auswählen, ohne einen weiteren
  Button zu drücken.

 zum Seitenanfangzum Seitenende

. 5.5.  JAVA-Menü
Auch JAVA bietet Möglichkeiten, ein Navigationsmenü aufzubauen. Sorry, ich stehe nicht auf JAVA und habe mich bisher noch nicht mit Details beschäftigt, weil JAVA sehr viele Ressourcen verbraucht, daß dann der Browser bei manchen Seiten nach einer Weile Tschüß sagt. Deshalb kann ich dazu auch keine Erläuterungen bringen. Ich habe Ihnen aber hier einige Links beigefügt, die Ihnen vielleicht helfen können, die gewünschten Informationen zu finden.
Achten Sie auf jeden Fall darauf, auch eine Alternative anzubieten, denn viele Leute haben aus Sicherheitsgründen JAVA abgeschaltet oder ihre Browser kennen JAVA nicht (z.B. Screenreader für Blinde).
Link
Link

 zum Seitenanfangzum Seitenende

. 5.6. Explorer-Menü
Mit viel Javascript und einigen Grafiken kann man ein Menü aufbauen, welches genauso aussieht und funktioniert, wie der Explorer von Windows (95 und folgende). Es sind verschiedene Scripte im Umlauf, die nur entsprechend angepaßt werden müssen. Viele davon sind kostenlos.

 zum Seitenanfangzum Seitenende

. 6. Provider und Webspace
Wenn Sie Ihre Website ins Internet bringen wollen, brauchen Sie dafür Speicherplatz - den Webspace. Der Anbieter, der Ihnen den Webspace bereitstellt, heißt Provider. Damit haben Sie sich schon beim Grobkonzept beschäftigt. Aber nicht jeder Provider bietet die gleichen Konditionen.
Haben Sie eine eigene Domain bezahlt, aber nur wenig Speicherplatz (z.B. bei einer sogenannten "Visitenkarte"), dann brauchen Sie weiteren Speicherplatz. Das geht recht einfach und dazu noch kostenlos. Anbieter wie Tripod gibt es fast wie Sand am Meer. Meistens müssen Sie dann aber ein Werbebanner oder ein separates Werbefenster akzeptieren. Aber Sie haben eine preiswerte Domain und trotzdem viel Webspace für eine riesige Website. Geben Sie ein wenig mehr Geld aus, dann können Sie das auch alles zusammen bei einem einzigen Provider haben.
Ob Sie Ihren Webspace getrennt oder zusammen haben, davon hängt die Struktur Ihrer Website ab. Während Sie bei all inklusive durchweg mit relativen Pfadnamen wie images/bild1.jpg arbeiten können, müssen Sie bei verteiltem Webspace mit absoluten Pfadnamen wie http://members.tripod.de/muehlengrund/images/bild1.jpg arbeiten (nur die Dateien, die auf dem jeweils anderen Webspace liegen). Oder Sie definieren das global: <BASE HREF="http://members.tripod.de/muehlengrund/"> Dabei müssen Sie beachten, daß dann aber die jeweils lokalen Pfade absolut geschrieben werden müssen. Verteilter Webspace macht Tests auf dem heimischen PC ein wenig kompliziert.
Wollen Sie einen Counter (Zähler), ein Gästebuch oder gar CGI-Scripts verwenden? Wenn Ihr Provider das anbietet, haben Sie alles, was Sie brauchen. Bietet er das jedoch nicht an, dann müssen Sie sich das woanders beschaffen. Glücklicherweise gibt es auch hier sehr viele Anbieter. Meistens ist auch hier alles kostenlos. Halten Sie sich genau an die Anleitung des Anbieters. Dann funktioniert alles so wie es soll (meistens jedenfalls).

 zum Seitenanfangzum Seitenende

Zum Feinkonzept gehört noch mehr, beispielsweise Farbkombinationen, Bildbearbeitung, Impressum usw., aber darüber mehr im nächsten Artikel.

zum Seitenanfangzum Seitenende