0
MobileHTML, CSS, JavaScript       David Calhoun
Viewport Meta Tag   :(        :)
Viewport Meta Tag<meta name="viewport"content="width=device-width"/>
URI Schemeshref="sms:18005555555"   href="tel:18005555555"
Home Screen Icon          Android too!
Home Screen Icon<link rel="apple-touch-icon"href="icon.png"/>
Full Screen Flag (iOS)         vs
Full Screen Flag (iOS)<meta name="apple-mobile-web-app-capable" content="yes"/>
Splash Screen (iOS)       <link rel="apple-touch-       startup-image"       href="startup.png"/>
Status Bar StyleDefault         Black
Status Bar Style<meta name="apple-mobile-web-app-status-bar-style"content="black"/>
<input type=”search”>
<input type=”tel”>
<input type=”email”>
Media Capture                3.0
Media Capture• Opens straight to the camera or  microphone for file input                                    3.0
Media Capture • Opens straight to the camera or    microphone for file input<input type="file" accept="image/*;capture=came...
Media Capture • Opens straight to the camera or    microphone for file input<input type="file" accept="image/*;capture=came...
Media Capture • Opens straight to the camera or    microphone for file input<input type="file" accept="image/*;capture=came...
The Joys of Autocorrect
Controlling autocorrect<input autocorrect="off"autocomplete="off"autocapitalize="off"/>
Media Queries• based on screen size and device size• based on orientation• based on screen resolution• etc...
Media Queries@media   all and (max-width: 480px) {  body   { }}@media   all and (max-device-width: 480px) { }@media   all ...
tap-highlight-color        .no-highlight {          -webkit-tap-highlight-color:        transparent;        }        .red-...
user-select     .no-user-select {       -webkit-user-select: none;       -moz-user-select: none;       user-select: none; ...
touch-callout                   .no-callout {                     -webkit-touch-callout:                   none;          ...
JavaScript
Touch Events         • touchstart         • touchmove         • touchend         • (touchcancel)
Touch Eventsdocument.addEventListener(touchstart,function(e){  //e.touches  //e.changedTouches}, false);http://frontendstu...
Gesture Events (iOS)            • iOS only            • 2+ fingers            • gesturestart            • gesturechange    ...
Gesture Events (iOS)  document.addEventListener(gesturestart,  function(e){    //e.scale    //e.rotation  }, false);http:/...
orientationchange// fired every 90 degrees of rotationwindow.addEventListener(orientationchange,function(e){  //window.ori...
deviceorientation   • taps into the gyroscope   • not just every 90 degrees                                               ...
deviceorientation// fired a LOTwindow.addEventListener(deviceorientation, function(e){  //e.alpha;  //e.beta;  //e.gamma;}...
devicemotion                                         • taps into accelerometer                                         • p...
devicemotion window.addEventListener(devicemotion, function (e){   // e.accelerationIncludingGravity.x   // e.acceleration...
window.devicePixelRatio
window.devicePixelRatio• 1.5 (Nexus One, etc.)• 2 (iPhone 4, etc.)
navigator.connection     (Android)  {      "type": "3",      "UNKNOWN": "0",      "ETHERNET": "1",      "WIFI": "2",      ...
navigator.connection       (Android)navigator.connection.CELL_3Gnavigator.connection.CELL_2Gnavigator.connection.WIFI
Mobile JavaScript Libraries                       and much more...  http://davidbcalhoun.com/2010/mobile-javascript-librar...
Photo Credits   •   http://www.flickr.com/photos/kk/106960641/   •   http://www.flickr.com/photos/geirarne/110995239/   •   ...
That’s All Folks!• Twitter: @franksvalli• SpeakerRate: http://bit.ly/hMEEfo
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
Upcoming SlideShare
Loading in...5
×

Mobile HTML, CSS, and JavaScript

190,534

Published on

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

3 Comments
49 Likes
Statistics
Notes
No Downloads
Views
Total Views
190,534
On Slideshare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
430
Comments
3
Likes
49
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
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×