Nuevas apis HTML5. Recordarte que no todo son mantenimientos

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/