Departament dEnginyeria Informtica i Matemtiques

Creacin de una aplicacin SIG con OpenLayers, ExtJS y MySQL

TITULACIN: Ingeniera Tcnica en Telecomunicaciones, especialidad Telemtica

AUTOR: Marina Carrillo Baena DIRECTOR: Maria Ferr PONENTE: Joaqun Lpez FECHA: Junio 2011

NDICE
1. 2. 3. DESCRIPCIN DE LA EMPRESA: AIDDEA LINUX, S.L............................................... 5 UBICACIN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L ..................... 6 DESCRIPCIN DE LA TAREA REALIZADA ................................................................... 7 3.1. 3.2. 3.3. 3.4. Introduccin...................................................................................................................... 8 Objetivos del Proyecto ..................................................................................................... 9 Especificaciones del Proyecto ........................................................................................ 10 Sistema de Informacin Geogrfica (SIG) ................................................................... 11 Definicin y Elementos Principales ........................................................................ 11 Cartografa............................................................................................................... 13 Definicin ........................................................................................................ 13 Sistema de Coordenadas ................................................................................ 13 Proyecciones .................................................................................................... 14

3.4.1. 3.4.2.

3.4.2.1. 3.4.2.2. 3.4.2.3. 3.4.3.

Representacin de la Informacin.......................................................................... 15 Modelo Raster ................................................................................................. 15 Modelo Vectorial ............................................................................................ 16 Comparacin entre Modelo Raster y Vectorial ........................................... 17

3.4.3.1. 3.4.3.2. 3.4.3.3. 3.4.4. 3.5.

Actualidad y Ejemplos de Aplicaciones de un SIG ................................................ 17

Open Geospatial Consortium (OGC) ........................................................................... 20 Web Map Service (WMS) ........................................................................................ 21 Web Feature Service (WFS) ................................................................................... 21

3.5.1. 3.5.2. 3.6.

Diseo del Proyecto ........................................................................................................ 21 OpenLayers .............................................................................................................. 21 Qu s? ......................................................................................................... .21 Por qu OpenLayers? .................................................................................. 22

3.6.1.

3.6.1.1. 3.6.1.2. 3.6.2.

Ext JS: ..................................................................................................................... 23 Qu es? .......................................................................................................... 23 Ventajas e Inconvenientes de Ext JS ............................................................ 24

3.6.2.1. 3.6.2.2. 3.6.3.

Gestin de la informacin: Base de datos .............................................................. 25 PHP .................................................................................................................. 25 MySQL ............................................................................................................ 26

3.6.3.1. 3.6.3.2.

3.6.3.2.1. Lenguaje SQL ............................................................................................... 26 3.6.3.2.2. phpMyAdmin ................................................................................................ 27 3.6.3.3. Base de Datos .................................................................................................. 27 2

3.6.3.3.1. Tabla Tipos de dispositivos ........................................................................... 27 3.6.3.3.2. Tabla Dispositivos ......................................................................................... 29 3.6.3.3.3. Tabla Historial ............................................................................................... 30 3.6.4. AJAX ........................................................................................................................ 32 Ventaja e Inconvenientes de AJAX .............................................................. 33 AJAX: Intercambio de Datos con JSON ...................................................... 34 Comparacin entre XML y JSON ................................................................ 34

3.6.4.1. 3.6.4.2. 3.6.4.3. 3.7.

Desarrollo ........................................................................................................................ 35 Archivo SIG.html..................................................................................................... 35 Archivo Sig_Ext.js ................................................................................................... 37 Diseo de los Paneles ...................................................................................... 38 Botones y Formularios ................................................................................... 42

3.7.1. 3.7.2.

3.7.2.1. 3.7.2.2. 3.7.3.

Archivo MAPA.js ..................................................................................................... 45 Mapa ................................................................................................................ 46 Controles y Configuracin del Mapa............................................................ 46 Layers o Capas ............................................................................................... 50

3.7.3.1. 3.7.3.2. 3.7.3.3.

3.7.3.3.1. Markers.......................................................................................................... 51 3.7.3.3.2. Historial ......................................................................................................... 52 3.7.4. 3.7.5. 3.7.6. 3.7.7. 3.8. Archivo Conectarse.php .......................................................................................... 53 Archivo Datos.php ................................................................................................... 54 Archivo TreeData.php ............................................................................................. 55 Simulacin de la Recepcin de Datos Va SMS ..................................................... 57

Evaluacin: Juego de Pruebas ...................................................................................... 57 Crear un Tipo de Dispositivo .................................................................................. 57 Modificar un Tipo de Dispositivo............................................................................ 60 Crear un Dispositivo ................................................................................................ 61 Simulacin Recepcin de Datos .............................................................................. 64 Visualizar Historial de un Dispositivo .................................................................... 65 Visualizar la ltima Posicin de un Dispositivo .................................................... 66 Visualizar el Recorrido de un Dispositivo .............................................................. 66 Eliminar Tipo de Dispositivo .................................................................................. 67 Eliminar Dispositivo ................................................................................................ 67

3.8.1. 3.8.2. 3.8.3. 3.8.4. 3.8.5. 3.8.6. 3.8.7. 3.8.8. 3.8.9. 3.9.

Recursos utilizados ......................................................................................................... 68 Requisitos hardware y software .............................................................................. 68

3.9.1.

4. 5. 6.

APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL ALUMNO ... 69 APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO.................... 70 CONCLUSIONES Y LNEAS FUTURAS .......................................................................... 71

REFERENCIAS ............................................................................................................................. 73

1.

DESCRIPCIN DE LA EMPRESA: AIDDEA LINUX, S.L:

Este proyecto se llevar a cabo para la empresa Aiddea Linux, S.L, representada por Joaqun Lpez, y situada en: Cam de Valls, n 81-87, despacho 61, Reus. Aiddea Linux es una empresa de diseo de ingeniera electrnica especializada en electrnica embedded, RFID, comunicaciones. Dentro de estos campos tiene como objetivo la investigacin, fabricacin y ensamblaje de productos y otros componentes auxiliares. Ofrece servicios tanto en el campo de la electrnica como de las TIC. Por la parte electrnica, como ya hemos comentado, desarrolla diseos electrnicos a medida desde el concepto inicial hasta la entrega de prototipos funcionales para integrar en el cliente final. Por la parte TIC, Aiddea crea aplicaciones a medida del cliente, tanto sobre Windows como sobre Linux. A continuacin listamos algunas de las tecnologas con las que trabajan: Automatizacin y robtica. Bases de datos. Equipamiento domstico y domtica. Equipamiento y dispositivos electrnicos. Gestin de inventarios. Gestin documental. Hardware informtico. Integracin de sistemas. Marketing y promocin digital. Programario libre. Sistemas wireless. Software a medida.

En http://www.aiddea.com/ podemos encontrar la oferta completa de servicios y soluciones de Aiddea. Por ltimo comentar que tambin cuenta con un portal de venda on-line, http://www.aidealo.com , de productos electrnicos.

2.

UBICACIN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L:

El acuerdo entre Aiddea Linux, S.L, y Marina Carrillo fue el de realizar un aplicativo web para la gestin de dispositivos remotos. En concreto, un Sistema de Informacin Geogrfica, es decir, un sistema que nos permitir tener localizados diferentes elementos, en un mapa, podemos resumirlo en la palabra Geolocalizacin, trmino nuevo, y muy presente actualmente debido al auge de este tipo de tecnologas, que hace referencia a conocer la ubicacin geogrfica, de un dispositivo determinado. Como requisitos tcnicos el programa debe estar programado en JavaScript y PHP. Por otra parte, Aiddea Linux quiere que la aplicacin pueda ser utilizada en distintas situaciones, por lo tanto se har de forma que se pueda adaptar a diferentes tipos de elementos a localizar, aunque la idea actual se basa en tener localizados a un nmero determinado de animales, se pretende adaptarla en un futuro a otro tipo de demandas. Otro requisito deseado es que la interfaz debe ser minimalista e intuitiva, al usuario le debe resultar fcil navegar por la pgina y acceder a las funcionalidades que quiera de forma sencilla. Para realizar el proyecto, durante los meses de trabajo hemos ido realizando reuniones, o nos hemos puesto en contacto va correo electrnico, para ir acordando los requisitos de la aplicacin, tales como: definir las funciones deseadas y necesarias para el proyecto, comprobar y revisar el trabajo realizado, comentar dudas, y en resumen, ir definiendo correctamente el diseo y desarrollo del aplicativo. A continuacin, en el apartado 3, se explicar en profundidad la tarea realizada.

3.

DESCRIPCIN DE LA TAREA REALIZADA:

Este apartado es la parte fundamental del proyecto. Constar de los siguientes apartados: Introduccin: Haremos una introduccin general sobre la tarea a realizar, aportando ejemplos actuales que nos ayudaran a ir decidiendo como plantearemos nuestra aplicacin. Objetivos: Se trata de las metas globales del proyecto, es decir, hacer un esquema de todo aquello que necesitamos estudiar previamente para realizar la aplicacin, y todas las funciones y caractersticas que debe tener el caso prctico final. Especificaciones del proyecto: En otras palabras podramos decir que es el enunciado completo de la aplicacin, los requisitos principales que ha puesto Aiddea Linux, S.L. Conceptos bsicos: En el cual nos centraremos en dos temas principales, los Sistemas de Informacin Geogrfica (SIG), en el cual se incluye la explicacin de este tipo de sistemas y conceptos bsicos de cartografa, y el Open Geospatial Consortium (OGC). Se trata de situarnos en el tema, as, a la hora de realizar el proyecto prctico comprenderemos mejor ciertas funciones y decisiones. Diseo: Se explican detalladamente las tecnologas utilizadas, entre ellas OpenLayers, para la gestin del mapa, Ext JS, para la interfaz y MySQL, para el almacenamiento de los datos, exponiendo las ventajas de cada una de ellas. Desarrollo: Se har una descripcin de la estructura de la aplicacin, es decir, los archivos que la forman y las funciones principales de cada uno de ellos. Evaluacin: Juego de pruebas: En este apartado haremos funcionar la aplicacin, para comprobar que todo funciona de acuerdo a los objetivos y especificaciones. Recursos utilizados: Se expondr el software y hardware utilizados para el desarrollo del proyecto, y para que la aplicacin funcione correctamente.

3.1.

Introduccin:

La Geolocalizacin es una de las manifestaciones ms populares del desarrollo actual de las Tecnologas de la Informacin y las Comunicaciones (TIC), y que est experimentando un auge relevante en los ltimos tiempos. Hay diferentes formas de saber la ubicacin de un elemento fsico, pero ltimamente con la evolucin de la telefona mvil, podemos ubicarnos en cualquier punto del mundo, ya sea mediante receptores GPS, redes WI-FI inalmbricas, o las propias redes de telefona mvil, a esto le aadimos el desarrollo de la banda ancha mvil que permite la conexin permanente a internet de los llamados telfonos inteligentes (smartphones). El uso prctico de este tipo de tecnologas es muy variado, desde el uso en redes sociales como Facebook, como puede ser Facebook Places, aplicacin que te proporciona informacin sobre restaurantes, tiendas, opiniones de los diferentes lugares, etc, hasta utilidades como trazado de rutas, senderismo... Pero no slo estn ideadas para el ocio, en el campo empresarial y profesional tambin tienen utilidades muy importantes, como por ejemplo sistemas que utilizan algunas compaas de seguros para la localizacin de vehculos robados o siniestrados, etc. En el proyecto que nos ocupa crearemos la aplicacin con la que visualizaremos la informacin recibida en el mapa. Para entender mejor el funcionamiento general, a continuacin explicaremos los elementos bsicos de este tipo de sistemas, en nuestro caso estar formado por tres elementos (Vase Figura 1.): Equipos de localizacin: Elemento que llevar cada dispositivo que queremos tener posicionado, ser el emisor de la posicin y por lo tanto estar compuesto por un receptor de GPS1 y una tarjeta SIM con la cual se enviarn los SMS al servidor, tambin se puede obtener la posicin mediante la localizacin GSM2 a travs de la SIM, pero es un mtodo menos preciso que mediante GPS. Servidor: Computadora que gestiona la comunicacin entre los equipos de localizacin y la aplicacin web. Es donde se almacena toda la informacin recibida de los dispositivos remotos, de forma que cuando el usuario la solicite mediante la web, se pueda mostrar. Aplicativo Web: Ser el paso final, la web donde el usuario podr visualizar la informacin deseada, y ver todos los dispositivos registrados. Ser la tarea principal que se desarrollar en este proyecto.

1 2

GPS: Global Positioning System - Sistema de Posicionamiento Global Localizacin GSM: es un servicio ofrecido por las empresas operadoras de telefona mvil que permite determinar, con una cierta precisin, donde se encuentra fsicamente un terminal mvil determinado.

Figura 1. Esquema simplificado del funcionamiento del Sistema de Localizacin.

3.2.

Objetivos del Proyecto:

En este apartado se define como es el proyecto a realizar, as como las funciones y posibilidades que se esperan de l, es decir, lo que se pretende conseguir. El proyecto tiene como finalidad principal el diseo y desarrollo de una aplicacin web, en la cual se representa un mapa con la informacin espacial recibida de unos determinados dispositivos (elementos mviles). Para poder adentrarnos en las caractersticas y funcionamiento deseado, primero es conveniente hacer un estudio general de este tipo de tecnologas, por lo tanto, a priori, tendremos una serie de objetivos iniciales, de carcter ms terico, tales como: Conocer que es un SIG (Sistema de Informacin Geogrfica), as como conceptos generales relacionados con la cartografa, como coordenadas, proyecciones, etc. Comprender los estndares ms extendidos del OGC (Open Geospatial Consortium). Hacer un estudio sobre el framework OpenLayers, valorando sus capacidades para obtener los resultados deseados y las posibles futuras ampliaciones o modificaciones de la aplicacin. Crear la base de datos necesaria mediante MySQL, para poder gestionar la informacin recibida de forma eficiente.
9

Elegir un framework Javascript adecuado para la creacin del portal, en este caso EXT JS. Trabajar con los objetos y funciones de OpenLayers para, posteriormente, implementar un visor con OpenLayers y mostrar las diferentes rutas y posiciones.

Una vez situados en el tema, definiremos los objetivos bsicos del funcionamiento de la aplicacin. Debido a que est ideada para poderla adaptar a diferentes situaciones temticas, es decir, no sabemos qu tipos de elementos (por ejemplo: coches, animales, etc) sern los que queramos posicionar, siempre hablaremos de dispositivos en general: Recibir y almacenar la informacin de cada dispositivo. Tener la posibilidad de crear, eliminar y modificar dispositivos. Mostrar en el mapa la ltima posicin recibida de cada uno de los dispositivos. Visualizar la ruta seguida por un elemento a partir de los diferentes datos espaciales recibidos.

Estos seran los objetivos principales, tanto a nivel terico, como prctico. A continuacin, en el apartado especificaciones se expondrn ms a fondo todas las caractersticas y funciones que queremos que realice la aplicacin.

