Sascha Postner macht Jagd auf Kommunikation, Webstandards und Public Relations

Die Trennung von Inhalt, Design und aktiven Elementen einer Webseite ist nicht nur ein heeres Ziel für einige Geeks, die sowieso zuviel Zeit haben. In diesem Podcast erklären wir, warum diese Trennung für jeden wichtig sein sollte, wie man sie erreicht und was sie für Vorteile bringt. Zusätzlich zeigen wir in den Storynotes zu diesem Podcast kurz einige Beispiele, wie diese Trennung technisch aussehen könnte.

Das eigentlich geplante Thema der Strukturplanung einer Webseite haben wir etwas nach hinten geschoben – es wurde nicht vergessen, aber aufgrund aktueller Nachfragen haben wir uns entschlossen, die Trennung von Inhalt, Design und Verhalten und in der nächsten Woche Barrierefreiheit vorzuziehen.

Trennung

• Der Inhalt – also das, was eine Webseite ausmachen sollte – wird in HTML-Format gespeichert. In HTML sollten nur semantische (d.h. logische) Textauszeichnungen benutzt werden. Z.B. kann man einen Text hervorheben oder betonen und durch Überschriften oder Kapitel gliedern.
• Das Design sollte möglichst vollständig durch CSS beschrieben werden. CSS ist in dieser Hinsicht viel mächtiger als tabellenbasierte HTML-Designs.
• Das dynamische Verhalten sollte wenn möglich mit CSS (Stichwort: Link-Hover) ansonsten mit JavaScript und per DOM realisiert werden. Hierbei sollte man auch auf eine Trennung des JavaScript Codes von der HTML-Seite achten. Auch eingebettete Eventhandler sind schlecht weil nicht gut wartbar und unübersichtlich.

Trennung – warum?

Warum? kann man sich fragen, sollte man z.B. Design und Inhalt voneinander trennen? HTML bietet doch auch Möglichkeiten, den Inhalt zu formatieren. Das ist auch anfänglich für den unerfahrenen Webdesigner eine Strategie, die schnell Erfolg verspricht. Muss man sich ja nur in eine Sprache – nämlich HTML – einarbeiten. Werden die Projekte aber umfangreicher und die Ansprüche größer, kommt man mit dieser Strategie schnell in Bedrängnis.
Hier einige Vorteile der Trennung, die wir in dem Podcast ansprechen:

• Änderungen am Design sind leicht für die ganze Webseite umsetzbar.
• Bessere Arbeitsteilung zwischen Redakteur und Designer.
• Barrierefreiheit braucht diese Trennung.
• Suchmaschinen freuen sich über sie.

Trennung – wie?

Wie kann ich denn diese tolle Trennung erreichen? Das möchten wir hier nicht klären, denn das ist nicht unsere Aufgabe. Aber wir möchten euch wenigstens einen kleinen Einblick geben, wie eine Trennung aussehen könnte. So könnt ihr schlechten Code erkennen und eurer Agentur vorhalten

Hier erstmal ein Negativbeispiel, wie man es nicht machen sollte:

</p>
<pre>&lt;html&gt;&lt;head&gt;&lt;title&gt;Alles zusammengemixt&lt;/title&gt;&lt;/head&gt;
&lt;body bgcolor="black" text="white" link="red"
onload="alert('ich nerv für mein leben gern!');"&gt;

&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;&lt;td colspan="2"&gt;&lt;font size="7"&gt;&lt;font face="Arial"&gt;
Ich bin die Überschrift
&lt;/font&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;
&lt;font size="4" face="Courier"&gt;Navigation&lt;/font&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;&lt;font size="6"&gt;&lt;b&gt;Überschift&lt;/b&gt;&lt;/font&gt;&lt;/p&gt;
&lt;p&gt;&lt;font face="Arial"&gt;Bodytext&lt;/font&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan="2"&gt;&lt;font size="2"&gt;&lt;font face="Arial"&gt;
Ich bin der Footer
&lt;/font&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;img xsrc="transparent.gif" mce_src="transparent.gif"  width="400" height="1"&gt;&lt;/td&gt;
&lt;td&gt;&lt;img xsrc="transparent.gif" mce_src="transparent.gif"  width="400" height="1"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;&lt;/html&gt;</pre>
<p>

Hier wurden Inhalt, Layout und Verhalten der Seite zusammen in eine Datei und dazu noch undifferenziert eingegeben. Besser ist Folgendes (Die Begründung findet sich natürlich im Podcast):

HTML

