Está en la página 1de 16

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

1. Propósito de este documento

Este documento presenta y describe Street Guide 2, versión 2.5. Esta aplicación interactiva se basa en un callejero electrónico diseñada principalmente para móviles con soporte J2ME (Java 2 Micro Edition).

2. Historial de versiones

Street Guide es una aplicación que nació, hace más de un año, en su primera versión para móviles con soporte MIDP1 (Mobile Information Device Profile), especialmente diseñado para Sony Ericsson T628, T630, Z600, Z608 y series T610 (T610, T616, T618). Aunque también fue probado con éxito en otros modelos superiores de Sony Ericsson y en diferentes dispositivos Nokia y Siemens.

Su primera versión se basaba en un callejero sencillo, el cuál permitía realizar búsquedas múltiples de direcciones.

Imágenes del callejero de Barcelona en un móvil SE T610 :

Imágenes del callejero de Barcelona en un móvil SE T610 : La primera versión también se
Imágenes del callejero de Barcelona en un móvil SE T610 : La primera versión también se
Imágenes del callejero de Barcelona en un móvil SE T610 : La primera versión también se
Imágenes del callejero de Barcelona en un móvil SE T610 : La primera versión también se
Imágenes del callejero de Barcelona en un móvil SE T610 : La primera versión también se
Imágenes del callejero de Barcelona en un móvil SE T610 : La primera versión también se

La primera versión también se podía descargar gratuitamente y era pública para poderla testear en diferentes modelos de móvil. La aplicación tuvo mucho éxito y es muy conocida por los principales foros de discusión de telefonía móvil de España.

2

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

3. Descripción de la aplicación Street Guide 2

Su predecesor Street Guide 1, descrito brevemente en el anterior punto, sólo se podían hacer búsquedas de calles y navegar por el mapa. El mapa no era una sola imagen, sino que estaba compuesto por diferentes imágenes con una resolución de 128 x 127 píxeles.

Esta resolución era la que usaba los modelos Sony Ericsson T610 y Z600. Si que quería usar en otros móviles, por la sencillez de la aplicación, obligaba a redimensionar todas las imágenes que

componían el mapa. Pero esto ya no ocurre en

debido a su principal función ‘screen adaptive’, que permite adaptarse a cualquier resolución de pantalla. Así de esta forma, cualquier callejero diseñado funciona en cualquier dispositivo móvil. Street Guide 2 incorpora por una parte el mapa del callejero, y por otra un listado de las direcciones del callejero y un listado de PDI (Puntos De Interés). En la lista de PDI, se definen monumentos, farmacias, restaurantes, centros comerciales, parques, y cualquier otro punto de la ciudad que puede ser interesante para su localización. A través de la función Buscar podemos localizar tanto PDI como direcciones del mapa.

Street Guide 2

Street Guide 2 está orientado a móviles no Smarthphone (teléfonos inteligentes provistos de un sistema operativo como puede ser Symbian). En teléfonos con Symbian nos podemos encontrar aplicaciones GPS que se pueden usar como callejeros, como es el caso del TomTom Mobile y Navigator. Aplicaciones mucho más potentes debidas para la plataforma para las que están diseñadas. En cambio J2ME es una plataforma mucho más limitada y un entorno de programación donde los recursos son menores. Street Guide 2 se dirige a estos móviles sin sistema operativo, los cuáles sólo disponen de Java para la ejecución de juegos y aplicaciones.

Existen dos versiones de Street Guide 2:

? Versión MIDP1.0: versión que funciona en todos los móviles (midp1 y midp2). La aplicación requiere una resolución mínima de pantalla de 128 x 128 px. Por las características de MIDP versión 1, el mapa no se puede mostrar usando toda la pantalla, siempre queda una parte reservada por el móvil.

? Versión MIDP2.0: versión para móviles con soporte MIDP versión 2. Una de las características de esta tecnología, compatible con todos los móviles, es que se puede utilizar toda el área de la pantalla para mostrar el mapa. La resolución máxima soportada es 640 x 640 píxeles.

3

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

4. Funcionamiento de la aplicación

A continuación se presenta el funcionamiento de la aplicación con el

ejemplo Metro de Barcelona.

