Transcript Slide 1
HTML5 on Mobile
Adam Lu
http://adamlu.com/
Frontend Engineer
Previous Slides
• HTML5 on Mobile – For Designer
http://www.slideshare.net/adamlu/html5-onmobilefor-designer
• HTML5 on Mobile – For Developer
http://www.slideshare.net/adamlu/html5-onmobilefor-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
downloaded
Installation/updates
Access to web analytics.
Rate, SaaS based revenue
Apple Store, Android
Market, Rating
Monetization
Progressive Enhancement
Follow the standards
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, MultiThreading
Performance
End User Experience
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 5
http://slides.html5rocks.com/#timeline-slide
HTML5 Logo
http://www.w3.org/html/logo/
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
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.
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>
http://www.w3.org/wiki/HTML/Elements
Semantic HTML:
<section>
<article>
<nav>
<aside>
<header>
<progress>
<time>
…
Basic Setting:
Set Viewport
Turn off user-scaling
Set favicon …
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.0rc.1/docs/forms/textinputs/
Microdata, ARIA attributes
<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
<ul id="tree1"
role="tree"
tabindex="0"
aria-labelledby="label_1">
<li role="treeitem" tabindex="-1" ariaexpanded="true">Fruits</li>
<li role="group">
<ul>
<li role="treeitem" tabindex="1">Oranges</li>
<li role="treeitem" tabindex="1">Pineapples</li>
...
</ul>
</li>
</ul>
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
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.
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(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
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
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");
source.onmessage = function(event) {
alert(event.data);
}
res.writeHead(200, {"Content‐Type":
"text/event‐stream"});
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:
var xhr = new XMLHttpRequest();
function uploadFiles(url, files) {
xhr.open('GET', '/path/to/image.png', true);
var formData = new FormData();
xhr.responseType = 'blob';
for (var i = 0, file; file = files[i]; ++i) {
xhr.onload = function(e) {
formData.append(file.name, file);}
if (this.status == 200) {
var xhr = new XMLHttpRequest();
var blob = this.response;
xhr.open('POST', url, true);
var img = 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",
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 crossorigin 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://helloworld.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-webkitairplay="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/
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 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/
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: inlineblock;}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section {
display: block; }
input[type="search"]{ -webkitappearance: 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 Applications
http://app.ft.com
Make Mobile Web Application
http://adamlu.com/iEye/
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://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
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!
@adamlu