2. 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
3. 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
5. 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)
8. 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
10. 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
19. 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.
25. 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
26. 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/
32. 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
33. 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/
35. 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/
36. 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/
41. 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/
42. 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
43. SVG
• Method of displaying basic Vector Graphics
features using the embed or object elements
* SVG isn’t part of HTML5
45. 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/
46. 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
51. 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/
64. 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.
Develop in HTML5 for mobile devices namely deploy roughly the same code based on all HTML5-ready phones
Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.