Strict verstehen, Teil 7: Die Separation der Ebenen

**mitaki** · 20.01.2007 00:35

Wie niemand mehr weiß, habe ich im ersten Teil dieser Reihe ein sogenanntes Informationsmodell beschrieben und die Separation der Ebenen als ein Ziel der Variante Strict angegeben. Um das verständlicher zu erklären gibt es in diesem Teil einige praktische Beispiele.

Die Separation der Ebenen

Die erste Ebene ist bekannterweise die Information, welche in menschen- und maschinenlesbarer Form vorhanden ist. Das trifft an sich auf viele -ML-Sprachen zu, aber wir behandeln hier HTML.

Die Ebenen zwei bis vier sollten immer bestmöglich von der ersten getrennt sein.

Ebene Zwei: Trennung von Inhalt und Aussehen

Einer der größten Vorteile von Stilangaben ist, dass diese separat vom Dokument gespeichert werden können. Dann können Browser diese Dateien im Cache ablegen, was den Vorteil hat, dass weitere Webseiten der Webpräsenz schneller angezeigt werden können, da nicht alle Daten erneut geladen werden müssen. Bei Bildern wird schon lange so verfahren.
Das hat gleichzeitig den Vorteil, dass weniger Traffic verursacht wird, was bei guter Trennung von Stil und Struktur durchaus zu einem weniger belasteten Server führen kann.

Stilangaben auslagern

HTML-Code:

<head>
<!-- Idealerweise geschieht das Einbinden von externen Stilangaben über das link-Element. -->
<link rel="stylesheet" type="text/css" href="./stilangaben.css" media="screen" title="Moderner Webseitenstil" />
<link rel="alternate stylesheet" type="text/css" href="./stilangaben2.css" media="screen" title="Traditioneller Webseitenstil" />
<link rel="stylesheet" type="text/css" href="./printmedien.css" media="print,embossed" />
[...]
</head>

Hier sind drei verschiedene Stilangaben referenziert. Die Attribute des link-Element spielen dabei eine sehr große Rolle.

rel - Das link-Element hat viele Verwendungszwecke. Mit „stylesheet“ gibt man an, dass es Stilangaben für das Dokument gibt. Mit „alternate stylesheet“ gibt man an, dass für ein Ausgabemedium auch alternative Stilangaben vorhanden sind.
type - Da es mehrere Stilsprachen neben CSS gibt ist es wichtig, dieses Attribut mit dem Wert text/css zu setzen. Das Attribut ist Pflicht!
href - Hier wird die externe Stildatei referenziert.
media - In diesem Attribut werden die Ausgabemedien bestimmt, für die die Stilangaben gelten. Fehlt das Attribut gilt der Standardwert „screen“.
title - Gibt es zu einem Ausgabemedium mehrere Stilangaben zur Auswahl, so wird das title-Attribut als Beschriftung der Auswahlmöglichkeiten des Benutzers verwendet.
Hinweis: Ob es ein Fehler oder so definiert ist weiß ich nicht, jedoch werden Stilangaben für Druckmedien ingoriert, wenn sie über ein title-Attribut verfügen. Das Ansehen einer Druckvorschau benötigt also leider eine weitere Zeile.

Stilangaben auslagern oder intern einfügen

Stilbereiche innerhalb von HTML können dazu verwendet werden, externe Stilangaben über CSS einzubinden. Davon abgesehen sind Stilbereiche innerhalb des Dokuments grundsätzlich ein Nachteil und sollten im Bestfall nur bei HTML-E-Mails verwendet werden (Der Sinn dieser Mailform sei dahingestellt).

HTML-Code:

<head>
<style type="text/css" media="screen" title="Modern">
<!-- HTML-Kommentare in Stilbereichen sind nutzlos und manchmal sogar gefährlich.
Browser wie Netscape 3 oder Internet Explorer 2, für die diese Schreibweise gedacht ist, gibt es nicht mehr. -->
/* Einbinden externer Stilangaben für alle Ausgabemedien */
@import url('./stil_fuer_alle.css');
/* Einbinden externer Stilangaben für bestimmte Medien */
@import url('./printstil.css') print,embossed;
</style>
[...]
</head>

