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 (StatCount...
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 fe...
Web App vsNative App        Web App                      Native App                  Comparation    Just enter the URL    ...
Mobile Users prefer browsers over              apps            (source: Adobe)
What is HTML5
What is HTML5Forms, Communication, Canvas, Geolocation,Web Applications, Audio, WebGL, Microdata,Video, Workers, Files, El...
Build Mobile Web with HTML5• Decide which platforms/browsers you will  support                    -ms-                    ...
Build Mobile Web with HTML5• HTML Markup <!DOCTYPE html>                                 Semantic HTML: <html>            ...
Build Mobile Web with HTML5  • CSS Reset-webkit-text-size-adjust: none;-webkit-user-select: none;-webkit-touch-callout;-we...
Build Mobile Web with HTML5• Media Queries   /*styles for 800px and up!*/                  @media only screen and (min-wid...
Build Mobile Web with HTML5 • CSS3 Effect<input id="p" type="search"autocorrect="off" autocomplete="off"autocapitalize="of...
Build Mobile Web with HTML5• Make Animation                                     CSS3 Animation instead of JS Animation    ...
Build Mobile Web with HTML5• Advanced Forms in Mobile <input type="number" pattern="[0-9]*" /> <input type="email” require...
Build Mobile Web with HTML5    • Graphic Drawing - Canvas & SVG    http://jsfiddle.net/adamlu/xFR4V/         <canvas id="a...
Build Mobile Web with HTML5• Media Support                  <video poster="" src="" width="2"                  height="1" ...
Build Mobile Web with HTML5• Geolocation API                                                   Position Object  navigator....
Build Mobile Web with HTML5• Javascript Events window.addEventListener("touchstart", function(e){ //e.touches; }, false); ...
Build Mobile Web with HTML5• Device Support  window.devicePixelRatio               HTML Media Capture:  navigator.connecti...
Build Mobile Web with HTML5• User Interaction   Drag and Drop   HTML Editing   Session History   window.history.pushSta...
Build Mobile Web with HTML5• PerformanceOffline Web Application Cache:<html manifest="/cache.manifest">AddType text/cache-...
Build Mobile Web with HTML5• Communication   Cross-document messaging   Server-Sent Events(XHR2)   Web Sockets  conn = ...
Build Mobile Web with HTML5• Make Web App                           Full screen mode:                           <meta name...
Mobile Web App Strategy• Evaluate your requirement• Decide what app you’ll do• A hybrid app maybe a good approach (Web  Ap...
Frameworks• Boilerplate http://html5boilerplate.com/mobile• Packaging frameworks    http://phonegap.com/    http://www.a...
Tools• Debugging    WEINRE    WebKit Remote Debugging• Emulators & Simulators    Mobile Emulators and Simulators    An...
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!
Thanks!  @adamlu
Html5 on Mobile(For Developer)
Upcoming SlideShare
Loading in...5
×

Html5 on Mobile(For Developer)

9,999

Published on

HTML5 on Mobile, For Web Developers.

Published in: Technology, Design
1 Comment
16 Likes
Statistics
Notes
  • Great! Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,999
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
296
Comments
1
Likes
16
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
  • Html5 on Mobile(For Developer)

    1. 1. HTML5 on Mobile (For Developer) Adam Lu http://adamlu.com/
    2. 2. 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)
    3. 3. Mobile is Growing Source: Nielsen (January 2012)
    4. 4. 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
    5. 5. 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, 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
    6. 6. Mobile Users prefer browsers over apps (source: Adobe)
    7. 7. What is HTML5
    8. 8. What is HTML5Forms, Communication, Canvas, Geolocation,Web Applications, Audio, WebGL, Microdata,Video, Workers, Files, Elements, Storage, LocalDevices, User interaction, Parsing rules, …
    9. 9. 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-
    10. 10. Build Mobile Web with HTML5• 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
    11. 11. Build Mobile Web with HTML5 • 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;}
    12. 12. Build Mobile Web with HTML5• 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 */ }
    13. 13. Build Mobile Web with HTML5 • CSS3 Effect<input id="p" type="search"autocorrect="off" autocomplete="off"autocapitalize="off"placeholder="Search" />border-image: url() 0 24 stretchbox-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
    14. 14. Build Mobile Web with HTML5• 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/ }​
    15. 15. Build Mobile Web with HTML5• 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/
    16. 16. Build Mobile Web with HTML5 • 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
    17. 17. Build Mobile Web with HTML5• 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>
    18. 18. Build Mobile Web with HTML5• Geolocation API Position Object navigator.geolocation.getCurrentPosition(succe ss, failure, options); PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2) TIMEOUT (3) UNKNOWN_ERROR (0)
    19. 19. Build Mobile Web with HTML5• 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/
    20. 20. Build Mobile Web with HTML5• 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
    21. 21. Build Mobile Web with HTML5• 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
    22. 22. Build Mobile Web with HTML5• PerformanceOffline Web Application Cache:<html manifest="/cache.manifest">AddType text/cache-manifest .manifestCACHE MANIFESTNETWORK/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.
    23. 23. Build Mobile Web with HTML5• 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
    24. 24. Build Mobile Web with HTML5• 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/
    25. 25. 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
    26. 26. 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/
    27. 27. Tools• Debugging  WEINRE  WebKit Remote Debugging• Emulators & Simulators  Mobile Emulators and Simulators  Android Emulator  iOS Simulator• Performance  Mobile PerfBookmarklet  http://www.blaze.io/mobile/
    28. 28. 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/
    29. 29. 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.
    30. 30. 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/
    31. 31. HTML5 is the future of Mobile!
    32. 32. Thanks! @adamlu
    1. A particular slide catching your eye?

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

    ×