Webdesign. Wie gestalte ich eine Website so, dass sie optimal benutzbar ist? oder. Jahresarbeit der 12. Klasse. Michael Hamann

Größe: px
Ab Seite anzeigen:

Download "Webdesign. Wie gestalte ich eine Website so, dass sie optimal benutzbar ist? oder. Jahresarbeit der 12. Klasse. Michael Hamann"

Transkript

1 Webdesign oder Wie gestalte ich eine Website so, dass sie optimal benutzbar ist? Jahresarbeit der 12. Klasse Michael Hamann Freie Waldorfschule Vaihingen/Enz 10. Juni 2007

2 Inhaltsverzeichnis 1 Einleitung Warum Webdesign? Webdesign - ein weites Thema Aufbau der Arbeit Begrie Homepage vs. Website Browser W3C (World Wide Web Consortium) Hypertext HTML (Hypertext Markup Language) XHTML (Extensible Hypertext Markup Language) CSS (Cascading Style Sheets) Editoren WYSIWYG Quelltexteditoren CMS - Content Management Systeme Geschichte des WWW, des World Wide Webs Die Anfänge Web Die Dotcom-Blase Web Mitwirkung Benutzerfreundlichkeit Finanzierung Gestaltung

3 3.3.5 Standardisierung Weiterverwendbarkeit Medienübergreifende Verfügbarkeit Privatsphäre und Datensicherheit Zensur Web Meine Erfahrungen - der Praktische Teil meiner Arbeit Mein Weg zum Webdesign Projekttage Websites Schattenseele (http://www.schattenseele.de.tk) Waldorf SV (http://www.waldorf-sv.de) Meine Werkzeuge Aspekte beim Gestalten einer Website KISS - Keep it simple and straightforward Navigation Layout Farben im Web Grak im Web Text im Web Webstandards und semantischer Code Barrierefreiheit Browser-Kompatibilität Sicherheit auf Websites Fazit 62 3

4 1 Einleitung 1.1 Warum Webdesign? Schon seit Herbst 2004 beschäftige ich mich mit dem Gestalten von Websites. Am Anfang begnügte ich mich damit, einfache Content Management Systeme (siehe Kapitel 2, Begrie) 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 zunä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. Barrierefreiheit 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

5 1.3 Aufbau der Arbeit Als erstes möchte ich einige grundlegende Begrie und Technologien erklären, die ich ganz selbstverständlich verwende, die aber den meisten Menschen nicht geläug sind oder über deren Bedeutung wenig bekannt ist. Es folgt dann ein Kapitel über die Geschichte 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 verschiedene 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

6 2 Begrie 2.1 Homepage vs. Website Im normalen Sprachgebrauch wird Homepage und Website oft gleichbedeutend verwendet. 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üpfungen zusammengefasst werden und meist auf einer Domain (Grundbestandteil einer Internetadresse, der mit einem / endet) stehen (z.b. Webseite 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 Browser 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 verpichtend. 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

7 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 empehlt es das W3C - zur Strukturierung von Inhalten, z.b. zur Kennzeichnung von Überschriften, Hervorhebungen oder Listen, gedacht (semantischer Code). Leider wurde und wird HTML immer noch oft zum Design verwendet, hierfür ist jedoch CSS gedacht. Ein wichtiges 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

8 vom W3C weiterentwickelt, diese Version 4.01 ist die letzte ozielle 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) XHTML basiert auf XML (Extensible Markup Language, übersetzt erweiterbare Auszeichnungs- Sprache), folgt also den Regeln von XML, die nur einen Bruchteil der HTML zugrunde liegenden Obersprache SGML beinhalten. Dies bedeutet, dass XHTML strikter ist und es nicht mehr möglich ist, Syntaxelemente wegzulassen. Dies erschwert den Umstieg von HTML auf XHTML. XHTML ist erweiterbar, es gibt spezielle Standards, die eingebunden werden können, z.b. für Mathe-Formeln oder Vektorgraken. XHTML 1.0, die erste und einzige 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 Abbildung 2.2: Ein einfaches Beispiel von einem Stück HTML-Code weniger kompatibel und wird auch z.b. vom Microsoft Internet Explorer noch nicht unterstü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 werden. 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

9 men (IDs). Diese können dann in einer bestimmten Weise dargestellt werden (Farbe, Hintergrund, Schriftart, Innenabstand, Auÿenabstand, Umrandung etc.) oder positioniert 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 unterstü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 denierten Standards, v.a. CSS, testet. Er wird allerdings nur von sehr wenigen Browsern bestanden, der erste war Safari im Dezember 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 Webdesignern 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 CSS Editoren Editoren sind u.a. für das Erstellen und Bearbeiten von HTML- und CSS-Dateien geeignet. Man muss grundsätzlich zwischen zwei Arten von Editoren unterscheiden: 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

10 Das Prinzip der WYSIWYG - Editoren ist es, dass man den Text sofort so angezeigt bekommt, 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 semantische 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 Quelltexteditoren Abbildung 2.3: Der komfortable Quelltexteditor Quanta+ In Quelltexteditoren wird direkt der Quelltext bearbeitet. Um zu sehen, wie die Website einmal aussehen soll, muss die Datei erst gespeichert werden und dann mit einem Webbrowser betrachtet werden. Der Vorteil von Quelltexteditoren ist die maximale Kontrolle ü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 Einrückungen und automatische Vervollständigungen von Elementen (siehe Abb. 2.3) oder automatisch schlieÿende Markierungen (beispielsweise dass das letzte Element beim Tippen 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

11 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ählen 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 Programm vorstellen, das z.b. in PHP geschrieben ist und auf dem Webserver läuft. Typische 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 Erweiterungen, z.b. für Gästebücher. Das Aussehen (Design) ist meist mit Hilfe von Templates (Vorlagen) gestaltbar. 11

12 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 Anschauen und Bearbeiten der Seiten), um Forschungsergebnisse auszutauschen und zu verechten. Im CERN stieÿ Tim Berners-Lee auf wenig Echo, er bekam nie ein ozielles Projekt genehmigt und seine Programme lieÿ er teilweise von Praktikanten entwickeln. 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 Anerkennung, andere Hypertext-Systeme mit wesentlich umfangreicheren Darstellungsmöglichkeiten 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 ozielles Schriftstück des CERN, dass die WWW-Technologie frei genutzt werden kann. Die ersten Websites, die auÿerhalb des CERN entstanden, waren von Universitäten. 12

13 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 National 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 Interessierte 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 Menschen 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 trit 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 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 Macromedia 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

14 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, entwickelten sich u.a. unter dem Einuss 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 geschaen. Es gibt auch immer mehr Benutzerinteraktion, ein gutes Beispiel ist der Onlineshop 14

15 Abbildung 3.2: Ein Design des css Zen Garden[25] 15

16 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 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 gingen 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, Verlust 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 achteten 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 Konferenz im Oktober 2004, die seitdem jährlich im Herbst stattndet. Doch der Begri Web 2.0 ist sehr schwammig. Es ist völlig undeniert, 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

17 Abbildung 3.3: Eine Mindmap mit den Schlagworten des Web2.0 [21] 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 Hauptinhalt der Seite aus. Und zwar nicht nur einige wenige Benutzer, sondern hunderte, tausende... 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önlichen Nutzen: Man hat seine Bookmarks überall verfügbar und kann sie bequem mit Stichworten, sog. Tags, sortieren. Aber es gibt auch einen Gemeinschaftsaspekt: Bookmarks, 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 Netzwerk holen und so immer sehen, welche Seiten sie gerade abgespeichert haben. Auch bestimmte Stichwörter kann man beobachten. Diese Kombination aus einem ganz persönlichem Nutzen und einem Nutzen für die Gemeinschaft ist ganz typisch für eine Web Seite. 17

18 Abbildung 3.4: Die Startseite von del.icio.us mit den im Moment populärsten Adressen[39] 18

19 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 Neuigkeiten oder der Politik enthalten. Diese Blogs schaen eine Gegenöentlichkeit zur normalen Presse und sind eine Gegenbewegung zur Monopolisierung des herkömmlichen Pressemarktes 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 genommen. 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

20 Blogeinträge verweist und zum anderen auch eine sog. Blogroll pegt, 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 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. Artikel 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 Prol 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 diese 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 homosexuelle Musiker betroen[46]. Für objektive Inhalte bietet sich die Zusammenarbeit vieler Benutzer an - und genau 20

21 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 wiederherstellen, 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 Benutzer 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 wesentlicher 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 eingearbeitet (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

22 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 Weiterentwicklung 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 verwendeten 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 entsprechendes 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 Stichworte an, die andere Benutzer für diese Seite 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ühren, meldet man sich einfach bei einem der vielen Anbieter mit -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 Wissen 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

23 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 ermö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 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. Garagenrmen 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 auf Seite 29 noch näher eingehen). Dieser Gründerboom hält immer noch an, immer noch entstehen neue Web Anwendungen, immer noch setzen sich Menschen hin und programmieren eine neue Anwendung in der Honung, mit ihr einmal Geld verdienen zu können. Dies wird dadurch vereinfacht, dass es bereits sehr viele Anleitungen, Hilfestellungen und auch sog. Frameworks gibt, die bereits vorgefertigte Funktionen bereitstellen und man somit nicht das Rad neu ernden muss, sondern sehr schnell zu einer funktionierenden Anwendung gelangt. Sehr verbreitet, um mit seiner mehr oder weniger groÿen Anwendung Geld zu verdienen, 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 themenspezische Werbung einblenden, beispielsweise Reiseangebote bei Texten über eine Reise. Durch diese vielen Neugründungen gibt es im Web 2.0 auch viel Konkurrenz. Es 23

24 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 somit 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 Videos 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 Inhalte 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 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 Gestaltung Während man bei typischen Web 1.0 Websites häug blinkende oder sich drehende Gra- ken ndet, um auf einen adresslink hinzuweisen, werden bei Web 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 Website eventuell ein gröÿeres Problem werden würde 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 Websites mehr an die Standards des W3C bzw. versuchen es zumindest. Auch die Trennung 24

25 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änkter 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). Zusätzlich dazu kann der Inhalt oftmals auch von Computern ausgelesen werden, da die Dokumente korrekt strukturiert sind, HTML-Tags ihrem Inhalt nach gesetzt sind (Semantik) und über zusätzliche Informationen, die unsichtbar eingebettet sind, auch weitere Informationen enthalten sein können, z.b. in welcher Beziehung man zu einer Person steht, deren Seite man verlinkt (z.b. Freund, Bekannter, Arbeitskollege usw.). Dies ist in dem Mikroformat FOAF (Friend Of A Friend) deniert. Dadurch können weitere Informationen ausgelesen und zu neuen Darstellungsformen verarbeitet werden. Derartig sauber strukturierte Dokumente können natürlich auch besser von Abbildung 3.8: Ein zum Spaÿ erstellter Logo-Erzeuger im typischen Web Aussehen[51] 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 manche Seiten zur Verfügung stellen, kann desweiteren recht leicht auf die Inhalte selbst zugegrien werden, d.h. hier werden die Inhalte in einer einfachen (XML-)Struktur ausgegeben, die leicht weiter verarbeitet werden kann 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

