Pushing html5 beyond boundaries

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/