Enriched User Interfaces in Mobile Web 2.0

AJAX Mobile
Interfaces de usuario para Mobile Web 2.0
Pedro Ballesteros Herranz

OBJETIVOS
¿Cómo revitalizar Internet en el entorno móvil?
Para que cualquier producto tenga éxito debe ser capaz de
llegar a la mayor cantidad de consumidores
Objetivo: Alcanzar una gran audiencia.
Logotipo Entidad
AUDIENCIA
ÉXITO
NEGOCIO
¿Permitirán los conceptos y
tecnologías de la Web 2.0
revitalizar la Internet Móvil?

OBJETIVOS
La Web 2.0 está revitalizando la Internet Fija.
Sus servicios y aplicaciones atraen a los usuarios.
Aumenta la audiencia de la Internet fija.
Mobile Web 2.0 aumentará la audiencia de la Internet Móvil.
Audiencia  Éxito  Negocio.
MOIBNITLEE RWNEEBT 2.0
Logotipo Entidad
WEB 2.0
AUDIENCIA
ÉXITO
NEGOCIO

PANORAMA ACTUAL
Bajo índice de penetración de Internet en el entorno móvil
Baja audiencia de las aplicaciones de datos en el entorno móvil.
Aun existiendo millones de unidades habilitadas con las tecnologías
adecuadas.
Los servicios de datos más ampliamente utilizados se acaban
concentrando en la distribución de contenidos.
Descargas de melodías, imágenes, videos.
Descarga de juegos.
MMS/SMS.
El usuario no encuentra en la Internet Móvil el mismo atractivo que
encuentra en la Internet Fija.
Las barreras han sido tradicionalmente técnicas
Limitaciones físicas de los dispositivos. Interfaces H-M.
Anchos de banda más reducidos.
Tecnologías adaptadas que son poco atractivas para el usuario.
WAP  WML.
No proporcionan la experiencia enriquecida buscada por el usuario.
Logotipo Entidad

PANORAMA ACTUAL
¿Se superan las barreras que limitan el uso de Internet?
Las limitaciones H-M son cada vez menores.
Aumento de los anchos de banda  3G  GPRS  UMTS.
Mayor capacidad tecnológica de los terminales.
Juegos y aplicaciones (J2ME, Symbian, Windows CE/Mobile, SmartPhone,
BlackBerry, Palm OS, etc.)
Cámaras de fotos.
Mensajería Multimedia.
Pantallas táctiles de alta resolución.
¿La tecnología es entonces el verdadero problema?
WAP con su WML fracasa. Imposibilidad de interfaces enriquecidos.
Los navegadores HTML no incluyen al completo los estándares de
navegación Web.
Limita el número de sitios Web compatibles.
No se puede alcanzar una gran audiencia.
Logotipo Entidad

¿CUÁL ES LA SOLUCIÓN?
Es necesario aumentar la compatibilidad de los navegadores.
La tecnología actual permite ejecutar juegos y aplicaciones.
No debería ser problemática la implementación completa de los
estándares de navegación Web en el móvil.
Aprender de la Web fija y aplicar sus modelos de éxito
La Internet por sí sola no evitó el retroceso provocado con la
explosión de la burbuja tecnológica del 2001.
Las aplicaciones y servicios de Web 2.0 están proporcionando el
impulso que revitaliza la Internet Fija y sus modelos de negocio.
MEJORAR LOS
NAVEGADORES + WEB 2.0  Mobile
Logotipo Entidad
web2.0
¿Suficiente?
Aplicar los modelos de
éxito de la Internet Fija

MOBILE WEB 2.0
¿Cómo llevar la Web 2.0 al entorno móvil?
¿Movilizar la Web 2.0?
Añadir el móvil como un elemento más del mapa mental de la Web 2.0.
¿Crear un mapa mental para Mobile Web 2.0?
Creación de nuevos conceptos, principios y tecnologías para el entorno móvil.
Logotipo Entidad

