Fachartikel: Macht die Gestaltung einer validen Webseite Sinn?

Tim Berners-Lee, der als Miterfinder

des World Wide Web Weltruhm er-

langte, gründete 1994, in Kooperati-

on mit dem Massachusetts Institute

of Technology (MIT), der European

Organization for Nuclear Research

(CERN) und unterstützt vom U.S.

Defense Advanced Research Project

Agency (DARPA) sowie der Europäi-

schen Union, das W3C (World Wide

Web Consortium), welchem die Wei-

terentwicklung der einheitlichen Pro-

grammiersprache HTML (HyperText

Markup Language) unterlag. Durch

das W3C bekannte Techniken sind

unter Anderem (X)HTML, XML, CSS,

SVG, RSS und WCAG, die in ver-

schiedensten Webseiten und Blogs

auch standardisiert Einsatz finden.

Das Deutsch-Österreichische Büro

hat seinen Sitz im Fraunhofer Institut

für Intelligente Analyse- und Informa-

tionssysteme in Schloss Birlinghoven

(http://www.izb.fraunhofer.de/).

Ende 1999 wurde die Programmier-

sprache HTML, letztmalig in der Ver-

sion 4.01, vom W3C veröffentlicht.

Seither hat sich viel getan; Auf pro-

grammiertechnischer als auch auf

gestalterischer Seite konnten durch

Weiterentwicklungen wie (D)HTML,

(X)HTML und cross-over Implemen-

tierungen von XML in Flash usw. viele

Meilensteine erreicht werden.

Schon in der Abkürzung sieht man

die Nähe zur Web-Ursprache HTML.

(X)HTML wurde aus HTML zur ver-

besserten Darstellung von Webseiten

im Browser entwickelt. Dennoch wird

(X)HTML über XML (Extensible Mar-

kup Language engl. für erweiterbare

Auszeichnungssprache) definiert. Da-

bei ist nicht nur eine DTD (Dokument-

typdeklaration) wie bei HTML möglich

sondern es können aus XML mehrere

Familien gebildet werden. Somit steht

(X)HTML in gewisser Weise zwischen

HTML und XML.

(X)HTML ist in Kurzform also eine text-

basierte Sprache zur Darstellung von

Inhalten wie Texten, Bildern und Hy-

perlinks in Dokumenten. In modernen

Webseiten werden z. B. Gestaltung

(also die Darstellungsform) und Inhalt

(Texte, Bilder, Dokumente, Videos

etc.), durch die Nutzung sog. WCMS

(Web Content Management Systeme

engl. für „Internet Inhaltsverwaltungs-

system“), voneinander getrennt. Die

Daten, wie Texte und z. B. Informa-

tionen wo das Bild auf dem Server

gespeichert ist, werden zumeist in

Datenbanken (z. B. MySQL) abge-

legt. Das WCMS setzt dann aus dem

Theme (Dateiverzeichnis der entspre-

chenden Gestaltung), welches (X)HT-

ML-Dateien, mit dem Programmier-

code, sowie Grafiken und die sog.

CSS (Cascading Style Sheets engl.

für deklarative Stylesheet-Sprache für

strukturierte Dokumente) enthält, die

»Nothing can be perfect, but the Web could be a lot better. « (Tim Berners-Lee, Entwickler des Internets und Mitbegründer des W3C)

Seit 1994 besteht das Internet - offiziell zugänglich. Die Gründerväter

initiierten gleichzeitig auch eine Stelle zur Weiterentwicklung der Pro-

grammiersprache HTML, das sog. World Wide Web Konsortium - kurz

W3C. Dieses entwickelt Standards wie CSS, RSS oder X-HTML. Letz-

terer soll dafür Sorge tragen, dass nach diesem Standard gestaltete

Webseiten auf allen Internetbrowsern gleich dargestellt werden. Leider

sieht die Realität, 15 Jahre nach der Initialzündung des Internets,

erheblich anders aus. Und dies liegt nicht allein an Fehlentwicklungen

Seitens der Browserherstellter.

Was genau ist (X)HTML?

Die Realität im Jahr 2009

Gestaltung von W3C validen Webseiten - macht das einen Sinn?Ein Artikel von Maurice Reisch (Vorsitzender BQWG e.V.)

»Es ist gut, sich an Stan-dards wie beispielsweise des W3C zu halten«

(Lena Wagner, Google Deutschland)

Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.

BQWGAutor: Maurice ReischDatum: 22. Juli 2009Titel: Gestaltung von validen Webseiten - macht das einen Sinn?

Seite 1

Webseite zusammen.

Dennoch muss man heute, 9 Jahre

nach Veröffentlichung von (X)HTML

1.0, beim Besuch verschiedenster

Webseiten immer wieder feststellen,

dass deren Validität nicht gegeben

ist. Der Anspruch an Validität muss

selbstverständlich nicht an Peter‘s

Private Fussball Homepage, die z.

B. mit Frontpage selbst gestaltet ist,

gerichtet werden, jedoch sind auch

die meisten kommerziellen Seiten al-

les andere als valide. Bekanntestes

Beispiel hier: Amazon mit über 1.800

Fehlern!

Webstandards wurden vom W3C un-

ter anderem entwickelt um:

a) allen Nutzern des Internets den

