Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile

546 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
546
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×