pushing html5 beyond boundaries
TRANSCRIPT
Date
Pushing HTML5 beyond boundaries
Sergio Castillo Yrizales
✤ Javascript lover
✤ 8 años
✤ Programar
✤ Comer
✤ @scyrizales
Agenda
✤ HTML5
✤ APIs que no conocías
✤ Demo: Theremin
HTML5
✤ Nos trae a la era de la Web Semantica
✤ Nuevas etiquetas y APIs para contenidos multimedias
✤ Nuevas APIs para interactuar con móviles.
Date
APIs que no conocías (Surprise)Bueno tal vez sí :)
Page Visibility API
✤ Evitar llamadas al servidor
✤ Evitar consumo de Ram
✤ Demo:
✤ http://codepen.io/SitePoint/full/hcKxd/
Fullscreen API
✤ Mostremos las cosas en toda la pantalla
✤ No solo videos, DIVs e imágenes también califican
✤ Demo:
✤ http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html
Vibrate API
✤ Haz que las cosas vibren (dispositivos móviles)
✤ Puedes controlar el tiempo y la cantidad de veces
✤ DEMO:
✤ https://goo.gl/TWpCTl
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
getUserMedia API
✤ Te permite accesar a la cámara y micrófono del dispositivo
✤ Chats, juegos en linea
✤ Demo:
✤ https://www.audero.it/demo/getusermedia-api-demo.html
Date
Demo: ThereminLet’s do this
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/theremin.js
“Uno de mis días más productivos fue aquél en el que borré 1000 líneas de código.”
–Ken Thompson
MUCHAS GRACIAS :)
ALGUNA PREGUNTA?
–SERGIO CASTILLO
@scyrizales
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/