HTML5 on Mobile
description
Transcript of HTML5 on Mobile
![Page 2: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/4.jpg)
Why we’re focusing on mobile web
![Page 5: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/5.jpg)
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)
![Page 6: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/6.jpg)
Mobile is Growing
Source: Nielsen (January 2012)
![Page 7: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/7.jpg)
Mobile Users prefer browsers over apps
(source: Adobe)
![Page 8: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/8.jpg)
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
![Page 9: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/9.jpg)
Why we’re using HTML5 on mobile
![Page 10: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/11.jpg)
![Page 12: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/12.jpg)
![Page 13: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/13.jpg)
What is HTML5
![Page 14: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/14.jpg)
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 5http://slides.html5rocks.com/#timeline-slide
![Page 16: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/16.jpg)
The Technology
Forms, Communication, Canvas, Geolocation, Web Applications, Audio, WebGL, Microdata, Video, Workers, Files, Elements, Storage, Local Devices, User interaction, Parsing rules, …
![Page 17: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/17.jpg)
What we can use HTML5 to do on mobile
![Page 19: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/19.jpg)
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.
![Page 20: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/20.jpg)
HTML5 SEMANTICS
![Page 21: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/22.jpg)
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/
![Page 23: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/23.jpg)
Microdata, ARIA attributes<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1"> <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li></ul>
<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
![Page 24: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/24.jpg)
OFFLINE&STORAGE
![Page 25: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/25.jpg)
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 manifest="/cache.manifest”>CACHE MANIFEST# version 1.0.0NETWORK:*CACHE:/js/*/image/*FALLBACK:
window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY{
window.applicationCache.swapCach(); window.location.reload(); }}, false);
http://www.w3.org/TR/html5/offline.html
![Page 26: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/26.jpg)
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/
![Page 27: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/27.jpg)
DEVICE ACCESS
![Page 28: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/28.jpg)
Geolocation
• Method of informing a website of the user's geographical location
navigator.geolocation.getCurrentPosition(success, failure, options);
PERMISSION_DENIED (1)
POSITION_UNAVAILABLE (2)
TIMEOUT (3)
UNKNOWN_ERROR (0)
![Page 29: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/29.jpg)
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/
![Page 30: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/30.jpg)
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
![Page 31: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/31.jpg)
CONNECTIVITY
![Page 32: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/32.jpg)
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
bandwidthconn = 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
![Page 33: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/33.jpg)
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.
var source = new EventSource("url");source.onmessage = function(event) {
alert(event.data);}
http://dev.w3.org/html5/eventsource/
res.writeHead(200, {"Content Type": ‐ "text/event stream‐ "});res.write(“data: ” + JSON.stringify(stuff) +”\n”); res.flush();
Client: Server:
![Page 34: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/34.jpg)
XMLHttpRequest Level 2
• XMLHttpRequest(XHR) Level2 significantly enhances XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest/
function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file);} var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.send(formData); }document.querySelector('input[type="file"]').addEventListener('change', function(e) { uploadFiles('/server', this.files);}, false);
var xhr = new XMLHttpRequest();xhr.open('GET', '/path/to/image.png', true);xhr.responseType = 'blob';xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; var img = document.createElement('img');img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); }};xhr.send();
Fetch Data: Send Data:
![Page 35: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/35.jpg)
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/
![Page 36: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/36.jpg)
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.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/
![Page 37: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/37.jpg)
MULTIMEDIA
![Page 38: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/38.jpg)
Video<video id=“video” poster=”poster.jpg" src=”source.mp4" width="2" height="1" x-webkit-airplay="allow” autoplay controls></video>
AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
document.getElementById(‘video’).play();
http://m.youtube.com/
![Page 39: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/39.jpg)
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;
http://html5.grooveshark.com/
More: WEB AUDIO API
![Page 40: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/40.jpg)
3D, GRAPHICS, EFFECTS
![Page 41: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/41.jpg)
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/
![Page 42: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/42.jpg)
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
![Page 43: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/43.jpg)
SVG
• Method of displaying basic Vector Graphics features using the embed or object elements
* SVG isn’t part of HTML5
![Page 44: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/44.jpg)
PERFORMANCE&INTEGRATION
![Page 45: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/45.jpg)
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 workerworker.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/
![Page 46: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/46.jpg)
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
![Page 47: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/47.jpg)
CSS3 STYLING
![Page 48: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/48.jpg)
CSS3 New Features• Border Radius• Shadows• Gradient• Color• Background• Border Image• Font• Transform• Transition• Animation
DEMO: http://jsfiddle.net/adamlu/xGuKy/
![Page 49: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/49.jpg)
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, footer, header, hgroup, nav, section { display: block; }input[type="search"]{ -webkit-appearance: none/textfield;}
![Page 50: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/50.jpg)
What we should care about for mobile web development
![Page 51: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/51.jpg)
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/
![Page 52: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/52.jpg)
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/
![Page 53: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/53.jpg)
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/
![Page 54: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/54.jpg)
Miscellaneous
![Page 56: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/56.jpg)
Make Mobile Web Application
Full 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/
![Page 57: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/57.jpg)
http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png
![Page 58: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/58.jpg)
Usage of HTML5 in Mobile Web
![Page 59: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/59.jpg)
Usage of HTML5 in Mobile Web
![Page 60: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/60.jpg)
Usage of HTML5 in Mobile Web
![Page 61: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/61.jpg)
Usage of HTML5 in Mobile Web
![Page 63: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/63.jpg)
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/
![Page 64: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/64.jpg)
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.
![Page 65: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/65.jpg)
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/
![Page 66: HTML5 on Mobile](https://reader035.fdocuments.in/reader035/viewer/2022062323/56815e3c550346895dcca4dc/html5/thumbnails/66.jpg)
HTML5 is the future of Mobile!