größtmöglichen Nutzen zu brin-

gen.

b) Programmierern den Code zu

vereinfachen und somit die Pro-

duktionskosten zu senken.

c) Eine Entwicklung barrierefreier

Webseiten zu erleichtern.

d) Websites zu entwickeln, die mit

allen internetfähigen Geräten zu-

gänglich sind.

Als Validierung wird der Prozess be-

zeichnet, bei dem Dokumente (z. B.

(X)HTML oder CSS-Dateien) auf die

Einhaltung eines formalen Standards

überprüft werden. Ein Dokument das

so geprüft wurde und diese Prüfung

bestanden hat wird als valide be-

zeichnet.

Warum sollten Programmierer validen

Code erstellen?

- Valider Code wird von Webbrowsern

besser wiedergegeben als nicht-vali-

der.

- Valider Code wird schneller wieder-

gegeben (gerendert) als fehlerhafter

Code.

- Valider Code wird auf allen Brow-

sern gleich wiedergegeben (z. Zt. lei-

der noch eine Vision des W3C)

- Barrierefreiheit zu erleichtern

Aktuelle und zukünftige Browser wer-

den immer mehr standard-konform

entwickelt. Es wird daher immer wich-

tiger valides und standard-konformes

(X)HTML zu schreiben, damit ent-

wickelte Seiten auch zukunftssicher

sind und bleiben.

Weiterhin hält sich in der Internetge-

meinde auch der Mythos, dass valide

Webseiten z. B. von Google schnel-

ler in den Suchindex aufgenommen

werden und somit auch ein besseres

Ranking (engl. für Positionierung) er-

halten. Hierzu gibt es verschiedenste

Theorien und Tests die selbiges be-

und widerlegen wollen.

Lena Wagner, Communications & Pu-

blic Affairs Manager, Google Deutsch-

land GmbH:

»Es ist gut, sich an Standards wie

beispielsweise des W3C zu halten.

Dadurch werden Websites für eine

größere Gruppe von Nutzern besser

Der Validator prüft Webseiten auf (X)HTML-Validität des programmierten Codes.

Was ist Validität und war-um ist sie so wichtig? »Validität ist die Kirsche

auf der Spitze des SEO-Kuchens« (Jim Hobson, Webdesigner)



Seite 2

erreichbar, was wiederum dazu füh-

ren kann, dass diese Websites dann

weiter empfohlen werden. Empfohle-

ne Websites sind für uns ein Indikator

dafür, dass sie relevant sind, was sich

im Ranking bemerkbar machen kann.

Das heißt aber nicht, dass generell

