Flexible Boxes
Eine Einführung in moderne Websites
2nd Edition
Published on 28. January 2015
Book
Paperback/Softback
503 pages
978-3-8362-3499-3 (ISBN)
Description
Sie bauen Webseiten? Und Ihnen schwirrt der Kopf bei all den vielen Begriffen, Konzepten und Anforderungen? Dann sollten Sie einen Blick in das neue Buch von Peter Müller werfen. Er zeigt Ihnen von Grund auf, was Sie für die Erstellung von flexiblen Webseiten für die verschiedensten Endgeräte beachten müssen. Egal, ob es sich dabei um HTML5, CSS3, Adaptive oder Responsive Webdesign, Mobile First oder Grid-Frameworks handelt. Mit diesem Buch lichtet sich der Dschungel; Sie erfahren, was HTML5 für moderne Websites bietet, wie man mit CSS3 gestaltet und flexible Grids, Media Queries und flexible Bilder einsetzt. Eine Prise JavaScript zeigt, wie Sie z.B. mit Videos arbeiten und eine mobile Navigation umsetzen können. Inkl. Responsive-Frameworks wie YAML4 und Zurb Foundation.
Aus dem Inhalt:
HTML5 - Grundlagen und Entwicklung
Neue HTML5-Elemente
Formulare, Audio und Video
Responsive Grafiken
CSS3 - Neue Selektoren
Webfonts und Schrifteffekte
Schatten und Transparenzen
Media Queries
Mobile Navigation
Responsive Inhalte
Flexible Gridlayouts
Responsive Frameworks
Flexbox statt Float
Die Fachpresse zur Vorauflage:
c't: »Buchtipp!«
Webkrauts: »Angenehm zusammengefasst die Grundlagen zu HTML5, CSS3 und Responsive Webdesign. «
Jens Grochtdreis: »Peter Müller schafft es mal wieder, komplizierte Zusammenhänge einfach und verständlich zu erklären.«
Aus dem Inhalt:
HTML5 - Grundlagen und Entwicklung
Neue HTML5-Elemente
Formulare, Audio und Video
Responsive Grafiken
CSS3 - Neue Selektoren
Webfonts und Schrifteffekte
Schatten und Transparenzen
Media Queries
Mobile Navigation
Responsive Inhalte
Flexible Gridlayouts
Responsive Frameworks
Flexbox statt Float
Die Fachpresse zur Vorauflage:
c't: »Buchtipp!«
Webkrauts: »Angenehm zusammengefasst die Grundlagen zu HTML5, CSS3 und Responsive Webdesign. «
Jens Grochtdreis: »Peter Müller schafft es mal wieder, komplizierte Zusammenhänge einfach und verständlich zu erklären.«
Reviews / Votes
»Buchtipp! Die aktuell vorliegende zweite Auflage des Buches enthält viele kleinere Aktualisierungen und Änderungen sowie zwei große neue Themenbereiche: »Responsive Grafiken« (picture-, srcsset-, sizes-Tags und Co.) sowie »Layouten mit dem CSS Flexible Box Layout Module« sind neu hinzugekommen.«More details
Other editions
Additional editions
Book
01/2015
Rheinwerk
€34.90
Article exhausted; check different version
Previous edition
Book
08/2013
1st Edition
Rheinwerk
€24.90
Article exhausted; check for reprint
Person
Content
Vorwort zur zweiten Auflage ... 21
Einführung ... 23
1. Was sich im Webdesign geändert hat ... 24
1.1 ... Back to the roots: »A Dao of Web Design« ... 24
1.2 ... Von HTML-Tabellen zu 960px-Grid-Frameworks ... 26
1.3 ... Die Entstehung des responsiven Webdesigns ... 28
1.4 ... Das Web wird mobil -- bei Arbeit, Sport und Spiel ... 34
1.5 ... Moderne Websites erstellen ... 37
1.6 ... Fazit: Veränderung ist das einzig Beständige ... 42
2. Das Buch und die Beispielseiten ... 43
2.1 ... Teil I: HTML5 -- ausgezeichneter Inhalt ... 43
2.2 ... Teil II: CSS3 -- Inhalte gestalten ... 44
2.3 ... Teil III: Getting responsive ... 46
2.4 ... Teil IV: Grids, Frameworks und Flexbox ... 47
Teil I HTML5 -- ausgezeichnete Inhalte ... 49
3. Das HTML5-Universum im Überblick ... 50
3.1 ... Die Verwirrung rund um HTML5 ... 50
3.2 ... Eine kurze Geschichte von HTML5 ... 51
3.3 ... Das HTML5- Universum im Überblick ... 58
3.4 ... Gute Quellen rund um HTML5 ... 62
4. Semantische Strukturelemente in HTML5: <header>, <footer> und Co. ... 64
4.1 ... Der rote Faden: die Vorlage von »HTML5Bones.com« ... 64
4.2 ... Der Vorspann: <!DOCTYPE>, <html> und <head> ... 66
4.3 ... Über die semantischen Strukturelemente in HTML5 ... 71
4.4 ... Die semantischen Strukturelemente in »HTML5 Bones« ... 79
4.5 ... Die semantischen Strukturelemente im Alltag ... 90
4.6 ... Exkurs: Der Outline-Algorithmus von HTML5 ... 95
5. Kleinigkeiten und Formulare ... 102
5.1 ... Abbildungen beschriften: <figure> und <figcaption> ... 102
5.2 ... Nützliche Änderungen für ältere HTML-Elemente ... 105
5.3 ... Die verschiedenen Formen der Hervorhebung ... 109
5.4 ... <time>: Zeit für Menschen und Maschinen ... 113
5.5 ... Formulare in HTML5: neue Attribute ... 116
5.6 ... Formulare in HTML5: semantische Eingabefelder ... 117
6. Responsive Grafiken, Audio und Video ... 124
6.1 ... Grafiken optimieren und flexibel einbinden ... 124
6.2 ... HTML und responsive Grafiken ... 130
6.3 ... Grafiken nach Pixeldichte: <img> und »srcset x« ... 135
6.4 ... Grafiken nach Viewport-Breite: <img> und »srcset w« ... 139
6.5 ... Unterschiedliche Bildmotive und Dateiformate ... 147
6.6 ... HTML5 und Sound: <audio> ... 152
6.7 ... Als die Bilder laufen lernten: <video> ... 155
7. Workshop: Das HTML für die Beispielseiten ... 160
7.1 ... Die Beispielseiten im Überblick ... 160
7.2 ... Der Vorspann: das HTML im <head> ... 161
7.3 ... Die HTML-Struktur im <body> für die Beispielseiten ... 162
7.4 ... Der Inhaltsbereich für die Startseite ... 166
7.5 ... Der Inhaltsbereich für die Seite »News« ... 170
7.6 ... Der Inhaltsbereich für die Kontaktseite ... 173
Teil II CSS3 -- Inhalte gestalten ... 177
8. Tools: kleine Viewports, CSS und JavaScript ... 178
8.1 ... Webseiten in verschiedenen Viewports testen ... 178
8.2 ... CSS3 -- Module und Browser-Präfixe ... 182
8.3 ... Das CSS-Fundament: »normalize.css« ... 184
8.4 ... Ein zentrales Stylesheet erleichtert die Entwicklung ... 187
8.5 ... jQuery -- das Fundament für viele kleine Helferlein ... 190
8.6 ... Modernizr hilft beim Umgang mit alten Browsern ... 196
8.7 ... Workshop: Zentralisierung und Grundformatierung ... 200
9. Selektoren für alle Fälle ... 208
9.1 ... Familienselektoren: Kinder, Geschwister und Nachfahren ... 208
9.2 ... Attributselektoren haben eckige Klammern ... 213
9.3 ... Pseudoelemente haben einen (doppelten) Doppelpunkt ... 216
9.4 ... Pseudoklassen zum Selektieren von Kindern ... 219
9.5 ... Pseudoklassen für Linkziele und Formulare ... 228
10. Text gestalten mit CSS3 ... 230
10.1 ... Webfonts: die Schriftart gleich mitliefern ... 230
10.2 ... Relative Einheiten für die Schriftgröße ... 238
10.3 ... Abstände im Fließtext: »line-height« und »margin« ... 243
10.4 ... Schatten im Text: »text-shadow« ... 245
10.5 ... Icons als Schrift: skalierbare Symbole mit Iconfonts ... 248
10.6 ... Workshop: Textformatierung für die Beispielsite ... 255
11. Boxen gestalten mit CSS3 ... 260
11.1 ... Boxen wie im richtigen Leben: »box-sizing: border-box« ... 260
11.2 ... CSS3 statt Grafik: Schatten, runde Ecken und Farbverläufe ... 267
11.3 ... Transparente Boxen: »opacity« und Alphakanal ... 275
11.4 ... Bewegung mit CSS3: »transform« und »transition« ... 277
11.5 ... Workshop: Den Inhalt der Beispielseiten gestalten ... 285
Teil III Getting responsive ... 291
12. Media Queries -- die Seiten werden responsiv ... 292
12.1 ... CSS 2: Medientypen definieren das Ausgabemedium ... 292
12.2 ... CSS3: Media Queries = Medientypen plus Medieneigenschaften ... 296
12.3 ... Media Queries und Angaben zum Viewport ... 301
12.4 ... Media Queries: gängige Breiten für Breakpoints ... 303
12.5 ... Testen, testen, testen -- jenseits kleiner Viewports ... 305
13. Responsive Navigationen ... 309
13.1 ... Überblick: Entdecken Sie die Möglichkeiten ... 309
13.2 ... Workshop: Eine CSS-basierte Navigation für kleine Viewports ... 318
13.3 ... Workshop: Die Navigation wird responsiv ... 328
14. Responsive Layouts -- ein flexibles Grid ... 334
14.1 ... Gridlayouts -- Gestalten mit Rastern ... 334
14.2 ... Ein Grid für die Beispielseiten ... 338
14.3 ... Das Layout wird responsiv ... 340
14.4 ... Der Inhaltsbereich wird responsiv ... 345
14.5 ... Exkurs: Volle Breite -- ein »Full-Page-Layout« ... 352
14.6 ... »10, 9, 8, 7 ...« -- der Countdown im Internet Explorer ... 356
15. Inhalte für responsive Webseiten gestalten ... 364
15.1 ... Responsive Grafiken in der Praxis ... 364
15.2 ... »FlexSlider 2« -- ein responsiver Slider ... 375
15.3 ... Flexible Videos von YouTube, Vimeo & Co. ... 380
15.4 ... Lesbarkeit: die Optimierung der Zeilenlänge ... 386
15.5 ... »Akkordeon« -- Text ein- und ausblenden ... 391
15.6 ... Exkurs: Responsive Grafiken mit »Adaptive Images« ... 400
Tei IV Grids, Frameworks und Flexbox ... 405
16. Gridlayouts: von Pixel zu Prozenten ... 406
16.1 ... Was Frameworks sind und was sie für Sie tun können ... 406
16.2 ... Ein Grid mit System: 960.gs in Aktion ... 410
16.3 ... Die Zauberformel: von festen Pixelbreiten zu Prozent ... 417
17. »Desktop First«: Gridlayouts mit YAML 4 ... 422
17.1 ... »YAML 4« im Überblick ... 422
17.2 ... »Rapid Prototyping«: ein Gridlayout mit YAML 4 ... 426
17.3 ... YAML ist nicht nur für Prototypen -- eigene Layouts erstellen ... 440
17.4 ... »Thinkin' Tags« -- Prototypen im Browser entwickeln ... 441
18. »Mobile First«: Gridlayouts mit Foundation ... 443
18.1 ... »Zurb Foundation« im Überblick ... 443
18.2 ... »Rapid Prototyping«: ein Gridlayout mit Foundation ... 448
18.3 ... Foundation ist ideal für Prototypen ... 456
19. Ausblick: Flexbox -- jenseits von Floatlayouts ... 459
19.1 ... Bestandsaufnahme: CSS3 und seine Layoutmodule ... 459
19.2 ... Das »CSS Flexible Box Layout Module« (»Flexbox«) ... 461
19.3 ... Der erste Schritt: Flexbox definieren mit »display:flex« ... 463
19.4 ... Ausdehnung der Flex-Items bestimmen: »flex:1« ... 466
19.5 ... Das Box-Modell der Flexbox ... 471
19.6 ... Flexbox in Aktion: »Holy Grail« mit »Sticky Footer« ... 475
19.7 ... Ausrichtung steuern und Leerraum verteilen ... 483
19.8 ... Spickzettel: Flexbox -- Eigenschaften und Werte in der Übersicht ... 492
Index ... 495