MOBILE WEB 2.0
Protocolos ligeros
(REST, Microformats)
Logotipo Entidad
Fórmula:
Aplicar al entorno móvil los
principios que configuran la
Web 2.0 de la Internet Fija.
Mobile Web 2.0
Producir en la Internet Móvil
el mismo impulso que en la
Internet Fija.
Para producir una mayor
audiencia de usuarios.
Obteniendo una mayor
penetración de la Internet en
el entorno móvil.
WEB 2.0
Principios, conceptos, tendencias, actitudes, tecnologías.
…
…
…
…
MOBILE WEB 2.0
… …
…
The Long Tail
…
Participación
(WebLog)
Confianza
(Wikis)
Web como
Plataforma
(AJAX)
Semántica
Folksonomía
Beta Perpetua
Redes Sociales
Estándares
Web
Sindicación
(RSS)
Experiencia
Enriquecida
(AJAX)
Inteligencia
Colectiva
Los datos son
el motor
Mashups
(remezclar)

MOBILE WEB 2.0
Mobile Web 2.0
Experiencia de aplicar los principios de la Web 2.0 como medio para
vitalizar la Internet Móvil.
¿Realmente Web 2.0 potenciará la Internet Móvil?
Para el entorno fijo está suponiendo un renacimiento de Internet.
Nueva confianza de los usuarios en Internet.
Que se perdió a raíz del estallido de la burbuja tecnología del 2001.
Sobrevivieron los sitios que aportaban verdadero valor.
Logotipo Entidad
Nacimiento de los servicios y aplicaciones que ahora son Web 2.0.
La Internet fija se puebla de servicios Web 2.0
Weblogs, Wikis, RSS, Folksonomy, Redes Sociales, Google, Amazon,
Yahoo, You Tube, Flirck, My Space, Second Life, …
Los sitios tradicionales se transforman día a día a Web 2.0.
Aumentan los canales de participación del usuario.
Repercusión en medios no relacionados con Internet.
Televisión, periódicos, entorno político, …
El usuario buscará en el móvil lo que obtiene de la fija.
Mobile Web 2.0  Requisito para que la Internet móvil no muera.

APLICANDO LOS PRINCIPIOS DE WEB 2.0
Los principios de la Web 2.0 son las claves para Mobile Web 2.0
Web 2.0 nació de lo que ya existía en Internet.
Mobile Web 2.0 debe nacer de lo que ya existe en la Web 2.0 fija.
1. La Web como plataforma
2. Aprovechamiento de la inteligencia colectiva
3. Los datos son el impulso conductor
4. Fin del ciclo de versionado del software mediante la beta perpetua
5. Modelos de programación ligeros
6. Software no limitado a un solo dispositivo
7. Experiencia del usuario enriquecida
Plano tecnológico: La Web como Plataforma.
AJAX  La tecnología protagonista que está jugando un papel
fundamental en Web 2.0.
Plano conceptual: La Inteligencia Colectiva.
El que mejor resume las claves y dicta el camino a seguir en la
creación de aplicaciones y servicios Web 2.0.
Logotipo Entidad
Plano Tecnológico
“AJAX”
Plano Conceptual

INTELIGENCIA COLECTIVA
Aprovechamiento de la Inteligencia Colectiva
El usuario deja de ser un mero espectador generando contenidos que
pueden ser valiosos para otros usuarios.
Participación, compartición, colaboración, redes sociales, …
WebLogs, Wikipedia, semántica participativa (folksonomía), …
La inteligencia colectiva dirige de forma espontánea la creación de
contenidos, el crecimiento de Internet y el aumento de la audiencia.
Modelos de negocio como “The Long Tail” (Google AdSense, Amazon)
El poder colectivo de lo menos demandado configura un buen mercado de
negocio, si el canal de distribución permite llegar a una amplia audiencia.
Logotipo Entidad
INTERNET
El usuario solo puede
consumir contenidos
El usuario participa en la
creación de contenidos
WEB 2.0
El usuario percibe mayor
control de los contenidos

