E-Book, Deutsch, 418 Seiten
Maurice Mobile Webseiten
1. Auflage 2012
ISBN: 978-3-446-43279-6
Verlag: Carl Hanser Fachbuchverlag
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)
Strategien, Techniken, Dos und Don'ts für Webentwickler
E-Book, Deutsch, 418 Seiten
ISBN: 978-3-446-43279-6
Verlag: Carl Hanser Fachbuchverlag
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)
Das Ergebnis kann sein:
- eine optimierte Webseite, die gleichermaßen auf Desktop und mobilen Geräten funktioniert
- eine eigene Website-Version für den mobilen Zugriff
- eine WebApp, also eine Website, die sich optisch und funktional an den Apps orientiert
Wie all das geht, zeigt Ihnen dieses Buch. Es ist ein praktischer Leitfaden, der Sie professionell durch das komplexe Thema führt - übersichtlich, mit zahlreichen Beispielen und Tipps sowie Hinweisen auf Besonderheiten und Stolperfallen. Sie lernen die Vor- und Nachteile der jeweiligen Varianten mobiler Webseiten kennen sowie die Kriterien, nach denen eine bestehende Website nur leicht anzupassen oder eine eigene Version bzw. eine WebApp zu programmieren ist.
Teil I des Buches beschreibt Ihnen generelle Strategien und Usability-Basics für die Planung und Entwicklung von Websites für mobile Geräte.
Teil II vermittelt die Techniken: Dos und Don'ts bei HTML & CSS// Performance-Optimierung// Responsive Design: CSS3 Media Queries, Bilder-Handling// JavaScript bei mobilen Webseiten// Neue APIs: Geolocation-API, HTML5 Local Storage, Offline-Application// Frameworks: jQuery Mobile, Sencha Touch, HTML5-Frameworks// Serverseitige Weichen: BrowserSniffing, Content-Adaption// Testmöglichkeiten
Auf der Website zum Buch finden Sie die Listings aus dem Buch, JavaScript-Bibliotheken und bei Bedarf Aktualisierungen.
Über den Autor:
Dr. Florence Maurice arbeitet freiberuflich als Trainerin, Autorin und Projektleiterin. Ihr Schwerpunkt ist die Web-Programmierung, von den Basics wie HTML bis zu fortgeschrittenen CSS-Techniken und serverseitiger Programmierung per PHP.
Autoren/Hrsg.
Weitere Infos & Material
1;Inhalt;6
2;Vorwort;14
3;Teil I: Basics;18
4;1 Mobile Nutzer;20
4.1;1.1 Wachstum und Bedeutung;20
4.2;1.2 Besonderheiten von mobilen Geräten;21
4.2.1;1.2.1 Größe des Bildschirms;22
4.2.2;1.2.2 Datenübertragung;22
4.2.3;1.2.3 Stromversorgung;23
4.2.4;1.2.4 Zusätzliche Features;23
4.3;1.3 Mobiler Kontext;24
4.4;1.4 Einschränkungen oder neue Möglichkeiten?;26
4.5;1.5 Browser und Geräte;27
4.6;1.6 Kurz zusammengefasst;32
5;2 Strategien für mobile Webseiten;34
5.1;2.1 Optimierungen der Desktop-Seite;34
5.2;2.2 Progressive Enhancement und Feature Detection;35
5.3;2.3 Responsive Webdesign;36
5.4;2.4 Separate mobile Webseiten;38
5.5;2.5 Mobile WebApps;42
5.6;2.6 Native Anwendungen;44
5.7;2.7 Die Mischung machts;45
5.8;2.8 Kurz zusammengefasst;46
6;3 Anordnung der Inhalte;48
6.1;3.1 Darstellung von Webseiten auf gängigen Geräten;48
6.2;3.2 Kopfbereich und Navigation;51
6.3;3.3 Organisation der Inhalte;54
6.4;3.4 Input vom Benutzer;55
6.5;3.5 Mobile Design Patterns;56
6.5.1;3.5.1 Karussell;56
6.5.2;3.5.2 Tabs;57
6.5.3;3.5.3 Listen;57
6.6;3.6 Kurz zusammengefasst;58
7;Teil II: Techniken;60
8;4 Das richtige Markup für mobile Webseiten;62
8.1;4.1 Semantisches Markup;62
8.2;4.2 HTML für mobile Geräte;63
8.3;4.3 XHTML Mobile Profile und XHTML Basic;64
8.3.1;4.3.1 XHTML Mobile Profile;64
8.3.2;4.3.2 XHTML Basic;67
8.4;4.4 HTML5;68
8.4.1;4.4.1 HTML5 – das Markup;68
8.4.2;4.4.2 HTML5 als HTML – Schreibweisen;70
8.4.3;4.4.3 Neue Elemente in HTML5;72
8.5;4.5 Bessere Formulare;76
8.5.1;4.5.1 Formulare, aber richtig;76
8.5.2;4.5.2 Richtige Tastatur dank neuer Input-Typen;78
8.5.3;4.5.3 Weitere neue Eingabefelder;81
8.5.4;4.5.4 Fazit und Empfehlung für HTML5-Formularelemente;83
8.6;4.6 Links auf Telefonnummern;84
8.7;4.7 Meta-Angaben für Smartphones und Co.;85
8.7.1;4.7.1 Viewport steuern;85
8.7.2;4.7.2 App-like: Icons und mehr;92
8.8;4.8 Conditional Comments;94
8.9;4.9 Solide HTML5-Basis dank Mobile Boilerplate;95
8.10;4.10 Kurz zusammengefasst;95
9;5 CSS für mobile Geräte;96
9.1;5.1 CSS und Progressive Enhancement;96
9.2;5.2 CSS für schwächere mobile Geräte;101
9.2.1;5.2.1 WCSS;101
9.2.2;5.2.2 CSS Mobile Profile 2.0;102
9.3;5.3 CSS-Pseudoklassen;102
9.4;5.4 position: fixed & Co.;103
9.5;5.5 Transparenzen;104
9.6;5.6 Webfonts;107
9.7;5.7 Abgerundete Ecken, Schatten und mehr;109
9.8;5.8 Farbverläufe;111
9.9;5.9 Transformationen;116
9.9.1;5.9.1 2D-Transformationen;116
9.9.2;5.9.2 3D-Transformationen;121
9.10;5.10 Transitions und Animations;125
9.10.1;5.10.1 Transitions;125
9.10.2;5.10.2 Animations;130
9.11;5.11 Media-Angabe und Media-Queries;132
9.12;5.12 Kurz zusammengefasst;132
10;6 Performance-Optimierung;134
10.1;6.1 Tools;135
10.2;6.2 Allgemeine Codeoptimierungen;136
10.2.1;6.2.1 Semantisches HTML;136
10.2.2;6.2.2 CSS-Code optimieren;137
10.2.3;6.2.3 Links kontrollieren;138
10.2.4;6.2.4 Inhalte asynchron laden;138
10.3;6.3 Reduzierung;138
10.4;6.4 HTTP-Komprimierung;139
10.5;6.5 HTTP-Requests reduzieren & optimieren;140
10.5.1;6.5.1 CSS-Dateien zusammenfassen und richtig einbinden;141
10.5.2;6.5.2 JavaScript-Dateien zusammenfassen;141
10.5.3;6.5.3 JavaScript und CSS richtig kombinieren;141
10.5.4;6.5.4 CDN nutzen;142
10.5.5;6.5.5 Cookies richtig nutzen;142
10.6;6.6 Cachen;143
10.7;6.7 Besonderheiten bei mobilen Geräten;146
10.8;6.8 Kurz zusammengefasst;148
11;7 Bilder und mehr;150
11.1;7.1 Allgemeine Bildoptimierung;150
11.2;7.2 Bilder im HTML-Code;151
11.3;7.3 Hintergrundbilder;153
11.4;7.4 Scharfe Bilder auf scharfen Displays;154
11.5;7.5 Skalierbare Bilder;156
11.5.1;7.5.1 Texte und Schrifticons;156
11.5.2;7.5.2 Bilder im SVG-Format;157
11.6;7.6 CSS-Sprites;159
11.6.1;7.6.1 Mehrfachverwertung von Bildern;163
11.7;7.7 CSS zur Bildreduktion;164
11.7.1;7.7.1 Malen über CSS;164
11.7.2;7.7.2 CSS3-Eigenschaften;165
11.8;7.8 Bilder einsparen über Symbole;166
11.9;7.9 Data-URLs;167
11.10;7.10 Kurz zusammengefasst;168
12;8 JavaScript für mobile Geräte;170
12.1;8.1 JavaScript, aber richtig!;170
12.1.1;8.1.1 Strenger ist besser;170
12.1.2;8.1.2 Code prüfen mit JSLint;171
12.1.3;8.1.3 Besser trennen;172
12.1.4;8.1.4 Feature-Tests;175
12.1.5;8.1.5 Performantes JavaScript;177
12.1.6;8.1.6 Spezialfall: Opera Mini und JavaScript;179
12.2;8.2 JavaScript-Bibliotheken;180
12.2.1;8.2.1 Size matters;180
12.2.2;8.2.2 Spezielle Bibliotheken für den mobilen Einsatz;180
12.3;8.3 Events für Touchscreens;182
12.3.1;8.3.1 Aus Berührungen werden Gesten;187
12.4;8.4 Kurz zusammengefasst;189
13;9 Neue APIs und wichtige Spezifikationen;190
13.1;9.1 Offline Web Applications – AppCache;190
13.1.1;9.1.1 Das Grundprinzip von AppCache;191
13.1.2;9.1.2 Offline-Dateien überprüfen;195
13.1.3;9.1.3 Änderungen an den Dateien durchführen;198
13.1.4;9.1.4 JavaScript-API für Offline-Cache;199
13.1.5;9.1.5 Browserunterstützung für AppCache;201
13.2;9.2 W3C-Widgets – gut verpackt ist halb gewonnen;202
13.3;9.3 WebStorage;205
13.3.1;9.3.1 WebStorage;208
13.3.2;9.3.2 localStorage – Strings, sonst nichts;209
13.3.3;9.3.3 localStorage und sessionStorage im Browser überprüfen;210
13.3.4;9.3.4 Unterstützung von localStorage testen;212
13.3.5;9.3.5 Browserunterstützung für WebStorage;213
13.3.6;9.3.6 localStorage – Kritik und Alternativen;213
13.4;9.4 Geolocation API;214
13.4.1;9.4.1 Erst fragen, dann .....;215
13.4.2;9.4.2 Geolocation API;216
13.4.3;9.4.3 Browserunterstützung für die W3C Geolocation API;220
13.5;9.5 Device Orientation API;221
13.6;9.6 Weitere APIs;226
13.6.1;9.6.1 Media Capture;226
13.6.2;9.6.2 Page Visibility API;226
13.6.3;9.6.3 WebWorkers;226
13.6.4;9.6.4 System Notification;227
13.6.5;9.6.5 Vibration API;227
13.6.6;9.6.6 Battery Status API;227
13.6.7;9.6.7 Network Information API;227
13.7;9.7 Kurz zusammengefasst;228
14;Teil III: Umsetzung;230
15;10 Responsive Webdesign;232
15.1;10.1 Das Grundprinzip des Responsive Webdesigns;232
15.1.1;10.1.1 Flüssige Layouts;233
15.1.2;10.1.2 Flüssige Bilder;239
15.1.3;10.1.3 Media Queries;243
15.2;10.2 Strategien für Media Queries ;249
15.2.1;10.2.1 Die wichtigsten Eigenschaften für Media Queries;249
15.2.2;10.2.2 Scharfe Grafiken auf scharfen Displays;250
15.2.3;10.2.3 Breakpoints definieren;251
15.2.4;10.2.4 Mobile First oder Desktop First?;255
15.2.5;10.2.5 Anzahl der Breakpoints;260
15.3;10.3 Navigationen im Responsive Webdesign;261
15.3.1;10.3.1 Grundlegende Überlegungen zur Navigation;261
15.3.2;10.3.2 Anker-Navigation;265
15.3.3;10.3.3 Auswahlliste;268
15.3.4;10.3.4 Dynamisches Ein-/Ausblenden;271
15.3.5;10.3.5 Buttons oder Icons für die Navigation;278
15.4;10.4 Bilder im Responsive Webdesign – Klappe, die zweite;279
15.4.1;10.4.1 src.sencha.io;279
15.4.2;10.4.2 Adaptive Images;282
15.4.3;10.4.3 Responsive Images von der Filament Group;284
15.5;10.5 Tabellen im Responsive Webdesign;285
15.6;10.6 Weitere Herausforderungen beim Responsive Design;290
15.7;10.7 Fazit ;291
15.8;10.8 Kurz zusammengefasst;292
16;11 jQuery Mobile;294
16.1;11.1 jQuery Mobile – die Features;294
16.2;11.2 Einstieg in jQuery Mobile;295
16.2.1;11.2.1 Einseiten-Template;295
16.2.2;11.2.2 Mehrseiten-Template;298
16.2.3;11.2.3 Dialoge;301
16.3;11.3 Ajax-Navigation;302
16.3.1;11.3.1 Effekte zum Wechseln zwischen den Seiten;304
16.4;11.4 Inhalte gestalten;305
16.4.1;11.4.1 Listen verbessern;305
16.4.2;11.4.2 Buttons definieren und positionieren;307
16.4.3;11.4.3 Navigationsleisten;311
16.4.4;11.4.4 Anordnung von Inhalten;313
16.4.5;11.4.5 Versteckspiele – Accordion und mehr;314
16.4.6;11.4.6 Formulare ;316
16.5;11.5 Theming Framework;320
16.6;11.6 Events und jQuery Mobile – spezifische Methoden;323
16.6.1;11.6.1 pageinit und skriptgesteuerte Seitenänderung;323
16.6.2;11.6.2 mobileinit – Konfigurationen ändern;324
16.6.3;11.6.3 Weitere Events;325
16.6.4;11.6.4 Einstellungen;326
16.7;11.7 Touchereignisse;328
16.8;11.8 jQuery Mobile mit Google Maps kombinieren;330
16.9;11.9 Going Native;332
16.10;11.10 Kurz zusammengefasst;333
17;12 Sencha Touch;334
17.1;12.1 Vorbereitungen;334
17.2;12.2 Erste WebApp erstellen;336
17.3;12.3 WebApp für den produktiven Einsatz erstellen;343
17.4;12.4 Going Native;345
17.5;12.5 Kurz zusammengefasst;346
18;13 Separate mobile Webseiten;348
18.1;13.1 HTTP-User-Agent: Sag mir, wer du bist;348
18.2;13.2 Quick & ..... detectmobilebrowsers.com;351
18.3;13.3 Mehr als nur der User-Agent-String;354
18.4;13.4 php-mobile-detect;356
18.4.1;13.4.1 Grundprinzip von php-mobile-detect;357
18.4.2;13.4.2 Umleitung, Wechsellinks und Speicherung der Wahl;359
18.5;13.5 Mehr Infos dank WURFL;362
18.6;13.6 Nützliches für die Umsetzung;372
18.6.1;13.6.1 Geräteklassen;372
18.6.2;13.6.2 Unterschiede zwischen den Versionen;373
18.6.3;13.6.3 Vary-Header und Canonical;374
18.6.4;13.6.4 Link zum Wechseln;374
18.6.5;13.6.5 Beschriftung der Wechsellinks;375
18.7;13.7 Serverseitige und clientseitige Detection;377
18.8;13.8 Kurz zusammengefasst;378
19;14 Mobile Webseiten testen;380
19.1;14.1 Webserver installieren;380
19.1.1;14.1.1 XAMPP installieren;381
19.1.2;14.1.2 Dateien über den Server aufrufen;383
19.2;14.2 Desktop-Browser nutzen;384
19.2.1;14.2.1 Firefox: User Agent Switcher;384
19.2.2;14.2.2 User-Agent im Safari ändern;385
19.3;14.3 Mobile Browser;386
19.3.1;14.3.1 Opera Mobile;386
19.3.2;14.3.2 Opera Mini;388
19.3.3;14.3.3 Firefox Mobile;391
19.4;14.4 Emulatoren;392
19.4.1;14.4.1 Android SDK installieren;392
19.4.2;14.4.2 Windows Phone Emulator;396
19.4.3;14.4.3 Xcode für die iOS-Entwicklung;396
19.5;14.5 Echte Geräte;397
19.6;14.6 Lokale Webseiten auf Emulatoren und mobilen Geräten testen;399
19.7;14.7 Remote-Debugging mit Opera;400
19.8;14.8 Remote-Debugging mit dem Weinre-Server;404
19.9;14.9 Remote-Debugging mit Adobe Shadow;405
19.10;14.10 Kurz zusammengefasst;409
20;Index;410
