Sie sind hier

E-Book

Mobile Webseiten

Strategien, Techniken, Dos und Don'ts für Webentwickler

Autor	Florence Maurice
Verlag	Carl Hanser Fachbuchverlag
Erscheinungsjahr	2012
Seitenanzahl	418 Seiten
ISBN	9783446432796
Format	PDF
Kopierschutz	Wasserzeichen/DRM
Geräte	PC/MAC/eReader/Tablet
Preis	27,99 EUR

Das Mobiltelefon nimmt eine immer wichtigere Rolle als Informations- und Transaktionsmedium ein - die mobile Nutzung des Internets gewinnt mehr und mehr an Bedeutung. Webseiten sollten deshalb so gestaltet sein, dass sie beim mobilen Zugriff, egal von welcher Plattform aus, optimal funktionieren: Sie müssen schnell laden, gut organisiert sein und wichtige Usability-Prinzipien berücksichtigen.

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.

Kaufen Sie hier:

Horizontale Tabs

Blick ins Buch

Inhaltsverzeichnis

Inhalt	6
Vorwort	14
Teil I: Basics	18
1 Mobile Nutzer	20
1.1 Wachstum und Bedeutung	20
1.2 Besonderheiten von mobilen Geräten	21
1.2.1 Größe des Bildschirms	22
1.2.2 Datenübertragung	22
1.2.3 Stromversorgung	23
1.2.4 Zusätzliche Features	23
1.3 Mobiler Kontext	24
1.4 Einschränkungen oder neue Möglichkeiten?	26
1.5 Browser und Geräte	27
1.6 Kurz zusammengefasst	32
2 Strategien für mobile Webseiten	34
2.1 Optimierungen der Desktop-Seite	34
2.2 Progressive Enhancement und Feature Detection	35
2.3 Responsive Webdesign	36
2.4 Separate mobile Webseiten	38
2.5 Mobile WebApps	42
2.6 Native Anwendungen	44
2.7 Die Mischung machts	45
2.8 Kurz zusammengefasst	46
3 Anordnung der Inhalte	48
3.1 Darstellung von Webseiten auf gängigen Geräten	48
3.2 Kopfbereich und Navigation	51
3.3 Organisation der Inhalte	54
3.4 Input vom Benutzer	55
3.5 Mobile Design Patterns	56
3.5.1 Karussell	56
3.5.2 Tabs	57
3.5.3 Listen	57
3.6 Kurz zusammengefasst	58
Teil II: Techniken	60
4 Das richtige Markup für mobile Webseiten	62
4.1 Semantisches Markup	62
4.2 HTML für mobile Geräte	63
4.3 XHTML Mobile Profile und XHTML Basic	64
4.3.1 XHTML Mobile Profile	64
4.3.2 XHTML Basic	67
4.4 HTML5	68
4.4.1 HTML5 – das Markup	68
4.4.2 HTML5 als HTML – Schreibweisen	70
4.4.3 Neue Elemente in HTML5	72
4.5 Bessere Formulare	76
4.5.1 Formulare, aber richtig	76
4.5.2 Richtige Tastatur dank neuer Input-Typen	78
4.5.3 Weitere neue Eingabefelder	81
4.5.4 Fazit und Empfehlung für HTML5-Formularelemente	83
4.6 Links auf Telefonnummern	84
4.7 Meta-Angaben für Smartphones und Co.	85
4.7.1 Viewport steuern	85
4.7.2 App-like: Icons und mehr	92
4.8 Conditional Comments	94
4.9 Solide HTML5-Basis dank Mobile Boilerplate	95
4.10 Kurz zusammengefasst	95
5 CSS für mobile Geräte	96
5.1 CSS und Progressive Enhancement	96
5.2 CSS für schwächere mobile Geräte	101
5.2.1 WCSS	101
5.2.2 CSS Mobile Profile 2.0	102
5.3 CSS-Pseudoklassen	102
5.4 position: fixed & Co.	103
5.5 Transparenzen	104
5.6 Webfonts	107
5.7 Abgerundete Ecken, Schatten und mehr	109
5.8 Farbverläufe	111
5.9 Transformationen	116
5.9.1 2D-Transformationen	116
5.9.2 3D-Transformationen	121
5.10 Transitions und Animations	125
5.10.1 Transitions	125
5.10.2 Animations	130
5.11 Media-Angabe und Media-Queries	132
5.12 Kurz zusammengefasst	132
6 Performance-Optimierung	134
6.1 Tools	135
6.2 Allgemeine Codeoptimierungen	136
6.2.1 Semantisches HTML	136
6.2.2 CSS-Code optimieren	137
6.2.3 Links kontrollieren	138
6.2.4 Inhalte asynchron laden	138
6.3 Reduzierung	138
6.4 HTTP-Komprimierung	139
6.5 HTTP-Requests reduzieren & optimieren	140
6.5.1 CSS-Dateien zusammenfassen und richtig einbinden	141
6.5.2 JavaScript-Dateien zusammenfassen	141
6.5.3 JavaScript und CSS richtig kombinieren	141
6.5.4 CDN nutzen	142
6.5.5 Cookies richtig nutzen	142
6.6 Cachen	143
6.7 Besonderheiten bei mobilen Geräten	146
6.8 Kurz zusammengefasst	148
7 Bilder und mehr	150
7.1 Allgemeine Bildoptimierung	150
7.2 Bilder im HTML-Code	151
7.3 Hintergrundbilder	153
7.4 Scharfe Bilder auf scharfen Displays	154
7.5 Skalierbare Bilder	156
7.5.1 Texte und Schrifticons	156
7.5.2 Bilder im SVG-Format	157
7.6 CSS-Sprites	159
7.6.1 Mehrfachverwertung von Bildern	163
7.7 CSS zur Bildreduktion	164
7.7.1 Malen über CSS	164
7.7.2 CSS3-Eigenschaften	165
7.8 Bilder einsparen über Symbole	166
7.9 Data-URLs	167
7.10 Kurz zusammengefasst	168
8 JavaScript für mobile Geräte	170
8.1 JavaScript, aber richtig!	170
8.1.1 Strenger ist besser	170
8.1.2 Code prüfen mit JSLint	171
8.1.3 Besser trennen	172
8.1.4 Feature-Tests	175
8.1.5 Performantes JavaScript	177
8.1.6 Spezialfall: Opera Mini und JavaScript	179
8.2 JavaScript-Bibliotheken	180
8.2.1 Size matters	180
8.2.2 Spezielle Bibliotheken für den mobilen Einsatz	180
8.3 Events für Touchscreens	182
8.3.1 Aus Berührungen werden Gesten	187
8.4 Kurz zusammengefasst	189
9 Neue APIs und wichtige Spezifikationen	190
9.1 Offline Web Applications – AppCache	190
9.1.1 Das Grundprinzip von AppCache	191
9.1.2 Offline-Dateien überprüfen	195
9.1.3 Änderungen an den Dateien durchführen	198
9.1.4 JavaScript-API für Offline-Cache	199
9.1.5 Browserunterstützung für AppCache	201
9.2 W3C-Widgets – gut verpackt ist halb gewonnen	202
9.3 WebStorage	205
9.3.1 WebStorage	208
9.3.2 localStorage – Strings, sonst nichts	209
9.3.3 localStorage und sessionStorage im Browser überprüfen	210
9.3.4 Unterstützung von localStorage testen	212
9.3.5 Browserunterstützung für WebStorage	213
9.3.6 localStorage – Kritik und Alternativen	213
9.4 Geolocation API	214
9.4.1 Erst fragen, dann .....	215
9.4.2 Geolocation API	216
9.4.3 Browserunterstützung für die W3C Geolocation API	220
9.5 Device Orientation API	221
9.6 Weitere APIs	226
9.6.1 Media Capture	226
9.6.2 Page Visibility API	226
9.6.3 WebWorkers	226
9.6.4 System Notification	227
9.6.5 Vibration API	227
9.6.6 Battery Status API	227
9.6.7 Network Information API	227
9.7 Kurz zusammengefasst	228
Teil III: Umsetzung	230
10 Responsive Webdesign	232
10.1 Das Grundprinzip des Responsive Webdesigns	232
10.1.1 Flüssige Layouts	233
10.1.2 Flüssige Bilder	239
10.1.3 Media Queries	243
10.2 Strategien für Media Queries	249
10.2.1 Die wichtigsten Eigenschaften für Media Queries	249
10.2.2 Scharfe Grafiken auf scharfen Displays	250
10.2.3 Breakpoints definieren	251
10.2.4 Mobile First oder Desktop First?	255
10.2.5 Anzahl der Breakpoints	260
10.3 Navigationen im Responsive Webdesign	261
10.3.1 Grundlegende Überlegungen zur Navigation	261
10.3.2 Anker-Navigation	265
10.3.3 Auswahlliste	268
10.3.4 Dynamisches Ein-/Ausblenden	271
10.3.5 Buttons oder Icons für die Navigation	278
10.4 Bilder im Responsive Webdesign – Klappe, die zweite	279
10.4.1 src.sencha.io	279
10.4.2 Adaptive Images	282
10.4.3 Responsive Images von der Filament Group	284
10.5 Tabellen im Responsive Webdesign	285
10.6 Weitere Herausforderungen beim Responsive Design	290
10.7 Fazit	291
10.8 Kurz zusammengefasst	292
11 jQuery Mobile	294
11.1 jQuery Mobile – die Features	294
11.2 Einstieg in jQuery Mobile	295
11.2.1 Einseiten-Template	295
11.2.2 Mehrseiten-Template	298
11.2.3 Dialoge	301
11.3 Ajax-Navigation	302
11.3.1 Effekte zum Wechseln zwischen den Seiten	304
11.4 Inhalte gestalten	305
11.4.1 Listen verbessern	305
11.4.2 Buttons definieren und positionieren	307
11.4.3 Navigationsleisten	311
11.4.4 Anordnung von Inhalten	313
11.4.5 Versteckspiele – Accordion und mehr	314
11.4.6 Formulare	316
11.5 Theming Framework	320
11.6 Events und jQuery Mobile – spezifische Methoden	323
11.6.1 pageinit und skriptgesteuerte Seitenänderung	323
11.6.2 mobileinit – Konfigurationen ändern	324
11.6.3 Weitere Events	325
11.6.4 Einstellungen	326
11.7 Touchereignisse	328
11.8 jQuery Mobile mit Google Maps kombinieren	330
11.9 Going Native	332
11.10 Kurz zusammengefasst	333
12 Sencha Touch	334
12.1 Vorbereitungen	334
12.2 Erste WebApp erstellen	336
12.3 WebApp für den produktiven Einsatz erstellen	343
12.4 Going Native	345
12.5 Kurz zusammengefasst	346
13 Separate mobile Webseiten	348
13.1 HTTP-User-Agent: Sag mir, wer du bist	348
13.2 Quick & ..... detectmobilebrowsers.com	351
13.3 Mehr als nur der User-Agent-String	354
13.4 php-mobile-detect	356
13.4.1 Grundprinzip von php-mobile-detect	357
13.4.2 Umleitung, Wechsellinks und Speicherung der Wahl	359
13.5 Mehr Infos dank WURFL	362
13.6 Nützliches für die Umsetzung	372
13.6.1 Geräteklassen	372
13.6.2 Unterschiede zwischen den Versionen	373
13.6.3 Vary-Header und Canonical	374
13.6.4 Link zum Wechseln	374
13.6.5 Beschriftung der Wechsellinks	375
13.7 Serverseitige und clientseitige Detection	377
13.8 Kurz zusammengefasst	378
14 Mobile Webseiten testen	380
14.1 Webserver installieren	380
14.1.1 XAMPP installieren	381
14.1.2 Dateien über den Server aufrufen	383
14.2 Desktop-Browser nutzen	384
14.2.1 Firefox: User Agent Switcher	384
14.2.2 User-Agent im Safari ändern	385
14.3 Mobile Browser	386
14.3.1 Opera Mobile	386
14.3.2 Opera Mini	388
14.3.3 Firefox Mobile	391
14.4 Emulatoren	392
14.4.1 Android SDK installieren	392
14.4.2 Windows Phone Emulator	396
14.4.3 Xcode für die iOS-Entwicklung	396
14.5 Echte Geräte	397
14.6 Lokale Webseiten auf Emulatoren und mobilen Geräten testen	399
14.7 Remote-Debugging mit Opera	400
14.8 Remote-Debugging mit dem Weinre-Server	404
14.9 Remote-Debugging mit Adobe Shadow	405
14.10 Kurz zusammengefasst	409
Index	410

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

