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