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
• 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 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, Rating

Progressive Enhancement Follow the standards End User Experience

GeoLocation, Offline camera, gyroscope, Access to hardware sensors
Storage, 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

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

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

HTML5Logo

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

The Technology

Forms, Communication, Canvas, Geolocation, W
eb
Applications, Audio, WebGL, Microdata, Video,
Workers, Files, Elements, Storage, Local
Devices, User interaction, Parsing rules, …

What we can use
HTML5 to do on mobile

http://mobilehtml5.org/

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.

HTML Markup
<!DOCTYPE html> Semantic HTML:
<html> <section>
<head> <article>
<meta charset="utf-8" /> <nav>
<meta name="viewport" <aside>
content="width=device-width, initial- <header>
scale=1, 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 …

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

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 window.applicationCache.addEventListen
manifest="/cache.manifest”> er('updateready', function(e) {
CACHE MANIFEST if (window.applicationCache.status ==
# version 1.0.0 window.applicationCache.UPDATEREADY{
NETWORK:
* window.applicationCache.swapCach();
CACHE: window.location.reload();
/js/*
/image/* }}, false);
FALLBACK:
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.
varfoo = localStorage.getItem(“bar”);
localStorage.setItem(“bar”, “foo”);
localStorage.clear();
sessionStorage.setItem(‘a’, ‘1’);
sessionStorage.removeItem(‘a’);
window.addEventListener(“storage”, ha
ndle_storage, false);

http://dev.w3.org/html5/webstorage/

Geolocation
• Method of informing a website of the user's
geographical location
navigator.geolocation.getCurrentPosition(succe
ss, failure, options);

PERMISSION_DE
NIED (1)

POSITION_UNAV
AILABLE (2)

TIMEOUT (3)

UNKNOWN_ERR
OR (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 HTML Media Capture:
<input type="file" accept="image/*"
navigator.connection(Android2.2+) capture="camera" />
//navigator.connection object <device type="media"></device>
{
"type": "3", <video autoplay></video>
"UNKNOWN": "0", navigator.getUserMedia({video:
"ETHERNET": "1", true, audio: true}, function(stream) {
"WIFI": "2", var video =
"CELL_2G": "3", document.querySelector('video');
"CELL_3G": "4" video.src = stream;
} }, errorCallback);

http://dev.w3.org/2011/webrtc/editor/getusermedia.html

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

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.

Client: Server:
var source = new EventSource("url"); res.writeHead(200, {"Content‐Type":
source.onmessage = function(event) { "text/event‐stream"});
alert(event.data); res.write(“data: ” + JSON.stringify(stuff)
} +”n”);res.flush();
http://dev.w3.org/html5/eventsource/

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

Cross-document messaging
• Enables secure cross-origin communication
across iframes, tabs and windows
• Uses Origin security
window.addEventListner("message", message
Handler, 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.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/

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/

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/

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/

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

Web Workers
• Scripts running in background
• Heavy Weight Scripts
var worker = new Worker('doWork.js'); doWorker.js
worker.addEventListener('message', functi
on(e) { self.addEventListner(‘message’, functio
console.log('Worker said: ', e.data); n(e){
}, false); self.postMessage(e.data+’ Worker
worker.postMessage('Hello World'); // says: Hello’);
Send data to our worker
worker.onerror= function(e){} }，
worker.terminate(); 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 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, f
ooter, 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 PerfBookmarklet
 http://www.blaze.io/mobile/

Make Mobile Web Applications

http://app.ft.com

Make Mobile Web Application
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
http://adamlu.com/iEye/

http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png

Mobile Design Patterns

http://mobile-patterns.com/

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!

HTML5 on Mobile

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML5 on Mobile (20)

More from Adam Lu (13)

Recently uploaded (20)

HTML5 on Mobile

Editor's Notes