alle Websites, die sich an W3C-Stan-

dards halten, automatisch ein besse-

res Ranking erreichen.«

Auf der anderen Seite testete z. B. der

Webdesigner Shaun Anderson (www.

hobo-web.co.uk), der sich ausgiebig

mit dem Thema SEO (Search Engine

Optimization engl. für Suchmaschi-

nen Optimierung) beschäftigt, die

Aufnahme ein und derselben Websei-

te in den Google Suchindex, jedoch

als valide und nicht valide Variationen

dieser. Ein entsprechender Test wur-

de auf seinem Blog (eine Art von In-

ternettagebuch) veröffentlicht.

So wurden zeitgleich bei Google an-

gemeldet:

a) Seite mit validem (X)HTML und

validem CSS

b) Seite mit invalidem (X)HTML

und validem CSS

c) Seite mit validem (X)HTML und

invalidem CSS

d) Seite mit invalidem (X)HTML

und invalidem CSS

Das Ergebnis scheint für Anderson

klar zu sein. Denn von den vier ange-

meldeten Webseiten nahm Google in

kürzester Zeit nur Variante A, also mit

vollständig validem Code, in den Su-

chindex auf. Dieser Fakt ist für Ander-

son und viele andere ein klarer Indi-

kator der diese Theorie unterstreicht.

Jim Hobson, selbst Webdesigner und

Verfechter der Wichtigkeit von validen

Webseiten, kommentiert, dass Validi-

tät nach seiner Meinung: »die Kirsche

auf der Spitze des SEO-Kuchens«

sei. Das Extrainvestment seiner Kun-

den in eine validierte Webseite führe

automatisch auch zu besseren Such-

ergebnissen bei Google & Co.

Dennoch spielen bei der Erstellung ei-

ner Seite oder eines Templates viele

Rahmenbedingungen und Faktoren

eine wichtige Rolle.

Zum einen werden immer wieder

Webseiten gestaltet, deren Grund-

struktur auf vorgefertigte und oft in-

valide Templates, zurückzuführen ist.

Diese werden dann entsprechend

der jeweiligen Kundenanforderun-

gen konfektioniert, was wiederum zu

erweiterter Invalidität führt und sich

entsprechend auch an Unterseiten

vererbt.

Gleiches kann auch der Fall sein,

wenn bis dahin valide Templates, teils

aus Unerfahrenheit, manipuliert wer-

den, woraus infolgedessen wieder-

um Konformitätsproblemen auftreten

können. Außerdem werden häufig

fremde Programmiercodes (sog.

Codeschnipsel) zur Aufwertung z. B.

in Form von Plug-ins (Erweiterungen)

eingefügt. Ein Beispiel: Wer versucht

ein vorhandenes YouTube Video in

seine Webseite einzubauen, nimmt

in der Regel den von YouTube ange-

botenen Code (siehe Abb. 01). Wider

besseren Wissens wird von YouTube

hier jedoch ein invalider Codeschnip-

Abb. 01 - Invalide Webseite, verursacht durch den Einbau des offiziellen YouTube Codes.

Abb. 02 - Valide Webseite, durch Modifikation des offiziellen YouTube Codes.

Kurz um: Der Köder (Code) muss dem Fisch (Google) schmecken

»Wer seinen Job versteht, für den ist valides HTML nicht schwerer als zu-sammengeschwurbeltes HTML. Alles nur eine Frage der Ordnung!« (Ernst Hopfner, Agentur Kundendienst 03 GmbH)



Seite 3

sel übergeben.

Die Verwendung einer kleinen Modifi-

kation des Codes bewirkt hier jedoch

wahre Wunder und führt zu einer ein-

wandfrei validen Webseite (Abb. 02).

Weiterhin gibt es unerfahrene oder

unprofessionelle Programmierer die

sich um die Einhaltung des Standards

nicht kümmern. Wie der Name (X)HT-

ML-Standard eigentlich schon sagt,

soll die Sprache gewissen Regeln ge-

