MII 733 - Computación Móvil José Miguel Rubio L. Oficina 3-20 http://www.inf.ucv.cl/~jrubio jose.rubio.l@ucv.cl.

Presentación del tema: "MII 733 - Computación Móvil José Miguel Rubio L. Oficina 3-20 http://www.inf.ucv.cl/~jrubio jose.rubio.l@ucv.cl."— Transcripción de la presentación:

1 MII 733 - Computación Móvil
José Miguel Rubio L. Oficina 3-20

2 Sección 2 Diseño de páginas Web para dispositivos móviles
José Miguel Rubio L. Oficina 3-20

3 Tendencias de acceso a Internet
Los dispositivos móviles están reemplazando a las computadoras como medio de acceso a Internet en América latina. A fines del 2000, casi un 5% de los hogares latinoamericanos tenía computadora, en tanto que el 12% de las personas de la región utilizaba teléfonos móviles. Los dispositivos móviles pasarán a ser una extensión de la televisión

4 Justificación Se estima 1,300 millones de usuarios de PCs, por 2,500 millones de usuarios móviles. Se estima que existen alrededor de 2,000 millones de usuarios de teléfonos celulares en el mundo por un estimado de 6,500 millones (tercera parte).

5 Justificación “Más de la mitad de los microprocesadores fabricados en el mundo estarán destinados a dispositivos móviles. El software que hará realmente útiles a los dispositivos móviles todavía no es desarrollado.” El uso de Internet en dispositivos móviles es sumamente limitado. 30 minutos al mes a la Web 80 SMS, 15 MMS, 300 minutos de voz. Se cree que en cinco años los dispositivos portátiles y los teléfonos celulares reemplazarán a las computadoras como medio de acceso a Internet en América latina. La principal razón es que las PCs son caras, su vida útil muy corta, y buena parte de la población considera que son difíciles de usar. Estas estadísticas reflejan que el uso de dispositivos móviles va en creciente aumento debido principalmente a su diminuto tamaño y a que su poder de procesamiento y versatilidad van creciendo día con día. Los equipos móviles están propensos a constantes desconexiones y, por otra parte, la Web por naturaleza requiere de una conexión permanente para poder operar. Por este motivo, es necesario un mecanismo para hacer accesibles los recursos de un sitio Web sin necesidad de conexión. Dicho mecanismo consiste en el acaparamiento de sitios Web. Por otra parte, debido a las limitantes de los dispositivos móviles, los sitios Web no pueden ser visualizados correctamente en esta clase de dispositivos, razón por la cual se requiere de un mecanismo para poder visualizar correctamente las páginas Web en un dispositivo móvil con despliegue limitado. Dicho mecanismo consiste en la transcodificación de sitios Web. Ejemplo de ellos es la biblioteca del congreso de los Estados Unidos, la cual tiene más de 19 millones de libros, dicha información es replicada en dos horas en la Web.

6 Aplicaciones Web móviles
No es necesario distribuir ni instalar ninguna aplicación. Se pueden realizar cálculos y algoritmos complejos dado que la ejecución se realiza en el servidor. Los navegadores Web se convierten en clientes universales. Existen tres clases de desarrollo para dispositivos móviles: standalone, online, smart client

