Universidad Manuela BeltránUMB Virtual

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

Jorge RubianoTwitter: @ostjh

https://github.com/Jorger/

1. Tipos de aplicaciones Móviles.

2. Navegadores.3. Complementos/Plugins.4. WebSockets.5. WebRTC.6. Demostración.7. Casos de Uso.8. Preguntas.

Agenda

Tipos de aplicaciones Móviles

https://developer.salesforce.com/page/Mobile_SDK

Web App

http://cdn.sixrevisions.com/0274-02_facebook_native_mobile_web_app.jpg

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.

Web App

1. https://github.com/slightlyoff/ServiceWorker

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¹)

APP Nativas

http://mobile-app-options.appspot.com/img/diagram_native.png

APP Nativas

https://wiki.smu.edu.sg/is101_2011/img_auth.php/e/e1/Objective_C_and_java.PNG

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.

Web App Nativas/APP Híbridas

http://mobile-app-options.appspot.com/img/diagram_hybrid.png

http://mobile-app-options.appspot.com/img/diagram_hybrid.png

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é)

Web App Nativas/APP Híbridas

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://socket.io/ https://github.com/primus/primus

https://www.npmjs.org/search?q=websockets

http://nodejs.org/

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.

http://socket.io/demos/weplay/

WePlay

WebRTC

http://www.webrtc.org/

WebRTCEs 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.

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

WebRTC RTCWeb

WebSockets/WebRTC

WebRTC1. Adquirir medios.2. Comunicación Audio y

Vídeo3. Envío y recepción de

datos arbitrarios en conexiones punto a punto.

WebRTC: Apis Javascript

1. getUserMedia2. RTCPeerConnection3. DataChannel

Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

Detección de Movimiento.

http://www.soundstep.com/blog/experiments/jsdetection/https://github.com/ReallyGood/js-motion-detection

Juegos

https://www.cubeslam.com/

Trabajo Colaborativo

Togetherjs

https://togetherjs.com/

http://codassium.com

DataChannel

https://www.sharefest.me/

WebRTC - Soporte

http://caniuse.com/#search=webrtc

Adapter.js

DEMO

Chat Móvil: Mensajería Instantánea - Videollamadas)

http://virtualnet2-0.blogspot.com/2014/07/video-llamadas-version-movil.html

Chat Móvil

http://nodejs.org/

http://socket.io/

+

webRTC.iohttps://github.com/webRTC/webRTC.io

http://www.webrtc.org/

+

http://www.mongodb.org/

mongodbhttps://npmjs.org/package/mongodb

+

Plataformas

http://tokbox.com/

https://www.tuenti.com

http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-and-zero-rated-mobile.html

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ónJorge Rubiano

@ostjh