Für die drei Attribute des style-Elements gelten die selben Hinweise wie für die entsprechenden Attribute des link-Elements.

Die import-Regel fügt die referenzierten Stilangaben ein. Ohne Angabe eines bestimmten Mediums gelten diese Angaben für alle Ausgabemedien.

In HTML-Elementen gesetzte Stilangaben

Üblicherweise ist die Angabe von Klassen und IDs genug um Stilangaben auf das Dokument anwenden zu können. Leider machen noch viele den Fehler, Stilangaben direkt innerhalb von HTML-Elementen zu definieren (über das globale style-Attribut).
Da CSS nicht die einzige Stilsprache ist, muss auch für diesen Fall eine Angabe gemacht werden, dass die Stilangaben in CSS vorhanden sind. Dies geschieht über eine Metaangabe.

HTML-Code:

<head>
<!-- HTML Variante -->
<meta http-equiv="content-style-type" content="text/css">
<!-- XHTML Variante -->
<meta http-equiv="content-style-type" content="text/css" />
[...]
</head>

Struktur statt Klassen und IDs

Eine Krankheit, die sich beim Wechsel zu gültigem HTML entwickeln kann, hört auf den Namen Divitis. Dabei werden viele div-Elemente mit zahlreichen Klassen und/oder IDs formatiert. Ursache ist unter anderem Unwissenheit über grundlegende CSS Selektoren.

HTML-Code:

<!-- Divitis: -->
<div id="header">Überschrift</div>
<div class="link">...</div>
<div class="link">...</div>
<div class="link">...</div>
<!-- Gute Struktur: -->
<ul id="navigation">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Problematische Strukturierung wie gezeigt findet man leider sehr häufig vor. Es ist ein Irrglaube, Tabellenzellen durch <div> zu ersetzen wäre standardkonforme Strukturierung. <div>, das steht für „document divisions“ und ist dazu gedacht, Bereiche des Dokuments in sinnvolle Abschnitte zu gliedern, um diese dann mit Stilangaben formatieren zu können.
Dokumente sollten auch ohne <div> funktionieren, die wichtigsten Elemente sind Listen, Überschriften, Absätze und Anker.

Ebene Zwei: Graphiken

Graphiken habe ich bereits erklärt, trotzdem nochmal einige Beispiele für das richtige setzen von Alternativtexten.

Dient das Bild als Überschrift, z.B. weil es den Namen der Webseite oder den Titel einer Kategorie enthält, so muss der Alternativtext diesen Bildtext ersetzen können, wenn ein Textbrowser oder eine Suchmaschine die Seite besucht. Leere Alternativtexte sind hier fatal.

