Mobile Apps with PhoneGap and jQuery Mobile

16,697 views
16,517 views

Published on

The Codeworks presentation on mobile front ends including PhoneGap, jQuery Mobile, CSS Shaders and Proto.

Published in: Technology, Business
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
16,697
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
265
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Mobile Apps with PhoneGap and jQuery Mobile

  1. 1. Mobile Apps withPhoneGap andjQuery Mobile
  2. 2. Who Are You?
  3. 3. Why jQuery Mobile?
  4. 4. Doing it yourself sucks.
  5. 5. Especially ifsomeone else has done it
  6. 6. jQuery makes stuff easy
  7. 7. jQuery has ahuge ecosystem
  8. 8. GETTING STARTED WITHJQUERY MOBILE
  9. 9. Basic Page Start<!DOCTYPE html><html><head><title>Codeworks</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="jquery.mobile-1.0.min.css" /><script type="text/javascript" src="jquery-1.6.4.min.js"></script><script type="text/javascript" src="jquery.mobile-1.0.min.js"></script></head>
  10. 10. Page Model
  11. 11. Basic Page Layout<div data-role="page" id="landing" > <div data-role="header"> <!-- header content --> </div> <div data-role="content"> <!-- Page content --> </div> <div data-role="footer" > <!-- Footer content --> </div></div>
  12. 12. Basic Page Layout<div data-role="page" id="landing"> <!-- page content --></div><div data-role="page" id="detail"> <!-- page content --></div><div data-role="page" id="map"> <!-- page content --></div>
  13. 13. Navigation<a href="#map" class="ui-btn-active">Map</a>
  14. 14. Navigation<div data-role="page" id="second" data-add-back-btn="true">
  15. 15. Data Lists<ul data-role="listview"> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li></ul>
  16. 16. Tab Menus<div data-role="navbar"><ul><li><a href="#landing" class="ui-btn-active">Schedule</a></li><li><a href="#map">Map</a></li></ul></div>
  17. 17. Forms<form > <label for="username">Username:</label> <input type="text" name="username" id="username" /> <label for="password">Password:</label> <input type="password" name="password" id="password" /> <input type="submit" name="submit" value="Login" /></form>
  18. 18. THEME ROLLER
  19. 19. I want my own design
  20. 20. Next Steps with jQueryMobile• Download jQuery Mobile – http://jquerymobile.com/• Check out killer documentation – http://jquerymobile.com/demos/1.0/• Check out Theme Roller – http://jquerymobile.com/themeroller/
  21. 21. We have a web appWe need a native app
  22. 22. Why do we need native?
  23. 23. Camera CompassAccelerometer
  24. 24. The ease of web the access of native
  25. 25. Enter PhoneGap
  26. 26. PhoneGappackages a web app into a “native” app
  27. 27. What do youmean by “native” apps
  28. 28. Apps can bedistributed in stores
  29. 29. UI is not native
  30. 30. PHONEGAP BUILD
  31. 31. One pain point:Lots of software
  32. 32. EnterPhoneGap Build
  33. 33. PhoneGap Build• Setup build – Certificates – Provision files• Get code to cloud – Upload – Link to git repository• Have servers build app files
  34. 34. Demo PhoneGap Build
  35. 35. Next Steps with PhoneGap• Look at Phone Gap – http://phonegap.com/• Get started – http://phonegap.com/start• Phone Gap Build – https://build.phonegap.com/
  36. 36. ADOBE SNEAKS
  37. 37. What if browserscould do more?
  38. 38. Enter CSS Shaders
  39. 39. Cinematiceffects for the web
  40. 40. Demo CSS Shaders
  41. 41. Tablets are just about consumption
  42. 42. Enter Adobe Proto
  43. 43. Proto is anwhiteboardingapp for tabletsthat output to HTML
  44. 44. Demo Proto
  45. 45. Next Steps with Adobe• More About CSS Shaders – http://www.adobe.com/devnet/html5/articles/c ss-shaders.html• More about Proto – http://www.adobe.com/products/proto.html
  46. 46. CONCLUSIONS
  47. 47. Timeout
  48. 48. Apps people have to useApps people love to use
  49. 49. Follow up?• Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan

×