26 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 verwendet. 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 denierte 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 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 Programm 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 (Internetzugang - 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 Veranstaltungen 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

27 Abbildung 3.9: Die Startseite von Plazes 27

28 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 Privatsphäre und Datensicherheit Ein Problem im Web 2.0 ist, dass das Web 2.0 praktisch von den persönlichen Daten der Benutzer lebt und viele, v.a. junge Benutzer diese privaten Informationen meist ohne langes Zögern bedenkenlos im Internet veröentlichen. Die Bilder oder sogar Videos von der letzten Party, was sie gut nden, was schlecht, wo sie überall waren, was sie über die Politik oder bestimmte Firmen denken etc. Meistens wird aber nicht daran gedacht, dass diese Daten, selbst wenn sie gelöscht werden, noch sehr lange im Internet verfügbar sein und von jedem gelesen werden können. Auch von einem zukünftigen Arbeitgeber, der im Internet dann Informationen erhä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 Bierasche in der Hand übergibt? Kaum vorstellbar, dass er noch Abbildung 3.10: Wegen der Veröentlichung dieses Bildes mit dem Titel drunken pirate wurde die Lehrerzulassung verweigert. 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äuge Krankheiten, peinliche Partyerlebnisse oder dergleichen schreiben? Vermutlich niemand! 28

29 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- Prol 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 herauszunden, 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 weitestgehend 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 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

30 marks) oder Flickr.com (Foto-Community)) eine Öentliche Erklärung zur Selbstdisziplin, die von China gefordert wurde, unterschrieben. Sie verpichten 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 regimekritischer 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 Regierung 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 Hier können Benutzer Links zu Neuigkeiten oder Audio-Dateien und Videos eintragen und dann kann jeder Benutzer für oder gegen diesen Eintrag stimmen. Die Populä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 überutet wurde und nicht mehr in der Lage war, diese zu blockieren. Digg gab auf und kündigte am 3. Mai oziell an, diese Einträge nicht mehr zu löschen. So hat hier nicht die Zensur, sondern die Masse der Benutzer, die Demokratie gesiegt. Hoen 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 - Programm, ein Chatprogramm zur unmittelbaren Kommunikation, eine Textverarbeitung und Tabellenkalkulation, eine Funktion zum Lesen 30

31 Abbildung 3.11: Digg.com - ein Beispiel für gelungene Demokratie im Web[56] 31

32 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 wiederzugeben. Dies stöÿt natürlich auch auf Ablehnung bei kritischen Benutzern und Datenschü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 schat, Nutzer 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 schaen. Das bedeutet, dass in einem Artikel über Stuttgart z.b. [[liegt in::baden-württemberg]] oder [[hat Fläche:207,36 km 2 ]] 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 Basis 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 nden. Im diesjährigen französischen Präsidentschaftswahlkampf haben die Politiker (bzw. entsprechende Beauftragte von ihnen) Plattformen im Second Life errichtet und auch 32

33 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

34 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ÿenabstand 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 begann dann die Verwirrung: Wo kommt das jetzt hin? Was macht das? Wie erreiche ich 34

35 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 sogenannte 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 Grundlagen von XHTML und CSS zuzuhören, die sie zwar teilweise schon kannten, aber eben nur teilweise. Und als es dann schwieriger wurde, schaten 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 vermittelte ich einfache Layouttechniken und Menüs mit Eekten, 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 Information 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, Eekte wie ausklappbare Menüs und Aspekte wie Browser-Kompatibilität und Barrierefreiheit sinnvoll gewesen. 35

36 Vielen Dank an die Teilnehmer meines Kurses! 4.3 Websites 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 schaen. 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

37 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 zusammengefasst. 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ü Waldorf SV (http://www.waldorf-sv.de) Durch mein Engagement im Landesschülerrat der Freien Waldorfschulen Baden - Württemberg kam ich in Kontakt mit der Waldorf SV, der bundesweiten Waldorfschülervertretung. 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

38 Abbildung 4.3: Die Startseite der Website der Waldorf SV 38

39 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 Waldorf 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 eingebunden 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 Zugrisrechte 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, haben 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

40 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 Graken 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 Developer 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, erstellt. 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

41 5 Aspekte beim Gestalten einer Website Beim Gestalten einer Website kann man sehr viel beachten. Denn was macht den Unterschied 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 schat man es, dass eine Website professionell aussieht? Oft ist dies alles andere als einfach, will man doch auch etwas Eigenes schaen 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 Zurechtnden 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 zurechtndet. 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 honungslos 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 bendet. Das Gleiche trit auch auf überladene Community-Seiten zu. Um dieses Problem nun zu lösen, sollte man sich immer bewusst sein, für wen die 41

42 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 Graken 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örderlich 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 treen, 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 zurechtnden und keine negativen Ü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

43 noch schlechter ist es, wenn man nicht einmal erraten kann, unter welchem Menüpunkt man die gesuchte Information vorndet. 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 Navigation so gestaltet, dass alle wichtigen Informationen ü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 gegen 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). Abbildung 5.1: Die beiden Navigationen (links Meldet man sich an, sieht man ein weiteres Menü (siehe Abb. 5.1 links unten). In diesem kann man sein und rechts) Benutzerprol bearbeiten, d.h. einige wenige Informationen über sich eintragen. Hier gibt es den Link SV-Website der Waldorf 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 eingestellt 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 werden neben der allgemeinen Information über die Waldorf SV (diese ist allerdings nur bei nicht angemeldeten Benutzern zu sehen) die neuesten Texte (News, Informationen, 43

44 Foreneinträge) angezeigt. Zum anderen ndet man die neuesten Foreneinträge und Kommentare 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 Der Aufbau einer Seite beeinusst 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 Seitentitel 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önnen weitere Blöcke angeordnet sein. Nun haben wir den Aufbau eines klassischen Portals. Bei der Waldorf SV-Seite habe ich ein derartiges, Abbildung 5.2: Ein typisches Layout mit zwei Spalten dreispaltiges Layout realisiert, da sehr viele Informationen z.b. über die neuesten Themen 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äug 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

