• Startseite
  • Das Buch & Leseprobe
  • Kritiken
  • Errata
  • Fonts
  • Kontakt

Linkcodes:

Praxisbuch Web 2.0

Praxisbuch Web 2.0 gleich bestellen!
  • 833 Seiten
  • 2., aktualisierte und erweiterte Auflage
  • komplett in Farbe, mit DVD
  • ISBN: 978-3-8362-1342-4
  • Galileo Computing, 2009
  • Preis: 39,90 €

Über das Buch

Beschreibung

Auf über 800 Seiten lernen Sie, was eine aktuelle Web 2.0-Seite ausmacht, wie Sie benutzerorientierte Lösungen umsetzen und neue Trends und Techniken wie z. B. rasterbasierte Layouts, Parallax-Effekte, Caroussel- oder Toogle-Menüs einsetzen können.

Neue Usability-Erkenntnisse helfen Ihnen bei effektiven Formularen und der Verbesserung Ihrer Website. Von der charakteristischen Seiten-, Text- und Farbgestaltung bis hin zum Einsatz von Ajax und jQuery, CSS-Frameworks, Wikis, Blogs und Podcasts: Vitaly Friedman gibt Ihnen praktische Hilfestellung bei der Gestaltung Ihres Webdesigns.

Zahlreiche Schritt-für-Schritt-Anleitungen – etwa zur Erstellung eines Ajax-basierten Katalogs oder eines CSS-Layouts – unterstützen Sie bei der Umsetzung Ihrer Web 2.0-Site.

  1. Web 2.0 verstehen
    Informieren Sie sich hier im Detail, was Web 2.0 für Sie als Webdesigner wirklich bedeutet. Unter anderem behandelt das Buch das Phänomen Web 2.0 sowie aktuelle Designtrends 2009.
  2. Farben und Schriften gezielt einsetzen
    Lernen Sie von Grund auf, wie Sie die typische Farb- und Textgestaltung des Web 2.0 in Ihrer Webseite erreichen können.
  3. Gestalten Sie aktuelle Seitenelemente
    Schon mal über eine neue Navigation nachgedacht? Oder über Buttons und Badges im Web 2.0-Look? Hier lernen Sie, wie’s geht.
  4. Usability & Accessibility im Einsatz
    Zahlreiche Praxisbeispiele, Checklisten und Tools erleichtern Ihnen die Umsetzung barrierefreier und benutzerfreundlicher Webseiten.
  5. Web 2.0-Anwendungen programmieren
    Profitieren Sie von jQuery und Ajax-Technologien für die Entwicklung Desktop-ähnlicher Online-Anwendungen.
  6. Achtung, Aufnahme!
    Produzieren und veröffentlichen Sie eigene Podcasts. Praxistipps zur Planung, Konzeption und Umsetzung helfen Ihnen dabei.
  7. Nutzen Sie WordPress und Wiki-Systeme
    Erfahren Sie, wie Sie die Attraktivität Ihres WordPress-Blogs steigern können und Wiki- Systeme effektiv einsetzen.
  8. Listen, Tabellen, Formulare, CSS-Layouts
    Setzen Sie aktuelle Layouts mit CSS-Techniken ein (u.a. mit CSS-Frameworks, CSS Styleguides und CSS Docs) und gestalten Sie Listen und Formulare auf der Höhe der Zeit.

Zum Autor

Vitaly Friedman ist Entwickler und Designer, der sich für barrierefreie und benutzerfreundliche Seitengestaltung einsetzt und diese realisiert.

Er ist Autor des Online-Magazins DrWeb.de und Chef-Redakteur des Online-Magazins Smashingmagazine.com, das zu den weltweit populärsten Online-Magazinen für Webdesign zählt. Zur Zeit studiert Friedman (23) Informatik an der Universität des Saarlandes.

Leseprobe

  • Praxisbuch Web 2.0 (PDF) (69 Seiten, 2.1 MB)
    Hier finden Sie ausgewählte Abschnitte aus Kapitel 5, "Navigation", sowie Vorwort, Inhaltsverzeichnis und Index des Buches.

Details

  • 2., aktualisierte und erweiterte Auflage
  • gebundene Ausgabe: 833 Seiten
  • komplett in Farbe, mit DVD
  • ca. 39,90 Euro
  • ISBN: 978-3-8362-1342-4
  • Sprache: Deutsch
  • erscheint Ende 2008 bei Galileo Computing
  • Auf der DVD finden Sie alle Beispiele aus dem Buch sowie Video-Lektionen aus den Trainings »Adobe Photoshop CS3« & »Adobe Flash CS3«

