Webdesign für Einsteiger

Transkript

1 Webdesign für Einsteiger Christian Kaiser 19. März 2009 Inhaltsverzeichnis 1 Einleitung Vorüberlegungen zum Projekt Das Brainstorming Der Papermock Prototypen Die Wahl des richtigen Editors WYSIWYG Quelltexteditoren Sonstige Programme Struktur eines Webprojektes Template einer Ordnerstruktur Fehler: Directory Listing Unterstützte Bildformate Der Ordner cgi-bin/ Einführung in HTML HTML im Netzwerk: Wie fordert der Browser eine HMTL Seite an? Geschichte und Versionen von HTML Aufbau und Abgrenzung von HTML Beispiele für HTML Tags Steuerungstags Wichtige Blockelemente Wichtige Inlineelemente Tabellen Der DOCTYPE Einführung in CSS Allgemeines

2 4.1.1 Generelle CSS Syntax Tips und Tricks mit CSS class und id Attribute Einbinden von CSS in HTML Einfache Formatierungsangaben mit CSS Farbwerte in CSS Block und Inline Elemente... und Ihre Mischlinge Textdekorierung Breite und Höhe Rahmen Pseudoklassen Die CSS Kaskade Die!important Regel Vererbung und Selektoren Allgemeine Selektoren CSS in verschiedenen Ausgabemedien Das BOX Model Elementuss und Positionierung Sichtbarkeit von Elementen Providerauswahl Kommerzielle Hosting Anbieter Werbenanzierte Anbieter Suchmaschinen Arbeitsweise von Suchmaschinen Suchroboter Anmelden an der Suchmaschine HTML für Suchmaschinen aufbereiten HTML Meta Tags Diverse Meta Tags robots.txt Suchmaschinenoptimierung Generelle Tips Unerlaubte Tricks Nützliche Software Überblick HTML Editoren Bildbearbeitung Webserver Webbrowser Tools

3 8 Exkurs: Web Buzzwords und ihre Beispiele Wichtige Technische Realisierungen Copyright März Einleitung Dieses Skript soll sie bei der Umsetzung eines kleineren Webprojektes auf HTML Basis unterstützen. Es werden folgende Punkte durchgenommen: Planung eines Webprojektes Aufbau einer geeigneten Verzeichnisstruktur Einführung in HTML Einführung in CSS Support für Suchmaschienen Ausw<ahl eines geeigneten Providers Ausblick: Web Vorüberlegungen zum Projekt Vor dem eigentlichen Starten der Webseite sollten Sie sich ein paar Gedanken zu den Randbedingungen Ihres Projektes machen: Welche Personen sind beteiligt: Wer erstellt die Webseite, wer soll sie später pegen? Wie ist das redaktionelle oder technische Verständis der beteiligten Personen? Brauche ich in bestimmten Bereichen Unterstützung? Wer ist meine Zielgruppe: Wie viele Hits / Monat sind zu erwarten? Sind meine Kunden ein bestimmtes Verhalten gewöhnt? Habe ich ältere oder behinderte Besucher auf meiner Webseite? Was für Browser werden verwendet? Welche Bildschirmausung verwendet sie? 1 Was soll auf der Webseite erscheinen und wie viel Zeit steht dafür zur Verfügung: Ist das Ziel technisch zu erreichen? Tip: Bei Auftragsarbeiten müssen die Vorstellungen schriftlich festgehalten werden. Das erledigt i.d.r. der Auftraggeber. Wenn dieser es nicht macht, erledigt das der Webdesigner selbst. 1 Browseranteil in %: 3

4 Hilfsmittel zum Festlegen solcher Requirements sind: Mocks - Zeichnungen der Webseite auf Papier Prototypen - Erstellen eines Teils der Webseite, um sich auf das Layout zu einigen. Der Umfang des Prototyps ist ca. 5% des gesamten Projektes. Spezikation von Akzeptanz Testfällen - Beispiel: Wenn ich auf Kontakt klicke, önet sich ein Formular. Brainstorming Nachfolgend werden einige Techniken vorgestellt, um die - also Anforderungen - an ein Projekt herauszuarbeiten Das Brainstorming Die Methode des Brainstormings ist ein Hilfsmittel zum Sammeln von Ideen. In unserem Fall können mit Hilfe von Brainstorming die Inhalte und Funktionen eines Webauftritts bestimmt werden. Es wird in dern Regel nicht durch den eigentlichen Webdesigner durchgeführt sondern durch die Auftraggeber (Denn sie bestimmen Inhalt der Webseite). Brainstorming ist nichts anderes als Diskutieren über Inhalte, allerdings mit einer Einschränkung: Im ersten Schritt darf keine Kritik geübt werden. 1. Alle Vorschläge werden lose notiert, z.b. auf Karteikarten. 2. Wenn es keine weiteren Vorschläge mehr gibt werden alle Kartekarten gruppierrt. 3. Im letzten Schritt wird über Machbarkeit und Sinhaftigkeit diskutiert. Unsinnige Punkte werden gestrichen Der Papermock Unter einem versteht man das simple Aufmalen der Webseite auf Papier. Er wird direkt mit dem Kunden während einer Besprechung erstellt. Auf Basis einer solchen Zeichnung wird ein Prototyp aufgebaut. Verwenden sie für solch lose Zeichnungen am besten einen Bleistift und ein Radiergummi. Halten Sie hier ebenfalls Details fest, die der Kunde explizit wünscht. Dazu gehören Farben, Schriftgröÿen, Plazierung der Navigationsleiste, Logogröÿe, usw Prototypen Ein ist eine nicht funktionale Vorabversion der Webseite. Ein Prototyp stellt meiÿtens das engültige LAyout der Webseite dar. Er kann allerdings auch dazuverwendet werden, 4

5 um besondere Funktionalitäten hervorzuheben. 2 Wenn man motivierte Kunden - das heiÿt Kunden, die bereit sind an einer Webseite mitzuarbeiten - kann man ausgehend von diesem Prototyp immer aktuelle Versionen der Webseite vorab online stellen. 1.2 Die Wahl des richtigen Editors WYSIWYG Das Programm setzt hierbei die vom Benutzer ausgeführten Aktionen im Hintergrund in Quelltext um. Wenn er es nicht möchte, braucht der Benutzer den Raum der graschen Darstellung also gar nicht zu verlassen. Viele WYSIWYG-Editoren bieten allerdings auch die Möglichkeit, zwischen Layout- und Quelltextansicht umzuschalten, sodass man die Entwicklung der Seite auch direkt im Quelltext verfolgen und dort Korrekturen und Änderungen vornehmen kann. Im Gegensatz zu WYSIWYG-Editoren wird bei textorientierten Editoren (auch ASCII- Editoren genannt) ein HTML-Dokument ausschlieÿlich auf Quelltext-Ebene erstellt. Das bedeutet, man muss den Quelltext der Seite in der Regel komplett per Hand tippen. Die Vorteile eines WYSIWYG-Programms liegen in der Natur der Sache: Sie sind sehr schnell in der Lage, eine Seite fertigzustellen oder ein bestehendes Grundgerüst mit Inhalten zu füllen. WYSIWYG-Programme verlangen keine oder kaum HTML-Kenntnisse zu Fertigstellung einer Seite und verfügen zusätzlich oft über Layout - Vorlagen, die Ihnen die Konzeption eines Layouts weitgehend abnehmen. Viele WYSIWYG-Programme verfügen über ein ausgereiftes Projektmanagement, das Ihnen die konzeptionelle Arbeit zum Teil abnimmt. Insgesamt gesehen sind WYSIWYG-Programme daher möglicherweise ein guter Einstieg in das Webauthoring, da Sie ohne HTML-Kenntnisse rasche Ergebnisse erhalten und schnell ein Gefühl dafür entwickeln, welche Techniken mit HTML möglich sind und welche nicht. AberWYSIWYG-Editoren erzeugen in einigen Fällen unerklärlicherweise viel überüssigen Code, was längere Ladezeiten und eine groÿe Unübersichtlichkeit des Quelltextes bedeutet. Oftmals entspricht der Code nicht dem international anerkannten Standard des W3C. Dies kann dazu führen, dass kein anderer Browser die Webseite tatsächlich so darstellt, wie Sie sie entworfen haben. Dies kann von kleinen Abweichungen bis hin zum völligen Fehlen wichtiger Seiteninhalte führen, obwohl die Seite in Ihrem WYSIWYG- Editor einwandfrei zu funktionieren scheint. 2 Das Hervprheben eines Bildes beim Überfahren mit der Maus oder das Verhalten der Webseite beim Betrachten mit einem Handy ist hierfür ein Beispiel. 5

