Kevin Salazar - Trabajo de Suficiencia Profesional - Titulo Profesional - 2018

Facultad de Ingeniería
Carrera Profesional de Ingeniería de Software
Para optar el Título Profesional de Ingeniero de

Software
"ANÁLISIS, DISEÑO, DESARROLLO E

IMPLEMENTACIÓN DE LA APLICACIÓN WEB DE
ALOJAMIENTO DE CASAS Y DEPARTAMENTOS PARA
EL EVENTO INTERNACIONAL
CONVENCIÓN MINERA - PERUMIN 33"
Autor:
Kevin Edgar Salazar Ruiz
Asesor:
Pedro Angel Molina Velarde
Lima – Perú
2018
DEDICATORIA
A mis padres Edgar Salazar, Milagros Ruiz
Por darme la vida y motivarme a cumplir mis metas, por
haberme forjado como la persona que soy, por los valores que me enseñaron,
por simplemente ser ellos, gracias padre y madre.
A mis hermanos Edwar y Fiorella
quienes compartieron conmigo toda mi vida universitaria,
por su incondicional apoyo y motivación en cada momento
Gracias hermanos.
II
AGRADECIMIENTO
Un agradecimiento en especial a los Grupos de
Comunidad Escuela Digital y PHP en español por su
Valioso apoyo en mi formación profesional y
Al Ing. Pedro Molina,
por su desempeño brindando en el desarrollo
del proyecto de mi tesis.
III
ÍNDICE
DEDICATORIA ................................................................................................................. II
AGRADECIMIENTO ....................................................................................................... III
INTRODUCCIÓN ............................................................................................................. IX
CAPITULO I ................................................................................................................... 11
ASPECTOS GENERALES ............................................................................................ 11
1.1 DEFINICIÓN DEL PROBLEMA ............................................................................11
1.2 DEFINICIÓN DE LOS OBJETIVOS .....................................................................11
1.2.1 Objetivos generales ......................................................................................11
1.2.2 Objetivos específicos ...................................................................................12
1.3 JUSTIFICACIÓN DE LA INVESTIGACIÓN ........................................................13
CAPITULO II .................................................................................................................. 15
FUNDAMENTO TEÓRICO ............................................................................................ 15
2.1 Antecedentes.................................................................................................................15
2.2 Marco Teórico ................................................................................................................15
2.2.1 IIMP .........................................................................................................................16
2.2.2 Misión del IIMP .......................................................................................................16
2.2.3 Visión del IIMP .......................................................................................................16
2.2.4 Valores del IIMP .....................................................................................................17
2.2.5 PERUMIN 33 CONVENCIÓN MINERA ..............................................................17
2.2.6 Sitio web..................................................................................................................18
2.2.7 Aplicaciones web ...................................................................................................19
2.2.8 Lenguaje por el Lado del Servidor (Back-end) ..................................................20
2.2.9 Frameworks para aplicaciones web ....................................................................24
2.2.10 Arquitectura Cliente-Servidor .............................................................................26
2.2.11 Ventajas que ofrece el esquema Cliente-Servidor:.........................................28
2.3.0 Patrón de desarrollo de software MVC ...............................................................29
2.3.1 Base de datos ........................................................................................................31
2.3.2 MySQL ....................................................................................................................33
2.3.3 PhpMyAdmin ..........................................................................................................34
2.3.4 SQLyog ...................................................................................................................36
2.3.5 GitHub .....................................................................................................................37
2.3.6 Experiencia de Usuario (UX) ................................................................................38
IV
CAPITULO III ................................................................................................................. 39
ANÁLISIS ....................................................................................................................... 39
3.1 ANÁLISIS DE LOS REQUERIMIENTOS ...................................................................39
3.1.1 Requerimientos Funcionales ................................................................................41
3.1.2 Requerimientos no Funcionales .........................................................................57
DISEÑO .......................................................................................................................... 68
3.2 Diseño de base de datos para la aplicación web. ..................................................68
3.2.1 Diccionario de datos ..............................................................................................68
3.3 Diseño de Interfaces .....................................................................................................72
DESARROLLO............................................................................................................... 83
3.4 LA APLICACIÓN ...........................................................................................................83
3.4.1 PAGINA HOME ......................................................................................................83
3.4.2 PUBLICA TU ANUNCIO (REGISTRO) ...............................................................84
3.4.3 ACCESO ANUNCIANTES (LOGIN) ....................................................................85
3.4.4 GALERÍA ................................................................................................................85
3.4.5 FOOTER DE LA PAGINA WEB ...........................................................................86
3.4.1 PAGINA DE USUARIO IDENTIFICADO ............................................................87
3.4.2 AGREGAR ANUNCIO...........................................................................................88
3.4.3 DETALLES | AGREGAR ANUNCIO ...................................................................91
3.5 CORREO DE VERIFICACIÓN DE PUBLICACION DE ANUNCIO .......................95
3.6. EDITAR ANUNCIO ......................................................................................................96
3 VER ANUNCIO .................................................................................................................98
3.8 BUSCAR ANUNCIOS ................................................................................................100
3.9 CONTACTAR CON EL ANUNCIANTE ...................................................................101
3.10 PANEL DE ADMINISTRACIÓN ............................................................................103
CONCLUSIONES ......................................................................................................... 107
RECOMENDACIONES ................................................................................................ 109
REFERENCIAS BIBLIOGRÁFICAS ........................................................................... 112
Bibliografía .................................................................................................................. 112
V
INDICE DE TABLAS
Tabla 1 Frameworks para aplicaciones web ................................................... 26

Tabla 2 RF01 Login Administrador .................................................................. 42
Tabla 3 RF02 Mostrar anuncios administrador ................................................ 42
Tabla 4 RF03 Aprobar anuncio ....................................................................... 43
Tabla 5 RF04 Desaprobar anuncio ................................................................. 43
Tabla 6 RF05 Eliminar Anuncio ................................................................... 44
Tabla 7 RF06 Enviar mensaje al anunciante ................................................... 44
Tabla 8 RF07 Contar anuncios ....................................................................... 45
Tabla 9 RF08 Home – filtro ............................................................................. 45
Tabla 10 RF09 Home – Crear nuevo usuario .................................................. 46
Tabla 11 RF10 Usuario-Mis anuncios ............................................................. 46
Tabla 12 RF11 Usuario – Estados de Anuncios .............................................. 47
Tabla 13 RF12 Usuario – Crear Anuncio – Paso 1 .......................................... 48
Tabla 14 RF13 Usuario – Crear Anuncio – Paso 2 .......................................... 50
Tabla 15 RF14 Usuario – Subir Fotos – Paso 3 .............................................. 51
Tabla 16 RF15 Usuario – Foto principal – Paso 3 ...................................... 51
Tabla 17 RF16 Usuario – Eliminar foto – Paso 3............................................. 51
Tabla 18 RF17 Usuario - Publicación – Paso 4 .............................................. 52
Tabla 19 RF18 Usuario – Términos y condiciones – Paso 4 ........................... 52
Tabla 20 RF19 Usuario – Cerrar Sesión ......................................................... 53
Tabla 21 RF20 Home – Login ......................................................................... 53
Tabla 22 RF21 Buscador de Alojamiento ........................................................ 54
Tabla 23 RF22 Filtros del Buscador de alojamiento ........................................ 55
Tabla 24 RF23 Filtro Principal de Buscador ................................................... 56
Tabla 25 RF24 Detalles de anuncio de por búsqueda .................................... 56
Tabla 26 RF25 Contactar al anunciante ......................................................... 57
Tabla 27 RNF01 Diseño Responsivo .............................................................. 59
Tabla 28 RNF02 3 Secciones en el Minisite ................................................ 60
Tabla 29 RNF3 Efectos Parallax .................................................................... 60
Tabla 30 RNF4 Imágenes de fondo en cada sección ...................................... 61
Tabla 31 RNF5 Calidad de las imágenes ........................................................ 61
VI
Tabla 32 RNF6 Sección de Galería de fotos ................................................... 62
Tabla 33 RNF7 Menú de navegación fijo ........................................................ 63
Tabla 34 RNF8 Pie de página Web ................................................................. 63
Tabla 35 RNF9 Botones UI ............................................................................. 64
Tabla 36 RNF10 Cuadro de Anuncios – Vista Previa ...................................... 65
Tabla 37 RNF11 Slider de galería de fotos ..................................................... 65
Tabla 38 RNF12 Número de visitas ............................................................... 66
Tabla 39 RNF13 Compatibilidad con Navegadores ......................................... 66
Tabla 40 Tabla ins_usuariop ........................................................................... 69
Tabla 41 Alo_anuncio ..................................................................................... 70
Tabla 42 Alo_anuncioupload ........................................................................... 70
Tabla 43 Alo_contactoanuncio ....................................................................... 71
Tabla 44 Alo_estado ..................................................................................... 71
Tabla 45 Alo_inmueble ................................................................................... 72
Tabla 46 Alo_inmueblecaracteristicas ............................................................. 72
VII
INDICE DE ILUSTRACIONES
Ilustración 1 Modelo Cliente/Servidor .............................................................. 28

