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
II
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
III
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
IV
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
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
V
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
VI
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 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
VII
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
VIII
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
IX
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.
X
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.
11
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
12
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
13
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.
14
juega un papel muy importante los propietarios de los inmuebles a alquilar, generando así un bienestar entre ambas partes.
15
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
16
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
17
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.
18
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.
19
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,
20
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.
21
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.
22
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”.
23
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
24
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.9Frameworks 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
25
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
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 para proyectos complejos, para los que aporta herramientas para la gestión de dependencias, modelos, controladores y enrutado.
React.js
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 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
Polymer, publicada en 2013 también por Google, es una librería
orientada a componentes. La idea es crear webs a partir de
26
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
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
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.
27
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,
28
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
29
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
30
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:
31
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
32
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
33
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.
34
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
35
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.
36
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
37
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
38
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
39
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.
40
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”.
41
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
42
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
43
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
Descripción general La aplicación web debe tener un botón de desaprobar anuncio, cuando un anuncio se desaprueba cambia de estado “Pendiente” a “Desaprobado”.
Prioridad Alta
44
Requerimiento RF05
Nombre del requerimiento: Eliminar anuncio
Descripción general La aplicación web debe tener un botón de 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
45
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:
46
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
47
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
48
Tabla 13 RF12 Usuario – Crear Anuncio – Paso 1
Requerimiento RF13
Nombre del requerimiento: Usuario – Crear Anuncio – Paso 2
Descripción general Detalles (debe de contener la siguiente lista, y el usuario deberá de marcar una o más opciones)
50
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
51
Tabla 15 RF14 Usuario – Subir Fotos – Paso 3
Requerimiento RF15
Nombre del requerimiento: Usuario – Foto principal – Paso 3 Descripción general La aplicación web deberá tener la
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 Descripción general La aplicación web deberá tener la
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
52
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
53
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
54
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
55
Tabla 23 RF22 Filtros del Buscador de alojamiento
Requerimiento RF23
56
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
57
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.
58
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.
59 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
60
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)
61
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
62
anunciantes, debe de contar con 7 fotografías de las siguientes lugares de Arequipa:
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
63
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
64
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:
Dirección y departamento
Precio por noche en Soles
Precio por noche en Dólares
Metros cuadrados de la casa,
departamento o hospedaje.
65
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
66
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
67
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
68
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.
69
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
Clave Campo Tipo Longitud
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
70
metroscuadrados INT
numerosbanos INT
Numerospisos INT
comentarios VARCHAR 800 Fcreacion DATETIME
Primaria idanuncioupload INT 11
71
72
factualizacion TIMESTAMP 1
Tabla 45 Alo_inmueble
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í.
73
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.
74
Ilustración 7 Boceto de Publica tu anuncio
75
Ilustración 9 Boceto Pagina Web Arequipa
76
78
79
80
81
Ilustración 15 Boceto Subir fotos
82
83
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
84
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
85
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.
86
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
87
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)
88
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
89
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
90 Nombre
Teléfono
Los campos del formulario se validan, mediante un script.
91
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
92
Comedor
Kitchenette
Lavandería
Piscina
Sala
94
95
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
96
Ilustración 27 Correo de Verificación de publicación de anuncio
