Mobile HTML, CSS, and JavaScript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile HTML, CSS, and JavaScript

  • 174,604 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • made my day! Great!
    Are you sure you want to
    Your message goes here
  • Its helpful slide. thanks for share
    Are you sure you want to
    Your message goes here
  • Thanks a lot for your slide...
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
174,604
On Slideshare
31,080
From Embeds
143,524
Number of Embeds
47

Actions

Shares
Downloads
394
Comments
3
Likes
44

Embeds 143,524

http://davidbcalhoun.com 142,190
http://translate.googleusercontent.com 373
http://www.strawberrytags.com 292
http://westhigh.eu5.org 180
url_unknown 135
http://localhost 88
http://www.joaosantacruz.com 55
http://webcache.googleusercontent.com 51
http://joaosantacruz.com 23
http://17mobile.zzl.org 22
http://www.imcoder.info 13
http://apps.webdoc.com 12
http://as.ipartners.co.kr 11
http://www.twylah.com 8
https://www.google.com 7
http://www.slideshare.net 6
http://localhost:57206 6
https://translate.googleusercontent.com 5
http://www.pinterest.com 3
http://blaxk.com 3
https://www.google.cl 3
http://vinaybabureddy.com 3
http://www.bogotastation.com 3
http://twitter.com 3
https://www.google.nl 2
http://blrkec63122l 2
http://a0.twimg.com 2
http://paper.li 2
https://www.google.co.il 2
http://us-w1.rockmelt.com 2
https://www.google.fr 1
https://www.google.com.ua 1
http://www.bastic.net 1
http://131.253.14.98 1
http://shuffle.local:8888 1
http://translate.google.com 1
https://www.google.hu 1
http://mos 1
http://www.fitness-shop.dev 1
http://www.excite-webtl.jp 1
http://192.168.2.150 1
http://js1.jigsawoffice.com 1
http://apps.urturn.com 1
http://192.168.0.15 1
http://cache.baiducontent.com 1
https://www.google.de 1
http://207.46.192.232 1

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

Transcript

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