Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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
• 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
Why we’re focusing on mobile web
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)
Mobile is Growing
Source: Nielsen (January 2012)
Mobile Users prefer browsers over apps
(source: Adobe)
Web App vs Native AppWeb App Native App Comparation
Just enter the URL Must be deployed or downloaded
Installation/updates
Access to web analytics. Rate, SaaS based revenue
Apple Store, Android Market, Rating
Monetization
Progressive Enhancement Follow the standards End User Experience
GeoLocation, Offline Storage, Canvas Graphics,
Audio, Video, Camera(Android3.1+)
camera, gyroscope, microphone, compass,
accelerometer, GPS
Access to hardware sensors
HTML5, CSS3, Javascript, UI Library
Object-C, Java, C++, J2EE, .NET, Cocoa Touch
Developer Experience
Web Workers, Graphic acceleration, WebGL
Run directly on the metal, GPU Acceleration, Multi-
Threading
Performance
Why we’re using HTML5 on mobile
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
What is HTML5
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 5http://slides.html5rocks.com/#timeline-slide
The Technology
Forms, Communication, Canvas, Geolocation, Web Applications, Audio, WebGL, Microdata, Video, Workers, Files, Elements, Storage, Local Devices, User interaction, Parsing rules, …
What we can use HTML5 to do on mobile
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.
HTML5 SEMANTICS
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 ViewportTurn off user-scalingSet favicon …
http://www.w3.org/wiki/HTML/Elements
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/
Microdata, ARIA attributes<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> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li></ul>
<div itemscope itemtype="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>
http://dev.w3.org/html5/md/
http://www.w3.org/WAI/intro/aria
OFFLINE&STORAGE
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.0NETWORK:*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
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.
var foo = 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/
DEVICE ACCESS
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)
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/
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
CONNECTIVITY
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
bandwidthconn = 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
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.
var source = new EventSource("url");source.onmessage = function(event) {
alert(event.data);}
http://dev.w3.org/html5/eventsource/
res.writeHead(200, {"Content Type": ‐ "text/event stream‐ "});res.write(“data: ” + JSON.stringify(stuff) +”\n”); res.flush();
Client: Server:
XMLHttpRequest Level 2
• XMLHttpRequest(XHR) Level2 significantly enhances XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest/
function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file);} var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.send(formData); }document.querySelector('input[type="file"]').addEventListener('change', function(e) { uploadFiles('/server', this.files);}, false);
var xhr = 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; var img = document.createElement('img');img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); }};xhr.send();
Fetch Data: Send Data:
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/
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.example can 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/
MULTIMEDIA
Video<video id=“video” poster=”poster.jpg" src=”source.mp4" width="2" height="1" x-webkit-airplay="allow” autoplay controls></video>
AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
document.getElementById(‘video’).play();
http://m.youtube.com/
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;
http://html5.grooveshark.com/
More: WEB AUDIO API
3D, GRAPHICS, EFFECTS
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>var a_canvas = document.getElementById("a");var a_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/
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
SVG
• Method of displaying basic Vector Graphics features using the embed or object elements
* SVG isn’t part of HTML5
PERFORMANCE&INTEGRATION
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 workerworker.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/
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
CSS3 STYLING
CSS3 New Features• Border Radius• Shadows• Gradient• Color• Background• Border Image• Font• Transform• Transition• Animation
DEMO: http://jsfiddle.net/adamlu/xGuKy/
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;}
What we should care about for mobile web development
Mobile-First Responsive Design
• Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. http://www.alistapart.com/articles/responsive-web-design/
Choose a Framework• Boilerplate http://html5boilerplate.com/mobile• Packaging frameworks
http://phonegap.com/ http://www.appmobi.com/
• Web application frameworks http://jquerymobile.com/ http://yuilibrary.com/ http://sproutcore.com/ http://www.sencha.com/ http://zeptojs.com/
• HTML5 Game frameworks http://www.limejs.com/ http://craftyjs.com/ http://impactjs.com/
Mobile Debugging Tools• Debugging
WEINRE WebKit Remote Debugging
• Emulators & Simulators Mobile Emulators and Simulators Android Emulator iOS Simulator
• Performance Mobile Perf Bookmarklet http://www.blaze.io/mobile/
Miscellaneous
Make Mobile Web Application
Full screen mode:<meta name="apple-mobile-web-app-capable" content="yes" />Native Look:text-shadow box-shadowmulti backgrounds border-imageborder-radiusrgba color gradienttransform transitionMobile Behavior:position: fixed; overflow: scroll;touch/gesture/orientationchange eventOffline:AppCacheLocalStoragehttp://adamlu.com/iEye/
http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png
Usage of HTML5 in Mobile Web
Usage of HTML5 in Mobile Web
Usage of HTML5 in Mobile Web
Usage of HTML5 in Mobile Web
Compatibility
• http://haz.io/ • http://caniuse.com/• http://css3test.com/• http://css3generator.com/• http://css3info.com/• http://html5test.com/• http://css3please.com/ • http://mobilehtml5.org/ • http://quirksmode.org/m/
Inspiration
• http://mobile-patterns.com/ - Mobile UI Patterns
• http://pttrns.com - Another gallery of Mobile UI
• http://mobileawesomeness.com - the best in mobile web design and developer news.
Resources
• http://diveintohtml5.info/• http://www.html5rocks.com/• http://html5demos.com/• http://www.mobilehtml5.com/ • http://www.w3.org/TR/html5/• http://gs.statcounter.com/
HTML5 is the future of Mobile!