Una vez instalada la aplicación en el dispositivo móvil, nos aparecerá en la lista de aplicaciones en la sección Java correspondiente.

lista de aplicaciones en la sección Java correspondiente. Seleccionamos la aplicación y elegimos la opción Ejecutar

Seleccionamos la aplicación y elegimos la opción Ejecutar o Abrir. Nos aparece el splash del programa. Pulsamos cualquier tecla o dirección del joystick del móvil para continuar y entrar en el menú principal de

la aplicación.

El menú principal y todas las pantallas en las que la aplicación no tiene que mostrar gráficos son iguales, tanto en la versión midp1.0 como en la versión midp2.0. En el menú principal del callejero nos encontramos con las siguientes opciones:

midp1.0 como en la versión midp2.0. En el menú principal del callejero nos encontramos con las

4

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Opción Mapa: nos muestra el contenido del mapa del callejero.

Mapa : nos muestra el contenido del mapa del callejero. Versión midp1.0 Versión midp2.0 Dentro de

Versión midp1.0

el contenido del mapa del callejero. Versión midp1.0 Versión midp2.0 Dentro de la navegación por el

Versión midp2.0

Dentro de la navegación por el mapa, disponemos del joystick para movernos poco a poco con un efecto suave de movimiento, y disponemos de las teclas 2, 4, 6 y 8 para movernos saltos más grandes por el mapa para un rápido movimiento.

saltos más grandes por el mapa para un rápido movimiento. Mediante los botones de función, en
saltos más grandes por el mapa para un rápido movimiento. Mediante los botones de función, en

Mediante los botones de función, en la versión midp 1.0, podemos acceder al Menú principal y a la función Buscar. En la versión midp 2.0 podemos observar que estas funciones no aparecen. Para visualizarlas y poder seleccionarlas debemos

previamente apretar el botón del medio del joystick o bien la tecla 5 y de este modo aparecen en la parte inferior de la pantalla. Si volvemos apretar estas teclas, volverán a desaparecer las funciones. Si pulsando las teclas de función, no te responde el programa,

usa la tecla * para versión midp2).

Buscar y la tecla # para Menú (sólo en la

5

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Aplicaciones para móviles (J2ME) http://www.eamobile.tk Versión midp2.0 Opción Buscar: pantalla que permite

Versión midp2.0

Opción Buscar: pantalla que permite localizar una dirección y/o un Punto De Interés.

permite localizar una dirección y/o un Punto De Interés. En Opciones podemos activar y desactivar las

En Opciones podemos activar y desactivar las casillas dependiendo del tipo de búsqueda que deseemos realizar. En la casilla donde se introduce el nombre de la dirección sólo hace falta 3 caracteres para realizar la búsqueda. La aplicación mostrará un máximo de 20 coincidencias. La tecla de función Atrás nos lleva a la pantalla anterior desde la cual hemos accedido a la función Buscar. Una vez introducido el nombre pulsamos la tecla de función Aceptar para comenzar la búsqueda.

6

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Aplicaciones para móviles (J2ME) http://www.eamobile.tk En este caso el resultado es múltiple. Si pulsamos sobre una

En este caso el resultado es múltiple. Si pulsamos sobre una de las opciones, nos aparecerá la calle o el PDI seleccionado en el mapa.

Opción Lista de calles: muestra una lista completa de las direcciones del callejero. La lista de calles puede estar en orden alfabético si se define así en el fichero correspondiente, y puede constar hasta un máximo de 3000 calles.

y puede constar hasta un máximo de 3000 calles. Opción Lista de PDI: muestra una lista
y puede constar hasta un máximo de 3000 calles. Opción Lista de PDI: muestra una lista

Opción Lista de PDI: muestra una lista completa de todos los Puntos De Interés que se registren del callejero. Permite hasta un máximo de 3000 puntos.

7

Aplicaciones para móviles (J2ME) http://www.eamobile.tk Opción Acerca de: muestra una pantalla con información

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Aplicaciones para móviles (J2ME) http://www.eamobile.tk Opción Acerca de: muestra una pantalla con información

Opción Acerca de: muestra una pantalla con información general de la aplicación y del autor. Puede contener publicidad.

Opción Salir: cerramos y abandonamos la aplicación.

5. Otras informaciones y datos de interés

