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

HTML5 APIs para Mobile

Avatar for Zeno Rocha Zeno Rocha
August 30, 2013
Programming
26
1.9k

HTML5 APIs para Mobile

QConSP

Avatar for Zeno Rocha

Zeno Rocha

August 30, 2013
Tweet

More Decks by Zeno Rocha

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

Other Decks in Programming

See All in Programming
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
Avatar for yuhi yuhisatoxxx
3
920
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
Avatar for MinoDriven minodriven
23
12k
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
220
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
Avatar for m_t_tion1 kaorumuta
2
490
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
190
Le côté obscur des IA génératives
Avatar for Pascal Le Merrer pascallemerrer
0
120
CSC305 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
1.9k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
Avatar for Keisuke Kobayashi kobakei
0
490
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
Avatar for Atsuya Sato natmark
0
600
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
1
170
Model Pollution
Avatar for Henning Schwentner hschwentner
1
180

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Done Done
Avatar for chrislema chrislema
185
16k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
610
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k

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