Teil von SELFHTML aktuell Teil von Sonstiges

Neuerungen der Layout-Richtlinien 2006-09-05

nach unten Änderungen zwischen dem alten Code (2003-02-22) und 2006-09-05

Änderungen zwischen dem alten Code (2003-02-22) und 2006-09-05

Neues Stylesheet und Layout-Versionierung

Das neue Stylesheet ist http://src.selfhtml.org/selfhtml-aktuell-2006-09-05.css. Das Datum »2006-09-05« in diesem Dateinamen bezeichnet die Version der Seite neuen Layout-Richtlinien. Ein Dokument sollte immer konform zu der Version sein, auf die es durch das Stylesheet verweist. Eine neue Version der Richtlinien bringt dann ein anders lautendes Stylesheet mit sich. Der Verweis auf das Stylesheet ist damit gleichzeitig eine Meta-Angabe zu den verwendeten Layout-Richtlinien.

Keine Entites für Umlaute mehr

Alle Dokumente sollen mit der Zeichenkodierung ISO-8859-1 (Latin-1) gespeichert werden. Diese Zeichenkodierung wird auch ausgenutzt, das heißt, deutsche Umlaute, ß sowie Buchstaben mit französischen Accents werden direkt im Quellcode notiert. Die überflüssige Maskierung durch Entities (ä für ä, ß für ß usw.) entfällt.

Klassen für body

Alle Dokumente haben die Klassen selfhtml-aktuell für das body-Element und weiterhin eine Klasse ihrem Seitentyp (selfhtml-aktuell-kapitelseite oder selfhtml-aktuell-inhaltsseite). Dies dient der unterschiedlichen Formatierung im Stylesheet.

Auszeichnung der Struktur mit IDs

Die wichtigen funktionalen Bereiche haben sprechende IDs und Klassen oder sind anderweitig einheitlich, eindeutig und wiedererkennbar ausgezeichnet. Siehe Seite Aufbau des SELFHTML-Layouts.

Layouttabelle im Kopf überarbeitet

Die Kopftabelle bleibt als Layouttabelle erhalten, der Code wurde aber konsequent aufgeräumt und enthält keine Angaben zur Präsentation wie bgcolor, align, valign oder nowrap (lediglich cellpadding und cellspacing). Mehrere Layouttabellen im Kopf wurden zu einer verschmolzen. Das Schema der Tabelle ist:

kopf-navigation
kopf-logokopf-titel
kopf-linkskopf-haupt
kopf-down-link

Die Bezeichner sind die IDs der jeweiligen td-Elemente.

Mehrere Spalten in der Kopf-Hauptzelle weiter mit Layouttabellen

Mehrspaltigkeit in der kopf-haupt-Tabellenzelle, wie z.B. auf den Seitentypen Portal- und Startseiten vorkommen, wird vorerst weiterhin mit blinden Layouttabellen gelöst.

Oberste Überschrift mit h1 auszeichnen

Der Dokumenttitel steht immer in einem h1-Element in der kopf-haupt-Tabellenzelle ohne eine Klasse.

Neuer Code für Navigationsbalken

Der graue Navigationsbalken zwischen zwei Abschnitten wird nicht mehr mit einer Layouttabelle gelöst, sondern ist ein p-Absatz mit der Klasse abschnitttrenner (ja, drei »t«, mir fiel kein besserer Name ein).

Datentabellen sauberer auszeichnen

Datentabellen im klassischen SELF-Look bekommen die Klasse reftable. Sie sollten ohne bgcolor, align, valign, nowrap usw. auskommen, da diese Formatierung zentral erfolgt. Kopfzellen werden mit th ausgezeichnet. (Einige Artikel verwenden besondere Tabellen, z.B. Seite Live-Connect und Seite Druck-Layout. Diese verbleiben erst einmal. Die entsprechenden Styles wurden noch nicht ins zentrale Stylesheet aufgenommen.)

Layouttabelle im Seitenfuß fällt weg

Die Layouttabelle im Seitenfuß wurde aufgelöst, die Teilbereiche sind nun p-Absätze mit id="fuss-up-link", id="fuss-navigation" sowie dem Impressums-Absatz <p><a name="bottom">. Die Sequenznavigation im Fuß (Sprung zur vorigen und nächsten Seite) ist ein div mit id="sequenznavigation" und zwei p-Absätzen darin. Die Formatierung erfolgt komplett mit CSS.