7 Problemática 800 176 212 Los sitios Web no están diseñados tomando en cuenta las características y limitaciones de los dispositivos móviles 240 320 600 Hablar de toda la problemática en los dispositivos móviles. Hablar de costos y demás características Estas limitantes son las que más han influenciado en la poca utilización de dispositivos móviles para acceder a la Web. Otros problemas que no corresponden a las limitaciones de los dispositivos móviles pero si influyen en el acceso a la Web desde dispositivos móviles son los altos costos de conexión a Internet (ver Anexo A) y el poco ancho de banda (lo cual hace que la descarga de la información sea más lenta). Todos estos problemas conllevan a una mala experiencia de navegación por parte de los usuarios y a que elijan otras alternativas de acceso a la Web. Los problemas que nos enfocamos a resolver son los últimos dos y que a continuación se describen brevemente. Por un lado, las aplicaciones Web requieren servicios de transporte de datos que mantengan enlaces persistentes y orientados a conexión. Por esta razón la arquitectura cliente/servidor no es adecuada para escenarios de cómputo móvil, ya que el modelo de interacción de esta arquitectura es un gran consumidor de tiempo e ineficiente en presencia de eventos de desconexión. En lo que se refiere a las dimensiones de la pantalla en dispositivos móviles, el problema que identificamos es que se necesita mucha interacción por parte del usuario. El usuario tiene que realizar desplazamientos horizontales y verticales para visualizar la página Web de forma completa (ver Figura 1.2). Aunado a esto algunos navegadores en dispositivos móviles no soportan algunos objetos Web (e.g. tablas, frames, formularios, scripts, animaciones, applets, etc.), por lo que a veces no se pueden visualizar o si lo hacen es de manera incorrecta.

8 Dispositivos móviles

9 Problemática Muchos de los recursos existentes en la Web no pueden visualizarse en dispositivos móviles, por que no son accesibles. Esto ha originado que la Web no sea ubicua y que esté fragmentada.

10 Problemática

11 Redes inalámbricas Tipo de red WWAN (Celulares) WLAN (Wireless LAN)
WPAN (Bluetooth) Estándar GSM/GPRS/EvDo IEEE b/g/a IEEE Ancho de Banda 9.6/170/2000 Kb/s 1, 2, 11, 54 Mb/s 721 Kb/s Frecuencia 0.9/1.8/2.1 GHz 2.4 y 5 GHz Infrarrojos 2.4 GHz Rango 35 Km m 10 m La interfaz del alumno se creará con los siguientes módulos: Acceso al sistema, permitirá al alumno ingresar al sistema, previa alta en el módulo administrador de cursos. Visualizador de diapositivas, mostrará al alumno la información del curso en base a lo programado en el grafo instruccional. Visualizador de ejercicios, tomará la consulta escrita por el alumno, la ejecutará en las tablas de ejercicios del servidor y mostrará los resultados obtenidos. Visualizador de exámenes,realizará las evaluaciones al alumno, programadas en el grafo instruccional, y enviará los resultados al módulo pedagógico para que el planificador actualice el grafo instruccional. Modo de operación Desde un navegador, ya sea en Internet o Intranet. El usuario entrará al módulo de acceso al sistema, el cuál revisará el nombre de la cuenta y su contraseña. Dependiendo de la información registrada en la BD, el planificador determinará la acción a seguir, continuar con el despliegue de información a través del visualizador de diapositivas, realizar un ejemplo interactivo a través del visualizador de ejercicios, o la aplicación de una evaluación a través del visualizador de exámenes..

12 Problemática Costos CSD: $1.5 minuto GPRS: $0.12 KB Telcel Tarea
Tamaño (KB) Tiempo (Segs.) GPRS CSD Leer noticias 2 92 $0.24 $3 Buscar una película y ver su sinopsis 3.7 153 $0.48 $4.5 Resultados de los partidos del fútbol 5.4 109 $0.72 Buscar un numero en un directorio 5.9 100 Búsqueda de un restaurante y menú 6.3 127 $0.84 Cargar página Web 6.7 42 $1.5 Descargar una archivo PDF (68k) 72.4 372 $8.76 $10.5 Recibir un correo (9 KB) 11.8 74 $1.44 Reenviar un correo 9 KB 12.2 $1.56 Ver página Web de 70 KB 76.1 455 $9.24 $12 Enviar un correo con una nota y un archivo adjunto de 50 KB 81.0 495 $9.72 $13.5 Total 285 2120 $33.12 $63 CSD: $1.5 minuto GPRS: $0.12 KB Telcel Costos El acceso a Internet a través de un dispositivo móvil usando tecnología celular es considerablemente caro. En México, los costos con el mayor proveedor de telefonía celular (Telcel) son de $1.5 en prepago o $1 en plan tarifario con tecnología CSD y con tecnología GPRS cuesta $0.12 por Kb o fracción transmitida (se puede obtener un plan de 50 Mb. por $500) . También se puede apreciar que en casos donde se requiere mayor contenido o información no es del todo conveniente. Como es el caso de la descarga de archivos o el envío y recepción de correo electrónico. Para este último caso han aparecido esquemas asíncronos que están tomando mucho auge como el caso de la tecnología Pushmail y los dispositivos móviles Blackberry. Como se puede apreciar, los precios son elevados si se compara con el acceso tradicional pero en algunos casos son convenientes como es el caso de la búsqueda y visualización de algún servicio como en el caso de la cartelera del cine (el usuario no tiene que comprar el periódico [$5 en promedio], ir al café-internet [entre $5-$10 por hora] o hablar por teléfono para saber la cartelera [$1 minuto en teléfono público]). Otro caso sería el de consultar los resultados de partidos de fútbol en donde sale más barato acceder a Internet desde un dispositivo móvil que enviar un mensaje SMS ($1 + costo del servicio que oscila entre los $1-$5). Costos de acceso a Internet en México desde un dispositivo móvil haciendo uso de la red de telefonía celular.

