Departament dEnginyeria Informtica i Matemtiques

Creacin de una aplicacin SIG con

OpenLayers, ExtJS y MySQL

TITULACIN: Ingeniera Tcnica en Telecomunicaciones, especialidad Telemtica

AUTOR: Marina Carrillo Baena

DIRECTOR: Maria Ferr
PONENTE: Joaqun Lpez

FECHA: Junio 2011

NDICE

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

2. UBICACIN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L ..................... 6
3. DESCRIPCIN DE LA TAREA REALIZADA ................................................................... 7
3.1. Introduccin...................................................................................................................... 8
3.2. Objetivos del Proyecto ..................................................................................................... 9
3.3. Especificaciones del Proyecto ........................................................................................ 10
3.4. Sistema de Informacin Geogrfica (SIG) ................................................................... 11
3.4.1. Definicin y Elementos Principales ........................................................................ 11
3.4.2. Cartografa............................................................................................................... 13
3.4.2.1. Definicin ........................................................................................................ 13
3.4.2.2. Sistema de Coordenadas ................................................................................ 13
3.4.2.3. Proyecciones .................................................................................................... 14
3.4.3. Representacin de la Informacin.......................................................................... 15
3.4.3.1. Modelo Raster ................................................................................................. 15
3.4.3.2. Modelo Vectorial ............................................................................................ 16
3.4.3.3. Comparacin 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. Diseo 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. Gestin de la informacin: 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

2
 3.6.3.3.1. Tabla Tipos de dispositivos ........................................................................... 27
3.6.3.3.2. Tabla Dispositivos ......................................................................................... 29
3.6.3.3.3. Tabla Historial ............................................................................................... 30
3.6.4. AJAX ........................................................................................................................ 32
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. Comparacin 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. Diseo 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 Configuracin 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. Simulacin de la Recepcin de Datos Va SMS ..................................................... 57
3.8. Evaluacin: 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. Simulacin Recepcin de Datos .............................................................................. 64
3.8.5. Visualizar Historial de un Dispositivo .................................................................... 65
3.8.6. Visualizar la ltima Posicin 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

3
4. APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL ALUMNO ... 69
5. APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO.................... 70
6. CONCLUSIONES Y LNEAS FUTURAS .......................................................................... 71
REFERENCIAS ............................................................................................................................. 73

4
1. DESCRIPCIN DE LA EMPRESA: AIDDEA LINUX, S.L:
Este proyecto se llevar a cabo para la empresa Aiddea Linux, S.L, representada por
Joaqun Lpez, y situada en: Cam de Valls, n 81-87, despacho 61, Reus.

Aiddea Linux es una empresa de diseo de ingeniera electrnica especializada en

electrnica embedded, RFID, comunicaciones. Dentro de estos campos tiene como
objetivo la investigacin, fabricacin y ensamblaje de productos y otros componentes
auxiliares.

Ofrece servicios tanto en el campo de la electrnica como de las TIC. Por la parte
electrnica, como ya hemos comentado, desarrolla diseos electrnicos a medida desde el
concepto inicial hasta la entrega de prototipos funcionales para integrar en el cliente final.
Por la parte TIC, Aiddea crea aplicaciones a medida del cliente, tanto sobre Windows
como sobre Linux.

A continuacin listamos algunas de las tecnologas con las que trabajan:

- Automatizacin y robtica.

- Bases de datos.

- Equipamiento domstico y domtica.

- Equipamiento y dispositivos electrnicos.

- Gestin de inventarios.

- Gestin documental.

- Hardware informtico.

- Integracin de sistemas.

- Marketing y promocin digital.

- Programario libre.

- Sistemas wireless.

- Software a medida.

En http://www.aiddea.com/ podemos encontrar la oferta completa de servicios y soluciones

de Aiddea.

Por ltimo comentar que tambin cuenta con un portal de venda on-line,
http://www.aidealo.com , de productos electrnicos.

5
2. UBICACIN DEL PROYECTANTE DENTRO DE AIDDEA
LINUX, S.L:
El acuerdo entre Aiddea Linux, S.L, y Marina Carrillo fue el de realizar un aplicativo web
para la gestin de dispositivos remotos. En concreto, un Sistema de Informacin
Geogrfica, es decir, un sistema que nos permitir tener localizados diferentes elementos,
en un mapa, podemos resumirlo en la palabra Geolocalizacin, trmino nuevo, y muy
presente actualmente debido al auge de este tipo de tecnologas, que hace referencia a
conocer la ubicacin geogrfica, de un dispositivo determinado.

Como requisitos tcnicos el programa debe estar programado en JavaScript y PHP.

Por otra parte, Aiddea Linux quiere que la aplicacin pueda ser utilizada en distintas
situaciones, por lo tanto se har de forma que se pueda adaptar a diferentes tipos de
elementos a localizar, aunque la idea actual se basa en tener localizados a un nmero
determinado de animales, se pretende adaptarla en un futuro a otro tipo de demandas.

Otro requisito deseado es que la interfaz debe ser minimalista e intuitiva, al usuario le debe
resultar fcil navegar por la pgina y acceder a las funcionalidades que quiera de forma
sencilla.

Para realizar el proyecto, durante los meses de trabajo hemos ido realizando reuniones, o
nos hemos puesto en contacto va correo electrnico, para ir acordando los requisitos de la
aplicacin, tales como: definir las funciones deseadas y necesarias para el proyecto,
comprobar y revisar el trabajo realizado, comentar dudas, y en resumen, ir definiendo
correctamente el diseo y desarrollo del aplicativo.

A continuacin, en el apartado 3, se explicar en profundidad la tarea realizada.

6
3. DESCRIPCIN DE LA TAREA REALIZADA:
Este apartado es la parte fundamental del proyecto. Constar de los siguientes apartados:

- Introduccin: Haremos una introduccin general sobre la tarea a realizar,

aportando ejemplos actuales que nos ayudaran a ir decidiendo como plantearemos
nuestra aplicacin.

- Objetivos: Se trata de las metas globales del proyecto, es decir, hacer un esquema
de todo aquello que necesitamos estudiar previamente para realizar la aplicacin, y
todas las funciones y caractersticas que debe tener el caso prctico final.

- Especificaciones del proyecto: En otras palabras podramos decir que es el

enunciado completo de la aplicacin, los requisitos principales que ha puesto
Aiddea Linux, S.L.

- Conceptos bsicos: En el cual nos centraremos en dos temas principales, los

Sistemas de Informacin Geogrfica (SIG), en el cual se incluye la explicacin de
este tipo de sistemas y conceptos bsicos de cartografa, y el Open Geospatial
Consortium (OGC). Se trata de situarnos en el tema, as, a la hora de realizar el
proyecto prctico comprenderemos mejor ciertas funciones y decisiones.

- Diseo: Se explican detalladamente las tecnologas utilizadas, entre ellas

OpenLayers, para la gestin del mapa, Ext JS, para la interfaz y MySQL, para el
almacenamiento de los datos, exponiendo las ventajas de cada una de ellas.

- Desarrollo: Se har una descripcin de la estructura de la aplicacin, es decir, los

archivos que la forman y las funciones principales de cada uno de ellos.

- Evaluacin: Juego de pruebas: En este apartado haremos funcionar la aplicacin,

para comprobar que todo funciona de acuerdo a los objetivos y especificaciones.

- Recursos utilizados: Se expondr el software y hardware utilizados para el

desarrollo del proyecto, y para que la aplicacin funcione correctamente.

7
 3.1. Introduccin:
La Geolocalizacin es una de las manifestaciones ms populares del desarrollo actual de
las Tecnologas de la Informacin y las Comunicaciones (TIC), y que est experimentando
un auge relevante en los ltimos tiempos.

Hay diferentes formas de saber la ubicacin de un elemento fsico, pero ltimamente con la
evolucin de la telefona mvil, podemos ubicarnos en cualquier punto del mundo, ya sea
mediante receptores GPS, redes WI-FI inalmbricas, o las propias redes de telefona mvil,
a esto le aadimos el desarrollo de la banda ancha mvil que permite la conexin
permanente a internet de los llamados telfonos inteligentes (smartphones).

El uso prctico de este tipo de tecnologas es muy variado, desde el uso en redes sociales
como Facebook, como puede ser Facebook Places, aplicacin que te proporciona
informacin sobre restaurantes, tiendas, opiniones de los diferentes lugares, etc, hasta
utilidades como trazado de rutas, senderismo... Pero no slo estn ideadas para el ocio, en
el campo empresarial y profesional tambin tienen utilidades muy importantes, como por
ejemplo sistemas que utilizan algunas compaas de seguros para la localizacin de
vehculos robados o siniestrados, etc.

En el proyecto que nos ocupa crearemos la aplicacin con la que visualizaremos la

informacin recibida en el mapa. Para entender mejor el funcionamiento general, a
continuacin explicaremos los elementos bsicos de este tipo de sistemas, en nuestro caso
estar formado por tres elementos (Vase Figura 1.):

- Equipos de localizacin: Elemento que llevar cada dispositivo que queremos

tener posicionado, ser el emisor de la posicin y por lo tanto estar compuesto por
un receptor de GPS1 y una tarjeta SIM con la cual se enviarn los SMS al servidor,
tambin se puede obtener la posicin mediante la localizacin GSM2 a travs de la
SIM, pero es un mtodo menos preciso que mediante GPS.

- Servidor: Computadora que gestiona la comunicacin entre los equipos de

localizacin y la aplicacin web. Es donde se almacena toda la informacin
recibida de los dispositivos remotos, de forma que cuando el usuario la solicite
mediante la web, se pueda mostrar.

- Aplicativo Web: Ser el paso final, la web donde el usuario podr visualizar la
informacin deseada, y ver todos los dispositivos registrados. Ser la tarea principal
que se desarrollar en este proyecto.

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

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

3.2. Objetivos del Proyecto:

En este apartado se define como es el proyecto a realizar, as como las funciones y
posibilidades que se esperan de l, es decir, lo que se pretende conseguir.

El proyecto tiene como finalidad principal el diseo y desarrollo de una aplicacin web, en
la cual se representa un mapa con la informacin espacial recibida de unos determinados
dispositivos (elementos mviles). Para poder adentrarnos en las caractersticas y
funcionamiento deseado, primero es conveniente hacer un estudio general de este tipo de
tecnologas, por lo tanto, a priori, tendremos una serie de objetivos iniciales, de carcter
ms terico, tales como:

Conocer que es un SIG (Sistema de Informacin Geogrfica), as como conceptos

generales relacionados con la cartografa, como coordenadas, proyecciones, etc.

Comprender los estndares ms extendidos del OGC (Open Geospatial

Consortium).

Hacer un estudio sobre el framework OpenLayers, valorando sus capacidades para

obtener los resultados deseados y las posibles futuras ampliaciones o
modificaciones de la aplicacin.

Crear la base de datos necesaria mediante MySQL, para poder gestionar la

informacin recibida de forma eficiente.

9
 Elegir un framework Javascript adecuado para la creacin del portal, en este caso
EXT JS.

Trabajar con los objetos y funciones de OpenLayers para, posteriormente,

implementar un visor con OpenLayers y mostrar las diferentes rutas y posiciones.

Una vez situados en el tema, definiremos los objetivos bsicos del funcionamiento de la
aplicacin. Debido a que est ideada para poderla adaptar a diferentes situaciones
temticas, es decir, no sabemos qu tipos de elementos (por ejemplo: coches, animales,
etc) sern los que queramos posicionar, siempre hablaremos de dispositivos en general:

Recibir y almacenar la informacin de cada dispositivo.

Tener la posibilidad de crear, eliminar y modificar dispositivos.

Mostrar en el mapa la ltima posicin recibida de cada uno de los dispositivos.

Visualizar la ruta seguida por un elemento a partir de los diferentes datos

espaciales recibidos.

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

3.3. Especificaciones del Proyecto:

