201 Exploring Cross-Platform Tools for Mobile Development: Lessons Learned
Total Page:16
File Type:pdf, Size:1020Kb
mLearning: Tips and Techniques for Development and Implementation November 14 & 15, 2013 201 Exploring Cross-platform Tools For Mobile Development: Lessons Learned Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Exploring Cross-platform Tools for Mobile Development: Lessons Learned Perry Bennett 2013 Nov 14 Overview . What is Cross-platform Mobile Development? . Pros and Cons of Cross-platform Tools . Tools: Adobe AIR, PhoneGap, Titanium SDK, Corona SDK, Unity, and Responsive Web Design Session 201 – Exploring Cross-platform Tools For Mobile Page 1 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Native Hybrid Web http://applaudservices.com/wp-content/uploads/2013/02/various-mobile-devices.gif 3 Have We Been Here Before? http://www.paulirish.com/2010/high-res-browser-icons/ 4 Session 201 – Exploring Cross-platform Tools For Mobile Page 2 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 http://www.androidauthority.com/samsungs-26-screens-226746/ 5 Pros: Reusable Code Base http://http://en.wikipedia.org/wiki/File:Recycle001.svg 6 Session 201 – Exploring Cross-platform Tools For Mobile Page 3 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Pros: Maintenance http://www.techradar.com/news/phone-and-communications/mobile- 7 phones/android-4-1-vs-windows-phone-8-vs-ios-6-1086326 Pros: Cost Effective http://blogs.disney.com/oh-my-disney/2013/06/13/dreams-do-come-true/ 8 Session 201 – Exploring Cross-platform Tools For Mobile Page 4 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Pros: Utilize Existing Skills http://akraya.com/wp-content/uploads/2013/07/web- trifecta_html5_css3_js-strict.png http://www.swfgeek.net/blog/wp-content/uploads/2010/08/as3logo.jpg 9 Pros: Flexibility http://www.tapscape.com/iphone-vs-android-why-apple-has-stumbled-while- 10 android-grows/ Session 201 – Exploring Cross-platform Tools For Mobile Page 5 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Cons: Proprietary / Limited API’s http://www.coronalabs.com/products/corona-sdk/corona-is-10x-faster/ 11 Cons: Performance Issues http://www.brighthand.com/shared/picture.asp?f=23359 12 Session 201 – Exploring Cross-platform Tools For Mobile Page 6 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Cons: Framework Specific Code http://www.sdncentral.com/companies/vyatta-and-brocade-glove-or-square-peg-in- 13 a-round-hole/2012/11/ Cons: Inconsistent UI Patterns http://developer.android.com/design/patterns/pure-android.html 14 Session 201 – Exploring Cross-platform Tools For Mobile Page 7 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Computing Setup: Mac vs. PC Mobile OS Development Mac PC Android P PP Blackberry P P iOS P O Windows Phone O P 15 Overview of Adobe AIR . Deliver Standalone Flash Applications Outside of the Browser . Can Be Created Using HTML, JavaScript, Flash, or Flex . Port Existing Desktop Flash Apps to Mobile Devices http://www.softicons.com/free-icons/application-icons/adobe-cs3-icons-by-adam- betts/adobe-air-icon 16 Session 201 – Exploring Cross-platform Tools For Mobile Page 8 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Pros and Cons of Adobe AIR Pros Cons Existing ActionScript / Flex Skills Apps Not Consistent Across Platforms Can Port App to Many Platforms Performance May Not Be Optimal Native Extensions to Utilize Device Features 17 App: QR Scanner 18 Session 201 – Exploring Cross-platform Tools For Mobile Page 9 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 App: QR Scanner Cont. 19 Overview of PhoneGap . Free and Open Source Framework . PhoneGap vs. Apache Cordova . Utilize HTML, CSS, and JavaScript to Create Native Application . Webview Within Native Application http://phonegap.com/uploads/artwork/Build-Bot.png 20 Session 201 – Exploring Cross-platform Tools For Mobile Page 10 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Overview of PhoneGap Cont. http://phonegap.com/uploads/artwork/Build-Diagram-3.png 21 App: Pocket Guide 22 Session 201 – Exploring Cross-platform Tools For Mobile Page 11 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Pros and Cons of PhoneGap Pros Cons Existing Web Design Skills Webview Within a Native Application APIs That Tie Into Native Device Features Mobile Browser Inconsistencies Compile to Many Native Platforms PhoneGap Build Compiles Apps Without SDKs 23 Overview of Titanium SDK . Uses JavaScript to Deploy Native, Mobile Web and Hybrid Applications . Open Source SDK . Modules Can Extend the Base Functionality https://my.appcelerator.com/auth/signup 24 Session 201 – Exploring Cross-platform Tools For Mobile Page 12 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Overview of Titanium SDK Cont. http://www.appcelerator.com.s3.amazonaws.com/web/infographics/sdk-interaction.png 25 Pros and Cons of Titanium SDK Pros Cons Lots of Developer Resources / Community Inconsistent Behavior Across Devices Rapid Prototyping Difficult to Debug Apps Web Oriented Development Performance With Graphic Intensive Apps 26 Session 201 – Exploring Cross-platform Tools For Mobile Page 13 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Overview of Unity . Cross-platform 3D / 2D Game Engine . Can Be Used Through Web Browser, Standalone Desktop, and Mobile https://www.unity3d.com 27 App: Flight Simulator 28 Session 201 – Exploring Cross-platform Tools For Mobile Page 14 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Pros and Cons of Unity Pros Cons Pretty Consistent Across Various Platforms Unity GUI System Flexible Scripting Options Source Control / Versioning Great Documentation / Examples Asset Store 29 Overview of Corona SDK . Cross-platform 2D Game Engine . Built For Mobile, Uses the Scripting Language LUA . Deploy to iOS, Android, Windows, Nook, Kindle http://forums.coronalabs.com/topic/35293-unofficial-high-resolution-corona-sdk- logos-for-credits/ 30 Session 201 – Exploring Cross-platform Tools For Mobile Page 15 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 App: mLearning Framework 31 Pros and Cons of Corona SDK Pros Cons Pretty Consistent Across Various Platforms No Official IDE for Graphic / Text Layout LUA Scripting is Quick to Learn Evolving API’s Can Break Older Code Great Documentation / 3rd Party Tools No Offline Builds Active Community 32 Session 201 – Exploring Cross-platform Tools For Mobile Page 16 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Overview of Responsive Web Design . A Technique to Have Websites Adjust to Varying Screen Sizes . Uses Standard Web Development Languages . Apps Are Viewed Through the Desktop / Mobile Web Browser http://www.desiznworld.com/2013/09/responsive-web-design.html 33 Responsive Web Design Examples http://www.mediaqueries.es 34 Session 201 – Exploring Cross-platform Tools For Mobile Page 17 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Pros and Cons of RWD Pros Cons One Code Base Adapts to Any Type of Screen More Time Consuming to Develop Utilize Existing Web Development Skills Ample Testing for Desktop and Mobile Browsers Users Don’t Need to Install Apps on Devices Harder to Visualize Final Design 35 Cross-platform Tool Pricing . Adobe Creative Cloud - $49.99 per month Adobe AIR . Adobe Flash CC - $19.99 per month . Free + Any Text Editor That Supports Web Adobe PhoneGap Development Languages (Free - $) . Titanium – Free . Appcelerator Platform (Public Cloud) – Appcelerator Titanium SDK Contact Company . Appcelerator Platform (Virtual Private Cloud) – Contact Company . Unity / Mobile Add-ons – Free Unity Technologies Unity . Unity Pro - $1,500 . Mobile Add-ons Pro - $1,500 each . Starter – Free Corona Labs Corona SDK . Basic / Pro - $192 / $588 annually . Enterprise - $948 / $2,388 annually . Any Text Editor That Supports Web Responsive Web Design Development Languages (Free - $) 36 Session 201 – Exploring Cross-platform Tools For Mobile Page 18 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013 Summary . What is Cross-platform Mobile Development? . Pros and Cons of Cross-platform Tools . Tools: Adobe AIR, PhoneGap, Titanium SDK, Corona SDK, Unity, and Responsive Web Design Thank You! . Perry Bennett, Multimedia Developer . [email protected] . www.thevisualstation.com 38 Session 201 – Exploring Cross-platform Tools For Mobile Page 19 Development: Lessons Learned – Perry Bennett .