Your SlideShare is downloading. ×
Fake Your Way as a Mobile Developer Rockstar with PhoneGap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fake Your Way as a Mobile Developer Rockstar with PhoneGap

2,973
views

Published on

Introdu

Introdu

Published in: Technology, Sports

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,973
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
31
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/

×