![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", …], ...});](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjqtouch-web-100218171746-phpapp01%2f75%2fjQTouch-Mobile-Web-Apps-with-HTML-CSS-and-JavaScript-62-2048.jpg&f=jpg&w=240)
Uploaded byPhilipp Bosch
7,783 views
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
Recommended
More Related Content
What's hot
Viewers also liked
Similar to jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Recently uploaded
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
- 1.jQTouchMobile Web AppswithHTML, CSS & JavaScript@philippboschFebruary 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 thepossibilities of HTML 5 (Offline Cache,localStorage/sessionStorage, client-sidedatabases) 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.