Immer mehr lebt mobil
• mehr als 4.600.000.000 Mobilgeräte
• breite Verfügbarkeit
• neuer always-on und Apps Lifestyle

2 ...
No one to rule them all
11%

2%

2%

Marktanteile Welt
Q3/2011

15%

Android

Symbian
iOS
RIM
Bada

17%

3 | Trittsicher a...
One to rule them all…

4 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

http://www.sxc.hu/profile/Sar...
HTML5

‘ HTML5‘‘ =

HTML5
+ CSS 3
+ JavaScript AP I

5 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
HTML5

‘ HTML5‘‘ =

6 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Mobile Webapps können sein

Rahmenllobseild-Webapps
Vol
7 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobi...
8 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Was ist jQuery Mobile nicht….

jQuery Implementierung
für Mobiles
primäres
JavaScript Framework
die Lösung für jeden
Anwen...
jQuery mobile ist…

HTML5-Framework für touchbasierte
Smartphones & Tablets

10 | Trittsicher auf allen mobilen Pfaden mit...
jQuery mobile ist…

HTML5-Framework für touchbasierte
Smartphones & Tablets

11 | Trittsicher auf allen mobilen Pfaden mit...
FEATURES

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

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

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

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

16 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Auto-Ajax Links

+ Fehlerbehandung & - dialog
+ Browser-Back

17 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQue...
Deklaration von Seitenelementen

<div data-role=„page“>
<div data-role=„header“>…</div>
<div data-role=„content“>…</div>

...
Responsive Design

Mobile

19 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile

Tablet und PC
Responsive Design

Intelligente Anordnung von Blöcken & Label
Markierung über CSS-Klassen

20 | Trittsicher auf allen mobi...
Dialoge

Seiten als Dialoge öffnen

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

22 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Themes: Advanced Features

Buttteoln-Iconsaration
mi sDekl

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

24 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
JQM UX vs. Native UX

Gleiches Look & Feel für alle Gerätetypen

Einzelne native UI Effekte
25 | Trittsicher auf allen mob...
ANWENDUNGSLOGIK?
ANWENDUNGSLOGIK

26 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
Dynamische Inhalte
Einhängen von Logik
über jQuery Mobile Events

$( '#aboutPage' ).bind(‚pageshow',
function(event){
aler...
Reagieren

Statische Elementd(e):
bin
Dynamisch erstel e Elementee():
liv
28 | Trittsicher auf allen mobilen Pfaden mit HT...
Gute Gesten zeigen

Tippen
29 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
30 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
PhoneGap

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

Kamera
G-sensor, Kompass
GPS
Kontakte
Vibration

File & Storage

32 | Trittsicher auf allen mobilen ...
PRAXIS

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

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

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

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

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

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

39 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
jQuery Mobile: Kritik

Schnelle Ergebnisse
Plat formübergreifende Entwicklung
Lebendiges Projekt
40 | Trittsicher auf alle...
jQuery Mobile: Kritik

Nur Einfaches ist einfach
Unterstützt zu viele Plat formen
Kompromisse in UX vs. native Apps
41 | T...
Alternativen

M-ProjeKern)ct
(mit JQM

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

Vielen Dank
für Ihre Aufmerksamkeit!

Referenzen:
http://jquerymobile.com/
“jQuery Mobile” von Jon Reid
O’Reilly M...
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Nächste SlideShare
Wird geladen in …5
×

Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile

504 Aufrufe

Veröffentlicht am

Dank HTML5 werden Mobilanwendungen möglich, die auf den unterschiedlichsten Geräteplattformen laufen und eine zu nativen Apps vergleichbare User Experience bieten können.

Nach einer Gegenüberstellung von HTML5 vs. nativer App-Entwicklung betrachten wir Konzepte und Technologien des webbasierten Ansatzes und eruieren Möglichkeiten für den Zugriff auf Gerätefunktionen mittels PhoneGap.

Am Beispiel von jQuery Mobile erhalten wir ganz konkrete Eindrücke für die Entwicklung und bieten damit einen praxisnahen Startpunkt für die ersten, eigenen Schritte.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
504
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile

  1. 1. 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/
  2. 2. 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
  3. 3. One to rule them all… 4 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile http://www.sxc.hu/profile/Sarej
  4. 4. HTML5 ‘ HTML5‘‘ = HTML5 + CSS 3 + JavaScript AP I 5 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  5. 5. HTML5 ‘ HTML5‘‘ = 6 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  6. 6. Mobile Webapps können sein Rahmenllobseild-Webapps Vol 7 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile Hybrid: Web + App
  7. 7. 8 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  8. 8. 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
  9. 9. jQuery mobile ist… HTML5-Framework für touchbasierte Smartphones & Tablets 10 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  10. 10. jQuery mobile ist… HTML5-Framework für touchbasierte Smartphones & Tablets 11 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  11. 11. FEATURES 12 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  12. 12. jQuery CSS JavaScript 13 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  13. 13. jQuery CSS JavaScript 14 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  14. 14. Deklarative GUI-Gestaltung 15 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  15. 15. Touch-optimierte GUI 16 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  16. 16. Auto-Ajax Links + Fehlerbehandung & - dialog + Browser-Back 17 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  17. 17. 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
  18. 18. Responsive Design Mobile 19 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile Tablet und PC
  19. 19. Responsive Design Intelligente Anordnung von Blöcken & Label Markierung über CSS-Klassen 20 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  20. 20. Dialoge Seiten als Dialoge öffnen 21 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  21. 21. Themes 22 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  22. 22. Themes: Advanced Features Buttteoln-Iconsaration mi sDekl 23 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile Optischeerung Gruppi
  23. 23. Themeroller Applikation 24 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  24. 24. 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
  25. 25. ANWENDUNGSLOGIK? ANWENDUNGSLOGIK 26 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  26. 26. 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
  27. 27. Reagieren Statische Elementd(e): bin Dynamisch erstel e Elementee(): liv 28 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  28. 28. Gute Gesten zeigen Tippen 29 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  29. 29. 30 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  30. 30. PhoneGap 31 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  31. 31. PhoneGap: Funktionen Kamera G-sensor, Kompass GPS Kontakte Vibration File & Storage 32 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  32. 32. PRAXIS 33 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  33. 33. Werkzeuge & Entwickeln 34 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  34. 34. Tests 35 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  35. 35. PITFALLS 36 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  36. 36. Pitfall: Layout 37 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  37. 37. Pitfall: Unterschiedliche Fähigkeiten vs. 38 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  38. 38. Pitfall: Performance 39 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  39. 39. jQuery Mobile: Kritik Schnelle Ergebnisse Plat formübergreifende Entwicklung Lebendiges Projekt 40 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  40. 40. 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
  41. 41. Alternativen M-ProjeKern)ct (mit JQM 42 | Trittsicher auf allen mobilen Pfaden mit HTML5 und jQuery Mobile
  42. 42. 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
  43. 43. 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

×