• Save
[WebConf.TW 2013]  HTML5 on Mobile Web
Upcoming SlideShare
Loading in...5
×
 

[WebConf.TW 2013] HTML5 on Mobile Web

on

  • 5,072 views

 

Statistics

Views

Total Views
5,072
Views on SlideShare
4,693
Embed Views
379

Actions

Likes
35
Downloads
0
Comments
0

10 Embeds 379

http://www.pattydraw.com 218
http://john.petra.ac.id 66
http://www.plurk.com 48
http://kuro.tw 39
https://twitter.com 3
http://twitter.com 1
http://tweetedtimes.com 1
http://www.verious.com 1
https://duckduckgo.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [WebConf.TW 2013]  HTML5 on Mobile Web [WebConf.TW 2013] HTML5 on Mobile Web Presentation Transcript

    • HTML5 onMobile Web Kuro Hsu @ WebConf 2013 2013/01/13
    • 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
    • Topics • History of Mobile Web • HTML5 on Mobile Web • CSS3 Features on Mobile • Mobile Web Performance Optimization • Mobile Web Strategies
    • History of Mobile Webhttp://www.gizmodo.com.au/2009/12/the-ever-shrinking-mobile-phone-matryoshka-timeline/
    •  1996 : - HDML (Handheld Device Markup Language) 1998 : WAP 1.1 (Wireless Application Protocol) - WML (Wireless Markup Language) 1.0 - XML Based. - WMLScript (ECMAScript based)
    •  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)
    •  2007 ~ : "Full" Browser - HTML 4 / XHTML / CSS 2.1  HTML4-Compatible  W3C standards.
    • - 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
    • http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg
    •  NOW !
    • HTML5 on Mobile Webhttp://formwelkin.com/what-is-html5/
    • 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/
    • HTML5 Input type Attributes for Mobile
    • 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>
    • 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)" />
    • Meta viewport <meta name="viewport" content="width=device-width" />
    • Meta viewportIf viewport is not supported - Blackberry (4.6+) <meta name="HandheldFriendly" content="true"> - Windows Mobile (6.5) <meta name="MobileOptimized" content="240">
    • 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/
    • 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 */}
    • http://mediaqueri.es/
    • User-interaction: Touch Screens  No CSS :hover
    • 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... }
    • Events: Gesture window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents, false); function gstEvents(ev){ // do something... }
    • 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
    • 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
    • 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; }
    • 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: ……
    • 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();
    • And More Device APIs and related APIs • Ambient Light Events • Capturing Audio & Video API • Network Service Discovery • Clipboard API • Fullscreen API • Gamepad API • ………
    • Can I use... - http://caniuse.com/
    • http://mobilehtml5.org/
    • CoreMob: Mobile Web App Profilehttp://goo.gl/Jdckj
    • CSS3 Features on Mobile
    • 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/
    • 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;
    • 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
    • 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
    • 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/
    • 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/
    • http://www.mobile-patterns.com/
    • http://www.mobiledesignpatterngallery.com/
    • Mobile Web Performance Optimizationhttp://slides.calvinf.com/wpo-slideshow/#slide-24
    • 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
    • jQuery addClass vs DOM classList 3 5http://jsperf.com/jquery-addclass-vs-dom-classlist/4 - published by c9s
    • 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/
    • • 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>
    • Deferred JavaScript executionhttp://davidbcalhoun.com/2011/mobile-performance-manifesto
    • 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==); }
    • 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/
    • Mobile Web Performance Optimization • Optimize Images
    • 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
    • Mobile Web Strategieshttp://www.tosca-life.info/activities-start/strategy-organization/
    • Mobile Web Strategies Ask “Why Mobile?”
    • Mobile Web Strategies  Content-First, Responsive Design.
    • Mobile Web Strategies Progressive Enhancement
    • Mobile Web Strategies Feature Detection
    • Mobile Web Strategies Design for Touch – “fat fingers”
    • Mobile Web Strategies  Test, Test, Test !http://devicelab.fi
    • Mobile Web Strategies  Tools - weinre - Adobe Edge Inspect - iWebInspector ( for iOS ) - Mobile Chrome - Mobile Safari - Mobile Firefox
    • Mobile Web Strategies Emulators are your friends!
    • Mobile Web Strategies  Wanna Go Native / Hybrid App… ?
    • PhoneGap
    • http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
    • Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi