Creación de una aplicación SIG con OpenLayers, ExtJS...
75
Departament d’Enginyeria Informàtica i Matemàtiques Creación de una aplicación SIG con OpenLayers, ExtJS y MySQL TITULACIÓN: Ingeniería Técnica en Telecomunicaciones, especialidad Telemática AUTOR: Marina Carrillo Baena DIRECTOR: Maria Ferré PONENTE: Joaquín López FECHA: Junio 2011
-
Upload
truongduong -
Category
Documents
-
view
214 -
download
1
Transcript of Creación de una aplicación SIG con OpenLayers, ExtJS...
Departament d’Enginyeria Informàtica i Matemàtiques
Creación de una aplicación SIG con
OpenLayers, ExtJS y MySQL
TITULACIÓN: Ingeniería Técnica en Telecomunicaciones, especialidad Telemática
AUTOR: Marina Carrillo Baena
DIRECTOR: Maria Ferré
PONENTE: Joaquín López
FECHA: Junio 2011
2
ÍNDICE
1. DESCRIPCIÓN DE LA EMPRESA: AIDDEA LINUX, S.L ............................................... 5
2. UBICACIÓN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L ..................... 6
3. DESCRIPCIÓN DE LA TAREA REALIZADA ................................................................... 7
3.1. Introducción ...................................................................................................................... 8
3.2. Objetivos del Proyecto ..................................................................................................... 9
3.3. Especificaciones del Proyecto ........................................................................................ 10
3.4. Sistema de Información Geográfica (SIG) ................................................................... 11
3.4.1. Definición y Elementos Principales ........................................................................ 11
3.4.2. Cartografía............................................................................................................... 13
3.4.2.1. Definición ........................................................................................................ 13
3.4.2.2. Sistema de Coordenadas ................................................................................ 13
3.4.2.3. Proyecciones .................................................................................................... 14
3.4.3. Representación de la Información .......................................................................... 15
3.4.3.1. Modelo Raster ................................................................................................. 15
3.4.3.2. Modelo Vectorial ............................................................................................ 16
3.4.3.3. Comparación entre Modelo Raster y Vectorial ........................................... 17
3.4.4. Actualidad y Ejemplos de Aplicaciones de un SIG ................................................ 17
3.5. Open Geospatial Consortium (OGC) ........................................................................... 20
3.5.1. Web Map Service (WMS) ........................................................................................ 21
3.5.2. Web Feature Service (WFS) ................................................................................... 21
3.6. Diseño del Proyecto ........................................................................................................ 21
3.6.1. OpenLayers .............................................................................................................. 21
3.6.1.1. ¿Qué és? ......................................................................................................... .21
3.6.1.2. ¿Por qué OpenLayers? .................................................................................. 22
3.6.2. Ext JS: ..................................................................................................................... 23
3.6.2.1. ¿Qué es? .......................................................................................................... 23
3.6.2.2. Ventajas e Inconvenientes de Ext JS ............................................................ 24
3.6.3. Gestión de la información: Base de datos .............................................................. 25
3.6.3.1. PHP .................................................................................................................. 25
3.6.3.2. MySQL ............................................................................................................ 26
3.6.3.2.1. Lenguaje SQL ............................................................................................... 26
3.6.3.2.2. phpMyAdmin ................................................................................................ 27
3.6.3.3. Base de Datos .................................................................................................. 27
3
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
3.6.4.1. Ventaja e Inconvenientes de AJAX .............................................................. 33
3.6.4.2. AJAX: Intercambio de Datos con JSON ...................................................... 34
3.6.4.3. Comparación entre XML y JSON ................................................................ 34
3.7. Desarrollo ........................................................................................................................ 35
3.7.1. Archivo SIG.html ..................................................................................................... 35
3.7.2. Archivo Sig_Ext.js ................................................................................................... 37
3.7.2.1. Diseño de los Paneles ...................................................................................... 38
3.7.2.2. Botones y Formularios ................................................................................... 42
3.7.3. Archivo MAPA.js ..................................................................................................... 45
3.7.3.1. Mapa ................................................................................................................ 46
3.7.3.2. Controles y Configuración del Mapa ............................................................ 46
3.7.3.3. Layers o Capas ............................................................................................... 50
3.7.3.3.1. Markers .......................................................................................................... 51
3.7.3.3.2. Historial ......................................................................................................... 52
3.7.4. Archivo Conectarse.php .......................................................................................... 53
3.7.5. Archivo Datos.php ................................................................................................... 54
3.7.6. Archivo TreeData.php ............................................................................................. 55
3.7.7. Simulación de la Recepción de Datos Vía SMS ..................................................... 57
3.8. Evaluación: Juego de Pruebas ...................................................................................... 57
3.8.1. Crear un Tipo de Dispositivo .................................................................................. 57
3.8.2. Modificar un Tipo de Dispositivo ............................................................................ 60
3.8.3. Crear un Dispositivo ................................................................................................ 61
3.8.4. Simulación Recepción de Datos .............................................................................. 64
3.8.5. Visualizar Historial de un Dispositivo .................................................................... 65
3.8.6. Visualizar la Última Posición de un Dispositivo .................................................... 66
3.8.7. Visualizar el Recorrido de un Dispositivo .............................................................. 66
3.8.8. Eliminar Tipo de Dispositivo .................................................................................. 67
3.8.9. Eliminar Dispositivo ................................................................................................ 67
3.9. Recursos utilizados ......................................................................................................... 68
3.9.1. Requisitos hardware y software .............................................................................. 68
4
4. APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL ALUMNO ... 69
5. APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO.................... 70
6. CONCLUSIONES Y LÍNEAS FUTURAS .......................................................................... 71
REFERENCIAS ............................................................................................................................. 73
5
1. DESCRIPCIÓN DE LA EMPRESA: AIDDEA LINUX, S.L:
Este proyecto se llevará a cabo para la empresa Aiddea Linux, S.L, representada por
Joaquín López, y situada en: Camí de Valls, nº 81-87, despacho 61, Reus.
Aiddea Linux es una empresa de diseño de ingeniería electrónica especializada en
electrónica embedded, RFID, comunicaciones. Dentro de estos campos tiene como
objetivo la investigación, fabricación y ensamblaje de productos y otros componentes
auxiliares.
Ofrece servicios tanto en el campo de la electrónica como de las TIC. Por la parte
electrónica, como ya hemos comentado, desarrolla diseños electrónicos 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 continuación listamos algunas de las tecnologías con las que trabajan:
- Automatización y robótica.
- Bases de datos.
- Equipamiento doméstico y domótica.
- Equipamiento y dispositivos electrónicos.
- Gestión de inventarios.
- Gestión documental.
- Hardware informático.
- Integración de sistemas.
- Marketing y promoción 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 también cuenta con un portal de venda on-line,
http://www.aidealo.com , de productos electrónicos.
6
2. UBICACIÓN 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 gestión de dispositivos remotos. En concreto, un Sistema de Información
Geográfica, es decir, un sistema que nos permitirá tener localizados diferentes elementos,
en un mapa, podemos resumirlo en la palabra “Geolocalización”, término nuevo, y muy
presente actualmente debido al auge de este tipo de tecnologías, que hace referencia a
conocer la ubicación geográfica, de un dispositivo determinado.
Como requisitos técnicos el programa debe estar programado en JavaScript y PHP.
Por otra parte, Aiddea Linux quiere que la aplicación 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 número
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 fácil navegar por la página 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 vía correo electrónico, para ir acordando los requisitos de la
aplicación, 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 diseño y desarrollo del aplicativo.
A continuación, en el apartado 3, se explicará en profundidad la tarea realizada.
7
3. DESCRIPCIÓN DE LA TAREA REALIZADA:
Este apartado es la parte fundamental del proyecto. Constará de los siguientes apartados:
- Introducción: Haremos una introducción general sobre la tarea a realizar,
aportando ejemplos actuales que nos ayudaran a ir decidiendo como plantearemos
nuestra aplicación.
- Objetivos: Se trata de las metas globales del proyecto, es decir, hacer un esquema
de todo aquello que necesitamos estudiar previamente para realizar la aplicación, y
todas las funciones y características que debe tener el caso práctico final.
- Especificaciones del proyecto: En otras palabras podríamos decir que es el
enunciado completo de la aplicación, los requisitos principales que ha puesto
Aiddea Linux, S.L.
- Conceptos básicos: En el cual nos centraremos en dos temas principales, los
Sistemas de Información Geográfica (SIG), en el cual se incluye la explicación de
este tipo de sistemas y conceptos básicos de cartografía, y el Open Geospatial
Consortium (OGC). Se trata de situarnos en el tema, así, a la hora de realizar el
proyecto práctico comprenderemos mejor ciertas funciones y decisiones.
- Diseño: Se explican detalladamente las tecnologías utilizadas, entre ellas
OpenLayers, para la gestión 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 descripción de la estructura de la aplicación, es decir, los
archivos que la forman y las funciones principales de cada uno de ellos.
- Evaluación: Juego de pruebas: En este apartado haremos funcionar la aplicación,
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 aplicación funcione correctamente.
8
3.1. Introducción:
La Geolocalización es una de las manifestaciones más populares del desarrollo actual de
las Tecnologías de la Información y las Comunicaciones (TIC), y que está experimentando
un auge relevante en los últimos tiempos.
Hay diferentes formas de saber la ubicación de un elemento físico, pero últimamente con la
evolución de la telefonía móvil, podemos ubicarnos en cualquier punto del mundo, ya sea
mediante receptores GPS, redes WI-FI inalámbricas, o las propias redes de telefonía móvil,
a esto le añadimos el desarrollo de la banda ancha móvil que permite la conexión
permanente a internet de los llamados “teléfonos inteligentes” (smartphones).
El uso práctico de este tipo de tecnologías es muy variado, desde el uso en redes sociales
como Facebook, como puede ser “Facebook Places”, aplicación que te proporciona
información sobre restaurantes, tiendas, opiniones de los diferentes lugares, etc, hasta
utilidades como trazado de rutas, senderismo... Pero no sólo están ideadas para el ocio, en
el campo empresarial y profesional también tienen utilidades muy importantes, como por
ejemplo sistemas que utilizan algunas compañías de seguros para la localización de
vehículos robados o siniestrados, etc.
En el proyecto que nos ocupa crearemos la aplicación con la que visualizaremos la
información recibida en el mapa. Para entender mejor el funcionamiento general, a
continuación explicaremos los elementos básicos de este tipo de sistemas, en nuestro caso
estará formado por tres elementos (Véase Figura 1.):
- Equipos de localización: Elemento que llevará cada dispositivo que queremos
tener posicionado, será el emisor de la posición y por lo tanto estará compuesto por
un receptor de GPS1 y una tarjeta SIM con la cual se enviarán los SMS al servidor,
también se puede obtener la posición mediante la localización GSM2 a través de la
SIM, pero es un método menos preciso que mediante GPS.
- Servidor: Computadora que gestiona la comunicación entre los equipos de
localización y la aplicación web. Es donde se almacena toda la información
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
información deseada, y ver todos los dispositivos registrados. Será la tarea principal
que se desarrollará en este proyecto.
1 GPS: Global Positioning System - Sistema de Posicionamiento Global
2 Localización GSM: es un servicio ofrecido por las empresas operadoras de telefonía móvil que permite determinar, con
una cierta precisión, donde se encuentra físicamente un terminal móvil determinado.
9
Figura 1. Esquema simplificado del funcionamiento del Sistema de Localización.
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 diseño y desarrollo de una aplicación web, en
la cual se representa un mapa con la información espacial recibida de unos determinados
dispositivos (elementos móviles). Para poder adentrarnos en las características y
funcionamiento deseado, primero es conveniente hacer un estudio general de este tipo de
tecnologías, por lo tanto, a priori, tendremos una serie de objetivos iniciales, de carácter
más teórico, tales como:
Conocer que es un SIG (Sistema de Información Geográfica), así como conceptos
generales relacionados con la cartografía, como coordenadas, proyecciones, etc.
Comprender los estándares más 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 aplicación.
Crear la base de datos necesaria mediante MySQL, para poder gestionar la
información recibida de forma eficiente.
10
Elegir un framework Javascript adecuado para la creación 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 básicos del funcionamiento de la
aplicación. Debido a que está ideada para poderla adaptar a diferentes situaciones
temáticas, es decir, no sabemos qué tipos de elementos (por ejemplo: coches, animales,
etc) serán los que queramos posicionar, siempre hablaremos de dispositivos en general:
Recibir y almacenar la información de cada dispositivo.
Tener la posibilidad de crear, eliminar y modificar dispositivos.
Mostrar en el mapa la última posición recibida de cada uno de los dispositivos.
Visualizar la ruta seguida por un elemento a partir de los diferentes datos
espaciales recibidos.
Estos serían los objetivos principales, tanto a nivel teórico, como práctico. A continuación,
en el apartado especificaciones se expondrán más a fondo todas las características y
funciones que queremos que realice la aplicación.
3.3. Especificaciones del Proyecto:
El proyecto trata de desarrollar una aplicación Web capaz de gestionar y monitorizar una
serie de dispositivos wireless. En un principio la aplicación 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 número
determinado de animales en un terreno. Por lo tanto no habrá un número elevado de
elementos, sobre unos 100 aproximadamente. Los dispositivos podrán ser agrupados en
clases, es decir, tipos de dispositivos.
La aplicación constará de varias partes diferenciadas para facilitar la gestión de la
información recibida, como mínimo con las siguientes:
- Pantalla de visualización del mapa, en la cual se mostrará, cuando el usuario lo
indique, la última posición 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 características (id, nombre,
icono, número máximo de dispositivos que admite, número de dispositivos que
11
tiene actualmente, observaciones), en esta pantalla también tendremos opciones
para modificarlos, eliminarlos o crear nuevos tipos.
- Pantalla con la lista de dispositivos, será prácticamente igual a la explicada
para los tipos de dispositivo, en este caso tendremos id, tipo, icono, nombre, y
observaciones, de cada uno de ellos. También tendremos los botones que nos
permitirán acceder a modificarlos, eliminarlos o crear nuevos, además se
añadirá el botón historial que nos mostrará las posiciones recibidas del
dispositivo seleccionado.
- Como ya hemos dicho la aplicación nos debe facilitar las opciones para crear,
modificar y eliminar los tipos de dispositivos y dispositivos, se crearán y
modificarán mediante formularios que piden los datos necesarios y validan la
información introducida por el usuario. En el caso de eliminar, siempre se
pedirá al usuario que confirme que desea eliminarlos, para asegurarnos que no
borre información accidentalmente.
La aplicación está ideada para que la información de cada dispositivo se reciba mediante
SMS. Se tendrá que tener en cuenta que se debe utilizar el protocolo/servicio más simple
posible, ya que el encargado de enviar la información será un dispositivo embedded, con
una capacidad de proceso limitada.
Se recibirá un mensaje, vía SMS, con al menos la posición GPS, el resto de información se
podrá obtener si ese número de teléfono está dado de alta en la configuración.
En el tema de recepción de datos no nos adentraremos mucho, simplemente haremos una
pequeña simulación para poder utilizar las funciones de la aplicación.
3.4. Sistema de Información Geográfica (SIG):
3.4.1. Definición y Elementos Principales:
El término SIG procede del acrónimo de Sistema de Información Geográfica (en inglés
GIS, Geographic Information System). Como definición general podríamos decir que se
trata de sistemas que permiten integrar y analizar información geográfica, los cuales
proporcionan herramientas al usuario para editar, analizar e incluso visualizar los datos
obtenidos en un mapa.
De manera más técnica añadiríamos que están formados por equipos electrónicos
(hardware), que están programados adecuadamente (software) para permitir el manejo de
una serie de datos espaciales (información geográfica) y realizar análisis complejos de
éstos, siguiendo los criterios impuestos por el equipo científico (equipo humano). Podemos
identificar fácilmente 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 periféricos de entrada y salida que
constituyen el soporte físico del SIG.
12
- Software: Los programas SIG proveen las herramientas y funcionalidades
necesarias para almacenar, analizar y mostrar información geográfica, los
componentes principales son:
o Sistemas para administrar bases de datos.
o Una interfaz gráfica de usuarios para el fácil acceso a las herramientas.
o Herramientas para captura y gestión de la información.
o Herramientas para soporte de consultas, análisis y visualización de los
datos espaciales.
Actualmente, con el mayor acceso a Internet y a la demanda de datos geográficos
distribuidos, el software SIG ha cambiado gradualmente su perspectiva hacia la
distribución de datos a través de la red. Los SIG que en la actualidad se
comercializan son combinaciones de varias aplicaciones interoperables y APIs.
- Datos geográficos: Es el componente más importante. Pueden obtenerse por
recursos propios o a través de proveedores de datos. A su vez es el elemento
diferenciador de un SIG frente a un Sistema de Información, ya que este tipo de
datos contiene dos vertientes: la espacial y la temática. Para aclarar estos dos
conceptos pondremos un ejemplo. Si tenemos un SIG que nos muestra los niveles
de contaminación en el agua, un lago tendrá dos tipos de información: la que nos
indica sus magnitudes en el mapa y aspecto, la espacial, y la que nos muestra los
niveles de contaminación, la temática. Por lo tanto, el sistema tiene que trabajar con
cartografía y con bases de datos a la vez, de forma que al unirlo obtendremos una
base de datos geográfica.
- Procedimientos: Para que un SIG tenga éxito, este debe operar de acuerdo a un
plan bien diseñado y estructurado y acorde a las reglas de la empresa, que son los
modelos de las actividades propias de cada organización.
- Equipo humano: Hay distintas formas de interactuar con este tipo de programas,
dependiendo del tipo de usuario:
o Usuario final el cual obtiene información del sistema.
o Técnico o especialista que configura y define las herramientas a utilizar, los
datos, etc., dependiendo de la finalidad exacta del programa.
o Informáticos, dependiendo de la magnitud del sistema, son los encargados
de su administración.
13
Figura 2. Elementos principales de un SIG.
3.4.2. Cartografía:
Antes de adentrarnos más en los sistemas GIS, explicaremos conceptos geográficos
básicos, tales como longitud, latitud, proyecciones, etc. Los cuales nos ayudaran a
comprender mejor su funcionamiento.
3.4.2.1. Definición:
La cartografía es la ciencia que se encarga del estudio y de la elaboración de los mapas
geográficos y territoriales, entre otros. A grandes rasgos, se trata de implementar una
representación de la Tierra sobre una superficie plana llamada mapa. De manera simple, un
mapa es la representación del mundo real reducido a puntos, líneas y polígonos mediante el
uso de símbolos gráficos.
Debido a que la Tierra tiene una forma esférica, se debe utilizar un sistema de
proyecciones para poder representar una superficie esférica en una superficie plana. El
problema es que en realidad no es exactamente esférica, su forma es más achatada en los
polos que en la zona ecuatorial.
Además de representar los contornos, las superficies y los ángulos, se ocupa de representar
la información sobre el mapa. Estas representaciones, actualmente se están realizando con
los sistemas SIG, en los que se puede georeferenciar (dotar de coordenadas geográficas
(longitud, latitud), ubicar en el espacio).
3.4.2.2. Sistema de Coordenadas:
Se trata del conjunto de valores que permiten definir unívocamente la posición de
cualquier punto de un espacio geométrico 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
14
calculan las coordenadas de cualquier punto, constituyen lo que se denomina sistema de
referencia.
Sistema de Coordenadas Geográficas:
El sistema de coordenadas geográfico está alineado con los ejes de rotación de la Tierra.
Define dos ángulos desde el centro de la Tierra: latitud y longitud (Ver Figura 3.), que
explicamos a continuación:
- Latitud: Mide el ángulo entre cualquier punto y el ecuador. Las líneas de latitud se
llaman paralelos y son círculos 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 líneas de longitud
son círculos máximos que pasan por los polos y se llaman meridianos.
Figura 3. Sistema de Coordenadas Geográficas. Longitud y latitud.
Combinando estos dos ángulos, se puede expresar la posición 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 representación en dos dimensiones, de un objeto tridimensional (la
Tierra), por lo tanto, cuando lo creamos, estamos perdiendo una dimensión, por este
motivo el plano obtenido no será perfecto, habrá una pequeña distorsión.
Esto supone un problema ya que no hay forma de representar la esfera sobre una superficie
plana, sin que exista un error mínimo. Las proyecciones vienen a solventar este problema,
estudiando las distintas opciones para obtener la forma más exacta posible en el mapa.
Existen diferentes tipos de proyecciones pero nos centraremos en la proyección Spherical
Mercator, que es de la que hablaremos durante el proyecto.
15
Proyección de Mercator:
Este tipo de proyección consiste en representar la superficie esférica terrestre sobre una
superficie cilíndrica, tangente al ecuador, que al desplegarse genera un mapa terrestre
plano.
Con otras palabras, diríamos 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 sería el mapa (Ver Figura 4.).
Esta proyección presenta una buena aproximación 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 proyección de Mercator. A pesar de
sus relativas distorsiones de escala, esta proyección está muy indicada para mapas
interactivos en que se hacen desplazamientos y acercamientos de regiones pequeñas, donde
las formas se distorsionan relativamente poco.
Figura 4. Proyección Spherical Mercator.
3.4.3. Representación de la Información:
En este apartado explicaremos las principales técnicas que utilizan los SIG para representar
la información, es decir, el mundo real, datos como carreteras, uso del suelo,
contaminación, etc. Estos a su vez se pueden dividir en dos tipos: objetos discretos
(ejemplo: casa, carretera) y continuos (ejemplo: nube de contaminación, acuíferos). Para
almacenar estos datos hay dos formas principales de hacerlo, se trata del modelo raster y el
vectorial, a continuación 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 (píxeles) 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 información.
16
Como ya hemos dicho la imagen queda como una rejilla de celdas, por lo tanto la posición
de cada una viene implícita según 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 “vacío”, información no significativa.
Para obtener una descripción precisa de los objetos geográficos contenidos en la base de
datos, el tamaño del píxel ha de ser reducido (en función de la escala), lo que dotará a la
malla de una resolución alta. Sin embargo, a mayor número de filas y columnas, más
resolución, pero también, mayor esfuerzo en el proceso de captura de la información y
mayor costo computacional a la hora de procesarla. Los datos raster se almacenan en
diferentes formatos, desde un archivo estándar 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
geométricos. Para ello se utilizan vectores definidos por pares de coordenadas relativas a
algún sistema cartográfico. Los principales componentes son:
- Punto o nodo: unidad básica para representar entidades geográficas que pueden
ser expresadas por un único punto de referencia, en otras palabras, la simple
ubicación.
- Línea: a partir de dos puntos, como mínimo, formaremos las líneas. En este tipo
de elementos se puede medir la distancia.
- Polígono: en este caso a partir de líneas o agrupaciones de puntos crearemos
polígonos.
El interés de este tipo de representaciones se centra en la precisión de localización de los
elementos geográficos sobre el espacio, donde los fenómenos a representar son discretos,
es decir, de límites definidos.
17
Figura 5. A la izquierda modelo de datos raster, a la derecha modelo de datos vectorial.
3.4.3.3. Comparación entre Modelo Raster y Vectorial:
Después del estudio de los dos modelos, podemos observar que una de las diferencias
principales es la exactitud de representación, es decir, el modelo raster, al contrario que el
vectorial, es especialmente útil cuando tenemos que describir objetos geográficos con
límites difusos, como por ejemplo la dispersión de una nube de contaminantes, donde los
contornos no son absolutamente nítidos, normalmente con tratamiento de objetos
continuos. Por otro lado el modelo vectorial es más exacto.
Otros aspectos a tener en cuenta es el coste computacional, en el caso raster se necesita
más espacio de memoria, aunque la estructura de los datos es muy simple. En el caso
vectorial, sólo se almacenan los datos digitalizados por lo tanto no necesita tanto espacio
de memoria, por el contrario la estructura de datos es más compleja.
En algunos casos se podrán utilizar los dos modelos para cubrir las necesidades completas
de la aplicación.
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 cartografía temática sobre cualquier aspecto ambiental y socioeconómico
de la superficie terrestre.
Aunque no nos demos cuenta, en nuestro día a día están presentes en muchos ámbitos. Por
ejemplo, las mercaderías que consumimos habitualmente son transportadas a través de
vehículos 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
18
van, cálculos de distancia hasta al punto de destino, ubicación, distancia recorrida… otra
muestra de la utilidad de estos programas la encontramos en las compañías eléctricas, las
cuales pueden gestionar toda su red de servicios a través de ellos, en el caso de una avería
podrán ver fácilmente toda el área afectada, ayudando así a la pronta solución del
problema.
En general, el mundo de la información a la vez que Internet ha experimentado una
evolución muy importante en los últimos años. Gracias a esto, el mundo de los SIG ha
asistido a una explosión de aplicaciones destinadas a mostrar y editar cartografía en
entornos web, hoy día cualquier usuario que navegue por la red, por muy pocos
conocimientos que tenga sabrá de la existencia, por ejemplo, de Google Maps.
Más recientemente, estas aplicaciones también se están extendiendo muy rápidamente a
terminales de telefonía móvil y otros sistemas como tablets.
Este tipo de aplicaciones da acceso al público de enormes cantidades de datos geográficos,
por esta razón es necesario establecer unos estándares, creados por la organización OGC3,
que facilitan la interoperabilidad de los datos espaciales.
Muchas disciplinas se han beneficiado de las tecnologías SIG. Esto ha producido una
reducción de costes y mejoras en componentes de hardware y software de sistemas.
Además, esta tecnología ha sido asimilada por multitud de universidades e instituciones. A
continuación nombramos algunas de ellas:
- La Infraestructura de Datos Espaciales de España (IDEE) tiene como objetivo el
integrar a través de Internet los datos, metadatos, servicios e información de tipo
geográfico que se producen en España, facilitando a todos los usuarios la
localización, identificación, selección y acceso a tales recursos, a través 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 Comisión Europea cuyo objetivo es la creación 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 información geoespacial a través de Internet, en la cual
participan todas las administraciones públicas (entes locales, Generalitat, estado) y
también otras instituciones públicas y privadas.
3 Ver apartado 3.5. Open Geospatial Consortium
19
A continuación se muestran algunos ejemplos de SIG:
- Camino Jacobeo:
Ejemplo de SIG aplicado al ámbito del Patrimonio Histórico-Artístico. Se trata de una
aplicación que hace recorridos virtuales por las rutas del Camino de Santiago, además
nos proporciona información sobre pueblos, alojamientos, restaurantes.
Figura 6. SIG Camino de Santiago [7]
- Geoportalbcn:
En el pasado salón GlobalGeo 2011 se presentó la actualización 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 aplicación, calculando
distancias, buscando puntos en concreto de la ciudad, obteniendo información
cartográfica, etc.
Figura 7. Geoportalbcn [8]
20
- Ideclocal:
Se trata de una iniciativa de IDEC (Institut de Dades Espacials de Catalunya), el cual es
la base técnica para la organización, promoción, explotación y mantenimiento de las
infraestructuras de datos espaciales, con la finalidad de difundir geoinformación y
servicios conexos, y que sean más accesibles para asegurar el uso compartido.
Figura 8. IdecLocal [9]
3.5. Open Geospatial Consortium (OGC):
El Open Geospatial Consortium (OGC) es una organización internacional que agrupa a 416
compañías y organismos públicos. Trabaja en la definición de especificaciones públicas
para el intercambio de datos entre los sistemas de información geográfica. El principal
objetivo de dicho consorcio es la definición de estándares abiertos e interoperables dentro
de los GIS y de la World Wide Web que faciliten el intercambio de la información
geográfica, 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 implantación en el mundo de los GIS: Web Map Service (WMS) y Web Feature
Service (WFS).
21
3.5.1. Web Map Service (WMS):
Es un estándar OGC, que produce mapas de datos referenciados espacialmente, de forma
dinámica a partir de información geográfica. Este estándar internacional define un "mapa"
como una representación de la información geográfica, en forma de un archivo de imagen
digital conveniente para la exhibición en una pantalla de ordenador. Está organizada en una
o más capas, que pueden visualizarse u ocultarse una a una. Se puede consultar cierta
información disponible y las características 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 gráficos.
3.5.2. Web Feature Service (WFS):
Es un servicio estándar, que ofrece un interfaz de comunicación que permite interactuar
con los mapas servidos por el estándar WMS, como por ejemplo, editar la imagen que nos
ofrece o analizarla siguiendo criterios geográficos. Para realizar estas operaciones se utiliza
el lenguaje GML4 (Lenguaje de Marcado Geográfico) que deriva del XML, que es el
estándar a través del que se transmiten la ordenes WFS.
Los WFS pueden ser del tipo no transaccional o transaccional. La diferencia es que el
transaccional sólo permite hacer consultas y recuperación de elementos geográficos, frente
al transaccional que permite además la creación, eliminación y actualización de estos
elementos geográficos del mapa.
3.6. Diseño del Proyecto:
3.6.1. OpenLayers:
3.6.1.1. ¿Qué és?
OpenLayers es una librería escrita en JavaScript, orientado a objetos, que nos facilita
acceder, manipular y mostrar mapas en cualquier página web o aplicación, del lado cliente,
por lo tanto sin necesidad de un servidor ni configuración.
Figura 10. Logotipo OpenLayers [21]
A continuación, con la Figura 11. y los conceptos Web Map Client y Web Map Server,
acabaremos de aclarar el significado de qué OpenLayers sea una librería del lado cliente.
Esto es llamado Client/Server Model y es, básicamente, como trabajan la mayoría de
aplicaciones web.
4 GML: lenguaje utilizado para el modelaje, transporte y almacenamiento de información geográfica.
22
En el caso de las web map application, algún 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 imágenes 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 través de Javascript asíncrono
(AJAX5), llamadas a un servidor de mapas. OpenLayers une todas las imágenes 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 capítulo anterior como un
estándar OGC, en este apartado lo veremos de una forma más práctica. 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
básico detrás de todos ellos es que permiten especificar el área que queremos ver
(mediante el envío 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 algún servidor de mapas, no se debe hacer nada, tan sólo introducir la dirección
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 característica positiva de OpenLayers es que ha sido desarrollado para promover
información geográfica 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 visualización 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
23
información espacial a través de las aplicaciones propias de los creadores o proveedores de
datos geográficos.
En resumen, nos permite elaborar nuestros mapas haciendo uso de su propia base de
información cartográfica o usar su estructura para hacer uso de otros servicios.
Además, si comparamos OpenLayers con otros frameworks con la misma finalidad, el
punto fuerte lo encontramos en que es un software gratuito, de código 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). Además, implementa métodos estándar de la industria para el acceso
a los datos geográficos, 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 definición de la página web ExtJS es una librería Javascript que permite
construir aplicaciones complejas en Internet, las llamadas RIA.
Figura 12. Logotipo Ext JS [32]
Antes de explicar más características sobre ExtJS hablaremos sobre RIA, acrónimo 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 más importante en nuestras
aplicaciones. ExtJS nos ayuda a mejorar la interacción con el usuario, pues nos
proporciona componentes con funcionalidades avanzadas y de sencilla implementación. Se
trata de que resulten fáciles de usar e intuitivas.
Volviendo a qué es ExtJS podemos hablar de sus orígenes, fue construida como una
extensión de la librería Yahoo! User Interface (YUI), gracias a su buena estructura
6 BSD: (Berkeley Software Distribution). Es una licencia de software libre muy cercana al dominio público. La licencia
BSD permite el uso del código fuente en software no libre.
24
actualmente puede interactuar como extensión para las bibliotecas jQuery y Prototype.
Desde la versión 1.1 puede ejecutarse también como una aplicación independiente, ya que
además cuenta con su propia librería 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 librería basada sobre Ext JS.
Para acabar de explicar y valorar este framework a continuación 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 páginas cada vez que el usuario pide nuevo contenido. ExtJS
permite la comunicación con el servidor en segundo plano, sin la necesidad de
actualizar la página por completo. De esta forma se pueden solicitar o enviar
datos hacia o desde su servidor web utilizando AJAX, y procesar la información
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
código escrito funcione bien en cada uno (Firefox, IE, etc.).
- Un modelo de componentes muy bien diseñado: 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 sólo los bordes haciendo que el
movimiento sea fluido.
- Cuenta con distintos tipos de licencias, explicados anteriormente.
7 Ver apartado 3.6.4. Ajax
25
- 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 librería de OpenLayers y los ricos componentes
gráficos 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 rápido como quisiéramos, sin embargo con los nuevos
navegadores es un factor que puede mejorar.
- La librería tiene un tamaño 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 tamaño son aspectos a tener
en cuenta pero que se contrarrestan con los beneficios que nos aporta. Ya que es muy
flexible y además nos permite realizar de una manera muy rápida 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 aplicación de escritorio.
3.6.3. Gestión de la información: Base de datos:
La combinación del lenguaje PHP junto con la base de datos MySQL es una combinación
muy utilizada en un gran número de páginas web que podemos encontrar hoy en día
mientras navegamos por internet, debido a la potencia que se consigue utilizando estas dos
aplicaciones juntas.
A continuación explicaremos cada una de ellas, y también 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 páginas 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
páginas van a poder ser vistas en cualquier ordenador, independientemente del navegador
que tenga.
26
La función principal que realizará PHP en el aplicativo web será la de gestionar la
información de la base de datos que tenemos almacenada en el servidor. Otro punto fuerte
de PHP es que se trata de un lenguaje de programación totalmente gratuito.
Cuando decimos que PHP es un lenguaje del lado del servidor significa que el usuario abre
la página html en su navegador y hace una petición de interactuar. PHP instalado en dicho
servidor web interpreta o procesa el script, es decir, la petición, y envía dicha respuesta al
usuario en forma de documento html. Esto es una breve explicación del funcionamiento de
PHP que podemos ver gráficamente 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 conexión de varios usuarios,
en general se utiliza para aplicaciones de tamaño pequeño-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
informática. Como su propio nombre indica, SQL es un lenguaje informático que se puede
utilizar para interaccionar con una base de datos y más concretamente con un tipo
específico llamado base de datos relacional. Este tipo de base de datos permite establecer
interconexiones (relaciones) entre los datos (que están guardados en tablas), y a través de
dichas conexiones relacionar los datos de ambas tablas, de ahí proviene su nombre:
"Modelo Relacional".
27
Está compuesto por comandos, cláusulas, 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 estándar por haberse visto consolidado por el Instituto
Americano de Normas (ANSI) y por la Organización de Estándares Internacional (ISO).
Para el uso y manejo de la base de datos MySQL, vamos a emplear una aplicación muy
usual y extendida llamada phpMyAdmin.
3.6.3.2.2. phpMyAdmin:
PhpMyAdmin es una herramienta escrita en PHP con la intención de manejar la
administración de MySQL a través de páginas web, utilizando Internet. Actualmente puede
crear y eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y añadir
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 aplicación 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 Tipo de datos Tamaño (bytes)
id TINYINT(3) 3
nomt CHAR(10) 10
icono CHAR(12) 12
maxdisp TINYINT(3) 3
numdisp TINYINT(3) 3
ob_tipo CHAR(30) 30
TOTAL: 61
Tabla 1. Tabla Tipos de Dispositivos, con sus campos correspondientes y el tamaño 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.
28
Tiene seis campos, a continuación explicaremos cada uno de ellos:
El “id”, se trata de un valor numérico que identifica al grupo de
dispositivos, se ha configurado en phpMyAdmin como un tipo de datos
Tinyint y además como unsigned, es decir, deberá ser un número entero
positivo comprendido entre 0 y 255. Esto significa que la aplicación como
máximo tendrá 256 tipos de dispositivos.
No podrá haber dos “id” iguales ni valores nulos, ya que se ha definido
como clave primaria. En el diseño de bases de datos relacionales, se llama
clave primaria a un campo o a una combinación 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
teníamos 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 además 4 espacios vacíos hasta llegar
al número máximo de caracteres que hemos establecido en 10.
En el caso de VARCHAR(10) se guardarán sólo los 6 caracteres de la
palabra más un byte para indicar la longitud de la columna, por lo
tanto 7 bytes.
Llegados a este punto parece ilógico haber elegido como tipo de datos
CHAR, la razón es que con CHAR accedemos más rápido a la información
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 más, para saber el tamaño 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 después
se utilizará en la interfaz de la aplicación. También es definido como
CHAR(10).
“maxdisp” y “numdisp” ambas serán variables de tipo Tinyint por lo tanto
no podrán ser superiores a 255. La primera será introducida por el usuario
que nos indicará el número máximo de elementos que puede tener un tipo
29
de dispositivo, como máximo 255. Debido al tipo de variable que le hemos
asignado, como máximo serán 255, dependiendo del uso exacto que se le
quiera dar a la aplicación podemos modificarlo y ponerle otra clase de dato,
que nos permita tener más 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 algún tipo
de observación 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 máximo tendremos 256 tipos de dispositivos, la tabla t_disp tendrá un
tamaño máximo de: 15.616 bytes = 15,25 KB.
3.6.3.3.2. Tabla Dispositivos:
- Una tabla para guardar los dispositivos:
Tabla: disp
Campos Tipo de datos Tamaño (bytes)
teléfono INT(9) 9
idtipo TINYINT(3) 3
iconodisp CHAR(12) 12
nombre CHAR(10) 10
observaciones CHAR(30) 30
color CHAR(7) 7
TOTAL: 71
Tabla 2. Tabla de Dispositivos, con sus campos correspondientes y el tamaño de cada uno de ellos.
En esta tabla se almacenarán los dispositivos o elementos a localizar. Está compuesta por:
“teléfono” o identificador numérico del elemento, será el número de
teléfono del dispositivo a localizar, el cual nos enviará la información
mediante mensajes de texto, esta decisión de diseño formaba parte de los
requisitos iniciales de la aplicación. Lo hemos configurado como un número
entero de 9 cifras de valor positivo, por lo tanto irá de 0 a 999.999.999. Es la
clave primaria de la tabla.
30
“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 foránea.
“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 máxima 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
máximo tendremos 255 dispositivos por tipo de dispositivo, y un máximo de 256 tipos, la
tabla disp tendrá un tamaño máximo de: 4.634.880 bytes = 4,42 MB aproximadamente.
3.6.3.3.3. Tabla Historial:
- Una tabla para guardar el historial, o información recibida de cada dispositivo:
Tabla: historial
Campos Tipo de datos Tamaño(bytes)
teléfono INT(9) 9
fecha DATE 3
hora TIME 3
latitud DECIMAL(8,5) 10
longitud DECIMAL(8,5) 10
TOTAL: 35
Tabla 3. Tabla del Historial de cada Dispositivo, con sus campos correspondientes y el tamaño de cada uno
de ellos.
8 LineString: Ver capítulo 3.7.3.3. Layers o capas.
31
En esta tabla tendremos la información recibida de todos los dispositivos, los campos que
la forman son:
“teléfono” campo descrito en la tabla anterior. En este caso actúa como
clave foránea ya que relaciona la tabla de dispositivos con la del historial de
información 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 año-mes-
día. Se debe tener en cuenta que Mysql simplemente comprueba que el mes
está comprendido entre 0 y 12 y que el día 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 teléfono, 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 precisión exacta. El
tipo de datos se define como DECIMAL (8, 5) dónde 8 es el número
máximo de dígitos que tendrá el número contando también los decimales, y
5 será el número 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 posición mostrada será más o menos fiable en función de
esto.
La longitud total de cada fila de esta tabla será de 35 bytes. En este caso es más difícil
hacer un cálculo aproximado de la medida ya que es muy variable, no sabemos
exactamente las posiciones que se van a recibir.
32
Figura 15. Relación entre las bases de datos.
Por último ver de forma práctica (Véase 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 “teléfono” con la tabla que guarda las posiciones, a la vez
con la tabla que contiene los tipos de dispositivos a través 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 definirán y explicaran los términos AJAX, y JSON. Tecnologías que
nos permitirán intercambiar información del servidor al cliente y a la inversa, valorando su
eficacia, sus ventajas e inconvenientes.
Inicialmente definiremos Ajax, acrónimo de Asynchronous JavaScript And XML
(JavaScript asíncrono y XML), es una técnica 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 comunicación
asíncrona con el servidor en segundo plano.
La característica fundamental de AJAX es permitir actualizar partes de una página, con
información que se encuentra en el servidor, sin tener que refrescar completamente la
página.
Como ya hemos dicho, se trata de una tecnología asíncrona, en el sentido de que los datos
adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la
visualización ni el comportamiento de la página. JavaScript es el lenguaje con el cual se
efectúan, normalmente, las funciones de llamada de Ajax.
33
3.6.4.1. Ventaja e Inconvenientes de AJAX:
A continuación haremos un resumen de las ventajas e inconvenientes de AJAX:
- Ventajas:
Utiliza tecnologías existentes.
Es una técnica válida para múltiples plataformas y utilizable en muchos
sistemas operativos y navegadores, dado que está basada en estándares
abiertos como JavaScript y Document Object Model (DOM).
Interactividad: es posible realizar cambios sobre las páginas 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 página
nuevamente.
La página se asemeja a una aplicación de escritorio, aplicaciones RIA.
- Desventajas:
Debemos dominar varias tecnologías.
Figura 16. Ajax en aplicaciones web.
34
Se pierde el concepto de volver a la página anterior.
Dependiendo de la carga del servidor podemos experimentar tiempos
tardíos de respuesta.
3.6.4.2. AJAX: Intercambio de Datos con JSON:
JSON, acrónimo de JavaScript Object Notation, es un formato de intercambio de datos
ligero y fácil de leer para humanos y máquinas. En él se describe de qué manera los datos
se transfieren.
La simplicidad de JSON ha dado lugar a la generalización 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 estándar habitual es XML?, a
continuación haremos un breve estudio sobre ambas tecnologías.
3.6.4.3. Comparación entre XML y JSON:
Una de las principales ventajas de usar JSON es que los datos ocupan mucho menos que
XML, ya que XML, añade 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>varón</genero>
<edad>29</edad>
</persona>
Código 1. Ejemplo XML
Y estos son los mismos datos en JSON:
{
"nombre" : "Rodrigo",
"apellido" : "Corral",
"genero" : "varón",
"edad" : 29
}
Código 2. Ejemplo JSON
35
El problema principal en AJAX es mover datos entre el servidor y el cliente, este problema
se suele resolver usando XML. La mayoría de las aplicaciones AJAX, en el cliente la
programación 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 válido. De modo que podamos acceder a los datos de una
manera orientada a objetos.
Cada vez hay más 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 próximo capítulo, 3.7. Desarrollo, lo
veremos de forma práctica.
En resumen, el menor peso de los datos en JSON y la comodidad de trabajar en JavaScript
facilitándonos la manera de acceder a la información, nos ha convencido para utilizar está
técnica. En los siguientes apartados se verá desarrollada de forma más concreta en nuestro
aplicativo.
3.7. Desarrollo:
3.7.1. Archivo SIG.html:
HTML (HyperText Markup Language) es el lenguaje utilizado para construir páginas 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" />
Código 3. Link a la hoja de estilos .css
- Librería JavaScript de ExtJS: Para utilizar esta librería 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/ext-
all.js"></script>
36
3.- <script type="text/javascript" src="ExtJS/ext-
base.js"></script>
4.- <script type="text/javascript" src="ExtJS/ext-lang-
es.js"></script>
Código 4. Llamada a la librería JavaScript de ExtJS
o En la primera línea del Código 4. tenemos la carpeta “resources” en la
cual se encuentran las imágenes y estilos necesarios para los
componentes del framework.
o Línea 2 Código 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 librerías,
como por ejemplo JQuery o Prototype, nosotros hemos optado por elegir
la librería propia de ExtJS por lo tanto importamos el archivo “ext-
base.js”. (Véase línea 3 del Código 4.)
o Por último, importamos el archivo “ext-lang-es.js”, el cual hace que
todos los mensajes y advertencias nos salgan en español, ya que por
defecto están en inglés. También tenemos la posibilidad de ponerlo en
otros idiomas como francés, alemán, italiano, etc
- Librería OpenLayers: La última versión de librería se encuentra en la siguiente
URL: http://www.openlayers.org/api/OpenLayers.js
Para utilizarla basta con apuntar a esa dirección en nuestra página web. Utilizando
el fichero .js, en la carpeta api, estaremos seleccionando la última versión estable de
la librería. Si cambiamos la carpeta api por dev apuntaremos a la versión en
desarrollo (dev-elopment), la cual nos permitirá probar las funcionalidades en
marcha. En nuestro caso hemos utilizado la versión en desarrollo ya que tiene una
interfaz más vistosa. Nuestro código quedará:
<script src="http://www.openlayers.org/dev/OpenLayers.js">
</script>
Código 5. Llamada a la librería OpenLayers
Si se desea también existe la opción de descargar una versión concreta de la librería
y desplegarla en nuestro servidor web.
- Google Maps: Debemos hacer referencia a la librería de Google ya que
utilizaremos sus mapas.
<script
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Código 6. Llamada a la librería Google Maps
- Librería GeoExt: Igual que hemos hecho con las librerías anteriores debemos hacer
con la de GeoExt para utilizar sus funciones. Por lo tanto nos descargaremos el
37
archivo correspondiente y lo llamaremos en el encabezado head de nuestro archivo
html.
<script type="text/javascript"
src="ExtJS/GeoExt.js"></script>
Código 7. Llamada a la librería JavaScript de GeoExt.
- Llamada a los archivos que forman la aplicación: Para introducir el código
JavaScript de la aplicación introducimos:
<script type="text/javascript" src="mapa.js"></script>
<script type="text/javascript"
src="sig_ext.js"></script>
Código 8. Llamada a los archivos que forman la aplicación.
Hemos creado dos archivos para conseguir una mejor organización del código, a
continuación explicaremos en profundidad cada uno de ellos. A rasgos generales,
podemos decir que „mapa.js‟ contiene la creación del mapa y elementos que
visualizaremos en él, y „ext.js‟ contiene principalmente la interfaz de la aplicación.
Por otra parte para la gestión 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 método que asegura que nuestro documento está listo, ha sido cargado por
completo. Y nos garantiza que cualquier elemento de la página al que queramos
referenciar ya estará disponible cuando se ejecute el script.
A continuación debemos proveer a Ext con una imagen para generar espacios (Ver Código.
9), es importante, ya que algunas veces los componentes no se visualizarán correctamente
si no tenemos conexión a Internet, esto ocurre porque esta imagen gif está alojada fuera de
nuestro servidor.
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Código 9. Ruta imagen spacer.
38
3.7.2.1. Diseño de los Paneles:
El archivo Sig_ext.js contiene principalmente toda la interfaz gráfica. En la Figura 17.
vemos la estructura general:
Figura 17 . Pantalla inicio de la aplicación.
Ext utiliza paneles, los cuales son la base de muchos diseños.
Vemos que nuestra aplicación (Figura 17.) está dividida en tres partes o paneles bien
diferenciados, todos ellos están 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 además
se adapta al área visible de nuestro navegador, lo que queremos decir con esto es que si
cambiamos el tamaño de la pantalla, se adaptan todos los paneles a la nueva medida.
Dentro de esta ventana tenemos un layout llamado „border‟ el cual contiene región norte
(en la Figura 17. Número 1), centro (en la Figura 17. Número 2) y este (en la Figura 17.
Número 3).
A continuación explicaremos cada una de ellas de forma detallada.
- Región Norte (1) - Título: En la región Norte simplemente creamos un panel
dónde estará el título de la aplicación, lo creamos mediante “xtype: „panel‟”.
Xtype nos ofrece la posibilidad de instanciar un nuevo componente de forma
rápida, lo veremos durante la aplicación en muchos casos. Este método puede
ayudar a conservar memoria en nuestra aplicación web.
9 Layout: En una ventana, la clase que decide cómo se reparten los botones (y demás controles) dentro de ella.
39
- Región 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 pestañas que
hay en la parte superior.
Figura 18. TabPanel con la segunda pestaña activada.
o Tab MAPA: Al iniciar la aplicación siempre estará activada la pestaña
número 1 (Ver Figura 18. Número 1), esto es gracias a la propiedad:
“activeTab: 0”. Dentro de esta pestaña 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. Número 2) En esta
pestaña mostramos la tabla de todos los tipos de dispositivos y sus
características, que tenemos almacenados en la base de datos. Para
visualizar la información en forma de tabla necesitamos dos
componentes:
Objeto Ext.Data.Store: Un Store es un componente que
almacena temporalmente información 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 método HTTP que se utilizará para las
solicitudes.
El formato en el que están 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
40
array (root) que contiene toda la información, y los
diferentes campos (fields) que debe leer.
Por último con la función load(), cargamos los datos.
Objeto Ext.Grid.GridPanel: los argumentos principales que
debemos pasarle serán el Store creado en el paso anterior, y las
columnas que queremos que muestre. A cada columna le
pasamos el parámetro 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.
o Tab DISPOSITIVOS: (Ver Figura 18. Número 2) Este apartado es
similar al de tipos de dispositivos, también tenemos una tabla con todos
los dispositivos que hay registrados en la aplicación, la única diferencia
es que hemos utilizado un tipo de Store diferente que nos permite
clasificarlos según al grupo de elementos al que pertenecen. Se trata del
objeto Ext.data.GroupingStore y el único parámetro extra que le
pasaremos será “groupField: 'nomt'” que nos indicará a partir de que
campo los clasificamos (Ver Figura. 20.).
41
Figura 20. Panel de dispositivos clasificados por Tipos de Dispositivos. En los
recuadros rojos los nombres de los tipos de dispositivos.
- Región Este (3) – Árbol de dispositivos: Por último, la región 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 posición 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
Ver apartado 3.7.3.3.1. Markers 12
Ver apartado 3.7.3.3.2. Historial
42
El código 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 parámetro se le indica la url a dónde debe ir para
buscar la información en formato JSON.
o Root Node: Cada árbol requiere un root node o nodo principal, del cual
descenderán el resto de elementos. Para crearlo utilizamos:
“Ext.tree.AsyncTreeNode”. La razón por la que usamos AsyncTreeNode
en lugar del TreeNode básico, que también 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 parámetros como el nombre, el icono, el checkbox,
etc.
Una vez creado el treepanel le añadimos una barra en la parte inferior la cual
tiene dos botones, uno que permite expandir todo el árbol y otro que hace la
función contraria.
3.7.2.2. Botones y Formularios:
Tanto en la pestaña 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 pestaña dispositivos.
Explicaremos todas las opciones que contiene la pestaña dispositivos, ya que es la más
completa, ya que los botones que hay en tipo de dispositivos son prácticamente 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, título, tipo de layout, en este caso
será tipo “form” ya que dentro tendremos un formulario a rellenar, etc.
43
Figura 23. Ventana añadir dispositivo.
En la aplicación utilizamos formularios en varias ocasiones, principalmente para guardar
un elemento o modificarlo.
Dentro de la ventana explicada anteriormente, tendremos un parámetro 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 también tendrá una serie de
características como “bodystyle” o “url” (nos indicará la url a la cual se debe ir para
guardar los datos, se explicará a continuación) y de la misma forma que el objeto Window,
también tendrá el parámetro “ítems”, que esta vez contendrá los diferentes campos del
formulario.
A continuación, 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 parámetros básicos:
- Xtype: que nos dirá exactamente de qué tipo de campo se trata. En la aplicación
tenemos los siguientes tipos:
o Numberfield: Se trata de un campo que sólo nos permite introducir números.
o Textfield: En este campo se podrá introducir una línea de texto el número
máximo de caracteres irá en función del parámetro “maxLength”.
o Textarea: En este tipo de campos se permite al usuario introducir varias líneas de
texto. En nuestro caso lo hemos utilizado para el campo “observaciones” y está
limitado a 30 caracteres, que es el máximo que permite guardar la base de datos
en este campo. Por lo tanto, si el usuario introduce más de 30 caracteres le
aparecerá un aviso.
44
o Combo: (Ver Figura 24.) Se trata de un campo que despliega un menú
permitiéndonos elegir una de las opciones. En nuestro caso nos aparece en el
formulario que añade dispositivos, para elegir a qué clase de dispositivos
pertenece.
Está formado por varios parámetros 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.
También le indicamos el estilo, para poder ver varios datos en cada opción,
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 parámetro muy importante, ya que se trata del nombre con el cual se
envían los datos, que contiene el campo, al servidor.
Otros parámetros opcionales que hemos utilizado, pueden ser:
- La medida del campo (maxLength) la cual se ha puesto en función de las
medidas máximas aceptadas en la base de datos.
- La posibilidad de que el campo quede vacío (allowblank: true o false).
- readOnly: esta opción 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 parámetro indicamos que sólo se puede leer.
Cuando no se cumplen algunos de los requisitos determinados por los parámetros
anteriores, la interfaz de ExtJS mostrará al usuario los mensajes de advertencia
45
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 información al
servidor (botón guardar), borrar todos los datos que hayamos introducido en el formulario
(botón Restablecer) y por último, el botón Cancelar que hace que se cierre la ventana sin
guardar nada.
Cuando se selecciona la opción guardar, se envía la información mediante el método POST
y automáticamente el servidor nos contesta informándonos de si se ha grabado
correctamente o no. En caso afirmativo, actualizaremos los gridpanels y treepanels
necesarios para visualizar los cambios.
La siguiente opción que tenemos en la Figura 22. es modificar dispositivo, funciona igual
que la explicada para añadir 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
información correspondiente a la selección 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 información al servidor para actualizar la
base de datos) o cancelar.
A continuación en la Figura 22. tenemos el historial, cuando seleccionamos un dispositivo
del gridpanel y a continuación pulsamos este botón, 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 opción eliminar, comentar que cuando indiquemos que queremos
eliminar un dispositivo, se preguntará al usuario si está seguro de realizar esa acción, 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 información recibida de cada uno de ellos. Lo mismo pasa a la
hora de eliminar un dispositivo, también 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, dónde estará todo el
desarrollo en OpenLayers.
Además del mapa y todos sus ajustes, también crearemos las tablas que contengan todos
los Markers y LineString, dependiendo de la información 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 intención consiste en garantizar que una clase sólo tenga una instancia y proporcionar un punto de
acceso global a ella.
46
3.7.3.1. Mapa:
Uno de los elementos principales de la aplicación es el mapa. En este archivo hemos
creado una variable global llamada map:
var map = new OpenLayers.Map(options);
Código 10. Creación 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 código.
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 aplicación, llamaremos a sus
funciones para hacer zoom, añadir capas, etc como veremos a continuación.
El resto de código que nos queda referente al mapa, lo podemos dividir en dos partes
básicas:
3.7.3.2. Controles y Configuración 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)
};
Código 11. Variable options.
47
La clase “Control” es la que nos permite interactuar con nuestro mapa. También nos
permite visualizar información adicional, como pueden ser valores de escala, longitud,
latitud, etc. Se pueden añadir tantos controles como se quieran.
En las siguientes líneas explicaremos la funcionalidad de los que hemos creído conveniente
poner en nuestra aplicación:
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 botón 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 parámetro le pasamos la posición, para situarlo sobre el mapa en la
posición deseada, mediante el objeto OpenLayers.Pixel, evidentemente esta
función ú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 función 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.
48
o MouseDefaults(): Con esta línea de código habilitamos hacer zoom mediante el
ratón.
o LayerSwitcher(): Con el control LayerSwitcher(), nos aparece una lista con las
capas que hemos añadido al mapa, cada una con un checkbox, el usuario puede
decidir que capas quiere visualizar y cuáles no, activándolo y desactivándolo.
Figura 27. Control LayerSwitcher().
o MousePosition: Nos muestra la posición (Longitud, Latitud) en la que se
encuentra el ratón. Al objeto OpenLayers.MousePosition le pasamos por
parámetro dos strings, el primero llamado “prefix”, será el texto que queremos
poner delante de las coordenadas, el segundo, “separator” se trata del signo o
carácter que queremos que haya entre el valor de la longitud y el de la latitud.
Figura 26. Control PanZoomBar().
49
Figura 28. Resultado Control MousePosition().
Una vez definidos todos los controles tenemos una serie de propiedades que definiremos a
continuación, estas son debidas a la utilización de mapas con proyección Spherical
Mercator (por ejemplo Google Maps).
o Projection: Aquí establecemos la proyección del mapa que es ESPG14
:900913,
es decir, la correspondiente a Spherical Mercator. Si queremos trabajar con
Longitud, Latitud, u otro tipo de proyección en otra capa tendremos que
transformar las coordenadas.
o DisplayProjection: Esta es una propiedad que es utilizada por los controles que
muestran información de las coordenadas, como puede ser MousePosition,
explicado anteriormente. Este control utiliza otro tipo de proyección 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 proyección del mapa a la proyección del
display.
o Units: Esta propiedad indica que el mapa está en metros. Si no se indica nada,
por defecto está en grados. La proyección Spherical Mercator utiliza metros.
o MaxResolution: Esta propiedad especifica cuál es la resolución máxima 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 máximo posible.
o MaxExtent: Con esta propiedad le decimos a OpenLayers los límites máximos
del mapa. Los cuatro números representan el mínimo de x, el mínimo de y, el
máximo de x y el máximo de y.
14 EPSG es un tipo de clasificación de proyecciones la cual las identifica mediante números.
50
3.7.3.3. Layers o Capas:
OpenLayers nos permite tener múltiples servidores diferentes que nos proporcionen
mapas. Para acceder a un web map server simplemente tenemos que crear el objeto layer y
añadirlo 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 añadimos. Cada una puede tener sus
propiedades como por ejemplo la transparencia, la proyección, etc.
En nuestro aplicativo tenemos tres capas base, pudiendo elegir cual visualizamos en
cualquier momento mediante el control LayerSwitcher() explicado en el capítulo anterior.
Además de las capas bases tenemos dos vector layer, las cuáles nos permiten añadir varios
objetos geométricos 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 parámetro el nombre que se visualizará en
el LayerSwitcher, pero en el caso de la capa Google Hybrid le añadimos el
argumento tipo, para que nos muestre el mapa híbrido:
51
type: google.maps.MapTypeId.HYBRID
Código 12. Parámetro 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 también existe una
subclase para OpenStreetMap.
new OpenLayers.Layer.OSM("OpenStreetMap");
Código 13. Creación 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 sólo el área indicada. Para esto se
necesitaría crear nuestro propio servidor de mapas.
- Vector Layers15:
Un vector usa formas geométricas basadas en ecuaciones matemáticas para
formar las imágenes. 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
deformaría fácilmente.
Además las capas vectoriales nos permiten añadir más información, para acabar
de entenderlo pondremos un ejemplo de forma práctica. Si tenemos una imagen
raster con un edificio no sabremos nada sobre él, únicamente la forma, con las
capas vectoriales podemos tener más 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, líneas, polígonos, etc. A continuación explicaremos las capas
creadas en nuestra aplicación y los objetos creados, los cuáles son llamados
Features.
3.7.3.3.1. Markers
En la capa Markers, se mostrará la última posición del dispositivo que el
usuario seleccione, si en ese momento hay información de este.
Cuando hablamos de un Marker nos referimos a una posición, un punto en el
mapa, que será definido mediante la longitud y la latitud y en el cuál se
colocará el icono que le pasemos por parámetro al crear el objeto.
15 Mirar apartado 3.4.3. Representación de la información
52
Figura 30. Ejemplo de Marker situado en la posición: Longitud: 2.35098, Latitud: 48.85667.
Con la clase LonLat nos referimos al punto deseado. Como se puede ver en el
Código 14. Transformamos los datos de LonLat a la proyección de nuestro
mapa, con la función transform.
Para que el icono se sitúe en la posición correcta, debemos definir el tamaño de
este, mediante el método size, (Véase Código 14.), además también debemos
calcular el offset. De esta forma el icono se situará en la posición indicada sin
desplazamientos erróneos. Por lo tanto nuestra aplicación tendrá fiabilidad
respecto a los datos recibidos, otro tema es que el dispositivo que nos envíe la
información no sea totalmente exacto, pero eso no lo podemos controlar desde
la aplicación. Una vez tenemos los valores size, offset y la imagen para el
icono, crearemos el objeto icono.
Finalmente, crearemos el Marker pasándole dos argumentos, el punto donde
queremos situarlo (posición lonlat que hemos transformado a la proyección 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);
Código 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 mínimo dos puntos.
53
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 posición de esta tabla será un objeto Geometry.Point (x, y), dónde x e y
serán longitud y latitud, respectivamente.
Como hemos podido ver Point es una subclase de Geometry, como veremos
más adelante, LineString también.
La clase Geometry guarda información sobre un objeto geométrico 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)) pasándole el array de puntos
como argumento.
Una vez tenemos creado el objeto geométrico, ya podemos crear el “feature
object” para poder añadirlo a la capa vectorial, esto lo haremos a través 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
pasándole tres argumentos, el objeto LineString (puede ser otro tipo de
elemento geométrico), y dos parámetros opcionales: atributos, en nuestro caso,
los hemos puesto como NULL y estilo para indicar el color, grueso, etc de la
línea.
3.7.4. Archivo Conectarse.php:
Se trata del archivo que nos permitirá crear la conexión con nuestra base de datos, el cual
se ha creado independiente ya que, más tarde, lo incluiremos en diferentes archivos.
La función que incluye, la cual conecta con la base de datos, está formada por la
inicialización de cuatro parámetros:
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 contraseña ya que lo crea sin ella.
54
o Password: contraseña del usuario.
A continuación, con la función “mysql_connect” abriremos una conexión al servidor
MySQL, pasándole por parámetros las variables: host, usuario y password, está nos
devolverá un identificador de conexión, o false en caso de error.
Por último, mediante la función “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 conexión realizada en
el paso anterior mediante “mysql_connect”.
Ejecutando esta función 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
función u otra dependiendo del parámetro recibido mediante POST. Con el método POST
se realiza una transacción mediante el protocolo HTTP. Se utiliza para aplicaciones que
modifican la base de datos de destino.
Se trata del punto intermedio entre la interfaz gráfica y la base de datos, hemos utilizado el
lenguaje SQL, lenguaje PHP y el formato de intercambio de datos JSON.
A través de las diferentes opciones del switch se realizan cuatro acciones básicas:
1. SELECT, consultar datos:
- Listar tabla de tipos de dispositivos y dispositivos: Se realiza mediante la acción
SELECT, posteriormente guardamos los datos obtenidos de la consulta de cada
tabla en una array, mediante “mysql_fetch_array”.
- A continuación tenemos el caso para listar el historial de la información
recibida de cada dispositivo. También utilizaremos SELECT añadiéndole la
condición “WHERE telefono = '.$_REQUEST['id'].'” De esta
forma únicamente visualizaremos las filas en las que el campo teléfono sea
igual al parámetro recibido mediante POST. Por último, haremos que las filas
nos aparezcan ordenadas según los campos fecha y hora: “ORDER BY fecha
DESC, hora DESC'”, del más reciente al más antiguo.
- Para rellenar los formularios, que se encargan de modificar los tipos de
dispositivos y los dispositivos, lo hacemos con SELECT y la condición
WHERE. Seleccionamos la fila que contiene la información correspondiente a el
55
elemento a modificar, del cual sabremos el id o teléfono que nos habrán enviado
mediante POST.
- En el caso “Markers” seleccionamos la información necesaria de la tabla del
historial (es decir, teléfono, longitud y latitud) y de la tabla dispositivos
(teléfono, 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 información en nuestra aplicación. Por lo tanto para pasarla del
servidor al navegador se envía en formato JSON, con la función
“json_encode(„información 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 indicándole en que tabla se debe guardar y pasándole los
valores que queremos almacenar, serán los valores que haya introducido el
usuario en los formularios.
3. UPDATE, actualizar datos:
- Con la acción UPDATE más la condición WHERE, modificaremos los campos
correspondientes a la fila que tenga el id igual al valor pasado en la condición
WHERE.
4. DELETE, eliminar datos:
- Por último, para eliminar dispositivo o tipos de dispositivos utilizaremos
DELETE más la condición WHERE para indicar que fila queremos eliminar. Se
debe tener en cuenta que cuando se elimine un dispositivo también se eliminará
toda la información 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 través de SELECT a la tabla tipos de
dispositivos, ya que esta es la que contiene todos los “nodos padre”, es decir, serán los
nodos de los cuales colgarán 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 función que consultará la tabla de
56
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 Código 15. que muestra un ejemplo de lo que retorna la
función, y en la Figura 32. El resultado visual que conseguiríamos en la aplicación.
[{"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 }]
}]
Código 15. Ejemplo código JSON.
57
Figura 32. Árbol que obtenemos a partir del Código 3.
3.7.7. Simulación de la Recepción de Datos Vía SMS:
Para poder hacer uso de la aplicación de forma más real posible, hemos creado una página
HTML independiente, la cual simula la recepción de datos mediante GET, es decir puede
recibir la información a través 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 Código 16., se trata de una url que contiene toda la información,
permitiendo que se guarden las variables deseadas automáticamente en la base de datos.
http://localhost/sms.php?telefono=619202020&fecha=2009-08-
22&hora=13:30&latitud=-1.98765&longitud=40.65478
Código 16. Información que se introduce en la url.
3.8. Evaluación: Juego de Pruebas:
En este apartado pondremos en práctica todas las funciones de la aplicación. La pantalla
inicial la vimos en la Figura 17., lo primero que haremos será crear un tipo de dispositivo,
para eso seleccionaremos la pestaña TIPOS DE DISPOSITIVOS.
3.8.1. Crear un Tipo de Dispositivo:
Figura 33. Seleccionamos el botón Nuevo Tipo de Dispositivo.
58
(Ver Figura 33.)Vemos que simplemente pasando el ratón por encima del botón, se marca,
y además nos aparece un mensaje informativo o tooltip. Le damos al botón 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 botón guardar nos aparece un mensaje confirmando que se ha grabado
correctamente. (Ver Figura 35.) Además vemos que aparece el nuevo tipo en el GridPanel
y en el árbol de dispositivos.
Figura 35. Confirmación de que se ha grabado el tipo de dispositivo.
59
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 continuación volveremos a crear un tipo de dispositivo pero esta vez introduciremos
algún dato erróneo, por ejemplo: dejar algún campo, de los que son obligatorios rellenar,
en blanco, como puede ser el número máximo de dispositivos (Ver Figura 37.); o
introducir un nombre que tenga más 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 máximo.
60
Figura 39. Como hemos introducido un ID repetido cuando le damos al botón 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 botón “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
información correspondiente al elemento seleccionado.
61
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 aplicación (GridPanel y TreePanel) y en la base de datos.
Figura 42. En la parte superior vemos los cambios que se han hecho en la aplicación. En la parte inferior la
base de datos.
3.8.3. Crear un Dispositivo:
Ahora nos iremos a la pestaña 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 botón Guardar. Vemos que en el menú desplegable donde
debemos indicar el Tipo de Dispositivo nos sale el que hemos creado previamente.
62
Figura 43. Formulario para crear Dispositivo.
Igual que en el caso de Crear Nuevo Tipo de Dispositivo, los campos también muestran
mensajes de advertencia si son incorrectos o si el “Teléfono” introducido ya existe. De la
misma forma, cuando se graba correctamente, el sistema también 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 aplicación, 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 Número de Dispositivos Actuales (Ver Figura 45.).
63
Figura 45. El campo Num. Disp. Actuales se ha actualizado.
Este campo también se ha actualizado en la base de datos (Ver Figura 46.).
Figura 46. El campo “número de dispositivos actuales” también se ha actualizado en la base de datos.
Para ver que verdaderamente tienen utilidad las variables que indican el máximo número
de elementos que puede tener un Tipo de dispositivo y la que indica cuantos tenemos
actualmente, vamos a crear 2 dispositivos más dentro de la categoría “Camiones”. A
continuación intentaremos crear un cuarto dispositivo. El resultado es el que podemos ver
en la Figura 47. no nos permite guardarlo ya que superamos el límite.
Figura 47. Cuando intentamos guardar el cuarto dispositivo de la clase Camiones, no nos deja ya que
hemos superado el número máximo de dispositivos para esta clase.
A continuación crearemos otro tipo de dispositivo y algún dispositivo perteneciente a este,
para ver que se muestran correctamente en el árbol de dispositivos y en las tablas (Ver
Figura 48.).
64
Figura 48. Vemos que en el GridPanel los dispositivos se clasifican según el Tipo, y que en el árbol se
visualizan correctamente.
En el caso de los dispositivos también es posible modificarlos, no pondremos ningún
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. Simulación Recepción de Datos:
Una vez tenemos Dispositivos para localizar necesitamos recibir los datos de donde se
encuentran, utilizaremos una página HTML (Ver Figura. 49).
Figura 49. Página que simula la entrada de información.
65
Tenemos dos opciones: introducir la información mediante el formulario o introducirla
mediante la url con el formato mostrado en el Código 17.
Introduciremos en la url de nuestro navegador el siguiente código:
http://localhost/sms.php?telefono=600606060&fecha=2011-05-
15&hora=13:30&latitud=41.11866&longitud=1.24533
Código 17. Código que introduciremos en la URL.
Figura 50. Vemos que la información 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 información de algún dispositivo, vamos a comprobar
que dándole al botón Historial, que tenemos en la pestaña de los Dispositivos, vemos la
información que nos ha llegado (Ver Figura 51.). Seleccionamos un elemento y a
continuación le damos a Historial.
Figura 51. Historial del dispositivo C1.
66
3.8.6. Visualizar la Última Posición de un Dispositivo:
Marcaremos en el TreePanel “Posición” aquellos dispositivos de los cuales queramos ver
su última posición. Si el dispositivo no tiene información el checkbox no se activará. (Ver
Figura 52.)
Figura 52. Vemos como los dispositivos que están marcados en el treepanel, se puede ver donde están
situados en el mapa.
3.8.7. Visualizar el Recorrido de un Dispositivo:
Igual que para ver la última posición, 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.
67
Cada vértice de la línea roja que vemos en la Figura 53. Es un punto desde donde se nos
ha enviado información.
3.8.8. Eliminar Tipo de Dispositivo:
Comprobaremos que cuando se elimine un tipo de dispositivo, se eliminen también los
dispositivos que lo forman y la información del historial de cada dispositivo.
Siempre que se seleccione la opción eliminar se nos pedirá que confirmemos que estamos
seguros que queremos hacer está acción (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 información 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 también nos pide confirmar la acción. Una vez borrado
también nos informará de que se ha borrado correctamente.
68
3.9. Recursos utilizados:
3.9.1. Requisitos hardware y software:
Para la construcción del sistema se ha trabajado en un equipo informático (ordenador
portátil Sony Vaio) con las siguientes características técnicas:
Intel Core 2 Duo T7500 2.20 GHz
2GB de memoria RAM
Disco duro 200GB Serial ATA 5400 rpm
Tarjeta gráfica NVIDIA GeForce 8600M GS
Pantalla: 15.4 pulgadas, Resolución: 1280x800 pixeles
También ha sido necesario disponer de una conexión Internet que ha posibilitado la
consulta de las distintas referencias bibliográficas, también es necesaria para acceder al
servicio Google Maps y poder visualizar sus mapas, por último accedemos a la librería
OpenLayers mediante una url, por lo tanto es necesario tener conexión.
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 instalación automática que nos
permite alojar y servir nuestras páginas web desde nuestra máquina. Además también
guardará las bases de datos necesarias. En concreto hemos utilizado la versión 1.7.3.
Figura 56. Logotipo paquete Xampp.
Por último, hemos utilizado el editor de texto Crimson Editor para la codificación de los
ficheros de la aplicación.
Los usuarios que quieran hacer uso de la aplicación deben tener como mínimo un
ordenador personal que disponga de navegador Web y conexión a Internet. Aunque la
aplicación 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 más utilizado durante la creación de la aplicación.
69
4. APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL
ALUMNO:
De forma general, en un principio me ha aportado conocimientos sobre las tecnologías
GIS. Las cuales están más presentes, de lo que nosotros creemos, en el día a día. Ya que un
usuario de Internet utiliza Google Maps o aplicaciones similares, pero no se hace a la idea
de la repercusión que estas tienen y de las infinitas posibilidades que nos pueden ofrecer
para gestionar información en muchos ámbitos.
Se trata de un tema que está en plena fase de explotación, son utilizados tanto en la
administración pública, en áreas como la gestión de recursos naturales, de patrimonio,
urbanismo, medio ambiente, tráfico urbano, control de carreteras y señalizaciones, etc.
Además de que existe una importante normativa europea que obliga a los estados
miembros a poner esta información accesible al ciudadano. Como en la empresa privada,
en temas como la planificación de campañas de marketing, el seguimiento de la fuerza de
ventas, logística, etc.
Por otra parte, me ha aportado experiencia en lenguajes de programación como JavaScript,
PHP, MySQL, tecnologías como AJAX, OpenLayers, ExtJS, algunos de ellos los
desconocía o únicamente tenía nociones básicas.
Actualmente, he alcanzado conocimientos para poder crear una aplicación web con una
buena interfaz de usuario mediante JavaScript (en este caso ExtJS y GeoExt),
relacionándola con información almacenada en una base de datos (MySQL), con la
posibilidad de gestionar su información, ya sea guardando, borrando o actualizándola,
mediante AJAX y PHP. Conocimientos básicos que se pueden poner en práctica en
cualquier tipo de aplicación, en general aplicaciones RIA, y no únicamente a sistemas SIG.
Además, 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
aplicación.
En definitiva, creo que ha sido una buena introducción al mundo de la programación de
aplicaciones web.
70
5. APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO:
En Telemática hemos desarrollado diferentes prácticas y proyectos programando en
distintos lenguajes. Aunque la programación es un campo más enfocado a informática
hemos obtenido la base suficiente para poder crear aplicaciones como la de este proyecto.
Si pensamos en las asignaturas que tienen más conocimientos relacionados con el proyecto
las primeras que debemos considerar es Fundamentos de programación I y II. En las cuáles
estudiamos y pusimos en práctica la programación en lenguaje Java.
En “Fonaments de Programació I”, entre otras cosas diseñamos algoritmos para la
resolución de problemas simples, estudiando la sintaxis y semántica de las instrucciones y
expresiones del lenguaje. Empezamos a conocer los tipos básicos de datos, vectores, tablas,
etc. Y algoritmos básicos de programación estructurada, como pueden ser los algoritmos
de búsqueda, recorrido y ordenación. Además de comprender el proceso de compilación.
En “Fonaments de Programació II”, se presentó la programación orientada a objetos para el
desarrollo de aplicaciones. Se diseñaron programas escogiendo la opción más ó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 común a Java es la
programación orientada a objetos.
Por otra parte en la asignatura “Xarxes i Serveis” se llevó a cabo la realización de una
aplicación 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, también hicimos uso del paquete Xampp. Para acceder al servidor y a la
información, como ya hemos dicho, se hizo mediante PHP y lenguaje SQL. Por lo tanto,
antes de realizar este proyecto tenía algunos conocimientos sobre estas tecnologías, 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 representación de la
información16, que habla sobre el modelo raster y el modelo vectorial está relacionado con
parte del temario visto en la optativa de “Transmissió Multimèdia” en la cual se habla
sobre la representación de imágenes.
En conclusión, con los conocimientos adquiridos de los estudios realizados y el
autoaprendizaje diario a partir de los errores y problemas encontrados durante la
programación he podido realizar este proyecto formado por diferentes tecnologías.
16
Ver capítulo 3.4.3. Representación de la información
71
6. CONCLUSIONES Y LÍNEAS FUTURAS:
Conclusiones:
Llegados a este punto podemos decir que se han cumplido los objetivos del proyecto. La
idea básica de este era la de realizar una aplicación que permitiera situar dispositivos
remotos en un mapa.
A medida que hemos ido avanzando se han ido implementando las funciones deseadas, la
aplicación permite registrar tipos de dispositivos y dispositivos, también incluye la opción
de modificarlos o eliminarlos guardándose toda la información en la base de datos.
Se crean los objetos necesarios para representar los elementos en el mapa, los cuales se
sitúan en la posición correcta, dependiendo de la información recibida. El aplicativo
permite situar la última posición del elemento o ver sus últimos movimientos gracias al
objeto LineString.
Parte de la aplicación se ha desarrollado en JavaScript, mediante ExtJS y OpenLayers.
ExtJS ha facilitado crear una interfaz clara e intuitiva para el usuario. OpenLayers, una
librería totalmente libre, que en un futuro nos permitirá añadir mapas propios y más
funciones a la aplicación. El resto se ha programado en PHP utilizando bases de datos
MySQL.
Líneas Futuras de Trabajo:
Como líneas futuras consideraremos aquellos aspectos que podemos mejorar en la
aplicación, también debemos tener en cuenta que depende de la finalidad exacta de ésta, ya
que no sabemos el número de dispositivos que se quieren utilizar, aunque la idea inicial es
que no será un número muy elevado. En el caso de tener más elementos a localizar, se
podrían añadir mejoras como:
- Crear un filtro buscador en cada Gridpanel y en los Treepanel para poder
localizar fácilmente el dispositivo deseado.
- Si además la aplicación es utilizada por varios usuarios crear sesiones, para que
cada uno de los clientes tenga la opción de eliminar, crear o modificar los
dispositivos sin afectar al resto de usuarios, esto supondría una modificación i/o
ampliación importante en la base de datos.
Estudiar más a fondo y poner en práctica el sistema para recibir la información desde los
dispositivos remotos. Implementar un servicio de actualización de posiciones. Aunque
Aiddea Linux propuso que se recibieran las posiciones vía SMS, considero que se podrían
buscar alternativas más viables como por ejemplo vía internet.
Como dijimos en el apartado 2 del proyecto, Aiddea Linux quiere que la aplicación se
pueda adaptar a distintas situaciones, por lo tanto, se podrán añadir más funcionalidades
72
según la finalidad. También depende de cómo se comercialice la aplicación.
Consideraremos dos opciones:
- El cliente final únicamente accede al aplicativo web, es decir, en este caso
Aiddea Linux debería 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 continuación listamos diferentes aspectos que se podrían ampliar o mejorar en la
aplicación actual:
- Carga de imágenes (iconos) mediante los formularios.
- Añadir 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 estén guardados en nuestro servidor sin necesidad de
descargarlos de Internet continuamente.
En conclusión, 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.
73
REFERENCIAS:
SIG:
[1] http://www.mapaeducativo.edu.ar/encontrar/?a=qsig [Definición SIG] Abril 2011
[2] http://recursos.gabrielortiz.com/index.asp?Info=012 [Definición SIG y Tipos de representar la información] Abril
2011
[3] http://es.wikipedia.org/wiki/Sistema_de_Información_Geográfica [SIG] Abril 2011
[4] http://www.monografias.com/trabajos14/informageogra/informageogra.shtml#com [SIG] Abril 2011
[5] http://www.procoopsrl.com.ar/sistgis.htm [Definición SIG y sus componentes] Abril 2011
[6]http://www.iea.es/_docum/SIG2.PDF?IEA=e1cdcf4caac2168d092b113e58c38c3b&IEA=bb087d0367fd4c516595ce17
d07b888e [Ejemplos SIG, normalización de la información] 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 [Sistema de
coordenadas] Abril 2011
[14] http://googleware.blogspot.com/2008/01/cmo-funciona-google-maps.html [Sistema de coordenadas y proyección de
Mercator] Abril 2011
[15] http://es.wikipedia.org/wiki/Proyecci%C3%B3n_cartogr%C3%A1fica [Proyección cartográfica] Abril 2011
OGC:
[16] http://www.opengeospatial.org/ogc [Página 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 España] abril 2011
OPENLAYERS:
[20] Erik Hazzard, OpenLayers 2.10 Beginer‟s Guide, Ed. Packt Publishing, 2011.
[21] http://openlayers.org/ [Página oficial OpenLayers] Abril 2011
74
[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 [Definición] 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 móviles] Abril 2011
[27] http://blog.sonxurxo.com/2011/03/29/tutorial-de-openlayers-i-introduccion/ [Tutorial OpenLayers] Abril 2011
EXT JS:
[28] José López 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 móviles] Abril 2011
[36] http://www.geoext.org/ [Página oficial GeoExt] Abril 2011
[37] http://www.geoext.org/examples.html#examples [Ejemplos GeoExt] Abril 2011
MYSQL, PHP, SQL y PHPMYADMIN:
[38] Jacobo Pavón Puertas, Creación de un portal con PHP y MySQL, Ed. Ra-Ma, 2006.
[39] http://es.wikipedia.org/wiki/PhpMyAdmin [Definición phpMyAdmin] Mayo 2011
[40] http://es.wikipedia.org/wiki/Base_de_datos_relacional [Definición 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 [Definición AJAX] Mayo 2011
75
[50] http://es.wikipedia.org/wiki/XML [Definición XML] Mayo 2011
[51] http://es.wikipedia.org/wiki/JSON [Definición JSON] Mayo 2011
![Extracció basada en ontologies d'informació de ...deim.urv.cat/~itaka/itaka2/PDF/acabats/cvicient-pfc.pdfWeb Semàntica o Web 3.0 [1], que intenta afegir coneixement semàntic a](https://static.fdocumento.com/doc/165x107/60252481d41cc23dab5ff046/extracci-basada-en-ontologies-dinformaci-de-deimurvcatitakaitaka2pdfacabatscvicient-pfcpdf.jpg)
