Trennung von Struktur, Formatierung und Funktionalität

Teile und herrsche - diese Devise gilt auch Im Webdesign. Anders gesagt, beim Erstellen einer Webseile genügt uns eine einzige Formulierungsmögkeit nicht, um alle anfallenden Aufgaben abdecken zu können. Vielmehr greifen wir für unterschiedliche Teilbereiche auf entsprechend spezialisierte Sprachen zurück, die uns das jeweils geeignete Werkzeug an die Hand geben.

Lassen Sie uns diese Teilbereiche kurz umreißen. Es sind dies (meist auch in dieser Reihenfolge genannt) im Einzelnen:

Beschreibung der Struktur

Die Beschreibung der Struktur wird durch eine Sprache übernommen, die hierarchisch geordnete Informationen möglichst semantisch (ihrer Bedeutung entsprechend} darzustellen in der Lage ist, Im Webdesign geschieht dies durch HTML oder XHTML. Im Volksmund werden HTML und XHTML oft als „Programmiersprachen“ bezeichnet, was allerdings nicht zutrifft. Bei beiden handelt es sich vielmehr um Auszeichnungs- oder Markup-Sprachen.

Beschreibung der Präsentation

Die in HTML beschriebene Struktur muss optisch präsentiert werden, wobei die Darstellung gemäß des User Agents (Browser, Mobilgerät, Drucker) unterschiedlich erfolgen muss (eben darum darf die Definition der Darstellung nicht Teil der Struktur sein). Für dieses Gebiet ist CSS die Sprache der Wahl.

Auch CSS ist keine Programmiersprache. Hier wird lediglich beschreibend festgelegt, welche Elemente aufweiche Weise dargestellt werden und in welchem Kontext welche der definierten Darsteilungsanweisungen einzusetzen ist. Man bezeichnet CSS daher auch ab Präsentationssprache. Da kein Prozess, sondern ein Ergebnis beschrieben wird, nennt man dies auch deklarative Sprache.

Beschreibung des Verhaltens

Interessant wird es, sobald eine Interaktion mit dem dargestellten Dokument möglich wird. Hier kommt JavaScript ins Spiel, mit dessen Hilfe Useraktionen erkannt und auf sie reagiert werden kann.

Bei JavaScript handelt es sich tatsächlich um eine ausgewachsene Programmiersprache. Mit seiner Hilfe kann man die eigentlich statischen Struktur- und Präsen-tationsaspekte dynamisch machen, also (auch nachträglich) sowohl das Aussehen als auch die Inhalte eines Dokuments verändern. Ein JavaScript Framework wie jQuery hilft Ihnen bei den dabei anfallenden, komplexen Programmieraufgaben.



Das Schichtenmodell

Da diese drei Aspekte aufeinander aufbauen (mit der Struktur als Basis), kann man sie auch als Schichtenniodell betrachten (siehe Abbildung). Hier wird deutlich, dass die HTML-Struktur die Basis bildet, auf der die darüberliegenden Schichten aufsetzen.

Tatsächlich liest der Browser auch zunächst diese Struktur ein, die er anschließend gemäß den CSS-Anweisungen »dekoriert;' und schließlich mit dem in Javascript beschriebenen Verhalten ausstattet. Setzen wir uns kurz mit den Grundlagen von HTML auseinander.


Die drei Ebenen - Struktur, Präsentation und Verhalten