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 :

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 Street Guide 2 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 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.

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:

4

Aplicaciones para móviles (J2ME) http://www.eamobile.tk Opción Mapa: nos muestra el contenido del mapa del callejero.

Versión midp1.0

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.

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 Buscar y la tecla # para Menú (sólo en la versión midp2).

5

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

Versión midp2.0

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

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

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.

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

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

6. Herramientas y ficheros
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. El tamaño o la resolución de las 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. Los nombres de las imágenes contiene la coordenada fila y la 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 01_00 02_00 03_00 00_01 01_01 02_01 03_01 00_02 01_02 02_02 03_02 00_03 01_03 02_03 03_03 00_04 01_04 02_04 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 <-- no dejar espacios //CORRECTO --> lineas=5 Fichero dir.txt: en este fichero de deben añadir los nombres de las calles, avenidas, plazas, etc.. La estructura de cada línea es la siguiente: 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 de la coma es editable, o sea, Metro Barcelona. Si realizamos un callejero de Valencia, donde pone Metro Barcelona pondremos por ejemplo Callejero Valencia ó simplemente Mapa Valencia. De esta forma nos queda: MIDlet-Name: Mapa Valencia MIDlet-1: Mapa Valencia, /icons/icono.png, sg.c El texto que indiquemos es el nombre con el cuál nos aparecerá Street Guide 2 en la lista de aplicaciones en nuestro móvil.

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.

12

Aplicaciones para móviles (J2ME) http://www.eamobile.tk 3. Seleccionamos menú Slices – Divide Slice…

4. Nos aparece la siguiente pantalla:

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:

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

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…

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.

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.

Aparece el siguiente dialogo:

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