El documento presenta las tecnologías WebSockets y WebRTC, las cuales permiten aplicaciones móviles con conectividad en tiempo real. Explica que WebSockets permite comunicación bidireccional entre clientes y servidores a través de una única conexión TCP, mientras que WebRTC permite comunicación de audio y video punto a punto entre navegadores. También muestra ejemplos de uso como chats, juegos y trabajo colaborativo en tiempo real.

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. 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. Tipos de aplicaciones Móviles
https://developer.salesforce.com/page/Mobile_SDK

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. 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. APP Nativas
http://mobile-app-options.appspot.com/img/diagram_native.png

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. Web App Nativas/APP Híbridas
http://mobile-app-options.appspot.com/img/diagram_hybrid.png

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. Navegadores
http://www.navegadoresdeinternet.net/

11. Complementos (Plugins)
http://clubajax.org/the-history-of-ria-technologies/

12. Complementos (Plugins)

13. HTML5 + CSS3 + Javascript
http://www.w3.org/html/logo/
http://lignux.com/w3c-recomienda-el-uso-de-html5/

14. Http/Ajax
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/

15. WebSockets
https://www.websocket.org/

16. Flash Sockets - Java Sockets
http://www.neuroproductions.be/experiments/pushing-data-to-flash-using-binary-sockets/

17. Long Polling

18. Compatibilidad
http://caniuse.com/#feat=websockets

19. Compatibilidad
http://nodejs.org/
http://socket.io/ https://github.com/primus/primus
https://www.npmjs.org/search?q=websockets

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. WebRTC
http://www.webrtc.org/

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. WebSockets/WebRTC

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. WebRTC: Apis Javascript
1. getUserMedia
2. RTCPeerConnection
3. DataChannel
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

26. Detección de Movimiento.
http://www.soundstep.com/blog/experiments/jsdetection/
https://github.com/ReallyGood/js-motion-detection

27. Juegos
https://www.cubeslam.com/

28. Trabajo Colaborativo
Togetherjs
https://togetherjs.com/
http://codassium.com

29. DataChannel
https://www.sharefest.me/

30. WebRTC - Soporte
Adapter.js
http://caniuse.com/#search=webrtc

31. DEMO
Chat Móvil: Mensajería Instantánea -
Videollamadas)
http://virtualnet2-0.blogspot.com/2014/07/video-llamadas-version-movil.html

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. Plataformas
http://tokbox.com/
https://www.tuenti.com
http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-and-zero-rated-mobile.html

34. Plataformas
https://vline.com/developer/
http://www.snapchat.com/
http://bloggeek.me/snapchat-acquires-addlive/

35. Google Hangouts HD + WebRTC
https://gigaom.com/2014/07/06/so-long-plug-ins-google-hangouts-works-with-webrtc/

36. Preguntas

37. Gracias por la atención
Jorge Rubiano
@ostjh