Your SlideShare is downloading. ×
0
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 ...
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 ...
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 (StatCount...
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   ...
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 fe...
What is HTML5
Rough Timeline of Web Technologies•   1991 HTML•   1994 HTML 2•   1996 CSS 1 + JavaScript•   1997 HTML 4•   1998 CSS 2•   ...
HTML5Logohttp://www.w3.org/html/logo/
The TechnologyForms, Communication, Canvas, Geolocation, WebApplications, Audio, WebGL, Microdata, Video,Workers, Files, E...
What we can useHTML5 to do on mobile
http://mobilehtml5.org/
HTML5 has been widely used on pc            web development•    http://www.cuttherope.ie/•    http://chrome.angrybirds.com...
HTML5 SEMANTICS
HTML Markup<!DOCTYPE html>                                Semantic HTML:<html>                                         <se...
Advanced Forms in Mobile<input type="number" pattern="[0-9]*" /><input type="email” required /><input type="url" /><input ...
Microdata, ARIA attributes<div                                   <ul id="tree1"itemscopeitemtype="http://example.     role...
OFFLINE&STORAGE
Offline Web Application Cache• Method of defining web page files to be  cached using a cache manifest file, allowing  them...
Local Storage, Session Storage• Web storage and DOM storage (document  object model) are web application software  methods...
DEVICE ACCESS
Geolocation• Method of informing a website of the users  geographical location                     navigator.geolocation.g...
Javascript Eventswindow.addEventListener("touchstart", function(e){//e.touches;}, false);window.addEventListener("orientat...
Device Supportwindow.devicePixelRatio               HTML Media Capture:                                      <input type="...
CONNECTIVITY
Web Sockets• W3C/IETF Standard• Real-time, low latency, true full-duplex  communication channel• Build on top of HTTP, sha...
Server-Sent Events• Open an HTTP connection for receiving push notifications  from a server in the form of DOM events.• St...
XMLHttpRequest Level 2  • XMLHttpRequest(XHR) Level2 significantly    enhances XMLHttpRequestFetch Data:                  ...
Cross-document messaging• Enables secure cross-origin communication  across iframes, tabs and windows• Uses Origin securit...
Cross-Origin Resource Sharing• Defines a mechanism to enable client-side cross-  origin requests. Specifications that enab...
MULTIMEDIA
Video                <video id=“video”                poster=”poster.jpg"                src=”source.mp4" width="2"       ...
Audio   <audio id=“audio” controls   preload="auto" autobuffer>   <source src="elvis.mp3" />   <source src="elvis.ogg" /> ...
3D, GRAPHICS, EFFECTS
Canvas• 2D drawing platform within the browser• Use nothing more than JavaScript and HTML –  no plugins• Extensible throug...
WebGL• Javascript Binding for OpenGL ES 2.0 on  Browser• Run as a specific context for the HTML  <canvas> element, which g...
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);       doWorker.js wor...
History API• The DOM window object provides access to  the browsers history through the history  object. It exposes useful...
CSS3 STYLING
CSS3 New Features•   Border Radius•   Shadows•   Gradient•   Color•   Background•   Border Image•   Font•   Transform•   T...
CSS on Mobile-webkit-text-size-adjust: none;-webkit-user-select: none;-webkit-touch-callout;-webkit-tap-highlight-color: t...
What we should careabout for mobile web   development
Mobile-First Responsive Design• Responsive Web design is the approach that  suggests that design and development should  r...
Choose a Framework• Boilerplate http://html5boilerplate.com/mobile• Packaging frameworks    http://phonegap.com/    http...
Mobile Debugging Tools• Debugging    WEINRE    WebKit Remote Debugging• Emulators & Simulators    Mobile Emulators and ...
Miscellaneous
Make Mobile Web Applications              http://app.ft.com
Make Mobile Web Application                          Full screen mode:                          <meta name="apple-mobile-w...
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 Patternshttp://mobile-patterns.com/
Compatibility•   http://haz.io/•   http://caniuse.com/•   http://css3test.com/•   http://css3generator.com/•   http://css3...
Inspiration• http://mobile-patterns.com/ - Mobile UI  Patterns• http://pttrns.com- Another gallery of Mobile  UI• http://m...
Resources•   http://diveintohtml5.info/•   http://www.html5rocks.com/•   http://html5demos.com/•   http://www.mobilehtml5....
HTML5 is the future of Mobile!
@adamlu
HTML5 on Mobile
HTML5 on Mobile
Upcoming SlideShare
Loading in...5
×

HTML5 on Mobile

20,262

Published on

HTML5 on Mobile

Published in: Technology, Design
2 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
20,262
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
332
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide
  • 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 &amp; 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&apos;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.
  • Transcript of "HTML5 on Mobile"

    1. 1. HTML5 on Mobile Adam Lu http://adamlu.com/ Frontend Engineer
    2. 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. 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
    4. 4. Why we’re focusing on mobile web
    5. 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)
    6. 6. Mobile is Growing Source: Nielsen (January 2012)
    7. 7. Mobile Users prefer browsers over apps (source: Adobe)
    8. 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, RatingProgressive Enhancement Follow the standards End User Experience GeoLocation, Offline camera, gyroscope, Access to hardware sensorsStorage, 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
    9. 9. Why we’re using HTML5 on mobile
    10. 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
    11. 11. What is HTML5
    12. 12. 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
    13. 13. HTML5Logohttp://www.w3.org/html/logo/
    14. 14. The TechnologyForms, Communication, Canvas, Geolocation, WebApplications, Audio, WebGL, Microdata, Video,Workers, Files, Elements, Storage, LocalDevices, User interaction, Parsing rules, …
    15. 15. What we can useHTML5 to do on mobile
    16. 16. http://mobilehtml5.org/
    17. 17. 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.
    18. 18. HTML5 SEMANTICS
    19. 19. 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
    20. 20. 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/
    21. 21. 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>
    22. 22. OFFLINE&STORAGE
    23. 23. 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.addEventListenmanifest="/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
    24. 24. 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/
    25. 25. DEVICE ACCESS
    26. 26. Geolocation• Method of informing a website of the users geographical location navigator.geolocation.getCurrentPosition(succe ss, failure, options); PERMISSION_DE NIED (1) POSITION_UNAV AILABLE (2) TIMEOUT (3) UNKNOWN_ERR OR (0)
    27. 27. Javascript Eventswindow.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/
    28. 28. Device Supportwindow.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
    29. 29. CONNECTIVITY
    30. 30. 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
    31. 31. 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/
    32. 32. XMLHttpRequest Level 2 • XMLHttpRequest(XHR) Level2 significantly enhances XMLHttpRequestFetch 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/
    33. 33. 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/
    34. 34. 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/
    35. 35. MULTIMEDIA
    36. 36. 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/
    37. 37. 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/
    38. 38. 3D, GRAPHICS, EFFECTS
    39. 39. 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/
    40. 40. 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
    41. 41. SVG• Method of displaying basic Vector Graphics features using the embed or object elements* SVG isn’t part of HTML5
    42. 42. PERFORMANCE&INTEGRATION
    43. 43. 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/
    44. 44. History API• The DOM window object provides access to the browsers history through the history object. It exposes useful methods and properties that let you move back and forth through the users 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
    45. 45. CSS3 STYLING
    46. 46. CSS3 New Features• Border Radius• Shadows• Gradient• Color• Background• Border Image• Font• Transform• Transition• Animation DEMO: http://jsfiddle.net/adamlu/xGuKy/
    47. 47. 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;}
    48. 48. What we should careabout for mobile web development
    49. 49. 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/
    50. 50. 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/
    51. 51. 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/
    52. 52. Miscellaneous
    53. 53. Make Mobile Web Applications http://app.ft.com
    54. 54. 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 LocalStoragehttp://adamlu.com/iEye/
    55. 55. http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png
    56. 56. Usage of HTML5 in Mobile Web
    57. 57. Usage of HTML5 in Mobile Web
    58. 58. Usage of HTML5 in Mobile Web
    59. 59. Usage of HTML5 in Mobile Web
    60. 60. Mobile Design Patternshttp://mobile-patterns.com/
    61. 61. 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/
    62. 62. 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.
    63. 63. 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/
    64. 64. HTML5 is the future of Mobile!
    65. 65. @adamlu
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×