Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Html5 on Mobile(For Developer)

HTML5 on Mobile, For Web Developers.

  • Inicia sesión para ver los comentarios

Html5 on Mobile(For Developer)

  1. 1. HTML5 on Mobile (For Developer) Adam Lu
  2. 2. Mobile is Growing• In January 2012, 8.49 percent of website hits/pageviews come from a handheld mobile device (StatCounter)• Mobile will be bigger than desktop internet in 5 years (Morgan Stanley)• 2.1 billion mobile devices will have HTML5 browsers by 2016 up from 109 million in 2010 (ABI Research)
  3. 3. Mobile is Growing Source: Nielsen (January 2012)
  4. 4. HTML5 is Great for Mobile• Do not need download to use Web App• One Code base, all popular devices• Tons of great HTML5 features are already supported on modern browsers
  5. 5. Web App vsNative App Web App Native App Comparation Just enter the URL Must be deployed or Installation/updates downloaded Access to web analytics. Apple Store, Android Monetization Rate,SaaS based revenue Market, RatingProgressive Enhancement Follow the standards End User Experience GeoLocation, Offline camera, gyroscope, Access to hardware sensorsStorage, Canvas Graphics, microphone, compass, Audio, Video, accelerometer, GPS Camera(Android3.1+)HTML5, CSS3, Javascript, UI Object-C, Java, C++, J2EE, Developer Experience Library .NET, Cocoa Touch Web Workers, Graphic Run directly on the metal, Performance acceleration, WebGL GPU Acceleration, Multi- Threading
  6. 6. Mobile Users prefer browsers over apps (source: Adobe)
  7. 7. What is HTML5
  8. 8. What is HTML5Forms, Communication, Canvas, Geolocation,Web Applications, Audio, WebGL, Microdata,Video, Workers, Files, Elements, Storage, LocalDevices, User interaction, Parsing rules, …
  9. 9. Build Mobile Web with HTML5• Decide which platforms/browsers you will support -ms- Webkit on Mobile? -o- There is no webkit on mobile -moz- -webkit-
  10. 10. Build Mobile Web with HTML5• HTML Markup <!DOCTYPE html> Semantic HTML: <html> <section> <head> <article> <meta charset="utf-8" /> <nav> <meta name="viewport" <aside> content="width=device-width, initial-scale=1, <header> maximum-scale=1, user-scalable=no"> <progress> <link rel="apple-touch-icon" <time> href="images/favicon.png" /> … </head> Basic Setting: <body> Set Viewport </body> Turn off user-scaling </html> Set favicon …
  11. 11. Build Mobile Web with HTML5 • CSS Reset-webkit-text-size-adjust: none;-webkit-user-select: none;-webkit-touch-callout;-webkit-tap-highlight-color: transparent;audio, canvas, video { display: inline-block;}article, aside, details, figcaption, figure,footer, header, hgroup, nav, section {display: block; }input[type="search"]{ -webkit-appearance: none/textfield;}
  12. 12. Build Mobile Web with HTML5• Media Queries /*styles for 800px and up!*/ @media only screen and (min-width: 800px) { /* Styles */ } /* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */ @media only screen and (-webkit-min-device-pixel- ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }
  13. 13. Build Mobile Web with HTML5 • CSS3 Effect<input id="p" type="search"autocorrect="off" autocomplete="off"autocapitalize="off"placeholder="Search" />border-image: url() 0 24 stretchbox-shadow: #9FA1A4 0 3px 4px 2px -webkit-border-radius: 5px;inset background: #FFAB23 -webkit-border-radius: 15px; gradient(linear,0% 0,0%background: -webkit-linear-gradient(); 100%,from(#FE6),to(#FFAB23)); box-sizing: border-box;
  14. 14. Build Mobile Web with HTML5• Make Animation CSS3 Animation instead of JS Animation transition: left 1s ease-in-out; YUI().use(‘transition’, function(){}); #box1, #box2{ -webkit-transition: all 2s ease-in-out; } #box1:hover + #box2 { -webkit-transform: rotate(360deg); left: 500px; }​
  15. 15. Build Mobile Web with HTML5• Advanced Forms in Mobile <input type="number" pattern="[0-9]*" /> <input type="email” required /> <input type="url" /> <input type="tel" /> <input type="time" /> <input type="date" /> <input type="month" /> <input type="week" /> <input type="datetime" /> <input type="datetime-local" /> <input type="color" /> rc.1/docs/forms/textinputs/
  16. 16. Build Mobile Web with HTML5 • Graphic Drawing - Canvas & SVG <canvas id="a" width="300" height="225"></canvas> vara_canvas = document.getElementById("a"); vara_context = a_canvas.getContext("2d"); a_context.fillRect(50, 25, 150, 100); <svgxmlns="" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
  17. 17. Build Mobile Web with HTML5• Media Support <video poster="" src="" width="2" height="1" x-webkit- airplay="allow"></video> <audio controls preload="auto" autobuffer> <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio>
  18. 18. Build Mobile Web with HTML5• Geolocation API Position Object navigator.geolocation.getCurrentPosition(succe ss, failure, options); PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2) TIMEOUT (3) UNKNOWN_ERROR (0)
  19. 19. Build Mobile Web with HTML5• Javascript Events window.addEventListener("touchstart", function(e){ //e.touches; }, false); window.addEventListener("orientationchange", function(e){ //window.orientation(0 is portrait, 90 and -90 are landscape) }, false); window.addEventListener("deviceorientation", function(e){ //e.alpha //e.beta //e.gamma }, false); window.addEventListener("devicemotion", function(e){ //e.acceleration.x/y/z //e.accelerationIncludingGravity.x/y/z }, false);
  20. 20. Build Mobile Web with HTML5• Device Support window.devicePixelRatio HTML Media Capture: navigator.connection(Android2.2+) <input type="file" accept="image/*" // contents of navigator.connection capture="camera" /> object <device type="media"></device> { "type": "3", <video autoplay></video> "UNKNOWN": "0", navigator.getUserMedia({video: true, "ETHERNET": "1", audio: true}, function(stream) { "WIFI": "2", var video = "CELL_2G": "3", document.querySelector(video); "CELL_3G": "4" video.src = stream; } }, errorCallback);
  21. 21. Build Mobile Web with HTML5• User Interaction  Drag and Drop  HTML Editing  Session History window.history.pushState(data, title, url);//Add one history state into browser history and update the URL in the browser window. window.history.replaceState(state, title, url);//Modify the current history entry instead of creating a new one. window.onpopstate = function(e){e.state;};//A popstate event is dispatched to the window every time the active history entry changes.
  22. 22. Build Mobile Web with HTML5• PerformanceOffline Web Application Cache:<html manifest="/cache.manifest">AddType text/cache-manifest .manifestCACHE MANIFESTNETWORK/CACHE/FALLBACK:LocalStorage/SessionStorage:varfoo = localStorage.getItem("bar");localStorage.setItem("bar", foo);window.addEventListener("storage", handle_storage, false);Web Workers:var worker = new Worker(doWork.js);worker.addEventListener(message, function(e) {console.log(Worker said: ,;}, false);worker.postMessage(Hello World); // Send data to our worker.
  23. 23. Build Mobile Web with HTML5• Communication  Cross-document messaging  Server-Sent Events(XHR2)  Web Sockets conn = new WebSocket(ws://; conn.onopen= function () {}; conn.onmessage= function (event) { // console.log(; }; conn.onclose= function (event) { state.className = fail; state.innerHTML = Socket closed; };
  24. 24. Build Mobile Web with HTML5• Make Web App Full screen mode: <meta name="apple-mobile-web-app-capable" content="yes" /> Native Look: text-shadow box-shadow multi backgrounds border-image border-radius rgba color gradient transform transition Mobile Behavior: position: fixed; overflow: scroll; touch/gesture/orientationchange event Offline: AppCache LocalStorage
  25. 25. Mobile Web App Strategy• Evaluate your requirement• Decide what app you’ll do• A hybrid app maybe a good approach (Web App  Native App)• Mobile-First Responsive Design• Progressive Enhancement• Lighter is better
  26. 26. Frameworks• Boilerplate• Packaging frameworks  • Web application frameworks     • HTML5 Game frameworks   
  27. 27. Tools• Debugging  WEINRE  WebKit Remote Debugging• Emulators & Simulators  Mobile Emulators and Simulators  Android Emulator  iOS Simulator• Performance  Mobile PerfBookmarklet 
  28. 28. Compatibility•••••••••
  29. 29. Inspiration• - Mobile UI Patterns• Another gallery of Mobile UI• the best in mobile web design and developer news.
  30. 30. Resources••••••
  31. 31. HTML5 is the future of Mobile!
  32. 32. Thanks! @adamlu