[WebConf.TW 2013] HTML5 on Mobile Web

  • 4,759 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,759
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
35

Embeds 0

No embeds

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

Transcript

  • 1. HTML5 onMobile Web Kuro Hsu @ WebConf 2013 2013/01/13
  • 2. Kuro Hsu (a.k.a kurotanshi)  A Front-End Engineer.  Core member of Drupal Taiwan  Admin of PhoneGap TW Facebook Page - http://www.facebook.com/PhoneGapTW
  • 3. Topics • History of Mobile Web • HTML5 on Mobile Web • CSS3 Features on Mobile • Mobile Web Performance Optimization • Mobile Web Strategies
  • 4. History of Mobile Webhttp://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 - Presto Chrome) - Opera Mobile /Mini - Safari Mobile - Nintendo DSi, Wii - webOS - Symbian, … and etc. -Internet Explorer - MS Pocket IE (IE Mobile)- Gecko - MS IE 9/10 - Mozilla Minimo (discontinued) - Firefox mobile
  • 9. http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg
  • 10.  NOW !
  • 11. HTML5 on Mobile Webhttp://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.htmlHTML5 Pattern - http://html5pattern.com/
  • 13. HTML5 Input type Attributes for Mobile
  • 14. URL SchemesOld-school from XHTML-MP by OMA and still rocks. <a href="tel:+0987654321">Order Pizza Now!</a> <a href="sms:+0987654321">Text me!</a>
  • 15. Stylesheet Media Type An Old way to differentiate mobile (HTML4/CSS2.1) <link rel="stylesheet" type="text/css" href="m.css" media="handheld" /> A Modern way with Media Queries (CSS3) <link rel="stylesheet" type="text/css" href="m.css" media="only screen and (min-width:680px)" />
  • 16. Meta viewport <meta name="viewport" content="width=device-width" />
  • 17. Meta viewportIf viewport is not supported - Blackberry (4.6+) <meta name="HandheldFriendly" content="true"> - Windows Mobile (6.5) <meta name="MobileOptimized" content="240">
  • 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-mediaquerieshttp://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  • 19. CSSOM (CSS Object Model) View Module http://www.w3.org/TR/cssom-view/ http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist- interface 3 5 14var 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 */}
  • 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 10  IE 10 Only if (window.navigator.msPointerEnabled) { // Pointer events are supported. }  MS Pointer Events  MS Gesture Events MSPointerDown MSGestureTap MSPointerMove MSGestureHold MSPointerUp MSGestureStart MSPointerOver MSGestureChange MSPointerOut MSGestureEnd MSPointerHover MSInertiaStarthttp://msdn.microsoft.com/zh-tw/library/ie/hh673557%28v=vs.85%29.aspxhttp://blog.darkthread.net/post-2012-11-19-mutlitouch-for-ie10.aspx
  • 25. Device Orientation Events Compass, Gyroscope, Accelerometer deviceorientation, devicemotion, compassneedscalibrationhttp://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- via GPS satellites, GSM/CDMA cell IDs, A-GPS, Wi-Fi base stations. if(window.navigator.geolocation){ var geo = navigator.geolocation(); geo.getCurrentPosition(getPosSuccess); } function getPosSuccess(pos){ var lat = pos.coords.latitude; var lon = pos.coords.longitude; }
  • 27. Offline Web Application Cache- Expires via meta tag <meta http-equiv="Expires" content="Sun, 13 Jan 2013 11:00:00 GMT+8" />- HTML5 Offline App Cache <html manifest="/cache.manifest" > NETWORK: search.php # COMMENT THERE …… CACHE MANIFEST FALLBACK: js/* dynamic.php index.html …… style.css …… CACHE: ……
  • 28. Web Storage- SessionStorage / LocalStorage // 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();
  • 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 Profilehttp://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 4 4 @font-face { font-family: "Your typeface"; src: url("http://site/fonts"); }Web fonts with @font-face: http://www.css3.info/preview/web-fonts-with-font-face/Google WebFonts - http://www.google.com/webfonts
  • 37. CSS3 - Gradient 4 5 background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727) );CSS3 Gradient Backgrounds - http://css-tricks.com/examples/CSS3Gradient/http://docs.webplatform.org/wiki/css/linear-gradienthttp://docs.webplatform.org/wiki/css/radial-gradient
  • 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  Rotate / Skew / Scale -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_transformshttp://www.w3.org/TR/css3-3d-transforms/
  • 40. http://www.mobile-patterns.com/
  • 41. http://www.mobiledesignpatterngallery.com/
  • 42. Mobile Web Performance Optimizationhttp://slides.calvinf.com/wpo-slideshow/#slide-24
  • 43. Mobile Web Performance Optimization • Less JavaScript – Cost of parsing JavaScript about 1ms/1kb • Using Native JavaScript APIs querySelector/querySelectorAll, getElementsByClassName, classList... • Or mini frameworks • Avoid : jQuery, YUI, Dojo • Use : XUI, microJS, baseJS
  • 44. jQuery addClass vs DOM classList 3 5http://jsperf.com/jquery-addclass-vs-dom-classlist/4 - published by c9s
  • 45. Mobile Web Performance Optimization• use requestAnimationFrame instead of setTimeout (for Animation) 6 10• use setImmediate instead of setTimeout 10http://www.w3.org/TR/animation-timing/#requestAnimationFramehttp://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.htmlhttp://www.nczonline.net/blog/2011/09/19/script-yielding-with-setimmediate/
  • 46. • Reducing Startup Latency<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>
  • 47. Deferred JavaScript executionhttp://davidbcalhoun.com/2011/mobile-performance-manifesto
  • 48. Mobile Web Performance Optimization • Using HTML5 Web Storage instead of Cookies • 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==); }
  • 49. Mobile Web Performance Optimization • Hardware Acceleration 3 5 10 -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/
  • 50. Mobile Web Performance Optimization • Optimize Images
  • 51. Mobile Web Performance Optimization • Use onTouchStart instead of onClick events. – iOS onclick delay https://developers.google.com/mobile/articles/fast_buttons?#touchevents • Google - Optimize for mobile https://developers.google.com/speed/docs/best- practices/mobile • Yahoos Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  • 52. Mobile Web Strategieshttp://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. Mobile Web Strategies  Wanna Go Native / Hybrid App… ?
  • 62. PhoneGap
  • 63. http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
  • 64. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi