Mobile Apps with PhoneGap and jQuery Mobile
Download as PPTX, PDF5 likes8,876 views
The document provides an overview of using jQuery Mobile and PhoneGap for mobile app development. It outlines the advantages of jQuery Mobile, including its ease of use and extensive resources, as well as the capabilities of PhoneGap to package web applications as native apps. Additionally, it discusses further resources for learning about jQuery Mobile, PhoneGap, and related technologies.
Mobile Apps with PhoneGap and jQuery Mobile
- 1. Mobile Apps with PhoneGap and jQuery Mobile
- 2. Who Are You?
- 8. Doing it yourself sucks.
- 9. Especially if someone else has done it
- 11. jQuery makes stuff easy
- 12. jQuery has a huge ecosystem
- 13. GETTING STARTED WITH JQUERY MOBILE
- 14. 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>
- 15. Page Model
- 16. 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>
- 17. 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>
- 19. Navigation <div data-role="page" id="second" data-add-back-btn="true">
- 20. Data Lists <ul data-role="listview"> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li> </ul>
- 21. 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>
- 22. 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>
- 23. THEME ROLLER
- 24. I want my own design
- 26. Next Steps with jQuery Mobile • Download jQuery Mobile – http://jquerymobile.com/ • Check out killer documentation – http://jquerymobile.com/demos/1.0/ • Check out Theme Roller – http://jquerymobile.com/themeroller/
- 28. We have a web app We need a native app
- 29. Why do we need native?
- 31. The ease of web the access of native
- 32. Enter PhoneGap
- 33. PhoneGap packages a web app into a “native” app
- 34. What do you mean by “native” apps
- 35. Apps can be distributed in stores
- 36. UI is not native
- 37. PHONEGAP BUILD
- 38. One pain point: Lots of software
- 42. PhoneGap Build • Setup build – Certificates – Provision files • Get code to cloud – Upload – Link to git repository • Have servers build app files
- 43. Demo PhoneGap Build
- 44. Next Steps with Phone Gap • Look at Phone Gap – http://phonegap.com/ • Get started – http://phonegap.com/start • Phone Gap Build – https://build.phonegap.com/
- 45. ADOBE SNEAKS
- 47. What if browsers could do more?
- 49. Cinematic effects for the web
- 50. Demo CSS Shaders
- 51. Tablets are just about consumption
- 52. Enter Adobe Proto
- 53. Proto is an whiteboarding app for tablets that output to HTML
- 54. Demo Proto
- 55. 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
- 56. CONCLUSIONS
- 57. Timeout
- 58. Apps people have to use Apps people love to use
- 59. Follow up? • Feel free to contact me – [email protected] – http://terrenceryan.com – Twitter: @tpryan