Embed Size (px)
DESCRIPTION
Mit jQTouch auf‘s iPhone & Android - MobileTech Conference 2010 - Rheingoldhalle, Mainz
Citation preview
Mit jQTouch aufʻs iPhone & Android
Björn Wibben
MobileTech Conference 2010 - 6. - 8. September - Rheingoldhalle, Mainz
Web-App FrameworksÜbersicht
CiUI
UiUIKit jPint
Magic Framework
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/
jQTouch Features
• Startscreen, Homescreen Icon (auf iPhone / iPod Touch)
• Bilddaten vorladen
• Flexible Themes
• Native Webkit Animationen
• Callback Events
• Erweiterbar durch Extensions
Themes - Demo
jQTouchApple
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; ...}
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> ...
Animation über CSS3
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
.fade.in { z-index: 10; -webkit-animation-name: fadein;}
Animation - Demo
iPhone Android
Webkit Animationen auf unterschiedlichen Endgeräten
Callback Events
Page Animations:pageAnimationStart, pageAnimationEnd
Orientation Changes (z. Zt. iPhone only):turn
Touch Events:swipe, tap
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
});
Callback Events
$('#swipeme').bind('swipe', function(event, info) { console.log(info.direction);});
oder auch
$('#swipeme').swipe(function(event, info) { console.log(info.direction);});
Callback Events - Demo
jQTouch einfache App - Demo
jQTouch Schnellübersicht
• Eine HTML-Datei, Unterseiten sind in separaten <div>
• jQTouch Dateien im <head> einbinden
• jQTouch mittels $.jQTouch() aufrufen
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>...
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
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>...
jQTouch mehr „native“ - Demo
http://cubiq.org/iscroll
Web App - Fähigkeiten und IntegrationiPhone / iPod Touch Android 2.2
Homescreen Icon
Startscreen
HTML5 DB
Application Cache
CSS3-Animationen
Schriften (enthalten)
✔ ✗
✔ ✗
✔ ✔
✔ ✔
✔ ✗
✔ ✗
iPhone / Android / BadaWorauf sollte man achten?
• "Webkit" !== "Webkit" // true
• turn Event nicht überall verfügbar
• Homescreen Icon und Startscreen nur auf iDevices
Webevents Webapp Demo
http://bit.ly/webevents_app
Vielen Dank
Frontend-Entwickler
http://www.wibben.de/Twitter: bjoernwibbenGitHub: bjoernwibben
Q&A
