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.

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

740 views

Published on

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)

Published in: Education
  • Be the first to comment

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

×