PDF de programación - Estándares y lenguajes de marcado para el desarrollo de aplicaciones web orientadas a dispositivos moviles

Estándares y
lenguajes de marcado
para el desarrollo de
aplicaciones web
orientadas a
dispositivos moviles
Esteban Saavedra Lopez

email: [email protected]
http://jesaavedra.opentelematics.org

Agenda
• Introducción a la web móvil
• Características
• Estándares
• Conclusiones

Que es la Web móvil?
• La web móvil es la misma Internet
que conocemos, solo es más
pequeña, más rápida y esta en
cualquier lugar.

Es necesaria la web móvil?
• Cada vez son más las personas que
utilizan los dispositivos móviles, lo
que hace que cada vez sea mayor la
necesidad de contar con acceso a
internet y a sistemas informáticos
por medio de nuestros dispositivos
móviles

Que tan útil es tener un sitio para
dispositivos móviles? (1/2)
• La mayoría de las empresas disponen
de sus sitios orientados a dispositivos
móviles
• Las empresas dependen de clientes
estáticos y clientes móviles
• Es la mejor forma de llegar a los
clientes.
• El mercado de aplicaciones
orientadas a móviles es cada vez
mayor.

Que tan útil es tener un sitio para
dispositivos móviles? (2/2)
• Aumenta los contactos.
• No es un lujo, es una necesidad
• Es una herramienta de negocios
• Ahorra tiempo

Áreas de aplicación
• Redes sociales
• Prensa
Independiente
(Vídeo/Audio)
• Búsqueda de
recursos
• Presencia virtual
• Aplicaciones
empresariales

Debo saber algo extraordinario para
desarrollar aplicaciones móviles?
• Si tienes habilidades para diseñar
sitios para PCs, podrás diseñar para
móviles

Que preciso para empezar?
• Saber lo que necesito (objetivo del
sitio).
• A quien esta orientado (clientes
finales).
• Que servicios brindara (empresarial,
educativo,social, personal,....).
• Que contendrá el sitio.

Existen limites para la web móvil?
• Variedad
• Tamaño de la pantalla
• Estructura distinta
• Escritura complicada
• Velocidad de conexión
• Memoria del teléfono
• Pocas opciones multimedia
• Accesibilidad y usabilidad.

Variedad de tipos

Resolución

Estructura distinta

Accesibilidad a la web
• Cada día es mayor la necesidad de
contar con sitios accesibles para:
> cualquier dispositivo
> cualquier persona (con o sin

discapacidades)

Usabilidad y Arquitectura de
información
• La usabilidad de un sistema está
ligada principalmente a:
> La interacción del mismo
> Modo en que se realizan las operaciones
> La interacción no está definida en la

con el sistema.
interfaz gráfica, sino que está imbricada
en el código que implementa la
funcionalidad del sistema.
gráfica y la parte operacional del
sistema.

> La interacción considera la interfaz

Diseño de Interfaces e Interacción|
• Si bien existen una gran cantidad
guías, pautas, estándares y reglas
ergonómicas para diseñar interfaces
usables, generalmente no es fácil
aplicarlas, por que:
> no se precisa el escenario bajo el cual
> no se conocen las consecuencias de su
> no se tienen ejemplos específicos de

puedan aplicarse
uso
cómo emplearlas

Buenas prácticas
• Considerar las limitaciones de cada
dispositivo
• Optimizar la navegación (reducir el
ingreso de información)
• Optimiza el diseño (colores e
imágenes)
• Usar la conexión con moderación
• Pensar en los usuarios en
movimiento.
• Basarse en estándares

Que es un estándar?
• Son reglas formalizadas y probadas,
que al ser aplicadas en ciertos
entornos permiten alcanzar mejores
y mayores beneficios.

Estándares en la Web Móvil
• Los estándares son un instrumento
que ayuda a afrontar de mejor forma
el reto de desarrollar aplicaciones
web móviles adecuadas a todo tipo
de dispositivos y configuraciones.