45 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 berü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. wiederholt 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 schaen. 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 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 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

46 Ein Punkt wäre hier, dass keine grellen Farben benutzt werden sollten, da der Bildschirm leuchtet und somit grelle Farben für den Betrachter sehr unangenehm sind. Komplementä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 Helligkeitsunterschied 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. Verbreitet sind Weiÿ, Grau, Schwarz und Blau. Die Wikipedia verwendet z.b. eine Reihe verschiedener Blautöne, eine Reihe von Schwarz über einige Grautöne hin zu Weiÿ sowie ein Gelb, das allerdings nur an zwei Stellen für einen Rahmen verwendet wird (siehe Abb. 5.3) Abbildung 5.3: Die Farbpalette Wichtig ist, dass eine Website ein einheitliches Design besitzt. Dies kann z.b. so aussehen, dass alle der Wikipedia Ü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 verschiedenen 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 Corporate 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 empehlt 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 unterstrichen sein. Unterstreichungen sowie blauer Text sollten daher im übrigen Text nicht 46

47 zur Hervorhebung benutzt werden, da die meisten Benutzer sonst meinen, sie hätten einen Link vor sich. Bei der Wahl der Farben sollte man immer auch deren Ausdruck und die durch sie erzeugten Stimmungen berücksichtigen. Dabei gibt es von Land zu Land und auch von Kontinent zu Kontinent Unterschiede in der Wahrnehmung der Farben. Die Zielgruppe spielt damit eine wichtige Rolle bei der Farbauswahl. Seiten, die einen seriösen Eindruck vermitteln wollen, verwenden meist Schwarz, Blau und Grau. Silbergrau 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 katholischen Europa für Tod und Kreuzigung, gleichzeitig von Apple als Abbildung 5.4: Die Startseite symbolisiert diese Farbe Heidentum, New Age und Beispiel eines Homosexualität (also gegen den christlichen Glauben), im Nahen Osten dagegen Prostitution genauso Grau/Schwarz modernen, durch wie in einigen westlichen Kulturen Rot (Rotlichtmilieu). In China dagegen ist Rot ein Symbol für Glück. Farbschemas dominierten Rot kann man sparsam einsetzen, v.a. für Hervorhebungen und Fehlermeldungen. Orange signalisiert in (Stand: ) 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 Grak 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 auockern. Doch der Einsatz der Grak sollte gezielt erfolgen und es sollte darauf ge- 47

48 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 trit 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ü aussagekräftiger zu machen. Doch genau auf diese Aussagekraft sollte man achten. Leider ndet man nämlich auch Beispiele, in denen die Aussage denitiv 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 angegebenen 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, Bekanntschaft, Freund, guter Freund, bester Freund. Im HTML-Code ist noch ein Alternativtext deniert. Wenn man im Web Graken verwendet, sollte man sich auch immer Gedanken über das Bildformat machen. Es gibt bestimmte Formate wie PNG, die eine sehr gute Qualitä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 Internetanschlü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 Graken oder Bilder gezeigt werden, ist zu überlegen, ob nicht eine kleine 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 Grak 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

49 tung. Es gibt nämlich die Möglichkeit, eine Grak durch den Browser einfach verkleinert darstellen zu lassen. Das verändert aber in keinster Weise die Gröÿe der Grak. Auf Waldorf SV.de gibt es Graken in verschiedenen Formen. Zum einen gibt es das Design: das Logo, einige Linien und Schatten. Dann kann jeder Benutzer ein kleines Benutzerbild hochladen, das neben allen seinen Einträgen erscheint. Auÿerdem gibt es von den Tagungen Bildergalerien. Diese sind so realisiert, dass zunächst eine Übersicht kleiner Vorschaubilder erscheint. Klickt man dann auf eines dieser Vorschaubilder, wird das entsprechende Bild groÿ angezeigt (Abb. SV-Tagung, unten im Hinter- Abbildung 5.6: Ein Bild von der 11. Waldorf 5.6). Dies erfolgt mit Hilfe von JavaScript grund ist die Übersicht der bequem ohne das Neuladen der Seite. kleinen Vorschaubilder zu sehen Ebenso bequem kommt man durch nur einen Klick auf das nächste oder vorherige 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 herauszunden, möchte ich nicht erst einige 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 dieser Überschrift lesen. Auch Einführungssätze werden recht häug gelesen, während der 49

50 gesamte Text nur selten gelesen wird. Die wichtigsten und interessantesten Informationen 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 Schwierigkeiten 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 Webstandards 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 erfolgen. 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

51 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. Ein weiterer Vorteil ist, dass man unteschiedliche Darstellungsformen für unterschiedliche Zwecke de- nieren kann. So kann man ein Design für mobile Geräte und ein Druckdesign ohne Navigation in Schwarz/Weiÿ erstellen. Letzteres habe ich bei der Waldorf SV-Website gemacht. Die Navigationen sowie weitere Elemente wie die Links zum Bearbeiten eines Artikels werden dabei versteckt und die Seite 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 betrit. Ein typisches Beispiel wäre z.b. die fette, kursive oder besonders groÿe Darstellung von Text. Semantische Auszeichnung betrit Abbildung 5.7: Die Website der dagegen die Bedeutung. Die analogen Beispiele zu Waldorf SV in der den vorigen wäre hier z.b. die Hervorhebung, Betonung oder eine Überschrift. Im normalen Browser erste Seite) Druckansicht (die können die Eekte ganz ähnlich sein, eine Hervorhebung 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 Dokuments analysieren (wie z.b. eine Suchmaschine), dann hilft semantische Auszeichnung viel mehr als physische. Und mit CSS kann man auch sämtliche Elemente der semantischen 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 semantischem Code sind auf Waldorf-SV.de weitestgehend angewendet. Nur relativ kleine zu- 51

52 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 Barrierefreiheit - eigentlich einfach und selbstverstä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 überwindbar sein können. Besondere Probleme haben natürlich blinde Menschen, die Websites nur über eine Sprachausgabe oder eine Braille-Zeile (siehe Abb. 5.8) wahrnehmen können. Dies ist v.a. bei langen Seiten ohne Möglichkeiten zum Überspringen sehr mühsam. Besondere Hürden stellen Bilder dar. Bei diesen Abbildung 5.8: Eine Braille-Zeile aus der Nähe [14] 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 wichtigen 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 umwandelt) 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 verschiedensten Arten von Behinderungen, von Sehschwäche angefangen bis hin zu Blindheit und Mehrfachbehinderungen. 52

53 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 Herausforderungen, 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 Element davon. Wenn Inhalt und Design sauber getrennt sind, ist es viel einfacher, ein eigenes Design zu benutzen und die Darstellung auf kleinen Displays (Handys) funktioniert auch zuverlässiger. Barrierefreiheit hört aber nicht bei der Gestaltung auf, auch der Inhalt sollte barrierefrei 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 Website 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 Grak 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 Aufwand. 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 deniert hat, verwenden. Da jedoch die meisten Benutzer hier leider keine 53

54 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

55 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 Grak ü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 Designs 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

56 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 besonderes 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 Grak in der Abb. 5.10, dass besonders die Optimierung 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 keiner 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 Grak erwähnten Probleme mit JavaScript hatte ich zum Glück nicht, da ich keinen eigenen JavaScript-Code geschrieben habe. Auch das in der Grak 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 betrit 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 deniert hatte, war das Problem verschwunden. Dies war hier aber auf Grund der unterschiedlichen Breite der Einträge und weiterer Faktoren, die zu unschönen Eekten im Internet Explorer führten, nicht möglich. Ich fand dann den Hinweis auf die Möglichkeit, eine Höhe von 1% zu denieren, 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

