Ecom mcommerce by Juan Carlos Olivares Rojas

M-Commerce M.C. Juan Carlos Olivares Rojas

Proyecto

• Adaptación de nuestro sitio Web (proyecto anterior) para que se adapte a nuestro celular (XHTML normal o en su versión para móviles, WML, etc.) • Se verificará que se tenga acceso a tecnologías asíncronas como AJAX.

Agenda Introducción Teconologías Web móviles Aplicaciones Móviles (J2ME / Localización) Investigación y tendencias

Introducción

• El comercio electrónico móvil (m-commerce) es la aplicación de TICs basadas en dispositivos móviles y empotrados que permiten abrir nuevos medios y mercados para el intercambio de bienes servicios. • Esta área ha tenido un auge debido al fuerte aumento del cómputo persuasivo.

M-commerce y M-business

Introducción

• En el pasado (50s-60s) el paradigma de la computación fue: “una computadora, múltiples usuarios”. • A finales de los 70s-80s el paradigma cambió a: “un usuario, una computadoras”. • A finales de los 80s-90s el paradigma fue: “múltiples usuarios, múltiples computadoras”.

Introducción

• En el 2000, el paradigma cambió a: “un usuario, múltiples computadoras”. • La Web ha resultado ser una revolución en los medios de comunicación como lo fue la radio y la televisión. • Actualmente, se necesita acceder a la Web de manera ubicua, en todo momento e independiente del dispositivo y esto se logra a través de los dispositivos móviles.

Dispositivos empotrados

Dispositivos de cómputo móvil Smartphone Smartphone Communicator Communicator PalmSize PalmSize Handheld Handheld Tablet Tablet Notebook Notebook Laptop Laptop

dadili v o M ) oña mat (

PalmSize

Comunicación

Propósito primario de uso Procesamiento de datos

Tendencias de acceso a Internet

• Para el 2010, los dispositivos móviles reemplazarán 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 FUENTE: http://www.libre-comercio.com/.

Introducciรณn Llaves Cartera Celulares Credenciales Tarjetas Llaves del trabajo Periรณdico Espejo MP3/Walkman Videojuego Cรกmara 0%

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

Grado de penetraciรณn de los dispositivos mรณviles en nuestra sociedad

Justificación

• Para el 2010 se espera 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).

Estadísticas

Introducci贸n

2007 56 millones

Fuente Cofetel Abril 2006

Justificación

• “Para el año 2009, 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. Estadísticas

Aplicaciones Web móviles

• No es necesario distribuir ninguna aplicación.

instalar

• 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

006

800

Problemática Los sitios Web no están diseñados tomando en cuenta las características y limitaciones de los dispositivos móviles

Dispositivos m贸viles

Problem谩tica

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.

Problemรกtica

Pรกgina Web realizada especialmente para dispositivos mรณviles

Redes inalรกmbricas Tipo de red

WWAN (Celulares)

WLAN (Wireless LAN)

WPAN (Bluetooth)

Estรกndar

GSM/GPRS/E vDo

IEEE 802.11b/g/a

IEEE 802.15

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

70 - 150 m

10 m

Costos Problemática CSD: $1.5 minuto Tamaño Tiempo TareaKB (KB) (Segs.) GPRS: $0.12 Leer noticias 2 92 Telcel

GPRS

CSD

$0.24

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

$0.72

Búsqueda de un restaurante y menú

6.3

127

$0.84

$4.5

Cargar página Web

6.7

$0.84

$1.5

Descargar una archivo PDF (68k)

72.4

372

$8.76

$10.5

Recibir un correo (9 KB)

11.8

$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 Costos de acceso a Internet en México desde un dispositivo móvil haciendo uso de la red de telefonía celular.

• PalmOS

Sistemas Operativos

• Windows CE (Windows Mobile) • Symbian • Linux embedded • RIMOS

Navegadores Web

• Pocket Internet Explorer • NetFront • Opera mini • Minimo(mozilla) • Konqueror

Otros problemas •

Mucho mantenimiento del sitio al tener diversas versiones del mismo.

•

Más carga del servidor.

•

Más ancho de banda requerido.

•

… Beneficios directos

HTTP • GET, HEAD, PUT, POST, DELETE, TRACE, CONNECT, OPTIONS • GET nombrearchivo HTTP/1.1 • Códigos de regreso: 1xx informativos, 2xx éxito, 3xx redirección, 4xx Error del cliente, 5xx error del servidor

Encabezado

• User-Agent, Accept, Host, Cookie, Date, Server, Content-Length, Contet-Type, Last-Modified • Si existe el recurso se devuelve al cliente HTTP/1.1 200 Ok Content-Length: <html> …. </html>

Encabezado HTTP GET http://www.cenidet.edu.mx/ HTTP/1.0 Accept: */* UA-OS: Windows CE (Pocket PC) 窶天ersion 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 peticiﾃｳn HTTP en un dispositivo Pocket PC

Tipos MIME

FORMATO

EXTENSIÓN DEL ARCHIVO

TIPOS DE CONTENIDO

FORMATOS MIME

WML

.WML

Texto

Text/vnd.wap.wml Text/xml

WMLScript

.WMLS

Texto

Text/vnd.wap.wmlscript

HTML

.HTM/.HTML

Texto

Text/html

cHTML

.IHTML/.CHTML

Texto

Text/html

XHTML

.XHTML/HTML

Texto

Application/xhtml+xml Text/xml

GIF

.GIF

Imagen

Image/gif

JPEG

.JPG/.JPEG

Imagen

Image/jpg

WBMP

.WBMP

Imagen

Image/vnd.wap.wbmp

PNG

.PNG

Imagen

Image/png Image/vnd.wap.png

Recursos más empleados en dispositivos móviles (I).

Tipos MIME

FORMATO

EXTENSIร N ARCHIVO

MPEG

.MPG/.MPEG

Video

Video/mpeg Video/mpeg4generic

Windows Media Video

.WMV

Video

Video/x-ms-wmv

Real video

.RV

Video

Video/vnd.rn-realvideo

MP3

.MP3

Audio

Audio/mp3 Audio/x-mp3

MIDI

.MIDI

Audio

Audio/midi

Windows Media Audio

.WMA

Audio

Audio/x-ms-wma

Real Audio

.RA

Audio

Audio/vnd.rn-realaudio

Archivo de instalaciรณn de Windows

.CAB

Aplicaciรณn

Application/cab

Cascading Style Sheets

.CSS

Otros

Text/css

Contacto de Agenda

.VCF

Otors

Text/x-vcard

Otros

Text/x-vcalendar

Contacto de Calendario

DEL

TIPOS CONTENIDO

