tecnologías web en dispositivos...

Instituto Tecnolgico Superior de Huetamo

Huetamo, Michoacn, Mxico a 16 de Marzo de 2007

Tecnologas Web en Dispositivos Mviles

M.C. Juan Carlos Olivares Rojas

Agenda Introduccin

Problemtica de la Web en dispositivos mviles

Pasado y presente de la Web mvil

Futuro de la Web Mvil

Conclusiones

Introduccin En el 2000, el paradigma cambi a: un usuario,

mltiples computadoras.

La Web ha resultado ser una revolucin en los medios de comunicacin como lo fue la radio y la televisin.

Actualmente, se necesita acceder a la Web de manera ubicua, en todo momento e independiente del dispositivo y esto se logra a travs de los dispositivos mviles.

Dispositivos empotrados

Dispositivos de cmputo mvil

SmartphoneSmartphone

CommunicatorCommunicator

PalmSizePalmSize

HandheldHandheldTabletTabletNotebookNotebook

LaptopLaptop

Movili

dad

(tam

ao)

Propsito primario de usoComunicacin Procesamiento de datos

PalmSizePalmSize

Tendencias de acceso a Internet Para el 2010, los dispositivos mviles

reemplazarn a las computadoras como medio de acceso a Internet en Amrica latina.

Para el ao 2009, ms de la mitad de los microprocesadores fabricados en el mundo estarn destinados a dispositivos mviles.

Los dispositivos mviles pasarn a ser una extensin de la televisin

FUENTE: http://www.libre-comercio.com/.

Introduccin

Grado de penetracin de los dispositivos mviles en nuestra sociedad

Llaves

0%

Cartera

Celulares

Tarjetas

Llaves del trabajo

Peridico

Espejo

MP3/Walkman

Videojuego

Cmara

Credenciales

80% 90% 100%50% 60% 70%10% 20% 30% 40%

Siempre

Frecuentemente

Introduccin

Fuente Cofetel Abril 2006

2007 56 millones

Aplicaciones Web mviles No es necesario distribuir ni instalar ninguna

aplicacin.

Se pueden realizar clculos y algoritmoscomplejos dado que la ejecucin se realiza en el servidor.

Los navegadores Web se convierten en clientes universales

Agenda Introduccin




Conclusiones

Introduccin

Tipos de conexin a Internet en Mxico.

Fuente: Asociacin Mexicana de Internet AMIPCI

Por qu el acceso a la Web desde dispositivos mviles en

nuestro pas es muy bajo?

Problemtica

Los sitios Web noestn diseadostomando en cuenta las caractersticas y limitaciones de los dispositivos mviles

800

600

Dispositivos mviles

Problemtica

Problemtica

Muchos de los recursosexistentes en la Web no pueden visualizarse en dispositivos mviles, por que no son accesibles. Esto ha originado que la Webno sea ubicua y que est fragmentada.

10 m70 - 150 m35 KmRango

2.4 GHz2.4 y 5 GHz

Infrarrojos

0.9/1.8/2.1 GHz

Frecuencia

721 Kb/s1, 2, 11, 54

Mb/s9.6/170/2000

Kb/sAncho de

Banda

IEEE 802.15IEEE

802.11b/g/aGSM/GPRS/E

vDoEstndar

WPAN

(Bluetooth)

WLAN

(WirelessLAN)

WWAN

(Celulares)Tipo de red

Redes inalmbricas

Problemtica

$63$33.122120285Total

$13.5$9.7249581.0Enviar un correo con una nota y un archivo

adjunto de 50 KB

$12$9.2445576.1Ver pgina Web de 70 KB

$3$1.567412.2Reenviar un correo 9 KB

$3$1.447411.8Recibir un correo (9 KB)

$10.5$8.7637272.4Descargar una archivo PDF (68k)

$1.5$0.84426.7Cargar pgina Web

$4.5$0.841276.3Bsqueda de un restaurante y men

$3$0.721005.9Buscar un numero en un directorio

$3$0.721095.4Resultados de los partidos del ftbol

$4.5$0.481533.7Buscar una pelcula y ver su sinopsis

$3$0.24922Leer noticias

CSDGPRSTiempo (Segs.)

Tamao (KB)Tarea

