View
215
Download
0
Category
Preview:
DESCRIPTION
Seit 1994 besteht das Internet - offiziell zugänglich. Die Gründerväter initiierten gleichzeitig auch eine Stelle zur Weiterentwicklung der Programmiersprache HTML, das sog. World Wide Web Konsortium - kurz W3C. Dieses entwickelt Standards wie CSS, RSS oder X-HTML. Letzterer 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.
Citation preview
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)
Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.
BQWGAutor: Maurice ReischDatum: 22. Juli 2009Titel: Gestaltung von validen Webseiten - macht das einen Sinn?
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)
Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.
BQWGAutor: Maurice ReischDatum: 22. Juli 2009Titel: Gestaltung von validen Webseiten - macht das einen Sinn?
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. <!--- Anfang von ....--> bzw.
<!--- Ende von ....--> 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> <!-- logo schließen -->
<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> <!-- Top-menu schließen -->
</div> <!-- header schließen -->
</body>
</html>
Abb. 04 - Beispiel eines validen Webseitenaufbaus
Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.
BQWGAutor: Maurice ReischDatum: 22. Juli 2009Titel: Gestaltung von validen Webseiten - macht das einen Sinn?
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?
Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.
BQWGAutor: Maurice ReischDatum: 22. Juli 2009Titel: Gestaltung von validen Webseiten - macht das einen Sinn?
Seite 5
Recommended