Embed Size (px)
DESCRIPTION
HTML5 on Mobile, For Web Developers.
Citation preview
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)
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
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
Mobile Users prefer browsers over apps
(source: Adobe)
What is HTML5
What is HTML5
Forms, Communication, Canvas, Geolocation, Web Applications, Audio, WebGL, Microdata, Video, Workers, Files, Elements, Storage, Local Devices, User interaction, Parsing rules, …
Build Mobile Web with HTML5
• Decide which platforms/browsers you will support
-ms-
-o-
-moz-
-webkit-
Webkit on Mobile?
There is no webkit on mobilehttp://quirksmode.org/webkit.html
Build Mobile Web with HTML5
• 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
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;}
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 ----------- */@mediaonly 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 */}
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 insetborder-radius: 15px;background: -webkit-linear-gradient();
http://mobile.twitter.com/session/new
-webkit-border-radius: 5px;background: #FFAB23 -webkit-gradient(linear,0% 0,0% 100%,from(#FE6),to(#FFAB23));box-sizing: border-box;
Build Mobile Web with HTML5
• Make Animation
CSS3 Animation instead of JS Animation
transition: left 1s ease-in-out;
YUI().use(‘transition’, function(){});http://jsfiddle.net/adamlu/RE6dF/
http://jsfiddle.net/adamlu/t5Afm/
#box1, #box2{ -webkit-transition: all 2s ease-in-out;}#box1:hover + #box2 { -webkit-transform: rotate(360deg); left: 500px;}
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" />
http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/
Build Mobile Web with HTML5
• Graphic Drawing - Canvas & SVG<canvas id="a" width="300" height="225"></canvas>var a_canvas = document.getElementById("a");var a_context = a_canvas.getContext("2d");a_context.fillRect(50, 25, 150, 100);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
http://www.limejs.com/static/roundball/index.html
http://jsfiddle.net/adamlu/xFR4V/
http://jsfiddle.net/adamlu/W67j8/
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>
Build Mobile Web with HTML5
• Geolocation API
navigator.geolocation.getCurrentPosition(success, failure, options);
Position Object
PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2)TIMEOUT (3) UNKNOWN_ERROR (0)
Build Mobile Web with HTML5
• Javascript Eventswindow.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/
Build Mobile Web with HTML5
• Device Supportwindow.devicePixelRationavigator.connection(Android2.2+)// contents of 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
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.
http://html5demos.com/history
Build Mobile Web with HTML5
• PerformanceOffline Web Application Cache:<html manifest="/cache.manifest">AddType text/cache-manifest .manifestCACHE MANIFESTNETWORK/CACHE/FALLBACK:LocalStorage/SessionStorage:var foo = 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: ', e.data);}, false);worker.postMessage('Hello World'); // Send data to our worker.
Build Mobile Web with HTML5
• Communication Cross-document messaging Server-Sent Events(XHR2) Web Socketsconn = new WebSocket('ws://node.remysharp.com:8001'); conn.onopen = function () {};conn.onmessage = function (event) { // console.log(event.data);}; conn.onclose = function (event) { state.className = 'fail'; state.innerHTML = 'Socket closed';};http://html5demos.com/web-socket
Build Mobile Web with HTML5
• Make Web AppFull 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/
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
Frameworks• 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/
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/
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!