Ilustración 2 MVC ............................................................................................ 31
Ilustración 3 Base de datos ............................................................................. 32
Ilustración 4 PhpMyAdmin............................................................................... 35
Ilustración 5 Interfaz de SQLYog versión Enterprise ....................................... 37
Ilustración 6 Boceto de Minería Competividad y Sostenibilidad ....................... 73
Ilustración 7 Boceto de Publica tu anuncio ...................................................... 74
Ilustración 8 Boceto acceso a anunciantes ..................................................... 74
Ilustración 9 Boceto Pagina Web Arequipa ..................................................... 75
Ilustración 10 Boceto Mis Anuncios ................................................................. 75
Ilustración 11 Boceto Agregar Anuncios.......................................................... 76
Ilustración 12 Boceto Datos de Contacto ........................................................ 78
Ilustración 13 Boceto descripción .................................................................... 79
Ilustración 14 Boceto Opción subir fotos ......................................................... 80
Ilustración 15 Boceto Subir fotos ..................................................................... 81
Ilustración 16 Boceto Vista Previa ................................................................... 81
Ilustración 17 Boceto Página Web .................................................................. 82
Ilustración 18 Página principal de la aplicación de Alquiler de casas y
departamentos. ............................................................................................... 83
Ilustración 19 Vista Previa de Publica tu anuncio ........................................... 84
Ilustración 20 Vista Previa de Acceso a Anunciantes ...................................... 85
Ilustración 21 Galería ...................................................................................... 86
Ilustración 22 Galería de fotos ........................................................................ 86
Ilustración 23 Footer de la Pagina Web Pie de página del sitio web, se muestra
el mapa de Google Maps, señalando la sede del evento. ............................... 86
Ilustración 24 Página de Usuario Identificado.................................................. 87
Ilustración 25 Agregar Anuncio ....................................................................... 88
Ilustración 26 Script, Validación de datos ........................................................ 90
Ilustración 27 Correo de Verificación de publicación de anuncio ..................... 96
VIII
INTRODUCCIÓN
La presente tesis se basa al Análisis, diseño, desarrollo e implementación de la
aplicación web de alojamiento de casas y departamentos para el evento
internacional Convención Minera - PERUMIN 33, mediante el cual se busca
facilitar a los visitantes de la Ciudad de Arequipa modalidad rápida y eficaz de
búsqueda de hospedaje.
El organizador del mega evento internacional PERUMIN 33 - Convención Minera
es el Instituto de Ingenieros de Minas del Perú (IIMP), que es una institución
privada sin fines de lucro constituida por calificados conocedores, técnicos,
asociados y personas jurídicas nacionales e internacionales que se
desenvuelven actividades mineras, geológicas o enlazadas a las compañías de
minería en el país.
El IIMP tiene como objetivo principal la articulación de impulsos con diversas
constituciones privadas y estatales para colaborar a la implementación de
espacios de conversación, donde se analizan acciones que permitan generar el
avance sostenible del sector minero.
También como objetivo principal es el de impulsar y hacer actividades que
cooperar al desarrollo profesional y técnico de sus miembros que lo conforman
en temas relacionados a la minería. El Instituto de Ingenieros de Minas
anfitriones de actividades de minería a nivel internacional como son PERUMIN-
Convención Minera, Congreso Internacional de Prospectores y Exploradores,
Congreso Internacional de Minería, Relaciones Comunitarias, Conferencias
Magistrales con frecuencia todo los Jueves, llamados jueves Mineros, entre
otros, que permiten la interacción de los miembros asociados, profesionales y
IX
capacitadores del sector. De igual manera se diseñan artículos y publicaciones
como la revista MINERÍA.
Ante la creciente demanda de alojamiento en la Ciudad de Arequipa que se
espera durante el desarrollo de PERUMIN 33 - Convención Minera, el Comité
Organizador del evento minero más grande del mundo propone el desarrollo de
una moderna aplicación web a disposición de sus participantes con una variada
oferta de casas y departamentos en alquiler ubicados en distintos puntos
estratégicos de Arequipa.
La plataforma ofrecerá a los residentes de la Ciudad de Arequipa un sistema web
de registro totalmente gratuito en el que podrán publicar anuncios que contenga
la información de sus casas, departamentos y hoteles en alquiler.
X
CAPITULO I
ASPECTOS GENERALES
1.1 DEFINICIÓN DEL PROBLEMA
El evento Perumin Convención Minera es un magno evento de minería de escala
mundial que se realiza con la frecuencia de cada dos años en nuestro País. En
el evento de Perumin se realizan conferencias magistrales donde estudiantes,
profesionales y empresarios nacionales e internacionales reconocidos de todos
los sectores llegan a la “Ciudad Blanca”, miles de personas interesadas en ser
parte del gran evento minero se registran mediantes nuestros aplicativos
digitales, volviendo a Arequipa por cinco días una ciudad con alta demanda en
alojamiento. El problema ocurre cuando los participantes, convencionistas y
conferencistas del evento llegan a la ciudad blanca y no encuentran hospedaje
disponible debido a la falta de información y/o asesorías. Otro problema que
también se presenta es la elevación de los precios por la alta demanda y pocas
empresas de hospedaje, generando malestar entre los participantes y
comentarios negativos durante y post evento.
1.2 DEFINICIÓN DE LOS OBJETIVOS
1.2.1 Objetivos generales
Desarrollar un aplicativo digital en la cual los convencionistas, conferencistas,
invitados y participantes en general puedan acceder y seleccionar una alternativa
de hospedaje según el distrito de su preferencia.
11
Desarrollar un aplicativo digital en la cual las personas y/o empresas interesadas
en ofrecer el servicio de alojar a los miembros asociados y extranjeros del evento
PERUMIN 33 tengan la posibilidad registrar sus inmuebles en el sistema.
1.2.2 Objetivos específicos
 Desarrollar y diseñar un mini site para el aplicativo “Alquiler de Casas,
departamentos, hospedajes en Arequipa”.
 Desarrollar un módulo web que permita a las personas interesadas en
ofrecer el servicio de hospedaje registrar su inmueble ya sea casa,
departamento, hostal, hotel, casa de retiro y boutique.
 Desarrollar un módulo web que permita a los participantes del evento
PERUMIN 33 Convención Minera, buscar un hospedaje filtrando el distrito
y el tipo de inmueble.
 Desarrollar una vista interactiva que muestre la información de los
inmuebles a alquilar, fotografías, características y datos del propietario.
 Desarrollar un módulo web que permita la comunicación entre el
propietario del inmueble a alquilar y el interesado en reservarlo.
 Desarrollar un módulo web que permita al administrador de la aplicación
aceptar o rechazar las solicitudes de las personas interesadas en agregar
su inmueble a la página de resultados.
12
1.3 JUSTIFICACIÓN DE LA INVESTIGACIÓN
El evento PERUMIN 33 Convención Minera, es un magno evento que convierte
a Arequipa durando cinco días como la capital de la minería del mundo.
En el evento se tiene esperado la asistencia de más de 68 mil delegaciones de
50 países del mundo.
Convención Minera - PERUMIN, desde que fue fundada por el IIMP en el año
1954, es un evento que integra a las más reconocidas empresas, respaldando
además el crecimiento profesional dedicado de los participantes, colaborando
con trabajo de investigación, innovación e implementación de tecnología en las
operaciones mineras, como precisan sus finalidades.
Esta edición se ha habilitado 10.7 hectáreas para la construcción de las salas de
conferencias, y para Extemin (Exhibición Tecnológica Minera) se tiene prevista
la participación de 800 empresas nacionales e internacionales de más de 70
rubros industriales y comerciales.
Para la edición 2017, se contará con más de 1500 stands, que congregarán a
más de 1000 instituciones peruanas e internacionales de países como Argentina,
Alemania, Australia, Bélgica, Brasil, Canadá, China, China, EEUU, España,
Finlandia, Francia, Italia, Sudáfrica, Reino Unido y Suecia que darán a conocer
sus novedades y productos en agrupación y servicios, así como los avances
innovadores científicos de la industria geológica y minera.
Se estima que 68 mil personas participarán en la Convención Minera, entre
empresarios mineros, conferencistas, profesionales reconocidos del sector.
Este proyecto de investigación busca una solución integral a los problemas de
hospedaje que se venían reportando en las ediciones pasadas, en esta solución
13
juega un papel muy importante los propietarios de los inmuebles a alquilar,
generando así un bienestar entre ambas partes.
Un proyecto innovador, para el evento más importante de minería del mundo,
generando así una alternativa de calidad a todos los participantes que visiten la
ciudad blanca durante la convención minera.
14
CAPITULO II
FUNDAMENTO TEÓRICO
2.1 Antecedentes
El evento Perumin Convención Minera es un magno evento de minería de escala
mundial que se realiza con frecuencia de cada dos años en nuestro País.
En el evento de Perumin se realizan conferencias magistrales donde
estudiantes, profesionales y empresarios nacionales e internacionales
reconocidos de todos los sectores llegan a la ciudad blanca, miles de personas
interesadas en ser parte del gran evento minero se registran mediantes nuestros
aplicativos digitales, volviendo a Arequipa una ciudad con alta demanda en
alojamiento, en las ediciones de la convención minera.
2.2 Marco Teórico
En el desarrollo de este capítulo se pretende mostrar la información del Instituto
de Ingenieros de Minas del Perú y Convención Minera PERUMIN 33, los
conceptos básicos del desarrollo, patrones de diseño, desarrollo de aplicativos
web, diseño bajo la filosofía user experience, así como de las técnicas y
tecnologías que permiten su implementación.
15
2.2.1 IIMP
El Instituto de Ingenieros de Minas del Perú se fundó el 26 de noviembre de
1943 por la decisión de un grupo de ingenieros de minas, con el fin de formar
una de las más importantes organizaciones del sector minero peruano, basando
su éxito y reconocimiento en el aporte técnico desplegado a través de las últimas
décadas.
Desde esas décadas, el Instituto de Ingenieros de Minas se ha proyectado ser la
organización pionera que integre a las personas mejores calificadas del sector
para desafiar los grandes desafios que afronta la industria minera, en un
ambiente tan variante como el de estos tiempos.
2.2.2 Misión del IIMP
La misión del IIMP es impulsar la expansión profesional de los miembros
asociadas, a través de preparación de alto nivel profesional, la innovación minera
y el fomento de ejercicios consecuentes, metódicos para el refuerzo del sector
minero y geológico.
2.2.3 Visión del IIMP
La visión del IIMP se direcciona a consolidarse como el eje organizador de los
avances y logros de la industria e innovación minera, comprometidos
especialmente con el progreso de nuestro país.
16
2.2.4 Valores del IIMP
Los Valores que tiene el IIMP es la calidez, calidad profesionalismo, originalidad
y servicio a los asociados.
2.2.5 PERUMIN 33 CONVENCIÓN MINERA
El evento de PERUMIN 33 Convención Minera, es organizado por el Instituto de
Ingenieros de Minas del Perú, una asociación privada teniendo como fundación
en el año 1943, teniendo como objetivo el de enlazar esfuerzos con empresas
privadas y públicas para asociarse a la generación de espacios de platica en
donde se planteen gesticular que permitan el crecimiento sostenible del país.
PERUMIN desde 1954 a la fecha se ha constituido en uno de los eventos
mineros más importantes del mundo, donde se analizan los problemas que
afronta la industria minera peruana, ideando y elaborando soluciones efectivas
para afrontar sus enormes retos y desafíos de cara a la celebración del
Bicentenario. Complementa la actividad académica la Exhibición Tecnológica
Minera (EXTEMIN) que congrega a empresas nacionales e internacionales de
más de 70 rubros comerciales que han generado un intercambio comercial sin
precedentes.
PERUMIN, el evento minero más relevante a nivel mundial, que ha posicionado
al nuestro país como el punto de encuentro de la industria minera. Es reconocido
por su consolides como el de mayor participación, entusiasmo y organización a
lo largo de sus diferentes ediciones, gracias al número de representaciones
17
internacionales, autoridades estatales y el mix de servicios y productos que
ofrece en las fechas del evento.
2.2.6 Sitio web
Un Website está conformada por una integración de diversas de páginas web
almacenadas en la WWW que contienen diversos archivos de hipertexto, desde
imágenes, base de datos, archivos de texto plano, etc. Cada archivo de
hipertexto está compuesto desde texto plano y gráficos que se muestran como
data digital en el monitor de una desktop. Un website está compuesto por una
serie de mezcla de herramientas visuales y de hipertexto como imágenes o
vídeo, y otros elementos dinámicos o estáticos. Todo website costa de una
página de bienvenida, que es el primear página el usuario visualiza cuando
ingresa en el portal web poniendo en la barra de dirección el dominio de ese sitio
web en un navegador, muchos navegadores nos ayudan como Chrome, Safari,
etc.
La desemejanza entre un sitio web y los canales digitales comunes de
comunicación, es que un sitio web se encuentra en la red de redes y está visible
a todo el mundo, de manera que permite que los usuarios interactúen con él.
Los portales web están escritos bajo el lenguaje de marcado HTML (Hyper Text
Markup Language), y se ingresan utilizando un software llamado navegador web,
también conocido como un Protocolo de transferencia de hipertexto, actualmente
existen varios en el mercado como son Google Chrome, Opera, Firefox y Edge.
Se puede acceder a los sitios web mediante diferentes dispositivos con
disponibilidad de acceso a Internet como son las computadoras de escritorio,
laptops, netbooks, tablets, Smartphone y televisores inteligentes (Smart TV)
18
Finalmente un sitio web es un conjunto de páginas web, que se representa e
ingresar mediante un dominio de Internet o subdominio en la WWW en Internet.
2.2.7 Aplicaciones web
Hace algunos años la red solo era colecciones de páginas, imágenes,
documentos estáticos y simples las cuales la gente podía consultar pero sin
interactuar realmente con ellas.
Una página es dinámica cuando se incluye funcionalidad y se realiza con algún
lenguaje de programación de alto nivel.
Cuentan con una programación más compleja y utilizan bases de datos. Los
contenidos se actualizan a través de un panel de administración, donde los
administradores de la web podrán dar de alta, editar o borrar noticias, artículos,
imágenes, entre otros, y un sinfín de posibilidades.
Es ideal si el cliente cree que va estar constantemente cambiando los contenidos
de la web.
Con las páginas web dinámicas podemos desarrollar proyectos a escala por
ejemplo: webs corporativas de empresas, tiendas online, blogs, intranets, juegos
en tiempo real, etc. las posibilidades son muchas.
Para este tipo de páginas los servidores de alojamiento necesitan más
prestaciones que para una web estática, ya que aumentarán los contenidos
alojados (textos, imágenes) y la transferencia de visitas, por todo ello el coste
anual también será mayor.
Las páginas web dinámicas son creadas con gestores de contenidos, los más
utilizados y que más posibilidades y mejor rendimiento ofrecen son WordPress,
Joomla, Drupal
19
Las aplicaciones web se codifican haciendo uso de lenguajes de programación,
siendo los más utilizado al 2018: PHP, JavaScript, .NET, Python, Java Web, con
lo cual podemos definir las herramientas y funcionalidades que se deben realizar
de acuerdo con nuestras requisitos.
Por otro lado las páginas estáticas se utilizan más para brindar información, por
ejemplo el sitio web de una pequeña empresa, mientras que las páginas
dinámicas son más complejas, versátiles, por dar unos ejemplos se utilizan para
un sistema de una intranet o un sistema gestor de contenidos.
2.2.8 Lenguaje por el Lado del Servidor (Back-end)
Los Lenguajes de programación del lado del servidor se aplican en proyectos
donde se tiene que ingresar a información, situada en una base de datos y
por razones de seguridad las operaciones no se pueden realizar en una
computadora local o de usuario.
Recordemos que los lenguajes de programación Backend es indispensable
para realizar la generalidad de las web aplication se debe tener acceso a
muchas librerías externas ,plugins , etc y desde al ordenador del usuario, en la
mayoría de veces a bases de datos almacenadas en datacenters de Internet.
Por ejemplo es el caso de un centro financiero: no tiene ningún sentido que el
cliente tenga acceso a toda la data base, sólo a la data que le es necesaria.
Las páginas interactivas del server solían almacenar en el archivo HTML, por
ejemplo PHP con HTML, al igual que sucedía en los sitios del cliente.
Si existe una petición por el lado del usuario, el server ejecuta el código y se
implementa un sitio de resultado, que contiene un documento de hipertexto plano
20
también conocido como HTML. Este resultado final es el que se envía al cliente
y puede ser visualizado sin bugs ni incompatibilidades, puesto contienen código
base y todos los navegadores pueden interpretarlo.
El server es el que controla la conexión de las bases de datos y cualquiera
otro elemento, por ejemplo imagenes, DNS, administración de correos y luego
envía al usuario una respuesta (vista HTML) con la conclusión de las
ejecuciones. Los puntos positivos de utilizar lenguajes de programación Backend
son que el usuario final no puede visualizar el código empleado, ya que se
ejecutan y convierte en HTML antes de dirigirlos. También son
autosuficientes del browser, ya que el código que reciben es sencillamente
entendible.
Como un punto negativo al Backend se puede deducir que será necesario un
servidor más potente y con más capacidades que el necesario para las
páginas de cliente si las necesidades lo apliquen, por ejemplo un sitio web de
noticias masivas necesitara un servidor que pueda soportar todo ese tráfico.
 Java Server Pages (JSP): Es una lenguaje de programación para productir