INTELIGENCIA COLECTIVA EN MOBILE WEB 2.0
Limitaciones en las interfaces Hombre - Maquina
La introducción de datos en el móvil es incomoda.
¿Cómo participa el usuario en la creación de contenidos?
Modelos que habiliten canales de participación y colaboración
adaptados al entorno móvil.
Mobile Web 2.0 como suplemento de la Web 2.0 fija.
Consumir en movilidad lo que la inteligencia colectiva de la Web 2.0 produce
desde la Internet fija.
Lectura de Blogs, sindicación RSS, etc.
Pequeñas colaboraciones: envío de comentarios a un blog, etiquetado de
contenidos, etc.
Utilizar el PC como centro de control donde el usuario personaliza un
uso más simplificado de Mobile Web 2.0.
El usuario configura su entorno móvil desde la Internet Fija para utilizar la
Web 2.0 con una mínima introducción de datos.
Opciones más utilizadas, opciones favoritas, etc.
Ej: La clasificación de contenidos con etiquetas favoritas.
Logotipo Entidad

LA MOVILIDAD PARA POTENCIAR WEB 2.0
¿Pueden los elementos propios de un entorno movilizado incluso
potenciar los elementos de la Web 2.0 fija?
Ubicuidad, localización, posicionamiento, seguridad, SMS, MMS, ...
Ejemplos:
Mashups de “Google Map” unidos a servicios de ubicación geográfica.
SMS para el envío de comentarios a un Blog. MMS para la subida de
contenidos compartidos (videos, fotos).
Sindicación mediante SMS (RSS recibido con SMS).
Clasificación (“folksonomía”) potenciada mediante el análisis de la ubicación
geográfica del usuario. Lugar de grabación del video o la foto.
¿Que no hay que hacer en Mobile Web 2.0?
Mobile Web 2.0 se debe apoyar en los principios de la fija.
Sin buscar transformaciones del modelo.
Ejemplo de “Google Maps” para móviles.
Instalación de una aplicación nativa que sea compatible con el
terminal utilizado  Fragmentación del mercado.
¿Es Web 2.0?  El usuario quiere ejecutar sin instalar.
¿Un terminal capaz de ejecutar la aplicación nativa no tiene
potencia suficiente para ejecutarla en el navegador?
Falta la tecnología estrella de Web 2.0  AJAX
Logotipo Entidad

LA WEB COMO PLATAFORMA
Rich Internet Application (RIA)
Aplicaciones Web que presentan la funcionalidad y características de
las tradicionales aplicaciones de escritorio.
Potencian la interfaz de usuario mediante un enriquecimiento y
aumento de la interactividad.
Características
Ejecución en un navegador sin instalación de nuevo software.
Ejecución local en entorno seguro (sandbox).
Comunicación asíncrona para la transferencia de información.
¿Qué aporta RIA a la Web 2.0?
Proporciona la experiencia enriquecida demandada por el usuario.
La Web se convierte en la “Plataforma de Ejecución”.
“Webtop” frente a “Desktop”.
Fin del versionado del software.
Fin de la distribución de versiones y actualizaciones.
Nueva funcionalidad inmediatamente accesible.
Aproximación al “Browser Only PC”.
Logotipo Entidad

RICH INTERNET APPLICATION
Ventajas y beneficios
Disponibilidad independiente de la ubicación geográfica y del
hardware utilizado.
El usuario almacena sus datos en la red.
Aplicaciones para manipular estos datos accesibles también desde la red.
Actualización y distribución instantánea  Beta perpetua.
Demanda de recursos balanceada entre clientes y servidores.
Aumento de la interactividad y tiempos de respuesta.
Mejora la experiencia del usuario.
Eficiencia en las comunicaciones.
No se transfieren elementos de presentación durante el uso de la aplicación.
Aumento de la seguridad del equipo local.
El usuario no instala nuevo software, se minimiza el riesgo de virus.
Tecnologías
AJAX
Adobe Flash Player, Applets Java, Active X, XUL (User-interface
Languajes), Scalable Vector Graphics, etc.
Logotipo Entidad