6 Ein nicht unwesentlicher Nachteil ist auch die häug mangelhafte Trennung von Markup und Layout und das inkonsequente Einsetzen von CSS, was Sie als Webautor per Hand wesentlich sicherer gestalten können. Die Nachteile von Quelltext Editoren sind gerade für Anfänger oensichtlich: Sie brauchen HTML-Kenntnisse, um eine Seite zu erstellen. Das Tippen des Quelltextes dauert wesentlich länger als das Zusammenklicken in einem WYSIWYG-Programm, selbst wenn sie Copy and Paste einsetzen und dadurch sich wiederholende Seiteninhalte im Quelltext mehrfach duplizieren können. Quelltext-Editoren sind spartanischer aufgebaut und verfügen in den meisten Fällen über kein so umfangreiches Projekt- und Seitenmanagement. Sie sind auf sich allein gestellt, wenn es um die Erarbeitung eines Seitenkonzeptes geht. Das Umsetzen eines Entwurfskonzeptes in einen gut strukturierten HTML- Quelltext erfordert darüber hinaus eine Menge an Abstraktionskraft Quelltexteditoren Gegenüber den WYSIWYG Editoren haben Quelltexteditoren dennoch einige graerende Vorteile: Sie haben direkte Kontrolle über die Entstehung des Seitenquelltextes. Sie können die Auswirkungen jeder noch so geringen Änderung im Quelltext sofort im Browser überprüfen. Sie beschränken sich beim Schreiben Ihrer Seite auf das Wesentliche und schreiben dadurch keinen überüssigen Code. Dadurch ist Ihre Seite schneller. Sie ordnen Ihren Quelltext für sie verständlich und logisch. Sie haben enorme Lernfortschritte mit jeder Seite, die Sie schreiben. Sie gewinnen immer mehr Verständnis für die Zusammenhänge und sehen die Textauszeichnung im Quelltext getrennt von der Darstellung im Browser. Dadurch entwickeln Sie besseres Verständnis für stilistisch gutes Webauthoring. Ein Wechsel des Editors ist leichter als bei WYSIWYG-Editoren, da der eigene Quellcode mit einem anderen Editor nach dem gleichen Prinzip weiterverarbeitet werden kann. Es liegt in Ihrer Hand, nicht in der Hand eines Programms, ob Sie beim Erstellen der Seite Fehler machen möchten oder nicht. Haben Sie mehrere Seiten gleichen Layouts aber wechselndem Inhalts, ist es Ihnen ein leichtes, sich wiederholende Elemente des Quelltextes zu kopieren und nur die neuen zu ergänzen. Fehler, die sich beim Validieren herausstellen, sind schneller zu nden und zu verstehen. 6

7 1.2.3 Sonstige Programme Als Webentwickler benötigen sie desweiteren: Aktuelle Versionen vom Internetexplorer und vom Firefox Ein Bildbearbeitungsprogramm 2 Struktur eines Webprojektes 2.1 Template einer Ordnerstruktur Grundsätzlich gibt es keine Vorgaben, wie die Dateien einer Webseite benannt werden müssen, und wo sie abzulegen sind. Allerdings empehlt es sich - um nicht durcheinander zu kommen - die Dateien je nach Typ in unterschiedlichen Ordnern zu speichern. Das Listing 1 zeigt die Ordner einer organisierten Webpräsenz. Weitere nützliche Regeln: Die Startdatei heiÿt index.html oder index.php (Wenn PHP aktiviert ist.), index.htm (ohne l) funktioniert, ist aber veraltet. Verwenden sie bei der Benennung von Dateien und Ordnern nur kleinbuchstaben Verwenden sie bei der Benennung von Dateien und Ordnern keine Leerzeichen, diese werden im Internet mit der Zeichensequenz %20 ersetzt. Verwenden sie bei der Benennung von Dateien und Ordnern nur das amerikanische Alphabet. Vermeiden sie deutsche Umlaute wie ä, ü, ö oder ÿ. Hier gilt das gleiche wie für Leerzeichen. Listing 1: Beispielhafte Ordnerstruktur für ein Webprojekt 1 /home/ meinwebprojekt / 2 +. htpasswd 3 / Optionale Datei mit Passwoertern 4 und Benutzern / 5 + public_html / / S t a r t v e r z e i c h n i s I h r e r Anwendung / 6 + index. html / S t a r t d a t e i / 7 + robots. txt / Anweisungen f u e r Suchmaschienen / 8 + favicon. i c o / wird a l s icon in der Browser URL a n g e z e i g t / img / B i l d e r : g i f, jpg, png / 11 + s t y l e / CSS Dateien / 12 + format. c s s / Globale Styleangaben / 13 + j s / J a v a s c r i p t Quellcodes / 14 + t p l / HTML Dateien Templates / 7

8 15 16 / Optionale Ordner / 17 + pdf / / haben s i e pdf dateien, e t c. / 18 + i n t e r n a l / / Diese Daten sind g e s c h u e t z t / htaccess / Hier stehen z u g a n g s b e r e c h t i g u n g e n drin / l o g s / s t a t s / / Hier l i e g e n i. d.r. i h r e Access L o g f i l e s / 22 cgi bin / / S k r i p t e : Gaestebuch, counter,... / 2.2 Fehler: Directory Listing Wenn ein Benutzer das erste mal ihre Seite besucht, gibt er keinen Dateinamen ein: Request: GET nicht GET Der Browser verläÿt sich dabei darauf, das der Webserver die Startseite ihrer Webpräsenz automatisch zurückliefert. Diese Startseite ist meistens index.html, index.htm, index.php (in dieser Reihenfolge). Wenn keine dieser Dateien existiert, zeigt der Webserver dem Benutzer ein Directory Listing an. Ein solches Listing ist unschön, da der Benutzer Details über Ihre Seite erfährt, die ihn nichts angehen. Eventuell kann sich daraus ein Sicherheitsrisiko entwickeln. 2.3 Unterstützte Bildformate Nicht jedes Bildformat, das innerhalb eines <img src= /> Tags verwendet wird, wird auch als Bild im Browser angezeigt. Bildformate der gängigen Browser sind: gif Graphics Interchange Format Verlustfreies Format. GIF ist unterstützt 256 verschiedene Farben und ist daher geeinget für Icons, Avatare oder Kurven. GIF unterstüzt Transparenz und animierte Graken. jpg Joint Photographic Experts Group Format zum Publizieren von Fotos im Internet. Ein transparenter Hintergrund ist kein Bestandteil von JPEG Dateien, aber dafür Unterstützung von bis zu Farben. png Portable Network Graphics Verlustbehaftetes Format, welches einen Transparenten Hintergrund unterstützt. PNG Graken sind gröÿer wie JPEG's aber immer mehr im Kommen. Macromedia Flash: Flash ist eine Animationssprache, die der Browser mit Hilfe des Flash Plugins anzeigen kann. Flash Dateien sind z.b. durch Online Spiele oder Youtube bekannt geworden. Das Flash Plugin ist für Windows, Linux und Mac OS verfügbar. 8

9 Abbildung 1: Ein Directorylisting welches Betriebssystem mit PHP und Apache Version oenbart Videos: Videos können über Flash oder direkt in HTML eingebunden werden. Die Videodateien sollten im Mpeg4 oder DivX Format sein. Ferner können die meisten Benutzer Quicktime oder Real Media Dateien lesen Der Ordner cgi-bin/ Einige Provider schreiben Ihnen vor in welchem Ordner sie ausführbare Dateien speichern müssen. Dieser Ordner heiÿt meiÿtens cgi-bin/. Programme in diesem Ordner sind z.b. Mailformulare, Gästebücher, Counter,... Sie sind meiÿt in den Skriptsprachen PHP oder Perl geschrieben. Ein Beispiel für das Einbinden eines Counters ist in Listing 2. Listing 2: Aufruf eines Counters aus einer Seite heraus. 2 <! Variante 1 : Ein u n s i c h t b a r e r counter > 3 <img src=" counter s c r i p t. php" style=" display : none ; " /> 4 5 <! Variante 2 : Ein s i c h t b a r e r counter > 6 <img src=" counter s c r i p t. php" /> 9

10 1 Das Aufrufen eines externen Programmes in cgi-bin/ geschieht in der Regel über das <img /> Tag. Um sich die Funktionsweise klarzumachen, muss man sich den Ablauf eines Requests in einzelnen Schritten vorstellen: 1. REQUEST: Der Benutzer fragt die Seite index.html an. 2. RESPONSE: Der Webserver liefert den HTML Quelltext der Seite aus und der Browser analyisiert diese. 3. REQUEST: Der Browser ndet das <img /> Tag und versucht das Bild nachzuladen: GET /counter.php. Dieser Request startet das Programm auf dem Server und die Informationen über den Benutzer werden gespeichert. 4. RESPONSE: Das Program auf dem Server schickt Informationen an den Browser zurück. Diese können ein gerendertes Bild sein oder irgendetwas anderes. 5. HTML: Der Browser versucht die Daten vom Server, die er für das <img /> Tag bekommen hat, als Bild zu interpretieren und das Bild anzuzeigen. 6. HTML: Der CSS Ausdruck display:none; versteckt Bild oder Fehlermeldung für dieses Tag vor dem Benutzer. Das oben beschriebene Verhalten ist als Tracking Pixel oder Webbug bekannt. Das Programm STWC - Counter nutzt diese Technik zum Beispiel, um Benutzerprole zu erstellen. Eine weitere Möglchkeit, den cgi-bin Ordner zu ansprechen von CGI Programmen über Formulare. Listing 3 zeigt, wie eine gesendet werden kann, ohne dass die eigene adresse in der HTML Seite auftaucht. Listing 3: Versenden einer über ein externes Programm. 2 <form method="post" action="mailme. php" class="mail formular "> 3 4 <! v a r i a b l e steuerungsparameter > 5 <input type=" hidden " name=" successpage " value="" /> 6 7 <! s i c h t b a r e Parameter werden durch den 8 Benutzer eingegeben > 9 B e t r e f f : <input type=" text " name=" subject " 10 value=""/><br /> 11 Absender : <input type=" text " name=" subject " 12 value=""/><br /> Text :<br /> 15 <input type=" textarea " name="message" 16 value=" Hier steht die Nachricht "/><br /> <! Knoepfe zum a b s c h i c k e n der Nachricht > 10

