Mit jQTouch auf's iPhone & Android

6,885 views

Published on

Mit jQTouch auf‘s iPhone & Android - MobileTech Conference 2010 - Rheingoldhalle, Mainz

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,885
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
47
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mit jQTouch auf's iPhone & Android

  1. 1. MobileTech Conference 2010 - 6. - 8. September - Rheingoldhalle, Mainz Mit jQTouch aufʻs iPhone & Android Björn Wibben
  2. 2. Web-App Frameworks Übersicht CiUI Magic Framework UiUIKit jPint
  3. 3. Was ist • jQuery Plug-in für mobile Webentwicklung auf dem iPhone, iPod Touch und anderen mobilen Geräten • Entwickelt von David Kaneda; gepflegt von Jonathan Stark • Demo: http://jqtouch.com/ • Source: http://github.com/senchalabs/jQTouch/
  4. 4. jQTouch Features • Startscreen, Homescreen Icon (auf iPhone / iPod Touch) • Bilddaten vorladen • Flexible Themes • Native Webkit Animationen • Callback Events • Erweiterbar durch Extensions
  5. 5. Themes - Demo Apple jQTouch
  6. 6. Theme CSS anpassen Apple Theme: .toolbar { ... background: url(img/toolbar.png) #6d84a2 repeat-x; ... } jQTouch Theme: .toolbar { ... background: url(img/toolbar.png) #000000 repeat-x; ... }
  7. 7. Animation 8 mitgelieferte Seiten-Animationen: slide, slideup, dissolve, fade, flip, pop, swap, und cube Standard Selektor für Seitenübergänge: body > * > ul li a ... <ul class="rounded"> <li class="arrow"> <a href="#subpage1" class="fade">Subpage 1</a> </li> </ul> ...
  8. 8. Animation über CSS3 @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .fade.in { z-index: 10; -webkit-animation-name: fadein; }
  9. 9. Animation - Demo iPhone Android
  10. 10. Webkit Animationen auf unterschiedlichen Endgeräten
  11. 11. Callback Events Page Animations: pageAnimationStart, pageAnimationEnd Orientation Changes (z. Zt. iPhone only): turn Touch Events: swipe, tap
  12. 12. Callback Events $('#s2').bind('pageAnimationEnd', function(event, info) { if (info.direction === 'in') { doSomething(); } // gibt - wenn möglich - den Link als jQuery Objekt zurück, welcher die Animation auslöste console.log($(this).data('referrer').attr('href ')); // #s2 });
  13. 13. Callback Events $('#swipeme').bind('swipe', function(event, info) { console.log(info.direction); }); oder auch $('#swipeme').swipe(function(event, info) { console.log(info.direction); });
  14. 14. Callback Events - Demo
  15. 15. jQTouch einfache App - Demo
  16. 16. jQTouch Schnellübersicht • Eine HTML-Datei, Unterseiten sind in separaten <div> • jQTouch Dateien im <head> einbinden • jQTouch mittels $.jQTouch() aufrufen
  17. 17. jQTouch Einfache App - Grundgerüst Kopf <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Web App</title> <style type="text/css">@import "jqtouch/jqtouch.css";</style> <style type="text/css">@import "themes/apple/theme.css";</style> <script src="jquery-1.4.2.min.js"></script> <script src="jqtouch.js"></script> ...
  18. 18. jQTouch initialisieren ... <script type='text/javascript'> var jQT = new $.jQTouch({ icon: 'homescreenIcon.png', startupScreen: 'startupImage.png', preloadImages: [ 'img1.png', 'img2.png' ] ... }); </script> </head> <body> ... Übersicht: http://wiki.github.com/senchalabs/jQTouch/initoptions
  19. 19. Grundgerüst Seiten ... <div id="home" class="current"> <div class="toolbar"><h1>Apple Theme</h1></div> <ul class="rounded"> <li class="arrow"> <a href="#subpage1" class="flip">Subpage 1</a> </li> </ul> </div> <div id="subpage1"> <div class="toolbar"> <h1>Subpage 1</h1> <a href="#" class="back">Back</a> </div> <p class="rounded">Subpage 1 Text</p> </div> ...
  20. 20. jQTouch mehr „native“ - Demo http://cubiq.org/iscroll
  21. 21. Web App - Fähigkeiten und Integration iPhone / iPod Touch Android 2.2 Homescreen Icon ✔ ✗ Startscreen ✔ ✗ HTML5 DB ✔ ✔ Application Cache ✔ ✔ CSS3-Animationen ✔ ✗ Schriften (enthalten) ✔ ✗
  22. 22. iPhone / Android / Bada Worauf sollte man achten? • "Webkit" !== "Webkit" // true • turn Event nicht überall verfügbar • Homescreen Icon und Startscreen nur auf iDevices
  23. 23. Webevents Webapp Demo http://bit.ly/webevents_app
  24. 24. Vielen Dank Frontend-Entwickler http://www.wibben.de/ Twitter: bjoernwibben GitHub: bjoernwibben
  25. 25. Q&A

×