Tema: Locales Tursticos de la Provincia de Loja

Objetivo

1 Marco Terico

Lenguaje de programacin Python

Es un lenguaje de programacin poderoso y fcil de aprender. Cuenta con estructuras de
datos eficientes y de alto nivel y un enfoque simple pero efectivo a la programacin
orientada a objetos (ros, 2015).
Fue creado en 1991 por Guido van Rossum. Actualmente es administrado por la Fundacin
de Software de Python y se desarrolla como un proyecto de cdigo abierto.
Framework Django
Django es un framework web de cdigo abierto escrito en Python que permite construir
aplicaciones web ms rpido y con menos cdigo (DjangoSoftwareFoundation, 2016).
Django fue inicialmente desarrollado para gestionar aplicaciones web de pginas orientadas
a noticias de World Online, ms tarde se liber bajo licencia BSD. Django se centra en
automatizar todo lo posible y se adhiere al principio DRY (Don't Repeat Yourself),
(DjangoSoftwareFoundation, 2016).
Este framework se basa en el diseo MTV (Modelo Plantilla Vista), siendo el modelo donde
se asegura la persistencia de los datos, la plantilla que es una pgina html5 con ciertas
etiquetas de Django, y la vista que es donde se establece la lgica del negocio.
Es importante marcar la diferencia entre el diseo MTV y el MVC (Modelo Vista
Controlador): El modelo en Django sigue siendo modelo. La vista en Django se llama
plantilla (Template). El controlador en Django se llama vista.

Fig. 1. Modelo plantilla vista de Framework Django.

En la figura 1 se puede apreciar como trabaja Django: En primer lugar el navegador enva
una solicitud a URLConf quien la interpreta para determinar qu vista es a la que se hace
referencia, la vista seleccionada interacta con el modelo para obtener los datos, luego
hace un llamado a la plantilla, esta genera una respuesta a la solicitud del navegador.
Base de Datos Postgres
PostgreSQL es un sistema de gestin de bases de datos objeto-relacional, distribuido bajo
licencia BSD y con su cdigo fuente disponible libremente
(ThePostgreSQLGlobalDevelopmentGroup, 2016).
Postgres maneja un modelo cliente/servidor con multiprocesos para asegurar la estabilidad
del sistema. As un posible fallo en el sistema no afectara al resto y este continuar
funcionando.
Api de Google Maps
Google Maps es HTML, CSS y JavaScript unidos. Los mapas son imgenes que se cargan
en el fondo a travs de consultas ejecutadas por la tecnologa de AJAX, y se insertan en un
<div> en la pgina HTML. Mientras navegas en el mapa, el API enva informacin acerca de
las nuevas coordenadas y los niveles de zoom del mapa a travs de AJAX y esto retorna
las imgenes (Zhu, 2012).
API Google Charts
El API Google Charts permite a los usuarios crear grficos interactivos, como parte de
Google Documentos, hojas de clculo de y pginas web.
Google Charts ofrece una forma perfecta para visualizar los datos en su sitio web. De los
grficos de lneas simples a los mapas de rboles jerrquicos complejos, la galera grfica
ofrece un gran nmero de tipos de grficos y listas para su uso.

Otras
Fuera de las herramientas ya mencionadas se hace uso de otras como:
HTML5 que nos ofrece tres caractersticas: estructura, estilo y funcionalidad. Segn
(gauchat, 2012) HTML5 "es considerado el producto de la combinacin de HTML, CSS y
JavaScript". HTML es donde se puede manipular la estructura, CSS nos permite mostrar
dicha estructura y la informacin en pantalla y JavaScript que segn (valbuena, 2014) es
"el lenguaje de interpretado en el cliente por el navegador al momento de cargarse la
pgina, es multiplataforma, orientado a eventos con manejo de objetos". Para ayudar a
quienes hacen uso de HTML5 se pueden encontrar una gran variedad de frameworks; como
es Twitter BootStrap y Foundation 4.
Para el desarrollo de esta aplicacin se hace uso de BootStrap que es una coleccin de
herramientas de software libre para la creacin de sitios y aplicaciones web. Contiene
plantillas de diseo basadas en HTML y CSS con tipografas, formularios, botones, grficos,
barras de navegacin y dems componentes de interfaz, as como extensiones opcionales
de JavaScript, adems permite la adaptacin de la interfaz dependiendo del tamao del
dispositivo en el que se visualice sin que el usuario tenga que hacer nada, esto se
denomina Responsive Web Design (valbuena, 2014).

Ahora para poder llevar a cabo la aplicacin web es necesario un editor de texto que nos
permita crear nuestra aplicacin, para lo cual se hace uso de Sublime text 2 que es un
editor de texto sofisticado, soporta Snippets, plugins varios y sistemas de construccin de
cdigo, pero tambin tiene lo necesario para escribir artculos o textos de manera habitual.
Se caracteriza por la cantidad y calidad de sus prestaciones, entre las que podemos
encontrar algunas tan interesantes como la multi seleccin, el multi cursor y el multi layout,
gracias a las que podremos editar mucho ms fcilmente cualquier cdigo.

2 Metodologa
2.1 Recoleccin de Informacin
Como punto de partida, la informacin sobre los locales tursticos en la provincia de loja fue
proporcionada por el Ministerio de Turismo, mediante el Catastro de Locales Tursticos del
ao 2015. La informacin cuenta con 721 registros, la cual se transform de formato excel a
csv (Figura 2) para ser importada a la Base de Datos.

Fig. 2. Catastro de Locales Tursticos en .csv.

Para complementar la informacin de los locales, como en el caso de los horarios, se
acudi a la pgina Edina: https://www.edina.com.ec. En cuanto a otros datos, como las
imgenes (fachada) de cada local, se us streetview y el buscador de google, cuidando
siempre que la informacin sea confiable.
2.2 Modelado de base de datos
Como la informacin obtenida tena redundancia se procedi a normalizar la misma, con el
fin de mejorar el rendimiento de la aplicacin al momento de realizar consultas a la base de
datos. El diseo de la base de datos se la realiz en la herramienta SQL Power Architect
(Figura 3), ya que a posterior nos permite exportar el modelo en lenguaje SQL para la
creacin de nuestra base de datos Postgres.

Fig. 3. Modelo de la Base de Datos

A continuacin se describe cada entidad de la base de datos con sus respectivos

atributos:
localidades_turisticas: almacena informacin referente a cada local turstico, como por
ejemplo: nombre, propietario, telfono, direccin, latitud y longitud (utilizadas para graficar la
ubicacin de cada local).
redes sociales: almacena enlaces a redes sociales de los locales.
categorias: almacena la categora de cada local de acuerdo al servicio que presta.
actividades_turisticas: catlogo de actividades tursticas, a las que los locales pueden
pertenecer.
subactividades_turisticas: catlogo subdivisin de las actividades. En esta entidad se
especifica el tipo de servicio que presta el local.
horarios: almacena uno o mltiples horarios por cada local.
dias_horario: almacena el segmento de das, en el cual estn activos los horarios de la
entidad anterior.
imagenes: puede almacenar una o mltiples imgenes por cada local.
parroquias: catlogo de parroquias por cada cantn de la provincia de Loja.
cantones: catlogo de cantones de la provincia de Loja.
provincias: catlogo de provincias del Ecuador.
2.3 Carga de Datos
Una vez realizado el modelo de la base de datos, se cre archivos .csv para cada entidad
de la misma (Figura 4), esto con el fin de facilitar la importacin de la informacin a la base
de datos.

Fig. 4. Archivos .csv para cada entidad de la base de datos

Seguido se utiliz scripts para cargar los datos a la base de datos, uno por cada archivo.
(Figura 5)

Fig. 5. Ejemplo de script para importar datos a la base de datos.

2.4 Construccin de la aplicacin
Esta aplicacin se desarroll en el lenguaje Python en su versin 2.7, mediante el
framework Django 1.9 que nos permite construir aplicaciones web mas rpido y con menos
lneas de cdigo.

2.4.1 Maquetacin de la aplicacin

Para el maquetado de la pgina se hace uso de HTML5, que es un lenguaje de
maquetacin considerado el producto de la combinacin de HTML, CSS, y JavaScript; con
la ayuda del framework Twitter BootStrap que contiene varias herramientas (plantillas
HTML, CSS con tipografas, formularios, extensiones de JavaScript, y su interfaz se adapta
de acuerdo al tamao), para construir una pgina web.
2.4.2 Recuperacin de Datos y visualizacin en la aplicacin
Para la gestin de los datos hacemos uso de una base de datos en PostgreSQL 9.4 de
cdigo abierto donde se almacena los datos de cada uno de los locales. Esto bajo una
arquitectura cliente - servidor bajo el modelo MTV (Modelo Template Vista) que nos ofrece
Django.
2.4.3 Implementacin API Google maps
Para proporcionar la ubicacin de los locales tursticos se hace uso de la API de Google
Maps utilizada en cientos de pginas web en todo el mundo. Consiste en un conjunto de
archivos JavaScript que contiene las clases, mtodos y propiedades que se usan para el
comportamiento de los mapas.

2.4.4 Implementacin API Google Charts

3 Resultados

La aplicacin est estructurada de la siguiente manera:

Home
Locales Tursticos
Local Turstico
Mapa
Grficos
Grficos actividades
Grficos subactividades
Grficos cantones
3.1 Home
La pgina de inicio est estructurada en cinco secciones. La primera muestra una
introduccin a la pgina web (Figura 6).

Fig. 6. Home: Primera seccin: Introduccin a la pgina web.

En la segunda seccin encontramos los servicios que presta la pgina web. (Figura 7)

Fig. 7. Home: Segunda seccin: Servicios que presta la pgina web.

En la tercera seccin encontramos locales tursticos, los cuales se muestran aleatoriamente
como sugerencia para el usuario. (Figura 8)

Fig. 8. Home: Tercera seccin: Locales presentados aleatoriamente.

En la cuarta seccin se muestra una descripcin de las actividades tursticas, mediante las
cuales se categoriza los locales. (Figura 9)

Fig. 9. Home: Cuarta seccin: Descripcin de las actividades tursticas.

Finalmente, en la quinta seccin se muestra la informacin del equipo de desarrollo. (Figura
10)

Fig. 10. Home: Quinta seccin: Informacin del Equipo de Desarrollo.

3.1.1 Locales Tursticos

En la pgina de locales tursticos, en un inicio se muestra todos los locales de la base de
datos. Pero tambin podemos realizar bsquedas por el nombre del local. (Figura 11)

Fig. 11. Locales Tursticos: Muestra todos los locales o los que coincidan con el criterio de
bsqueda.
3.1.1.1. Local Turstico
Esta es la pgina en la que se muestra la informacin referente a cada local. Informacin
como: datos del local, clasificacin, contacto, ubicacin, personal y galera. (Figura 12)

Fig. 12. Local Turstico: Muestra la informacin del local.

La ubicacin de cada local se muestra en el mapa de google, en el cual se aadi la
funcionalidad de trazar la ruta ms corta, desde la posicin actual hasta la ubicacin del
local. (Figura 13)

Fig. 13. Local Turstico: Mapa: Muestra la ubicacin del local, as como la ruta ms corta
desde la posicin actual.
3.1.2 Mapa
Mediante el API de Google Maps se grafica la ubicacin de todos los locales. (Figura 14)

Fig. 14. Mapa: Muestra la ubicacin de todos los locales.

3.1.3 Grficos
En esta pgina, mediante el API de Google Charts se visualiza estadsticas en relacin a los
locales, actividades tursticas, subactividades tursticas y cantones. (Figura 15)

Fig. 15. Grficos: Muestra estadsticas.

4 Conclusiones

En cuanto a las tecnologas utilizadas, especficamente el framework de Django bajo el

lenguaje de programacin Python; nos permite desarrollar proyectos web con una gran
facilidad lo que es una gran ventaja en comparacin a otros frameworks; ya que nos evita
tener que hacerlo todo desde cero, como por ejemplo; tener que crear un sitio de
administracin, ya que django nos proporciona uno por defecto donde se puede manipular
los datos. Estas ventajas son de gran utilidad cuando se requiere emprender un proyecto ya
que nos ahorra horas de trabajo, lo cual en un ambiente real de desarrollo supondra ahorro
de dinero.
En lo referente al servicio de geolocalizacin, vemos como la API de Google Maps nos
ofrece una gran variedad de caractersticas que se pueden implementar dentro del mapa,
siendo una la que nos permite establecer la ruta desde nuestra ubicacin actual hasta un
local. Estas caractersticas facilitan de manera significativa encontrar la ubicacin de un
local para los usuarios (turistas y pblico en general) de la aplicacin, lo que impulsa el
turismo y por ende la economa de nuestra ciudad.
La informacin es importante, pero ms importante es cmo la visualiza el usuario. Es all
donde el uso de algunas herramientas como el API de Google Chart nos brinda una serie
grficos en su galera que nos permite cambiar radicalmente la forma en la que se muestra
los datos, pasando de texto plano a grficos que hacen que los datos sean ms fciles de
comprender, lo que mejora la experiencia del usuario al hacer uso de la aplicacin.

5 Recomendaciones
Una de las principales recomendaciones que se puede hacer luego de haber llevado a cabo
este proyecto, es la necesidad de usar un software de control de versiones (GitLaw,
GitHub), que facilita en gran medida el desarrollo de la aplicacin; ms an si esta se lleva a
cabo por un grupo de desarrollo.
Bibliografa

Pea Ros, R. (2015). Paseo por la programacin estructurada y modular con

Python.ReVisiN, 8(1). Consultado el enero 28, 2016, dehttp://www.aenui.net/ojs/index.php?
journal=revision&page=article&op=view&path%5B%5D=184&path%5B%5D=299
Django Software Foundation. (n.d.). Django overview | Django. Retrieved January 15, 2016,
from https://www.djangoproject.com/start/overview/
The PostgreSQL Global Development Group. (n.d.). PostgreSQL: About. Retrieved January
15, 2016, from http://www.postgresql.org/about/
Ying Zhu, "Introducing Google Chart Tools and Google Maps API in Data Visualization
Courses", IEEE Computer Graphics and Applications, vol.32, no. 6, pp. 6-9, Nov.-Dec. 2012,
doi:10.1109/MCG.2012.114
Valbuena Aponte, A. M. (2014). Gua comparativa de Frameworks para los lenguajes HTML
5, CSS y JavaScript para el desarrollo de aplicaciones Web.