sitios web interactivos de forma dinámica con el server, se encuentra escrito
un código variante Java. La tecnología JSP, es una tecnología Java que
permite a los desaro lladores producir dinámicamente XML/HTML.
La JSP facilita al código Java y a algunas operaciones predefinidas ser
integradas en el contenido estático. El punto positivo JSP es que a
diferencia de otros lenguajes es que tiene la posibilidad de importar clases
21
Java, permitiendo separar en capas las aplicaciones web, guardando en
clases .java los módulos que consumen más procesos, poniendo énfasis
en la seguridad y dejando la parte encargada de formatear el archivo HTML
en el archivo jsp. También Javascript se determina por ser un lenguaje
robusto que puede emplearse en multisistemas, lo que sumado a JSP le da
mucha diversidad.
 PHP (acrónimo de PHP: Hypertext Preprocessor) es un lenguaje
de código abierto muy popular especialmente adecuado para el
desarrollo web. PHP se emplea desarrollar sitios web interactivos,
un punto en contra es que tiene la capacidad de mezclarse con el
código HTML, aunque esto último no es recomendable y ya existen
frameworks que lo anulan). Aunque su creación y desarrollo se da
en el ámbito de los sistemas libres, bajo la licencia GNU. PHP es
un lenguaje de script incrustado dentro del HTML. La mayor parte
de su sintaxis ha sido tomada del lenguaje C, con algunas
singularidades específicas de sí mismo. El objetivo del lenguaje es
permitir rápidamente a los programadores la generación dinámica
de aplicaciones web”.
Las diferencias de PHP de algo del lado del cliente con las de Javascript es
que el código es ejecutado en el servidor, genera HTML y lo termina
recibiendo al cliente. El cliente obtendrá el resultado de ejecutar el script,
aunque no podrá observar el código que lo genero.
22
El servidor web puede ser configurado incluso para que procese todos los
ficheros HTML con PHP, por lo que no hay manera de que los usuarios
puedan saber qué se tiene debajo de la manga.
Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero
a su vez ofrece muchas características avanzadas para los programadores
profesionales. No sienta miedo de leer la larga lista de características de
PHP. En unas pocas horas podrá empezar a escribir sus primeros scripts.
Con PHP se pueden desarrollar desde proyectos básicos como el
procesamiento de información en formularios, foros de debate, manipulación
de cookies, redes sociales. Un sitio con páginas dinámicas es el que permite
interactuar con el visitante, de modo que cada usuario que visita la página
vea la información modificada y pueda contribuir con la misma. Las
aplicaciones dinámicas más frecuentes en este 2018 elaboradas con PHP
pueden ser Wordpress, Joomla o Drupal, 3 sistemas gestores de contenidos
muy potentes y robustos.
 Ruby: Es un lenguaje de moda actual, netamente nació como un lenguaje
programación y su característica principal es que es interpretado y orientado
a objetos, desaroolado por el programador japonés "Matz". El código de Ruby
parte de una combinación de sintaxis entre Python y Perl, con fundamentos
de POO similares a Smalltalk. Comparte también funcionalidades con otros
lenguajes de programación como Lisp. Ruby es un lenguaje de programación
interpretado una sola vez y su implementación oficial es distribuida bajo una
licencia de open source.
23
 Python: El lenguaje Python nació a por la década de los años 90, al comienzo
fue producido por Guido Van Rossum, un ingeniero de nacionalidad
holandesa que trabajaba en ese momento en Centrum Wiskunde &
Informática de Amsterdam, que en español significa el Centro de
Investigación de Ciencias de la Computación de Holanda.
Desde sus inicios, Python fue originado como un proyecto de software libre y
gran parte su éxito entre todo los desarrolladores es porque fue creado bajo
la decisión de hacerlo open source.
Python consta con unas propiedades que lo hacen muy particular y que, sin
duda, le aportan pros y están en la raíz de su uso tan desarrollado.
Python es un lenguaje multiparadigma, esto significa que mezcla propiedades
de diferentes paradigmas de programación. Principalmente es un lenguaje
orientado a objetos, en Python todo son objetos, pero también incorpora
aspectos de la programación funcional, procedural y reflexiva.
Una de los elementos más importantes que posee Python es que es un
lenguaje interpretado, esto significa que no se codifica a diferencia de otros
lenguajes como C# o Java, sino que es interpretado a tiempo que se procesa.
2.2.9 Frameworks para aplicaciones web
El concepto framework se emplea muchos ámbitos del desarrollo de sistemas
software, no solo en el ámbito de aplicaciones Web. En general, con el término
framework, nos estamos refiriendo a una estructura software organizada de
componentes personalizables e reemplazables para el desarrollo de una
24
aplicación. En otras palabras, un framework se puede considerar como una
aplicación global incompleta y configurable a la que podemos añadirle las últimas
piezas para construir una aplicación concreta.
El mundo del desarrollo web evoluciona a una super velocidad, aparecen nuevas
ideas y frameworks a diario y es fácil perderse entre tantas opciones, tanto en el
lado de cliente o frontend, como en el lado de servidor o backend. Sin embargo,
hay tendencias claras: hemos pasado en estos últimos años de frameworks de
backend que representaban toda la página en cada petición y una pequeña capa
de JavaScript que dotaba de dinamismo a la aplicación, a backends que
presentan una API al cliente y el estreno de frameworks JavaScript que
consumen API’s para el desarrollo de aplicaciones móviles.
Framework Descripción
Angular, creado por Google, se convirtió rápidamente en el

framework de cliente más popular, gracias a ideas novedosas
en forma de directivas que se asemejan a etiquetas HTML y que
son gestionadas por Angular. Está específicamente pensado
Angular
para proyectos complejos, para los que aporta herramientas
para la gestión de dependencias, modelos, controladores y
enrutado.
Publicada en 2013 y respaldada por Facebook, React es un

framework que está ganando popularidad a una velocidad
asombrosa. Las comparaciones con Angular son inevitables:
React, a diferencia de la solución de Google está más centrada
React.js en la interfaz de usuario y en representar de forma eficiente los
cambios de estado de la aplicación. Está pensada para ser
combinada con otras librerías, como routers o Flex para gestión
de los modelos.
Polymer, publicada en 2013 también por Google, es una librería
Polymer orientada a componentes. La idea es crear webs a partir de
elementos reutilizables, de modo que podamos componer
25
aplicaciones a partir de bloques sin necesidad de conocer el
funcionamiento interno de cada uno, de modo que se extiende
HTML de forma natural.
Laravel es un framework de código abierto para el desarrollo de
proyectos web modernos, aplicaciones y web servicie. Las
últimas versiones de PHP. Su idea es desarrollar código PHP