13 Navegadores Web Pocket Internet Explorer NetFront Opera mini
Minimo(mozilla) Konqueror

14 Otros problemas Mucho mantenimiento del sitio al tener diversas versiones del mismo. Más carga del servidor. Más ancho de banda requerido. …

15 Pasado Tecnologías propietarias no compatibles entre sí como:
HDML (Handheld Device Markup Language) cHTML (compact HTML) cHTML aun es utilizado ampliamente en Japón en el sistema iMode. Un grupo de empresas crearon el WAPForum ahora Open Mobile Alliance para solucionar la problemática de la Web móvil

16 Convergencia de Lenguajes de Marcado
1998 1999 2000 2001 2002 WAP HDML WML XHTML Basic + WML HTML 3.2 C-HTML HTML 4.0 XHTML 1.0 XHTML Basic XML 1.0 WAP 2.x WAP 1.x i-mode HTML XML

17 WAP WAP (Wireless Access Protocol) es una pila de protocolos para acceder a la Web, optimizada para conexiones inalámbricas de ancho de banda bajos, se ocupan de pasarelas para convertir protocolos de HTTP a WAP y visceversa. Los documentos que maneja WAP se basan en WML (Wireless Markup Language)

18 Pila de protocolos WAP Entorno de Aplicaciones Inalámbricas (WAE)
Protocolo de Sesión Inalámbrica (WSP) Protocolo de Transacciones Inalámbricas (WTP) Capa Inalámbrica de Seguridad de Transporte (WTLS) Protocolo de Datagramas Inalámbrico (WDP) Capa del portador(GSM, CDMA, GPRS, etc)

19 WAP Architecture

20 WAP Tools Nokia WAP SDK WinWAP MobileDev
Nokia WML Studio for Macromedia Dreamweaver Ericsson WAPIDE IBM WAPSody

21 WML Se basa en XML para definir un documento que sea compatible con los dispositivos móviles. Maneja el concepto de cartas en lugar de páginas. Los documentos se estructuran en barajas, donde una baraja contiene varias páginas. WML contiene etiquetas básicas de texto, enlace, imágenes, tablas, etc. Con algunas restricciones.

22 Hola mundo! En WML A Simple WML file Standard header for WML 1.1 files
<?xml version='1.0'?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " <wml> <card id="First_Card" title="First Card"> <p> Welcome to WML! </p> </card> </wml>

23 WML <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " <wml> <card id="card1" title="card 1"> <p> <anchor title="anchor tag"> Ir a la segunda pantalla <go href="#card2" /> </anchor> </p> </card> <card id="card2" title="card 2"> <p> Segunda Pantalla</p> </card> </wml>

24 Formularios en WML Login Card - the first card here
Go to Password card when user selects it Select menu – a common control in WML

25

26 WML WML tiene su propio lenguaje de script llamado WMLScript
Las imágenes que utiliza están en formato WBMP que son imágenes en mapa de bits monocromático WAP y WML no fueron muy utilizados debido a que era como “ver TV en blanco y negro”

