Müller, P: Flexible Boxes
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...
Leider schon ausverkauft
Buch
- Lastschrift, Kreditkarte, Paypal, Rechnung
- Kostenlose Rücksendung
Produktdetails
Produktinformationen zu „Müller, P: Flexible Boxes “
Klappentext zu „Müller, P: Flexible Boxes “
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."
Inhaltsverzeichnis zu „Müller, P: Flexible Boxes “
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 ... 47Teil 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,
... mehr
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 ... 173Teil 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 ... 22810. 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 ... 25511. 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 ... 285Teil III Getting responsive ... 29112. 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 ... 30513. 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 ... 32814. 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 ... 35615. 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« ... 400Tei IV Grids, Frameworks und Flexbox ... 40516. 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 ... 41717. »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 ... 44118. »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 ... 45619. 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
... weniger
Autoren-Porträt von Peter Müller
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.
Bibliographische Angaben
- Autor: Peter Müller
- 2015, 2. Auflage, 503 Seiten, mit Abbildungen, Maße: 17,4 x 23,1 cm, Kartoniert (TB), Deutsch
- Verlag: Rheinwerk Verlag
- ISBN-10: 3836234998
- ISBN-13: 9783836234993
Rezension zu „Müller, P: Flexible Boxes “
"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
Kommentar zu "Müller, P: Flexible Boxes"
0 Gebrauchte Artikel zu „Müller, P: Flexible Boxes“
| Zustand | Preis | Porto | Zahlung | Verkäufer | Rating |
|---|
Schreiben Sie einen Kommentar zu "Müller, P: Flexible Boxes".
Kommentar verfassen