3.3.

Especificaciones del Proyecto:

El proyecto trata de desarrollar una aplicacin Web capaz de gestionar y monitorizar una serie de dispositivos wireless. En un principio la aplicacin est ideada para cualquier tipo de dispositivo a localizar, ya que se pretende que pueda ser utilizada en distintas situaciones, aunque como ejemplo e idea principal ser utilizada para localizar un nmero determinado de animales en un terreno. Por lo tanto no habr un nmero elevado de elementos, sobre unos 100 aproximadamente. Los dispositivos podrn ser agrupados en clases, es decir, tipos de dispositivos. La aplicacin constar de varias partes diferenciadas para facilitar la gestin de la informacin recibida, como mnimo con las siguientes: Pantalla de visualizacin del mapa, en la cual se mostrar, cuando el usuario lo indique, la ltima posicin de un elemento en concreto o la ruta que ha seguido a partir de todos los datos que hayamos recibido. rbol: Deberemos tener un panel que tenga un rbol con todos los dispositivos registrados, para marcar cuales queremos visualizar en el mapa. Pantalla con la lista de tipos de dispositivos y sus caractersticas (id, nombre, icono, nmero mximo de dispositivos que admite, nmero de dispositivos que
10

tiene actualmente, observaciones), en esta pantalla tambin tendremos opciones para modificarlos, eliminarlos o crear nuevos tipos. Pantalla con la lista de dispositivos, ser prcticamente igual a la explicada para los tipos de dispositivo, en este caso tendremos id, tipo, icono, nombre, y observaciones, de cada uno de ellos. Tambin tendremos los botones que nos permitirn acceder a modificarlos, eliminarlos o crear nuevos, adems se aadir el botn historial que nos mostrar las posiciones recibidas del dispositivo seleccionado. Como ya hemos dicho la aplicacin nos debe facilitar las opciones para crear, modificar y eliminar los tipos de dispositivos y dispositivos, se crearn y modificarn mediante formularios que piden los datos necesarios y validan la informacin introducida por el usuario. En el caso de eliminar, siempre se pedir al usuario que confirme que desea eliminarlos, para asegurarnos que no borre informacin accidentalmente.

La aplicacin est ideada para que la informacin de cada dispositivo se reciba mediante SMS. Se tendr que tener en cuenta que se debe utilizar el protocolo/servicio ms simple posible, ya que el encargado de enviar la informacin ser un dispositivo embedded, con una capacidad de proceso limitada. Se recibir un mensaje, va SMS, con al menos la posicin GPS, el resto de informacin se podr obtener si ese nmero de telfono est dado de alta en la configuracin. En el tema de recepcin de datos no nos adentraremos mucho, simplemente haremos una pequea simulacin para poder utilizar las funciones de la aplicacin.

3.4.

Sistema de Informacin Geogrfica (SIG): 3.4.1. Definicin y Elementos Principales:

El trmino SIG procede del acrnimo de Sistema de Informacin Geogrfica (en ingls GIS, Geographic Information System). Como definicin general podramos decir que se trata de sistemas que permiten integrar y analizar informacin geogrfica, los cuales proporcionan herramientas al usuario para editar, analizar e incluso visualizar los datos obtenidos en un mapa. De manera ms tcnica aadiramos que estn formados por equipos electrnicos (hardware), que estn programados adecuadamente (software) para permitir el manejo de una serie de datos espaciales (informacin geogrfica) y realizar anlisis complejos de stos, siguiendo los criterios impuestos por el equipo cientfico (equipo humano). Podemos identificar fcilmente los elementos principales (Ver Figura 2.), cada uno de ellos realiza su tarea para, en conjunto, obtener un SIG funcional: - Hardware: Ordenador o grupo de ordenadores y perifricos de entrada y salida que constituyen el soporte fsico del SIG.

11

- Software: Los programas SIG proveen las herramientas y funcionalidades necesarias para almacenar, analizar y mostrar informacin geogrfica, los componentes principales son: o Sistemas para administrar bases de datos. o Una interfaz grfica de usuarios para el fcil acceso a las herramientas. o Herramientas para captura y gestin de la informacin. o Herramientas para soporte de consultas, anlisis y visualizacin de los datos espaciales. Actualmente, con el mayor acceso a Internet y a la demanda de datos geogrficos distribuidos, el software SIG ha cambiado gradualmente su perspectiva hacia la distribucin de datos a travs de la red. Los SIG que en la actualidad se comercializan son combinaciones de varias aplicaciones interoperables y APIs. - Datos geogrficos: Es el componente ms importante. Pueden obtenerse por recursos propios o a travs de proveedores de datos. A su vez es el elemento diferenciador de un SIG frente a un Sistema de Informacin, ya que este tipo de datos contiene dos vertientes: la espacial y la temtica. Para aclarar estos dos conceptos pondremos un ejemplo. Si tenemos un SIG que nos muestra los niveles de contaminacin en el agua, un lago tendr dos tipos de informacin: la que nos indica sus magnitudes en el mapa y aspecto, la espacial, y la que nos muestra los niveles de contaminacin, la temtica. Por lo tanto, el sistema tiene que trabajar con cartografa y con bases de datos a la vez, de forma que al unirlo obtendremos una base de datos geogrfica. - Procedimientos: Para que un SIG tenga xito, este debe operar de acuerdo a un plan bien diseado y estructurado y acorde a las reglas de la empresa, que son los modelos de las actividades propias de cada organizacin. - Equipo humano: Hay distintas formas de interactuar con este tipo de programas, dependiendo del tipo de usuario: o Usuario final el cual obtiene informacin del sistema. o Tcnico o especialista que configura y define las herramientas a utilizar, los datos, etc., dependiendo de la finalidad exacta del programa. o Informticos, dependiendo de la magnitud del sistema, son los encargados de su administracin.

12

Figura 2. Elementos principales de un SIG.

3.4.2. Cartografa:
Antes de adentrarnos ms en los sistemas GIS, explicaremos conceptos geogrficos bsicos, tales como longitud, latitud, proyecciones, etc. Los cuales nos ayudaran a comprender mejor su funcionamiento.

3.4.2.1. Definicin:
La cartografa es la ciencia que se encarga del estudio y de la elaboracin de los mapas geogrficos y territoriales, entre otros. A grandes rasgos, se trata de implementar una representacin de la Tierra sobre una superficie plana llamada mapa. De manera simple, un mapa es la representacin del mundo real reducido a puntos, lneas y polgonos mediante el uso de smbolos grficos. Debido a que la Tierra tiene una forma esfrica, se debe utilizar un sistema de proyecciones para poder representar una superficie esfrica en una superficie plana. El problema es que en realidad no es exactamente esfrica, su forma es ms achatada en los polos que en la zona ecuatorial. Adems de representar los contornos, las superficies y los ngulos, se ocupa de representar la informacin sobre el mapa. Estas representaciones, actualmente se estn realizando con los sistemas SIG, en los que se puede georeferenciar (dotar de coordenadas geogrficas (longitud, latitud), ubicar en el espacio).

3.4.2.2. Sistema de Coordenadas:

Se trata del conjunto de valores que permiten definir unvocamente la posicin de cualquier punto de un espacio geomtrico respecto de un punto denominado origen. El conjunto de ejes, puntos o planos que confluyen en el origen y a partir de los cuales se
13

calculan las coordenadas de cualquier punto, constituyen lo que se denomina sistema de referencia. Sistema de Coordenadas Geogrficas: El sistema de coordenadas geogrfico est alineado con los ejes de rotacin de la Tierra. Define dos ngulos desde el centro de la Tierra: latitud y longitud (Ver Figura 3.), que explicamos a continuacin: Latitud: Mide el ngulo entre cualquier punto y el ecuador. Las lneas de latitud se llaman paralelos y son crculos paralelos al Ecuador en la superficie de la tierra. Longitud: Mide el ngulo a lo largo del ecuador desde cualquier punto de la tierra. Se acepta que Greenwich, en Londres, es la longitud cero. Las lneas de longitud son crculos mximos que pasan por los polos y se llaman meridianos.

Figura 3. Sistema de Coordenadas Geogrficas. Longitud y latitud.

Combinando estos dos ngulos, se puede expresar la posicin de cualquier punto de la superficie de la Tierra.

3.4.2.3. Proyecciones:
Las proyecciones estudian las distintas formas de mostrar la superficie terrestre en un plano. Un mapa, es una representacin en dos dimensiones, de un objeto tridimensional (la Tierra), por lo tanto, cuando lo creamos, estamos perdiendo una dimensin, por este motivo el plano obtenido no ser perfecto, habr una pequea distorsin. Esto supone un problema ya que no hay forma de representar la esfera sobre una superficie plana, sin que exista un error mnimo. Las proyecciones vienen a solventar este problema, estudiando las distintas opciones para obtener la forma ms exacta posible en el mapa. Existen diferentes tipos de proyecciones pero nos centraremos en la proyeccin Spherical Mercator, que es de la que hablaremos durante el proyecto.

14

Proyeccin de Mercator: Este tipo de proyeccin consiste en representar la superficie esfrica terrestre sobre una superficie cilndrica, tangente al ecuador, que al desplegarse genera un mapa terrestre plano. Con otras palabras, diramos que se basa en el modelo ideal que trata a la Tierra como un globo hinchable, el cual se introduce en un cilindro y empieza a inflarse ocupando el volumen del cilindro e imprimiendo el mapa en su interior. Este cilindro cortado longitudinalmente y ya desplegado sera el mapa (Ver Figura 4.). Esta proyeccin presenta una buena aproximacin en su zona central, pero las zonas superior e inferior correspondientes a norte y sur presentan grandes deformaciones. Google Maps y Virtual Earth 2d, actualmente usan la proyeccin de Mercator. A pesar de sus relativas distorsiones de escala, esta proyeccin est muy indicada para mapas interactivos en que se hacen desplazamientos y acercamientos de regiones pequeas, donde las formas se distorsionan relativamente poco.

Figura 4. Proyeccin Spherical Mercator.

3.4.3. Representacin de la Informacin:

En este apartado explicaremos las principales tcnicas que utilizan los SIG para representar la informacin, es decir, el mundo real, datos como carreteras, uso del suelo, contaminacin, etc. Estos a su vez se pueden dividir en dos tipos: objetos discretos (ejemplo: casa, carretera) y continuos (ejemplo: nube de contaminacin, acuferos). Para almacenar estos datos hay dos formas principales de hacerlo, se trata del modelo raster y el vectorial, a continuacin se explicar cada uno de ellos y por ltimo, se compararan.

3.4.3.1. Modelo Raster:

La idea principal del modelo de datos raster, es una imagen digital dividida en mallas. Se divide el espacio en celdas regulares (pxeles) y cada una de ellas representa un nico valor, el cual puede ser discreto, como el uso del suelo, o un valor continuo, como una temperatura, o un valor nulo, si no existe informacin.
15

Como ya hemos dicho la imagen queda como una rejilla de celdas, por lo tanto la posicin de cada una viene implcita segn el orden que ocupa en la malla, el espacio no es continuo sino que se divide en unidades discretas. Este tipo de estructuras puede implicar un incremento del espacio de almacenamiento, ya que guardan cada celda de la matriz sin tener en cuenta si se trata de una entidad o simplemente de un espacio vaco, informacin no significativa. Para obtener una descripcin precisa de los objetos geogrficos contenidos en la base de datos, el tamao del pxel ha de ser reducido (en funcin de la escala), lo que dotar a la malla de una resolucin alta. Sin embargo, a mayor nmero de filas y columnas, ms resolucin, pero tambin, mayor esfuerzo en el proceso de captura de la informacin y mayor costo computacional a la hora de procesarla. Los datos raster se almacenan en diferentes formatos, desde un archivo estndar basado en la estructura de TIFF, JPEG, etc. a grandes objetos binarios.

3.4.3.2. Modelo Vectorial:

En este caso modelamos digitalmente las entidades del mundo real a partir de elementos geomtricos. Para ello se utilizan vectores definidos por pares de coordenadas relativas a algn sistema cartogrfico. Los principales componentes son: Punto o nodo: unidad bsica para representar entidades geogrficas que pueden ser expresadas por un nico punto de referencia, en otras palabras, la simple ubicacin. Lnea: a partir de dos puntos, como mnimo, formaremos las lneas. En este tipo de elementos se puede medir la distancia. Polgono: en este caso a partir de lneas o agrupaciones de puntos crearemos polgonos.

El inters de este tipo de representaciones se centra en la precisin de localizacin de los elementos geogrficos sobre el espacio, donde los fenmenos a representar son discretos, es decir, de lmites definidos.

16

Figura 5. A la izquierda modelo de datos raster, a la derecha modelo de datos vectorial.

3.4.3.3. Comparacin entre Modelo Raster y Vectorial:

Despus del estudio de los dos modelos, podemos observar que una de las diferencias principales es la exactitud de representacin, es decir, el modelo raster, al contrario que el vectorial, es especialmente til cuando tenemos que describir objetos geogrficos con lmites difusos, como por ejemplo la dispersin de una nube de contaminantes, donde los contornos no son absolutamente ntidos, normalmente con tratamiento de objetos continuos. Por otro lado el modelo vectorial es ms exacto. Otros aspectos a tener en cuenta es el coste computacional, en el caso raster se necesita ms espacio de memoria, aunque la estructura de los datos es muy simple. En el caso vectorial, slo se almacenan los datos digitalizados por lo tanto no necesita tanto espacio de memoria, por el contrario la estructura de datos es ms compleja. En algunos casos se podrn utilizar los dos modelos para cubrir las necesidades completas de la aplicacin.

3.4.4. Actualidad y Ejemplos de Aplicaciones de un SIG:

En la actualidad es una herramienta muy utilizada en muchos mbitos, debido a que permite elaborar cartografa temtica sobre cualquier aspecto ambiental y socioeconmico de la superficie terrestre. Aunque no nos demos cuenta, en nuestro da a da estn presentes en muchos mbitos. Por ejemplo, las mercaderas que consumimos habitualmente son transportadas a travs de vehculos monitoreados por sistemas satelitales, con los SIG se puede hacer un seguimiento de todas las unidades de transporte para obtener datos como la ruta por la que
17

