Pushing html5 beyond boundaries

20
Date Pushing HTML5 beyond boundaries

Transcript of Pushing html5 beyond boundaries

Page 1: Pushing html5 beyond boundaries

Date

Pushing HTML5 beyond boundaries

Page 2: Pushing html5 beyond boundaries

Sergio Castillo Yrizales

✤ Javascript lover

✤ 8 años

✤ Programar

✤ Comer

✤ @scyrizales

Page 3: Pushing html5 beyond boundaries

Agenda

✤ HTML5

✤ APIs que no conocías

✤ Demo: Theremin

Page 4: Pushing html5 beyond boundaries

HTML5

✤ Nos trae a la era de la Web Semantica

✤ Nuevas etiquetas y APIs para contenidos multimedias

✤ Nuevas APIs para interactuar con móviles.

Page 5: Pushing html5 beyond boundaries

Date

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

Page 6: Pushing html5 beyond boundaries
Page 7: Pushing html5 beyond boundaries

Page Visibility API

✤ Evitar llamadas al servidor

✤ Evitar consumo de Ram

✤ Demo:

✤ http://codepen.io/SitePoint/full/hcKxd/

Page 8: Pushing html5 beyond boundaries
Page 9: Pushing html5 beyond boundaries

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

Page 10: Pushing html5 beyond boundaries
Page 11: Pushing html5 beyond boundaries

Vibrate API

✤ Haz que las cosas vibren (dispositivos móviles)

✤ Puedes controlar el tiempo y la cantidad de veces

✤ DEMO:

✤ https://goo.gl/TWpCTl

Page 12: Pushing html5 beyond boundaries
Page 13: Pushing html5 beyond boundaries

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

Page 14: Pushing html5 beyond boundaries
Page 15: Pushing html5 beyond boundaries

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

Page 16: Pushing html5 beyond boundaries

Date

Demo: ThereminLet’s do this

Page 17: Pushing html5 beyond boundaries

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

Page 18: Pushing html5 beyond boundaries

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

–Ken Thompson

Page 19: Pushing html5 beyond boundaries

MUCHAS GRACIAS :)

ALGUNA PREGUNTA?

–SERGIO CASTILLO

@scyrizales

Page 20: Pushing html5 beyond boundaries

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/