1 / 67

HTML5 on Mobile

HTML5 on Mobile. Adam Lu http://adamlu.com/ Frontend Engineer. Previous Slides. HTML5 on Mobile – For Designer http://www.slideshare.net/adamlu/html5-on-mobilefor-designer HTML5 on Mobile – For Developer http://www.slideshare.net/adamlu/html5-on-mobilefor-developer. Today’s Topic.

wendi
Download Presentation

HTML5 on Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 on Mobile Adam Lu http://adamlu.com/ Frontend Engineer

  2. Previous Slides • HTML5 on Mobile – For Designer http://www.slideshare.net/adamlu/html5-on-mobilefor-designer • HTML5 on Mobile – For Developer http://www.slideshare.net/adamlu/html5-on-mobilefor-developer

  3. Today’s Topic • Why we’re focusing on mobile web • Why we’re using HTML5 on mobile • What is HTML5 • What we can use HTML5 to do on mobile(Large Coverage) • What we should care about for mobile web development • Miscellaneous

  4. Why we’re focusing on mobile web

  5. 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)

  6. Mobile is Growing Source: Nielsen (January 2012)

  7. Mobile Users prefer browsers over apps (source: Adobe)

  8. Web App vs Native App

  9. Why we’re using HTML5 on mobile

  10. 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

  11. What is HTML5

  12. Rough Timeline of Web Technologies • 1991 HTML • 1994 HTML 2 • 1996 CSS 1 + JavaScript • 1997 HTML 4 • 1998 CSS 2 • 2000 XHTML 1 • 2002 Tableless Web Design • 2005 AJAX • 2009 HTML 5 http://slides.html5rocks.com/#timeline-slide

  13. HTML5Logo http://www.w3.org/html/logo/

  14. The Technology Forms, Communication, Canvas, Geolocation, Web Applications, Audio, WebGL, Microdata, Video, Workers, Files, Elements, Storage, Local Devices, User interaction, Parsing rules, …

  15. What we can use HTML5 to do on mobile

  16. http://mobilehtml5.org/

  17. HTML5 has been widely used on pc web development • http://www.cuttherope.ie/ • http://chrome.angrybirds.com/ • http://www.20thingsilearned.com/en-US • …… * We will not talk more about HTML5 on PC Web.

  18. HTML5 SEMANTICS

  19. HTML Markup <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="apple-touch-icon" href="images/favicon.png" /> </head> <body> </body> </html> Semantic HTML: <section> <article> <nav> <aside> <header> <progress> <time> … Basic Setting: Set Viewport Turn off user-scaling Set favicon … http://www.w3.org/wiki/HTML/Elements

  20. 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" /> http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/

  21. Microdata, ARIA attributes <div itemscopeitemtype="http://example.org/band"> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div> <ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1"> <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <lirole="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul> http://dev.w3.org/html5/md/ http://www.w3.org/WAI/intro/aria

  22. OFFLINE&STORAGE

  23. Offline Web Application Cache • Method of defining web page files to be cached using a cache manifest file, allowing them to work offline on subsequent visits to the page <html manifest="/cache.manifest”> CACHE MANIFEST # version 1.0.0 NETWORK: * CACHE: /js/* /image/* FALLBACK: window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY{ window.applicationCache.swapCach(); window.location.reload(); }}, false); http://www.w3.org/TR/html5/offline.html

  24. Local Storage, Session Storage • Web storage and DOM storage (document object model) are web application software methods and protocols used for storing data in a web browser. varfoo = localStorage.getItem(“bar”); localStorage.setItem(“bar”, “foo”); localStorage.clear(); sessionStorage.setItem(‘a’, ‘1’); sessionStorage.removeItem(‘a’); window.addEventListener(“storage”, handle_storage, false); http://dev.w3.org/html5/webstorage/

  25. DEVICE ACCESS

  26. Geolocation • Method of informing a website of the user's geographical location navigator.geolocation.getCurrentPosition(success, failure, options); PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2) TIMEOUT (3) UNKNOWN_ERROR (0)

  27. 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); http://www.html5rocks.com/en/tutorials/device/orientation/

  28. Device Support window.devicePixelRatio navigator.connection(Android2.2+) //navigator.connection object { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" } HTML Media Capture: <input type="file" accept="image/*" capture="camera" /> <device type="media"></device> <video autoplay></video> navigator.getUserMedia({video: true, audio: true}, function(stream) { var video = document.querySelector('video'); video.src = stream; }, errorCallback); http://dev.w3.org/2011/webrtc/editor/getusermedia.html

  29. CONNECTIVITY

  30. Web Sockets • W3C/IETF Standard • Real-time, low latency, true full-duplex communication channel • Build on top of HTTP, sharing ports with existing HTTP content, use ws: and wss: schemes • Only small overhead for text messages, reducing bandwidth conn = new WebSocket('ws://node.remysharp.com:8001'); conn.onopen= function (envent) {conn.send(‘hello’);}; conn.onmessage= function (event) {}; conn.onclose= function (event) {}; http://html5demos.com/web-socket

  31. Server-Sent Events • Open an HTTP connection for receiving push notifications from a server in the form of DOM events. • Standardize sending a continuous stream of data from server to browser • The API is designed such that it can be extended to work with other push notification schemes such as Push SMS. Server: Client: res.writeHead(200, {"Content‐Type": "text/event‐stream"}); res.write(“data: ” + JSON.stringify(stuff) +”\n”);res.flush(); var source = new EventSource("url"); source.onmessage = function(event) { alert(event.data); } http://dev.w3.org/html5/eventsource/

  32. XMLHttpRequest Level 2 • XMLHttpRequest(XHR) Level2 significantly enhances XMLHttpRequest Fetch Data: Send Data: varxhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; varimg = document.createElement('img'); img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); } }; xhr.send(); function uploadFiles(url, files) { varformData = new FormData(); for (vari = 0, file; file = files[i]; ++i) { formData.append(file.name, file);} varxhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.send(formData); } document.querySelector('input[type="file"]').addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false); http://www.w3.org/TR/XMLHttpRequest/

  33. Cross-document messaging • Enables secure cross-origin communication across iframes, tabs and windows • Uses Origin security window.addEventListner("message", messageHandler, true); function messageHandler(e){ if(e.origin== 'http://www.yahoo.com'){ processMessage(e.data); } //ignore message if origin not recognized } http://dev.w3.org/html5/postmsg/

  34. Cross-Origin Resource Sharing • Defines a mechanism to enable client-side cross-origin requests. Specifications that enable an API to make cross-origin requests to resources can use the algorithms defined by this specification. If such an API is used on http://example.org resources, a resource on http://hello-world.examplecan opt in using the mechanism described by this specification (e.g., specifying Access-Control-Allow-Origin: http://example.org as response header), which would allow that resource to be fetched cross-origin from http://example.org. http://www.w3.org/TR/cors/

  35. MULTIMEDIA

  36. Video <video id=“video” poster=”poster.jpg" src=”source.mp4" width="2" height="1" x-webkit-airplay="allow” autoplay controls></video> AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm document.getElementById(‘video’).play(); http://m.youtube.com/

  37. Audio <audio id=“audio” controls preload="auto" autobuffer> <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio> var audio = document.getElementById(‘audio’); audio.play(); audio.pause(); audio.volume+=0.1; audio.currentTime = 122; More: WEB AUDIO API http://html5.grooveshark.com/

  38. 3D, GRAPHICS, EFFECTS

  39. Canvas • 2D drawing platform within the browser • Use nothing more than JavaScript and HTML – no plugins • Extensible through a JavaScript API <canvas id="a" width="300" height="225"></canvas> vara_canvas = document.getElementById("a"); vara_context = a_canvas.getContext("2d"); a_context.lineWidth = 5; a_context.strokeStyle = ‘rgba(244, 34, 23, .8)’; a_context.fillRect(50, 25, 150, 100); a_context.stroke(); http://jacebook.co.uk/share/html5/

  40. WebGL • Javascript Binding for OpenGL ES 2.0 on Browser • Run as a specific context for the HTML <canvas> element, which gives you access to hardware-accelerated 3D rendering in JavaScript. • Allow developers to put real-time interactive 3D graphics in the browser. http://mrdoob.github.com/three.js/ a lightweight 3D engine

  41. SVG • Method of displaying basic Vector Graphics features using the embed or object elements * SVG isn’t part of HTML5

  42. PERFORMANCE&INTEGRATION

  43. Web Workers • Scripts running in background • Heavy Weight Scripts var worker = new Worker('doWork.js'); worker.addEventListener('message', function(e) { console.log('Worker said: ', e.data); }, false); worker.postMessage('Hello World'); // Send data to our worker worker.onerror= function(e){} worker.terminate(); doWorker.js self.addEventListner(‘message’, function(e){ self.postMessage(e.data+’ Worker says: Hello’); }， false); http://dev.w3.org/html5/workers/

  44. History API • The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's 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. http://html5demos.com/history

  45. CSS3 STYLING

  46. CSS3 New Features • Border Radius • Shadows • Gradient • Color • Background • Border Image • Font • Transform • Transition • Animation DEMO: http://jsfiddle.net/adamlu/xGuKy/

  47. CSS on Mobile -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-touch-callout; -webkit-tap-highlight-color: transparent; position: fixed; 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;}

  48. What we should care about for mobile web development

More Related