Flexible Boxes: eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox]
Gespeichert in:
| 1. Verfasser: | |
|---|---|
| Format: | Buch |
| Sprache: | German |
| Veröffentlicht: |
Bonn
Rheinwerk-Verl.
2015
|
| Ausgabe: | 2., aktualisierte und erw. Aufl. |
| Schriftenreihe: | Rheinwerk-Computing
|
| Schlagworte: | |
| Online-Zugang: | Inhaltstext Inhaltsverzeichnis |
| Beschreibung: | 503 S. Ill. 23 cm |
| ISBN: | 9783836234993 3836234998 |
Internformat
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV042203681 | ||
| 003 | DE-604 | ||
| 005 | 20240611 | ||
| 007 | t | ||
| 008 | 141124s2015 gw a||| |||| 00||| ger d | ||
| 016 | 7 | |a 1060337711 |2 DE-101 | |
| 020 | |a 9783836234993 |9 978-3-8362-3499-3 | ||
| 020 | |a 3836234998 |9 3-8362-3499-8 | ||
| 035 | |a (OCoLC)903177169 | ||
| 035 | |a (DE-599)DNB1060337711 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-706 |a DE-M347 |a DE-20 |a DE-1049 |a DE-11 |a DE-1043 |a DE-523 |a DE-473 |a DE-92 |a DE-Aug4 |a DE-1102 |a DE-M100 |a DE-91G |a DE-858 |a DE-1047 |a DE-210 | ||
| 082 | 0 | |a 006.7 |2 22/ger | |
| 084 | |a ST 250 |0 (DE-625)143626: |2 rvk | ||
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a 004 |2 sdnb | ||
| 084 | |a DAT 675f |2 stub | ||
| 100 | 1 | |a Müller, Peter |d 1960- |e Verfasser |0 (DE-588)1013505735 |4 aut | |
| 245 | 1 | 0 | |a Flexible Boxes |b eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] |c Peter Müller |
| 250 | |a 2., aktualisierte und erw. Aufl. | ||
| 264 | 1 | |a Bonn |b Rheinwerk-Verl. |c 2015 | |
| 300 | |a 503 S. |b Ill. |c 23 cm | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Rheinwerk-Computing | |
| 650 | 0 | 7 | |a Website |0 (DE-588)4596172-4 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Gestaltung |0 (DE-588)4157139-3 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Responsive Webdesign |0 (DE-588)1035443651 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Cascading Style Sheets 3.0 |0 (DE-588)7750895-6 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Webdesign |0 (DE-588)1041632088 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a HTML 5.0 |0 (DE-588)7704810-6 |2 gnd |9 rswk-swf |
| 689 | 0 | 0 | |a Webdesign |0 (DE-588)1041632088 |D s |
| 689 | 0 | 1 | |a HTML 5.0 |0 (DE-588)7704810-6 |D s |
| 689 | 0 | 2 | |a Cascading Style Sheets 3.0 |0 (DE-588)7750895-6 |D s |
| 689 | 0 | |5 DE-604 | |
| 689 | 1 | 0 | |a Responsive Webdesign |0 (DE-588)1035443651 |D s |
| 689 | 1 | 1 | |a Website |0 (DE-588)4596172-4 |D s |
| 689 | 1 | 2 | |a Gestaltung |0 (DE-588)4157139-3 |D s |
| 689 | 1 | |5 DE-604 | |
| 856 | 4 | 2 | |m X:MVB |q text/html |u http://deposit.dnb.de/cgi-bin/dokserv?id=4814676&prov=M&dok_var=1&dok_ext=htm |3 Inhaltstext |
| 856 | 4 | 2 | |m DNB Datenaustausch |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=027642512&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-027642512 | |
Datensatz im Suchindex
| _version_ | 1806329760609992704 |
|---|---|
| adam_text |
AUF EINEN
BLICK
EINFUEHRUNG
1 WAS SICH IM WEBDESIGN GEAENDERT HAT 24
2 DAS BUCH UND DIE BEISPIELSEITEN 43
TEIL I HTML5
- AUSGEZEICHNETE INHALTE
3 DAS HTML5-UNIVERSUM IM UEBERBLICK 50
4 SEMANTISCHE STRUKTURELEMENTE IN HTML5:
HEADER , FOOTER UND CO 64
5 KLEINIGKEITEN UND FORMULARE 102
6 RESPONSIVE GRAFIKEN, AUDIO UND VIDEO 124
7 WORKSHOP: DAS HTML FUER DIE BEISPIELSEITEN 160
TEIL II CSS3
- INHALTE GESTALTEN
8 TOOLS: KLEINE VIEWPORTS, CSS UND JAVASCRIPT 178
9 SELEKTOREN FUER ALLE FAELLE 208
10 TEXT GESTALTEN MIT CSS3 230
11 BOXEN GESTALTEN MIT CSS3 260
TEIL III GETTING RESPONSIVE
12 MEDIA QUERIES - DIE SEITEN WERDEN RESPONSIV 292
13 RESPONSIVE NAVIGATIONEN 309
14 RESPONSIVE LAYOUTS-EIN FLEXIBLES GRID 334
15 INHALTE FUER RESPONSIVE WEBSEITEN GESTALTEN 364
TEIL IV GRIDS, FRAMEWORKS UND FLEXBOX
16 GRIDLAYOUTS: VON PIXEL ZU PROZENTEN 406
17 DESKTOP FIRST: GRIDLAYOUTS MIT YAML4 422
18 MOBILE FIRST: GRIDLAYOUTS MIT FOUNDATION 443
19 AUSBLICK: FLEXBOX-JENSEITS VON FLOATLAYOUTS 459
HTTP://D-NB.INFO/1060337711
INHALT
VORWORT ZUR ZWEITEN AUFLAGE 21
EINFUEHRUNG
1 WAS SICH
IM WEBDESIGN
GEAENDERT 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.2.1 VON HTML-TABELLEN ZU CSS-LAYOUTS 26
1.2.2 DIE ZEIT DER 960-PIXEL-CSS-GRID-FRAMEWORKS 27
1.3 DIE ENTSTEHUNG DES RESPONSIVEN WEBDESIGNS 28
1.3.1 SMARTPHONES UND TABLETS: DAS WEB
JENSEITS DES DESKTOPS 28
1.3.2 RESPONSIVE WEB DESIGN
UNTERSTUETZT DIE FLEXIBLE NATUR DES WEB 30
1.3.3 RESPONSIVE EROBERT DAS WEB
IM STURM 32
1.3.4 RESPONSIVE UND ADAPTIVE
- ZWEI BEGRIFFE VERWIRREN DIE WELT 33
1.4 DAS WEB WIRD MOBIL - BEI ARBEIT, SPORT UND SPIEL 34
1.4.1 MOBILE KANN VIELE VERSCHIEDENE DINGE BEDEUTEN 35
1.4.2 DAS WEB IST
DAS WEB UND WIRD ALLGEGENWAERTIG 36
1.5 MODERNE WEBSITES ERSTELLEN 37
1.5.1 DESKTOP FIRST: SO WIE IMMER UND NOCH ETWAS DAZU 37
1.5.2 MOBILE FIRST: KLEIN ANFANGEN UND DANN HOCH HINAUS 38
1.5.3 CONTENT FIRST: DIE BESUCHER KOMMEN FUER DEN INHALT 39
1.5.4 DER FISCH IM WASSER: RAPID
PROTOTYPING 40
1.6 FAZIT: VERAENDERUNG IST DAS
EINZIG BESTAENDIGE 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
5
TEIL I HTML5
- AUSGEZEICHNETE INHALTE
3 DAS HTML5-UNIVERSUM
IM UEBERBLICK 50
3.1 DIE VERWIRRUNG RUND UM HTML5 50
3.2 EINE KURZE
GESCHICHTE VON HTML5 51
3.2.1 PHASE
1: HTML-ZWISCHEN WBC UND
BROWSERHERSTELLERN 52
3.2.2 PHASE 2: AUS HTML
4.01
WIRD XHTML
1.0 53
3.2.3 PHASE 3: XHTML
2.0 UND DIE REVOLTE DER BROWSERHERSTELLER 55
3.2.4 PHASE 4: ZURUECK ZU HTML-DAS W3C AENDERT DEN KURS 56
3.2.5 PHASE 5: W3C UND WHATWG
-TOGETHER APART 57
3.3 DAS HTML5-
UNIVERSUM IM UEBERBLICK 58
3.3.1 HTML5 MACHT DAS WEB FIT FUER WEBANWENDUNGEN 59
3.3.2 VISUELLE UEBERSICHT: DIE KARTE VOM HTML5-UNIVERSUM 59
3.4 GUTE QUELLEN RUND UM HTML5 62
3.4.1 ANLAUFSTELLE FUER ALLGEMEINE INFOS: HTML5DOCTOR.COM 62
3.4.2 ANLAUFSTELLE FUER FRAGEN ZUR BROWSERUNTERSTUETZUNG: CANIUSE.COM
. 62
3.4.3 IN GERMAN: PETER KROENERS BLOG
AUF PETERKROENER.DE 63
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.2.1 EIN GUTER START: IDOCTYPE HTML UND
HTML 67
4.2.2 DER ZEICHENSATZ: METACHARSET="UTF-8" 68
4.2.3 ALTE BEKANNTE: SEITENTITEL UND SEITENBESCHREIBUNG 68
4.2.4 DIESE SEITE BITTE NICHT VERKLEINERN: DAS META-ELEMENT FUER
DEN VIEWPORT 69
4.3 UEBER DIE SEMANTISCHEN STRUKTURELEMENTE IN HTML5 71
4.3.1 DIE NEUEN SEMANTISCHEN HTML5-STRUKTURELEMENTE IM UEBERBLICK 71
4.3.2 SEMANTISCHES HTML GIBT DEN INHALTEN EINE BEDEUTUNG 72
4.3.3 LAYOUTBEREICHE WURDEN TRADITIONELL MIT DIV AUSGEZEICHNET 73
4.3.4 IN HTML5
GIBT ES SEMANTISCHE ELEMENTE FUER LAYOUTBEREICHE 75
4.3.5 INTEGRIERTE ORIENTIERUNGSHILFEN: ARIA LANDMARK ROLES 76
6
4.3.6 ARIA LANDMARK ROLES IN AKTION 77
4.3.7 ARIA LANDMARK ROLES IN HTML5 78
4.4 DIE SEMANTISCHEN STRUKTURELEMENTE IN HTML5 BONES 79
4.4.1 HTML5 BONES
- LAYOUTBEREICHE IM UEBERBLICK 80
4.4.2 DER KOPFBEREICH: HEADER ROLE="BANNER" 80
4.4.3 DIE SITE-NAVIGATION: NAV ROLE="NAVIGATION" 81
4.4.4 DER HAUPTINHALTSBEREICH: MAIN ROLE="MAIN" 83
4.4.5 INHALTE IN ABSCHNITTE UNTERTEILEN: SECTION 84
4.4.6 IN SICH GESCHLOSSENE, EIGENSTAENDIGE INHALTE: ARTICLE 86
4.4.7 ES GIBT MEISTENS NICHT NUR EINE RICHTIGE LOESUNG:
SECTION VS ARTIDE 87
4.4.8 ZUSAETZLICHER INHALT MIT ASIDE ROLE="COMPLEMENTAIY" 88
4.4.9 DER FUSSBEREICH: FOOTER ROLE="CONTENTINFO" 89
4.4.10 KURZES FAZIT ZU HEADER ,
FOOTER UND CO 89
4.5 DIE SEMANTISCHEN STRUKTURELEMENTE IM ALLTAG 90
4.5.1 IST DIE WEBWELT SCHON BEREIT FUER DIE NEUEN HTML5-ELEMENTE? 90
4.5.2 DIE SEMANTISCHEN ELEMENTE PER CSS STYLEN 91
4.5.3 HILFE FUER ALTE BROWSER PER JAVASCRIPT: HTML5SHIV 91
4.5.4 UEBUNG: BEISPIELSEITE VON HTML5 BONES
GESTALTEN 93
4.6 EXKURS: DER
OUTLINE-ALGORITHMUS VON HTML5 95
4.6.1 DIE HIERARCHIE DER UEBERSCHRIFTEN BEIM W3C 95
4.6.2 DIE HIERARCHIE DER UEBERSCHRIFTEN BEI HTML5 BONES 96
4.6.3 SECTIONING: ABSCHNITTE MIT NAV , SECTION , ARTICLE
UND ASIDE 97
4.6.4 DEN OUTLINE-ALGORITHMUS TESTEN 98
4.6.5 FAZIT: DER OUTLINE-ALGORITHMUS IST ZUKUNFTSMUSIK 100
4.6.6 UND WAS IST MIT HGROUP ? 100
4.6.7 WIE MAN UNTERTITEL AUSZEICHNEN SOLLTE-
ALTERNATIVEN ZU HGROUP 101
5 KLEINIGKEITEN UND
FORMULARE
102
5.1 ABBILDUNGEN BESCHRIFTEN: FIGURE UND FIGCAPTION 102
5.1.1 EIN BILD MIT BESCHRIFTUNG 102
5.1.2 MEHRERE BILDER MIT BESCHRIFTUNG 104
7
5.2 NUETZLICHE AENDERUNGEN FUER AELTERE HTML-ELEMENTE 105
5.2.1 HYPERLINKS UM BLOCK-ELEMENTE SIND JETZT ERLAUBT 105
5.2.2 OL START="3" : NUMMERIERUNGEN MUESSEN NICHT MIT 1 ANFANGEN 107
5.2.3 ADDRESS ZEIGT KONTAKTINFORMATIONEN FUER DIE SEITE UND
FUER ARTIKEL 107
5.2.4 SMALL STEHT JETZT FUER DAS KLEINGEDRUCKTE 108
5.2.5 HR MARKIERT EINEN INHALTLICHEN BRUCH INNERHALB EINES
ABSCHNITTS. 109
5.3 DIE VERSCHIEDENEN FORMEN DER HERVORHEBUNG 109
5.3.1 STRONG KENNZEICHNET WICHTIGEN TEXT 109
5.3.2 EM KENNZEICHNET EINE ANDERE SPRACHLICHE BETONUNG 110
5.3.3 I KENNZEICHNET BEGRIFFE, NAMEN ODER AEHNLICHES IM FLIESSTEXT 111
5.3.4 B HEBT TEXTE WIE Z. B.TEASER
AB 111
5.3.5 MARK HEBT TEXT HERVOR, DER FUER DEN BENUTZER WICHTIG IST 112
5.3.6 UEBERSICHT: MERKHILFEN FUER DIE ELEMENTE ZUR HERVORHEBUNG 113
5.4 TIME : ZEIT FUER MENSCHEN UND MASCHINEN 113
5.4.1 DATUMSANGABEN MIT TIME 114
5.4.2 DIE UHRZEIT MIT TIME 114
5.5 FORMULARE IN HTML5:
NEUE ATTRIBUTE 116
5.5.1 PLATZHALTER: FORMULARFELDER VORBELEGEN MIT PLACEHOLDER 116
5.5.2 PFLICHTFELDER DEFINIEREN MIT REQUIRED 116
5.5.3 DEN CURSOR AUTOMATISCH PLATZIEREN MIT AUTOFOCUS 117
5.6 FORMULARE IN HTML5: SEMANTISCHE
EINGABEFELDER 117
5.6.1 INPUTTYPE="EMAIL" FUER E-MAIL-ADRESSEN 118
5.6.2 EINGABEFELDER FUER WEBADRESSEN UND TELEFONNUMMERN 119
5.6.3 INPUTTYPE="SEARCH" FUER DIE SUCHFUNKTION 119
5.6.4 INPUTTYPE="NUMBER" FUER ZAHLEN 120
5.6.5 EINGABEFELDER FUER DATUM UND UHRZEIT 122
6 RESPONSIVE GRAFIKEN,
AUDIO UND
VIDEO
124
6.1 GRAFIKEN OPTIMIEREN UND FLEXIBEL EINBINDEN 124
6.1.1 JEDES KILOBYTE ZAEHLT-DIE OPTIMIERUNG VON GRAFIKEN 125
6.1.2 GRAFIKEN EINBINDEN MIT IMG OHNE WIDTH UND HEIGHT 127
6.1.3 FLEXIBLE BILDER PER CSS MIT
MAX-WIDTH:100% 128
6.1.4 EXKURS: HOCHAUFLOESENDE DISPLAYS BENOETIGEN MEHR PIXEL 129
8
6.2 HTML UND RESPONSIVE GRAFIKEN 130
6.2.1 DIE GESCHICHTE DER RESPONSIVEN GRAFIKEN -
VON 2010 BIS
PICTURE 131
6.2.2 DIE PICTURE-SPEZIFIKATION ERWEITERT DAS IMG -ELEMENT 133
6.2.3 DIE VIER ANWENDUNGSFAELLE FUER RESPONSIVE GRAFIKEN 134
6.3 GRAFIKEN NACH PIXELDICHTE: IMG UND SRCSET X 135
6.3.1 DIE SYNTAX: DAS ELEMENT IMG , DAS ATTRIBUT SRCSET
UND EIN X-WERT 136
6.3.2 EIN BEISPIEL: IMG UND SRCSET X IN
AKTION 136
6.3.3 BROWSERUNTERSTUETZUNG UND FAZIT FUER IMG UND SRCSET X 138
6.4 GRAFIKEN NACH VIEWPORT-BREITE: IMG UND SRCSET W 139
6.4.1 TAUSCHE X GEGEN W: IMG , SRCSET
UND EIN W-WERT 139
6.4.2 ERWEITERTE SYNTAX: IMG , SRCSET W,
SIZES UND DIE
EINHEIT VW 141
6.4.3 DER CLOU:
PIXELDICHTE IST BEI SRCSET W UND SIZES SCHON
MIT DRIN 142
6.4.4 DAS ATTRIBUT SIZES KANN DIE BREITE DES VIEWPORTS ABFRAGEN 143
6.4.5 BROWSERUNTERSTUETZUNG UND FAZIT FUER IMG UND SRCSET W 145
6.5 UNTERSCHIEDLICHE BILDMOTIVE UND DATEIFORMATE 147
6.5.1 ART DIRECTION MIT PICTURE : EIN ANDERES MOTIV SERVIEREN 147
6.5.2 EIN BEISPIEL: ART DIRECTION MIT PICTURE IN AKTION 148
6.5.3 UNTERSCHIEDLICHE DATEIFORMATE SERVIEREN 149
6.5.4 BROWSERUNTERSTUETZUNG UND FAZIT ZU PICTURE 151
6.6 HTML5 UND
SOUND: AUDIO 152
6.6.1 LETTHERE BE SOUND: AUDIOFORMATE UND BROWSER 153
6.6.2 DIE EINBINDUNG VON AUDIO IM BROWSER MIT HTML5 BONES 154
6.7 ALS DIE
BILDER LAUFEN LERNTEN: VIDEO 155
6.7.1 VIDEOFORMATE UND BROWSER IM UEBERBLICK 156
6.7.2 DIE EINBINDUNG VON VIDEO MIT HTML5 BONES 157
6.7.3 FLEXIBLE VIDEOS
PER CSS 159
7 WORKSHOP:
DAS HTML
FUER DIE
BEISPIELSEITEN 160
7.1 DIE BEISPIELSEITEN IM UEBERBLICK 160
7.2 DER VORSPANN: DAS
HTML IM HEAD 161
9
7.3 DIE HTML-STRUKTUR IM BODY FUER DIE BEISPIELSEITEN 162
7.3.1 DER SEITENKOPF: DAS HTML
IM HEADER 163
7.3.2 DIE NAVIGATION: NAV STEHT UNTERHALB VOM HEADER 164
7.3.3 DER INHALTSBEREICH MIT MAIN UND SECTION ID="CONTENT" 164
7.3.4 DER FUSSBEREICH MIT FOOTER 165
7.4 DER INHALTSBEREICH FUER DIE STARTSEITE 166
7.4.1 UEBERSCHRIFTEN UND FLIESSTEXT FUER DIE STARTSEITE 166
7.4.2 EINE GRAFIK AUFDER STARTSEITE EINBINDEN 168
7.5 DER INHALTSBEREICH FUER DIE SEITE NEWS 170
7.5.1 DER HAUPTINHALT IN MAIN FUER DIE SEITE NEWS 170
7.5.2 LINKLISTEN MIT EINEM ASIDE AUF DER SEITE NEWS 172
7.6 DER INHALTSBEREICH FUER DIE KONTAKTSEITE 173
TEIL II CSS3
- INHALTE GESTALTEN
8 TOOLS:
KLEINE VIEWPORTS,
CSS UND
JAVASCRIPT 178
8.1 WEBSEITEN IN VERSCHIEDENEN VIEWPORTS TESTEN 178
8.1.1 BILDSCHIRMGROESSEN TESTEN: DAS MENUE WEB-ENTWICKLER
IM FIREFOX 179
8.1.2 DAS BOOKMARKLET VIEWPORT RESIZER VON MALTE WASSERMANN 179
8.1.3 ONLINE: ISH.YET ANOTHER VIEWPORT RESIZER VON BRAD FROST 181
8.2 CSS3
- MODULE UND BROWSER-PRAEFIXE 182
8.2.1 CSS3 BESTEHT AUS VIELEN
VERSCHIEDENEN MODULEN 182
8.2.2 DIE BROWSER-PRAEFIXE: -WEBKIT-, -MOZ-, -O- UND -MS- 183
8.3 DAS CSS-FUNDAMENT: NORMALIZE.CSS 184
8.3.1 BASISFORMATIERUNG NORMALISIERUNG FUER NEUE HTML5-ELEMENTE 185
8.3.2 LINKS,
TYPOGRAFIE UND MEHR 186
8.3.3 NORMALISIERUNG FUER FORMULARE UND TABELLEN 187
8.4 EIN ZENTRALES STYLESHEET ERLEICHTERT DIE ENTWICKLUNG 187
8.4.1 DIVIDE ET IMPERA: BEIM ENTWICKELN MEHRERE STYLESHEETS BENUTZEN
. 188
8.4.2 @MEDIA STEHT INNERHALB DER EINZELNEN STYLESHEETS 188
8.4.3 WENN DIE SEITEN FERTIG SIND,
STYLES IN EINER DATEI VEREINEN 189
8.5 JQUERY
- DAS FUNDAMENT FUER VIELE KLEINE HELFERLEIN 190
8.5.1 JAVASCRIPT, JQUERY
UND JQUERY-PLUGINS 190
10
8.5.2 JQUERY DOWNLOADEN UND EINBINDEN 190
8.5.3 TESTEN,
OB JQUERY KORREKT EINGEBUNDEN WURDE 192
8.5.4 ONLINE: JQUERY VIA CDN DIREKT AUS DEM WEB EINBINDEN 193
8.5.5 PRAKTISCH: VIEWPORT-BREITE DIREKT IM BROWSERFENSTER
ANZEIGEN LASSEN 194
8.6 MODERNIZR HILFT BEIM UMGANG MIT ALTEN BROWSERN 196
8.6.1 MODERNIZR INTERVIEWT DEN BROWSER 196
8.6.2 MODERNIZR DOWNLOADEN UND EINBINDEN 197
8.6.3 TESTEN,
OB MODERNIZR KORREKT EINBUNDEN WURDE 198
8.6.4 EIN EINFACHES BEISPIEL ZUR BENUTZUNG VON MODERNIZR 199
8.7 WORKSHOP: ZENTRALISIERUNG UND GRUNDFORMATIERUNG 200
8.7.1 EIN ZENTRALES STYLESHEET STYLES.CSS
MIT
@IMPORT-REGELN ERSTELLEN 200
8.7.2 GRUNDFORMATIERUNG DER LAYOUTBEREICHE IN LAYOUT.CSS 202
8.7.3 KOPF- UND FUSSBEREICH GESTALTEN IN LAYOUT.CSS 203
8.7.4 ALLGEMEINE KLASSEN ZUM VERSTECKEN UND FLOATEN IN LAYOUTCSS 203
8.7.5 GRUNDFORMATIERUNG DER NAVIGATION IN NAV-BASIS.CSS 204
8.7.6 GRUNDFORMATIERUNG DER BILDER UND UEBERSCHRIFTEN IN INHALTE.CSS
205
8.7.7 DIE BEISPIELSEITEN AM ENDE DIESES
KAPITELS 206
9 SELEKTOREN FUER
ALLE FAELLE
208
9.1 FAMILIENSELEKTOREN: KINDER, GESCHWISTER UND NACHFAHREN 208
9.1.1 ALLE NACHFAHREN AUSWAEHLEN MIT EINER LEERSTELLE: UL II 209
9.1.2 ALLE DIREKTEN KINDER SELEKTIEREN: UL II 209
9.1.3 DIE GESCHWISTERSELEKTOREN: PLUSZEICHEN + UND TILDE ~ 211
9.2 ATTRIBUTSELEKTOREN HABEN ECKIGE KLAMMERN 213
9.2.1 NUR DAS ATTRIBUT: ELEMENT[ATTRIBUT] 213
9.2.2 NUR EIN GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT="ZEICHEN"] 213
9.2.3 MIT TILDE UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT~="ZEICHEN"] 214
9.2.4 MIT HUETCHEN UND GLEICHHEITSZEICHEN:
ELEMENT[ATTRIBUT
A
="ZEICHEN"] 214
9.2.5 MIT DOLLAR UND GLEICHHEITSZEICHEN:
ELEMENT[ATTRIBUT$="ZEICHEN"] * 215
9.2.6 MIT STERNCHEN UND GLEICHHEITSZEICHEN:
ELEMENT[ATTRIBUT*="ZEICHEN"] 215
9.2.7 ZUM NACHSCHLAGEN: ALLE ATTRIBUTSELEKTOREN IN EINER TABELLE 216
11
9.3 PSEUDOELEMENTE HABEN EINEN (DOPPELTEN) DOPPELPUNKT 216
9.3.1 DIE SACHE
MIT DEM DOPPELPUNKT: PSEUDOELEMENTE
FRUEHER UND HEUTE 216
9.3.2 PSEUDOELEMENTE IN DER PRAXIS: EXTERNE LINKS GESTALTEN 217
9.3.3 WEBSITES ZUM NACHSCHLAGEN VON UNICODE-ZEICHEN 218
9.4 PSEUDOKLASSEN ZUM SELEKTIEREN VON KINDERN 219
9.4.1 BESONDERE KINDER AUSWAEHLEN: :FIRST-CHILD, :LAST-CHILD
UND :ONLY-CHILD 219
9.4.2 DER ZAUBERSTAB ZUM AUSWAEHLEN VON KINDERN: :NTH-CHILD() 221
9.4.3 :NTH-CHILD MIT GANZEN ZAHLEN: :NTH-CHILD(N) 222
9.4.4 :NTH-CHILD MIT EINFACHEN AUSDRUECKEN: :NTH-CHILD(AN+B) 223
9.4.5 DIE PSEUDOKLASSEN
:FIRST-OF-TYPE, :LAST-OF-TYPE UND
:ONLY-OF-TYPE 225
9.4.6 PSEUDOKLASSEN KOMBINIEREN: ALLE AUSSER DEM ERSTEN UND
DEM LETZTEN 226
9.5 PSEUDOKLASSEN FUER
LINKZIELE UND FORMULARE 228
9.5.1 DIE PSEUDOKLASSEN
:TARGET, :NOT() UND :EMPTY 228
9.5.2 PSEUDOKLASSEN FUER FORMULARE 229
10 TEXT GESTALTEN
MIT CSS3
230
10.1 WEBFONTS: DIE SCHRIFTART GLEICH MITLIEFERN 230
10.1.1 WEBFONTS UND @FONT-FACE 230
10.1.2 GOOGLE FONTS: GEHOSTETE, LIZENZFREIE SCHRIFTEN IM
HANDUMDREHEN 232
10.1.3 GOOGLE FONTS AM BEISPIEL VON OPEN SANS 233
10.1.4 WEBFONTS AUF DEM EIGENEN WEBSPACE:
FONTSQUIRREL WEBFONT KIT 236
10.1.5 WEBFONTS AUF DEM EIGENEN WEBSPACE:
FONTS KONVERTIEREN LASSEN 236
10.2 RELATIVE EINHEITEN FUER DIE SCHRIFTGROESSE 238
10.2.1 FLEXIBLE VETERANEN: EM UND % 238
10.2.2 DIE VORUEBERGEHENDE EMANZIPATION DES PX 239
10.2.3 DAS ROOTEM: REM HAT HTML ALS BASIS 240
10.2.4 PX ALS FALLBACK
FUER AELTERE BROWSER 241
10.2.5 ZUM NACHSCHLAGEN: UMRECHNUNG VON PIXEL
IN REM 242
12
10.3 ABSTAENDE IM FLIESSTEXT: LINE-HEIGHT UND MARGIN 243
10.3.1 VERTIKALER MARGIN UND LINE-HEIGHT SIND WICHTIG
FUER DIE LESBARKEIT 243
10.3.2 DER ZEILENABSTAND: LINE-HEIGHT OHNE EINHEIT 244
10.4 SCHATTEN IM TEXT: TEXT-SHADOW 245
10.4.1 DIE SYNTAX UND EIN PAAR EINFACHE BEISPIELE 246
10.4.2 BEISPIELE FUER EFFEKTE MIT MEHRFACHEN SCHATTEN 247
10.5 KONS ALS SCHRIFT: SKALIERBARE SYMBOLE MIT ICONFONTS 248
10.5.1 ICONFONTS AM BEISPIEL GENERICONS:
DIE EINBINDUNG 249
10.5.2 BEISPIEL NR.
1: DAS TWITTER-SYMBOL ALS SCHRIFT EINBINDEN 250
10.5.3 BEISPIEL NR. 2: EINE KOMPLETTE SOCIAL-MEDIA-LEISTE MIT ICONFONTS
252
10.5.4 BEISPIEL NR.
3: HAEKCHEN
ALS AUFZAEHLUNGSZEICHEN 253
10.6 WORKSHOP: TEXTFORMATIERUNG FUER DIE BEISPIELSITE 255
10.6.1 DOSIS - SCHRIFTGESTALTUNG FUER DEN KOPFBEREICH 255
10.6.2 OPEN SANS
- SCHRIFTGESTALTUNG FUER UEBERSCHRIFTEN
UND FLIESSTEXT 257
10.6.3 OPTIONAL: SOCIAL-MEDIA-LEISTE IM FUSSBEREICH MIT DEN
GENERICONS 258
11 BOXEN GESTALTEN
MIT CSS3 260
11.1 BOXEN WIE IM RICHTIGEN LEBEN: BOX-SIZING: BORDER-BOX 260
11.1.1 DAS KLASSISCHE BOX-MODELL: BOX-SIZING: CONTENT-BOX 260
11.1.2 VERSCHIEDENE EINHEITEN UND DAS DOPPELTE DIV 262
11.1.3 BOX-SIZING:BORDER-BOX ALS ALTERNATIVE ZUM
KLASSISCHEN BOX-MODELL 263
11.1.4 DIE BORDER-BOX
IM WEBALLTAG: BROWSERUNTERSTUETZUNG
UND EINBINDUNG 265
11.2 CSS3 STATT GRAFIK:
SCHATTEN, RUNDE ECKEN UND FARBVERLAEUFE 267
11.2.1 SCHATTENBOXEN MIT BOX-SHADOW 267
11.2.2 RUNDE ECKEN MIT
BORDER-RADIUS 269
11.2.3 LINEARE FARBVERLAEUFE: DIE SYNTAX 272
11.2.4 FARBVERLAEUFE ERSTELLEN MIT DEM ULTIMATE CSS
GRADIENT
GENERATOR 273
11.3 TRANSPARENTE BOXEN: OPACITY UND ALPHAKANAL 275
13
11.4 BEWEGUNG MIT CSS3: TRANSFORM UND TRANSITION 277
11.4.1 TRANSFORMERS: ELEMENTE BEWEGEN MIT TRANSFORM 277
11.4.2 ELEMENTE VERGROESSERN MIT TRANSFORM: SCALE() 279
11.4.3 FLIESSENDE UEBERGAENGE MIT TRANSITION 280
11.4.4 ELEMENTE DREHEN MIT TRANSFORM: ROTATE() 283
11.4.5 ELEMENTE VERSCHIEBEN MIT TRANSFORM: TRANSLATE() 283
11.5 WORKSHOP: DEN INHALT DER BEISPIELSEITEN GESTALTEN 285
11.5.1 BEISPIELSEITEN AUF BOX-SIZING: BORDER-BOX UMSTELLEN 285
11.5.2 GRAFIKEN IM INHALTSBEREICH GESTALTEN 286
11.5.3 UEBERSCHRIFTEN UND FLIESSTEXT GESTALTEN 287
11.5.4 DAS FORMULAR AUF DER KONTAKTSEITE GESTALTEN 289
TEIL III GETTING RESPONSIVE
12 MEDIA QUERIES
- DIE SEITEN
WERDEN RESPONSIV
292
* . " . * -* *" * * 1 . U . . I . R *I^-J , ** ^^1 .IPMIUIB^***
12.1 CSS 2: MEDIENTYPEN DEFINIEREN DAS AUSGABEMEDIUM 292
12.1.1 EINE DRUCKVERSION MIT @MEDIA PRINT 292
12.1.2 SMARTPHONES UND TABLETS KENNEN DEN MEDIENTYP
HANDHELD NICHT 295
12.2 CSS3: MEDIA
QUERIES = MEDIENTYPEN PLUS MEDIENEIGENSCHAFTEN 296
12.2.1 DIE SYNTAX: @MEDIA MEDIENTYP AND (EIGENSCHAFT: WERT) 297
12.2.2 WAS MAN MIT MEDIA QUERIES SO ALLES ABFRAGEN KANN 298
12.2.3 MEDIA QUERIES ZUR ABFRAGE DER PIXELDICHTE 299
12.3 MEDIA QUERIES UND ANGABEN ZUM VIEWPORT 301
12.3.1 OHNE META NAME="VIEWPORT" FUNKTIONIEREN MEDIA
QUERIES NICHT 301
12.3.2 DIE ANWEISUNG @VIEWPORT IN CSS 302
12.4 MEDIA QUERIES: GAENGIGE BREITEN FUER BREAKPOINTS 303
12.4.1 PRAKTISCH: DREI VIEWPORT-BREITEN FUER SMARTPHONE,
TABIET UND DESKTOP 303
12.4.2 IDEAL: BREAKPOINTS FUER DAS LAYOUT SETZEN, NICHT FUER GERAETE 304
12.5 TESTEN, TESTEN, TESTEN-JENSEITS KLEINER VIEWPORTS 305
12.5.1 EIN KLEINER VIEWPORT REICHT NICHT ZUM TESTEN VON INTERAKTIONEN
305
12.5.2 TOOLS ZUM TESTEN: ECHTE GERAETE, EMULATOREN UND SIMULATOREN 306
12.5.3 DEN IOS-SIMULATOR INSTALLIEREN 307
14
13 RESPONSIVE NAVIGATIONEN
309
13.1 UEBERBLICK: ENTDECKEN SIE DIE
MOEGLICHKEITEN 309
13.1.1 DO NOTHING-ALLES SO LASSEN,
WIE ES IST 309
13.1.2 NAVIGATIONSPUNKTE BLOCKEN - ALLES UNTEREINANDER 310
13.1.3 FOOTER-NAVIGATION - DAS MENUE IM FUSSBEREICH 311
13.1.4 AUSWAHLLISTEN: DIE NAVIGATION ALS SELECT 313
13.1.5 TOGGLE-MENUES- EIN BUTTON ZAUBERT DAS MENUE HERVOR 315
13.1.6 DAS PROBLEM VON
DROPDOWN-NAVIGATIONEN AUF TOUCHSCREENS 316
13.1.7 NUETZLICHE WEBSITES ZU RESPONSIVEN NAVIGATIONEN 317
13.2 WORKSHOP: EINE CSS-BASIERTE NAVIGATION
FUER KLEINE VIEWPORTS 318
13.2.1 DIE RESPONSIVE NAVIGATION FUER DIE BEISPIELSEITEN IM UEBERBLICK 318
13.2.2 SCHRITT 1: DAS HTML
FUER DEN MENUEBUTTON ERSTELLEN 320
13.2.3 SCHRITT 2: NAV-TARGET.CSS
- EIN NEUES STYLESHEET ERSTELLEN 321
13.2.4 SCHRITT 3: DEN MENUEBUTTON POSITIONIEREN UND GESTALTEN 323
13.2.5 SCHRITT 4: DEN NAVIGATIONSBEREICH GESTALTEN 324
13.2.6 SCHRITT 5: RIGHT ON :TARGET - DIE NAVIGATION IN AKTION 326
13.3 WORKSHOP: DIE NAVIGATION WIRD RESPONSIV 328
13.3.1 SCHRITT 1: EINEN BREAKPOINTFUER DEN WECHSEL DER
NAVIGATION BESTIMMEN 329
13.3.2 SCHRITT 2: EINE HORIZONTALE NAVIGATION FUER BREITE VIEWPORTS 330
14 RESPONSIVE LAYOUTS
- EIN FLEXIBLES
GRID
334
14.1 GRIDLAYOUTS
- GESTALTEN MIT RASTERN 334
14.1.1 EIN GRID
IST EIN RASTER UND SCHAFFT ORDNUNG 335
14.1.2 GRIDS SIND EIN WERKZEUG FUER GRAFIKDESIGNER 335
14.1.3 BEGRIFFE: DER UNTERSCHIED ZWISCHEN SPALTENLAYOUTS UND
GRIDLAYOUTS 336
14.2 EIN GRID
FUER DIE BEISPIELSEITEN 338
14.2.1 EIN EINFACHES
GRID MIT DREI SPALTEN 338
14.2.2 EIN ETWAS FEINERES RASTER MIT SECHS SPALTEN 339
14.3 DAS LAYOUT
WIRD RESPONSIV 340
14.3.1 SCHRITT 1: BREAKPUNKT FESTLEGEN UND WEBSEITEN ZENTRIEREN 340
14.3.2 SCHRITT 2: HINTERGRUND DER WEBSEITEN FUER MITTLERE VIEWPORTS 342
14.3.3 SCHRITT 3: COVER ME
-FLAECHENDECKENDER HINTERGRUND 343
15
14.4 DER INHALTSBEREICH WIRD RESPONSIV 345
14.4.1 SCHRITT 1: STARTSEITE-DAS BILD NEBEN DEN TEXT STELLEN 346
14.4.2 SCHRITT 2: STARTSEITE-DREI ABSAETZE NEBENEINANDERSTELLEN 348
14.4.3 SCHRITT 3: NEWS-SEITE
- EINEN ZWEISPALTIGEN INHALTSBEREICH
ERSTELLEN 349
14.4.4 SCHRITT 4: DAS KONTAKTFORMULAR 351
14.5 EXKURS: VOLLE
BREITE
- EIN FULL-PAGE-LAYOUT 352
14.5.1 SCHRITT 1: KLEINE AENDERUNGEN IN HTML 353
14.5.2 SCHRITT 2: ANPASSUNGEN FUER HTML UND BODY 354
14.5.3 SCHRITT 3: LAYOUTBEREICHE ANPASSEN 355
14.5.4 SCHRITT 4: ABSTAENDE IN HEADER UND FOOTER KORRIGIEREN 355
14.6 10,9,8,7. - DER COUNTDOWN IM INTERNET EXPLORER 356
14.6.1 WEBSEITEN TESTEN IN VERSCHIEDENEN LE-VERSIONEN 356
14.6.2 DIE BEISPIELSEITEN IM INTERNET EXPLORER 9 UND 10 357
14.6.3 DIE BEISPIELSEITEN IM INTERNET EXPLORER 8 358
14.6.4 MOEGLICHKEIT!: WENIG ODER GAR NICHTS UNTERNEHMEN 359
14.6.5 MOEGLICHKEIT 2: SPEZIELLES STYLESHEET
ERSTELLEN UND PER
CC AUSLIEFERN 361
14.6.6 MOEGLICHKEIT 3: NACHHILFE PER JAVASCRIPT
- RESPOND.JS 362
14.6.7 MOEGLICHKEIT 4: DESKTOP FIRST STATT MOBILE FIRST 363
15 INHALTE FUER RESPONSIVE WEBSEITEN
GESTALTEN 364
15.1 RESPONSIVE GRAFIKEN
IN DER PRAXIS 364
15.1.1 STATUS QUO: GRAFIK JE NACH PIXELDICHTE MIT SRCSET X 365
15.1.2 DIE ERWEITERTE SYNTAX MIT SRCSET W UND SIZES IN DER PRAXIS
365
15.1.3 DIE REIHENFOLGE DER MEDIA QUERIES BEI SIZES IST WICHTIG 366
15.1.4 DIE BERECHNUNG DER VW-WERTE FUER SIZES IN PROZENTBASIERTEN
LAYOUTS 367
15.1.5 RECHENBEISPIELE: RESPONSIVE
GRAFIKEN IM BROWSER 367
15.1.6 PERFEKT: DIE BERECHNUNG DER WERTE FUER SIZES BEI 960
PX
LAYOUTBREITE 369
15.1.7 PICTUREFILL HILFT BROWSERN, RESPONSIVE GRAFIKEN ZU VERSTEHEN
372
15.1.8 FAZIT ZU RESPONSIVE GRAFIKEN
IN DER PRAXIS 374
15.2 FLEXSLIDER 2 - EIN RESPONSIVER
SIIDER 375
15.2.1 SCHRITT 1: FLEXSLIDER 2 DOWNLOADEN UND EINBINDEN 376
15.2.2 SCHRITT 2: DIE SLIDESHOW ERSTELLEN 377
16
15.2.3 DER FLEXSLIDER MIT RESPONSIVEN GRAFIKEN PER SRCSET W
UND SIZES 378
15.3 FLEXIBLE VIDEOS VON YOUTUBE, VIMEO & CO 380
15.3.1 SCHRITT 1: EIN VIDEO
VON EINEM VIDEOPORTAL EINBINDEN 380
15.3.2 FLEXIBLE VIDEOS
OHNE JAVASCRIPT:
DER TRICK MIT DEM PADDING 383
15.3.3 FLEXIBLE VIDEOS MIT JAVASCRIPT: DAS
JQUERY-PLUGIN FITVIDS.JS 384
15.4 LESBARKEIT: DIE OPTIMIERUNG DER ZEILENLAENGE 386
15.4.1 MIT ROTEN STERNCHEN DIE ZEILENLAENGE TESTEN 386
15.4.2 ZEILENLAENGE OPTIMIEREN MIT COLUMN-COUNT 388
15.4.3 ZEILENLAENGE OPTIMIEREN DURCH EINE AENDERUNG DES LAYOUTS 389
15.5 AKKORDEON - TEXT EIN- UND AUSBLENDEN 391
15.5.1 EIN AKKORDEON SPART PLATZ AUF DEM BILDSCHIRM 391
15.5.2 SCHRITT 1: DAS HTML
IN NEWS.HTML VORBEREITEN 393
15.5.3 SCHRITT 2: DIE UEBERSCHRIFT GESTALTEN 394
15.5.4 SCHRITT 3: DAS AKKORDEON EINSCHALTEN 395
15.5.5 SCHRITT 4: EIN GENERICON EINBINDEN 397
15.5.6 SCHRITT 5: ZUSTANDSANZEIGE - DAS GENERICON BEIM
AUSKLAPPEN AENDERN 398
15.5.7 SCHRITT 6: UEBERSCHRIFT IM GROSSEN VIEWPORT GESTALTEN 399
15.6 EXKURS: RESPONSIVE
GRAFIKEN MIT ADAPTIVE IMAGES 400
15.6.1 ADAPTIVE IMAGES HERUNTERLADEN UND ENTPACKEN 400
15.6.2 DIE INSTALLATION VON ADAPTIVE IMAGES 401
15.6.3 TESTEN VON ADAPTIVE IMAGES 403
TEIL IV GRIDS, FRAMEWORKS
UND FLEXBOX
16 GRIDLAYOUTS:
VON PIXEL ZU PROZENTEN 406
16.1 WAS FRAMEWORKS SIND UND WAS SIE FUER SIE
TUN KOENNEN 406
16.1.1 FRAMEWORKS ERLEICHTERN DIE TAEGLICHE ARBEIT 406
16.1.2 DIE VOR- UND NACHTEILE VON FRAMEWORKS 407
16.1.3 GRIDSYSTEME: VON 960.GS UEBER YAML ZU FOUNDATION 409
16.2 EIN GRID MIT SYSTEM: 960.GS IN AKTION 410
16.2.1 BEI GRID-FRAMEWORKS WEISEN SIE IN HTML GRIDKLASSEN
ZU 410
16.2.2 VISUALISIERUNG: DAS 12-SPALTEN-GRID IN DER UEBERSICHT 411
17
16.2.3 DAS CSS VON 960.GS
IM UEBERBLICK 412
16.2.4 EIN BEISPIEL:
DIE STARTSEITE MIT GRIDSYSTEM 414
16.2.5 DIE FLEXIBILITAET EINES GRIDSYSTEMS: 2X2 STATT 3 +1 416
16.3 DIE ZAUBERFORMEL: VON FESTEN PIXELBREITEN ZU PROZENT 417
16.3.1 DIE ZAUBERFORMEL ZUR UMRECHNUNG VON PIXEL IN PROZENT 417
16.3.2 SCHRITT 1: SEITENBEGRENZUNG AUFHEBEN UND AUSSENABSTAENDE
BERECHNEN 419
16.3.3 SCHRITT 2: DIE GRIDKLASSEN MIT BREITEN IN PROZENT 419
17 DESKTOP FIRST:
GRIDLAYOUTS MIT
YAML
4
422
17.1 YAML 4 IM UEBERBLICK 422
17.1.1 YAML-ENTSTEHUNG UND LIZENZ 422
17.1.2 DIE VIER WICHTIGSTEN MODULE VON YAML 423
17.1.3 DOKUMENTATION, DOWNLOAD UND ORDNERSTRUKTUR 424
17.2 RAPID PROTOTYPING: EIN GRIDLAYOUT MIT YAML 4 426
17.2.1 SCHRITT 1: BASIC HTML/CSS
TEMPLATE - DIE HTML-GRUNDSTRUKTUR 427
17.2.2 SCHRITT 2: DAS ZENTRALE STYLESHEET STYLES.CSS 429
17.2.3 SCHRITT 3: DAS LAYOUT
MODULE - DIE GRUNDSTRUKTUR IM BODY 430
17.2.4 SCHRITT 4: INHALT FUER KOPFBEREICH, NAVIGATION UND FOOTER EINFUEGEN
431
17.2.5 SCHRITT 5: GRID MODULE-EINFLEXIBLES GRID IM HANDUMDREHEN 433
17.2.6 SCHRITT 6: GRID MODULE-EINE ZWEITEGRIDZEILE IM INHALTSBEREICH
. 436
17.2.7 SCHRITT 7: DESKTOP FIRST
- ELEMENTE LINEARISIEREN 437
17.3 YAML IST
NICHT NUR FUER 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 UEBERBLICK 443
18.1.1 FOUNDATION 5-EIN RESPONSIVES FRONTEND-FRAMEWORK 443
18.1.2 FOUNDATION IM UEBERBLICK 444
18.1.3 DER DOWNLOAD VON FOUNDATION 5 445
18.1.4 FOUNDATION: DATEIEN-UND ORDNERSTRUKTUR 446
18.1.5 DAS GRIDSYSTEM VON FOUNDATION: SMALL, MEDIUM UND LARGE .
447
18
18.2 RAPID PROTOTYPING: EIN CRIDLAYOUT MIT FOUNDATION 448
18.2.1 SCHRITT 1: DAS HTML
FUER DIE STARTSEITE INDEX.HTML VORBEREITEN 449
18.2.2 SCHRITT 2: DIE ERSTEN GRIDZEILEN - PAGEHEADER UND PAGEFOOTER 450
18.2.3 SCHRITT 3: DAS GRID FUER DEN INHALTSBEREICH, TEIL
1 452
18.2.4 TOPBAR -EIN RESPONSIVES NAVIGATIONSMODUL 453
18.3 FOUNDATION IST IDEAL FUER PROTOTYPEN 456
18.3.1 VORGEFERTIGTE TEMPLATES ERLEICHTERN DEN EINSTIEG 456
18.3.2 FOUNDATION BEREITS VORDEM DOWNLOAD INDIVIDUALISIEREN 457
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.2.1 DIE ENTSTEHUNG VON FLEXBOX ODER ALLER GUTEN DINGE SIND DREI 461
19.2.2 FLEXBOX BIETET NEUE MOEGLICHKEITEN OHNE DIE ALTEN PROBLEME 462
19.3 DER ERSTE SCHRITT: FLEXBOX DEFINIEREN MIT DISPLAY:FLEX 463
19.3.1 DER AUSGANGSPUNKT: EIN ABSCHNITT MIT DREI ARTIKELN 463
19.3.2 EINE FLEXBOX ERSTELLEN: DISPLAY:FLEX 464
19.4 AUSDEHNUNG DER FLEX-ITEMS BESTIMMEN: FLEX:1 466
19.4.1 AUSDEHNUNGEINES FLEX-ITEMS BESTIMMEN MIT FLEX: 1 466
19.4.2 FLEX-ITEMS GLEICHMAESSIG AUSRICHTEN MIT FLEX:1 467
19.4.3 FLEX-ITEMS GESTALTEN UND REIHENFOLGE AENDERN MIT ORDER 468
19.4.4 VERHAELTNISMAESSIG EINFACH: FLEX-ITEMS MIT
UNTERSCHIEDLICHER BREITE 469
19.4.5 FLEX IST EINE KURZSCHREIBWEISE 471
19.5 DAS BOX-MODELL DER FLEXBOX 471
19.5.1 DAS FLEX-BOX-MODELL HAT EINE HAUPT- UND EINE NEBENACHSE 471
19.5.2 FLEX-DIRECTION AENDERT DIE FLUSSRICHTUNG:
ROW WIRD ZU COLUMN 472
19.5.3 FLEX-WRAP ERMOEGLICHT EINE MEHRZEILIGE FLEXBOX 473
19.5.4 FLEX-FLOW IST DIE KURZSCHREIBWEISE FUER FLEX-DIRECTION
UND FLEX-WRAP 475
19.6 FLEXBOX IN AKTION: HOLY GRAIL MIT STICKY FOOTER 475
19.6.1 SCHRITT 1: HTML
UND BASISFORMATIERUNG 475
19.6.2 SCHRITT 2: BODY WIRD MIT DISPLAY:FLEX ZU EINER FLEXBOX 477
19
19.6.3 SCHRITT 3: DEN FOOTER AM UNTEREN BROWSERFENSTER POSITIONIEREN 478
19.6.4 SCHRITT 4: DIE DREI SPALTEN NEBENEINANDER POSITIONIEREN 479
19.6.5 SCHRITT 5: DIE AUSDEHNUNG DER DREI SPALTEN STEUERN 480
19.6.6 SCHRITT 6: DIE REIHENFOLGE DER DREI SPALTEN BELIEBIG AENDERN 481
19.6.7 DAS CSS IM UEBERBLICK UND DIE GRENZEN DER FLEXBOX 481
19.7 AUSRICHTUNG STEUERN UND LEERRAUM VERTEILEN 483
19.7.1 DER AUSGANGSPUNKT: HTML UND BASISFORMATIERUNG FUER DIE LISTE 483
19.7.2 FLEX-ITEMS AN DER HAUPTACHSE AUSRICHTEN MIT JUSTIFY-CONTENT 485
19.7.3 ALIGN-ITEMS UND ALIGN-SELF SIND FUER DIE NEBENACHSE 487
19.7.4 ELEMENTE HORIZONTAL UND VERTIKAL ZENTRIEREN: MARGIN:AUTO 489
19.7.5 ELEMENTE AM ANFANG ODER ENDE EINES CONTAINERS AUSRICHTEN:
MARGIN 490
19.7.6 MEHRZELLIGE FLEXBOXEN UND ALIGN-CONTENT 491
19.8 SPICKZETTEL: FLEXBOX
- EIGENSCHAFTEN UND WERTE IN DER UEBERSICHT 492
19.8.1 EIGENSCHAFTEN UND WERTE FUER DIE FLEXIBILITAET 493
19.8.2 EIGENSCHAFTEN UND WERTE FUER AUSRICHTUNG UND VERTEILUNG 493
INDEX 495
20 |
| any_adam_object | 1 |
| author | Müller, Peter 1960- |
| author_GND | (DE-588)1013505735 |
| author_facet | Müller, Peter 1960- |
| author_role | aut |
| author_sort | Müller, Peter 1960- |
| author_variant | p m pm |
| building | Verbundindex |
| bvnumber | BV042203681 |
| classification_rvk | ST 250 ST 252 |
| classification_tum | DAT 675f |
| ctrlnum | (OCoLC)903177169 (DE-599)DNB1060337711 |
| dewey-full | 006.7 |
| dewey-hundreds | 000 - Computer science, information, general works |
| dewey-ones | 006 - Special computer methods |
| dewey-raw | 006.7 |
| dewey-search | 006.7 |
| dewey-sort | 16.7 |
| dewey-tens | 000 - Computer science, information, general works |
| discipline | Informatik |
| edition | 2., aktualisierte und erw. Aufl. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>00000nam a2200000 c 4500</leader><controlfield tag="001">BV042203681</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20240611</controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">141124s2015 gw a||| |||| 00||| ger d</controlfield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1060337711</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836234993</subfield><subfield code="9">978-3-8362-3499-3</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836234998</subfield><subfield code="9">3-8362-3499-8</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)903177169</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1060337711</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rakddb</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="044" ind1=" " ind2=" "><subfield code="a">gw</subfield><subfield code="c">XA-DE-NW</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-706</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-20</subfield><subfield code="a">DE-1049</subfield><subfield code="a">DE-11</subfield><subfield code="a">DE-1043</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-473</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-Aug4</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-M100</subfield><subfield code="a">DE-91G</subfield><subfield code="a">DE-858</subfield><subfield code="a">DE-1047</subfield><subfield code="a">DE-210</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.7</subfield><subfield code="2">22/ger</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 250</subfield><subfield code="0">(DE-625)143626:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">004</subfield><subfield code="2">sdnb</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">DAT 675f</subfield><subfield code="2">stub</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Müller, Peter</subfield><subfield code="d">1960-</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)1013505735</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Flexible Boxes</subfield><subfield code="b">eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox]</subfield><subfield code="c">Peter Müller</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">2., aktualisierte und erw. Aufl.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Rheinwerk-Verl.</subfield><subfield code="c">2015</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">503 S.</subfield><subfield code="b">Ill.</subfield><subfield code="c">23 cm</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Rheinwerk-Computing</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Website</subfield><subfield code="0">(DE-588)4596172-4</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Gestaltung</subfield><subfield code="0">(DE-588)4157139-3</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="1"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="2"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="689" ind1="1" ind2="0"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="1" ind2="1"><subfield code="a">Website</subfield><subfield code="0">(DE-588)4596172-4</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="1" ind2="2"><subfield code="a">Gestaltung</subfield><subfield code="0">(DE-588)4157139-3</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="1" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">X:MVB</subfield><subfield code="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=4814676&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">DNB Datenaustausch</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=027642512&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-027642512</subfield></datafield></record></collection> |
| id | DE-604.BV042203681 |
| illustrated | Illustrated |
| indexdate | 2024-08-03T01:58:17Z |
| institution | BVB |
| isbn | 9783836234993 3836234998 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-027642512 |
| oclc_num | 903177169 |
| open_access_boolean | |
| owner | DE-706 DE-M347 DE-20 DE-1049 DE-11 DE-1043 DE-523 DE-473 DE-BY-UBG DE-92 DE-Aug4 DE-1102 DE-M100 DE-91G DE-BY-TUM DE-858 DE-1047 DE-210 |
| owner_facet | DE-706 DE-M347 DE-20 DE-1049 DE-11 DE-1043 DE-523 DE-473 DE-BY-UBG DE-92 DE-Aug4 DE-1102 DE-M100 DE-91G DE-BY-TUM DE-858 DE-1047 DE-210 |
| physical | 503 S. Ill. 23 cm |
| publishDate | 2015 |
| publishDateSearch | 2015 |
| publishDateSort | 2015 |
| publisher | Rheinwerk-Verl. |
| record_format | marc |
| series2 | Rheinwerk-Computing |
| spelling | Müller, Peter 1960- Verfasser (DE-588)1013505735 aut Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] Peter Müller 2., aktualisierte und erw. Aufl. Bonn Rheinwerk-Verl. 2015 503 S. Ill. 23 cm txt rdacontent n rdamedia nc rdacarrier Rheinwerk-Computing Website (DE-588)4596172-4 gnd rswk-swf Gestaltung (DE-588)4157139-3 gnd rswk-swf Responsive Webdesign (DE-588)1035443651 gnd rswk-swf Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd rswk-swf Webdesign (DE-588)1041632088 gnd rswk-swf HTML 5.0 (DE-588)7704810-6 gnd rswk-swf Webdesign (DE-588)1041632088 s HTML 5.0 (DE-588)7704810-6 s Cascading Style Sheets 3.0 (DE-588)7750895-6 s DE-604 Responsive Webdesign (DE-588)1035443651 s Website (DE-588)4596172-4 s Gestaltung (DE-588)4157139-3 s X:MVB text/html http://deposit.dnb.de/cgi-bin/dokserv?id=4814676&prov=M&dok_var=1&dok_ext=htm Inhaltstext DNB Datenaustausch application/pdf http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=027642512&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA Inhaltsverzeichnis |
| spellingShingle | Müller, Peter 1960- Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] Website (DE-588)4596172-4 gnd Gestaltung (DE-588)4157139-3 gnd Responsive Webdesign (DE-588)1035443651 gnd Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd HTML 5.0 (DE-588)7704810-6 gnd |
| subject_GND | (DE-588)4596172-4 (DE-588)4157139-3 (DE-588)1035443651 (DE-588)7750895-6 (DE-588)1041632088 (DE-588)7704810-6 |
| title | Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] |
| title_auth | Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] |
| title_exact_search | Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] |
| title_full | Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] Peter Müller |
| title_fullStr | Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] Peter Müller |
| title_full_unstemmed | Flexible Boxes eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] Peter Müller |
| title_short | Flexible Boxes |
| title_sort | flexible boxes eine einfuhrung in moderne websites responsive webdesign verstehen alle wichtigen html5 elemente und css3 eigenschaften grundlagen und konzepte fur responsive webdesign responsive grafiken mobile navigation gridlayouts und flexbox |
| title_sub | eine Einführung in moderne Websites ; [Responsive Webdesign verstehen ; alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Responsive Grafiken, mobile Navigation, Gridlayouts und Flexbox] |
| topic | Website (DE-588)4596172-4 gnd Gestaltung (DE-588)4157139-3 gnd Responsive Webdesign (DE-588)1035443651 gnd Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd HTML 5.0 (DE-588)7704810-6 gnd |
| topic_facet | Website Gestaltung Responsive Webdesign Cascading Style Sheets 3.0 Webdesign HTML 5.0 |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=4814676&prov=M&dok_var=1&dok_ext=htm http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=027642512&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT mullerpeter flexibleboxeseineeinfuhrunginmodernewebsitesresponsivewebdesignverstehenallewichtigenhtml5elementeundcss3eigenschaftengrundlagenundkonzeptefurresponsivewebdesignresponsivegrafikenmobilenavigationgridlayoutsundflexbox |