PROYECTO APLICACIÓN WEB.

“BICI-TOUR”

Materia: Optativa

Maestra: Olga Leticia Robles García

Integrantes:



ZULEYMA ALEJANDRA APARICIO ZIRANGUA
 ANDRÉS HERNÁNDEZ ESCUTIA
 BRAYAN MANUEL GUDIÑO MEDINA
 MARIA LIZETH PÉREZ AGUILAR
 LUIS FELIPE SOLÍS

INTRODUCCIÓN.

1
Contenido

INTRODUCCION ................................................................................................................................... 3
1. PROBLEMÁTICA DEL PROYECTO. ............................................................................................. 4
2. DEFINICIÓN DE LA IDEA . ........................................................................................................... 8
3. PROPUESTA A SOLUCIÓN . ........................................................................................................ 9
4. OBJETIVO. .................................................................................................................................. 9
5. PÚBLICO OBJETIVO . .................................................................................................................. 9
5.1.1 Alcances......................................................................................................................... 9
5.1.2 Limitaciones................................................................................................................. 10
5.1.3 JUSTIFICACIÓN. ................................................................................................................. 10
1. PROPUESTA DE LOGOTIPOS. ................................................................................................. 10

2
INTRODUCCION
Este presente proyecto está elaborado con el fin de dar a conocer al público en
general el desarrollo de una app en Android, que le permitirá al usuario observar
los eventos y recorridos en bicicleta que la empresa de este tipo ofrece.

En estos tiempos la actualización en las nuevas tecnologías va avanzando cada

día, por lo que nos vemos obligados a actualizarnos junto con ellas; la razón por la
que se desea desarrollar una app es con el propósito de optimizar la manera en
que la empresa de este auge maneja su servicio para que sus clientes puedan
realizar sus citas a través de la misma sin hacer filas.

A muchos de los clientes que la empresa maneja se les hace muy complicado en
veces bajar al lugar de la recepción para averiguar que paquetes manejan sobre
sus recorridos, pero con la app ya no es necesario que vayan en físico al lugar,
ellos podrán ver los recorridos y rutas que estos hacen desde sus hogares y
cuartos.

Este proyecto nos permitirá, aplicar los conocimientos adquiridos en la materia de

desarrollo de aplicaciones móviles, experimentando cada uno de los procesos en
los que se nos permitirá utilizar una metodología incremental y de alguna manera
poder ayudar a muchas empresas mediante esta propuesta, que les permitirá
disminuir los tiempos en que se realizan los procesos con los clientes, optimizando
de una manera práctica y fácil de usar. El desarrollo de la app pretende optimizar
el manejo de los clientes, cada vez que estos quieran realizar algún cambio,
permitiéndoles un uso factible y muy práctico.

3
C APÍTULO 1. FUNDAMENTO TEÓRICO .

1..1 Android Studio.

Es un IDE, una interfaz de desarrollo. En realidad, es una especie de escritorio de trabajo

para un desarrollador. Allí se encuentra nuestro proyecto, las carpetas del mismo, los
archivos que hay en él, y todo lo necesario para acabar creando la aplicación. Lo mejor de
Android Studio es que ha sido creado por Google y fue presentado hace tan solo unos
meses, por lo que no hablamos de una herramienta antigua y nada depurada, sino de un
programa muy moderno que encima ha sido creado por los mismos que han creado el
sistema operativo. (Madero, 2016)

2..1 Mockup.

Un mockup o maqueta es un diseño digital de una web y / o aplicación. Las

maquetas se utilizan en la fase de diseño inicial para visualizar ideas y conceptos
en el contexto del diseño web e incluyen la estructura de navegación, el sitio y los
elementos de diseño en detalle. Los mockups pueden ser plantillas producidas con
programas de edición de imágenes sin funcionalidad o diseños que se crean con
herramientas especiales de maquetas y donde los elementos de control ya están
vinculados con funciones simples.

3..1 Filtro.

Definición: Un filtro web, denominado normalmente "software de control de

contenidos", es un elemento de software diseñado para restringir los sitios web
que un usuario puede visitar en su ordenador. Estos filtros pueden utilizar una lista
blanca o una lista negra: la lista blanca solo ofrece acceso a sitios seleccionados
específicamente por la persona que configuró el filtro y la lista negra restringe el
acceso a sitios no deseados determinados por los estándares instalados en el
filtro. Estos programas buscan en la URL y en el contenido del sitio en cuestión las
palabras clave restringidas para, a continuación, bloquear o permitir la
conexión. (Karspersky, 2007).