horchen und einheitlich sein.

»Es ist leider traurige Wahrheit, dass

die meisten Webentwickler, sei aus

Unwissenheit oder Faulheit, sich nicht

darum bemühen einen validen Code

zu schreiben. Wir halten es persönlich

für wichtig und versuchen das auch

sehr strikt zu handhaben« so André

Kussmann, Webprogrammierer.

Auch bekannte Seiten wie z. B. Face-

book sind davor nicht gewapnet.

Dabei sollte dessen Einhaltung, wenn

es nach der Vorstellung des W3C

geht, eigentlich ein Leichtes sein, ist

der (X)HTML Standard doch nach

einer verständlichen Codestruktur

aufgebaut. Beginnt ein Befehl, so

wird dieser i. d. R. in zwei pfeilartigen

Klammern geschrieben, z. B. am Be-

ginn eines Dokumentes <html> um

dieses zu eröffnen. Dazwischen fol-

gen dann weitere Befehle wie z. B.

<head> oder <body>, um nur wenige

zu nennen. In den meisten Fällen wer-

den diese Befehle durch die erneute

Wiedergabe geschlossen, jedoch

unter Einbringung eines „/“. Dies hat

in der umgekehrten Reihenfolge ihrer

Eröffnung zu erfolgen.

Es kann auch hilfreich sein, entspre-

chende Befehle optisch durch Ein-

rückung (siehe Abb. 04) des darauf

folgenden Inhalts oder durch Anmer-

kung z. B.  bzw.

 hervorzuheben.

Wenn nun z. B. ein sog. DIV Container

mit dem Befehl <div> geöffnet wird,

z. B. um Inhalte an einer bestimmten

Stelle auf der Seite zu platzieren, so

muss dieser Befehl wieder geschlos-

sen werden - wenn man möchte dass

die Webseite wie gewünscht wieder-

gegeben wird. Es ist daher technisch

und logisch nur konsequent, dies so

umzusetzen.

Im Besonderen gilt es zu beachten,

dass auch selbstschließende Befehle

z. B. bei der Verwendung <img ... />

oder <meta ... /> korrekt geschlossen

werden. Ein kleiner Fehler hier bewirkt

oft einen „Rattenschwanz“ von Validi-

tätsfehlermeldungen (Abb. 05).

Es gibt mittlerweile hunderte verschie-

dene Browser wie z. B. CrazyBrow-

ser, Apple‘s Safari (für Mac und auch

für Windows), Opera, AOL Browser,

Camino, iCab sowie das neueste

Mitglied der Familie Google‘s Chro-

me Browser. Als Webentwickler hat

man natürlich nicht die Ressourcen

in jedem noch so kleinen Browser zu

prüfen ob die entwickelte Seite richtig

dargestellt wird. Das W3C entwickelt

Standards vor allem um den Brow-

serherstellern Vorgaben bzw. Hilfe-

stellung zu geben. Im Normalfall sollte

es also so sein, das jede zu 100% va-

lide Seite in allen gängigen Browsern

gleich interpretiert (wiedergegeben)

wird.

Da die Vorstellung des W3C aber

noch nicht zu 100% in die Realität

umgesetzt werden konnte, bieten

verschiedene Hersteller lizenzpflichti-

ge Lösungen an, wie z. B. Microsoft‘s

Abb. 03 - Invalide Startseite von Facebook Deutschland.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

</head>

<body>

<div id="header">

<div id="logo">

<a href="LINK" title="Logo Ihrer Seite">

<img src="LINK" alt="BESCHREIBUNG" />

</a>

</div> 

<div id="top-menu">

<ul>

<li><a href="LINK" title="BESCHREIBUNG">Menüpunkt 1</a></li>

<li><a href="LINK" title="BESCHREIBUNG">Menüpunkt 2</a></li>

</ul>

</div> 

</div> 

</body>

</html>

Abb. 04 - Beispiel eines validen Webseitenaufbaus