FORMATOS MIME

Recursos mรกs empleados en dispositivos mรณviles (y II).

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

Convergencia de Lenguajes de Marcado 1998

WAP

1999

2000

WAP 1.x3.2 HTML C-HTML

XHTML Basic + WML

HTML 4.0 XHTML 1.0

i-mode XML

2002

HDML WML

HTML

2001

XML 1.0

XHTML Basic

WAP 2.x

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)

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)

WAP Architecture

• Nokia WAP SDK

WAP Tools

• WinWAP • MobileDev • Nokia WML Studio for Macromedia Dreamweaver • Ericsson WAPIDE • IBM WAPSody

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.

Hola mundo! En WML â&#x20AC;˘ A Simple WML file

Standard header for WML 1.1 files

<?xml version='1.0'?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="First_Card" title="First Card"> <p> Welcome to WML! </p> </card> </wml>

WML

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.WAPforum.org/DTD/wml_1.1.xml"> <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>

Formularios en WML

<?xml version='1.0'?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="Login" title="Login"> <do type="accept" label="Password">Login Card - the first card <go href="#Password"/> here </do> Go to Password card <p> when user selects it UserName: <select name="name" title="Name:"> Select menu â&#x20AC;&#x201C; a <option value="Charlene">Charlene</option> common control in <option value="Gillian">Gillian</option> WML <option value="Rosanne">Rosanne</option> <option value="Race">Race</option> </select> </p> </card>

(continued from previous slide) The Password card

<card id="Password" title="Password:"> <do type="accept" label="Results"> <go href="#Results"/> </do> <p> Password: <input type="text" name="password"/> </p> </card> The Results card <card id="Results" title="Results:"> <p> You entered:<br/> Name: $(name)<br/> Password: $(password)<br/> </p> </card> </wml>

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”

Un ejemplo de WMLScript <?xml version='1.0'?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="Phone" title="Phone:"> <do type="accept" label="Results"> <go href="example4.wmls#validate($(Phone))"/> </do> <p> Enter phone: <input type="text" name="Phone"/> </p> </card> <card id="Results" title="Results:"> <p> You entered:<br/> Phone: $(Phone)<br/> </p> </card> </wml>

Un ejemplo de WMLScript extern function validate(Phone) { if (String.length(Phone) != 8) { WMLBrowser.setVar("Phone", "Error: Phone not correct."); } WMLBrowser.go("example4.wml#Results"); }

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

Páginas dinámicas

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ "http://www.WAPforum.org/DTD/wml_1.1.x ml"><wml><card id=“volados" title=“juegos"> <p> <% if (Math.random() < 0.5) { %> <b> Ganaste </b> <% } else { %> <b> Perdiste</b> <% } %> </p> </card> </wml>

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 aplicaciones

integrar

telefonía

las

Comparativa WAP 1.0 y 2.0

• WML • • • •

WSP WTP WTLS WDP

XHTML

HTTP TLS TCP IP

• Capa del portador

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.

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!

Pรกgina Web con XHTML-MP

• • • • • • • • • • •

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

XHTML-MP

<?xml version="1.0" encoding=“ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.openmobilealliance.org/tech/D TD/xhtml-mobile10.dtd"> <html> <head><title>Inst. Tec. Sup. Huetamo<title></head> <body><p>Tecnológicos: <a href="http://itm.mx/"> Inst. Tec. de Morelia</a></p></body></html>

Estilo de Fuentes <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>

XHTML

Mobile

1.0//EN"

Listas <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>

Tablas

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

Ejemplo de Accesibilidad <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN" "http://www.openwave.com/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>XHTML Samples</title> </head> Quick access key <body> <ol> <li><a accesskey="1" href="inbox.html">Check emails</a></li> <li><a accesskey="2" href="movies.html">Movies Info</a></li> <li><a accesskey="3" href="about.html">About</a></li> </ol> </body> </html>

Uso de estilos <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <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>

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;}

Web 2.0

• Utilizan conocimiento colectivo a través de la participación de los usuarios. • Proporcionan servicios interactivos en red. • Buscan mejorar la experiencia del usuario. • Explotan el factor social de centrándose en el usuario final.

Web,

Comparativa Web 1.0 y Web 2.0

• Web 1.0 • • • • •

Ofoto Britannica Sitios personales Page views CMS

Web 2.0

Flickr Wikipedia Blogs Cost per click Wikis

Otras aplicaciones Web 2.0 • Google Earth • Yahoo mail! (Rich Internet Application) • Youtube (Mashup Composite Model) • Vistas previas de páginas

Fundamentos Web 2.0 • Utilización de los estándares XML (XHTML) • Uso de hojas de estilo • Sindicación de contenidos ( RSS ) • AJAX (Asincronous Javascript And XML).

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.

Mobile Web Forms

• Están basados en tecnología ASP .NET • Son formularios genéricos (clases) que dependiendo del tipo de dispositivo se adaptan a las características de éste. • Este tipo de independencia de dispositivo e interfaz es similar al mostrado por los struts de Java que se basan en el patrón arquitectónico MVC (Modelo-Vista-Controlador).

DIAL

• Device Independent Authoring Language, Lenguaje de diseño independiente del dispositivo, es un nuevo estándar propuesto por el W3C para el diseño de contenido Web en dispositivos móviles. • Está basado en el nuevo estándar XHTML 2.0 y DISelect (Selección de contenidos para dispositivos independientes) para permitir la adaptación de la entrega de contenidos en múltiples plataformas.

DIAL

Otras tecnologías

• Flash Lite es una versión de flash diseñada para dispositivos móviles • SVG (Sacalable Vector Graphics) es un formato de gráficos vectoriales basado en XML. Reduce mucho el tamaño de las imágenes • SMIL (Synchronized Multimedia Integration Language) es un lenguaje de multimedia basado en XML.

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.

Formas de redirección

•

En la actualidad, es importante que los usuarios pueda ver recursos Web acorde al tipo de dispositivo utilizado; por ejemplo: google

•

Dar la URL directamente http://www.mistio.com/index.wml)

