Flexible Boxes: eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts]
Saved in:
| Main Author: | |
|---|---|
| Format: | Book |
| Language: | German |
| Published: |
Bonn
Galileo Press
2013
|
| Edition: | 1. Aufl. |
| Series: | Galileo Computing
|
| Subjects: | |
| Links: | http://deposit.dnb.de/cgi-bin/dokserv?id=4308901&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=026236744&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| Physical Description: | 448 S. Ill. 230 mm x 172 mm |
| ISBN: | 9783836225199 3836225190 |
Staff View
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV041262961 | ||
| 003 | DE-604 | ||
| 005 | 20200114 | ||
| 007 | t| | ||
| 008 | 130910s2013 gw a||| |||| 00||| ger d | ||
| 015 | |a 13,N19 |2 dnb | ||
| 016 | 7 | |a 1034049364 |2 DE-101 | |
| 020 | |a 9783836225199 |c Pb. : EUR 24.90 (DE), EUR 25.60 (AT), sfr 32.90 (freier Pr.) |9 978-3-8362-2519-9 | ||
| 020 | |a 3836225190 |9 3-8362-2519-0 | ||
| 024 | 3 | |a 9783836225199 | |
| 035 | |a (OCoLC)857765408 | ||
| 035 | |a (DE-599)DNB1034049364 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-M347 |a DE-1043 |a DE-523 |a DE-19 |a DE-83 |a DE-573 |a DE-92 |a DE-29T |a DE-91G |a DE-1102 |a DE-861 |a DE-526 |a DE-525 |a DE-863 |a DE-824 |a DE-1051 |a DE-70 | ||
| 082 | 0 | |a 006.7 |2 22/ger | |
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a DAT 675f |2 stub | ||
| 084 | |a 004 |2 sdnb | ||
| 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 ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] |c Peter Müller |
| 250 | |a 1. Aufl. | ||
| 264 | 1 | |a Bonn |b Galileo Press |c 2013 | |
| 300 | |a 448 S. |b Ill. |c 230 mm x 172 mm | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Galileo Computing | |
| 650 | 0 | 7 | |a HTML 5.0 |0 (DE-588)7704810-6 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Gestaltung |0 (DE-588)4157139-3 |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 Website |0 (DE-588)4596172-4 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Responsive Webdesign |0 (DE-588)1035443651 |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=4308901&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=026236744&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-026236744 | |
Record in the Search Index
| DE-BY-TUM_call_number | 0102 DAT 675f 2014 A 208 |
|---|---|
| DE-BY-TUM_katkey | 1968599 |
| DE-BY-TUM_location | 01 |
| DE-BY-TUM_media_number | 040080393624 |
| _version_ | 1821933593945964544 |
| adam_text | IMAGE 1
AUF EINEN BLICK
EINFUEHRUNG 1 WAS SICH IM WEB GEAENDERT HAT 23
2 DAS BUCH UND DIE BEISPIELSEITEN 45
TEIL I HTML5 - AUSGEZEICHNETE INHALTE
3 DAS HTMLS-UNIVERSUM IM UEBERBLICK 53
4 SEMANTISCHE STRUKTURELEMENTE IN HTML5 69
5 KLEINIGKEITEN, FORMULARE UND MULTIMEDIA 111
6 WORKSHOP: DAS HTMLFUER DIE BEISPIELSEITEN 141
TEIL II CSS3 - INHALTE GESTALTEN
7 TOOLS, ZENTRALISIERUNG UND NORMALISIERUNG 163
8 SELEKTOREN FUER ALLE FAELLE 185
9 TEXT GESTALTEN MIT CSS3 209
10 BOXEN GESTALTEN MIT CSS3 239
11 MOBILE NAVIGATION 269
TEIL III GETTING RESPONSIVE - MEDIA QUERIES, CRIDS
UND FRAMEWORKS
12 MEDIA QUERIES - DIE SEITEN WERDEN RESPONSIV 297
13 LAYOUTS MIT RASTER-EIN GRIDSYSTEM ERSTELLEN 325
14 FLEXIBLES GRID, NEUES LAYOUT UND DESKTOP FIRST 355
15 INHALTE FUER RESPONSIVE WEBSEITEN GESTALTEN 379
16 RESPONSIVE FRONTEND-FRAMEWORKS 409
HTTP://D-NB.INFO/1034049364
IMAGE 2
INHALT
VORWORT 19
EINFUEHRUNG
1 WAS SICH IM WEB GEAENDERT HAT 23
1.1 BACK TO THE ROOTS: A DAO OF WEB DESIGN 23
1.2 VON HTML-TABELLEN ZU 960PX-GRID-FRAMEWORKS 25
1.2.1 VON HTML-TABELLEN ZU CSS-LAYOUTS 25
1.2.2 DIE ZEIT DER 960-PIXEL-CSS-GRID-FRAMEWORKS 26
1.3 DIE ENTSTEHUNG DES RESPONSIVEN WEBDESIGNS 28
1.3.1 DAS WEB WIRD MOBIL UND ALLGEGENWAERTIG 28
1.3.2 RESPONSIVE WEBDESIGN UNTERSTUETZT DIE FLEXIBLE NATUR DES WEB 30
1.3.3 RESPONSIVE UND ADAPTIVE-ZWEI BEGRIFFE VERWIRREN DIE WELT 32
1.4 PARADIGMENWECHSEL: WICHTIGE KONZEPTE 34
1.4.1 JEDER SO, WIE ER KANN: PROGRESSIVE ENHANCEMENT 34
1.4.2 WEBSEITEN MUESSEN NICHT IN JEDEM BROWSER GLEICH SEIN 35
1.4.3 DER FISCH IM WASSER: PROTOTYP IM BROWSER ENTWICKELN 36
1.4.4 DAS WEB WIRD MOBIL - BEI ARBEIT, SPORT UND SPIEL 37
1.5 HENNE ODER EI: MOBILE FIRST VERSUS DESKTOP FIRST 40
1.5.1 DESKTOP FIRST: SO WIE IMMER, UND NOCH ETWAS DAZU 40
1.5.2 MOBILE FIRST: NEU, COOL UND GAR NICHT SO EINFACH 41
1.5.3 CONTENT FIRST-DIE BESUCHER KOMMEN FUER DEN INHALT 42
1.6 FAZIT: VERAENDERUNG IST DAS EINZIG BESTAENDIGE 43
2 DAS BUCH UND DIE BEISPIELSEITEN 45
2.1 TEIL I: HTML5-AUSGEZEICHNETER INHALT 45
2.2 TEIL II: CSS3 - INHALTE GESTALTEN 46
2.3 TEIL III: CETTING RESPONSIVE - MEDIA QUERIES UND CRIDS 48
5
IMAGE 3
TEIL I HTML5 - AUSGEZEICHNETE INHALTE
3 DAS HTML5-UNIVERSUM IM UEBERBLICK 53
3.1 DIE VERWIRRUNG RUND UM HTMLS 53
3.2 EINE KURZE GESCHICHTE VON HTMLS 54
3.2.1 PHASE 1: HTML-ZWISCHEN WBC UND BROWSERHERSTELLERN 55
3.2.2 PHASE 2: AUS HTML 4.01 WIRD XHTML 1.0 56
3.2.3 PHASE 3: XHTML 2.0 UND DIE REVOLTE DER BROWSERHERSTELLER 58
3.2.4 PHASE 4: ZURUECK ZU HTML-DAS W3C AENDERT DEN KURS 59
3.2.5 PHASE 5: W3C UND WHATWG-TOGETHER APART 60
3.3 DAS HTMLS- UNIVERSUM IM UEBERBLICK 61
3.3.1 HTML5 MACHT DAS WEB FIT FUER WEBANWENDUNGEN 62
3.3.2 VISUELLE UEBERSICHT: DIE KARTE VOM HTML5-UNIVERSUM 63
3.4 GUTE QUELLEN RUND UM HTML5 65
3.4.1 DIE ANLAUFSTELLE FUER ALLGEMEINE INFOS: HTML5DOCTOR.COM 66
3.4.2 ANLAUFSTELLEN FUER KONKRETE FRAGEN: CANIUSE.COM UND
HTML5PLEASE.COM 67
3.4.3 IN GERMAN: PETER KROENERS BLOG AUF PETERKROENER.DE 67
4 SEMANTISCHE STRUKTURELEMENTE IN HTML5 69
4.1 DER ROTE FADEN: DIE VORLAGE VON HTML5BONES.COM 69
4.2 DER VORSPANN: !DOCTYPE , HTML UND HEAD 71
4.2.1 EIN GUTER START: IDOCTYPE HTML UND HTML 72
4.2.2 DER ZEICHENSATZ: META CHARSET= UTF-8 73
4.2.3 ALTE BEKANNTE: SEITENTITEL UND SEITENBESCHREIBUNG 73
4.2.4 DIESE SEITE BITTE NICHT VERKLEINERN:
DAS META-ELEMENT FUER DEN VIEWPORT 74
4.3 UEBER DIE NEUEN SEMANTISCHEN HTML-ELEMENTE 76
4.3.1 DIE NEUEN SEMANTISCHEN ELEMENTE IM UEBERBLICK 76
4.3.2 SEMANTISCHES HTML GIBT DEN INHALTEN EINE BEDEUTUNG 77
4.3.3 IN HTML5 GIBT ES SEMANTISCHE ELEMENTE FUER LAYOUTBEREICHE 79
4.3.4 INTEGRIERTE ORIENTIERUNGSHILFEN: DIE ARIA LANDMARK ROLES 82
4.3.5 DIE ARIA LANDMARK ROLES IN HTML5 84
6
IMAGE 4
4.4 DIE NEUEN HTML5-ELEMENTE AUF DER BEISPIELSEITE 86
4.4.1 HTML5 BONES: DIE BEISPIELSEITE IM UEBERBLICK 86
4.4.2 DER KOPFBEREICH: HEADER ROLE= BANNER 87
4.4.3 DIE SITE-NAVIGATION: NAV ROLE= NAVIGATION 88
4.4.4 DER HAUPTINHALTSBEREICH: MAIN ROLE= MAIN 89
4.4.5 INHALTE IN ABSCHNITTE UNTERTEILEN: SECTION 90
4.4.6 IN SICH GESCHLOSSENE, EIGENSTAENDIGE INHALTE: ARTICLE 92
4.4.7 ZUSAETZLICHER INHALT MIT ASIDE ROLE= COMPLEMENTARY 93
4.4.8 DER FUSSBEREICH: FOOTER ROLE= CONTENTINFO 94
4.4.9 ES GIBT MEISTENS NICHT NUR EINE RICHTIGE LOESUNG 95
4.5 DIE SEMANTISCHEN STRUKTURELEMENTE IN DER PRAXIS 96
4.5.1 IST DIE WEBWELT SCHON BEREIT FUER DIE NEUEN HTML5-ELEMENTE? 96
4.5.2 DIE SEMANTISCHEN ELEMENTE PER CSS STYLEN 97
4.5.3 HILFE FUER ALTE BROWSER PER JAVASCRIPT: HTML5SHIV 98
4.5.4 WENN DAS HTML VON EINEM CONTENT-MANAGEMENT-SYSTEM
ERZEUGT WIRD 99
4.5.5 UEBUNG: BEISPIELSEITE VON HTML5 BONES GESTALTEN 100
4.6 EXKURS: DER OUTLINE-ALGORITHMUS VON HTML5 103
4.6.1 DIE EBENEN H1 BIS H6 IN HTML5 BONES 103
4.6.2 SECTIONING: ABSCHNITTE MIT NAV , SECTION , ARTICLE
UND ASIDE 105
4.6.3 DEN OUTLINE-ALGORITHMUS TESTEN 106
4.6.4 FAZIT: DER OUTLINE-ALGORITHMUS IST ZUKUNFTSMUSIK 107
4.6.5 UND WAS IST MIT HGROUP ? 108
4.6.6 WIE MAN UNTERTITEL AUSZEICHNEN SOLLTE-ALTERNATIVEN
ZU HGROUP 108
5 KLEINIGKEITEN, FORMULARE UND MULTIMEDIA 111
5.1 ABBILDUNGEN MIT FIGURE UND FIGCAPTION 111
5.1.1 EIN BILD MIT BESCHRIFTUNG 111
5.1.2 MEHRERE BILDER MIT BESCHRIFTUNG 112
5.2 AENDERUNGEN FUER AELTERE HTML-ELEMENTE 113
5.2.1 HYPERLINKS UM BLOCKELEMENTE SIND JETZT ERLAUBT 113
5.2.2 OL : NUMMERIERUNGEN MUESSEN NICHT IMMER MIT 1 ANFANGEN 115
7
IMAGE 5
5.2.3 ADDRESS ZEIGT KONTAKTINFORMATIONEN FUER DIE SEITE
UND FUER ARTIKEL 116
5.2.4 SMALL STEHT JETZT FUER DAS KLEINGEDRUCKTE 117
5.2.5 HR MARKIERT EINEN INHALTLICHEN BRUCH INNERHALB EINES
ABSCHNITTS 118
5.3 DIE VERSCHIEDENEN FORMEN DER HERVORHEBUNG 118
5.3.1 STRONG KENNZEICHNET WICHTIGEN TEXT 118
5.3.2 EM KENNZEICHNET EINE ANDERE SPRACHLICHE BETONUNG 119
5.3.3 I KENNZEICHNET BEGRIFFE, NAMEN ODER AEHNLICHES IM FLIESSTEXT 120
5.3.4 B HEBT TEXTE WIE ZUM BEISPIEL TEASER AB 120
5.3.5 MARK HEBT TEXT HERVOR, DER FUER DEN BENUTZER WICHTIG IST 121
5.3.6 UEBERSICHT: MERKHILFEN FUER DIE ELEMENTE ZUR HERVORHEBUNG 122
5.4 TIME : ZEIT FUER MENSCHEN UND MASCHINEN 122
5.4.1 DATUMSANGABEN MIT TIME 123
5.4.2 DIE UHRZEIT MIT TIME 123
5.5 FORMULARE IN HTML5: NEUE ATTRIBUTE 125
5.5.1 PLATZHALTER: FORMULARFELDER V ORBELEGEN MIT PLACEHOLDER 125
5.5.2 PFLICHTFELDER DEFINIEREN MIT REQUIRED 125
5.5.3 DEN CURSOR AUTOMATISCH PLATZIEREN MIT AUTOFOCUS 126
5.6 FORMULARE IN HTML5: SEMANTISCHE INPUT-TYPEN 126
5.6.1 INPUTTYPE= EMAIL FUER E-MAIL-ADRESSEN 127
5.6.2 EINGABEFELDER FUER WEBADRESSEN UND TELEFONNUMMERN 128
5.6.3 INPUTTYPE= SEARCH FUERDIE SUCHFUNKTION 128
5.6.4 INPUTTYPE= NUMBER FUER ZAHLEN 129
5.6.5 EINGABEFELDER FUER DATUM UND UHRZEIT 131
5.7 HTML5 UND SOUND: AUDIO 132
5.7.1 LETTHERE BE SOUND: AUDIOFORMATE UND BROWSER 133
5.7.2 DIE EINBINDUNG VON AUDIO IM BROWSER MIT HTML5 BONES 134
5.8 ALS DIE BILDER LAUFEN LERNTEN: VIDEO 136
5.8.1 VIDEOFORMATE UND BROWSER IM UEBERBLICK 136
5.8.2 DIE EINBINDUNG VON VIDEO MIT HTML5 BONES 137
6 WORKSHOP: DAS HTML FUER DIE BEISPIELSEITEN 141
6.1 DIE BEISPIELSEITEN IM UEBERBLICK 141
6.2 DER VORSPANN: DAS HTML IM HEAD 142
8
IMAGE 6
6.3 DIE HTML-STRUKTUR IM BODY FUER DIE BEISPIELSEITEN 143
6.3.1 DER SEITENKOPF: DAS HTML IM HEADER 144
6.3.2 DIE NAVIGATION: NAV STEHT UNTERHALB VOM HEADER 144
6.3.3 DER INHALTSBEREICH MIT EINEM WRAPPER UND MAIN 145
6.3.4 DER FUSSBEREICH MIT FOOTER 146
6.4 DER INHALTSBEREICH AUF DEN BEISPIELSEITEN 146
6.4.1 DER INHALT FUER DIE STARTSEITE 147
6.4.2 DER INHALT FUER DIE SEITE NEWS 149
6.4.3 DAS HTMLFUER DIE KONTAKTSEITE 151
6.5 FLEXIBLE GRAFIKEN AUF DEN BEISPIELSEITEN 153
6.5.1 GRAFIKEN: DAS PROBLEM MIT GRAFIKEN MIT IMG 153
6.5.2 SCHRITT 1: JEDES KILOBYTE ZAEHLT-DIE OPTIMIERUNG VON GRAFIKEN 154
6.5.3 SCHRITT 2: GRAFIKEN EINBINDEN MIT IMG OHNE WIDTH
UND HEIGHT 155
6.5.4 SCHRITT 3: FLEXIBLE BILDER PER CSS MIT MAX-WIDTH:100% 157
6.5.5 EXKURS: HOCHAUFLOESENDE DISPLAYS BENOETIGEN GROESSERE GRAFIKEN 158
TEIL II CSS3-INHALTE GESTALTEN
7 TOOLS, ZENTRALISIERUNG UND NORMALISIERUNG 163
7.1 WEBSEITEN AUF KLEINEN BILDSCHIRMEN BETRACHTEN 163
7.1.1 BILDSCHIRMGROESSEN TESTEN: DAS MENUE WEB-ENTWICKLER
IM FIREFOX 163
7.1.2 DAS BOOKMARKLET VIEWPORT RESIZER VON MALTE WASSERMANN 165
7.1.3 DIE WEB DEVELOPER TOOLBAR IN FIREFOX ODER CHROME 166
7.1.4 ONLINE: DIE WEBSITE RESPONSIVE.IS 168
7.2 ZUR ENTWICKLUNG EIN ZENTRALES STYLESHEET EINRICHTEN 169
7.2.1 DIVIDE ET IMPERA: BEIM ENTWICKELN MEHRERE STYLESHEETS BENUTZEN ...
169
7.2.2 @MEDIA STEHT INNERHALB DER EINZELNEN STYLESHEETS 170
7.2.3 WENN DIE SEITEN FERTIG SIND, STYLES IN EINER DATEI VEREINEN 171
7.3 NORMALISIERUNG STATT RESET: NORMALIZE.CSS 171
7.3.1 DIE NORMALISIERUNGFUER NEUE HTML5-ELEMENTE 173
7.3.2 BASISFORMATIERUNG, LINKS, TYPOGRAPHIE UND MEHR 174
7.3.3 NORMALISIERUNGFUER FORMULARE UND TABELLEN 175
9
IMAGE 7
7.4 WORKSHOP: ZENTRALISIERUNG UND GRUNDFORMATIERUNG 176
7.4.1 ZENTRALISIERUNG DER STYLESHEETS 176
7.4.2 CRUNDFORMATIERUNG DER LAYOUTBEREICHE 178
7.5 EXKURS: MODERNIZR HILFT BEIM UMGANG MIT ALTEN BROWSERN 181
7.5.1 MODERNIZR INTERVIEWT DEN BROWSER 181
7.5.2 MODERNIZRAUF WEBSEITEN EINBINDEN 181
7.5.3 EIN EINFACHES BEISPIEL ZUR BENUTZUNG VON MODERNIZR 183
8 SELEKTOREN FUER ALLE FAELLE ISS
8.1 FAMILIENSELEKTOREN: KINDER, GESCHWISTER UND NACHFAHREN 185
8.1.1 ALLE NACHFAHREN AUSWAEHLEN MIT EINER LEERSTELLE: UL II 186
8.1.2 ALLE DIREKTEN KINDER SELEKTIEREN: UL II 186
8.1.3 DIE GESCHWISTERSELEKTOREN: PLUSZEICHEN + UND TILDE ~ 188
8.2 ATTRIBUTSELEKTOREN HABEN ECKIGE KLAMMERN 189
8.2.1 NUR DAS ATTRIBUT: ELEMENT[ATTRIBUT] 190
8.2.2 NUR EIN GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT= ZEICHEN ] 190
8.2.3 MIT TILDE UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT~= ZEICHEN ] 190
8.2.4 MIT HUETCHEN UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT A= ZEICHEN ]
191
8.2.5 MIT DOLLAR UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT$= ZEICHEN ]
191
8.2.6 MIT STERNCHEN UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT*= ZEICHEN ]
192
8.2.7 ZUM NACHSCHLAGEN: ALLE ATTRIBUTSELEKTOREN IN EINER TABELLE 192
8.3 PSEUDOELEMENTE HABEN EINEN DOPPELTEN DOPPELPUNKT 193
8.4 PSEUDOKLASSEN ZUM SELEKTIEREN VON KINDERN 195
8.4.1 GANZ BESONDERE KINDER MIT :FIRST-CHILD,-.LAST-CHILD UND
:ONLY-CHILD .... 196
8.4.2 DER ZAUBERSTAB ZUM KINDERAUSWAEHLEN IST :NTH-CHILD() 197
8.4.3 DIE PSEUDOKLASSEN :FIRST-OF-TYPE, :LAST-OF-TYPE UND
:ONLY-OF-TYPE 200
8.4.4 PSEUDOKLASSEN KOMBINIEREN: ALLE AUSSER DEM ERSTEN UND
DEM LETZTEN 202
8.5 PSEUDOKLASSEN FUER LINKZIELE UND FORMULARE 203
8.5.1 DIE PSEUDOKLASSEN :TARGET, :NOT() UND :EMPTY 203
8.5.2 PSEUDOKLASSEN FUER FORMULARE 204
10
IMAGE 8
8.6 WORKSHOP: GRUNDFORMATIERUNG DER LAYOUTBEREICHE 205
8.6.1 LAYOUTBEREICHE SELEKTIEREN UND MIT INNENABSTAND VERSEHEN 205
8.6.2 DIE ELEMENTE IM KOPF-UND FUSSBEREICH GESTALTEN 206
9 TEXT GESTALTEN MIT CSS3 209
9.1 DIE SCHRIFTGROESSE DEFINIEREN MIT REM 209
9.1.1 FRUEHER MAL STANDARD: EM UND % 209
9.1.2 DIE VORUEBERGEHENDE EMANZIPATION DES PX 210
9.1.3 DAS ROOT EM: REM HAT HTML ALS BASIS 211
9.1.4 PX ALS FALLBACK FUER AELTERE BROWSER 212
9.1.5 ZUM NACHSCHLAGEN: UMRECHNUNG VON PIXEL IN REM 213
9.2 ABSTAENDE IM FLIESSTEXT: LINE-HEIGHT UND MARGIN 214
9.2.1 VERTIKALER MARGIN UND LINE-HEIGHT SIND WICHTIG FUER
DIE LESBARKEIT 215
9.2.2 DER ZEILENABSTAND: LINE-HEIGHT OHNE EINHEIT 215
9.3 WEBFONTS: DIE SCHRIFTART GLEICH MITLIEFERN 217
9.3.1 WEBFONTS UND @FONT-FACE 217
9.3.2 GOOGLE FONTS: GEHOSTETE, LIZENZFREIE SCHRIFTEN IM
HANDUMDREHEN 218
9.3.3 WEBFONTS AUF DEM EIGENEN WEBSPACE 221
9.3.4 ANDERE SCHRIFTARTEN KONVERTIEREN LASSEN 222
9.4 BILDER ALS SCHRIFT: SKALIERBARE SYMBOLE MIT ICONFONTS 223
9.4.1 ICONFONTS AM BEISPIEL GENERICONS: DIE EINBINDUNG 224
9.4.2 BEISPIEL NR. 1: DAS TWITTER-SYMBOL ALS SCHRIFT EINBINDEN 225
9.4.3 BEISPIEL NR. 2: EINE SOCIAL-MEDIA-LEISTE MIT ICONFONTS 226
9.4.4 BEISPIEL NR. 3: HAEKCHEN ALS AUFZAEHLUNGSZEICHEN 228
9.5 SCHATTEN IM TEXT: TEXT-SHADOW 230
9.5.1 DIE SYNTAX UND EIN PAAR EINFACHE BEISPIELE 230
9.5.2 EFFEKTE MIT MEHRFACHEN SCHATTEN 231
9.6 WORKSHOP: TEXTFORMATIERUNG FUER DIE BEISPIELSITE 232
9.6.1 DOSIS-SCHRIFTGESTALTUNG FUER DEN KOPFBEREICH 233
9.6.2 OPEN SANS - SCHRIFTGESTALTUNG FUER UEBERSCHRIFTEN UND FLIESSTEXT
234
9.6.3 GENERICONS - SOCIAL-MEDIA-ICONS IM FUSSBEREICH 236
11
IMAGE 9
10 BOXEN GESTALTEN MIT CSS3 239
10.1 BOXEN WIE IM RICHTIGEN LEBEN: BOX-SIZING: BORDER-BOX 239
10.1.1 DAS KLASSISCHE BOX-MODELL: BOX-SIZING: CONTENT-BOX 239
10.1.2 VERSCHIEDENE EINHEITEN UND DAS DOPPELTE DIV 241
10.1.3 DIE BORDER-BOX ALS ALTERNATIVE ZUM TRADITIONELLEN BOX-MODELL 242
10.1.4 CANIUSE.COM: DIE BORDER-BOX IM WEBALLTAG 244
10.2 CSS3 STATT GRAFIK: SCHATTEN, RUNDE ECKEN UND FARBVERLAEUFE 245
10.2.1 SCHATTENBOXEN MIT BOX-SHADOW 246
10.2.2 RUNDE ECKEN MIT BORDER-RADIUS 248
10.2.3 LINEARE FARBVERLAEUFE: DIE SYNTAX 251
10.2.4 FARBVERLAEUFE ERSTELLEN MIT DEM
ULTIMATE CSS GRADIENT GENERATOR 252
10.3 TRANSPARENTE BOXEN: OPACITY UND ALPHAKANAL 254
10.4 BEWEGUNG MIT CSS3: TRANSFORM UND TRANSITION 255
10.4.1 TRANSFORMERS: ELEMENTE BEWEGEN MIT TRANSFORM 255
10.4.2 ELEMENTE VERGROESSERN MIT TRANSFORM: SCALE() 257
10.4.3 ELEMENTE DREHEN MIT TRANSFORM: ROTATE() 258
10.4.4 ELEMENTE VERSCHIEBEN MIT TRANSFORM: TRANSLATE() 259
10.4.5 FLIESSENDE UEBERGAENGE MIT TRANSITION 260
10.5 WORKSHOP: DEN INHALT DER BEISPIELSEITEN GESTALTEN 263
10.5.1 GRAFIK IM INHALTSBEREICH GESTALTEN 263
10.5.2 UEBERSCHRIFTEN UND FLIESSTEXT GESTALTEN 264
10.5.3 DAS FORMULAR AUF DER KONTAKTSEITE GESTALTEN 266
11 MOBILE NAVIGATION 269
11.1 MOBILE NAVIGATION: ENTDECKE DIE MOEGLICHKEITEN 269
11.1.1 MOEGLICHKEIT 1: ALLES SO LASSEN, WIE ES IST 269
11.1.2 MOEGLICHKEIT 2: DIE NAVIGATIONSPUNKTE UNTEREINANDER 270
11.1.3 MOEGLICHKEIT 3: DIE NAVIGATION IM FOOTER PLATZIEREN 271
11.1.4 MOEGLICHKEIT 4: DIE NAVIGATION ALS SELECT-LISTE 272
11.1.5 MOEGLICHKEIT 5: TOGGLE-MENUES-EINE ART DROPDOWN 274
11.1.6 NUETZLICHE WEBSITES ZU RESPONSIVEN NAVIGATIONEN 275
11.2 WORKSHOP: EINE NAVIGATION FUER DIE BEISPIELSEITEN 276
12
IMAGE 10
11.2.1 DAS PROBLEM VON DROPDOWN-NAVIGATIONEN AUF TOUCHSCREENS 276
11.2.2 DIE NAVIGATION IM UEBERBLICK 277
11.2.3 SCHRITT 1: DAS HTML 278
11.2.4 SCHRITT 2: MENUEBUTTON POSITIONIEREN UND GESTALTEN 279
11.2.5 SCHRITT 3: DIE GESTALTUNG DES NAVIGATIONSB.EREICHS 281
11.2.6 SCHRITT 4: DIE GESTALTUNG DER LINKS IN DER NAVIGATIONSLISTE 282
11.2.7 SCHRITT 5: RIGHT ON :TARGET-DIE NAVIGATION IN AKTION 284
11.2.8 SCHRITT 6: DIE NAVIGATIONSLISTE WIEDER AUSBLENDEN 286
11.3 TESTEN, TESTEN, TESTEN 287
11.3.1 EIN KLEINER VIEWPORT REICHT NICHT ZUM TESTEN VON INTERAKTIONEN
288
11.3.2 TOOLS ZUM TESTEN: ECHTE GERAETE, EMULATOREN UND SIMULATOREN 290
11.3.3 DER IOS-SIMULATOR-IPHONE UND IPAD SIMULIEREN (NUR OS X) 291
TEIL III GETTING RESPONSIVE - MEDIA QUERIES, GRIDS
UND FRAMEWORKS
12 MEDIA QUERIES - DIE SEITEN WERDEN RESPONSIV 297
12.1 CSS 2: MEDIENTYPEN DEFINIEREN DAS AUSGABEMEDIUM 297
12.1.1 EINE DRUCKVERSION MIT @MEDIA PRINT 297
12.1.2 SMARTPHONES UND TABLETS KENNEN DEN MEDIENTYP
HANDHELD NICHT 300
12.2 CSS3: MEDIA QUERIES ERGAENZEN DIE MEDIENTYPEN 300
12.2.1 DIE GRUNDLEGENDE SYNTAX: @MEDIA MEDIENTYP AND
(MEDIA QUERY) 301
12.2.2 MEDIA QUERIES: GAENGIGE BREITEN FUER BREAKPOINTS 302
12.2.3 WAS MAN MIT MEDIA QUERIES ALLES SO ABFRAGEN KANN 304
12.2.4 OHNE META NAME= VIEWPORT FUNKTIONIEREN
MEDIA QUERIES NICHT 305
12.2.5 EIN PIXEL IST NICHT IMMEREIN PIXEL. LEKTUERE FREIWILLIG 306
12.3 WORKSHOP NR. 1: DIE NAVIGATION WIRD RESPONSIV 308
12.3.1 SCHRITT 1: DIE BASISVERSION OHNE MEDIA QUERY 308
12.3.2 SCHRITT 2: DIE MOBILE VERSION-VON 320PX BIS 767PX 309
12.3.3 SCHRITT 3: EINE HORIZONTALE NAVIGATION FUER DEN DESKTOP
(AB768PX) 310
13
IMAGE 11
12.4 WORKSHOP NR. 2: DAS LAYOUT WIRD RESPONSIV 312
12.4.1 SCHRITT 1: DIE WEBSEITEN IM BROWSERFENSTER ZENTRIEREN 312
12.4.2 SCHRITT 2: DEN HINTERGRUND DER WEBSEITEN GESTALTEN 313
12.4.3 EXKURS: COVER ME-FLAECHENDECKENDE HINTERGRUNDGRAFIKEN 315
12.5 WORKSHOP NR. 3: DER INHALTSBEREICH WIRD RESPONSIV 317
12.5.1 SCHRITT 1: STARTSEITE-EIN BILD NEBEN DEN TEXT STELLEN 318
12.5.2 SCHRITT 2: STARTSEITE-DREI ABSAETZE NEBENEINANDERSTELLEN 319
12.5.3 SCHRITT 3: NEWS-SEITE-EINEN ZWEISPALTIGEN INHALTSBEREICH
ERSTELLEN 321
13 LAYOUTS MIT RASTER - EIN GRIDSYSTEM ERSTELLEN 325
13.1 RASTERLAYOUTS - GESTALTEN MIT CRIDS 325
13.1.1 EIN GRID IST EIN RASTER UND SCHAFFT ORDNUNG 326
13.1.2 GRIDS SIND EIN WERKZEUG FUER GRAFIKDESIGNER 327
13.1.3 RASTERFAHNDUNG: GRIDLAYOUTS IM WEB 328
13.1.4 GRID-FRAMEWORKS DREHEN DEN DESIGNPROZESS UM 330
13.2 EIN 960PX-CRID MIT ZWOELF SPALTEN 330
13.2.1 VISUALISIERUNG: DAS GRID IN DER UEBERSICHT 331
13.2.2 DIE CSS-KLASSEN FUER DAS GRID 331
13.3 WORKSHOP NR. 1: DAS 960PX-GRID ERSTELLEN 333
13.3.1 SCHRITT 1: VORBEREITUNG-DAS HTML FUER DIE BEISPIELSEITEN
ERGAENZEN 333
13.3.2 SCHRITT 2: DAS FUNDAMENT-GRUNDFORMATIERUNG FUER BEIDE
GRIDSTUFEN 334
13.3.3 SCHRITT 3: DIE CSS-KLASSEN FUER DAS 960PX-GRID DEFINIEREN 336
13.4 SPIELREGELN ZUR ARBEIT MIT DEN CRIDKLASSEN 337
13.5 WORKSHOP NR. 2: DIE SEITEN MIT DEM GRID GESTALTEN 338
13.5.1 SCHRITT 1: GRIDKLASSEN FUER DIE ELEMENTE IM INHALTSBEREICH
ZUWEISEN .. 338
13.5.2 SCHRITT 2: DAS LAYOUT PRUEFEN MIT EINEM GRID-OVERLAY 339
13.5.3 INTERMEZZO: DIE FLEXIBILITAET EINES GRIDS: 2X2 STATT 3+1 341
13.5.4 SCHRITT 3: DIE SEITE NEWS 342
13.5.5 SCHRITT 4: DIE KONTAKTSEITE 344
13.6 WORKSHOP NR. 3: DIE ERGAENZUNG- DAS 744PX-GRID 345
13.6.1 SCHRITT 1: EIN 744PX BREITES GRID MIT 12 SPALTEN AE 42PX 345
13.6.2 SCHRITT 2: DIE SEITEN IM BROWSER MIT EINEM GRID-OVERLAY TESTEN
346
14
IMAGE 12
13.7 WORKSHOP NR. 4: BORDER-BOX FUER EIN STABILERES GRID 348
IB.7.1 DAS PROBLEM MIT HORIZONTALEN ABSTAENDEN 348
13.7.2 DIE EINFACHE LOESUNG: BORDER-BOX FUER BETROFFENE ELEMENTE 349
13.7.3 DIE GRUENDLICHE LOESUNG: BORDER-BOX FUER ALLE 350
13.8 FAZIT: EIN GRID MIT MEHREREN STUFEN 350
13.9 FRONTEND-FRAMEWORKS TRENNEN LAYOUTGERUEST UND INHALT 351
14 FLEXIBLES GRID, NEUES LAYOUT UND DESKTOP FIRST 355
14.1 WORKSHOP NR. 1: DAS GRID WIRD FLEXIBEL 355
14.1.1 DIE ZAUBERFORMEL ZUR UMRECHNUNG VON PIXEL IN PROZENT 356
14.1.2 SCHRITT 1: DAS FUNDAMENT FUER DAS FLEXIBLE GRID 357
14.1.3 SCHRITT 2: PROZENTUALE AUSSENABSTAENDE UND SEITENBEGRENZUNG 358
14.1.4 SCHRITT 3: DIE GRIDKLASSEN MIT BREITEN IN PROZENT 359
14.2 WORKSHOP NR. 2: VOLLE BREITE - EIN FULL-PAGE-LAYOUT 361
14.2.1 SCHRITT 1: ZWEI AENDERUNGEN IN LAYOUT.CSS 361
14.2.2 SCHRITT 2: HORIZONTALEN INNENABSTAND VON LAYOUTBEREICHEN
ENTFERNEN 362
14.2.3 SCHRITT 3: DIE AUSSENABSTAENDE FUER DAS GRID 362
14.2.4 SCHRITT 4: DIE SEITENBREITE DEFINIEREN 363
14.3 10,9,8,7...-DER COUNTDOWN IM INTERNET EXPLORER 364
14.3.1 WEBSEITEN TESTEN IN VERSCHIEDENEN LE-VERSIONEN 364
14.3.2 DIE BEISPIELSEITEN IM INTERNET EXPLORER 9 UND 10 366
14.3.3 DIE BEISPIELSEITEN IM INTERNET EXPLORER 8 366
14.3.4 MOEGLICHKEIT 1: WENIG ODER GAR NICHTS UNTERNEHMEN 367
14.3.5 MOEGLICHKEIT 2: SPEZIELLES STYLESHEET ERSTELLEN UND PER
CC AUSLIEFERN 369
14.3.6 MOEGLICHKEIT 3: NACHHILFE PER JAVASCRIPT-RESPOND.JS 370
14.3.7 MOEGLICHKEIT 4: DESKTOP FIRST STATT MOBILE FIRST 371
14.4 EXKURS: DIE BEISPIELSEITEN AE LA DESKTOP FIRST 371
14.4.1 DER UNTERSCHIED: MOBILE FIRST VERSUS DESKTOP FIRST 372
14.4.2 SCHRITT 1: GRIDFULLPAGE.CSS-AENDERUNGEN AM FLEXIBLEN GRID 372
14.4.3 SCHRITT 2: AENDERUNGEN AN DER NAVIGATION - NAVIGATION.CSS 374
14.4.4 SCHRITT 3: DIE MOBILE NAVIGATION NACHBESSERN 375
14.4.5 SCHRITT 4: DIE BASISNAVIGATION NACHBESSERN 377
15
IMAGE 13
15 INHALTE FUER RESPONSIVE WEBSEITEN GESTALTEN 379
15.1 WORKSHOP NR. 1: OPTIMIERUNG DER ZEILENLAENGE 379
15.1.1 SCHRITT 1: MIT ROTEN STERNCHEN DIE ZEILENLAENGE TESTEN 380
15.1.2 SCHRITT 2: WENN DIE ZEILEN ZU KURZ ODER ZU LANG SIND 382
15.2 WORKSHOP NR. 2: AKKORDEON-TEXT EIN-UND AUSBLENDEN 384
15.2.1 EIN AKKORDEON SPART PLATZ AUF DEM BILDSCHIRM 384
15.2.2 SCHRITT 1: DAS HTML IN NEWS.HTML VORBEREITEN 386
15.2.3 SCHRITT 2: DIE UEBERSCHRIFT GESTALTEN 387
15.2.4 SCHRITT 3: DAS AKKORDEON EINSCHALTEN 388
15.2.5 SCHRITT 4: EIN CENERICON EINBINDEN 390
15.2.6 SCHRITT 5: ZUSTANDSANZEIGE - DAS GENERICON BEIM AUSKLAPPEN
AENDERN 391
15.2.7 SCHRITT 6: AKKORDEON NUR FUER KLEINE BILDSCHIRME ANZEIGEN 392
15.3 WORKSHOP NR. 3: JQUERY EINBINDEN 394
15.3.1 JAVASCRIPT, JQUERY UND JQUERY-PLUGINS 394
15.3.2 SCHRITT 1: JQUERY DOWNLOADEN 394
15.3.3 SCHRITT 2: JQUERY EINBINDEN 396
15.4 WORKSHOP NR.4: FLEXSLIDER 2 -EIN RESPONSIVER SLIDER 396
15.4.1 SCHRITT 1: FLEXSLIDER 2 DOWNLOADEN UND EINBINDEN 397
15.4.2 SCHRITT 2: DIE SLIDESHOW ERSTELLEN 398
15.5 WORKSHOP NR. 5: FLEXIBLE VIDEOS MIT FITVIDS.JS 400
15.5.1 SCHRITT 1: EIN VIDEO VON EINEM VIDEOPORTAL EINBINDEN 400
15.5.2 SCHRITT 2-. DAS JQUERY-PLUGIN FITVIDS.JS EINBAUEN 402
15.6 EXKURS: RESPONSIVE BILDER MIT ADAPTIVE IMAGES 404
15.6.1 ADAPTIVE IMAGES HERUNTERLADEN UND ENTPACKEN 404
15.6.2 DIE INSTALLATION VON ADAPTIVE IMAGES 405
15.6.3 TESTEN VON ADAPTIVE IMAGES 407
16 RESPONSIVE FRONTEND-FRAMEWORKS 409
16.1 WAS FRONTEND-FRAMEWORKS FUER SIE TUN KOENNEN 409
16.1.1 WAS FRAMEWORKS SIND 409
16.1.2 VOR-UND NACHTEILE VON FRAMEWORKS 410
16.1.3 FRONTEND-FRAMEWORKS: DIE QUAL DER WAHL 411
16
IMAGE 14
413
414
414
416
417
419
420
421
423
426
427
429
431
432
432
433
434
435
437
439
441
17
YAML 4 - DAS CSS-FRAMEWORK
16.2.1 YAML4 IM UEBERBLICK
16.2.2 DOKUMENTATION, DOWNLOAD UND ORDNERSTRUKTUR
WORKSHOP: RAPID PROTOTYPING MIT YAML 4
16.3.1 SCHRITT 1: BASIC HTML/CSS TEMPLATE - DIE HTML-GRUNDSTRUKTUR
....
16.3.2 SCHRITT 2: DAS ZENTRALE STYLESHEET STYLES.CSS
16.3.3 SCHRITT 3: DAS LAYOUT-MODULE - DIE CRUNDSTRUKTUR IM BODY
16.3.4 SCHRITT 4: INHALT FUER KOPFBEREICH, NAVIGATION UND FOOTER EINFUEGEN
....
16.3.5 SCHRITT 4: GRID-MODULE - EIN FLEXIBLES GRID IM HANDUMDREHEN
16.3.6 SCHRITT 5: GRID MODULE - EINE ZWEITE GRIDZEILE IM
INHALTSBEREICH ...
16.3.7 SCHRITT 6: LINEARISIERUNG-ELEMENTE UNTEREINANDERSTELLEN
16.3.8 YAML IST NICHT NUR FUER PROTOTYPEN - EIGENE LAYOUTS ERSTELLEN
16.3.9 THINKIN TAGS - PROTOTYPEN IM BROWSER ENTWICKELN
FOUNDATION 4-EIN RESPONSIVES FRONTEND-FRAMEWORK
16.4.1 FOUNDATION IM UEBERBLICK
16.4.2 DOKUMENTATION, DOWNLOAD UND ORDNERSTRUKTUR
WORKSHOP: RAPID PROTOTYPING MIT FOUNDATION
16.5.1 SCHRITT 1: DAS GRID FUER DIE STARTSEITE ERSTELLEN
16.5.2 SCHRITT 2: TOPBAR - EIN NAVIGATIONSMODUL EINFUEGEN
16.5.3 FOUNDATION IST IDEAL FUER PROTOTYPEN
|
| 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 | BV041262961 |
| classification_rvk | ST 252 |
| classification_tum | DAT 675f |
| ctrlnum | (OCoLC)857765408 (DE-599)DNB1034049364 |
| 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 | 1. Aufl. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>02580nam a2200577 c 4500</leader><controlfield tag="001">BV041262961</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20200114 </controlfield><controlfield tag="007">t|</controlfield><controlfield tag="008">130910s2013 gw a||| |||| 00||| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">13,N19</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1034049364</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836225199</subfield><subfield code="c">Pb. : EUR 24.90 (DE), EUR 25.60 (AT), sfr 32.90 (freier Pr.)</subfield><subfield code="9">978-3-8362-2519-9</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836225190</subfield><subfield code="9">3-8362-2519-0</subfield></datafield><datafield tag="024" ind1="3" ind2=" "><subfield code="a">9783836225199</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)857765408</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1034049364</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-M347</subfield><subfield code="a">DE-1043</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-19</subfield><subfield code="a">DE-83</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-91G</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-861</subfield><subfield code="a">DE-526</subfield><subfield code="a">DE-525</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-824</subfield><subfield code="a">DE-1051</subfield><subfield code="a">DE-70</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 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">DAT 675f</subfield><subfield code="2">stub</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">004</subfield><subfield code="2">sdnb</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 ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts]</subfield><subfield code="c">Peter Müller</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">1. Aufl.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Galileo Press</subfield><subfield code="c">2013</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">448 S.</subfield><subfield code="b">Ill.</subfield><subfield code="c">230 mm x 172 mm</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">Galileo Computing</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="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">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">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">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</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=4308901&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=026236744&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-026236744</subfield></datafield></record></collection> |
| id | DE-604.BV041262961 |
| illustrated | Illustrated |
| indexdate | 2024-12-20T16:34:29Z |
| institution | BVB |
| isbn | 9783836225199 3836225190 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-026236744 |
| oclc_num | 857765408 |
| open_access_boolean | |
| owner | DE-M347 DE-1043 DE-523 DE-19 DE-BY-UBM DE-83 DE-573 DE-92 DE-29T DE-91G DE-BY-TUM DE-1102 DE-861 DE-526 DE-525 DE-863 DE-BY-FWS DE-824 DE-1051 DE-70 |
| owner_facet | DE-M347 DE-1043 DE-523 DE-19 DE-BY-UBM DE-83 DE-573 DE-92 DE-29T DE-91G DE-BY-TUM DE-1102 DE-861 DE-526 DE-525 DE-863 DE-BY-FWS DE-824 DE-1051 DE-70 |
| physical | 448 S. Ill. 230 mm x 172 mm |
| publishDate | 2013 |
| publishDateSearch | 2013 |
| publishDateSort | 2013 |
| publisher | Galileo Press |
| record_format | marc |
| series2 | Galileo Computing |
| spellingShingle | Müller, Peter 1960- Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] HTML 5.0 (DE-588)7704810-6 gnd Gestaltung (DE-588)4157139-3 gnd Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd Website (DE-588)4596172-4 gnd Responsive Webdesign (DE-588)1035443651 gnd |
| subject_GND | (DE-588)7704810-6 (DE-588)4157139-3 (DE-588)7750895-6 (DE-588)1041632088 (DE-588)4596172-4 (DE-588)1035443651 |
| title | Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] |
| title_auth | Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] |
| title_exact_search | Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] |
| title_full | Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] Peter Müller |
| title_fullStr | Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] Peter Müller |
| title_full_unstemmed | Flexible Boxes eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] Peter Müller |
| title_short | Flexible Boxes |
| title_sort | flexible boxes eine einfuhrung in moderne websites alle wichtigen html5 elemente und css3 eigenschaften grundlagen und konzepte fur responsive webdesign mobile navigation media queries und gridlayouts |
| title_sub | eine Einführung in moderne Websites ; [alle wichtigen HTML5-Elemente und CSS3-Eigenschaften ; Grundlagen und Konzepte für Responsive Webdesign ; Mobile Navigation, Media Queries und Gridlayouts] |
| topic | HTML 5.0 (DE-588)7704810-6 gnd Gestaltung (DE-588)4157139-3 gnd Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd Website (DE-588)4596172-4 gnd Responsive Webdesign (DE-588)1035443651 gnd |
| topic_facet | HTML 5.0 Gestaltung Cascading Style Sheets 3.0 Webdesign Website Responsive Webdesign |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=4308901&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=026236744&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT mullerpeter flexibleboxeseineeinfuhrunginmodernewebsitesallewichtigenhtml5elementeundcss3eigenschaftengrundlagenundkonzeptefurresponsivewebdesignmobilenavigationmediaqueriesundgridlayouts |
Table of Contents
Order paper/chapter scan
Order paper/chapter scan
Branch Library Mathematics & Informatics
| Call Number: |
0102 DAT 675f 2014 A 208
Floor plan |
|---|---|
| Copy 1 | Available for loan On Shelf |