Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 APIs para Mobile

Zeno Rocha
August 30, 2013
Programming
26
1.9k

HTML5 APIs para Mobile

QConSP

Zeno Rocha

August 30, 2013
Tweet

More Decks by Zeno Rocha

See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
540
7 Habits of Highly Productive Developers
zenorocha
1
360
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
430
What's new in the Liferay Community
zenorocha
0
640
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
530
How Liferay fits into the real of latest technologies
zenorocha
0
540
Estoicismo e JavaScript
zenorocha
3
1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
880
Como investir em... você!
zenorocha
1
530

Other Decks in Programming

See All in Programming
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
functionalなアプローチで動的要素を排除する
ryopeko
1
220
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
170
Scaling your build logic
antalmonori
1
100
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
3
240
Rubyでつくるパケットキャプチャツール
ydah
0
170
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう？知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
Package Traits
ikesyo
1
210
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
570
20241217　競争力強化とビジネス価値創出への挑戦：モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
290

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Building an army of robots
kneath
302
45k
Producing Creativity
orderedlist
PRO
343
39k
A Tale of Four Properties
chriscoyier
157
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Embracing the Ebb and Flow
colly
84
4.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
Visualization
eitanlees
146
15k
The Invisible Side of Design
smashingmag
299
50k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

Transcript

  1. HTML5 APIs para Mobile

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None

  9. hoje vamos falar de HTML5 no mundo mobile

  10. None
  11. None
  12. None

  13. nativo vs web

  14. nativo?

  15. web?

  16. vs <canvas>

  17. document.querySelector vs

  18. vs <input type=”date”>

  19. a plataforma web demora, mas evolui

  20. html5-pro.com/wormz

  21. None

  22. ubuntu

  23. webOS

  24. tizen

  25. firefox os

  26. o que usar? o que evitar?

  27. chrome para android legenda

  28. safari para iOS legenda

  29. browser nativo do android legenda

  30. firefox mobile legenda

  31. ie mobile legenda

  32. opera mobile legenda

  33. muito bem suportado

  34. <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”>

  35. zno.io/R77v viewport

  36. @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) {}

  37. media queries

  38. <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>

  39. <input> zno.io/R7ME

  40. <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> <audio>

  41. <audio> zno.io/R7nE

  42. <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </audio> <video>

  43. <video> zno.io/R6nv

  44. <img src="chrome.svg" alt="Chrome"> <svg> <svg> <circle cx="100" cy="50" r="40" fill="red">

    </svg>

  45. <svg> zno.io/R6iA

  46. <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); ...

  47. <canvas> zno.io/R7S3

  48. var success = function (position) { var latitude = position.coords.latitude;

    var longitude = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success); geolocation

  49. var success = function (position) { var latitude = position.coords.latitude;

    var longitude = position.coords.longitude; }; navigator.geolocation.watchPosition(success); geolocation

  50. zno.io/R6eH geolocation

  51. <p>Lorem ipsum dolor sit amet, consectetur</p> web storage var p

    = document.querySelector('p'); localStorage.setItem('p', p.textContent);

  52. web storage zno.io/R7hq

  53. .ontouchstart = function(e) { // faça algo }; .ontouchmove =

    function(e) { // faça algo }; touch events

  54. touch events zno.io/R6gZ

  55. <html manifest="cache.manifest"> app cache CACHE MANIFEST #version 1 chrome.svg

  56. app cache zno.io/R7BJ

  57. window.ononline = function() { document.body.className = 'online'; }; window.onoffline =

    function() { document.body.className = 'offline'; }; offline events

  58. offline events zno.io/R7Da

  59. parcialmente suportado

  60. <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]); } };

  61. zno.io/R7XH media capture

  62. img.onclick = function(e) { img.requestFullScreen(); }; fullscreen <img src="chrome.svg" alt="Chrome">

  63. zno.io/R6t7 fullscreen

  64. o que vem por aí!

  65. <video autoplay></video> getUserMedia var video = document.querySelector("video"); navigator.getUserMedia({ video: true,

    audio: true }, function(s) { video.src = window.URL.createObjectURL(s); });

  66. zno.io/R766 getUserMedia

  67. .navbar { position: sticky; top: 30px; } position sticky zno.io/R6u6

  68. .onpointerdown = function(e) { // faça algo }; .onpointermove =

    function(e) { // faça algo }; pointer events zno.io/R6X6

  69. // Vibra uma vez por um segundo navigator.vibrate(1000); vibration zno.io/R6eP

  70. mobilehtml5.org

  71. nativo vs web ? ? ? ? ? ? ?

    ? ? ? ? ? ? ? ? ? ? ? ? ?

  72. A melhor forma de prever o futuro é inventando ele

  73. None