Html5 on Mobile(For Developer)

HTML5 on Mobile (For Developer)

Adam Lu
http://adamlu.com/

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 vsNative 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

Mobile Users prefer browsers over
apps

(source: Adobe)

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-
Webkit on Mobile?
-o-
There is no webkit on mobile
-moz- http://quirksmode.org/webkit.html

-webkit-

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

• 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;}

• 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 ----------- */
@media
only 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 */
}

• CSS3 Effect

<input id="p" type="search"
autocorrect="off" autocomplete="off"
autocapitalize="off"
placeholder="Search" />
border-image: url() 0 24 stretch
box-shadow: #9FA1A4 0 3px 4px 2px -webkit-border-radius: 5px;
inset background: #FFAB23 -webkit-
border-radius: 15px; gradient(linear,0% 0,0%
background: -webkit-linear-gradient(); 100%,from(#FE6),to(#FFAB23));
box-sizing: border-box;
http://mobile.twitter.com/session/new

• Make Animation

CSS3 Animation instead of JS Animation

transition: left 1s ease-in-out;

http://jsfiddle.net/adamlu/RE6dF/ YUI().use(‘transition’, function(){});

#box1, #box2{
-webkit-transition: all 2s ease-in-out;
}
#box1:hover + #box2 {
-webkit-transform: rotate(360deg);
left: 500px;
http://jsfiddle.net/adamlu/t5Afm/ }

• 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/

• Graphic Drawing - Canvas & SVG
http://jsfiddle.net/adamlu/xFR4V/ <canvas id="a" width="300"
height="225"></canvas>
vara_canvas = document.getElementById("a");
vara_context = a_canvas.getContext("2d");
a_context.fillRect(50, 25, 150, 100);

<svgxmlns="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://jsfiddle.net/adamlu/W67j8/

http://www.limejs.com/static/roundball/index.html

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


• Geolocation API
Position Object
navigator.geolocation.getCurrentPosition(succe
ss, 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 HTML Media Capture:
navigator.connection(Android2.2+) <input type="file" accept="image/*"
// contents of navigator.connection capture="camera" />
object <device type="media"></device>
{
"type": "3", <video autoplay></video>
"UNKNOWN": "0", navigator.getUserMedia({video: true,
"ETHERNET": "1", 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

• 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

• Performance
Offline Web Application Cache:
<html manifest="/cache.manifest">
AddType text/cache-manifest .manifest
CACHE MANIFEST
NETWORK/CACHE/FALLBACK:
LocalStorage/SessionStorage:
varfoo = 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.

• Communication
 Cross-document messaging
 Server-Sent Events(XHR2)
 Web Sockets
conn = 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

• Make Web App
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/

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 PerfBookmarklet
 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!

Html5 on Mobile(For Developer)

More Related Content

What's hot (20)

Similar to Html5 on Mobile(For Developer) (20)

More from Adam Lu (13)

Recently uploaded (20)

Html5 on Mobile(For Developer)

Editor's Notes