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

Like this? Share it with your network

Share

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

on

  • 37,825 views

 

Statistics

Views

Total Views
37,825
Views on SlideShare
33,397
Embed Views
4,428

Actions

Likes
81
Downloads
0
Comments
5

45 Embeds 4,428

http://aaiddennium.com 1051
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 183
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
  • 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 Presentation Transcript

  • 1. jQTouch Mobile Web Apps with HTML, CSS & JavaScript @philippbosch February 18, 2010 – jsberlin
  • 2. Hi, I’m Philipp.
  • 3. Hi, I’m Philipp. • Freelance Web Developer
  • 4. Hi, I’m Philipp. • Freelance Web Developer • Working in Kreuzberg
  • 5. Hi, I’m Philipp. • Freelance Web Developer • Working in Kreuzberg • Creating websites & web applications since 1995
  • 6. Hi, I’m Philipp. • Freelance Web Developer • Working in Kreuzberg • Creating websites & web applications since 1995 • Been doing some mobile projects recently
  • 7. Mobile Apps.
  • 8. Mobile Apps. • Two different ways to develop for mobile devices:
  • 9. Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps»
  • 10. Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone)
  • 11. Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android)
  • 12. Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps»
  • 13. Mobile Apps. • Two different ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps» • HTML, CSS, JavaScript
  • 14. 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
  • 15. Web Apps.
  • 16. Web Apps. • Any regular website can be a web app.
  • 17. Web Apps. • Any regular website can be a web app. • On the iPhone you can add web apps to the home screen.
  • 18. jQuery.com WebClip
  • 19. jQuery.com WebClip
  • 20. jQuery API Browser
  • 21. jQuery API Browser
  • 22. Voilà: jQTouch.
  • 23. Voilà: jQTouch. • Plugin for jQuery
  • 24. Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style)
  • 25. Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes
  • 26. Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation
  • 27. Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation • Animations
  • 28. Voilà: jQTouch. • Plugin for jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation • Animations • Supports mobile Webkit browsers (iPhone, Android, Palm Pre, …)
  • 29. How does it work?
  • 30. How does it work? • One HTML file.
  • 31. How does it work? • One HTML file. • Inside the <body> element create a <div> element for each panel of your app.
  • 32. 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, …
  • 33. 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.
  • 34. 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().
  • 35. <!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> …
  • 36. … <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>
  • 37. Animation.
  • 38. Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
  • 39. Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
  • 40. 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">).
  • 41. 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.
  • 42. 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.
  • 43. … <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> …
  • 44. Events.
  • 45. Events. • Five new events you can bind callbacks to:
  • 46. Events. • Five new events you can bind callbacks to: • tap
  • 47. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/
  • 48. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart
  • 49. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd
  • 50. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn
  • 51. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn • swipe
  • 52. $('#mybutton').tap(function() { // do something when the button is tapped on });
  • 53. $('#mypanel').bind('pageAnimationStart', function(event, info) { if (info.direction == 'in') { populateThePanelWithAjaxData(); } } );
  • 54. $('body').bind('turn', function(event, info) { console.log(info.orientation); // landscape or profile });
  • 55. $('#swipeme').bind('swipe', function(event, info) { console.log(info.direction); // left or right } );
  • 56. Init Options.
  • 57. 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", …], ... });
  • 58. Themes.
  • 59. Themes. • Comes with two complete themes:
  • 60. Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look
  • 61. Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look • «jqt» is based on «apple» but darkermore universal
  • 62. 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.
  • 63. 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.
  • 64. Pros & Cons.
  • 65. Web apps: Pros.
  • 66. Web apps: Pros. • Ease of development.
  • 67. Web apps: Pros. • Ease of development. • Cross-device compatibility.
  • 68. Web apps: Pros. • Ease of development. • Cross-device compatibility. • No AppStore approval needed.
  • 69. Web apps: Pros. • Ease of development. • Cross-device compatibility. • No AppStore approval needed. • Easy updates.
  • 70. Web apps: Cons.
  • 71. Web apps: Cons. • Only few APIs for device features available in JS.
  • 72. Web apps: Cons. • Only few APIs for device features available in JS. • No AppStore.
  • 73. Web apps: Cons. • Only few APIs for device features available in JS. • No AppStore. • Hard to sell your app.
  • 74. PhoneGap.
  • 75. PhoneGap. • Container for your web app.
  • 76. PhoneGap. • Container for your web app. • Enables you to create a native app with your web app in it.
  • 77. 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, …
  • 78. 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.
  • 79. Device APIs in JS.
  • 80. Device APIs in JS. • Device • Camera • Location • Vibrate • Accelerometer • Sound • Contacts • Telephony • Orientation (if supported by the device)
  • 81. PhoneGap.
  • 82. PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm.
  • 83. PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm. • Windows Mobile, N900/Maemo to be added.
  • 84. PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm. • Windows Mobile, N900/Maemo to be added. • Open Source (MIT license).
  • 85. Summing it up.
  • 86. 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.
  • 87. Further reading.
  • 88. Further reading. • jQTouch » jqtouch.com
  • 89. Further reading. • jQTouch » jqtouch.com • PhoneGap » phonegap.com
  • 90. Further reading. • jQTouch » jqtouch.com • PhoneGap » phonegap.com • Jonathan Stark: Building iPhone Apps with HTML, CSS, and JavaScript » building-iphone- apps.labs.oreilly.com
  • 91. Thanks. CC-BY
  • 92. Thanks. Slides available at » pb.io/talks/jqtouch/. CC-BY
  • 93. Thanks. Slides available at » pb.io/talks/jqtouch/. Tomorrow :) CC-BY
  • 94. Demo
  • 95. Showtime
  • 96. Showtime
  • 97. Todo
  • 98. Todo
  • 99. That's it.