Universidad Manuela Beltrán 
UMB Virtual 
Tecnologías Web al servicio del desarrollo 
Móvil (WebSockets, WebRTC) 
Jorge Ru...
Agenda 
1. Tipos de aplicaciones 
Móviles. 
2. Navegadores. 
3. Complementos/Plugins. 
4. WebSockets. 
5. WebRTC. 
6. Demo...
Tipos de aplicaciones Móviles 
https://developer.salesforce.com/page/Mobile_SDK
Web App 
Ventajas 
● Se puede visualizar en cualquier 
dispositivo móvil, ya sea Android, iOS, 
Blackberry o Windows Phone...
Web App 
Desventajas 
● Siempre será necesario contar 
con una conexión a internet 
● Algunas funciones específicas 
del d...
APP Nativas 
http://mobile-app-options.appspot.com/img/diagram_native.png
APP Nativas 
Ventajas 
● Acceso completo a todas las 
funcionalidades del dispositivo. 
● Mejor experiencia del usuario. 
...
Web App Nativas/APP Híbridas 
http://mobile-app-options.appspot.com/img/diagram_hybrid.png
Web App Nativas/APP Híbridas 
Ventajas. 
● Están programadas con tecnologías web 
(HTML5/CSS3/Javascript) 
● Corren localm...
Navegadores 
http://www.navegadoresdeinternet.net/
Complementos (Plugins) 
http://clubajax.org/the-history-of-ria-technologies/
Complementos (Plugins)
HTML5 + CSS3 + Javascript 
http://www.w3.org/html/logo/ 
http://lignux.com/w3c-recomienda-el-uso-de-html5/
Http/Ajax 
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
WebSockets 
https://www.websocket.org/
Flash Sockets - Java Sockets 
http://www.neuroproductions.be/experiments/pushing-data-to-flash-using-binary-sockets/
Long Polling
Compatibilidad 
http://caniuse.com/#feat=websockets
Compatibilidad 
http://nodejs.org/ 
http://socket.io/ https://github.com/primus/primus 
https://www.npmjs.org/search?q=web...
Usos WebSockets 
● Juegos online multijugadores 
● Aplicaciones de chat 
● Actualización de información 
deportiva/financi...
WebRTC 
http://www.webrtc.org/
WebRTC 
Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World 
Wide Web Consortium (W3C) y el Int...
WebSockets/WebRTC
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...
Detección de Movimiento. 
http://www.soundstep.com/blog/experiments/jsdetection/ 
https://github.com/ReallyGood/js-motion-...
Juegos 
https://www.cubeslam.com/
Trabajo Colaborativo 
Togetherjs 
https://togetherjs.com/ 
http://codassium.com
DataChannel 
https://www.sharefest.me/
WebRTC - Soporte 
Adapter.js 
http://caniuse.com/#search=webrtc
DEMO 
Chat Móvil: Mensajería Instantánea - 
Videollamadas) 
http://virtualnet2-0.blogspot.com/2014/07/video-llamadas-versi...
Chat Móvil 
http://nodejs.org/ 
http://socket.io/ 
+ 
webRTC.io 
https://github.com/webRTC/webRTC.io 
http://www.webrtc.or...
Plataformas 
http://tokbox.com/ 
https://www.tuenti.com 
http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-...
Plataformas 
https://vline.com/developer/ 
http://www.snapchat.com/ 
http://bloggeek.me/snapchat-acquires-addlive/
Google Hangouts HD + WebRTC 
https://gigaom.com/2014/07/06/so-long-plug-ins-google-hangouts-works-with-webrtc/
Preguntas
Gracias por la atención 
Jorge Rubiano 
@ostjh
Próxima SlideShare
Cargando en…5
×

Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)

572 visualizaciones

Publicado el

Presentación realizada en el marco del El Foro Proyecta Innovación y desarrollo tecnológico (IDT) llevado a cabo los días 04 y 05 de Noviembre de 2014.

El tema se centro en el uso de nuevas tecnologías web como WebSockets y WebRTC para el desarrollo de aplicaciones Móviles (WebApps e Híbridas)

