Fake Your Way as a  Mobile Developer          Rockstar      Introducing the PhoneGap framework                          wi...
Ancient Hacker Wisdom…Where there are no oxen, the stall is clean.                             Solomon, Proverbs 14:4
Why this talk?
“The only thing I’maddicted to right now is       winning.”
Best Case Outcomes• Learn what PhoneGap does• See how it works in action• Deploy it to a device• Swap stories & have fun!
What is it?
Crossplatform, like Java?
Actually, no…
* for large values of once
Vendor Backing
So What Can I Target?
So ICan?
<canvas id=“angry-bird”/>
What the client wanted...• Simple promo/reference app• Needed AppStore• Wanted a Native Phone app• Use platform services (...
Let’s Build it!• Use PhoneGap for App Shell• Add a UI Framework + CSS3• Add Device Caps• Deploy to the AppStore & Retire!
Choosing a UI framework
The Markup…<div data-role="page">  <div data-role="header">...</div>  <div data-role="content">...  <div data-role="footer...
Add Media Queries<link rel="stylesheet" type="text/css" media="only screen and(min-device-width: 768px) and (max-device-wi...
Calling Device APIsfunction fetchImage(ele) {  navigator.camera.getPicture(function (imageData) {        var image = docum...
Plugins
PhoneGap Build
The Experience• PhoneGap was a perfect fit• Nearly* single source• Emulators were close• All platforms had their issues
On AppStores…
Useful Resources
Could be handy…https://github.com/glenasmith/phonegap-talk
We’re headed…
Demo
<wrap/>
Thanks for Coming!                   @glen_a_smithhttp://blogs.bytecode.com.au/glen
Image Credits•   The Clock - http://www.flickr.com/photos/zoutedrop/2317065892•   Java Swing Ugliness - http://www.javalob...
Fake Your Way as a Mobile Developer Rockstar with PhoneGap
Fake Your Way as a Mobile Developer Rockstar with PhoneGap
Upcoming SlideShare
Loading in …5
×

Fake Your Way as a Mobile Developer Rockstar with PhoneGap

3,808 views

Published on

Introdu

Published in: Technology, Sports

Fake Your Way as a Mobile Developer Rockstar with PhoneGap

  1. Fake Your Way as a Mobile Developer Rockstar Introducing the PhoneGap framework with Glen Smith
  2. Ancient Hacker Wisdom…Where there are no oxen, the stall is clean. Solomon, Proverbs 14:4
  3. Why this talk?
  4. “The only thing I’maddicted to right now is winning.”
  5. Best Case Outcomes• Learn what PhoneGap does• See how it works in action• Deploy it to a device• Swap stories & have fun!
  6. What is it?
  7. Crossplatform, like Java?
  8. Actually, no…
  9. * for large values of once
  10. Vendor Backing
  11. So What Can I Target?
  12. So ICan?
  13. <canvas id=“angry-bird”/>
  14. What the client wanted...• Simple promo/reference app• Needed AppStore• Wanted a Native Phone app• Use platform services (phone)
  15. Let’s Build it!• Use PhoneGap for App Shell• Add a UI Framework + CSS3• Add Device Caps• Deploy to the AppStore & Retire!
  16. Choosing a UI framework
  17. The Markup…<div data-role="page"> <div data-role="header">...</div> <div data-role="content">... <div data-role="footer">...</div></div>
  18. Add Media Queries<link rel="stylesheet" type="text/css" media="only screen and(min-device-width: 768px) and (max-device-width: 1024px)"href=“layout-tablet.css" />@media only screen and (min-device-width: 768px) { #m-branding-pad { min-height: 205px; }}
  19. Calling Device APIsfunction fetchImage(ele) { navigator.camera.getPicture(function (imageData) { var image = document.getElementById(ele); image.src = "data:image/jpeg;base64," +imageData; }, function (message) { alert(Camera Failure: + message); }, { quality: 25 });}
  20. Plugins
  21. PhoneGap Build
  22. The Experience• PhoneGap was a perfect fit• Nearly* single source• Emulators were close• All platforms had their issues
  23. On AppStores…
  24. Useful Resources
  25. Could be handy…https://github.com/glenasmith/phonegap-talk
  26. We’re headed…
  27. Demo
  28. <wrap/>
  29. Thanks for Coming! @glen_a_smithhttp://blogs.bytecode.com.au/glen
  30. Image Credits• The Clock - http://www.flickr.com/photos/zoutedrop/2317065892• Java Swing Ugliness - http://www.javalobby.org/java/forums/m92010274.html• HTML5 Promo - http://www.w3.org/html/logo/• Angry Birds - http://angrybirdsgamer.com/• jQueryMobile Example- http://jquerymobiletutorial.com/jquery/jquery-mobile-examples/• Lego Pieces - http://www.flickr.com/photos/wwworks/247223224• Yak Shaving - http://www.flickr.com/photos/revcyborg/22883042/sizes/l/in/photostream/

×