Das Dokument erörtert die Entwicklung und Nutzung von mobilen Anwendungen, insbesondere durch die Technologien HTML5 und jQuery Mobile, und hebt ihre Bedeutung für die plattformübergreifende Entwicklung hervor. Es werden verschiedene Aspekte wie responsive Design, Anwendungslogik, und die Integration von Funktionen wie GPS und Kamera behandelt. Zudem wird auf die Herausforderungen und Einschränkungen eingegangen, die bei der Nutzung von jQuery Mobile im Vergleich zu nativen Anwendungen auftreten können.

2. Immer mehr lebt mobil
• mehr als 4.600.000.000 Mobilgeräte
• breite Verfügbarkeit
• neuer always-on und Apps Lifestyle
2 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Mike Baird http://flickr.com/photos/mikebaird/482031103/

3. No one to rule them all
11%
2%
2%
Marktanteile Welt
Q3/2011
15%
Android
Symbian
iOS
RIM
Bada
17%
3 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
53%
Windows

4. One to rule them all…
4 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
http://www.sxc.hu/profile/Sarej

5. HTML5
‘ HTML5‘‘ =
HTML5
+ CSS 3
+ JavaScript AP I
5 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

6. HTML5
‘ HTML5‘‘ =
6 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

7. Mobile Webapps können sein
Rahmenllobseild-Webapps
Vol
7 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Hybrid: Web + App

8. 8 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

9. Was ist jQuery Mobile nicht….
jQuery Implementierung
für Mobiles
primäres
JavaScript Framework
die Lösung für jeden
Anwendungsfall
9 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

10. jQuery mobile ist…
HTML5-Framework für touchbasierte
Smartphones & Tablets
10 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

11. jQuery mobile ist…
HTML5-Framework für touchbasierte
Smartphones & Tablets
11 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

12. FEATURES
12 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

13. jQuery
CSS
JavaScript
13 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

14. jQuery
CSS
JavaScript
14 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

15. Deklarative GUI-Gestaltung
15 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

16. Touch-optimierte GUI
16 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

17. Auto-Ajax Links
+ Fehlerbehandung & - dialog
+ Browser-Back
17 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

18. Deklaration von Seitenelementen
<div data-role=„page“>
<div data-role=„header“>…</div>
<div data-role=„content“>…</div>
<div data-role=„footer“>…</div>
</div>
18 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

19. Responsive Design
Mobile
19 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Tablet und PC

20. Responsive Design
Intelligente Anordnung von Blöcken & Label
Markierung über CSS-Klassen
20 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

21. Dialoge
Seiten als Dialoge öffnen
21 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

22. Themes
22 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

23. Themes: Advanced Features
Buttteoln-Iconsaration
mi sDekl
23 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Optischeerung
Gruppi

24. Themeroller Applikation
24 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

25. JQM UX vs. Native UX
Gleiches Look & Feel für alle Gerätetypen
Einzelne native UI Effekte
25 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

26. ANWENDUNGSLOGIK?
ANWENDUNGSLOGIK
26 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

27. Dynamische Inhalte
Einhängen von Logik
über jQuery Mobile Events
$( '#aboutPage' ).bind(‚pageshow',
function(event){
alert( ‚Hello Page!' );
}
);
27 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

28. Reagieren
Statische Elementd(e):
bin
Dynamisch erstel e Elementee():
liv
28 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

29. Gute Gesten zeigen
Tippen
29 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

30. 30 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

31. PhoneGap
31 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

32. PhoneGap: Funktionen
Kamera
G-sensor, Kompass
GPS
Kontakte
Vibration
File & Storage
32 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

33. PRAXIS
33 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

34. Werkzeuge & Entwickeln
34 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

35. Tests
35 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

36. PITFALLS
36 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

37. Pitfall: Layout
37 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

38. Pitfall: Unterschiedliche Fähigkeiten
vs.
38 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

39. Pitfall: Performance
39 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

40. jQuery Mobile: Kritik
Schnelle Ergebnisse
Plat formübergreifende Entwicklung
Lebendiges Projekt
40 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

41. jQuery Mobile: Kritik
Nur Einfaches ist einfach
Unterstützt zu viele Plat formen
Kompromisse in UX vs. native Apps
41 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

42. Alternativen
M-ProjeKern)ct
(mit JQM
42 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

43. Fazit
Für einfache & schnelle
Aufgaben gut geeignet
Plattform-übergreifender Ansatz
hat Grenzen
Ausführliche Tests
unverzichtbar!
43 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

44. Danke!
Vielen Dank
für Ihre Aufmerksamkeit!
Referenzen:
http://jquerymobile.com/
“jQuery Mobile” von Jon Reid
O’Reilly Media
44 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
eXXcellent solutions GmbH
Beim Alten Fritz 2
89075 Ulm
http://www.exxcellent.de
R.Enderle@exxcellent.de
B.Schmid@exxcellent.de