Praxisbuch Web 2.0 3836213427, 9783836213424 [PDF]

Table of contents :
3836213427......Page 1
Praxisbuch Web 2.0. Moderne Webseiten programmieren und gestalten, 2.Auflage......Page 2
Contents......Page 5
Geleitwort des Fachgutachters......Page 20
Vorwort......Page 22
Einleitung......Page 26
Teil I Web 2.0-Trends......Page 32
1.1 Web 2.0-wie neu ist das neue Web?......Page 34
1.1.2 Das neue Web: alte Technologien im Einsatz......Page 35
1.1.3 Ein neuer Begriff für die Veränderungen im Web......Page 37
1.1.4 Was ist Web 2.0-und was ist es nicht?......Page 38
1.1.5 Hat der Begriff »Web 2.0« noch Substanz?......Page 39
1.2 Neue Möglichkeiten und neue Konzepte......Page 40
1.2.2 Desktop-RIAs......Page 41
1.2.3 Weisheit der Massen und Architektur der Partizipation......Page 44
1.2.4 Open-Source-Bewegung und offene Technologien......Page 47
1.2.5 The Perpetual Beta......Page 49
1.2.6 Einfachheit und Minimalismus......Page 50
1.2.7 Webkultur 2.0......Page 51
1.2.8 The LongTail......Page 62
1.2.9 Attention Economy......Page 63
1.2.10 Crowdsourcing......Page 64
1.2.11 Gualitätsverlust und Datentransparenz......Page 65
1.2.12 Bedarf nach Weiterentwicklung......Page 67
1.2.13 Zusammenfassung......Page 68
1.3.1 Soziale Netzwerke im Trend......Page 69
1.3.2 Die Blogosphäre weitet sich aus......Page 71
1.3.4 Nutzer bestimmen selbst......Page 73
1.4 Web 2,0 in Deutschland......Page 75
1.4.1 Blogs......Page 77
1.4.2 Soziale Netzwerke......Page 78
1.4.4 News-Community......Page 79
1.4.5 Multimedia-Portale......Page 80
1.5 Ressourcen......Page 81
1.5.3 Literatur......Page 82
2 Designkultur Web 2.0......Page 84
2.1.1 Zwei-und Dreispalter......Page 85
2.1.3 Kreativität und Kompaktheit: Trend zu Mehrspaltigkeit......Page 90
2.1.4 Rasterbasierte Layouts......Page 93
2.1.5 Out-of-the-box-Layouts......Page 97
2.2 Grafische Ansätze......Page 100
2.2.1 Farbschemata......Page 101
2.2.2 Trends und grafische Ansätze......Page 103
2.2.3 Handschriftliche Elemente und Schreibschriften......Page 104
2.2.4 Geklebt, getackert, geheftet und gepinnt......Page 106
2.2.5 Graffiti, Flecken und Grunge......Page 107
2.2.6 Organische Texturen und fotografische Hintergrundbilder......Page 109
2.2.S Illustrationen und Ornamente......Page 110
2.2.9 Retro und Vintage......Page 115
2.2.10 kons......Page 116
2.3 Webtypografie......Page 117
2.3.1 Typografie laut und bunt......Page 118
2.3.2 Überproportional große Überschriften......Page 119
2.3.3 Flattersatz oder Blocksatz?......Page 120
2.3.4 Serifen oder keine Serifen?......Page 121
2.4.1 Registerkarten......Page 122
2.4.2 Sprechende Blocknavigatlon......Page 124
2.4.3 RSS-lcons und Social leons......Page 125
2.4.4 Status-Elemente und Content Icons......Page 126
2.4.5 Such-und Eingabefelder......Page 128
2.4.6 Tag Clouds......Page 129
2.4.7 Zebra-Tab eilen......Page 130
2.4.8 Media-Blöcke: Videos im Einsatz......Page 131
2.4.9 Fotogalerien und Karussels......Page 132
2.5 Neue Konzepte......Page 135
2.5.1 Plakatives und sauberes Design......Page 136
2.5.2 Effektives Design......Page 137
2.5.3 Wenige Farben wirkungsvoll eingesetzt......Page 139
2.5.4 Weißraum (Whitespace)......Page 140
2.5.5 Einfachheit und Minimalismus......Page 142
2.6 Zusammenfassung......Page 143
Teil II Web 2.0-Seitengestaltung......Page 146
3.1 Was ist Webtypografie?......Page 148
3.1.2 Besonderheiten der Webtypografie......Page 150
3.1.3 Warum ist Webtypografie wichtig?......Page 151
3.1.4 Webtypografie in der Praxis......Page 153
3.2.1 Typografische Begriffe im Überblick......Page 154
3.2.2 Hervorhebung von Texten......Page 155
3.2.3 Absätze und Gestaltung......Page 158
3.2.4 Schriftgröße......Page 166
3.2.5 Schriftart......Page 186
3.2.6 Link-Gestaltung......Page 189
3.2.8 Details machen die Typografie aus......Page 192
3.2.10 Webtypografie und Barrierefreiheit......Page 194
3.3 Neue Techniken der Webtypografie......Page 196
3.3.2 Moderne Ansätze......Page 197
3.3.3 Dynamic Image Replacement......Page 198
3.3.4 @font-face-Regel......Page 210
3.4 Schriftart auswählen......Page 211
3.4.4 Tahoma......Page 212
3.4.7 Verdana......Page 213
3.4.8 Überschriften und Fließtexte......Page 214
3.5.1 Fließtext......Page 215
3.5.2 Überschrift......Page 220
3.6 Unkonventionelle Schriftarten......Page 223
3.6.2 Welchen Zweck soll die Schrift erfüllen?......Page 225
3.6.6 Soll die Schrift dominieren oder soll sie subtil sein?......Page 226
3.6.9 Font-Verwaltung......Page 227
3.7 Ein Blick über den Tellerrand......Page 228
3.7.2 Sans-Serifen: Calibri, Candara, Corbel Segoe Ul......Page 229
3.8 Zusammenfassung......Page 230
4.8.12 Ergebnis......Page 232
3.9.5 Werkzeuge und Dienste......Page 233
3.9.6 Literatur......Page 234
4 Farbgestaltung Web 2.0......Page 236
4.1 Grundlagen der Farben-und Harmonielehre......Page 238
4.1.1 Farbmischung und Farbmodelie......Page 239
4.1.2 Farbwirkung......Page 240
4.1.4 Farbkreis......Page 241
4.1.5 Farbkombinationen......Page 242
4.1.6 Kontraste......Page 244
4.1.7 Kontext der Farben......Page 248
4.2 Farbtheorie in der Praxis......Page 249
4.3 RGB und CMYK in der Praxis......Page 251
4.4 Farbpalette im Web 2.0......Page 252
4.4.1 Neutrale, passive Farben......Page 254
4.4.2 Bunte, aktive Farben......Page 255
4.4.3 Dunkle, schmutzige Farben......Page 258
4.4.4 Weiß auf Schwarz oder Schwarz auf Weiß......Page 259
4.5.2 Farben mischen......Page 261
4.5.3 Farbpaletten wählen......Page 262
4.5.4 Farbpaletten erzeugen......Page 263
4.5.7 Zugänglichkeit prüfen......Page 264
4.6 Ton der Komposition......Page 265
4.7 Bestimmung von Harmonien......Page 268
4.8.1 Header......Page 269
4.8.2 Seitennavigation......Page 270
4.8.3 Banner......Page 271
4.8.4 Harmonische Farbkombinationen......Page 273
4.8.6 Footer......Page 275
4.8.8 Auszeichnung von Texten......Page 276
4.8.9 Auszeichnung von Verweisen......Page 277
4.8.10 Navigationsmenüs......Page 280
4.8.11 Logo......Page 282
4.9 Dunkles Design - Praxisbeispiel......Page 283
4.9.1 Rahmen, Umgebung, Hintergrund......Page 284
4.9.2 Sidebar......Page 285
4.9.4 Auszeichnung von Texten......Page 286
4.9.5 Auszeichnung von Verweisen......Page 288
4.9.6 Navigationsmenü......Page 290
4.9.8 Ergebnis......Page 291
4.10 Zusammenfassung......Page 292
4.11.1 Online-Artikel......Page 294
4.11.2 Literatur......Page 295
5.1 Navigationselemente entwerfen......Page 296
5.1.1 Aufgaben der Seitennavigation......Page 297
5.1.2 Platzierung von Navigationsleisten......Page 298
5.1.3 Navigationsleisten gestalten......Page 303
5.1.4 Richtlinien für die Gestaltung von Navigationselennenten......Page 304
5.2.1 Die (X)HTML-Grundstruktur......Page 306
5.2.2 Simple Navigation mit CSS......Page 308
5.2.3 Navigation zweiter Ebene mit CSS......Page 314
5.3.2 Sliding Doors......Page 320
5.3.3 CSS Sprites......Page 332
5.4.1 Registerkarten......Page 338
5.4.2 CSS Sprites mit JavaScript......Page 341
5.4.3 Klappmenüs und Flyouts......Page 342
5.4.4 Suckerfish Dropdowns......Page 344
5.4.5 Hybrid CSS Dropdowns......Page 347
5.4.6 Toggle-Menüs......Page 348
5.4.7 Karussells......Page 349
5.4.8 Alle CSS-basierten Techniken im Überblick......Page 351
5.5.1 Abgerundete Registerkarten für die Textnavigation......Page 354
5.5.2 Tiefeneffekt für Navigationsleisten......Page 357
5.5.3 Registerkarten......Page 360
5.5.4 Bildbasiertes Navigationsmenü......Page 368
5.6 Tag Clouds......Page 370
5.7 Favtcons......Page 374
5.7.1 Favicons erstellen......Page 375
5.8.1 Online-Artikel......Page 377
5.8.2 Tools......Page 378
5.8.4 Literatur......Page 379
6.1 Tabellen und Listen im Web 2.0......Page 380
6.2.1 XHTML-Markup für Listen......Page 381
6.2.2 Gestaltung von Listen mithiffe von CSS......Page 383
6.2.3 Listen im Web 2.0-Look......Page 385
6.3 Listen im Einsatz......Page 394
6.4.1 XHTML-Markup für Tabellen......Page 395
6.4.2 table, trr th, td, caption-Tabellen, Zeilen, Zellen, Überschriften......Page 396
6.4.4 Zeilengruppen und Spaltengruppen......Page 398
6.4.5 Colspan und rowspan - Zeilen und Spalten verbinden und vereinigen......Page 401
6.4.6 Gestaltung von Tabellen mit CSS......Page 403
6.4.7 Tabellen im Web 2.0-Look......Page 404
6.4.8 Tabellen im Einsatz......Page 411
6.5 Ressourcen......Page 414
7 Formulare......Page 416
7.1 XHTML-Markup für Formulare - Grundlagen......Page 417
7.1.1 optgroup-Optionen gruppieren......Page 419
7.1.2 label - Steuerelemente beschriften......Page 420
7.1.3 fieldset, legend-verwandte Formular-elemente gruppieren und beschriften......Page 421
7.2.1 Positionierung und Gestaltung von Eingabefeldern......Page 423
7.2.2 multiple-Eigenschaft bei Auswahlmenüs......Page 430
7.2.3 Die Größe der Felder manuell einstellen......Page 449
7.2.4 Formularnavigation......Page 450
7.2.5 Wie geht man mit Spam um?......Page 451
7.3 Formulare und Usability......Page 452
7.3.1 Beschriftungen von Eingabefeldern......Page 462
7.3.2 Verwenden visueller Elemente......Page 463
7.3.3 Primäre und sekundäre Akttonen......Page 465
7.4 Ressourcen......Page 466
8 Barrierefreiheit und Usability......Page 468
8.1 Prinzipien der Barrierefreiheit......Page 469
8.1.1 Vorteile der barrierefreien und standardkonformen Seltengestaltung......Page 470
8.2.1 Grundlegende Richtlinien......Page 475
8.2.2 Zugänglichkeit in der Praxis......Page 476
8.3.1 Was ist Benutzerfreundlichkeit?......Page 492
8.3.2 Ziel und Zweck der Usability......Page 493
8.4 Verhaltensmuster der Benutzer......Page 494
8.5 Usability-Heuristiken......Page 501
8.6 »Goldene« Usability-Richtlinien......Page 505
8.7 Barrierefreiheit und Benutzerfreiindlichkeit testen......Page 511
8.8.1 Online-Artikel......Page 516
8.8.3 Usability......Page 517
8.8.4 Literatur......Page 518
9 Web 2.0-Layouts mft CSS umsetzen......Page 520
9.1.1 Block-Level-Elemente......Page 521
9.1.2 Inline-Level-Elemente......Page 522
9.1.3 Block-Level- und Inline-Level-Elemente in CSS......Page 524
9.2 Das CSS-Box-Modell......Page 526
9.2.2 margin und padding......Page 527
9.2.3 border......Page 528
9.2.4 Vertikale Abstände......Page 530
9.2.5 Das Box-Modell-Problem......Page 531
9.3.1 Grundlegende Eigenschaften......Page 532
9.3.2 Positionierung von float-Boxen......Page 536
9.3.3 Das Attribut »clear«......Page 541
9.3.4 Float-basierte Layouts......Page 543
9.3.5 Spalten mit gleicher Höhe......Page 554
9.4 Relative und absolute Positionierung......Page 559
9.4.1 Containing Blocks......Page 560
9.4.3 Relative Positionierung......Page 561
9.4.4 Absolute Positionierung......Page 564
9.4.6 z-index......Page 567
9.4.7 Positions-basiertes Layout......Page 569
9.4.8 Floats vs Positionierung......Page 579
9.5.1 Layouttypen im Überblick: Wo liegt der Unterschied zwischen den Ansätzen?......Page 582
9.5.2 Fixed Layout......Page 583
9.5.3 Liquid/Fluid Layout......Page 587
9.5.4 Elastic Layout......Page 589
9.5.5 Hybrid Layouts......Page 591
9.5.6 Weitere Techniken-Chamäleons......Page 595
9.5.7 Feste Layouts mit variabler Breite......Page 596
9.5.8 Text-Zooming-Methode......Page 597
9.5.10 Zusammenfassung......Page 598
9.6.1 Zielsetzung und Entwurf......Page 599
9.6.3 Grundgerüst entwerfen......Page 601
9.6.4 Breite festlegen: #wrapper, #header, #content, #footer......Page 603
9.6.5 Gestaltung vor #content und #sidebar......Page 605
9.6.6 Gestaltung des Headers......Page 607
9.6.7 Gestaltung der Navigationsleiste und der Suchbox......Page 610
9.6.8 Gestaltung des Footers......Page 611
9.6.9 Dekoration......Page 612
9.7 CSS-Spezifität (CSS Specificity)......Page 614
9.7.1 Was ist CSS-Spezifität?......Page 615
9.7.2 Berechnung der Spezifität......Page 616
9.7.3 Fazit......Page 618
9.8 CSS-Frameworks......Page 619
9.8.1 Wie entwickle ich ein Framework?......Page 620
9.8.4 Blueprint......Page 621
9.8.6 YAML......Page 623
9.8.7 YUI Grids CSS......Page 624
9.9 CSS Doc und CSS-Styleguides......Page 625
9.10 CSS-Wireframes......Page 629
9.11 Exkurs: Parallax Scrolling......Page 630
9.12 Ressourcen......Page 634
10 Browserkompatibilität......Page 636
10.1.2 Umsetzung mit CSS und XHTML......Page 637
10.1.3 Welche Hacks sollte man verwenden?......Page 639
10.1.4 IE Conditional Comments......Page 640
10.1.5 Der Internet Explorer......Page 642
10.2 Browserweichen für den Internet Explorer......Page 643
10.2.1 Sichere CSS-Hacksfür den Internet Explorer......Page 644
10.2.2 Transparenz von PNG-Bildern......Page 645
10.2.5 Der lE/Win-Guillotine-Bug......Page 646
10.2.6 Feste Positionierung von Elementen......Page 647
10.2.7 DerThree-Pixel-Text-Jog-Bug......Page 648
10.2.8 Der IE 6-Peekaboo-Bug......Page 649
10.2.9 Der Adjacent-Float-Clear-Gap-Bug......Page 650
10.2.10 Der Line-Height-and-Replaced-Element-Hack......Page 651
10.2.12 Der Expanding-ßox-Bug......Page 652
10.2.13 CSS-Hover-8ehavior......Page 653
10.2.16 Weitere Mängel des Internet Explorers......Page 654
10.2.17 Häufige Lösungsansätze......Page 655
10.3.1 Neue Selektoren und Deklarationen......Page 658
10.4 Kompatibilitätstabellen......Page 662
10.5.1 Werkzeuge, Dienste......Page 663
10.5.2 Tipps......Page 664
Teil III Web 2.0-Programmierung......Page 666
11 Ajax......Page 668
11.1.1 Google Mail (GMail): clever, robust und elegant......Page 669
11.1.3 Mite: Zeiterfassungstool für Web-Worker......Page 671
11.1.4 Typische Merkmale von Ajax-Applikationen......Page 672
11.2 Klassisches Modell und Ajax-Modell......Page 673
11.3 Architektur von Ajax......Page 676
11.3.2 XMLHttpRequest (XHR)......Page 677
11.3.3 Methoden des XMLHttpRequest-Objekts......Page 678
11.3.5 Praxisbeispiel......Page 679
11.4 Unobtrusive JavaScript......Page 693
11.4.1 Keine Annahmen machen......Page 694
11.4.2 Sauberes Markup erzeugen......Page 695
11.4.4 Daten über die Umgebung nutzen......Page 697
11.5 Unobtrusive JavaScript in der Praxis......Page 698
11.5.3 S-Funktion und S(document).ready()......Page 699
11.5.4 Selektoren......Page 700
11.5.5 Methoden aufrufe......Page 704
11.5.6 Events und Event Handler......Page 706
11.5.8 S.ajax ( options )......Page 707
11.5.10 .get( url, [data], [callback], [type])......Page 708
11.5.12 Ajax-basierter Katalog mit jQuery......Page 709
11.6 Ajax-Bibliotheken und Frameworks......Page 720
11.7 Nachteile von Ajax......Page 724
11.8 Ressourcen......Page 725
12 Mikroformate......Page 728
12.1 Was sind Mikroformate?......Page 730
12.2 Mikroformate im Überblick......Page 731
12.3 Mikroformate im Einsatz......Page 732
12.4 Visitenkarte als hCard......Page 734
12.5 Mikroformate miteinander kombinieren......Page 737
12.6 Zusammenfassung......Page 738
12.7 Ressourcen......Page 739
13 Mashups......Page 740
13.1 Was sind Mashups?......Page 742
13.2.1 Personalisierbare Startseiten......Page 743
13.2.4 Feed-Filter......Page 744
13.2.5 Manuelle Implementierung Feed-basierter Mashups......Page 745
13.2.7 Yahoo! Pipes......Page 746
13.2.8 Dapper......Page 747
13.2.10 Google Mashup Editor......Page 748
13.2.12 Presto......Page 750
13.3.1 Was haben Widgets zu bieten?......Page 751
13.3.2 Wo finde ich Widgets?......Page 752
13.3.3 Wie programmiere ich Widgets?......Page 753
13.4 Zugriff auf APIs......Page 754
13.4.1 Was sind APis?......Page 755
13.4.2 Wie verwende ich APIs?......Page 756
13.5 Zusammenfassung......Page 757
Teil IV Web2.0-Publishing......Page 758
14 Podcasts, Vidcasts und Screencasts......Page 760
14.1 Was ist Podcasting?......Page 761
14.3 Podcasts produzieren......Page 762
14.3.1 Richtlinien für das Podcasting......Page 763
14.3.2 Plan und Entwurf......Page 764
14.3.4 Technische Ausrüstung......Page 765
14.3.6 Veröffentlichen......Page 769
14.4 Zusammenfassung......Page 770
15 Wikis......Page 772
15.1 Was ist ein Wiki?......Page 773
15.2.1 MediaWiki -allgemeine Lösung......Page 775
15.2.3 TWiki - All-in-One-Lösung für große Unternehmen......Page 776
15.2.5 PhpWiki - kompaktes Werkzeug für kleine Gruppen......Page 777
1 5.2.6 Perspective - Volltextsuche in MS Office-Dateien......Page 778
15.3 Installation einer Wiki-Engine-MediaWiki......Page 779
15.4 Zusammenfassung......Page 783
16 Weblogs......Page 786
16.1 Was sind Weblogs?......Page 787
16.2.1 ExpressionEngine - eine professionelle Lösung für anspruchsvolle Aufgaben......Page 789
16.2.2 Movable Type - ein einfaches, elegantes und kompaktes Werkzeug......Page 791
16.2.3 Textpattern - ein mächtiges CMS mit einfacher Markup-Sprache......Page 792
16.2.4 WordPress - ein intuitiver Alleskönner......Page 794
16.2.5 Serendipity - leistungsstark und einfach zu bedienen......Page 795
16.2.6 Weitere Lösungen......Page 796
16.3.1 Vorüberlegungen und Vorbereitung......Page 797
16.3.2 Grundlagen......Page 798
16.3.3 Methoden und Attribute......Page 799
16.3.4 Installation von WordPress......Page 801
16.3.6 Hochfaden der Dateien und Umsetzen des Header-Bereichs......Page 803
16.3.7 Umsetzung des Bereichs mit dem Inhalt......Page 805
16.3.8 Umsetzung der Sidebar-, Footer-und Comment-ßereiche......Page 806
16.3.9 Erweiterungen und manuelle Änderungen......Page 809
16.3.10 Validierung, Überprüfung, Zusammenstellung......Page 811
16.4.1 Heuristiken......Page 812
16.4.2 Strategie......Page 815
16.5 Zusammenfassung......Page 816
17 Ausblick......Page 818
17.1 Das mobile Web wird zum Standard......Page 820
17.3 Das Web als Interactive Pool......Page 821
17.4 Einheitliche Identität......Page 822
17.5 Webentwicklung: ßrowserunabhängigkeit und neue Werkzeuge......Page 823
Index......Page 824