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
2k
26

HTML5 APIs para Mobile

QConSP

Avatar for Zeno Rocha

Zeno Rocha

August 30, 2013

More Decks by Zeno Rocha

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

Other Decks in Programming

See All in Programming
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
130
才能？センス？知らん、 続けたもん勝ちだ。-- 結婚・出産・癌を越えてなお、私がプロダクトを創り続ける理由
Avatar for 16bit_idol 16bitidol
2
870
使用 Meilisearch 建立新聞搜尋工具
Avatar for johnroyer johnroyer
0
150
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
680
PHP初心者セッション2026　〜生成AIでは見えない裏側を知る：今だからLAMPを通して仕組みを学ぶ〜
Avatar for Hideo Kashioka kashioka
0
510
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
170
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
Avatar for nrs nrslib
1
260
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
180
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
2.8k
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
2
550
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
360

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
320
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
660
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
240
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
260
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
350

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