van, clculos de distancia hasta al punto de destino, ubicacin, distancia recorrida otra muestra de la utilidad de estos programas la encontramos en las compaas elctricas, las cuales pueden gestionar toda su red de servicios a travs de ellos, en el caso de una avera podrn ver fcilmente toda el rea afectada, ayudando as a la pronta solucin del problema. En general, el mundo de la informacin a la vez que Internet ha experimentado una evolucin muy importante en los ltimos aos. Gracias a esto, el mundo de los SIG ha asistido a una explosin de aplicaciones destinadas a mostrar y editar cartografa en entornos web, hoy da cualquier usuario que navegue por la red, por muy pocos conocimientos que tenga sabr de la existencia, por ejemplo, de Google Maps. Ms recientemente, estas aplicaciones tambin se estn extendiendo muy rpidamente a terminales de telefona mvil y otros sistemas como tablets. Este tipo de aplicaciones da acceso al pblico de enormes cantidades de datos geogrficos, por esta razn es necesario establecer unos estndares, creados por la organizacin OGC3, que facilitan la interoperabilidad de los datos espaciales. Muchas disciplinas se han beneficiado de las tecnologas SIG. Esto ha producido una reduccin de costes y mejoras en componentes de hardware y software de sistemas. Adems, esta tecnologa ha sido asimilada por multitud de universidades e instituciones. A continuacin nombramos algunas de ellas: La Infraestructura de Datos Espaciales de Espaa (IDEE) tiene como objetivo el integrar a travs de Internet los datos, metadatos, servicios e informacin de tipo geogrfico que se producen en Espaa, facilitando a todos los usuarios la localizacin, identificacin, seleccin y acceso a tales recursos, a travs del Geoportal de la IDEE (http://www.idee.es). A nivel europeo, existe el proyecto INSPIRE (Infrastructure for Spatial Information in Europe), iniciativa de la Comisin Europea cuyo objetivo es la creacin de una Infraestructura de Datos Espaciales en Europa. La Infraestructura de Dades Espacials de Catalunya es una plataforma para el intercambio y cambio de la informacin geoespacial a travs de Internet, en la cual participan todas las administraciones pblicas (entes locales, Generalitat, estado) y tambin otras instituciones pblicas y privadas.

3 Ver apartado 3.5. Open Geospatial Consortium

18

A continuacin se muestran algunos ejemplos de SIG: Camino Jacobeo:

Ejemplo de SIG aplicado al mbito del Patrimonio Histrico-Artstico. Se trata de una aplicacin que hace recorridos virtuales por las rutas del Camino de Santiago, adems nos proporciona informacin sobre pueblos, alojamientos, restaurantes.

Figura 6. SIG Camino de Santiago [7]

Geoportalbcn:

En el pasado saln GlobalGeo 2011 se present la actualizacin del Geoportalbcn. El Geoportal es el punto de entrada a la Infraestructura de Datos Espaciales del Ayuntamiento de Barcelona. El usuario puede interactuar con la aplicacin, calculando distancias, buscando puntos en concreto de la ciudad, obteniendo informacin cartogrfica, etc.

Figura 7. Geoportalbcn [8]

19

Ideclocal:

Se trata de una iniciativa de IDEC (Institut de Dades Espacials de Catalunya), el cual es la base tcnica para la organizacin, promocin, explotacin y mantenimiento de las infraestructuras de datos espaciales, con la finalidad de difundir geoinformacin y servicios conexos, y que sean ms accesibles para asegurar el uso compartido.

Figura 8. IdecLocal [9]

3.5.

Open Geospatial Consortium (OGC):

El Open Geospatial Consortium (OGC) es una organizacin internacional que agrupa a 416 compaas y organismos pblicos. Trabaja en la definicin de especificaciones pblicas para el intercambio de datos entre los sistemas de informacin geogrfica. El principal objetivo de dicho consorcio es la definicin de estndares abiertos e interoperables dentro de los GIS y de la World Wide Web que faciliten el intercambio de la informacin geogrfica, entre distintos sistemas, en beneficio de los usuarios y de la industria [16].

Figura 9. Logotipo OGC [16]

Dentro de las especificaciones definidas por el OGC destacamos dos por su importancia y grado de implantacin en el mundo de los GIS: Web Map Service (WMS) y Web Feature Service (WFS).
20

3.5.1.

Web Map Service (WMS):

Es un estndar OGC, que produce mapas de datos referenciados espacialmente, de forma dinmica a partir de informacin geogrfica. Este estndar internacional define un "mapa" como una representacin de la informacin geogrfica, en forma de un archivo de imagen digital conveniente para la exhibicin en una pantalla de ordenador. Est organizada en una o ms capas, que pueden visualizarse u ocultarse una a una. Se puede consultar cierta informacin disponible y las caractersticas de la imagen del mapa. Los mapas producidos por WMS se generan normalmente en un formato de imagen como PNG, GIF o JPEG, y opcionalmente como grficos.

3.5.2. Web Feature Service (WFS):

Es un servicio estndar, que ofrece un interfaz de comunicacin que permite interactuar con los mapas servidos por el estndar WMS, como por ejemplo, editar la imagen que nos ofrece o analizarla siguiendo criterios geogrficos. Para realizar estas operaciones se utiliza el lenguaje GML4 (Lenguaje de Marcado Geogrfico) que deriva del XML, que es el estndar a travs del que se transmiten la ordenes WFS. Los WFS pueden ser del tipo no transaccional o transaccional. La diferencia es que el transaccional slo permite hacer consultas y recuperacin de elementos geogrficos, frente al transaccional que permite adems la creacin, eliminacin y actualizacin de estos elementos geogrficos del mapa.

3.6. Diseo del Proyecto: 3.6.1. OpenLayers: 3.6.1.1. Qu s?

OpenLayers es una librera escrita en JavaScript, orientado a objetos, que nos facilita acceder, manipular y mostrar mapas en cualquier pgina web o aplicacin, del lado cliente, por lo tanto sin necesidad de un servidor ni configuracin.

Figura 10. Logotipo OpenLayers [21]

A continuacin, con la Figura 11. y los conceptos Web Map Client y Web Map Server, acabaremos de aclarar el significado de qu OpenLayers sea una librera del lado cliente. Esto es llamado Client/Server Model y es, bsicamente, como trabajan la mayora de aplicaciones web.

4 GML: lenguaje utilizado para el modelaje, transporte y almacenamiento de informacin geogrfica.

21

En el caso de las web map application, algn tipo de cliente (por ejemplo OpenLayers) comunica con alguna clase de Web map server (por ejemplo un servidor WMS o Google Maps).

Figura 11. Client / Server Model [20]

Web Map Client: Como ya hemos dicho, OpenLayers trabaja en el lado cliente. Una de las principales tareas que el cliente realiza es conseguir imgenes de mapas de un servidor. El cliente ir pidiendo al servidor de mapas aquello que quiere ver. Cada vez que navega o hace zoom en el mapa, el cliente tiene que hacer nuevas peticiones, ya que est solicitando cosas diferentes. OpenLayers se encarga de manejar estas tareas a travs de Javascript asncrono (AJAX5), llamadas a un servidor de mapas. OpenLayers une todas las imgenes que recibe de forma que obtiene el mapa tal y como el usuario lo visualiza. Web Map Server: Este concepto ha sido explicado en el captulo anterior como un estndar OGC, en este apartado lo veremos de una forma ms prctica. Un servidor de mapas nos proporciona el propio mapa. Hay muchos servidores de este tipo, un ejemplo son Google Maps, mapas de Yahoo, mapas OpenStreet, etc. El principio bsico detrs de todos ellos es que permiten especificar el rea que queremos ver (mediante el envo de una solicitud), una vez recibida la solicitud, el servidor se encarga de enviar una respuesta que contiene la imagen. Con OpenLayers se pueden utilizar diversos servidores incluso combinarlos. OpenLayers no es un servidor de mapas, por lo tanto, el cliente deber tener acceso a algn servidor de mapas, no se debe hacer nada, tan slo introducir la direccin URL en OpenLayers. Mapas OpenStreet, Google, Yahoo, etc proporcionan acceso a sus servidores de mapas (algunos de ellos son comerciales y es posible que le apliquen restricciones en algunos de los servicios).

3.6.1.2. Por qu OpenLayers?

Una caracterstica positiva de OpenLayers es que ha sido desarrollado para promover informacin geogrfica de todo tipo, es decir, puede mostrar mapas y marcadores cargados de cualquier fuente. Uno de sus objetivos principales consiste en separar las herramientas para la visualizacin de los mapas, de los datos, de manera que todas las funciones se pueden utilizar a partir de diferentes fuentes. De esta forma, no estamos obligados a ver la

5 Ver apartado 3.6.4. AJAX

22

informacin espacial a travs de las aplicaciones propias de los creadores o proveedores de datos geogrficos. En resumen, nos permite elaborar nuestros mapas haciendo uso de su propia base de informacin cartogrfica o usar su estructura para hacer uso de otros servicios. Adems, si comparamos OpenLayers con otros frameworks con la misma finalidad, el punto fuerte lo encontramos en que es un software gratuito, de cdigo abierto, de uso totalmente libre bajo la licencia BSD6. Est desarrollado por y para la comunidad de software libre ya que actualmente es un proyecto de la Open Source Geoespatial Foundation (OSGeo). Adems, implementa mtodos estndar de la industria para el acceso a los datos geogrficos, tales como el Open Geospatial Consortium: Web Map Service (WMS) y Web Feature Service (WFS), explicados anteriormente. A diferencia de otras APIs, como por ejemplo Google Maps, se trata de un paquete creado por una comunidad open source. Esto puede resultar til para aquellos que no quieren mostrar el logo de Google, ya que debido a la licencia de Google Maps no est permitido ocultarlo.

3.6.2. Ext JS: 3.6.2.1. Qu es?

De acuerdo a la definicin de la pgina web ExtJS es una librera Javascript que permite construir aplicaciones complejas en Internet, las llamadas RIA.

Figura 12. Logotipo Ext JS [32]

Antes de explicar ms caractersticas sobre ExtJS hablaremos sobre RIA, acrnimo de Rich Internet Applications (Aplicaciones Ricas en Internet). Lo que RIA intenta proveer es una experiencia de usuario muy parecida o igual a la que se tiene en las aplicaciones de escritorio. Uno de los objetivos de ExtJS es crear este tipo de aplicativos. Actualmente, es importante tener en cuenta el aspecto de las pantallas de los sistemas que desarrollamos, ya que los consumidores son la parte ms importante en nuestras aplicaciones. ExtJS nos ayuda a mejorar la interaccin con el usuario, pues nos proporciona componentes con funcionalidades avanzadas y de sencilla implementacin. Se trata de que resulten fciles de usar e intuitivas. Volviendo a qu es ExtJS podemos hablar de sus orgenes, fue construida como una extensin de la librera Yahoo! User Interface (YUI), gracias a su buena estructura
6

BSD: (Berkeley Software Distribution). Es una licencia de software libre muy cercana al dominio pblico. La licencia BSD permite el uso del cdigo fuente en software no libre.

23

actualmente puede interactuar como extensin para las bibliotecas jQuery y Prototype. Desde la versin 1.1 puede ejecutarse tambin como una aplicacin independiente, ya que adems cuenta con su propia librera la cual se llama Ext-base, es la que se ha utilizado en este proyecto. Otro punto a tener en cuenta son las licencias, tiene tres tipos: Licencia comercial: esta licencia se debe comprar cuando necesitas desarrollar software propietario. Licencia Opens Source: este tipo de licencia se aplica cuando se desea desarrollar un proyecto Open Source, esto implica liberar el proyecto con licencia GNU GPL V3. Licencia Revendedor: este tipo de licencia es necesaria adquirirla cuando se desea realizar un framework o librera basada sobre Ext JS.

Para acabar de explicar y valorar este framework a continuacin se comentan las principales ventajas e inconvenientes.

3.6.2.2. Ventajas e Inconvenientes de Ext JS:

Principales ventajas de ExtJS: AJAX7: Las aplicaciones web tradicionales tienen problemas como la recarga continua de las pginas cada vez que el usuario pide nuevo contenido. ExtJS permite la comunicacin con el servidor en segundo plano, sin la necesidad de actualizar la pgina por completo. De esta forma se pueden solicitar o enviar datos hacia o desde su servidor web utilizando AJAX, y procesar la informacin recibida en tiempo real. Compatibilidad con los navegadores: Permite crear aplicaciones complejas utilizando componentes predefinidos as como un manejador de layouts similar al que provee Java Swing, gracias a esto provee una experiencia consistente sobre cualquier navegador, evitando el tedioso problema de validar que el cdigo escrito funcione bien en cada uno (Firefox, IE, etc.). Un modelo de componentes muy bien diseado: a parte del punto anterior respecto a la compatibilidad con los navegadores, un ejemplo de que se trata de unos componentes muy eficientes es la ventana viewport, la cual al moverla o redimensionarla se adapta, es decir, se dibujan slo los bordes haciendo que el movimiento sea fluido. Cuenta con distintos tipos de licencias, explicados anteriormente.

Ver apartado 3.6.4. Ajax

24

Por ltimo, comentar que otro punto fuerte que nos ha convencido para elegir este framework es la existencia de GeoEXT, se trata de una herramienta construida a partir de la robusta librera de OpenLayers y los ricos componentes grficos de ExtJS. La cual tiene componentes destinados a aplicaciones SIG, permitiendo crear potentes webs de mapas basadas en Javascript.

Figura 13. Logotipo GeoExt [36]

Principales desventajas de ExtJS: Javascript no es tan rpido como quisiramos, sin embargo con los nuevos navegadores es un factor que puede mejorar. La librera tiene un tamao considerable, aunque se puede recortar para incluir aquellas funcionalidades que en realidad se van a utilizar.

En resumen, podemos decir que las desventajas de velocidad y tamao son aspectos a tener en cuenta pero que se contrarrestan con los beneficios que nos aporta. Ya que es muy flexible y adems nos permite realizar de una manera muy rpida interfaces con un look and feel muy profesional. Creando aplicaciones vistosas y sobre todo operacionales en el
ambiente web, y con un flujo de datos como si se tratar de una aplicacin de escritorio.

3.6.3. Gestin de la informacin: Base de datos:

La combinacin del lenguaje PHP junto con la base de datos MySQL es una combinacin muy utilizada en un gran nmero de pginas web que podemos encontrar hoy en da mientras navegamos por internet, debido a la potencia que se consigue utilizando estas dos aplicaciones juntas. A continuacin explicaremos cada una de ellas, y tambin haremos referencia a phpMyAdmin herramienta que nos facilitar el trabajo con las bases de datos.

3.6.3.1. PHP:
PHP es un lenguaje de alto nivel embebido en pginas html que se ejecuta en el servidor, por lo tanto no es necesario ser compilado, al contrario de otros lenguajes que son ejecutados en el propio navegador. Es un lenguaje multiplataforma, funciona bajo diferentes sistemas operativos. Una de las ventajas que ofrece este tipo de lenguajes es que al ejecutarse en el servidor, todas nuestras pginas van a poder ser vistas en cualquier ordenador, independientemente del navegador que tenga.

25

La funcin principal que realizar PHP en el aplicativo web ser la de gestionar la informacin de la base de datos que tenemos almacenada en el servidor. Otro punto fuerte de PHP es que se trata de un lenguaje de programacin totalmente gratuito. Cuando decimos que PHP es un lenguaje del lado del servidor significa que el usuario abre la pgina html en su navegador y hace una peticin de interactuar. PHP instalado en dicho servidor web interpreta o procesa el script, es decir, la peticin, y enva dicha respuesta al usuario en forma de documento html. Esto es una breve explicacin del funcionamiento de PHP que podemos ver grficamente en la Figura. 14.

Figura 14. Funcionamiento de PHP.

3.6.3.2.

MySQL:

Se trata de una base de datos que soporta el lenguaje SQL y la conexin de varios usuarios, en general se utiliza para aplicaciones de tamao pequeo-medio como la que nos ocupa. Como PHP es gratuito.

3.6.3.2.1. Lenguaje SQL:

El lenguaje SQL (Structured Query Languaje - Lenguaje de consultas estructurado) es una herramienta para organizar, gestionar y recuperar datos almacenados en una base de datos informtica. Como su propio nombre indica, SQL es un lenguaje informtico que se puede utilizar para interaccionar con una base de datos y ms concretamente con un tipo especfico llamado base de datos relacional. Este tipo de base de datos permite establecer interconexiones (relaciones) entre los datos (que estn guardados en tablas), y a travs de dichas conexiones relacionar los datos de ambas tablas, de ah proviene su nombre: "Modelo Relacional".

26

Est compuesto por comandos, clusulas, operadores y funciones de agregado. Estos elementos se combinan en las instrucciones para crear, actualizar y manipular las bases de datos. Por ltimo, decir que es un lenguaje estndar por haberse visto consolidado por el Instituto Americano de Normas (ANSI) y por la Organizacin de Estndares Internacional (ISO). Para el uso y manejo de la base de datos MySQL, vamos a emplear una aplicacin muy usual y extendida llamada phpMyAdmin.

3.6.3.2.2. phpMyAdmin:
PhpMyAdmin es una herramienta escrita en PHP con la intencin de manejar la administracin de MySQL a travs de pginas web, utilizando Internet. Actualmente puede crear y eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y aadir campos, ejecutar cualquier sentencia SQL, administrar claves en campos, administrar privilegios, exportar datos en varios formatos y est disponible en 62 idiomas. Se encuentra disponible bajo la licencia GPL.

3.6.3.3.

Base de Datos:

En nuestra aplicacin utilizamos una base de datos, que est formada por tres tablas:

3.6.3.3.1. Tabla Tipos de dispositivos:

- Una tabla para guardar los tipos de dispositivos: Tabla: t_disp Campos
id nomt icono maxdisp numdisp ob_tipo

Tipo de datos TINYINT(3) CHAR(10) CHAR(12) TINYINT(3) TINYINT(3) CHAR(30) TOTAL:

Tamao (bytes) 3 10 12 3 3 30 61

Tabla 1. Tabla Tipos de Dispositivos, con sus campos correspondientes y el tamao de cada uno de ellos.

Esta tabla almacenar los tipos de dispositivos, es decir, podemos agrupar los elementos a localizar en diferentes clases o grupos.
27

Tiene seis campos, a continuacin explicaremos cada uno de ellos: El id, se trata de un valor numrico que identifica al grupo de dispositivos, se ha configurado en phpMyAdmin como un tipo de datos Tinyint y adems como unsigned, es decir, deber ser un nmero entero positivo comprendido entre 0 y 255. Esto significa que la aplicacin como mximo tendr 256 tipos de dispositivos. No podr haber dos id iguales ni valores nulos, ya que se ha definido como clave primaria. En el diseo de bases de datos relacionales, se llama clave primaria a un campo o a una combinacin de campos que identifica de forma nica a cada fila de una tabla. Una clave primaria comprende de esta manera una columna o conjunto de columnas. No puede haber dos filas en una tabla que tengan la misma clave primaria . nomt hace referencia al nombre que le pondremos al tipo de dispositivo. En este tipo de campos en los cuales se almacenan cadenas de caracteres tenamos dos opciones a elegir para definir el tipo de datos, VARCHAR y CHAR. En ambos tipos el rango de caracteres que se pueden guardar va de 1 a 255. Para ver la diferencia pondremos un ejemplo, imaginemos que guardamos la palabra Coches la cual tiene 6 caracteres: En el caso de CHAR(10), guardaremos los 6 caracteres correspondientes a Coches y adems 4 espacios vacos hasta llegar al nmero mximo de caracteres que hemos establecido en 10. En el caso de VARCHAR(10) se guardarn slo los 6 caracteres de la palabra ms un byte para indicar la longitud de la columna, por lo tanto 7 bytes.

Llegados a este punto parece ilgico haber elegido como tipo de datos CHAR, la razn es que con CHAR accedemos ms rpido a la informacin porque sabemos que todas las filas son de la misma longitud, a diferencia de lo que pasa con VARCHAR que se tiene que ir mirando el byte que se ha guardado de ms, para saber el tamao de cada fila. icono en este campo guardaremos el nombre del archivo que haga referencia a la imagen que represente al grupo de dispositivos, que despus se utilizar en la interfaz de la aplicacin. Tambin es definido como CHAR(10). maxdisp y numdisp ambas sern variables de tipo Tinyint por lo tanto no podrn ser superiores a 255. La primera ser introducida por el usuario que nos indicar el nmero mximo de elementos que puede tener un tipo
28

de dispositivo, como mximo 255. Debido al tipo de variable que le hemos asignado, como mximo sern 255, dependiendo del uso exacto que se le quiera dar a la aplicacin podemos modificarlo y ponerle otra clase de dato, que nos permita tener ms dispositivos. Por el momento, creemos que el uso no ser a gran escala. La segunda numdisp nos informar de la cantidad de dispositivos que tiene actualmente. ob_tipo por ltimo tendremos un campo por si queremos hacer algn tipo de observacin respecto a un grupo de elementos. Tendremos capacidad para 30 caracteres.

Una vez definidos todos los campos, sabemos que una fila nos ocupar 61 bytes, teniendo en cuenta que como mximo tendremos 256 tipos de dispositivos, la tabla t_disp tendr un tamao mximo de: 15.616 bytes = 15,25 KB.

3.6.3.3.2. Tabla Dispositivos:

Una tabla para guardar los dispositivos: Tabla: disp Campos telfono idtipo iconodisp nombre observaciones color Tipo de datos INT(9) TINYINT(3) CHAR(12) CHAR(10) CHAR(30) CHAR(7) TOTAL: Tamao (bytes) 9 3 12 10 30 7 71

Tabla 2. Tabla de Dispositivos, con sus campos correspondientes y el tamao de cada uno de ellos.

En esta tabla se almacenarn los dispositivos o elementos a localizar. Est compuesta por: telfono o identificador numrico del elemento, ser el nmero de telfono del dispositivo a localizar, el cual nos enviar la informacin mediante mensajes de texto, esta decisin de diseo formaba parte de los requisitos iniciales de la aplicacin. Lo hemos configurado como un nmero entero de 9 cifras de valor positivo, por lo tanto ir de 0 a 999.999.999. Es la clave primaria de la tabla.

29

idtipo es igual que el id que hemos definido en la tabla anterior, la nica diferencia es que en este caso no es la clave primaria de la tabla. Hace referencia al grupo de dispositivos al que pertenece el dispositivo. Se trata de una clave fornea. iconodisp se trata del nombre del archivo del icono que representar al dispositivo remoto en la interfaz, es decir, en el mapa y en el rbol de dispositivos. Ser una imagen propia del dispositivo e independiente a la del grupo de dispositivos. Los campos nombre y observaciones corresponden al nombre y a las observaciones del dispositivo, respectivamente. Por ltimo color corresponde al color que le asignaremos al LineString8 del dispositivo. Le hemos puesto una longitud mxima de 7 caracteres ya que corresponde a un color en HTML con el siguiente formato: #XXXXXX.

Esta vez, sabemos que una fila nos ocupar 71 bytes, teniendo en cuenta que como mximo tendremos 255 dispositivos por tipo de dispositivo, y un mximo de 256 tipos, la tabla disp tendr un tamao mximo de: 4.634.880 bytes = 4,42 MB aproximadamente.

3.6.3.3.3. Tabla Historial:

- Una tabla para guardar el historial, o informacin recibida de cada dispositivo: Tabla: historial Campos telfono fecha hora latitud longitud Tipo de datos INT(9) DATE TIME DECIMAL(8,5) DECIMAL(8,5) TOTAL: Tamao(bytes) 9 3 3 10 10 35

Tabla 3. Tabla del Historial de cada Dispositivo, con sus campos correspondientes y el tamao de cada uno de ellos.

LineString: Ver captulo 3.7.3.3. Layers o capas.

30

En esta tabla tendremos la informacin recibida de todos los dispositivos, los campos que la forman son: telfono campo descrito en la tabla anterior. En este caso acta como clave fornea ya que relaciona la tabla de dispositivos con la del historial de informacin recibida. fecha configurado como tipo de datos Date, como es evidente se almacenar una fecha. El rango de valores va desde el 1 de enero del 1001 al 31 de diciembre de 9999. El formato de almacenamiento es de ao-mesda. Se debe tener en cuenta que Mysql simplemente comprueba que el mes est comprendido entre 0 y 12 y que el da est comprendido entre 0 y 31. hora almacenar una hora. El rango de horas va desde -838 horas, 59 minutos y 59 segundos a 838 horas, 59 minutos y 59 segundos. El formato de almacenamiento es de 'HH:MM:SS'. En esta tabla la clave primaria estar formada por el telfono, la fecha y la hora. latitud y longitud se definen como decimales, este tipo se usa para guardar valores para los que es importante tener una precisin exacta. El tipo de datos se define como DECIMAL (8, 5) dnde 8 es el nmero mximo de dgitos que tendr el nmero contando tambin los decimales, y 5 ser el nmero de decimales. El tema de la cantidad de decimales que se guardan, en un futuro se podr cambiar, ya que depende del GPS que tenga el dispositivo. La posicin mostrada ser ms o menos fiable en funcin de esto. La longitud total de cada fila de esta tabla ser de 35 bytes. En este caso es ms difcil hacer un clculo aproximado de la medida ya que es muy variable, no sabemos exactamente las posiciones que se van a recibir.

31

Figura 15. Relacin entre las bases de datos.

Por ltimo ver de forma prctica (Vase Figura 15.), el modelo de Base de datos relacional comentado en el aparatado anterior. Ya que la tabla de dispositivos est relacionada mediante el campo telfono con la tabla que guarda las posiciones, a la vez con la tabla que contiene los tipos de dispositivos a travs del campo idtipo que es el mismo valor que tenemos en la tabla t_disp dentro del campo id.

3.6.4. AJAX:
En este apartado se definirn y explicaran los trminos AJAX, y JSON. Tecnologas que nos permitirn intercambiar informacin del servidor al cliente y a la inversa, valorando su eficacia, sus ventajas e inconvenientes. Inicialmente definiremos Ajax, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. La caracterstica fundamental de AJAX es permitir actualizar partes de una pgina, con informacin que se encuentra en el servidor, sin tener que refrescar completamente la pgina. Como ya hemos dicho, se trata de una tecnologa asncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje con el cual se efectan, normalmente, las funciones de llamada de Ajax.
32

Figura 16. Ajax en aplicaciones web.

3.6.4.1.

Ventaja e Inconvenientes de AJAX:

A continuacin haremos un resumen de las ventajas e inconvenientes de AJAX: Ventajas: Utiliza tecnologas existentes. Es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas operativos y navegadores, dado que est basada en estndares abiertos como JavaScript y Document Object Model (DOM). Interactividad: es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. Mayor velocidad, esto es debido a que no hay que retornar toda la pgina nuevamente. La pgina se asemeja a una aplicacin de escritorio, aplicaciones RIA.

Desventajas: Debemos dominar varias tecnologas.

33

Se pierde el concepto de volver a la pgina anterior. Dependiendo de la carga del servidor podemos experimentar tiempos tardos de respuesta.

3.6.4.2. AJAX: Intercambio de Datos con JSON:

JSON, acrnimo de JavaScript Object Notation, es un formato de intercambio de datos ligero y fcil de leer para humanos y mquinas. En l se describe de qu manera los datos se transfieren. La simplicidad de JSON ha dado lugar a la generalizacin de su uso, especialmente como alternativa a XML en AJAX. XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML, texto plano, JSON, etc. Ahora viene la pregunta clave, Por qu usar JSON si el estndar habitual es XML?, a continuacin haremos un breve estudio sobre ambas tecnologas.

3.6.4.3. Comparacin entre XML y JSON:

Una de las principales ventajas de usar JSON es que los datos ocupan mucho menos que XML, ya que XML, aade bastante sobrecarga a los datos que queremos serializar. Este es un ejemplo de los datos de una persona en XML:
<persona> <nombre>Rodrigo</nombre> <apellido>Corral</apellido> <genero>varn</genero> <edad>29</edad> </persona>
Cdigo 1. Ejemplo XML

Y estos son los mismos datos en JSON:

{ "nombre" : "Rodrigo", "apellido" : "Corral", "genero" : "varn", "edad" : 29 }
Cdigo 2. Ejemplo JSON

34

El problema principal en AJAX es mover datos entre el servidor y el cliente, este problema se suele resolver usando XML. La mayora de las aplicaciones AJAX, en el cliente la programacin la realizan casi siempre con JavaScript, como es el caso de nuestro proyecto. Existen diversas posibilidades para leer XML desde JavaScript, pero todas ellas son farragosas en mayor o menor medida y son bastante lentas y pesadas. JSON en esencia es JavaScript perfectamente correcto, esto nos permite que simplemente podamos tener un objeto JavaScript totalmente vlido. De modo que podamos acceder a los datos de una manera orientada a objetos. Cada vez hay ms soporte de JSON mediante el uso de paquetes escritos por terceras partes. La lista de lenguajes soportados incluye C, C++, C#, Delphi, Java, JavaScript, Perl, PHP, etc. En nuestro proyecto utilizamos PHP, en el prximo captulo, 3.7. Desarrollo, lo veremos de forma prctica. En resumen, el menor peso de los datos en JSON y la comodidad de trabajar en JavaScript facilitndonos la manera de acceder a la informacin, nos ha convencido para utilizar est tcnica. En los siguientes apartados se ver desarrollada de forma ms concreta en nuestro aplicativo.

3.7.

Desarrollo:

3.7.1. Archivo SIG.html:

HTML (HyperText Markup Language) es el lenguaje utilizado para construir pginas web. Sus comandos se incluyen en documentos que nuestros equipos descargan del servidor y son interpretados por el navegador (Mozilla Firefox, Google Chrome, Internet Explorer...). Nuestro archivo HTML, Sig.html, tendr la estructura general de un documento de este tipo, en la cabecera o Head tendremos: Enlace a la hoja de estilos: estilos.css:
<link rel="stylesheet" type="text/css" href="estilos.css" />
Cdigo 3. Link a la hoja de estilos .css

- Librera JavaScript de ExtJS: Para utilizar esta librera debemos descargarla, est formada por:
1.- <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 2.- <script type="text/javascript" src="ExtJS/extall.js"></script>

35

3.- <script type="text/javascript" src="ExtJS/extbase.js"></script> 4.- <script type="text/javascript" src="ExtJS/ext-langes.js"></script>

Cdigo 4. Llamada a la librera JavaScript de ExtJS

o En la primera lnea del Cdigo 4. tenemos la carpeta resources en la cual se encuentran las imgenes y estilos necesarios para los componentes del framework. o Lnea 2 Cdigo 4. contiene el archivo ext-all.js que guarda todos los widgets y componentes del framework. o ExtJS nos ofrece la posibilidad de elegir trabajar con diferentes libreras, como por ejemplo JQuery o Prototype, nosotros hemos optado por elegir la librera propia de ExtJS por lo tanto importamos el archivo extbase.js. (Vase lnea 3 del Cdigo 4.) o Por ltimo, importamos el archivo ext-lang-es.js, el cual hace que todos los mensajes y advertencias nos salgan en espaol, ya que por defecto estn en ingls. Tambin tenemos la posibilidad de ponerlo en otros idiomas como francs, alemn, italiano, etc - Librera OpenLayers: La ltima versin de librera se encuentra en la siguiente URL: http://www.openlayers.org/api/OpenLayers.js Para utilizarla basta con apuntar a esa direccin en nuestra pgina web. Utilizando el fichero .js, en la carpeta api, estaremos seleccionando la ltima versin estable de la librera. Si cambiamos la carpeta api por dev apuntaremos a la versin en desarrollo (dev-elopment), la cual nos permitir probar las funcionalidades en marcha. En nuestro caso hemos utilizado la versin en desarrollo ya que tiene una interfaz ms vistosa. Nuestro cdigo quedar:
<script src="http://www.openlayers.org/dev/OpenLayers.js"> </script>
Cdigo 5. Llamada a la librera OpenLayers

Si se desea tambin existe la opcin de descargar una versin concreta de la librera y desplegarla en nuestro servidor web. - Google Maps: Debemos hacer referencia a la librera de Google ya que utilizaremos sus mapas.
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
Cdigo 6. Llamada a la librera Google Maps

- Librera GeoExt: Igual que hemos hecho con las libreras anteriores debemos hacer con la de GeoExt para utilizar sus funciones. Por lo tanto nos descargaremos el
36

archivo correspondiente y lo llamaremos en el encabezado head de nuestro archivo html.

<script type="text/javascript" src="ExtJS/GeoExt.js"></script>
Cdigo 7. Llamada a la librera JavaScript de GeoExt.

Llamada a los archivos que forman la aplicacin: Para introducir el cdigo JavaScript de la aplicacin introducimos:
<script type="text/javascript" src="mapa.js"></script> <script type="text/javascript" src="sig_ext.js"></script>
Cdigo 8. Llamada a los archivos que forman la aplicacin.

Hemos creado dos archivos para conseguir una mejor organizacin del cdigo, a continuacin explicaremos en profundidad cada uno de ellos. A rasgos generales, podemos decir que mapa.js contiene la creacin del mapa y elementos que visualizaremos en l, y ext.js contiene principalmente la interfaz de la aplicacin. Por otra parte para la gestin de los datos tenemos el archivo conectarse.php, Datos.php, TreeData.php.

3.7.2. Archivo Sig_Ext.js:

De lo primero que debemos hablar es de una de las funciones principales, Ext.onReady(), se trata de un mtodo que asegura que nuestro documento est listo, ha sido cargado por completo. Y nos garantiza que cualquier elemento de la pgina al que queramos referenciar ya estar disponible cuando se ejecute el script. A continuacin debemos proveer a Ext con una imagen para generar espacios (Ver Cdigo. 9), es importante, ya que algunas veces los componentes no se visualizarn correctamente si no tenemos conexin a Internet, esto ocurre porque esta imagen gif est alojada fuera de nuestro servidor.
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Cdigo 9. Ruta imagen spacer.

37

3.7.2.1. Diseo de los Paneles:

El archivo Sig_ext.js contiene principalmente toda la interfaz grfica. En la Figura 17. vemos la estructura general:

Figura 17 . Pantalla inicio de la aplicacin.

Ext utiliza paneles, los cuales son la base de muchos diseos. Vemos que nuestra aplicacin (Figura 17.) est dividida en tres partes o paneles bien diferenciados, todos ellos estn dentro de uno especial que los engloba a todos, llamado Viewport. La diferencia con otro tipo de paneles es que contiene todo el layout9 y adems se adapta al rea visible de nuestro navegador, lo que queremos decir con esto es que si cambiamos el tamao de la pantalla, se adaptan todos los paneles a la nueva medida. Dentro de esta ventana tenemos un layout llamado border el cual contiene regin norte (en la Figura 17. Nmero 1), centro (en la Figura 17. Nmero 2) y este (en la Figura 17. Nmero 3). A continuacin explicaremos cada una de ellas de forma detallada. Regin Norte (1) - Ttulo: En la regin Norte simplemente creamos un panel dnde estar el ttulo de la aplicacin, lo creamos mediante xtype: panel. Xtype nos ofrece la posibilidad de instanciar un nuevo componente de forma rpida, lo veremos durante la aplicacin en muchos casos. Este mtodo puede ayudar a conservar memoria en nuestra aplicacin web.

Layout: En una ventana, la clase que decide cmo se reparten los botones (y dems controles) dentro de ella.

38

Regin Centro (2) Mapa y paneles de dispositivos: En este caso tenemos un tipo de panel diferente, xtype: tabpanel. En un mismo espacio podemos tener tres secciones distintas, iremos de una a otra mediante las pestaas que hay en la parte superior.

Figura 18. TabPanel con la segunda pestaa activada.

o Tab MAPA: Al iniciar la aplicacin siempre estar activada la pestaa nmero 1 (Ver Figura 18. Nmero 1), esto es gracias a la propiedad: activeTab: 0. Dentro de esta pestaa tenemos un panel especial para mapas gracias al framework GeoExt10 se trata de xtype: gx_mappanel que nos permite cargar el mapa directamente. o Tab TIPO DE DISPOSITIVOS: (Ver Figura 18. Nmero 2) En esta pestaa mostramos la tabla de todos los tipos de dispositivos y sus caractersticas, que tenemos almacenados en la base de datos. Para visualizar la informacin en forma de tabla necesitamos dos componentes: Objeto Ext.Data.Store: Un Store es un componente que almacena temporalmente informacin mediante registros, es utilizado como cach. A este le debemos pasar: Un objeto proxy que tendremos que configurar, el proxy normalmente es HTTP y le indicamos la url para acceder a los datos, y el mtodo HTTP que se utilizar para las solicitudes. El formato en el que estn los datos. Para especificar el tipo de datos necesitamos un lector o reader de JSON. Al reader le pasaremos varios argumentos: el nombre del

10

Ver apartado 3.6.2.2. Ventajas e Inconvenientes de ExtJS

39

array (root) que contiene toda la informacin, y los diferentes campos (fields) que debe leer. Por ltimo con la funcin load(), cargamos los datos. Objeto Ext.Grid.GridPanel: los argumentos principales que debemos pasarle sern el Store creado en el paso anterior, y las columnas que queremos que muestre. A cada columna le pasamos el parmetro Header (Nombre que tendr en la pantalla), dataIndex (para indicarle que columna del data Store es, por lo tanto tendr que coincidir con alguno de los campos indicados en el JSONreader) y por ltimo sortable: true que permite ocultar columnas y ordenar las filas (Ver Figura. 19).

Figura 19. Propiedad Sortable: true.

Tab DISPOSITIVOS: (Ver Figura 18. Nmero 2) Este apartado es similar al de tipos de dispositivos, tambin tenemos una tabla con todos los dispositivos que hay registrados en la aplicacin, la nica diferencia es que hemos utilizado un tipo de Store diferente que nos permite clasificarlos segn al grupo de elementos al que pertenecen. Se trata del objeto Ext.data.GroupingStore y el nico parmetro extra que le pasaremos ser groupField: 'nomt' que nos indicar a partir de que campo los clasificamos (Ver Figura. 20.).

40

Figura 20. Panel de dispositivos clasificados por Tipos de Dispositivos. En los recuadros rojos los nombres de los tipos de dispositivos.

Regin Este (3) rbol de dispositivos: Por ltimo, la regin este est formada por un panel que contiene un layout tipo accordion (Ver Figura. 21.).

Figura 21. Panel con Layout accordion. Cuando se haga clic en el signo + se desplegar el panel correspondiente.

Con este tipo de layout en el mismo espacio tendremos dos paneles, en concreto, dos treepanel. Se trata del listado de los dispositivos con un checkbox para seleccionar que dispositivo o dispositivos queremos visualizar en el mapa. Como podemos ver en la Figura 21. Uno ser para ver la posicin de un elemento, es decir, nos activar un Marker11 o varios, y el otro nos permitir ver la ruta que ha hecho el dispositivo, nos mostrar las LineString12 correspondientes.

11 12

Ver apartado 3.7.3.3.1. Markers Ver apartado 3.7.3.3.2. Historial

41

El cdigo que necesitamos para crear un rbol lo podemos dividir en tres partes diferenciadas: o Creamos el rbol: En nuestro caso lo hemos creado mediante xtype:treepanel es lo mismo que si usamos Ext.tree.TreePanel. o Objeto Ext.Tree.TreeLoader se encarga de buscar los datos para rellenar el rbol, como parmetro se le indica la url a dnde debe ir para buscar la informacin en formato JSON. o Root Node: Cada rbol requiere un root node o nodo principal, del cual descendern el resto de elementos. Para crearlo utilizamos: Ext.tree.AsyncTreeNode. La razn por la que usamos AsyncTreeNode en lugar del TreeNode bsico, que tambin existe, es porque estamos esperando a ir cargando los nodos y esperando a que se carguen los hijos des del servidor, rama por rama y no todos a la vez. A este objeto le pasamos parmetros como el nombre, el icono, el checkbox, etc. Una vez creado el treepanel le aadimos una barra en la parte inferior la cual tiene dos botones, uno que permite expandir todo el rbol y otro que hace la funcin contraria.

3.7.2.2. Botones y Formularios:

Tanto en la pestaa correspondiente a los tipos de dispositivos como a los dispositivos, tenemos una barra superior en la cual hay diferentes botones (Ver Figura 22.).

Figura 22. Botones que se encuentra en la pestaa dispositivos.

Explicaremos todas las opciones que contiene la pestaa dispositivos, ya que es la ms completa, ya que los botones que hay en tipo de dispositivos son prcticamente iguales. Lo primero que encontramos es Nuevo Dispositivo si hacemos click obtendremos una ventana (Ver Figura 23.) la cual se ha creado mediante new Ext.Window y a la que le pasamos una serie de atributos como pueden ser: medida, ttulo, tipo de layout, en este caso ser tipo form ya que dentro tendremos un formulario a rellenar, etc.

42

Figura 23. Ventana aadir dispositivo.

En la aplicacin utilizamos formularios en varias ocasiones, principalmente para guardar un elemento o modificarlo. Dentro de la ventana explicada anteriormente, tendremos un parmetro llamado tems, el cual contiene todo lo que se mostrar en ella. Por lo tanto, dentro de tems, crearemos un formulario con new Ext.FormPanel, a la vez este tambin tendr una serie de caractersticas como bodystyle o url (nos indicar la url a la cual se debe ir para guardar los datos, se explicar a continuacin) y de la misma forma que el objeto Window, tambin tendr el parmetro tems, que esta vez contendr los diferentes campos del formulario. A continuacin, explicaremos los principales tipos de campos que hemos utilizado en los formularios, nuestros campos se crearan usando xtype, como ya hemos visto anteriormente xtype es una referencia a un determinado componente Ext. Todo campo debe tener tres parmetros bsicos: Xtype: que nos dir exactamente de qu tipo de campo se trata. En la aplicacin tenemos los siguientes tipos: o Numberfield: Se trata de un campo que slo nos permite introducir nmeros. o Textfield: En este campo se podr introducir una lnea de texto el nmero mximo de caracteres ir en funcin del parmetro maxLength. o Textarea: En este tipo de campos se permite al usuario introducir varias lneas de texto. En nuestro caso lo hemos utilizado para el campo observaciones y est limitado a 30 caracteres, que es el mximo que permite guardar la base de datos en este campo. Por lo tanto, si el usuario introduce ms de 30 caracteres le aparecer un aviso.

43

o Combo: (Ver Figura 24.) Se trata de un campo que despliega un men permitindonos elegir una de las opciones. En nuestro caso nos aparece en el formulario que aade dispositivos, para elegir a qu clase de dispositivos pertenece. Est formado por varios parmetros pero destacamos varios: mode: remote, que indica que las opciones del men son cargadas de la base de datos, para ello le indicamos store: storeT, explicado en el apartado anterior, es el mismo utilizado para cargar la tabla de tipos de dispositivos. Tambin le indicamos el estilo, para poder ver varios datos en cada opcin, aunque el valor real del campo es el que se indica en el atributo valueField.

Figura 24. Combo.

FieldLabel: que nos indicar el string que aparecer en pantalla para indicarle al usuario que datos debe introducir. Name: Es un parmetro muy importante, ya que se trata del nombre con el cual se envan los datos, que contiene el campo, al servidor.

Otros parmetros opcionales que hemos utilizado, pueden ser: La medida del campo (maxLength) la cual se ha puesto en funcin de las medidas mximas aceptadas en la base de datos. La posibilidad de que el campo quede vaco (allowblank: true o false). readOnly: esta opcin nos resultar til en el caso modificar dispositivo o tipo de dispositivo ya que el ID del elemento no se podr cambiar, por lo tanto con este parmetro indicamos que slo se puede leer.

Cuando no se cumplen algunos de los requisitos determinados por los parmetros anteriores, la interfaz de ExtJS mostrar al usuario los mensajes de advertencia

44

correspondientes, gracias a la clase Ext.QuickTips.init();, se trata de una clase singleton13. Dentro de la ventana tenemos tres botones que nos permiten enviar la informacin al servidor (botn guardar), borrar todos los datos que hayamos introducido en el formulario (botn Restablecer) y por ltimo, el botn Cancelar que hace que se cierre la ventana sin guardar nada. Cuando se selecciona la opcin guardar, se enva la informacin mediante el mtodo POST y automticamente el servidor nos contesta informndonos de si se ha grabado correctamente o no. En caso afirmativo, actualizaremos los gridpanels y treepanels necesarios para visualizar los cambios. La siguiente opcin que tenemos en la Figura 22. es modificar dispositivo, funciona igual que la explicada para aadir uno, la nica diferencia es que, antes de hacer clic debemos indicar el elemento a modificar. De esta forma nos aparecer la misma ventana, pero con la informacin correspondiente a la seleccin que hemos hecho previamente, cargada en los campos. Una vez lo modificamos (teniendo en cuenta que el id no se puede cambiar) tenemos las opciones Actualizar (enviamos la informacin al servidor para actualizar la base de datos) o cancelar. A continuacin en la Figura 22. tenemos el historial, cuando seleccionamos un dispositivo del gridpanel y a continuacin pulsamos este botn, nos aparece una ventana con todas las posiciones recibidas del elemento seleccionado. Los datos aparecen en un GridPanel como los explicados anteriormente. Por ltimo, tenemos la opcin eliminar, comentar que cuando indiquemos que queremos eliminar un dispositivo, se preguntar al usuario si est seguro de realizar esa accin, para comprobar que no ha sido por error. Debemos tener en cuenta que cuando se elimine un tipo de dispositivo borrar todos sus componentes, es decir, todos los dispositivos que lo forman y a su vez toda la informacin recibida de cada uno de ellos. Lo mismo pasa a la hora de eliminar un dispositivo, tambin elimina las posiciones recibidas de este.

3.7.3. Archivo MAPA.js:

En este archivo se crea el objeto mapa, por lo tanto es, principalmente, dnde estar todo el desarrollo en OpenLayers. Adems del mapa y todos sus ajustes, tambin crearemos las tablas que contengan todos los Markers y LineString, dependiendo de la informacin que tengamos en la base de datos en ese momento, as como las funciones que se encargan de visualizarlos, ocultarlos, eliminarlos, etc.

13

Clase singleton: Su intencin consiste en garantizar que una clase slo tenga una instancia y proporcionar un punto de acceso global a ella.

45

3.7.3.1. Mapa:
Uno de los elementos principales de la aplicacin es el mapa. En este archivo hemos creado una variable global llamada map:
var map = new OpenLayers.Map(options);
Cdigo 10. Creacin del objeto mapa.

En JavaScript, en cualquier momento podemos crear una variable poniendo delante de sta la palabra var, esto significa que la hemos definido a nivel global, de esta forma podremos acceder a ella desde cualquier lugar de nuestro cdigo. Hemos creado el objeto map a partir de la clase OpenLayers.Map. Dicho de otra forma se trata de una instancia de la clase Map de OpenLayers. El objeto map es uno de los puntos esenciales de nuestra aplicacin, llamaremos a sus funciones para hacer zoom, aadir capas, etc como veremos a continuacin. El resto de cdigo que nos queda referente al mapa, lo podemos dividir en dos partes bsicas:

3.7.3.2. Controles y Configuracin del Mapa:

Como podemos ver le pasamos un argumento al objeto map creado, se trata de la variable options, opciones del mapa, que define los controles del mapa y algunos ajustes como las proyecciones utilizadas. Options est formado por pares de key:value, esta forma de definir los atributos es llamada JavaScript Object Notation (JSON) visto anteriormente. Este argumento no es obligatorio, si no se le pasa nada al objeto map, visualizaremos los controles por defecto.
var options = { controls: [new OpenLayers.Control.KeyboardDefaults(), new OpenLayers.Control.NavToolbar({position:new OpenLayers.Pixel(50,5)}), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MousePosition({prefix:'Longitud | Latitud: ', separator: ' | '})], projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", maxResolution: 156543.0339, maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) };
Cdigo 11. Variable options.

46

La clase Control es la que nos permite interactuar con nuestro mapa. Tambin nos permite visualizar informacin adicional, como pueden ser valores de escala, longitud, latitud, etc. Se pueden aadir tantos controles como se quieran. En las siguientes lneas explicaremos la funcionalidad de los que hemos credo conveniente poner en nuestra aplicacin: o KeyboardDefaults(): Nos permite desplazarnos por el mapa, y aumentar o reducir el zoom mediante las teclas +/- y las flechas desde teclado. o NavToolbar(): Este tipo de control crea una barra de herramientas que contiene dos botones (destacados en el cuadro rojo situado a la izquierda en la Figura. 25.). el botn superior permite desplazarse por el mapa, el inferior hace un aumento de zoom de la zona seleccionada (se trata del cuadro rojo que podemos ver a la derecha de la Figura. 25.). Como parmetro le pasamos la posicin, para situarlo sobre el mapa en la posicin deseada, mediante el objeto OpenLayers.Pixel, evidentemente esta funcin nicamente afecta a los controles que tienen un componente visible como es el caso de NavToolbar. Al objeto OpenLayers.Pixel le pasamos el par de coordenadas x, y, teniendo en cuenta que el origen es la parte superior izquierda del mapa.

Figura 25. Control NavToolbar().

o PanZoomBar(): Esta funcin nos muestra los elementos que podemos ver en la Figura. 26., en la parte superior tenemos las flechas que nos permiten desplazarnos por el mapa. La barra vertical inferior es el zoom, aumentaremos o reduciremos deslizando el selector de color azul que podemos ver en la imagen.

47

Figura 26. Control PanZoomBar().

o MouseDefaults(): Con esta lnea de cdigo habilitamos hacer zoom mediante el ratn. o LayerSwitcher(): Con el control LayerSwitcher(), nos aparece una lista con las capas que hemos aadido al mapa, cada una con un checkbox, el usuario puede decidir que capas quiere visualizar y cules no, activndolo y desactivndolo.

Figura 27. Control LayerSwitcher().

o MousePosition: Nos muestra la posicin (Longitud, Latitud) en la que se encuentra el ratn. Al objeto OpenLayers.MousePosition le pasamos por parmetro dos strings, el primero llamado prefix, ser el texto que queremos poner delante de las coordenadas, el segundo, separator se trata del signo o carcter que queremos que haya entre el valor de la longitud y el de la latitud.

48

Figura 28. Resultado Control MousePosition().

Una vez definidos todos los controles tenemos una serie de propiedades que definiremos a continuacin, estas son debidas a la utilizacin de mapas con proyeccin Spherical Mercator (por ejemplo Google Maps). o Projection: Aqu establecemos la proyeccin del mapa que es ESPG14:900913, es decir, la correspondiente a Spherical Mercator. Si queremos trabajar con Longitud, Latitud, u otro tipo de proyeccin en otra capa tendremos que transformar las coordenadas. o DisplayProjection: Esta es una propiedad que es utilizada por los controles que muestran informacin de las coordenadas, como puede ser MousePosition, explicado anteriormente. Este control utiliza otro tipo de proyeccin distinta a la de los mapas que nosotros hemos incluido (Google Maps y OpenStreetMap) los cuales usan Spherical Mercator. Por lo tanto, con las propiedades projection y displayProjection se transforma la proyeccin del mapa a la proyeccin del display. o Units: Esta propiedad indica que el mapa est en metros. Si no se indica nada, por defecto est en grados. La proyeccin Spherical Mercator utiliza metros. o MaxResolution: Esta propiedad especifica cul es la resolucin mxima del mapa, en otras palabras, hasta qu punto se puede hacer zoom out es decir, hasta qu punto se puede alejar la imagen. En nuestro caso le hemos puesto el valor auto, de esta forma nos aseguramos que se alejar el zoom al mximo posible. o MaxExtent: Con esta propiedad le decimos a OpenLayers los lmites mximos del mapa. Los cuatro nmeros representan el mnimo de x, el mnimo de y, el mximo de x y el mximo de y.

14 EPSG es un tipo de clasificacin de proyecciones la cual las identifica mediante nmeros.

49

3.7.3.3. Layers o Capas:

OpenLayers nos permite tener mltiples servidores diferentes que nos proporcionen mapas. Para acceder a un web map server simplemente tenemos que crear el objeto layer y aadirlo a nuestro mapa con OpenLayers.

Figura 29. Tipos de Capas.

Antes de explicar las capas que hemos utilizado, debemos definir exactamente que es una capa y los diferentes tipos que hay. Como si de una cebolla se tratara tendremos las diferentes capas una encima de otra, por lo tanto deberemos tener en cuenta el orden en el cual las aadimos. Cada una puede tener sus propiedades como por ejemplo la transparencia, la proyeccin, etc. En nuestro aplicativo tenemos tres capas base, pudiendo elegir cual visualizamos en cualquier momento mediante el control LayerSwitcher() explicado en el captulo anterior. Adems de las capas bases tenemos dos vector layer, las cules nos permiten aadir varios objetos geomtricos en nuestros mapas. Por lo tanto tendremos: - Capas Base: o Capa Google o Capa Google Hybrid: Las capas Google y Google Hybrid se crean con la misma clase Layers.Google, la diferencia la encontramos en los argumentos que le pasamos a cada una de ellas. A las dos les pasamos como primer parmetro el nombre que se visualizar en el LayerSwitcher, pero en el caso de la capa Google Hybrid le aadimos el argumento tipo, para que nos muestre el mapa hbrido:

50

type: google.maps.MapTypeId.HYBRID
Cdigo 12. Parmetro que le pasamos a OpenLayers.Layer.Google() para indicarle el tipo de capa que queremos.

o Capa OpenStreetMap: Igual que en el caso de Google tambin existe una subclase para OpenStreetMap.
new OpenLayers.Layer.OSM("OpenStreetMap");
Cdigo 13. Creacin de una capa OpenStreetMap.

Hemos elegido OpenStreetMap porque si en un futuro se quiere tener como mapa, una determinada zona, y no todo el mundo, OpenStreetMap entre otros, nos ofrece la posibilidad de mostrar slo el rea indicada. Para esto se necesitara crear nuestro propio servidor de mapas.
-

Vector Layers15: Un vector usa formas geomtricas basadas en ecuaciones matemticas para formar las imgenes. Esto significa que cuando se acerque la imagen la calidad ser la misma, es decir, no se deformar. Si se tratara de una imagen raster se deformara fcilmente. Adems las capas vectoriales nos permiten aadir ms informacin, para acabar de entenderlo pondremos un ejemplo de forma prctica. Si tenemos una imagen raster con un edificio no sabremos nada sobre l, nicamente la forma, con las capas vectoriales podemos tener ms datos como por ejemplo el valor del bloque, el propietario, etc Por ltimo comentar que este tipo de capas, como ya hemos dicho anteriormente, pueden contener elementos vectoriales de todo tipo como por ejemplo: puntos, lneas, polgonos, etc. A continuacin explicaremos las capas creadas en nuestra aplicacin y los objetos creados, los cules son llamados Features.

3.7.3.3.1. Markers
En la capa Markers, se mostrar la ltima posicin del dispositivo que el usuario seleccione, si en ese momento hay informacin de este. Cuando hablamos de un Marker nos referimos a una posicin, un punto en el mapa, que ser definido mediante la longitud y la latitud y en el cul se colocar el icono que le pasemos por parmetro al crear el objeto.

15

Mirar apartado 3.4.3. Representacin de la informacin

51

Figura 30. Ejemplo de Marker situado en la posicin: Longitud: 2.35098, Latitud: 48.85667.

Con la clase LonLat nos referimos al punto deseado. Como se puede ver en el Cdigo 14. Transformamos los datos de LonLat a la proyeccin de nuestro mapa, con la funcin transform. Para que el icono se site en la posicin correcta, debemos definir el tamao de este, mediante el mtodo size, (Vase Cdigo 14.), adems tambin debemos calcular el offset. De esta forma el icono se situar en la posicin indicada sin desplazamientos errneos. Por lo tanto nuestra aplicacin tendr fiabilidad respecto a los datos recibidos, otro tema es que el dispositivo que nos enve la informacin no sea totalmente exacto, pero eso no lo podemos controlar desde la aplicacin. Una vez tenemos los valores size, offset y la imagen para el icono, crearemos el objeto icono. Finalmente, crearemos el Marker pasndole dos argumentos, el punto donde queremos situarlo (posicin lonlat que hemos transformado a la proyeccin de nuestro mapa) y el icono (icono que hemos creado a partir de la imagen, la medida y el offset).
var center = new OpenLayers.LonLat (json.tabla[j]['longitud'],json.tabla[j]['latitud']) .transform ( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var size = new OpenLayers.Size(30,30); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icono='imag/'+json.disp[i]['iconodisp']; var icon = new OpenLayers.Icon(icono,size,offset); markerList[i]=new OpenLayers.Marker(center, icon);
Cdigo 14. Como hacer un marker.

3.7.3.3.2. Historial
En la capa Historial se representar el recorrido que hayan hecho los dispositivos mediante el objeto LineString de OpenLayers. Para crear un LineString necesitamos como mnimo dos puntos.

52

Figura 31. LineString formada por tres puntos.

Por lo tanto lo primero que tenemos que hacer es una lista de puntos por cada dispositivo, es decir, almacenar todas las posiciones recibidas en un array. Cada posicin de esta tabla ser un objeto Geometry.Point (x, y), dnde x e y sern longitud y latitud, respectivamente. Como hemos podido ver Point es una subclase de Geometry, como veremos ms adelante, LineString tambin. La clase Geometry guarda informacin sobre un objeto geomtrico o Feature, un feature es un objeto que pertenece a una capa vectorial. Una vez tenemos la lista de puntos ya podemos crear el objeto LineString (new OpenLayers.Geometry.LineString (pointList)) pasndole el array de puntos como argumento. Una vez tenemos creado el objeto geomtrico, ya podemos crear el feature object para poder aadirlo a la capa vectorial, esto lo haremos a travs de la clase Feature que es la que utiliza la clase Vector para mostrar los objetos en el mapa. Lo crearemos de la siguiente forma: new OpenLayers.Feature.Vector pasndole tres argumentos, el objeto LineString (puede ser otro tipo de elemento geomtrico), y dos parmetros opcionales: atributos, en nuestro caso, los hemos puesto como NULL y estilo para indicar el color, grueso, etc de la lnea.

3.7.4. Archivo Conectarse.php:

Se trata del archivo que nos permitir crear la conexin con nuestra base de datos, el cual se ha creado independiente ya que, ms tarde, lo incluiremos en diferentes archivos. La funcin que incluye, la cual conecta con la base de datos, est formada por la inicializacin de cuatro parmetros: o Host: Host al que conectarnos, habitualmente es el localhost en nuestro caso. o Base de datos: nombre de la BD que queremos utilizar. o Usuario: nombre del usuario con permisos para acceder. Mysql crea por defecto al usuario root con todos los permisos posibles habilitados, podemos utilizar este usuario como administrador o crear otro, en nuestro caso utilizaremos el root, pero antes debemos asignarle una contrasea ya que lo crea sin ella.
53

o Password: contrasea del usuario. A continuacin, con la funcin mysql_connect abriremos una conexin al servidor MySQL, pasndole por parmetros las variables: host, usuario y password, est nos devolver un identificador de conexin, o false en caso de error. Por ltimo, mediante la funcin mysql_select_db se establece la base de datos activa en el servidor asociado con el identificador de enlace especificado, es decir, le pasamos el nombre de la base de datos que queremos utilizar y el resultado de la conexin realizada en el paso anterior mediante mysql_connect. Ejecutando esta funcin ya podremos trabajar con nuestros datos.

3.7.5. Archivo Datos.php:

Lo primero que debemos hacer en este archivo es incluir el fichero conectarse.php con el cual nos conectamos a la base de datos para poder trabajar con ella. La estructura principal del archivo Datos.php es un switch que se encarga de realizar una funcin u otra dependiendo del parmetro recibido mediante POST. Con el mtodo POST se realiza una transaccin mediante el protocolo HTTP. Se utiliza para aplicaciones que modifican la base de datos de destino. Se trata del punto intermedio entre la interfaz grfica y la base de datos, hemos utilizado el lenguaje SQL, lenguaje PHP y el formato de intercambio de datos JSON. A travs de las diferentes opciones del switch se realizan cuatro acciones bsicas: 1. SELECT, consultar datos: Listar tabla de tipos de dispositivos y dispositivos: Se realiza mediante la accin SELECT, posteriormente guardamos los datos obtenidos de la consulta de cada tabla en una array, mediante mysql_fetch_array. A continuacin tenemos el caso para listar el historial de la informacin recibida de cada dispositivo. Tambin utilizaremos SELECT aadindole la condicin WHERE telefono = '.$_REQUEST['id'].' De esta forma nicamente visualizaremos las filas en las que el campo telfono sea igual al parmetro recibido mediante POST. Por ltimo, haremos que las filas nos aparezcan ordenadas segn los campos fecha y hora: ORDER BY fecha DESC, hora DESC', del ms reciente al ms antiguo. Para rellenar los formularios, que se encargan de modificar los tipos de dispositivos y los dispositivos, lo hacemos con SELECT y la condicin WHERE. Seleccionamos la fila que contiene la informacin correspondiente a el

54

elemento a modificar, del cual sabremos el id o telfono que nos habrn enviado mediante POST. En el caso Markers seleccionamos la informacin necesaria de la tabla del historial (es decir, telfono, longitud y latitud) y de la tabla dispositivos (telfono, iconodisp y color) para crear los objetos Markers y LineString.

En todos los casos que se hace una consulta SELECT es porque queremos visualizar esa informacin en nuestra aplicacin. Por lo tanto para pasarla del servidor al navegador se enva en formato JSON, con la funcin json_encode(informacin que se quiera enviar). 2. INSERT, grabar datos: Se trata de los casos que nos permiten grabar datos en las tablas. Para grabar se utiliza INSERT indicndole en que tabla se debe guardar y pasndole los valores que queremos almacenar, sern los valores que haya introducido el usuario en los formularios.

3. UPDATE, actualizar datos: Con la accin UPDATE ms la condicin WHERE, modificaremos los campos correspondientes a la fila que tenga el id igual al valor pasado en la condicin WHERE.

4. DELETE, eliminar datos: Por ltimo, para eliminar dispositivo o tipos de dispositivos utilizaremos DELETE ms la condicin WHERE para indicar que fila queremos eliminar. Se debe tener en cuenta que cuando se elimine un dispositivo tambin se eliminar toda la informacin y posiciones que tenemos de l. Lo mismo pasar a la hora de eliminar un tipo de dispositivo, se eliminar el tipo y todos los elementos que lo formen, incluyendo las posiciones que haya almacenadas de cada uno de ellos.

3.7.6. Archivo TreeData.php:

En el archivo TreeData.php tenemos las funciones necesarias para crear el rbol de dispositivos. Lo primero que hacemos es una consulta a travs de SELECT a la tabla tipos de dispositivos, ya que esta es la que contiene todos los nodos padre, es decir, sern los nodos de los cuales colgarn los dispositivos. Se recorre toda la tabla y se crea un array por nodo, que contendr las propiedades de cada uno de ellos (chekcbox, nombre, icono, id, hijos). En la propiedad hijos se llamar a una funcin que consultar la tabla de
55

dispositivos, y retornar un array con las propiedades (checkbox, icono, nombre, id y leaf, leaf indica que este nodo no podr tener subnodos) de los childnodes correspondientes al parentnode. El array obtenido se pasar a formato JSON mediante json_encode(). Para hacernos una idea del resultado podemos ver el Cdigo 15. que muestra un ejemplo de lo que retorna la funcin, y en la Figura 32. El resultado visual que conseguiramos en la aplicacin.
[{"checked":false, "singleClickExpand":true, "text":"Coches", "id":"1", "icon":"imag\/coche.gif", "children": [{"icon":"imag\/uno_coch.png", "text":"Ferrari", "id":"619202020", "leaf":true },{ "icon":"imag\/tres_coc.png", "text":"Mercedes", "id":"650808080", "leaf":true },{ "icon":"imag\/dos_coch.png", "text":"Scenic", "id":"615323435", "leaf":true }] }]
Cdigo 15. Ejemplo cdigo JSON.

56

Figura 32. rbol que obtenemos a partir del Cdigo 3.

3.7.7. Simulacin de la Recepcin de Datos Va SMS:

Para poder hacer uso de la aplicacin de forma ms real posible, hemos creado una pgina HTML independiente, la cual simula la recepcin de datos mediante GET, es decir puede recibir la informacin a travs de la url. La idea es que el dispositivo envi al servidor un SMS con un formato predeterminado, tal y como podemos ver en el Cdigo 16., se trata de una url que contiene toda la informacin, permitiendo que se guarden las variables deseadas automticamente en la base de datos.
http://localhost/sms.php?telefono=619202020&fecha=2009-0822&hora=13:30&latitud=-1.98765&longitud=40.65478
Cdigo 16. Informacin que se introduce en la url.

3.8.

Evaluacin: Juego de Pruebas:

En este apartado pondremos en prctica todas las funciones de la aplicacin. La pantalla inicial la vimos en la Figura 17., lo primero que haremos ser crear un tipo de dispositivo, para eso seleccionaremos la pestaa TIPOS DE DISPOSITIVOS.

3.8.1. Crear un Tipo de Dispositivo:

Figura 33. Seleccionamos el botn Nuevo Tipo de Dispositivo.

57

(Ver Figura 33.)Vemos que simplemente pasando el ratn por encima del botn, se marca, y adems nos aparece un mensaje informativo o tooltip. Le damos al botn y nos aparece la ventana para rellenar el formulario (Ver Figura 34.).

Figura 34. Formulario para crear un Tipo de Dispositivo.

Una vez le damos al botn guardar nos aparece un mensaje confirmando que se ha grabado correctamente. (Ver Figura 35.) Adems vemos que aparece el nuevo tipo en el GridPanel y en el rbol de dispositivos.

Figura 35. Confirmacin de que se ha grabado el tipo de dispositivo.

58

Confirmamos que se ha grabado en la base de datos (Ver Figura 36.):

Figura 36. El Tipo de Dispositivo se ha grabado en la tabla t_disp de la base de datos.

A continuacin volveremos a crear un tipo de dispositivo pero esta vez introduciremos algn dato errneo, por ejemplo: dejar algn campo, de los que son obligatorios rellenar, en blanco, como puede ser el nmero mximo de dispositivos (Ver Figura 37.); o introducir un nombre que tenga ms de 10 caracteres (Ver Figura 38.) o que el ID sea igual al del dispositivo anterior, es decir un ID repetido (Ver Figura 39.).

Figura 37. Num. Max. Dispositivos es un campo obligatorio.

Figura 38. El campo Nombre est configurado para 10 caracteres como mximo.

59

Figura 39. Como hemos introducido un ID repetido cuando le damos al botn guardar nos aparece un mensaje de advertencia de que los datos no son correctos.

En el siguiente apartado modificaremos el Tipo de Dispositivo que hemos creado:

3.8.2. Modificar un Tipo de Dispositivo:

Al hacer clic en el botn Modificar Tipo de dispositivo (Ver Figura 33.) nos aparece un mensaje de error (Figura 40.) ya que no hemos seleccionado el Tipo de Dispositivo a modificar.

Figura 40. Se debe seleccionar un elemento de la tabla para indicar que queremos modificar.

Si seleccionamos un tipo de dispositivo y pulsamos Modificar, nos aparece la misma ventana que hemos utilizado para crearlo, pero con todos los campos rellenos con la informacin correspondiente al elemento seleccionado.

60

Figura 41. Formulario que nos permite modificar un Tipo de dispositivo.

Modificaremos el nombre, la imagen y las observaciones, y pulsaremos en Actualizar, los resultados obtenidos los podemos ver en la Figura 42. Podemos ver los cambios en todas las secciones de la aplicacin (GridPanel y TreePanel) y en la base de datos.

Figura 42. En la parte superior vemos los cambios que se han hecho en la aplicacin. En la parte inferior la base de datos.

3.8.3. Crear un Dispositivo:

Ahora nos iremos a la pestaa DISPOSITIVOS, y crearemos un dispositivo perteneciente al grupo creado en el apartado 3.8.1. Rellenamos el formulario que nos aparece al hacer clic en Crear Nuevo Dispositivo (Ver Figura 43.) y le damos al botn Guardar. Vemos que en el men desplegable donde debemos indicar el Tipo de Dispositivo nos sale el que hemos creado previamente.

61

Figura 43. Formulario para crear Dispositivo.

Igual que en el caso de Crear Nuevo Tipo de Dispositivo, los campos tambin muestran mensajes de advertencia si son incorrectos o si el Telfono introducido ya existe. De la misma forma, cuando se graba correctamente, el sistema tambin nos avisa.

Figura 44. Vemos que el Dispositivo se ha grabado correctamente. Arriba aparece en la tabla de dispositivos y en el rbol de la aplicacin, abajo se ve que ha quedado registrado en la base de datos.

Si volvemos a la tabla de Tipos de Dispositivos vemos que se ha actualizado el campo correspondiente a Nmero de Dispositivos Actuales (Ver Figura 45.).

62

Figura 45. El campo Num. Disp. Actuales se ha actualizado.

Este campo tambin se ha actualizado en la base de datos (Ver Figura 46.).

Figura 46. El campo nmero de dispositivos actuales tambin se ha actualizado en la base de datos.

Para ver que verdaderamente tienen utilidad las variables que indican el mximo nmero de elementos que puede tener un Tipo de dispositivo y la que indica cuantos tenemos actualmente, vamos a crear 2 dispositivos ms dentro de la categora Camiones. A continuacin intentaremos crear un cuarto dispositivo. El resultado es el que podemos ver en la Figura 47. no nos permite guardarlo ya que superamos el lmite.

Figura 47. Cuando intentamos guardar el cuarto dispositivo de la clase Camiones, no nos deja ya que hemos superado el nmero mximo de dispositivos para esta clase.

A continuacin crearemos otro tipo de dispositivo y algn dispositivo perteneciente a este, para ver que se muestran correctamente en el rbol de dispositivos y en las tablas (Ver Figura 48.).

63

Figura 48. Vemos que en el GridPanel los dispositivos se clasifican segn el Tipo, y que en el rbol se visualizan correctamente.

En el caso de los dispositivos tambin es posible modificarlos, no pondremos ningn ejemplo ya que es igual que la prueba realizada en el apartado 3.8.2 la nica diferencia es que se hace con los campos y tabla referente a los dispositivos.

3.8.4. Simulacin Recepcin de Datos:

Una vez tenemos Dispositivos para localizar necesitamos recibir los datos de donde se encuentran, utilizaremos una pgina HTML (Ver Figura. 49).

Figura 49. Pgina que simula la entrada de informacin.

64

Tenemos dos opciones: introducir la informacin mediante el formulario o introducirla mediante la url con el formato mostrado en el Cdigo 17. Introduciremos en la url de nuestro navegador el siguiente cdigo:
http://localhost/sms.php?telefono=600606060&fecha=2011-0515&hora=13:30&latitud=41.11866&longitud=1.24533
Cdigo 17. Cdigo que introduciremos en la URL.

Figura 50. Vemos que la informacin introducida en la URL (parte superior de la imagen) es la que se ha guardado en la tabla de la base de datos (parte inferior de la imagen).

3.8.5. Visualizar Historial de un Dispositivo:

Suponiendo que ya hemos recibido informacin de algn dispositivo, vamos a comprobar que dndole al botn Historial, que tenemos en la pestaa de los Dispositivos, vemos la informacin que nos ha llegado (Ver Figura 51.). Seleccionamos un elemento y a continuacin le damos a Historial.

Figura 51. Historial del dispositivo C1.

65

3.8.6. Visualizar la ltima Posicin de un Dispositivo:

Marcaremos en el TreePanel Posicin aquellos dispositivos de los cuales queramos ver su ltima posicin. Si el dispositivo no tiene informacin el checkbox no se activar. (Ver Figura 52.)

Figura 52. Vemos como los dispositivos que estn marcados en el treepanel, se puede ver donde estn situados en el mapa.

3.8.7. Visualizar el Recorrido de un Dispositivo:

Igual que para ver la ltima posicin, marcaremos el dispositivo del cual queremos ver su recorrido. Esta vez en el panel Historial.

Figura 53. En esta imagen podemos ver el recorrido que ha hecho el dispositivo M1, el cual est seleccionado en el rbol.

66

Cada vrtice de la lnea roja que vemos en la Figura 53. Es un punto desde donde se nos ha enviado informacin.

3.8.8. Eliminar Tipo de Dispositivo:

Comprobaremos que cuando se elimine un tipo de dispositivo, se eliminen tambin los dispositivos que lo forman y la informacin del historial de cada dispositivo. Siempre que se seleccione la opcin eliminar se nos pedir que confirmemos que estamos seguros que queremos hacer est accin (Ver Figura 54.).

Figura 54. Mensaje para confirmar que queremos eliminar el elemento seleccionado.

Una vez eliminado nos saldr un mensaje informando que se ha borrado. (Ver Figura 55.)

Figura 55. Mensaje que nos informa de que se ha borrado el tipo de dispositivo.

Si nos fijamos, se han actualizado la tabla de dispositivos y los TreePanels porque ya no aparece el grupo Motos ni ninguno de sus elementos. Miramos la Base de datos y vemos que se ha borrado toda la informacin referente a este tipo de dispositivo.

3.8.9. Eliminar Dispositivo:

En este caso nos aseguraremos que al eliminar un dispositivo se eliminan todas las posiciones que nos han llegado de l. Igual que en el apartado anterior tambin nos pide confirmar la accin. Una vez borrado tambin nos informar de que se ha borrado correctamente.
67

3.9.

Recursos utilizados:

3.9.1. Requisitos hardware y software:

Para la construccin del sistema se ha trabajado en un equipo informtico (ordenador porttil Sony Vaio) con las siguientes caractersticas tcnicas: Intel Core 2 Duo T7500 2.20 GHz 2GB de memoria RAM Disco duro 200GB Serial ATA 5400 rpm Tarjeta grfica NVIDIA GeForce 8600M GS Pantalla: 15.4 pulgadas, Resolucin: 1280x800 pixeles Tambin ha sido necesario disponer de una conexin Internet que ha posibilitado la consulta de las distintas referencias bibliogrficas, tambin es necesaria para acceder al servicio Google Maps y poder visualizar sus mapas, por ltimo accedemos a la librera OpenLayers mediante una url, por lo tanto es necesario tener conexin. El navegador utilizado ha sido Firefox 4. Para montar el servidor web hemos utilizado Xampp se trata de un paquete que incluye Apache, PHP y MySql. El cual nos ofrece un pack de instalacin automtica que nos permite alojar y servir nuestras pginas web desde nuestra mquina. Adems tambin guardar las bases de datos necesarias. En concreto hemos utilizado la versin 1.7.3.

Figura 56. Logotipo paquete Xampp.

Por ltimo, hemos utilizado el editor de texto Crimson Editor para la codificacin de los ficheros de la aplicacin. Los usuarios que quieran hacer uso de la aplicacin deben tener como mnimo un ordenador personal que disponga de navegador Web y conexin a Internet. Aunque la aplicacin se ha probado en varios navegadores y su funcionamiento parece ser correcto, se asegura que todas las funciones explicadas en este proyecto funcionan en Firefox 4, ya que ha sido el ms utilizado durante la creacin de la aplicacin.

68

4.

APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL ALUMNO:

De forma general, en un principio me ha aportado conocimientos sobre las tecnologas GIS. Las cuales estn ms presentes, de lo que nosotros creemos, en el da a da. Ya que un usuario de Internet utiliza Google Maps o aplicaciones similares, pero no se hace a la idea de la repercusin que estas tienen y de las infinitas posibilidades que nos pueden ofrecer para gestionar informacin en muchos mbitos. Se trata de un tema que est en plena fase de explotacin, son utilizados tanto en la administracin pblica, en reas como la gestin de recursos naturales, de patrimonio, urbanismo, medio ambiente, trfico urbano, control de carreteras y sealizaciones, etc. Adems de que existe una importante normativa europea que obliga a los estados miembros a poner esta informacin accesible al ciudadano. Como en la empresa privada, en temas como la planificacin de campaas de marketing, el seguimiento de la fuerza de ventas, logstica, etc. Por otra parte, me ha aportado experiencia en lenguajes de programacin como JavaScript, PHP, MySQL, tecnologas como AJAX, OpenLayers, ExtJS, algunos de ellos los desconoca o nicamente tena nociones bsicas. Actualmente, he alcanzado conocimientos para poder crear una aplicacin web con una buena interfaz de usuario mediante JavaScript (en este caso ExtJS y GeoExt), relacionndola con informacin almacenada en una base de datos (MySQL), con la posibilidad de gestionar su informacin, ya sea guardando, borrando o actualizndola, mediante AJAX y PHP. Conocimientos bsicos que se pueden poner en prctica en cualquier tipo de aplicacin, en general aplicaciones RIA, y no nicamente a sistemas SIG. Adems, he aprendido a utilizar OpenLayers, trabajando con algunos de sus elementos, como pueden ser los controles, features (markers, linestring, etc), descubriendo la cantidad de posibilidades que ofrece para personalizar, adaptar y mejorar nuestra aplicacin. En definitiva, creo que ha sido una buena introduccin al mundo de la programacin de aplicaciones web.

69

5.

APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO:

En Telemtica hemos desarrollado diferentes prcticas y proyectos programando en distintos lenguajes. Aunque la programacin es un campo ms enfocado a informtica hemos obtenido la base suficiente para poder crear aplicaciones como la de este proyecto. Si pensamos en las asignaturas que tienen ms conocimientos relacionados con el proyecto las primeras que debemos considerar es Fundamentos de programacin I y II. En las cules estudiamos y pusimos en prctica la programacin en lenguaje Java. En Fonaments de Programaci I, entre otras cosas diseamos algoritmos para la resolucin de problemas simples, estudiando la sintaxis y semntica de las instrucciones y expresiones del lenguaje. Empezamos a conocer los tipos bsicos de datos, vectores, tablas, etc. Y algoritmos bsicos de programacin estructurada, como pueden ser los algoritmos de bsqueda, recorrido y ordenacin. Adems de comprender el proceso de compilacin. En Fonaments de Programaci II, se present la programacin orientada a objetos para el desarrollo de aplicaciones. Se disearon programas escogiendo la opcin ms ptima y eficiente dependiendo de la complejidad de los algoritmos. Todos estos conocimientos adquiridos en estas asignaturas fueron la base para empezar a programar, Java y JavaScript son lenguajes distintos pero comparten sintaxis y algunas estructuras. Por ejemplo, en el caso de OpenLayers, un aspecto en comn a Java es la programacin orientada a objetos. Por otra parte en la asignatura Xarxes i Serveis se llev a cabo la realizacin de una aplicacin web en lenguaje PHP y HTML, la cual estaba formada por una base de datos MySQL que se cre con la herramienta phpMyAdmin, y se almacenaba en el servidor apache, tambin hicimos uso del paquete Xampp. Para acceder al servidor y a la informacin, como ya hemos dicho, se hizo mediante PHP y lenguaje SQL. Por lo tanto, antes de realizar este proyecto tena algunos conocimientos sobre estas tecnologas, y sobre conceptos como lenguajes del lado cliente, lenguajes del lado del servidor, etc. Que ayudan a comprender el funcionamiento general de este tipo de aplicaciones. Por ltimo comentar que el apartado incluido en este proyecto sobre la representacin de la informacin16, que habla sobre el modelo raster y el modelo vectorial est relacionado con parte del temario visto en la optativa de Transmissi Multimdia en la cual se habla sobre la representacin de imgenes. En conclusin, con los conocimientos adquiridos de los estudios realizados y el autoaprendizaje diario a partir de los errores y problemas encontrados durante la programacin he podido realizar este proyecto formado por diferentes tecnologas.

16

Ver captulo 3.4.3. Representacin de la informacin

70

6.

CONCLUSIONES Y LNEAS FUTURAS:

Conclusiones: Llegados a este punto podemos decir que se han cumplido los objetivos del proyecto. La idea bsica de este era la de realizar una aplicacin que permitiera situar dispositivos remotos en un mapa. A medida que hemos ido avanzando se han ido implementando las funciones deseadas, la aplicacin permite registrar tipos de dispositivos y dispositivos, tambin incluye la opcin de modificarlos o eliminarlos guardndose toda la informacin en la base de datos. Se crean los objetos necesarios para representar los elementos en el mapa, los cuales se sitan en la posicin correcta, dependiendo de la informacin recibida. El aplicativo permite situar la ltima posicin del elemento o ver sus ltimos movimientos gracias al objeto LineString. Parte de la aplicacin se ha desarrollado en JavaScript, mediante ExtJS y OpenLayers. ExtJS ha facilitado crear una interfaz clara e intuitiva para el usuario. OpenLayers, una librera totalmente libre, que en un futuro nos permitir aadir mapas propios y ms funciones a la aplicacin. El resto se ha programado en PHP utilizando bases de datos MySQL. Lneas Futuras de Trabajo: Como lneas futuras consideraremos aquellos aspectos que podemos mejorar en la aplicacin, tambin debemos tener en cuenta que depende de la finalidad exacta de sta, ya que no sabemos el nmero de dispositivos que se quieren utilizar, aunque la idea inicial es que no ser un nmero muy elevado. En el caso de tener ms elementos a localizar, se podran aadir mejoras como: Crear un filtro buscador en cada Gridpanel y en los Treepanel para poder localizar fcilmente el dispositivo deseado. Si adems la aplicacin es utilizada por varios usuarios crear sesiones, para que cada uno de los clientes tenga la opcin de eliminar, crear o modificar los dispositivos sin afectar al resto de usuarios, esto supondra una modificacin i/o ampliacin importante en la base de datos.

Estudiar ms a fondo y poner en prctica el sistema para recibir la informacin desde los dispositivos remotos. Implementar un servicio de actualizacin de posiciones. Aunque Aiddea Linux propuso que se recibieran las posiciones va SMS, considero que se podran buscar alternativas ms viables como por ejemplo va internet. Como dijimos en el apartado 2 del proyecto, Aiddea Linux quiere que la aplicacin se pueda adaptar a distintas situaciones, por lo tanto, se podrn aadir ms funcionalidades

71

segn la finalidad. Tambin depende de cmo se comercialice la aplicacin. Consideraremos dos opciones: El cliente final nicamente accede al aplicativo web, es decir, en este caso Aiddea Linux debera llevar el mantenimiento del servidor y de los dispositivos remotos. El cliente se encarga de todo, es decir, Aiddea Linux nicamente le vende todo el sistema y el usuario final se debe de preocupar de ir manteniendo todos los equipos.

A continuacin listamos diferentes aspectos que se podran ampliar o mejorar en la aplicacin actual: Carga de imgenes (iconos) mediante los formularios. Aadir paleta de colores en los formularios para seleccionar el color del LineString del dispositivo. Mediante un Web Map Server proporcionar mapas de zonas concretas, as como poder utilizar mapas que estn guardados en nuestro servidor sin necesidad de descargarlos de Internet continuamente.

En conclusin, para la mejora de la interfaz y de las funciones del programa, JavaScript, y OpenLayers nos facilitan muchas herramientas con aplicaciones muy vistosas e interesantes.

72

REFERENCIAS:
SIG:

[1] http://www.mapaeducativo.edu.ar/encontrar/?a=qsig [Definicin SIG] Abril 2011 [2] http://recursos.gabrielortiz.com/index.asp?Info=012 [Definicin SIG y Tipos de representar la informacin] Abril 2011 [3] http://es.wikipedia.org/wiki/Sistema_de_Informacin_Geogrfica [SIG] Abril 2011 [4] http://www.monografias.com/trabajos14/informageogra/informageogra.shtml#com [SIG] Abril 2011 [5] http://www.procoopsrl.com.ar/sistgis.htm [Definicin SIG y sus componentes] Abril 2011 [6]http://www.iea.es/_docum/SIG2.PDF?IEA=e1cdcf4caac2168d092b113e58c38c3b&IEA=bb087d0367fd4c516595ce17 d07b888e [Ejemplos SIG, normalizacin de la informacin] Abril 2011 [7] http://jacobeo.tracasa.es/ [Ejemplo SIG: Camino de Santiago] Abril 2011 [8] http://w24.bcn.cat/GWMPNet61_bcn/extlayout.aspx [Ejemplo SIG: Geoportalbcn] Abril 2011 [9] http://delta.icc.es/ideLocal/IdecServ?codi=xgl&tipus=L&schema=c_ideclocal [Ejemplo SIG: IdecLocal] Abril 2011 [10] http://www.geolocal.cat/geoportal/cat/que-es/som-i-fem/# [Infraestructura de Dades Espacials de Catalunya] Abril 2011 [11] http://www.idee.es/resources/presentaciones/JIDEE06/ARTICULOS_JIDEE2006/articulo19.pdf

CARTOGRAFIA:

[12] http://enciclopedia.us.es/index.php/Sistema_de_coordenadas [Sistema de coordenadas] Abril 2011 [13] http://creciendojuntos.bligoo.com/content/view/151311/Sistema-de-coordenadas-geograficas.html coordenadas] Abril 2011 [Sistema de

[14] http://googleware.blogspot.com/2008/01/cmo-funciona-google-maps.html [Sistema de coordenadas y proyeccin de Mercator] Abril 2011 [15] http://es.wikipedia.org/wiki/Proyecci%C3%B3n_cartogr%C3%A1fica [Proyeccin cartogrfica] Abril 2011

OGC:

[16] http://www.opengeospatial.org/ogc [Pgina oficial OGC] Abril 2011 [17] http://es.wikipedia.org/wiki/Open_Geospatial_Consortium [OGC] Abril 2011 [18] http://www.idee.es/show.do?to=pideep_OGC.ES [Especificaciones OGC] Abril 2011 [19] http://www.idee.es/show.do?to=pideep_proyectoIDEE.ES [Infraestructura de datos espaciales de Espaa] abril 2011

OPENLAYERS:

[20] Erik Hazzard, OpenLayers 2.10 Beginers Guide, Ed. Packt Publishing, 2011. [21] http://openlayers.org/ [Pgina oficial OpenLayers] Abril 2011

73

[22] http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers-js.html [API OpenLayers] Abril 2011 [23] http://es.wikipedia.org/wiki/OpenLayers [Definicin] Abril 2011 [24] http://openlayers.ingemoral.es/manualOpenLayers.html [Manual OpenLayers] Abril 2011 [25] http://www.ideandalucia.es/index.php/es/visores [Visores Web] Abril 2011 [26] http://openlayers.org/dev/examples/?q=mobile [API OpenLayers para mviles] Abril 2011 [27] http://blog.sonxurxo.com/2011/03/29/tutorial-de-openlayers-i-introduccion/ [Tutorial OpenLayers] Abril 2011

EXT JS:

[28] Jos Lpez Quijado, Domine JavaScript, Ed. Ra-Ma, 2004. [29] Frank W. Zammetti, Practical Ext JS Projects with Gears, Ed. Apress, 2009. [30] Jesus D. Garcia, Jr. , Ext JS in Action, Ed. Meap Edition, 2009. [31] Shea Frederick, Colin Ramsay, Steve Cutter Blades, Learning Ext JS, Ed. Packt Publishing, 2008. [32] http://dev.sencha.com/deploy/ext-3.3.1/docs/ [API ExtJS] Abril 2011 [33] http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_(Spanish) [Tutorial ExtJS] Abril 2011 [34] http://www.quizzpot.com/2009/01/ext-js-framework/ [Tutorial ExtJS] Abril 2011 [35] http://www.webprogramo.com/tutoriales-extjs/ [API OpenLayers para mviles] Abril 2011 [36] http://www.geoext.org/ [Pgina oficial GeoExt] Abril 2011 [37] http://www.geoext.org/examples.html#examples [Ejemplos GeoExt] Abril 2011

MYSQL, PHP, SQL y PHPMYADMIN:

[38] Jacobo Pavn Puertas, Creacin de un portal con PHP y MySQL, Ed. Ra-Ma, 2006. [39] http://es.wikipedia.org/wiki/PhpMyAdmin [Definicin phpMyAdmin] Mayo 2011 [40] http://es.wikipedia.org/wiki/Base_de_datos_relacional [Definicin Base de datos relacional] Mayo 2011 [41] http://www.maestrosdelweb.com/editorial/tutsql1/ [Tutorial SQL] Mayo 2011 [42] http://www.desarrolloweb.com/articulos/262.php [SQL] Mayo 2011 [43] http://objetivophp.com/?p=86 [Tipos de datos MySQL] Mayo 2011

AJAX, JSON, XML:

[44] http://www.maestrosdelweb.com/editorial/ajax/ [AJAX y las aplicaciones Web] Mayo 2011 [45] http://geeks.ms/blogs/rcorral/archive/2006/06/23/545.aspx [Intercambio de datos con JSON] Mayo 2011 [46] http://webelop.com.ar/ajax/comunicacion-ajax-php-con-json/ [PHP, JSON] Mayo 2011 [47] http://www.ajaxya.com.ar/ [AJAX, JSON y PHP] Mayo 2011 [48] http://www.desarrollosweb.net/2008/11/13/introduciendo-extjs-llamadas-ajax/ [Llamadas AJAX] Mayo 2011 [49] http://es.wikipedia.org/wiki/AJAX [Definicin AJAX] Mayo 2011

74

[50] http://es.wikipedia.org/wiki/XML [Definicin XML] Mayo 2011 [51] http://es.wikipedia.org/wiki/JSON [Definicin JSON] Mayo 2011

75