Erfolgreich werben, erfolgreich verkaufen Format: PDF

Texten für das Web

Erfolgreich werben, erfolgreich verkaufen Format: PDF

TCP/IP-Praxis

Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

FESTIVAL Christmas

Fachzeitschriften für Weihnachtsartikel, Geschenke, Floristik, Papeterie und vieles mehr! FESTIVAL Christmas: Die erste und einzige internationale Weihnachts-Fachzeitschrift seit 1994 auf dem ...

Allgemeine Zeitschrift für Philosophie

Seit 1975 fördert die ›Allgemeine Zeitschrift für Philosophie‹ mit jährlich drei Heften den professionellen Gedankenaustausch aller am philosophischen Denken Interessierten. Inhaltlich ist die ...

BEHINDERTEPÄDAGOGIK

Für diese Fachzeitschrift arbeiten namhafte Persönlichkeiten aus den verschiedenen Fotschungs-, Lehr- und Praxisbereichen zusammen. Zu ihren Aufgaben gehören Prävention, Früherkennung, ...

bank und markt

Zeitschrift für Banking - die führende Fachzeitschrift für den Markt und Wettbewerb der Finanzdienstleister, erscheint seit 1972 monatlich. Leitthemen Absatz und Akquise im Multichannel ...

Branchenbrief international - Spielzeugbranche aktuell

