O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

La Web Salta al Mundo Físico - Web meets Physical World (spanish)

269 visualizações

Publicada em

Slides of my talk at DevFest 2016 in Cochabamba, Bolivia (en español - in spanish) about Web APIs for hardware access, the Physical Web, WebVR and other technologies.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

La Web Salta al Mundo Físico - Web meets Physical World (spanish)

  1. 1. Maximiliano Firtman @firt la Web salta al Mundo Físico
  2. 2. mobile+web desarrollador & profesor
  3. 3. cursos dictados
  4. 4. Libros que escribí
  5. 5. Traducciones
  6. 6. preguntas si! por favor! al final
  7. 7. Empecemos!
  8. 8. 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
  9. 9. 1- Mobile y IoT
  10. 10. La web viene a salvarnos
  11. 11. 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
  12. 12. 2- La Web Física
  13. 13. La Web Física (Physical Web) es una especificación abierta para permitir interacciones rápidas a objetos físicos y ubicaciones.
  14. 14. 1- Especificación abierta 2- Beacons BLE 3- También mDNS sobre WiFi Objetivo: broadcast URLs
  15. 15. image from physical web website Protocolo: Eddystone
  16. 16. 1- Comprar beacons 2- Instalar “Beacon Toy” en Android Empezar a hacer broadcast URLs!
  17. 17. Chrome en Android (49+) Chrome en iOS Google Play Services Soporte actual
  18. 18. 2- La Web Física - Broadcast URL en lugares físicos - Estandar abierto - Cualquier cosa puede enviar una URL
  19. 19. 3- Progressive Web Apps
  20. 20. Para saber más del tema…. Hoy! Después del horario de almuerzo
  21. 21. Hay que esperar a luego del almuerzo!
  22. 22. Una Progressive Web App es un modelo para crear experiencias tipo app usando las últimas tecnologías web progresivamente
  23. 23. 4- Web APIs
  24. 24. Device Sensors Web Audio Web Bluetooth web apis
  25. 25. DEVICE SENSORS 1- Útiles en dispositivos mobile 2- Usa hardware y sensores 3- Diferentes Niveles a- APIs Maduras b- APIs Experimentales c- APIs Futuras
  26. 26. a- APIs Maduras Geolocation (GPS & WiFi) Accelerometer y Magnetometer Brújula Camera (imagen estática)
  27. 27. b- APIs Experimentales Get User Media Ambient Light Speech Recognition and Synthesis WebMIDI
  28. 28. Get User Media Obtener el video stream video desde la cámara Reconocer objetos, caras, QR codes Realidad Auemntada
  29. 29. <code> 
 navigator.getUserMedia( {video:true,audio:true}, function(stream){ var videoSource = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } ); JAVASCRIPT
  30. 30. <code> 
 navigator.getUserMedia( {video:true,audio:true}, function(stream){ var source = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } ); JAVASCRIPT
  31. 31. Get User Media
  32. 32. Live demo
  33. 33. Web Midi Conectarse a dispositivos musicales: 
 sintetizadores, teclados, guitarras, máquinas de sonidos, sistemas de iluminación Enviar y recibir mensajes MIDI
  34. 34. <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
  35. 35. <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
  36. 36. <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
  37. 37. <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
  38. 38. Web Midi
  39. 39. Ambient Light Obtiene información acerca de actuales condiciones de luz Se mide en lux
  40. 40. <code> 
 window.addEventListener('devicelight', function(event) { var lux = event.value; }); JAVASCRIPT
  41. 41. <code> 
 window.addEventListener('devicelight', function(event) { var lux = event.value; }); JAVASCRIPT
  42. 42. Live demo
  43. 43. Ambient Light FLAG FUTURE
  44. 44. Speech Synthesis y Recognition Nos permite interactuar con el usuario con la voz
 Synthesis: permite que la Web hable Recognition: permite que la Web escuche
  45. 45. <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
  46. 46. <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
  47. 47. <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
  48. 48. <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
  49. 49. <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
  50. 50. <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
  51. 51. <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
  52. 52. <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
  53. 53. Live demo
  54. 54. Speech Synthesis FLAG FUTURE
  55. 55. Speech Recognition
  56. 56. c- APIs Futuras Geofencing WebUSB WebNFC TV Streaming
  57. 57. Geofencing Podemos hacer que una web o una PWA se active cuando un usuario entra o sale una zona geográfica
  58. 58. WebUSB Nos permite conectarnos a cualquier dispositivo USB
  59. 59. WebNFC Near Field Communication Acceso a Tap to Pay, Tap to Share, etc.
  60. 60. WEB AUDIO 1- Generar audio dinámico 2- Escuchar audio bajo nivel 3- Se puede usar para comunicación por ultrasonido entre dispositivos!
  61. 61. <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
  62. 62. <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
  63. 63. <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
  64. 64. <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
  65. 65. <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
  66. 66. Live demo
  67. 67. WEB AUDIO
  68. 68. WEB BLUETOOTH 1- Escanear dispositivos 2- Escanear servicios 3- Conectarse a servicios 4- Enviar y recibir datos
  69. 69. WEB BLUETOOTH Excelente para IoT Se puede mezclar con Physical Web Mejor con Bluetooth 5.0
  70. 70. <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
  71. 71. <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
  72. 72. <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
  73. 73. <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
  74. 74. <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
  75. 75. <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
  76. 76. <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
  77. 77. <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
  78. 78. <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
  79. 79. <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
  80. 80. Heart Rate Sensor Demo
  81. 81. BB8 Controller
  82. 82. Drone controller
  83. 83. WEB BLUETOOTH BETA
  84. 84. 4- Web APIs - Device Sensor APIs: 
 maduras, experimentales, futuras - Web Audio - Web Bluetooth - TV Streaming
  85. 85. 5- Los Mundos VR|MR 
 y la Web
  86. 86. Realidad Virtual (VR) Realidad Mixta (MR) nuevos mundos
  87. 87. VR y la Web Samsung Internet Browser for Gear VR Google Chrome Oculus “Carmel” Browser Third party browsers
  88. 88. Live demo
  89. 89. WebVR Acceso a dispositivos VR (Oculus, Cardboard, DayDream, Vive) Soporte experimental Disponible como polypill
  90. 90. WebVR BETA DEV FLAGFUTURE
  91. 91. WebVR DEVPOLYFILL POLYFILL FUTURE
  92. 92. MR y la Web Mixed Reality con Windows Holographic Hololens
  93. 93. Live demo
  94. 94. MR y la Web Estamos en etapas muy tempranas Necesitamos que le contenido salga de la pantalla WebVR llegará a Edge
  95. 95. - Estamos en etapas tempranas - Necesitamos nuevas APIs y conceptos - VR y MR mezclados con Web Bluetooth 5- VR|MR y la Web
  96. 96. 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
  97. 97. Foto de freefoto.com firtman@gmail.com @firt firt.mobi/hpmwfirt.mobi/mh5

×