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
600
7 Habits of Highly Productive Developers
Avatar for Zeno Rocha zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
Avatar for Zeno Rocha zenorocha
1
500
What's new in the Liferay Community
Avatar for Zeno Rocha zenorocha
0
680
Launching Liferay Projects Faster with WeDeploy
Avatar for Zeno Rocha zenorocha
1
560
How Liferay fits into the real of latest technologies
Avatar for Zeno Rocha zenorocha
0
600
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
970
Como investir em... você!
Avatar for Zeno Rocha zenorocha
1
560

Other Decks in Programming

See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
360
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
420
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
130
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
120
GraphRAGの仕組みまるわかり
Avatar for とすり tosuri13
8
530
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
690
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
100
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
12
2.4k
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
290
Team operations that are not burdened by SRE
Avatar for zosokh kazatohiei
1
300
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
520
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
730

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Docker and Python
Avatar for Tania Allard trallard
44
3.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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