Your SlideShare is downloading. ×
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

32,891

Published on

Published in: Technology
5 Comments
81 Likes
Statistics
Notes
No Downloads
Views
Total Views
32,891
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
0
Comments
5
Likes
81
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
    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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.

    ×