Laravel
de forma elegante y simple, evitando el "código espagueti". Fue
creado en 2011 y tiene una gran influencia en el mundo de los
frameworks hasta la actualidad.
Tabla 1 Frameworks para aplicaciones web
2.2.10 Arquitectura Cliente-Servidor
El esquema Cliente-Servidor en un paradigma de diseño de software en el cual
una serie de 2 más procesos deben contribuir para el progreso coaxial. De estos
procesos, para simplificar la explicación, se asume la existencia de únicamente
de dos, uno realiza las instrucciones más opresivas, al cual se denomina server,
y otro posee la interacción con el usuario, que será el cliente. Esta metodología
puede transformar de modo que el cliente puede poseer cierta capacidad de
cómputo, el servidor una interfaz gráfica, etc. Se pueden diferenciar tres
componentes esenciales:
1. El Cliente.
2. El Servidor.
3. La infraestructura de comunicaciones
26
EL CLIENTE. El proceso cliente es el que generalmente realiza la interacción
con el usuario, la mayoría de veces en forma gráfica. Posee procesos auxiliares
que se encargan del establecimiento de conexión y de las comunicaciones con
el servidor, así como tareas de sincronización.
EL SERVIDOR. El proceso servidor, como su nombre indica, proporciona un
servicio al cliente, del cual devuelve los resultados. Puede poseer, aunque no
siempre, procesos auxiliares que se encargan de las tareas de comunicación con
el cliente. Dado que es el que proporciona los resultados al cliente, la carga
computacional asociada a este es mayor que la de los clientes.
LAS COMUNICACIONES. Los clientes y los servidores puedan interactuar se
requiere una infraestructura de correspondencia, la cual ofrece los mecanismos
básicos de direccionamiento y transporte. Las comunicaciones se pueden
realizar por medios tanto orientados a la conexión (TCP) como no orientados a
la conexión (UDP). La red debe tener propiedades aptas de productividad,
transparencia y administración.
27
Ilustración 1 Modelo Cliente/Servidor
2.2.11 Ventajas que ofrece el esquema Cliente-Servidor:
1. La gestión de recursos se centraliza en los procesos servidores, por lo
que las aplicaciones son mucho más sencillas, modulares y fácilmente
mantenidas. En caso contrario, sería necesaria una gestión de recursos a
nivel global del sistema, que complicaría la lógica de la aplicación y que
requeriría un mayor número de rondas de mensajes para evitar
condiciones de carrera, como por ejemplo, que varios procesos intentaran
acceder a un mismo recurso en forma de escritura al mismo tiempo.
2. Es posible el uso de componentes, tanto de software y hardware, de
varios fabricantes, contribuyendo considerablemente al decrecimiento de
costos y ayuda la consistencia en la implantación y reajuste de soluciones.
3. Favorece la integración entre diferentes sistemas y la información
compartida.
4. Se aplican interfaces gráficas para interactuar una manera más amigable
con el usuario, no siempre es permitido transmitir información gráfica por
28
la red dado que está puede establecerse en el cliente, lo cual permite
emplear mejor el ancho de banda de la red.
5. Es más ágil el mantenimiento y el desarrollo de aplicaciones ya que se
pueden emplear las herramientas existentes (APIs de Java, RPCs, etc. ).
6. La arquitectura modular facilita la integración de nuevas tecnologías y
favorece la escalabilidad de las soluciones.
2.3.0 Patrón de desarrollo de software MVC
En estos tiempos de desarrollo de software, es muy valorado las buenas
prácticas al momento de realizar el desarrollo de una aplicación web, usando el
esquema Modelo-Vista-Controlador (MVC). El esquema MVC permite separar
las tres áreas más importantes en la arquitectura de la aplicación web en tres
capas antes descritas, generando así una independización de las áreas del
desarrollo e identificar de manera más clara en qué capa es necesario realizar
cambios o en cuál está ocurriendo bugs, errores o comportamientos no
deseados.
El MVC es un patrón de arquitectura de software, que tiene como finalidad
separar los datos y la lógica de negocio de una aplicación de la interfaz de
usuario y el módulo encargado de gestionar la comunicación entre ellas. El
patrón MVC dispone la integración de tres artefactos alternos que están
conformados por Model, View y el Controller, por un lado define componentes
para la esquematización de la data, y por otro lado para la interacción del usuario.
Este paradigma de arquitectura de software tiene sus pilares en la reutilización
29
del código fuente y la distanciación de conceptos, elementos que buscan
simplificar la tarea de desarrollo del sistema y el mantenimiento consecuente.
El MVC propone el uso la capa Model para realizar la implementación de la
aplicación a la data, absorbiendo al desarrollador de la implementación particular
en la cual los datos son almacenados. La capa Model es la encargada de
desplegar información al cliente y, en el caso de proveer una interfaz que permita
realizar cambios, envía los cambios desde la vista a la aplicación. Finalmente, el
controlador es el punto de encuentro entre el modelo y la vista.
El controlador toma la dirección del responsable de la obtención de data del
Model, procesarlos y desplegarlos de una manera en el que la View pueda
mostrarlos. Por otro lado, recibe datos de la vista, los procesa según la lógica del
negocio y los entrega al modelo para que estos puedan ser guardados, sin
incumplir el paradigma propuesto por las reglas lógicas presentes en el modelo.
Podemos definir los componentes del patrón MVC de la siguiente manera:
El Modelo: Es la función de la información con la cual el aplicativo web lleva a
cabo sus instrucciones, por lo tanto, administra todos los accesos a dicha
información, tanto jquerys como updates, implementando también los privilegios
de ingreso que se hayan descrito en las determinaciones del sistema o lógica de
negocio, luego se envía a la vista la parte de la información que en cada
momento se esté solicitando para que sea desplegada. Las peticiones de acceso
o empleo de información llegan al modelo a través del controller.
30
El Controlador: Atiende a las llamadas que son peticiones realizados por el
cliente y realiza solicitudes al modelo cuando llega una petición sobre la data
(por ejemplo, modificar un campo de la base de datos o agregar un nuevo
registro en la base de datos). También puede enviar instrucciones a su View
asociada, cuando se solicita un cambio en la forma en que se presenta el Model,
por tanto por definición sabemos que el controlador es el intercesor entre la
comunicación del modelo y de la vista.
La Vista: Despliega y muestra la información y lógica de negocio en un formato
apto para interactuar (usualmente una pantalla o página web) por tanto requiere
de dicho 'modelo' la información que debe representar como salida.
Ilustración 2 MVC
Gráfico 1.MVC
2.3.1 Base de datos
Una base de datos es un sistema de almacenamiento de datos, mayormente
conformada por tablas y columnas. Los conjuntos de datos se convierten en
31
información, que para una base de datos es muy importante, también los BD
operan aspectos relacionados con la seguridad, tratamiento y consulta de datos.
Dicha información se almacena para su un posterior uso. La estructura por
excelencia que se diseña en una aplicación web, es la que se muestra a
continuación:
Ilustración 3 Base de datos
Actualmente existen varias opciones en el mercado en cuanto a los gestores de
la base de datos, tanto en software open source como de software con licencias,
Recordar que muchos gestores BD adaptan su configuración para aplicativos
web, así como también para sistemas de desktop, los gestores de base de datos
más conocidos son:
o MySQL
o PostgreSQL
o Oracle
o SQL Server
o DB2
32
De los gestores de base de datos mencionados anteriormente, en el desarrollo
del proyecto de la aplicación web para mi tesis, se ha empleado el gestor de
base de datos MySQL, considerando que es el más apropiado según los
requisitos del desarrollo, adicionalmente es un gestor de base de datos de
licencia software libre. Habilita de un modelo entidad-relación que modifica los
modelos desarrollados de una forma visual mediante querys.
2.3.2 MySQL
Es un potente gestor de administrador de BD, muy popular en esta década, se
encuentra completamente desarrollado en lenguaje C++, ofreciendo una solidez
de función imponente. También, cuenta entre sus propiedades, con una buena
amplitud de integración con otros entornos de generación de software y de
aplicativos con la arquitectura client/server, por eso, es el favorito desde los
desarrolladores de aplicaciones web hasta los administradores de base de datos
a nivel mundial.
Las particularidades más llamativas de MySQL, es que poseen con un sistema
simple, gracias a su curva de aprendizaje, como resultado tiene a incorporarse
con nuevos usuarios en el mundo del base de datos, por su interfaz de usuario
y lo más importante, permite trabajar en múltiples sistemas operativos.
2.3.2.1 Características de MySQL
 Velocidad y robustez.
 Curva de aprendizaje.
33
 Es un gestor de base de datos de alto performance y fácil comprensión,
contiene menos pasos para configurar y por ende administra grandes
sistemas de datos.
 Precio, se puede descargar de manera gratuita de su sitio oficial.
 Amplitud de gestión de lenguajes de consulta. MySQL trabaja con SQL,
el lenguaje seleccionado por la mayoría de desarrolladores para los
sistemas de bases de datos de la actualidad.
 Robusto. Es posible la conexión de muchos usuarios de manera paralela
al servidor. Los clientes pueden utilizar varias bases de datos
simultáneamente.
 Conexión y seguridad. MySQL está preparado para el trabajo en red y las
bases de datos pueden ser accedidas desde cualquier punto donde exista
una conexión a internet, sea LAN o Wi-Fi
 Traslación, MySQL se puede ejecutar en una variedad de sistemas
operativos diferentes.
 Open Source. Teniendo la posibilidad de modificar el código fuente de
MySQL para futuras mejoras.
2.3.3 PhpMyAdmin
PHPMyAdmin es un software open source desarrollado para administrar y
realizar gestión sobre las diversas bases de datos MySQL que incluyan uno o
más proyectos a través de una interfaz gráfica intuitiva. Fue construido en el
lenguaje PH. phpMyAdmin es actualmente una de las mejores herramientas más
populares, ya que sus elementos basadas en web de gestión de MySQL hacen
34
más fácil la administración del Cpanel, desde la optimización del sitio, hasta la
modificación de registros de una base de datos. PhpMyAdmin contiene una
documentación detallada que cada vez se hace más grande, gracias a los miles
de seguidores de esta iniciativa, es bueno precisar que está siendo poyado por
un gran multi-idioma de la comunidad.
PHPmyAdmin contiene cada vez más propiedades ya que es coincidente las
operaciones de uso común tales como la navegación, actualización, crear,
modificar las bases de datos MySQL, las tablas, campos y columnas.
Adicionalmente, phpMyAdmin permite administrar usuarios optar por privilegios
de usuario. Otra característica común es phpMyAdmin su herramienta de
importación. phpMyAdmin tiene la facilidad importar base de datos MySQL con
copias seguridad y a la vez exportarlos SQL o XML O Hojas de cálculo.
Ilustración 4 PhpMyAdmin
35
2.3.4 SQLyog
SQLyog es un software para la gestión de base de datos MySQL, contiene una
agradable IU designada especialmente para trabajar de forma más ágil y
confortable. SQLyog se orienta a los usuarios que ya poseen conocimientos
solidos de SQL y requieren un entorno visual confortable y funcional. El software
facilita la administración de clientes, permisos, y realizar múltiples tareas a la
base de datos.
SQLyog puede agregar sin tanto esfuerzo datos, mediante templates y realizar
peticiones con reiteración, como por ejemplo crear nuevas tablas. Otras
herramientas fundamentales son la exportación de datos en formato CSV Y XML,
la optimización de bases de datos y la posibilidad de almacenar querys.
2.3.4.1 Características de SQLyog
 Compatibilidad UTF8
 Productividad
 Docs HTML
 Variante para generar sentencias
 Editor de consultas con múltiples ventanas
 Aplicación de jquerys multitareas con posibilidad de detener consultas a