11 19 <input type=" submit" name=" submit" 20 value=" Mail versenden " /> 21 <input type=" r e s e t " name=" r e s e t " 22 value="eingaben verwerfen " /> </form> Das HTML Form Tag deniert ein Formular. Formulare ermöglichen Benutzereingaben. Ein Formular muss immer einen Namen haben, sowie den Parameter action. Im Parameter action steht der Name des externen Programmes, das aufgerufen werden soll, um die in <input> eingegebenen Parameter auszuwerten. Das externe Programm - also der Parameter action - ist auch für die Seite verantwortlich, auf die Ihr Benutzer nach der Ausführung wieder landet. Hier können sie nur über hidden Parameter eingreifen. Welche Parameter benötigt werden, ist abhängig vom angepsprochenen Programm. Der Parameter method gibt die Art an, wie Daten übertragen werden sollen. Es gibt die Werte get Die Parameter werden in der URL des Browsers übertragen. Dadurch sind sie für den Benutzer sichtbar. Auf diese Weise sind Formulare leichter zu testen. Beispiel: post Die Parameter werden in der Datesection 3 übertragen. Dadurch sind sie für den Benutzer unsichtbar. Groÿe Datenmengen, wie z.b. Dateiuploads sollten immer per POST Method übertragen werden. Abbildung 2 Zeigt das gerenderte Formular (Mit Hilfe von CSS noch ausgerichtet). 3 Einführung in HTML 3.1 HTML im Netzwerk: Wie fordert der Browser eine HMTL Seite an? Ein Webprojekt besteht aus logisch zusammengehörende Dateien die über einen Browser erreichbar sind. Dabei ist der Inhalt nicht auf das HTML Format beschränkt. Ebensogut werden PDF Dateien Programme Oce Dokumente Textdateien 3 Technik: Das ist der Teil eines HTML Requests, indem die HTML Daten stehen. 11

12 Abbildung 2: Das oben beschriebene Mail Formular Bilder und Videos Musikdateien (auch als Hintergrundmusik einer Seite) XML Dateien 4 über einen Webserver zur Verfügung gestellt. Das Projekt besteht in der Regel aus mehreren HTML Dateien. Unter versteht man die Sprache die ein Browser (Internet Explorer, Firefox, Opera, Safari,...) spricht um die textuellen Webseiten für einen Benutzer ansprechend darzustellen. HTML Seiten haben folgende Eigenschaften: Sie strukturieren Text. Sie binden Multimediadaten ein (Bilder, Videos, Musik) Sie ermöglichen es zwichen einzelnen Dateien zu navigieren. Das geschieht über die Links bzw. Hypelinks. 5 Sie binden externe Dateien (z.b. zur Formatierung) ein 4 XML ist eine für Maschienen gut lesbare Textdatei 5 Nähere Informationen siehe bei der Erläuterung des <a> - Tags. 12

13 Ein Webserver ist ein PC der im Internet zur Verfügung steht und in der Regel über einen Domainnamen erreichbar ist. Dieser Server stellt Speicherplatz für ein Webprojekt zur Verfügung. Dieser Speicherplatz wird als bezeichnet. Zu den weiteren Aufgaben eines Webservers gehören das Loggen der Zugrie auf die eigene Seite und das Ausführen serverseitiger Skripte. Ein bekannte Vertreter Serverseitiger Programme sind und. Um die Daten vom Webserver auf den PC der Benutzer zu übertragen wird das verwendet. Dieses ist entweder HTTP in der normalen, unverschlüsselten Variante oder HTTPS in der verschlüsselten Variante. 6. Der Vorgang wie Seiten mit Hilfe von HTTP an den Browser übertragen werden ist in Abb. 3 dargestellt. Jedes Object / jede Seite (HTML, Bilder, Videos, CSS,...) die im Browser benutzt wird, muss einzeln wie in Abb. 3 dargestellt angefordert werden. Abbildung 3: Anforderung einer HTML Seite über HTTP Das Protokoll geben sie in der Adressleiste ihres Browsers an: protokoll://servername.domain/pfad/auf/dem/server/datei.name Das HTTP Protokoll besteht aus einem Header mit den Kopnformationen und dem Body. Der Body enthält den HTML Quelltext. Der Header Informationen, die für den Benutzer unsichtbar sind, wie: Serverversion und Serversoftware Letztes Update der Seite Art des Dateiinhaltes (HTML, Text, XML, Bilder, Microsoft Oce, PDF, allgemeine Binärdaten) Eventuell verwendete Proxyserver 7 6 HTTP(S) = Hypertext Transfer Protokoll (SSL) 7 Siehe Wikipedia: Proxy Server 13

14 Fazit: HTTP ist ein Protkoll mit dem HTML Seiten von einem Server an einen Browser übertragen werden. HTML ist eine Sprache die ein Browser nutzt um Inhalte für Menschen ansprechend darzustellen. 3.2 Geschichte und Versionen von HTML Hier eine kurze Übersicht der wichtigsten HTML Versionen aus der Wikipedia übernommen: HTML (ohne Versionsnummer, 3. November 1992): Die Urversion, die sich nur an Text orientierte. HTML 4.0 (18. Dezember 1997): Mit dieser Version werden Stylesheets, Skripte und Frames eingeführt. Auch eine Trennung in Strict, Frameset und Transitional erfolgt. Am 24. April 1998 erscheint eine leicht korrigierte Version dieses Standards. HTML 4.01 (24. Dezember 1999): Ersetzt HTML 4.0 mit vielen kleineren Korrekturen. XHTML 1.1 (31. Mai 2001): Nachdem XHTML in Module aufgeteilt wurde, wird mit XHTML 1.1 eine strikte Version deniert, bei der die mit HTML 4 eingeführten Varianten Frameset und Transitional entfallen. Ausblick: Die nächsten Versionen XHTML 2.0 und HTML 5.0 sind ab Mitte 2008 in Arbeit. Sie werden vermutlich ab 2010 bis 2011 aktuell werden. 3.3 Aufbau und Abgrenzung von HTML Bevor Sie sich den Aufbau der HTML Datei näher anschauen werden, sollten Sie sich klarmachen, was für Anforderungen an eine Webseite gestellt werden: Ferner Darstellen von Medien wie Texte, Bilder, Videos, Programme Einzelne Bereiche der Webseite hervorheben, z.b. durch Farben, Schriftart, Rahmen Maschienenlesbarkeit (Suhmaschienen, Browser, Text to Voice Software,...) Kategorisierung Durchsuchbarkeit Einheitliche Darstellung in unterschiedlicher Software Navigation innerhalb der Webseite und Seitenübergreifend (Links und Anker) Dynamische Manipulation von Struktur und Inhalt (JavaScript) Leichte Erlernbarkeit Dynamische Manipulation von Struktur und Inhalt (JavaScript) 14

15 In Bezug auf die Fähigkeiten eines Browsers ergeben sich hier 2 Anforderungen zur Darstellung einer Webseite - nämlich Strukturierung des Inhalts und grasche Aufbereitung. HTML ist hier für die Strukturierung zuständig, und eine später behandelte Technik namens CSS für das Layout. Zur Struktur einer Webseite, und damit in den Verantwortungsbereich von HTML, gehören: Überschriften Titel Tabellen Absätze und Boxen Spezielle Textpassagen, wie wichtiger Text, Fachbegrie, Abkürzungen,... Medien, wie Bilder oder Videos Absprungpunkte und Marker (Links) Metadaten (Autor, Erstelldatum, Kennzeichnung jugendgefährdender Inhalte, etc.)... und noch ein paar mehr. Zum Aufgabenbereich Layout gehören Punkte wie Farben, Schriftarten, Rahmen, aber auch Positionierung der einzelnen Elemente in der Seite. Diese Punkte sind im Kapitel über CSS (Kapitel 3.4.5) näher erläutert. Die oben genannten Strukturierungsmerkmale einer Webseite werden durch <tags> gekennzeichnet. Der Aufbau ist foglender: 1. Tags beginnen immer mit einem önenden Tag: <tag> und sind klein geschrieben. 2. Dann kommt der Inhalt: Ich bin der Inhalt 3. Zuletzt wird der Tag wieder geschlossen: </tag> 8 Tags können über attribute näher eingestellt werden: <tag_name attribute_name="attribut wert">der Inhalt</tag_name> Beachten Sie, dass der Attributwert von Anführungsstrichelchen umschlossen sein muss. Der Attributname darf keine leerzeichen enthalten, der Attributwert aber schon. Zu guter letzt das Grundgerüst einer kompletten HTML Datei: Listing 4: Grundgerüst einer HTML Datei 1 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML //EN" 8 Wenn das Tag keinen Inhalt hat, kann das Tag direkt wieder geschlossen werden, z.b. <br /> erzwingt eine neue Zeile. 15

16 2 " http ://www. w3. org /TR/html4/ s t r i c t. dtd"> 3 <html> 4 <head> 5 <t i t l e> 6 T i t e l der Webseite 7 </ t i t l e> 8 9 <! E v t l. w e i t e r e Kopfinformationen > 10 </head> <body> 13 Inhalt der Webseite 14 </body> 15 </html> Zeile 1,2 DOCTYPE: Der Doctype legt für den Browser fest um welchen HTML Dialekt Version es sich handelt. Wenn der DOCTYPE fehlt, muss der Browser raten, um welche Version es sich handelt. Das führt in der Regel zu Fehldarstellungen. Zeile 3,15 <html> Der Browser weiÿ, das ab hier der HTML Code beginnt. Zeile 4,10 <head> Hier stehen Informationen für Suchmaschienen und Layout. Text zwischen diesen Tags wird interpretiert, aber ist im Browser nicht sichtbar. Zeile 5,6,7 <title> Der Text zwischen dem <title> Text erscheint in der Titelleiste des Browsers. Zeile 12,13,15 <body> Alles was sie an Inhalt schreiben ist von den 2 <body> Tags umschlossen. 3.4 Beispiele für HTML Tags HTML unterscheidet zwischen Block und Inline Elementen. Nachdem ein Blockelement geschlossen wurde, beginnt ein neuer Absatz. Nach einem Inline Element läuft der Text in der gleichen Zeile weiter. Nur Block Elemente haben eine feste Breite. 9 Sie nden hier nur die wichtigsten Elemente aufgelistet. Für eine komplette HTML Referenz nutzen sie bitte?? Steuerungstags Steuerungselemente haben keinen Einuss auf den Textuss. Sie können sowohl block als auch inline Elemente sein. html, body, head, link, style, script 9 Die Ausnahmen der Sätze nehmen wir später im Abscnhitt Box Model und CSS durch. 16

