webdesign - content-space.de · webdesign ist ein sehr weites thema. es umfasst html und css, die...
Post on 11-Oct-2019
5 Views
Preview:
TRANSCRIPT
Webdesign
oder
�Wie gestalte ich eine Website so, dass sieoptimal benutzbar ist?�
Jahresarbeit der 12. Klasse
Michael Hamann
Freie Waldorfschule Vaihingen/Enz10. Juni 2007
Inhaltsverzeichnis
1 Einleitung 4
1.1 Warum Webdesign? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Webdesign - ein weites Thema . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Aufbau der Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 Begri�e 6
2.1 Homepage vs. Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 W3C (World Wide Web Consortium) . . . . . . . . . . . . . . . . . . . . 6
2.4 Hypertext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.5 HTML (Hypertext Markup Language) . . . . . . . . . . . . . . . . . . . 7
2.6 XHTML (Extensible Hypertext Markup Language) . . . . . . . . . . . . 8
2.7 CSS (Cascading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . 8
2.8 Editoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.8.1 WYSIWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.8.2 Quelltexteditoren . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.9 CMS - Content Management Systeme . . . . . . . . . . . . . . . . . . . . 11
3 Geschichte des WWW,
des World Wide Webs 12
3.1 Die Anfänge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 Web 1.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.1 Die Dotcom-Blase . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3.1 Mitwirkung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3.2 Benutzerfreundlichkeit . . . . . . . . . . . . . . . . . . . . . . . . 22
3.3.3 Finanzierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.3.4 Gestaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2
3.3.5 Standardisierung . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.3.6 Weiterverwendbarkeit . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.3.7 Medienübergreifende Verfügbarkeit . . . . . . . . . . . . . . . . . 26
3.3.8 Privatsphäre und Datensicherheit . . . . . . . . . . . . . . . . . . 28
3.3.9 Zensur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.4 Web 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4 Meine Erfahrungen - der Praktische Teil meiner Arbeit 34
4.1 Mein Weg zum Webdesign . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.2 Projekttage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.3 Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.3.1 Schattenseele (http://www.schattenseele.de.tk) . . . . . . . . . . 36
4.3.2 Waldorf SV (http://www.waldorf-sv.de) . . . . . . . . . . . . . . 37
4.4 Meine Werkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5 Aspekte beim Gestalten einer Website 41
5.1 KISS - Keep it simple and straightforward . . . . . . . . . . . . . . . . . 41
5.2 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.3 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.4 Farben im Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.5 Gra�k im Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.6 Text im Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.7 Webstandards und semantischer Code . . . . . . . . . . . . . . . . . . . . 50
5.8 Barrierefreiheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.9 Browser-Kompatibilität . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
5.10 Sicherheit auf Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
6 Fazit 62
3
1 Einleitung
1.1 Warum Webdesign?
Schon seit Herbst 2004 beschäftige ich mich mit dem Gestalten von Websites. Am An-
fang begnügte ich mich damit, einfache Content Management Systeme (siehe Kapitel 2,
Begri�e) zu benutzen und nur wenig am Design zu verändern. Doch irgendwann im Laufe
des Sommers 2005 lernte ich HTML und auch CSS, die beiden Sprachen der Websites.
Auf der Suche nach einem Thema für meine Jahresarbeit, beschäftigte ich mich zu-
nächst mit freier Energie, musste jedoch bald feststellen, dass dies ein komplexes, wenig
durchsichtiges und sehr umstrittenes Thema ist. So entschied ich mich für Webdesign,
da es mich sehr interessiert und ich dabei noch viel Neues lernen konnte.
Das Internet und v.a. auch das World Wide Web ist in unserer heutigen Gesellschaft
allgegenwärtig, unser Alltag wäre ohne es teilweise überhaupt nicht mehr denkbar. Doch
welche Entwicklung steckt dahinter, welche Technologien, wo geht es hin, können auch
blinde Menschen an ihm teilhaben, was macht eine gute Website aus? Ich denke dies
sind Fragen, die nicht nur mich, sondern fast jeden interessieren dürften und auf die ich
in dieser Arbeit Antworten zu �nden versuche.
1.2 Webdesign - ein weites Thema
Webdesign ist ein sehr weites Thema. Es umfasst HTML und CSS, die Grundprinzipien
des Aufbaus von Websites, d.h. Navigationsschemata, Benutzbarkeit bzw. Barrierefrei-
heit u.a.. Auÿerdem kann man auch die ganzen Scriptsprachen (Programmiersprachen),
sowohl die Client-seitigen wie JavaScript als auch die Server-seitigen wie PHP, Perl,
Python, Ruby und Java mit einbeziehen.
In meiner Arbeit möchte ich mich v.a. auf den Bereich des Designs konzentrieren. �Wie
gestalte ich eine Website so, dass sie optimal benutzbar ist?� ist die Frage, die hinter der
ganzen Arbeit steht.
4
1.3 Aufbau der Arbeit
Als erstes möchte ich einige grundlegende Begri�e und Technologien erklären, die ich
ganz selbstverständlich verwende, die aber den meisten Menschen nicht geläu�g sind
oder über deren Bedeutung wenig bekannt ist. Es folgt dann ein Kapitel über die Ge-
schichte des Webdesigns, in dem ich auch auf das meiner Meinung nach sehr wichtige
Thema der Privatsphäre im Internet eingehen werde. Anschlieÿend werde ich verschie-
dene Websites vorstellen, die ich im praktischen Teil meiner Arbeit gestaltet habe. Im
eigentlichen Hauptteil werde ich verschiedene Aspekte des Webdesigns behandeln und
anhand von Beispielen zeigen, wie sie umgesetzt werden können. Mit einem Fazit und
den Literaturangaben endet meine Arbeit.
5
2 Begri�e
2.1 Homepage vs. Website
Im normalen Sprachgebrauch wird Homepage und Website oft gleichbedeutend verwen-
det. Eigentlich steht Homepage nur für die Startseite einer Webpräsenz (und nicht, wie
oft fälschlicherweise verwendet, für die gesamte Webpräsenz) und nur Website bezeichnet
die Gesamtheit aller Seiten einer Webpräsenz, die durch eine Navigation und Verknüp-
fungen zusammengefasst werden und meist auf einer Domain (Grundbestandteil einer
Internetadresse, der mit einem / endet) stehen (z.B. http://de.wikipedia.org). Web-
seite ist eine verbreitete, aber falsche Übersetzung von Website (�Seite� entspricht �page�,
�site� dagegen �Ort�, �Stelle� oder �Platz�). Webseite bezieht sich nur auf ein einzelnes,
im Web verfügbares Dokument.
2.2 Browser
Der Browser ist das Programm, mit dem Webseiten dargestellt werden. Bekannte Brow-
ser sind der Internet Explorer von Microsoft (derzeit am meisten verbreitet), Mozilla
Firefox (im Moment stark aufholend und auf manchen Seiten bereits der Browser Nr.
1), Opera und Safari. Moderne Browser können auch mehrere Seiten in einem Fenster
in sog. Tabs (=Reitern) darstellen (siehe Abbildung 2.1).
2.3 W3C (World Wide Web Consortium)
Das W3C wurde 1994 gegründet und kümmert sich seitdem um Standards im Internet.
Doch diese Standards sind leider nicht allgemein anerkannt, d.h. sie haben nur den
Status von Empfehlungen und sind nicht verp�ichtend. Trotzdem macht es Sinn, die
Standards einzuhalten. Suchmaschinen wie z.B. Google können korrekt gebaute Websites
(also sprich nach den Standards vom W3C valide Websites) besser indexieren (erfassen)
6
Abbildung 2.1: Der Browser Firefox mit mehreren Tabs
und damit auch besser in den Suchergebnissen berücksichtigen. Die Browser orientieren
sich mehr oder weniger an diesen Standards, es gibt aber leider so gut wie keinen Browser,
der sämtliche Standards direkt umsetzt und komplett unterstützt.
2.4 Hypertext
Unter Hypertext versteht man durch logische Verbindungen (sog. Verknüpfungen bzw.
Links) ohne feste Reihenfolge verknüpfte Informationen bzw. Texte. Die am weitesten
verbreitetste Realisierung eines Hypertext - Systems ist das World Wide Web.
2.5 HTML (Hypertext Markup Language)
HTML ist eine Auszeichnungssprache (und keine Programmiersprache im eigentlichen
Sinne), um Text (in der Regel für Websites) zu strukturieren. HTML ist - so emp�ehlt
es das W3C - zur Strukturierung von Inhalten, z.B. zur Kennzeichnung von Überschrif-
ten, Hervorhebungen oder Listen, gedacht (semantischer Code). Leider wurde und wird
HTML immer noch oft zum Design verwendet, hierfür ist jedoch CSS gedacht. Ein wich-
tiges Element sind auch die Links, auch Hyperlinks genannt, dies sind Verknüpfungen
zu anderen Dateien (meist ebenfalls im HTML-Format). Die erste Version von HTML
wurde am 3. November 1992 verö�entlicht. HTML wurde bis zum 24. Dezember 1999
7
vom W3C weiterentwickelt, diese Version 4.01 ist die letzte o�zielle Version von HTML,
nun löst der neuere Standard XHTML HTML mehr und mehr ab. HTML bzw. XHTML
wird durch weitere Techniken wie CSS für das Design und JavaScript für dynamische
Anwendungen, die direkt im Browser ausgeführt werden, ergänzt.
2.6 XHTML (Extensible Hypertext Markup
Language)
Abbildung 2.2: Ein einfaches
Beispiel von
einem Stück
HTML-Code
XHTML basiert auf XML (Extensible Markup
Language, übersetzt �erweiterbare Auszeichnungs-
Sprache�), folgt also den Regeln von XML, die
nur einen Bruchteil der HTML zugrunde liegen-
den Obersprache SGML beinhalten. Dies bedeutet,
dass XHTML strikter ist und es nicht mehr mög-
lich ist, Syntaxelemente wegzulassen. Dies erschwert
den Umstieg von HTML auf XHTML. XHTML ist
erweiterbar, es gibt spezielle Standards, die einge-
bunden werden können, z.B. für Mathe-Formeln oder
Vektorgra�ken. XHTML 1.0, die erste und einzi-
ge verbreitet unterstützte Version ist kompatibel zu
HTML und durch die Fehlertoleranz der Browser
wird XHTML meist auch von den Browsern, die kein
XHTML können, korrekt dargestellt. XHTML 1.1 ist
weniger kompatibel und wird auch z.B. vom Microsoft Internet Explorer noch nicht un-
terstützt. XHTML 2.0 wird überhaupt nicht mehr auf Kompatibilität ausgelegt sein. In
XHTML (nach Version 1.0) werden sämtliche Elemente, die für das Design zuständig
sind, entfernt. Das Design muss hier komplett mit CSS gemacht werden.
2.7 CSS (Cascading Style Sheets)
Mit CSS kann das Aussehen von Elementen in (X)HTML (und XML) verändert wer-
den. Auch Positionierung ist möglich, d.h. einzelne oder mehrere Elemente können an
einem bestimmten Ort auf der Seite platziert werden. Elemente in HTML können zu
Gruppen zusammengefasst werden (Klassen) oder einzelne, einmalige Namen bekom-
8
men (IDs). Diese können dann in einer bestimmten Weise dargestellt werden (Farbe,
Hintergrund, Schriftart, Innenabstand, Auÿenabstand, Umrandung etc.) oder positio-
niert werden (z.B. das Menü links an der Seite). CSS gibt es heute in der Version 1 und
2, CSS2.1 und CSS3 sind in der Entwicklung (Stand: Juni 2007).
Die erste Version von CSS wird fast vollständig von den gängigen Browsern unter-
stützt, Probleme gibt es hier eigentlich nur mit dem Internet Explorer 6 und einigen
wenigen Eigenschaften. CSS2 wird nur teilweise unterstützt. Es gibt einen Test namens
Acid2, der die Unterstützung für die vom W3C de�nierten Standards, v.a. CSS, tes-
tet. Er wird allerdings nur von sehr wenigen Browsern bestanden, der erste war Safari
im Dezember 2005. Aktuelle Versionen von Konqueror und Opera bestehen den Test
mittlerweile ebenfalls. Auch iCab und Prince XML, ein XML-nach-PDF-Konverter von
YesLogic, bestehen den Test. Mozilla (Firefox) arbeitet ebenfalls an der vollständigen
Unterstützung von CSS2, dies wird aber vermutlich noch eine Weile dauern. CSS2 wird
aber trotzdem von Mozilla Firefox sehr gut unterstützt, er wird u.a. von vielen Webde-
signern verwendet. Hier ist zu beachten, dass der Acid2 Test lediglich bestimmte Dinge
testen kann und es somit möglich ist, einen Browser speziell darauf zu optimieren, genau
diesen Test zu bestehen. Dies ist anscheinend bei Safari und auch bei Konqueror, der
teilweise denselben Code verwendet, der Fall gewesen. Dies erklärt auch, warum Mozilla
Firefox trotzdem so beliebt ist bei Webdesignern und eigentlich fast immer als erstes
mit Firefox getestet wird. Der Internet Explorer besteht auch in der aktuellen Version
7 den Acid2 - Test nicht und die CSS2-Unterstützung ist immer noch nicht vollständig.
Laut Microsoft [1] versucht Microsoft nicht, den Acid2 - Test zu bestehen, sondern die
Standards zu erfüllen. Der Internet Explorer besteht aber nicht nur den Acid2 - Test
nicht, sondern hat auch weiterhin erhebliche Probleme bei der korrekten Umsetzung von
CSS2.
2.8 Editoren
Editoren sind u.a. für das Erstellen und Bearbeiten von HTML- und CSS-Dateien ge-
eignet. Man muss grundsätzlich zwischen zwei Arten von Editoren unterscheiden:
2.8.1 WYSIWYG
WYSIWYG ist eine Abkürzung für �What You See Is What You Get� (�Was du siehst,
ist [das], was du bekommst.�). Der bekannteste WYSIWYG-Editor ist Microsoft Word.
9
Das Prinzip der WYSIWYG - Editoren ist es, dass man den Text sofort so angezeigt be-
kommt, wie er später einmal dargestellt werden wird. Vom eigentlichen Code bekommt
man meist wenig oder gar nichts zu sehen. Das Problem der WYSIWYG-Editoren ist,
dass sie meist auf gestalterische Elemente begrenzt sind, d.h. eine logische und seman-
tische Auszeichnung kaum möglich ist und der erzeugte Code meist als sehr unsauber
(nicht optimiert) eingestuft wird. Die meisten professionellen Webdesigner verwenden
deshalb WYSIWYG-Editoren höchstens, um ein Grundgerüst zu erstellen. Auch eine
Trennung von Design und Inhalt lässt sich mit WYSIWYG-Editoren kaum erreichen.
2.8.2 Quelltexteditoren
Abbildung 2.3: Der komfortable Quelltexteditor Quanta+
In Quelltexteditoren wird direkt der Quelltext bearbeitet. Um zu sehen, wie die Web-
site einmal aussehen soll, muss die Datei erst gespeichert werden und dann mit einem
Webbrowser betrachtet werden. Der Vorteil von Quelltexteditoren ist die maximale Kon-
trolle über den Code und damit über das Ergebnis. Dieser wird dadurch im Idealfall sehr
klar und sauber strukturiert. Auch eine klare Trennung von Inhalt und Design ist damit
zu erreichen. In guten Editoren wird der Code farbig strukturiert, so dass z.B. HTML-
Elemente klar vom Text unterschieden werden können.
Gute Editoren bieten darüber hinaus Hilfen zum Strukturieren des Textes durch Ein-
rückungen und automatische Vervollständigungen von Elementen (siehe Abb. 2.3) oder
automatisch schlieÿende Markierungen (beispielsweise dass das letzte Element beim Tip-
pen des Ersten eingefügt wird: �<h1>Überschrift</h1>�). Dies erleichtert im Idealfall
die Arbeit. Auch Werkzeuglisten für die Auswahl von Elementen oder Funktionen, die
10
eine HTML-Grundstruktur erzeugen, ergänzen solche Editoren. Ein fast unumgängliches
Feature für CSS-Editoren ist ein ColorChooser, eine Funktion, um eine Farbe auszuwäh-
len und ihre Entsprechung im Code einzufügen.
2.9 CMS - Content Management Systeme
Ein Content Management System kann man sich als mehr oder weniger kleines Pro-
gramm vorstellen, das z.B. in PHP geschrieben ist und auf dem Webserver läuft. Typi-
sche Funktionen eines solchen CMS sind die Erstellung, Verwaltung und Präsentation
von Inhalten über ein Web-Interface. So können meist auch Benutzer mit wenig oder gar
keinem technischem Vorwissen Inhalte eintragen, die dann mit Menüs und Übersichten
aufbereitet werden. Teilweise gibt es zahlreiche Einstellungsmöglichkeiten und Erweite-
rungen, z.B. für Gästebücher. Das Aussehen (Design) ist meist mit Hilfe von Templates
(Vorlagen) gestaltbar.
11
3 Geschichte des WWW,
des World Wide Webs
3.1 Die Anfänge
Abbildung 3.1: Tim Berners-Lee
[23]
Das Web, wie wir es heute benutzen, nahm seinen
Anfang im Jahre 1989 im CERN (die Europäische
Organisation für Kernforschung in Genf (Schweiz)).
Tim Berners-Lee(siehe Abb. 3.1) entwickelte dort
HTML sowie die dazugehörige Technologie (Server
zum Bereitstellen der Dokumente, Browser zum An-
schauen und Bearbeiten der Seiten), um Forschungs-
ergebnisse auszutauschen und zu ver�echten. Im
CERN stieÿ Tim Berners-Lee auf wenig Echo, er be-
kam nie ein o�zielles Projekt genehmigt und seine
Programme lieÿ er teilweise von Praktikanten entwi-
ckeln. Er fand im CERN allerdings einen weiteren Menschen, Robert Cailliau, der von
seiner Idee begeistert war und ihn unterstützte.
Auch international fand Tim Berners-Lee mit seinem WWW zunächst wenig Aner-
kennung, andere Hypertext-Systeme mit wesentlich umfangreicheren Darstellungsmög-
lichkeiten waren damals angesagt, die ungeheuren Möglichkeiten des WWW erkannten
damals nur Wenige. Das WWW, wie Tim Berners-Lee seine neue Technik nannte, baut
auf freien Protokollen auf, somit gibt es keine Lizenzbeschränkungen und Software rund
um das Web kann sehr einfach entwickelt werden. Die von ihm entwickelten Standards
und grundlegende Implementierungen dieser Standards stellte Tim Berners-Lee im sich
nun ab etwa 1991 langsam entwickelnden WWW frei zur Verfügung und 1993 gab es
dann auch ein o�zielles Schriftstück des CERN, dass die WWW-Technologie frei ge-
nutzt werden kann. Die ersten Websites, die auÿerhalb des CERN entstanden, waren
von Universitäten.
12
Für die Weiterentwicklung gründete Tim Berners-Lee zusammen mit Mitstreitern das
World Wide Web Consortium (W3C), das auf der europäischen Seite vom Institut Na-
tional de Recherche en Informatique (INRIA) und auf der amerikanischen Seite vom
Massachusetts Institute of Technology (MIT) getragen wurde und dem schnell weitere
Unternehmen und Institutionen beitraten.
Das Web wurde als eine Publikationsplattform gegründet mit dem Ziel, dass man
leicht Inhalte lesen und auch eigene Inhalte erstellen kann. Das WWW fand anfangs v.a.
im universitären Umfeld Verbreitung, da es auÿerhalb kaum Zugangsmöglichkeiten zum
Internet gab. So konnten Studenten schnell anfangen, eigene Websites für andere Inter-
essierte zu erstellen. Damals gab es auch noch recht wenig Möglichkeiten, die Websites
zu gestalten.
Mitte der 90er fand die Kommerzialisierung des Internets statt und immer mehr Men-
schen erkundeten mit Hilfe von Modems die neuen Welten des Webs.
Die weitere Entwicklung des Webs kann man in zwei Teile einteilen, die sich beide
durch einen Boom in der IT-Wirtschaft auszeichnen, wobei der zweite noch anhält. Diese
Unterteilung ist nicht unumstritten und tri�t sicher nicht auf alle Seiten im Internet zu,
doch betrachtet man ihre Extreme, lässt sich doch ein deutlicher Unterschied feststellen:
Web 1.0 und Web 2.0.
3.2 Web 1.0
In der ersten Phase, die auch den Überbegri� �Web1.0� trägt, waren v.a. zwei Browser
dominant: Netscape und Microsoft Internet Explorer. Die beiden dahinter stehenden
Firmen erfanden immer wieder eigene Erweiterungen für HTML, die Inkompatibilitäten
zwischen den Browsern zur Folge hatten. Teure Werbeagenturen stellten für die Firmen
Websites ins Internet, die im Prinzip einfach Kataloge waren. Oft waren die Websites
auf einen bestimmten Browser, meist Microsoft Internet Explorer, optimiert und die
Benutzer wurden teilweise regelrecht gezwungen, diesen zu verwenden (anderenfalls war
die Seite z.B. überhaupt nicht anzeigbar).
Das W3C verö�entlichte immer wieder neue Versionen von HTML. Neu gewonnene
Möglichkeiten wie Farben, Tabellen, animierte Bilder oder Adobe Flash (früher Macro-
media Flash, ein proprietäres Format für Animationen, Texte, Audio und Videoinhalte,
seit 1997) wurden schnell in die Websites eingebaut. Typisch sind auch die teilweise nicht
überspringbaren Intros am Anfang von Websites: Oft ein Flash-Film, der sehr lange lud,
dann ablief, aber nur selten Informationen präsentierte.
13
Die meisten Seiten in dieser Zeit waren erst einmal statisch und wurden oft, nachdem
sie einmal angelegt waren, lange Zeit nicht mehr verändert. Die Zahl der Menschen,
die so aktiv publizieren konnten, war relativ gering, da es zum einen recht teuer war,
Speicherplatz und eine Domain (Adresse) zu bekommen und zum anderen es auch nicht
gerade einfach war, eine ansprechende Website zu erstellen. Zu den statischen Seiten
gesellten sich später Gästebücher, in denen sich Besucher eintragen können, die aber v.a.
auch zu Diskussionen genutzt werden, und Foren, in denen Benutzer Beiträge erstellen
und andere auf sie antworten können.
Am Anfang wurde u.a. von Yahoo! versucht, das Web in einem Katalog zu erfassen.
Dies scheiterte jedoch, da das Web extrem schnell wächst und es kaum möglich ist, alle
Seiten manuell zu erfassen. Die Lösung des Problems war die der Suchmaschine. Am
Anfang stand AltaVista, doch sie sprang auf den falschen Trend auf: Portale waren in
Mode gekommen, überladene Startseiten, auf denen News, Angebote etc. präsentiert
wurden. Google dagegen, damals ein Newcomer, hatte von Anfang an eine sehr einfache
Ober�äche, die sich bis heute kaum geändert hat. Was bei Google auch neu war und
immer noch so ist: Es werden keine speziellen Groÿrechner verwendet, sondern ganz
gewöhnliche PCs, die vernetzt sind (ein Computercluster). Fällt einer aus, kann sofort
ein anderer die Aufgabe übernehmen. Dadurch ist das System sehr ausfallsicher. Durch
die schlichte Gestaltung und den guten Suchalgorithmus, d.h. die Art und Weise, wie
bestimmt wird, welche Seite an welcher Stelle bei den Suchergebnissen steht, ist Google
heute die Suchmaschine Nummer eins. Die Genialität von Google liegt darin, dass Google
hierbei Links auf eine Website als Empfehlung betrachtet und diese bei der Sortierung
der Suchergebnisse berücksichtigt.
Es gab zwar durch das W3C verö�entlichte Standards, doch diese konnten auf Grund
mangelnder Unterstützung in gängigen Browsern wie Microsoft Internet Explorer kaum
angewendet werden. Erst als sich Mozilla Firefox, ein freier Browser, der Webstandards
sehr gut unterstützt, immer mehr verbreitete, wurden Richtlinien wie die Trennung von
Inhalt und Layout langsam umgesetzt. Ein Prozess, der stetig anhält, aber noch lange
nicht abgeschlossen ist.
Während diese neuen, standardkonformen Websites zuerst recht schlicht waren, ent-
wickelten sich u.a. unter dem Ein�uss der Website css Zen Garden[25] (siehe Abb. 3.2)
immer aufwändigere Seiten. Dort können Designer Designs verö�entlichen, die alle auf
demselben vorgegebenen HTML-Code beruhen. Nur durch das Ändern des CSS-Codes,
der für das Design zuständig ist, werden kunstvolle und verspielte Websites gescha�en.
Es gibt auch immer mehr Benutzerinteraktion, ein gutes Beispiel ist der Onlineshop
14
Abbildung 3.2: Ein Design des css Zen Garden[25]
15
Amazon[27]. Dort bekommt der Benutzer nach dem Anmelden Produkte angezeigt, die
ihm auf Grund seiner vorherigen Einkäufe gefallen könnten. Dies ist der Anfang einer
neuen Generation von Websites und wird deshalb teilweise auch als Web 1.5 bezeichnet.
3.2.1 Die Dotcom-Blase
Unter Dotcom versteht man Unternehmen, die in der IT-Industrie tätig sind (.com ist
eine internationale Endung von Domains für Unternehmen), und diese sprossen nach
1995 wie Pilze aus dem Boden. Rasch fanden sich Investoren und die Unternehmen gin-
gen an die Börse, an der viele Anleger auf den neuen Boom aufspringen wollten. Dies
führte dazu, dass die Unternehmen extrem überbewertet wurden, sie aber dadurch auch
viel Kapital zur Verfügung hatten. Mit diesem Kapital kauften sie oft marode, Ver-
lust machende Unternehmen auf, um weiter zu expandieren. Unternehmen, die Gewinn
machten, waren zu dieser Zeit unbezahlbar oder selbst dabei, andere Unternehmen zu
übernehmen. Natürlich brachte dies für diese Firmen keinen Gewinn, doch darauf ach-
teten die Anleger nicht. Im März 2000 platzte diese �Dotcom - Blase� dann, als nach
dem Nachlassen des Kurses der Aktien sehr viele Anlieger innerhalb kürzester Zeit ihre
Aktien verkauften und die Kurse dadurch in den �freien Fall� gerieten.
Die Unternehmen gingen deshalb oft in die Insolvenz, da sie keinen Gewinn machten
und nur durch die Börse existieren konnten.
3.3 Web 2.0
Der Begri� �Web 2.0� entstand, als Dale Dougherty (O'Reilly-Verlag) und Craig Cline
(MediaLive) einen Titel für eine Konferenzreihe suchten. So entstand die erste Web 2.0
- Konferenz im Oktober 2004, die seitdem jährlich im Herbst statt�ndet.
Doch der Begri� �Web 2.0� ist sehr schwammig. Es ist völlig unde�niert, was man
darunter versteht. Es gibt lediglich einige Aspekte, Prinzipien und Erkennungsmerkmale.
Der Begri� �Web 2.0� ist vermutlich vielen Menschen nicht bekannt, doch trotzdem
nutzen sehr viele Menschen bereits Websites wie Wikipedia, die in die Kategorie �Web
2.0� fallen.
Anhand der Mindmap in Abb. 3.3 möchte ich nun auf die wesentlichen Merkmale des
Web 2.0 eingehen.
16
Abbildung 3.3: Eine Mindmap mit den Schlagworten des Web2.0 [21]
3.3.1 Mitwirkung
Eine ganz zentrale Rolle auf einer Seite, die zum Web 2.0 gehört, spielen die Benutzer.
Ihre Mitwirkung und die Informationen, die sie bereitstellen, machen meist den Hauptin-
halt der Seite aus. Und zwar nicht nur einige wenige Benutzer, sondern hunderte, tausen-
de. . . Sie empfehlen bestimmte Inhalte, kategorisieren den Inhalt mit Schlagworten (sog.
Tags, frei wählbare Stichwörter) und bestimmen so die Beachtung, die ein bestimmter
Inhalt - sei es der Link zu einer Seite oder ein guter Artikel - erhält. Ein gutes Beispiel
für eine Seite ist del.icio.us[39] (siehe Abb. 3.4), ein Dienst, bei dem man sich (kostenlos)
anmelden kann und dann seine Bookmarks (Lesezeichen), also Internetadressen, die man
sich merken möchte, speichern kann. Bei diesem Dienst hat man so einen ganz persön-
lichen Nutzen: Man hat seine Bookmarks überall verfügbar und kann sie bequem mit
Stichworten, sog. Tags, sortieren. Aber es gibt auch einen Gemeinschaftsaspekt: Book-
marks, die im Moment besonders populär sind, werden auf der Startseite angezeigt, man
kann sich die populärsten Seiten zu einem Stichwort anzeigen lassen usw.. Man kann sich
auch die ö�entlichen (es gibt auch private) Bookmarks mehrerer Benutzer in sein �Netz-
werk� holen und so immer sehen, welche Seiten sie gerade abgespeichert haben. Auch
bestimmte Stichwörter kann man beobachten. Diese Kombination aus einem ganz per-
sönlichem Nutzen und einem Nutzen für die Gemeinschaft ist ganz typisch für eine Web
2.0 - Seite.
17
Abbildung 3.4: Die Startseite von del.icio.us mit den im Moment populärsten
Adressen[39]
18
Natürlich wird auch von den Benutzern sehr viel Inhalt selbst produziert. Mit nur
wenig Hintergrundwissen und vollkommen kostenlos kann man sich auf vielen Seiten
ein sogenanntes Blog oder auch Weblog anlegen (Verbindung aus den Worten Web und
Logbuch) - eine Seite, auf der einer oder auch mehrere (Gruppenblog) Artikel in einer
chronologischen Reihenfolge verö�entlichen. Diese Artikel sind meist sehr subjektiv und
können persönliche Erlebnisse, aktuelle Berichte oder auch Stellungnahmen zu Neuigkei-
ten oder der Politik enthalten. Diese Blogs scha�en eine Gegenö�entlichkeit zur normalen
Presse und sind eine Gegenbewegung zur Monopolisierung des herkömmlichen Presse-
marktes oder kritisieren die herkömmliche Presse explizit. Dies ist z.B. im BILDBlog
der Fall[41]. Hier werden die Artikel der Bild-Zeitung kritisch unter die Lupe genom-
men. Blogs spielen mittlerweile auch im Wahlkampf, v.a. in den USA, eine groÿe Rolle.
Zum einen werden über Blogs von den Wählern Diskussionen ausgetragen, interessante
Fakten aufgedeckt, zum anderen aber bloggen die Politiker mittlerweile selbst.
Abbildung 3.5: Das ausgezeichnete Blog netzpolitik.org[40]
Alleine wären solche Blogs natürlich sehr isoliert, deshalb baut sich fast jeder Nutzer
auch eine Art �soziales Netz�, indem er zum einen mit seinen Blogeinträgen auf andere
19
Blogeinträge verweist und zum anderen auch eine sog. Blogroll p�egt, d.h. eine Liste der
Blogs, die er liest, die er mag und die er in einer Liste (meist auf jeder Seite seines Blogs
zu �nden) mit einem Link einträgt. Es gibt auch Seiten, sog. Planets, die über spezielle
Datenformate, die eigentlich alle Blogs bereitstellen (dazu in Kapitel 3.3.7 auf Seite 26
mehr), Artikel von bestimmten Blogs zu bestimmten Themen, aus einem bestimmten
Ort oder einfach nur Blogs, die der Autor dieser Seite mag, auf einer Seite darstellen.
Will man gleich alle bzw. zumindest die allermeisten Blogs beobachten bzw. darin
suchen, bietet sich Technorati[43] an. Fast alle Blogs �pingen� diese Seite an, d.h. sie
teilen dieser Seite sozusagen mit, dass sie einen neuen Artikel haben und Technorati
nimmt diesen dann in den Index auf. Technorati kann auch mitteilen, wie viele Links
aus anderen Blogs es zu einem Blog gibt oder mit anderen Worten, wie relevant ein
bestimmtes Blog ist. Alle Blogs zusammen bilden die �Blogosphäre�.
Neben den Blogs in Textform gibt es auch noch Audio- und Videopodcasts, d.h. Ar-
tikel bzw. Beiträge in Audio- bzw. Videoform, dies ist auch ein neues Phänomen im
Web 2.0. Die Idee ist, dass man sich so aus mehreren Quellen sozusagen sein eigenes
Radioprogramm zusammenstellen kann, dass man auch unterwegs z.B. mit dem iPod
hören kann (daher der Name).
Das vermutlich bekannteste soziale Netzwerk im Web 2.0 ist MySpace[45]. Hier sind
ca. 160 Millionen Mitglieder angemeldet (Stand März 2007). Die Seite ist allerdings eher
auf den nordamerikanischen Raum spezialisiert. In den USA nutzen über 50% der 12
bis 17 jährigen Jugendlichen derartige soziale Netzwerke im Internet. Bei MySpace kann
man ein Pro�l mit Informationen über sich erstellen, man hat auch ein Blog zur Verfü-
gung und kann Musik und Videos verö�entlichen und hören. Letzteres ist v.a. deshalb
interessant, weil auf MySpace auch viele Bands präsent sind, Neuigkeiten mitteilen und
auch Ausschnitte ihrer Musik zum Anhören zur Verfügung stellen. Ein weiteres sehr
wichtiges Element sind Freundschaften, d.h. jeder Benutzer kann sagen, wer ein Freund
von ihm ist, und so ein Netzwerk aufbauen. Viele Jugendliche kommunizieren auf die-
se Weise mit ihren Altersgenossen. Eine derartige Gemeinschaft nennt man neudeutsch
auch Community.
MySpace geriet allerdings auch schon massiv in die Kritik, weil immer wieder Benutzer
gelöscht werden, bei denen es keine stichhaltigen Gründe wie Missbrauch der Website
gibt und vermutlich meist weltanschauliche Gründe ausschlaggebend sind, oft sind ho-
mosexuelle Musiker betro�en[46].
Für objektive Inhalte bietet sich die Zusammenarbeit vieler Benutzer an - und genau
20
das machen Wikis. �Wiki� kommt von dem hawaiischen Wort �wikiwiki�, das auf deutsch
�schnell� heiÿt. Ein Wiki ist eine Website, deren Inhalt meist von jedem geändert werden
kann. Die Inhalte sind dabei mit einer einfachen Markupsprache formatiert (wesentlich
einfacher als HTML) und Verlinkungen zwischen verschiedenen Seiten sind ebenfalls sehr
einfach möglich. Meist kann man ältere Versionen einer Seite betrachten und auch wie-
derherstellen, oft kann man sich auch die Unterschiede zwischen zwei Versionen anzeigen
lassen. Das derzeit weltweit gröÿte und auch bekannteste Wiki ist die Wikipedia[35], eine
frei verfügbare und editierbare Enzyklopädie. Sie hat durch die Beiträge unzähliger Be-
nutzer in nur 6 Jahren ein mit kommerziellen Enzyklopädien konkurrenzfähiges Wissen
gesammelt, das herkömmlichen Enzyklopädien in vielen Bereichen sogar weit überlegen
ist und es gibt nur wenige Bereiche, die in der Wikipedia schlecht vertreten sind. Ein we-
sentlicher Aspekt ist hier auch die Aktualität der Artikel, Nachrichten wie die Ernennung
des Papstes werden in der Regel innerhalb weniger Minuten in die Wikipedia eingear-
beitet (daher auch das Wort �Wiki�). Doch natürlich ist auch bei der Mitarbeit vieler
keine absolute Objektivität möglich und v.a. auch die Verlässlichkeit der Informationen
ist nicht immer gewährleistet.
Abbildung 3.6: Die Startseite der Wikipedia[35]
21
3.3.2 Benutzerfreundlichkeit
Doch wodurch war es möglich, dass plötzlich so viele Menschen sich auf diesen Seiten
zusammenfanden und an ihnen Gefallen fanden?
Im Prinzip v.a. durch die Einfachheit dieser Seiten. Durch eine beständige Weiter-
entwicklung hat das Web nun die Möglichkeiten zur Verfügung, die nötig sind, um eine
komplett nutzerzentrierte und einfache Webanwendung zu erstellen. Viele der heute ver-
wendeten Techniken sind alt. Doch früher waren sie durch die mangelnde Unterstützung
in den Browsern kaum nutzbar, während sie heute voll zum Einsatz kommen können.
Heute kann man in eine Website einen Texteditor einbetten, der ähnliche Funktionen
bietet wie Microsoft Word (siehe Abb. 3.7).
Abbildung 3.7: Ein komfortabler Editor auf
Waldorf SV.de
Möchte man eine Website in del.icio.us
hinzufügen, klickt man auf einen Button
in seinem Browser, den ein entsprechen-
des Plugin von del.icio.us bereitstellt, das
mit wenigen Klicks installiert ist. Dann
ö�net sich ein kleines Fenster, in dem
man noch eine Beschreibung zu der Seite
eintippen und Stichworte eintragen kann.
Dabei zeigt del.icio.us auch die Stichwor-
te an, die andere Benutzer für diese Sei-
te verwendet haben, und man kann diese
bequem mit einem Klick auf eines dieser
Stichwörter hinzufügen.
Oder möchte man ein eigenes Blog füh-
ren, meldet man sich einfach bei einem der vielen Anbieter mit E-Mail-Adresse und einem
Passwort an, gibt seinem Blog einen Namen und gegebenfalls eine Beschreibung, wählt
ein Design aus und schon kann man seinen ersten Blog-Eintrag erstellen. Besondere
Kenntnisse, z.B. von HTML, sind dazu in der Regel nicht erforderlich.
So kann man sehr einfach seine eigene Website mit seinen eigenen Inhalten erstellen.
Dies ist somit viel leichter als früher, als man noch ein umfangreiches technisches Wis-
sen brauchte, spezielle Software nötig war und eine Website viel Geld kostete. Natürlich
kann man sich auch heute noch eine eigene Adresse mieten, dazu Speicherplatz und alles
selbst schreiben bzw. eine hierzu vorhandene Software benutzen - hier hat man dann
natürlich die volle Freiheit was die Funktionen der Seite und deren Gestaltung angeht.
22
Auch neu im Web 2.0 ist, dass man, um neuen Inhalt angezeigt zu bekommen, nicht
mehr unbedingt eine neue Seite laden muss. Eine spezielle Technik namens �Ajax� er-
möglicht es mit Hilfe von JavaScript im Hintergrund neue Daten zu laden. Dadurch sind
im Internet Anwendungen wie z.B. ein Mailprogramm möglich, die sich fast so bedienen
lassen wie ein herkömmliches Mail-Programm.
Dazu kommt, dass viele Seiten sog. Widgets anbieten, d.h. kleine Code-Stücke, die man
in die eigene Seite einfügen kann und die dann z.B. die neuesten Bookmarks anzeigen.
Auch Terminkalender kann man mittlerweile online führen und z.B. die nächsten als
ö�entlich gekennzeichneten Termine in seinem Blog anzeigen.
3.3.3 Finanzierung
Ganz besonders am Web 2.0 ist auch, dass die heute meist riesigen Websites oft ganz
klein als Hobby-Projekte einiger engagierter Programmierer angefangen haben. In sog.
�Garagen�rmen� haben diese Startups dann nicht durch riesige Werbung und Investoren
an Bedeutung gewonnen, sondern sind mit wenig Geld und durch �Mundpropraganda�
(z.B. in Blogs) bekannt geworden. Später wurden viele dieser Startups dann aber von
groÿen Investoren übernommen, oft Google oder Yahoo!. Auch wenn manche der groÿen
Portale noch andere Namen haben, viele gehören sehr wenigen sehr groÿen Unternehmen
(auf die hiermit zusammenhängenden Probleme werde ich in Kapitel 3.3.9 auf Seite 29
noch näher eingehen).
Dieser Gründerboom hält immer noch an, immer noch entstehen neue Web 2.0 -
Anwendungen, immer noch setzen sich Menschen hin und programmieren eine neue An-
wendung in der Ho�nung, mit ihr einmal Geld verdienen zu können. Dies wird dadurch
vereinfacht, dass es bereits sehr viele Anleitungen, Hilfestellungen und auch sog. Fra-
meworks gibt, die bereits vorgefertigte Funktionen bereitstellen und man somit nicht
das Rad neu er�nden muss, sondern sehr schnell zu einer funktionierenden Anwendung
gelangt.
Sehr verbreitet, um mit seiner mehr oder weniger groÿen Anwendung Geld zu verdie-
nen, sind auch Google AdWords, d.h. Anzeigen von Google. Das Besondere an ihnen
ist, dass sie in Textform sind, d.h. nicht besonders stören und auÿerdem die Inhalte der
Seite ergänzen, indem sie themenspezi�sche Werbung einblenden, beispielsweise Reise-
angebote bei Texten über eine Reise.
Durch diese vielen Neugründungen gibt es im Web 2.0 auch viel Konkurrenz. Es
23
gibt z.B. nicht nur del.icio.us, sondern auch einige internationale und etliche deutsche
Konkurrenten. Diese Konkurrenz belebt die Entwicklung, da jede Firma möglichst viele
Benutzer anlocken möchte und deshalb versucht, die besten Funktionen, das beste Design
und das am besten benutzbare Produkt anzubieten.
Eine weitere Neuerung ist, dass Speicherplatz mittlerweile sehr billig ist und es so-
mit z.B. für Foto-Plattformen wie Flickr[49] möglich ist, kostenlos anzubieten, dass man
10 MB Bilder pro Monat hochladen kann und diese dann online verfügbar sind. Texte
kann man heute praktisch in unlimitierter Menge kostenlos verö�entlichen. Dies führt
zu einer riesigen Flut von Informationen, die vorher nicht vorhanden waren. Auch Vi-
deos können bei der mittlerweile zu Google gehörenden und v.a. bei Jugendlichen sehr
beliebten Video-Plattform YouTube[50] kostenlos in unbegrenzter Menge hochgeladen
(und auch angeschaut) werden. Das Interessante hierbei ist, dass nicht nur die besten In-
halte sehr oft abgerufen werden, sondern auch eigentlich uninteressante Inhalte für sehr
viele Menschen interessant werden. Dieses Phänomen wurde 2004 von Chris Anderson
in eine Markttheorie namens �Long Tail� gegossen. Ein weiteres Beispiel �ndet sich beim
Onlineshop Amazon: hier machen die Bücher, die nicht zu den 130.000 meistverkauften
Büchern zählen, über 50% des Umsatzes aus.
Trotz der Neuerungen und der solideren Basis bei den meisten Projekten im Web 2.0
wird diskutiert, ob es eine neue Dotcom - Blase gibt und ob der derzeit herrschende
Hype ein ähnlich jähes Ende haben wird wie der erste.
3.3.4 Gestaltung
Während man bei typischen Web 1.0 Websites häu�g blinkende oder sich drehende Gra-
�ken �ndet, um auf einen E-Mailadresslink hinzuweisen, werden bei Web 2.0 - Websites
Animationen eher für funktionale Dinge verwendet. Das Design im Web 2.0 verwendet
oft lebendige Farben (nicht nur Blau, sondern auch Grün, sogar Pink). Auch sind die
Websites meist modular aufgebaut, Inhalt und Design sind getrennt und z.B. das Menü
könnte ganz einfach auch auf die andere Seite verschoben werden, was bei einer typischen
Web 1.0 - Website eventuell ein gröÿeres Problem werden würde.
3.3.5 Standardisierung
Während im Web 1.0 viele Websites so geschrieben waren, dass sie in einem Browser
funktionieren (meist Microsoft Internet Explorer), halten sich viele Web 2.0 - Websi-
tes mehr an die Standards des W3C bzw. versuchen es zumindest. Auch die Trennung
24
von Form und Inhalt wird so oft in die Praxis umgesetzt. Das Thema Barrierefreiheit,
d.h. inwieweit die Website auch für blinde Menschen oder Menschen mit eingeschränk-
ter Sehfähigkeit oder Motorik benutzbar ist, gewinnt ebenfalls an Bedeutung und wird
zumindest teilweise beachtet, wenn auch sicherlich nicht überall (weitere Informationen
zu diesem Thema gibt es im Kapitel 5.8 ab Seite 52 in dieser Arbeit).
Abbildung 3.8: Ein zum Spaÿ erstellter
Logo-Erzeuger im typischen
Web 2.0 - Aussehen[51]
Zusätzlich dazu kann der Inhalt oftmals
auch von Computern ausgelesen werden,
da die Dokumente korrekt strukturiert
sind, HTML-Tags ihrem Inhalt nach ge-
setzt sind (Semantik) und über zusätzli-
che Informationen, die unsichtbar einge-
bettet sind, auch weitere Informationen
enthalten sein können, z.B. in welcher Be-
ziehung man zu einer Person steht, deren
Seite man verlinkt (z.B. Freund, Bekann-
ter, Arbeitskollege usw.). Dies ist in dem
Mikroformat FOAF (Friend Of A Friend)
de�niert. Dadurch können weitere Infor-
mationen ausgelesen und zu neuen Dar-
stellungsformen verarbeitet werden.
Derartig sauber strukturierte Doku-
mente können natürlich auch besser von
Suchmaschinen erfasst werden, weshalb Seiten, die sich an die Standards halten, auch
bei Suchmaschinen wie Google besser vertreten sind, d.h. eher gefunden werden (hier
spricht man von SEO, Search Engine Optimization).
Über standardisierte Datenformate bzw. -strukturen wie REST und SOAP, die man-
che Seiten zur Verfügung stellen, kann desweiteren recht leicht auf die Inhalte selbst
zugegri�en werden, d.h. hier werden die Inhalte in einer einfachen (XML-)Struktur aus-
gegeben, die leicht weiter verarbeitet werden kann.
3.3.6 Weiterverwendbarkeit
Wie schon angedeutet, liegt ein wesentlicher Fokus auf den Daten, die auf der Seite
verfügbar sind. Über Schnittstellen können die Daten nun auch über andere Interfaces
angeboten werden, d.h. man kann seine Bookmarks bei del.icio.us nicht nur auf deren Sei-
25
te verwalten, sondern auch über externe Programme Bookmarks bei del.icio.us suchen,
verändern oder auch erstellen. Auch die meisten Blogs bieten eine solche Schnittstelle,
so dass dann mit einem speziellen Programm bequem auf dem Desktop Blog-Einträge
geschrieben werden können.
Neu ist auch die Möglichkeit, dass Websites die Informationen von anderen Seiten
aufbereiten und kombinieren. Hierzu werden die eben besprochenen Schnittstellen ver-
wendet. Die verbreitetste Anwendung in dieser Richtung ist sicher Google Maps. Google
stellt hier kostenlos Kartenmaterial und Satellitenbilder von der ganzen Erde (sowie
Mars und Mond) zur Verfügung. Diese Karten können mit zusätzlichen Informationen,
z.B. den Wohnorten der Benutzer einer Seite, in die eigene Website eingebunden werden.
Plazes[52] (siehe Abb. 3.9) ist ein Beispiel für eine solche Anwendung. Hier kann
man seinen eigenen Standort eintragen und sehen, wer gerade in seiner Nähe ist, wo es
das nächste Wireless LAN, also einen drahtlosen Internetzugang gibt, wo das nächste
Restaurant ist oder wo die Freunde gerade sind (sofern sie dies eintragen). Dies geht sogar
nicht nur über das normale Webinterface, sondern auch über SMS. Auch die normale
Google-Suche ist über eine sogenannte API verfügbar, d.h. ihre Funktionen können über
eine de�nierte Schnittstelle (API) abgerufen werden und die Ergebnisse können dann
in eine andere Seite eingebettet werden. Amazon hat ebenfalls eine umfangreiche API,
hierüber kann man z.B. auch die Cover von Musikalben abrufen. Diese Funktion wird in
einigen Musikabspielprogrammen genutzt.
3.3.7 Medienübergreifende Verfügbarkeit
Die über einfache Schnittstellen - wie RSS (Really Simple Syndication) - verfügbaren
Inhalte so gut wie aller Blogs und vieler News-Seiten (die RSS-Datei enthält meist die
letzten Einträge der jeweiligen Seite) können nicht nur, ähnlich wie Mails, in einem Pro-
gramm auf dem normalen PC dargestellt werden, sondern auch in Handys oder anderen
kleinen, internetfähigen Geräten aufbereitet werden. Die Inhalte des Web 2.0 sind so
(bzw. über spezielle, reduzierte Seiten) für kleine Geräte auch mobil verfügbar (Inter-
netzugang - sprich UMTS oder Wireless LAN vorausgesetzt) und es gibt hier auch ganz
neue Formen des direkten Verö�entlichens im Internet: Moblogging. Hierunter versteht
man das direkte Verö�entlichen von Informationen (Texten, Bildern), z.B. von Veran-
staltungen direkt vor Ort. D.h. man verö�entlicht seine Bilder und seinen Text nicht
erst zu Hause, sondern schickt die Daten direkt vor Ort ins Internet und verö�entlicht
sie, so dass andere Menschen, die nicht vor Ort sind, aber Internetzugang haben, sich
26
Abbildung 3.9: Die Startseite von Plazes
27
live über das Geschehen informieren können.
Wie bereits erwähnt, gibt es auch Seiten, die Inhalte sogar per SMS verschicken und
entgegennehmen, und es gibt auch die Möglichkeit, sich über diverse Instant Messaging
Dienste (Chats) z.B. die neuesten Nachrichten direkt schicken zu lassen, so dass man
automatisch informiert wird und nicht erst auf die Seite schauen muss.
3.3.8 Privatsphäre und Datensicherheit
Abbildung 3.10: Wegen der Ver-
ö�entlichung
dieses Bildes
mit dem Titel
�drunken pira-
te� wurde die
Lehrerzulassung
verweigert.
Ein Problem im Web 2.0 ist, dass das Web 2.0 prak-
tisch von den persönlichen Daten der Benutzer lebt
und viele, v.a. junge Benutzer diese privaten Infor-
mationen meist ohne langes Zögern bedenkenlos im
Internet verö�entlichen. Die Bilder oder sogar Vi-
deos von der letzten Party, was sie gut �nden, was
schlecht, wo sie überall waren, was sie über die Poli-
tik oder bestimmte Firmen denken etc.
Meistens wird aber nicht daran gedacht, dass die-
se Daten, selbst wenn sie gelöscht werden, noch sehr
lange im Internet verfügbar sein und von jedem ge-
lesen werden können. Auch von einem zukünftigen
Arbeitgeber, der im Internet dann Informationen er-
hält, die man ihm lieber nicht mitgeteilt hätte. Ein
Bewerber für einen Chefposten, von dem Fotos zu
�nden sind, auf denen er sich mit einer Bier�asche in
der Hand übergibt? Kaum vorstellbar, dass er noch
Chancen auf diesen Posten hat, wenn Derartiges im Internet auftaucht. Oder dass die
private Krankenkasse den Bericht über eine schwere Krankheit im Internet �nden kann,
die man verschwiegen hat.
Im Gegensatz dazu kann aber natürlich eine gut gestaltete Website mit guten und
aktuellen Inhalten durchaus positiv wirken. Das Publizieren im Netz ist somit nicht
grundlegend schlecht zu bewerten, sondern es kommt darauf an, ein Bewusstsein dafür
zu entwickeln, was ins Internet gehört und was nicht. Das Verö�entlichen im Internet
kann man sich eigentlich vorstellen wie das Verö�entlichen auf einer groÿen Plakatwand
irgendwo in einer Stadt. Wer würde dort über häu�ge Krankheiten, peinliche Partyer-
lebnisse oder dergleichen schreiben? Vermutlich niemand!
28
Ich möchte hier einen konkreten Fall ansprechen. Einer 27 - jährigen Frau in den
USA wurde die Zulassung zur Lehrerin verweigert, weil sie 2005 in ihrem MySpace-
Pro�l ein Bild verö�entlicht hatte, auf dem sie bei einer Halloween-Party mit einem
Piratenhut aus einem �Mr. Goodbar� - Becher trinkt. Unter dem Bild stand �drunken
pirate�. Als Begründung hieÿ es, sie würde das Trinken bei Minderjährigen fördern. Laut
ihrer Aussage war sie auf dem Bild nicht betrunken.
Ich denke, ein derartiges Beispiel spricht klare Worte: Man sollte extrem aufpassen
mit dem, was man im Internet verö�entlicht und immer damit rechnen, dass z.B. ein
zukünftiger Arbeitgeber diese Daten sieht.
Auch die Sicherheit der Daten ist nicht immer gewährleistet, ein nicht ganz neues
Problem, das aber dadurch verschärft wird, dass es im Web 2.0 oft auch private Bereiche
bei einem Anbieter gibt, in denen man Informationen hat, die man auf keinen Fall
anderen zugänglich machen möchte.
Natürlich kann man sich über Pseudonyme schützen. Doch hier sollte man beachten,
dass bereits ein gut gemeinter Link eines Freundes mit dem eigenen Namen das Ende
der Anonymität bedeuten kann. Grundsätzlich sollte man davon ausgehen, dass man im
Internet nicht anonym ist. Sobald sich eine Software, z.B. der Browser, mit irgendeinem
Server verbindet, sieht dieser Server die eigene IP-Adresse. Diese IP-Adressen werden
zwar meist dynamisch vergeben, d.h. spätestens nach 24 Stunden bekommt man eine
neue, doch speichern die Internet-Provider, also die Firma, über die man ins Internet
geht, diese IP-Adressen über einen längeren Zeitraum und so ist im Falle eines Falles
eindeutig herauszu�nden, wer die fragliche Website zu diesem Zeitraum besucht hat (und
z.B. illegale Tätigkeiten verfolgt hat).
Es gibt Versuche, den Internetzugang mit einem Onyion-Router-Netzwerk weitestge-
hend zu anonymisieren, z.B. mit Tor. Hierbei werden die Daten über bestimmte, auf der
ganzen Erde verteilte Server verschlüsselt weitergeleitet, wobei jeder Server immer nur
den vorherigen und nächsten kennt. Dadurch kann der Empfänger der Daten nicht mehr
nachvollziehen, wo diese herkommen. Auch eine juristische Verfolgung gestaltet sich als
äuÿerst schwierig. Eine absolute Sicherheit wird aber trotzdem nicht gewährleistet.
3.3.9 Zensur
Es gibt einen weiteren negativen Aspekt, der zwar nicht unbedingt zum Web 2.0 gehört,
aber doch zum World Wide Web: Zensur. Im März 2002 haben mehr als 300 Firmen
(unter ihnen auch Yahoo!, Betreiber zahlreicher Web 2.0-Seiten wie del.icio.us (Book-
29
marks) oder Flickr.com (Foto-Community)) eine �Ö�entliche Erklärung zur Selbstdiszi-
plin�, die von China gefordert wurde, unterschrieben. Sie verp�ichten sich darin, �keine
gefährlichen Informationen zu produzieren, zu verö�entlichen oder zu verbreiten, die die
staatliche Sicherheit oder die soziale Stabilität gefährden könnten�. Dies geht sogar so
weit, dass es den Verdacht gibt, dass Yahoo! mit der chinesischen Polizei zusammen
arbeitet und Nutzerdaten herausgerückt hat, die zur Verhaftung mehrerer regimekriti-
scher Chinesen geführt haben. Doch nicht nur in China wird das Internet zensiert, auch
hier in Deutschland zensieren Yahoo! und auch Google die Suchergebnisse, wenn sie
den Gesetzen widersprechen. Google schreibt allerdings im Gegensatz zu Yahoo! meist
einen Hinweis zu den Suchergebnissen, wenn zensiert wird. Google gibt auch nicht so
bereitwillig wie Yahoo! Nutzerdaten heraus. Positiv hervorheben sollte man in diesem
Zusammenhang, dass die Wikipedia sich den Zensurforderungen der chinesischen Regie-
rung nicht gebeugt hat. Allerdings wird die Wikipedia in China zensiert.
Doch ich möchte auch noch ein positives Beispiel nennen, dies ist Digg[56](siehe Abb.
3.11. Hier können Benutzer Links zu Neuigkeiten oder Audio-Dateien und Videos ein-
tragen und dann kann jeder Benutzer für oder gegen diesen Eintrag stimmen. Die Po-
pulärsten werden dann auf der Startseite angezeigt. Am 3. Mai 2007 wurde auf Digg
eine Nachricht über das Knacken eines Kopierschutzes mit dem entsprechenden Code
eingetragen. Digg wurde von der entsprechenden Stelle dazu aufgefordert, Einträge zu
löschen, doch die Löschung funktionierte nicht lange, da Digg nun von den Benutzern
mit Einträgen zu diesem Thema regelrecht über�utet wurde und nicht mehr in der Lage
war, diese zu blockieren. Digg gab auf und kündigte am 3. Mai o�ziell an, diese Einträge
nicht mehr zu löschen. So hat hier nicht die Zensur, sondern die Masse der Benutzer, die
Demokratie gesiegt. Ho�en wir, dass es in anderen Fällen ähnlich ausgehen wird.
3.4 Web 3.0
Web 3.0 ist als Begri� noch unklarer als Web 2.0, da Web 3.0 noch Zukunft ist und erst
jetzt erste Websites entstehen, die zum Web 3.0 gehören könnten. Es gibt aber doch
relativ klar einige Trends abzusehen, die sich in der Zukunft weiter verstärken werden.
Einer dieser Trends geht immer mehr dahin, dass Funktionen und Programme, die
man normalerweise auf dem eigenen Computer verfügbar hat, zu zentralen Diensten
ausgelagert werden. Google ist hier ganz vorne mit dabei, indem er mittlerweile eine
Terminverwaltung, ein E-Mail - Programm, ein Chatprogramm zur unmittelbaren Kom-
munikation, eine Textverarbeitung und Tabellenkalkulation, eine Funktion zum Lesen
30
Abbildung 3.11: Digg.com - ein Beispiel für gelungene Demokratie im Web[56]
31
und Verwalten von News- bzw. RSS - Feeds, zum Archivieren von Inhalten, die man im
Web gefunden hat, und zum Verwalten der eigenen Lesezeichen (Bookmarks) anbietet.
Es gibt auch andere Ansätze, einen gesamten Desktop als Web - Anwendung wie-
derzugeben. Dies stöÿt natürlich auch auf Ablehnung bei kritischen Benutzern und Da-
tenschützern, da man immer mehr Daten, die eigentlich den Schutz der Privatsphäre
genieÿen sollten, groÿen, multinationalen Firmen in die Hände gibt. Hier ist es natürlich
auch eine spannende Frage, ob das Quasi - Monopol von Google (v.a. im Bereich der
Websuche) bestehen bleibt oder ob die Konkurrenz es durch gute Produkte scha�t, Nut-
zer von Google weg zu ziehen und so ein gesunder Wettbewerb entsteht. Google selbst
möchte in Zukunft immer mehr Daten der Benutzer speichern und irgendwann in der
Lage sein, dem Benutzer Fragen wie �Welchen Job soll ich machen?� oder �Womit soll
ich mich jetzt beschäftigen?�[84] zu beantworten. Ein Leben ohne Google soll in Zukunft
(laut Google) nicht mehr möglich sein.
Selbstverständlich wird das Web wachsen. Es wird immer mehr Informationen geben.
Und um diese besser verwalten und durchsuchen zu können, gibt es Bestrebungen, ein
semantisches, auch für Maschinen lesbares und erfassbares Web zu scha�en. Das bedeu-
tet, dass in einem Artikel über Stuttgart z.B. [[liegt in::Baden-Württemberg]] oder [[hat
Fläche:207,36 km2]] stehen könnte, wobei natürlich nur die eigentlichen Daten angezeigt
werden. Diese Daten können jetzt aber von einem Computer ausgelesen werden und z.B.
zu Listen aufbereitet werden. Und die Daten sollten natürlich auch von anderen Seiten
aus abrufbar und kombinierbar sein. Dies sind Elemente des semantischen Webs, wie sie
im Semantic MediaWiki (eine Wiki-Software) umgesetzt sind. Das Mediawiki ist die Ba-
sis der Wikipedia und so wird auch die Wikipedia eines Tages das Semantic MediaWiki
einsetzen.
Eine weitere neue Richtung geht in die dritte Dimension. In der 3D - Welt Second
Life[60] (siehe Abb. 3.12) kann jeder kostenlos teilnehmen und gegen Geld dann Grund
kaufen und dort oder auf freiem Grund eigene Gegenstände (und auch Gebäude) bauen.
Jeder Benutzer von Second Life hat einen Avatar, eine virtuelle Repräsentation, die er
nach seiner Phantasie frei gestalten kann. Anders als in der realen Welt kann man im
Second Life �iegen und sich an andere Orte übertragen. Über Chats kann dieser Avatar
entweder mit allen Benutzern im Umkreis oder auch nur mit einem speziellen Benutzer
kommunizieren. Im Second Life gibt es bereits ganze Städte und und Kongresszentren
mit Videoleinwänden und vielem mehr. Auch Audioinhalte sind im Second Life zu �n-
den. Im diesjährigen französischen Präsidentschaftswahlkampf haben die Politiker (bzw.
entsprechende Beauftragte von ihnen) Plattformen im Second Life errichtet und auch
32
Abbildung 3.12: Ein Foto aus Second Life[59]
Firmen präsentieren sich im Second Life. Es gibt einige Menschen, die sagen, diese oder
eine ähnliche 3D - Welt sei ein wichtiger Bestandteil des zukünftigen Internets. Ich gehöre
allerdings zu den Menschen, die dies bezweifeln.
33
4 Meine Erfahrungen - der
Praktische Teil meiner Arbeit
4.1 Mein Weg zum Webdesign
Wann hatte ich das erste Mal mit Webdesign zu tun? Das war Ende Oktober 2004, als ich
meine erste Website mit PmWiki, einem einfachen Wiki aufsetzte. Ich hatte damals noch
so gut wie keine Ahnung und versuchte einfach in der Designvorlage herumzuspielen, um
das Design ein wenig zu ändern. Später stellte ich die Seite auf ein Weblog um. Etwa im
Frühling/Sommer 2005 beschäftigte ich mich dann intensiver mit HTML und CSS mit
Hilfe von SelfHTML[2]. Im Herbst 2005 vertiefte ich mein Wissen durch die Lektüre des
Buches �Zen und die Kunst des CSS-Designs� von Dave Shea und Molly E. Holzschlag[3].
In dieser Zeit baute ich immer wieder neue Designs für meine Website, die mittlerweile
auf Textpattern basierte und schrieb kurzerhand das komplette Design fast von Grund
auf neu. Ich begann auch bei einzelnen Seiten den HTML-Code komplett von Hand zu
schreiben. Anfangs hatte ich noch ziemliche Probleme, verwechselte Innen- und Auÿen-
abstand und vieles andere, doch mit der Zeit wusste ich immer mehr, was man machen
muss, um dies oder jenes zu erreichen.
4.2 Projekttage
Bei den Projekttagen vom 22. bis zum 24. Mai 2006 leitete ich den Kurs �Webdesign�. Ich
hatte 7 Teilnehmer aus den Klassen 9 und 10, alles Jungen. Wenige hatten schon einmal
mit Webdesign zu tun, die meisten waren zwar intensivere Computernutzer, hatten aber
von Websites noch nicht allzu viel Ahnung.
In den 2 Tagen (Montag ab 14 Uhr bis Mittwoch 13 Uhr) versuchte ich zunächst die
Grundlagen von XHTML und CSS zu erklären. Der Anfang von XHTML-Dokumenten,
Überschriften und Absätzen waren schnell vermittelt und verstanden. Doch bei CSS be-
gann dann die Verwirrung: Wo kommt das jetzt hin? Was macht das? Wie erreiche ich
34
das und jenes? Für die Arbeit mit CSS ist es notwendig, ein bestimmtes Denkmuster
zu lernen, den Umgang mit Innen- und Auÿenabständen und Umrandungen - das so-
genannte Box - Modell (siehe Abb. 4.1). Für mich kam erschwerend hinzu, dass einige
bereits ein wenig von HTML wussten und dann versuchten, mit Tags wie <marquee>
(Lauftext) zu beeindrucken und diese anderen beizubringen anstatt mir bei den Grund-
lagen von XHTML und CSS zuzuhören, die sie zwar teilweise schon kannten, aber eben
nur teilweise. Und als es dann schwieriger wurde, scha�ten v.a. diejenigen, die vorher
meinten, sie müssten nicht aufpassen, den Einstieg nicht mehr.
Abbildung 4.1: Das CSS-Box-Modell
Neben Grundlagen wie Vorder- und Hintergrundfarben, Rahmen und Abständen ver-
mittelte ich einfache Layouttechniken und Menüs mit E�ekten, wenn man mit der Maus
über die Einträge fährt. Themen, die ich anschnitt, aber nicht weiter vertiefte und die
meinem Eindruck nach auch nicht verstanden wurden, waren erweiterte Positionierung
sowie Techniken, um Text durch Bilder zu ersetzen. Damit hat man den Text als Infor-
mation enthalten und kann ihn mit dem überlagerten Bild trotzdem schön gestalten.
Zwei Tage sind einfach zu kurz, um mehr als einen Einstieg zu bieten. Doch bei einigen,
d.h. v.a. bei denen, die immer aufgepasst haben, scheint dies recht gut gelungen zu sein.
Kommentare wie �Ich dachte, dass ich CSS nie lernen würde� oder �Schön, dass wir bei
den Projekttagen auch etwas gelernt haben� (sinngemäÿ) waren zu hören. Danach wäre
ein Fortsetzungskurs über erweiterte Layouttechniken, E�ekte wie ausklappbare Menüs
und Aspekte wie Browser-Kompatibilität und Barrierefreiheit sinnvoll gewesen.
35
Vielen Dank an die Teilnehmer meines Kurses!
4.3 Websites
4.3.1 Schattenseele (http://www.schattenseele.de.tk)
Abbildung 4.2: Die Startseite der Website der Schattenseele
Ziel dieser Website war und ist es, unser Klassenspiel �Schattenseele� von Gerald
Friese, das im Juli 2006 aufgeführt wurde, in einer kleinen Website zu präsentieren.
Inhalt sind einige wenige Texte und Informationen sowie einige Bilder. Die Betonung
bei diesem Projekt liegt also auf der Einfachheit und Klarheit.
Das Design
Meine Idee für das Design war, angeregt von dem Wort �Schatten�, etwas Dunkles zu
scha�en. Reines Schwarz und Grau erschien mir dann aber doch zu dunkel und kahl. So
entstand die jetzige Lösung mit verschiedenen blau/lila-Tönen sowie hellgrau und weiÿ.
Das Menü ist abgerundet und schlieÿt links mit dem Rand ab.
Der Aufbau
Sämtliche Seiten bis auf die Bilder-Seiten mit den einzelnen Bildern sind links im Menü
verlinkt. Die Bilder sind in Kategorien aufgeteilt. Zu diesen Kategorien gibt es jeweils
36
zwei Ansichten: in der Einzelbildansicht wird ein Bild in der vollen Gröÿe gezeigt (ca.
580 x 460 Pixel) und 5 andere sind darunter klein dargestellt. Diese Ansicht ist auch der
Startpunkt. In der Übersicht sind jeweils 20 kleine Bilder auf einer Seite zusammenge-
fasst.
Technische Realisierung
Die Website besteht aus validem XHTML und CSS, auch im Internet Explorer wird sie
zwar etwas anders, aber immer noch gut angezeigt.
Die Seite stützt sich auf PHP-Code, der obere Teil der Seite und das Menü sind in
einer extra-Datei gespeichert und werden in jede Seite hineingeladen. Im Menü wird
dabei geprüft, welche Seite aktuell ist, und der entsprechende Eintrag hervorgehoben.
Für die Bilder habe ich Folderblog (http://folderblog.org/), ein einfaches PHP-
Script für Bildergalerien, eingesetzt. Es ist allerdings vom Design her abgeändert und
verwendet auch das gemeinsame Menü.
4.3.2 Waldorf SV (http://www.waldorf-sv.de)
Durch mein Engagement im Landesschülerrat der Freien Waldorfschulen Baden - Würt-
temberg kam ich in Kontakt mit der Waldorf SV, der bundesweiten Waldorfschülerver-
tretung. So bekam ich im Frühjahr 2006 von Tobias Wollowski, zu diesem Zeitpunkt
noch Sprecherkreismitglied und für die Website zuständig, den Auftrag, ihre Website
neu zu gestalten.
Auf dieser Website waren bisher einige allgemeine Infos, Protokolle und ein Forum
zu �nden. Auch ein Gästebuch existierte dort, dieses wurde allerdings nicht so intensiv
genutzt. Als CMS wurde PHPKIT[85] verwendet. Das Problem war v.a. das Design,
da es farblich nicht zum Logo der Waldorf SV passte und auch nicht besonders schön
aussah.
Meine Aufgabe war es nun, ein neues Design zu bauen, das v.a. die Farben des Logos,
also Gelb und Schwarz, nutzt. Da PHPKit nicht für alle Zwecke frei verwendet werden
darf (d.h. nur für private Websites) und auÿerdem nicht allzu komfortabel zu bedienen
ist, entschied ich mich, das CMS zu wechseln.
Anforderungen
Ein neues Design mit den Farben des Logos und ein neues CMS sind eigentlich recht
ungenaue Anforderungen. Deshalb baute ich am Anfang einfach darauf los und reali-
37
Abbildung 4.3: Die Startseite der Website der Waldorf SV
38
sierte ein Feature nach dem anderen. So entstanden die ersten statischen Seiten und
ein Forum, auch ein Gästebuch war schnell hinzugefügt. Als die nächste Tagung näher
rückte (Herbst 2006), wurde ich gefragt, ob ich auch ein Anmeldeformular einbauen
könnte. Zum Glück fand ich ein passendes Modul für das eingesetzte CMS, das zwar
sehr aufwändig zu bedienen war, aber letzten Endes seine Aufgabe erfüllte. Da die Wal-
dorf SV ein eigenes, kleines Programm zur Adressverwaltung, das die Daten in einer
ganz bestimmten, allerdings nicht sehr komplizierten Form aufbereitet entgegen nimmt,
bastelte ich auch noch ein kleines Script, das die Daten von der Website entsprechend
umwandelt. Auch einen Newsletter baute ich ein. Nach der Tagung gab es viele Fotos,
die verö�entlicht werden sollten. Hierzu testete ich verschiedene Bildergalerie-Module,
eines davon verwende ich jetzt in einer angepassten Form, da das ganze System etwas
zu aufwändig und komplex ist.
Die Umsetzung
Ich entschied mich rasch für Drupal[86], da ich damit alle mir am Anfang bekannten
Anforderungen leicht umsetzen konnte. Dieses freie CMS ist sehr �exibel und bietet
vielfältige Funktionen. Viele davon sind über zusätzliche Module, die einfach eingebun-
den werden können, verfügbar. Mir gefällt Drupal auch deshalb, weil es standardmäÿig
valides XHTML produziert.
Ein weiterer Vorteil ist die Möglichkeit, verschiedene Benutzergruppen zu erstellen,
die bestimmte Zugri�srechte haben, die frei wählbar sind. Benutzer sehen immer nur die
Funktionen, die für sie nötig sind. So ist die Bedienung v.a. für normale Benutzer nicht
zu verwirrend.
Doch ich benötigte zur Realisierung der oben genannten Funktionen, die zwar alle
irgendwie möglich waren, immer mehr Module. Dies und die Tatsache, die ich leider am
Anfang nicht wusste, dass der PHP-Code von Drupal nicht sehr gut geschrieben ist, ha-
ben zu einem sehr hohen Arbeitsspeicherverbrauch und damit verbundenen erheblichen
Problemen geführt, die aber mittlerweile wieder verschwunden sind.
Auch wenn Drupal von der Funktionalität her sehr gut ist, denke ich jetzt, dass eine
komplett selbstgebaute Seite, d.h. eine Seite, bei der fast der komplette Code selbst
geschrieben ist, einfacher zu bedienen wäre, weniger Speicher brauchen und damit auch
weniger Probleme verursachen und besser die benötigten Funktionen bereitstellen würde.
Eventuell wäre dies auch möglich, wenn man selbst Module für Drupal schreiben würde.
Leider war es mir zeitlich nicht mehr möglich, PHP zu lernen, um diese Ideen umsetzen
zu können. Wahrscheinlich hätte dies auch den Rahmen einer Jahresarbeit eindeutig
39
gesprengt.
Ich habe viel positives Feedback von der Waldorf SV erhalten. Sogar diejenigen vom
Sprecherkreis, die von sich sagen, dass sie nicht gut mit dem Computer umgehen können,
sehen keine Probleme damit, die Inhalte auf ihrer Website selbst zu verwalten. Damit
habe ich mein Ziel, die Website benutzerfreundlich zu gestalten, erreicht.
4.4 Meine Werkzeuge
Ich habe nie einen WYSIWYG - Editor verwendet. Stattdessen habe ich, zumindest
bei der Website der Waldorf SV, zunächst das Design und den Aufbau der Seite in
Inkscape[87] entworfen. Auch die auf beiden Seiten im Design verwendeten Gra�ken
sind mit Inkscape erstellt und dann teilweise noch mit Gimp[88] nachbearbeitet. Den
Code habe ich in verschiedenen Editoren geschrieben, meist kamen jEdit[89] oder vim[90]
zum Einsatz. Als Browser habe ich Mozilla Firefox eingesetzt sowie andere Browser wie
den Internet Explorer von Microsoft zum Testen. In Firefox benutzte ich das Web Devel-
oper Plugin[92] und Firebug[91], um die Websites zu untersuchen und auch Änderungen
direkt im Browser ausprobieren zu können. Die Struktur der Seite und den Inhalt habe
ich dann im Fall der Waldorf SV - Website über die Website selber, d.h. das CMS, er-
stellt. Zusätzliche Module habe ich installiert, indem ich sie auf den Server, auf dem die
Websites liegen, hochgeladen habe und dann über das CMS aktiviert habe.
40
5 Aspekte beim Gestalten einer
Website
Beim Gestalten einer Website kann man sehr viel beachten. Denn was macht den Un-
terschied zwischen einer von einem Anfänger gemachten Website und der Website eines
guten Webdesigners aus? Sehr viel, man sieht es eigentlich fast auf den ersten Blick.
Aber wie scha�t man es, dass eine Website �professionell� aussieht? Oft ist dies alles
andere als einfach, will man doch auch etwas Eigenes scha�en und nicht nur ein gutes
Design kopieren.
Entscheidende Aspekte für die Wirkung einer Website sind die Farbauswahl, der gute
Aufbau der Seite, der ein schnelles Zurecht�nden ermöglicht, die Schrift und nicht zuletzt
der Inhalt! Es gibt dicke Bücher mit mehreren hundert Seiten über die Gestaltung einer
Website. Ich werde hier einen Überblick über die wichtigsten Themen geben und diese
mit Beispielen von der Website der Waldorf SV erläutern.
5.1 KISS - Keep it simple and straightforward
Ein groÿes Problem im Web ist, dass sich ein Benutzer oft nicht zurecht�ndet. Er fühlt
sich verloren in den Massen der Funktionen und Seiten. Dieses Gefühl hat einen Namen:
Lost in Hyperspace. Das Problem ist: In einem normalen Text bzw. Buch hat man immer
eine Orientierung, was man noch vor sich hat, was man schon gelesen hat und was es alles
gibt. Doch im Web ist das leider oft nicht der Fall. Klar, auf einer einzelnen Seite geht
das noch, da man sieht, wie lange sie ist. Doch ist der Text auf mehrere Seiten aufgeteilt
und gibt es keine ausreichende Orientierung, ist der Benutzer ho�nungslos verloren. Das
Problem ist auch, dass man manchmal komplett aus dem Zusammenhang heraus gerissen
wird, z.B. durch Popups (zusätzliche Fenster, die sich ö�nen) oder Werbebanner. Der
Benutzer weiÿ dann gar nicht mehr, in welchem Kontext er sich gerade be�ndet. Das
Gleiche tri�t auch auf überladene Community-Seiten zu.
Um dieses Problem nun zu lösen, sollte man sich immer bewusst sein, für wen die
41
Website gemacht ist und was die potentiellen Nutzer dieser Seite auf ihr wollen. Und
danach sollte alles ausgerichtet sein. Dieses benutzerfreundliche Prinzip ist mit KISS
gemeint. KISS ist eine Abkürzung für mehrere, ähnliche Bedeutungen, z.B. �Keep it
simple and straightforward.� - �Gestalte es einfach und überschaubar.� Ähnliches meint
das deutsche Sprichwort �In der Kürze liegt die Würze�. Das heiÿt also, dass die Seite
sich ganz auf ihren eigentlichen Zweck konzentrieren und so einfach und überschaubar
wie möglich sein sollte.
Insbesondere sollten auch unnötige Spielereien vermieden werden. Blinkende Gra�ken
oder Texte etc. sollten möglichst nicht auf einer Website sein, da sie ablenken und stö-
ren. Auch die v.a. bei Firmen beliebten Intros, d.h. eine extra Seite, auf die man vor der
eigentlichen Website kommt und auf der z.B. ein Film abläuft, sind nicht gerade förder-
lich für die einfache Benutzbarkeit einer Website, da sie den Benutzer am Betrachten
der eigentlichen Inhalte hindern.
Der Benutzer sollte auch immer die Kontrolle über die Seite behalten, d.h. es sollten
sich nicht irgendwelche zusätzlichen Fenster ö�nen, die er gar nicht möchte. Auch sollte
er es den Links, die er anklickt, ansehen, ob sie zu einem Download führen (z.B. einem
PDF-Dokument) oder im Idealfall sollte er auch schon im voraus erkennen, ob er mit
diesem Link die Seite verlässt, um hierbei geeignete �Maÿnahmen� zu tre�en, wie z.B.
den Link in einem neuen Reiter (=Tab) seines Browsers zu ö�nen.
Das Element, um das �Lost in Hyperspace� - Gefühl zu vermeiden, ist die Navigation,
auf die ich im Folgenden eingehen werde.
5.2 Navigation
Besucher verweilen nicht unbedingt längere Zeit auf einer Seite. Oft haben sie bei Google
gesucht und sind zufällig auf eine Seite gestoÿen. Jetzt möchten sie sehr schnell wissen,
ob sie die gesuchte Information auf dieser Seite �nden oder ob die Seite vielleicht sonst
für sie interessant sein könnte. Der erste Eindruck zählt dabei sehr, da es sehr viele
Konkurrenzseiten gibt, der Benutzer oft 10 oder mehr Seiten ansieht und somit einer
einzelnen Seite keine allzu groÿe Chance gibt.
Damit der Benutzer auf der Seite verweilt, sollte er sich zurecht�nden und keine nega-
tiven Überraschungen erleben. Dazu zählen z.B. Links, die ins Leere führen. Ist die Seite
sehr voll, d.h. gibt es viele Artikel oder Ähnliches, sind Übersichten und eine Auswahl
guter Artikel für den Benutzer hilfreich. Eine gut platzierte und gut funktionierende (!)
Suchfunktion ist ebenfalls sinnvoll. Überladene sowie verschachtelte Menüs sind schlecht,
42
noch schlechter ist es, wenn man nicht einmal erraten kann, unter welchem Menüpunkt
man die gesuchte Information vor�ndet.
Abbildung 5.1: Die beiden Na-
vigationen (links
und rechts)
der Waldorf
SV-Website
Ein klarer Aufbau der Seite ist sehr wichtig, d.h.
der Benutzer sollte sehr schnell erkennen können, wie
die Seite organisiert ist, welche Inhalte es gibt und
wie diese geordnet sind (z.B. mit Kategorien), damit
er in kurzer Zeit das Gesuchte �ndet.
Für Benutzer, die die Seite bereits kennen, ist es
auch wichtig, neue Inhalte am besten auf den ersten
Blick zu erkennen.
Auf der Website der Waldorf SV habe ich die Na-
vigation so gestaltet, dass alle wichtigen Informatio-
nen über das Menü direkt zugänglich sind und das
Menü nach Bereichen sortiert ist. So sind oben als
erstes die allgemeinen Informationen, dann News in
Form der Newsletter und Pressemitteilungen und ge-
gen Ende die Kommunikationsmöglichkeiten (Forum,
Gästebuch, Kontaktformular, Kontaktdaten in Form
des Impressums) zu �nden. Den letzten Punkt bilden
die Links zu Partnerseiten (siehe Abb. 5.1, links).
Meldet man sich an, sieht man ein weiteres Menü
(siehe Abb. 5.1 links unten). In diesem kann man sein
Benutzerpro�l bearbeiten, d.h. einige wenige Infor-
mationen über sich eintragen. Hier gibt es den Link
zu den privaten Nachrichten, d.h. Benutzer können
sich über die Seite gegenseitig Nachrichten zuschicken. Auÿerdem �ndet man hier die
Links, um neue Inhalte, v.a. Einträge ins Forum, zu erstellen. Die Administratoren �nden
dort den Link �Verwalten�, der zu dem Bereich der Website führt, in dem alles einge-
stellt werden kann. Den letzten Eintrag dieses zweiten Menüs bildet die Funktion zum
Abmelden von der Seite.
Eine Suchfunktion ist direkt oben neben dem Logo auf jeder Seite platziert, mit ihr
kann man sämtliche Inhalte der Website durchsuchen und �nden.
Über neue Inhalte kann man sich zum einen über die Startseite informieren, dort wer-
den neben der allgemeinen Information über die Waldorf SV (diese ist allerdings nur
bei nicht angemeldeten Benutzern zu sehen) die neuesten Texte (News, Informationen,
43
Foreneinträge) angezeigt. Zum anderen �ndet man die neuesten Foreneinträge und Kom-
mentare auch auf der rechten Seite in zwei Blöcken aufgelistet, so dass man schnell sehen
kann, was neu auf der Seite zu �nden ist (siehe Abb. 5.1).
5.3 Layout
Abbildung 5.2: Ein typisches
Layout mit zwei
Spalten
Der Aufbau einer Seite beein�usst ganz wesentlich,
wie diese von den Besuchern wahrgenommen wird.
Es gibt klassische Layouts, einige modernere Ansätze
und vollkommen freie, experimentelle Layouts.
Traditionelle Layouts haben oben den Seitentitel,
links darunter eine Navigation und rechts von dieser
Navigation den eigentlichen Inhalt (siehe Abb. 5.2).
Die Navigation kann auch direkt unter dem Seiten-
titel horizontal angeordnet sein. Neben diesen zwei
Spalten kann auch noch rechts eine dritte Spalte sein,
die zusätzliche Inhalte, z.B. eine Liste der letzten
Neuigkeiten, enthält. Auch oben in der Mitte kön-
nen weitere Blöcke angeordnet sein. Nun haben wir
den Aufbau eines klassischen Portals.
Bei der Waldorf SV-Seite habe ich ein derartiges,
dreispaltiges Layout realisiert, da sehr viele Informationen z.B. über die neuesten The-
men im Forum, die letzten Kommentare oder die letzten Newsletter auf einen Blick zu
sehen sein sollen.
Ein moderner Ansatz, der v.a. bei Blogs häu�g zu sehen ist, ist die Navigation auf
der rechten Seite. Eigentlich könnte man davon ausgehen, dass die Navigation an dieser
Stelle ungünstiger ist, da sie von gewohnten Prinzipien abweicht. Doch dies scheint nicht
der Fall zu sein. Auf diesen Schluss kommt jedenfalls eine kleine Studie, die das Verhalten
von Benutzern auf unterschiedlichen Websites mit unterschiedlichen Layouts beobachtet
hat.[64] Bei einigen Seiten habe ich auch schon eine Navigation am unteren Rand der
Seite gesehen, es gibt auch zwei Seitenleisten nebeneinander, allerdings dann meistens
auf der rechten Seite.
Eine Spezialität (ein experimentelles Layout) stellen Seiten dar, bei der der Inhalt nicht
nach unten geht, sondern nach rechts, d.h. Seiten, bei denen der Text in vielen Spalten
nebeneinander angeordnet ist. Diese Gestaltung erfordert allerdings einige Tricks und
44
ist auch von der Benutzbarkeit her nicht ganz unproblematisch, da es viele Benutzer
einfach nicht gewöhnt sind, horizontal zu scrollen, um den restlichen Text zu sehen.
Eine weitere Unterscheidung wird zwischen �ieÿenden Layouts und festen Layouts
gemacht. Flieÿende Layouts zeichnen sich dadurch aus, dass sie ihre Breite mit der
Breite des Browserfensters verändern, während feste Layouts immer die gleiche Breite
haben.
Für den Designer sind feste Layouts meistens einfacher, da hier nur eine Breite be-
rücksichtigt werden muss und z.B. Hintergrundbilder eine feste Breite haben können und
nicht so gebaut werden müssen, dass sie zu einer beliebigen Breite passen, d.h. wieder-
holt werden können. Auch die kunstvolle Gestaltung des Seitentitels ist hier natürlich
wesentlich einfacher.
Doch eine feste Breite hat auch zahlreiche Nachteile, nämlich v.a. dann, wenn man
sich bewusst macht, wie unterschiedlich groÿ die Bildschirme der Benutzer sind: 800x600
Pixel (kaum noch vertreten), 1024x768 Pixel (Standard, wird aber immer mehr abgelöst
durch), 1280x1024 Pixel und einige Sondergröÿen (v.a. bei Notebooks zu �nden). Nun
sollte also die Seitenbreite bei einer Bildschirmbreite von 800 Pixeln passen, aber bei
einer Bildschirmbreite von 1280 Pixeln sollte die Seite trotzdem nicht komisch aussehen.
Man �ndet immer wieder Seiten, die auf 1024x768 Pixel oder sogar noch mehr optimiert
sind und bei kleineren Bildschirmen sehr merkwürdig aussehen bzw. schlecht zu bedienen
sind. Flieÿenden Layouts macht die unterschiedliche Bildschirmbreite noch anderweitig
zu scha�en. Denn ein kurzer Text bei 1280 Pixeln Breite sieht sehr seltsam aus und
ist kaum zu lesen, eine sehr volle Seite mit vielen Spalten bei einem 800 Pixel breiten
Bildschirm allerdings auch.
Bei der Waldorf SV - Website bin ich einen Kompromiss eingegangen, ich habe mich
für eine maximale Breite von ca. 1000 Pixeln entschieden. Dadurch wird die Seite bei
groÿen Bildschirmen nicht zu breit, bei kleinen Bildschirmen schmäler. Dies umzusetzen
ist nicht ganz einfach und bedarf eines extra Tricks für den InternetExplorer.
5.4 Farben im Web
Gute Websites sind meist farbig, aber nicht unbedingt bunt. Was heiÿt das? Im Web
sind theoretisch 16.777.216 - also knapp 17 Millionen - Farben verfügbar und benutzbar.
Da ist es verständlich, dass man leicht verführt ist, einen bunten Farbmix von total
verschiedenen Farben zu erstellen. Doch damit die Seite nachher auch benutzbar ist,
sollte man einige Regeln beachten.
45
Ein Punkt wäre hier, dass keine grellen Farben benutzt werden sollten, da der Bild-
schirm leuchtet und somit grelle Farben für den Betrachter sehr unangenehm sind. Kom-
plementärfarben (z.B. gelb und blau) sollten nicht kombiniert werden, also z.B. gelbe
Schrift auf blauem Grund, da die Lesbarkeit dadurch sehr leidet, dass kein Helligkeitsun-
terschied vorhanden ist. Eine ausreichender Helligkeitsunterschied ist wichtig, auch im
Hinblick auf Menschen, die farbenblind sind oder Farben nur eingeschränkt wahrnehmen
können.
Ein gutes Farbschema einer Website besteht aus 2-3 Hauptfarben, die dann etwas in
der Helligkeit variiert werden.
Abbildung 5.3: Die Farbpalette
der Wikipedia
Verbreitet sind Weiÿ, Grau, Schwarz und Blau. Die
Wikipedia verwendet z.B. eine Reihe verschiedener
Blautöne, eine Reihe von Schwarz über einige Grau-
töne hin zu Weiÿ sowie ein Gelb, das allerdings nur
an zwei Stellen für einen Rahmen verwendet wird
(siehe Abb. 5.3)
Wichtig ist, dass eine Website ein einheitliches De-
sign besitzt. Dies kann z.B. so aussehen, dass alle
Überschriften die gleiche Farbe haben oder mehrere Navigationselemente ähnlich oder
gleich aussehen. Bezogen auf die Website der Waldorf SV ist dies z.B. bei den verschie-
denen Navigationen der Fall. Sowohl die Navigation auf der linken Seite als auch die
neuesten Forenbeiträge und Kommentare auf der rechten Seite haben die gleiche Farbe,
die gleichen Trennlinien, die gleiche Hintergrundfarbe, das gleiche Verhalten, wenn man
mit der Maus darüber fährt usw.
Ist die Website für eine bestimmte Organisation oder Firma bestimmt, die ein Cor-
porate Design hat, d.h. einen Styleguide, der festlegt, welche Farben, Schriftarten etc.
für Briefe, Formulare, Visitenkarten und auch die Website verwendet werden, so ist dies
natürlich zu beachten.
Es emp�ehlt sich auch, vor der Erstellung der Seite ein Farbschema zu erstellen, d.h.
festzulegen, welche Farbtöne verwendet werden sollen. Im Fall der Waldorf SV-Seite
waren Gelb und Schwarz die durch das Logo vorgegebenen Töne. Ich erweiterte das
Farbschema durch einen recht dunklen Blauton, den ich für Überschriften und Links
benutzte.
Für Farben gibt es auch einige Konventionen. Sehr weit verbreitet ist die der Links:
Alle Links sollten blau sein oder einen ähnlichen Farbton haben oder zumindest unter-
strichen sein. Unterstreichungen sowie blauer Text sollten daher im übrigen Text nicht
46
zur Hervorhebung benutzt werden, da die meisten Benutzer sonst meinen, sie hätten
einen Link vor sich.
Abbildung 5.4: Die Startseite
von Apple als
Beispiel eines
modernen, durch
Grau/Schwarz
dominierten
Farbschemas
(Stand: 1.6.2007)
Bei der Wahl der Farben sollte man immer auch
deren Ausdruck und die durch sie erzeugten Stim-
mungen berücksichtigen. Dabei gibt es von Land zu
Land und auch von Kontinent zu Kontinent Unter-
schiede in der Wahrnehmung der Farben. Die Ziel-
gruppe spielt damit eine wichtige Rolle bei der Farb-
auswahl.
Seiten, die einen seriösen Eindruck vermitteln wol-
len, verwenden meist Schwarz, Blau und Grau. Sil-
bergrau und Schwarz wirken eher modern, das sieht
man z.B. bei Apple (Abb. 5.4)[82]. Man sollte sich
bei der Wahl der Farben der kulturellen Bedeutung
der Farbe bewusst sein. Violett steht z.B. im katho-
lischen Europa für Tod und Kreuzigung, gleichzeitig
symbolisiert diese Farbe Heidentum, New Age und
Homosexualität (also gegen den christlichen Glau-
ben), im Nahen Osten dagegen Prostitution genauso
wie in einigen westlichen Kulturen Rot (Rotlichtmi-
lieu). In China dagegen ist Rot ein Symbol für Glück.
Rot kann man sparsam einsetzen, v.a. für Hervorhe-
bungen und Fehlermeldungen. Orange signalisiert in
den USA ein preiswertes Produkt, möchte man das Gegenteil, also Bildung, Eleganz
oder Luxus vermitteln, sollte man es vermeiden. Gelb und Grün werden allgemein als
gute, positive Farben wahrgenommen, Blau ist jedoch die global unbedenklichste Farbe.
Doch Farben sind natürlich nicht nur für Stimmungen da, sie sollen v.a. auch helfen,
zu strukturieren, als Orientierungshilfe dienen, bestimmte Dinge hervorheben oder in
den Hintergrund treten lassen und komplexe Informationen visualisieren.
5.5 Gra�k im Web
Hier ein Farbverlauf, dort eine runde Ecke und ein Schatten sind sicher sinnvoll. Auch
ein Logo gehört dazu und ab und zu Bilder in den Artikeln können eine Website sehr
au�ockern. Doch der Einsatz der Gra�k sollte gezielt erfolgen und es sollte darauf ge-
47
achtet werden, dass die Website nicht überladen wird und alles sowohl von der Farbe
als auch von der Form her zueinander passt. Jedes Bild sollte eine Aussage haben und
nicht nur ein Lückenfüller sein. Dies tri�t insbesondere auf News-Artikel zu.
Kleine Bildchen werden gerne auch verwendet, um bestimmte Aktionen wie z.B. das
Speichern oder Bearbeiten eines Artikels zu visualisieren oder um das Menü aussage-
kräftiger zu machen. Doch genau auf diese Aussagekraft sollte man achten. Leider �ndet
man nämlich auch Beispiele, in denen die Aussage de�nitiv nicht zu erkennen ist und es
teilweise nicht einmal einen alternativen Text gibt (siehe Abb. 5.5).
Ein besonderes Augenmerk sollte auf animierte Bildchen gerichtet werden. Sie nerven
den Benutzer in der Regel und lenken ab. Auf einer guten Website sind sie deshalb eher
nicht zu �nden oder wenn, nur sehr dezent.
Abbildung 5.5: Gefordert ist, anzugeben, wie eng die Freundschaft mit der darüber ange-
gebenen Person ist. Hierzu gibt es, wie man sehen kann, 5 Möglichkeiten.
Aber was bedeuten diese? Hm, leider nicht wirklich zu erkennen! Daher
jetzt die Au�ösung (von links nach rechts): Noch nicht gesehen, Bekannt-
schaft, Freund, guter Freund, bester Freund. Im HTML-Code ist noch
ein Alternativtext de�niert.
Wenn man im Web Gra�ken verwendet, sollte man sich auch immer Gedanken über
das Bildformat machen. Es gibt bestimmte Formate wie PNG, die eine sehr gute Qua-
lität der Bilder ermöglichen, aber leider auch entsprechend groÿ sind. Andere Formate
wie z.B. JPEG sind eher auf die Gröÿe optimiert und können zu Lasten der Bildqualität
von der Dateigröÿe her sehr klein gemacht werden. Auch in Zeiten von schnellen Inter-
netanschlüssen ist dies immer noch ein Thema, da die Internetleitungen immer noch zu
langsam sind und die Ladezeit einer Seite doch auch ein entscheidender Faktor für den
Erfolg und die Akzeptanz einer Website sind.
Sollen groÿe Gra�ken oder Bilder gezeigt werden, ist zu überlegen, ob nicht eine klei-
ne Vorschau, die sich dann auf einen Mausklick hin vergröÿert, sinnvoll ist, um dem
Benutzer ein schnelles Laden der Seite zu ermöglichen.
Wichtig beim Verkleinern einer Gra�k für das Web ist auch, dass man sie nicht nur
verkleinert in die Seite einfügt, sondern wirklich verkleinert mit Hilfe einer Bildbearbei-
48
tung. Es gibt nämlich die Möglichkeit, eine Gra�k durch den Browser einfach verkleinert
darstellen zu lassen. Das verändert aber in keinster Weise die Gröÿe der Gra�k.
Abbildung 5.6: Ein Bild von der 11. Waldorf
SV-Tagung, unten im Hinter-
grund ist die Übersicht der
kleinen Vorschaubilder zu se-
hen
Auf Waldorf SV.de gibt es Gra�ken in
verschiedenen Formen. Zum einen gibt es
das Design: das Logo, einige Linien und
Schatten. Dann kann jeder Benutzer ein
kleines Benutzerbild hochladen, das ne-
ben allen seinen Einträgen erscheint. Au-
ÿerdem gibt es von den Tagungen Bilder-
galerien. Diese sind so realisiert, dass zu-
nächst eine Übersicht kleiner Vorschau-
bilder erscheint. Klickt man dann auf ei-
nes dieser Vorschaubilder, wird das ent-
sprechende Bild groÿ angezeigt (Abb.
5.6). Dies erfolgt mit Hilfe von JavaScript
bequem ohne das Neuladen der Seite.
Ebenso bequem kommt man durch nur
einen Klick auf das nächste oder vorhe-
rige Bild oder kann die groÿe Ansicht wieder schlieÿen.
5.6 Text im Web
Die meisten Menschen lesen einen langen Text am Bildschirm eher ungern. Und doch ist
der Text der zentrale Bestandteil einer Website, ohne ihn hat sie in der Regel eigentlich
überhaupt keine Berechtigung (Ausnahme: Sie ist zum Präsentieren von Bildern, Musik
oder Videos gedacht, dann reicht sehr wenig Text). Ein Text sollte also möglichst kurz
und prägnant sein und dennoch alle wesentlichen Informationen enthalten - hier gilt also
auch wieder KISS.
Beim Publizieren im Web sollten journalistische Grundsätze beachtet werden. Dies
bedeutet v.a., dass am Anfang das Wichtigste stehen sollte. Denn wenn ich auf einer
Website einen Text anschaue, möchte ich möglichst schnell wissen, ob der Text etwas
behandelt, das mich interessiert. Und um dies herauszu�nden, möchte ich nicht erst eini-
ge hundert Zeilen Text lesen müssen. Bei einem Experiment[65] wurde herausgefunden,
dass viele Menschen oft nur die Überschriften auf einer Seite bzw. die ersten Worte die-
ser Überschrift lesen. Auch Einführungssätze werden recht häu�g gelesen, während der
49
gesamte Text nur selten gelesen wird. Die wichtigsten und interessantesten Informatio-
nen sollten deshalb bereits in der Überschrift und der Einleitung präsent sein, damit der
Leser zum Weiterlesen angeregt wird.
Text am Bildschirm ist zumindest für die meisten Menschen schlechter lesbar als
ausgedruckt. Er sollte deshalb ausreichend groÿ (Schriftgröÿe) und gut formatiert sein,
d.h. es sollte Zwischenüberschriften geben, wichtige Wörter sollten hervorgehoben und
die Absätze nicht allzu lang sein. Ebenfalls wichtig ist, dass der Text gut verständlich
geschrieben ist, also z.B. Fach- und Fremdwörter je nach Zielgruppe verwenden und eher
einfache Sätze formulieren statt ewig langer Schachtelsätze.
Mit diesem Aspekt hatte ich praktisch relativ wenig zu tun, da die Inhalte der Waldorf
SV-Website gröÿtenteils von dem Sprecherkreis der Waldorf SV oder von den Benutzern,
die im Forum schreiben, erstellt werden.
5.7 Webstandards und semantischer Code
Standardkonformer und semantischer Code - was bedeutet das, wo sind hier die Schwie-
rigkeiten und was sind die Vorteile? Hierauf will ich in diesem Abschnitt eingehen.
Standardkonform bedeutet, dass die gültigen Standards des W3C befolgt werden.
Dadurch entsteht ein objektives Kriterium zur Überprüfung der Qualität einer Seite.
Die Einhaltung von Webstandards führt in der Regel zu einer schnelleren Darstellung
der Seite, da weniger Fehlerkorrekturen im Browser nötig sind. Auch die Kompatibilität
der Seite mit v.a. neueren Browsern wird sich verbessern, auch die Kompatibilität mit
Browsern auf mobilen Geräten, da diese keine Rechenkapazitäten zur Verfügung haben,
um Fehlerkorrekturen vornehmen zu können. Somit ist eine nach Standards gebaute
Website zukunftsfähig.
Im Zusammenhang mit Webstandards sollte man auch die Trennung von Inhalt und
Design beachten. Auch wenn diese Trennung nicht unbedingt zwingend von den Web-
standards vorgeschrieben wird, ist sie doch sehr zu empfehlen. Das bedeutet, dass im
HTML-Code nur der nach dem Sinn strukturierte Inhalt gefunden werden kann. Das
versteht man unter semantischem Code. Das Design sollte dann komplett über CSS er-
folgen. Dies hat gleich mehrere Vorteile. Zum einen verbessert sich die Barrierefreiheit in
der Regel dramatisch (mehr dazu im Kapitel 5.8). Zum anderen muss aber der CSS-Code
nur einmal geladen werden, wodurch sich auch die Ladezeit verbessert. Und nicht zuletzt
kann auch eine Suchmaschine in einem semantischen Code viel besser erkennen, was auf
einer Seite wichtig ist und so die jeweilige Seite besser im Suchindex berücksichtigen. Die
50
Trennung von Inhalt und Design bringt eine groÿe Flexibilität, da man mit Änderungen
an nur einer Stelle gleich das Design einer ganzen Website umstellen kann.
Abbildung 5.7: Die Website der
Waldorf SV in der
Druckansicht (die
erste Seite)
Ein weiterer Vorteil ist, dass man unteschiedliche
Darstellungsformen für unterschiedliche Zwecke de-
�nieren kann. So kann man ein Design für mobi-
le Geräte und ein Druckdesign ohne Navigation in
Schwarz/Weiÿ erstellen. Letzteres habe ich bei der
Waldorf SV-Website gemacht. Die Navigationen so-
wie weitere Elemente wie die Links zum Bearbeiten
eines Artikels werden dabei versteckt und die Sei-
te wird weitestgehend schwarz-weiÿ dargestellt (Abb.
5.7).
Man spricht, was den HTML-Code angeht, auch
von physischer und semantischer Auszeichnung. Der
Unterschied hierbei ist, dass physische Auszeichnung
direkt das Aussehen betri�t. Ein typisches Beispiel
wäre z.B. die fette, kursive oder besonders groÿe Dar-
stellung von Text. Semantische Auszeichnung betri�t
dagegen die Bedeutung. Die analogen Beispiele zu
den vorigen wäre hier z.B. die Hervorhebung, Be-
tonung oder eine Überschrift. Im normalen Browser
können die E�ekte ganz ähnlich sein, eine Hervorhe-
bung wird in der Regel zu fettem, eine Betonung zu kursivem und eine Überschrift zu
besonders groÿem Text führen. Will dagegen ein Programm die Struktur eines Doku-
ments analysieren (wie z.B. eine Suchmaschine), dann hilft semantische Auszeichnung
viel mehr als physische. Und mit CSS kann man auch sämtliche Elemente der semanti-
schen Auszeichnung so formatieren, wie man es sich vorstellt.
Einziger Nachteil bei der strikten Einhaltung der Trennung von Inhalt und Design ist,
dass man oft Probleme mit einzelnen, veralteten Browsern bekommt (siehe auch Kapitel
5.9). Die Einhaltung von Webstandards erfordert so v.a. auch einen langen Atem, viele
Ideen zur Problemlösung und die Bereitschaft, sich mit vielen Aspekten des Layouts und
des Verhaltens einzelner Elemente im HTML-Code auseinanderzusetzen. Keine einfache,
aber eine sehr lohnende Aufgabe.
Die Prinzipien der Trennung von Inhalt und Design sowie der Einsatz von semanti-
schem Code sind auf Waldorf-SV.de weitestgehend angewendet. Nur relativ kleine zu-
51
sätzliche Dinge für das Design sind im HTML-Code vorhanden, dies ist aber normal und
leider mit den derzeit gültigen und verbreiteten Standards nicht anders lösbar.
5.8 Barrierefreiheit
Abbildung 5.8: Eine Braille-Zeile
aus der Nähe [14]
Barrierefreiheit - eigentlich einfach und selbstver-
ständlich: Jeder sollte eine Website ohne Probleme
(=Barrieren) benutzen können, also z.B. unabhängig
von körperlichen Einschränkungen. Doch wenn man
sich genauer damit beschäftigt, erkennt man, dass
diese Barrieren erheblich und teilweise kaum über-
windbar sein können. Besondere Probleme haben na-
türlich blinde Menschen, die Websites nur über ei-
ne Sprachausgabe oder eine Braille-Zeile (siehe Abb.
5.8) wahrnehmen können. Dies ist v.a. bei langen Sei-
ten ohne Möglichkeiten zum Überspringen sehr müh-
sam. Besondere Hürden stellen Bilder dar. Bei diesen
sollte prinzipiell ein Alternativtext angegeben werden, der dargestellt bzw. vorgelesen
wird. Dies ist generell sinnvoll, da er auch angezeigt wird, wenn das Bild nicht verfügbar
oder nicht anzeigbar ist. Wenn das Bild nicht nur ein hübsches Foto ist, sondern wich-
tigen Text enthält, ist ein Alternativtext unbedingt notwendig. Auch bei Formularen
können sich Blinde unter Umständen schwer tun, v.a. wenn nicht klar ersichtlich ist, wo
welcher Text eingegeben werden muss. Hierzu gibt es ein spezielles HTML-Tag �label�,
mit dem ein Text eindeutig einem Formularelement zugeordnet werden kann.
Weiterhin wichtig für Screenreader (die Software, die eine Website in Sprache umwan-
delt) ist, dass HTML-Tags zur Auszeichnung sinnvoll verwendet werden, da z.B. eine
Überschrift anders interpretiert und vorgelesen wird als einfach nur fetter Text. Hier ist
es wichtig, sauber zwischen Inhalt und Design zu trennen.
Doch nicht nur blinde Personen sollten berücksichtigt werden, viel gröÿer ist die
Zahl derjenigen, deren optische Wahrnehmungsfähigkeit eingeschränkt ist. Oft genügt
es, wenn die Schrift vergröÿerbar ist. Manchmal sind aber auch spezielle Kontraste nö-
tig. Für bestimmte Menschen ist es z.B. schmerzhaft, Text auf einem hellen (weiÿen)
Hintergrund lesen zu müssen. In der EU leben ca. 37 Millionen Menschen mit verschie-
densten Arten von Behinderungen, von Sehschwäche angefangen bis hin zu Blindheit
und Mehrfachbehinderungen.
52
Für Webdesigner ist es natürlich nahezu unmöglich, auf alle Bedürfnisse einzugehen,
doch sollte zumindest ein ausreichender Kontrast vorhanden sein und die Seite sollte
auch mit selbst eingestellten Farben noch benutzbar sein.
Auch motorische Behinderungen können das Surfen im Internet einschränken. Spezielle
Trackballs, die Tastatur oder gar Sensoren am Kopf (Alternativen zur Maus) sind nicht
unbedingt dazu geeignet, eine Seite zu bedienen, bei der anklickbare Flächen nur winzig
sind und die Navigation umständlich ist und mehrfach erst ausgeklappt werden muss,
indem die Maus über eine Reihe von Einträgen bewegt wird (ein sogenanntes Drop-down-
Menü). Eine einfach zu bedienende Navigation gehört deshalb auch zur Barrierefreiheit.
Auch neuartige Ausgabegeräte wie Handys stellen Webdesigner vor neue Herausfor-
derungen, sofern man diese Geräte berücksichtigen will. Kleine Displays haben oft eine
hohe Au�ösung, d.h. viele Bildpunkte auf einer kleinen Fläche und somit ist es wichtig,
dass die Schrift lesbar ist und nicht zu klein gemacht wird.
Webstandards sind nicht gleichbedeutend mit Barrierefreiheit, aber sie sind ein Ele-
ment davon. Wenn Inhalt und Design sauber getrennt sind, ist es viel einfacher, ein
eigenes Design zu benutzen und die Darstellung auf kleinen Displays (Handys) funktio-
niert auch zuverlässiger.
Barrierefreiheit hört aber nicht bei der Gestaltung auf, auch der Inhalt sollte barrie-
refrei sein, wenn es wichtig ist, dass er von vielen Menschen verstanden wird. Konkret
heiÿt das, dass keine zu komplexen Sätze verwendet und Fremdwörter sparsam benutzt
und erklärt bzw. mit einer Erklärung verlinkt werden sollten.
Die umfassende Gestaltung einer Website nach Grundsätzen der Barrierefreiheit ist
ein Thema, das weit über den Umfang einer Jahresarbeit hinaus geht. Auf der Web-
site der Waldorf SV sind deshalb nur einige grundlegende Dinge umgesetzt. Der Code
der Waldorf SV-Seite ist relativ gut und auch ohne den CSS-Code für das Design noch
gut darstellbar, wie auch das Bildschirmfoto des Kommandozeilen-Browsers w3m zeigt
(Abb. 5.9). Nirgends auf der Seite gibt es elementare Dinge wie die Navigation, die
ohne Gra�k nicht darstellbar sind. Ein Punkt, den man allerdings noch überarbeiten
müsste, ist die Bildergalerie. Hier werden weit über 100 Fotos ohne jede Beschreibung in
Textform gezeigt. Dies wirklich barrierefrei umzusetzen, inklusive der Anzeige der Bilder
in voller Gröÿe, die im Moment ohne JavaScript (bei Screenreadern und Textbrowsern
meist nicht verfügbar) nur sehr schlecht funktioniert, wäre allerdings ein immenser Auf-
wand. Einen weiteren Kompromiss bin ich in Bezug auf die Schriftgröÿe eingegangen.
Eigentlich sollte man diese nicht festlegen, sondern abhängig von der Schriftgröÿe, die
der Benutzer de�niert hat, verwenden. Da jedoch die meisten Benutzer hier leider keine
53
Abbildung 5.9: Die Website der Waldorf SV in dem Kommandozeilen-Browser w3m.
Diese Ansicht könnte ein Blinder mit seiner Braille-Zeile lesen.
54
sinnvolle Gröÿe eingestellt haben, habe ich mich (wie die meisten Websites) für eine
feste Schriftgröÿe entschieden. Diese kann allerdings in modernen Browsern trotzdem
verkleinert oder vergröÿert werden. So weit es mir bekannt ist, sind alle Funktionen der
Waldorf SV-Website bis auf die schon angesprochene Bildergalerie auch für behinderte
Personen zu bedienen.
5.9 Browser-Kompatibilität
Abbildung 5.10: Eine ironisch zu verstehende Gra�k über den Zeitaufwand beim
Webdesign[16]
Ein Benutzer erwartet natürlich, dass eine Website in jedem Browser gleich aussieht.
Da es Standards gibt, könnte man auch meinen, das sei wirklich der Fall und nicht sehr
schwierig. Die Wahrheit ist, dass es zwar Standards gibt, diese aber von so gut wie
keinem Browser exakt eingehalten werden und so sehr viel Zeit in die Anpassung einer
Website für verschiedene Browser verwendet werden muss. Eine besondere Rolle spielt
hier der Internet Explorer von Microsoft, da er zum einen vieles nicht oder nur falsch
kann und zum anderen aber bedauerlicherweise der verbreitetste Browser ist.
So kann leider nur ein Teil der Möglichkeiten genutzt werden und komplizierte De-
signs sind oft nur unschön und kompliziert oder gar nicht realisierbar. Deshalb sind oft
bestimmte Tricks, auch Hacks genannt, nötig, die teilweise nicht einmal dem Standard
55
entsprechen. Dabei muss man aber sehr aufpassen. Denn je mehr man solche Hacks
verwendet, desto leichter gerät einem das Design aus der Kontrolle, da man nicht mehr
wirklich nachvollziehen kann, was eine Änderung in einem Browser bewirkt. Ein besonde-
res Problem ist dabei auch, dass nicht alle Browser unter allen Betriebssystemen genutzt
werden können. Das Testen wird dementsprechend aufwändig und damit zu einer der
zeitaufwändigsten Arbeiten eines Webdesigners.
Meine Erfahrungen bestätigen die Gra�k in der Abb. 5.10, dass besonders die Optimie-
rung des Designs für den InternetExplorer die zeitaufwändigste und nervenaufreibendste
Arbeit ist, bei der man sich oft wünscht, es gäbe den InternetExplorer nicht, es würde
ihn niemand nutzen oder er würde die Standards korrekt umsetzen. Natürlich wird kei-
ner dieser Wünsche erfüllt, auch wenn der InternetExplorer in der aktuellen Version 7,
die sich allerdings nur langsam verbreitet, sich etwas gebessert hat. Die in der Gra�k
erwähnten Probleme mit JavaScript hatte ich zum Glück nicht, da ich keinen eigenen
JavaScript-Code geschrieben habe. Auch das in der Gra�k beschriebene Aufgeben kann
ich bei mir zum Glück nicht bestätigen, ich habe das Design wirklich ohne Tabellen
umgesetzt.
Ich möchte an dieser Stelle nur ein Beispiel ein wenig näher erläutern. Es betri�t die
Navigation der Waldorf SV-Website. Gleich drei Probleme sind auf der Abbildung 5.11
zu sehen: erstens zusätzliche, graue Symbole vor den eigentlichen Einträgen; zweitens
zu groÿe Abstände zwischen den Menüeinträgen. Und drittens sieht man beim genauen
Betrachten, dass die blauen Symbole einen rechteckigen, grauen Hintergrund haben.
Zunächst zu den grauen Symbolen: Dies sind die Symbole, die Drupal von sich aus für
das Menü vorgesehen hat. Mit meinem eigenen CSS-Code habe ich diese überschrieben
bzw. deaktiviert. Doch der Internet Explorer setzt die Prioritäten der verschiedenen
Deklarationen der CSS-Regeln nicht richtig und deshalb bleiben die Symbole trotzdem
erhalten. Dieses Problem habe ich gelöst, indem ich einfach die alten Symbole entfernt
habe.
Das Problem der Abstände war mir bereits von anderen Websites, die ich gestaltet
hatte, bekannt. Indem ich die Breite der Menüeinträge explizit de�niert hatte, war das
Problem verschwunden. Dies war hier aber auf Grund der unterschiedlichen Breite der
Einträge und weiterer Faktoren, die zu unschönen E�ekten im Internet Explorer führten,
nicht möglich. Ich fand dann den Hinweis auf die Möglichkeit, eine Höhe von 1% zu
de�nieren, um derartige Probleme zu lösen. Es funktionierte tatsächlich. Rein technisch
macht diese Angabe nicht wirklich Sinn und sie bewirkt in �normalen� Browsern auch
nichts. Doch im Internet Explorer schaltet diese Angabe eine entscheidende Stelle in der
56
Darstellung um, wodurch der Fehler verschwindet. Dieses Problem und weitere Probleme
zu lösen, die in diesem Zusammenhang auf Grund anderer Lösungsversuche auftraten,
war eine der schwierigsten Dinge im Bereich der Browseroptimierung.
Abbildung 5.11: Das Menü in ei-
nem frühen Sta-
dium im Micro-
soft Internet Ex-
plorer 6
Nun noch zu dem grauen Hintergrund: Dies hängt
damit zusammen, dass Gra�ken immer eckig sein
müssen. Somit muss ein Teil der Gra�k transparent
sein, damit man den Hintergrund durchsieht. Trans-
parenz wird prinzipiell von zwei im Web nutzbaren
Gra�kformaten beherrscht: GIF und PNG. Das Pro-
blem bei GIF-Gra�ken ist allerdings, dass bei die-
sen ein Pixel entweder transparent ist oder nicht,
d.h. es gibt keine Zwischenstufen. Da man diese bei
Rundungen aber benötigt, damit optisch keine Stu-
fen entstehen, und ich wegen wechselnder Hinter-
grundfarben keine unschönen Farbe�ekte oder meh-
rere Gra�ken für unterschiedliche Hintergründe be-
reitstellen wollte, habe ich mich für PNG entschie-
den. Hier ist allerdings das Problem, dass der In-
ternet Explorer PNG-Transparenz nicht richtig be-
herrscht, d.h. statt eines wirklich transparenten Hin-
tergrundes einen grauen Hintergrund verwendet. Im
aktuellen, sich langsam verbreitenden Internet Ex-
plorer 7 ist dieses Problem behoben. Es gibt zwar
eine Möglichkeit, den Internet Explorer 6 mit einem
Trick transparente PNGs korrekt anzeigen zu lassen,
doch hier lieÿ sich nach meinen Erfahrungen das Bild nicht mehr positionieren, was
jedoch im vorliegenden Fall nötig gewesen wäre.
5.10 Sicherheit auf Websites
Wenn man auf einer Website persönliche Daten angibt und sich mit einem Passwort
anmeldet, erwartet man als Benutzer eigentlich, dass die Daten sicher gespeichert und vor
unbefugtem Zugri� geschützt sind. Dass das leider nicht immer so ist, das ist ein Aspekt
der Sicherheit, auf den ich hier eingehen möchte. Ein anderer ist das Verö�entlichen von
sogenanntem Spam auf Internetseiten. D.h. gezielt, um Suchmaschinen und Benutzer
57
auf bestimmte Seiten zu locken, werden auf einer Website, z.B. in Kommentaren oder
Gästebüchern, von sogenannten Bots (Software, die dies ohne das Zutun von Menschen
macht) v.a. Links verö�entlicht.
Nun zurück zu der Sicherheit von Daten, die auf Websites eingegeben wurden. Es gibt
ein generelles Problem beim Betrieb von Websites, auf denen Daten eingegeben wer-
den: Die an die Seite geschickten Daten können beliebigen Inhalt haben und die Website
bzw. das dahinter steckende System muss mit diesen Daten zurecht kommen. Und genau
hier passieren leider sehr oft Fehler, weil es einfach schnell gehen muss, Zeitverzug Geld
kostet und die Konkurrenz im übrigen auch nicht schläft. Die meisten dieser Websites
haben im Hintergrund eine Datenbank, in der die gesamten Daten gespeichert werden
müssen. Eine Datenbank kann man sich als eine Sammlung von Tabellen vorstellen. Das
Problem ist nun, dass diese Datenbank eine extra Software ist und über Befehle gesteu-
ert wird. Diese Befehle müssen natürlich auch die Daten enthalten, die gespeichert oder
abgefragt werden sollen. Die Daten müssen in Anführungszeichen eingeschlossen werden,
und hier haben wir gleich das Problem: Alle in den Daten vorkommenden Anführungs-
zeichen müssen entsprechend maskiert werden, d.h. alle in den Daten vorkommenden
Anführungszeichen müssen durch \" ersetzt werden, um der Datenbank klar zu machen,
dass diese Anführungszeichen zu den Daten und nicht zu den Befehlen gehören. Macht
die Software dies nicht, besteht u.U. bei entsprechender Dateneingabe die Möglichkeit,
an die komplette Datenbank zu kommen oder zumindest beliebige Befehle in der Da-
tenbank auszuführen, da der aktuelle Befehl beendet und ein neuer begonnen werden
kann. Da die Datenbank meist über SQL-Code angesteuert wird, nennt man diese Art
des Angri�s �SQL-Injektion�. Im Extremfall kann hierdurch sogar Zugri� auf den Server
erlangt werden, auf dem die Datenbank läuft.
Eine relativ verbreitete Sicherheitslücke ist das Cross Site Scripting, kurz XSS. Hierbei
wird ebenfalls über unge�lterte Benutzereingaben Code in die Seite eingeschleust, der
aber in diesem Fall nicht für die Datenbank bestimmt ist, sondern im Browser des Be-
nutzers ausgeführt werden soll - meist JavaScript-Code. Eine Attacke funktioniert hier
so, dass einem Benutzer z.B. über eine Website oder eine E-Mail ein manipulierter Link
geschickt wird, der dann auf der Zielseite die Anzeige von Code zur Folge hat, der beim
Benutzer ausgeführt wird. Dieser Code schickt dann nicht ö�entliche Dinge, die auf der
Seite des Benutzers zu sehen sind oder die er eingibt, auf den Server des Angreifers.
Hierdurch können Anmeldeinformationen ausgespäht werden oder auf Internetshops so-
gar Bank- oder Kreditkartendaten. Häu�g treten derartige Lücken in der Suchfunktion
einer Seite auf, d.h. dass über das Suchwort JavaScript-Code eingeschleust werden kann.
58
XSS ist durchaus verbreitet und es sind immer wieder auch groÿe, viel besuchte Seiten
betro�en. Anfang Oktober 2005 war z.B. MySpace von einer solchen Lücke betro�en
und es gab ein kurzes Script, das dies ausnutzte, um sich mittels Freundschaftseinladun-
gen zu verbreiten und bei diesen neuen Freunden dann wieder Freundschaftseinladungen
mit sich selbst zu versenden usw. Dies führte zu einer exponentiellen Verbreitung die-
ses Wurms, was MySpace nahezu vollständig lahm legte. Der Autor des Codes, selbst
MySpace Nutzer, hat nach eigenen Angaben nicht mit dieser Verbreitung gerechnet,
der Code sei ein erster Versuch der Web-Entwicklung mit JavaScript und in JavaScript
generierten Anfragen zum Server (Ajax) gewesen.
Abbildung 5.12: Eine typische phishing-E-Mail, die vorgibt, von der Sparkasse zu sein
Eine weitere sehr gefährliche Angri�sform ist das sog. Phishing. Hier wird versucht,
den Benutzer über entsprechend präparierte Websites und auch E-Mails dazu zu be-
wegen, geheime Daten einzugeben. Sehr verbreitet ist, dass angeblich von der eigenen
Bank stammende E-Mails versendet werden (siehe Abb. 5.12), die den Benutzer dazu
au�ordern, den geheimen Zugangscode (PIN) sowie zwei weitere Codes einzugeben, die
benötigt werden, um Überweisungen auszuführen (TANs, hiervon kann jede nur ein-
mal verwendet werden). Die so erhobenen Daten werden dann benutzt, um von dem
Bankkonto des Opfers Geld zu überweisen. Auch hier gibt es wieder ein Beispiel mit
MySpace. Mitte Februar 2006 kursierten im Internet 7500 Datensätze von MySpace
mit Benutzernamen und dazugehörigem Passwort, die laut Medienberichten durch ei-
ne solche Phishing - Attacke erlangt wurden. Eine wirkliche Absicherung gegen solche
Attacken gibt es nicht, das einzige, was man machen kann, ist, immer wieder darauf
hinzuweisen, dass man niemals von o�zieller Seite in einer E-Mail oder am Telefon oder
59
auf einem anderen Wege dazu aufgefordert wird, derartige Daten preiszugeben.
Abbildung 5.13: Beispiel eines
Captchas (Lö-
sung: MV52RQ)
Ein weiterer Aspekt, den ich hier ansprechen
möchte, ist der schon erwähnte Spam. Hierbei wird,
wie am Anfang dieses Kapitels schon erwähnt, durch
Software versucht, in Kommentaren und Gästebü-
chern (und auch in Wikis) Links zu verö�entli-
chen, die der Suchmaschinenoptimierung dienen. Ich
möchte hier nun v.a. auf die Gegenmaÿnahmen ein-
gehen. Zunächst kann man natürlich die Kommenta-
re, Gästebücher etc. einfach abschalten, das ist aber vermutlich keine erwünschte Lösung.
Des weiteren gibt es die Möglichkeit, Links in Kommentaren automatisch so zu kenn-
zeichnen, dass sie von Suchmaschinen nicht mehr beachtet werden. Dadurch wird die
entsprechende Seite für Spammer unattraktiv, trotzdem können aber immer noch viele
Spam-Kommentare auf der Seite landen. Eine recht e�ektive Methode der Bekämpfung
besteht darin, dass man Captchas einsetzt. Captchas sind automatische Tests zur Un-
terscheidung von Menschen und Maschinen. Hierbei wird ausgenutzt, dass der Mensch
viele Aufgaben lösen kann, die der Computer nicht lösen kann. Meist werden dabei Bil-
der verwendet, die verzerrte und oft durch Farben schwer lesbar gemachte Buchstaben
und Zahlen enthalten, die der Benutzer in einem Formular eintragen muss (siehe Abb.
5.13). Da Blinde dies natürlich nicht können, wird manchmal auch eine akustische Ent-
sprechung der Aufgabe bereit gestellt. Derartige Captchas können allerdings manchmal
von speziell geschriebenen Computerprogrammen gelöst werden. Eine weitere Technik
von Spammern, diese Captchas zu lösen, ist, sie in andere Websites von ihnen einzublen-
den und dort von Benutzern lösen zu lassen, z.B. um Zugang zu einer pornographischen
Website zu erlangen.
Bei der Website der Waldorf SV habe ich mich kaum mit dem ersten Teil der hier
besprochenen Sicherheitsprobleme beschäftigt, da ich ein fertiges CMS und keinen eige-
nen Code verwendet habe, der für die Sicherheit relevant ist. Lediglich das regelmäÿige
Aktualisieren des Content Management Systems, v.a. bei bekannt gewordenen Sicher-
heitslücken, ist notwendig.
Anfangs gab es im Gästebuch der Waldorf SV massiven Spam, bis zu 50 oder sogar
mehr Einträge pro Tag. Dieses Problem habe ich behoben, indem ich eine sehr simple
Abfrage eingebaut habe: Es gibt jetzt ein Eingabefeld, vor dem 4+5 steht. Und der
Benutzer musste einfach 9 eintragen. Da diese Lösung extra für die Seite gebaut ist und
es keine Spam-Software gibt, die dies unterstützt, gab es seitdem keinen mir bekannten
60
Abbildung 5.14: Das Eingabeformular des Gästebuchs der Waldorf SV mit Captcha
Spam-Eintrag mehr.
Da sich allerdings im Laufe der Zeit auch Benutzer, die keine Benutzer sind, also ver-
mutlich Bots, angemeldet haben und es auch bei den Kommentaren Spam gab, habe
ich mich entschlossen, eine Captcha - Erweiterung zu installieren. Diese kommt jetzt bei
der Benutzerregistrierung (vor der Anmeldung nötig), beim Eintragen von Kommenta-
ren und beim Erstellen von Gästebucheinträgen zum Einsatz. Sie scheint bis jetzt sehr
zuverlässig zu funktionieren.
61
6 Fazit
Was es heiÿt, eine Website mit allen ihren Elementen, Überschriften, Kommentar-Blöcken,
Menüs, Meldungen usw. zu gestalten, das konnte ich während meiner Jahresarbeit sehr
gut erfahren. Es war oft kompliziert und nervenaufreibend, v.a. wenn ich dann auch noch
im Internet Explorer alles funktionstüchtig machen musste. Doch es war auch immer wie-
der faszinierend zu erleben, dass es doch funktioniert. Ich habe viel Neues gelernt und
mittlerweile wesentlich weniger Probleme, mir die Umsetzung eines bestimmten Designs
oder eine Änderung vorzustellen.
Die Websites, die ich für meine Jahresarbeit gestaltet habe, werden ganz sicher nicht
die letzten sein. Ob es die Mitarbeit bei einem (freien) Software - Projekt oder meine
eigene Seite ist, ich habe bereits jetzt viele Möglichkeiten, mein Wissen einzubringen.
Bei dem Projekt YaCy, das eine dezentrale Suchmaschine (eine interessante Alternative
zu Google) entwickelt, bin ich mittlerweile derjenige geworden, der gefragt wird, wenn
es um Darstellungsprobleme im Webinterface geht oder eine neue Möglichkeit gesucht
wird, Informationen zu präsentieren.
Auch wenn Webdesign nicht mein Berufsziel ist, da es mir eher schwer fällt, ein gut
aussehendes Design zu entwerfen, denke ich doch, dass es mich weiter begleiten wird.
Zur Zeit habe ich vor, Informatik zu studieren. Kenntnisse im Bereich des Webdesigns
sind während dieses Studiums und vielleicht sogar noch später in meinem Berufsleben
sicher hilfreich. Ich kann mir auch gut vorstellen, mit Webdesign in naher Zukunft Geld
zu verdienen, um z.B. mein Studium zu �nanzieren.
Ganz herzlich bedanken möchte ich mich bei meinen Betreuern. Dies war zum einen
Herr Alexander Rebholz, der professioneller Webdesigner für die Firma SÜSS Microtec
ist. Ich hatte ihn bereits bei meinem Betriebspraktikum kennen gelernt. Er betreute
mich von der fachlichen Seite her und konnte auf meine Fragen fundiert antworten.
Auch im Hinblick auf den Inhalt meiner theoretischen Arbeit hat er mich gut beraten.
Zum anderen betreute mich Herr Vastag von der Schule, v.a. auch in Hinblick auf meine
Präsentation.
Bedanken möchte ich mich auch bei meinen Eltern, die viel Geduld mit mir hatten,
62
wenn ich mal wieder stundenlang und bis tief in die Nacht hinein vor dem PC saÿ
und kein Ende fand, besonders auch bei meiner Mutter, die mir bei der Korrektur der
schriftlichen Arbeit geholfen und mich im Hinblick auf die Präsentation unterstützt hat.
Des weiteren ein herzliches Dankeschön an die Waldorf SV, die mir meinen praktischen
Teil ermöglicht hat und sich bereitwillig auf ihre neue Website eingelassen hat. Ein ganz
besonderes Dankeschön geht hier v.a. an Tobias Wollowski, der bis vor kurzem vom
Sprecherkreis der Waldorf SV für die Website zuständig war, aber auch Michel Arnd
und Johanna Rose, die mir immer wieder mit Feedback zur Seite standen.
63
Literaturverzeichnis
[1] IEBlog: Standards and CSS in IE - https://blogs.msdn.com/ie/archive/2005/
07/29/445242.aspx (Stand: 27.12.2006)
[2] SelfHTML - http://de.selfhtml.org (Stand: 7.6.2007)
[3] Dave Shea, Molly E. Holzschlag: Zen und die Kunst des CSS-Designs, Addison-
Wesley 2005
[4] Molly E. Holzschlag: Farbe für Websites, Rowohlt Taschenbuch Verlag GmbH, Rein-
bek bei Hamburg, März 2002
[5] Wikipedia: Website: http://de.wikipedia.org/wiki/Website (Stand: 7.6.2007)
[6] Wikipedia: Webseite: http://de.wikipedia.org/wiki/Webseite (Stand: 7.6.2007)
[7] Wikipedia: Hypertext Markup Language: http://de.wikipedia.org/wiki/
Hypertext_Markup_Language (Stand: 7.6.2007)
[8] Wikipedia: Extensible Hypertext Markup Language: http://de.wikipedia.org/
wiki/Extensible_Hypertext_Markup_Language (Stand: 7.6.2007)
[9] Wikipedia: Cascading Style Sheets: http://de.wikipedia.org/wiki/Cascading_
Style_Sheets (Stand: 7.6.2007)
[10] Wikipedia: WYSIWYG: http://de.wikipedia.org/wiki/WYSIWYG (Stand:
7.6.2007)
[11] A Little History of the World Wide Web: http://www.w3.org/History.html
(Stand: 7.6.2007)
[12] Heinz-Dirk Luckhardt: Virtuelles Handbuch Informationswissenschaft - Kriterien
für das Webpublishing - http://is.uni-sb.de/studium/handbuch/webpush.html
(Stand: 9.4.2007)
64
[13] Usability, Kommunikation, Psychologie, Software-Ergonomie, Webdesign, Medien-
informatik - KommDesign.de (diverse Texte) http://www.kommdesign.de/ (Stand:
8.6.2007)
[14] Foto einer Braille-Zeile: http://de.wikipedia.org/wiki/Bild:Refreshable_
Braille_display.jpg (Stand: 9.4.2007)
[15] Teresia Kuhr, Barrierefreies Internet: http://www.webkrauts.de/2004/12/04/
barrierefreies-internet/ (Stand: 11.4.2007)
[16] Alan �IE users must DIE� Foreman, Time Breakdown of modern Web Design:
http://poisonedminds.com/comics/pm20060621.png (existiert nicht mehr, alter-
native Quelle: http://unixkiste.org/fun/pm20060621.png, Stand: 14.4.2007)
[17] Wikipedia: World Wide Web Consortium: http://de.wikipedia.org/wiki/
World_Wide_Web_Consortium (Stand: 7.6.2007)
[18] Wikipedia: Hypertext: http://de.wikipedia.org/wiki/Hypertext (Stand:
6.6.2007)
[19] Wikipedia: Domain: http://de.wikipedia.org/wiki/Domain (Stand: 9.6.2007)
[20] plazes.com: http://beta.plazes.com/ (Stand: 15.4.2007)
[21] Netz2.0 - Das Web2.0 auf gut deutsch (Gra�k): http://nonfiction.
ig-gestaltung.de/wp-content/web20map_de.png (Stand: 16.5.2007)
[22] Besim Karadeniz: netplanet - Geschichte des Internet - Das Phänomen World
Wide Web: http://www.netplanet.org/geschichte/worldwideweb.shtml (Stand:
19.5.2007)
[23] Tim Berners-Lee ( c©CERN) (Foto): http://www.netplanet.org/geschichte/
images/tim_berners-lee.jpg (Stand: 19.5.2007)
[24] Wikipedia: AltaVista: http://de.wikipedia.org/wiki/AltaVista (Stand:
8.6.2007)
[25] css Zen Garden: The Beauty in CSS Design (Invasion of the Body Switchers by An-
dy Clarke): http://csszengarden.com/?cssfile=/142/142.css&page=7 (Stand:
8.6.2007)
65
[26] Wikipedia: Dotcom-Blase: http://de.wikipedia.org/wiki/Dotcom-Blase
(Stand: 19.5.2007)
[27] Amazon.de: Günstige Preise bei Elektronik & Foto, DVD, Musik, Bücher, Games,
Spielwaren & mehr: http://www.amazon.de/ (Stand: 9.6.2007)
[28] Chaosradio: CR112 Web 2.0: http://chaosradio.ccc.de/cr112.html (Stand:
8.6.2007)
[29] Wikipedia: Web 2.0: http://de.wikipedia.org/wiki/Web_2.0 (Stand: 8.6.2007)
[30] Wikipedia: Podcasting: http://de.wikipedia.org/wiki/Podcasting (Stand:
8.6.2007)
[31] Wikipedia: Wiki: http://de.wikipedia.org/wiki/Wiki (Stand: 25.5.2007)
[32] Joshua Porter: The Long Tail and Web 2.0: http://bokardo.com/archives/
long-tail-web2/ (Stand: 26.5.2007)
[33] Wikipedia: Long Tail http://de.wikipedia.org/wiki/Long_Tail (Stand:
9.6.2007)
[34] Wikipedia: Wikipedia: http://de.wikipedia.org/wiki/Wikipedia (Stand:
27.5.2007)
[35] Wikipedia: Hauptseite: http://de.wikipedia.org/wiki/Hauptseite (Stand:
4.6.2007)
[36] Wikipedia: Yahoo!: http://de.wikipedia.org/wiki/Yahoo%21 (Stand: 27.5.2007)
[37] Wikipedia: Google: http://de.wikipedia.org/wiki/Google (Stand: 27.5.2007)
[38] Wikipedia: del.icio.us: http://de.wikipedia.org/wiki/Del.icio.us (Stand:
8.6.2007)
[39] del.icio.us: http://del.icio.us/ (Stand: 4.6.2007)
[40] netzpolitik.org: � Aktuelle Berichterstattung rund um die politischen Themen der
Informationsgesellschaft.: http://netzpolitik.org (Stand: 4.6.2007)
[41] BILDblog | Kritische Notizen über eine groÿe deutsche Boulevardzeitung: http:
//www.bildblog.de/ (Stand: 27.5.2007)
66
[42] Wikipedia: Technorati: http://de.wikipedia.org/wiki/Technorati (Stand:
27.5.2007)
[43] Technorati: Home: http://technorati.com/ (Stand: 27.5.2007)
[44] Wikipedia: MySpace: http://de.wikipedia.org/wiki/MySpace (Stand:
27.5.2007)
[45] MySpace: http://www.myspace.com (Stand: 27.5.2007)
[46] TP: �Bart Simpson Child Fucker�: http://www.heise.de/tp/r4/artikel/24/
24809/1.html (Stand: 8.6.2007)
[47] Themenblog: Warum sich Geschichte (im Internet) nicht wiederholt: http://www.
themenblog.de/2007/03/warum_sich_geschichte_im_internet_nicht.html
[48] Wikipedia: Google AdWords: http://de.wikipedia.org/wiki/Google_AdWords
(Stand: 8.6.2007)
[49] Welcome to Flickr - Photo Sharing: http://www.flickr.com/ (Stand: 8.6.2007)
[50] YouTube - Broadcast Yourself.: http://www.youtube.com/ (Stand: 8.6.2007)
[51] Web2.0 Logo Creator by Alex P: http://h-master.net/web2.0/index.php
(Stand: 8.6.2007)
[52] Home - Plazes - Right Plaze, Right People, Right Time: http://plazes.com
(Stand: 8.6.2007)
[53] Wikipedia: RSS: http://de.wikipedia.org/wiki/RSS (Stand: 8.6.2007)
[54] TP: Moblogging: http://www.heise.de/tp/r4/artikel/15/15342/1.html
(Stand: 8.6.2007)
[55] Wikipedia: Digg: http://de.wikipedia.org/wiki/Digg (Stand: 27.5.2007)
[56] Digg / News: http://digg.com/ (Stand: 27.5.2007)
[57] Bokardo � Live by the Digg, Die by the Digg: http://bokardo.com/archives/
live-by-the-digg-die-by-the-digg/ (Stand: 27.5.2007)
67
[58] Max Völkel: Semantic Wikipedia: http://xam.de/2006/
10-23-WebMontag-SemanticMediaWik-voelkel.pdf (Vortrag am 23.10.2006
beim WebMontag in Stuttgart - http://www.webmontag.de/doku.php?id=23.10.
2006_stuttgart)
[59] Wikipedia: Second Life: http://de.wikipedia.org/wiki/Second_Life (Stand:
5.6.2007)
[60] Second Life: Your World. Your Imagination.: http://secondlife.com/ (Stand:
5.6.2007)
[61] Second Life und der 5. Webmontag in Stuttgart � henning-
schuerig.de/blog: http://www.henningschuerig.de/blog/2007/04/03/
second-life-und-der-5-webmontag-in-stuttgart/ (Stand: 8.6.2007)
[62] Wikipedia: Lost in Hyperspace: http://de.wikipedia.org/wiki/Lost_in_
Hyperspace (Stand: 30.5.2007)
[63] Wikipedia: KISS-Prinzip: http://de.wikipedia.org/wiki/KISS-Prinzip
(Stand: 30.5.2007)
[64] Eyetrack III - Navigation: http://www.poynterextra.org/eyetrack2004/
navigation.htm (Stand: 31.5.2007)
[65] Eyetrack III - Article-Level Page Design: http://www.poynterextra.org/
eyetrack2004/articlepages.htm (Stand: 1.6.2007)
[66] Ralph G. Schulz: Webstandards versus Barrierefreiheit: http://www.webkrauts.
de/2006/08/30/webstandards-versus-barrierefreiheit/ (Stand: 1.6.2007)
[67] WEB for ALL - Empfehlungen für ein barrierefreies Webdesign: http://www.
webforall-heidelberg.de/html/deutsch/empfehlungen.php (Stand: 1.6.2007)
[68] Webstandards für Entscheider � Hasematzel.de, ein Blog von Oliver Schwarz:
http://hasematzel.de/blog/2006/04/10/webstandards-fur-entscheider/
(Stand: 2.6.2007)
[69] Die Vorteile von Web-Standards für Ihre Besucher, Ihre Kunden und Sie selbst!:
http://www.hessendscher.de/benefits/ (Stand: 2.6.2007)
68
[70] . segert.net weblog . � Wie werde ich Webdesigner
im Sinne der Webstandards?: http://segert.net/weblog/
wie-werde-ich-webdesigner-im-sinne-der-webstandards/ (Stand: 2.6.2007)
[71] Wikipedia: SQL-Injektion: http://de.wikipedia.org/wiki/SQL-Injektion
(Stand: 3.6.2007)
[72] heise online - XSS-Wurm legt MySpace lahm: http://www.heise.de/newsticker/
meldung/65039 (Stand: 3.6.2007)
[73] Wikipedia: Phishing: http://de.wikipedia.org/wiki/Phishing (Stand:
3.6.2007)
[74] heise online - Myspace-Account-Daten kursieren im Web: http://www.heise.de/
newsticker/meldung/69872 (Stand: 3.6.2007)
[75] Wikipedia: Captcha: http://de.wikipedia.org/wiki/Captcha (Stand: 3.6.2007)
[76] Wikipedia: Spam: http://de.wikipedia.org/wiki/Spam (Stand: 3.6.2007)
[77] Bokardo � Woman Denied Degree because of MySpace Pro�le Pic: http:
//bokardo.com/archives/woman-denied-degree-because-of-myspace-profile/
(Stand: 3.6.2007)
[78] Suing to Teach - CBS 21: http://www.whptv.com/news/local/story.
aspx?content_id=A9BF5401-4030-413B-9FC3-14E51036A49E&gsa=true (Stand:
3.6.2007)
[79] Die dunkle Seite des Web 2.0: Ende der Privatsphäre? | tagesschau.de:
http://www.tagesschau.de/aktuell/meldungen/0,1185,OID5202688_TYP6_
THE_NAV_REF1_BAB,00.html (Stand: 3.6.2007)
[80] heise online - Datenschutz als Generationenkon�ikt: http://www.heise.de/
newsticker/meldung/89231 (Stand: 8.6.2007)
[81] Wikipedia: Tor (Netzwerk): http://de.wikipedia.org/wiki/Tor_%28Netzwerk%
29 (Stand: 3.6.2007)
[82] Apple: http://www.apple.com/ (Stand: 1.6.2007)
69
[83] Sebastian Andres: Barrierefreies Web (Vortrag beim 23. Chaos Communica-
tion Congress am 28.12.2006): http://chaosradio.ccc.de/23c3_m4v_1670.html
(Stand: 8.6.2007)
[84] Zukunftsvision: Menschen brauchen Google zum Leben - Golem.de: http://www.
golem.de/0705/52457.html (Stand: 8.6.2007)
[85] PHPKIT Web Content Management System: http://www.phpkit.de/ (Stand:
8.6.2007)
[86] drupal.org | Community plumbing: http://drupal.org (Stand: 8.6.2007)
[87] Inkscape. Draw Freely.: http://www.inkscape.org/ (Stand: 8.6.2007)
[88] GIMP - The GNU Image Manipulation Program: http://www.gimp.org (Stand:
8.6.2007)
[89] jEdit - Programmer's Text Editor - overview: http://www.jedit.org (Stand:
8.6.2007)
[90] welcome home : vim online: http://www.vim.org (Stand: 8.6.2007)
[91] Firebug - Web Development Evolved: http://www.getfirebug.com/ (Stand:
8.6.2007)
[92] Web Developer :: Firefox Add-ons: http://chrispederick.com/work/
web-developer/ (Stand: 8.6.2007)
70
top related