Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The story behind PF2014
http://pf2014.sinusgear.com
Juraj Michálek
Brno
Creativity is just connecting things.
- Jobs
Motivation
Create something new
Learn something new
Do something new
PF 2010
PF 2011
PF 2012

HTML5 Canvas
PF 2013

Webfonts
PF 2014?
Mobile
Touch
Apache Cordova
Install NodeJS
Install Cordova
Create project
Add platform
Build
Emulate - AVD Manager
Import to Idea
Correction of modules
Run/Emulate from Idea
Logs
Cordova project structure
● platforms
○ android
○ ios

● plugins
● www (edit code here)
Testing in browser
HTML5 Canvas - EaselJS

A Javascript library that makes working with the
HTML5 Canvas element easy.
Problems

performance: Caching demo - 2 FPS - Samsung Galaxy S
worse tooling than HTML :-(
Constellations
Tracing Paper tool
http://tp.sinusgear.com
Display stars
<i class="positionMarker fa fa-star"
data-index="{{$index}}"
ng-repeat="item in visibleStars" ng-style="
get...
http://fontawesome.io/
Use Font Awesome in Cordova
Drag the star
Angular-drag-drop, Angular-touch
angular.module('app', ['ngTouch',
'ngDragDrop'])
.controller('Constellation...
Drag’n’drop
jQuery-ui - animation
drag by mouse
No Canvas?

How to draw a line?!
Div + CSS3
.line {
width: 100px;
height: 2px;
transform: rotate(120deg);
background: lightyellow; ...
}
AngularJS dynamic style
<div class="line"
ng-repeat="line in visibleLines" ng-style="
getLineStyle(line)">
</div>
Chrome Developer Tools - F12
Google
Chrome
Canary
Mobile device emulation
Hups!

Drag’n’drop does not work on mobile!
Event mapping override
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemov...
Persisting game state
Angular local storage
Going mobile
https://play.google.com/apps/publish
Registration: 25$
- one time payment for developer
Signed APK
Prepare and publish

https://play.google.com/apps/publish
Review ~ 1 day
Going live
Analytics
http://developer.apple.com
Registration: 99$ / year
Approved bank account: ~2 days
Build: only Mac OS X
- requires: XCode
- sign by valid Apple certificate
Review: 5-7 days
http://www.windowsphone.com/
Registration: 19$/year
Build: WP8 requires Windows 8
https://developer.amazon.com/home.html
Registration: free
Review: ~1 day
PF 2014 summary
Web: 188 visits
Google Play: 25
Amazon: 6
Apple App Store: 0, still waiting for approval
Campaign channels...
Grab the source code :-)

https://github.com/georgik/pf2014
Share and enjoy
PF 2014: http://georgik.sinusgear.com/2013/12/28/pf-2014/
PF 2013: http://georgik.sinusgear.com/2012/12/22...
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
Upcoming SlideShare
Loading in …5
×

The story behind PF2014 - Cordova

3,010 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 store

Published in: Technology, News & Politics
  • Your opinions matter! get paid BIG $$$ for them! START NOW!!.. ■■■ https://tinyurl.com/make2793amonth
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE... http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • A couple of days ago I told you about my friend John Collins who was giving away his new enlargement exercises eBook. Well, he just reached out to me this morning and told me his email inbox literally blew up. He couldn't sort through the 230+ emails he had received in the last 48 hours BEGGING him to reveal more about his enlargement methods. John isn't the most technically savvy guy, and at his typical typing speed I estimate it would probably take him about a year to reply to all those e-mails. So, I convinced him to run a webinar and answer the most common questions about natural penis enlargement that he has been receiving. He is going to reveal some pretty shocking things about the enlargement industry, and what makes his two-step process different than anything else you may have tried. The only problem is, seating is very limited due to server capacity, so to reserve your seat you need to register at the link below. Reserve your seat for John's upcoming natural enlargement webinar ■■■ https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • let's be honest. There are a lot of crazy devices, pumps and p.ills that all claim to be the solution to adding BIG length to your penis. However, most, if not all of these solutions don't pan out, or the growth is only temporary. I guess you could always consider surgery, but if you are anything like me, the thought of having a sharp metal object anywhere near your junk makes you quiver with blood curdling fear :-) Well, it just so happens my friend John, who I met at a men's health conference a few years back, has literally stumbled upon the key to natural male growth. Unlike other systems out there, his involves two unique components: 1. Restarting biological growth that boys experienced during puberty, turning them into men. 2. Performing tested and targeted exercises to encourage blood flow and supersize growth. John has just released a completely ZERO COST enlargement exercises guide where you can discover the proven techniques to start REAL and PERMANENT growth. Download the enlargement exercises guide here ➤➤ https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I went from getting $3 surveys to $500 surveys every day!! learn more...  https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

The story behind PF2014 - Cordova

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

×