(

•

Crear un subdominio del http://wap.misitio.edu.mx)

(

sitio.

Formas de redirección

• Utilizar un Proxy para redireccionar. (Revisar encabezados: User-Agent y Accept). • Utilizar páginas dinámicas para redireccionar dependiendo del perfil del dispositivo. • La mejor opción consiste en realizar la redirección desde el propio servidor Web.

Redirecciรณn de un sitio โ ข El paso final consiste en modificar el archivo httpd.conf del servidor Apache. En primer lugar se deberรก validar si el mรณdulo mod_rewrite estรก habilitado: LoadModule rewrite_module modules/mod_rewri te.so

Redirección de un sitio Web

• #Script para redireccionar paginas a WML • RewriteEngine on • #Dispositivos Windows Mobile • RewriteCond %{HTTP_USER_AGENT} "Windows CE" RewriteRule ^/$ /index.wml [L]

Patrones para redirección • PPC

• PlayStation

• PalmOS

• PDA

• Vodafone

• Motorola

• CHTML

• Blackberry

• NetFront

• ARM

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.

Diseño accesible de páginas Web

• Existe actualmente una tendencia certificar procesos en todas las áreas.

por

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

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.

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.

MobileOK

• La etiqueta de validación puede ser un logo o un documento en RDF. • Se sugiere la inclusión encabezado HTTP:

del

• User-Agent: W3C mobileOK DDC (http://www.w3.org/2006/07/mobileok-ddc) • Accept: application/vnd.wap.xhtml+xml, application/xhtml+xml

MobileOK

• Características de Nivel 1

• Auto refresco de página: • Si está presente la etiqueta <meta httpequiv="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.

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.

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.

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.

MobileOK

• Métricas • 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á.

MobileOK

• Objetos y scripts • 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.

MobileOK

• Título de la página • 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á. • Tamaño de las hojas de estilo • El tamaño de una hoja de estilo no deberá exceder 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 está vacía o contiene una imagen de 1x1 píxeles, no acreditará el test de certificación.

MobileOK

• Tablas anidadas • 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á.

MobileOK

• Características del nivel de certificación mobileOK nivel 2 • Estas características mobileOK nivel 1.

son

adicionales

• Eliminar texto libre • Si el documento no tiene una etiqueta input type=”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 acreditará la 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 están presentes (font, font-family, fontweight, etc.) se procede con las pruebas humanas.

MobileOK

• Scrolling • 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.

Dise単o de Mapa de Sitio

Malo

Bueno

Tipos de Aplicaciones Móviles

• Stand-alone (autónomas)

• Online (clientes ligeros, desarrollos Web móviles) • Smart client (aquellos sensibles al contexto)

que

son

Herramientas

• J2ME (Java 2 Micro Edition) • .NET Compact Framework

• Aplicaciones Nativas (C, C++): eMbedded Visual Tools: está conformada por eMbedded Visual Basic y eMbedded Visual C++. SDK de Symbian, etc.

.NET CF Controles ASP.NET Mobile P谩ginas Web remotas

Navegador Web m贸vil

Programaci贸n Smart Device

C贸digo Local

.NET Compact Framework

Sistema Operativo

J2ME

Linux embedded

Solución • Estudiar las capacidades y limitaciones de los dispositivos móviles para saber que se puede hacer en el dispositivo y que cosas son imposibles de implementar. • Desarrollar una interfaz adecuada que minimice las acciones por parte del usuario y que se adapte al tamaño de las pantallas de despliegue. Las interfaces deben ser intuitivas.

Solución

• El acceso a los datos debe de ser en forma estructurada utilizando XML, o bien si se permite un manejador de BD empotrado. • Utilizar herramientas de profiling para medir el rendimiento. • Hacer hincapié en el reuso.

101

Solución

• Utilizar servicios Web (SOA) para la implementación de los procesos de negocio. Esto permite consumirlo en diversas clases de aplicaciones. • Se debe construir tarde (entender todos los requerimientos). • Usar datos reales. Nada de datos de prueba, se necesitaría invertir dos veces más tiempo. 102

Solución

• Realizar refactorización de código para mantener las aplicaciones más entendibles o bien consumir menos espacio en aplicaciones Web. • Usar implementaciones emuladores.

reales.

utilizar

• Mezclar siempre programadores con probadores de software. Probar con muchos usuarios de distintos tipos.

Solución

• Evitar lo más posible el copy & paste (utilizar métodos de refactorización). • Tomar en consideración todos los warnigs, de preferencia tratarlos como errores. • Codificar con propósito. Realizar funciones que se van a ocupar. No realizar código de más.

104

Solución

• Se deben tomar en cuenta factores de usabilidad, accesibilidad y ergonomía de las interfaces de usuario. • Los mensajes de salida deben de ser breves. Se deben considerar interfaces en donde el usuario escriba menos. • Reducir el número de interfaces. Entre menos más fácil de usar y encontrar errores. 105

Solución

• Utilizar patrones de diseño en la solución. Se recomienda utilizar el patrón MVC (ModeloVista-Controlador). Existen muchos tipos de patrones para problemas conocidos.

Implementación del Patrón Singletón 106

Patrón MVC

Solución

• Activar las opciones de optimización de los compiladores que de manera predeterminada vienen desactivada por que lo hacen más lento. • Realizar código que sea portable utilizarlo en distintas plataformas.

para

• Las aplicaciones deben basarse en estándares (en Web utilizar MobileOk) 107

Solución

• Utilizar conexiones a las BD el menor tiempo posible (cerrar conexiones innecesarias) • De ser posible, utilizar procedimientos almacenados. Paginar los Recordsets. • Las aplicaciones para dispositivos móviles deben de estar optimizadas en dos aspectos cruciales: tamaño y velocidad. 108

Optimización del tamaño

• Evitar el uso de objetos siempre que sea posible. • Cuando usamos objetos, debemos reciclarlos siempre que se pueda. • Limpiar objetos explícitamente cuando se dejen de usar. Los recolectores de basura no son del todo eficientes.

109

Optimización del tamaño

• Usar un ofuscador para reducir tamaño y hacer ilegible nuestro código. • Realizar empaquetamiento de las clases a través de un archivo jar o mecanismos similares. • La optimización de velocidad es muy importante. A continuación se muestran ejemplos muy sencillos. 110

Optimización de velocidad

• Eliminar evaluaciones innecesarias: for(int i=0; i<size(); i++) a = (b+c) / i; • Optimizado: int tmp = b+c; int s = size(); for(int i=0; i<s; i++) a = tmp / i; 111

Optimización de velocidad

• Eliminar subexpresiones comunes: b = Math.abs(a) * c; d = e / (Math.abs(a) + b); • Optimizado: int tmp = Math.abs(a); b = tmp * c; d = e / (tmp + b); 112

Optimización de velocidad

• Aprovechar las variables locales: for (int i=0; i <1000; i++) a = obj.b * i; • Optimizado: int localb = obj.b; for (int i=0; i <1000; i++) a = localb * i; 113

Optimización de velocidad

• Expandir los ciclos: for(int i=0; i <1000, i++) a[i] = 25;

• Optimizado: for(int i=0; i <100; i++) { a[i++] = 25; a[i++] = 25; //8 veces más } 114

Optimización de velocidad

• Si se usan métodos gráficos solo actualizar las partes de la pantalla que cambian. • Evitar la creación de objetos intermedios. Por ejemplo: cada vez que se concatena una cadena se crea un objeto intermedio. En Java en lugar de String se recomienda StringBuffer. • Utilizar metodologías de software libre (ej. La Catedral y el Bazar de Erick S. Raymond) 115

J2ME • La edición Java 2 Micro Edition fue presentada en 1999 por Sun Microsystems con el propósito de habilitar aplicaciones Java para pequeños dispositivos. • En esta presentación, lo que realmente se enseñó fue una primera versión de una nueva Java Virtual Machine (JVM) que podía ejecutarse en dispositivos Palm.

J2ME • Java Micro Edition es la versión del lenguaje Java que está orientada al desarrollo de aplicaciones para dispositivos pequeños con capacidades restringidas tanto en pantalla gráfica, como de procesamiento y memoria (teléfonos móviles, PDA`s, Handhelds, Pagers, etc).

Versiones de Java

J2ME • Un entorno de ejecución de J2ME se compone de: • • • •

Máquina virtual. Configuración. Perfil. Paquetes Opcionales.

J2ME • Las diferentes tecnologías Java comparten un conjunto más o menos amplio de APIs básicas del lenguaje, agrupadas principalmente en los paquetes java.lang y java.io. • J2ME contiene una mínima parte de las APIs de Java. J2ME usa 37 clases de la plataforma J2SE provenientes de los paquetes java.lang, java.io, java.util.

J2ME • J2ME a diferencia de J2SE utiliza una máquina virtual distinta de la clásica JVM denominada KVM. • Esta KVM tiene unas restricciones que hacen que no posea todas las capacidades incluidas en la JVM. J2ME es un subconjunto de J2SE (excepto por el paquete javax.microedition).

J2ME • Las configuraciones, que son un conjunto de clases básicas orientadas a conformar el corazón de las implementaciones para dispositivos de características específicas. Existen 2 configuraciones definidas en J2ME: • Connected Limited Device Configuration (CLDC) enfocada a dispositivos con restricciones de procesamiento y memoria. La VM (Virtual Machine) de la configuración CLDC se denomina KVM.

J2ME

โ ข Connected Device Configuration (CDC) enfocada a dispositivos con mรกs recursos. La VM (Virtual Machine) de la CDC se denomina CVM.

J2ME • No hay soporte para tipos de punto flotante, no existen los tipos double ni float (MIDP 1.1). • No existe soporte para JNI (Java Native Interface). • Limitada capacidad para el manejo de excepciones • Reflexión.

J2ME

J2ME • La CVM (Compact Virtual Machine) ha sido tomada como Máquina Virtual Java de referencia para la configuración CDC y soporta las mismas características que la Máquina Virtual de J2SE. • Está orientada a dispositivos electrónicos con procesadores de 32 bits de gama alta y en torno a 2Mb o más de memoria RAM.

J2ME

NOMBRE DE PAQUETE CDC java.io java.lang java.lang.ref java.lang.reflect java.math java.net java.security java.security.cert java.text java.util java.util.jar java.util.zip javax.microedition.io NOMBRE DE PAQUETE CLDC java.io java.lang java.util javax.microedition.io

J2ME

DESCRIPCION Clases de interfaces estándar de E/S. Clases básicas del lenguaje. Clases de referencia. Clases e interfaces de reflection. Paquete de matemáticas. Clases e interfaces de red. Clases e interfaces de seguridad. Clases de certificados de seguridad. Paquete de texto. Clases de utilidades estándar. Clases y utilidades para archivos .JAR. Clases y utilidades para archivos ZIP y comprimidos. Clases e interfaces para conexión genérica CDC.

DESCRIPCION Clases y paquetes estándar de E/S. Subconjunto de J2SE. Clases e interfaces de la Máquina Virtual. Subconjunto de J2SE. Clases, interfaces y utilidades estándar. Subconjunto de J2SE. Clases e interfaces de conexión genérica CLDC.

J2ME

• Los perfiles identifican un grupo de dispositivos por la funcionalidad que proporcionan (electrodomésticos, teléfonos móviles, etc.) y el tipo de aplicaciones que se ejecutarán en ellos. • Las librerías de la interfaz gráfica son un componente muy importante en la definición de un perfil. Aquí nos podemos encontrar grandes diferencias entre interfaces, desde el menú textual de los teléfonos móviles hasta los táctiles de los PDAs.

J2ME

• Para la configuración CDC tenemos los siguientes perfiles: • Foundation Profile. • Personal Profile. • RMI Profile. • Para la configuración CLDC tenemos los siguientes: • PDA Profile. • Mobile Information Device Profile (MIDP).

J2ME

J2ME PAQUETES DEL FOUNDATION PROFILE java. Lang java.util java.net java.io java.text java.security

DESCRIPCION Soporte del lenguaje. Añade soporte completo para zip y otras funcionalidades (java.util.Timer) Incluye sockets TCP/IP y conexiones HTTP. Clases Reader y Writer de J2SE. Incluye soporte para internacionalización. Incluye códigos y certificados.

PAQUETES DEL PERSONAL PROFILE java. applet java.awt java.awt.datatransfer java.awt.event java.awt.font java.awt.im java.awt.im.spi java.awt.image java.beans javax.midlet.xlet

DESCRIPCION Clases necesitadas para crear applets o que son usadas por ello. Clases para crear GUIs con AWT. Clases e interfaces para transmitir datos entre aplicaciones. Clases e interfaces para manejar eventos AWT. Clases e interfaces para manipulación de fuentes. Clases e interfaces para definir métodos editores de entrada. Interfaces que añaden el desarrollo de métodos editores de entrada. Clases para crear y modificar imágenes. Clases que soportan JavaBeans . Interfaces que usan el Personal Profile para la comunicación.

J2ME PAQUETES DEL MIDP javax.microedition.Icdui javax.microedition.rms javax.microedition.midlet javax.microedition.io java.io java.lang java.util

DESCRIPCION Clases e interfaces para GUIs. Soporte para el almacenamiento persistente del dispositivo. Clases de definición de la aplicación. Clases e interfaces de conexión genérica. Clases e interfaces de E/S básica. Clases e interfaces de la Máquina Virtual. Clases e intefaces de utilidades estándar.

J2ME • El proceso para llevar a cabo la creación de un MIDlet es el siguiente: • • • • •

Crear el MIDlet Escribir el código y compilar. Preverificar el código. Empaquetar en JAR y crear el archivo JAD. Ejecutar el emulador.

J2ME • Las aplicaciones MIDP deben implementar los siguientes tres métodos: • startApp (): Este método es utilizado para la ejecución del MIDlet. Su objetivo es ejecutar la aplicación y solicitar recursos. • pauseApp (): Este método es invocado por el sistema para solicitarle al MIDlet que haga una pausa. Libera los recursos adquiridos por el método starApp ().

J2ME • destroyApp (boolean unconditional): Este método es llamado por el sistema antes de que sea destruido el MIDlet. Además libera todos los recursos adquiridos. • Los MIDlets son empaquetados en carpetas .JAR junto a imágenes, logos, para formar una MIDlet suite.

J2ME

J2ME • Cada archivo .JAR lleva asociado un archivo .JAD (Java Application Descriptor, Descriptor de Aplicación Java) que es utilizado para gestionar la instalación. • El archivo .JAM (Java Application Manager, Manejador de Aplicaciones Java) es el encargado de gestionar la descarga y la instalación de los MIDlets.

J2ME โ ข Los MIDlets tienen atributos obligatorios y opcionales ATRIBUTOS OBLIGATORIOS MIDlet-Name MIDlet-Versiรณn MIDlet-Vendor MIDlet-<n> (name, icon, class) MicroEdition-Profile MicroEdition-Configuration

ATRIBUTOS OPCIONALES MIDlet-Description MIDlet-Icon MIDlet-Info-URL MIDlet-Data-Size

J2ME

• Para poder instalar un MIDlet en un teléfono celular del cliente se siguen los siguientes pasos: • Paso 1: El Cliente pide una el fichero JAD. • Paso 2: El fichero JAD es descargado al Cliente. • Paso 3: El JAM verifica el archivo JAD. • Paso 4: Se descarga la MIDlet suite al Cliente.

J2ME

J2ME import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class hola extends MIDlet { private Display pantalla; private Form formulario = null; public hola() { pantalla = Display.getDisplay(this); formulario = new Form("Hola Mundo"); }

J2ME

public void startApp(){ pantalla.setCurrent(formulario); } public void pauseApp(){ } public void destroyApp(boolean unconditional){ pantalla = null; formulario = null; notifyDestroyed(); }}

J2ME • La clase Display representa el manejador de la pantalla y los dispositivos de entrada. • Todo MIDlet debe poseer por lo menos un objeto Display. • En este objeto Display podemos incluir tantos objetos Displayable como queramos.

J2ME • La clase Display puede obtener información sobre las características de la pantalla del dispositivo donde se ejecute el MIDlet, además de ser capaz de mostrar los objetos que componen nuestras interfaces. • Todo MIDlet debe poseer al menos una instancia del objeto Display. Para obtenerla se utiliza:

J2ME

• Dentro del método startApp tendremos que hacer referencia a la pantalla que queramos que esté activa haciendo uso del método: setCurrent() • Hay que tener en cuenta que cada vez que salimos del método pauseApp, entramos en el método startApp, por lo que la construcción de las pantallas y demás elementos que formarán parte de nuestro MIDlet la tendremos que hacer en el método constructor.

J2ME

javax.microedition.lcdui • Interfaces: • • • •

Choice CommandListener ItemCommandListener ItemStateListener

javax.microedition.lcddui • • • • • • • • •

Alert AlertType Canvas ChoiceGroup Command CustomItem DateField Display Displayable

javax.microedition.lcdui • • • • • • • • •

Font Form Gauge Graphics Image ImageItem Item List Screen

javax.microedition.lcdui • • • • •

Spacer StringItem TextBox TextField Ticket

javax.microedition.lcdui.game • • • • •

GameCanvas Layer LayerManager Sprite TiledLayer

• Los IDEs más recientes nos permiten mostrar información de las clases y objetos a través de etiquetas inteligentes.

J2ME • Muchas de las funcionalidades básicas de Java se pueden implantar de manera directa en J2ME como el manejo de primitivas gráficas. • La clase más básica es la Graphics, la cual tiene métodos que nos permiten dibujar sobre un lienzo Canvas.

J2ME • Generalmente se utilizan dentro del método paint() de un Applet o de una aplicación gráfica. • Los métodos repaint() y update variantes del método paint().

son

J2ME • El método repaint() se utiliza cuando se desea volver a dibujar la pantalla (lo cual es muy frecuente en los sistemas gráficos multitarea) y dibuja toda la pantalla. El método update() sólo actualiza una región de la pantalla. Muy utilizado en componentes gráficos como botones o listas desplegables.

J2ME • La clase Graphics se encuentra dentro del paquete java.awt.*; • El método drawString() permite dibujar una cadena de texto en la pantalla. • El método drawLine() dibuja una línea en la pantalla. El método drawRectangle() permite dibujar un rectángulo en pantalla.

J2ME

• El método drawOval permite definir óvalos y circulos. El método drawImage() permite mostrar imágenes en pantallas. • El método clearRect() permite borrar un área de la pantalla. El método copyArea() copia un área de memoria. Esto se utiliza en los métodos de recorte (clip). • Métodos como drawPolygon y drawPolyline() permiten definir figuras más elaboradas.

J2ME • Los métodos que inician con fill, como fillOval(), fillRect(), etc., realizan las mismas figuras pero pintan el relleno de las figuras. • Otros elementos a considerar para el manejo de gráficos son el color y las fuentes (tipos de letras). Java define clases para manipular estos objetos gráficos de manera amplia.

J2ME

• Los métodos getFont(), getColor() y setColor() manipular fuentes y colores.

setFont(), permiten

• La clases Font y Color se encuentran definidas también en java.awt.* • El método translate() de Graphics() permite cambiar el punto de referencia que de manera predeterminada es 0,0 para esquina superior izquierda.

J2ME • La clase Color define el modelo de color a emplear, cuenta con algunas constantes para cada tipo de color como orange, yellow, darkgray, etc. El color está dado por tres valores uno para el rojo, otro para el verde y otro para el azul. • Se cuentan además con métodos para manipular los atributos de la clase.

J2ME • La clase Font permite el manejo de fuentes en pantalla. El constructor de esta clase recibe tres argumentos: el nombre de la fuente, el estilo de la fuente y el tamaño. • El estilo de la fuente está definido por tres constantes PLAIN (normal), BOLD (negrita) e ITALIC (cursiva). Se cuenta además con métodos auxiliares para manipular los atributos de la clase.

J2ME • Una fuente no es otra cosa que una colección de imágenes que representan los caracteres de un sistema. • Se cuenta además con la clase FontMetrics que define algunas métricas de la fuente: altura, bajada, la subida, la interlínea, etc.

J2ME • También se pueden dibujar figuras 3D muy sencillas con métodos como draw3DRect y fill3DRect que dan profundidad a las imágenes. • Algunas de estas funcionalidades dependen del perfil y de la configuración del dispositivo.

Introducción

• Se puede obtener el contexto gráfico de una imagen y manipularla como si fuera un objeto Graphics. Ejemplo: Font letra = Font.getFont(Font.FACE_MONOSPACE, Font.SIZE_SMALL, Font.STYLE_PLAIN); Image logo = Image.createImage(letra.stringWidth(“Hi !”)) Graphics gr = logo.getGraphics(); …

J2ME • Existen algunas APIs especiales para el manejo de gráficos en dispositivos móviles como los definidos por Nokia (com.nokia.mid.ui) que contiene clases como DirectGraphics. • También se pueden manejar otro tipos de elementos como multimedia, sprites, etc. También se cuenta con la clase Graphic3D para gráficas en 3D.

J2ME • Realizar un programa que implemente a través de un formulario la graficación de las funciones: x2 + 1, 3x2 - 1, x+1 y x3 + x -5. • El usuario dará los posibles valores de X en un formulario de 5 elementos. • Nótese que no hay una clase visual para desarrollar gráficos en NetBeans.

J2ME • También se puede realizar la conexión a redes, para ello se deberá utilizar el paquete javax.microedition.io.* • Se deberá definir una conexión a través de la clase StreamConnection, abriendo buffers de entrada y salida con las clases InputStream y OutputStream Respectivamente. • Conexión = Connector.open(URL);

J2ME • out = conexión.openOutputStream(); • In = conexión.openInputStream(); • Se lee el flujo con in(), se sugiere almacenar los datos en un StringBuffer e ir agregando datos con el método append() • Se puede mejorar las conexiones si se utiliza el objeto HttpConnection, aunque sólo aplica a conexiones Web.

J2ME • La información hasta ahora manejada ha sido de tipo no persistente, de tal forma que al terminar la aplicación y volverla a ejecutar, no se pueden recuperar los datos. • Para lograr persistencia se requiere de la manipulación de archivos, elemento que no está presente en la mayoría de los dispositivos móviles con CLDC/MIDP.

J2ME • Para lograr la persistencia se requiere de un motor de persistencia conocida como RMS (Record Management System) que no es otra cosa que una pequeña base de datos empotrada en el dispositivo. • La unidad básica de almacenamiento de la información es el registro (record), ubicado en un almacén de registros (record store).

J2ME un registro

• Antes de operar se debe abrir o crear. Las operaciones pueden ser de lectura y escritura. • Se utiliza el javax.microedition.rms.*

paquete

• La clase RecordStore tiene los siguientes métodos: • openRecordStore() • closeRecordStore()

J2ME • • • • • • •

deleteRecordStore() getName() getNumRecords() addRecord() getRecord() deleteRecord() enumerateRecords()

J2ME • Se cuentan con las interfaces de: – RecordEnumeration – RecordComparator – RecordFilters – RecordListener

• Los datos a agregar deben estar en formato de un arreglo de bytes • rs.addRecord(bytes, 0, bytes.length)

C贸mputo Ubicuo y AMI

Inteligencia Ambiental

¿Qué se necesita para AMI? ¿Qué?WHAT WHAT ¿Qué?

¿Donde? ¿Donde? WHERE WHERE ¿Quién?WHO WHO ¿Quién?

Realizarservicios serviciossolos solos Realizar

Consciencia Consciencia del del dispositivo dispositivo

¿Cuándo?WHEN WHEN ¿Cuándo?

Realizarservicios servicios Realizar coordinados coordinados

¿Cómo?HOW HOW ¿Cómo?

Context-Aware y SOA

LBS

• Los servicios basados en localización buscan ofrecer un servicio personalizado a los usuarios, basado en la información de ubicación geográfica de éstos.

Pizzería

¿Qué está cerca de?

Fiesta Casa Ana

Cancha de Fútbol

Tipos de Servicios

Acción

Preguntas

Operaciones

Orientación y localización.

¿Dónde estoy? ¿Dónde está…?

Posicionamiento, geocodificación.

Navegación a través de ¿Cómo puedo llegar espacio, trazado de ruta. a?

Posicionamiento, geocodificación, ruteo.

Búsqueda de personas y ¿Qué hay cerca o de objetos. interesante…?

Posicionamiento, geocodificación, cálculo de distancia y área, búsqueda de relaciones.

Identificación y reconocimiento de personas u objetos.

¿Qué es?

Directorio, selección, búsqueda temática o espacial.

Verificación de eventos, determinación del estado de objetos.

¿Qué ocurre aquí, allá, etc.?

Posicionamiento, cálculo de área, geocodificación, búsqueda de relaciones.

Clasificaci贸n de LBS

Arquitectura LBS

Mecanismo de Posicionamiento

Internet Internet BD

Servidor de Aplicaciones y Contenidos Conexi贸n de Red

Dispositivos m贸viles

Red de comunicaciones

Técnicas de Posicionamiento Técnicas de posicionamiento Basada en redes

Basada en redes

celulares y satelitales

inalámbricas

Basadas en red

Basadas en el dispositivo móvil

Bluetooth

Wi Fi

Infrarrojos

Banda Ultra-ancha

TecnologĂas Posicionamiento

TĂŠcnicas de Posicionamiento GPS

Cell Id

Global Positioning System

Cell of Origin

AGPS Assisted GPS

Técnicas de Posicionamiento Nombre

Técnica de localización

Telcel

AGPS

Iusacell

AGPS

Movistar

Basada en Red

Nextel

Basada en Red

Cobertura Red Telcel Red Iusacell Cobertura Movistar Red Nextel

Áreas de un LBS GIS BD Espaciales Móvil

Web GIS

Internet WMS

LBS Internet Móvil

GIS

Dispositivos Móviles

IDE

• IDE (Spatial Data Infraestructure, SDI) ayudan al descubrimiento, acceso y uso de información espacial. • IDE incluye: – Datos (atributos geográficos) y metadatos – Métodos de acceso a los datos geográficos (catálogos, cartografía). – Servicios adicionales (transformaciones coordenadas, análisis de los datos).

Esquema OpenGIS

Primitivas Grรกficas

IDE

• Algunos IDEs:

– PostGIS (PostgreSQL) – MySQL

• Definición de Tablas (PostGIS):

– CREATE TABLE gtest ( ID int4, NAME varchar(20) ); – SELECT AddGeometryColumn('', 'gtest','geom',1,'LINESTRING',2); 191

IDE

• Agregar Datos:

– INSERT INTO gtest (ID, NAME, GEOM) VALUES (1, 'First Geometry', GeomFromText('LINESTRING(2 3,4 5,6 5,7 8)', -1));

• ¿Cómo se almacenan los datos?

– SELECT id, name, AsText(geom) AS geom FROM gtest; – id | name | geom ----+---------------+----------------------------- 1 | First Geometry | LINESTRING(2 3,4 5,6 5,7 8) (1 row) 192

• Consulta Espacial

IDE

– SELECT id, the_geom FROM thetable WHERE the_geom && 'POLYGON((0 0, 0 10, 10 10, 10 0, 0 0))' AND Contains(the_geom,'POLYGON((0 0, 0 10, 10 10, 10 0, 0 0))';

• Existen dos tipos de estándares para representar objetos espaciales: WKT y WKB

193

Representación Información

Texto

Dirección:

Ubicación:

Estado de Puebla No 71, Lázaro Cárdenas

Latitud: 18.635202 Longitud:-99.237502

Mapas Raster Vectoriales

Representación Información

• Datos georeferenciados:

– Coordenadas (latitud, altitud, longitud) – Código Postal* – Aproximación Área de Cobertura (NFC-Near Field Communications-)

• Datos no georeferenciados:

– Datos de Formulario (Nombre, etc.) – Datos del Punto de Interés Características, Limitaciones. 195

(POI)

como

GIS

• Los MSIS (Mobile Spatial Information System) son una aplicación de los GIS. • Enfocados en proveer información espacial (mapas cartográficos, imágenes y textos) a usuarios móviles, en cualquier lugar y tiempo. • Dependen de Mobile GIS y de GIR (Geographic Information Retrieval).

Problemรกtica LBS

Falta de Estรกndares

Problemáticas LBS

• Sistemas Diferentes • WGS84

proyección

• World Geodetic System 1984. Sistema Geodésico Mundial de 1984 • Latitud y longitud expresadas en grados.

• UTM

• Universal Transversal Mercator. • Latitud y longitud expresadas en metros.

LBS: Presente y Futuro

GPS

Whereaboutsâ&#x201E;˘

Ask Mobile

Nokia Maps 201

Traza tu Ruta CAPUFE

202

LBS + SI tradicionales

â&#x20AC;˘ Mashups & Web 2.0

â&#x20AC;&#x201C; El usuario como productor

Fotos georeferenciadas

Diversidad de mashups usando Google Maps

LBS + SI Tradicionales

204

Servicios Localización

• uLocate: Es un gateway para el manejo de LBS. http://www.ulocate.com/platform.php • Loki es una herramienta de búsqueda contextual basada en la localización de los usuarios. http://loki.com • MeerMoi es un servicio móvil de citas basados en la localización. http://www.meermoi.com/

Localizaci贸n Personas

Consultas LBS

Georeferenciada

No Georeferenciada

Respuestas LBS

No Georeferenciada

Georeferenciada

Google StreetView

Contenido Georeferenciado

Áreas de Investigación Búsqueda de servicios Web sobre GIS mediante ontologías

Emparejamiento de ontologías sobre GIS

Manejo de información contextual

IDE GIS Enfoque Web 2.0

Aplicaciones de localización móvil

MSIS LBS MGIS

GIR

Aplicaciones mashup de servicios

Relaciones espaciales en lenguaje natural

Ontologías espaciotemporales y sus aplicaciones

Combinación Tecnologías

• Aplicaciones LBS con Realidad Aumentada (AR, Augmented Reality) • Guías Turísticas

Detecci贸n Heterogenea

Perfiles de Movilidad

Inteligencia Colectiva

215

Taxi Ruta

• Problemática: ¿Cuántos de ustedes no les ha pasado que al tomar un Taxi, el conductor les quiere cobrar lo que quiera? O ¿Cuántos Taxistas se ven perjudicados cuando en el sistema de “Taxi Seguro” el pasajero miente sobre su destino final? • Objetivo: Diseñar una aplicación LBS que permita optimizar el traslado de pasajeros en Taxis.

• Alcances:

Taxi Ruta

– El sistema deberá detectar el cobro de un pasajero de un punto a otro. – Deberá reconocer que unidad está más cerca de recoger a algún pasajero. – Se podrá utilizar vía SMS una solicitud de ruta de un destino a otro obtenido el mapa croquis con los puntos a seguir. 217

• Limitaciones:

Taxi Ruta

– El sistema sólo podrá realizar la ubicación de los mapas cargados en el sistema – El sistema no maneja elementos de tiempo real como el tráfico o manifestaciones. – El sistema sólo da una ruta ideal (la más corta).

218

Tecnologías relacionadas

• Iusacell

Ubicacel

• Movistar

Localízame

• Telcel

AVL Reach U

• Tramigo • Skyhook WPS

Detecci贸n de Costos CENTRAL

TEC MORELIA

$30

$35

220

Reconocimiento de Unidades

221

Aplicaciones de Mapas 222

Perfil de Dispositivo SMS

MMS

Se envĂa como mensaje MMS el mapa-croquis generado EnvĂo de mensaje SMS y perfil del dispositivo Se analiza la consulta y se genera el croquis

Aplicaciones de Mapas Mapa Destilación de información innecesaria

11 Consulta Georeferenciad a No georeferenciada Características del Dispositivo

Algoritmo de ruta

Consulta Puntos de interés

33 BDE

BDR

Mapa Croquis

Aplicaciones de Mapas Realizar la consultas radio, tomando como origen Obtener Destilar parte grafo una lainformación matriz ruta mediante del mediante mapa de adyacencia no del laspertinente un intersecciones servidor algoritmo del de camino del |mapas de mapa de caminos generado calles con cada nodo camino obtenido. mediante: como mediante referencias óptimo. nodos. eldel para algoritmo la generación de rutas.del mapa-croquis en  formato PuntosSVG. georeferenciales de origen Destino georeferencial

Algunas APIs de Localización

• Sin APIs (leer trama NMEA)

• Algunas APIs • Location Acquisition. Symbian • Gateways de Operadoras de Telefonía • JSR179 Location (MIDP 2.0) • Google Gears

JSR 179

• import javax.midlet.location; • // Establecemos los criterios. Criteria criteria = new Criteria(); • criteria.setCostAllowed(false); criteria.setHorizontalAccuracy(NO_REQUIR EMENT); criteria.setVerticalAccuracy(NO_REQUIREM ENT); criteria.setPreferredPowerConsumption(NO_R EQUIREMENT); 226

JSR 179

try { LocationProvider lp = LocationProvider.getInstance(criteria); Location location = lp.getLocation(-1); Coordinates coordinates = location.getQualifiedCoordinates(); System.out.println(”Latitud: ” + coordinates.getLatitude()); System.out.println(”Longitud: ” + coordinates.getLongitude()); } catch (…) … 227

Google Gears

• <script type="text/javascript" src="gears_init.js"></script> • <script type="text/javascript"> • var geo = google.gears.factory.create('beta.geolocation') ; • function updatePosition(position) { alert(‘Latitud/Longitud: ' + position.latitude + ',' + position.longitude); } </script>

Ubicaci贸n Tradicional

229

Google Maps API

•GBrowserIsCompatible() •GClientGeocoder() • geocoder.getLatLng() •GMap2() •map.getCenter() •map.getZoom() •map.addControl() •map.setMapType() •GLatLng() •GSize() •GPoint() •GSmallMapControl() •GScaleControl() •GMapTypeControl() •GOverviewMapControl() •GInfoWindowTab() •GMarker() • m.openInfoWindowTabsHtml()

230

L铆neas de Investigaci贸n 2009 M.C. Juan Carlos Olivares Rojas Investigaci贸n y Desarrollo Tecnol贸gico

Pronóstico Gartner 2007 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Código abierto Virtualización Registro de servicios y repositorios Suites para la gestión de procesos de negocios Enterprise Information Management Cómputo ubicuo Acceso a la información Web 2.0 – AJAX Rich Clients Web 2.0 - Mashup Composite Model Inteligencia colectiva y comunidades

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Pronóstico Gartner 2008

Green IT Unified Communications Business Process Modeling Metadata Management Virtualization 2.0 Mashup & Composite Apps Web Platform & WOA Computing Fabric Real World Web Social Software

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Pron贸stico Gartner 2009

Virtualization. Cloud Computing. Servers-Beyond Blades. Web-Oriented Architectures. Enterprise Mashups. Specialized Systems. Social Software and Social Networking. Unified Communications. Business Intelligence. Green IT. 234

Áreas de Interés

• Sistemas Distribuidos • Cómputo móvil • Tecnologías Web • Redes inalámbricas

• Ingeniería de Software

Líneas de Investigación

• Sistemas basados en localización (LBS) y búsquedas contextuales. • Sistemas asíncronos basados en tecnologías SMS/MMS • Programación de Sistemas Compact Framework y J2ME

usando

No necesariamente van en orden de interés

.NET

Líneas de Investigación

• Sistemas de middleware)

intermediarios

(proxys,

• Sistemas Distribuidos Inteligentes (Agentes Móviles) • Transcodificación multiformato Acaparamiento para dispositivos Móviles. • Refactorización de Aplicaciones Móviles

Líneas de Investigación

• Accesibilidad de recursos Web en dispositivos móviles (W3C, WCAG, MobileOK) • Minería de datos para y en dispositivos móviles. • Mecanismos de Precarga de Dispositivos Web • Servicios Web y Arquitecturas SOA.

Líneas de Investigación

• Servicios Web y P2P en dispositivos móviles • Cómputo paralelo en dispositivos móviles (Grid, Clusters). • Sistemas Operativos para dispositivos móviles y empotrados • Virtualización

Líneas de Investigación

• Seguridad en dispositivos móviles.

• Desarrollos de Sistemas Adaptativos en Redes Inalámbricas (Redes de 3G, Redes de Sensores). • Metodologías para el desarrollo de aplicaciones en entornos de computación con recursos limitados.

240

Líneas de Investigación

• Cómputo móvil en la educación • Multimedia limitado

241

dispositivos

cómputo

Trabajos actuales

• PaqWebCel: Paquete para Desplegar Publicidad en Terminales Móviles Celulares (CITEDI)*

– “Sistema de publicidad para comercio electrónico móvil (m-commerce)” (ITM) – Desarrollo de estrategias para desplegar publicidad en dispositivos móviles (multimedia, geoposicionamiento, seguridad y privacidad).

Trabajos actuales

• Metodologías de Desarrollo en Computación con Recursos Limitados (ISwM):

– “Desarrollo de Interfaces Adaptativas para Dispositivos Móviles” – “Diseño de un Lenguaje para Modelar Contexto en Dispositivos Móviles” – “Utilización del Patrón MVC (Modelo‐Vista‐Controlador) para el Desarrollo de Aplicaciones en Dispositivos Móviles” – “Estudio y Aplicación de Patrones Arquitectónicos en la Construcción de Software para Dispositivos Móviles”

243

Trabajos actuales

• Proxy de accesibilidad móvil * • Weblog mininig (UNID)*

dispositivos

móviles

• Virtualización de recursos y aplicaciones en dispositivos móviles (UNID)* • Nuevas Técnicas de DSS. 244

Trabajos actuales

• Medios audiovisuales para la autenticación de sistemas de cómputo * • Herramienta para validar la colocación de puntos de acceso en redes inalámbricas utilizando diagramas de voronoi. (UNID)* • “Plataforma educativa tecnologías Web 2.0”. 245

utilizando

Propuestas de Trabajos

• Suite para la Conversión de Código de Aplicaciones de Computadoras Personales a Aplicaciones de Cómputo Móvil (2Mobi) – “Traductor de J2ME a .NET CompactFramework” – “Traductor de .NET CompactFramework a J2ME” – “Traductor de J2SE a J2ME” – “Traductor de J2EE a J2ME” – “Traductor de .NET CompactFramework”

246

Framework

.NET

Propuestas de Trabajos

• Transcodificador multiformatos

contenidos

Web

• Algoritmo para determinar de manera efectiva los recursos que se deben precargar en un sitio Web. • Web Proxy caché con soporte para operaciones en modo desconexión para J2ME 247

Propuestas de Trabajos

• Editor de páginas dispositivos móviles

Web

accesibles

para

• Comunicación entre procesos IPC en máquinas virtuales • Algoritmo de enrutamiento para dispositivos móviles utilizando técnicas de agrupamiento y distancias cortas 248

Propuestas de Trabajo

• Modificación al protocolo SMTP para permitir la eliminación de correo no visto. • Videostreaming en redes celulares de 2.5G de manera descentralizada • Localización geográfica de recursos de manera descentraliza. • Refactorización de estilos en HTML a CSS.

Propuestas de Trabajo

• Refactorización de Tablas a capas DIV y SPAN. • Refactorización de Javascript obstrusivo a no obstrusivo. • Sincronización de Servicios Web con BPEL.

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.

Referencias • Ferreira, R (2008). Curso de Programación en J2ME. Instituto Tecnológico de Morelia. • Prieto (2004). Desarrollo de Juegos con J2ME, Editorial Alfaomega Ra-Ma, España.

多Preguntas?