Flexible Boxes - Eine Einführung in moderne Websites

Sie bauen Webseiten? Und Ihnen schwirrt der Kopf bei all den vielen Begriffen, Konzepten und Anforderungen? Dann sollten Sie einen Blick in das 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, 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

Galileo Press heißt jetzt Rheinwerk Verlag.

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."

Sommario

'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: , und Co. ... 64

4.1 ... Der rote Faden: die Vorlage von "HTML5Bones.com" ... 64

4.2 ... Der Vorspann: , und ... 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: und ... 102

5.2 ... Nützliche Änderungen für ältere HTML-Elemente ... 105

5.3 ... Die verschiedenen Formen der Hervorhebung ... 109

5.4 ... : 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: und "srcset x" ... 135

6.4 ... Grafiken nach Viewport-Breite: und "srcset w" ... 139

6.5 ... Unterschiedliche Bildmotive und Dateiformate ... 147

6.6 ... HTML5 und Sound: ... 152

6.7 ... Als die Bilder laufen lernten: ... 155

7. Workshop: Das HTML für die Beispielseiten ... 160

7.1 ... Die Beispielseiten im Überblick ... 160

7.2 ... Der Vorspann: das HTML im ... 161

7.3 ... Die HTML-Struktur im 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 Be

Info autore

Peter Müller arbeitet seit vielen Jahren als IT-Dozent und und ist als Autor des CSS-Bestsellers »Little Boxes« bekannt, der es versteht, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen.

Riassunto

Sie bauen Webseiten? Und Ihnen schwirrt der Kopf bei all den vielen Begriffen, Konzepten und Anforderungen? Dann sollten Sie einen Blick in das 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, 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

Galileo Press heißt jetzt Rheinwerk Verlag.

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.«

Testo aggiuntivo

Ein Buch, welches tatsächlich als ausgezeichnet zu bewerten ist. Peter Müller gelingt ist wie sonst kaum jemandem, Licht in das Dunkel der Webseiten-Gestaltung zu bringen.

Relazione

"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." Designer in Action 201505

Dettagli sul prodotto

• Autori: Peter Müller
• Editore: Rheinwerk Verlag
• Lingue: Tedesco
• Formato: Tascabile
• Pubblicazione: 29.01.2015
• EAN: 9783836234993
• ISBN: 978-3-8362-3499-3
• Pagine: 503
• Dimensioni: 173 mm x 230 mm x 28 mm
• Peso: 920 g
• Illustrazioni: m. Abb.
• Serie: Galileo Computing; Rheinwerk Computing; Rheinwerk Computing
• Categorie: Scienze naturali, medicina, informatica, tecnica > Informatica, EDP > Internet; Informatik, css3, html5, jQuery, Webentwicklung, Responsive Webdesign, Flexbox, Grids, Templates, Adaptive Webdesign, Mobiles Webdesign, Weblayouts