• Save
Zeno rocha - HTML5 APIs para Mobile
Upcoming SlideShare
Loading in...5
×
 

Zeno rocha - HTML5 APIs para Mobile

on

  • 3,315 views

Palestra de Zeno Rocha no InterCon Dev - Android, em setembro de 2013, sobre HTML5 APIs para Mobile. Saiba mais em: http://intercon.imasters.com.br/dev/android/

Palestra de Zeno Rocha no InterCon Dev - Android, em setembro de 2013, sobre HTML5 APIs para Mobile. Saiba mais em: http://intercon.imasters.com.br/dev/android/

Statistics

Views

Total Views
3,315
Views on SlideShare
958
Embed Views
2,357

Actions

Likes
3
Downloads
0
Comments
0

4 Embeds 2,357

http://intercon.imasters.com.br 2353
http://intercontmp.imasters.com.br 2
http://172.16.32.13 1
https://m.facebook.com&_=1399209921652 HTTP 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Zeno rocha - HTML5 APIs para Mobile Zeno rocha - HTML5 APIs para Mobile Presentation Transcript

  • HTML5 APIs para Mobile Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • hoje vamos falar de HTML5 no mundo mobile Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • Thursday, September 12, 13
  • nativo vs web Thursday, September 12, 13
  • nativo? Thursday, September 12, 13
  • web? Thursday, September 12, 13
  • vs <canvas> Thursday, September 12, 13
  • document.querySelector vs Thursday, September 12, 13
  • vs <input type=”date”> Thursday, September 12, 13
  • a plataforma web demora, mas evolui Thursday, September 12, 13
  • html5-pro.com/wormz Thursday, September 12, 13
  • Thursday, September 12, 13
  • ubuntu Thursday, September 12, 13
  • webOS Thursday, September 12, 13
  • tizen Thursday, September 12, 13
  • firefox os Thursday, September 12, 13
  • o que usar? o que evitar? Thursday, September 12, 13
  • chrome para android legenda Thursday, September 12, 13
  • safari para iOS legenda Thursday, September 12, 13
  • browser nativo do android legenda Thursday, September 12, 13
  • firefox mobile legenda Thursday, September 12, 13
  • ie mobile legenda Thursday, September 12, 13
  • opera mobile legenda Thursday, September 12, 13
  • muito bem suportado Thursday, September 12, 13
  • muito bem suportado Thursday, September 12, 13
  • <meta name="viewport" content="width=device-width”> viewport <meta name="viewport" content="initial-scale=1.0”> <meta name="viewport" content="minimum-scale=0.5”> <meta name="viewport" content="maximum-scale=1.5”> Thursday, September 12, 13
  • zno.io/R77v viewport Thursday, September 12, 13
  • @media screen and (max-width: 320px) {} @media screen and (min-width: 1024px) {} media queries @media screen and (orientation: portrait) {} @media screen and (orientation: landscape) {} @media screen and (device-aspect-ratio: 16/9) {} @media screen and (resolution: 2dppx) {} Thursday, September 12, 13
  • media queries Thursday, September 12, 13
  • <input type="email"> <input type="url"> <input type="tel"> <input type="number"> <input type="search"> <input type="date"> <input type="month"> <input type="week"> <input> Thursday, September 12, 13
  • <input> zno.io/R7ME Thursday, September 12, 13
  • <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </audio> <video> Thursday, September 12, 13
  • <video> zno.io/R6nv Thursday, September 12, 13
  • <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> <audio> Thursday, September 12, 13
  • <audio> zno.io/R7nE Thursday, September 12, 13
  • <img src="chrome.svg" alt="Chrome"> <svg> <svg> <circle cx="100" cy="50" r="40" fill="red"> </svg> Thursday, September 12, 13
  • <svg> zno.io/R6iA Thursday, September 12, 13
  • <canvas width="250" height="250"></canvas> <canvas> var canvas = document.querySelector("canvas"); var contexto = canvas.getContext("2d"); // começa a desenhar contexto.arc(110, 110, 100, 0, Math.PI*2, true); ... Thursday, September 12, 13
  • <canvas> zno.io/R7S3 Thursday, September 12, 13
  • var success = function (position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success); geolocation Thursday, September 12, 13
  • var success = function (position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; }; navigator.geolocation.watchPosition(success); geolocation Thursday, September 12, 13
  • zno.io/R6eH geolocation Thursday, September 12, 13
  • <p>Lorem ipsum dolor sit amet, consectetur</p> web storage var p = document.querySelector('p'); localStorage.setItem('p', p.textContent); Thursday, September 12, 13
  • web storage zno.io/R7hq Thursday, September 12, 13
  • .ontouchstart = function(e) { // faça algo }; .ontouchmove = function(e) { // faça algo }; touch events Thursday, September 12, 13
  • touch events zno.io/R6gZ Thursday, September 12, 13
  • window.ononline = function() { document.body.className = 'online'; }; window.onoffline = function() { document.body.className = 'offline'; }; offline events Thursday, September 12, 13
  • offline events zno.io/R7Da Thursday, September 12, 13
  • <html manifest="cache.manifest"> app cache CACHE MANIFEST #version 1 chrome.svg Thursday, September 12, 13
  • app cache zno.io/R7BJ Thursday, September 12, 13
  • parcialmente suportado Thursday, September 12, 13
  • parcialmente suportado Thursday, September 12, 13
  • img.onclick = function(e) { img.requestFullScreen(); }; fullscreen <img src="chrome.svg" alt="Chrome"> Thursday, September 12, 13
  • zno.io/R6t7 fullscreen Thursday, September 12, 13
  • <img id="img"> <input id="camera" type="file" accepts="image/*" capture="camera"> media capture camera.onchange = function(e) { var files = e.target.files; if (files.length > 0 && files[0].type.indexOf("image/") == 0) { img.src = URL.createObjectURL(files[0]); } }; Thursday, September 12, 13
  • zno.io/R7XH media capture Thursday, September 12, 13
  • o que vem por aí! Thursday, September 12, 13
  • o que vem por aí! Thursday, September 12, 13
  • <video autoplay></video> getUserMedia var video = document.querySelector("video"); navigator.getUserMedia({ video: true, audio: true }, function(s) { video.src = window.URL.createObjectURL(s); }); Thursday, September 12, 13
  • zno.io/R766 getUserMedia Thursday, September 12, 13
  • .navbar { position: sticky; top: 30px; } position sticky zno.io/R6u6 Thursday, September 12, 13
  • .onpointerdown = function(e) { // faça algo }; .onpointermove = function(e) { // faça algo }; pointer events zno.io/R6X6 Thursday, September 12, 13
  • // Vibra uma vez por um segundo navigator.vibrate(1000); vibration zno.io/R6eP Thursday, September 12, 13
  • mobilehtml5.org Thursday, September 12, 13
  • nativo vs web ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ??? Thursday, September 12, 13
  • A melhor forma de prever o futuro é inventando ele Thursday, September 12, 13
  • Thursday, September 12, 13