Teil I ... Web 2.0-Trends
1 ... Das Web im neuen Gewand ... 31
1.1 ... Web 2.0 wie neu ist das neue Web? ... 31
... 1.1.1 ... Erneuerung statt Neuerfindung ... 32
... 1.1.2 ... Das neue Web: alte Technologien im Einsatz ... 32
... 1.1.3 ... Ein neuer Begriff für die Veränderungen im Web ... 34
... 1.1.4 ... Was ist Web 2.0 und was ist es nicht? ... 35
1.2 ... Neue Möglichkeiten und neue Konzepte ... 36
... 1.2.1 ... Das Web als Service-Plattform ... 36
... 1.2.2 ... Weisheit der Massen und Architektur der Partizipation ... 37
... 1.2.3 ... Open-Source-Bewegung und offene Technologien ... 40
... 1.2.4 ... The Perpetual Beta ... 42
... 1.2.5 ... Einfachheit und Minimalismus ... 43
... 1.2.6 ... Webkultur 2.0 ... 44
... 1.2.7 ... The Long Tail ... 51
... 1.2.8 ... Crowdsourcing ... 52
... 1.2.9 ... Qualitätsverlust und Datentransparenz ... 53
... 1.2.10 ... Bedarf nach Weiterentwicklung... 54
... 1.2.11 ... Zusammenfassung... 55
1.3 ... Die Nutzer des Web 2.0 ... 56
... 1.3.1 ... Soziale Netzwerke im Trend ... 56
... 1.3.2 ... Die Blogosphäre weitet sich aus ... 57
... 1.3.3 ... Desktop-Anwendungen online ... 58
... 1.3.4 ... Nutzer bestimmen selbst ... 59
1.4 ... Web 2.0 in Deutschland ... 60
... 1.4.1 ... Blogs ... 62
... 1.4.2 ... Soziale Netzwerke ... 62
... 1.4.3 ... Social Bookmarking ... 63
... 1.4.4 ... News-Community ... 63
... 1.4.5 ... Multimedia-Portale ... 63
... 1.4.6 ... Kollektive Intelligenz ... 64
... 1.4.7 ... Dinge übers Netz tauschen ... 64
1.5 ... Ressourcen ... 65
... 1.5.1 ... Online-Artikel ... 65
... 1.5.2 ... Online-Ressourcen ... 66
... 1.5.3 ... Literatur... 66
2 ... Designkultur Web 2.0 ... 67
2.1 ... Seitenstrukturen ... 68
... 2.1.1 ... Zwei- und Dreispalter ... 68
... 2.1.2 ... Kreativität und Kompaktheit ... 71
... 2.1.3 ... Zentrale Positionierung der Inhalte ... 72
2.2 ... Grafische Ansätze ... 73
... 2.2.1 ... Farbschemata ... 73
... 2.2.2 ... Badges, Streifen, Gradiente und Spruchbänder ... 75
... 2.2.3 ... Schatten-, Spiegel- und 3D-Effekte ... 77
... 2.2.4 ... Abgerundete Ecken ... 78
... 2.2.5 ... Icons ... 78
2.3 ... Webtypografie ... 79
... 2.3.1 ... Überproportional große Überschriften ... 79
... 2.3.2 ... Flattersatz oder Blocksatz? ... 81
... 2.3.3 ... Serifen oder Sans-Serifen? ... 81
2.4 ... Seitenelemente ... 82
... 2.4.1 ... Registerkarten ... 83
... 2.4.2 ... Such- und Eingabefelder ... 84
... 2.4.3 ... Tagclouds ... 85
... 2.4.4 ... Zebratabellen ... 85
2.5 ... Neue Konzepte ... 86
... 2.5.1 ... Plakatives und sauberes Design ... 86
... 2.5.2 ... Whitespace ... 87
... 2.5.3 ... Simplicity und Minimalismus ... 90
2.6 ... Zusammenfassung ... 91
Teil II ... Web 2.0-Seitengestaltung
3 ... Textgestaltung ... 95
3.1 ... Was ist Webtypografie? ... 95
... 3.1.1 ... Screen und Print absolute Flexibilität und absolute Kontrolle ... 97
... 3.1.2 ... Besonderheiten der Webtypografie ... 97
... 3.1.3 ... Warum ist Webtypografie wichtig? ... 98
... 3.1.4 ... Webtypografie in der Praxis ... 100
3.2 ... Grundlagen der Webtypografie ... 101
... 3.2.1 ... Typografische Begriffe im Überblick ... 101
... 3.2.2 ... Hervorhebung von Texten ... 102
... 3.2.3 ... Absätze und Gestaltung ... 105
... 3.2.4 ... Schriftgröße ... 113
... 3.2.5 ... Schriftart ... 120
... 3.2.6 ... Linkgestaltung ... 124
... 3.2.7 ... Typografische Konsistenz ... 126
... 3.2.8 ... Webtypografie und Barrierefreiheit ... 127
3.3 ... Neue Techniken der Webtypografie ... 128
... 3.3.1 ... Simple Image Replacement ... 129
... 3.3.2 ... Moderne Ansätze... 130
... 3.3.3 ... Dynamic Image Replacement ... 131
... 3.3.4 ... Dynamic Flash Replacement ... 137
3.4 ... Schriftart auswählen ... 142
... 3.4.1 ... Georgia ... 142
... 3.4.2 ... Arial... 143
... 3.4.3 ... Lucida Sans Unicode ... 143
... 3.4.4 ... Tahoma ... 143
... 3.4.5 ... Trebuchet MS ... 144
... 3.4.6 ... Times New Roman ... 144
... 3.4.7 ... Verdana ... 144
... 3.4.8 ... Überschriften und Fließtexte ... 145
3.5 ... Praxisbeispiel ... 146
... 3.5.1 ... Fließtext ... 146
... 3.5.2 ... Überschrift ... 151
3.6 ... Unkonventionelle Schriftarten ... 154
3.7 ... Ein Blick über den Tellerrand ... 156
... 3.7.1 ... Serifen: Cambria, Constantia ... 157
... 3.7.2 ... Sans-Serifen: Calibri, Candara, Corbel, Segoe UI ... 157
... 3.7.3 ... Monospaced: Consolas ... 158
3.8 ... Zusammenfassung ... 158
3.9 ... Ressourcen ... 160
... 3.9.1 ... Quellen und weiterführende Beiträge... 160
... 3.9.2 ... Typografie ... 160
... 3.9.3 ... Fonts ... 161
... 3.9.4 ... Dynamic Text Replacement ... 161
... 3.9.5 ... Werkzeuge und Dienste ... 161
... 3.9.6 ... Literatur... 162
4 ... Farbgestaltung Web 2.0 ... 163
4.1 ... Grundlagen der Farben- und Harmonielehre ... 165
... 4.1.1 ... Farbmischung und Farbmodelle ... 166
... 4.1.2 ... Farbwirkung ... 167
... 4.1.3 ... Farbtemperatur ... 168
... 4.1.4 ... Farbkreis ... 168
... 4.1.5 ... Farbkombinationen ... 169
... 4.1.6 ... Kontraste ... 171
... 4.1.7 ... Kontext der Farben ... 175
4.2 ... Farbtheorie in der Praxis ... 176
4.3 ... RGB und CMYK in der Praxis ... 178
4.4 ... Farbpalette im Web 2.0 ... 179
... 4.4.1 ... Neutrale, passive Farben ... 180
... 4.4.2 ... Bunte, aktive Farben ... 182
... 4.4.3 ... Weiß auf Schwarz oder Schwarz auf Weiß ... 184
4.5 ... Werkzeuge für die Farbauswahl ... 186
... 4.5.1 ... Grundfarben auswählen ... 186
... 4.5.2 ... Farben mischen ... 186
... 4.5.3 ... Farbpaletten wählen ... 187
... 4.5.4 ... Farbpaletten erzeugen ... 188
... 4.5.5 ... Farben umwandeln ... 189
... 4.5.6 ... Kontrast prüfen ... 189
... 4.5.7 ... Zugänglichkeit prüfen ... 189
... 4.5.8 ... Bewerten lassen ... 190
... 4.5.9 ... Kostenpflichtige Werkzeuge ... 190
... 4.5.10 ... Weitere Ressourcen ... 190
4.6 ... Ton der Komposition ... 190
4.7 ... Bestimmung von Harmonien ... 193
4.8 ... Helles Design Praxisbeispiel ... 194
... 4.8.1 ... Header ... 194
... 4.8.2 ... Seitennavigation ... 195
... 4.8.3 ... Banner ... 196
... 4.8.4 ... Harmonische Farbkombination ... 198
... 4.8.5 ... Sidebar ... 200
... 4.8.6 ... Footer ... 200
... 4.8.7 ... Übergänge zwischen Farben ... 201
... 4.8.8 ... Auszeichnung von Texten ... 201
... 4.8.9 ... Auszeichnung von Verweisen ... 202
... 4.8.10 ... Navigationsmenüs ... 205
... 4.8.11 ... Logo ... 207
... 4.8.12 ... Ergebnis ... 207
4.9 ... Dunkles Design Praxisbeispiel ... 208
... 4.9.1 ... Rahmen, Umgebung, Hintergrund ... 209
... 4.9.2 ... Sidebar ... 210
... 4.9.3 ... Übergänge zwischen Farben ... 211
... 4.9.4 ... Auszeichnung von Texten ... 211
... 4.9.5 ... Auszeichnung von Verweisen ... 213
... 4.9.6 ... Navigationsmenü ... 215
... 4.9.7 ... Footer ... 216
... 4.9.8 ... Ergebnis ... 216
4.10 ... Zusammenfassung ... 217
4.11 ... Ressourcen ... 219
... 4.11.1 ... Online-Artikel ... 219
... 4.11.2 ... Literatur... 220
5 ... Navigation ... 221
5.1 ... Navigationselemente entwerfen ... 221
... 5.1.1 ... Aufgaben der Seitennavigation ... 222
... 5.1.2 ... Platzierung von Navigationsleisten ... 223
... 5.1.3 ... Navigationsleisten gestalten ... 226
... 5.1.4 ... Richtlinien für die Gestaltung von Navigations elementen ... 227
5.2 ... CSS-basierte Ansätze ... 228
... 5.2.1 ... Die (X)HTML-Grundstruktur ... 229
... 5.2.2 ... Simple Navigation mit CSS ... 230
... 5.2.3 ... 2-Level Navigation mit CSS ... 237
5.3 ... Register ansprechend gestalten ... 242
... 5.3.1 ... Abgerundete Ecken ... 242
... 5.3.2 ... Sliding Doors ... 243
... 5.3.3 ... CSS Stripes ... 254
... 5.3.4 ... Weitere Ansätze... 260
... 5.3.5 ... Klappmenüs und Flyouts ... 261
... 5.3.6 ... Suckerfish Dropdowns ... 262
... 5.3.7 ... Hybrid CSS Dropdowns ... 265
... 5.3.8 ... Alle CSS-basierten Techniken im Überblick ... 266
5.4 ... Photoshop-Techniken ... 269
... 5.4.1 ... Abgerundete Registerkarten für die Textnavigation ... 269
... 5.4.2 ... Tiefeneffekt für Navigationsleisten ... 272
... 5.4.3 ... Registerkarten ... 275
... 5.4.4 ... Bildbasiertes Navigationsmenü ... 283
5.5 ... Tag-Clouds ... 285
5.6 ... Favicons ... 288
... 5.6.1 ... Favicons erstellen ... 289
5.7 ... Ressourcen ... 291
... 5.7.1 ... Online-Artikel ... 292
... 5.7.2 ... Tools ... 292
... 5.7.3 ... Tag-Cloud Plug-ins ... 293
... 5.7.4 ... Literatur... 293
6 ... Listen und Tabellen ... 295
6.1 ... Tabellen und Listen im Web 2.0 ... 295
6.2 ... Listen ... 296
... 6.2.1 ... XHTML-Markup für Listen ... 296
... 6.2.2 ... Gestaltung von Listen mit CSS ... 298
... 6.2.3 ... Listen im Web 2.0-Look ... 300
6.3 ... Tabellen ... 309
... 6.3.1 ... XHTML-Markup für Tabellen ... 309
... 6.3.2 ... table, tr, th, td, caption Tabellen, Zeilen, Zellen, Überschriften ... 309
... 6.3.3 ... Summary, abbr Zusammenfassung und Abkürzung ... 311
... 6.3.4 ... Zeilengruppen und Spaltengruppen ... 312
... 6.3.5 ... Colspan und rowspan Zeilen und Spalten verbinden und vereinigen ... 314
... 6.3.6 ... Gestaltung von Tabellen mit CSS ... 316
... 6.3.7 ... Tabellen im Web 2.0-Look ... 318
6.4 ... Ressourcen ... 324
7 ... Schaltflächen ... 327
7.1 ... Einfache Schaltfläche ... 328
7.2 ... Glänzende Schaltfläche im Aqua-Look ... 333
7.3 ... Glänzende 3D-Schaltfläche ... 339
7.4 ... Reflexion ... 343
7.5 ... Schatteneffekt ... 346
7.6 ... Schaltfläche mit 3D-Objekt ... 351
7.7 ... Ressourcen ... 354
8 ... Formulare ... 357
8.1 ... XHTML-Markup für Formulare Grundlagen ... 358
... 8.1.1 ... optgroup Optionen gruppieren ... 360
... 8.1.2 ... label Steuerelemente beschriften ... 361
... 8.1.3 ... fieldset, legend verwandte Formularelemente gruppieren und beschriften ... 362
8.2 ... Formularfelder mit CSS gestalten ... 364
... 8.2.1 ... Positionierung und Gestaltung von Eingabefeldern ... 364
... 8.2.2 ... multiple-Eigenschaft bei Auswahlmenüs ... 371
... 8.2.3 ... Die Größe der Felder manuell einstellen ... 390
... 8.2.4 ... Formularnavigation ... 391
... 8.2.5 ... Wie geht man mit Spam um? ... 392
8.3 ... Formulare und Usability ... 393
... 8.3.1 ... Beschriftungen von Eingabefeldern ... 394
... 8.3.2 ... Verwendung von visuellen Elementen ... 396
... 8.3.3 ... Primäre und sekundäre Aktionen ... 397
8.4 ... Ressourcen ... 398
9 ... Barrierefreiheit und Usability ... 401
9.1 ... Prinzipien der Barrierefreiheit ... 402
... 9.1.1 ... Vorteile der barrierefreien und standardkonformen Seitengestaltung ... 403
9.2 ... Barrierefreie Seitengestaltung ... 408
... 9.2.1 ... Grundlegende Richtlinien ... 408
... 9.2.2 ... Zugänglichkeit in der Praxis ... 409
... 9.2.3 ... BITV für Dummys ... 425
9.3 ... Prinzipien der Benutzerfreundlichkeit ... 425
... 9.3.1 ... Was ist Benutzerfreundlichkeit? ... 425
... 9.3.2 ... Ziel und Zweck der Usability ... 426
... 9.3.3 ... Häufig auftretende Usability-Fehler ... 427
9.4 ... Verhaltensmuster der Benutzer ... 427
9.5 ... Usability-Heuristiken ... 433
9.6 ... Barrierefreiheit und Benutzer freundlichkeit testen ... 437
9.7 ... Ressourcen ... 441
... 9.7.1 ... Online-Artikel ... 441
... 9.7.2 ... Tools ... 442
... 9.7.3 ... Usability ... 442
... 9.7.4 ... Literatur... 443
10 ... Web 2.0-Layouts mit CSS umsetzen ... 445
10.1 ... Block- und Inline-Elemente ... 446
... 10.1.1 ... Block-Level-Elemente ... 446
... 10.1.2 ... Inline-Level-Elemente ... 447
... 10.1.3 ... Block- und Inline-Elemente in CSS ... 449
10.2 ... Das CSS Box-Modell ... 450
... 10.2.1 ... Beispiel ... 452
... 10.2.2 ... margin und padding ... 452
... 10.2.3 ... border ... 453
... 10.2.4 ... Vertikale Abstände ... 455
... 10.2.5 ... The Box Model Problem ... 456
10.3 ... Die float-Theorie ... 457
... 10.3.1 ... Grundlegende Eigenschaften ... 457
... 10.3.2 ... Positionierung von float-Boxen ... 461
... 10.3.3 ... Das Attribut clear ... 466
... 10.3.4 ... Float-basierte Layouts ... 468
... 10.3.5 ... Spalten mit gleicher Höhe ... 479
10.4 ... Relative und absolute Positionierung ... 484
... 10.4.1 ... Containing Blocks ... 485
... 10.4.2 ... Statische Positionierung ... 486
... 10.4.3 ... Relative Positionierung ... 486
... 10.4.4 ... Absolute Positionierung ... 489
... 10.4.5 ... Feste Positionierung ... 492
... 10.4.6 ... Z-Index ... 492
... 10.4.7 ... Positions-basierte Layouts ... 494
... 10.4.8 ... Floats vs. Positioning ... 504
10.5 ... Auswahl des Layouts fest, flüssig oder elastisch? ... 507
... 10.5.1 ... Layouttypen im Überblick: Wo liegt der Unterschied zwischen den Ansätzen? ... 507
... 10.5.2 ... Fixed Layout ... 508
... 10.5.3 ... Liquid/Fluid Layout ... 512
... 10.5.4 ... Elastic Layout ... 514
... 10.5.5 ... Hybrid Layouts ... 516
... 10.5.6 ... Weitere Techniken Chamäleons ... 520
... 10.5.7 ... Feste Layouts mit variabler Breite ... 521
... 10.5.8 ... Text Zooming-Methode ... 522
... 10.5.9 ... Switchy McLayout ... 523
... 10.5.10 ... Zusammenfassung... 523
10.6 ... Umsetzung eines Web 2.0-Entwurfs ... 524
... 10.6.1 ... Zielsetzung und Entwurf ... 524
... 10.6.2 ... Abstimmung von Entwurfs und Schema ... 526
... 10.6.3 ... Grundgerüst entwerfen ... 526
... 10.6.4 ... Breite festlegen: #wrapper, #header, #content, #footer ... 528
... 10.6.5 ... Gestaltung von #content und #sidebar ... 530
... 10.6.6 ... Gestaltung des #header-Bereichs ... 532
... 10.6.7 ... Gestaltung der Navigationsleiste und der Suchbox ... 535
... 10.6.8 ... Gestaltung des Footers ... 536
... 10.6.9 ... Dekoration ... 537
10.7 ... Ressourcen ... 539
11 ... Browserkompatibilität ... 541
11.1 ... Umgang mit Inkonsistenzen ... 542
... 11.1.1 ... Vorbeugung ... 542
... 11.1.2 ... Umsetzung mit CSS und XHTML ... 542
... 11.1.3 ... Welche Hacks sollte man verwenden? ... 544
... 11.1.4 ... IE Conditional Comments ... 545
... 11.1.5 ... Der Internet Explorer ... 547
11.2 ... Browserweichen für den Internet Explorer ... 548
... 11.2.1 ... Sichere CSS Hacks für den Internet Explorer ... 549
... 11.2.2 ... Transparenz von PNG-Bildern ... 550
... 11.2.3 ... Float-Attribut ... 551
... 11.2.4 ... The IE Doubled Float-Margin Bug ... 551
... 11.2.5 ... IE/Win Guillotine Bug ... 551
... 11.2.6 ... Feste Positionierung von Elementen ... 552
... 11.2.7 ... Three Pixel Text-Jog Bug ... 553
... 11.2.8 ... CSS Hover Behavior ... 558
... 11.2.9 ... Fixe Positionierung des Hintergrundbildes ( background-attachment)... 559
... 11.2.10 ... Minimale und maximale Breite/Höhe ... 559
... 11.2.11 ... Weitere Mängel des Internet Explorers ... 559
... 11.2.12 ... Häufige Lösungsansätze ... 560
11.3 ... Kompatibilitätstabellen ... 563
... 11.3.1 ... HTML 4.01/XHTML 1.0 ... 563
11.4 ... Ressourcen ... 566
... 11.4.1 ... Werkzeuge, Dienste ... 566
... 11.4.2 ... Tipps ... 567
Teil III ... Web 2.0-Programmierung
12 ... Ajax ... 571
12.1 ... Ajax-Anwendungen in der Praxis ... 572
... 12.1.1 ... Google Mail (GMail): clever, robust und elegant ... 572
... 12.1.2 ... Netvibes: personalisierbare Startseiten ... 574
... 12.1.3 ... Mite: Zeiterfassungstool für Web-Worker ... 574
... 12.1.4 ... Typische Merkmale von Ajax-Applikationen ... 575
12.2 ... Klassisches Modell und Ajax-Modell ... 576
12.3 ... Architektur von Ajax ... 579
... 12.3.1 ... Strategie der Ajax-Programmierung ... 580
... 12.3.2 ... XMLHttpRequest (XHR) ... 580
... 12.3.3 ... Methoden des XMLHttpRequest-Objekts ... 581
... 12.3.4 ... Attribute des XMLHttpRequest-Objekts ... 582
... 12.3.5 ... Praxis-Beispiel ... 583
12.4 ... Ajax-Bibliotheken und Frameworks... 597
12.5 ... Nachteile von Ajax ... 600
12.6 ... Ressourcen ... 602
13 ... Mikroformate... 603
13.1 ... Was sind Mikroformate? ... 605