Jonathan snook - fake-it

  • 3,210 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,210
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
24
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
  • 2. Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
  • 3. @snookca“increíble”
  • 4. What I won’t betalking about.
  • 5. Q3 Smartphone Smartphone Featurephone 43% 57% Q3 2011 Source: Nielsen
  • 6. Q3 OS Market iOS Android BlackBerry Windows Other 7% 4% 28% 18% 43% Source: Nielsen
  • 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. 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. 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. 75% developing for iOS and Android
  • 11. Mobile Safari
  • 12. Mobile SafariLocal Storage
  • 13. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimations
  • 14. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocation
  • 15. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.
  • 16. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware acceleration
  • 17. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware accelerationSVG
  • 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. http://snk.ms/1o
  • 20. Why Web over
  • 21. Why Web overdon’t need access to device APIs
  • 22. Why Web overdon’t need access to device APIs most apps don’t
  • 23. Why Web overdon’t need access to device APIs most apps don’tneed quick iteration without app store approvalprocess
  • 24. Codehttp://www.flickr.com/photos/bike/4299152140/
  • 25. Detecting withinif(window.navigator.standalone) { // run code in “app” mode} else { // run code in mobile safari mode}
  • 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. Start-up Image<link rel="apple-touch-startup-image" href="/startup.png">
  • 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. Going “Full screen”<meta name="apple-mobile-web-app-capable"content="yes">
  • 30. Status Bar<meta name="apple-mobile-web-app-status-bar-style" content="black">defaultblack-translucent
  • 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. You don’t need a framework!
  • 33. HTML PrototypesHTMLElement.prototype.__defineSetter__("ontap",function(func){ });document.getElementById(keypad).ontap =function(){ alert(just the keypad);};
  • 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. querySelector(All)document.querySelector(.active); // one eldocument.querySelectorAll(.active); // all
  • 36. BUT I WANTfunction $(selector){ return document.querySelectorAll(selector);}$(#myelement p);
  • 37. Looping[3,2,1].forEach(function(itm, idx){ console.log(itm, idx); // 3,0 | 2,1 | 1,2})
  • 38. Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata, JSON.stringify(items));
  • 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. 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. Use Transitions-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;el.style.webkitTransform = rotate(+pos+deg);
  • 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. Touch vs ClickUsing touch events can make the app feel fasterthan click events.You can customize tap hightlight colour
  • 44. Touch vs Click-webkit-tap-highlight-color:rgba(200,0,0,0.4);
  • 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. 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. Locking.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px;}.orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px;}
  • 48. Locking
  • 49. PerformanceUse CSS instead of JavaScript for Animations use CSS Transitions use CSS Animations use 2D and 3D transforms to force hardware acceleration
  • 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. Testing
  • 52. TestingiOS Simulator is fast but not entirely accurate
  • 53. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurate
  • 54. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versions
  • 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. 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. 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. Framewhttp://www.flickr.com/photos/nocallerid_man/3638360458/
  • 59. Mobile WebjQTouchXUI.jsjQuery MobileDojo MobileSencha Touch
  • 60. jQTouchTargetted for iOSMakes web app feel like native app with controlsand list viewshttp://jqtouch.com/
  • 61. XUI.JSx$(#btn).click( function (e) { x$(#msg).html(¡Hola!);})
  • 62. XUI.JSclean, familiar, chaining syntax.super tiny 10.4kb footprint (4.2kb gzipped).targeted builds for webkit, ie mobile, andblackberry
  • 63. Dojo MobileDesigned for iPhone, AndroidIncludes touch and gesture supportSupport for native-style widgetsCan create webkit-only buildshttp://dojotoolkit.org/features/mobile
  • 64. jQuery MobileDesigned for iPhone, Android, webOS plus bada, Meego, Windows Mobile and moreIncludes touch and gesture supporthttp://jquerymobile.com/
  • 65. Sencha TouchDesigned for iPhone and AndroidIncludes enhanced touch eventsAllows for rapid developmenthttp://www.sencha.com/products/touch/
  • 66. Examplhttp://www.flickr.com/photos/mollymazilu/5827249387/
  • 67. Could be a WebCalculators (e.g. CalcBot)TwitterProductivity Apps (e.g. Things.app)Recipe Databases (e.g. Epicurious)Weather AppsUI Sketcher
  • 68. Could be a WebWords With Friends/ScrabbleAngry Birds http://chrome.angrybirds.com/CanabaltBejeweledRamp Champ
  • 69. 37Signals: Chalk
  • 70. 37Signals: Chalk
  • 71. http://chalk.37signals.com/
  • 72. Shkrubbel
  • 73. https://github.com/kitt/shkrubbel
  • 74. The Two Hour AppFrameworks allow for rapid developmentUsed jQTouchUsed localStorage
  • 75. http://pushups.snook.ca/
  • 76. ConvertBot
  • 77. http://snook.ca/testing/convertbot/
  • 78. Going
  • 79. Why Native overAccess to native hardware and other applicationsCamera, Address Book, FilesystemStreamlined Revenue Process
  • 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. PhoneGap andTitanium Mobile targets iPhone and AndroidPhoneGap targets iPhone, Android, Palm,Symbian and Blackberry.http://www.appcelerator.com/http://www.phonegap.com/
  • 82. Have fun! /http://www.flickr.com/photos/sbluerock/364123380/
  • 83. @snookcahttp://snook.ca