El documento presenta varias APIs nuevas de HTML5 que permiten interactuar con dispositivos móviles y mejorar la experiencia del usuario. Se discuten las APIs de Visibilidad de Página, Pantalla Completa, Vibración, Estado de Batería y getUserMedia, y se proporcionan demos para cada una. La presentación concluye con una demostración de un theremin construido usando el AudioContext API de HTML5.

1. Date
Pushing HTML5 beyond boundaries

2. Sergio Castillo
Yrizales
✤ Javascript lover
✤ 8 años
✤ Programar
✤ Comer
✤ @scyrizales
2

3. Agenda
✤ HTML5
✤ APIs que no conocías
✤ Demo: Theremin
3

4. HTML5
✤ Nos trae a la era de la Web
Semantica
✤ Nuevas etiquetas y APIs para
contenidos multimedias
✤ Nuevas APIs para interactuar
con móviles.
4

5. Date
APIs que no conocías (Surprise)
Bueno tal vez sí :)
5

6. 6

7. Page Visibility
API
✤ Evitar llamadas al servidor
✤ Evitar consumo de Ram
✤ Demo:
✤ http://codepen.io/SitePoint/ful
l/hcKxd/
7

8. 8

9. Fullscreen API
✤ Mostremos las cosas en toda
la pantalla
✤ No solo videos, DIVs e
imágenes también califican
✤ Demo:
✤ http://blogs.sitepointstatic.co
m/examples/tech/full-
screen/index2.html
9

10. 10

11. Vibrate API
✤ Haz que las cosas vibren
(dispositivos móviles)
✤ Puedes controlar el tiempo y la
cantidad de veces
✤ DEMO:
✤ https://goo.gl/TWpCTl
11

12. 12

13. Battery Status
API
✤ Podemos revisar la batería de
los dispositivos
✤ Así evitamos hacer cosas
innecesarias cuando se le va a
acabar la batería al cliente
✤ Demo:
✤ https://goo.gl/3ZkhDx
13

14. 14

15. getUserMedia
API
✤ Te permite accesar a la
cámara y micrófono del
dispositivo
✤ Chats, juegos en linea
✤ Demo:
✤ https://www.audero.it/demo/g
etusermedia-api-demo.html
15

16. Date
Demo: Theremin
Let’s do this
16

17. Theremin
✤ Vamos a usar el AudioContext Api para accesar a los
parlantes y a la vez producir un sonido
✤ Frecuencia
✤ Volumen
✤ Voila
✤ https://github.com/scyrizales/theremin/blob/master/theremi
n.js
17

18. “Uno de mis días más productivos fue aquél en el que borré
1000 líneas de código.”
–Ken Thompson

19. MUCHAS GRACIAS :)
ALGUNA PREGUNTA?
–SERGIO CASTILLO
@scyrizales

20. Bibliografia
✤ Making a theremin
✤ https://www.smashingmagazine.com/2016/06/make-music-in-the-browser-with-a-web-
audio-theremin/
✤ Physical Beacons
✤ https://medium.com/@urish/exploring-the-physical-web-without-buying-beacons-
efae51e36c2e#.h4216kxbe
✤ APIs worth knowing
✤ https://www.sitepoint.com/10-html5-apis-worth-looking/