27 Un ejemplo de WMLScript

28 Un ejemplo de WMLScript

29 Páginas dinámicas En muchas ocasiones es necesario determinar en tiempo de ejecución algunas características del dispositivo móvil para personalizar el contenido, esto se puede hacer con lenguajes como: PHP ASP JSP

30 Páginas dinámicas <?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " id=“volados" title=“juegos"> <p> <% if (Math.random() < 0.5) { %> <b> Ganaste </b> <% } else { %> <b> Perdiste</b> <% } %> </p> </card> </wml>

31 WAP 2.0 Debido a las limitaciones de WAP, surgió una nueva versión del protocolo que al parecer permitirá despegar la Web móvil. Modelo push (de actualización automática) y modelo pull (de recepción automática) Soporte para integrar telefonía en las aplicaciones

32 XHTML Son documentos HTML que siguen la sintaxis de cualquier documento basado en XML (etiquetas todas que cierran, el orden es importante, todo los parámetros entre comillas, etc). El origen de XHTML surge a partir de las ambigüedades que presenta HTML como lenguaje, ayuda a estructurar de mejor forma la Web.

33 XHTML Basic Es un subconjunto de etiquetas de XHTML que han sido probadas en dispositivos móviles XHTML-MP (Mobile Profile) es una especificación de Nokia seguida por otras compañías que utilizan XHTML Basic sobre dispositivos móviles. ¡Por fin llegó el color a la Web móvil!

34 Página Web con XHTML-MP

35 XHTML-MP Estructura: body, head,html, title
Texto: br,code,dfn,em,kbd, p, strong Hipertexto: a Lista: dl,dt,dd,ol,ul,li Formularios*: form, input, label, option Tablas*: caption, table, td, th, tr Imagen*: img Objeto*: object, param Metainformación*: meta Vínculo*: link Base*: base * Opcionales

36 XHTML-MP <?xml version="1.0" encoding=“ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html> <head><title>Escuela de Ingeniería Informática<title></head> <body><p>Líderes: <a href=" Pont. Univ. Católica de Valparaíso</a></p></body></html>

37 Estilo de Fuentes <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html xmlns=" <head> <title>Font Style</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div> <b>Bold</b><br/> <i>Italic</i><br/> <b><i>Bold italic</i></b><br/> <small>Small</small><br/> <big>Big</big><br/> <em>Emphasis</em><br/> <strong>Strong</strong> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> </div> </body> </html>

38 Listas <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html xmlns=" <head> <title>Unnumbered Lists</title> </head> <body> <div><em>Unnumbered List:</em></div> <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>And so on...</li> </ul> </body> </html>

39 Tablas <head> <title>An XHTML MP Table</title>
<body> <table> <tr> <td>Item 1</td> <td>Item 2</td> </tr> <td>Item 3</td> <td>Item 4</td> </table> </body>

40 Ejemplo de Accesibilidad

41 Uso de estilos <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " > <html xmlns=" <head> <title>XHTML Mobile Profile Document</title> <!-- Change href="style.css" below to the file name and relative path or URL of your external style sheet. --> <link rel="stylesheet" href="style.css “type="text/css"/> <style> document-wide styles would go here </style> </head> <body> <h1> Heading </h1> <p> Body </p> </body> </html>

