Suchfeld implementieren

[Felix Riesterer]

Lieber Sascha,

Die Browser scheinen das Code Geschwür ja trotzdem (anscheinend aus Tolleranz) so zu verbildlichen, wie es beabsichtigt wurde.

Gegenbeispiel: Nur weil in Deinem Word Deine Überschrift groß, fett und unterstrichen ist, muss sie für Word noch lange keine solche sein, sondern läuft auch gerne unter "Standard", nur halt eben mit der entsprechenden Schriftgröße, -dicke und Unterstreichung.

Wenn ich nun Deine Website nehme, alles markiere und mittels copy&paste in Word (oder in meinem Falle OpenOffice) in ein Dokument einfüge, dann rate einmal, was ich dann erhalte. Besser noch: Probiere es selbst aus! Nimm dann vergleichenderweise auch noch die Startseite der Schulwebsite, die ich betreue, und verfahre damit ebenso.

Du wirst den Unterschied ganz schnell sehen. Dahinter versteckt sich einfach der Grundsatz des "semantic markup"s, der die Textbestandteile mit den passenden Elementen zur Textauszeichnung versieht, die der Natur der Textinhalte am ehesten entsprechen.

Die wichtigsten Vorteile, die ich deinem Post gestern entnommen habe, sind:

• Schnellere Ladezeiten
• ein sauberer (übersichtlicher Code)
  vorallem dank Auslagerung des CSS - die ab dann komplett für das Aussehen der Seite verantwortlich ist, sodass die HTML Datei ansich, nur noch für den Inhalt zuständig ist.

Das sind alles positive Nebeneffekte, die sich dabei automatisch ergeben.

Das Auslagern des Layout-Codes, und das strikte Trennen von Struktur und visueller Präsentation hat aber noch einen anderen Vorteil. Das "Re-Design" einer umfangreichen Website geschieht zentral, ohne dass einzelne Seiten deshalb geändert werden müssten. Man arbeitet also nur an der CSS-Datei (oder an den CSS-Dateien, wenn es auf mehrere aufgeteilt wird), sowie an den notwendigen Grafiken - die HTML-Dateien werden nicht angefasst.

Was meinst du mit Barrierefreiheit? In deinen Links wird darüber geschrieben, dass Seiten, wie die meine, stur in Tabellen aufgeteilt sind und deswegen sehr beschränkt. Meinst du das?

Eine eindrucksvolle Testmöglichkeit wäre, wenn Du Dir Deine Seiten einfach einmal von einem Screenreader vorlesen lassen würdest. Mach' die Augen zu und navigiere mit diesem Programm! Was glaubst Du, wirst Du von den JavaScript-getriebenen Hovergrafiken haben, wenn Du Dir Deine Seite vorlesen lässt?

Du darfst auch den Firefox zum Testen so einstellen, dass er keine Grafiken lädt, kein JavaScript ausführt, und dass er die Seite ohne Style (Ansicht->Webseiten-Stil->keinStil) anzeigt. Das, was Du dann sinnvoll nutzen kannst, das ist auch das, was Suchmaschinen im Wesentlichen nutzen können. Und im Vergleich zu Deiner Seite darfst Du dann auch unsere Schulwebsite unter diesen Bedingungen besuchen und testen.

Gegenfrage: Wieso hast du dich denn so mit den Code befasst. Bzw wieso wurden die auf CSS basierenden Layouts durchgesetzt (eingeführt).
Irgendeinen Sinn, musste das doch haben.

Na, klar! Trennung von Inhalt und Layout. Das Drei-Schichten-Modell, bei dem Inhalt (HTML), visuelle Darstellung (CSS) und Interaktion mit dem User (JavaScript) technisch getrennt realisiert werden, wobei die technische Verfügbarkeit der Zusatztechnologien eben nicht unter allen Umständen vorausgesetzt werden darf. Das macht es möglich, dass Webdokumente (sprich: Internetseiten) nicht nur von Menschen mittels eines Browsers verarbeitet werden können, sondern dass auch andere (zukünftige?) Nutzungsmöglichkeiten, eben auch automatisierte, sinnvoll die Inhalte verarbeiten können.

Das vorhin vorgeschlagene copy&paste in eine Textverarbeitung ist nur ein Beispiel für eine solche "andere" Nutzung, bei der aber schon sehr schnell offensichtlich wird, wo da mögliche Barrieren liegen.

Weil ich nie mit diesem unübersichtlichen Code Wirr-Warr zufrieden gewesen bin. Ich profitiere von einen sauberen Code in zweiermaßen.

1. Fällt es mir leichter mich im Quelltext zurechtzufinden und Anpassungen vorzunehmen.
2. Bekomme ich dadurch einfach eine feste Grundlage in Sachen Webdesign und muss mich damit später nicht mehr zieren meine Seiten hier zu zeigen.

Gut. Dann beginne am Besten mit dem Tutorial aus SELFHTML 9 (Preview), auch wenn vieles darin Dir nicht mehr fremd ist. Die Perspektive auf Dir bereits Vertrautes ist das Wesentliche dieses Tutorials. Anschließend steht Dir das Kapitel zu CSS offen, um Dich tiefer in die Materie einzuarbeiten. Und an dieser Stelle nocheinmal der Link zur <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>.

Am Ende wirst Du Deine Photoshop-Vorlagen nicht mehr in handliche Stücke (Slices) zerschneiden und tabellarisch wieder zusammensetzen, sondern die visuelle Struktur auf andere und flexiblere Art umsetzen. Dazu wirst Du sicherlich auch wieder Deine PS-Grafik nehmen, aber nicht mehr stupide zerschneiden, sondern Elemente daraus mit Hilfe von CSS und Hintergrundgrafiken wieder zusammenbauen, streckenweise vielleicht sogar Grafiken durch Hintergrundfarben ersetzen usw.

Liebe Grüße,

Felix Riesterer.