Worum geht es hier?

Ein Ansatz zur Einbindung von Scripten, Flash und ähnlichem. Es geht weniger um das technische wie (dafür gibt's nicht nur einen Link einer Anleitung, sondern auch Weiterführendes) Anleitungen, sondern um sinnvolle Einbindung, damit alle, deren Browser keine Scripte oder Flash kennen, trotzdem den Inhalt der Seite zu sehen bekommen.

Sinnvolle Strukturen

Bist Du gegen ECMAScript und Flash?

Vorweg: ECMAScript ist der Standard der Scriptsprachen, normiert durch ECMA-262.
Nein vom Grundsatz her bin ich nicht gegen Scripte und Flash auf einer Webseite. Es sollte nur sinnvoll genutzt sein! Leider wird es oft nicht sinnvoll genutzt und eine ansonsten gute Webseite wird schlechter. Das führt sogar soweit, daß eine Seite unbenutzbar ist!

Der Inhalt muß für alle zugänglich bleiben, denn wegen der Inhalte kommen die Leute in der Regel auf eine Seite und nicht wegen der Effekte!

IMHO sollte jede Seite folgenden Anforderungen genügen:

  1. Grundsätzlich für jeden zugänglich sein (mittels (X)HTML)
  2. Gut aussehen (CSS, Bilder)
  3. Effekte eingebunden haben (InScript/ECMAScript)
  4. Noch mehr Effekte und Spielereien (Flash uvam)

Wichtig ist, daß man nicht bei Punkt 3 oder 4 anfängt, sondern bei Punkt 1 und danach die Punkte zwei bis vier nacheinander abarbeitet und dabei an dem bereits geschriebenen möglichst wenig (am besten: gar nichts) ändert.

1. Man schreibt die Seiten einfach herunter

Auf der Seite sind ja Informationen enthalten, die für andere interessant sein könnten. Die Besucher sollten (unabhängig vom OS und Browser!) immer die Möglichkeit haben, an diese Informationen zu kommen, denn deswegen sind Sie auf die Seite gekommen.

Das läßt sich dadurch realisieren, daß man mit (X)HTML die Inhalte der Seiten sinnvoll strukturiert. Überschriften kommen in <h1> bis <h6> und Absätze in <p> und </p>. Für Listen werden <li> erstellt und Tabellen werden mit <table> ausgezeichnet. Eine Liste, welche (X)HTML Elemente es gibt, findet sich in der der XHTML-Spezifikation beim w3c oder (als zweite Wahl) jeder Anleitung zu dieser Sprache. Wichtig ist, daß der Inhalt sinnvoll gewichtet wird! Der Quellcode sollte auch validiert werden.

Dabei verzichtet man (vorerst!) völlig auf jegliches Layout und Effekte. (X)HTML gewichtet den Text inhaltlich und legt logische Bezüge innerhalb des Textes fest.

Denk' auch immer daran die (in HTML4.01 zwar) optionalen </p> zu setzen, damit NN4 später mit dem CSS nicht durcheinander kommt (und man sich direkt daran gewöhnt, weil's in XHTML Pflicht ist die Elemente zu schließen [selbst <br> muß geschlossen werden <br />, denn sonst soll an dieser Stelle der Seitenaufbau abgebrochen werden!]). Mit NN4 lassen sich interessante ;-) Effekte erzielen, wenn </p> nicht immer gesetzt wird. Das geht hin bis zum Abstürzen des Browsers.

Absätze wie: <p>&nbsp;</p> haben hier absolut nichts verloren, denn warum sollte <p>&nbsp;</p> von der inhaltlichen Gewichtung genauso wichtig sein, wie <p>Ich bin ein normaler Absatz, der den ganz normalen Text enthält.</p>? RAUS damit, denn <p>&nbsp;</p> ist Styling und darum geht's hier noch nicht! Es sollen nur die Inhalte gewichtet (und gegliedert) werden.

Die ersten Bilder

Natürlich kommen jetzt auch Bilder auf die Seite. Achtet darauf, daß bei den Bildern die Größen und auch "alt" und "title" mitgegeben wird (height="XY" width="YX" alt="Alternativ Text" title="Ein etwas längerer, sinnvoller Titel").

"height" und "width", damit sich der Seitenaufbau nicht mehr verschiebt, wenn der Text bereits angezeigt wird, aber die Bilder noch nicht geladen sind. Ansonsten ruckelt der Text und muß immer wieder neu aufgebaut werden.

Das "alt" Attribut für Alternativtexte, wenn die Bilder nicht angezeigt werden und "title", damit ein kommentierter Text (Tooltip) angezeigt wird, wenn der Mauszeiger über das Bild bewegt wird (soweit der Browser das unterstützt).

