Mobile HTML5 Today!
Ido Green
Developer Advocate
Google
2014
Ido Green
Developer Advocate
Google
Who?!
plus.google.com/greenido
greenido.wordpress.com
Who has a smartphone?
Who loves typing on a phone?
Who uses their phone as a desktop?
● The screens are smaller
● Users are mobile
● Input. is. harder.
● Unique hardware capabilities
● Everything is slower
Mo...
The screens
are smaller.
What can I do?
A LOT!
The critical element for mobile!
Device width:
<meta name="viewport" content="width=device-width" />
Initial scale:
<meta ...
Adaptive to screen size
@media screen and (min-width: 800px) { ... }
@media screen and (device-aspect-ratio: 16/9) { ... }...
Mobile devices can usually be rotated
@media screen and (orientation: portrait) {}
@media screen and (orientation: landsca...
Sizing relatively to the viewport
#visible-square {
width: 20vmin;
height: 20vmin;
}
● Four new units: vw(idth), vh(eight)...
Users Are Mobile
Request the current position once
var success = function(position) {
var lat = position.coords.latitude;
var long = positi...
Events when the device's orientation changes
window.onorientationchange = function(event) {
var yaw = event.alpha;
var pit...
Determine the network state
window.navigator.onLine
window.addEventListener("online", function() {
console.log("Visitor *m...
<html manifest="website.manifest">
CACHE MANIFEST
#version 1.2013.5.16
css/bootstrap.min.css
#Images
img/logo.png
● Will a...
Use abstractions:
● Lawn Chair - brian.io/lawnchair/
● asyncStorage - https://github.com/WebReflection/db
● IndexedDBShim ...
Input. Is.
Harder!
What can I do?
Specialized on-screen keyboards
<input type="email" />
<input type="search" />
<input type="url" />
<input type="tel" />
<...
Touch Events
Handle the visitor's touches
[element].ontouchstart = function(ev){};
[element].ontouchmove = function(ev){};...
Unique
Hardware
capabilities
What can I do?
Camera - Media Capture
Take photos
<input type="file" capture accepts="image/*" id="
cam">
var cam = document.getElementBy...
getUserMedia
Inline camera and mic access
navigator.getUserMedia({audio:true, video: true},
function(stream) {
// An image...
Android Intents
Interacting with native apps
intent:
HOST/URI-path // Optional host
#Intent;
package=[string];
action=[ st...
Well...
What can I do?
What We Can Do Today?
● Adapt to screen sizes
● Accommodate users on the move
● Speed up input
● Integrate with device fea...
Q & A
Thank you!
plus.google.com/greenido
greenido.wordpress.com
Upcoming SlideShare
Loading in …5
×

Mobile html5 today

1,404 views

Published on

What are some of the important features we can use today on mobile web browsers?
How HTML5 can help our users to be more productive?
Some of the answers are in these slides.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,404
On SlideShare
0
From Embeds
0
Number of Embeds
338
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile html5 today

  1. 1. Mobile HTML5 Today! Ido Green Developer Advocate Google 2014
  2. 2. Ido Green Developer Advocate Google Who?! plus.google.com/greenido greenido.wordpress.com
  3. 3. Who has a smartphone?
  4. 4. Who loves typing on a phone?
  5. 5. Who uses their phone as a desktop?
  6. 6. ● The screens are smaller ● Users are mobile ● Input. is. harder. ● Unique hardware capabilities ● Everything is slower Mobile is different
  7. 7. The screens are smaller. What can I do?
  8. 8. A LOT!
  9. 9. The critical element for mobile! Device width: <meta name="viewport" content="width=device-width" /> Initial scale: <meta name="viewport" content="initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Video And Demo: goo.gl/j9KLT Viewport
  10. 10. Adaptive to screen size @media screen and (min-width: 800px) { ... } @media screen and (device-aspect-ratio: 16/9) { ... } @media screen and (resolution: 2dppx) { ... } ● Logically group your styling rules. ● Dynamically responsive. Media Queries
  11. 11. Mobile devices can usually be rotated @media screen and (orientation: portrait) {} @media screen and (orientation: landscape) {} Video And Demo: goo.gl/SgMEo Orientation
  12. 12. Sizing relatively to the viewport #visible-square { width: 20vmin; height: 20vmin; } ● Four new units: vw(idth), vh(eight), vmin and vmax. ● Relative to the size of the viewport (!) Value is 1% of width/height of the viewport 1vw = 1% of the viewport width 1vh = 1% of viewport height Video And Demo: goo.gl/J5tna Viewport units
  13. 13. Users Are Mobile
  14. 14. Request the current position once var success = function(position) { var lat = position.coords.latitude; var long = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success); Or keep track when they're on the move! var watchId = navigator.geolocation.watchPosition( function (position) { ... }); // Stop watching when you're done. clearWatch(watchId); Geolocation
  15. 15. Events when the device's orientation changes window.onorientationchange = function(event) { var yaw = event.alpha; var pitch = event.beta; var roll = event.gamma; // You could make a compass! } Video And Demo: goo.gl/zNvp3 Device Orientation
  16. 16. Determine the network state window.navigator.onLine window.addEventListener("online", function() { console.log("Visitor *might* be online."); }); window.addEventListener("offline", function() { console.log("Visitor is definitely offline."); }); ● Very hard to know for sure whether the visitor is online. ● Check my demo: picturesque-app.appspot.com Video And Demo: goo.gl/Bgmcp Offline Events
  17. 17. <html manifest="website.manifest"> CACHE MANIFEST #version 1.2013.5.16 css/bootstrap.min.css #Images img/logo.png ● Will also be used when the user is online. ● Allows you to define fallback pages. ● Don't cache the manifest! Video And Demo: goo.gl/3fO2I Application Cache
  18. 18. Use abstractions: ● Lawn Chair - brian.io/lawnchair/ ● asyncStorage - https://github.com/WebReflection/db ● IndexedDBShim - nparashuram.com/IndexedDBShim/ Storage APIs
  19. 19. Input. Is. Harder! What can I do?
  20. 20. Specialized on-screen keyboards <input type="email" /> <input type="search" /> <input type="url" /> <input type="tel" /> <input type="number" /> <input type="date" /> <input type="week" /> <input type="month" /> <input type="datetime-local" /> Video And Demo: goo.gl/CNMp6 Semantic input types
  21. 21. Touch Events Handle the visitor's touches [element].ontouchstart = function(ev){}; [element].ontouchmove = function(ev){}; [element].ontouchend = function(ev){}; (!) Warning: 300 millisecond click delay → Use FastClick Docs: goo.gl/8ybb5 Video And Demo: goo.gl/ZwOzk
  22. 22. Unique Hardware capabilities What can I do?
  23. 23. Camera - Media Capture Take photos <input type="file" capture accepts="image/*" id=" cam"> var cam = document.getElementById("cam"); cam.onchange = function(event) { // An image has been captured. if(event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) { // We have an image - Let’s go wild... } } Video And Demo: picturesque-app.appspot.com
  24. 24. getUserMedia Inline camera and mic access navigator.getUserMedia({audio:true, video: true}, function(stream) { // An image has been captured. video.src = URL.createObjectURL(stream); video.play(); }); Demo: ido-green.appspot.com/getUserMedia-hello-world.html and a short Video.
  25. 25. Android Intents Interacting with native apps intent: HOST/URI-path // Optional host #Intent; package=[string]; action=[ string]; category=[ string]; component=[ string]; scheme=[ string]; end; <a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end" > Take a QR code </a> More information:developers.google.com/chrome/mobile/docs/intents Video And Demo: goo.gl/Kpk0C
  26. 26. Well... What can I do?
  27. 27. What We Can Do Today? ● Adapt to screen sizes ● Accommodate users on the move ● Speed up input ● Integrate with device features ● Measure performance across all devices ● Look forward to WebRTC, Web Audio and WebGL
  28. 28. Q & A Thank you! plus.google.com/greenido greenido.wordpress.com

×