CSD: $1.5 minutoGPRS: $0.12 KB

Telcel

Costos

Costos de acceso a Internet en Mxico desde un dispositivo mvil haciendo uso de la red de telefona celular.

Sistemas Operativos PalmOS

Windows CE (Windows Mobile)

Symbian

Linux embedded

RIMOS

Navegadores Web Pocket Internet Explorer

NetFront

Opera mini

Minimo(mozilla)

Konqueror

Agenda Introduccin




Conclusiones

Web World Wide Web (www) 1991

Originalmente un servidor de archivos distribuidos (hipertexto).

Basado en la arquitectura cliente/servidor.

Actualmente se puede considerar a la Web como un servidor de aplicaciones.

Versiones de HTML HTML 1.0: Hipervnculos, imgenes, listas.

HTML 2.0: Mapas activos, formularios

HTML 3.0: Ecuaciones, tablas

HTML 4.0: caractersticas de accesibilidad, incrustacin de objetos y secuencia de comandos

HTTP

GET, HEAD, PUT, POST, DELETE, TRACE, CONNECT, OPTIONS

GET nombrearchivo HTTP/1.1

Cdigos de regreso: 1xx informativos, 2xx xito, 3xx redireccin, 4xx Error del cliente, 5xx error del servidor

Encabezado de peticion HTTP

GET http://www.cenidet.edu.mx/ HTTP/1.0