17 3.4.2 Wichtige Blockelemente <div>html-text</div> div gilt als allgemeines Blockelement. Es ändert den Text in der Standardeinstellung nicht, erzwingt aber einen Zeilenumbruch. In Verbindung mit CSS und den Attributen style bzw. class kann der Text ein beliebiges Layout bekommen. <p>html-text</p> p steht für Einen Absatz. Vor und nach einem in <p> eingschlossenen Textes generiert der Browser einen Abstand. Der Abstand variiert von Browser zu Browser. <h1>die Überschrift</h1> Die Elemente h1 bis h6 repräsentieren Überschriften verschiedener Gliederung. Beispiel für Blockelemente: <!-- Ein Block mit 2 gegliederten Überschriften und 2 Absätzen --> <div class="content"> <h1>überschrift 2</h1> <p>lore Ipsum 1</p> <h2>überschrift 2</h2> <p><em>lore</em> <strong>ipsum</strong> 1</p> <div> Listen sind eine Untergruppe von Blockelementen. Es gibt 3 verschiedene Arten von Listen. Unnumerierte, Nummerierte und Denitionslisten. Die Struktur von nummerierten und nicht nummerierten Listen ist ähnlich. Unnumerierte Liste beginnen mit dem Tag <ul> und enden entsprechend mit</ul>. Verwenden sie die Tags <ol>...</ol> für durchnumerierte Listen. Zwischen diesen Tags liegen die einzelnen Listelemente (Tags <li></li>). Der Text der von diesen Tags umschlossen wird, ist der Punkt, der in der Liste dargestellt wird. <ul> <li>list Item 1</li> <li>list Item 2</li> <li>list Item 3</li> </ul> Denitionslisten sind ein klein wenig komplizierter. Sie werden benutzt um Begrie zu erklären: 17

