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.

Jonathan snook - fake-it

3,866 views

Published on

Published in: Technology
  • Be the first to comment

Jonathan snook - fake-it

  1. 1. Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
  2. 2. Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
  3. 3. @snookca“increíble”
  4. 4. What I won’t betalking about.
  5. 5. Q3 Smartphone Smartphone Featurephone 43% 57% Q3 2011 Source: Nielsen
  6. 6. Q3 OS Market iOS Android BlackBerry Windows Other 7% 4% 28% 18% 43% Source: Nielsen
  7. 7. US Mobile Browser iOS Android Opera BlackBerry Other 5% 26% 39% 2% 28% Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html
  8. 8. Brazil Mobile iOS Opera Nokia Android BlackBerry Other 3% 34% 25% 1% 29% 8% Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html
  9. 9. What are people iPhone iPad Android RIM Other 14% 30% 12% 23% 21% State of the Apps Industry 2010 and 2009 Surveys; DIGIDAY, Stifel Nicolaus, Millenial Media
  10. 10. 75% developing for iOS and Android
  11. 11. Mobile Safari
  12. 12. Mobile SafariLocal Storage
  13. 13. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimations
  14. 14. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocation
  15. 15. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.
  16. 16. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware acceleration
  17. 17. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware accelerationSVG
  18. 18. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware accelerationSVG older versions of Android don’t support it
  19. 19. http://snk.ms/1o
  20. 20. Why Web over
  21. 21. Why Web overdon’t need access to device APIs
  22. 22. Why Web overdon’t need access to device APIs most apps don’t
  23. 23. Why Web overdon’t need access to device APIs most apps don’tneed quick iteration without app store approvalprocess
  24. 24. Codehttp://www.flickr.com/photos/bike/4299152140/
  25. 25. Detecting withinif(window.navigator.standalone) { // run code in “app” mode} else { // run code in mobile safari mode}
  26. 26. Home Screen Icon<link rel="apple-touch-icon" href="images/icon.png"><link rel="apple-touch-icon" sizes="72x72"href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="114x114"href="touch-icon-iphone4.png">rel="apple-touch-icon-precomposed"
  27. 27. Start-up Image<link rel="apple-touch-startup-image" href="/startup.png">
  28. 28. Start-up ImageNo apparent support for horizontal imageWhen loading in landscape, the status barcreates a gap to one edge of the loading screen.
  29. 29. Going “Full screen”<meta name="apple-mobile-web-app-capable"content="yes">
  30. 30. Status Bar<meta name="apple-mobile-web-app-status-bar-style" content="black">defaultblack-translucent
  31. 31. Viewport<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=590"><meta name="viewport" content="initial-scale=1.0"><meta name="viewport" content="initial-scale=2.3, user-scalable=no">
  32. 32. You don’t need a framework!
  33. 33. HTML PrototypesHTMLElement.prototype.__defineSetter__("ontap",function(func){ });document.getElementById(keypad).ontap =function(){ alert(just the keypad);};
  34. 34. HTML PrototypesHTMLElement.prototype.switchClass =function(fromClass, toClass){ if(this.className == fromClass) { this.className = toClass; } else { this.className = fromClass; } }document.getElementById(spinner-shell).switchClass(collapsed, expanded);
  35. 35. querySelector(All)document.querySelector(.active); // one eldocument.querySelectorAll(.active); // all
  36. 36. BUT I WANTfunction $(selector){ return document.querySelectorAll(selector);}$(#myelement p);
  37. 37. Looping[3,2,1].forEach(function(itm, idx){ console.log(itm, idx); // 3,0 | 2,1 | 1,2})
  38. 38. Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata, JSON.stringify(items));
  39. 39. Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error);} else {  error(not supported);}function success(pos) { console.log( pos.coords.longitude, pos.coords.latitude );}
  40. 40. Use CSS for UI#units div:nth-child(2) { -webkit-transform:rotate(45deg); }#units div:nth-child(3) { -webkit-transform:rotate(90deg); }#units div:nth-child(4) { -webkit-transform:rotate(135deg); }#units div:nth-child(5) { -webkit-transform:rotate(180deg); }#units div:nth-child(6) { -webkit-transform:rotate(225deg); }#units div:nth-child(7) { -webkit-transform:rotate(270deg); }#units div:nth-child(8) { -webkit-transform:rotate(315deg); }
  41. 41. Use Transitions-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;el.style.webkitTransform = rotate(+pos+deg);
  42. 42. Webkit Animations@-webkit-keyframes { 0% { background-position-y: 0; } 100% { background-position-y: -100%; }}body { background-image:url("canvas-crumpled.jpeg"); -webkit-animation: bg 3s linear infinite;}
  43. 43. Touch vs ClickUsing touch events can make the app feel fasterthan click events.You can customize tap hightlight colour
  44. 44. Touch vs Click-webkit-tap-highlight-color:rgba(200,0,0,0.4);
  45. 45. Input Features<input autocorrect="on"> <!-- or “off” --><input placeholder="Example Text"><input type="email"><input type="url"><input type="number"><input type="search">
  46. 46. Lockingwindow.addEventListener(orientationchange, function(){ if(window.orientation == -90) { document.getElementById(orient).className = orientright; } if(window.orientation == 90) { document.getElementById(orient).className = orientleft; } if(window.orientation == 0) { document.getElementById(orient).className = ; }}, true);
  47. 47. Locking.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px;}.orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px;}
  48. 48. Locking
  49. 49. PerformanceUse CSS instead of JavaScript for Animations use CSS Transitions use CSS Animations use 2D and 3D transforms to force hardware acceleration
  50. 50. Hardware2D and 3D transforms may be hardwareaccelerateduse translateX/Y instead of top/leftuse rotateX(0) to push items with heavy CSS touse hardware acceleration (it’s like IE’s zoom:1 to force hasLayout)
  51. 51. Testing
  52. 52. TestingiOS Simulator is fast but not entirely accurate
  53. 53. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurate
  54. 54. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versions
  55. 55. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on device
  56. 56. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on deviceFor multi-touch testing, must do on the device.
  57. 57. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on deviceFor multi-touch testing, must do on the device. pinch/zoom, rotate possible in iOS simulator
  58. 58. Framewhttp://www.flickr.com/photos/nocallerid_man/3638360458/
  59. 59. Mobile WebjQTouchXUI.jsjQuery MobileDojo MobileSencha Touch
  60. 60. jQTouchTargetted for iOSMakes web app feel like native app with controlsand list viewshttp://jqtouch.com/
  61. 61. XUI.JSx$(#btn).click( function (e) { x$(#msg).html(¡Hola!);})
  62. 62. XUI.JSclean, familiar, chaining syntax.super tiny 10.4kb footprint (4.2kb gzipped).targeted builds for webkit, ie mobile, andblackberry
  63. 63. Dojo MobileDesigned for iPhone, AndroidIncludes touch and gesture supportSupport for native-style widgetsCan create webkit-only buildshttp://dojotoolkit.org/features/mobile
  64. 64. jQuery MobileDesigned for iPhone, Android, webOS plus bada, Meego, Windows Mobile and moreIncludes touch and gesture supporthttp://jquerymobile.com/
  65. 65. Sencha TouchDesigned for iPhone and AndroidIncludes enhanced touch eventsAllows for rapid developmenthttp://www.sencha.com/products/touch/
  66. 66. Examplhttp://www.flickr.com/photos/mollymazilu/5827249387/
  67. 67. Could be a WebCalculators (e.g. CalcBot)TwitterProductivity Apps (e.g. Things.app)Recipe Databases (e.g. Epicurious)Weather AppsUI Sketcher
  68. 68. Could be a WebWords With Friends/ScrabbleAngry Birds http://chrome.angrybirds.com/CanabaltBejeweledRamp Champ
  69. 69. 37Signals: Chalk
  70. 70. 37Signals: Chalk
  71. 71. http://chalk.37signals.com/
  72. 72. Shkrubbel
  73. 73. https://github.com/kitt/shkrubbel
  74. 74. The Two Hour AppFrameworks allow for rapid developmentUsed jQTouchUsed localStorage
  75. 75. http://pushups.snook.ca/
  76. 76. ConvertBot
  77. 77. http://snook.ca/testing/convertbot/
  78. 78. Going
  79. 79. Why Native overAccess to native hardware and other applicationsCamera, Address Book, FilesystemStreamlined Revenue Process
  80. 80. Meet in the middleMany apps take advantage of native WebView toload application components from remote server allows for iteration of some app components without requiring complete approval process from app store
  81. 81. PhoneGap andTitanium Mobile targets iPhone and AndroidPhoneGap targets iPhone, Android, Palm,Symbian and Blackberry.http://www.appcelerator.com/http://www.phonegap.com/
  82. 82. Have fun! /http://www.flickr.com/photos/sbluerock/364123380/
  83. 83. @snookcahttp://snook.ca

×