![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/75/jQTouch-Mobile-Web-Apps-with-HTML-CSS-and-JavaScript-62-2048.jpg)
Uploaded byPhilipp Bosch
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
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
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
- 1. jQTouch Mobile Web Appswith HTML, CSS & JavaScript @philippbosch February 18, 2010 – jsberlin
- 2.
- 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.
- 8. Mobile Apps. • Twodifferent ways to develop for mobile devices:
- 9. Mobile Apps. • Twodifferent ways to develop for mobile devices: • «Native Apps»
- 10. Mobile Apps. • Twodifferent ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone)
- 11. Mobile Apps. • Twodifferent ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android)
- 12. Mobile Apps. • Twodifferent ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps»
- 13. Mobile Apps. • Twodifferent ways to develop for mobile devices: • «Native Apps» • Objective-C (iPhone) • Java (Android) • «Web Apps» • HTML, CSS, JavaScript
- 14. Mobile Apps. • Twodifferent 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.
- 16. Web Apps. • Anyregular website can be a web app.
- 17. Web Apps. • Anyregular website can be a web app. • On the iPhone you can add web apps to the home screen.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. Voilà: jQTouch. • Pluginfor jQuery
- 24. Voilà: jQTouch. • Pluginfor jQuery • User interface elements (iPhone style)
- 25. Voilà: jQTouch. • Pluginfor jQuery • User interface elements (iPhone style) • Themes
- 26. Voilà: jQTouch. • Pluginfor jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation
- 27. Voilà: jQTouch. • Pluginfor jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation • Animations
- 28. Voilà: jQTouch. • Pluginfor jQuery • User interface elements (iPhone style) • Themes • Automatic Navigation • Animations • Supports mobile Webkit browsers (iPhone, Android, Palm Pre, …)
- 29. How does itwork?
- 30. How does itwork? • One HTML file.
- 31. How does itwork? • One HTML file. • Inside the <body> element create a <div> element for each panel of your app.
- 32. How does itwork? • 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 itwork? • 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 itwork? • 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.
- 41. Animation. • 8 built-inanimations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
- 43. Animation. • 8 built-inanimations: slide, slideup, dissolve, fade, flip, pop, swap and cube.
- 44. Animation. • 8 built-inanimations: 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-inanimations: 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-inanimations: 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.
- 50. Events. • Five newevents you can bind callbacks to:
- 51. Events. • Five newevents you can bind callbacks to: • tap
- 52. Events. • Five newevents you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/
- 53. Events. • Five newevents you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart
- 54. Events. • Five newevents you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd
- 55. Events. • Five newevents you can bind callbacks to: • tap • http://blog.jqtouch.com/post/205113875/ • pageAnimationStart • pageAnimationEnd • turn
- 56. Events. • Five newevents 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.
- 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.
- 64. Themes. • Comes withtwo complete themes:
- 65. Themes. • Comes withtwo complete themes: • «apple» mimics the default iPhone look
- 66. Themes. • Comes withtwo complete themes: • «apple» mimics the default iPhone look • «jqt» is based on «apple» but darkermore universal
- 67. Themes. • Comes withtwo 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 withtwo 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.
- 71.
- 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.
- 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.
- 81. PhoneGap. • Container foryour web app.
- 82. PhoneGap. • Container foryour web app. • Enables you to create a native app with your web app in it.
- 83. PhoneGap. • Container foryour 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 foryour 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.
- 86. Device APIs inJS. • Device • Camera • Location • Vibrate • Accelerometer • Sound • Contacts • Telephony • Orientation (if supported by the device)
- 87.
- 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.
- 92. Summing it up. CombinejQTouch 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.
- 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.
- 101.
- 102.
- 103.
- 104.
- 105.
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.