Mobile HTML, CSS, and JavaScript

216,648 views

Published on

My talk for Bayjax, ending the first day of Yahoo's internal Frontend Summit 2011.

4 Comments
56 Likes
Statistics
Notes
No Downloads
Views
Total views
216,648
On SlideShare
0
From Embeds
0
Number of Embeds
166,345
Actions
Shares
0
Downloads
633
Comments
4
Likes
56
Embeds 0
No embeds

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
  • Mobile HTML, CSS, and JavaScript

    1. 1. MobileHTML, CSS, JavaScript David Calhoun
    2. 2. Viewport Meta Tag :( :)
    3. 3. Viewport Meta Tag<meta name="viewport"content="width=device-width"/>
    4. 4. URI Schemeshref="sms:18005555555" href="tel:18005555555"
    5. 5. Home Screen Icon Android too!
    6. 6. Home Screen Icon<link rel="apple-touch-icon"href="icon.png"/>
    7. 7. Full Screen Flag (iOS) vs
    8. 8. Full Screen Flag (iOS)<meta name="apple-mobile-web-app-capable" content="yes"/>
    9. 9. Splash Screen (iOS) <link rel="apple-touch- startup-image" href="startup.png"/>
    10. 10. Status Bar StyleDefault Black
    11. 11. Status Bar Style<meta name="apple-mobile-web-app-status-bar-style"content="black"/>
    12. 12. <input type=”search”>
    13. 13. <input type=”tel”>
    14. 14. <input type=”email”>
    15. 15. Media Capture 3.0
    16. 16. Media Capture• Opens straight to the camera or microphone for file input 3.0
    17. 17. Media Capture • Opens straight to the camera or microphone for file input<input type="file" accept="image/*;capture=camera"/> 3.0
    18. 18. Media Capture • Opens straight to the camera or microphone for file input<input type="file" accept="image/*;capture=camera"/><input type="file" accept="video/*;capture=camcorder"/> 3.0
    19. 19. Media Capture • Opens straight to the camera or microphone for file input<input type="file" accept="image/*;capture=camera"/><input type="file" accept="video/*;capture=camcorder"/><input type="file" accept="audio/*;capture=microphone"/> 3.0
    20. 20. The Joys of Autocorrect
    21. 21. Controlling autocorrect<input autocorrect="off"autocomplete="off"autocapitalize="off"/>
    22. 22. Media Queries• based on screen size and device size• based on orientation• based on screen resolution• etc...
    23. 23. Media Queries@media all and (max-width: 480px) { body { }}@media all and (max-device-width: 480px) { }@media all and (orientation: portrait) { }
    24. 24. tap-highlight-color .no-highlight { -webkit-tap-highlight-color: transparent; } .red-highlight { -webkit-tap-highlight-color: red; }
    25. 25. user-select .no-user-select { -webkit-user-select: none; -moz-user-select: none; user-select: none; } ?
    26. 26. touch-callout .no-callout { -webkit-touch-callout: none; }Default behavior
    27. 27. JavaScript
    28. 28. Touch Events • touchstart • touchmove • touchend • (touchcancel)
    29. 29. Touch Eventsdocument.addEventListener(touchstart,function(e){ //e.touches //e.changedTouches}, false);http://frontendstuff.com/javascript/examples/touch.html
    30. 30. Gesture Events (iOS) • iOS only • 2+ fingers • gesturestart • gesturechange • gestureend
    31. 31. Gesture Events (iOS) document.addEventListener(gesturestart, function(e){ //e.scale //e.rotation }, false);http://frontendstuff.com/javascript/examples/gesture.html
    32. 32. orientationchange// fired every 90 degrees of rotationwindow.addEventListener(orientationchange,function(e){ //window.orientation (0 is portrait, 90 and-90 are landscape)}, false);
    33. 33. deviceorientation • taps into the gyroscope • not just every 90 degrees 3.0 4.2http://frontendstuff.com/javascript/examples/deviceorientation.html
    34. 34. deviceorientation// fired a LOTwindow.addEventListener(deviceorientation, function(e){ //e.alpha; //e.beta; //e.gamma;}, false);
    35. 35. devicemotion • taps into accelerometer • practical application: shake gesture? 3.0 4.2http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/ DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html
    36. 36. devicemotion window.addEventListener(devicemotion, function (e){ // e.accelerationIncludingGravity.x // e.accelerationIncludingGravity.y // e.accelerationIncludingGravity.z }, false);http://frontendstuff.com/javascript/examples/devicemotion.html
    37. 37. window.devicePixelRatio
    38. 38. window.devicePixelRatio• 1.5 (Nexus One, etc.)• 2 (iPhone 4, etc.)
    39. 39. navigator.connection (Android) { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" } 2.2
    40. 40. navigator.connection (Android)navigator.connection.CELL_3Gnavigator.connection.CELL_2Gnavigator.connection.WIFI
    41. 41. Mobile JavaScript Libraries and much more... http://davidbcalhoun.com/2010/mobile-javascript-libraries-and-frameworks
    42. 42. Photo Credits • http://www.flickr.com/photos/kk/106960641/ • http://www.flickr.com/photos/geirarne/110995239/ • http://www.flickr.com/photos/aldrin_muya/3133715902/ • http://crockfordfacts.com/ • http://www.flickr.com/photos/equanimity/535648833/ • http://www.flickr.com/photos/71518947@N00/4698968858/
    43. 43. That’s All Folks!• Twitter: @franksvalli• SpeakerRate: http://bit.ly/hMEEfo

    ×