57 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. Nun noch zu dem grauen Hintergrund: Dies hängt damit zusammen, dass Graken immer eckig sein müssen. Somit muss ein Teil der Grak transparent sein, damit man den Hintergrund durchsieht. Transparenz wird prinzipiell von zwei im Web nutzbaren Grakformaten beherrscht: GIF und PNG. Das Problem bei GIF-Graken ist allerdings, dass bei diesen ein Pixel entweder transparent ist oder nicht, d.h. es gibt keine Zwischenstufen. Da man diese bei Rundungen aber benötigt, damit optisch keine Stufen entstehen, und ich wegen wechselnder Hintergrundfarben keine unschönen Farbeekte oder mehrere Graken für unterschiedliche Hintergründe bereitstellen wollte, habe ich mich für PNG entschieden. Hier ist allerdings das Problem, dass der Internet Explorer PNG-Transparenz nicht richtig beherrscht, d.h. statt eines wirklich transparenten Hintergrundes einen grauen Hintergrund verwendet. Im aktuellen, sich langsam verbreitenden Internet Explorer 7 ist dieses Problem behoben. Es gibt zwar eine Möglichkeit, den Internet Explorer 6 mit einem Trick transparente PNGs korrekt anzeigen zu lassen, Abbildung 5.11: Das Menü in einem frühen Stadium im Microsoft Internet Explorer 6 doch hier lieÿ sich nach meinen Erfahrungen das Bild nicht mehr positionieren, was jedoch im vorliegenden Fall nötig gewesen wäre 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

58 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 werden: 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 gesteuert 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ührungszeichen 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 Datenbank 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 Angris 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 ungelterte Benutzereingaben Code in die Seite eingeschleust, der aber in diesem Fall nicht für die Datenbank bestimmt ist, sondern im Browser des Benutzers ausgeführt werden soll - meist JavaScript-Code. Eine Attacke funktioniert hier so, dass einem Benutzer z.b. über eine Website oder eine 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 sogar Bank- oder Kreditkartendaten. Häug treten derartige Lücken in der Suchfunktion einer Seite auf, d.h. dass über das Suchwort JavaScript-Code eingeschleust werden kann. 58

