Mit diesem Buch lernen Sie als Webdesigner die Vorteile von HTML5 und CSS3 kennen und gezielt einzusetzen, um einzigartige Webseiten zu gestalten, die sowohl funktional sind als auch optisch etwas zu bieten haben. Finden Sie heraus, welche Neuerungen HTML5 und CSS3 mit sich bringen und welche Designmöglichkeiten sie Ihnen bieten. Nutzen Sie HTML5, um Inhalte zu organisieren und strukturieren, und spielen Sie Video- und Audiodateien ab. Mit CSS3 verpassen Sie dem Layout dann den letzten Schliff: Animieren Sie Übergänge und Effekte, fügen Sie Schatten und Farbverläufe hinzu und nutzen Sie Responsive Webdesign, um Ihre Seiten auch auf Smartphones und Tablets optimal darzustellen. Zusätzlich hat der Autor zahlreiche Tipps zu praktischen Online-Tools für Sie, beispielsweise zum Erstellen von Grafiken oder Animationen, die Ihnen beim Webdesign sehr hilfreich sein können.
Table of Contents:
Inhaltsverzeichnis
Über den Autor 7
Einführung 19
Über dieses Buch 19
Törichte Annahmen über den Leser 19
Symbole in diesem Buch 20
Wie es weitergeht 20
Teil I
Seitenaufbau und Design mit HTML5 und CSS3 21
Kapitel 1
Struktur und Design mit HTML5 und CSS3 23
Zauberei mit HTML5 und CSS3 24
Nicht ganz neu . . . aber anders! 25
HTML5: Aufbau auf HTML-Techniken 28
HTML-Grundlagen verstehen 30
Fünf Dinge, die Sie über HTML wissen müssen 31
Die ersten Schritte bei der Verwendung einer grundlegenden HTML-Vorlage 32
Die HTML-Dokumentstruktur 34
Die grundlegende Element-Syntax 35
Mit dem
-Element arbeiten 36 Das
-Element und -Tags verwenden 36 Überschriften, Listen und Links 38
Klassenstile verwenden 40
CSS-Grundlagen 41
Ein CSS-Dokument erstellen 43
CSS-Stildefinitionen genauer betrachtet 44
Stildefinitionen kombinieren 46
Weiter mit HTML5 und CSS3 47
Kapitel 2
HTML5 einsetzen 49
Die Vorteile von HTML5 erkennen 49
Der Preis für den Einsatz von HTML5 51
Die vereinfachte doctype-Deklaration – Einführung 52
Die neuen standardisierten Strukturelemente von HTML5 verstehen 54
Neuer Prozess und Ablauf 55
Eine kurze Einführung in semantische Elemente 56
Die
-Tags sind tot – es leben die -Tags! 57 Eine neue Rolle für grundlegende Tags 58
Mit HTML5 etwas Eigenes schaffen 59
HTML5-Elemente für Skripting mit JavaScript 64
Das -Element 65
Das -Element verwenden 65
Kapitel 3
CSS3 für Design, Interaktivität und Animation 71
Mit CSS3-Design aus dem rechteckigen Käfig ausbrechen 73
Wie es bisher war 73
Ein neues Design-Paradigma 74
Mit CSS3 Bilder ersetzen 75
Der Ausbruch aus den Kästen 75
Hintergrundverläufe 76
CSS3 und Mobilgeräte – ein perfektes Paar 77
Animation mit CSS3 79
CSS mit JavaScript kombinieren 80
Design mit Web Fonts 81
Web Fonts leicht gemacht 82
Link auf einen Web Font 82
Kapitel 4
Kompatibilitätsprobleme und Lösungen 87
HTML5 und CSS3 in alten Browsern verwenden 88
Was Sie schon immer über IE8 (und älter) wissen wollten,
aber bisher nicht zu fragen wagten 89
Hacking-Lösungen 91
Sites in IE8 (und älter) testen 95
Graceful Degradation (Allmähliche Funktionsminderung) für die
Abwärtskompatibilität 95
Browser-Kriege wegen HTML5 und CSS3 98
Anbieterspezifische CSS-Präfixe verwenden 98
Konkurrierende Video-Formate 99
Video für IE8 erstellen 100
Mobile Kompatibilität 102
Ein Wort zu Flash 102
Teil II
Seiten mit HTML5 erstellen 103
Kapitel 5
Semantische Tags in HTML5 105
Die verschiedenen Arten semantischer Elemente verstehen 105
Semantische Tags in HTML5 für die Seitenstrukturierung 106
Nicht-strukturierende semantische Tags 108
Weitere semantische Tags von HTML5 109
Mit fünf Elementen Inhalt strukturieren 112
Wissen, wann was zu verwenden ist 112
Vorlage für eine grundlegende HTML5-Seite 115
Stile für strukturierende Tags 116
HTML5 für spezifischen Inhalt 118
Verwendung der - und -Elemente 119
Definition von - und -Tags 120
Markieren mit dem -Tag 121
und verwenden 122
Adressen definieren 123
Styling für Inhalts-Tags 124
Vorteile der semantischen Tags von HTML5 124
Kapitel 6
HTML5-Formulare 127
HTML5-Formulare – Eine unterschätzte Ressource 128
Überblick über die neuen Parameter für die HTML5-Formularfelder 129
HTML5 im Vergleich zu JavaScript oder serverseitigen Skripts 131
Kompatibilitätsprobleme 133
HTML5-Formulare erstellen 133
Formularaktionen 134
Definition von Eingabe- und Beschriftungs-Tags 137
Platzhaltertext definieren 137
HTML5-Eingabetypen implementieren 138
Einen Eingabetyp definieren 139
Eingabetypen zur Unterstützung der Barrierefreiheit 139
Eine Datenliste definieren 141
Formularausgabeelemente erstellen 143
HTML-Formularvalidierung 143
Pflichteingaben 143
E-Mail-Adressen validieren 144
Zahlen validieren 144
Ein letztes Wort zu HTML5-Formularen 145
Kapitel 7
Natives Video und Audio 147
Natives Video und Audio – ein Überblick 148
Natives Video und Audio – genauer betrachtet 149
Proprietäre Plug-ins identifizieren 149
Den Aufstieg von nativen Medien verstehen 150
Design für eine komplexe Video-Landschaft 152
Komprimierte Video-Formate 152
Video aus Ihrer Kamera: Nicht Primetime-fähig 153
Konkurrierende native Video-Formate 153
Unterschiedliche Player in unterschiedlichen Browsern 154
Umwandlung von Video in native Formate 159
Ihre Optionen für das Hosting nativer Videos 161
Natives Video optimieren 163
Grundlegende Syntax für HTML5-Video 163
Bereitstellung von Optionen für andere als HTML5-Browser 165
Ein Poster hinzufügen 166
Ein Video vorab laden 166
Natives Audio einbetten 167
MP3-Audio in OGG umwandeln 168
Ein HTML5-Audio-Element einbetten 168
Alternative Audio-Optionen 170
Kapitel 8
Mobile Geräte: Responsives Design und jQuery Mobile 171
Die Natur und die Rolle von responsivem Design verstehen 171
Ein Tag im Leben eines Multigeräte-Benutzers 172
Drei Ansätze für responsives Design 177
Die Evolution und die Rolle des Fluid-Designs 179
Responsives Design mit Medien-Abfragen implementieren 180
Zwei Techniken für Medien-Abfragen 180
Unterschiedliche Ansätze für unterschiedliche Benutzer (-Displays) 182
Definition von Medien-Abfragen mit mehreren CSS-Dateien 182
Geräte zwingen, ihre Breite zu melden 183
CSS-Dateien für unterschiedlich große Displays erstellen 183
Responsives Design in einer einzigen CSS-Datei bereitstellen 187
Web-Apps mit jQuery Mobile erstellen 190
Wie jQuery Mobile funktioniert 191
Eine grundlegende jQuery Mobile-Vorlage erstellen 191
jQuery Mobile und data–role-Elemente 194
jQuery Mobile-Inhalt anpassen 195
Themen zuweisen 196
Themen mit ThemeRoller anpassen 198
Teil III
CSS3-Effekte und Transformationen 203
Kapitel 9
Styling mit CSS3-Eigenschaften 205
Die Evolution von CSS 206
Phase 1: Styling mit HTML 206
Phase 2: Styling mit CSS 207
Phase 3: Rechteckige Bereiche und Bilddateien gehören der
Vergangenheit an 208
Übergänge in CSS3 208
Eigenschaften von CSS3-Übergängen 210
transition–timing–function verwenden 211
Kompatibilitätsprobleme bei Übergängen 213
Verzögerungen in CSS3 realisieren 213
Syntaxbeispiele für CSS3-Übergänge 214
Geht noch mehr? 216
Farben mit CSS3 neu definieren 217
Reibungsloserer Arbeitsablauf mit RGB und HSL 218
A steht für Alpha 220
Alpha oder Opazität? 220
Unterstützung von RGB- und HSL-Farbe 222
Kapitel 10
Anwendung von CSS3-Effekten 223
CSS3-Effekte optimal nutzen 224
Mit Rahmenradien aus dem Box-Modell ausbrechen! 224
CSS3-Rahmenbilder anwenden 227
Schlagschatten in CSS3 anwenden 228
Effekte und Präfixe für ihre Kompatibilität 229
Effekte animieren 231
CSS3-Effekte definieren 232
Einen Rahmenradius definieren und anwenden 232
Rahmenbilder definieren 235
Feldschatten definieren 238
Textschatten erstellen 239
Textumrisse erstellen 240
Effekte animieren 241
Kapitel 11
CSS3-Transformationen anwenden und animieren 245
Wissen, wie Transformationen angewendet werden 246
Vorteile des Designs mit Transformationen 248
Die Transformationssyntax verstehen 250
Transformationen kombinieren 251
Überlappende Ebenen verwalten 253
Kompatibilität von Transformationen 254
Transformationen mit Übergängen animieren 254
Übergänge für Transformationen 255
Eine animierte Bildgalerie erstellen 256
Animation mit @keyframes 260
Verstehen, wie @keyframes funktionieren 260
Bewegung für @keyframes 263
@keyframes-Eigenschaften 265
Kompatibilität von @keyframes und Präfixe 266
Mit @keyframes ein bewegliches Banner-Element definieren 266
Kapitel 12
Verläufe mit CSS3 erstellen 269
Die Entwicklung der CSS3-Verläufe 270
Gedreht und strahlenförmig 271
Verläufe und mobile Geräte: Ein perfektes Paar 273
Lösungen für Kompatibilitätsprobleme 274
Syntax für CSS3-Verläufe in den verschiedenen Browsern 275
Verläufe mit kostenlosen Online-Generatoren definieren 277
Ultimate CSS Gradient Generator 279
Verwendung voreingestellter Verläufe und die Vorschaufunktion 279
Definition von Farbtabulatoren in Verläufen 281
Hintergrundverläufe speichern und anwenden 281
Teil IV
Der Top-Ten-Teil 285
Kapitel 13
Die zehn besten HTML5-DesignRessourcen 287
Notepad++ 287
TextWrangler 289
Komodo Edit 289
Adobe Dreamweaver 291
FileZilla 292
W3Schools 293
W3C Markup Validation Service 293
AMP Express 294
Hipster Ipsum – Blindtextgenerator 295
jQuery Widget Factory 296
Kapitel 14
Die zehn besten CSS3-Design-Tools 297
Ultimate CSS Gradient Generator 297
Adobe Kuler 298
Color Scheme Designer 299
CSS3 Generator 300
CSS3 Box Shadow Generator 301
CSS 3.0 Maker 301
Animate.css 302
Web Designer Wall 303
CSS Menu Maker 304
Notepad RT 305
Kapitel 15
Die zehn besten FormulardatenRessourcen 307
MailChimp 307
FreeFind 308
Google Docs 309
Benutzerdefinierte Google-Suchmaschine 310
TheSiteWizard 311
FormTools 312
jQuery Menu Widget 312
Freedback 313
EmailMeForm 314
Zoho Creator 315
Stichwortverzeichnis 317
About the Author :
David Karlins ist professioneller Webdesigner und erfahrener Fachbuchautor, der auch "Building Websites All-in-One For Dummies" geschrieben hat.
