Maximiliano Firtman @firt

la Web salta al Mundo Físico

mobile+web desarrollador & profesor

cursos dictados

Libros que escribí

Traducciones

preguntas

si! por favor!

al final

Empecemos!

Agenda

1- Mobile y IoT 2- La Web Física 3- Progressive Web Apps 4- Conexión vía Web APIs 5- Mundos VR|MR y la Web

1- Mobile y IoT

La web viene a salvarnos

1- Mobile y IoT

- Cada gadget, sensor, dispositivo va a tener soporte de uso desde dispositivos - No queremos instalar apps todo el tiempo - No queremos hacer todo público

2- La Web Física

La Web Física (Physical Web) es una especificación abierta para permitir interacciones rápidas a objetos físicos y ubicaciones.

1- Especificación abierta 2- Beacons BLE 3- También mDNS sobre WiFi

Objetivo: broadcast URLs

image from physical web website

Protocolo: Eddystone

1- Comprar beacons 2- Instalar “Beacon Toy” en Android

Empezar a hacer broadcast URLs!

Chrome en Android (49+) Chrome en iOS

Google Play Services

Soporte actual

2- La Web Física

- Broadcast URL en lugares físicos - Estandar abierto - Cualquier cosa puede enviar una URL

3- Progressive Web Apps

Para saber más del tema….

Hoy! Después del horario de almuerzo

Hay que esperar a luego del almuerzo!

Una Progressive Web App es un modelo para crear experiencias tipo app usando las últimas tecnologías web progresivamente

4- Web APIs

Device Sensors Web Audio Web Bluetooth

web apis

DEVICE SENSORS

1- Útiles en dispositivos mobile 2- Usa hardware y sensores 3- Diferentes Niveles

a- APIs Maduras b- APIs Experimentales c- APIs Futuras

a- APIs Maduras

Geolocation (GPS & WiFi) Accelerometer y Magnetometer Brújula Camera (imagen estática)

b- APIs Experimentales

Get User Media Ambient Light Speech Recognition and Synthesis WebMIDI

Get User MediaObtener el video stream video desde la cámara Reconocer objetos, caras, QR codes Realidad Auemntada

<code>

navigator.getUserMedia( {video:true,audio:true}, function(stream){ var videoSource = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } );

JAVASCRIPT

<code>

navigator.getUserMedia( {video:true,audio:true}, function(stream){ var source = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } );

JAVASCRIPT

Get User Media

Live demo

Web Midi

Conectarse a dispositivos musicales: sintetizadores, teclados, guitarras, máquinas de sonidos, sistemas de iluminación

Enviar y recibir mensajes MIDI

<code>

navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } }

JAVASCRIPT

<code>

navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } }

JAVASCRIPT

<code>

navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } }

JAVASCRIPT

<code>

navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } }

JAVASCRIPT

Web Midi

Ambient LightObtiene información acerca de actuales condiciones de luz

Se mide en lux

<code>

window.addEventListener('devicelight', function(event) { var lux = event.value; });

JAVASCRIPT

<code>

window.addEventListener('devicelight', function(event) { var lux = event.value; });

JAVASCRIPT

Live demo

Ambient Light

FLAG FUTURE

Speech Synthesis y RecognitionNos permite interactuar con el usuario con la voz

Synthesis: permite que la Web hable Recognition: permite que la Web escuche

<code>var u = new SpeechSynthesisUtterance(); u.rate = 1; u.volume = 1; u.pitch = 1; u.text = “Hello World”; u.lang = “en-GB”;

speechSynthesis.speak(u);

JAVASCRIPT

<code>var u = new SpeechSynthesisUtterance(); u.rate = 1; u.volume = 1; u.pitch = 1; u.text = “Hello World”; u.lang = “en-GB”;

speechSynthesis.speak(u);

JAVASCRIPT

<code>var u = new SpeechSynthesisUtterance(); u.rate = 1; u.volume = 1; u.pitch = 1; u.text = “Hello World”; u.lang = “en-GB”;

speechSynthesis.speak(u);

JAVASCRIPT

<code>recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } };

JAVASCRIPT

<code>recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } };

JAVASCRIPT

<code>recognition = new SpeechRecognition() recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } };

JAVASCRIPT

<code>recognition = new SpeechRecognition() recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } };

JAVASCRIPT

<code>recognition = new SpeechRecognition() recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } };

JAVASCRIPT

Live demo

Speech Synthesis

FLAG FUTURE

Speech Recognition

c- APIs Futuras

Geofencing WebUSB WebNFC TV Streaming

Geofencing

Podemos hacer que una web o una PWA se active cuando un usuario entra o sale una zona geográfica

WebUSB

Nos permite conectarnos a cualquier dispositivo USB

WebNFC

Near Field Communication Acceso a Tap to Pay, Tap to Share, etc.

WEB AUDIO

1- Generar audio dinámico 2- Escuchar audio bajo nivel 3- Se puede usar para comunicación por ultrasonido entre dispositivos!

<code>

// Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415');

// Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start()

JAVASCRIPT

Using Sonicnet.js library

<code>

// Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415');

// Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start()

JAVASCRIPT

Using Sonicnet.js library

<code>

// Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415');

// Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start()

JAVASCRIPT

Using Sonicnet.js library

<code>

// Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415');

// Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start()

JAVASCRIPT

Using Sonicnet.js library

<code>

// Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415');

// Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start()

JAVASCRIPT

Using Sonicnet.js library

Live demo

WEB AUDIO

WEB BLUETOOTH

1- Escanear dispositivos 2- Escanear servicios 3- Conectarse a servicios 4- Enviar y recibir datos

WEB BLUETOOTH

Excelente para IoT Se puede mezclar con Physical Web Mejor con Bluetooth 5.0

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });;

JAVASCRIPT

<code>navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }) .then(device => { device.gatt.connect() }) .then(server => server.getPrimaryService(“heart_rate”); }) .then(service => service.getCharacteristic( “heart_rate_control_measurement”);}) .then(ch => return ch.startNotifications().then(() => { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });

JAVASCRIPT

Heart Rate Sensor Demo

BB8 Controller

Drone controller

WEB BLUETOOTH

BETA

4- Web APIs

- Device Sensor APIs: maduras, experimentales, futuras - Web Audio - Web Bluetooth - TV Streaming

5- Los Mundos VR|MR y la Web

Realidad Virtual (VR) Realidad Mixta (MR)

nuevos mundos

VR y la Web

Samsung Internet Browser for Gear VR Google Chrome Oculus “Carmel” Browser Third party browsers

Live demo

WebVR

Acceso a dispositivos VR (Oculus, Cardboard, DayDream, Vive)

Soporte experimental Disponible como polypill

WebVR

BETA DEV FLAGFUTURE

WebVR

DEVPOLYFILL POLYFILL FUTURE

MR y la Web

Mixed Reality con Windows Holographic Hololens

Live demo

MR y la Web

Estamos en etapas muy tempranas Necesitamos que le contenido salga de la pantalla WebVR llegará a Edge

- Estamos en etapas tempranas - Necesitamos nuevas APIs y conceptos - VR y MR mezclados con Web Bluetooth

5- VR|MR y la Web

la web salta al mundo físico

1- Mobile y IoT 2- La Web Física 3- Progressive Web Apps 4- Conexión con Web APIs 5- VR|MR y la Web

Foto de freefoto.com

firtman@gmail.com@firt

firt.mobi/hpmw firt.mobi/mh5