El proyecto trata de desarrollar una aplicacin Web capaz de gestionar y monitorizar una
serie de dispositivos wireless. En un principio la aplicacin est ideada para cualquier tipo
de dispositivo a localizar, ya que se pretende que pueda ser utilizada en distintas
situaciones, aunque como ejemplo e idea principal ser utilizada para localizar un nmero
determinado de animales en un terreno. Por lo tanto no habr un nmero elevado de
elementos, sobre unos 100 aproximadamente. Los dispositivos podrn ser agrupados en
clases, es decir, tipos de dispositivos.

La aplicacin constar de varias partes diferenciadas para facilitar la gestin de la

informacin recibida, como mnimo con las siguientes:

- Pantalla de visualizacin del mapa, en la cual se mostrar, cuando el usuario lo

indique, la ltima posicin de un elemento en concreto o la ruta que ha seguido
a partir de todos los datos que hayamos recibido.
- rbol: Deberemos tener un panel que tenga un rbol con todos los dispositivos
registrados, para marcar cuales queremos visualizar en el mapa.
- Pantalla con la lista de tipos de dispositivos y sus caractersticas (id, nombre,
icono, nmero mximo de dispositivos que admite, nmero de dispositivos que

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

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

3.4. Sistema de Informacin Geogrfica (SIG):

3.4.1. Definicin y Elementos Principales:

El trmino SIG procede del acrnimo de Sistema de Informacin Geogrfica (en ingls
GIS, Geographic Information System). Como definicin general podramos decir que se
trata de sistemas que permiten integrar y analizar informacin geogrfica, los cuales
proporcionan herramientas al usuario para editar, analizar e incluso visualizar los datos
obtenidos en un mapa.

De manera ms tcnica aadiramos que estn formados por equipos electrnicos

(hardware), que estn programados adecuadamente (software) para permitir el manejo de
una serie de datos espaciales (informacin geogrfica) y realizar anlisis complejos de
stos, siguiendo los criterios impuestos por el equipo cientfico (equipo humano). Podemos
identificar fcilmente los elementos principales (Ver Figura 2.), cada uno de ellos realiza
su tarea para, en conjunto, obtener un SIG funcional:

- Hardware: Ordenador o grupo de ordenadores y perifricos de entrada y salida que

constituyen el soporte fsico del SIG.

11
- Software: Los programas SIG proveen las herramientas y funcionalidades
necesarias para almacenar, analizar y mostrar informacin geogrfica, los
componentes principales son:

o Sistemas para administrar bases de datos.

o Una interfaz grfica de usuarios para el fcil acceso a las herramientas.

o Herramientas para captura y gestin de la informacin.

o Herramientas para soporte de consultas, anlisis y visualizacin de los

datos espaciales.

Actualmente, con el mayor acceso a Internet y a la demanda de datos geogrficos

distribuidos, el software SIG ha cambiado gradualmente su perspectiva hacia la
distribucin de datos a travs de la red. Los SIG que en la actualidad se
comercializan son combinaciones de varias aplicaciones interoperables y APIs.

- Datos geogrficos: Es el componente ms importante. Pueden obtenerse por

recursos propios o a travs de proveedores de datos. A su vez es el elemento
diferenciador de un SIG frente a un Sistema de Informacin, ya que este tipo de
datos contiene dos vertientes: la espacial y la temtica. Para aclarar estos dos
conceptos pondremos un ejemplo. Si tenemos un SIG que nos muestra los niveles
de contaminacin en el agua, un lago tendr dos tipos de informacin: la que nos
indica sus magnitudes en el mapa y aspecto, la espacial, y la que nos muestra los
niveles de contaminacin, la temtica. Por lo tanto, el sistema tiene que trabajar con
cartografa y con bases de datos a la vez, de forma que al unirlo obtendremos una
base de datos geogrfica.

- Procedimientos: Para que un SIG tenga xito, este debe operar de acuerdo a un
plan bien diseado y estructurado y acorde a las reglas de la empresa, que son los
modelos de las actividades propias de cada organizacin.

- Equipo humano: Hay distintas formas de interactuar con este tipo de programas,
dependiendo del tipo de usuario:

o Usuario final el cual obtiene informacin del sistema.

o Tcnico o especialista que configura y define las herramientas a utilizar, los

datos, etc., dependiendo de la finalidad exacta del programa.

o Informticos, dependiendo de la magnitud del sistema, son los encargados

de su administracin.

12
 Figura 2. Elementos principales de un SIG.

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

3.4.2.1. Definicin:
La cartografa es la ciencia que se encarga del estudio y de la elaboracin de los mapas
geogrficos y territoriales, entre otros. A grandes rasgos, se trata de implementar una
representacin de la Tierra sobre una superficie plana llamada mapa. De manera simple, un
mapa es la representacin del mundo real reducido a puntos, lneas y polgonos mediante el
uso de smbolos grficos.

Debido a que la Tierra tiene una forma esfrica, se debe utilizar un sistema de
proyecciones para poder representar una superficie esfrica en una superficie plana. El
problema es que en realidad no es exactamente esfrica, su forma es ms achatada en los
polos que en la zona ecuatorial.

Adems de representar los contornos, las superficies y los ngulos, se ocupa de representar
la informacin sobre el mapa. Estas representaciones, actualmente se estn realizando con
los sistemas SIG, en los que se puede georeferenciar (dotar de coordenadas geogrficas
(longitud, latitud), ubicar en el espacio).

3.4.2.2. Sistema de Coordenadas:

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

13
calculan las coordenadas de cualquier punto, constituyen lo que se denomina sistema de
referencia.

Sistema de Coordenadas Geogrficas:

El sistema de coordenadas geogrfico est alineado con los ejes de rotacin de la Tierra.
Define dos ngulos desde el centro de la Tierra: latitud y longitud (Ver Figura 3.), que
explicamos a continuacin:

- Latitud: Mide el ngulo entre cualquier punto y el ecuador. Las lneas de latitud se
llaman paralelos y son crculos paralelos al Ecuador en la superficie de la tierra.

- Longitud: Mide el ngulo a lo largo del ecuador desde cualquier punto de la tierra.
Se acepta que Greenwich, en Londres, es la longitud cero. Las lneas de longitud
son crculos mximos que pasan por los polos y se llaman meridianos.

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

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

superficie de la Tierra.

3.4.2.3. Proyecciones:
Las proyecciones estudian las distintas formas de mostrar la superficie terrestre en un
plano. Un mapa, es una representacin en dos dimensiones, de un objeto tridimensional (la
Tierra), por lo tanto, cuando lo creamos, estamos perdiendo una dimensin, por este
motivo el plano obtenido no ser perfecto, habr una pequea distorsin.

Esto supone un problema ya que no hay forma de representar la esfera sobre una superficie
plana, sin que exista un error mnimo. Las proyecciones vienen a solventar este problema,
estudiando las distintas opciones para obtener la forma ms exacta posible en el mapa.

Existen diferentes tipos de proyecciones pero nos centraremos en la proyeccin Spherical

Mercator, que es de la que hablaremos durante el proyecto.

14
Proyeccin de Mercator:

Este tipo de proyeccin consiste en representar la superficie esfrica terrestre sobre una
superficie cilndrica, tangente al ecuador, que al desplegarse genera un mapa terrestre
plano.

Con otras palabras, diramos que se basa en el modelo ideal que trata a la Tierra como un
globo hinchable, el cual se introduce en un cilindro y empieza a inflarse ocupando el
volumen del cilindro e imprimiendo el mapa en su interior. Este cilindro cortado
longitudinalmente y ya desplegado sera el mapa (Ver Figura 4.).

Esta proyeccin presenta una buena aproximacin en su zona central, pero las zonas
superior e inferior correspondientes a norte y sur presentan grandes deformaciones.

Google Maps y Virtual Earth 2d, actualmente usan la proyeccin de Mercator. A pesar de
sus relativas distorsiones de escala, esta proyeccin est muy indicada para mapas
interactivos en que se hacen desplazamientos y acercamientos de regiones pequeas, donde
las formas se distorsionan relativamente poco.

Figura 4. Proyeccin Spherical Mercator.

3.4.3. Representacin de la Informacin:

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

3.4.3.1. Modelo Raster:

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

15
Como ya hemos dicho la imagen queda como una rejilla de celdas, por lo tanto la posicin
de cada una viene implcita segn el orden que ocupa en la malla, el espacio no es continuo
sino que se divide en unidades discretas.

Este tipo de estructuras puede implicar un incremento del espacio de almacenamiento, ya

que guardan cada celda de la matriz sin tener en cuenta si se trata de una entidad o
simplemente de un espacio vaco, informacin no significativa.

Para obtener una descripcin precisa de los objetos geogrficos contenidos en la base de
datos, el tamao del pxel ha de ser reducido (en funcin de la escala), lo que dotar a la
malla de una resolucin alta. Sin embargo, a mayor nmero de filas y columnas, ms
resolucin, pero tambin, mayor esfuerzo en el proceso de captura de la informacin y
mayor costo computacional a la hora de procesarla. Los datos raster se almacenan en
diferentes formatos, desde un archivo estndar basado en la estructura de TIFF, JPEG, etc.
a grandes objetos binarios.

3.4.3.2. Modelo Vectorial:

En este caso modelamos digitalmente las entidades del mundo real a partir de elementos
geomtricos. Para ello se utilizan vectores definidos por pares de coordenadas relativas a
algn sistema cartogrfico. Los principales componentes son:

- Punto o nodo: unidad bsica para representar entidades geogrficas que pueden
ser expresadas por un nico punto de referencia, en otras palabras, la simple
ubicacin.

- Lnea: a partir de dos puntos, como mnimo, formaremos las lneas. En este tipo
de elementos se puede medir la distancia.

- Polgono: en este caso a partir de lneas o agrupaciones de puntos crearemos

polgonos.

El inters de este tipo de representaciones se centra en la precisin de localizacin de los

elementos geogrficos sobre el espacio, donde los fenmenos a representar son discretos,
es decir, de lmites definidos.

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

3.4.3.3. Comparacin entre Modelo Raster y Vectorial:

Despus del estudio de los dos modelos, podemos observar que una de las diferencias
principales es la exactitud de representacin, es decir, el modelo raster, al contrario que el
vectorial, es especialmente til cuando tenemos que describir objetos geogrficos con
lmites difusos, como por ejemplo la dispersin de una nube de contaminantes, donde los
contornos no son absolutamente ntidos, normalmente con tratamiento de objetos
continuos. Por otro lado el modelo vectorial es ms exacto.

Otros aspectos a tener en cuenta es el coste computacional, en el caso raster se necesita

ms espacio de memoria, aunque la estructura de los datos es muy simple. En el caso
vectorial, slo se almacenan los datos digitalizados por lo tanto no necesita tanto espacio
de memoria, por el contrario la estructura de datos es ms compleja.

En algunos casos se podrn utilizar los dos modelos para cubrir las necesidades completas
de la aplicacin.

3.4.4. Actualidad y Ejemplos de Aplicaciones de un SIG:

En la actualidad es una herramienta muy utilizada en muchos mbitos, debido a que
permite elaborar cartografa temtica sobre cualquier aspecto ambiental y socioeconmico
de la superficie terrestre.

Aunque no nos demos cuenta, en nuestro da a da estn presentes en muchos mbitos. Por
ejemplo, las mercaderas que consumimos habitualmente son transportadas a travs de
vehculos monitoreados por sistemas satelitales, con los SIG se puede hacer un
seguimiento de todas las unidades de transporte para obtener datos como la ruta por la que

17
van, clculos de distancia hasta al punto de destino, ubicacin, distancia recorrida otra
muestra de la utilidad de estos programas la encontramos en las compaas elctricas, las
cuales pueden gestionar toda su red de servicios a travs de ellos, en el caso de una avera
podrn ver fcilmente toda el rea afectada, ayudando as a la pronta solucin del
problema.

En general, el mundo de la informacin a la vez que Internet ha experimentado una

evolucin muy importante en los ltimos aos. Gracias a esto, el mundo de los SIG ha
asistido a una explosin de aplicaciones destinadas a mostrar y editar cartografa en
entornos web, hoy da cualquier usuario que navegue por la red, por muy pocos
conocimientos que tenga sabr de la existencia, por ejemplo, de Google Maps.

Ms recientemente, estas aplicaciones tambin se estn extendiendo muy rpidamente a

terminales de telefona mvil y otros sistemas como tablets.
Este tipo de aplicaciones da acceso al pblico de enormes cantidades de datos geogrficos,
por esta razn es necesario establecer unos estndares, creados por la organizacin OGC3,
que facilitan la interoperabilidad de los datos espaciales.

Muchas disciplinas se han beneficiado de las tecnologas SIG. Esto ha producido una
reduccin de costes y mejoras en componentes de hardware y software de sistemas.
Adems, esta tecnologa ha sido asimilada por multitud de universidades e instituciones. A
continuacin nombramos algunas de ellas:

- La Infraestructura de Datos Espaciales de Espaa (IDEE) tiene como objetivo el

integrar a travs de Internet los datos, metadatos, servicios e informacin de tipo
geogrfico que se producen en Espaa, facilitando a todos los usuarios la
localizacin, identificacin, seleccin y acceso a tales recursos, a travs del
Geoportal de la IDEE (http://www.idee.es).

- A nivel europeo, existe el proyecto INSPIRE (Infrastructure for Spatial Information

in Europe), iniciativa de la Comisin Europea cuyo objetivo es la creacin de una
Infraestructura de Datos Espaciales en Europa.

- La Infraestructura de Dades Espacials de Catalunya es una plataforma para el

intercambio y cambio de la informacin geoespacial a travs de Internet, en la cual
participan todas las administraciones pblicas (entes locales, Generalitat, estado) y
tambin otras instituciones pblicas y privadas.

3 Ver apartado 3.5. Open Geospatial Consortium

18
A continuacin se muestran algunos ejemplos de SIG:

- Camino Jacobeo:

Ejemplo de SIG aplicado al mbito del Patrimonio Histrico-Artstico. Se trata de una

aplicacin que hace recorridos virtuales por las rutas del Camino de Santiago, adems
nos proporciona informacin sobre pueblos, alojamientos, restaurantes.

Figura 6. SIG Camino de Santiago [7]

- Geoportalbcn:

En el pasado saln GlobalGeo 2011 se present la actualizacin del Geoportalbcn. El

Geoportal es el punto de entrada a la Infraestructura de Datos Espaciales del
Ayuntamiento de Barcelona. El usuario puede interactuar con la aplicacin, calculando
distancias, buscando puntos en concreto de la ciudad, obteniendo informacin
cartogrfica, etc.

Figura 7. Geoportalbcn [8]

19
 - Ideclocal:

Se trata de una iniciativa de IDEC (Institut de Dades Espacials de Catalunya), el cual es

la base tcnica para la organizacin, promocin, explotacin y mantenimiento de las
infraestructuras de datos espaciales, con la finalidad de difundir geoinformacin y
servicios conexos, y que sean ms accesibles para asegurar el uso compartido.

Figura 8. IdecLocal [9]

3.5. Open Geospatial Consortium (OGC):

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

Figura 9. Logotipo OGC [16]

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

20
 3.5.1. Web Map Service (WMS):

Es un estndar OGC, que produce mapas de datos referenciados espacialmente, de forma

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

3.5.2. Web Feature Service (WFS):

Es un servicio estndar, que ofrece un interfaz de comunicacin que permite interactuar
con los mapas servidos por el estndar WMS, como por ejemplo, editar la imagen que nos
ofrece o analizarla siguiendo criterios geogrficos. Para realizar estas operaciones se utiliza
el lenguaje GML4 (Lenguaje de Marcado Geogrfico) que deriva del XML, que es el
estndar a travs del que se transmiten la ordenes WFS.

Los WFS pueden ser del tipo no transaccional o transaccional. La diferencia es que el
transaccional slo permite hacer consultas y recuperacin de elementos geogrficos, frente
al transaccional que permite adems la creacin, eliminacin y actualizacin de estos
elementos geogrficos del mapa.

3.6. Diseo del Proyecto:

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

Figura 10. Logotipo OpenLayers [21]

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

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

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

Figura 11. Client / Server Model [20]

- Web Map Client: Como ya hemos dicho, OpenLayers trabaja en el lado cliente.
Una de las principales tareas que el cliente realiza es conseguir imgenes de mapas
de un servidor. El cliente ir pidiendo al servidor de mapas aquello que quiere ver.
Cada vez que navega o hace zoom en el mapa, el cliente tiene que hacer nuevas
peticiones, ya que est solicitando cosas diferentes.
OpenLayers se encarga de manejar estas tareas a travs de Javascript asncrono
(AJAX5), llamadas a un servidor de mapas. OpenLayers une todas las imgenes que
recibe de forma que obtiene el mapa tal y como el usuario lo visualiza.

- Web Map Server: Este concepto ha sido explicado en el captulo anterior como un
estndar OGC, en este apartado lo veremos de una forma ms prctica. Un servidor
de mapas nos proporciona el propio mapa. Hay muchos servidores de este tipo, un
ejemplo son Google Maps, mapas de Yahoo, mapas OpenStreet, etc. El principio
bsico detrs de todos ellos es que permiten especificar el rea que queremos ver
(mediante el envo de una solicitud), una vez recibida la solicitud, el servidor se
encarga de enviar una respuesta que contiene la imagen. Con OpenLayers se
pueden utilizar diversos servidores incluso combinarlos.

OpenLayers no es un servidor de mapas, por lo tanto, el cliente deber tener acceso

a algn servidor de mapas, no se debe hacer nada, tan slo introducir la direccin
URL en OpenLayers. Mapas OpenStreet, Google, Yahoo, etc proporcionan acceso
a sus servidores de mapas (algunos de ellos son comerciales y es posible que le
apliquen restricciones en algunos de los servicios).

3.6.1.2. Por qu OpenLayers?

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

5 Ver apartado 3.6.4. AJAX

22
informacin espacial a travs de las aplicaciones propias de los creadores o proveedores de
datos geogrficos.

En resumen, nos permite elaborar nuestros mapas haciendo uso de su propia base de
informacin cartogrfica o usar su estructura para hacer uso de otros servicios.

Adems, si comparamos OpenLayers con otros frameworks con la misma finalidad, el

punto fuerte lo encontramos en que es un software gratuito, de cdigo abierto, de uso
totalmente libre bajo la licencia BSD6. Est desarrollado por y para la comunidad de
software libre ya que actualmente es un proyecto de la Open Source Geoespatial
Foundation (OSGeo). Adems, implementa mtodos estndar de la industria para el acceso
a los datos geogrficos, tales como el Open Geospatial Consortium: Web Map Service
(WMS) y Web Feature Service (WFS), explicados anteriormente.

A diferencia de otras APIs, como por ejemplo Google Maps, se trata de un paquete creado
por una comunidad open source. Esto puede resultar til para aquellos que no quieren
mostrar el logo de Google, ya que debido a la licencia de Google Maps no est permitido
ocultarlo.

3.6.2. Ext JS:

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

Figura 12. Logotipo Ext JS [32]

Antes de explicar ms caractersticas sobre ExtJS hablaremos sobre RIA, acrnimo de

Rich Internet Applications (Aplicaciones Ricas en Internet). Lo que RIA intenta proveer es
una experiencia de usuario muy parecida o igual a la que se tiene en las aplicaciones de
escritorio. Uno de los objetivos de ExtJS es crear este tipo de aplicativos.

Actualmente, es importante tener en cuenta el aspecto de las pantallas de los sistemas que
desarrollamos, ya que los consumidores son la parte ms importante en nuestras
aplicaciones. ExtJS nos ayuda a mejorar la interaccin con el usuario, pues nos
proporciona componentes con funcionalidades avanzadas y de sencilla implementacin. Se
trata de que resulten fciles de usar e intuitivas.

Volviendo a qu es ExtJS podemos hablar de sus orgenes, fue construida como una
extensin de la librera Yahoo! User Interface (YUI), gracias a su buena estructura

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

23
actualmente puede interactuar como extensin para las bibliotecas jQuery y Prototype.
Desde la versin 1.1 puede ejecutarse tambin como una aplicacin independiente, ya que
adems cuenta con su propia librera la cual se llama Ext-base, es la que se ha utilizado en
este proyecto.

Otro punto a tener en cuenta son las licencias, tiene tres tipos:

- Licencia comercial: esta licencia se debe comprar cuando necesitas desarrollar

software propietario.

- Licencia Opens Source: este tipo de licencia se aplica cuando se desea

desarrollar un proyecto Open Source, esto implica liberar el proyecto con
licencia GNU GPL V3.

- Licencia Revendedor: este tipo de licencia es necesaria adquirirla cuando se

desea realizar un framework o librera basada sobre Ext JS.

Para acabar de explicar y valorar este framework a continuacin se comentan las

principales ventajas e inconvenientes.

3.6.2.2. Ventajas e Inconvenientes de Ext JS:

Principales ventajas de ExtJS:

- AJAX7: Las aplicaciones web tradicionales tienen problemas como la recarga

continua de las pginas cada vez que el usuario pide nuevo contenido. ExtJS
permite la comunicacin con el servidor en segundo plano, sin la necesidad de
actualizar la pgina por completo. De esta forma se pueden solicitar o enviar
datos hacia o desde su servidor web utilizando AJAX, y procesar la informacin
recibida en tiempo real.

- Compatibilidad con los navegadores: Permite crear aplicaciones complejas

utilizando componentes predefinidos as como un manejador de layouts similar
al que provee Java Swing, gracias a esto provee una experiencia consistente
sobre cualquier navegador, evitando el tedioso problema de validar que el
cdigo escrito funcione bien en cada uno (Firefox, IE, etc.).

- Un modelo de componentes muy bien diseado: a parte del punto anterior

respecto a la compatibilidad con los navegadores, un ejemplo de que se trata de
unos componentes muy eficientes es la ventana viewport, la cual al moverla o
redimensionarla se adapta, es decir, se dibujan slo los bordes haciendo que el
movimiento sea fluido.

- Cuenta con distintos tipos de licencias, explicados anteriormente.

7 Ver apartado 3.6.4. Ajax

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

Figura 13. Logotipo GeoExt [36]

Principales desventajas de ExtJS:

- Javascript no es tan rpido como quisiramos, sin embargo con los nuevos
navegadores es un factor que puede mejorar.

- La librera tiene un tamao considerable, aunque se puede recortar para incluir

aquellas funcionalidades que en realidad se van a utilizar.

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

3.6.3. Gestin de la informacin: Base de datos:

La combinacin del lenguaje PHP junto con la base de datos MySQL es una combinacin
muy utilizada en un gran nmero de pginas web que podemos encontrar hoy en da
mientras navegamos por internet, debido a la potencia que se consigue utilizando estas dos
aplicaciones juntas.

A continuacin explicaremos cada una de ellas, y tambin haremos referencia a

phpMyAdmin herramienta que nos facilitar el trabajo con las bases de datos.

3.6.3.1. PHP:
PHP es un lenguaje de alto nivel embebido en pginas html que se ejecuta en el servidor,
por lo tanto no es necesario ser compilado, al contrario de otros lenguajes que son
ejecutados en el propio navegador.

Es un lenguaje multiplataforma, funciona bajo diferentes sistemas operativos. Una de las

ventajas que ofrece este tipo de lenguajes es que al ejecutarse en el servidor, todas nuestras
pginas van a poder ser vistas en cualquier ordenador, independientemente del navegador
que tenga.

25
La funcin principal que realizar PHP en el aplicativo web ser la de gestionar la
informacin de la base de datos que tenemos almacenada en el servidor. Otro punto fuerte
de PHP es que se trata de un lenguaje de programacin totalmente gratuito.

Cuando decimos que PHP es un lenguaje del lado del servidor significa que el usuario abre
la pgina html en su navegador y hace una peticin de interactuar. PHP instalado en dicho
servidor web interpreta o procesa el script, es decir, la peticin, y enva dicha respuesta al
usuario en forma de documento html. Esto es una breve explicacin del funcionamiento de
PHP que podemos ver grficamente en la Figura. 14.

Figura 14. Funcionamiento de PHP.

3.6.3.2. MySQL:

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

3.6.3.2.1. Lenguaje SQL:

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

26
Est compuesto por comandos, clusulas, operadores y funciones de agregado. Estos
elementos se combinan en las instrucciones para crear, actualizar y manipular las bases de
datos.

Por ltimo, decir que es un lenguaje estndar por haberse visto consolidado por el Instituto
Americano de Normas (ANSI) y por la Organizacin de Estndares Internacional (ISO).

Para el uso y manejo de la base de datos MySQL, vamos a emplear una aplicacin muy
usual y extendida llamada phpMyAdmin.

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

3.6.3.3. Base de Datos:

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

3.6.3.3.1. Tabla Tipos de dispositivos:

- Una tabla para guardar los tipos de dispositivos:

Tabla: t_disp

Campos Tipo de datos Tamao (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 tamao de cada uno de ellos.

Esta tabla almacenar los tipos de dispositivos, es decir, podemos agrupar los
elementos a localizar en diferentes clases o grupos.
27
Tiene seis campos, a continuacin explicaremos cada uno de ellos:

El id, se trata de un valor numrico que identifica al grupo de

dispositivos, se ha configurado en phpMyAdmin como un tipo de datos
Tinyint y adems como unsigned, es decir, deber ser un nmero entero
positivo comprendido entre 0 y 255. Esto significa que la aplicacin como
mximo tendr 256 tipos de dispositivos.

No podr haber dos id iguales ni valores nulos, ya que se ha definido

como clave primaria. En el diseo de bases de datos relacionales, se llama
clave primaria a un campo o a una combinacin de campos que identifica de
forma nica a cada fila de una tabla. Una clave primaria comprende de esta
manera una columna o conjunto de columnas.

No puede haber dos filas en una tabla que tengan la misma clave primaria .

nomt hace referencia al nombre que le pondremos al tipo de dispositivo.

En este tipo de campos en los cuales se almacenan cadenas de caracteres
tenamos dos opciones a elegir para definir el tipo de datos, VARCHAR y
CHAR.

En ambos tipos el rango de caracteres que se pueden guardar va de 1 a 255.

Para ver la diferencia pondremos un ejemplo, imaginemos que guardamos la
palabra Coches la cual tiene 6 caracteres:

En el caso de CHAR(10), guardaremos los 6 caracteres

correspondientes a Coches y adems 4 espacios vacos hasta llegar
al nmero mximo de caracteres que hemos establecido en 10.

En el caso de VARCHAR(10) se guardarn slo los 6 caracteres de la

palabra ms un byte para indicar la longitud de la columna, por lo
tanto 7 bytes.

Llegados a este punto parece ilgico haber elegido como tipo de datos
CHAR, la razn es que con CHAR accedemos ms rpido a la informacin
porque sabemos que todas las filas son de la misma longitud, a diferencia de
lo que pasa con VARCHAR que se tiene que ir mirando el byte que se ha
guardado de ms, para saber el tamao de cada fila.

icono en este campo guardaremos el nombre del archivo que haga

referencia a la imagen que represente al grupo de dispositivos, que despus
se utilizar en la interfaz de la aplicacin. Tambin es definido como
CHAR(10).

maxdisp y numdisp ambas sern variables de tipo Tinyint por lo tanto

no podrn ser superiores a 255. La primera ser introducida por el usuario
que nos indicar el nmero mximo de elementos que puede tener un tipo

28
 de dispositivo, como mximo 255. Debido al tipo de variable que le hemos
asignado, como mximo sern 255, dependiendo del uso exacto que se le
quiera dar a la aplicacin podemos modificarlo y ponerle otra clase de dato,
que nos permita tener ms dispositivos. Por el momento, creemos que el uso
no ser a gran escala. La segunda numdisp nos informar de la cantidad
de dispositivos que tiene actualmente.

ob_tipo por ltimo tendremos un campo por si queremos hacer algn tipo
de observacin respecto a un grupo de elementos. Tendremos capacidad
para 30 caracteres.

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

3.6.3.3.2. Tabla Dispositivos:

- Una tabla para guardar los dispositivos:

Tabla: disp

Campos Tipo de datos Tamao (bytes)

telfono 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 tamao de cada uno de ellos.

En esta tabla se almacenarn los dispositivos o elementos a localizar. Est compuesta por:

telfono o identificador numrico del elemento, ser el nmero de

telfono del dispositivo a localizar, el cual nos enviar la informacin
mediante mensajes de texto, esta decisin de diseo formaba parte de los
requisitos iniciales de la aplicacin. Lo hemos configurado como un nmero
entero de 9 cifras de valor positivo, por lo tanto ir de 0 a 999.999.999. Es la
clave primaria de la tabla.

29
 idtipo es igual que el id que hemos definido en la tabla anterior, la
nica diferencia es que en este caso no es la clave primaria de la tabla. Hace
referencia al grupo de dispositivos al que pertenece el dispositivo. Se trata
de una clave fornea.

iconodisp se trata del nombre del archivo del icono que representar al
dispositivo remoto en la interfaz, es decir, en el mapa y en el rbol de
dispositivos. Ser una imagen propia del dispositivo e independiente a la del
grupo de dispositivos.

Los campos nombre y observaciones corresponden al nombre y a las

observaciones del dispositivo, respectivamente.

Por ltimo color corresponde al color que le asignaremos al LineString8

del dispositivo. Le hemos puesto una longitud mxima de 7 caracteres ya
que corresponde a un color en HTML con el siguiente formato: #XXXXXX.

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

3.6.3.3.3. Tabla Historial:

- Una tabla para guardar el historial, o informacin recibida de cada dispositivo:

Tabla: historial

Campos Tipo de datos Tamao(bytes)

telfono 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 tamao de cada uno
de ellos.

8
LineString: Ver captulo 3.7.3.3. Layers o capas.

30
En esta tabla tendremos la informacin recibida de todos los dispositivos, los campos que
la forman son:

telfono campo descrito en la tabla anterior. En este caso acta como

clave fornea ya que relaciona la tabla de dispositivos con la del historial de
informacin recibida.

fecha configurado como tipo de datos Date, como es evidente se

almacenar una fecha. El rango de valores va desde el 1 de enero del 1001
al 31 de diciembre de 9999. El formato de almacenamiento es de ao-mes-
da. Se debe tener en cuenta que Mysql simplemente comprueba que el mes
est comprendido entre 0 y 12 y que el da est comprendido entre 0 y 31.

hora almacenar una hora. El rango de horas va desde -838 horas, 59

minutos y 59 segundos a 838 horas, 59 minutos y 59 segundos. El formato
de almacenamiento es de 'HH:MM:SS'.

En esta tabla la clave primaria estar formada por el telfono, la fecha y la

hora.

latitud y longitud se definen como decimales, este tipo se usa para

guardar valores para los que es importante tener una precisin exacta. El
tipo de datos se define como DECIMAL (8, 5) dnde 8 es el nmero
mximo de dgitos que tendr el nmero contando tambin los decimales, y
5 ser el nmero de decimales. El tema de la cantidad de decimales que se
guardan, en un futuro se podr cambiar, ya que depende del GPS que tenga
el dispositivo. La posicin mostrada ser ms o menos fiable en funcin de
esto.

La longitud total de cada fila de esta tabla ser de 35 bytes. En este caso es ms difcil
hacer un clculo aproximado de la medida ya que es muy variable, no sabemos
exactamente las posiciones que se van a recibir.

31
 Figura 15. Relacin entre las bases de datos.

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

3.6.4. AJAX:
En este apartado se definirn y explicaran los trminos AJAX, y JSON. Tecnologas que
nos permitirn intercambiar informacin del servidor al cliente y a la inversa, valorando su
eficacia, sus ventajas e inconvenientes.

Inicialmente definiremos Ajax, acrnimo de Asynchronous JavaScript And XML

(JavaScript asncrono y XML), es una tcnica de desarrollo web para crear aplicaciones
interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el
cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin
asncrona con el servidor en segundo plano.

La caracterstica fundamental de AJAX es permitir actualizar partes de una pgina, con

informacin que se encuentra en el servidor, sin tener que refrescar completamente la
pgina.

Como ya hemos dicho, se trata de una tecnologa asncrona, en el sentido de que los datos
adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la
visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje con el cual se
efectan, normalmente, las funciones de llamada de Ajax.
32
 Figura 16. Ajax en aplicaciones web.

3.6.4.1. Ventaja e Inconvenientes de AJAX:

A continuacin haremos un resumen de las ventajas e inconvenientes de AJAX:

- Ventajas:

Utiliza tecnologas existentes.

Es una tcnica vlida para mltiples plataformas y utilizable en muchos

sistemas operativos y navegadores, dado que est basada en estndares
abiertos como JavaScript y Document Object Model (DOM).

Interactividad: es posible realizar cambios sobre las pginas sin necesidad

de recargarlas, lo que significa aumentar la interactividad, velocidad y
usabilidad en las aplicaciones.

Mayor velocidad, esto es debido a que no hay que retornar toda la pgina
nuevamente.

La pgina se asemeja a una aplicacin de escritorio, aplicaciones RIA.

- Desventajas:

Debemos dominar varias tecnologas.

33
 Se pierde el concepto de volver a la pgina anterior.

Dependiendo de la carga del servidor podemos experimentar tiempos

tardos de respuesta.

3.6.4.2. AJAX: Intercambio de Datos con JSON:

JSON, acrnimo de JavaScript Object Notation, es un formato de intercambio de datos

ligero y fcil de leer para humanos y mquinas. En l se describe de qu manera los datos
se transfieren.

La simplicidad de JSON ha dado lugar a la generalizacin de su uso, especialmente como

alternativa a XML en AJAX.

XML es el formato usado generalmente para la transferencia de datos solicitados al

servidor, aunque cualquier formato puede funcionar, incluyendo HTML, texto plano,
JSON, etc.

Ahora viene la pregunta clave, Por qu usar JSON si el estndar habitual es XML?, a
continuacin haremos un breve estudio sobre ambas tecnologas.

3.6.4.3. Comparacin entre XML y JSON:

Una de las principales ventajas de usar JSON es que los datos ocupan mucho menos que
XML, ya que XML, aade bastante sobrecarga a los datos que queremos serializar.

Este es un ejemplo de los datos de una persona en XML:

<persona>
<nombre>Rodrigo</nombre>
<apellido>Corral</apellido>
<genero>varn</genero>
<edad>29</edad>
</persona>

Cdigo 1. Ejemplo XML

Y estos son los mismos datos en JSON:

{
"nombre" : "Rodrigo",
"apellido" : "Corral",
"genero" : "varn",
"edad" : 29
}

Cdigo 2. Ejemplo JSON

34
El problema principal en AJAX es mover datos entre el servidor y el cliente, este problema
se suele resolver usando XML. La mayora de las aplicaciones AJAX, en el cliente la
programacin la realizan casi siempre con JavaScript, como es el caso de nuestro proyecto.
Existen diversas posibilidades para leer XML desde JavaScript, pero todas ellas son
farragosas en mayor o menor medida y son bastante lentas y pesadas. JSON en esencia es
JavaScript perfectamente correcto, esto nos permite que simplemente podamos tener un
objeto JavaScript totalmente vlido. De modo que podamos acceder a los datos de una
manera orientada a objetos.

Cada vez hay ms soporte de JSON mediante el uso de paquetes escritos por terceras
partes. La lista de lenguajes soportados incluye C, C++, C#, Delphi, Java, JavaScript, Perl,
PHP, etc. En nuestro proyecto utilizamos PHP, en el prximo captulo, 3.7. Desarrollo, lo
veremos de forma prctica.

En resumen, el menor peso de los datos en JSON y la comodidad de trabajar en JavaScript

facilitndonos la manera de acceder a la informacin, nos ha convencido para utilizar est
tcnica. En los siguientes apartados se ver desarrollada de forma ms concreta en nuestro
aplicativo.

3.7. Desarrollo:

3.7.1. Archivo SIG.html:

HTML (HyperText Markup Language) es el lenguaje utilizado para construir pginas web.
Sus comandos se incluyen en documentos que nuestros equipos descargan del servidor y
son interpretados por el navegador (Mozilla Firefox, Google Chrome, Internet Explorer...).
Nuestro archivo HTML, Sig.html, tendr la estructura general de un documento de este
tipo, en la cabecera o Head tendremos:

- Enlace a la hoja de estilos: estilos.css:

<link rel="stylesheet" type="text/css" href="estilos.css" />

Cdigo 3. Link a la hoja de estilos .css

- Librera JavaScript de ExtJS: Para utilizar esta librera debemos descargarla, est
formada por:

1.- <link rel="stylesheet" type="text/css"

href="resources/css/ext-all.css" />
2.- <script type="text/javascript" src="ExtJS/ext-
all.js"></script>

35
 3.- <script type="text/javascript" src="ExtJS/ext-
base.js"></script>
4.- <script type="text/javascript" src="ExtJS/ext-lang-
es.js"></script>

Cdigo 4. Llamada a la librera JavaScript de ExtJS

o En la primera lnea del Cdigo 4. tenemos la carpeta resources en la

cual se encuentran las imgenes y estilos necesarios para los
componentes del framework.
o Lnea 2 Cdigo 4. contiene el archivo ext-all.js que guarda todos los
widgets y componentes del framework.
o ExtJS nos ofrece la posibilidad de elegir trabajar con diferentes libreras,
como por ejemplo JQuery o Prototype, nosotros hemos optado por elegir
la librera propia de ExtJS por lo tanto importamos el archivo ext-
base.js. (Vase lnea 3 del Cdigo 4.)
o Por ltimo, importamos el archivo ext-lang-es.js, el cual hace que
todos los mensajes y advertencias nos salgan en espaol, ya que por
defecto estn en ingls. Tambin tenemos la posibilidad de ponerlo en
otros idiomas como francs, alemn, italiano, etc

- Librera OpenLayers: La ltima versin de librera se encuentra en la siguiente

URL: http://www.openlayers.org/api/OpenLayers.js
Para utilizarla basta con apuntar a esa direccin en nuestra pgina web. Utilizando
el fichero .js, en la carpeta api, estaremos seleccionando la ltima versin estable de
la librera. Si cambiamos la carpeta api por dev apuntaremos a la versin en
desarrollo (dev-elopment), la cual nos permitir probar las funcionalidades en
marcha. En nuestro caso hemos utilizado la versin en desarrollo ya que tiene una
interfaz ms vistosa. Nuestro cdigo quedar:

<script src="http://www.openlayers.org/dev/OpenLayers.js">
</script>
Cdigo 5. Llamada a la librera OpenLayers

Si se desea tambin existe la opcin de descargar una versin concreta de la librera

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

- Librera GeoExt: Igual que hemos hecho con las libreras anteriores debemos hacer
con la de GeoExt para utilizar sus funciones. Por lo tanto nos descargaremos el
36
 archivo correspondiente y lo llamaremos en el encabezado head de nuestro archivo
html.

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

- Llamada a los archivos que forman la aplicacin: Para introducir el cdigo

JavaScript de la aplicacin introducimos:

<script type="text/javascript" src="mapa.js"></script>

<script type="text/javascript"
src="sig_ext.js"></script>

Cdigo 8. Llamada a los archivos que forman la aplicacin.

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

3.7.2. Archivo Sig_Ext.js:

De lo primero que debemos hablar es de una de las funciones principales, Ext.onReady(),

se trata de un mtodo que asegura que nuestro documento est listo, ha sido cargado por
completo. Y nos garantiza que cualquier elemento de la pgina al que queramos
referenciar ya estar disponible cuando se ejecute el script.

A continuacin debemos proveer a Ext con una imagen para generar espacios (Ver Cdigo.
9), es importante, ya que algunas veces los componentes no se visualizarn correctamente
si no tenemos conexin a Internet, esto ocurre porque esta imagen gif est alojada fuera de
nuestro servidor.

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';

Cdigo 9. Ruta imagen spacer.

37
 3.7.2.1. Diseo de los Paneles:

El archivo Sig_ext.js contiene principalmente toda la interfaz grfica. En la Figura 17.

vemos la estructura general:

Figura 17 . Pantalla inicio de la aplicacin.

Ext utiliza paneles, los cuales son la base de muchos diseos.

Vemos que nuestra aplicacin (Figura 17.) est dividida en tres partes o paneles bien
diferenciados, todos ellos estn dentro de uno especial que los engloba a todos, llamado
Viewport. La diferencia con otro tipo de paneles es que contiene todo el layout9 y adems
se adapta al rea visible de nuestro navegador, lo que queremos decir con esto es que si
cambiamos el tamao de la pantalla, se adaptan todos los paneles a la nueva medida.

Dentro de esta ventana tenemos un layout llamado border el cual contiene regin norte
(en la Figura 17. Nmero 1), centro (en la Figura 17. Nmero 2) y este (en la Figura 17.
Nmero 3).

A continuacin explicaremos cada una de ellas de forma detallada.

- Regin Norte (1) - Ttulo: En la regin Norte simplemente creamos un panel

dnde estar el ttulo de la aplicacin, lo creamos mediante xtype: panel.
Xtype nos ofrece la posibilidad de instanciar un nuevo componente de forma
rpida, lo veremos durante la aplicacin en muchos casos. Este mtodo puede
ayudar a conservar memoria en nuestra aplicacin web.

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

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

Figura 18. TabPanel con la segunda pestaa activada.

o Tab MAPA: Al iniciar la aplicacin siempre estar activada la pestaa

nmero 1 (Ver Figura 18. Nmero 1), esto es gracias a la propiedad:
activeTab: 0. Dentro de esta pestaa tenemos un panel especial para
mapas gracias al framework GeoExt10 se trata de xtype:
gx_mappanel que nos permite cargar el mapa directamente.

o Tab TIPO DE DISPOSITIVOS: (Ver Figura 18. Nmero 2) En esta

pestaa mostramos la tabla de todos los tipos de dispositivos y sus
caractersticas, que tenemos almacenados en la base de datos. Para
visualizar la informacin en forma de tabla necesitamos dos
componentes:

Objeto Ext.Data.Store: Un Store es un componente que

almacena temporalmente informacin mediante registros, es
utilizado como cach. A este le debemos pasar:

Un objeto proxy que tendremos que configurar, el proxy

normalmente es HTTP y le indicamos la url para acceder
a los datos, y el mtodo HTTP que se utilizar para las
solicitudes.

El formato en el que estn los datos. Para especificar el

tipo de datos necesitamos un lector o reader de JSON.
Al reader le pasaremos varios argumentos: el nombre del

10
Ver apartado 3.6.2.2. Ventajas e Inconvenientes de ExtJS

39
 array (root) que contiene toda la informacin, y los
diferentes campos (fields) que debe leer.

Por ltimo con la funcin load(), cargamos los datos.

Objeto Ext.Grid.GridPanel: los argumentos principales que

debemos pasarle sern el Store creado en el paso anterior, y las
columnas que queremos que muestre. A cada columna le
pasamos el parmetro Header (Nombre que tendr en la
pantalla), dataIndex (para indicarle que columna del data Store
es, por lo tanto tendr que coincidir con alguno de los campos
indicados en el JSONreader) y por ltimo sortable: true que
permite ocultar columnas y ordenar las filas (Ver Figura. 19).

Figura 19. Propiedad Sortable: true.

o Tab DISPOSITIVOS: (Ver Figura 18. Nmero 2) Este apartado es

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

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

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

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

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

11
Ver apartado 3.7.3.3.1. Markers
12
Ver apartado 3.7.3.3.2. Historial

41
 El cdigo que necesitamos para crear un rbol lo podemos dividir en tres partes
diferenciadas:

o Creamos el rbol: En nuestro caso lo hemos creado mediante

xtype:treepanel es lo mismo que si usamos Ext.tree.TreePanel.

o Objeto Ext.Tree.TreeLoader se encarga de buscar los datos para

rellenar el rbol, como parmetro se le indica la url a dnde debe ir para
buscar la informacin en formato JSON.

o Root Node: Cada rbol requiere un root node o nodo principal, del cual
descendern el resto de elementos. Para crearlo utilizamos:
Ext.tree.AsyncTreeNode. La razn por la que usamos AsyncTreeNode
en lugar del TreeNode bsico, que tambin existe, es porque estamos
esperando a ir cargando los nodos y esperando a que se carguen los
hijos des del servidor, rama por rama y no todos a la vez. A este
objeto le pasamos parmetros como el nombre, el icono, el checkbox,
etc.

Una vez creado el treepanel le aadimos una barra en la parte inferior la cual
tiene dos botones, uno que permite expandir todo el rbol y otro que hace la
funcin contraria.

3.7.2.2. Botones y Formularios:

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

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

Explicaremos todas las opciones que contiene la pestaa dispositivos, ya que es la ms

completa, ya que los botones que hay en tipo de dispositivos son prcticamente iguales.

Lo primero que encontramos es Nuevo Dispositivo si hacemos click obtendremos una

ventana (Ver Figura 23.) la cual se ha creado mediante new Ext.Window y a la que le
pasamos una serie de atributos como pueden ser: medida, ttulo, tipo de layout, en este caso
ser tipo form ya que dentro tendremos un formulario a rellenar, etc.

42
 Figura 23. Ventana aadir dispositivo.

En la aplicacin utilizamos formularios en varias ocasiones, principalmente para guardar

un elemento o modificarlo.

Dentro de la ventana explicada anteriormente, tendremos un parmetro llamado tems, el

cual contiene todo lo que se mostrar en ella. Por lo tanto, dentro de tems, crearemos un
formulario con new Ext.FormPanel, a la vez este tambin tendr una serie de
caractersticas como bodystyle o url (nos indicar la url a la cual se debe ir para
guardar los datos, se explicar a continuacin) y de la misma forma que el objeto Window,
tambin tendr el parmetro tems, que esta vez contendr los diferentes campos del
formulario.

A continuacin, explicaremos los principales tipos de campos que hemos utilizado en los
formularios, nuestros campos se crearan usando xtype, como ya hemos visto
anteriormente xtype es una referencia a un determinado componente Ext.

Todo campo debe tener tres parmetros bsicos:

- Xtype: que nos dir exactamente de qu tipo de campo se trata. En la aplicacin

tenemos los siguientes tipos:

o Numberfield: Se trata de un campo que slo nos permite introducir nmeros.

o Textfield: En este campo se podr introducir una lnea de texto el nmero

mximo de caracteres ir en funcin del parmetro maxLength.

o Textarea: En este tipo de campos se permite al usuario introducir varias lneas de

texto. En nuestro caso lo hemos utilizado para el campo observaciones y est
limitado a 30 caracteres, que es el mximo que permite guardar la base de datos
en este campo. Por lo tanto, si el usuario introduce ms de 30 caracteres le
aparecer un aviso.

43
 o Combo: (Ver Figura 24.) Se trata de un campo que despliega un men
permitindonos elegir una de las opciones. En nuestro caso nos aparece en el
formulario que aade dispositivos, para elegir a qu clase de dispositivos
pertenece.

Est formado por varios parmetros pero destacamos varios: mode: remote, que
indica que las opciones del men son cargadas de la base de datos, para ello le
indicamos store: storeT, explicado en el apartado anterior, es el mismo utilizado
para cargar la tabla de tipos de dispositivos.

Tambin le indicamos el estilo, para poder ver varios datos en cada opcin,
aunque el valor real del campo es el que se indica en el atributo valueField.

Figura 24. Combo.

- FieldLabel: que nos indicar el string que aparecer en pantalla para indicarle al
usuario que datos debe introducir.

- Name: Es un parmetro muy importante, ya que se trata del nombre con el cual se
envan los datos, que contiene el campo, al servidor.

Otros parmetros opcionales que hemos utilizado, pueden ser:

- La medida del campo (maxLength) la cual se ha puesto en funcin de las

medidas mximas aceptadas en la base de datos.

- La posibilidad de que el campo quede vaco (allowblank: true o false).

- readOnly: esta opcin nos resultar til en el caso modificar dispositivo o tipo
de dispositivo ya que el ID del elemento no se podr cambiar, por lo tanto con
este parmetro indicamos que slo se puede leer.

Cuando no se cumplen algunos de los requisitos determinados por los parmetros

anteriores, la interfaz de ExtJS mostrar al usuario los mensajes de advertencia

44
correspondientes, gracias a la clase Ext.QuickTips.init();, se trata de una clase
singleton13.

Dentro de la ventana tenemos tres botones que nos permiten enviar la informacin al
servidor (botn guardar), borrar todos los datos que hayamos introducido en el formulario
(botn Restablecer) y por ltimo, el botn Cancelar que hace que se cierre la ventana sin
guardar nada.

Cuando se selecciona la opcin guardar, se enva la informacin mediante el mtodo POST

y automticamente el servidor nos contesta informndonos de si se ha grabado
correctamente o no. En caso afirmativo, actualizaremos los gridpanels y treepanels
necesarios para visualizar los cambios.

La siguiente opcin que tenemos en la Figura 22. es modificar dispositivo, funciona igual
que la explicada para aadir uno, la nica diferencia es que, antes de hacer clic debemos
indicar el elemento a modificar. De esta forma nos aparecer la misma ventana, pero con la
informacin correspondiente a la seleccin que hemos hecho previamente, cargada en los
campos. Una vez lo modificamos (teniendo en cuenta que el id no se puede cambiar)
tenemos las opciones Actualizar (enviamos la informacin al servidor para actualizar la
base de datos) o cancelar.

A continuacin en la Figura 22. tenemos el historial, cuando seleccionamos un dispositivo

del gridpanel y a continuacin pulsamos este botn, nos aparece una ventana con todas las
posiciones recibidas del elemento seleccionado. Los datos aparecen en un GridPanel como
los explicados anteriormente.

Por ltimo, tenemos la opcin eliminar, comentar que cuando indiquemos que queremos
eliminar un dispositivo, se preguntar al usuario si est seguro de realizar esa accin, para
comprobar que no ha sido por error. Debemos tener en cuenta que cuando se elimine un
tipo de dispositivo borrar todos sus componentes, es decir, todos los dispositivos que lo
forman y a su vez toda la informacin recibida de cada uno de ellos. Lo mismo pasa a la
hora de eliminar un dispositivo, tambin elimina las posiciones recibidas de este.

3.7.3. Archivo MAPA.js:

En este archivo se crea el objeto mapa, por lo tanto es, principalmente, dnde estar todo el
desarrollo en OpenLayers.

Adems del mapa y todos sus ajustes, tambin crearemos las tablas que contengan todos
los Markers y LineString, dependiendo de la informacin que tengamos en la base de datos
en ese momento, as como las funciones que se encargan de visualizarlos, ocultarlos,
eliminarlos, etc.

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

45
 3.7.3.1. Mapa:
Uno de los elementos principales de la aplicacin es el mapa. En este archivo hemos
creado una variable global llamada map:

var map = new OpenLayers.Map(options);

Cdigo 10. Creacin del objeto mapa.

En JavaScript, en cualquier momento podemos crear una variable poniendo delante de sta
la palabra var, esto significa que la hemos definido a nivel global, de esta forma podremos
acceder a ella desde cualquier lugar de nuestro cdigo.

Hemos creado el objeto map a partir de la clase OpenLayers.Map. Dicho de otra forma
se trata de una instancia de la clase Map de OpenLayers.
El objeto map es uno de los puntos esenciales de nuestra aplicacin, llamaremos a sus
funciones para hacer zoom, aadir capas, etc como veremos a continuacin.
El resto de cdigo que nos queda referente al mapa, lo podemos dividir en dos partes
bsicas:

3.7.3.2. Controles y Configuracin del Mapa:

Como podemos ver le pasamos un argumento al objeto map creado, se trata de la
variable options, opciones del mapa, que define los controles del mapa y algunos ajustes
como las proyecciones utilizadas.
Options est formado por pares de key:value, esta forma de definir los atributos es
llamada JavaScript Object Notation (JSON) visto anteriormente. Este argumento no es
obligatorio, si no se le pasa nada al objeto map, visualizaremos los controles por defecto.

var options = {
controls:
[new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.NavToolbar({position:new
OpenLayers.Pixel(50,5)}),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition({prefix:'Longitud
| Latitud: ', separator: ' | '})],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34)
};
Cdigo 11. Variable options.

46
La clase Control es la que nos permite interactuar con nuestro mapa. Tambin nos
permite visualizar informacin adicional, como pueden ser valores de escala, longitud,
latitud, etc. Se pueden aadir tantos controles como se quieran.
En las siguientes lneas explicaremos la funcionalidad de los que hemos credo conveniente
poner en nuestra aplicacin:

o KeyboardDefaults(): Nos permite desplazarnos por el mapa, y aumentar o

reducir el zoom mediante las teclas +/- y las flechas desde teclado.
o NavToolbar(): Este tipo de control crea una barra de herramientas que contiene
dos botones (destacados en el cuadro rojo situado a la izquierda en la Figura.
25.). el botn superior permite desplazarse por el mapa, el inferior hace un
aumento de zoom de la zona seleccionada (se trata del cuadro rojo que
podemos ver a la derecha de la Figura. 25.).
Como parmetro le pasamos la posicin, para situarlo sobre el mapa en la
posicin deseada, mediante el objeto OpenLayers.Pixel, evidentemente esta
funcin nicamente afecta a los controles que tienen un componente visible
como es el caso de NavToolbar. Al objeto OpenLayers.Pixel le pasamos el par
de coordenadas x, y, teniendo en cuenta que el origen es la parte superior
izquierda del mapa.

Figura 25. Control NavToolbar().

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

47
 Figura 26. Control PanZoomBar().

o MouseDefaults(): Con esta lnea de cdigo habilitamos hacer zoom mediante el

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

Figura 27. Control LayerSwitcher().

o MousePosition: Nos muestra la posicin (Longitud, Latitud) en la que se

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

48
 Figura 28. Resultado Control MousePosition().

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

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

49
 3.7.3.3. Layers o Capas:

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

Figura 29. Tipos de Capas.

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

50
 type: google.maps.MapTypeId.HYBRID

Cdigo 12. Parmetro que le pasamos a OpenLayers.Layer.Google() para indicarle el tipo de capa que queremos.

o Capa OpenStreetMap: Igual que en el caso de Google tambin existe una

subclase para OpenStreetMap.

new OpenLayers.Layer.OSM("OpenStreetMap");

Cdigo 13. Creacin de una capa OpenStreetMap.

Hemos elegido OpenStreetMap porque si en un futuro se quiere tener como

mapa, una determinada zona, y no todo el mundo, OpenStreetMap entre otros,
nos ofrece la posibilidad de mostrar slo el rea indicada. Para esto se
necesitara crear nuestro propio servidor de mapas.

- Vector Layers15:

Un vector usa formas geomtricas basadas en ecuaciones matemticas para

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

3.7.3.3.1. Markers

En la capa Markers, se mostrar la ltima posicin del dispositivo que el

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

15 Mirar apartado 3.4.3. Representacin de la informacin

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

Con la clase LonLat nos referimos al punto deseado. Como se puede ver en el
Cdigo 14. Transformamos los datos de LonLat a la proyeccin de nuestro
mapa, con la funcin transform.
Para que el icono se site en la posicin correcta, debemos definir el tamao de
este, mediante el mtodo size, (Vase Cdigo 14.), adems tambin debemos
calcular el offset. De esta forma el icono se situar en la posicin indicada sin
desplazamientos errneos. Por lo tanto nuestra aplicacin tendr fiabilidad
respecto a los datos recibidos, otro tema es que el dispositivo que nos enve la
informacin no sea totalmente exacto, pero eso no lo podemos controlar desde
la aplicacin. Una vez tenemos los valores size, offset y la imagen para el
icono, crearemos el objeto icono.
Finalmente, crearemos el Marker pasndole dos argumentos, el punto donde
queremos situarlo (posicin lonlat que hemos transformado a la proyeccin de
nuestro mapa) y el icono (icono que hemos creado a partir de la imagen, la
medida y el offset).

var center = new OpenLayers.LonLat

(json.tabla[j]['longitud'],json.tabla[j]['latitud'])
.transform ( new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
var size = new OpenLayers.Size(30,30);
var offset = new OpenLayers.Pixel(-(size.w/2),
-size.h);
var icono='imag/'+json.disp[i]['iconodisp'];
var icon = new OpenLayers.Icon(icono,size,offset);
markerList[i]=new OpenLayers.Marker(center, icon);

Cdigo 14. Como hacer un marker.

3.7.3.3.2. Historial

En la capa Historial se representar el recorrido que hayan hecho los

dispositivos mediante el objeto LineString de OpenLayers. Para crear un
LineString necesitamos como mnimo dos puntos.

52
 Figura 31. LineString formada por tres puntos.

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

3.7.4. Archivo Conectarse.php:

Se trata del archivo que nos permitir crear la conexin con nuestra base de datos, el cual
se ha creado independiente ya que, ms tarde, lo incluiremos en diferentes archivos.

La funcin que incluye, la cual conecta con la base de datos, est formada por la
inicializacin de cuatro parmetros:

o Host: Host al que conectarnos, habitualmente es el localhost en nuestro caso.

o Base de datos: nombre de la BD que queremos utilizar.

o Usuario: nombre del usuario con permisos para acceder. Mysql crea por defecto
al usuario root con todos los permisos posibles habilitados, podemos utilizar
este usuario como administrador o crear otro, en nuestro caso utilizaremos el
root, pero antes debemos asignarle una contrasea ya que lo crea sin ella.

53
 o Password: contrasea del usuario.

A continuacin, con la funcin mysql_connect abriremos una conexin al servidor

MySQL, pasndole por parmetros las variables: host, usuario y password, est nos
devolver un identificador de conexin, o false en caso de error.

Por ltimo, mediante la funcin mysql_select_db se establece la base de datos activa en

el servidor asociado con el identificador de enlace especificado, es decir, le pasamos el
nombre de la base de datos que queremos utilizar y el resultado de la conexin realizada en
el paso anterior mediante mysql_connect.

Ejecutando esta funcin ya podremos trabajar con nuestros datos.

3.7.5. Archivo Datos.php:

Lo primero que debemos hacer en este archivo es incluir el fichero conectarse.php con el
cual nos conectamos a la base de datos para poder trabajar con ella.

La estructura principal del archivo Datos.php es un switch que se encarga de realizar una
funcin u otra dependiendo del parmetro recibido mediante POST. Con el mtodo POST
se realiza una transaccin mediante el protocolo HTTP. Se utiliza para aplicaciones que
modifican la base de datos de destino.

Se trata del punto intermedio entre la interfaz grfica y la base de datos, hemos utilizado el
lenguaje SQL, lenguaje PHP y el formato de intercambio de datos JSON.

A travs de las diferentes opciones del switch se realizan cuatro acciones bsicas:

1. SELECT, consultar datos:

- Listar tabla de tipos de dispositivos y dispositivos: Se realiza mediante la accin

SELECT, posteriormente guardamos los datos obtenidos de la consulta de cada
tabla en una array, mediante mysql_fetch_array.

- A continuacin tenemos el caso para listar el historial de la informacin

recibida de cada dispositivo. Tambin utilizaremos SELECT aadindole la
condicin WHERE telefono = '.$_REQUEST['id'].' De esta
forma nicamente visualizaremos las filas en las que el campo telfono sea
igual al parmetro recibido mediante POST. Por ltimo, haremos que las filas
nos aparezcan ordenadas segn los campos fecha y hora: ORDER BY fecha
DESC, hora DESC', del ms reciente al ms antiguo.

- Para rellenar los formularios, que se encargan de modificar los tipos de

dispositivos y los dispositivos, lo hacemos con SELECT y la condicin
WHERE. Seleccionamos la fila que contiene la informacin correspondiente a el

54
 elemento a modificar, del cual sabremos el id o telfono que nos habrn enviado
mediante POST.

- En el caso Markers seleccionamos la informacin necesaria de la tabla del

historial (es decir, telfono, longitud y latitud) y de la tabla dispositivos
(telfono, iconodisp y color) para crear los objetos Markers y LineString.

En todos los casos que se hace una consulta SELECT es porque queremos
visualizar esa informacin en nuestra aplicacin. Por lo tanto para pasarla del
servidor al navegador se enva en formato JSON, con la funcin
json_encode(informacin que se quiera enviar).

2. INSERT, grabar datos:

- Se trata de los casos que nos permiten grabar datos en las tablas. Para grabar se
utiliza INSERT indicndole en que tabla se debe guardar y pasndole los
valores que queremos almacenar, sern los valores que haya introducido el
usuario en los formularios.

3. UPDATE, actualizar datos:

- Con la accin UPDATE ms la condicin WHERE, modificaremos los campos

correspondientes a la fila que tenga el id igual al valor pasado en la condicin
WHERE.

4. DELETE, eliminar datos:

- Por ltimo, para eliminar dispositivo o tipos de dispositivos utilizaremos

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

3.7.6. Archivo TreeData.php:

En el archivo TreeData.php tenemos las funciones necesarias para crear el rbol de

dispositivos.

Lo primero que hacemos es una consulta a travs de SELECT a la tabla tipos de

dispositivos, ya que esta es la que contiene todos los nodos padre, es decir, sern los
nodos de los cuales colgarn los dispositivos. Se recorre toda la tabla y se crea un array por
nodo, que contendr las propiedades de cada uno de ellos (chekcbox, nombre, icono, id,
hijos). En la propiedad hijos se llamar a una funcin que consultar la tabla de

55
dispositivos, y retornar un array con las propiedades (checkbox, icono, nombre, id y leaf,
leaf indica que este nodo no podr tener subnodos) de los childnodes correspondientes al
parentnode.

El array obtenido se pasar a formato JSON mediante json_encode(). Para hacernos una
idea del resultado podemos ver el Cdigo 15. que muestra un ejemplo de lo que retorna la
funcin, y en la Figura 32. El resultado visual que conseguiramos en la aplicacin.

[{"checked":false,

"singleClickExpand":true,
"text":"Coches",

"id":"1",

"icon":"imag\/coche.gif",

"children":

[{"icon":"imag\/uno_coch.png",

"text":"Ferrari",

"id":"619202020",

"leaf":true

},{

"icon":"imag\/tres_coc.png",
"text":"Mercedes",

"id":"650808080",

"leaf":true

},{

"icon":"imag\/dos_coch.png",

"text":"Scenic",

"id":"615323435",

"leaf":true }]

}]

Cdigo 15. Ejemplo cdigo JSON.

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

3.7.7. Simulacin de la Recepcin de Datos Va SMS:

Para poder hacer uso de la aplicacin de forma ms real posible, hemos creado una pgina
HTML independiente, la cual simula la recepcin de datos mediante GET, es decir puede
recibir la informacin a travs de la url.

La idea es que el dispositivo envi al servidor un SMS con un formato predeterminado, tal
y como podemos ver en el Cdigo 16., se trata de una url que contiene toda la informacin,
permitiendo que se guarden las variables deseadas automticamente en la base de datos.

http://localhost/sms.php?telefono=619202020&fecha=2009-08-
22&hora=13:30&latitud=-1.98765&longitud=40.65478

Cdigo 16. Informacin que se introduce en la url.

3.8. Evaluacin: Juego de Pruebas:

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

3.8.1. Crear un Tipo de Dispositivo:

Figura 33. Seleccionamos el botn Nuevo Tipo de Dispositivo.

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

Figura 34. Formulario para crear un Tipo de Dispositivo.

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

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

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

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

A continuacin volveremos a crear un tipo de dispositivo pero esta vez introduciremos

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

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

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

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

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

3.8.2. Modificar un Tipo de Dispositivo:

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

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

Si seleccionamos un tipo de dispositivo y pulsamos Modificar, nos aparece la misma

ventana que hemos utilizado para crearlo, pero con todos los campos rellenos con la
informacin correspondiente al elemento seleccionado.

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

Modificaremos el nombre, la imagen y las observaciones, y pulsaremos en Actualizar, los

resultados obtenidos los podemos ver en la Figura 42. Podemos ver los cambios en todas
las secciones de la aplicacin (GridPanel y TreePanel) y en la base de datos.

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

3.8.3. Crear un Dispositivo:

Ahora nos iremos a la pestaa DISPOSITIVOS, y crearemos un dispositivo perteneciente
al grupo creado en el apartado 3.8.1.

Rellenamos el formulario que nos aparece al hacer clic en Crear Nuevo Dispositivo (Ver
Figura 43.) y le damos al botn Guardar. Vemos que en el men desplegable donde
debemos indicar el Tipo de Dispositivo nos sale el que hemos creado previamente.

61
 Figura 43. Formulario para crear Dispositivo.

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

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

Si volvemos a la tabla de Tipos de Dispositivos vemos que se ha actualizado el campo

correspondiente a Nmero de Dispositivos Actuales (Ver Figura 45.).

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

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

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

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

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

A continuacin crearemos otro tipo de dispositivo y algn dispositivo perteneciente a este,

para ver que se muestran correctamente en el rbol de dispositivos y en las tablas (Ver
Figura 48.).

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

En el caso de los dispositivos tambin es posible modificarlos, no pondremos ningn

ejemplo ya que es igual que la prueba realizada en el apartado 3.8.2 la nica diferencia es
que se hace con los campos y tabla referente a los dispositivos.

3.8.4. Simulacin Recepcin de Datos:

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

Figura 49. Pgina que simula la entrada de informacin.

64
Tenemos dos opciones: introducir la informacin mediante el formulario o introducirla
mediante la url con el formato mostrado en el Cdigo 17.

Introduciremos en la url de nuestro navegador el siguiente cdigo:

http://localhost/sms.php?telefono=600606060&fecha=2011-05-
15&hora=13:30&latitud=41.11866&longitud=1.24533

Cdigo 17. Cdigo que introduciremos en la URL.

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

3.8.5. Visualizar Historial de un Dispositivo:

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

Figura 51. Historial del dispositivo C1.

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

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

3.8.7. Visualizar el Recorrido de un Dispositivo:

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

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

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

3.8.8. Eliminar Tipo de Dispositivo:

Comprobaremos que cuando se elimine un tipo de dispositivo, se eliminen tambin los
dispositivos que lo forman y la informacin del historial de cada dispositivo.

Siempre que se seleccione la opcin eliminar se nos pedir que confirmemos que estamos
seguros que queremos hacer est accin (Ver Figura 54.).

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

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

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

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

3.8.9. Eliminar Dispositivo:

En este caso nos aseguraremos que al eliminar un dispositivo se eliminan todas las
posiciones que nos han llegado de l.

Igual que en el apartado anterior tambin nos pide confirmar la accin. Una vez borrado
tambin nos informar de que se ha borrado correctamente.

67
 3.9. Recursos utilizados:

3.9.1. Requisitos hardware y software:

Para la construccin del sistema se ha trabajado en un equipo informtico (ordenador
porttil Sony Vaio) con las siguientes caractersticas tcnicas:

Intel Core 2 Duo T7500 2.20 GHz

2GB de memoria RAM
Disco duro 200GB Serial ATA 5400 rpm
Tarjeta grfica NVIDIA GeForce 8600M GS
Pantalla: 15.4 pulgadas, Resolucin: 1280x800 pixeles

Tambin ha sido necesario disponer de una conexin Internet que ha posibilitado la

consulta de las distintas referencias bibliogrficas, tambin es necesaria para acceder al
servicio Google Maps y poder visualizar sus mapas, por ltimo accedemos a la librera
OpenLayers mediante una url, por lo tanto es necesario tener conexin.
El navegador utilizado ha sido Firefox 4.

Para montar el servidor web hemos utilizado Xampp se trata de un paquete que incluye
Apache, PHP y MySql. El cual nos ofrece un pack de instalacin automtica que nos
permite alojar y servir nuestras pginas web desde nuestra mquina. Adems tambin
guardar las bases de datos necesarias. En concreto hemos utilizado la versin 1.7.3.

Figura 56. Logotipo paquete Xampp.

Por ltimo, hemos utilizado el editor de texto Crimson Editor para la codificacin de los
ficheros de la aplicacin.

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

68
4. APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL
ALUMNO:

De forma general, en un principio me ha aportado conocimientos sobre las tecnologas

GIS. Las cuales estn ms presentes, de lo que nosotros creemos, en el da a da. Ya que un
usuario de Internet utiliza Google Maps o aplicaciones similares, pero no se hace a la idea
de la repercusin que estas tienen y de las infinitas posibilidades que nos pueden ofrecer
para gestionar informacin en muchos mbitos.

Se trata de un tema que est en plena fase de explotacin, son utilizados tanto en la
administracin pblica, en reas como la gestin de recursos naturales, de patrimonio,
urbanismo, medio ambiente, trfico urbano, control de carreteras y sealizaciones, etc.
Adems de que existe una importante normativa europea que obliga a los estados
miembros a poner esta informacin accesible al ciudadano. Como en la empresa privada,
en temas como la planificacin de campaas de marketing, el seguimiento de la fuerza de
ventas, logstica, etc.

Por otra parte, me ha aportado experiencia en lenguajes de programacin como JavaScript,

PHP, MySQL, tecnologas como AJAX, OpenLayers, ExtJS, algunos de ellos los
desconoca o nicamente tena nociones bsicas.

Actualmente, he alcanzado conocimientos para poder crear una aplicacin web con una
buena interfaz de usuario mediante JavaScript (en este caso ExtJS y GeoExt),
relacionndola con informacin almacenada en una base de datos (MySQL), con la
posibilidad de gestionar su informacin, ya sea guardando, borrando o actualizndola,
mediante AJAX y PHP. Conocimientos bsicos que se pueden poner en prctica en
cualquier tipo de aplicacin, en general aplicaciones RIA, y no nicamente a sistemas SIG.

Adems, he aprendido a utilizar OpenLayers, trabajando con algunos de sus elementos,

como pueden ser los controles, features (markers, linestring, etc), descubriendo la
cantidad de posibilidades que ofrece para personalizar, adaptar y mejorar nuestra
aplicacin.

En definitiva, creo que ha sido una buena introduccin al mundo de la programacin de

aplicaciones web.

69
5. APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO:

En Telemtica hemos desarrollado diferentes prcticas y proyectos programando en

distintos lenguajes. Aunque la programacin es un campo ms enfocado a informtica
hemos obtenido la base suficiente para poder crear aplicaciones como la de este proyecto.

Si pensamos en las asignaturas que tienen ms conocimientos relacionados con el proyecto

las primeras que debemos considerar es Fundamentos de programacin I y II. En las cules
estudiamos y pusimos en prctica la programacin en lenguaje Java.

En Fonaments de Programaci I, entre otras cosas diseamos algoritmos para la

resolucin de problemas simples, estudiando la sintaxis y semntica de las instrucciones y
expresiones del lenguaje. Empezamos a conocer los tipos bsicos de datos, vectores, tablas,
etc. Y algoritmos bsicos de programacin estructurada, como pueden ser los algoritmos
de bsqueda, recorrido y ordenacin. Adems de comprender el proceso de compilacin.

En Fonaments de Programaci II, se present la programacin orientada a objetos para el

desarrollo de aplicaciones. Se disearon programas escogiendo la opcin ms ptima y
eficiente dependiendo de la complejidad de los algoritmos.

Todos estos conocimientos adquiridos en estas asignaturas fueron la base para empezar a
programar, Java y JavaScript son lenguajes distintos pero comparten sintaxis y algunas
estructuras. Por ejemplo, en el caso de OpenLayers, un aspecto en comn a Java es la
programacin orientada a objetos.

Por otra parte en la asignatura Xarxes i Serveis se llev a cabo la realizacin de una
aplicacin web en lenguaje PHP y HTML, la cual estaba formada por una base de datos
MySQL que se cre con la herramienta phpMyAdmin, y se almacenaba en el servidor
apache, tambin hicimos uso del paquete Xampp. Para acceder al servidor y a la
informacin, como ya hemos dicho, se hizo mediante PHP y lenguaje SQL. Por lo tanto,
antes de realizar este proyecto tena algunos conocimientos sobre estas tecnologas, y sobre
conceptos como lenguajes del lado cliente, lenguajes del lado del servidor, etc. Que
ayudan a comprender el funcionamiento general de este tipo de aplicaciones.

Por ltimo comentar que el apartado incluido en este proyecto sobre la representacin de la
informacin16, que habla sobre el modelo raster y el modelo vectorial est relacionado con
parte del temario visto en la optativa de Transmissi Multimdia en la cual se habla
sobre la representacin de imgenes.

En conclusin, con los conocimientos adquiridos de los estudios realizados y el

autoaprendizaje diario a partir de los errores y problemas encontrados durante la
programacin he podido realizar este proyecto formado por diferentes tecnologas.

16
Ver captulo 3.4.3. Representacin de la informacin

70
6. CONCLUSIONES Y LNEAS FUTURAS:

Conclusiones:

Llegados a este punto podemos decir que se han cumplido los objetivos del proyecto. La
idea bsica de este era la de realizar una aplicacin que permitiera situar dispositivos
remotos en un mapa.

A medida que hemos ido avanzando se han ido implementando las funciones deseadas, la
aplicacin permite registrar tipos de dispositivos y dispositivos, tambin incluye la opcin
de modificarlos o eliminarlos guardndose toda la informacin en la base de datos.

Se crean los objetos necesarios para representar los elementos en el mapa, los cuales se
sitan en la posicin correcta, dependiendo de la informacin recibida. El aplicativo
permite situar la ltima posicin del elemento o ver sus ltimos movimientos gracias al
objeto LineString.

Parte de la aplicacin se ha desarrollado en JavaScript, mediante ExtJS y OpenLayers.

ExtJS ha facilitado crear una interfaz clara e intuitiva para el usuario. OpenLayers, una
librera totalmente libre, que en un futuro nos permitir aadir mapas propios y ms
funciones a la aplicacin. El resto se ha programado en PHP utilizando bases de datos
MySQL.

Lneas Futuras de Trabajo:

Como lneas futuras consideraremos aquellos aspectos que podemos mejorar en la

aplicacin, tambin debemos tener en cuenta que depende de la finalidad exacta de sta, ya
que no sabemos el nmero de dispositivos que se quieren utilizar, aunque la idea inicial es
que no ser un nmero muy elevado. En el caso de tener ms elementos a localizar, se
podran aadir mejoras como:

- Crear un filtro buscador en cada Gridpanel y en los Treepanel para poder

localizar fcilmente el dispositivo deseado.

- Si adems la aplicacin es utilizada por varios usuarios crear sesiones, para que
cada uno de los clientes tenga la opcin de eliminar, crear o modificar los
dispositivos sin afectar al resto de usuarios, esto supondra una modificacin i/o
ampliacin importante en la base de datos.

Estudiar ms a fondo y poner en prctica el sistema para recibir la informacin desde los
dispositivos remotos. Implementar un servicio de actualizacin de posiciones. Aunque
Aiddea Linux propuso que se recibieran las posiciones va SMS, considero que se podran
buscar alternativas ms viables como por ejemplo va internet.

Como dijimos en el apartado 2 del proyecto, Aiddea Linux quiere que la aplicacin se
pueda adaptar a distintas situaciones, por lo tanto, se podrn aadir ms funcionalidades

71
segn la finalidad. Tambin depende de cmo se comercialice la aplicacin.
Consideraremos dos opciones:

- El cliente final nicamente accede al aplicativo web, es decir, en este caso

Aiddea Linux debera llevar el mantenimiento del servidor y de los dispositivos
remotos.

- El cliente se encarga de todo, es decir, Aiddea Linux nicamente le vende todo

el sistema y el usuario final se debe de preocupar de ir manteniendo todos los
equipos.

A continuacin listamos diferentes aspectos que se podran ampliar o mejorar en la

aplicacin actual:

- Carga de imgenes (iconos) mediante los formularios.

- Aadir paleta de colores en los formularios para seleccionar el color del

LineString del dispositivo.

- Mediante un Web Map Server proporcionar mapas de zonas concretas, as como

poder utilizar mapas que estn guardados en nuestro servidor sin necesidad de
descargarlos de Internet continuamente.

En conclusin, para la mejora de la interfaz y de las funciones del programa, JavaScript, y

OpenLayers nos facilitan muchas herramientas con aplicaciones muy vistosas e
interesantes.

72
REFERENCIAS:
SIG:
[1] http://www.mapaeducativo.edu.ar/encontrar/?a=qsig [Definicin SIG] Abril 2011

[2] http://recursos.gabrielortiz.com/index.asp?Info=012 [Definicin SIG y Tipos de representar la informacin] Abril

2011

[3] http://es.wikipedia.org/wiki/Sistema_de_Informacin_Geogrfica [SIG] Abril 2011

[4] http://www.monografias.com/trabajos14/informageogra/informageogra.shtml#com [SIG] Abril 2011

[5] http://www.procoopsrl.com.ar/sistgis.htm [Definicin SIG y sus componentes] Abril 2011

[6]http://www.iea.es/_docum/SIG2.PDF?IEA=e1cdcf4caac2168d092b113e58c38c3b&IEA=bb087d0367fd4c516595ce17
d07b888e [Ejemplos SIG, normalizacin de la informacin] Abril 2011

[7] http://jacobeo.tracasa.es/ [Ejemplo SIG: Camino de Santiago] Abril 2011

[8] http://w24.bcn.cat/GWMPNet61_bcn/extlayout.aspx [Ejemplo SIG: Geoportalbcn] Abril 2011

[9] http://delta.icc.es/ideLocal/IdecServ?codi=xgl&tipus=L&schema=c_ideclocal [Ejemplo SIG: IdecLocal] Abril 2011

[10] http://www.geolocal.cat/geoportal/cat/que-es/som-i-fem/# [Infraestructura de Dades Espacials de Catalunya] Abril

2011

[11] http://www.idee.es/resources/presentaciones/JIDEE06/ARTICULOS_JIDEE2006/articulo19.pdf

CARTOGRAFIA:
[12] http://enciclopedia.us.es/index.php/Sistema_de_coordenadas [Sistema de coordenadas] Abril 2011

[13] http://creciendojuntos.bligoo.com/content/view/151311/Sistema-de-coordenadas-geograficas.html [Sistema de

coordenadas] Abril 2011

[14] http://googleware.blogspot.com/2008/01/cmo-funciona-google-maps.html [Sistema de coordenadas y proyeccin de

Mercator] Abril 2011

[15] http://es.wikipedia.org/wiki/Proyecci%C3%B3n_cartogr%C3%A1fica [Proyeccin cartogrfica] Abril 2011

OGC:
[16] http://www.opengeospatial.org/ogc [Pgina oficial OGC] Abril 2011

[17] http://es.wikipedia.org/wiki/Open_Geospatial_Consortium [OGC] Abril 2011

[18] http://www.idee.es/show.do?to=pideep_OGC.ES [Especificaciones OGC] Abril 2011

[19] http://www.idee.es/show.do?to=pideep_proyectoIDEE.ES [Infraestructura de datos espaciales de Espaa] abril 2011

OPENLAYERS:
[20] Erik Hazzard, OpenLayers 2.10 Beginers Guide, Ed. Packt Publishing, 2011.

[21] http://openlayers.org/ [Pgina oficial OpenLayers] Abril 2011

73
[22] http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers-js.html [API OpenLayers] Abril
2011

[23] http://es.wikipedia.org/wiki/OpenLayers [Definicin] Abril 2011

[24] http://openlayers.ingemoral.es/manualOpenLayers.html [Manual OpenLayers] Abril 2011

[25] http://www.ideandalucia.es/index.php/es/visores [Visores Web] Abril 2011

[26] http://openlayers.org/dev/examples/?q=mobile [API OpenLayers para mviles] Abril 2011

[27] http://blog.sonxurxo.com/2011/03/29/tutorial-de-openlayers-i-introduccion/ [Tutorial OpenLayers] Abril 2011

EXT JS:
[28] Jos Lpez Quijado, Domine JavaScript, Ed. Ra-Ma, 2004.

[29] Frank W. Zammetti, Practical Ext JS Projects with Gears, Ed. Apress, 2009.

[30] Jesus D. Garcia, Jr. , Ext JS in Action, Ed. Meap Edition, 2009.

[31] Shea Frederick, Colin Ramsay, Steve Cutter Blades, Learning Ext JS, Ed. Packt Publishing, 2008.

[32] http://dev.sencha.com/deploy/ext-3.3.1/docs/ [API ExtJS] Abril 2011

[33] http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_(Spanish) [Tutorial ExtJS] Abril 2011

[34] http://www.quizzpot.com/2009/01/ext-js-framework/ [Tutorial ExtJS] Abril 2011

[35] http://www.webprogramo.com/tutoriales-extjs/ [API OpenLayers para mviles] Abril 2011

[36] http://www.geoext.org/ [Pgina oficial GeoExt] Abril 2011

[37] http://www.geoext.org/examples.html#examples [Ejemplos GeoExt] Abril 2011

MYSQL, PHP, SQL y PHPMYADMIN:

[38] Jacobo Pavn Puertas, Creacin de un portal con PHP y MySQL, Ed. Ra-Ma, 2006.

[39] http://es.wikipedia.org/wiki/PhpMyAdmin [Definicin phpMyAdmin] Mayo 2011

[40] http://es.wikipedia.org/wiki/Base_de_datos_relacional [Definicin Base de datos relacional] Mayo 2011

[41] http://www.maestrosdelweb.com/editorial/tutsql1/ [Tutorial SQL] Mayo 2011

[42] http://www.desarrolloweb.com/articulos/262.php [SQL] Mayo 2011

[43] http://objetivophp.com/?p=86 [Tipos de datos MySQL] Mayo 2011

AJAX, JSON, XML:

[44] http://www.maestrosdelweb.com/editorial/ajax/ [AJAX y las aplicaciones Web] Mayo 2011

[45] http://geeks.ms/blogs/rcorral/archive/2006/06/23/545.aspx [Intercambio de datos con JSON] Mayo 2011

[46] http://webelop.com.ar/ajax/comunicacion-ajax-php-con-json/ [PHP, JSON] Mayo 2011

[47] http://www.ajaxya.com.ar/ [AJAX, JSON y PHP] Mayo 2011

[48] http://www.desarrollosweb.net/2008/11/13/introduciendo-extjs-llamadas-ajax/ [Llamadas AJAX] Mayo 2011

[49] http://es.wikipedia.org/wiki/AJAX [Definicin AJAX] Mayo 2011

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

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

75