Publicado en: Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
572
En SlideShare
0
De insertados
0
Número de insertados
37
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)

  1. 1. Universidad Manuela Beltrán UMB Virtual Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC) Jorge Rubiano Twitter: @ostjh https://github.com/Jorger/
  2. 2. Agenda 1. Tipos de aplicaciones Móviles. 2. Navegadores. 3. Complementos/Plugins. 4. WebSockets. 5. WebRTC. 6. Demostración. 7. Casos de Uso. 8. Preguntas.
  3. 3. Tipos de aplicaciones Móviles https://developer.salesforce.com/page/Mobile_SDK
  4. 4. Web App Ventajas ● Se puede visualizar en cualquier dispositivo móvil, ya sea Android, iOS, Blackberry o Windows Phone. ● Al no ser una aplicación descargable desde las tiendas, no es necesario pasar ningún proceso de validación ● No es necesario que el usuario realice algún proceso de actualización , pues al ser una página web, siempre se accede a la versión más reciente. http://cdn.sixrevisions.com/0274-02_facebook_native_mobile_web_app.jpg
  5. 5. Web App Desventajas ● Siempre será necesario contar con una conexión a internet ● Algunas funciones específicas del dispositivo no estarán disponibles. ● Funcionamiento sin conexión limitada (Service Worker¹) 1. https://github.com/slightlyoff/ServiceWorker
  6. 6. APP Nativas http://mobile-app-options.appspot.com/img/diagram_native.png
  7. 7. APP Nativas Ventajas ● Acceso completo a todas las funcionalidades del dispositivo. ● Mejor experiencia del usuario. ● Visibilidad en las tiendas de aplicaciones. Desventajas ● Desarrollo complejo. ● Mantenimiento complejo. ● Dificil despliegue multiplataforma. https://wiki.smu.edu.sg/is101_2011/img_auth.php/e/e1/Objective_C_and_java.PNG
  8. 8. Web App Nativas/APP Híbridas http://mobile-app-options.appspot.com/img/diagram_hybrid.png
  9. 9. Web App Nativas/APP Híbridas Ventajas. ● Están programadas con tecnologías web (HTML5/CSS3/Javascript) ● Corren localmente en el dispositivo, Tiene soporte offline. ● Acceso a APIS nativas del dispositivo. ● Distribución en tiendas de aplicaciones Desventajas. ● El rendimiento no es comparable a aplicaciones nativas (Cuando se accede a contenido online) ● No se cuenta con actualizaciones frecuentes (en el caso de almacenamiento en caché) http://mobile-app-options.appspot.com/img/diagram_hybrid.png
  10. 10. Navegadores http://www.navegadoresdeinternet.net/
  11. 11. Complementos (Plugins) http://clubajax.org/the-history-of-ria-technologies/
  12. 12. Complementos (Plugins)
  13. 13. HTML5 + CSS3 + Javascript http://www.w3.org/html/logo/ http://lignux.com/w3c-recomienda-el-uso-de-html5/
  14. 14. Http/Ajax http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
  15. 15. WebSockets https://www.websocket.org/
  16. 16. Flash Sockets - Java Sockets http://www.neuroproductions.be/experiments/pushing-data-to-flash-using-binary-sockets/
  17. 17. Long Polling
  18. 18. Compatibilidad http://caniuse.com/#feat=websockets
  19. 19. Compatibilidad http://nodejs.org/ http://socket.io/ https://github.com/primus/primus https://www.npmjs.org/search?q=websockets
  20. 20. Usos WebSockets ● Juegos online multijugadores ● Aplicaciones de chat ● Actualización de información deportiva/financiera ● Actualizaciones en tiempo real de las actividades de otros usuarios. WePlay http://socket. io/demos/weplay/
  21. 21. WebRTC http://www.webrtc.org/
  22. 22. 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
  23. 23. WebSockets/WebRTC
  24. 24. 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.
  25. 25. WebRTC: Apis Javascript 1. getUserMedia 2. RTCPeerConnection 3. DataChannel Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  26. 26. Detección de Movimiento. http://www.soundstep.com/blog/experiments/jsdetection/ https://github.com/ReallyGood/js-motion-detection
  27. 27. Juegos https://www.cubeslam.com/
  28. 28. Trabajo Colaborativo Togetherjs https://togetherjs.com/ http://codassium.com
  29. 29. DataChannel https://www.sharefest.me/
  30. 30. WebRTC - Soporte Adapter.js http://caniuse.com/#search=webrtc
  31. 31. DEMO Chat Móvil: Mensajería Instantánea - Videollamadas) http://virtualnet2-0.blogspot.com/2014/07/video-llamadas-version-movil.html
  32. 32. Chat Móvil 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 +
  33. 33. Plataformas http://tokbox.com/ https://www.tuenti.com http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-and-zero-rated-mobile.html
  34. 34. Plataformas https://vline.com/developer/ http://www.snapchat.com/ http://bloggeek.me/snapchat-acquires-addlive/
  35. 35. Google Hangouts HD + WebRTC https://gigaom.com/2014/07/06/so-long-plug-ins-google-hangouts-works-with-webrtc/
  36. 36. Preguntas
  37. 37. Gracias por la atención Jorge Rubiano @ostjh

×