gran escala.
 Themes SQL
 Ejecución múltiple de jquerys
 Interfaz de cuadrícula estilo Excel para ver/actualizar los resultados
 Visualización de datos en modo de cuadrillas
36
 Exportación de consultas, los datos pueden ser bajados en formatos CSV,
XLS, TXT, HTML.
Ilustración 5 Interfaz de SQLYog versión Enterprise
2.3.5 GitHub
Github es por excelencia una herramienta desarrollada para allanar al desarrollo
procesos colaborativos en los proyectos de aplicaciones de software, nos
permite almacenar proyectos en la web de manera gratuita, de forma pública o
privada. Github presenta al programador toda la capacidad y agilidad del
aplicativo de control de versiones Git, más un interesante set de herramientas
unificadas: Wikis, sistemas de seguimiento de incidencias/reportes, IU interactiva
para la diferenciación y edición de código.
37
2.3.6 Experiencia de Usuario (UX)
La User Experience es una metodología que inicia su proceso cuando el cliente
interactúa con un aplicativo digital. Es un concepto moderno que parte de los
orígenes del área digital del Marketing. Muchas veces se presenta una confusión
entre los concepto de experiencia de usuario con el de usabilidad. A continuación
detallaremos las diferencias para tener más claro la idea sobre ambas corrientes
que tanto se mencionan en esta década:
 Usabilidad: La usabilidad es la facilidad con la que los usuarios finales
pueden entender y aplicar la herramienta o cualquier otro objeto producido
por desarrolladores con el fin de conseguir un objetivo concreto.
 Experiencia de usuario: Son una serie de causas y elementos
referentes a la interacción del cliente, con un el entorno desarrollado
software, teniendo como resultado la generación de una captación
positiva o negativa de dicha aplicación pueden ser productos o
dispositivos.
Tengamos en cuenta que, cuando nos adentramos en el desarrollo de un
proyecto web, al momento de finalizar, enfoquémonos en poder encontrar las
siguientes situaciones:
Sí el aplicativo final cumple sus objetivos funciones pero no genera una gran
experiencia de usuario.
La aplicación web es usable y además genera una gran experiencia de usuario.
Recordemos que la combinación perfecta es: El producto es útil y genera una
agradable experiencia de usuario. Si logramos este match obtendríamos unas
experiencias positivas únicas y notorias para el usuario, lo cual nos regresara en
38
un rendimiento tangible, no solo en nuestra reputación de desarrolladores sino
en un beneficio real a largo plazo de nuestro aplicativo web.
Finalmente, se debe de tener presente que las emociones que generará nuestra
aplicación al momento que se realiza la interacción con el usuario final, porque
los estados emocionales afectan a los procesos cognitivos que influyen en la
relación de un usuario con nuestro aplicativo web.
CAPITULO III
ANÁLISIS
3.1 ANÁLISIS DE LOS REQUERIMIENTOS
La ingeniería de requisitos del software es un proceso de descubrimiento y
generación de modelado, detallando cada especificación que realice el cliente.
Se pulen cada detalle con los requisitos de la aplicación, para previamente
asignarlos al desarrollo del software.
Los desarrolladores como el usuario final poseen un papel persistente en el
proceso de la ingeniería de requisitos, mediante un cúmulo de actividades que
son también son llamados análisis, El cliente intenta replantear un sistema a su
medida, a nivel de descripción de información, funciones y elementos que desea
de su aplicación en concretos detalles. El analista actúa como inquisidor,
teniendo las características de una persona que resuelve problemas y sabe
negociarlos.
39
El análisis y la especificación de requisitos son una tarea indispensable en
La ingeniería de requisitos del software es un proceso de investigar las
necesidades de los usuarios finales, redefinirlos, moldearlos y especificarlos. Se
depurar de detalle los requisitos de la aplicación y la asignación al sistema.
El analista como el cliente final tienen un papel activo en el proceso de la
obtención de la ingeniería de requisitos, aplicando una serie de actividades que
son denominadas análisis, El usuario final procura planificar una aplicación
confusa, a nivel de descripción de información, elementos, funciones y
comportamiento, en detalles precisos. El analista en este proceso ocupa un
papel de consultor.
El análisis y la determinación de los requerimientos aparentan ser una actividad
parcialmente sencilla, pero las apariencias engañan. La interacción de
comunicación es muy denso. Sobran las oportunidades para malas
apreciaciones o falta de información. Es muy posible que exista ambigüedad. La
disyuntiva a la que se enfrenta el ingeniero de requisitos es que puede
entenderse muy bien repitiendo la famosa frase de un cliente anónimo: “Sé que
cree que capto lo que piensa que dije, pero no estoy seguro de que se dé cuenta
de que lo que escuchó no es lo que yo quise decir”.
El análisis de requisitos es una acción de ingeniería del software que envuelve
el vacío entre la definición del software a nivel sistema y el diseño de software.
El análisis de requerimientos permite al grupo de desarrollo especificar las
características operacionales del software (función, datos y rendimientos), indica
40
la interfaz del aplicativo con otros elementos de la aplicación y establece las
limitaciones que debe cumplir el sistema software.
3.1.1 Requerimientos Funcionales
Un RF se define como los comportamientos internos que operaran la aplicación,
estás especificaciones deben indicar la manera en la que el aplicativo web debe
de tener ante procesos evidentes, existen casos en que, es importante
mencionar claramente lo que la aplicación debe hacer.
Los requerimientos funcionales de una aplicación web describen lo que el
sistema debería de hacer, dependiendo del tipo de software, los posibles
usuarios y del enfoque del proyecto.
Con esta breve explicación a continuación se mencionaran los requerimientos
Funcionales analizados, empleando para ello un esquema estándar a manera de
tabla, en la cual se especifican los siguientes identificadores:
 N° de identificación por Requisito
 Nombre del RQ
 Descripción
 Nivel de importancia con la que cuenta el requisito dentro de la
aplicación.
41
Estos requerimientos se desarrollan a continuación de la tabla 1 a la 20.
Requerimiento RF01
Nombre del requerimiento: Login Administrador
Descripción general El sistema web por estándares de seguridad
deberá de permitir el ingreso al login del gestor
administrador, mediante un formulario de inicio
de sesión
Prioridad Alta
Tabla 2 RF01 Login Administrador
Requerimiento RF02
Nombre del requerimiento: Mostrar anuncios administrador
Descripción general La aplicación web debe de listar de manera
gráfica todos los anuncios (aprobados, en
espera, desaprobados) en la pantalla
administrativa.
Prioridad Alta
Tabla 3 RF02 Mostrar anuncios administrador
42
Requerimiento RF03
Nombre del requerimiento: Aprobar anuncio
Descripción general La aplicación web debe tener un botón de
aprobar anuncio, cuando el anuncio se aprueba
cambia de estado “Pendiente” a “Aprobado” y
automáticamente es visible para todos los
usuarios.
Prioridad Alta
Tabla 4 RF03 Aprobar anuncio
Requerimiento RF04
Nombre del requerimiento: Desaprobar anuncio
desaprobar anuncio, cuando un anuncio se
desaprueba cambia de estado “Pendiente” a
“Desaprobado”.
Prioridad Alta
Tabla 5 RF04 Desaprobar anuncio
43
Requerimiento RF05
Nombre del requerimiento: Eliminar anuncio
eliminar anuncio, cuando un anuncio se
elimina, desaparece de la lista de
administración, un anuncio se puede eliminar
estando en cualquier estado (pendiente,
aprobado, desaprobado)
Prioridad Alta
Tabla 6 RF05 Eliminar Anuncio
Requerimiento RF06
Nombre del requerimiento: Enviar mensaje al anunciante
Descripción general La aplicación web debe de permitir el envío de
mensajes al correo electrónico del anunciante.
Prioridad Media
Tabla 7 RF06 Enviar mensaje al anunciante
Requerimiento RF07
Nombre del requerimiento: Contar anuncios
44
Descripción general El sistema debe de contar con un contador de
anuncios (en todos sus estados)
Prioridad Media
Tabla 8 RF07 Contar anuncios
Requerimiento RF08
Nombre del requerimiento: Home - Filtro
Descripción general En la página principal de la aplicación
web (lado del cliente) debe de ver un
filtro de búsqueda, por tipo de distrito
y tipo de inmueble.
Prioridad Media
Tabla 9 RF08 Home – filtro
Requerimiento RF09
Nombre del requerimiento: Home – Crear nuevo usuario
Descripción general La aplicación web debe de permitir la
creación de usuarios que accedan al
sistema de alojamiento.
Los datos requeridos para crear un
nuevo usuario son:
Nombres (obligatorio)
Apellidos (obligatorio)
45
Correo electrónico (obligatorio)
Contraseña (obligatorio)
Prioridad Alta
Tabla 10 RF09 Home – Crear nuevo usuario
Requerimiento RF10
Nombre del requerimiento: Usuario – Mis Anuncios
Descripción general La aplicación web debe de permitir
sólo a los usuarios registrados la
posibilidad de visualizar sus anuncios
creados, en cualquier estado que se
encuentre (pendiente, aprobado,
desaprobado).
Prioridad Alta
Tabla 11 RF10 Usuario-Mis anuncios
Requerimiento RF11
Nombre del requerimiento: Usuario – Estados de Anuncios
Descripción general La aplicación web deberá de contar
con dos botones “Visible” y “Oculto”,
46
cuando este en “Visible” el anuncio
se mostrara en la lista de búsquedas,
cuando está oculto, no se podrá
apreciar en la lista de búsquedas.
Prioridad Media
Tabla 12 RF11 Usuario – Estados de Anuncios
Requerimiento RF12
Nombre del requerimiento: Usuario – Crear Anuncio – Paso 1
Descripción general La aplicación web deberá permitir
crear anuncios, con las siguientes
características:
Datos Basicos
Tipo de inmueble
Precio desde (S/.)
Tipo de Cambio
Precio US$ (Se calcula solo)
Distrito
Dirección
47
Datos Comerciales
Nombre comercial
Categoría
Página web
Datos de contacto
Persona de contacto
E-mail
Teléfono
Prioridad Alta
Tabla 13 RF12 Usuario – Crear Anuncio – Paso 1
Requerimiento RF13
Nombre del requerimiento: Usuario – Crear Anuncio – Paso 2
Descripción general Detalles
M2 construidos
N° de habitaciones
N° de pisos
N° de baños
Otros ambientes y características
(debe de contener la siguiente lista, y
el usuario deberá de marcar una o
más opciones)
 Aire acondicionado
48
 Amueblado
 Áreas verdes
 Ascensor
 Atención a la Habitación
 Bar/Cafetería
 Cochera
 Cocina equipada
 Comedor
 Desayuno
 Estacionamiento
 Frio Bar
 Hall TV
 Kitchenette
 Lavandería
 Piscina
 Piscina Exterior
 Restaurante
 Sala
 Sala Reuniones
 Salas de Conferencias
 Servicio de Buffet
 Servicio Lavandería
 Teléfono
 Terraza
49
 TV/Cable
 WiFi