ASYNCHRONOUS JAVASCRIPT AND XML
Tecnología “de facto” utilizada para la creación de aplicaciones
RIA utilizando estándares Web nativos en los navegadores
Realmente no es una nueva tecnología.
Técnicas para la creación de aplicaciones interactivas mediante un
cambio en la forma de usar las tecnologías de navegación Web.
Logotipo Entidad
JavaScript
Lenguaje de programación que implementa la
lógica de la aplicación en el navegador.
HTML+CSS+DOM
Simulación de controles de interfaz de usuario
(widgets) similares en apariencia y funcionalidad
a las aplicaciones de escritorio.
Objeto XMLHttpRequest
Para el intercambio asíncrono de datos entre el
cliente y el servidor.
La lógica de cliente analiza los datos recibidos
para progresar la interfaz de usuario.

AJAX
¿Por qué AJAX se impone sobre otras tecnologías RIA?
Tecnologías existentes de forma nativa en los navegadores.
No requiere la instalación de plugins (aplicaciones listas para ejecutar).
Tecnologías no propietarias.
Independiente del servidor (tecnologías de cliente).
Inconvenientes y limitaciones
Rompe con el modelo de diseño tradicional de páginas Web.
Interfaz de usuario programado.
Interfaces interactivos  más funcionalidad  más esfuerzos.
Tecnologías orientadas al modelo de navegación tradicional.
Simulación de controles de IU con elementos básicos (HTML es un lenguaje
declarativo orientado al formato de documentos).
Mantener compatibilidad entre navegadores.
Capacidades no disponibles: video, sonido, etc.
Se superan con plugins adicionales.
Logotipo Entidad

AJAX
¿Cómo acotar las dificultades de AJAX?
Frameworks AJAX.
No existe estándar  múltiple variedad de soluciones.
Librerías JavaScript (Prototype, Dojo, DWR, Scriptaculous, etc.).
Lenguajes intermedios compilables que generan JavaScript/DHTML.
Logotipo Entidad
Google Web Toolkit (Java)
¿Qué aporta AJAX?
Mantenimiento de datos de sesión en el cliente.
La página HTML de la aplicación nunca se descarga.
Refresco automático de la interfaz de usuario.
Técnicas eficientes de polling.
Envío de notificaciones desde el servidor, recepción de alertas, etc.
Técnicas de prefeching.
Obtención por adelantado de datos para aumentar la interactividad.
Mashups
AJAX facilita enormemente el fenómeno de los mashups.

MASHUPS
Sitio Web o aplicación Web que usa contenido de más de una
fuente para crear un nuevo servicio completo.
Reutilización o mezcla directa de la interfaz de usuario de otras
aplicaciones de Internet.
Logotipo Entidad
GooegBlea My aps
22 RReeaall EEssttaattee AAuuccttiioonnss..ccoomm
Google Maps + eBay
Servicio para localizar ventas
inmobilarias en eBay.

MASHUPS
Sitio Web o aplicación Web que usa contenido de más de una
fuente para crear un nuevo servicio completo.
Reutilización o mezcla directa de la interfaz de usuario de otras
aplicaciones de Internet.
Preferencia por el uso de modelos de programación ligeros
Web Services: REST sobre SOAP.
Triunfan los estándares “de facto”.
Reutilización utilizando APIs JavaScript.
AJAX es el responsable principal del éxito de los Mashups
El sandbox es el navegador.
El uso de tecnologías del navegador facilita la mezcla de páginas
Web.
Eleva a un nuevo nivel el concepto de inteligencia colectiva.
La Web Programable.
Participación y colaboración incluso en la creación de aplicaciones.
Logotipo Entidad