Seite 4

Expression Web SuperPreview oder

Adobe‘s BrowserLab, welches die

Browser Internet Explorer 6 (Windows

XP), Internet Explorer 7 (Windows XP),

Firefox 2 (Windows XP/OS X), Firefox

3 (Windows XP/OS X) sowie Safari 3

(OS X) emulieren kann.

Unter http://www.browsershots.org/

steht weiterhin eine kostenlose Versi-

on, mit diversen Auswahlmöglichkei-

ten zu Browser, Bildschirmauflösung,

Farbtiefe usw. zur Verfügung. Allein

zum Betriebsystem Linux können 30

verschiedene Browser bzw. Vörgän-

gerversionen gewählt werden. Nach-

teil dieser kostenfreien Version ist je-

doch, dass es min. 30 min dauert bis

der erste Screenshot angezeigt wird.

Wer dann noch vergißt zwischen-

zeitlich den Knopf „Verlängerung“ zu

drücken hat Pech und muss ggf. den

Auftrag erneut einreichen - weitere

Wartezeit min. 30 min.

Das W3C bietet auf seiner Webseite

den „Markup Validation Service“ an.

Mit diesem kann einfach und schnell

eine Webseite, im Internet oder auch

Offline, sowie CSS-Daten auf ihre Va-

lidität geprüft werden. Auch bietet z.

B. die Web Developer Toolbar (von

Chris Pederick) für Firefox (https://

addons.mozilla.org/) diese Funktion

bereits integriert an.

Faktoren die für die Verwendung des

W3C-Standards sprechen:

1) Gewährleistung der Browser-Kom-

patibilität

Wer W3C konformen Code program-

miert hat im Nachhinein bei der Brow-

seroptimierung viel weniger Arbeit.

Dies bedeutet, der Mehraufwand zum

Erlernen von (X)HTML wird bei einem

größeren Projekt dort wieder einge-

spart.

2) SEO

Mit WC3 konformen Code hat man im

Bereich der Suchmaschi-

nenoptimierung optimale

Möglichkeiten. Header Tags

lassen sich sinnvoll nutzen

und räumen somit z. B.

Google die Möglichkeit ein

diese zu lesen. Dies führt -

aller Warscheinlichkeit nach

- zu einer schnelleren Erfas-

sung in den Suchindex und

einer besseren Positionie-

rung (Page Rank).

3) Team-Arbeit

Die Verwendung von W3C-Stan-

dards, die von jedem Programmierer

einsehbar und nachvollziehbar sein

sollten, gewährleisten bessere Team-

Projektarbeit. Alle am Projekt betei-

ligten Personen wissen wie der (X)

HTML-Code am Ende auszusehen

hat. Dies erhöht die Les- und Wart-

barkeit des Codes beträchtlich. Auch

die Wiederverwendbarkeit des Codes

wird dadurch erheblich erhöht.

Schlussendlich kann man Feststellen,

die Stärke an validem HTML und (X)

HTML ist, dass es für Mensch und

Maschine gleichsam fehlerfrei lesbar

ist.Quellen: Wikipedia.org, W3.org., Shaun Anderson (www.hobo-web.co.uk), XING Gruppe: PHP-Entwick-lung, opencomp.de, plerzelwupp.de

Abb. 05 - Der Code ist der selbe wie Abb. 03. Jedoch wurde der Befehl <meta ...> am Ende nicht durch „/“ geschlossen. Diese kleine Unaufmerksam-keit verursachte allein in diesem kleinen Beispiel bereits 4 Fehler.

Abb. 06 - BrowserShots bietet eine Vielzahl von Auswahl-möglichkeiten - auch für verschiedene Systeme.

Warum also macht die Gestaltung von validen Webseiten Sinn?



Seite 5

Fachartikel: Macht die Gestaltung einer validen Webseite Sinn?

Documents

Transcript of Fachartikel: Macht die Gestaltung einer validen Webseite Sinn?