La aplicación web deberá de
incorporar un formulario de
“Descripción” del
inmueble/casa/hospedaje
Prioridad Alta
Tabla 14 RF13 Usuario – Crear Anuncio – Paso 2
Requerimiento RF14
Nombre del requerimiento: Usuario – Subir Fotos – Paso 3
Descripción general La aplicación web deberá tener la
posibilidad de cargar fotos
localmente y subirlas al servidor, las
características en este requerimiento
son las siguientes:
 Formatos permitidos: .png , .jpg
 Número máximo de fotos: 7
 Tamaño máximo por archivo: 700
Kb
Prioridad Alta
50
Tabla 15 RF14 Usuario – Subir Fotos – Paso 3
Requerimiento RF15
Nombre del requerimiento: Usuario – Foto principal – Paso 3
opción de seleccionar una foto como
principal, esta foto principal se
mostrará como portada en los
anuncios cuando los usuarios
busquen casas/departamentos.
Prioridad Media
Tabla 16 RF15 Usuario – Foto principal – Paso 3
Requerimiento RF16
Nombre del requerimiento: Usuario – Eliminar foto – Paso 3
opción de eliminar fotos del anuncio,
se podrá eliminar fotos siempre
cuando existan 2 archivos o más, no
se podrá eliminar la foto principal.
Prioridad Media
Tabla 17 RF16 Usuario – Eliminar foto – Paso 3
51
Requerimiento RF17
Nombre del requerimiento: Usuario - Publicación – Paso 4
Descripción general La aplicación web deberá mostrar
una vista previa de los datos
anteriormente ingresados del
anuncio, con un botón de Finalizar
(Publicar anuncio) y regresar (en
caso de cambiar datos).
Prioridad Alta
Tabla 18 RF17 Usuario - Publicación – Paso 4
Requerimiento RF18
Nombre del requerimiento: Usuario – Términos y condiciones –
Paso 4
Descripción general Se deberá aceptar los términos y
condiciones para poder seleccionar
el botón de Finalizar (publicar
anuncio)
Prioridad Baja
Tabla 19 RF18 Usuario – Términos y condiciones – Paso 4
52
Requerimiento RF19
Nombre del requerimiento: Usuario – Cerrar Sesión
Descripción general La aplicación web contará con un
enlace o link que permita la cerrar
sesión actual.
Prioridad Alta
Tabla 20 RF19 Usuario – Cerrar Sesión
Requerimiento RF20
Nombre del requerimiento: Home – Login
Descripción general La aplicación web contara con un
formulario de acceso en la página
principal, los datos necesarios son el
correo electrónico y la contraseña.
Prioridad
Tabla 21 RF20 Home – Login
Requerimiento RF21
Nombre del requerimiento: Buscador de Alojamiento
53
Descripción general La aplicación web contara con una
página de búsqueda de anuncios de
casas, departamentos y hospedajes
con filtros.
Prioridad Media
Tabla 22 RF21 Buscador de Alojamiento
Requerimiento RF22
Nombre del requerimiento: Filtros del Buscador de alojamiento
Descripción general El buscador de alojamiento contara
con los siguientes filtros:
Tipo de inmueble
 Todos (Filtra todo los tipos)
Casa
 Departamento
 Hostales
 Hoteles
 Casa de retiro
 Boutique
 Otros
54
Ambientes
 Dormitorios
 Baños
Precio por noche
 Todos
 Menos 500
 500 - 1000
 1000 - 2000
 Más de 2000
Fecha de publicación
 Todos los días
 Hoy
 Ayer
 Hace 1 semana
 Hace 15 días
 Hace 30 días
Prioridad Media
Tabla 23 RF22 Filtros del Buscador de alojamiento
Requerimiento RF23
Nombre del requerimiento: Filtro Principal de Buscador
55
Descripción general En la página de búsqueda de casas,
departamentos y hospedajes el filtro
principal deberá de ser el distrito.
Prioridad Media
Tabla 24 RF23 Filtro Principal de Buscador
Requerimiento RF24
Nombre del requerimiento: Detalles de anuncio de por búsqueda
Descripción general Los anuncios contaran con una
opción de ver información detallada,
se mostrara la información completa
del inmueble, tipo, características ,
precio por noche, pagina web,
empresa, galería de fotos.
Prioridad Media
Tabla 25 RF24 Detalles de anuncio de por búsqueda
Requerimiento RF25
Nombre del requerimiento: Contactar al anunciante
56
Descripción general La aplicación web deberá de
implementar un formulario de
contacto por anuncio, con la finalidad
que exista una comunicación entre el
usuario interesado y el anunciante.
Los datos necesarios son: Nombres,
email, asunto y mensaje.
Prioridad Media
Tabla 26 RF25 Contactar al anunciante
3.1.2 Requerimientos no Funcionales
Los RNF son los RQ que no integran en las funcionalidades principales que
tendrá la aplicación web, si no en las elementos no ta|n importantes de este
saliente de éste como la credibilidad, velocidad de los procesos y la capacidad
de almacenamiento, y la representación de datos que se utilizará en la interfaz
de la aplicación.
Los requerimientos no funcionales (RNF) nacen de la necesidad del cliente,
debido a las restricciones en el presupuesto del proyecto, a las políticas de la
institución, a la necesidad de compatibilidad con otros sistemas de software o
hardware o a factores externos como son las políticas de seguridad, los
reglamentos de normas, entre otros.
57
3.1.2.1 Generalidades
 Se debe pensar en las propiedades como las características que hacen al
aplicativo atractivo, con alto grado de usabilidad.
 Se tiene conocimiento que es son conjunto de características de calidad, que
son necesarios a tener en cuenta al momento del diseño e implementación
del aplicativo.
 No son parte de la razón fundamental del aplicativo pero si son necesarios
para hacer funcionar el aplicativo de la manera proyectada.
 No alteran la funcionalidad del aplicativo web y si añaden funcionalidad al
producto.
 Mencionan la User Experience que tendrán los usuarios finales cuando
interactúen con el producto.
3.1.2.2 Categorías
Existen diferentes categorías de los RNF, como son:
 Requisitos de visualización.
 Usabilidad.
 Rendimiento/Optimización.
 Mantenimiento.
 Protocolos de Seguridad.
 Normas Legales.
 Interfaz.
 Operacionales y Económicos.
 Funcionalidad.
58
 Simplicidad y eficiencia.
Se mostrarán a continuación los requerimientos no Funcionales proyectados
para la presente tesis:
Requerimiento RNF1
Nombre del requerimiento: Diseño Responsivo
Descripción general La aplicación web debe contar con
tecnología adaptable a los diferentes
tipos de dispositivos móviles.
Prioridad Media
Tabla 27 RNF01 Diseño Responsivo
Requerimiento RNF2
Nombre del requerimiento: 3 Secciones en el Minisite
Descripción general La página web de la aplicación web,
debe estar dividido por 3 secciones,
 La presentación
 Publica tu anuncio/Regístrate
 Acceso Anunciantes
Prioridad Alta
59
Tabla 28 RNF02 3 Secciones en el Minisite
Requerimiento RNF3
Nombre del requerimiento: Efectos Parallax
Descripción general Las 3 secciones deben de contar con
el efecto Parallax.
Prioridad Baja
Tabla 29 RNF3 Efectos Parallax
Requerimiento RNF4
Nombre del requerimiento: Imágenes de fondo en cada sección
Descripción general Los fondos de las 3 secciones deben
de contar con un fondo temático de la
ciudad de Arequipa, respetar el
siguiente criterio:
1. Página principal, debe de tener
una imagen de un dormitorio
elegante con fondo de color naranja
transparente)
2.Publicar tu anuncio, debe de tener
la foto del Volcán Misti
60
3. Acceso a Anunciantes, debe de
tener una fotografía de un
hotel/departamento
Prioridad Media
Tabla 30 RNF4 Imágenes de fondo en cada sección
Requerimiento RNF5
Nombre del requerimiento: Calidad de las imágenes
Descripción general Las imágenes que se inserten en la
página web del minisite deben de ser
de alta resolución/calidad, en caso de
ser fotografías usar el formato .JPG,
de ser iconos o botones usar el
formato .PNG.
Prioridad Baja
Tabla 31 RNF5 Calidad de las imágenes
Requerimiento RNF6
Nombre del requerimiento: Sección de Galería de fotos
Descripción general La Aplicación Web deberá de tener
una sección de galería de fotos
ubicada después del Acceso a
61
anunciantes, debe de contar con 7
fotografías de las siguientes lugares
de Arequipa:
 Plaza de Armas
 Mirador de Yanahuara
 Volcán Misti
 Catedral de Arequipa
 Plaza de Armas y Catedral de
Arequipa
 Convento de Santa Calina
 Catedral de Arequipa (Interior)
Prioridad Baja
Tabla 32 RNF6 Sección de Galería de fotos
Requerimiento RNF7
Nombre del requerimiento: Menú de navegación fijo
Descripción general La aplicación web deberá de contar
con una barra de navegación
estática, es decir que cuando el
usuario navegue por la página web,
62
el menú siempre este fijo en la parte
superior.
Prioridad Media
Tabla 33 RNF7 Menú de navegación fijo
Requerimiento RNF8
Nombre del requerimiento: Pie de página Web
Descripción general La aplicación debe de tener un pie de
página donde se muestra el logo de
PERUMIN33 y un enlace a los
términos y condiciones del sitio.
Prioridad Baja
Tabla 34 RNF8 Pie de página Web
Requerimiento RNF9
Nombre del requerimiento: Botones UI
Descripción general La aplicación web debe de contar
con botones de fácil navegación,
considerar los colores corporativos
de PERUMIN.
63
Prioridad Media
Tabla 35 RNF9 Botones UI
Requerimiento RNF10
Nombre del requerimiento: Cuadro de Anuncios – Vista Previa
Descripción general Los cuadros de anuncios cuando se
encuentren en vista previa deben de
tener la siguiente estructura de
diseño:
 Número de anuncio / Nombre
de anuncio / Departamento
 Foto principal del anuncio con
un ancho
 Visitas al anuncio
 Dirección y departamento
 Precio por noche en Soles
 Precio por noche en Dólares
 Metros cuadrados de la casa,
departamento o hospedaje.
 Número de dormitorios
64
 Número de baños
Prioridad Alta
Tabla 36 RNF10 Cuadro de Anuncios – Vista Previa
Requerimiento RNF11
Nombre del requerimiento: Slider de galería de fotos
Descripción general La galería de fotos de los anuncios
debe de contar con el efecto de
slider, el tiempo de espera, para la
transición de una imagen a otra es de
dos segundos.
Prioridad Baja
Tabla 37 RNF11 Slider de galería de fotos
Requerimiento RNF12
Nombre del requerimiento: Número de visitas
Descripción general La aplicación web debe de tener un
registro de visitas por anuncio
Prioridad Baja
65
Tabla 38 RNF12 Número de visitas
Requerimiento RNF13
Nombre del requerimiento: Compatibilidad con Navegadores
Descripción general La aplicación web debe ser
compatible con los navegadores
Firefox, Google Chrome, Internet
Explorer y Safari.
Prioridad Media
Tabla 39 RNF13 Compatibilidad con Navegadores
Una vez definidos los requerimientos Funcionales y no Funcionales para la
aplicación de casas y departamentos, se tiene la información necesaria para
realizar los casos de Uso que se manejarán en el sistema.
3.2 Definición de Casos de Uso
Los casos de uso de una aplicación, representa una descripción a manera de
secuencia de los pasos o actividades que deberán ser ejecutadas para
66
desarrollar algún proceso, así como los actores que a la Aplicación y por ende,
el actor del mismo es el Usuario quien intenta Autenticarse.
Antes de definir los Casos de Uso de la aplicación web, es necesario definir a las
personas (actores) que intervienen directamente en la aplicación en este caso
particular, los actores que intervienen en el sistema son:
 Anunciante
 Interesado
 Administrador