4
1..1 Base de datos.
Definición: Una base de datos es una colección de información organizada
de forma que un programa de ordenador pueda seleccionar rápidamente
los fragmentos de datos que necesite. Una base de datos es un sistema de
archivos electrónico. (Díaz, 2008)
2..1 Diagrama Entidad Relación(E-R).
Definición: Un diagrama entidad-relación, también conocido como modelo
entidad relación o ERD, es un tipo de diagrama de flujo que ilustra cómo las
"entidades", como personas, objetos o conceptos, se relacionan entre sí
dentro de un sistema. Los diagramas ER se usan a menudo para diseñar o
depurar bases de datos relacionales en los campos de ingeniería de
software, sistemas de información empresarial, educación e investigación.
También conocidos como los ERD o modelos ER, emplean un conjunto
definido de símbolos, tales como rectángulos, diamantes, óvalos y líneas de
conexión para representar la interconexión de entidades, relaciones y sus
atributos. Son un reflejo de la estructura gramatical y emplean entidades
como sustantivos y relaciones como verbos. (Alvarez, 2003)
3..1 Diagrama relacional.
Definición: El modelo relacional, para el modelado y la gestión de bases de
datos, es un modelo de datos basado en la lógica de predicados y en la
teoría de conjuntos. (Alvarez, 2003)
4..1 Servidor web.
Definición: Un servidor Web es un programa que utiliza el protocolo de
transferencia de hiper texto, HTTP (Hypertext Transfer Protocol), para servir
los archivos que forman páginas Web a los usuarios, en respuesta a sus
solicitudes, que son reenviados por los clientes HTTP de sus
computadoras. Las computadoras y los dispositivos dedicados también
pueden denominarse servidores Web. (Rouse, 2007)
5..1 Programación orientada a objetos.
Definición: La programación orientada a objetos (POO) es un paradigma de
lenguaje de programación que emplea el concepto de objetos en sus
interacciones con el fin de desarrollar programas informáticos. En otras

5
 palabras, esta programación utiliza objetos como elementos fundamentales
en la construcción de la solución. (Leagsa, 2015)
6..1 HTML.
Definición: HTML es un lenguaje de marcado que se utiliza para el
desarrollo de páginas de Internet. Se trata de la sigla que corresponde a
HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto,
que podría ser traducido como Lenguaje de Formato de Documentos para
Hipertexto.

7..1 Visual Studio Code.

Definición: Un dispositivo móvil es un pequeño dispositivo de computación
portátil que generalmente incluye una pantalla y un método de entrada (ya
sea táctil o teclado en miniatura). Muchos dispositivos móviles tienen
sistemas operativos que pueden ejecutar aplicaciones. Las aplicaciones
hacen posible para los dispositivos móviles y teléfonos celulares se utilicen
como dispositivos para juegos, reproductores multimedia, calculadoras,
navegadores y más. (Navarro, 2015).
8..1 CSS.
Definición: CSS es una especificación desarrollada por el W3C (World Wide
Web Consortium) para permitir la separación de los contenidos de los
documentos escritos en HTML, XML, XHTML, SVG, o XUL de la
presentación del documento con las hojas de estilo, incluyendo elementos
tales como los colores, fondos, márgenes, bordes, tipos de letra,
modificando as la apariencia de una página web de una forma más sencilla,
permitiendo a los desarrolladores controlar el estilo y formato de sus
documentos. (Milenium, 2019)
9..1 Maquetación web.

Definición: El proceso de maquetación web es la transformación del diseño

de un producto web en un conjunto de archivos (HTML, css, js) capaces de
ser reproducidos por los navegadores web.

La maquetación web es el proceso en el que el prototipo gráfico también

denominado «layout» (con los requisitos estructurales y estéticos definidos
6
 y aprobados en un análisis inicial) pasa a transformase en código HTML,
css y js (estándares web) para que los navegadores puedan interpretarlo
correctamente. (Rouse, 2007)

10..1 Diccionario de datos.

Definición: Un diccionario de datos es un conjunto de definiciones que
contiene las características lógicas y puntuales de los datos que se van a
utilizar en el sistema que se programa, incluyendo nombre, descripción,
alias, contenido y organización.

7
C APÍTULO 2. DESCRIPCIÓN DEL TRABAJO.

1. PROBLEMÁTICA DEL PROYECTO.

En la actualidad muchos turistas visitan México y sus estados más
representativos.

