[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. 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)
  2. 3.

    Topics • HTML5 on Mobile Web • History of Mobile

    Web • CSS3 Features on Mobile • Mobile Web Strategies • Mobile Web Performance Optimization
  3. 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)
  4. 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)
  5. 7.

     2007 ~ : "Full" Browser - HTML 4 /

    XHTML / CSS 2.1  HTML4-Compatible  W3C standards.
  6. 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
  7. 10.
  8. 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/
  9. 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)
  10. 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+)
  11. 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/
  12. 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
  13. 22.
  14. 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
  15. 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.
  16. 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: ……
  17. 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
  18. 29.

    And More Device APIs and related APIs • Ambient Light

    Events • Capturing Audio & Video API • Network Service Discovery • Clipboard API • Fullscreen API • Gamepad API • ………
  19. 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/
  20. 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;
  21. 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
  22. 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/
  23. 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
  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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 59.

    Mobile Web Strategies  Tools - weinre - Adobe Edge

    Inspect - iWebInspector ( for iOS ) - Mobile Chrome - Mobile Safari - Mobile Firefox
  31. 62.
  32. 63.
  33. 65.

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

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