Inhaltsverzeichnis


  • ... Geleitwort des Fachgutachters ... 19
  • ... Vorwort ... 21
  • ... Einleitung ... 25
  • 1 ... Das Web im neuen Gewand ... 33
  • 1.1 ... Web 2.0 – wie neu ist das neue Web? ... 33
  • 1.1.1 ... Erneuerung statt Neuerfindung ... 34
  • 1.1.2 ... Das neue Web: alte Technologien im Einsatz ... 34
  • 1.1.3 ... Ein neuer Begriff für die Veränderungen im Web ... 36
  • 1.1.4 ... Was ist Web 2.0 – und was ist es nicht? ... 37
  • 1.1.5 ... Hat der Begriff »Web 2.0« noch Substanz? ... 38
  • 1.2 ... Neue Möglichkeiten und neue ­Konzepte ... 39
  • 1.2.1 ... Rich Internet Applications ... 40
  • 1.2.2 ... Desktop-RIAs ... 40
  • 1.2.3 ... Weisheit der Massen und Architektur der ­Partizipation ... 43
  • 1.2.4 ... Open-Source-Bewegung und offene Technologien ... 46
  • 1.2.5 ... The Perpetual Beta ... 48
  • 1.2.6 ... Einfachheit und Minimalismus ... 49
  • 1.2.7 ... Webkultur 2.0 ... 50
  • 1.2.8 ... The Long Tail ... 61
  • 1.2.9 ... Attention Economy ... 62
  • 1.2.10 ... Crowdsourcing ... 63
  • 1.2.11 ... Qualitätsverlust und Datentransparenz ... 64
  • 1.2.12 ... Bedarf nach Weiterentwicklung ... 66
  • 1.2.13 ... Zusammenfassung ... 67
  • 1.3 ... Die Nutzer des Web 2.0 ... 68
  • 1.3.1 ... Soziale Netzwerke im Trend ... 68
  • 1.3.2 ... Die Blogosphäre weitet sich aus ... 70
  • 1.3.3 ... Desktop-Anwendungen online ... 72
  • 1.3.4 ... Nutzer bestimmen selbst ... 72
  • 1.4 ... Web 2.0 in Deutschland ... 74
  • 1.4.1 ... Blogs ... 76
  • 1.4.2 ... Soziale Netzwerke ... 77
  • 1.4.3 ... Social Bookmarking ... 78
  • 1.4.4 ... News-Community ... 78
  • 1.4.5 ... Multimedia-Portale ... 79
  • 1.4.6 ... Kollektive Intelligenz ... 80
  • 1.4.7 ... Dinge übers Netz tauschen ... 80
  • 1.5 ... Ressourcen ... 80
  • 1.5.1 ... Online-Artikel ... 81
  • 1.5.2 ... Online-Ressourcen ... 81
  • 1.5.3 ... Literatur ... 81
  • 2 ... Designkultur Web 2.0 ... 83
  • 2.1 ... Seitenstrukturen ... 84
  • 2.1.1 ... Zwei- und Dreispalter ... 84
  • 2.1.2 ... Zentrale Positionierung der Inhalte ... 89
  • 2.1.3 ... Kreativität und Kompaktheit: Trend zu ­Mehrspaltigkeit ... 89
  • 2.1.4 ... Rasterbasierte Layouts ... 92
  • 2.1.5 ... Out-of-the-box-Layouts ... 96
  • 2.2 ... Grafische Ansätze ... 99
  • 2.2.1 ... Farbschemata ... 100
  • 2.2.2 ... Trends und grafische Ansätze ... 102
  • 2.2.3 ... Handschriftliche Elemente und Schreibschriften ... 103
  • 2.2.4 ... Geklebt, getackert, geheftet und gepinnt ... 105
  • 2.2.5 ... Graffiti, Flecken und Grunge ... 106
  • 2.2.6 ... Organische Texturen und fotografische ­Hintergrundbilder ... 108
  • 2.2.7 ... Collagen und Scrapbooks ... 109
  • 2.2.8 ... Illustrationen und Ornamente ... 109
  • 2.2.9 ... Retro und Vintage ... 114
  • 2.2.10 ... Icons ... 115
  • 2.3 ... Webtypografie ... 116
  • 2.3.1 ... Typografie laut und bunt ... 117
  • 2.3.2 ... Überproportional große Überschriften ... 118
  • 2.3.3 ... Flattersatz oder Blocksatz? ... 119
  • 2.3.4 ... Serifen oder keine Serifen? ... 120
  • 2.4 ... Seitenelemente ... 121
  • 2.4.1 ... Registerkarten ... 121
  • 2.4.2 ... Sprechende Blocknavigation ... 123
  • 2.4.3 ... RSS-Icons und Social Icons ... 124
  • 2.4.4 ... Status-Elemente und Content Icons ... 125
  • 2.4.5 ... Such- und Eingabefelder ... 127
  • 2.4.6 ... Tag Clouds ... 128
  • 2.4.7 ... Zebra-Tabellen ... 129
  • 2.4.8 ... Media-Blöcke: Videos im Einsatz ... 130
  • 2.4.9 ... Fotogalerien und Karussels ... 131
  • 2.5 ... Neue Konzepte ... 134
  • 2.5.1 ... Plakatives und sauberes Design ... 135
  • 2.5.2 ... Effektives Design ... 136
  • 2.5.3 ... Wenige Farben wirkungsvoll eingesetzt ... 138
  • 2.5.4 ... Weißraum (Whitespace) ... 139
  • 2.5.5 ... Einfachheit und Minimalismus ... 141
  • 2.6 ... Zusammenfassung ... 142
  • 3 ... Textgestaltung ... 147
  • 3.1 ... Was ist Webtypografie? ... 147
  • 3.1.1 ... Screen und Print – absolute Flexibilität und ­absolute Kontrolle ... 149
  • 3.1.2 ... Besonderheiten der Webtypografie ... 149
  • 3.1.3 ... Warum ist Webtypografie wichtig? ... 150
  • 3.1.4 ... Webtypografie in der Praxis ... 152
  • 3.2 ... Grundlagen der Webtypografie ... 153
  • 3.2.1 ... Typografische Begriffe im Überblick ... 153
  • 3.2.2 ... Hervorhebung von Texten ... 154
  • 3.2.3 ... Absätze und Gestaltung ... 157
  • 3.2.4 ... Schriftgröße ... 165
  • 3.2.5 ... Schriftart ... 185
  • 3.2.6 ... Link-Gestaltung ... 188
  • 3.2.7 ... Typografische Hierarchie ... 191
  • 3.2.8 ... Details machen die Typografie aus ... 191
  • 3.2.9 ... Typografische Konsistenz ... 193
  • 3.2.10 ... Webtypografie und Barrierefreiheit ... 193
  • 3.3 ... Neue Techniken der Webtypografie ... 195
  • 3.3.1 ... Simple Image Replacement ... 196
  • 3.3.2 ... Moderne Ansätze ... 196
  • 3.3.3 ... Dynamic Image Replacement ... 197
  • 3.3.4 ... @font-face-Regel ... 209
  • 3.4 ... Schriftart auswählen ... 210
  • 3.4.1 ... Georgia ... 211
  • 3.4.2 ... Arial ... 211
  • 3.4.3 ... Lucida Sans Unicode ... 211
  • 3.4.4 ... Tahoma ... 211
  • 3.4.5 ... Trebuchet MS ... 212
  • 3.4.6 ... Times New Roman ... 212
  • 3.4.7 ... Verdana ... 212
  • 3.4.8 ... Überschriften und Fließtexte ... 213
  • 3.5 ... Praxisbeispiel ... 214
  • 3.5.1 ... Fließtext ... 214
  • 3.5.2 ... Überschrift ... 219
  • 3.6 ... Unkonventionelle Schriftarten ... 222
  • 3.6.1 ... Kriterien zur Auswahl einer Schriftart ... 224
  • 3.6.2 ... Welchen Zweck soll die Schrift erfüllen? ... 224
  • 3.6.3 ... Ist die Schriftfamilie vollständig? ... 225
  • 3.6.4 ... Wie viel Platz benötigt die Schrift? ... 225
  • 3.6.5 ... Details sind schön, aber nicht immer praktisch ... 225
  • 3.6.6 ... Soll die Schrift dominieren oder soll sie subtil sein? ... 225
  • 3.6.7 ... Wie sehen Buchstaben in der Großaufnahme aus? ... 226
  • 3.6.8 ... Open Type, True Type oder PostScript? ... 226
  • 3.6.9 ... Font-Verwaltung ... 226
  • 3.7 ... Ein Blick über den Tellerrand ... 227
  • 3.7.1 ... Serifen: Cambria, Constantia ... 228
  • 3.7.2 ... Sans-Serifen: Calibri, Candara, Corbel, Segoe UI ... 228
  • 3.7.3 ... Monospaced: Consolas ... 229
  • 3.8 ... Zusammenfassung ... 229
  • 3.9 ... Ressourcen ... 231
  • 3.9.1 ... Quellen und weiterführende Beiträge ... 231
  • 3.9.2 ... Typografie ... 231
  • 3.9.3 ... Fonts ... 232
  • 3.9.4 ... Dynamic Text Replacement ... 232
  • 3.9.5 ... Werkzeuge und Dienste ... 232
  • 3.9.6 ... Literatur ... 233
  • 4 ... Farbgestaltung Web 2.0 ... 235
  • 4.1 ... Grundlagen der Farben- und ­Harmonielehre ... 237
  • 4.1.1 ... Farbmischung und Farbmodelle ... 238
  • 4.1.2 ... Farbwirkung ... 239
  • 4.1.3 ... Farbtemperatur ... 240
  • 4.1.4 ... Farbkreis ... 240
  • 4.1.5 ... Farbkombinationen ... 241
  • 4.1.6 ... Kontraste ... 243
  • 4.1.7 ... Kontext der Farben ... 247
  • 4.2 ... Farbtheorie in der Praxis ... 248
  • 4.3 ... RGB und CMYK in der Praxis ... 250
  • 4.4 ... Farbpalette im Web 2.0 ... 251
  • 4.4.1 ... Neutrale, passive Farben ... 253
  • 4.4.2 ... Bunte, aktive Farben ... 254
  • 4.4.3 ... Dunkle, schmutzige Farben ... 257
  • 4.4.4 ... Weiß auf Schwarz oder Schwarz auf Weiß ... 258
  • 4.5 ... Werkzeuge für die Farbauswahl ... 260
  • 4.5.1 ... Grundfarben auswählen ... 260
  • 4.5.2 ... Farben mischen ... 260
  • 4.5.3 ... Farbpaletten wählen ... 261
  • 4.5.4 ... Farbpaletten erzeugen ... 262
  • 4.5.5 ... Farben umwandeln ... 263
  • 4.5.6 ... Kontrast prüfen ... 263
  • 4.5.7 ... Zugänglichkeit prüfen ... 263
  • 4.5.8 ... Farbpalette bewerten lassen ... 264
  • 4.5.9 ... Kostenpflichtige Werkzeuge ... 264
  • 4.5.10 ... Weitere Ressourcen ... 264
  • 4.6 ... Ton der Komposition ... 264
  • 4.7 ... Bestimmung von Harmonien ... 267
  • 4.8 ... Helles Design – Praxisbeispiel ... 268
  • 4.8.1 ... Header ... 268
  • 4.8.2 ... Seitennavigation ... 269
  • 4.8.3 ... Banner ... 270
  • 4.8.4 ... Harmonische Farbkombinationen ... 272
  • 4.8.5 ... Sidebar ... 274
  • 4.8.6 ... Footer ... 274
  • 4.8.7 ... Übergänge zwischen Farben ... 275
  • 4.8.8 ... Auszeichnung von Texten ... 275
  • 4.8.9 ... Auszeichnung von Verweisen ... 276
  • 4.8.10 ... Navigationsmenüs ... 279
  • 4.8.11 ... Logo ... 281
  • 4.8.12 ... Ergebnis ... 281
  • 4.9 ... Dunkles Design – Praxisbeispiel ... 282
  • 4.9.1 ... Rahmen, Umgebung, Hintergrund ... 283
  • 4.9.2 ... Sidebar ... 284
  • 4.9.3 ... Übergänge zwischen Farben ... 285
  • 4.9.4 ... Auszeichnung von Texten ... 285
  • 4.9.5 ... Auszeichnung von Verweisen ... 287
  • 4.9.6 ... Navigationsmenü ... 289
  • 4.9.7 ... Footer ... 290
  • 4.9.8 ... Ergebnis ... 290
  • 4.10 ... Zusammenfassung ... 291
  • 4.11 ... Ressourcen ... 293
  • 4.11.1 ... Online-Artikel ... 293
  • 4.11.2 ... Literatur ... 294
  • 5 ... Navigation ... 295
  • 5.1 ... Navigationselemente entwerfen ... 295
  • 5.1.1 ... Aufgaben der Seitennavigation ... 296
  • 5.1.2 ... Platzierung von Navigationsleisten ... 297
  • 5.1.3 ... Navigationsleisten gestalten ... 302
  • 5.1.4 ... Richtlinien für die Gestaltung von ­Navigations­elementen ... 303
  • 5.2 ... CSS-basierte Ansätze ... 305
  • 5.2.1 ... Die (X)HTML-Grundstruktur ... 305
  • 5.2.2 ... Simple Navigation mit CSS ... 307
  • 5.2.3 ... Navigation zweiter Ebene mit CSS ... 313
  • 5.3 ... Register ansprechend gestalten ... 319
  • 5.3.1 ... Abgerundete Ecken ... 319
  • 5.3.2 ... Sliding Doors ... 319
  • 5.3.3 ... CSS Sprites ... 331
  • 5.4 ... CSS und JavaScript-Ansätze ... 337
  • 5.4.1 ... Registerkarten ... 337
  • 5.4.2 ... CSS Sprites mit JavaScript ... 340
  • 5.4.3 ... Klappmenüs und Flyouts ... 341
  • 5.4.4 ... Suckerfish Dropdowns ... 343
  • 5.4.5 ... Hybrid CSS Dropdowns ... 346
  • 5.4.6 ... Toggle-Menüs ... 347
  • 5.4.7 ... Karussells ... 348
  • 5.4.8 ... Alle CSS-basierten Techniken im Überblick ... 350
  • 5.5 ... Adobe Photoshop-Techniken ... 353
  • 5.5.1 ... Abgerundete Registerkarten für die Textnavigation ... 353
  • 5.5.2 ... Tiefeneffekt für Navigationsleisten ... 356
  • 5.5.3 ... Registerkarten ... 359
  • 5.5.4 ... Bildbasiertes Navigationsmenü ... 367
  • 5.6 ... Tag Clouds ... 369
  • 5.7 ... Favicons ... 373
  • 5.7.1 ... Favicons erstellen ... 374
  • 5.8 ... Ressourcen ... 376
  • 5.8.1 ... Online-Artikel ... 376
  • 5.8.2 ... Tools ... 377
  • 5.8.3 ... Tag Cloud-Plug-ins ... 378
  • 5.8.4 ... Literatur ... 378
  • 6 ... Listen und Tabellen ... 379
  • 6.1 ... Tabellen und Listen im Web 2.0 ... 379
  • 6.2 ... Listen ... 380
  • 6.2.1 ... XHTML-Markup für Listen ... 380
  • 6.2.2 ... Gestaltung von Listen mithilfe von CSS ... 382
  • 6.2.3 ... Listen im Web 2.0-Look ... 384
  • 6.3 ... Listen im Einsatz ... 393
  • 6.4 ... Tabellen ... 394
  • 6.4.1 ... XHTML-Markup für Tabellen ... 394
  • 6.4.2 ... table, tr, th, td, caption – Tabellen, Zeilen, Zellen, Überschriften ... 395
  • 6.4.3 ... Summary, abbr – Zusammenfassung und Abkürzung ... 397
  • 6.4.4 ... Zeilengruppen und Spaltengruppen ... 397
  • 6.4.5 ... Colspan und rowspan – Zeilen und Spalten ­verbinden und vereinigen ... 400
  • 6.4.6 ... Gestaltung von Tabellen mit CSS ... 402
  • 6.4.7 ... Tabellen im Web 2.0-Look ... 403
  • 6.4.8 ... Tabellen im Einsatz ... 410
  • 6.5 ... Ressourcen ... 413
  • 7 ... Formulare ... 415
  • 7.1 ... XHTML-Markup für Formulare – Grundlagen ... 416
  • 7.1.1 ... optgroup – Optionen gruppieren ... 418
  • 7.1.2 ... label – Steuerelemente beschriften ... 419
  • 7.1.3 ... fieldset, legend – verwandte Formular­-elemente gruppieren und beschriften ... 420
  • 7.2 ... Formularfelder mit CSS gestalten ... 422
  • 7.2.1 ... Positionierung und Gestaltung von Eingabefeldern ... 422
  • 7.2.2 ... multiple-Eigenschaft bei Auswahlmenüs ... 429
  • 7.2.3 ... Die Größe der Felder manuell einstellen ... 448
  • 7.2.4 ... Formularnavigation ... 449
  • 7.2.5 ... Wie geht man mit Spam um? ... 450
  • 7.3 ... Formulare und Usability ... 451
  • 7.3.1 ... Beschriftungen von Eingabefeldern ... 461
  • 7.3.2 ... Verwenden visueller Elemente ... 462
  • 7.3.3 ... Primäre und sekundäre Aktionen ... 464
  • 7.4 ... Ressourcen ... 465
  • 8 ... Barrierefreiheit und Usability ... 467
  • 8.1 ... Prinzipien der Barrierefreiheit ... 468
  • ... standardkonformen Seitengestaltung ... 469
  • 8.2 ... Barrierefreie Seitengestaltung ... 474
  • 8.2.1 ... Grundlegende Richtlinien ... 474
  • 8.2.2 ... Zugänglichkeit in der Praxis ... 475
  • 8.2.3 ... BITV für Dummys ... 491
  • 8.3 ... Prinzipien der Benutzerfreundlichkeit ... 491
  • 8.3.1 ... Was ist Benutzerfreundlichkeit? ... 491
  • 8.3.2 ... Ziel und Zweck der Usability ... 492
  • 8.3.3 ... Häufig auftretende Usability-Fehler ... 493
  • 8.4 ... Verhaltensmuster der Benutzer ... 493
  • 8.5 ... Usability-Heuristiken ... 500
  • 8.6 ... »Goldene« Usability-Richtlinien ... 504
  • 8.7 ... Barrierefreiheit und ­Benutzerfreundlichkeit testen ... 510
  • 8.8 ... Ressourcen ... 515
  • 8.8.1 ... Online-Artikel ... 515
  • 8.8.2 ... Tools ... 516
  • 8.8.3 ... Usability ... 516
  • 8.8.4 ... Literatur ... 517
  • 9 ... Web 2.0-Layouts mit CSS umsetzen ... 519
  • 9.1 ... Block-Level-Elemente und ­Inline-Level-Elemente ... 520
  • 9.1.1 ... Block-Level-Elemente ... 520
  • 9.1.2 ... Inline-Level-Elemente ... 521
  • 9.1.3 ... Block-Level- und Inline-Level-Elemente in CSS ... 523
  • 9.2 ... Das CSS-Box-Modell ... 525
  • 9.2.1 ... Beispiel ... 526
  • 9.2.2 ... margin und padding ... 526
  • 9.2.3 ... border ... 527
  • 9.2.4 ... Vertikale Abstände ... 529
  • 9.2.5 ... Das Box-Modell-Problem ... 530
  • 9.3 ... Die float-Theorie ... 531
  • 9.3.1 ... Grundlegende Eigenschaften ... 531
  • 9.3.2 ... Positionierung von float-Boxen ... 535
  • 9.3.3 ... Das Attribut »clear« ... 540
  • 9.3.4 ... Float-basierte Layouts ... 542
  • 9.3.5 ... Spalten mit gleicher Höhe ... 553
  • 9.4 ... Relative und absolute Positionierung ... 558
  • 9.4.1 ... Containing Blocks ... 559
  • 9.4.2 ... Statische Positionierung ... 560
  • 9.4.3 ... Relative Positionierung ... 560
  • 9.4.4 ... Absolute Positionierung ... 563
  • 9.4.5 ... Feste Positionierung ... 566
  • 9.4.6 ... z-index ... 566
  • 9.4.7 ... Positions-basiertes Layout ... 568
  • 9.4.8 ... Floats vs. Positionierung ... 578
  • 9.5 ... Auswahl des Layouts – fest, flüssig oder elastisch? ... 581
  • 9.5.1 ... Layouttypen im Überblick: Wo liegt der Unterschied zwischen den Ansätzen? ... 581
  • 9.5.2 ... Fixed Layout ... 582
  • 9.5.3 ... Liquid/Fluid Layout ... 586
  • 9.5.4 ... Elastic Layout ... 588
  • 9.5.5 ... Hybrid Layouts ... 590
  • 9.5.6 ... Weitere Techniken – Chamäleons ... 594
  • 9.5.7 ... Feste Layouts mit variabler Breite ... 595
  • 9.5.8 ... Text-Zooming-Methode ... 596
  • 9.5.9 ... Switchy McLayout ... 597
  • 9.5.10 ... Zusammenfassung ... 597
  • 9.6 ... Umsetzung eines Web 2.0-Entwurfs ... 598
  • 9.6.1 ... Zielsetzung und Entwurf ... 598
  • 9.6.2 ... Entwurf des Schemas ... 600
  • 9.6.3 ... Grundgerüst entwerfen ... 600
  • 9.6.4 ... Breite festlegen: #wrapper, #header, #content, ­#footer ... 602
  • 9.6.5 ... Gestaltung von #content und #sidebar ... 604
  • 9.6.6 ... Gestaltung des Headers ... 606
  • 9.6.7 ... Gestaltung der Navigationsleiste und der Suchbox ... 609
  • 9.6.8 ... Gestaltung des Footers ... 610
  • 9.6.9 ... Dekoration ... 611
  • 9.7 ... CSS-Spezifität (CSS Specificity) ... 613
  • 9.7.1 ... Was ist CSS-Spezifität? ... 614
  • 9.7.2 ... Berechnung der Spezifität ... 615
  • 9.7.3 ... Fazit ... 617
  • 9.8 ... CSS-Frameworks ... 618
  • 9.8.1 ... Wie entwickle ich ein Framework? ... 619
  • 9.8.2 ... Auf der Suche nach dem perfekten Framework ... 620
  • 9.8.3 ... CSS-Frameworks im Überblick ... 620
  • 9.8.4 ... Blueprint ... 620
  • 9.8.5 ... 960 Grid System ... 622
  • 9.8.6 ... YAML ... 622
  • 9.8.7 ... YUI Grids CSS ... 623
  • 9.8.8 ... Weitere CSS-Frameworks ... 624
  • 9.9 ... CSS Doc und CSS-Styleguides ... 624
  • 9.10 ... CSS-Wireframes ... 628
  • 9.11 ... Exkurs: Parallax Scrolling ... 629
  • 9.12 ... Ressourcen ... 633
  • 10 ... Browserkompatibilität ... 635
  • 10.1 ... Umgang mit Inkonsistenzen ... 636
  • 10.1.1 ... Vorbeugung ... 636
  • 10.1.2 ... Umsetzung mit CSS und XHTML ... 636
  • 10.1.3 ... Welche Hacks sollte man verwenden? ... 638
  • 10.1.4 ... IE Conditional Comments ... 639
  • 10.1.5 ... Der Internet Explorer ... 641
  • 10.2 ... Browserweichen für den Internet Explorer ... 642
  • 10.2.1 ... Sichere CSS-Hacks für den Internet Explorer ... 643
  • 10.2.2 ... Transparenz von PNG-Bildern ... 644
  • 10.2.3 ... Float-Attribut ... 645
  • 10.2.4 ... Der IE-Doubled-Float-Margin-Bug ... 645
  • 10.2.5 ... Der IE/Win-Guillotine-Bug ... 645
  • 10.2.6 ... Feste Positionierung von Elementen ... 646
  • 10.2.7 ... Der Three-Pixel-Text-Jog-Bug ... 647
  • 10.2.8 ... Der IE 6-Peekaboo-Bug ... 648
  • 10.2.9 ... Der Adjacent-Float-Clear-Gap-Bug ... 649
  • 10.2.10 ... Der Line-Height-and-Replaced-Element-Hack ... 650
  • 10.2.11 ... Der Horizontal-Centering-Hack ... 651
  • 10.2.12 ... Der Expanding-Box-Bug ... 651
  • 10.2.13 ... CSS-Hover-Behavior ... 652
  • 10.2.14 ... Fixe Positionierung des Hintergrundbildes ­(background-attachment) ... 653
  • 10.2.15 ... Minimale und maximale Breite oder Höhe ... 653
  • 10.2.16 ... Weitere Mängel des Internet Explorers ... 653
  • 10.2.17 ... Häufige Lösungsansätze ... 654
  • 10.3 ... CSS-Unterstützung in modernen Browsern ... 657
  • 10.3.1 ... Neue Selektoren und Deklarationen ... 657
  • 10.4 ... Kompatibilitätstabellen ... 661
  • 10.5 ... Ressourcen ... 662
  • 10.5.1 ... Werkzeuge, Dienste ... 662
  • 10.5.2 ... Tipps ... 663
  • 11 ... Ajax ... 667
  • 11.1 ... Ajax-Anwendungen in der Praxis ... 668
  • 11.1.1 ... Google Mail (GMail): clever, robust und elegant ... 668
  • 11.1.2 ... Netvibes: personalisierbare Startseiten ... 670
  • 11.1.3 ... Mite: Zeiterfassungstool für Web-Worker ... 670
  • 11.1.4 ... Typische Merkmale von Ajax-Applikationen ... 671
  • 11.2 ... Klassisches Modell und Ajax-Modell ... 672
  • 11.3 ... Architektur von Ajax ... 675
  • 11.3.1 ... Strategie der Ajax-Programmierung ... 676
  • 11.3.2 ... XMLHttpRequest (XHR) ... 676
  • 11.3.3 ... Methoden des XMLHttpRequest-Objekts ... 677
  • 11.3.4 ... Attribute des XMLHttpRequest-Objekts ... 678
  • 11.3.5 ... Praxisbeispiel ... 678
  • 11.4 ... Unobtrusive JavaScript ... 692
  • 11.4.1 ... Keine Annahmen machen ... 693
  • 11.4.2 ... Sauberes Markup erzeugen ... 694
  • 11.4.3 ... Alles trennen, was sich trennen lässt ... 696
  • 11.4.4 ... Daten über die Umgebung nutzen ... 696
  • 11.4.5 ... Quellcode revidieren und optimieren ... 697
  • 11.5 ... Unobtrusive JavaScript in der Praxis ... 697
  • 11.5.1 ... jQuery im Überblick ... 698
  • 11.5.2 ... Installation ... 698
  • 11.5.3 ... $-Funktion und $(document).ready() ... 698
  • 11.5.4 ... Selektoren ... 699
  • 11.5.5 ... Methodenaufrufe ... 703
  • 11.5.6 ... Events und Event Handler ... 705
  • 11.5.7 ... Ajax-Komponenten ... 706
  • 11.5.8 ... $.ajax ( options ) ... 706
  • 11.5.9 ... .load( url, [data], [callback] ) ... 707
  • 11.5.10 ... .get( url, [data], [callback], [type] ) ... 707
  • 11.5.11 ... .post ( url, [data], [callback], [type] ) ... 708
  • 11.5.12 ... Ajax-basierter Katalog mit jQuery ... 708
  • 11.5.13 ... jQuery: Werkzeuge und Ressourcen ... 719
  • 11.6 ... Ajax-Bibliotheken und Frameworks ... 719
  • 11.8 ... Ressourcen ... 724
  • 12 ... Mikroformate ... 727
  • 12.1 ... Was sind Mikroformate? ... 729
  • 12.2 ... Mikroformate im Überblick ... 730
  • 12.3 ... Mikroformate im Einsatz ... 731
  • 12.4 ... Visitenkarte als hCard ... 733
  • 12.5 ... Mikroformate miteinander ­kombinieren ... 736
  • 12.6 ... Zusammenfassung ... 737
  • 12.7 ... Ressourcen ... 738
  • 13 ... Mashups ... 739
  • 13.1 ... Was sind Mashups? ... 741
  • 13.2 ... Feeds im Einsatz ... 742
  • 13.2.1 ... Personalisierbare Startseiten ... 742
  • 13.2.2 ... Feeds mischen, filtern und aufbereiten ... 743
  • 13.2.3 ... Feed Bundler ... 743
  • 13.2.4 ... Feed-Filter ... 743
  • 13.2.5 ... Manuelle Implementierung Feed-basierter Mashups ... 744
  • 13.2.6 ... Mashup-Editoren ... 745
  • 13.2.7 ... Yahoo! Pipes ... 745
  • 13.2.8 ... Dapper ... 746
  • 13.2.9 ... Microsoft Popfly ... 747
  • 13.2.10 ... Google Mashup Editor ... 747
  • 13.2.11 ... openkapow ... 749
  • 13.2.12 ... Presto ... 749
  • 13.3 ... Widgets ... 750
  • 13.3.1 ... Was haben Widgets zu bieten? ... 750
  • 13.3.2 ... Wo finde ich Widgets? ... 751
  • 13.3.3 ... Wie programmiere ich Widgets? ... 752
  • 13.4 ... Zugriff auf APIs ... 753
  • 13.4.1 ... Was sind APIs? ... 754
  • 13.4.2 ... Wie verwende ich APIs? ... 755
  • 13.5 ... Zusammenfassung ... 756
  • 14 ... Podcasts, Vidcasts und Screencasts ... 759
  • 14.1 ... Was ist Podcasting? ... 760
  • 14.2 ... Möglichkeiten des Podcastings ... 761
  • 14.3 ... Podcasts produzieren ... 761
  • 14.3.1 ... Richtlinien für das Podcasting ... 762
  • 14.3.2 ... Plan und Entwurf ... 763
  • 14.3.3 ... Achtung, Aufnahme! ... 764
  • 14.3.4 ... Technische Ausrüstung ... 764
  • 14.3.5 ... Vorbereitung der Dateien ... 768
  • 14.3.6 ... Veröffentlichen ... 768
  • 14.4 ... Zusammenfassung ... 769
  • 15 ... Wikis ... 771
  • 15.1 ... Was ist ein Wiki? ... 772
  • 15.2 ... Wiki-Engines in der Übersicht ... 774
  • 15.2.1 ... MediaWiki – allgemeine Lösung ... 774
  • 15.2.2 ... TracWiki – Software-Management und ­Dokumentation ... 775
  • 15.2.3 ... TWiki – All-in-One-Lösung für große Unternehmen ... 775
  • 15.2.4 ... PmWiki – schnelle und einfache Lösung ... 776
  • 15.2.5 ... PhpWiki – kompaktes Werkzeug für kleine Gruppen ... 776
  • 15.2.6 ... Perspective – Volltextsuche in MS Office-Dateien ... 777
  • 15.2.7 ... Weitere Informationen ... 778
  • 15.3 ... Installation einer Wiki-Engine – MediaWiki ... 778
  • 15.4 ... Zusammenfassung ... 782
  • 16 ... Weblogs ... 785
  • 16.1 ... Was sind Weblogs? ... 786
  • 16.2 ... Weblog-Engines in der Übersicht ... 788
  • 16.2.1 ... ExpressionEngine – eine professionelle Lösung für anspruchsvolle Aufgaben ... 788
  • 16.2.2 ... Movable Type – ein einfaches, elegantes und ­kompaktes Werkzeug ... 790
  • 16.2.3 ... Textpattern – ein mächtiges CMS mit einfacher Markup-Sprache ... 791
  • 16.2.4 ... WordPress – ein intuitiver Alleskönner ... 793
  • 16.2.5 ... Serendipity – leistungsstark und einfach zu ­bedienen ... 794
  • 16.2.6 ... Weitere Lösungen ... 795
  • 16.3 ... Ein WordPress-Template entwerfen ... 796
  • 16.3.1 ... Vorüberlegungen und Vorbereitung ... 796
  • 16.3.2 ... Grundlagen ... 797
  • 16.3.3 ... Methoden und Attribute ... 798
  • 16.3.4 ... Installation von WordPress ... 800
  • 16.3.5 ... Analyse und Strukturierung des statischen ­Templates ... 802
  • 16.3.6 ... Hochladen der Dateien und Umsetzen des ­Header-Bereichs ... 802
  • 16.3.7 ... Umsetzung des Bereichs mit dem Inhalt ... 804
  • 16.3.8 ... Umsetzung der Sidebar-, Footer- und ­Comment-Bereiche ... 805
  • 16.3.9 ... Erweiterungen und manuelle Änderungen ... 808
  • 16.3.10 ... Validierung, Überprüfung, Zusammenstellung ... 810
  • 16.4 ... Weblogs: Strategie zum Erfolg ... 811
  • 16.4.1 ... Heuristiken ... 811
  • 16.4.2 ... Strategie ... 814
  • 16.5 ... Zusammenfassung ... 815
  • 17 ... Ausblick ... 817
  • 17.1 ... Das mobile Web wird zum Standard ... 819
  • 17.2 ... Das Web als mobiles Betriebssystem ... 820
  • 17.3 ... Das Web als Interactive Pool ... 820
  • 17.4 ... Einheitliche Identität ... 821
  • 17.5 ... Webentwicklung: Browser­unabhängigkeit und neue Werkzeuge ... 822
  • ... Index ... 823
Die Seite zum Buch "Praxisbuch Web 2.0", www.praxisbuch-web20.de
© 2007-2008 Vitaly Friedman. Impressum. XHTML | CSS