</p>
<pre>&lt;html&gt;&lt;head&gt;&lt;title&gt;Schön getrennt&lt;/title&gt;
&lt;!-- Das hier verbindet die HTML-Seite mit ihrem Design: --&gt;
&lt;link rel="stylesheet" xhref="styles.css" mce_href="styles.css"  type="text/css"&gt;
&lt;!-- und das hier mit ihrem Verhalten: --&gt;
&lt;script xsrc="sripts.js" mce_src="sripts.js"  type="text/javascript"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;&lt;h1&gt;Seitenüberschrift&lt;/h1&gt;&lt;/div&gt;
&lt;div id="content"&gt;
&lt;h2&gt;Überschrift&lt;/h2&gt;
&lt;p&gt;Bodytext&lt;/p&gt;
&lt;/div&gt;
&lt;div id="navigation"&gt;
Navigation
&lt;/div&gt;
&lt;div id="footer"&gt;
Footer
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>

CSS (styles.css)

</p>
<pre>h1 { color: blue; }
h2 { color: red; }
p { color:darkblue; }
#header h1 {font: 2em/130% normal Arial, sans-serif;}
#header, #content, #navigation { position:absolute; ... }</pre>
<p>

Javascript (scripts.js)

</p>
<pre>if (document.getElementById) {
var oldLoad = function(){};
if (window.onload) oldLoad = window.onload;
window.onload = function() {
oldLoad();
myLoad();
};
}
function myLoad() {
// hier kann man das dynamische Verhalten zuweisen
alert('ich nerv für mein leben gern!');
}</pre>
<p>

Ausblick

Wie findet ihr diesen Podcast? Habt ihr Themenvorschläge? Warum hört ihr uns? Warum nicht? Wir sind gespannt auf euer Feedback!

In der nächsten Woche behandeln wir das Thema Barrierefreiheit. Wir finden allerdings, dass Zugänglichkeit ein besserer Begriff wäre, aber uns hat ja niemand gefragt . Der Podcast wird “live” aus der Kippe in Karlsruhe kommen, seit also gespannt!

Glossar

Geek

Mensch, der zuviel Zeit hat und deshalb unnötiges Zeug entwickelt und nutzt, das der Rest der Menscheit nicht braucht.

HTML

Hypertext Markup Language. Eine sog. Seitenbeschreibungssprache – keine Programmiersprache. Mit HTML kann man Inhalte semantisch beschreiben. Man kann z.B. angeben, dass ein Text eine Überschrift ersten Grades ist oder dass ein Wort wichtig ist.

Hypertext

Einzelnen Texte sind miteinander durch Links verbunden. Der Benutzer kann durch diese Links innerhalb des Hypertexts navigieren.

XHTML

Die neueste Version von HTML, die in XML kodiert ist (im Gegensatz zu SGML). Durch die XML-Kodierung ist eine bessere maschinelle Überprüfung der Dokumente gegeben (Validierung) und XHTML erbt auch die ausgezeichneten Erweiterungsmöglichkeiten von XML (durch Namespaces)

CSS

Cascading Stylesheets. Verschachtelte Formatvorlagen, durch die der HTML-Seiteninhalt ansprechend formatiert werden kann.

JavaScript

Eine Programmiersprache/Skriptsprache, die es ermöglicht, Webseiten beim Benutzer im gewissen Rahmen zu verändern. JavaScript wird in dem Browser des Benutzers ausgeführt, kann also aus Sicherheitsgründen nicht alles, was eine “richtige” Programmiersprache/Skriptsprache machen könnte. JavaScript hat nichts mit der Programmiersprache Java zu tun (außer der – ansatzweise – gleichen Syntax).

DOM

Document Object Model. Eine Repräsentation der Seite als (Objekt-)Baum. Per JavaScript kann dieser Baum traversiert und verändert werden. Nötig für alle tollen Web 2.0 Effekte, die man neuerdings bewundern darf.

Links

• CSS Zen Garden – “Eine Demonstration dessen, was sich visuell mit Hilfe von CSS erreichen läßt.”
• W3C – Die Leute, die die Standards des Webs definieren. Hier finden sich auch deutsche Übersetzungen der Standards.

Popularity: 14% [?]

Verwandte Artikel

• TW mit Sylvia Egger (0)
• Technikwürze zu Formularen in zwei Teilen (0)
• Technikwürze zu Druck-Stylesheets (0)
• Technikwürze mit Schwerpunkt Opera (0)
• Podcasts zum Joggen und Laufen (0)

Schlagworte: Podcast Dieser Beitrag wurde vor am Mittwoch, 28. Juni 2006 um 21:26 Uhr veröffentlicht und unter Podcast gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.