Informationsdienst für die Spielwarenbranche Seit 1980 ist der „BRANCHENBRIEF INTERNATIONAL - Spielzeugbranche aktuell" der Informationsdienst der Spielwarenbranche, bekannt unter dem Kürzel ...

Card Forum International

Card Forum International, Magazine for Card Technologies and Applications, is a leading source for information in the field of card-based payment systems, related technologies, and required reading ...

Der Hessische Obst- u. Gartenbau

"Der Hessische Obst- und Gartenbau" ist die Monatszeitschrift des Landesverbandes Hessen für Obstbau, Garten und Landschaftspflege e.V.. Probeexemplare werden nur nach Hessen versendet. Es wird ...

DHS

Die Flugzeuge der NVA Neben unser F-40 Reihe, soll mit der DHS die Geschichte der "anderen" deutschen Luftwaffe, den Luftstreitkräften der Nationalen Volksarmee (NVA-LSK) der ehemaligen DDR ...

Die Medizinischen Fachangestellten

Prüfungs- und Praxiswissen für Zahnmedizinische Fachangestellte Mehr Erfolg in der Ausbildung, sicher in alle Prüfungen gehen, im Beruf jeden Tag überzeugen: „Die Zahnmedizinische ...

dima

Bau und Einsatz von Werkzeugmaschinen für spangebende und spanlose sowie abtragende und umformende Fertigungsverfahren. dima - die maschine - bietet als Fachzeitschrift die Kommunikationsplattform ...