jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
85 likes7,780 views
The document discusses jQTouch, a plugin for jQuery that allows developers to build mobile web apps with HTML, CSS, and JavaScript. It works by turning regular web pages into touch-friendly "apps" that can be added to a mobile device's home screen. Key points covered include: - jQTouch uses jQuery and adds iPhone-style UI elements and themes - It supports animations between "pages" and touch events - Combined with PhoneGap, web apps built with jQTouch can be wrapped into native mobile apps and distributed through app stores - The presentation demonstrates jQTouch's capabilities and provides information on getting started and further resources
![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", …],
...
});](https://image.slidesharecdn.com/jqtouch-web-100218171746-phpapp01/85/jQTouch-Mobile-Web-Apps-with-HTML-CSS-and-JavaScript-62-320.jpg)
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
- 1. jQTouch Mobile Web Apps with HTML, CSS & JavaScript @philippbosch February 18, 2010 – jsberlin
- 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.
- 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>
- 40. Animation.
- 41. Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
- 43. Animation. • 8 built-in animations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
- 44. 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">).
- 45. 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.
- 46. 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.
- 47. … <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> …
- 49. Events.
- 50. Events. • Five new events you can bind callbacks to:
- 51. Events. • Five new events you can bind callbacks to: • tap
- 52. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/
- 53. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart
- 54. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd
- 55. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn
- 56. Events. • Five new events you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn • swipe
- 57. $('#mybutton').tap(function() { // do something when the button is tapped on });
- 58. $('#mypanel').bind('pageAnimationStart', function(event, info) { if (info.direction == 'in') { populateThePanelWithAjaxData(); } } );
- 59. $('body').bind('turn', function(event, info) { console.log(info.orientation); // landscape or profile });
- 60. $('#swipeme').bind('swipe', function(event, info) { console.log(info.direction); // left or right } );
- 61. Init Options.
- 62. 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", …], ... });
- 63. Themes.
- 64. Themes. • Comes with two complete themes:
- 65. Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look
- 66. Themes. • Comes with two complete themes: • «apple» mimics the default iPhone look • «jqt» is based on «apple» but darkermore universal
- 67. 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.
- 68. 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.
- 70. Pros & Cons.
- 71. Web apps: Pros.
- 72. Web apps: Pros. • Ease of development.
- 73. Web apps: Pros. • Ease of development. • Cross-device compatibility.
- 74. Web apps: Pros. • Ease of development. • Cross-device compatibility. • No AppStore approval needed.
- 75. Web apps: Pros. • Ease of development. • Cross-device compatibility. • No AppStore approval needed. • Easy updates.
- 76. Web apps: Cons.
- 77. Web apps: Cons. • Only few APIs for device features available in JS.
- 78. Web apps: Cons. • Only few APIs for device features available in JS. • No AppStore.
- 79. Web apps: Cons. • Only few APIs for device features available in JS. • No AppStore. • Hard to sell your app.
- 80. PhoneGap.
- 81. PhoneGap. • Container for your web app.
- 82. PhoneGap. • Container for your web app. • Enables you to create a native app with your web app in it.
- 83. 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, …
- 84. 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.
- 85. Device APIs in JS.
- 86. Device APIs in JS. • Device • Camera • Location • Vibrate • Accelerometer • Sound • Contacts • Telephony • Orientation (if supported by the device)
- 87. PhoneGap.
- 88. PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm.
- 89. PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm. • Windows Mobile, N900/Maemo to be added.
- 90. PhoneGap. • Supported platforms: iPhone, Android, Blackberry, Symbian, Palm. • Windows Mobile, N900/Maemo to be added. • Open Source (MIT license).
- 91. Summing it up.
- 92. 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.
- 93. Further reading.
- 94. Further reading. • jQTouch » jqtouch.com
- 95. Further reading. • jQTouch » jqtouch.com • PhoneGap » phonegap.com
- 96. Further reading. • jQTouch » jqtouch.com • PhoneGap » phonegap.com • Jonathan Stark: Building iPhone Apps with HTML, CSS, and JavaScript » building-iphone- apps.labs.oreilly.com
- 97. Thanks. CC-BY
- 98. Thanks. Slides available at » pb.io/talks/jqtouch/. CC-BY
- 99. Thanks. Slides available at » pb.io/talks/jqtouch/. Tomorrow :) CC-BY
- 100. Demo
- 101. Showtime
- 102. Showtime
- 103. Todo
- 104. Todo
- 105. That's it.
Editor's Notes
- #3: Share my experiences / lessons learned with you.
- #4: Share my experiences / lessons learned with you.
- #5: Share my experiences / lessons learned with you.
- #6: Share my experiences / lessons learned with you.
- #7: Native: device-specific framework / environment
- #8: Native: device-specific framework / environment
- #9: Native: device-specific framework / environment
- #10: Native: device-specific framework / environment
- #11: Native: device-specific framework / environment
- #12: Native: device-specific framework / environment
- #13: Native: device-specific framework / environment
- #24: One HTML file makes the skeleton of your app.
- #25: One HTML file makes the skeleton of your app.
- #26: One HTML file makes the skeleton of your app.
- #27: One HTML file makes the skeleton of your app.
- #28: One HTML file makes the skeleton of your app.
- #53: Easy customizing
- #54: Easy customizing
- #55: Easy customizing
- #56: Easy customizing
- #57: Easy customizing
- #71: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #72: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #73: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #74: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #75: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #76: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #77: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #78: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #79: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.
- #80: Device: properties of the phone, device ID, model, and OS version number. Location: Latitude/Longitude, course, speed, altitude. Accelerometer: detect orientation, shaking etc. Contacts: addressbook, read the users contacts. Orientation: device layout orientation, e.g. landscape vs portrait. Camera: Brings up the camera or photo browser. Vibrate: vibration alert if supported. Sound: Play sound files (WAV, MP3, etc). Telephony: Trigger and activate phone calls.