jQTouch
Mobile Web Apps with
HTML, CSS & JavaScript




@philippbosch
February 18, 2010 – jsberlin
Hi, I’m Philipp.
Hi, I’m Philipp.
• Freelance Web Developer
Hi, I’m Philipp.
• Freelance Web Developer
• Working in Kreuzberg
Hi, I’m Philipp.
• Freelance Web Developer
• Working in Kreuzberg
• Creating websites & web applications since 1995
Hi, I’m Philipp.
• Freelance Web Developer
• Working in Kreuzberg
• Creating websites & web applications since 1995
• Been...
Mobile Apps.
Mobile Apps.
• Two different ways to develop for mobile devices:
Mobile Apps.
• Two different ways to develop for mobile devices:
  • «Native Apps»
Mobile Apps.
• Two different ways to develop for mobile devices:
  • «Native Apps»
    • Objective-C (iPhone)
Mobile Apps.
• Two different ways to develop for mobile devices:
  • «Native Apps»
    • Objective-C (iPhone)
    • Java (...
Mobile Apps.
• Two different ways to develop for mobile devices:
  • «Native Apps»
    • Objective-C (iPhone)
    • Java (...
Mobile Apps.
• Two different ways to develop for mobile devices:
  • «Native Apps»
    • Objective-C (iPhone)
    • Java (...
Mobile Apps.
• Two different ways to develop for mobile devices:
  • «Native Apps»
    • Objective-C (iPhone)
    • Java (...
Web Apps.
Web Apps.
• Any regular website can be a web app.
Web Apps.
• Any regular website can be a web app.
• On the iPhone you can add web apps to the
 home screen.
jQuery.com WebClip
jQuery.com WebClip
jQuery API Browser
jQuery API Browser
Voilà: jQTouch.
Voilà: jQTouch.
• Plugin for jQuery
Voilà: jQTouch.
• Plugin for jQuery
• User interface elements (iPhone style)
Voilà: jQTouch.
• Plugin for jQuery
• User interface elements (iPhone style)
• Themes
Voilà: jQTouch.
• Plugin for jQuery
• User interface elements (iPhone style)
• Themes
• Automatic Navigation
Voilà: jQTouch.
• Plugin for jQuery
• User interface elements (iPhone style)
• Themes
• Automatic Navigation
• Animations
Voilà: jQTouch.
• Plugin for jQuery
• User interface elements (iPhone style)
• Themes
• Automatic Navigation
• Animations
...
How does it work?
How does it work?
• One HTML file.
How does it work?
• One HTML file.
• Inside the <body> element create a <div>
 element for each panel of your app.
How does it work?
• One HTML file.
• Inside the <body> element create a <div>
 element for each panel of your app.
• Use cl...
How does it work?
• One HTML file.
• Inside the <body> element create a <div>
 element for each panel of your app.
• Use cl...
How does it work?
• One HTML file.
• Inside the <body> element create a <div>
 element for each panel of your app.
• Use cl...
<!doctype html>
<html>
  <head>
    <title>jsberlin</title>
    <script src="jqtouch/jquery.1.3.2.min.js">…
    <script sr...
…
  <body>
    <div id="home">
      <div class="toolbar"><h1>My app</h1></div>
      <ul class="rounded">
         <li><a...
Animation.
Animation.
• 8 built-in animations: slide, slideup,
 dissolve, fade, flip, pop, swap and cube.
Animation.
• 8 built-in animations: slide, slideup,
 dissolve, fade, flip, pop, swap and cube.
Animation.
• 8 built-in animations: slide, slideup,
 dissolve, fade, flip, pop, swap and cube.

• Use these as class names...
Animation.
• 8 built-in animations: slide, slideup,
 dissolve, fade, flip, pop, swap and cube.

• Use these as class names...
Animation.
• 8 built-in animations: slide, slideup,
  dissolve, fade, flip, pop, swap and cube.

• Use these as class name...
…
<div id="home">
  <div class="toolbar"><h1>My app</h1></div>
  <ul class="rounded">
    <li><a href="#foo" class="flip">...
Events.
Events.
• Five new events you can bind callbacks to:
Events.
• Five new events you can bind callbacks to:
 • tap
Events.
• Five new events you can bind callbacks to:
 • tap
 • http://blog.jqtouch.com/post/205113875/
Events.
• Five new events you can bind callbacks to:
 • tap
 • http://blog.jqtouch.com/post/205113875/

 • pageAnimationSt...
Events.
• Five new events you can bind callbacks to:
 • tap
 • http://blog.jqtouch.com/post/205113875/

 • pageAnimationSt...
Events.
• Five new events you can bind callbacks to:
 • tap
 • http://blog.jqtouch.com/post/205113875/

 • pageAnimationSt...
Events.
• Five new events you can bind callbacks to:
 • tap
 • http://blog.jqtouch.com/post/205113875/

 • pageAnimationSt...
$('#mybutton').tap(function() {
    // do something when the button is tapped on
});
$('#mypanel').bind('pageAnimationStart',
   function(event, info) {
     if (info.direction == 'in') {
       populateTheP...
$('body').bind('turn', function(event, info) {
    console.log(info.orientation);
    // landscape or profile
});
$('#swipeme').bind('swipe',
    function(event, info) {
        console.log(info.direction);
        // left or right
    ...
Init Options.
Init Options.
$.jqTouch({
    icon: "path/to/homescreen-icon.png",
    startupScreen: "path/to/startup-image.png",
    sta...
Themes.
Themes.
• Comes with two complete themes:
Themes.
• Comes with two complete themes:
 • «apple» mimics the default iPhone look
Themes.
• Comes with two complete themes:
 • «apple» mimics the default iPhone look
 • «jqt» is based on «apple» but darke...
Themes.
• Comes with two complete themes:
 • «apple» mimics the default iPhone look
 • «jqt» is based on «apple» but darke...
Themes.
• Comes with two complete themes:
  • «apple» mimics the default iPhone look
  • «jqt» is based on «apple» but dar...
Pros & Cons.
Web apps: Pros.
Web apps: Pros.
• Ease of development.
Web apps: Pros.
• Ease of development.
• Cross-device compatibility.
Web apps: Pros.
• Ease of development.
• Cross-device compatibility.
• No AppStore approval needed.
Web apps: Pros.
• Ease of development.
• Cross-device compatibility.
• No AppStore approval needed.
• Easy updates.
Web apps: Cons.
Web apps: Cons.
• Only few APIs for device features available in JS.
Web apps: Cons.
• Only few APIs for device features available in JS.
• No AppStore.
Web apps: Cons.
• Only few APIs for device features available in JS.
• No AppStore.
• Hard to sell your app.
PhoneGap.
PhoneGap.
• Container for your web app.
PhoneGap.
• Container for your web app.
• Enables you to create a native app with your
 web app in it.
PhoneGap.
• Container for your web app.
• Enables you to create a native app with your
 web app in it.
• Put it in the App...
PhoneGap.
• Container for your web app.
• Enables you to create a native app with your
 web app in it.
• Put it in the App...
Device APIs in JS.
Device APIs in JS.
• Device          • Camera
• Location        • Vibrate
• Accelerometer   • Sound
• Contacts        • Te...
PhoneGap.
PhoneGap.
• Supported platforms: iPhone, Android,
 Blackberry, Symbian, Palm.
PhoneGap.
• Supported platforms: iPhone, Android,
 Blackberry, Symbian, Palm.
• Windows Mobile, N900/Maemo to be added.
PhoneGap.
• Supported platforms: iPhone, Android,
 Blackberry, Symbian, Palm.
• Windows Mobile, N900/Maemo to be added.
• ...
Summing it up.
Summing it up.
Combine jQTouch with PhoneGap and the
possibilities of HTML 5 (Offline Cache,
localStorage/sessionStorage, c...
Further reading.
Further reading.
• jQTouch » jqtouch.com
Further reading.
• jQTouch » jqtouch.com
• PhoneGap » phonegap.com
Further reading.
• jQTouch » jqtouch.com
• PhoneGap » phonegap.com
• Jonathan Stark: Building iPhone Apps with
 HTML, CSS,...
Thanks.




   CC-BY
Thanks.
Slides available at » pb.io/talks/jqtouch/.




        CC-BY
Thanks.
Slides available at » pb.io/talks/jqtouch/.
Tomorrow :)




        CC-BY
Demo
Showtime
Showtime
Todo
Todo
That's it.
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Upcoming SlideShare
Loading in...5
×

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

33,182

Published on

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

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 of "jQTouch – Mobile Web Apps with HTML, CSS and JavaScript"

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

    ×