59 XSS ist durchaus verbreitet und es sind immer wieder auch groÿe, viel besuchte Seiten betroen. Anfang Oktober 2005 war z.b. MySpace von einer solchen Lücke betroen und es gab ein kurzes Script, das dies ausnutzte, um sich mittels Freundschaftseinladungen zu verbreiten und bei diesen neuen Freunden dann wieder Freundschaftseinladungen mit sich selbst zu versenden usw. Dies führte zu einer exponentiellen Verbreitung dieses 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- , die vorgibt, von der Sparkasse zu sein Eine weitere sehr gefährliche Angrisform ist das sog. Phishing. Hier wird versucht, den Benutzer über entsprechend präparierte Websites und auch s dazu zu bewegen, geheime Daten einzugeben. Sehr verbreitet ist, dass angeblich von der eigenen Bank stammende s versendet werden (siehe Abb. 5.12), die den Benutzer dazu auordern, den geheimen Zugangscode (PIN) sowie zwei weitere Codes einzugeben, die benötigt werden, um Überweisungen auszuführen (TANs, hiervon kann jede nur einmal 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 eine 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 ozieller Seite in einer oder am Telefon oder 59

60 auf einem anderen Wege dazu aufgefordert wird, derartige Daten preiszugeben. 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öentlichen, die der Suchmaschinenoptimierung dienen. Ich Captchas (Lö- Abbildung 5.13: Beispiel eines möchte hier nun v.a. auf die Gegenmaÿnahmen eingehen. Zunächst kann man natürlich die Kommentasung: MV52RQ) 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 kennzeichnen, 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 eektive Methode der Bekämpfung besteht darin, dass man Captchas einsetzt. Captchas sind automatische Tests zur Unterscheidung 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 Bilder 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 Entsprechung 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 einzublenden 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 eigenen Code verwendet habe, der für die Sicherheit relevant ist. Lediglich das regelmäÿige Aktualisieren des Content Management Systems, v.a. bei bekannt gewordenen Sicherheitslü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

61 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 vermutlich 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 Kommentaren und beim Erstellen von Gästebucheinträgen zum Einsatz. Sie scheint bis jetzt sehr zuverlässig zu funktionieren. 61

Benutzerhandbuch WordPress

Benutzerhandbuch WordPress Benutzerhandbuch WordPress Handbuch zur Erstellung eines Weblogs Copyright 2008 by Eva-Maria Wahl & Dennis Klehr Inhaltsverzeichnis 1. Einführung 3 1.1 Blog 3 1.2 Web 2.0 3 1.3 Content Management System

Mehr

Web 2.0 zum Mitmachen!

Web 2.0 zum Mitmachen! 1 1. 1. Web 2.0 Was Schon ist gehört, das schon aber wieder? was ist das? Neue Internetnutzung - Das Internet hat sich im Laufe der Zeit verändert. Es eröffnet laufend neue Möglichkeiten. Noch nie war

Mehr

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo Mit Jimdo ist das Erstellen einer eigenen Homepage ganz besonders einfach. Auch ohne Vorkenntnisse gelingt es in kurzer Zeit, mit einer grafisch sehr ansprechenden

Mehr

In 10 Schritten selber eine eigene Homepage erstellen

In 10 Schritten selber eine eigene Homepage erstellen In 10 Schritten selber eine eigene Homepage erstellen Anhand dieser Anleitung können Sie einfach eine eigene Homepage selber erstellen. Registrieren Sie sich bei wordpress.com und schon können Sie loslegen.

Mehr

Frontend Backend Administration Frontend Backend Administration Template

Frontend Backend Administration Frontend Backend Administration Template Begriffe Frontend Backend Administration Bei Contentmanagementsystemen (CMS) unterscheidet man zwischen zwei Bereichen, dem sogenannten Frontend und dem Backend Bereich. Der Backend wird häufig als Administration

Mehr

Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM

Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM Robert R. Agular Thomas Kobert 5. Auflage HTML Inklusive CD-ROM 1 HTML Mehr als nur ein paar Buchstaben Bevor wir mit dem Erstellen unserer ersten Webseite anfangen, solltest du wissen, was HTML überhaupt

Mehr

CMS Contenido. Das zukunftssichere Content Management System - 1 -

CMS Contenido. Das zukunftssichere Content Management System - 1 - CMS Contenido Das zukunftssichere Content Management System Inhalt Seite Was ist ein CMS System 2 Das CMS Contenido 3 Historie 3 Lizenzkosten 3 Demo Version testen 3 Leistungen 4 Laufende Kosten (Hosting/Wartung)

Mehr

Fortbildung Weblogs, Soziale Lesezeichen, Katalog 2.0

Fortbildung Weblogs, Soziale Lesezeichen, Katalog 2.0 Web 2.0 Elemente in Praxisbeispielen Einige Anwendungsmöglichkeiten von Web 2.0 -Angeboten, die bereits von Bibliotheken genutzt werden. Stadtbücherei Nordenham http://www.stadtbuecherei-nordenham.de/

Mehr

Web 2.0 oder das Mitmachweb

Web 2.0 oder das Mitmachweb Web 2.0 oder das Mitmachweb 1. Einleitung Der Begriff Web 2.0 wurde erstmals populär seit der Web 2.0 Conference von O`Reilly im Oktober 2004. Der Grundgedanke des Web gewinnt im Web 2.0 wieder an Bedeutung.

Mehr

Checkliste SEO-freundliches Shopsystem. Inhaltsverzeichnis

Checkliste SEO-freundliches Shopsystem. Inhaltsverzeichnis Checkliste SEO-freundliches Shopsystem Für Betreiber eines Onlineshops gibt es viele Dinge zu beachten. Ein wichtiger Besucherkanal sind Suchmaschinen. Auf die folgenden Dinge sollten Sie achten, wenn

Mehr

Tutorium Learning by doing WS 2001/ 02 Technische Universität Berlin. Erstellen der Homepage incl. Verlinken in Word 2000

Tutorium Learning by doing WS 2001/ 02 Technische Universität Berlin. Erstellen der Homepage incl. Verlinken in Word 2000 Erstellen der Homepage incl. Verlinken in Word 2000 1. Ordner für die Homepagematerialien auf dem Desktop anlegen, in dem alle Bilder, Seiten, Materialien abgespeichert werden! Befehl: Desktop Rechte Maustaste

Mehr

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3 Inhaltsverzeichnis Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2 Schritt 1: Design auswählen...3 Schritt 2: Umfang und Struktur der Seiten bestimmen...7 Schritt 3: Inhalte bearbeiten...9 Grafik

Mehr

Für die Verwendung des Wikis wird dringend der Microsoft Internet Explorer Version 7.0 empfohlen!

Für die Verwendung des Wikis wird dringend der Microsoft Internet Explorer Version 7.0 empfohlen! Sie finden das FH-Wiki unter der folgenden Adresse: http://wiki.fh-kehl.de:9454 Falls Sie Anregungen, Fragen oder Hinweise haben wenden Sie sich bitte an Herrn Fetterer oder Frau Prof. Dr. Schenk. Für

Mehr

Schulung Open CMS Editor

Schulung Open CMS Editor Schulung Open CMS Editor Um Ihr Projekt im OpenCMS zu bearbeiten brauchen Sie lediglich einen Webbrowser, am besten Firefox. Vorgehensweise beim Einrichten Ihrer Site im OpenCMS Erste Schritte Wenn Sie

Mehr

Content Management System (CMS) Manual

Content Management System (CMS) Manual Content Management System (CMS) Manual Thema Seite Aufrufen des Content Management Systems (CMS) 2 Funktionen des CMS 3 Die Seitenverwaltung 4 Seite ändern/ Seite löschen Seiten hinzufügen 5 Seiten-Editor

Mehr

Der eigene Internetauftritt. Die eigene Webseite für den Fotografen

Der eigene Internetauftritt. Die eigene Webseite für den Fotografen Der eigene Internetauftritt Die eigene Webseite für den Fotografen Thomas Högg, modulphoto.de, November 2013 IDEE UND VORAUSSETZUNGEN Seite 3 Was benötigt man für seinen Internetauftritt? Von der Idee

Mehr

http://www.nvu-composer.de

http://www.nvu-composer.de Kapitel 16 Seite 1 Ein portabler Web-Editor Wer viel Zeit in eine Website investieren will ist gut beraten, eine professionelle Software für Webdesigner zu beschaffen. Diese Programme sind sehr leistungsfähig,

Mehr

11 Publizieren im Web

11 Publizieren im Web 11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten

Mehr

Homepage erstellen aber wie

Homepage erstellen aber wie Homepage erstellen aber wie Viele Möglichkeiten einen Webauftritt zu gestalten Ein kleiner Leitfaden durch den Dschungel Wege zur Internetpräsenz Idee, etwas der Öffentlichkeit mitzuteilen Webseite erstellen

Mehr

DESIGN & DEVELOPMENT. TYPO3 Basics

DESIGN & DEVELOPMENT. TYPO3 Basics DESIGN & DEVELOPMENT TYPO3 Basics 1 Einleitung / Inhalt 2 / 21 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert erklärt,

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Cmsbox Kurzanleitung. Das Wichtigste in Kürze

Cmsbox Kurzanleitung. Das Wichtigste in Kürze Cmsbox Kurzanleitung Cmsbox Kurzanleitung Das Wichtigste in Kürze Die Benutzeroberfläche der cmsbox ist nahtlos in die Webseite integriert. Elemente wie Texte, Links oder Bilder werden direkt an Ort und

Mehr

- 1 - LOGION CMS. MedienService Ladewig

- 1 - LOGION CMS. MedienService Ladewig - 1 - LOGION CMS MedienService Ladewig - 2 - Administration Einführung: Warum Online Redaktion einfach sein kann... Wer Informationen aufbereitet und verteilt, steht mit den Mitteln moderner Informationstechnologie

Mehr

Internet Vokabeln DANGER. ARBEITSBLATT 2 Klasse ACCOUNT BLOG WEB LOG BROWSER CHAT, CHATTEN

Internet Vokabeln DANGER. ARBEITSBLATT 2 Klasse ACCOUNT BLOG WEB LOG BROWSER CHAT, CHATTEN ACCOUNT Account kommt aus dem Englischen und bedeutet Nutzerkonto. Wie auf der Bank gibt es auch im Internet ein Konto bei einem Internetdienst. Nach der Anmeldung erhälst du einen Benutzernamen und ein

Mehr

CMSimple Kurzanleitung

CMSimple Kurzanleitung CMSimple Kurzanleitung für Redakteure Stand: 28.11.2010 CMSimple Kurzanleitung Seite: 1 Inhalt CMSIMPLE KURZANLEITUNG... 1 INHALT... 1 WICHTIGE DATEN... 2 EINFÜHRUNG... 2 ANMELDEN... 3 LOGIN... 3 LOGOUT...

Mehr

Grundlagen und die größten Irrtümer.

Grundlagen und die größten Irrtümer. Nr. SEO für jedermann. Grundlagen und die größten Irrtümer. Suchmaschinenoptimierung (SEO) und Suchmaschinenmarketing (SEM) werden immer wieder verwechselt: Doch SEO beschäftigt sich mit der Optimierung

Mehr

OXID eshop Templates Entwicklung

OXID eshop Templates Entwicklung OXID eshop Templates Entwicklung - mit 24 Monaten Hersteller-Gewährleistung* auf versteckte Mängel - Webdesign bedeutet fast alles für Online Shops. Der Kunde gelangt dank aufwändiger Werbung und erfolgreicher

Mehr

Eine Vervielfältigung auch von Auszügen in jeglicher Weise bedarf der vorherigen ausdrücklichen Genehmigung von der Comitas AG.

Eine Vervielfältigung auch von Auszügen in jeglicher Weise bedarf der vorherigen ausdrücklichen Genehmigung von der Comitas AG. 1 Impressum 1998 2015 Comitas AG Schweiz. Alle Rechte vorbehalten. Whitepaper, 1. Auflage, 2015. Eine Vervielfältigung auch von Auszügen in jeglicher Weise bedarf der vorherigen ausdrücklichen Genehmigung

Mehr

MiGo-Portal V2.21. Produkt-Sheet. Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen. MiGo-WebDesign Wiesenstraße 31 56459 Kölbingen

MiGo-Portal V2.21. Produkt-Sheet. Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen. MiGo-WebDesign Wiesenstraße 31 56459 Kölbingen MiGo-Portal V2.21 Produkt-Sheet Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen Unser aktuelles Portal-System für Ihre individuelle Homepage. Dieses Portal bietet die Möglichkeit verschiedene

Mehr

Agenda. Ingo Ebel (ie007) Benjamin Müller (bm032) Was ist AJAX? Sicherheit Vor- und Nachteile. AJAX Frameworks. Wozu benötigt Client/Server

Agenda. Ingo Ebel (ie007) Benjamin Müller (bm032) Was ist AJAX? Sicherheit Vor- und Nachteile. AJAX Frameworks. Wozu benötigt Client/Server AJAX Agenda Ingo Ebel (ie007) Was ist AJAX? Wozu benötigt Client/Server Sicherheit Vor- und Nachteile Benjamin Müller (bm032) AJAX Frameworks GWT ATF Ingo Ebel - ie007 2 Web 2.0 Ingo Ebel - ie007 3 Ingo

Mehr

Hier zuerst eine grobe Übersicht, nachfolgend werden die einzelnen Schritte genauer erklärt:

Hier zuerst eine grobe Übersicht, nachfolgend werden die einzelnen Schritte genauer erklärt: ANLEITUNG zum Eintrag Ihrer Homepage auf Gingu.de Hier zuerst eine grobe Übersicht, nachfolgend werden die einzelnen Schritte genauer erklärt: 1. Kostenlos registrieren 2. Zum Erstellen eines Eintrages

Mehr

Dreamweaver 8 Homepage erstellen Teil 1

Dreamweaver 8 Homepage erstellen Teil 1 Dreamweaver 8 Homepage erstellen Teil 1 Voraussetzungen Das vorliegende Skriptum knüpft an das Skriptum Dreamweaver_Einführung an und setzt voraus, dass du dieses bereits durchgearbeitet hast. Planung

Mehr

Warum muss ich mich registrieren?

Warum muss ich mich registrieren? - Warum muss ich mich registrieren? - Ich habe mein Passwort oder meinen Benutzernamen vergessen - Wo ist meine Aktivierungs-Mail? - Wie kann ich mein Benutzerkonto löschen? - Wie kann ich mein Newsletter-Abonnement

Mehr

1 Websites mit Frames

1 Websites mit Frames 1 Websites mit Frames Mehrere Seiten in einer einzelnen Seite anzeigen - Was sind Frames und wie funktionieren sie? - Was sind die Vor- und Nachteile von Frames? - Wie erstellt man eine Frames- Webseite?

Mehr

Felix Schwenzel E-Marketing Forum Xinnovations 2009. Vergessen Sie Suchmaschinenoptimierung Optimieren Sie Ihre Website

Felix Schwenzel E-Marketing Forum Xinnovations 2009. Vergessen Sie Suchmaschinenoptimierung Optimieren Sie Ihre Website Felix Schwenzel E-Marketing Forum Xinnovations 2009 Vergessen Sie Suchmaschinenoptimierung Optimieren Sie Ihre Website Felix Schwenzel Projektleiter EsPresto AG baut seit 1995 Webseiten Vergessen Sie Suchmaschinenoptimierung

Mehr

09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten

09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten Aktuelle Themen der Wirtschaftsinformatik Zusammenfassung 09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten 1 Serverseitige Webprogrammierung

Mehr

kostenlose Homepage erstellen

kostenlose Homepage erstellen kostenlose Homepage erstellen Anleitung zur Erstellung einer kostenlosen Homepage Seite 1 Inhalt Einleitung...3 Hosting...5 Homepage Baukasten...10 Web Design...13 Homepage erstellen...14 Webseiten...15

Mehr

Computeria Kurs vom 27.3.13

Computeria Kurs vom 27.3.13 Computeria Kurs vom 27.3.13 Allgemeines zu Email E- mail = electronic mail = Elektronische Post = eine auf elektronischem Weg in Computernetzwerken übertragene, briefähnliche Nachricht Vorteile von E-

Mehr

Unternehmenskommunikation mit Freier Software

Unternehmenskommunikation mit Freier Software Unternehmenskommunikation mit Freier Software Dipl.-Inf Frank Hofmann Potsdam 5. November 2007 Dipl.-Inf Frank Hofmann (Potsdam) Unternehmenskommunikation mit Freier Software 5. November 2007 1 / 12 Inhalt

Mehr

KURZANLEITUNG HOMEPAGEBUILDER

KURZANLEITUNG HOMEPAGEBUILDER KURZANLEITUNG HOMEPAGEBUILDER Hochwertige Homepages selbst erstellen und ändern: 300 unterschiedliche adaptierbare Designs für alle Themen und Branchen! > Individuelle Menüführung, Logo Maker und freie

Mehr

Eine eigene Website mit Jimdo erstellen

Eine eigene Website mit Jimdo erstellen Eine eigene Website mit Jimdo erstellen Die schnellste und kostengünstigste Art, zu einem Internetauftritt zu gelangen, ist der Weg über vorkonfigurierte und oftmals kostenfreie Internetbaukästen. Diese

Mehr

Darstellung der Maßnahmen zur Suchmaschinenoptimierung

Darstellung der Maßnahmen zur Suchmaschinenoptimierung Darstellung der Maßnahmen zur Suchmaschinenoptimierung Ob und an welcher Position eine Seite zu einem bestimmten Suchbegriff in den organischen Suchergebnissen einer Suchmaschine erscheint hängt von sehr

Mehr

Inhalt. 1 Ein eigener Webauftritt in drei Minuten 17. 2 Wer braucht was die eigene Website planen 29. Für wen ist dieses Buch?...

Inhalt. 1 Ein eigener Webauftritt in drei Minuten 17. 2 Wer braucht was die eigene Website planen 29. Für wen ist dieses Buch?... Für wen ist dieses Buch?... 13 1 Ein eigener Webauftritt in drei Minuten 17 1.1 Die Visitenkarte des Zauberers... 17 1.1.1 Auswahl des Anbieters... 18 1.1.2 Anmeldung... 19 1.2 Welche Technik lässt das

Mehr

SWN-NetT Webmail. Benutzerhandbuch für SWN-NetT Webmail. SWN-NetT Webmail finden Sie unter: http://webmail.swn-nett.de

SWN-NetT Webmail. Benutzerhandbuch für SWN-NetT Webmail. SWN-NetT Webmail finden Sie unter: http://webmail.swn-nett.de SWN-NetT Webmail Benutzerhandbuch für SWN-NetT Webmail SWN-NetT Webmail finden Sie unter: http://webmail.swn-nett.de Übersicht Einstieg... 2 Menü... 2 E-Mail... 3 Funktionen... 4 Auf eine neue Nachricht

Mehr

Crashkurs Jimdo Online eigene kostenlose Webseite einrichten

Crashkurs Jimdo Online eigene kostenlose Webseite einrichten Crashkurs Jimdo Online eigene kostenlose Webseite einrichten Yvonne Seiler Volkshochschule Bern Lernziele Sie wissen was Jimdo ist und kann und wer hinter dieser Firma steckt. Sie haben eine eigene Webseite

Mehr

Leitfaden für die Veränderung von Texten auf der Metrik- Seite

Leitfaden für die Veränderung von Texten auf der Metrik- Seite Leitfaden für die Veränderung von Texten auf der Metrik- Seite 1. Einloggen... 2 2. Ändern vorhandener Text-Elemente... 3 a. Text auswählen... 3 b. Text ändern... 4 c. Änderungen speichern... 7 d. Link

Mehr

Android-Smartphone und die Google-Cloud

Android-Smartphone und die Google-Cloud Cloud? Cloud heißt zu Deutsch Wolke. Vielleicht haben Sie schon einmal in einer Werbung gehört, dass Daten wie Filme oder Musik in einer Cloud liegen. Aber was genau bedeutet das? Es stecken zwei Dinge

Mehr

Herzlich willkommen zum Vortrag Suchmaschinenoptimierung (SEO)

Herzlich willkommen zum Vortrag Suchmaschinenoptimierung (SEO) Herzlich willkommen zum Vortrag Suchmaschinenoptimierung (SEO) Elisabeth Langwieser Die Konzepter Marketing online.offline Independence Day - Friendsfactory München, 1. März 2012 3 x 10 = 45 Agenda 10

Mehr

1. Kapitel: Profil anlegen - 4 -

1. Kapitel: Profil anlegen - 4 - Handbuch Inhalt 1. Kapitel: Profil anlegen 2. Kapitel: Erster Einstieg 3. Kapitel: Kommunikation und Marketing 4. Kapitel: Bilder und Videos 5. Kapitel: Card Extras 6. Kapitel: Qualitätsmanagement Statistiken

Mehr

Web-Design und Suchmaschinen-Optimierung: Zwei getrennte Welten

Web-Design und Suchmaschinen-Optimierung: Zwei getrennte Welten Web-Design und Suchmaschinen-Optimierung: Zwei getrennte Welten 1. Einleitung Im täglichen Gespräch mit Unternehmen stellen wir als Suchmaschinen-Marketing- Agentur immer häufiger fest, dass Unternehmen

Mehr

Microsoft PowerPoint 2013 YouTube-Video einfügen

Microsoft PowerPoint 2013 YouTube-Video einfügen Hochschulrechenzentrum Justus-Liebig-Universität Gießen Microsoft PowerPoint 2013 YouTube-Video einfügen YouTube-Video einfügen in PowerPoint 2013 Seite 1 von 6 Inhaltsverzeichnis Einleitung... 2 Vorbereitungen...

Mehr

Mobiler Ratgeber. TILL.DE Google Partner Academy

Mobiler Ratgeber. TILL.DE Google Partner Academy Mobiler Ratgeber TILL.DE Google Partner Academy Warum mobil sein? Eine Webseite, die mobil nicht gut zu erreichen ist, ist mit einem geschlossenen Geschäft gleichzusetzen! Warum mobil sein? Darüber informieren

Mehr

E-Books produzieren und publizieren

E-Books produzieren und publizieren E-Books produzieren und publizieren Bruno Wenk Hochschule für Technik und Wirtschaft HTW Chur Leipzig, 24. Oktober 2012 Seite 1 Ziel Mit kostenlosen Programmen ein E-Book im Format EPUB (2.01) realisieren

Mehr

Joomla! 2.5 CMS. Kurzdokumentation. ql.de. Inhaltspflege.Dateiverwaltung. Stand: 06.02.2012 Dr. Mareike Riegel Ingo Holewczuk

Joomla! 2.5 CMS. Kurzdokumentation. ql.de. Inhaltspflege.Dateiverwaltung. Stand: 06.02.2012 Dr. Mareike Riegel Ingo Holewczuk Joomla! 2.5 CMS Kurzdokumentation ql.de Inhaltspflege.Dateiverwaltung Stand: 06.02.2012 Dr. Mareike Riegel Ingo Holewczuk Copyright 2012 Mareike Riegel 1 / 15 Inhaltsverzeichnis 1. Backend...3 1.1 Einloggen...3

Mehr

Materialien für Veranstalter

Materialien für Veranstalter Fotos und Videos mit Zugangsschutz veröffentlichen Nicht immer wollen alle Teilnehmenden eines Seminar später auf Fotos oder Videos im Internet zu sehen sein. Oder Sie wollen eine Fotodokumentation im

Mehr

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced DESIGN & DEVELOPMENT TYPO3 Advanced 1 Einleitung / Inhalt 2 / 13 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert

Mehr

ERSTE SCHRITTE HOMEPAGE-BAUKASTEN

ERSTE SCHRITTE HOMEPAGE-BAUKASTEN ERSTE SCHRITTE HOMEPAGE-BAUKASTEN SCHNELLSTART ANLEITUNG IN 6 SCHRITTEN ZUR EIGENEN HOMEPAGE Starten des Baukastens Loggen Sie sich mit den Zugangsdaten, die Sie per E-Mail bekommen haben, in den STRATO

Mehr

Was ist eine Homepage? Was ist für eine eigene Homepage notwendig?

Was ist eine Homepage? Was ist für eine eigene Homepage notwendig? Wie erstelle ein eigene Homepage??? Teil 1 - Anbieter und Software Einführung Eine eigene Homepage zu erstellen ist kein Hexenwerk, es ist allerdings auch nicht so einfach, dass man es mal eben macht.

Mehr

Suchmaschinenoptimierung. Dr. Lars Göhler

Suchmaschinenoptimierung. Dr. Lars Göhler Suchmaschinenoptimierung Dr. Lars Göhler Suchmaschinenoptimierung search engine optimization (seo) optimiert Websites so, dass sie mit Suchmaschinen gefunden werden erhöht den Wert einer Website ist überlebenswichtig

Mehr

Angreifbarkeit von Webapplikationen

Angreifbarkeit von Webapplikationen Vortrag über die Risiken und möglichen Sicherheitslücken bei der Entwicklung datenbankgestützter, dynamischer Webseiten Gliederung: Einführung technische Grundlagen Strafbarkeit im Sinne des StGB populäre

Mehr

WordPress installieren und erste Einblicke ins Dashboard

WordPress installieren und erste Einblicke ins Dashboard WordPress installieren und erste Einblicke ins Dashboard Von: Chris am 16. Dezember 2013 In diesem Tutorial zeige ich euch wie ihr WordPress in der aktuellen Version 3.7.1 auf eurem Webspace installieren

Mehr

scmsp SMARTES Content-Management-System Bestimmtes kann und das dafür sehr gut. Bei der Konzeption des blockcms stand die Einfachheit im Vordergrund:

scmsp SMARTES Content-Management-System Bestimmtes kann und das dafür sehr gut. Bei der Konzeption des blockcms stand die Einfachheit im Vordergrund: scmsp SMARTES Content-Management-System blockcms steht für Block Content Management System Wir brauchen kein CMS, das alles kann, sondern eines, das nur Bestimmtes kann und das dafür sehr gut. Bei der

Mehr

Anleitung und Style-Guidelines für die TuS-Recke Homepage

Anleitung und Style-Guidelines für die TuS-Recke Homepage Anleitung und Style-Guidelines für die TuS-Recke Homepage Elmar Athmer 17. Juli 2007 Seit dem 13.7.2007 läuft die TuS-Recke Homepage mit dem CMS Typo3. Dies ist eine Anleitung für alle die, die die TuS

Mehr

Internet-Wissen. Browser:

Internet-Wissen. Browser: Internet-Wissen Browser: Ein Browser ist ein Computerprogramm, mit dem du dir Seiten im Internet anschauen kannst. Browser ist ein englisches Wort. To browse kann man mit schmökern und durchstöbern übersetzen.

Mehr

Woher kommt die Idee Internet?

Woher kommt die Idee Internet? Woher kommt die Idee Internet? Aus den USA kommt die Idee. Nachdem die UdSSR 1957 den ersten Satelliten ins All schoss, fühlt en die USA sich bedroht. Die USA suchte nun eine Möglichkeit auch wenn das

Mehr

Erstellen von Beiträgen

Erstellen von Beiträgen Erstellen von Beiträgen Hinweis Die Anleitung ist für den Microsoft Internet Explorer 10 erstellt. Wird ein anderer Webbowser wie Firefox, Safari oder Google Chrom usw. verwendet, kann die Darstellung

Mehr

Anleitung für Autoren

Anleitung für Autoren Verwaltung.modern@Kehl Anleitung für Autoren Im folgenden Text werden Sie/wirst du geduzt. Bitte Sehen Sie/sieh uns diese Vereinfachung nach. Wenn du bei Verwaltung.modern@Kehl mitbloggen willst, legen

Mehr

Jimdo Fortsetzung Die eigene Jimdo-Webseite begutachten und erweitern"

Jimdo Fortsetzung Die eigene Jimdo-Webseite begutachten und erweitern Jimdo Fortsetzung Die eigene Jimdo-Webseite begutachten und erweitern" Yvonne Seiler! Volkshochschule Bern! Lernziele" Sie tauschen sich über Vor- und Nachteile aus und geben sich gegenseitig Tipps.! Sie

Mehr

Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website)

Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website) Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website) Redaktion Mit der Redaktion einer Webseite konzentrieren Sie sich auf die inhaltliche

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Joomla! Source- CMS. Joomla! Open Source-CMS

Joomla! Source- CMS. Joomla! Open Source-CMS Joomla! Open Source- CMS Joomla! Open Source-CMS Mirco De Roni, 2010 Inhaltsverzeichnis 1 Begriffe und Konzepte... 3 1.1 Content Management System (CMS)... 3 1.2 Struktur eines Web Content Management Systems

Mehr

Sigrid Born Jari-Hermann Ernst. Content Management mit TYPO3 CMS. Inklusive CD-ROM

Sigrid Born Jari-Hermann Ernst. Content Management mit TYPO3 CMS. Inklusive CD-ROM Sigrid Born Jari-Hermann Ernst Content Management mit TYPO3 CMS Inklusive CD-ROM Willkommen bei TYPO3 CMS für Kids! Vor wort Willkommen bei TYPO3 CMS für Kids! Auch wenn die Zahl von 500.000 Webseiten-Installationen

Mehr

Pensionierten Schulung Browser- und Google Funktionen

Pensionierten Schulung Browser- und Google Funktionen Pensionierten Schulung Browser- und Google Funktionen Lernende MITS, 06.03.2013 Luran Amzai, Regino Manoharan Migros-Genossenschafts-Bund MITS Pensionierten Schulungen Inhaltsverzeichnis 1. Geschichte

Mehr

modern - sharp - elegant

modern - sharp - elegant modern - sharp - elegant Das Konzept für Ihre Webseite Wir sind Ihnen gerne bei der Konzeption Ihrer neuen Webseite behilflich. Gemeinsam mit Ihnen analysieren wir Ihre Anforderungen, erarbeiten die Ziele

Mehr

MayControl - Newsletter Software

MayControl - Newsletter Software MayControl - Newsletter Software MAY Computer GmbH Autor: Dominik Danninger Version des Dokuments: 2.0 Zusammenstellen eines Newsletters Zusammenstellen eines Newsletters Artikel

Mehr

My.OHMportal Team Collaboration Erste Schritte

My.OHMportal Team Collaboration Erste Schritte My.OHMportal Team Collaboration Erste Schritte Felizitas Heinebrodt Technische Hochschule Nürnberg Rechenzentrum Kesslerplatz 12, 90489 Nürnberg Version 3 Mai 2014 DokID: teamcollweb-start Vers. 3, 20.08.2015,

Mehr

Dropbox - Cloud Computing Anleitung W.Barth - E.Völkel

Dropbox - Cloud Computing Anleitung W.Barth - E.Völkel Technisches vorab: Auch wenn wir vom Cloud Computing noch nie etwas gehört haben, nutzen wir es mit Sicherheit schon: Wir schreiben Mails. Virtueller Briefverkehr ist Cloud Computing der klassischen Art:

Mehr

WEBCONTENT MANAGEMENT SYSTEM (WCMS) JOOMLA!

WEBCONTENT MANAGEMENT SYSTEM (WCMS) JOOMLA! WEBCONTENT MANAGEMENT SYSTEM (WCMS) JOOMLA! 1 Definition WCMS Ein Web-Content-Management- System (kurz: WCMS, übersetzt: Inhaltsverwaltungssystem) ist ein System, das die gemeinschaftliche Erstellung und

Mehr

Infoblatt BROWSER TIPSS. Mozilla Firefox & Internet Explorer. 2012, netzpepper

Infoblatt BROWSER TIPSS. Mozilla Firefox & Internet Explorer. 2012, netzpepper Infoblatt BROWSER TIPSS Mozilla Firefox & Internet Explorer 2012, netzpepper Alle Rechte vorbehalten. Nachdruck oder Vervielfältigung auch auszugsweise nur mit schriftlicher Genehmigung des Autors. Stand:

Mehr

Herzlich Willkommen. Der Weg zur eigenen Homepage. vorgestellt von Frank Kullmann

Herzlich Willkommen. Der Weg zur eigenen Homepage. vorgestellt von Frank Kullmann Herzlich Willkommen Der Weg zur eigenen Homepage vorgestellt von Frank Kullmann 1. Die Planung Was soll auf unserer Homepage abgebildet werden (Texte, Bilder, Videos usw.)? Welche Struktur soll unsere

Mehr

Kurzanleitung für das CMS Joomla 3.x

Kurzanleitung für das CMS Joomla 3.x Kurzanleitung für das CMS Joomla 3.x 1. Login ins Backend Die Anmeldung ins sogenannte Backend (die Verwaltungsebene) der Website erfolgt über folgenden Link: www.name-der-website.de/administrator. Das

Mehr

Dynamische Webseiten mit PHP 1

Dynamische Webseiten mit PHP 1 Dynamische Webseiten mit PHP 1 Webserver, PHP und MYSQL Ein Webserver dient dazu, Internetseiten an PCs zu senden, von denen sie aufgerufen werden. Beispiel: Sie tippen im Browser www.fosbosweiden.de ein.

Mehr

Homepageerstellung mit WordPress

Homepageerstellung mit WordPress Homepageerstellung mit WordPress Eine kurze Einführung in die Installation und Einrichtung von WordPress als Homepage-System. Inhalt 1.WordPress installieren... 2 1.1Download... 2 1.2lokal... 2 1.2.1 lokaler

Mehr

Handbuch USC-Homepage

Handbuch USC-Homepage Handbuch USC-Homepage I. Inhalt I. Inhalt Seite 1 II. Wichtigste Grundregel Seite 1 III. Funktionen der Seite Seite 2 1. Anmelden in der Community Seite 2 2. Mein Account Seite 3 3. Wechselzone Seite 4

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

Mehr

1. Erstellung, aus einer Idee wird ein digitaler Bestandteil einer Website.

1. Erstellung, aus einer Idee wird ein digitaler Bestandteil einer Website. 2. Webpublishing Zur Erstellung von Webpages wurden verschiedene Konzepte entwickelt. Alle diese Konzepte basieren auf dem Content Life Cycle, der mit einem Content Management System weitgehend automatisiert

Mehr

Suchmaschinen und ihre Architektur. Seminar: Angewandtes Information Retrieval Referat von Michael Wirz

Suchmaschinen und ihre Architektur. Seminar: Angewandtes Information Retrieval Referat von Michael Wirz Suchmaschinen und ihre Architektur Seminar: Angewandtes Information Retrieval Referat von Michael Wirz Ziel Rudimentäre Grundkenntnisse über die Funktionsweise von Suchmaschinen und Trends Einführung in

Mehr

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse Felix Kopp Orientierung Veröffentlichen und Aktualisieren ohne Programmierkenntnisse Bestehende Internet-Seite aktualisieren. oder

Mehr

Tipps rund um die Suchmaschinen- Optimierung

Tipps rund um die Suchmaschinen- Optimierung Tipps rund um die Suchmaschinen- Optimierung Jimdo hat einige praktische Tipps und Wissenswertes rund um das Thema Suchmaschinenoptimierung zusammengestellt. Jeder kann jederzeit einsteigen und seine Seite

Mehr

Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz

Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz Diese Anleitung soll als Kurzreferenz und Schnellanleitung dienen um einfach und schnell Berichte auf der Homepage www.dav-koblenz.de

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Whitepaper Facebook Marketing - Facebook Integration in WordPress Blogs

Whitepaper Facebook Marketing - Facebook Integration in WordPress Blogs Whitepaper Facebook Marketing - Facebook Integration in WordPress Blogs Um zusätzliche Reichweite für seine Blog-Artikel zu schaffen bietet Facebook Blogbetreibern die verschiedensten Optionen an. In diesem

Mehr

Einführung: Gestalten von Internet-Seiten

Einführung: Gestalten von Internet-Seiten Einführung: Gestalten von Internet-Seiten Um zu verstehen, wie die Web-Seiten aus dem Web auf den Computer kommen, ist ein kleiner Blick in die Geschichte notwendig. Das Internet erreichte seinen Durchbruch

Mehr

Website-CMS Grundlagen des Worldsoft-CMS

Website-CMS Grundlagen des Worldsoft-CMS 1 1. Was ist ein Content Management System (CMS)? Ein Web Content Management System ist eine Datenbanklösung zur einfachen Erstellung und Aktualisierung von Websites. Im Gegensatz zu einer statischen Website

Mehr

Cookies & Browserverlauf löschen

Cookies & Browserverlauf löschen Cookies & Browserverlauf löschen Was sind Cookies? Cookies sind kleine Dateien, die von Websites auf Ihrem PC abgelegt werden, um Informationen über Sie und Ihre bevorzugten Einstellungen zu speichern.

Mehr

1... Ein Platz im Internet... 24 2... Die Sprachen des Web... 36 3... Dreamweaver im Vergleich... 50

1... Ein Platz im Internet... 24 2... Die Sprachen des Web... 36 3... Dreamweaver im Vergleich... 50 1... Ein Platz im Internet... 24 1.1... Wie kommt meine Site ins Internet... 24 1.1.1... Was ist eine Website... 24 1.1.2... Ein Platz im WWW... 25 1.2... Die eigene Domain... 25 1.2.1... Was ist eine

Mehr

RSS-Feeds. Zentraler Informatikdienst der Universität Wien. Gerhard Mayer. Stand: April 2014, TYPO3-Version 4.5

RSS-Feeds. Zentraler Informatikdienst der Universität Wien. Gerhard Mayer. Stand: April 2014, TYPO3-Version 4.5 4-2014 RSS-Feeds RSS-Feed RSS-Feeds Zentraler Informatikdienst der Universität Wien Gerhard Mayer Stand: April 2014, TYPO3-Version 4.5 Dieses Skriptum ist eine Begleitunterlage der Schulungen des Zentralen

Mehr

ditnetwork Typo3 Benutzerhandbuch

ditnetwork Typo3 Benutzerhandbuch ditnetwork Typo3 Benutzerhandbuch ditnetwork Internetservice Joachim Streit Rottstraße 28 67373 Dudenhofen jstreit@ditnetwork.de Fon.: 0 62 32 / 65 10 04 Fax.: 0 62 32 / 65 10 05 Kleines Manual für typo3

Mehr

Content-Management- Systeme (CMS) Inhaltsverwaltungssystem, Redaktionssystem

Content-Management- Systeme (CMS) Inhaltsverwaltungssystem, Redaktionssystem Content-Management- Systeme (CMS) Inhaltsverwaltungssystem, Redaktionssystem Inhalt Content Management (CM) Allgemeines über CMS CMS Typen Open Source vs. Lizenzsoftware Joomla! Quellen Content Management

Mehr