La resolución, escala y calidad del mapa pueden variar dependiendo del tamaño del conjunto del callejero, o sea de las dimensiones globales del mapa. No es lo mismo el callejero de Barcelona que el de una ciudad o población más pequeña como puede ser la de Vilassar de Mar. El tamaño real de la aplicación (código, imágenes del menú y logos) es de 27KBytes, lo que realmente engorda la aplicación es el mapa.

Street Guide 2 se puede convertir en todo un mapa turístico, o en todo un plano de la red de transportes de una ciudad: buses, metro, RENFE, etc. Conteniendo informaciones o puntos de interés de museos, monumentos, restaurantes, hoteles, salones, etc.

Street Guide 2 es un callejero electrónico portátil al alcance de todo el mundo.

8

6. Herramientas y ficheros

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Los ficheros que contiene el paquete descargable ZIP son:

? Street Guide.jad --- Java Application Descripter

? Street Guide.jar --- Java Archive, contiene el midlet de la aplicación.

Software necesario para la edición del callejero:

? Compresor IZArc o WINRAR.

? Software edición de imagen, recomendado PhotoShop.

7. Estructura del midlet

NOTA: En esta versión sólo se permite un callejero por midlet.

Con el compresor IZArc abrimos el archivo .jar y descubrimos su estructura:

? callejero

? icons

? META-INF

? res

? sg

Antes de nada debemos descomprimir todo el contenido del archivo Street Guide.jar a un directorio cualquiera que esté vacío. El

directorio

callejero

será

el

que

editaremos.

Dentro

de

ella

descubrimos

otro

directorio

llamado

mapas,

en

el

cuál

están

guardadas las imágenes que componen el callejero, en formato PNG.

En este mismo directorio callejero, nos encontramos con 3 ficheros:

? config.txt: contiene el nombre, el nº de plano de comienzo a navegar por el mapa y el número de filas y columnas que componen el plano del callejero.

? dir.txt: se especifica la situación dentro del plano de las calles.

? pdi.txt: se especifica la situación dentro del plano de los puntos de interés.

9

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Directorio mapa: contiene todas las imágenes (en formato .png)

que componen el plano.

imágenes debe ser 128x128 píxeles, independientemente del

móvil que usemos. Por supuesto al cortar las imágenes a esta resolución, la última fila y la última columna pueden tener dimensiones diferentes.

coordenada fila y la

Los nombres de las imágenes contiene la

las

El

tamaño

o

la

resolución

de

coordenada columna separados por ”_”. Posibles valores entre 00 y 99, 100 columnas x 100 líneas, resolución máxima 12800x12800 píxeles.

Ejemplo: plano con 4 líneas y 5 columnas.

00_00 00_01 00_02 00_03 00_04 01_00 01_01 01_02 01_03 01_04 02_00 02_01 02_02 02_03 02_04 03_00 03_01 03_02 03_03 03_04

NOTA: Las imágenes, deben ser .PNG no sirve JPG ni BMP ni otro formato.

Fichero config.txt: en la primera línea se define el nombre del callejero, lo que pongamos será lo que aparezca en el menú principal. En la segunda fila se define el plano que aparecerá cuando entremos en el mapa. También se define el número de filas y columnas de imágenes que componen el mapa de la ciudad. Si lo editáis, veréis algo parecido a lo siguiente:

Metro Barcelona

start=04_04

lineas=7

columnas=10

//para el buen funcionamiento no añadir más líneas ni espacios.

//INCORRECTO --> lineas 5 //CORRECTO --> lineas=5

<-- no dejar espacios

Fichero dir.txt: en este fichero de deben añadir los nombres de las

calles, avenidas, plazas, etc siguiente:

La estructura de cada línea es la

C. Murcia=06_08 Avda. Meridiana=05_12 Sagrada Familia=02_06

10

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

Se especifica el nombre del lugar a buscar + signo “=” + plano donde se encuentra. No importa mayúsculas o minúsculas en el nombre de las calles, el software hará bien la búsqueda pero no colocar acentos ya que el software sí que los distingue. Número máximo de líneas (calles) = 3000

Fichero pdi.txt: en este fichero de deben añadir los puntos de interes del callejero.

Sagrada Familia=03_05 Teleferic de Montjuic=05_04 Teatre Nacional=04_07