Damit sehen die Seiten in jedem Browser relativ gleich aus (Es wird halt das interne Browserstylesheet verwendet). Man schaut sich die Seite in einem Browser an und denkt: "Mensch, schaut das aber Sch* aus!" Zugegeben: Einerseits schaut das zwar relativ "langweilig", aber dafür ist der Inhalt vom Grundsatz her allen Browsern zugänglich und es bleibt ja auch nicht so. Es ist ja nur der erste von mehreren Schritten.

2. Die Langeweile vertreiben

Jetzt kommt das Styling der Seiten.

Stylesheets

Ein Stylesheet mit relativ einfachen Grundformatierungen

Du machst ein relativ einfaches Stylesheet mit ein paar Grundformatierungen für Schrift, Einzüge, Rand um die Bilder, etc, das im <head> mit <link rel="stylesheet" href="stylesheet.css" title="Style" type="text/css"> eingebunden wird. Hier sollte nicht allzu kompliziertes definiert werden, um NN4 nicht zu verwirren. Es gibt Tabellen, welcher Browser mit welchen Regelsätzen Probleme hat; diese finden sich als Links am Ende dieses Dokumentes.

Ein ausgefeilteres Stylesheet

Ein weitergehendes Stylesheet kann mit @import eingebunden werden, weil NN4 dieses nicht erkennt, aber viele andere Browser mit besseren CSS-Fähigkeiten, denen man dann ein feineres Layout verpassen kann. Im <head> steht dann: @import url("style.css"); oder auch @import "hide2.css";.

Dabei behält man aber auch im Kopf, daß in den verschiedenen Browsern kein absolut identisch aussehendes Layout zu erreichen ist, denn die Browser haben durch die Spezifikation Freiheiten, wie die einzelnen Elemente tatsächlich angezeigt werden sollen.

3. Die ersten Script-Effekte für die Seiten

Nachdem man jetzt mit dem Layout zufrieden ist, kommt man zu Effekten, wie ausgetauschte Bilder bei onMouseOver, OnClick, etc. Dabei wird an den Punkten 1 und 2 aber möglichst nichts geändert!

Die Effekte sind Zusatz. Die Seiten muß vollständig erreichbar sein, auch wenn InScript/ECMAScript ausgeschaltet ist. Lege keine wichtigen Funktionen, wie Beispielsweise die Navigation, ausschließlich auf die Scripte. Verlaß Dich nicht darauf, daß jeder die Scriptsprachen in seinen Browser aktiviert hat oder aktivieren kann!

Weiterführende Lektüre: Howto: "Popups" mit JavaScript von Mathias Schäfer

4. Noch mehr Effekte und Spielereien

Diese weiteren Effekte sind wiederum auch nur Zusatz.
Nachdem diese ersten Effekte fertig sind und sie getestet wurden, kommt der letzte Feinschliff.

An dieser Stelle kommen jetzt Elemente wie QTVR oder Flash zum Einsatz, so man das will.

Das w3c hat die Spezifikation zu SVG beschlossen. SVG heißt scalable vector graphics. Verändere aber an den Punkten 1, 2 und 3 nichts mehr, denn ansonsten schließt man Leute von seiner Webseite aus! Binde die Effekte als Zusatz ein. Verlaß Dich nicht darauf, daß jeder Surfer die neueste Version des Plug-Ins XY für Seinen Browser installiert hat.

IMHO sollten in den Flashanimationen keine wichtigen Informationen vorhanden sein, die nicht auch als Text auf der Seite zu finden sind, denn ansonsten enthält man diese den Leuten vor, die kein Flash installiert haben. Man willt aber (idR), daß die Leute wegen des Inhalts auf die Seiten kommen. (Es sei denn die Domain lautet: www.nur-flash-spielereien.tld, dann kann man wegen der Erwartungshaltung der Besucher natürlich über Abweichendes reden..)

Die Inhalte, die im Flash enthalten sind, sollten also auch als Text zu finden sein. Wenn also bspw: Die Navigation als Flashfilm eingebunden werden soll, weil damit effektvoll gestaltet werden kann, muß die Alternativversion (aus oben 1. mit den reinen Textlinks) erhalten bleiben, damit die Leute ohne Flash immer noch sinnvoll durch Deine Seiten navigieren können.

Wenn Flash sinnvoll eingesetzt wird, ist es IMHO eine schöne Ergänzung zu einer gut gemachten Seite!

Der Inhalt muß für alle zugänglich bleiben, denn wegen der Inhalte kommen die Leute idR auf Deine Seite und nicht wegen der Effekte!

Browser und die CSS-Unterstützung:

Die versprochenen Anleitungen:


Zur Trennung von HTML und CSS.

Web-Technik und Anleitungen.