Techniken des Webdesigns
Divide et impera heißt es bei den Lateinern (teile und herrsche). Dies gilt auch, und ganz besonders hier, bei der Erstellung von Internetseiten.
Bei der Erstellung von einzelnen Seiten bis hin zu ganzen Internetpräsenzen, genügt eine einzige Formulierungsmöglichkeit nicht, um alle anfallenden Aufgaben des Web-Designs abdecken zu können. Deshalb greift man bei der Erstellung von Internetseiten für die unterschiedlichen Teilbereiche auf entsprechend spezialisierte Sprachen zurück, die das jeweils geeignete Werkzeug zur Verfügung stellen. Im Folgenden sollen diese Werkzeuge kurz vorstellt werden:
- (c) W3C
HTML
... (Hypter Text Meta Language, Dateiendung .htm oder .html) bildet die Struktur des Dokuments, gewissermaßen das Grundgerüst. HTML ist eine Auszeichnungssprache. Mit ihr wird das Dokument gegliedert, beispielsweise nach Überschriften (in verschiedenen Wichtigkeiten(Grade)), Absätze, Verweise (Links), Fußnoten etc. Ein HTML-Dokument umfasst aber keine Informationen darüber, wie diese Elemente aussehen sollen, dazu wird eine Präsentationssprache benötigt, das CSS.
- (c) W3C
CSS
... (Cascading Style Sheets, Dateiendung .css) ist die sogenannte Präsentationssprache, mit der die einzelnen Struktur-Elemente der Auszeichnungssprache (HTML oder XHTML) beschrieben werden können. CSS beschreibt somit ein Ergebnis und kein Prozess. Zum Beispiel wird mit CSS festgelegt, welche Schriftgröße ein Absatz hat oder wie ein Verweis gegenüber dem restlichen Text hervorgehoben wird, bzw, wie dieser sich "in Aktion", also beim Anklicken verhält.
HTML und CSS bilden zusammen ein "statisches" Dokument, wie es von Printmedien her bekannt ist. Interessant wird das ganze, wenn zu den bisher gegebenen Gestaltungsmöglichkeiten auch noch die Möglichkeit einer Interaktion hinzu kommt. Um das zu Realisieren, kommt Javascript ins Spiel.
Javascript
... (JScript, Dateiendung .js) ist eine ausgewachsene Programmiersprache. Mit Javascript kann man auf das Verhalten der Leser einer Seite reagieren und eigentlich statische Strukturen und Präsentationsaspekte dynamisch machen. Dynamisch bedeutet, das vorhandene Elemente in Inhalt und Aussehen auf das Leserverhalten hin verändert werden können.
Das Web-Dokument
Diese drei Elemente (HTML, CSS und Javascript) bilden zusammen ein Web-Dokument. Man kann sie als Schichten betrachten, beginnend mit der HTML-Schicht. Und es ist tatsächlich so, dass ein Browser, der ein Web-Dokument darstellt, zuerst die HTML-Struktur aufbaut. Wenn dies erfolgreich beendet ist, wird die darüberliegende CSS-Struktur interpretiert (decodiert) und schließlich wird das Dokument mit den im Javascript beschriebenen Verhalten ausgestattet.
Man kann das gut beobachten, wenn man heutzutage eine Internetseite mit einem Smartphone aufmacht und das Pech hat, gerade eine schlechte Verbindung, eine lahme Leitung, zu haben. Die Texte sind als erstes zu lesen, sehen aber noch sehr gewöhnungsbedürftig (unformatiert) aus, dann ist das gewohnte Erscheinungsbild da und noch etwas später kann man dann wie gewohnt auf der Seite Navigieren.
JQuery
... ist ein Framework (ein Rahmenwerk) das dabei hilft, komplexe Programmieraufgaben einfach, sicher und schnell lösen zu können. JQuery ist eine freie Javascript-Bibliothek, die ganz speziell darauf ausgelegt ist, auf Leserverhalten zu reagieren.
