Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Universidad Manuela Beltrán - UMB Virtual (Col) 
“WebRTC - Una nueva tecnología web al servicio de 
la educación. Caso en ...
Agenda 
● UMB Virtual. 
● VirtualNet 2.0 
● Contextualización tecnológica. 
● Acerca de WebRTC 
○ ¿Qué es? 
○ ¿Cómo funcio...
UMB Virtual
Navegadores 
http://www.navegadoresdeinternet.net/
Complementos (Plugins) 
http://clubajax.org/the-history-of-ria-technologies/
HTML5 + CSS3 + Javascript 
http://www.w3.org/html/logo/
Nuevas Apis - Javascript 
WebAudio 
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html 
Media Capture &...
WebRTC 
http://www.webrtc.org/
Http/Ajax 
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
WebSockets Vs WebRTC
WebRTC 
Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World 
Wide Web Consortium (W3C) y el Int...
WebRTC 
1. Adquirir medios. 
2. Comunicación Audio y 
Vídeo 
3. Envío y recepción de 
datos arbitrarios en 
conexiones pun...
WebRTC: Apis Javascript 
1. getUserMedia 
2. RTCPeerConnection 
3. DataChannel 
Libro WebRTC: APIs and RTCWEB Protocols of...
getUserMedia 
http://io13webrtc.appspot.com/#17
Detección de Movimiento. 
http://www.soundstep.com/blog/experiments/jsdetection/ 
https://github.com/ReallyGood/js-motion-...
RTCPeerConnection - Pasos 
comunicación 
Señalización: Mecanismo 
por el cual los pares se 
envían mensajes de 
control en...
RTCPeerConnection - Signaling 
https://code.google.com/p/sipml5/ 
http://www.jssip.net/ 
https://www.gowebrtc.me/ 
+ 
stro...
RTCPeerConnection - Signaling 
webRTC.io https://github.com/webRTC/webRTC.io 
http://simplewebrtc.com/ + signalmaster 
htt...
Comunicación 
“El vídeo permite enriquecer la comunicación con elementos familiares como la 
expresión facial, el contacto...
Comunicación - Plugins/servicios 
http://www.red5.org
Chat Social 
http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
Chat Social 
http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
Chat Social 
http://nodejs.org/ 
http://socket.io/ 
+ 
webRTC.io 
https://github.com/webRTC/webRTC.io 
http://www.webrtc.o...
DEMO 
Chat Social
Trabajo Colaborativo
Trabajo Colaborativo 
+
Trabajo Colaborativo 
https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy
EtherPad Lite 
http://etherpad.org/ 
http://nodejs.org/ 
Etherpad plugin manager 
ep_rtc 
https://github.com/JohnMcLear/ep...
Trabajo Colaborativo 
http://etherpad.org/ 
http://nodejs.org/ 
http://www.mongodb.org/ 
http://socket.io/ 
http://www.web...
Trabajo Colaborativo 
http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
DEMO 
Trabajo Colaborativo
WebRTC - Soporte 
Adapter.js 
http://caniuse.com/#search=webrtc
Plataformas 
https://vline.com/developer/ 
http://www.snapchat.com/ 
http://bloggeek.me/snapchat-acquires-addlive/
Plataformas 
http://tokbox.com/ 
https://www.tuenti.com 
http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-...
Plataformas 
http://bloggeek.me/whatsapp-voice-calling-webrtc/
Google Hangouts HD + WebRTC 
http://gigaom.com/2013/08/28/hangouts-hd-vp8-webrtc/ 
http://sporadicdispatches.blogspot.com/...
Conclusiones 
● Se ha evidenciado que gracias al cambio de de tecnología de 
técnicas como long polling a un entorno de We...
Fuentes 
http://webrtchacks.com/ 
http://www.html5rocks.com/en/tutorials/webrtc/basics/ 
https://www.webrtc-experiment.com...
Gracias por la atención 
Jorge Rubiano 
@ostjh
WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0
Upcoming SlideShare
Loading in …5
×

WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0

568 views

Published on

Ponencia realizada en el marco del congreso TICAL 2014 Cancún México.

http://tical2014.redclara.net/en/index.html

Published in: Education
  • Be the first to comment

WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0

  1. 1. Universidad Manuela Beltrán - UMB Virtual (Col) “WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0” TICAL 2014 Jorge Rubiano. Andrés Mena. Juan Hernández
  2. 2. Agenda ● UMB Virtual. ● VirtualNet 2.0 ● Contextualización tecnológica. ● Acerca de WebRTC ○ ¿Qué es? ○ ¿Cómo funciona? ○ Apis Javascript - WebRTC ○ Ejemplos de Uso. ● Chat Social ○ Tecnologías ■ WebSockets. ■ NOSql ● Trabajo Colaborativo ● Soporte WebRTC ● Conclusiones.
  3. 3. UMB Virtual
  4. 4. Navegadores http://www.navegadoresdeinternet.net/
  5. 5. Complementos (Plugins) http://clubajax.org/the-history-of-ria-technologies/
  6. 6. HTML5 + CSS3 + Javascript http://www.w3.org/html/logo/
  7. 7. Nuevas Apis - Javascript WebAudio https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html Media Capture & Streams http://www.w3.org/TR/2012/WD-mediacapture-streams-20120628/ http://www.freshtilledsoil.com/the-future-of-web/ Web Workers http://www.w3.org/TR/workers/ Device http://arewemobileyet.com/
  8. 8. WebRTC http://www.webrtc.org/
  9. 9. Http/Ajax http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
  10. 10. WebSockets Vs WebRTC
  11. 11. WebRTC Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World Wide Web Consortium (W3C) y el Internet Engineering Task Force (IETF) por proporcionar comunicación en tiempo real punto a punto, a través del navegador. WebRTC RTCWeb Estandariza las tecnología desde la perspectiva de los navegadores y tecnologías web y definición de APIs para la utilización de WebRTC Estandarización de protocolos y herramientas a nivel de transporte (SRTP, STUN/ICE/TURN) y codecs
  12. 12. WebRTC 1. Adquirir medios. 2. Comunicación Audio y Vídeo 3. Envío y recepción de datos arbitrarios en conexiones punto a punto.
  13. 13. WebRTC: Apis Javascript 1. getUserMedia 2. RTCPeerConnection 3. DataChannel Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  14. 14. getUserMedia http://io13webrtc.appspot.com/#17
  15. 15. Detección de Movimiento. http://www.soundstep.com/blog/experiments/jsdetection/ https://github.com/ReallyGood/js-motion-detection
  16. 16. RTCPeerConnection - Pasos comunicación Señalización: Mecanismo por el cual los pares se envían mensajes de control entre sí con el propósito de establecer el protocolo, canal, y método de comunicación Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  17. 17. RTCPeerConnection - Signaling https://code.google.com/p/sipml5/ http://www.jssip.net/ https://www.gowebrtc.me/ + strophe.jingle https://github.com/ESTOS/strophe.jingle/
  18. 18. RTCPeerConnection - Signaling webRTC.io https://github.com/webRTC/webRTC.io http://simplewebrtc.com/ + signalmaster https://github.com/andyet/signalmaster http://www.easyrtc.com/
  19. 19. Comunicación “El vídeo permite enriquecer la comunicación con elementos familiares como la expresión facial, el contacto ocular y el metalenguaje o lenguaje corporal” Castañeda, 2007 http://ocw.um.es/gat/contenidos/mpazherramientas/documentos/videoymsn.pdf
  20. 20. Comunicación - Plugins/servicios http://www.red5.org
  21. 21. Chat Social http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
  22. 22. Chat Social http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
  23. 23. Chat Social http://nodejs.org/ http://socket.io/ + webRTC.io https://github.com/webRTC/webRTC.io http://www.webrtc.org/ + http://www.mongodb.org/ mongodb https://npmjs.org/package/mongodb +
  24. 24. DEMO Chat Social
  25. 25. Trabajo Colaborativo
  26. 26. Trabajo Colaborativo +
  27. 27. Trabajo Colaborativo https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy
  28. 28. EtherPad Lite http://etherpad.org/ http://nodejs.org/ Etherpad plugin manager ep_rtc https://github.com/JohnMcLear/ep_rtc
  29. 29. Trabajo Colaborativo http://etherpad.org/ http://nodejs.org/ http://www.mongodb.org/ http://socket.io/ http://www.webrtc.org/ http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
  30. 30. Trabajo Colaborativo http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
  31. 31. DEMO Trabajo Colaborativo
  32. 32. WebRTC - Soporte Adapter.js http://caniuse.com/#search=webrtc
  33. 33. Plataformas https://vline.com/developer/ http://www.snapchat.com/ http://bloggeek.me/snapchat-acquires-addlive/
  34. 34. Plataformas http://tokbox.com/ https://www.tuenti.com http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-and-zero-rated-mobile.html
  35. 35. Plataformas http://bloggeek.me/whatsapp-voice-calling-webrtc/
  36. 36. Google Hangouts HD + WebRTC http://gigaom.com/2013/08/28/hangouts-hd-vp8-webrtc/ http://sporadicdispatches.blogspot.com/2013/05/google-hangouts-testing-webrtc-based.html
  37. 37. Conclusiones ● Se ha evidenciado que gracias al cambio de de tecnología de técnicas como long polling a un entorno de WebSockets, libera de peticiones innecesarias al sistema. ● En la experiencia docente encontramos que el Chat de la plataforma VirtualNet 2.0. Potencia una de las capacidades humanas de mayor relevancia adaptativa: la resiliencia, entendida como la capacidad mental de respuesta del ser humano a situaciones adversas. De forma tal que la construcción del conocimiento de forma autónoma, así como en sí misma la autonomía puede desarrollarse enormemente a través de la virtualidad, habilitada por la tecnología digital y las redes sociales, que se establecen en el chat (Castañeda, 2010).
  38. 38. Fuentes http://webrtchacks.com/ http://www.html5rocks.com/en/tutorials/webrtc/basics/ https://www.webrtc-experiment.com/ http://io13webrtc.appspot.com/#1 https://hacks.mozilla.org/category/webrtc/ http://groups.google.com/group/discuss-webrtc/topics Google I/O 2012: http://www.youtube.com/watch?v=E8C8ouiXHHk Google I/O 2013: http://www.youtube.com/watch?v=p2HzZkd2A40 Libro: http://www.webrtcbook.com/ Debug: chrome://webrtc-internals
  39. 39. Gracias por la atención Jorge Rubiano @ostjh

×