• Like
  • Save
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Upcoming SlideShare
Loading in...5
×
 

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

on

  • 37,118 views

 

Statistics

Views

Total Views
37,118
Views on SlideShare
32,694
Embed Views
4,424

Actions

Likes
80
Downloads
0
Comments
5

45 Embeds 4,424

http://aaiddennium.com 1049
http://blog.dreamcss.com 1043
http://philippbosch.de 583
http://pb.io 472
http://www.slideshare.net 358
http://eclipseplugincentral.blogspot.com 285
http://www.techgig.com 181
http://johncoggin.com 123
http://hdoc79.tistory.com 90
http://wiki.onakasuita.org 44
http://pkcentum.tistory.com 42
http://eclipseplugincentral.blogspot.in 34
http://eclipseplugincentral.blogspot.de 26
http://eclipseplugincentral.blogspot.com.br 11
http://paper.li 8
http://eclipseplugincentral.blogspot.it 8
http://eclipseplugincentral.blogspot.fr 7
http://eclipseplugincentral.blogspot.co.uk 6
http://eclipseplugincentral.blogspot.ca 5
http://eclipseplugincentral.blogspot.nl 5
http://zootool.com 5
http://eclipseplugincentral.blogspot.jp 4
http://eclipseplugincentral.blogspot.com.es 4
http://webcache.googleusercontent.com 3
http://eclipseplugincentral.blogspot.kr 3
http://twitter.com 2
http://eclipseplugincentral.blogspot.com.ar 2
http://www.generationatl.com 2
http://eclipseplugincentral.blogspot.ru 2
http://eclipseplugincentral.blogspot.co.at 2
http://eclipseplugincentral.blogspot.fi 1
http://www.google.com 1
http://eclipseplugincentral.blogspot.com.au 1
https://twitter.com 1
http://eclipseplugincentral.blogspot.co.il 1
http://www.straipsniudirektorija.lt 1
http://translate.googleusercontent.com 1
http://www.techgig.timesjobs.com 1
http://eclipseplugincentral.blogspot.mx 1
http://accenthorizon.blogspot.com 1
http://namwook.blogspot.com 1
http://eclipseplugincentral.blogspot.hk 1
http://s.deeeki.com 1
http://namwook.blogspot.in 1
http://eclipseplugincentral.blogspot.ch 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Share my experiences / lessons learned with you.
  • Share my experiences / lessons learned with you.
  • Share my experiences / lessons learned with you.
  • Share my experiences / lessons learned with you.
  • Native: device-specific framework / environment
  • Native: device-specific framework / environment
  • Native: device-specific framework / environment
  • Native: device-specific framework / environment
  • Native: device-specific framework / environment
  • Native: device-specific framework / environment
  • Native: device-specific framework / environment
  • One HTML file makes the skeleton of your app.
  • One HTML file makes the skeleton of your app.
  • One HTML file makes the skeleton of your app.
  • One HTML file makes the skeleton of your app.
  • One HTML file makes the skeleton of your app.
  • Easy customizing
  • Easy customizing
  • Easy customizing
  • Easy customizing
  • Easy customizing
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.
  • Device: properties of the phone, device ID, model, and OS version number. <br /> Location: Latitude/Longitude, course, speed, altitude. <br /> Accelerometer: detect orientation, shaking etc. <br /> Contacts: addressbook, read the users contacts. <br /> Orientation: device layout orientation, e.g. landscape vs portrait. <br /> Camera: Brings up the camera or photo browser. <br /> Vibrate: vibration alert if supported. <br /> Sound: Play sound files (WAV, MP3, etc). <br /> Telephony: Trigger and activate phone calls.

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript jQTouch – Mobile Web Apps with HTML, CSS and JavaScript Presentation Transcript

  • jQTouch Mobile Web Apps with HTML, CSS & JavaScript @philippbosch February 18, 2010 – jsberlin
  • Hi, I’m Philipp.
  • Hi, I’m Philipp. • Freelance Web Developer
  • Hi, I’m Philipp. • Freelance Web Developer • Working in Kreuzberg
  • Hi, I’m Philipp. • Freelance Web Developer • Working in Kreuzberg • Creating websites & web applications since 1995
  • Hi, I’m Philipp. • Freelance Web Developer • Working in Kreuzberg • Creating websites & web applications since 1995 • Been doing some mobile projects recently
  • Mobile Apps.
  • Mobile Apps. • Two different ways to develop for mobile devices:
  • Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps»
  • Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone)
  • Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android)
  • Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps»
  • Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps» • HTML, CSS, JavaScript
  • Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps» • HTML, CSS, JavaScript • run on all devices with a web browser
  • Web Apps.
  • Web Apps. • Any regular website can be a web app.
  • Web Apps. • Any regular website can be a web app. • On the iPhone you can add web apps to the home screen.
  • jQuery.com WebClip
  • jQuery.com WebClip
  • jQuery API Browser
  • jQuery API Browser
  • Voilà: jQTouch.
  • Voilà: jQTouch. • Plugin for jQuery
  • Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style)
  • Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes
  • Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation
  • Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation • Animations
  • Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation • Animations • Supports mobile Webkit browsers (iPhone, Android, Palm Pre, …)
  • How does it work?
  • How does it work? • One HTML file.
  • How does it work? • One HTML file. • Inside the <body> element create a <div> element for each panel of your app.
  • How does it work? • One HTML file. • Inside the <body> element create a <div> element for each panel of your app. • Use class name conventions in your HTML, e.g. div.toolbar, ul.rounded, a.back, …
  • How does it work? • One HTML file. • Inside the <body> element create a <div> element for each panel of your app. • Use class name conventions in your HTML, e.g. div.toolbar, ul.rounded, a.back, … • Add jqtouch.js, jqtouch.css, theme.css.
  • How does it work? • One HTML file. • Inside the <body> element create a <div> element for each panel of your app. • Use class name conventions in your HTML, e.g. div.toolbar, ul.rounded, a.back, … • Add jqtouch.js, jqtouch.css, theme.css. • Call $.jQTouch().
  • <!doctype html> <html> <head> <title>jsberlin</title> <script src="jqtouch/jquery.1.3.2.min.js">… <script src="jqtouch/jqtouch.min.js">… <style type="text/css"> @import "jqtouch/jqtouch.min.css"; </style> <style type="text/css"> @import "themes/jqt/theme.min.css"; </style> <script> $.jQTouch(); </script> </head> …
  • … <body> <div id="home"> <div class="toolbar"><h1>My app</h1></div> <ul class="rounded"> <li><a href="#foo">Foo</a></li> <li><a href="#bar">Bar</a></li> </ul> </div> <div id="foo"> <div class="toolbar"> <h1>Foo</h1> <a href="#" class="back">Back</a> </div> </div> </body> </html>
  • Animation.
  • Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
  • Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
  • Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube. • Use these as class names for links to another panel (<a href="#foo" class="swap">).
  • Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube. • Use these as class names for links to another panel (<a href="#foo" class="swap">). • Default is slide.
  • Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube. • Use these as class names for links to another panel (<a href="#foo" class="swap">). • Default is slide. • If you click on a back button the reverse animation is applied automatically.
  • … <div id="home"> <div class="toolbar"><h1>My app</h1></div> <ul class="rounded"> <li><a href="#foo" class="flip">Foo</a></li> <li><a href="#bar">Bar</a></li> </ul> </div> …
  • Events.
  • Events. • Five new events you can bind callbacks to:
  • Events. • Five new events you can bind callbacks to: • tap
  • Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/
  • Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart
  • Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd
  • Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn
  • Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn • swipe
  • $('#mybutton').tap(function() { // do something when the button is tapped on });
  • $('#mypanel').bind('pageAnimationStart', function(event, info) { if (info.direction == 'in') { populateThePanelWithAjaxData(); } } );
  • $('body').bind('turn', function(event, info) { console.log(info.orientation); // landscape or profile });
  • $('#swipeme').bind('swipe', function(event, info) { console.log(info.direction); // left or right } );
  • Init Options.
  • Init Options. $.jqTouch({ icon: "path/to/homescreen-icon.png", startupScreen: "path/to/startup-image.png", statusBar: "default|black|black-translucent", addGlossToIcon: true|false, fixedViewport: true|false, preloadImages: ["img1.png","img2.png", …], ... });
  • Themes.
  • Themes. • Comes with two complete themes:
  • Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look
  • Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look • «jqt» is based on «apple» but darkermore universal
  • Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look • «jqt» is based on «apple» but darkermore universal • Custom theming is easy: alter the CSS, throw in some graphics and you're done.
  • Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look • «jqt» is based on «apple» but darkermore universal • Custom theming is easy: alter the CSS, throw in some graphics and you're done. • Most graphical fx (gradients, round corners, shadows) are CSS3-based, so no gfx needed.
  • Pros & Cons.
  • Web apps: Pros.
  • Web apps: Pros. • Ease of development.
  • Web apps: Pros. • Ease of development. • Cross-device compatibility.
  • Web apps: Pros. • Ease of development. • Cross-device compatibility. • No AppStore approval needed.
  • Web apps: Pros. • Ease of development. • Cross-device compatibility. • No AppStore approval needed. • Easy updates.
  • Web apps: Cons.
  • Web apps: Cons. • Only few APIs for device features available in JS.
  • Web apps: Cons. • Only few APIs for device features available in JS. • No AppStore.
  • Web apps: Cons. • Only few APIs for device features available in JS. • No AppStore. • Hard to sell your app.
  • PhoneGap.
  • PhoneGap. • Container for your web app.
  • PhoneGap. • Container for your web app. • Enables you to create a native app with your web app in it.
  • PhoneGap. • Container for your web app. • Enables you to create a native app with your web app in it. • Put it in the AppStore, Android Market, …
  • PhoneGap. • Container for your web app. • Enables you to create a native app with your web app in it. • Put it in the AppStore, Android Market, … • Provides JS access to otherwise inaccessible device APIs.
  • Device APIs in JS.
  • Device APIs in JS. • Device • Camera • Location • Vibrate • Accelerometer • Sound • Contacts • Telephony • Orientation (if supported by the device)
  • PhoneGap.
  • PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm.
  • PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm. • Windows Mobile, N900/Maemo to be added.
  • PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm. • Windows Mobile, N900/Maemo to be added. • Open Source (MIT license).
  • Summing it up.
  • Summing it up. Combine jQTouch with PhoneGap and the possibilities of HTML 5 (Offline Cache, localStorage/sessionStorage, client-side databases) and you're gonna have a lot of fun.
  • Further reading.
  • Further reading. • jQTouch » jqtouch.com
  • Further reading. • jQTouch » jqtouch.com • PhoneGap » phonegap.com
  • Further reading. • jQTouch » jqtouch.com • PhoneGap » phonegap.com • Jonathan Stark: Building iPhone Apps with HTML, CSS, and JavaScript » building-iphone- apps.labs.oreilly.com
  • Thanks. CC-BY
  • Thanks. Slides available at » pb.io/talks/jqtouch/. CC-BY
  • Thanks. Slides available at » pb.io/talks/jqtouch/. Tomorrow :) CC-BY
  • Demo
  • Showtime
  • Showtime
  • Todo
  • Todo
  • That's it.