Tibidabo=01_06

Se especifica el nombre del PDI a buscar + signo “=” + plano donde se encuentra. No importa mayúsculas o minúsculas en el nombre de las calles, el software hará bien la búsqueda pero no colocar acentos ya que el software sí que los distingue. Número máximo de puntos de interés = 3000

NOTA: Dentro de la estructura descrita anteriormente, nos encontramos con un fichero llamado MANIFEST.MF en el directorio META-INF. Este fichero describe características, iconos y enlaces a la classe madre. Debemos abrirlo con un editor de textos (notepad) y buscamos las siguientes líneas:

MIDlet-Name: Street Guide 2 MIDlet-1: Metro Barcelona, /icons/icono.png, sg.c

La primera parte antes

Barcelona. Si realizamos un callejero de Valencia, donde pone Metro

Barcelona pondremos por ejemplo Callejero Valencia ó simplemente Mapa Valencia. De esta forma nos queda:

coma es editable, o sea, Metro

de

la

MIDlet-Name: Mapa Valencia MIDlet-1: Mapa Valencia, /icons/icono.png, sg.c

nos

aparecerá Street Guide 2 en la lista de aplicaciones en nuestro móvil.

El texto que indiquemos

es

el

nombre

con

el

cuál

11

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

8. Carpeta mapa: método para cortar y preparar la matriz del callejero

Primero necesitamos Photoshop e ImageReady instalado en nuestro PC. Con otros programas se puede realizar el corte en secciones, pero vamos a explicar un método sencillo paso a paso con Adobe Photoshop.

Pasos para completar el corte del mapa:

1. Abrimos el ImageReady y cargamos la imagen del mapa, que esta debe ser RGB 8 bits.

2. Pulsamos en el menú Select – All como se muestra en la imagen.

imagen del mapa, que esta debe ser RGB 8 bits. 2. Pulsamos en el menú Select

12

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

3. Seleccionamos menú Slices – Divide Slice…

3. Seleccionamos menú Slices – Divide Slice… 4. Nos aparece la siguiente pantalla: Debemos indicar 128

4. Nos aparece la siguiente pantalla:

– Divide Slice… 4. Nos aparece la siguiente pantalla: Debemos indicar 128 píxeles tanto en horizontal

Debemos indicar 128 píxeles tanto en horizontal como en vertical, independientemente del modelo de teléfono móvil que usemos.

13

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

5. El resultado en pantalla es el siguiente:

5. El resultado en pantalla es el siguiente: 6. Una vez dividida la imagen debemos seleccionar

6. Una vez dividida la imagen debemos seleccionar File – Edit in Photoshop

El resultado en pantalla es el siguiente: 6. Una vez dividida la imagen debemos seleccionar File

14

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

7. Una vez cargada la imagen en el Photoshop, seleccionamos el menú File – Save for Web…

Photoshop, seleccionamos el menú File – Save for Web… 8. Debemos con el ratón elegir todo

8. Debemos con el ratón elegir todo el mapa hasta que aparezca seleccionado en amarillo. En el panel derecho, debemos indicar formato PNG-8, Adaptative, No dither. Si en el número de colores seleccionamos 256, los archivos ocuparán bastante. Debemos bajar el nº de colores hasta llegar a un equilibrio entre calidad y tamaño.

los archivos ocuparán bastante. Debemos bajar el nº de colores hasta llegar a un equilibrio entre

15

Aplicaciones para móviles (J2ME) http://www.eamobile.tk

9. Creación y encapsulado del midlet

Una vez que tengáis todo completo, seleccionáis las 5 carpetas que anteriormente habéis descomprimido, le dais al botón derecho y elegís la opción Añadir a comprimido al Archivo mediante IZArc.

la opción Añadir a comprimido al Archivo mediante IZArc. Aparece el siguiente dialogo: Las opciones deben

Aparece el siguiente dialogo:

al Archivo mediante IZArc. Aparece el siguiente dialogo: Las opciones deben ser las siguientes y no

Las opciones deben ser las siguientes y no otras:

? Nombre: Street Guide

? Tipo de archivo destino: .jar

? Compresión: Normal

? Método: Deflate

El resultado es un archivo totalmente compatible llamado Street Guide.jar.

16