Ist das Bild zur Anzeige von Bewertungen gedacht ist der Alternativtext „3 von 5 Punkten“ sicher am besten geeignet. Auf Spielereien wie „***/*****“ sollte man verzichten, da vorlesende Browser damit Probleme haben könnten.

Bestimmte Zeichen und Piktogramme sollten ausgeschrieben werden oder, wenn das nicht möglich ist, durch ein Äquivalentes Zeichen ersetzt werden. Beispiel wären etwa die Tasten eines Playstationcontrollers. Dreieck, Quadrat, Kreis und Kreuz wären Ideale Alternativtexte, wenn die Bilder mit diesen Symbolen nicht geladen werden.
Diese Wörter sind auch Wesentlich besser geeignet als Sprachungetüme wie „/\“ oder „[]“.

Problematisch sind jedoch auch Bilder, die nur der Gestaltung dienen, aber dennoch einen Alternativtext wie „links oben“ und „rechts unten“ enthalten. Das stört den Lesefluss doch enorm, da man diesen Text im Gegensatz zu [INLINE] nicht sofort als nicht-textzugehörig erkennen kann.
Bilder die der Gestaltung dienen müssen einen Leeren Alternativtext besitzen. Das bedeutet alt="", das Attribut muss also gesetzt werden, lediglich ohne Inhalt.

Ebene Drei: Trennung von Information und (Inter-)Aktivität

Für klientseitige Skriptsprachen gelten ganz ähnliche Regeln wie für Stilangaben. Auch hier kann man Skripte und Struktur von einander trennen.

Skripte auslagern

HTML-Code:

<head>
<script type="text/javascript" src="javascript15.js"></script>
[...]
</head>

Um ausgelagerte Skripte einzubinden genügt es, im Kopfbereich des Dokuments einen leeren Scriptbereich zu erstellen. Über dessen Attribute werden Skripte eingebunden.

type - Da es neben JavaScript noch andere Skriptspachen gibt und in neueren Versionen eine Manipulation der Funktionsweise durch unterschiedliche MIME-Typen möglich ist, ist es notwendig, das Pflichtattribut „type“ anzugeben. Die größte Browserkompatibilität erreicht man mit text/javascript. Im Gegensatz zu Stilangaben ist JavaScript nicht so streng und akzeptiert auch Dateien, die mit dem falschen MIME-Typ versendet werden.
src - Damit wird die externe JavaScript-Datei referenziert. Ist dieses Attribut gesetzt wird der Inhalt des Skriptbereiches ignoriert - aber warum sollte da auch was drinstehen?

Skriptbereiche im Dokument

In manchen Fällen ist es sinnvoll, Skriptbereiche innerhalb des Dokuments zu lagern.

HTML-Code:

<script type="text/javascript">
<!-- Auch hier gilt: Keine HTML-Kommentare. Die Zeiten sind wirklich vorbei :) -->
Besondere_Ausgabe();
</script>
<noscript>
Alternative Ausgabe.
</nocsript>

Das type-Attribut ist auch hier Pflicht. Im Skriptbereich sollte jedoch nicht mehr stehen als eine Funktion, die den Inhalt erzeugt. Sinvoll wäre ein Bereich wie oben in dem Fall, in dem JavaScript Inhalt erzeugt, welcher widerum mit JavaScript weiterarbeitet, während im Noscriptbereich der Alternative Inhalt steht, der für Benutzer mit deaktiviertem JavaScript nützlich ist.

In HTML-Elementen gelagertes JavaScript

In HTML gibt es sogenannte Eventhandler, das sind Attribute, die in fast allen Elementen vorkommen dürfen und je nach Ereignis, z.B. Klick oder Doppelklick, die Skripte ausführen, die in den entsprechenden Attributen gespeichert sind.

HTML-Code:

<button type="button" onclick="Zeitausgabe();">Interaktivitätstest</button>

In diesen Attributen dürfen Skripte stehen. Diese sollten sauber geschrieben werden, das bedeutet z.B. dass Funktionen mit einem Strichpunkt abgeschlossen werden. Mehr als das Aufrufen einer Funktion sollte im Großteil der Fälle nicht nötig sein.

Werden diese Eventhandler verwendet muss der Browser ebenfalls erfahren, welche Skriptsprache verwendet wurde, deshalb gibt es auch dazu eine Metaangabe:

HTML-Code:

<head>
<!-- HTML Variante -->
<meta http-equiv="content-script-type" content="text/javascript">
<!-- XHTML Variante -->
<meta http-equiv="content-script-type" content="text/javascript" />
[...]
</head>

JavaScript als Verweisziel

Im href-Attribut des <a> und des area-Elements kann das Pseudoprotokoll javascript: verwendet werden.

HTML-Code:

<a href="javascript:Funktion();">Funktion aufrufen.</a>

Diese Art des Funktionsaufrufes ist jedoch schlechter Stil, da das href-Attribut als Verweisziel eine Skriptlose Alternative enthalten muss, während die eigentliche Funktion in einem Eventhandler stehen sollte.

Funktionsrückgabe bei bestimmten Eventhandlern

In manchen Fällen ist es notwendig, dass die Skripte in Eventhandlern bestimmte Werte zurückliefern.

HTML-Code:

<form action="./test.html" method="post" onsubmit="Validiere();">
<!-- onsubmit muss true zurückgeben, damit das Formular abgesendet wird.
Alles andere wird ignoriert. Ideal zum Überprüfen von Eingabefeldern -->
</form>

Eventhandler in extern gelagerten JavaScript Dateien

Meines Wissens können manche Eventhandler auch ganz außerhalb des Dokuments, als reines JavaScript erstellt werden. Wie genau das Funktioniert weiß ich leider nicht, da ich mich nur wenig mit JavaScript beschäftige. Es hört sich aber nach einer Möglichkeit an, die die Trennung von Inhalt, Gestaltung und Interaktivität verdeutlicht.

Ebene Vier: Fallback multimedialer Inhalte

Inhalte der vierten Ebene werden zum Großteil durch das object-Element eingefügt. Dass die Möglichkeit zur angabe eines Fallbacks kaum genutzt wird verdanken wir dem Internet Explorer, der bis Version 6 bei nicht ladbaren Objekten einfach gar nichts macht.

Da aber bessere Browser auf dem Vormarsch sind und die Angabe von Alternativen ohnehin lobenswert ist, hier ein Beispiel.

HTML-Code:

<p>
<object>
<!-- Da ich mit diesem Element noch nicht gearbeitet habe fallen Ausnahmsweise die wichtigen Attribute aus. -->
<param name="src" value="quelle.ext" />
Hier wird das Beispielobjekt eingebunden. Kann es nicht geladen werden, wird dieser Text angezeigt.
</object>
</p>

Nachdem innerhalb des object-Elements der letzte Parameter angegeben wurde ist dort Platz für den Inhalt, der angezeigt werden soll, wenn das Objekt nicht gleaden werden kann. Möglich wäre neben einem einfachen Text-Fallback z.B. auch mehrfache Verschachtelung von Objekten. Die letzte Alternative sollte jedoch immer Text beinhalten.

**drunken monkey** · 20.01.2007 12:01

Zitat von mitaki

Wie niemand mehr weiß, habe ich im ersten Teil dieser Reihe ein sogenanntes Informationsmodell beschrieben und die Separation der Ebenen als ein Ziel der Variante Strict angegeben.

Verdammt, du hast recht!

Zitat

HTML-Code:

<form action="./test.html" method="post" onsubmit="Validiere();">
<!-- onsubmit muss true zurückgeben, damit das Formular abgesendet wird.
Alles andere wird ignoriert. Ideal zum Überprüfen von Eingabefeldern -->
</form>

Hm, damit hatte ich letzthin einige Probleme. Bist du sicher, dass das in der Form wirklich bei jeder Art von Submit die Rückgabe von Validiere() prüft?
Bei mir hat's dann nämlich erst geklappt, wie ich's auch in den Abschick-Link geschrieben habe, und da auch nur als "onclick = 'return Validiere();'". o_O' Heißt das, ich habe mich bloß irgendwo vertippt, oder kann's sein, dass das noch unzureichend implementiert ist?

Zitat

Meines Wissens können manche Eventhandler auch ganz außerhalb des Dokuments, als reines JavaScript erstellt werden. Wie genau das Funktioniert weiß ich leider nicht, da ich mich nur wenig mit JavaScript beschäftige. Es hört sich aber nach einer Möglichkeit an, die die Trennung von Inhalt, Gestaltung und Interaktivität verdeutlicht.

Ich kenne mich auch nicht so gut mit JS aus, aber kann sein, dass es sowas wie "element.onclick = '...'" gibt. Inwieweit das aber standardkonform ist, weiß ich nicht, bei SelfHTML z.B. steht nichts davon.

Jedenfalls wieder mal danke für deine höheren Einsichten!

^^

**mitaki** · 20.01.2007 19:40

Zitat

Bei mir hat's dann nämlich erst geklappt, wie ich's auch in den Abschick-Link geschrieben habe, und da auch nur als "onclick = 'return Validiere();'". o_O' Heißt das, ich habe mich bloß irgendwo vertippt, oder kann's sein, dass das noch unzureichend implementiert ist?

Abschick-Link?
Ich glaube nicht, dass es an der Implementierung liegt, Prüfungen wie diese sind eigentlich Ur-JavaScript.

Habe schnell getestet: Opera (9.1), Firefox (1.5) und Internet Explorer 7 rufen Validate() auf bei <botton type="submit"> und <input type="submit" />.
Alle drei senden das Formular ohne Prüfung, wenn das Formular über einen Verweis (href und onclick) per submit() abgesendet wird.

Ich denke der Fehler lag bei dir.
onsubmit="return Funktion();" in <form>. Die Funktion muss entweder true oder false zurückgeben. Ausgewertet wird dabei nur das erste return der Funktion. Hast du also zuerst return true; gesagt und revidierst das später in der Funktion zählt dennoch true.

(War das verständlich?^^)

Zitat

Ich kenne mich auch nicht so gut mit JS aus, aber kann sein, dass es sowas wie "element.onclick = '...'" gibt. Inwieweit das aber standardkonform ist, weiß ich nicht, bei SelfHTML z.B. steht nichts davon.

Ich habe vor kurzem im SELFHTML-Forum von window.onload = x; gelesen, aber ich verbreite ungern Teilinformationen.

**drunken monkey** · 20.01.2007 21:10

Zitat von mitaki

Ich denke der Fehler lag bei dir.
onsubmit="return Funktion();" in <form>. Die Funktion muss entweder true oder false zurückgeben. Ausgewertet wird dabei nur das erste return der Funktion. Hast du also zuerst return true; gesagt und revidierst das später in der Funktion zählt dennoch true.

Das ist mir schon klar, ganz bescheuert bin ich auch nicht. Allerdings bin ich anscheinend teilweise bescheuert, da ich's wirklich per Link "form.submit ()" gemacht habe und dachte, da wird das trotzdem überprüft. :-/
Naja, ich habe dann halt einfach gleich die Prüf-Funktion in den Link geschrieben und ein Submit an ihr Ende, so ging's.
Und jetzt bin ich wieder gescheiter. ^^

Zitat

Ich habe vor kurzem im SELFHTML-Forum von window.onload = x; gelesen, aber ich verbreite ungern Teilinformationen.

Ist auch besser so, ich kann da wie gesagt auch nicht helfen. Und solange das nirgends steht, kann wohl auch keiner verlangen, dass du die HTML/JS-Trennung so weit treibst.

**mitaki** · 20.01.2007 21:21

Zitat

Naja, ich habe dann halt einfach gleich die Prüf-Funktion in den Link geschrieben und ein Submit an ihr Ende, so ging's.

Alternativ würde ich empfehlen, ein button-Element als Link zu formatieren, damit auch nicht-JavaSvript-fähige Browser etwas von dem Formular haben.

**Manni** · 21.01.2007 00:06

Ereignisse eines Element kann man mithilfe von der Methode addEventListener() abfangen:

Code:

element.addEventListener(String eventType, Function handler, Boolean useCapture);

Im Internet Explorer funktioniert es mit der Methode attachEvent():

Code:

element.attachEvent(String event, Function handler);

Es gibt auch die Möglichkeit, den Elementen direkt über Attribute die Handler zuzuweisen:

Code:

element.onclick = function(e) { alert('test') };

Die Namen entsprechen die den HTML Attributen bis auf die Tatsache, dass sie klein geschrieben werden.

Mehr Informationen gibt es hier und hier.

@topic
Mal wieder ein interessanter Artikel, mitaki

Thema: Strict verstehen, Teil 7: Die Separation der Ebenen

Themen-Optionen

Anzeige

Strict verstehen, Teil 7: Die Separation der Ebenen

Berechtigungen