Accept: */*

UA-OS: Windows CE (Pocket PC) Version 3.0

UA-Color: Color16

UA-Pixeles: 240x320

UA-CPU: ARM SA1110

UA-Voice: False

UA-Language: Mozilla/2.0

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/2.0 (Compatible; MSIE 3.02; Windows CE; PPC; 240x320)

Host: www.itmorelia.edu.mx

Proxy-Connection: Keep-Alive

X-Transform: XHTML-MP; Partial

Encabezado de una peticin HTTP en un dispositivo Pocket PC

Encabezado de respuesta HTTP

HTTP/1.1 200 Ok

Server: itsh.edu.mx

Content-Type: text/html

Content-Length: 8545

.

Tipos MIME

image/pngimage/vnd.wap.png

Imagen.PNGPNG

image/vnd.wap.wbmpImagen.WBMPWBMP

image/jpgImagen.JPG/.JPEGJPEG

image/gifImagen.GIFGIF

application/xhtml+xmlText/xml

Texto.XHTML/HTMLXHTML

text/htmlTexto.IHTML/.CHTMLcHTML

text/htmlTexto.HTM/.HTMLHTML

text/vnd.wap.wmlscriptTexto.WMLSWMLScript

text/vnd.wap.wmlText/xml

Texto.WMLWML

FORMATOS MIMETIPOS DE CONTENIDO

EXTENSIN DEL ARCHIVO

FORMATO

Recursos ms empleados en dispositivos mviles.

Pasado Tecnologas propietarias no compatibles entre s

como:

HDML (Handheld Device Markup Language)

cHTML (compact HTML)

cHTML aun es utilizado ampliamente en Japn en el sistema iMode.

Un grupo de empresas crearon el WAPForum ahora Open Mobile Alliance para solucionar la problemtica de la Web mvil

Presente (WAP) WAP (Wireless Access Protocol) es una pila

de protocolos para acceder a la Web, optimizada para conexiones inalmbricas 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)

WML Se basa en XML para definir un documento que sea

compatible con los dispositivos mviles.

Maneja el concepto de cartas en lugar de pginas. Los documentos se estructuran en barajas, donde una baraja contiene varias pginas.

WML contiene etiquetas bsicas de texto, enlace, imgenes, tablas, etc. con algunas restricciones.

WML

Ir a la segunda pantalla

Segunda Pantalla

WML WML tiene su propio lenguaje de script

llamado WMLScript

Las imgenes que utiliza estn en formato WBMP que son imgenes en mapa de bits monocromtico

WAP y WML no fueron muy utilizados debido a que era como ver TV en blanco y negro

Pginas dinmicas En muchas ocasiones es necesario

determinar en tiempo de ejecucin algunas caractersticas del dispositivo mvil para personalizar el contenido, esto se puede hacer con lenguajes como:

PHP

ASP

JSP

Pginas dinmicas

Redireccin de un sitio

Agenda Introduccin




Conclusiones

WAP 2.0 Debido a las limitaciones de WAP, surgi una

nueva versin del protocolo que al parecer permitir despegar la Web mvil.

Modelo push (de actualizacin automtica) y modelo pull (de recepcin automtica)

Soporte para integrar telefona en las aplicaciones

Comparativa WAP 1.0 y 2.0 WML XHTML

WSP HTTP

WTP TLS

WTLS TCP

WDP IP

Capa del portador (TDMA, GSM, GPRS, CDMA, etc.)

XHTML Son documentos HTML que siguen la sintaxis

de cualquier documento basado en XML.

El origen de XHTML surge a partir de las ambigedades que presenta HTML como lenguaje, ayuda a estructurar de mejor forma la Web.

XHTML Basic Es un subconjunto de etiquetas de XHTML

que han sido probadas en dispositivos mviles

XHTML-MP (Mobile Profile) es una especificacin de Nokia seguida por otras compaas que utilizan XHTML Basic sobre dispositivos mviles.

Por fin lleg el color a la Web mvil!

Pgina Web con XHTML-MP

XHTML-MP

Web 2.0 Utilizan conocimiento colectivo a travs de la

participacin de los usuarios.

Proporcionan servicios interactivos en red.

Buscan mejorar la experiencia del usuario.

Explotan el factor social de la Web, centrndose en el usuario final.

Comparativa Web 1.0 y Web 2.0 Web 1.0 Web 2.0

Britannica Wikipedia

Sitios personales Blogs

CMS Wikis

Google Earth

Yahoo mail! (Rich Internet Application)

Youtube (Mashup Composite Model)

Vistas previas de pginas Web

Fundamentos Web 2.0

Utilizacin de los estndares XML (XHTML)

Uso de hojas de estilo

Sindicacin de contenidos ( RSS )

AJAX (Asincronous Javascript And XML).

Web 2.0 en dispositivos mviles An es muy joven est tecnologa y en

dispositivos mviles apenas se empieza.

El navegador Web en el dispositivo mvil tiene que soportar el objeto HttpRequest o similar.

Debido a la alta interactividad, el dispositivo mvil necesita de mayor capacidad de cmputo.

Servicios Web Un servicio Web consiste en una funcin

disponible en un servidor conectado a la Web.

Esta funcin puede consistir en cualquier cosa: Realizar un simple clculo con unos datos

que se le envan como parmetro

El servicio Web podr ser solicitado desde cualquier otro programa conectado a la Web.

Modelo de servicios Web

Servicios SOServiciosServicios SOSO

Browsersestndar

BrowsersBrowsers

estestndarndarDispositivos

mviles

DispositivosDispositivos

mmvilesvilesClientes

ricos

ClientesClientes

ricosricos

Lgica aplicacinLLgicagica aplicaciaplicacinn

Servicios WebServiciosServicios WebWeb

Otrosservicios

OtrosOtros

serviciosservicios

Formularios WebFormulariosFormularios WebWeb

XMLXML

Ejemplo de servicio Web

Cliente del servicio

using System;

class ClienteFecha{

public static void Main(){

ServicioFecha s = new ServicioFecha();

Console.WriteLine(Fecha actual: {0}, s.Fecha(false));Console.WriteLine(Fecha actual detallada: {0},

s.Fecha(true));}

}

Mobile Web Forms Estn basados en tecnologa ASP .NET

Son formularios genricos (clases) que dependiendo del tipo de dispositivo se adaptan a las caractersticas de ste.

Este tipo de independencia de dispositivo e interfaz es similar al mostrado por los struts de Java que se basan en el patrn arquitectnico MVC (Modelo-Vista-Controlador).

XML/XSL La idea es mantener datos y presentacin de

manera aparte

CRitchie2003

DIAL Device Independent Authoring Language,

Lenguaje de diseo independiente del dispositivo, es un nuevo estndar propuesto por el W3C para el diseo de contenido Weben dispositivos mviles.

Est basado en el nuevo estndar XHTML 2.0y DISelect (Seleccin de contenidos para dispositivos independientes) para permitir la adaptacin de la entrega de contenidos en mltiples plataformas.

Otras tecnologas Flash Lite es una versin de flash diseada para

dispositivos mviles

SVG (Sacalable Vector Graphics) es un formato de grficos vectoriales basado en XML. Reduce mucho el tamao de las imgenes

SMIL (Synchronized Multimedia IntegrationLanguage) es un lenguaje de multimedia basado en XML.

Diseo accesible de pginas Web La accesibilidad es la propiedad de poder

visualizar una pgina Web sin importar las discapacidades de las personas.

Los dispositivos mviles se consideran dispositivos con capacidades limitadas por que algunos estn ciegos (no ven imgenes o si las ven son monocromticas), mudos (no tienen altavoz), capacidades de pensar(memoria), etc.

Diseo accesible de pginas Web Existe actualmente una tendencia por

certificar procesos en todas las reas.

Si nuestra pgina Web cumple con ciertos requisitos puede certificarse y poner algn 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.

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 bsicas para una experiencia efectiva de la Web en usuarios mviles.

MobileOK Las de nivel 2, necesitan ser verificadas por

humanos (en algunos) casos pero ayudan a la mejor visualizacin de la Web en dispositivos mviles.

La etiqueta de validacin puede ser un logo o un documento en RDF.

MobileOK Caractersticas de Nivel 1

Auto refresco de pgina: Si est presente la etiqueta , el documento falla.

Soporte para caracteres de codificacin Si el documento no define un tipo de codificacin o

no viene incluido en la respuesta (Content-Type) se dispara una alarma.

MobileOK Si el documento tiene definido un tipo de

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

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 MIMEdel recurso enlazado es diferente de text/css, image/png o image/gif, la prueba fallar.

Mapa de imgenes Si una etiqueta map o area est presente, la prueba

falla.

MobileOK Grficos para espaciado

Para cada etiqueta img, si la imagen es de dimensiones 2 pxeles o menor, y los pxelesson transparentes, se viola la norma.

Tamao de las imgenes

Para cada etiqueta img si no est definida el atributo height y width se lanza una alarma.

MobileOK Mtricas Para cada hoja de estilo CSS o etiqueta style, si las

medidas son absolutas (px, pt, pc, in, cm, mm), no pasar la certificacin.

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.

MobileOK Objetos y scripts

Si una etiqueta script, object o applet est presente, el documento no se certificar.

Tamao lmite de la pgina

Si el documento es mayor de 10 KB, no pasar la prueba.

Si el tamao total del documento incluyendo hojas de estilo e imgenes sobrepasa 20 KB, tampoco se certificar.

MobileOK Ttulo de la pgina 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.

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.

Tamao de las hojas de estilo

El tamao de una hoja de estilo no deberexceder los 5 KB.

MobileOK Uso de hojas de estilo 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 estvaca o contiene una imagen de 1x1 pxeles, no acreditar las pruebas.

MobileOK Tablas anidadas Si dentro de una etiqueta table, existe

por lo menos otra etiqueta table, la prueba de validacin no se acreditar.

Validacin de marcado Si el documento no pasa la prueba de

validacin de acuerdo a su DOCTYPE o esquema XSD, no se certificar.

MobileOK Caractersticas del nivel de certificacin

mobileOK nivel 2

Estas caractersticas son adicionales a mobileOK nivel 1.

Eliminar texto libre

Si el documento no tiene una etiqueta inputtype=text o textarea, la prueba pasar.

MobileOK Legibilidad de imagen de fondo

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 acreditarla prueba.

MobileOK Cookies 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 estn presentes (font, font-family, font-weight, etc.) se procede con las pruebas humanas.

MobileOK Scrolling

Para cada etiqueta img, style u hoja 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.

Agenda Introduccin




Conclusiones

Conclusiones La Web y en general los dispositivos mviles

estn en fases aun preliminares, pero ya ocupan un espacio importante en la sociedad

La Web ubicua, independiente del dispositivo, disponible en todo momento y en cualquier lugar ya es una realidad

Slo falta trabajar, trabajar, trabajar

Preguntas? E-mail: [email protected]

MSN: [email protected]

http://antares.itmorelia.edu.mx/~jcolivar/

GRACIAS!

tecnologías web en dispositivos...

Documents