Que estándares existen en diseño
web móvil?
• Todos los estándares dispuestos para
el diseño web tradicional están
dispuestos de forma reducida para el
diseño de la web móvil
• html

> xthml
> css

• Existen algunos especialmente
dispuestos para el diseño web móvil
> xhtml-mp
> dial

¿Para qué sirve XHTML?
• XHTML surge como el lenguaje cuyo
etiquetado, más estricto que HTML,
va a permitir una correcta
interpretación de la información
independientemente del dispositivo
desde el que se accede a ella. (W3C).

¿Para qué sirve CSS?
• CSS se utiliza para dar estilo a
documentos HTML y XML, separando
el contenido de la presentación. Los
Estilos definen la forma de mostrar
los elementos HTML y XML.
• CSS permite a los desarrolladores
Web controlar el estilo y el formato
de múltiples páginas Web al mismo
tiempo. (W3C).

Tipos de clientes finales

Clientes thin (1/2)
• Todo el procesamiento se realiza en
el servidor
> El cliente sólo se ocupa de la interfaz de
usuario (UI)
• El cliente normalmente se compone
de:
> Navegador
> Documento web (HTML)

Clientes thin (2/2)
• Descarga documentos y los muestra
en un navegador
• Los documentos HTML no son
adecuados para móviles
> Se definen nuevos tipos de documentos
– WML, XHTML-MP, cHTML, ...

> Se muestran en un navegador que los

soporte
– Microbrowser

Clientes thick (1/2)
• La aplicación se descarga e instala
en el cliente
> Se ejecuta de forma local
> Trabaja de forma coordinada con el
> Realiza en el cliente todo el

servidor
procesamiento posible

• Aplicaciones dedicadas
> Para una tarea concreta

Clientes thick (2/2)
• Sólo necesita intercambiar
información, no solo presentación
• Se puede comunicar mediante
diferentes protocolos
> Servicios Web
> RPC
> Otros

¿Thick o Thin? (1/2)
• Thin

navegador

descargar cada documento

> Requiere conectar a la red para
> Velocidad de descarga lenta en móviles
> Limitado a las posibilidades del
> Fácil de mantener

¿Thick o Thin? (2/2)
• Thick

> Mayor rendimiento multimedia

> Mantenimiento costoso
> Interfaz de usuario (UI) más flexible
> Minimiza el tráfico en la red

– Intercambia con el servidor sólo la
información necesaria
– Puede funcionar sin conexión

Lenguajes de marcado

Lenguajes de marcado para
clientes thin (1/3)
• No se suele usar todo el HTML o
XHTML debido a las restricciones
gráficas de los dispositivos.

Lenguajes de marcado para
clientes thin (2/3)
• Algunos lenguajes de marcado para
clientes thin:
• WML (Wireless Markup Language)

> Basado en XML, totalmente distinto al
> Imágenes en formato propio: WBMP
> WMLScript: lenguaje tipo Javascript

HTML
(monocromas)

Lenguajes de marcado para
clientes thin (3/3)
• cHTML (Compact HTML)

• XHTML Basic y XHTML-MP (Mobile
Profile)
> No soporta tablas complejas
> Javascript en 1.2

> Excluye tablas, hojas de estilo,
> Añade enlaces a teléfonos, asociación
> Imágenes GIF (no JPG)

fuentes,...
teclas-enlaces, emojis,...

Ejemplo de WML

Ejemplo de cHTML

Ejemplo de XHTML-MP

DIAL
• Lenguaje de autoría independiente
del dispositivo.
• El futuro de los lenguajes de
marcado.
> Se adecúa a la interfaz de acceso.
> Determina las características básicas y

funciona sobre las mismas.

Entornos de desarrollo
• Similares o los mismos que el
desarrollo web tradicional.
• Especializados en simular resultados
obtenidos.
• Desarrollo en linea.

Entornos de desarrollo
tradicionales

Conclusión
• El desarrollo web móvil es cada vez
mas necesario.
• El uso de estándares mejora la
experiencia en el desarrollo web
móvil

Consultas