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
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
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().
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.
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
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.
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.
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.
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
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.