HC - The Mobile Adventure with Phonegap

3,369 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
3,369
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HC - The Mobile Adventure with Phonegap

  1. “ “It’s time to thinkMOBILE FIRST
  2. our Story
  3. a Real Story
  4. Rails mobile view + jQuery Mobile
  5. Enough to raise money
  6. 2012 - Designer full-time
  7. Demo
  8. Architecture
  9. CLIENT PART Website Mobile Apps http://hockey-community.com Phonegap (HTML5) h Aut +o hJson pt wit Cry API Github Code VersioningBACK OFFICE Cloud Hosting Code Versioning Performance Monitoring Github 1 Heroku App New Relic Ruby on Rails Database Storage Emailing Amazon RDS Amazon S3 Sendgrid
  10. Github4 repositories
  11. MVC“The Rails Style”
  12. Framework?
  13. Fight iOS release cycles
  14. Explore the code
  15. Aug 2012 - Porting to Android 2 weeks
  16. Chromium error -6
  17. Changing the href listeners Every time we change the page// -- Set android params -- // function setAndroidParams(href){" if (href) {" " var n = href.indexOf(?);" " window.localStorage.setItem("android-href", href);" " href = href.substring(0, n != -1 ? n : href.length);" " return href; " }}// -- Android anchor listener -- //function refresh_android_listener(page_div, event){" " $(page_div).on(event, a, function() {" " " var href = $(this).attr(href);" " " if (href && href != "#" && href.search("tel") == -1){" " " " change_page(href);" " " " return false;" " " } " " });}
  18. Accessing URL parameters statuses_show.html?status_id=104381function getParamValue(param,url) { // Android only url = window.localStorage.getItem("android-href");" // Common to iOS and Android" var u = (url == undefined || (url != undefined && url.indexOf("?") == -1)) ?document.location.href : url; var reg = new RegExp((?|&|^)+param+=(.*?)(&|$));" matches = u.match(reg); return (matches != undefined && matches.length > 1) ?decodeURIComponent(matches[2]).replace(/+/g, ) : null;}
  19. Same function names on iOS and Androidfunction triggerActionSheet(param,url) { // Android only}function triggerActionSheet(param,url) { // iOS Only}
  20. Native Scrolling & height fixing on iOS and Android#events_content  {   margin-­‐top:42px;   height:420px;   overflow-­‐y:  scroll;   -­‐webkit-­‐overflow-­‐scrolling:  touch;   /*-­‐webkit-­‐transform:  translateZ(0px);*/}
  21. Android 2.3Doesn’t workvar  container  =  document.querySelector(#box);container.classList.add(wrap);container.classList.remove(wrap);container.classList.toggle(wrap);Fix:Works//  Legacy  JS   var  legacyHasClass  =  function  (el,  cl)  {                  var  regex  =  new  RegExp((?:s|^)  +  cl  +  (?:s|$));                  return  !!el.className.match(regex);          },          legacyAddClass  =  function  (el,  cl)  {                  el.className  +=      +  cl;          },          legacyRemoveClass  =  function  (el,  cl)  {                  var  regex  =  new  RegExp((?:s|^)  +  cl  +  (?:s|$));                  el.className  =  el.className.replace(regex,    );          },          legacyToggleClass  =  function  (el,  cl)  {                  hasClass(el,  cl)  ?  removeClass(el,  cl)  :  addClass(el,  cl);          };
  22. Android DatePicker Galaxy S3
  23. Questions?
  24. 5 Design tips
  25. 1. Break the rules
  26. 1. Break the rules
  27. 2. Acknowledge User Interactions
  28. 2. Acknowledge User Interactions
  29. 3. Give your app personality
  30. 3. Give your app personality
  31. 3. Give your app personality
  32. 4. Call To Action & Distractions
  33. 4. Call To Action & Distractions
  34. and last Don’t forget the basics Consistency, Simplicity, etc
  35. Questions?
  36. Looking Forward
  37. Have fun!

×