3. PLANTEAMIENTO DE LA PROPUESTA
3.2. Metodología de la propuesta
3.2.2. FASE 2 Diseño
La interfaz de usuario permitirá ingresar cualquier cantidad de datos y mostrar la información solicitada por el turista al momento de requerirla.
Además ésta información debe ser clara e intuitiva, para facilitar la interacción del cliente con el sistema. Dicho sistema busca llegar al cliente con diseños simples y sencillos. Hay
9 precautelar que no sea muy complicado para conseguir un diseño fácilmente implementable que con el tiempo costará menos tiempo y esfuerzo desarrollar.
La pantalla principal deberá mostrar una galería de imágenes del país, en la parte superior se mostrarán las opciones que el sistema lo requiera para que el turista las seleccionen de acuerdo con sus necesidades.
Dentro del el menú se presentan 3 opciones principales (selva, tours diarios, galería, mapa turístico, contactos, sistema) a los que se puede acceder, en ellos se encuentra la información requerida como se muestra a continuación:
Gráfico No. 16 PÁGINA PRINCIPAL DE LA APLICACIÓN
Elaborado por: Oscar Troya
Tabla No. 16 Descripción técnica de la página principal
DETALLE DESCRIPCIÓN
Color de fondo #2A366A
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
10
Tipo de foto en uso Fotografías de los paisajes de los sitios
turisticos Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra un mensaje de bienvenida que indica toda la información de la agencia de viajes y el contenido al que se puede acceder con su respectivo banner que muestra una serie de imágenes de los sitios turísticos a los que se puede visitar.
Gráfico No. 17 PÁGINA DE INFORMACIÓN SITIOS TURÍSTICOS DE LA SELVA
Elaborado por: Oscar Troya
Tabla No. 17 Descripción técnica de la página de información sitios turísticos de la selva
DETALLE DESCRIPCIÓN
11
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso Imágenes de los sitios turísticos de la selva
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra en una lista las opciones de sitios turísticos a los que podemos acceder de una específica región con sus imágenes e información respectivas con la posibilidad de ampliarlas para una mayor especiación.
Gráfico No. 18 PÁGINA DE INFORMACIÓN DE LOS TOUR DIARIOS QUE REALIZA LA AGENCIA
Elaborado por: Oscar Troya
Tabla No. 18 Descripción técnica de los tours diarios de la agencia.
DETALLE DESCRIPCIÓN
12
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso Imágenes de los sitios turísticos de la selva
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra en una lista las opciones de sitios turísticos a los que podemos acceder de una específica región con sus imágenes e información respectivas con la posibilidad de ampliarlas para una mayor especiación.
Gráfico No. 19 Página de la información completa de un sitio turístico
Elaborado por: Oscar Troya
Tabla No. 19 Descripción técnica de la página de información
DETALLE DESCRIPCIÓN
13
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso Imagen ampliada del lugar turistico
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra toda la información detallada acerca de un sitio turístico en específico el itinerario que se llevara a cabo dependiendo de los días del tour que se contrató y de todos los accesorios que se necesita llevar.
Gráfico No. 20 GALERÍA DE FOTOS
Elaborado por: Oscar Troya
Tabla No. 20 Descripción técnica de la galería
DETALLE DESCRIPCIÓN
14
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso Tira de imágenes de los los sitios turísticos
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra todas las imágenes de nuestra galería de los sitios turísticos con los que maneja la agencia con sus debidos estilos con ampliaciones de cada imagen.
Gráfico No. 21 TRAZADO DE LAS RUTAS DE LA APLICACIÓN WEB Y LA APICACACIÓN MOVIL DEPENDIENDO DEL PUNTO DE ORIGEN AL PUNTO
DE DESTINO
Elaborado por: Oscar Troya
Tabla No. 21 Descripción técnica del trazado de rutas
15
Color de fondo #FFFFFF
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra el módulo de geolocalización es decir el trazado de las rutas que el usuario puede gestionar a libre disposición como tal debe indicar un punto de inicio y uno de destino, el tipo de viaje, a continuación se muestra toda la trayectoria y las indicaciones de la ruta.
Gráfico No. 22 Página de contactos
Elaborado por: Oscar Troya
Tabla No. 22 Descripción técnica de la página de contactos
16
Color de fondo #FFFFFF
Tipografía de menú normal 20px 'Yanone Kaffeesatz', sans-
serif
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra todo los datos informativos de la agencia además permite llenar un formulario de contactos hacia la agencia, indica el punto exacto de la ubicación de la oficina central.
Gráfico No. 23 Página de login para la parte de administración
Elaborado por: Oscar Troya
Tabla No. 23 Descripción técnica de la página de login
DETALLE DESCRIPCIÓN
17
Tipografía de menú
Tipografía del contenido font-family:Open Sans, Arial, Helvetica, sans-serif
Tipo de foto en uso
Elaborado por: Oscar Troya
DESCRIPCIÓN DE LA PANTALLA
Como se observa en la pantalla se muestra el módulo de ingreso de la parte administrativa con sus respectivas validaciones.
18
ADMINISTRACIÓN DE LA PÁGINA
Gráfico No. 24 Proceso de administración de la página ADMINISTRACIÓN DE LA PÁGINA
Cargando página de inicio
Una vez ingresado los datos de sesión se procede a cagar la página de inicio
Página principal para guardar los puntos del mapa aquí se nos muestran todos los puntos ya registrados en la aplicación con el
posicionamiento actual como son el área de guardado, área de modificar, y el buscador de los puntos ya registrados.
Área de guardado de los puntos del mapa con su respectiva información una vez marcado los putos a registrar con sus validaciones se pulsa el botón guardar se muestra un mensaje de guardado, se actualiza y aparece en el mapa ya el nuevo punto registrado.
Área de edición de los puntos ya registrados se localiza el punto a modificar se carga en el respectivos cuadros de texto se realizan los cambios y se pulsa el botón modificar se actualiza el formulario y se visualiza los nuevos.
19
b) Glosarios de Términos
A continuación se presenta una especificación de los términos, nombres de métodos y clases que contribuye a entender el diseño y facilitar sus posteriores ampliaciones y la reutilización del código.
Tabla No. 24 Glosario de términos.
Término Explicación
Openstreetmap OpenStreetMap es una herramienta para crear mapas libres y editables. Estos mapas se crean utilizando información geográfica capturada con dispositivos GPS móviles.
Josm JOSM es un editor extensible para OpenStreetMap (OSM) escrito en Java 7
Sublime Text Sublime Text es un editor de texto y editor de código fuente está escrito en C++ y Python para los plugins.
jQuery Es un conjunto de bibliotecas orientadas a la reutilización a muy gran escala de componentes software para el desarrollo rápido de aplicaciones, típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.
jQuery Es un framework de JavaScript para facilitar, el acceso a los elementos del DOM, los efectos, interactuar con los documentos HTML, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.
Ajax Es una tecnología que busca evitar las demoras propias de las peticiones y respuestas del servidor, hace posible realizar peticiones y obtener respuesta sin necesidad de recargar la página web completa y usar esos datos para, a través de JavaScript, modificar los contenidos de la página creando efectos dinámicos y rápidos.
20
c) Refactorizar
En el presente sistema se busca mejorar y modificar la estructura y codificación de códigos ya creados sin alterar su funcionalidad, para lo que se utilizó el SublimeText con el objetivo de optimizar su funcionamiento, el proyecto está totalmente comprometido con la idea de la innovación de código abierto de conducción de nuevas ideas.
e) Guiones de Usuarios
Casos de uso del Cliente
Gráfico No. 25 Caso de uso Cliente.
Elaborado por: Oscar Troya
El actor turista (usuario) está relacionado con cuatro casos de uso: Solicitar información turística, realizar consultas de atractivos turísticos y hoteleros, leer respuestas de consultas, y consultar rutas de acceso, todos estos casos de uso.
Casos de uso del Área de Turismo
Gráfico No. 26 Casos de uso del área de turismo
21 Casos de uso del Administrador
Gráfico No. 27 Caso de uso del Administrador.
Elaborado por: Oscar Troya
El Administrador está relacionado con tres casos de uso: Consultar información, cambiar el estado de los atractivos turísticos e imprimir los resultados.
Casos de uso del módulo de localización.
Gráfico No. 28 Casos de uso del módulo de localización.
22 Casos de uso del módulo de seguimiento.
Gráfico No. 29 Casos de uso del módulo de seguimiento
Elaborado por: Oscar Troya
Casos de uso del módulo de gestión.
Gráfico No. 30 Casos de uso del módulo de gestión
23 Resumen de Stakeholders
Tabla No. 25 Resumen de stakeholders
NOMBRE DESCRIPCIÓN RESPONSABILIDADES
Oscar Troya Desarrollador del sistema.
Base de datos, diseño, registros, ingresos.
Elaborado por: Oscar Troya
Resumen de Asesores
Tabla No. 26 Resumen de asesores
NOMBRE DESCRIPCIÓN RESPONSABILIDADES
Ing. Carlos Martínez Asesor de tesis Revisión de aplicación de tesis y del documento.
Elaborado por: Oscar Troya
Perfil de los Stakeholders
Desarrollador del Sistema
Tabla No. 27 Desarrollador.
REPRESENTANTE Oscar Silvio Troya Carbajal
DESCRIPCIÓN Desarrolladora de la aplicación móvil.
TIPO Estudiante de Sistemas
RESPONSABILIDADES Base de datos, diseño, registros, ingresos
24
f) Diseño de la Base de Datos “BDD” Diagrama relacional
Gráfico No. 31 Base de Datos.
25