18 <dl> <dt>summe</li> <dd>das Ergebnis aus der addition zweier Zahlen</dd> <dt>differenz</li> <dd>das Ergebnis aus der subtraktion zweier Zahlen.</dd> </ul> Wichtige Inlineelemente <a name=abc> Anker. Auf diese Art wird ein Punkt im Dokument markiert. Mit einem Link (hier: index.html#abc) kann genau an diese Stelle der Seite gesprungen werden. <a href=seite2.html>text</a> Das ist ein Link. Klickt man mit der Maus auf text önet der Browser die Seite seite2.html im selben Fenster. <img src=logo.jpg> Es wird das Bild logo.jpg im Browser dargestellt. Mit Hilfe der Attribute width und height können Sie zum Beispiel die Gröÿe des Bildes ändern. <strong></strong> Stellt die Schrift im Browser fett dar. <em></em> Stellt die Schrift im Browser kursiv dar. <span><span> span gilt als allgemeines Inlineelement. Es ändert den Text in der Standardeinstellung nicht, kann aber in Verbindung mit CSS und den Attributen style bzw. class einem Text ein beliebiges Layout zuweisen Tabellen Tabellen werden zur Darstellung tabllarischer Daten verwendet (wie in Listing 5). Wenn sie kleine Projekte bearbeiten können Sie eine Tabelle auch zum Gestalten einer Webseite benutzen. Für eine Webseite mit Tabellen siehe Listing 6. 2 <table> 3 Listing 5: Grundgerüst einer HTML Tabelle 4 <caption>eine L i s t e mit Namen</ caption> 5 <colgroup> 6 <col width="20%" /> 7 <col width="80%" /> 18

19 8 </colgroup> 9 10 <thead> 11 <tr> 12 <th>nr.</th> 13 <th>name</th> 14 </ tr> 15 </thead> <tbody> 18 <tr> 19 <td>01</td> 20 <td>john Doe</td> 21 </ tr> 22 <tr> 23 <td>02</td> 24 <td>jane Doe</td> 25 </ tr> 26 </tbody> <tfoot> 29 <tr> 30 <td>xx</td> 31 <td>abc</td> 32 </ tr> 33 </ tfoot> 34 </ table> Zeile 2,35 Eine Tabelle wird mit dem <table> Tag geönet und geschlossen. Zeile 4 Optionale Beschreibung einer Tabelle. Der Browser generiert sie als Text unter der Tabelle. Zeile 5 bis 8 Tabellen sind komplexe Strukturen. Ein optionales <colgroup> Element zeigt dem Browser früh an, wie breit die Tabellenzellen sein sollen. Das zeigt die Webseite bei groÿen Tabellen und langsamen Internetverbindungen deutlich schneller an. Zeile 10 bis 15 Der Tabellenkopf ist ein Blockelement, welches die Tabellenüberschriften kennzeichnet. Zeile 17 bis 26 Der <tbody> ist ein Element, welches den Inhalt der Tabelle kennzeichnet. Zeile 28 bis 33 Der Tabellenfuÿ ist ein optionales Blockelement, welches immer unter eine Tabelle gerendert wird. Zeile 11,14 Eine Tabellenzeile sind durch <tr> Tags kenntlich gemacht. 19

20 1 Zeile 12 Eine Tabellenzelle sind durch <td> Tags kenntlich gemacht. 2 <table width="100%"> 3 4 <tbody> 5 <tr> Listing 6: HTML Layout mit Tabellen 6 <td colspan="2" id=" headline ">Die &Uuml ; b e r s c h r i f t</td> 7 </ tr> 8 <tr> 9 <td width=" 50px" id=" s i d e menu">die Navigation</td> 10 <td id=" content ">Der Inhalt der S e i t e</td> 11 </ tr> 12 </tbody> </ table> Die einzelnen Inhaltstypen einer Seiten werden in jweils eine Tabellenzelle generiert. Auÿedem sehen sie hier eine Tabelle, die nur den nötigsten HTML Code enthält. Die Namen im ID Attribut sind natürlich frei wählbar. headline Hier steht das Logo oder die Überschrift der Seite. side-menu Ein Navigationsmenü, dass an der linken Seite angezeigt wird. Das Menu ist insgesamt 50px breit. rin content Der Inhalt der Seite würde in diese Zelle gerendert werden. In obigen Beispielen sind die einzelnen Elemente einer Seite mit dem id=... Attribut gekennzeichnet. Das Layouten der Webseite mit Tabellen geht schnell zu implementieren, ist aber langsam und unübersichtlich. In der Regel wird ein Boxbasiertes Layout für gröÿere Propjekte genutzt. Das Box basierte Layout ist in Kapitel genauer beschrieben Der DOCTYPE Der DOCTYPE steht in der ersten Zeile einer HTML Datei. Sie sollten ihn verwenden, um dem Browser, den gewählten HTML Dialekt mitzuteilen. Dadurch verhindern Sie Darstellungsfehler in Unterschiedlichen Browservarianten. Typische Beispiele für DOCTYPES sind in Listing 7 abgebildet. 1 <! Ein a l l g e m e i n g e n u t z t e r Typ Listing 7: Beispiele für HTML Doctypes 20

21 2 Sie s o l l t e n diesen Typ verwenden > 3 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML //EN" 4 " http ://www. w3. org /TR/html4/ s t r i c t. dtd"> 5 6 <! Wie d i e S t r i c t Variante, aber e n t h a e l t auch 7 v e r a l t e t e Varianten > 8 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 T r a n s i t i o n a l //EN" 9 " http ://www. w3. org /TR/html4/ l o o s e. dtd"> <! Eine sehr s t r e n g e Variante. Beste B r o w s e r k o m p a t i b i l i t a e t, 12 aber sehr z i c k i g bei k l einen Fehlern > 13 <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 S t r i c t //EN" 14 " http ://www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd"> 4 Einführung in CSS 4.1 Allgemeines CSS steht für Cascading Style Sheets und ist eine Formatierungs- oder Layoutsprache. CSS gibt es aktuell in der Version 2. Zu den Aufgaben gehören: Formatieren der HTML Ausgabe im Browser, wie z.b. Farben Schriftart und Gröÿe Breite und Höhe Tiefe Ränder Formatieren in der Seite in anderen Ausgabemedien Positionieren von Objekten innerhalb der Webseite (näheres siehe Kapitel Ein berühmtes Beispiel über die Gestaltungsmittel von CSS ist die Seite ZEN Garden (Siehe [?]. Hier wird die gleiche HTML Seite durch simples einbinden unterschiedlicher CSS Stylesheets in unterschiedliche Formate umgewandelt. Eine komplette Referenz zu CSS gibt es unter [?] oder unter [?] Generelle CSS Syntax In Kapitel näher beschrieben, wie CSS in HTML eingebunden werden kann. Hier wird die generelle Syntax erklärt, die in CSS Dateien eingesetzt wird. Allgemeine Form für einen CSS Befehl: 21

22 <selektor> '{' \left(<command> ':' <value> ';'\right)* '}' Ein CSS Kommando ist wie folgt aufgebaut. <selektor> Ein Selektor deniert, welche Elemente von einem CSS Befehl beeinuÿt werden. Die gängiste Form ist der Zugri über den Klassennamen:.class-name Selektoren werden in Kapitel näher beschrieben. { Ein geschweifte önende Klammer. <command> Ein CSS Schlüsselwort. Die gesamte CSS Referenz ist unter [?] nachzulesen. : Ein Doppelpunkt. <value> Ein Wert, der zum <command> passt. Die gesamte CSS Referenz ist unter [?] nachzulesen. ; Ein Semikolon. } Ein geschweifte schlieÿende Klammer. Ein Kommentar in CSS sieht anders als in HTML aus, Er beginnt mit dem Zeichen /* und endet mit der Zeichenfolge */: /* ich bin ein css kommentar der über mehrere zeilen geht */ Tips und Tricks mit CSS Bei CSS gibt es mehrere kleinere Fallstricke. Ein nützliches Hilfsmittel hierzu ist das Firefox Plugin Firebug. Wenn sie mit CSS arbeiten, sollten sie folgende Regeln beachten: Achten sie auf vergessene Doppelpunkte oder Semikolon Testen sie ihre Seite mit allen gängigen Browsern Nutzen sie Tools wie YAML. Das spart Zeit. [?] Analysieren Sie ihre CSS Elemente mit dem Tool Firebug class und id Attribute Die Universalattribute id und class dienen dazu, ein Element genauer zu bezeichnen. Eine ID ist ein eindeutiger Bezeichner, d.h. eine ID gleichen Namens darf in einem Dokument nur ein einziges Mal vorkommen. Klassen hingegen können in einem Dokument mehrfach vorkommen. So können auch unterschiedliche Elemente die selbe Klasse aufweisen. IDs und Klassen werden wie gewöhnliche Attribute in das Start-Tag des Elementes geschrieben 22

23 Beispiel für die Benutzung von id und class Attributen in HTML. Die Werte für class und id sind frei wählbar. <p id="leftnavigation"> <em class="danger"> Beispiel für die Benutzung von id und class Attributen im CSS Code: #leftnavigation { /* ID */ color: blue; background-color: #FFFFFF; }.danger { /* allgemeingültige Klasse */ color: red; } 4.2 Einbinden von CSS in HTML CSS kann als externe Datei eingebunden werden oder direkt in der Seite über das <style> Tag oder das style= Attribut. Das Einbinden als externe Datei über den <link> Tag wird standardmäÿig verwendet. Details zu beiden Methoden sind Listing 8 zu entnehmen: 1 <html> 2 <head> Listing 8: Einbinden von CSS in einer HTML Datei 3 <t i t l e >T i t e l der Webseite</ t i t l e > 4 5 <! Die Datei mein format. c s s s o l l eingebunden werden. > 6 <l i n k type=" text / c s s " s r c="mein format. c s s " 7 media=" a l l " r e l a t i o n " s t y l e s h e e t " /> 8 9 <s t y l e type=" text / c s s "> 10. t e s t { background c o l o r : #A9A9A9 ; } 11 </style > 12 </head> <body> <! CSS, das ueber die Klasse ' t e s t ' 17 wird auf d i e s e s div angewendet. > 18 <div class=" t e s t "> 19 Inhalt der Webseite 23

24 20 <div> <! CSS das ueber die das s t y l e a t t r i b u t 23 auf d i e s e s div angewendet. > 24 <div s t y l e="background c o l o r : #a9a9a9 ; "> 25 Inhalt der Webseite 26 <div> </body> 29 </html> Zeile 6 Über den <link> Tag wird eine externe Datei in die HTML Datei eingebunden. Auf diese Weise können sie Ihre Formate zentral verwalten. Zeile 8 bis 10 Über den <style> Tag wird CSS direkt in einer HTML Datei deklariert. Zeile 23 bis 25 Für eine schnelle Lösung können CSS Anweisungen auch direkt im style= Attribut eingegeben werden. Diese Methode eignet sich sehr gut zum Testen ihrer Seiten. 4.3 Einfache Formatierungsangaben mit CSS Farbwerte in CSS Ein Monitor arbeitet mit drei Spektralfarben: Rot, Grün und Blau. Jedes Pixel der Desktop-Fläche kann in einer der drei Spektralfarben leuchten. Die einzelnen Pixel nehmen Sie jedoch nicht mehr wahr, da sie klein genug sind, um sich optisch zu vermischen, sodass unterschiedliche Farben und Helligkeiten wahrgenommen werden. RGB-Werte setzen sich aus Rot-, Grün- und Blauanteilen zusammen. Pro Kanal sind 256 Werte möglich (0-255). Der Farbwert rgb(255,0,0) zum Beispiel ergibt ein reines Rot. Teilen Sie jedem Kanal den höchsten Wert zu (jeweils 255), erhalten Sie die Farbe Weiÿ. In CSS gibt es vier Möglichkeiten Farben anzugeben. 1. Über den Farbnamen, z.b. color: white; 2. Über den HEX Code, z.b. color: #FFFFFF; 3. Über den RGB Wert, z.b. color: rgb(255,255,255) 4. Über Prozentangaben, z.b. color: 100% 100% 100% Beispiele:

25 .danger { color: #AABBCC; background-color: blue; } Block und Inline Elemente... und Ihre Mischlinge Die meisten der im Dokumentenkörper vorkommenden Elemente sind entweder Block- Elemente oder Inline-Elemente. Die Elemente unterscheiden sich im Wesentlichen in folgenden Punkten: Block-Elemente können Inline-Elemente und andere Block-Elemente beinhalten. Inline- Elemente dagegen können für gewöhnlich nur Daten oder andere Inline-Elemente enthalten. Block-Elemente bilden also gröbere Strukturen als Inline-Elemente. Block-Elemente werden anders dargestellt als Inline-Elemente. Block- Elemente beginnen in einer neuen Zeile, Inline-Elemente nicht. Oftmals wird zwischen Block-Elementen ein Abstand dargestellt, zum Beispiel bei Absätzen oder Überschriften, um diese voneinander abzugrenzen. Block-Elemente wie p oder div erzeugen eine Block-Box, die so genannte Principal Block Box, die wiederum weitere Boxen enthält. Das CSS Box-Modell beschreibt diese rechteckigen Boxen, die für Blockelemente generiert werden. Sie lassen sich durch CSS-Eigenschaften kontrollieren. Jede Block-Box hat einen Content-Bereich (eine Content Box), einen Padding-Bereich (Padding Box), einen Border-Bereich (Border- Box) und einen Margin-Bereich (Margin Box). Jeder dieser Bereiche kann in oben, rechts, unten und links aufgeteilt werden. Block-Elemente werden nacheinander untereinander dargestellt. Der vertikale Abstand wird durch die Eigenschaft margin bestimmt. Die vertikalen Margin-Bereiche zweier beieinander liegender Blöcke addieren sich nicht, sondern überlappen. Die Elemente liegen links am Rand des beinhaltenden Blocks (des Content-Bereiches des Elternelements) an. Inline-Elemente werden nacheinander nebeneinander dargestellt. Sobald ein Element in die Breite des umgebenden Blocks nicht mehr hineinpasst, wird umbrochen und eine neue Zeilen-Box gebildet. Nähere Informationen zum Aufbau von Block und Inline Elementen nden sie unter Kapitel Beispiele:.my-inline { display: inline; 25

26 }.my-block { display: block; } Textdekorierung Beispiele: { font-decoration: underline; font-size: 12pt }.rot { font-family: verdana, sans-serif; font-size: 10px; } Breite und Höhe Beispiele: { width: 80%; height: 200px; min-width: 300px; } Rahmen Beispiele: { border: 2px solid #AAA; }.border-box-2 { 26

27 } border-left-style: dotted; border-left-width: 3pt; border-left-color: red; Pseudoklassen Beispiele: /* ein Link der beim Überfahren die Farbe ändert */ a { background-color: #000000; } a:hover { background-color: #AA0000; } a:visited { color: green; text-decoration: none; } /* im firefox und ie ab Version 7 funktioniert das auch ohne links */ li:hover { background-color: #FFFFAA; } li:first-child{color: #ff0000; } 4.4 Die CSS Kaskade Auf welche Art und Weise ein Element auf einer Website dargestellt wird, ergibt sich aus einer festgelegten Sortierreihenfolge. 1. Es werden alle Deklarationen ermittelt, die sich auf das betreende Element und die Eigenschaft beziehen. 2. Die Regeln werden nach Ursprung und Gewichtung sortiert. Wenn Sie sich XHTML-Dokumente in einem graschen Browser anschauen, werden Sie feststellen, dass jedes Element auf eine ganz bestimmte Art und Weise dargestellt wird. Überschriften werden ihrer Wichtigkeit entsprechend groÿ und fett dargestellt, Listen wird ein Bullet vorangestellt, die Hintergrundfarbe ist vermutlich weiÿ, die Vordergrundfarbe schwarz. Der Browser wendet also ganz bestimmte Gestaltungsmerkmale auf die einzelnen Elemente an. Je nach Browser können sich diese Gestaltungsmerkmale verändern, man denke nur an den Textbrowser Lynx. Ein Browser tut also nichts anderes, als XHTML-Dokumente nach einem festgelegten Browser-Stylesheet darzustellen. Jeder Browser bietet Kongurationsmöglichkeiten. Es lassen sich Schriftgröÿen und - farben festlegen oder das Aussehen der Links in deren unterschiedlichen Zuständen be- 27

28 stimmen. Oft haben Sie die Möglichkeit, eigene Stylesheets einzubinden. Ihre Einstellungen überschreiben das Browser-Stylesheet. Das Stylesheet einer Website, die Sie besuchen, überschreibt wiederum Ihre Einstellungen. Es existiert somit folgende Kaskade: 1. das Stylesheet des Browsers 2. das Stylesheet des Nutzers 3. das Stylesheet des Autors Die!important Regel Eine mit!important gekennzeichnete Deklaration überschreibt eine normal angegebene Deklaration. Sowohl das Autoren- als auch das User-Stylesheet können!important-regeln enthalten.!important-regeln des Users überschreiben dabei!important-regeln des Autoren. Somit wird die Zugänglichkeit der Seiten für alle Menschen erhöht, zum Beispiel für sehbehinderte Menschen, die auf eine entsprechende Mindestschriftgröÿe angewiesen sind. Beispiel: p {font-size: 18pt!important;} 4.5 Vererbung und Selektoren Allgemeine Selektoren CSS bietet die Möglichkeit jedes einzelne Element im HTML Baum zu adressieren. Die einfachsten drei Varianten sind hier aufgelistet: /* Über ein im HTML gesetztes id Attribut */ #headline { font-size: 24pt; } /* Über ein im HTML gesetztes class Attribut */.headline { font-size: 24pt; } /* Generelles überschreiben eines HTML Tags */ li { font-size: 24pt; } Hier ein paar fortgeschrittene Varianten: 28

29 /* Alle div elemente mit dem class Attribut 'navi' */ div.navi { font-size: 24pt; } /* Alle li Dokumente, die im Baum unterhalb eines div's hängen, das das Attribut class mit dem Wert 'navi' hat */ div.navi li { color: #AA0000; } /* Alle li Dokumente, die im Baum unterhalb eines div's hängen, das das Attribut class mit dem Wert 'navi' hat, aber nur wenn die Maus darüber fährt... */ div.navi li:hover { color: #AA0000; } /* Alle ul HTML Elemente und alle ol HTML Elemente */ ul, ol { text-decoration: underline; } CSS in verschiedenen Ausgabemedien CSS kann speziell für unterschiedliche Medientypen angewendet werden. Die denierten Keywords sind: all alle Medientypen aural Sprachbrowser, die den Inhalt der Webseite vorlesen braille für Ausgabegeräte mit so genannter Braille-Zeile embossed für Braille-Drucker handheld für kleine Handcomputer wie Palms oder Handys print für Druckausgabe projection für Projektoren oder ähnliche Geräte screen für die Ausgabe auf dem Bildschirm tty für die Ausgabe auf nicht-graschen Ausgabemedien, wie z.b. Terminals oder auch Textbrowser wie Lynx tv für die Ausgabe auf Fernsehern oder ähnlichen Geräten Beispiel: Listing 9: CSS für verschiedene Ausgabemedien 1 <link rel = ' ' s t y l e s h e e t ' ' media= ' ' screen ' ' href = ' ' website. css ' '> 2 <link rel = ' ' s t y l e s h e e t ' ' media=" print ' ' h r e f = ' ' druck. css ' ' > 29

30 4.6 Das BOX Model Alle CSS Elemente sind als Boxen um den umschlieÿenden Text angeordnet. Man unterscheidet verschiedene Ebenen bei einer Box. Sie werden von auÿen nach innen unterteilt in padding Auÿenabstand border Rahmen (sichtbar oder unsichtbar) margin Innenabstand text content Weiterer HTML Text. Die Breite der einzelnen Elemente der Box orientiert sich an der Breite des Inhaltes oder den entsprechenden width und height Eigenschaften. Details siehe Abbildung 4. Abbildung 4: CSS Box Model 4.7 Elementuss und Positionierung CSS kann genutzt werden, um Boxen andere Boxen umieÿen lassen zu können. Auÿedem können sie Boxen explizit auf ihrere Webseite, abhängig von den Elternelementen plazieren. 30

31 top: <breite>; Abstand der Box zum oberen Rand, abhängig von position. left: <breite>; Abstand der Box zum linken Rand, abhängig von position. width, height Breite und Höhe der Box. Muss in Verbindung mit float unbedingt angegeben werden. float: <left, right, none>; Fluss einer Box nach rechts oder links zur umschlieÿenden Box. clear: <left, right, both, none>; Abbrechen des Flusses. Am gängisten ist: clear: both; position: <static, relative, absolute, fixed>; Bestimmt die Position der Box im Textuss. static is der Standard. Die genaue Bedeutung der einzelnen Werte kann im Web unter [?] nachgelesen werden. 4.8 Sichtbarkeit von Elementen Mit Hilfe von CSS können einzelne Elemente einer Webseite unsichtbar gemacht werden. Das ist insbesondere in Verbindung mit dem :hover Eekt interessant: 1 <html> 2 <head> 3 <style> 4 5 div. big { display : none ; } 6 7 div. hover : hover div. big { 8 display : block ; 9 width : 200px ; 10 height : 200px ; 11 z index : 200; 12 } </ style> 15 </head> 16 <body> 17 Listing 10: Infobox mit CSS 18 <div class=" hover "> 19 <div class=" b i g ">HALLO</ div> 20 <div class=" small ">Fahr &uuml ; ber mich</div> 21 </div> </body> 31

32 24 </html> Zeile 5 Die Box mit der Klasse big wird standardmäÿig versteckt. Zeile 18, 21 Die versteckte Boxist von einem anderen div Element mit der Klasse hover umschlossen. Zeile 19 Die versteckte Box ist ein Kindelement des umschlieÿenden Divs mit der Klasse hover. Daraus folgt in Zeile 7 bis 12 Zeige die Box mit der Klasse big an, wenn die Maus auf der umschlieÿenden div Box sich bendet. Folgende Eigenschaften beeinussen die Sichtbarkeit von HTML Elementen: overflow: <visible, hidden, scroll, auto> Bestimmt, wenn sich übergroÿer Text in einer Box verhält. Funktioniert nur in Verbindung mit width und height. visibility: <visible, hidden, collapse> Bestimmt ob eine Box angezeigt werden soll. collapse ist ein Sonderfall in Verbindung mit Tabellendarstellung. Es wird nur vom Firefox unterstützt, und daher nicht näher hier beschrieben. z-index: <zahl> Bestimmt die Tiefe eines Box, wenn sich zwei Boxen überlappen. display: <none, block, inline> Bestimmt ob ein Element angezeigt werden soll. Bei none hat das Element keine Höhe und Breite. 5 Providerauswahl Um ihre Webseiten im Internet zugänglich zu machen benötigen sie Webspace. Dabei handelt es sich um Speicherplatz auf einem Rechner, der dauerhaft im Internet angeschlossen ist. Diesen Speicherplatz stellen Webhoster zur Verfügung. 5.1 Kommerzielle Hosting Anbieter Zu den gröÿten kommerziellen Anbietern gehören die Firmen Strato Webhosting 1und1 Kleinere Anbieter - Günstiger Anbieter mit gutem Support. Leider sind die Server teilweise langsam. - Webspace ist Beigabe beim Pro Mail (1,50 EUR/Monat). Lohnt sich nur wenn man eh schon da Kunde ist. - Schöner Hoster für Einsteiger mit Joomla Support 32

33 Beide Anbieterarten unterscheiden sich vom Funktionsangebot wenig, allerdings hat Strato seinen Fokus eher auf professionellen Webauftritten, was sich in höheren Preisen und (vermutlich) besserem Support wiederspiegelt. Die Wahl des richtigen Hosters hängt von der persönlichen Vorliebe ab, eine Übersicht über die Features gibt Tabelle 1: Auswahlpunkte für den richtigen Provider. Als Fausteregel kann man sagen, ein groÿer kommerzieller Provider empehlt sich, je gröÿer der eigene Webauftritt wird. Wenn man auf Flexibilität angewiesen ist, sollte man einen kleinen Anbieter wählen. Feature Groÿer Provider Kleiner Provider Werbenanzierter Prov. Flexibler Support Ok bis schlecht Sehr gut Sehr schlecht Groÿes Datenvolumen Sehr gut prüfen! Schlecht Sonderwünsche Eher nein. Sehr gut Schlecht Einfache Bedienung Sehr gut Sehr gut Gut Datenbackup Standard prüfen! Meist nicht vorhanden Eingebl. Werbefenster Nein Nein Ja Tabelle 1: Auswahlpunkte für den richtigen Provider Die meiÿten Webhoster bieten Ihnen webspace mit Skriptunterstützung an. Zu den Unterstützten Sprachen gehören PHP und ab und zu Perl. Diese Features werden interessant, wenn Sie ein Gästebuch oder ein Forum auf Ihrer Seite installieren wollen. Die kleineren Anbieter sind meistens günstiger und reichhaltiger an Features. Die Preise für Webspace inkl. einer eigenen Domain liegen bei 1,00 EUR bis 50,00 EUR. 5.2 Werbenanzierte Anbieter Zum Testen und Ausprobieren empehlt sich ein freier werbenanzierter Anbieter von Webspace. Beispiele für freie Webspaceanbieter. Kostenloser Webspace, Fotosharing, PHP und Daten-bankanbindung Standardangebot für freien Webspace. Keine Skriptunterstüzung. Da man nicht genau weiÿ, wer sich hinter einer solchen Firma verbirgt, kann / sollte man bei der Anmeldung falsche Adressangaben machen. 33

34 6 Suchmaschinen 6.1 Arbeitsweise von Suchmaschinen Suchroboter Suchmaschinen nutzen Miniprogramme, sogenannte Robots oder Spiders, um das Web nach aktuellen Inhalten zu durchforsten. Dies Programme analysieren die Webseite und katalogisieren sie. Zu den drei bekanntesten Suchrobotern gehören: Googlebot/2.X (+ MSNBOT/0.1 ( Yahoo! Slurp ( Die komplette Liste der Suchroboter bendet sich unter [?, The Web Robots Page]. Als Webdesigner haben sie zwei Möglichkeiten, das Verhalten der Roboter auf Ihrer Webpräsenz zu beeinussen. 1. Über <meta> Tags in Ihrer HTML Seite 2. Über die Datei robots.txt Beide Versionen werden in Kapitel?? besprochen. Die Arbeitsweise einer Suchmaschine vernschaulicht am einfachsten der Text auf Woodshed, in der sich ein Webdesigner mit einem Suchmaschinen-Robot unterhält 10 : Webdesigner: Ja klar! Das ist mein Logo! Wie ndste das? Suchmaschinen-Robot: Interessiert mich nicht. Mich interessiert Inhalt. Webdesigner: Ja wie: Ïnhalt?! Suchmaschinen-Robot: Text zum Beispiel. Webdesigner: Der ist doch auf der nächsten Seite! Suchmaschinen-Robot: Welche nächste Seite? Webdesigner: Du wirst doch nach 5 Sekunden per meta refresh weitergeleitet. Suchmaschinen-Robot: Nein!... Suchmaschinen-Robot: Ich durchsuche die Texte auf den Seiten, die ich nde. Ich folge Links. Das wars. Das Märchen vom Suchroboter und dem Webdesigner ( Im Gegenzug bedeutet das: Roboter können keine Bilder lesen. 10 Achtung: Der Verfasser des Textes hat eine etwas Werbeagenturfeindliche Einstellung 34

35 Roboter können keine JavaScript oder Weiterleitungen. Roboter können keine Videos verstehen. Roboter kennen keine Frames. Wenn sie Tags mit Multimediadaten (<img>, <object>, <embedded>, <iframe>) für Suchmaschinen aufbereteiten wollen, verwenden sie das alt Attribut mit einem beschriebenden Text. Dieser Text erscheint auÿerdem als Tooltip im Browser. Beispiel: <img src="logo.png" alt="unser Firmenlogo" /> Anmelden an der Suchmaschine Die Suchmaschinenbetreiber bieten Formulare an, mit Hilfe derer sie sich anmelden können. Die URL zu den 3 wichtigsten Suchmaschinenanbietern sind hier: 11 Google Yahoo (erfordert anmeldung) MSN Abbildung 5: Hinzufügen einer Webseite bei Google Weitere wichtige groÿe Anbieter von Suchergebnissen sind: dmoz - Ein Open Source Verzeichnisdienst, der auch Einträge an Google liefert. alltheweb - Liefert Suchergebnisse an viele kleinere Anbieter Beide Firmen verkaufen Suchergebnisse weiter an andere Suchmaschinen. 11 Ein guter Blog Eintrag hirzu bendet sich unter 35

36 Abbildung 6: Handel mit Suchmaschinenergebnissen [?] Zusätzlich gibt es Dienste, die Ihre Seite bei mehreren Seiten auf einmal anmelden. Da man mit den drei groÿen oben genannten Anbietern aber fast 95% aller Internetnutzer erreicht, ist es fraglich, ob sich die 20,- EUR für einen bezahlten Anmeldedienst lohnen. 6.2 HTML für Suchmaschinen aufbereiten Es gibt wie bereits angesprochen zwei Methoden mit den Programmen von Suchmaschinen zu interagieren. Entweder Sie schreiben Steueranweisungen direkt in Ihre HTML Seite, oder sie benutzen den sog. Robots Exclusion Standard (=robots.txt). Ich empfehle Ihnen die robots.txt auf jeden Fall zu verwenden, da dieser Standard von den Betreibern der Suchmaschinen entwickelt worden ist und eingehalten wird HTML Meta Tags In Verbindung mit Suchmaschinen sind die Metaangaben innerhalb des <head> Tags der HTML Seite nötig, um die Suchmaschine über Inhalt, Autor und Kategorie ihres Auftrittes zu informieren. Die klassische Variante, wie Meta Tags deniert werden, ist in Listing 11 beschrieben. Es gibt das Tag <meta /> mit den vordenierten Attributen name= und content=. Der Wert von name enthält ein Schlüsselwort, mit dem der Inhalt von content bestimmt wird. Die Schlüsselworte für die Metatags lauten 36

37 keywords Eine Komma getrennte Liste mit frei denierbaren Wörtern, die Ihre Seite beschreiben. Suchmaschinen nutzen die Keywords um die Seite zu kategoriesieren. Die moderne Variante der Keywords lautet Tag und wird im Kapitel Web 2.0 besprochen. author Ihr Name oder der ihrer Firma. date Das Datum der letzten Änderung dieser Datei. Das Format ist festgeschrieben (Beispiel: T08:49:37+02:00). Pegen sie dieses Feld, damit die Suchmaschine ihre Seite auch regelmäÿig neu indiziert. description Dieser Text erscheint bei Suchmaschinen als Beschreibungstext unterhalb des Suchergebnisses. Neben der klassischen oben beschriebenen Variante gibt es noch die Meta Tags nach Dublic Core. Dublin Core Meta Tags werden benutzt wie klassische Meta Tags. Allerdings erweitert der Standard die erlaubten Schlüsselwörter um Werte wie Herausgeber, Sprache, Region, u.v.a meta tags. 1 <head> 2 Listing 11: Meta Tags für Suchmaschinen 3 <! k l a s s i s c h e meta angaben > 4 <meta name=" keywords" lang=" de" 5 content="html, b e i s p i e l, vhs, arnsberg, webdesign " /> 6 <meta name=" author " content=" Christian Kaiser " /> 7 <meta name=" date " content=" T08 :49:37+02:00 " /> 8 <meta name=" d e s c r i p t i o n " content="die S e i t e 9 enhaelt ein paar Informationen zu HTML und CSS. 10 Es s i n d d i e Kursunterlagen zum Kurs Webdesign 11 f u e r Anfaenger "> <! Ein wenig d e t a i l i e r t e r : 14 Angaben nach Dublin Core > 15 <meta name="dc. Publisher " 16 content="vhs Arnsberg Neheim"> 17 <meta name="dc. Date" 18 content=" T14 :21:30+01:00 "> 19 <meta name="dc. Language" 20 content=" de"> 21 <meta name="dc. Rights " 22 content=" impressum. html"> 23 <meta name="dc. Date. created " 24 content=" T08:00+01:00 "> </head> 37

38 6.2.2 Diverse Meta Tags Mit Hilfe der Meta Tags läÿt sich auch das Cache Verhalten von Proxy Servern (Rechner, die Seiten für den schnelleren Zugri zwischenspeichern) oder dem Browser steuern. Beispiele für diverse Meta Tags stehen in Listing <head> 2 Listing 12: Diverse Meta Tags 3 <! proxy s t e u e r u n g s b e f e h l : S e i t e 12 Stunden cachen = Sekunden > 5 <meta http equiv=" e x p i r e s " content="43200"> 6 7 <! Der Browser s o l l d i e s e S e i t e n i c h t cachen > 8 <meta http equiv=" cache c o n t r o l " content="no cache "> 9 10 <! Ein Proxyserver s o l l d i e s e S e i t e 11 n i c h t s p e i c h e r n > 12 <meta http equiv="pragma" content="no cache "> <! eine automatische w e i t e r l e i t u n g ohne J a v a S c r i p t : 15 Nach 5 Sekunden auf s e l f h t m l w e i t e r l e i t e n. > 16 <meta http equiv=" r e f r e s h " 17 content=" 5 ; URL=http :// de. s e l f h t m l. org /"> </head> robots.txt Bei der robots.txt handelt es sich um eine Textdatei gleichen Namens, die im root Verzeichnis der Applikation abgelegt wird (Siehe Kapitel 2.1). Hier ein Beispiel einer solchen Datei mit Erklärungen: Listing 13: robots.txt 1 # robots. txt f u e r meineseite. com 2 3 # Kommentare beginnen mit einem Hash Zeichen ( '#' ) 4 5 # Diese Webcrawler s c h l i e s s e ich aus 6 User agent : Sidewinder 7 Disallow : / 8 9 User agent : Microsoft.URL. Control 38

39 10 Disallow : / # Diese V e r z e i c h n i s s e / Dateien s o l l e n nicht durchsucht werden 13 User agent : 14 Disallow : / s t y l e / 15 Disallow : / j s / 16 Disallow : / l o g s / 17 Disallow : / i n t e r n a l / 18 Disallow : /default. html 19 Disallow : /tmp/ # d i e s e I n halte verschwinden bald 20 Disallow : / privat / privat / geburtstage. html Wie Sie sehen, ist die Datei nach dem Schema Anweisung ':' Parameter 'NL' aufgebaut. Die Anweisung User-Agent gibt den Namen des Roboters an, die Anweisung Disallow verbietet den Robotern das Aufnehmen der Seiten in ihren Index (und damit das Finden dieser Inhalte über die Suchmaschine). Bei beiden Befehlen sind Jokerzeichen erlaubt. Detailierte Informationen zu den Optionen der robots.txt nden sie in der Wikipedia unter folgender URL: Tip zur Sicherheit: Die robots.txt an sich ist kein Sicherheitsrisiko. Schreiben sie hier allerdings nur Verzeichnisse hinein, die in Ihrer Seite über Links erreicht werden können, und nicht indiziert werden sollen. 6.3 Suchmaschinenoptimierung Ziel der Suchmaschinenoptimierung ist das positive Beeinussen des Rankings einer Webseite. Das Ranking einer Seite bezeichnet die Platzierung der Seite in der Ergebnisliste einer Suchmaschine. Der Versuch, Seiten mit nicht relevanten Daten auf vordere Suchmaschinenplätze zu bringen, wird als Suchmaschinen Spamming bezeichnet. Wenn ein solcher Versuch bekannt wird, wird die entsprechende Domain gesperrt Generelle Tips Halten sie sich an die gültigen Standards. Nutzen sie Meta Tags. Vermeiden sie Syntaxfehler HTML Validierungsdienste wie 'tidy' helfen Syntaxfehler aufzudecken. Achtung: Tidy ist ein Werkzeug für Fortgeschrittene! 39

40 Verwenden Sie die richtigen Keywords 13 Nutzen Sie Textauzeichnungen wie Überschriften (<h1>... <h6>), Seitentitel (<title>), etc. Verlinkungen: Seiten, auf die oft verlinkt wird, erscheinen als bessere Suchergebnisse. Man spricht hier von Backlinks Nutzen sie das alt= Attribut bei Multimediadateien (Siehe hier: Kapitel 6.1.1) Content geht über Meta Angaben! Viele Suchmaschinen sehen den Inhalt einer analysierten Seite als gewichtiger an als die darin enthialtenen Meta Tags. Vermeiden sie zu viele Begrie bei den keywords. Maximal ca. 15 Begrie verwenden Unerlaubte Tricks Hier ein paar Tips, was Sie vermeiden sollten. Falls sie diese Techniken anwenden, riskieren Sie, dass ihre Webseite geblockt wird. Unsichtbare Schrift Weiÿe Schrift auf weiÿem Grund ist verboten. Viele gleiche Begrie Vermeiden sie es, ihren Begri oftmals hintereinander zu erwähnen. Ein Meta Tag mit solchen keywords währe z.b. verdächtig und bringt nichts: <meta name=keywords content=opel opel opel opel opel opel tigra tigra tigra tigra /<. Das gleiche Prinzip gilt für Inhalte auf der Webseite. Gatewaysites Bei Gatewaysites handlet es sich um spezielle Seiten, die Begrie enthalten, um bei Suchmaschinen hohe Rankings zu bekommen. Listing 14 zeigt ein solches Beispiel. 1 <html> 2 <head> Listing 14: Beispiel für eine Gateway oder Brückenseite 3 <t i t l e>das Superprodukt</ t i t l e> 4 5 <meta name=" keywords" 6 content=" superprodukt s p i t z e super produkt " /> 7 8 <! Das h i e r s i e h t der Benutzer > 9 <meta name=" d e s c r i p t i o n " content=" Hier sind 10 T utorials f u e r Webdesigner vorhanden. "> 13 Hilfe die richtigen Keywords zu nden gibt ihnen z.b. der Web Assoziator 40

41 11 12 <! Ein normaler Benutzer wird w e i t e r g e l e i t e t 13 auf eine andere S e i t e. > 14 <meta http equiv=" r e f r e s h " 15 content=" 0 ; URL=http :// de. s e l f h t m l. org /"> 16 </head> 17 <body> 18 <div style=" display : none ; "> 19 <h1>das Superprodukt</h1> 20 superprodukt s p i t z e superprodukt s p i t z e 21 superprodukt s p i t z e superprodukt s p i t z e 22 super produkt s p i t z e super produkt s p i t z e 23 super produkt s p i t z e 24 <h2>eine w i k r l i c h t o l l e Sache</h2> </div> 27 </html> Die Zwischenseite in unserem Beispiel ist darauf ausgelegt, hohe Rankings bei dem Suchbegri Superprodukt zu bekommen, obwohl sich hier der Inhalt der Seite Selfhtml verbirgt. Der Benutzer der Webseite wird direkt auf das Angebot von Selfhtml weitergeleitet, obwohl in der Brückenseite selbst kein Wort von HTML zu lesen ist. 7 Nützliche Software 7.1 Überblick Die Tabelle 2 listet Software auf, mit der ihnen die Arbeit beim Erstellen von Webseiten erleichert werden kann. 7.2 HTML Editoren Weaverslave Ein guter HTML Quelltext Editor mit integrierter HTML Hilfe und Colorpicker. Nvu Leider sind die meisten richtig guten WYSIWYG Editoren kommerziell. Nvu ist ein kleiner Editor dieser Gattung. Er ist frei verfügbar und unterstützt CSS. Auÿerdem hat er eine rudimentäre Projektverwaltung zum Publishen der Seiten. Nvu ist eine gute Ergänzung für den, der von HTML schon etwas gehört hat. Dreamweaver Eine sehr guter WYSIWYG Editor. Er unterstüzt Templates, Editierbare Bereiche, Syncronisation mit Webhostern, etc Bei Youtube sind zahlreiche Tutorials verfügbar: 41

42 Name Lizenz OS HTML Editoren Weaverslave Freeware Wind. Nvu (WYSIWYG) Open Source Wind., Linux Dreamweaver (WYSIWYG) Kommerziell Wind., Mac Adobe Go Live (WYSIWYG) Kommerziell Wind. MS Frontpage (WYSIWYG) Kommerziell Wind., Mac Bildbearbeitung Paint.NET Open Source Wind. Photoshop Kommerz. Win, Mac GIMP Open Source Win, Linux XnView Freeware Win, Linux Webserver XAMPP Open Source Wind., Mac, Linux Webbrowser Internet Explorer 7 Freeware Wind., Mac. Firefox 3.x Open Source Win, Max, Linux Opera Open Source Win, Max, Linux, Mobiles Tools Firebug (XUL) Open Source Win, Max, Linux Colorpicker (XUL) Open Source Win, Max, Linux Measure It (XUL) Open Source Win, Max, Linux Tabelle 2: Nützliche Software beim Webdesign Adobe Go Live Ein kommerzieller Editor für kleinere Seiten mit gutem Funktionsumfang. Frontpage HTML Editor in Microsoft Oce. Frontpage ist das mit Abstand einsteigerfreundlichste, wenn auch aus HTML Sicht schlechteste Produkt. 7.3 Bildbearbeitung Paint.NET Ein freies, mächtiges und einfaches Bildbearbeitungsprogramm für Windows. Photoshop Photoshop ist ein professionelles (und nicht sehr Einsteigerfreundliches) Programm zum bearbeiten von Fotos. Es gibt Unmengen an Tutorials zu Photoshop. The GIMP Eine Alternative zu Photoshop, wenn Windows nicht verfügbar ist (oder für Anwender, die die Bedienung von Photoshop für zu einfach und intuitiv halten ;-)). Auch zu Gimp gibt es sehr viele gute Tutorials. XnView Hierbei handelt es sich um einen Bildbetrachter. Die Stärke von XnView liegt in der Konvertierung von mehreren Bildern. Auÿerdem hat er eine Funktion, um Bildergallerien in HTML zu erstellen. 42

43 Abbildung 7: Die Arbeitsoberäche von Dreamweaver 7.4 Webserver XAMPP XAMPP steht für X Apache, MySQL, PHP and Perl und ist eine Konguration, wie sie viele Webhoster anbieten. Für kleinere Webprojekte ist XAMPP nicht nötig. XAMPP erfordert ein wenig Einarbeitung! 7.5 Webbrowser Internet Explorer Der wohl verbreitetste Browser. Firefox Der bekannteste Open Source Browser mit sehr guter Unterstützung für Webentwickler und -designer. Opera Der bessere Webbrowser (Nach eigener Aussage). Opera wird auf vielen Mobilen Geräten als Standardbrowser mitgeliefert. Google Chrome Sehr neuer und schneller Browser von Google. Chrome basiert auf der Firefox Engine. 7.6 Tools XUL Software sind Programme, die innerhalb des Firefox Browser als Add Ons laufen. Zum installieren der Addons starten Sie Firefox und gehen Sie auf Extras -> Add Ons. Im aufpoppenden Fenster (Abbildung 9) können sie die XUL Applikkationen suchen und installieren. Firebug (XUL) Tool zum debuggen (=Fehlersuche) von Webseiten. Das Tool wurde hier im Kurs vorgestellt. 43

44 Abbildung 8: Die Arbeitsoberäche von The GIMP Colorpicker (XUL) Mit einem Click auf die Websiete kann der HTML Farbcode herausfgefunden werden. Measure It (XUL) Ein Bildschirmlineal für Firefox. 8 Exkurs: Web 2.0 Hinter dem Begri Web 2.0 verbirgt sich keine neue Technik, sondern ein Zusammenschluss vieler verschiedener - teils werbewirksamer - Begrie. Abbildung 10 gibt einen Überblick über die gängigen Begrie in ihrer deutschen Übersetzung. Hinter dem Begri Web 2.0 verbirgt sich eher ein neues Selbstverständnis von Internetanwendungen, als Technische Neuerungen. Konkret bedeutet das, dass ein normaler Browser auch Web 2.0 Anwendungen ausführen kann. Für den Webdesigner ergeben sich hier Richtlinien wie er seine Seiten strukturieren sollte. Der Begri Web 2.0 wurde von Tim O'Reilly geprägt, der ihn 2005 in einem Artikel zu denieren versuchte. Die deutsche Übersetzung ist hier nachzulesen: Die wichtigsten Begrie und ihre Wiederspiegelung in den Anwendungen sollen im Fol- 44

45 Abbildung 9: Firefox Addons nachinstallieren. genden erklärt werden. 8.1 Buzzwords und ihre Beispiele Participating Die klassische Methode ihre Seitenbesucher einzubinden, geht über Anwendungen wie Gästebuch, Foren, . Im Web 2.0 Umfeld gehen sie soweit, dass sie jedem Benutzer erlauben, den Inhalt ihrer Seite zu ändern. Die Wikipedia ist hier das bekannnteste Beispiel. Social Software / Network Hinter diesem Begri verbergen sich Communities wie Facebook, oder StudiVZ. Generell bezeichnet der Begri jeglich Art von Software, die zur Kommunikation dient: , Instant Messenger, etc. Im Web 2.0 Umfeld geht es hier um Blogs und Wiki's. Fokus on Simplicity Anwendungen im Browser nähern sich denen der Desktopanwendungen. Ein gutes Beispiel hierfür ist Googl oder Google Calendar. In diesem Umfeld ist auch das Thema Barrierefreies Internet zu nden. Open API's Es wird ermöglicht Daten zwischen Webseiten auszutauschen. Technische Grundlage ist RSS oder häug AJAX. Das Produkt hinter dem Begri heiÿt Mashup. Ein Mashup verschmilzt Inhalte verschiedener Anbieter (z.b. Google Maps und Flickr) auf der eigenen Webpräsenz. Abbildung 11 soll dies verdeutlichen. 45

46 Abbildung 10: Web 2.0 Tag Cloud 8.2 Wichtige Technische Realisierungen Blogs Ein Blog ist ein Onlinetagebuch. Blogs ermöglichen es jedem Benutzer ohne HTML Kenntnisse chronologisch geordnete Inhalte ins Internet zu stellen. Dabei gibt es ein paar Besonderheiten: Jeder Eintrag - man spricht von Post's - kann editiert werden Ein Post ist häug versioniert, über spezielle Links - die Trackbacks - kann man auf jede Version zurückspringen Andere Benutzer können einen Post kommentieren. Posts werden über Tags kategorisiert. Beispiele für Blogsoftware ist z.b. Tags Tags sind die moderne Version der Keywords. Webseiten werden von allen Nutzern getagt - man spricht hier von Social Bookmarking. Dadurch ergibt sich eine bessere Bewertung der Inhalte, da viele Leute - anstatt eines einzelnen - den Inhalt bewerten. Tags werden bei Blogs und wikis eingesetzt um Inhalte zu kategorisieren. Mittlerweile gibt es Suchmaschinen, die Inhalte aufgrund dieser Tags liefern, z.b. delicous Mr. Wong 46