[WebConf.TW 2013] HTML5 on Mobile Web

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
January 13, 2013

[WebConf.TW 2013] HTML5 on Mobile Web

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

January 13, 2013
Tweet

Transcript

  1. HTML5 on Mobile Web Kuro Hsu @ WebConf 2013 2013/01/13

  2.  A Front-End Engineer.  Core member of Drupal Taiwan

     Admin of PhoneGap TW Facebook Page - http://www.facebook.com/PhoneGapTW Kuro Hsu (a.k.a kurotanshi)
  3. Topics • HTML5 on Mobile Web • History of Mobile

    Web • CSS3 Features on Mobile • Mobile Web Strategies • Mobile Web Performance Optimization
  4. History of Mobile Web http://www.gizmodo.com.au/2009/12/the-ever-shrinking-mobile-phone-matryoshka-timeline/

  5.  1996 : - HDML (Handheld Device Markup Language) 

    1998 : WAP 1.1 (Wireless Application Protocol) - WML (Wireless Markup Language) 1.0 - XML Based. - WMLScript (ECMAScript based)
  6.  2002 : WAP 2.x - Moving to XHTML -

    XHTML MP (XHTML Mobile Profile, by OMA) - WCSS (Wireless CSS, by OMA) - XHTML Basic (by W3C) - CSS-MP (CSS Mobile Profile, by W3C)
  7.  2007 ~ : "Full" Browser - HTML 4 /

    XHTML / CSS 2.1  HTML4-Compatible  W3C standards.
  8. - Webkit - Android browser (not Chrome) - Safari Mobile

    - webOS - Symbian, … and etc. - Gecko - Mozilla Minimo (discontinued) - Firefox mobile - Presto - Opera Mobile /Mini - Nintendo DSi, Wii -Internet Explorer - MS Pocket IE (IE Mobile) - MS IE 9/10
  9. http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg

  10.  NOW !

  11. HTML5 on Mobile Web http://formwelkin.com/what-is-html5/

  12. HTML5 Input type Attributes for Mobile <input type="number"> <input type="email">

    <input type="tel"> <input type="url"> <input type="date"> <input type="search"> <input type="text" required /> <input type="text" readonly /> <input type="text" autocomplete="off" /> <input type="text" placeholder="yourname@email.com" /> <input type="text" pattern="[0-9]{5}" /> HTML5 inputs (mobile) Table - http://www.quirksmode.org/html5/inputs_mobile.html HTML5 Pattern - http://html5pattern.com/
  13. HTML5 Input type Attributes for Mobile

  14. URL Schemes <a href="tel:+0987654321">Order Pizza Now!</a> <a href="sms:+0987654321">Text me!</a> Old-school

    from XHTML-MP by OMA and still rocks.
  15. Stylesheet Media Type <link rel="stylesheet" type="text/css" href="m.css" media="handheld" /> 

    An Old way to differentiate mobile (HTML4/CSS2.1) <link rel="stylesheet" type="text/css" href="m.css" media="only screen and (min-width:680px)" />  A Modern way with Media Queries (CSS3)
  16. Meta viewport <meta name="viewport" content="width=device-width" />

  17. Meta viewport <meta name="HandheldFriendly" content="true"> If viewport is not supported

    <meta name="MobileOptimized" content="240"> - Windows Mobile (6.5) - Blackberry (4.6+)
  18. Media Queries /* CSS2 (Media-Types) */ @media handheld {...} /*

    CSS 3 @media rules */ @media only screen and (min-width:680px) {...} @media only screen and (orientation: portrait) {...} /* Combined with screen orientations */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {...} http://www.w3.org/TR/css3-mediaqueries http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  19. CSSOM (CSS Object Model) View Module 3 5 14 var

    mediaQueryList = window.matchMedia(mediaQueryString); if(window.matchMedia('(orientation:landscape)').matches){ /* landscape */ } else { /* portrait */ } if(window.matchMedia("(min-width: 400px)").matches){ /* the view port is at least 400 pixels wide */ } else { /* the view port is less than 400 pixels wide */ } http://www.w3.org/TR/cssom-view/ http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist- interface
  20. http://mediaqueri.es/

  21. User-interaction: Touch Screens  No CSS :hover

  22. Events: Touch window.addEventListener("touchstart", touchEvents, false); window.addEventListener("touchmove", touchEvents, false); window.addEventListener("touchend", touchEvents,

    false); window.addEventListener("touchcancel", touchEvents, false); function touchEvents(ev){ // do something... }
  23. Events: Gesture window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents,

    false); function gstEvents(ev){ // do something... }
  24. MS Pointer and gesture events if (window.navigator.msPointerEnabled) { // Pointer

    events are supported. }  IE 10 Only MSPointerDown MSPointerMove MSPointerUp MSPointerOver MSPointerOut MSPointerHover  MS Pointer Events MSGestureTap MSGestureHold MSGestureStart MSGestureChange MSGestureEnd MSInertiaStart  MS Gesture Events http://msdn.microsoft.com/zh-tw/library/ie/hh673557%28v=vs.85%29.aspx http://blog.darkthread.net/post-2012-11-19-mutlitouch-for-ie10.aspx 10
  25. Device Orientation Events Compass, Gyroscope, Accelerometer deviceorientation, devicemotion, compassneedscalibration http://dev.opera.com/articles/view/w3c-device-orientation-api/

    http://www.w3.org/TR/orientation-event/ http://dev.w3.org/geo/api/spec-source-orientation.html
  26. Geolocation API on Mobile if(window.navigator.geolocation){ var geo = navigator.geolocation(); geo.getCurrentPosition(getPosSuccess);

    } function getPosSuccess(pos){ var lat = pos.coords.latitude; var lon = pos.coords.longitude; } - via GPS satellites, GSM/CDMA cell IDs, A-GPS, Wi-Fi base stations.
  27. Offline Web Application Cache <meta http-equiv="Expires" content="Sun, 13 Jan 2013

    11:00:00 GMT+8" /> - Expires via meta tag - HTML5 Offline App Cache <html manifest="/cache.manifest" > # COMMENT THERE CACHE MANIFEST js/* index.html style.css …… NETWORK: search.php …… FALLBACK: dynamic.php …… CACHE: ……
  28. Web Storage // create localStorage["bar"] = "hello world!"; // get

    var foo = localStorage.getItem("bar"); // update localStorage.setItem("bar", "hello WebConf 2013!"); // remove localStorage.removeItem("bar"); // remove all localStorage.clear(); - SessionStorage / LocalStorage
  29. And More Device APIs and related APIs • Ambient Light

    Events • Capturing Audio & Video API • Network Service Discovery • Clipboard API • Fullscreen API • Gamepad API • ………
  30. Can I use... - http://caniuse.com/

  31. http://mobilehtml5.org/

  32. CoreMob: Mobile Web App Profile http://goo.gl/Jdckj

  33. CSS3 Features on Mobile

  34. CSS3 - Rounded Corner border-radius: 30px; border-radius: 10px 20px 30px

    40px; /* left top, right top, right bottom, left bottom */ CSS3 Rounded Corner Generator - http://www.cssportal.com/css3-rounded-corner/
  35. CSS3 - Shadows  text-shadow text-shadow:1px 3px 5px #FF0000; 

    box-shadow width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;
  36. CSS3 - @ font-face Web fonts with @font-face: http://www.css3.info/preview/web-fonts-with-font-face/ Google

    WebFonts - http://www.google.com/webfonts @font-face { font-family: "Your typeface"; src: url("http://site/fonts"); } 4 4
  37. CSS3 - Gradient CSS3 Gradient Backgrounds - http://css-tricks.com/examples/CSS3Gradient/ http://docs.webplatform.org/wiki/css/linear-gradient http://docs.webplatform.org/wiki/css/radial-gradient

    5 4 background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727) );
  38. CSS3 - Multiple Background Image .btn{ background: url("/images/left.png") no-repeat left

    top, url("/images/right.png") no-repeat right top, url("/images/body.png") repeat-x left top; } http://www.css3.info/preview/multiple-backgrounds/
  39. CSS3 - Transform 3 3 10 -webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin:

    60% 100%; transform: translate(100px) rotate(20deg); transform-origin: 60% 100%; https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms http://www.w3.org/TR/css3-3d-transforms/  Rotate / Skew / Scale
  40. http://www.mobile-patterns.com/

  41. http://www.mobiledesignpatterngallery.com/

  42. Mobile Web Performance Optimization http://slides.calvinf.com/wpo-slideshow/#slide-24

  43. Mobile Web Performance Optimization • Using Native JavaScript APIs querySelector/querySelectorAll,

    getElementsByClassName, classList... • Or mini frameworks • Avoid : jQuery, YUI, Dojo • Use : XUI, microJS, baseJS • Less JavaScript – Cost of parsing JavaScript about 1ms/1kb
  44. jQuery addClass vs DOM classList http://jsperf.com/jquery-addclass-vs-dom-classlist/4 - published by c9s

    5 3
  45. Mobile Web Performance Optimization • use requestAnimationFrame instead of setTimeout

    (for Animation) • use setImmediate instead of setTimeout http://www.w3.org/TR/animation-timing/#requestAnimationFrame http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/ http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html http://www.nczonline.net/blog/2011/09/19/script-yielding-with-setimmediate/ 10 6 10
  46. <script id="lazy"> /* ................. (JavaScript of lazy module) */ </script>

    <script> function lazyLoad() { var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); } </script> <div onclick="lazyLoad()"> Lazy Load </div> • Reducing Startup Latency
  47. Deferred JavaScript execution http://davidbcalhoun.com/2011/mobile-performance-manifesto

  48. Mobile Web Performance Optimization • CSS3 for effects • Use

    Data URIs and CSS-Sprites to Save HTTP Requests .dot { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAA ACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAA ABJRU5ErkJggg=='); } • Using HTML5 Web Storage instead of Cookies
  49. Mobile Web Performance Optimization • Hardware Acceleration -webkit-backface-visibility: hidden; -webkit-perspective:

    0; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); http://www.html5rocks.com/en/mobile/optimization-and-performance/ http://albertogasparin.it/articles/2011/06/ios-css-animations-performances/ http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/ 5 3 10
  50. Mobile Web Performance Optimization • Optimize Images

  51. Mobile Web Performance Optimization • Google - Optimize for mobile

    https://developers.google.com/speed/docs/best- practices/mobile • Use onTouchStart instead of onClick events. – iOS onclick delay https://developers.google.com/mobile/articles/fast_buttons?#touchevents • Yahoo's Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  52. Mobile Web Strategies http://www.tosca-life.info/activities-start/strategy-organization/

  53. Mobile Web Strategies  Ask “Why Mobile?”

  54. Mobile Web Strategies  Content-First, Responsive Design.

  55. Mobile Web Strategies  Progressive Enhancement

  56. Mobile Web Strategies  Feature Detection

  57. Mobile Web Strategies  Design for Touch – “fat fingers”

  58. Mobile Web Strategies  Test, Test, Test ! http://devicelab.fi

  59. Mobile Web Strategies  Tools - weinre - Adobe Edge

    Inspect - iWebInspector ( for iOS ) - Mobile Chrome - Mobile Safari - Mobile Firefox
  60. Mobile Web Strategies  Emulators are your friends!

  61.  Wanna Go Native / Hybrid App… ? Mobile Web

    Strategies
  62. PhoneGap

  63. None
  64. http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

  65. Thanks !  Kuro Hsu  kurotanshi @ gmail.com 

    http://kuro.tw  http://www.plurk.com/kurotanshi  http://www.facebook.com/kurotanshi