Actualmente la mayoría de los usuarios, están relacionados con un Smartphone,

tableta digital o computadoras, en las cuales permanecen conectados a la red; por
lo que es más fácil atraer a los usuarios a través de sitios web o aplicaciones
móviles.

Para el siguiente proyecto se desea crear una aplicación móvil que les permita a
los usuarios interactuar en una app que les ofrezca recorridos en bicicleta, ya que
estos últimamente están de moda haciéndolo de una forma más fácil y sencilla, en
la app el usuario podrá revisar los recorridos que hacen dichas empresas o
cadenas hoteleras.

Se buscará datos relacionados a los promotores turísticos dedicados a ofrecer el

servicio de recorridos en bicicleta y ver cuántos de ellos cuentan con una
aplicación móvil, para así mismo ofrecerles esta propuesta, el cual se desarrollará
de una manera fácil de usar, con una buena imagen del sitio con la que el usuario
se sienta cómodo y pueda interactuar sin ningún problema.

2. DEFINICIÓN DE LA IDEA .
“Bici Tour” es una app para empresas que ofrecen recorridos en bicicleta a lo largo
de todo el país, principalmente por zonas turísticas haciendo uso de las
tecnologías. Esta app contará con los siguientes aspectos:

 Fotografías de las zonas que se visitarán.

 Banners
 Mapa de los recorridos
 Rutas
 Catálogo de eventos.
 Filtro de búsqueda.

8
  Catálogo de recorridos.
 Datos generales del recorrido.
 Tiempo estimado de recorrido.
 Punto de inicio del recorrido.
 Costo y descripción

 Mapa del recorrido.

3. PROPUESTA A SOLUCIÓN.
Apoyar a las empresas del sector turístico y hotelero que ofrece el servicio de
recorridos en bicicleta con una app de promoción y comercialización, haciendo uso
del mismo para manejar con más facilidad su servicio y dar a los clientes una
mejor experiencia de una manera fácil y práctica de usar.

4. OBJETIVO.
Crear una app, que permita a los usuarios interactuar con los recorridos en
bicicleta a lo largo de todo el país, con empresas de tipo turístico y hotelero, ya
que son las más cercanas a este tipo de eventos; esto con el fin de hacer uso
adecuado de las tecnologías de la información, también haciendo conciencia
sobre el medio ambiente y para una mayor comodidad hacia los usuarios.

5. PÚBLICO OBJETIVO .
La app estará dirigida principalmente, para las empresas de turismo que realicen o
tengan una sección de recorrido en bicicleta. Dicha app será muy fácil de manejar;
será didáctica, interactiva y fácil de usar tanto para niños, adultos y personas de la
tercera edad.

6. Alcances.
La app web está planteada para que el público meta este enfocado en las
empresas que se dediquen a realizar recorridos en bicicletas, con el fin de captar
la atención de los usuarios meta, permitiéndoles conocer todas las maravillas que
proporciona el país y sus estados.

9
Por eso mismo se decide crear un sitio web de recorridos en bicicleta, a través del
impulso de campañas para cuidar el medio ambiente, con la finalidad de que las
personas tengan un mayor conocimiento de los lugares que puede visitar en el
país, haciendo su estancia un poco más divertida y saludable a través de estos
recorridos que ofrecen las empresas.

7. Limitaciones.

8. JUSTIFICACIÓN.
Al crear el proyecto “Bici tour” se planea ayudar al sector turístico y hotelero para
que faciliten el que sus clientes se informen de los recorridos que estos ofrecen a
través de la página web y así mismo dar a conocer los posibles lugares que
pueden visitar durante su estadía de una manera divertida y sana, contribuyendo
con el cuidado del medio ambiente, dándoles una experiencia inigualable.

CAPÍTULO 3. DISEÑO DE INTERFACES Y PROPUESTA DE LOGOTIPOS.

9. PROPUESTA DE LOGOTIPOS.
Se llevó acabó la elaboración de diferentes logotipos, que representarían la app
web como tal. Dando a conocer dos logotipos propuestos por los integrantes del
equipo.

A continuación, se muestran los diseños:

Figura 1: Logotipo 1
Figura 2: Logotipo 2

10
CAPÍTULO 4. ASPECTOS BÁSICOS DEL PROYECTO.

10. REQUERIMIENTOS NO FUNCIONALES.

R1: El sistema será una aplicación móvil, en la que todos los clientes
puedan acceder a través de una página web desde sus casas, con acceso a
internet o datos móviles.