42 Ejemplo de CSS para móviles
body { background-color: #efefdd; font-family: Arial, Verdana, Helvetica; font-size: 10pt; color: #000044;} div { font-family: Arial, Verdana, Helvetica; font-size: 10pt; color: #000044;} hr { color:#006600;} h1 { font-family: Verdana, Arial, Helvetica; font-size: 14pt; color: #000000;} h2 { font-family: Verdana, Arial, Helvetica; font-size: 12pt; color: #000000;} h3 { font-family: Verdana, Arial, Helvetica; font-size: 10pt;font-weight:bold; color: #00000;} a { color: #1144aa; text-decoration: none;} a:hover { text-decoration: underline;} a:visited { color: #4466cc;}

43 Web 2.0 en dispositivos móviles
Aún es muy joven está tecnología y en dispositivos móviles apenas se empieza. El navegador Web en el dispositivo móvil tiene que soportar el objeto HttpRequest o similar. Debido a la alta interactividad, el dispositivo móvil necesita de mayor capacidad de cómputo.

44 MobileOK Es un esquema comprendido por dos etiquetas llamadas mobileOK Nivel 1 y Nivel 2. Estas etiquetas indican que el contenido pasa las pruebas de “Mobile Web Best Practices”. Las de nivel 1 contienen las recomendaciones básicas para una experiencia efectiva de la Web en usuarios móviles. Las de nivel 2, necesitan ser verificadas por humanos (en algunos) casos pero ayudan a la mejor visualización de la Web en dispositivos móviles.

45 Diseño accesible de páginas Web
La accesibilidad es la propiedad de poder visualizar una página Web sin importar las discapacidades de las personas. Los dispositivos móviles se consideran dispositivos con capacidades limitadas por que algunos están ciegos (no ven imágenes o si las ven son monocromáticas), mudos (no tienen altavoz), capacidades de pensar (memoria), etc.

46 Diseño accesible de páginas Web
Existe actualmente una tendencia por certificar procesos en todas las áreas. Si nuestra página Web cumple con ciertos requisitos puede certificarse y poner algún distintivo que lo muestre (logo) La WAI (Web Accesibilty Iniative) es la parte del W3C que se encarga de la accesibilidad a los recursos de la Web.

47 Diseño accesible de páginas Web
La WAI define tres prioridades: En la prioridad uno, los desarrolladores TIENEN que cambiar para hacer accesible su sitio Web. En la prioridad dos, se DEBEN satisfacer los cambios. En la prioridad tres, PUEDEN satisfacerse los cambios.

48 Diseño accesible de páginas Web
El nivel adecuación A, cumple la prioridad 1, el AA cumple 1 y 2; mientras que AAA cumple las tres prioridades. Existen logotipos para certificar estos niveles de adecuación. Existen otras certificaciones de accesibilidad como el 508, recomendaciones y buenas prácticas, MobileOK, etc.

49 MobileOK La etiqueta de validación puede ser un logo o un documento en RDF. Se sugiere la inclusión del siguiente encabezado HTTP: User-Agent: W3C mobileOK DDC ( Accept: application/vnd.wap.xhtml+xml, application/xhtml+xml

50 MobileOK Características de Nivel 1
Auto refresco de página: Si está presente la etiqueta <meta http-equiv="refresh" content="(URI)"/>, el documento falla. Soporte para caracteres de codificación: Si el documento no define un tipo de codificación o no viene incluido en la respuesta (Content-Type) se define una alarma.

51 MobileOK Si el documento tiene definido un tipo de codificación pero es diferente de “UTF-8”, la prueba falla. Soporte del formato del contenido: Si el tipo MIME del documento no es application/vnd.wap.xhtml+xml o application/xhtml+wml, la prueba falla.

52 MobileOK Si el identificador DOCTYPE PUBLIC no es XHTML Basic ("-//W3C//DTD XHTML Basic 1.1//EN" or "-//W3C//DTD XHTML Basic 1.0//EN”) falla. Para cada etiqueta img, link o style, si el tipo MIME del recurso enlazado es diferente de text/css, image/png o image/gif, la prueba fallará. Mapa de imágenes: Si una etiqueta map o area está presente, la prueba falla.

53 MobileOK Gráficos para espaciado: Para cada etiqueta img, si la imagen es de dimensiones 2 píxeles o menor, y los píxeles son transparentes, se viola la norma. Tamaño de las imágenes: Para cada etiqueta img si no está definida el atributo height y width se lanza una alarma.

54 MobileOK Métricas No marcos Alternativas no texto
Para cada hoja de estilo CSS o etiqueta style, Ssi las medidas son absolutas (“px”, “pt”, “pc”, “in”, “cm”, “mm”), no pasará la certificación. No marcos Si el documento contiene las etiquetas: frame, framset, o iframe; no se certificará. Alternativas no texto Para cada etiqueta img si el atributo alt no está presente, la prueba no pasará.

55 MobileOK Objetos y scripts Tamaño límite de la página
Si una etiqueta script, object o applet está presente, el documento no se certificará. Tamaño límite de la página Si el documento es mayor de 10 KB, no pasará la prueba. Si el tamaño total del documento incluyendo hojas de estilo e imágenes sobrepasa 20 KB, tampoco se certificará con el logo de mobileOK.

56 MobileOK Título de la página Ventanas desplegables (Pop-ups)
Si la etiqueta title no está presente dentro del head del documento, no se acreditará el test. Ventanas desplegables (Pop-ups) Para cada etiqueta a, si el elemento target está presente, la prueba no pasará. Proveer valores predeterminados Para cada etiqueta input si type=radio se debe verificar que exista un atributo checked, de lo contrario no pasará la prueba.

57 MobileOK Para cada etiqueta input del tipo type=”select” para cada etiqueta option se deberá verificar que exista un elemento con la propiedad selected, de lo contrario, el sistema fallará. Tamaño de las hojas de estilo El tamaño de una hoja de estilo no deberá exceder los 5 KB.

58 MobileOK Uso de hojas de estilo Despliegue de tablas
Si el atributo style no está presente en el documento, la prueba fallará. Despliegue de tablas Si la etiqueta table existe, para cada etiqueta td anidada si la etiqueta está vacía o contiene una imagen de 1x1 píxeles, no acreditará el test de certificación.

59 MobileOK Tablas anidadas Validación de marcado
Si dentro de una etiqueta table, existe por lo menos otra etiqueta table, la prueba de validación no se acreditará. Validación de marcado Si el documento no basa la prueba de validación de acuerdo a su DOCTYPE o esquema XSD, no se certificará.

60 MobileOK Características del nivel de certificación mobileOK nivel 2
Estas características son adicionales a mobileOK nivel 1. Eliminar texto libre Si el documento no tiene una etiqueta input type=”text” o textarea, la prueba pasará.

61 MobileOK Legibilidad de imagen de fondo Caching
Para cada etiqueta style u hoja de estilo, si está presente la propiedad background-image, se deberá verificar por humanos para validar el test. Caching Si el encabezado de respuesta no contiene un encabezado Cache-Control, no se acreditará la prueba.

62 MobileOK Cookies Fuentes
Si la respuesta no contiene un encabezado Set-Cookie, se acreditará la prueba. Fuentes Para cada etiqueta style u hoja de estilo, si las propiedades relacionadas con tipos de letras están presentes (font, font-family, font-weight, etc.) se procede con las pruebas humanas.

63 MobileOK Scrolling Estructura
Para cada etiqueta img, style u oja estilo si el atributo width excede de 120, la prueba fallará. Estructura Para cada elemento h1, h2, h3, etc., si existe un elemento anidado h1, h2, h3, etc., se deberá verificar que sea menor o igual a su padre.

64 Diseño de Mapa de Sitio Malo Bueno
This is an illustration of a sitemap created for the traditional web access from a desktop versus a sitemap created for accessing the web through a mobile device. Bueno

65 Conclusiones IF tengo un buen celular THEN programo en HTML o XHTML (normal) ELSE IF mi celular es de gama media reciente THEN Programo en XHTML MP o XHTML Basic ELSE IF es digital mi celular THEN programo en WML ELSE Tira tu celular END IF

66 Actividades Realiza un micrositio en WML que describa tu página personal, tu baraja deberá contener tres cartas. Realiza un micrositio personal en XHTML MP (auxíliate de herramientas como Dreamweaver –ya tiene herramientas de fácil conversión de XHTML a XHTML MP-)

67 Referencias Robison, D. and Pagna, J., (2008) , Wap 2.0 Mobile Web: XHTML Mobile Profile. Kantor, P. (2006), XHTML, Desert Code 2006. Skelton, G., Excell, P., Robison, D. and Taj, I. (2008) XHTML Basic and XHTML-MP. Ingram, M. (2008) Mobile Devices: Driving Standards for a “New” Web.

68 ¿Preguntas?