Rapid Prototyping with Cordova aka Phonegap


Published on

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

Watch the live recording and demo by clicking the link on slide 40. Find out more about Cordova by joining meet up group at http://www.meetup.com/laphonegap/

Published in: Technology
1 Comment
  • download this amazing full version 100% working and virus proof file without any survey from below link. just download it and enjoy.
    download from here:- http://gg.gg/h26m
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Rapid Prototyping with Cordova aka Phonegap

  1. 1. Rapid Prototyping Mobile Applications withCordova aka PhoneGap.
  2. 2. Josue Bustos Designer/Developer Co-Founder at Zukini Mobile Co-UGM at LA PhoneGap Twitter : @hozwe 2
  3. 3. Developing formobile phones 3
  4. 4. Mobile is becoming increasingly important to webdesigners and developers because users expect a siteto work on their phones. 4
  5. 5. OS Popularity 5
  6. 6. The web is becoming increasingly important to themobile world because it is the only way to deploy anapplication to almost any device. 6
  7. 7. Content Is King 7
  8. 8. 8
  9. 9. Target Audience 9
  10. 10. 10
  11. 11. Make an Impression 11
  12. 12. What Platform? 12
  13. 13. 13
  14. 14. Mobile App Performance 14
  15. 15. Mobile Native AppA native app as one that is specificallydesigned to run on a device’s operatingsystem and machine firmware, and typicallyneeds to be adapted for different devices. Pro’s: High Performance Con’s: Device dependent (e.g. Objective C only apps) 15
  16. 16. Mobile Web AppA Web app, is typically coded in a browser-rendered language such as HTML combinedwith JavaScript. Pro’s: Broad Reach of mobile devices Con’s: No access to mobile sensor API’s 16
  17. 17. Mobile Hybrid AppAn app developed in combinationwith HTML 5 and native technology. Pro’s: Device sensor access (e.g. camera, gyroscope) Con’s: Flexible Performance (depends on app complexity) 17
  18. 18. Mobile App Eco SystemThe more mobile applications thatare in the hands of end users, thegreater the opportunity to drive upmobile data usage and generatenew revenues. 18
  19. 19. 800 million activeusers - Facebook 19
  20. 20. Desktop or Mobile First? 20
  21. 21. Half of computing device sales are mobile 21
  22. 22. Successful mobile devices excel inhardware, software and thesupporting app ecosystem. 22
  23. 23. Market Share 23
  24. 24. 24
  25. 25. Who is using Cordova? 25
  26. 26. • The official Wikipedia mobile application is built using PhoneGap. This project is open source, and the full source code is available on Github https://github.com/wikimedia/WikipediaMob ile. 26
  27. 27. Salesforce uses a fork of Apache Cordova for theirmobile development SDK. The forked version of theirSDK is included within both their iOS and Android SDKrepositories on GitHub 27
  28. 28. IBM/Worklight’s mobile application developmentplatform is built on top of PhoneGap. IBM is alsoheavily involved with core Apache Cordovadevelopment (see the list of committers). 28
  29. 29. Facebook uses a forked version of Apache Cordova intheir mobile SDK. You can learn more aboutFacebook’s mobile SDKat https://developers.facebook.com/docs/guides/mobile/. 29
  30. 30. Microsoft is involved with core Apache Cordovadevelopment (specifically for the Windows Phoneplatform). This includes the XBox-Live integratedgaming application Halo Waypoint, for both iOS andAndroid.The license under ―about‖ inside HaloWaypoint clearly has a reference toPhoneGap). 30
  31. 31. Zynga, one of the largest gaming companies, usesPhoneGap and HTML5 to build awesome games. Forexample, the popular Mafia Wars title is built usingPhoneGap. 31
  32. 32. As technologists it is ourresponsibility to remain presentand aware of change. - PHONEGAP TEAM 32
  33. 33. Apache Cordova is a platformfor building native mobileapplications using HTML, CSS andJavaScript. 33
  34. 34. e.g. 34
  35. 35. Before Cross-platform After Cross-platform• Android ………… Java, C, C++,HTML, CSS, JavaScript• Bada ……………. C, C++, HTML, CSS, JavaScript• BlackBerry ………. C, C++, Java, HTML, CSS, JavaScript• Apple iOS………... Objective C, C, HTML, CSS, JavaScript• Windows Phone 7.. C#, C++, VB.NET, HTML, CSS, JavaScript 35
  36. 36. Be Aware• Cordova isn’t a ―magical‖ solution to end all other solutions.• Cordova is not a ―Silver Bullet‖ that will solve every problem for every application developer 36
  37. 37. Design ToolsDesigner ResourcesAdobe Photoshop• iPhone 4 template from Teehan+Lax• iPad template from Teehan+Lax• Windows Phone 7 design templates from Microsoft• Android template from PSDlist.comAdobe Fireworks• UNITiD — iPhone and iPad prototyping with Fireworks• OmniGraffle• Graffletopia - Mobile• Graffletopia - iPhone• Visio• Visio iPhone stencil by Jonathan Abbett• PowerPoint, OpenOffice, Keynote — clickable slide shows can be used to represent interface flows• Keynotopia templates 37
  38. 38. Developer Tools• Adobe Dreamweaver CS6 { HTML5, JavaScript, CSS3 }• Adobe Flash Builder { Air for Mobile, Action Script 3 }• Eclipse IDE {Java, C++, etc }• X Code IDE { Objective C }• BlackBerry - QNX Momentics IDE: C/ C++, BlackBerry WebWorks: HTML5, CSS3, JavaScript BlackBerry Java; Android Runtime: Java Adobe: Air for mobile• Visual Studio 2011 IDE { C # / C++ } Supports – HTML5, CSS3, JavaScript, for windows phone 7 & Windows 8 SDK. 38
  39. 39. Vendor Specific ResourcesWhich Operating System are you developing for?• Samsung Bada Developer Toolshttp://developer.bada.com/apis/index.do• Android Developer Toolshttp://developer.android.com/index.html• Windows Phone Developer Toolshttp://create.msdn.com/en-US/• BlackBerry Developer Tools ( Signing Key ) https://bdsc.webapps.blackberry.com/devzone/platfor ms• Apple Developer Tools ( Signing Key ) https://developer.apple.com/ 39
  40. 40. Live demo • Create jquery mobile project. • Responsive Design: Create Fluid grid layout. • Phonegap build service: Write once deploy every where. • Deploy application to your device. device• Click here to view the live recording. 40