R2: El sistema contará con un servicio de 24 horas.

R3: Contará con una interfaz agradable para el usuario.

R4: El usuario podrá interactuar en la página sin ningún problema.

R5: Podrá comprar consultar el servicio que desee.

R6: La app será compatible únicamente en Android.

R8: La app debe mantener los datos de los usuarios registrados, bien
almacenados seguros y protegidos.

R9: La app debe contener respuestas inmediatas.

R10: Contacto, muestra el correo electrónico de la página, número de

teléfono de oficina de la empresa y redes sociales de contacto.

R11: MENÚ, ESTA PARTE MUESTRA AL USUARIO UNA LISTA , EN CUAL SE PUEDE
DESPLAZAR CON FACILIDAD.

R12: LA IMAGEN DE LA PÁGINA SE MOSTRARÁ AL INICIO.

R13: CONTENIDO DE APP , LA APP CONTENDRÁ UN CONTENIDO AGRADABLE

PARA LOS VISITANTES .

R14: EVENTO, ESTE APARTADO LE MUESTRA AL USUARIO LOS EVENTOS

DISPONIBLES EN LOS QUE PUEDE PARTICIPAR .

11
 11. REQUERIMIENTOS FUNCIONALES.
R1: Opción de búsqueda, permite que los usuarios puedan buscar algún
estado, evento, nombre de evento en específico.

R2: Catalogo, muestra el contenido de los eventos, así como una breve
descripción, tiempo, costo y tipo de evento.

R3: Caja de comentarios, le permite al usuario realizar un comentario respecto

al servicio que se le está brindando.

DISEÑO DE INTERFACES (MOCKUP) DE LA APP.

En la segunda fase se muestran los diseños, maquetación, y diagramas que

ayudaron al desarrollo del proyecto para el siguiente capítulo.

12
 CAPÍTULO 4. RESULTADOS FINALES.
En este apartado se muestra el resultado final de cómo quedará la aplicación y alguna de sus
funciones que esta realiza.

4.1 Página inicio.

La aplicación es interactiva con el usuario ya que al usarla es de manera muy fácil

recibir la información como se muestra en la imagen se muestran tres botones de
acceso a las diferentes interfaces donde se mostrará información y en una de ellas
se podrá insertar un comentario para mejoramiento de la app.

13
4.1.2 Catalogo.

En el apartado de catálogo se mostrarán los diferentes recorridos

disponibles dentro y fuera de la ciudad en los cuales se muestra un botón
de registro para poder ingresar al recorrido.

14
4.1.3 Contacto.

En esta interfaz los usuarios podrán dar su opinión acerca de la información

ingresada dentro de la app y dicho comentario se guardará en una base de
datos

15
 BIBLIOGRAFÍA.

Referencias
Alvarez, M. A. (19 de 11 de 2003). Desarrollowe.com. Obtenido de Desarrolloweb.com:
https://desarrolloweb.com/articulos/1325.php

Bueno, P. C. (03 de 08 de 2018). OpenWebinars. Obtenido de OpenWebinars:

https://openwebinars.net/blog/que-es-django-y-por-que-usarlo/

Díaz, A. (26 de 07 de 2008). MasAdelante.com. Obtenido de MasAdelante.com:

https://www.masadelante.com/faqs/base-de-datos

Díaz, A. (06 de 02 de 2017). PMOInformatica. Obtenido de PMOInformatica:

http://www.pmoinformatica.com/2017/02/requerimientos-funcionales-ejemplos.html

Karspersky. (16 de 10 de 2007). Karspersky. Obtenido de Karspersky:

https://www.kaspersky.es/resource-center/definitions/web-filter

Leagsa, L. (19 de 01 de 2015). Alegsa.com. Obtenido de Alegsa.com:

http://www.alegsa.com.ar/Dic/programacion_orientada_a_objetos.php#targetText=La%2
0programaci%C3%B3n%20orientada%20a%20objetos,fin%20de%20desarrollar%20progra
mas%20inform%C3%A1ticos.&targetText=%2D%20Un%20objeto%20es%20una%20entida
d,(comportamiento)%20y%20

Milenium. (10 de 03 de 2019). Milenium. Obtenido de Milenium:

https://www.informaticamilenium.com.mx/es/temas/que-es-una-pagina-web.html

Rouse, M. (30 de 04 de 2007). TechTarget. Obtenido de TechTarget:

https://searchdatacenter.techtarget.com/es/definicion/Servidor-Web

16