Cronograma de trabajo
El éxito de un proyecto web depende en gran parte de la participación de todos

los miembros del equipo. Por eso, es fundamental que el analista deje este punto
en claro y explique todos los pasos que serán realizados. Sin embargo, en la
práctica del día a día es común que la planificación sea dejada de lado, y que
luego comprometa el avance y la entrega del proyecto. A continuación, se tendrá
la gráfica del cronograma de trabajo para el proyecto del aplicativo de Perumin
33 esenciales para el desarrollo y resultado positivo de cualquier proyecto web.
67
DISEÑO
3.2 Diseño de base de datos para la aplicación web.
Es fundamental especificar el almacenamiento de la información que
representan los casos de uso; tal como se había visto anteriormente, en la cual
se describe acerca de la base de datos MySQL y sus características principales
y las responsabilidades que asume en la aplicación web. De esta manera, para
mantener una documentación firme, se ha definido un glosario de datos, el cual
presenta la forma de acumulación, este diccionario se cita a muestra a
continuación.
3.2.1 Diccionario de datos
El glosario de datos es una colección de keywords, el cual contiene los atributos
lógicos de los datos que se utilizarán posteriormente.
Para este trabajo de tesis se ha procedido ha definido la siguiente nomenclatura:
 Tabla
 Nombre del campo
 Tipo del campo
 Longitud del campo
 Descripción del campo.
La especificación de cada tabla se muestra a continuación:
68
Clave Campo Tipo Longitud
Primaria Idusuario INT 10
Usuario VARCHAR 20
Contraseña VARCHAR 50
Email VARCHAR 89
Fcreacion DATETIME
factualizacion TIMESTAMP
Tabla 40 Tabla ins_usuario
Primaria Id INT 5
Código INT 10
Idusuario INT 10
Idpais INT 10
Iddepartamento INT 11
idprovincia INT 11
Iddistrito INT 11
idinmueble INT 11
tipocambio DOUBLE
idcontactoanuncio INT 10
idcontactopreferencia INT 10
preciopordia DOUBLE
Dirección VARCHAR 100
69
metroscuadrados INT
numerosbanos INT
Numerospisos INT
comentarios VARCHAR 800
Fcreacion DATETIME
Estado INT
Visible TINYINT
Visitas INT
Tabla 41 alo_anuncio
Primaria idanuncioupload INT 11
Nombre VARCHAR 100
Idusuario INT 11
Idanuncio INT 11
Principal INT 11
Estado INT
Fcreacion DATETIME
Tabla 42 alo_anuncioupload
PRIMARIA Id INT 11
Código VARCHAR 100
70
Nombre VARCHAR 100
Correo VARCHAR 100
Teléfono VARCHAR 100
Fcreacion DATETIME
Tabla 43 Alo_contactoanuncio
PRIMARIA Id INT 11
codigo VARCHAR 10
nombre VARCHAR 50
Status TINYINT 1
Usercreate INT 11
userupdate INT 11
createdate DATETIME
createdate DATETIME
Tabla 44 Alo_estado
PRIMARIA Id INT 11
codigo VARCHAR 100
nombres VARCHAR 255
fcreacion DATETIME 1
71
factualizacion TIMESTAMP 1
Tabla 45 Alo_inmueble
PRIMARIA Id INT 11
codigo VARCHAR 100
nombres VARCHAR 255
activo DATETIME 1
fcreacion TIMESTAMP 1
factualizacion TIMESTAMP 1
Tabla 46 Alo_inmueblecaracteristicas
3.3 Diseño de Interfaces
Un prototipo o wireframe es un tipo de boceto donde mayormente se grafica de
una forma muy esquemática la estructura que tendrá de un aplicación web o
página web.
El objetivo de generar prototipos es de definir el contenido y la posición de los
diversos bloques que tendrá nuestra aplicación web. Estos incluyen desde el
menú de navegación, sections, slides y bloques de contenido, Adicionalmente
permiten ver como interactuarán los elementos entre sí.
Los wireframes tienen como característica principal el no utilizar colores, ni
tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la
funcionalidad del sitio y la experiencia del usuario, teniendo como prioridad el
contenido y la interactividad del usuario – aplicación.
72
Los Wireframes permiten crear múltiples versiones de un mismo proyecto de una
forma ágil, así como aplicar cambios o ideas innovadoras que aparezcan
posteriormente en nuevos prototipos. Lo importante es tener clara la
organización de los elementos de la aplicación web antes de empezar con el
maquetado, donde las tecnologías HTML y el CSS se ponen en práctica, es
bueno testear los wireframes con usuarios finales con el fin de comprobar que
no haya fallos importantes de base que luego te podrían suponer muchas horas
de trabajo subsanar.
A continuación se mostraran una serie de wireframes trabajados antes de la
maquetación del sitio web.
Ilustración 6 Boceto de Minería Competividad y Sostenibilidad (Home)
73
Ilustración 7 Boceto de Publica tu anuncio
Ilustración 8 Boceto acceso a anunciantes
74
Ilustración 9 Boceto Pagina Web Arequipa
Ilustración 10 Boceto Mis Anuncios
75
Ilustración 11 Boceto Agregar Anuncios
76
77
Ilustración 12 Boceto Datos de Contacto
78
Ilustración 13 Boceto descripción
79
Ilustración 14 Boceto Opción subir fotos
80
Ilustración 15 Boceto Subir fotos
Ilustración 16 Boceto Vista Previa
81
Ilustración 17 Boceto Página Web
82
DESARROLLO
En este capítulo, se expone la manera de cómo ha sido desarrollado el proyecto
web, basando la aplicación web bajo los requisitos previamente definidos,
comenzando por el análisis de los requisitos, prototipos, también contando con
estándares de desarrollo y finalmente desplegando y explicando la estructura
que se encuentra conformada por los diversos módulos.
3.4 LA APLICACIÓN
3.4.1 PAGINA HOME
Ingresamos a la aplicación web con el siguiente enlace:
Ilustración 18 Página principal de la aplicación de Alquiler de casas y
departamentos.
83
En la primera pantalla del sitio web, hay 2 opciones para seleccionar.
¿En qué distrito? Y ¿Tipo de inmueble?
Una vez que el usuario selecciona sus preferencias se realizara un filtro de datos,
Damos clic en el botón BUSCAR y mostrara los resultados obtenidos desde la
base de datos.
3.4.2 PUBLICA TU ANUNCIO (REGISTRO)
Ilustración 19 Vista Previa de Publica tu anuncio
En esta sección los usuarios tienen la posibilidad de registrarse, los campos
necesarios son los nombres, apellidos, correo electrónico y contraseña.
Posteriormente de completar de registrarse el sistema enviara un correo
electrónico de confirmación de usuario.
84
Ilustración 20 Vista Previa de Acceso a Anunciantes
3.4.3 ACCESO ANUNCIANTES (LOGIN)
En esta sección se puede acceder a la aplicación web, mediante el formulario de
identificación (correo electrónico y contraseña), adicionalmente muestra cuantos
usuarios se han registrado al sistema, la cantidad de anuncios publicados y las
visitas al sitio web.
3.4.4 GALERÍA
85
Ilustración 21 Galería
En esta sección se muestran mediante una grilla los lugares más importantes
de la ciudad de la Arequipa. Existe interacción en la galería de fotos
Ilustración 22 Galería de fotos
3.4.5 FOOTER DE LA PAGINA WEB
Ilustración 23 Footer de la Pagina Web
Pie de página del sitio web, se muestra el mapa de Google Maps, señalando la
sede del evento.
86
3.4.1 PAGINA DE USUARIO IDENTIFICADO
Ilustración 24 Página de Usuario Identificado
Una vez identificados en el sistema, la aplicación web tiene las siguientes
opciones:
 Agregar Anuncio: Permite agregar un nuevo anuncio a la aplicación web
 Ver + : Permite visualizar el contenido del anuncio más detalladamente.
 Editar Anuncio: Permite modificar los datos básicos, detalles y
fotografías del anuncio publicado.
 Estado: Aprobado(fue aprobado por el administrador)
Desaprobado (fue desaprobado por el administrador)
Pendiente (En espera de revisión por el administrador)
87
 Estado del anuncio: El usuario puede seleccionar entre “visible” o
“oculto”.
 Mis Anuncios: Muestra los anuncios publicados por el usuario.
 Salir: Se cierra sesión de la aplicación.
3.4.2 AGREGAR ANUNCIO
Ilustración 25 Agregar Anuncio
Clic en el botón
88
3.4.2 DATOS BASICOS | AGREGAR ANUNCIO
El usuario tiene que completar el primer formulario con información básica, estos
campos son:
Datos Básicos
 Tipo de Inmueble: Casa o departamento
 Precio por noche en S/
 Tipo de cambio (a disposición del usuario)
 Precio US$ (Se genera automáticamente, según el tipo de cambio
ingresado por el usuario)
 Distrito (Se muestran los distritos de Arequipa)
 Dirección
Datos de contacto
Estos datos de contacto se mostraran en la página principal del nuevo anuncio
a publicar.
89
 Nombre
 E-mail
 Teléfono
Los campos del formulario se validan, mediante un script.
Ilustración 26 Script, Validación de datos
90
3.4.3 DETALLES | AGREGAR ANUNCIO
Datos a completar por el usuario:
 Descripción del Inmueble
 m2 construidos
 N° de pisos
 N° de dormitorios
 N° de baños
 Lista de características del inmueble