Einheitliche Konvention zur Einbindung von Hyperlinks

Der Code zur Einbindung von Hyperlinks mit Symbolgrafiken wurde vereinheitlicht. Es sind keine b-Elemente mehr nötig und es gibt bei den Symbolgrafiken kein border-Attribut mehr. Das allgemeine Schema ist:

<img src="http://src.selfhtml.org/NAME.gif" width="BREITE" height="HÖHE" alt="ALTERNATIVTEXT">&nbsp;<a href="ADRESSE">LINKTEXT</a>

target-Attribut nur noch bei Popup-Seiten

Obwohl die alten Layoutrichtlinien es nicht vorsahen, wurden bisher externe Links vereinzelt mit target="_top" oder gar target="_blank" versehen. Diese target-Attribute fallen nun weg, sodass nur noch bei Links zu Popup-Seiten (»Anzeigebeispiel: So sieht's aus«) target="_blank" verwendet wird.

class="an" bei Ankern und class="Sh2" bei Überschriften fallen weg

<a class="an"> bei Ankern fällt weg. Ebenso fällt class="Sh2" bei h2-Überschriften weg. Eine Zwischenüberschrift sieht nun so aus:

<h2><a name="ANKER">ÜBERSCHRIFT</a></h2>

Code-Listings mit einem einfachen pre auszeichnen

Größere Codepassagen, Datei-Listings, Programm-Ausgaben, Shell-Beispiele und andere Texte, die Monospace-Formatierung erfordern, werden mit einem einfachen pre-Element ausgezeichnet. Die Layouttabelle drumherum entfällt.

<pre>
/* Code */
</pre>

Netscape 4 wird nicht mehr aktiv unterstützt

Die Netscape-4-Anpassung font-size:13.4px im Stylesheet wird durch ein einfaches font-size:13px; ersetzt. Durch den Wegfall von Transitional-Markup bei den Layouttabellen (vor allem bgcolor und width) sehen diese bescheiden im Netscape aus.

Attributreihenfolge normiert

Die Reihenfolge von Attributen im Start-Tag ist vorgegeben und sollte eingehalten werden. Es sind exakt die Codeschnipsel zu verwenden, die in den Layoutvorgaben und den Musterseiten beschrieben werden.

Relative Links ohne das überflüssige index.htm

Relative Links mit index.htm sind redundant und sollen vermieden werden zugunsten von ./, ../, / und so weiter. Dies führt leider dazu, dass das Navigieren der lokalen Subversion-Projektkopie von SELFHTML aktuell nicht mehr wie früher funktioniert. Andererseits hat es auch noch nie korrekt funktioniert, da der tatsächliche Verzeichnisbaum nicht immer mit der URI-Struktur korrespondiert (z.B. /artikel/index.htm ist tatsächlich /artikel/dokumente/index.htm).

Zitate mit q statt cite auszeichnen

Inline-Zitate werden ab jetzt korrekt mit dem q-Element ausgezeichnet, nicht länger mit dem unangemessenem Element cite. (Eine entsprechende globale Ersetzung wurde aber noch nicht vorgenommen.)

Code mit code statt tt auszeichnen

Das tt-Element wurde endgültig durch code ersetzt. (Dies ist keine Änderung gegenüber den alten Richtlinien, auch diese schrieben schon code vor. Es hielten sich aber viele Dokumente nicht daran.)

Auswirkungen der Zusammenlegung von Feature-Artikel sowie Tipps & Tricks

»Feature-Artikel« sowie »Tipps & Tricks« gibt es seit geraumer Zeit nicht mehr, anstelle wird nur noch der Begriff »Artikel« verwendet. Alle Hyperlinks (a- und auch link-Elemente) auf die Tipps & Tricks werden gestrichen.

Keine Layout-Tricks mit zweckentfremdetem Markup und geschützten Leerzeichen

Abstände mit <p>&nbsp;</p>, <br>&nbsp; oder auch &nbsp; zwischen oder am Ende von Blockelementen sollen zugunsten von CSS vermieden werden. Allgemein soll &nbsp; darauf beschränkt sein, zwischen Hyperlinks und zugehörigen Symbolgrafiken zu stehen. Zwischen den Links in der oberen und unteren Navigationsleiste stehen normale Leerzeichen.

Teil von SELFHTML aktuell Teil von Sonstiges

© 2007 bereichsübergreifende Seite Impressum