Your SlideShare is downloading. ×
The story behind PF2014 - Cordova
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

The story behind PF2014 - Cordova

1,847
views

Published on

The story behind building application PF2014 based on Cordova with AngularJS, jQuery without Canvas. Short info about app markets like Google Play, Apple App Store, Amazon App Store and Windows Phone …

The story behind building application PF2014 based on Cordova with AngularJS, jQuery without Canvas. Short info about app markets like Google Play, Apple App Store, Amazon App Store and Windows Phone store

Published in: Technology, News & Politics

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,847
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
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. The story behind PF2014 http://pf2014.sinusgear.com Juraj Michálek Brno
  • 2. Creativity is just connecting things. - Jobs
  • 3. Motivation Create something new Learn something new Do something new
  • 4. PF 2010
  • 5. PF 2011
  • 6. PF 2012 HTML5 Canvas
  • 7. PF 2013 Webfonts
  • 8. PF 2014? Mobile Touch
  • 9. Apache Cordova
  • 10. Install NodeJS
  • 11. Install Cordova
  • 12. Create project
  • 13. Add platform
  • 14. Build
  • 15. Emulate - AVD Manager
  • 16. Import to Idea
  • 17. Correction of modules
  • 18. Run/Emulate from Idea
  • 19. Logs
  • 20. Cordova project structure ● platforms ○ android ○ ios ● plugins ● www (edit code here)
  • 21. Testing in browser
  • 22. HTML5 Canvas - EaselJS A Javascript library that makes working with the HTML5 Canvas element easy.
  • 23. Problems performance: Caching demo - 2 FPS - Samsung Galaxy S worse tooling than HTML :-(
  • 24. Constellations
  • 25. Tracing Paper tool http://tp.sinusgear.com
  • 26. Display stars <i class="positionMarker fa fa-star" data-index="{{$index}}" ng-repeat="item in visibleStars" ng-style=" getStarStyle(item)"> </i>
  • 27. http://fontawesome.io/
  • 28. Use Font Awesome in Cordova
  • 29. Drag the star Angular-drag-drop, Angular-touch angular.module('app', ['ngTouch', 'ngDragDrop']) .controller('ConstellationController',...
  • 30. Drag’n’drop jQuery-ui - animation drag by mouse
  • 31. No Canvas? How to draw a line?!
  • 32. Div + CSS3 .line { width: 100px; height: 2px; transform: rotate(120deg); background: lightyellow; ... }
  • 33. AngularJS dynamic style <div class="line" ng-repeat="line in visibleLines" ng-style=" getLineStyle(line)"> </div>
  • 34. Chrome Developer Tools - F12
  • 35. Google Chrome Canary
  • 36. Mobile device emulation
  • 37. Hups! Drag’n’drop does not work on mobile!
  • 38. Event mapping override switch(event.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type="mousemove"; break; case "touchend": type="mouseup"; break; default: return; }
  • 39. Persisting game state
  • 40. Angular local storage
  • 41. Going mobile
  • 42. https://play.google.com/apps/publish Registration: 25$ - one time payment for developer
  • 43. Signed APK
  • 44. Prepare and publish https://play.google.com/apps/publish
  • 45. Review ~ 1 day
  • 46. Going live
  • 47. Analytics
  • 48. http://developer.apple.com Registration: 99$ / year Approved bank account: ~2 days
  • 49. Build: only Mac OS X - requires: XCode - sign by valid Apple certificate
  • 50. Review: 5-7 days
  • 51. http://www.windowsphone.com/ Registration: 19$/year Build: WP8 requires Windows 8
  • 52. https://developer.amazon.com/home.html Registration: free Review: ~1 day
  • 53. PF 2014 summary Web: 188 visits Google Play: 25 Amazon: 6 Apple App Store: 0, still waiting for approval Campaign channels: Mail, Skype, Google+
  • 54. Grab the source code :-) https://github.com/georgik/pf2014
  • 55. Share and enjoy PF 2014: http://georgik.sinusgear.com/2013/12/28/pf-2014/ PF 2013: http://georgik.sinusgear.com/2012/12/22/pf-2013/ PF 2012: http://georgik.sinusgear.com/2011/12/31/pf-2012/ PF 2011: http://georgik.sinusgear.com/2010/12/23/pf2011/ PF 2010: http://georgik.sinusgear.com/2009/12/26/pf-2010/

×