Aire acondicionado
Amueblado
Áreas verdes
Ascensor
Cochera
Cocina equipada
91
Comedor
Kitchenette
Lavandería
Piscina
Sala
Terraza
92
93
Para finalizar la publicación en el anuncio, aceptamos los términos y condiciones
94
Podemos observar que nuestro anuncio ya se encuentra publicado,
y se encuentra en Estado: En verificación.
3.5 CORREO DE VERIFICACIÓN DE PUBLICACION DE ANUNCIO
Cuando el usuario termina el proceso de agregar un nuevo usuario, le llega
automáticamente un correo electrónico con los detalles de la publicación de su
anuncio.
95
Ilustración 27 Correo de Verificación de publicación de anuncio
3.6. EDITAR ANUNCIO
96
La opción de editar el anuncio, solo estará disponible si el anuncio fue aprobado
previamente por el administrador, el estado de visible u oculto, no necesita
aprobación del administrador.
Podemos editar el anuncio desde los datos básicos, detalles, agregar o quitar
fotos, los campos están con validación, una vez terminada la modificación del
anuncio damos clic en “Guardar”.
Si los cambios son guardados de manera correcta, se visualiza un mensaje de
alerta de color verde con “Se guardaron los cambios con éxito”.
97
3 VER ANUNCIO
Para ver más información acerca de nuestro anuncio, damos clic en el botón “Ver
+ “, esa es la presentación que todo los usuarios visitantes de la aplicación
podrán visualizar, destacando en la parte derecha el precio por noche, los datos
de contacto y las características del inmueble.
98
99
3.8 BUSCAR ANUNCIOS
Regresamos a la página de inicio, vamos a buscar nuestro anuncio previamente
creado, seleccionas el departamento y ambos, y damos clic en el botón de
“Buscar”.
100
Página de resultados de búsqueda de los anuncios, en la parte derecha podemos
aplicar filtros por el tipo de inmueble, ambientes, precio por noche y fecha de
publicación.
Una vez encontrado nuestro anuncio, damos clic en el botón “VER + “
En la página del anuncio podemos ver información más detallada del inmueble.
3.9 CONTACTAR CON EL ANUNCIANTE
101
Cuando ponemos clic en el botón de “Contar al anunciante” se abrirá una
ventana modal con un formulario de contacto.
102
Después de enviar un mensaje de contacto al anunciante del inmueble, el
anunciante recibe un correo automáticamente generado por la aplicación web
con los datos del interesado.
3.10 PANEL DE ADMINISTRACIÓN
En el panel de administración podemos ver un registro de todos los anuncios
publicados, pendientes de aprobación y rechazados.
103
El Panel de Administración cuenta con filtros por “Estado” y “Fecha”, por
defecto se encuentra Estado: “Todos” y Fecha “Todos los días”.
El panel de administración cuenta con las opciones de Aprobar, desaprobar y
eliminar los anuncios.
También podemos enviar mensajes personalizados al correo de los contactos
de los anunciantes.
Filtrando por Estado: Aprobado
104
Filtrando por Estado: Pendientes
Filtrando por Estado: Desaprobados
105
Enviar mensaje personalizado
Esta opción permite enviar un correo electrónico a los anunciantes.
Completamos los campos del mensaje y damos clic en “Enviar”
106
CONCLUSIONES
Después de haber superado la fase de análisis, diseño, desarrollo e
implementación de la aplicación web de alojamiento de casas, departamentos y
hospedajes para el evento de Convención Minera PERUMIN33, se ha concluido
lo siguiente:
 El evento Convención Minera PERUMIN 33, cuenta con una aplicación
web de servicio de alojamiento que permite la creación de anuncios de
casas, departamentos u hospedajes.
 Mediante la aplicación web, las personas y empresas que cuenten con
una casa, departamento, hospedaje, casa de retiro y boutique, tienen la
facilidad de crear un anuncio, completar una serie de características y
ponerlas en alquiler.
 Las personas interesadas en residir momentáneamente en Arequipa
visualizan los anuncios y se contactan con el anunciante, mediante un
formulario.
 Actualmente el administrador del sitio tiene acceso a visualizar los
anuncios que se envían para una posterior verificación y aprobación.
 A través de esta aplicación web, el usuario tiene la posibilidad de buscar,
filtrar anuncios de alojamiento según el distrito y el tipo de inmueble.
 En cuanto al administrador, es el único usuario que puede aprobar,
desaprobar y eliminar los anuncios enviados por los usuarios.
107
 La creación de nuevas cuentas, anuncios, búsquedas, es de manera
gratuita.
 La integración de herramientas y tecnologías empleadas para el
desarrollo de la aplicación web han sido seleccionadas por ser software
libre, profesionales y con un abanico amplio de documentación.
108
RECOMENDACIONES
Se han categorizado las recomendaciones con la misión de representar las
informaciones acotadas de manera estructurada, teniendo los siguientes puntos:
Del análisis, diseño y desarrollo
 Cuando analizamos los requerimientos para el desarrollo de la aplicación
web, es importante interactuar con los usuarios finales que harán uso de
nuestro sistema, pues cada uno aportará con una idea diferente y podría
ayudar a entender y mejorar la problemática.
 Es bueno planificar a un futuro la investigación acerca de los nuevos
paradigmas de programación, estándares actuales para saber cuál sería
el ideal para implementarlo, pensando siempre en una mejora continua,
es decir, qué pasaría si utilizamos otro framework u otro gestor de
contenidos.
 En la fase de desarrollo de la aplicación web, se tiene que documente lo
mejor posible el código programado, ya que probablemente nos toque
lidiar nuevamente con ese código para una mejora o corrección de algún
error, esto es importante para el ciclo de vida del mantenimiento del
aplicativo.
109
 Sobre el desarrollo del aplicativo web, es importante también implementar
código genérico y recursivo, que facilite la comprensión de lógica usada
para los futuros programadores o administrador del sistema.
De la implementación
 Cuando pongamos en producción nuestra aplicación web, es requisito
tener con un servidor robusto que pueda administrar los requisitos de los
clientes o usuarios, verificar si se cuenta con la suficiente cantidad de
almacenamiento, tasa de trasferencia, velocidad, memoria, de una red de
redes robusta y sobretodo que garantice el correcto funcionamiento del
servidor.
 Se recomienda utilizar el software de control de versiones git, en nuestro
caso utilizamos Github para llevar un mejor control sobre las
actualizaciones de nuestros archivos que conforman el proyecto y
posterior ediciones en caso exista algún error.
En cuanto al diseño de interfaces y experiencia de usuario:
 Es recomendable utilizar una herramienta que permita agilizar el
desarrollo de código como el rendimiento del mismo, en este caso
utilizamos el plugin Emmet para el editor Sublime Text. Emmet es un
conjunto de herramientas para desarrolladores web que puede mejorar en
gran medida su flujo de trabajo HTML y CSS.
110
 Es importante probar en diferentes dispositivos la adaptabilidad visual de
nuestra aplicación web, con el fin de validar y verificar la usabilidad de
nuestro proyecto, generando así una interfaz de usuario positiva.
111
REFERENCIAS BIBLIOGRÁFICAS
Bibliografía
Arbeláez Salazar, O., & Medina Aguirre, A. (2015). Herramientas para el
desarrollo rápido de aplicaciones web. Obtenido de
https://dialnet.unirioja.es/servlet/articulo?codigo=4525952
Isabel, N. (2013). UX Design for Developers - Google IO. Obtenido de
http://commondatastorage.googleapis.com/io-
2013/presentations/1252_UX_design_for_developers.EXT_.pdf
Perez Montoro, & Gutierrez, M. (2015). Arquitectura de la información en
entornos web. Obtenido de
http://dialnet.unirioja.es/servlet/articulo?codigo=3274374
PERUMIN. (08 de Agosto de 2017). Convención Minera. Obtenido de
https://www.convencionminera.com/perumin33/docs/18-08-17-
PERUMIN33-AYUDA%20MEMORIA.pdf
Sommerville. (2005). Ingeniería del Software 7ma edición. Obtenido de
www.web.com
Varhol, P. D. (2005). Client/Server Systems Management. Computer Technology
Research Corp. 1995.
Whitten, N. (1995). Managing Software Development Projects. John Wiley.
Wordpress. (2016). Codex. Obtenido de https://codex.wordpress.org/
112

Kevin Salazar - Trabajo de Suficiencia Profesional - Titulo Profesional - 2018

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Kevin Salazar - Trabajo de Suficiencia Profesional - Titulo Profesional - 2018

Cargado por

Copyright:

Formatos disponibles

Facultad de Ingeniería

Carrera Profesional de Ingeniería de Software

Para optar el Título Profesional de Ingeniero de

"ANÁLISIS, DISEÑO, DESARROLLO E

A mis padres Edgar Salazar, Milagros Ruiz

Por darme la vida y motivarme a cumplir mis metas, por

por simplemente ser ellos, gracias padre y madre.

A mis hermanos Edwar y Fiorella

quienes compartieron conmigo toda mi vida universitaria,

por su incondicional apoyo y motivación en cada momento

Un agradecimiento en especial a los Grupos de

Comunidad Escuela Digital y PHP en español por su

Valioso apoyo en mi formación profesional y

Al Ing. Pedro Molina,

por su desempeño brindando en el desarrollo

del proyecto de mi tesis.

Tabla 1 Frameworks para aplicaciones web ................................................... 26

Ilustración 1 Modelo Cliente/Servidor .............................................................. 28

La presente tesis se basa al Análisis, diseño, desarrollo e implementación de la

aplicación web de alojamiento de casas y departamentos para el evento

internacional Convención Minera - PERUMIN 33, mediante el cual se busca

facilitar a los visitantes de la Ciudad de Arequipa modalidad rápida y eficaz de

El organizador del mega evento internacional PERUMIN 33 - Convención Minera

es el Instituto de Ingenieros de Minas del Perú (IIMP), que es una institución

privada sin fines de lucro constituida por calificados conocedores, técnicos,

asociados y personas jurídicas nacionales e internacionales que se

desenvuelven actividades mineras, geológicas o enlazadas a las compañías de

El IIMP tiene como objetivo principal la articulación de impulsos con diversas

constituciones privadas y estatales para colaborar a la implementación de

espacios de conversación, donde se analizan acciones que permitan generar el

avance sostenible del sector minero.

También como objetivo principal es el de impulsar y hacer actividades que

cooperar al desarrollo profesional y técnico de sus miembros que lo conforman

en temas relacionados a la minería. El Instituto de Ingenieros de Minas

anfitriones de actividades de minería a nivel internacional como son PERUMIN-

Convención Minera, Congreso Internacional de Prospectores y Exploradores,

Congreso Internacional de Minería, Relaciones Comunitarias, Conferencias

otros, que permiten la interacción de los miembros asociados, profesionales y

como la revista MINERÍA.

Ante la creciente demanda de alojamiento en la Ciudad de Arequipa que se

espera durante el desarrollo de PERUMIN 33 - Convención Minera, el Comité

oferta de casas y departamentos en alquiler ubicados en distintos puntos

La plataforma ofrecerá a los residentes de la Ciudad de Arequipa un sistema web

de registro totalmente gratuito en el que podrán publicar anuncios que contenga

la información de sus casas, departamentos y hoteles en alquiler.

1.1 DEFINICIÓN DEL PROBLEMA

El evento Perumin Convención Minera es un magno evento de minería de escala

el evento de Perumin se realizan conferencias magistrales donde estudiantes,

profesionales y empresarios nacionales e internacionales reconocidos de todos

los sectores llegan a la “Ciudad Blanca”, miles de personas interesadas en ser

parte del gran evento minero se registran mediantes nuestros aplicativos

alojamiento. El problema ocurre cuando los participantes, convencionistas y

conferencistas del evento llegan a la ciudad blanca y no encuentran hospedaje

disponible debido a la falta de información y/o asesorías. Otro problema que

también se presenta es la elevación de los precios por la alta demanda y pocas

empresas de hospedaje, generando malestar entre los participantes y

comentarios negativos durante y post evento.

1.2 DEFINICIÓN DE LOS OBJETIVOS

1.2.1 Objetivos generales

Desarrollar un aplicativo digital en la cual los convencionistas, conferencistas,

invitados y participantes en general puedan acceder y seleccionar una alternativa

de hospedaje según el distrito de su preferencia.