SlideShare ist ein Scribd-Unternehmen logo
MobileTech Conference 2010 - 6. - 8. September - Rheingoldhalle, Mainz



       Mit jQTouch aufʻs iPhone & Android




                                             Björn Wibben
Web-App Frameworks
                 Übersicht




CiUI                    Magic Framework


 UiUIKit        jPint
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




Apple               jQTouch
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 Integration
                        iPhone / iPod Touch   Android 2.2

 Homescreen Icon               ✔                  ✗
    Startscreen                ✔                  ✗
    HTML5 DB                   ✔                 ✔
 Application Cache             ✔                 ✔
CSS3-Animationen               ✔                 ✗
Schriften (enthalten)          ✔                 ✗
iPhone / Android / Bada
               Worauf 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: bjoernwibben
GitHub: bjoernwibben
Q&A

Weitere ähnliche Inhalte

Ähnlich wie Mit jQTouch auf's iPhone & Android

Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhone
reinhardh
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
inovex GmbH
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
IndieOutpost
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui Toolkit
Fabian Jakobs
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
persillie
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Gregor Biswanger
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...
Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...
Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...
e-dialog GmbH
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Lasse Lüders
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatz
sinnerschrader
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 

Ähnlich wie Mit jQTouch auf's iPhone & Android (20)

Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhone
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui Toolkit
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...
Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...
Google Analytics Konferenz 2012: Thomas Tauchner, e-dialog: Events implementi...
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatz
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatz
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 

Mit jQTouch auf's iPhone & Android