Download Sistemas Operativos II - Inicio - Instituto Tecnológico de Morelia

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
tecnologías asíncronas como AJAX.
a
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
Movilidad
(tamaño)
Dispositivos de cómputo móvil
Smartphone
Communicator
PalmSize
Handheld
Tablet
Notebook
Laptop
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
Siempre
Frecuentemente
Cámara
0%
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 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
Problemática
600
800
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
Frecuencia
0.9/1.8/2.1
GHz
WLAN
(Wireless
LAN)
IEEE
802.11b/g/a
1, 2, 11, 54
Mb/s
2.4 y 5 GHz
Infrarrojos
Rango
35 Km
70 - 150 m
Tipo de red
Estándar
Ancho de
Banda
WWAN
(Celulares)
GSM/GPRS/E
vDo
9.6/170/2000
Kb/s
WPAN
(Bluetooth)
IEEE 802.15
721 Kb/s
2.4 GHz
10 m
Costos
Problemática
CSD: $1.5 minuto
Tamaño Tiempo
GPRS: $0.12
TareaKB
(KB)
(Segs.)
Leer noticias
2
92
Telcel
GPRS
CSD
$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
$3
Buscar un numero en un directorio
5.9
100
$0.72
$3
Búsqueda de un restaurante y menú
6.3
127
$0.84
$4.5
Cargar página Web
6.7
42
$0.84
$1.5
Descargar una archivo PDF (68k)
72.4
372
$8.76
$10.5
Recibir un correo (9 KB)
11.8
74
$1.44
$3
Reenviar un correo 9 KB
12.2
74
$1.56
$3
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.
Sistemas Operativos
• PalmOS
• 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) –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 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
DE
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
2001
HDML
WML
HTML
WAP
1.x3.2
HTML
C-HTML
XHTML Basic + WML
HTML 4.0
XHTML 1.0
i-mode
XML
2002
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
WAP Gateway
Data General
Web Server
WAP Tools
• Nokia WAP SDK
• 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
• 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 – 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.xml">
<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
en
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/DTD/x
html-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.
la
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
(http://wap.misitio.edu.mx)
del
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_rewrite.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 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.
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
siguiente
• 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
mobileOK nivel 2
• Estas características
mobileOK nivel 1.
nivel
son
de
certificación
adicionales
a
• 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, font-weight,
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
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.
No
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 para utilizarlo
en distintas plataformas.
• 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
importante. A continuación se
ejemplos muy sencillos.
110
es muy
muestran
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
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
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
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
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 son variantes
del método paint().
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(), setFont(), getColor()
y setColor() permiten manipular fuentes y
colores.
• 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 paquete javax.microedition.rms.*
• 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
¿Donde?
WHERE
Realizar servicios solos
Consciencia
del
dispositivo
Realizar servicios
coordinados
¿Quién? WHO
¿Cómo? HOW
¿Cuándo? WHEN
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
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).
de
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
IDE
• Consulta Espacial
– 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
de
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
Whereabouts™
GPS
Ask Mobile
Nokia Maps
20
1
Traza tu Ruta CAPUFE
202
LBS + SI tradicionales
• Mashups & Web 2.0
– 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
a
c
b
d
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
MSIS
LBS
MGIS
Aplicaciones
de localización
móvil
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.
Taxi Ruta
• Alcances:
– 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
Taxi Ruta
• Limitaciones:
– 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
• Telcel
• Tramigo
• Skyhook WPS
Localízame
AVL Reach U
Detección de Costos
CENTRAL
TEC
MORELIA
$30
$35
220
Reconocimiento de Unidades
F
E
A
D
C
B
221
Aplicaciones de Mapas
22
2
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
1
Consulta
Georeferenciada
No
georeferenciada
Características
del
Dispositivo
4
2
Algoritmo de
ruta
Consulta Puntos
de interés
3
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
intersecciones
un
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
PuntosSVG.
formato
georeferenciales de origen
Destino georeferencial
0
0
0
0
0
0
0
0
0
0
0
1
1
0
0
0
0
0
0
0
0
0
0
0
1
1
0
0
0
0
0
0
0
0
0
0
0
1
1
1
0
0
0
0
0
0
0
0
0
0
1
1
1
1
0
0
0
0
0
0
0
0
0
0
1
1
0
0
0
0
0
0
0
0
0
0
0
1
1
1
0
0
0
0
0
0
0
0
0
0
0
1
1
1
0
0
0
0
0
0
0
0
0
0
1
1
1
0
0
0
1
1
1
1
1
1
1
1
1
1
0
0
0
0
1
1
1
1
1
1
1
1
1
1
0
0
0
0
1
1
1
1
1
1
1
1
1
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
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_REQUIREM
ENT);
criteria.setVerticalAccuracy(NO_REQUIREMEN
T);
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. Código abierto
2. Virtualización
3. Registro de servicios y repositorios
4. Suites para la gestión de procesos de negocios
5. Enterprise Information Management
6. Cómputo ubicuo
7. Acceso a la información
8. Web 2.0 – AJAX Rich Clients
9. Web 2.0 - Mashup Composite Model
10. Inteligencia colectiva y comunidades
Pronóstico Gartner 2008
1. Green IT
2. Unified Communications
3. Business Process Modeling
4. Metadata Management
5. Virtualization 2.0
6. Mashup & Composite Apps
7. Web Platform & WOA
8. Computing Fabric
9. Real World Web
10.Social Software
Pronóstico Gartner 2009
1. Virtualization.
2. Cloud Computing.
3. Servers-Beyond Blades.
4. Web-Oriented Architectures.
5. Enterprise Mashups.
6. Specialized Systems.
7. Social Software and Social Networking.
8. Unified Communications.
9. Business Intelligence.
10.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
y
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 en dispositivos de cómputo limitado
241
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 en dispositivos móviles (UNID)*
• 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 utilizando tecnologías
Web 2.0”.
245
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 Framework a .NET CompactFramework”
246
Propuestas de Trabajos
• Transcodificador
multiformatos
de
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?