AJAX MOBILE
AJAX está jugando un papel casi principal en Web 2.0
Sin AJAX la Web 2.0 no tendría su protagonismo actual.
En un entorno fragmentado por la diversidad de tecnologías, AJAX posibilita la
creación de aplicaciones RIA.
Aplicaciones tradicionalmente utilizadas como aplicaciones de escritorio se
comienzan a utilizar de forma intensiva desde el navegador.
El usuario encuentra la misma interactividad en estas interfaces Web.
¿Es AJAX la clave para una Mobile Web 2.0?
Se puede asegurar que es casi un requisito.
Sin interfaces de usuario enriquecidas y sin la interactividad que está poblando la
Internet fija el usuario perderá interés.
El fracaso de WAP con sus páginas WML lo demuestra.
¿Por qué utilizar AJAX existiendo otras tecnologías más adecuadas?
El éxito de AJAX se debe a la falta de acuerdo entre navegadores por incluir
tecnologías mejor adatadas a la creación de aplicaciones RIA.
En los navegadores móviles se avecina un escenario similar.
La evolución más lógica e inmediata de los navegadores para móvil será la
inclusión completa de las tecnologías de navegación.
Un móvil con JavaScript/HTML/CSS/COM ya permite el uso de AJAX.
“Opera” ya ha anunciado la compatibilidad AJAX en su navegador para móviles.
Logotipo Entidad

AJAX MOBILE
¿Qué debería ser AJAX Mobile?
Estándares de navegación Web
implementados en el móvil.
¿XMLHttpRequest?.
Algunos móviles de última
generación ya soportan AJAX.
Tan sólo por que incluyen un
navegador completo.
Con AJAX en el móvil se facilita el
paso a Mobile Web 2.0.
¿Qué no sería AJAX Mobile?
Soporte de AJAX basado en la
instalación de plugins.
Versión móvil de AJAX.
No tendría sentido.
AJAX se utiliza precisamente por que
funciona con tecnologías existentes en
el navegador.
Logotipo Entidad

BENEFICIOS DE AJAX MOBILE
¿Aportaría AJAX ventajas adicionales para el entorno móvil?
Convergencia de las tecnologías inalámbricas
Minimizar la fragmentación tecnológica que existe para la creación de
aplicaciones nativas.
J2ME, Symbian, Windows CE/Mobile, SmartPhone, BlackBerry, Palm OS, etc
Incluso en J2ME existen divergencias. Diversos perfiles (Personal Profile,
Foundation Profile, MID Profile). Implementaciones incompletas, etc.
Aumento de costes por mantenimiento en todas las plataformas y versiones.
Con AJAX algunas aplicaciones podrían ser aplicaciones Web.
Un solo cliente para todas las aplicaciones.
“Browser Only Mobile”
Economía en la transmisión de datos en la red
Mejora un entorno con ancho de banda más limitado.
Solo se transmiten datos.
Se evita el trasiego de elementos de presentación más voluminosos.
Logotipo Entidad

INCONVENIENTES DE AJAX MOBILE
Limitaciones en la Interfaz H-M
Como en cualquier página Web tradicional.
Las aplicaciones Web consumirán más recursos del móvil
Recursos de computación y de memoria más limitados.
El navegador se utiliza de una forma más intensiva.
¿Problema real?
Las aplicaciones nativas se instalan y se ejecutan en el móvil.
También tienen una alta demanda de los limitados recursos del móvil.
AJAX reparte los recursos entre el cliente y el servidor.
En un escenario de Web como plataforma el usuario no tiene que
instalar aplicaciones
Ahorra la memoria del móvil.
Posible problema: JavaScript es un lenguaje de bajo rendimiento.
Lenguaje de programación interpretado.
Logotipo Entidad

Telecom I+D 2006
XVI Jornadas

Enriched User Interfaces in Mobile Web 2.0

Más contenido relacionado

La actualidad más candente (16)

Destacado (20)

Similar a Enriched User Interfaces in Mobile Web 2.0 (20)

Último (6)

Enriched User Interfaces in Mobile Web 2.0

Notas del editor