universidad central del ecuadordiversas tecnologías que se utilizaron para elaborar el portal web...
TRANSCRIPT
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS Y MATEMÁTICA
CARRERA DE INGENIERÍA INFORMÁTICA
Creación de canales informativos para la gestión de Fundaciones Rurales del Distrito
Metropolitano de Quito, caso Amaguaña.
Trabajo de titulación modalidad Proyecto Integrador, previo a la obtención del título de
Ingeniera Informática.
AUTORA: Oyasa Sepa Ana Gabriela
TUTOR: Dr. Santiago Leonardo Morales Cardoso MSc.
Quito, 2019
ii
DERECHOS DE AUTOR
Yo, Oyasa Sepa Ana Gabriela, en calidad de autor y titular de los derechos morales y
patrimoniales del trabajo de titulación CREACIÓN DE CANALES INFORMATIVOS
PARA LA GESTIÓN DE FUNDACIONES RURALES DEL DISTRITO
METROPOLITANO DE QUITO, CASO AMAGUAÑA, modalidad integrador, de
conformidad con el Art. 114 del CÓDIGO ORGÁNICO DE LA ECONOMÍA SOCIAL DE
LOS CONOCIMIENTOS, CREATIVIDAD E INNOVACIÓN, concedo a favor de la
Universidad Central del Ecuador una licencia gratuita, intransferible y no exclusiva para
el uso no comercial de la obra, con fines estrictamente académicos. Conservo a mi favor
todos los derechos de autor sobre la obra, establecidos en la normativa citada.
Así mismo, autorizo a la Universidad Central del Ecuador para que realice la
digitalización y publicación de este trabajo de titulación en el repositorio virtual, de
conformidad de lo dispuesto en el Art. 144 de la Ley Orgánica de Educación Superior.
El autor declara que la obra objeto de la presente autorización es original en su forma
de expresión y no infringe el derecho de autor de terceros, asumiendo la responsabilidad
por cualquier reclamación que pudiera presentarse por esta causa y liberando a la
Universidad de toda responsabilidad.
___________________________
Oyasa Sepa Ana Gabriela
CI.: 172016895-2
iii
APROBACIÓN DEL TUTOR
Yo, Santiago Morales Cardoso en calidad de tutor del trabajo de titulación CREACIÓN
DE CANALES INFORMATIVOS PARA LA GESTIÓN DE FUNDACIONES RURALES
DEL DISTRITO METROPOLITANO DE QUITO, CASO AMAGUAÑA, realizada por la
estudiante Oyasa Sepa Ana Gabriela, estudiante de la Carrera de Ingeniería Informática,
Facultad de Ingeniería Ciencias Físicas y Matemática de la Universidad Central del
Ecuador, considero que dicho trabajo reúne los requisitos y méritos suficientes para ser
sometido a la presentación pública y evaluación por parte del tribunal examinador que
se designe.
En la ciudad de Quito, a los días 26 del mes septiembre del 2019.
__________________________________________
Dr. Santiago Leonardo Morales Cardoso MSc.
DOCENTE-TUTOR
CI: 170797993-4
iv
DEDICATORIA
Dedico este trabajo con todo mi amor, a mi padre celestial, el que me acompaña y
siempre me levanta de mi continuo tropiezo, por fortalecer mi corazón e iluminar mi
mente, y sobre todo por brindarme la oportunidad de culminar mi estudio cumpliendo
uno de mis grandes sueños.
A mis padres Luis Oyasa y María Sepa, por darme la vida, amarme mucho, creer en mí,
por haberme educado y soportar mis errores. Me han dado todo lo que soy como
persona, mis valores, mis principios, mi carácter, mi empeño, mi perseverancia, mi
coraje para conseguir mis objetivos.
A mi amado hijo David Sebastián, por ser mi principal fuente de motivación e inspiración
para poder superarme cada día más y así poder luchar para que la vida nos depare un
futuro mejor.
A mi esposo Stalin David, por acompañarme durante todo este arduo camino brindarme
su apoyo y sobre todo por compartir conmigo alegrías y fracasos.
A mis hermanos, Fausto y Janeth, por estar conmigo, apoyarme siempre, los amo
mucho.
Ana Oyasa
v
AGRADECIMIENTOS
Mi especial reconocimiento y agradecimiento al Dr. Santiago Leonardo Morales Cardoso
MSc, tutor de este proyecto de titulación, por sus sabios conocimientos, su don de gente,
por su mística profesional y sobre todo por su inestimable apoyo y confianza depositada
en mi persona.
A la Señorita Ana Belén Morales Reina de Amaguaña 2018 - 2019, por haber confiado
en mi persona y haberme facilitado los implementos necesarios y cooperación durante
el desarrollo del proyecto.
A la Universidad Central del Ecuador, Facultad de Ingeniería Ciencias Físicas
Matemática en especial a la Carrera de Ingeniería en Informática, por haberme permitido
absorber todo el conocimiento que esta me pudo brindar de manera integral a través de
su personal docente del cual también estoy muy agradecida.
A mis compañeros de clases quienes me acompañaron en esta trayectoria de
aprendizaje y conocimientos.
Ana Oyasa
vi
CONTENIDO
DERECHOS DE AUTOR .............................................................................................. ii
APROBACIÓN DEL TUTOR ......................................................................................... iii
DEDICATORIA ............................................................................................................ iv
AGRADECIMIENTOS ................................................................................................... v
CONTENIDO ............................................................................................................... vi
LISTA DE FIGURAS .................................................................................................... ix
LISTA DE TABLAS ....................................................................................................... x
RESUMEN ................................................................................................................... xi
ABSTRACT ................................................................................................................. xii
INTRODUCCIÓN .......................................................................................................... 1
1. CAPÍTULO I. ANÁLISIS DEL PROBLEMA .............................................................. 2
1.1. PLANTEAMIENTO DEL PROBLEMA ............................................................. 2
1.2. ANTECEDENTES........................................................................................... 2
1.3. ALCANCE ...................................................................................................... 3
1.4. VENTAJAS Y DESVENTAJAS ....................................................................... 4
1.5. OBJETIVO GENERAL Y ESPECÍFICOS ........................................................ 5
2. CAPÍTULO II. MARCO TEÓRICO ......................................................................... 6
2.1. PARROQUIA AMAGUAÑA ............................................................................. 6
2.2. GOBIERNOS AUTÓNOMOS DESCENTRALIZADOS .................................... 6
2.3. GAD PARROQUIAL RURAL .......................................................................... 6
2.4. FUNDACIÓN .................................................................................................. 6
2.5. INTERNET...................................................................................................... 7
2.6. HERRAMIENTAS WEB .................................................................................. 8
2.7. ARQUITECTURA DE UNA APLICACIÓN WEB ............................................ 11
2.8. ARQUITECTURA 3 CAPAS ......................................................................... 12
2.9. TECNOLOGÍAS PARA EL DESARROLLO WEB .......................................... 13
3. CAPÍTULO III. METODOLOGÍA .......................................................................... 20
3.1. MODALIDAD BÁSICA DE LA INVESTIGACIÓN........................................... 20
3.2. RECOLECCIÓN DE LA INFORMACIÓN ...................................................... 20
3.3. PROCESAMIENTO Y ANÁLISIS DE DATOS ............................................... 21
3.4. METODOLOGÍA DEL PROYECTO .............................................................. 21
3.4.1. Metodologías de Desarrollo de Software ............................................... 22
3.4.2. Análisis de Metodologías Ágiles ............................................................ 22
3.4.3. Justificación de la metodología .............................................................. 24
3.4.4. Metodología ágil XP ............................................................................... 24
3.4.5. Valores de XP ........................................................................................ 25
vii
3.4.6. Historias de Usuarios ............................................................................. 25
3.4.7. Roles XP ............................................................................................... 25
3.4.8. Reglas y Prácticas XP ........................................................................... 26
3.5. JUSTIFICACIÓN DE LAS HERRAMIENTAS DE DESARROLLO ......... 28
3.5.1. Administrador de Base de Datos ........................................................... 29
3.5.2. Proveedor de alojamiento web .............................................................. 30
4. CAPÍTULO IV. DESARROLLO DEL PROYECTO ................................................ 32
4.1. PLANIFICACIÓN .......................................................................................... 32
4.1.1. Especificación de Requerimientos ......................................................... 32
4.1.2. Plan de Entregables .............................................................................. 36
4.1.3. Reuniones ............................................................................................. 38
4.2. DISEÑO ........................................................................................................ 38
4.2.1. Metáfora del sistema ............................................................................. 38
4.2.2. Proceso de Portal Web Reina de Amaguaña ......................................... 38
4.2.3. Modelo Entidad Relación ....................................................................... 40
4.2.4. Codificación ........................................................................................... 43
4.2.5. Equipo ................................................................................................... 45
4.3. PRUEBAS .................................................................................................... 46
4.3.1. Pruebas Unitarias .................................................................................. 46
4.3.2. Pruebas de Aceptación .......................................................................... 48
4.4. DESPLIEGUE DEL PORTAL ........................................................................ 52
4.4.1. Administración del Dominio ................................................................... 53
4.4.2. Administración del Cpanel ..................................................................... 54
4.4.1. Administración de Archivos mediante el Cpanel .................................... 54
4.4.1. Administración de phpMyAdmin mediante el Cpanel ............................. 55
4.5. ANÁLISIS DE RESULTADOS ...................................................................... 56
4.5.1. Ejecución del Portal Web ....................................................................... 56
4.5.2. Recolección de Información para el Análisis .......................................... 56
4.5.3. Resultados de las pruebas de Aceptación ............................................. 56
4.5.4. Análisis de los resultados ...................................................................... 56
5. CAPITULO V. CONCLUSIONES Y RECOMENDACIONES................................. 58
BIBLIOGRAFÍA ........................................................................................................... 60
ANEXO A ................................................................................................................ 62
ANEXO B ................................................................................................................ 80
ANEXO C ................................................................................................................ 92
ANEXO D .............................................................................................................. 120
ANEXO E .............................................................................................................. 127
viii
ANEXO F .............................................................................................................. 130
ix
LISTA DE FIGURAS
Figura 1: Arquitectura de una página Web. ................................................................. 12
Figura 2: Arquitectura tres Capas ............................................................................... 13
Figura 3: Procesos de XP ........................................................................................... 26
Figura 4: Orden de ejecución de las en el proceso de planeación. ............................. 27
Figura 5: Top de los 3 mejores hostings en el año 2019. ............................................ 30
Figura 6: Proceso del Portal Web Reina de Amaguaña .............................................. 39
Figura 7: Base de Datos del Portal Web Reina de Amaguaña .................................... 40
Figura 8: Interface de Presentación del Portal ............................................................ 42
Figura 9: Interface de Login ........................................................................................ 42
Figura 10: Módulo Administrador. ............................................................................... 43
Figura 11: Método para acceso de usuario administrador. .......................................... 43
Figura 12: Método para envío de correo electrónico desde el portal web. ................... 44
Figura 13: Método para guardad una publicación. ...................................................... 44
Figura 14: Método para guardad una publicación. ...................................................... 45
Figura 15: Líneas de Código “Enviar Correo de Pedido”. ............................................ 46
Figura 16: Pedido Realizado. ...................................................................................... 47
Figura 17: Correo electrónico recibido del pedido enviado a través del Portal. ........... 47
Figura 18: Dominio sonrieamaguana.com ................................................................... 53
Figura 19: CPanel del portal web vinculado al dominio sonrieamaguana.com ............ 54
Figura 20: Administrador de Archivos en el CPanel .................................................... 55
Figura 21: Administrador de Archivos en el CPanel .................................................... 55
x
LISTA DE TABLAS
Tabla 1: Cuadro comparativo de las metodologías de desarrollo de software ............. 22
Tabla 2: Cuadro comparativo entre la metodología Srum y XP. .................................. 24
Tabla 3: Top de los 3 mejores hostings en el año 2019. ............................................. 30
Tabla 4: Formulario para la creación de historias de usuario. ..................................... 32
Tabla 5: Historias de usuario. Slider Presentación. ..................................................... 33
Tabla 6: Historias de usuario. Cronograma. ................................................................ 33
Tabla 7: Historias de usuario. Turismo. ....................................................................... 34
Tabla 8: Historias de usuario. Reinas. ........................................................................ 34
Tabla 9: Historias de usuario. Guía de Eventos. ......................................................... 34
Tabla 10: Historias de usuario. Gastronomía. ............................................................. 35
Tabla 11: Historias de usuario. Fiestas ....................................................................... 35
Tabla 12: Historias de usuario. Extra. ......................................................................... 35
Tabla 13: Historias de usuario. Configuración. ............................................................ 36
Tabla 14: Historias de usuario. Acceso al Portal. ........................................................ 36
Tabla 15: Plantilla Esfuerzo de Desarrollo para el Proyecto. ....................................... 37
Tabla 16: Plan de Interacción HU1 hasta la HU10. ..................................................... 37
Tabla 17: Plan de Entregas......................................................................................... 38
Tabla 18: Detalles del Equipo donde se Implementa el Sistema. ................................ 45
Tabla 19: Plantilla para la Elaboración de las Pruebas de Aceptación. ....................... 48
Tabla 20: Prueba de Aceptación. Slider de Presentación. .......................................... 49
Tabla 21: Prueba de Aceptación: Cronograma ........................................................... 49
Tabla 22: Prueba de Aceptación: Turismo .................................................................. 50
Tabla 23: Prueba de Aceptación: Reinas .................................................................... 50
Tabla 24: Prueba de Aceptación: Guía de Eventos. .................................................... 50
Tabla 25: Prueba de Aceptación: Gastronomía. .......................................................... 51
Tabla 26: Prueba de Aceptación. Fiestas. ................................................................... 51
Tabla 27: Prueba de Aceptación: Extra. ...................................................................... 51
Tabla 28: Prueba de Aceptación: Configuración. ........................................................ 52
Tabla 29: Prueba de Aceptación: Acceso al Portal. .................................................... 52
Tabla 30: Resultado de las Pruebas de Aceptación. ................................................... 56
xi
TÍTULO: Creación de canales informativos para la gestión de Fundaciones Rurales del
Distrito Metropolitano de Quito, caso Amaguaña.
Autora: Oyasa Sepa Ana Gabriela
Tutor: Dr. Santiago Leonardo Morales Cardoso MSc.
RESUMEN
El presente proyecto de titulación expone la creación de un canal informativo entre la
reina de la Parroquia Amaguaña y sus habitantes. El propósito del proyecto determina
el análisis, desarrollo e implementación de un portal web que permite difundir de manera
organizada las actividades de carácter social y cultural, en primera instancia se realizó
el análisis de la situación actual de la organización de reinas, en la cual se utilizó técnicas
de recolección de datos empleando la recopilación documental y bibliográfica a través
de la web, la entrevista libre y la observación. El estudio metodológico esta direccionado
por la metodología de Programación Extrema, donde se identifica las principales
necesidades de difusión de información de la reina de la Parroquia de Amaguaña con
sus habitantes y sus posibles mejoras, lo mencionado permitió la construcción del
modelo de negocio representando el funcionamiento óptimo de los procesos. Entre las
diversas tecnologías que se utilizaron para elaborar el Portal Web se encuentra Symfony
como framework php que facilita el desarrollo de aplicaciones web mediante uso de
lenguaje de programación php, Doctrine el mapeador objeto-relacional de php que
facilita el acceso a la base de datos, Cloud9 developmet como entorno de desarrollo en
la nube, MySQL el servidor de base de datos usado en el desarrollo y producción de la
página web. De esta manera se concluye que con la implementación del portal web se
logra reducir los tiempos de organización y consulta de información; además de
disminuir los riesgos de pérdida de información.
PALABRAS CLAVE: SYMFONY / FRAMEWORK / PHP / CLOUD9 DEVELOPMET /
MYSQL.
xii
TITLE: Creation of information channels for the management of Rural Foundations in
the Metropolitan District of Quito, Amaguaña case.
Author: Oyasa Sepa Ana Gabriela
Tutor: Dr. Santiago Leonardo Morales Cardoso MSc.
ABSTRACT
This degree project exposes the creation of an information channel between the queen
of the Parish of Amaguaña and its inhabitants. The purpose of the project determines
the analysis, development and implementation of a web portal that allows to disseminate
in an organized manner the social and cultural activities, in the first instance was made
the analysis of the current situation of the organization of queens, which used data
collection techniques using documentary and bibliographic collection through the web,
free interview and observation. The methodological study is guided by the Extreme
Programming methodology, which identifies the main needs for information
dissemination of the Queen of the Parish of Amaguaña with its inhabitants and its
possible improvements, which allowed the construction of the business model
representing the optimal functioning of the processes. Among the various technologies
used to develop the Web Portal is Symfony as a php framework that facilitates the
development of web applications through the use of php programming language,
Doctrine the object-relational php mapper that facilitates access to the database, Cloud9
developmet as a development environment in the cloud, MySQL the database server
used in the development and production of the website. In this way it is concluded that
with the implementation of the web portal it is possible to reduce the time of organization
and consultation of information; in addition to diminishing the risks of loss of information.
KEYWORDS: SYMFONY / FRAMEWORK / PHP / CLOUD9 DEVELOPMET / MYSQL.
1
INTRODUCCIÓN
¿Qué mejor para una institución, empresa o negocio que un canal de comunicación que
brinde contacto directo con sus clientes? Internet ha abierto un universo de posibilidades
para las organizaciones que, más que nunca, intentan responder a las necesidades de
sus clientes de forma eficiente. La posibilidad de compartir información en tiempo real
referente a las últimas noticias, eventos, actividades y proyectos que se desarrollan
dentro de una organización, reduciendo costos en comparación a los medios de
comunicación tradicionales, ayuda a que las empresas se mantengan a la vanguardia
de la tecnología haciendo uso de todos los beneficios que Internet ofrece actualmente.
Hoy por hoy, un portal de internet es la presentación de cualquier empresa frente al
mundo exterior, mejorando el alcance del servicio que brinda dado el volumen de
usuarios que acceden a internet cada día desde cualquier parte del mundo, las
posibilidades de llegar a ellos a través de Internet son más numerosas que a nivel físico.
Desde hace varios años atrás, la Parroquia Amaguaña difunde información
correspondiente a los proyectos que realiza la reina de su parroquia a través de medios
de comunicación tradicionales tales como: revistas, radio y televisión; dichos canales
informativos no han logrado captar la atención de los habitantes en su totalidad lo cual
ha ocasionado que no se reconozca la labor realizada en beneficio de la parroquia.
Por lo antes mencionado, se ha visto la necesidad de crear un canal informativo que
permita difundir a través de internet las actividades que realiza la reina de esta parroquia
manteniendo un cronograma sobre las actividades próximas para que los habitantes
puedan participar y colaborar de forma directa e indirecta. En el Portal Web se incluye
un menú destinado a fomentar el turismo el cual de alguna manera pretende también
ayudar al desarrollo de la parroquia.
Para elaborar el portal web como primer paso se realizará el levantamiento de procesos
de difusión y gestión de información que realiza la Reina de Amaguaña con el objetivo
de identificar el personal que se involucrará en el manejo de la aplicación web. Los
Módulos que componen el manejo de la información en el portal web será el módulo
Visitantes y el módulo Administrador dichos módulos serán detallados más adelante.
Para dar asistencia a los usuarios visitantes que deseen navegar en el sitio web se
incluye en este trabajo escrito el correspondiente manual de usuario que contiene una
guía escrita con imágenes que detallan los pasos que el usuario visitante debe realizar
para que disfrute de los servicios que ofrece el portal web.
2
CAPÍTULO I. ANÁLISIS DEL PROBLEMA
1.1. PLANTEAMIENTO DEL PROBLEMA Presentación del Problema
La Reina de la Parroquia Rural de Amaguaña, es una entidad encargada en impulsar
proyectos de labor social, cultural y de medio ambiente, con el propósito de mejorar el
desarrollo de la parroquia. Actualmente, la reina de Amaguaña, ha desarrollado un
trabajo arduo y desinteresado en diferentes aspectos. Tiene su propia estructura social
para comunicar e intercambiar información con los habitantes de su parroquia mediante
Facebook, Twitter y YouTube.
La utilización de redes sociales como una distribución de comunicación en muchas
ocasiones provoca que los usuarios cada vez tengan menor credibilidad en la
información que se publica, debido a que personas mal intencionadas crean perfiles
falsos para suplantar la identidad de una persona y publicar información falsa, Además,
el respaldo de todos los datos que se almacena en un espacio social no es seguro, por
motivo de que si una red social deja de funcionar el usuario no podrá recuperar la
información publicada.
Debido a que no todas las personas y empresas manejan redes sociales se limita la
oportunidad de adquirir algún tipo de donación ya que no se logra captar su atención,
impidiendo expandirse a nivel nacional e internacional.
Por lo expuesto anteriormente se determina que, la nueva alternativa web tecnológica
expuesta como creación de canales informativos para la dirección de fundaciones
rurales para el Distrito Metropolitano de Quito, es de carácter necesario por que intenta
ofrecer una alta disponibilidad de información acerca de las actividades que realiza la
reina de la parroquia Amaguaña, asequible las 24 horas, los 365 días del año. La
aplicación web es una nueva solución que soporta las operaciones habituales y pretende
substituir en su totalidad a aquellos procesos manuales, ineficientes y demorados, con
ellos brindar oportunidades de acceso extendidos más allá de los típicos horarios de
oficina.
Garantizará de esta manera la correcta difusión de la información a todos los habitantes
de la Parroquia de Amaguaña.
1.2. ANTECEDENTES Amaguaña, es una Parroquia Rural del Ecuador, perteneciente al Cantón Quito de
la provincia de Pichincha.
3
Amaguaña fue constituida como Parroquia del Cantón Quito el 29 de mayo de 1861 por
el Dr. Gabriel García Moreno por medio de la Ley de División Territorial, de ahí en más
cada año los pobladores de esta localidad tienen distinción a la tierra amada
(Amaguaña, 2016). Según la presente página web del gobierno de Amaguaña, indica
que “la agenda de actividades recoge eventos deportivos, culturales y educativos que
tienen como principales actores a grandes y chicos en una fiesta que irradia alegría,
algarabía y emoción. Por motivo de esta celebración año a año el Gobierno Parroquial
de Amaguaña organiza la Elección de la Reina de Amaguaña, evento que reúne a la
belleza de la parroquia. Las candidatas son representantes de los barrios de Amaguaña,
este certamen tiene por objetivo trabajar en el área social con los grupos vulnerables”
(Amaguaña, 2016).
Entre las actividades que realiza la Reina de Amaguaña están las siguientes:
• Participar en programas de carácter social con organizaciones e Instituciones
afines de fomentar el turismo de la Parroquia.
• Colaborar en labores ligadas con otras organizaciones privadas y públicas en
campañas destinadas al bienestar de la comunidad.
• Actuar en favor del cuidado del medio ambiente, por medio de campañas y
programas de reciclaje, limpieza y conservación de la Parroquia de Amaguaña.
• Desempeñar cualquier otra tarea en conformidad con sus objetivos de trabajo de
asistencia social comunitaria.
Debido a que son muchas las actividades que realiza la Reina de Amaguaña en
beneficio de la sociedad se han visto en la necesidad de crear un Portal Web como canal
de comunicación masivo para informar a los habitantes sobre los proyectos y actividades
que esta entidad realiza evitando no omitir información relevante.
1.3. ALCANCE
El alcance de este proyecto Integrador será la publicación en Internet del Portal Web
Reina de Amaguaña, el cual contiene información organizada y actualizada tanto de la
gestión de la Reina, como información sobre el turismo que ofrece actualmente la
Parroquia de Amaguaña. El Portal Web brinda lo siguiente:
Alcance Funcional
▪ El portal Web tendrá el logo de la Reina de la Parroquia Amaguaña.
▪ Permitirá visualizar cualquier tipo de contenido multimedia.
4
▪ Tendrá un usuario gestor de contenidos, que se encargue de actualizar la base
de datos. Esta gestión consistirá básicamente en actualizar las actividades que
realiza la Reina de Amaguaña, subir imágenes sobre cada evento en su
correspondiente galería, publicar los eventos próximos, etc.
▪ Proporcionará información a los usuarios sobre la Fundación Reina de
Amaguaña. Esta información estará dividida en dos partes: por un lado, la
información estática (información sobre la actual Reina de Amaguaña,
información de la Parroquia, lugares Turísticos) y por otro lado la información
dinámica, referente a noticias relacionadas con los eventos que realiza la Reina
de la Parroquia.
▪ Tendrá una sección especialmente para vincular las redes sociales Facebook y
Twitter con el objetivo de interactuar con los visitantes.
Alcance Técnico
▪ El Portal web será compatible con los principales navegadores de Internet como:
Google Chrome, Internet Explorer, Mozilla Firefox, Safari, Opera.
▪ El Portal Web permitirá la administración de usuarios es decir que solo las
personas autorizadas podrán acceder a la aplicación mediante un usuario y
contraseña autorizados.
1.4. VENTAJAS Y DESVENTAJAS
Ventajas
▪ Tener un portal web permite dar una buena imagen de la Fundación.
▪ Permite que los datos informativos de la Organización se encuentren disponible
las 24 horas, los 365 días del año. Además, gracias al correo electrónico
vinculado al portal, tanto instituciones privadas y públicas como usuarios, pueden
hacer llegar sus dudas y donaciones para la Fundación, esta información se
podrá visualizar desde cualquier computadora o dispositivo móvil con el que se
cuente en ese momento.
▪ El portal web no es sólo un medio de comunicación, sino que es el canal
publicitario más grande, y gracias a la incorporación de elementos multimedia
(sonido, imagen o vídeo) y las nuevas ramas de expansión como las redes
sociales, la Fundación podrá ser vista a nivel mundial y visitada por gran cantidad
de usuarios.
▪ Permite que la información se encuentre organizada y actualizada evitando
pérdidas de información debido a que los datos se encuentran almacenados y
protegidos a través de una base de datos.
5
▪ Mayor visibilidad, la gente puede encontrar a la Fundación fácilmente, la
oportunidad de proporcionar un mapa y dirección de los sitios turísticos de la
Parroquia de Amaguaña, incluso hoy en día la mayoría de la gente primero
consulta primero la información en línea antes de salir de la casa.
Desventajas
▪ Al no definir bien el nombre del sitio web puede ser muy confuso para la gente
encontrar a la fundación por medio de Internet.
▪ Si no se diseña correctamente el sitio web, el tener un sitio web estéticamente
espectacular, pero sin un estudio previo y una estrategia posterior para su
contenido, lo único que garantiza es que se convierta en una herramienta web
inservible que solo cree pérdida para la organización.
▪ Al no crear un rol de usuario para el administrador la información puede
mantenerse estática y evitará que la información sea actualizada y organizada.
▪ Se posee una capacidad de almacenamiento limitado.
1.5. OBJETIVO GENERAL Y ESPECÍFICOS
Objetivo General
Crear un Portal Web como canal de información que permita difundir información sobre
las actividades realizadas dentro de la parroquia y las fundaciones sociales de reinas,
utilizando herramientas de última generación y una metodología orientada a
aplicaciones web.
Objetivos Específicos
▪ Recopilar información necesaria acerca de las actividades y proyectos que
realiza la Reina de Amaguaña mediante técnicas de recolección de Información.
▪ Crear un portal web que permita difundir información de una manera organizada
y oportuna a través del framework Symfony.
▪ Crear una interfaz dinámica para actualizar los eventos de interés social, cultural
y deportivo de la Institución mediante la utilización de hojas de estilos en cascada
(CSS).
▪ Publicar el Portal Web en un dominio y hosting propio para la cual se utiliza el
Hosting GoDaddy.
6
2. CAPÍTULO II. MARCO TEÓRICO
2.1. PARROQUIA AMAGUAÑA
La parroquia rural Amaguaña es perteneciente al Distrito Metropolitano de Quito se
encuentra en el Valle de los Chillos y limita al norte con la parroquia Conocoto, al sur
con la parroquia de Uyumbicho, al este con el cantón Rumiñahui y al oeste con la
parroquia Cutuglagua. De acuerdo, al censo realizado por el Instituto Nacional de
Estadísticas y Censos del Ecuador en el año 2010, Amaguaña posee aproximadamente
31.106 habitantes.
Amaguaña abre sus puertas a las fiestas tradicionales de Carnaval en el mes de febrero
y la fiesta religiosa del Corpus Cristi en el mes de junio, con la finalidad de expandir
cultura y tradición fomentando de tal manera el turismo de la parroquia.
2.2. GOBIERNOS AUTÓNOMOS DESCENTRALIZADOS En nuestro país mediante la Constitución de la República del Ecuador en el apartado
Organizacional Territorial del estado decreta mediante el artículo 238 que “Los
gobiernos autónomos descentralizados conocidos por sus siglas GAD serán entidades
conformadas por los concejos: municipales metropolitanos, provinciales, regionales y
que además se integran también las juntas parroquiales rurales” (guíaOSC, 2017).
Estas entidades cuentan con independencia política, financiera y administrativa
direccionadas a cumplir los derechos de los ciudadanos para los cuales fueron
encomendados aplicando principios de integración, solidaridad y equidad.
2.3. GAD PARROQUIAL RURAL
Son niveles de gobierno de carácter parroquial rural que se encargan de la
administración y gobierno de las parroquias. Los GAD parroquiales rurales son personas
jurídicas de derecho público, con autonomía política, administrativa y financiera. Los
Vocales que lo conforman son electos mediante votación popular. El Vocal más votado
será quien la presida. (Activate Ecuador , 2014)
2.4. FUNDACIÓN
Al respecto Linares (1998) indica que las fundaciones “son organizaciones constituidas
sin ningún ánimo de lucro, cuyo patrimonio está afectado de un modo duradero a la
realización de fines de interés general” (Linares, 1998). No obstante, es importante
denotar que el primer mecanismo que se debe enfatizar en el manejo de este tipo de
7
institución, el cual no obtiene como fin algún medio lucrativo es el absoluto trabajo
voluntario, es por eso que cada fundación realiza autogestión con la única finalidad de
capitalizarse para realizar actividades sociales en bienestar a la humanidad.
2.5. INTERNET
Internet tiene su origen en el año 1969, es considerado como una gran red mundial de
computadoras que nace con la principal funcionalidad de compartir recursos e
intercambiar información. En esta enorme red mundial, los ordenadores se hallan unidos
por medio de varios tipos de conexiones y para comunicarse hacen uso de un lenguaje
o protocolo común, el TCP/IP. (Ramos Martín & Ramos Martín, 2014, pág. 2)
Como breve conclusión se puede mencionar que internet abarca todas las tecnologías
que facilita la conexión entre ordenadores situados en distintos sitios para que logren
compartir información.
WWW
La WWW o generalmente llamada Web, es uno de los muchos servicios que provee
internet tiene sus orígenes en Suiza en principio de los años 90 su creador fue el
investigador Tim Berners Lee, quien público su proyecto para que instituciones públicas
o privada además de personas puedan probarlo.
La Word Wide Web, es un sistema de información distribuido que se conforma de
hiperenlaces o links que utilizan capacidad multimedia de cualquier formato por ejemplo
imágenes, sonidos, texto, etc. Con el único objetivo de presentar la información
mediante las denominadas páginas electrónicas o páginas web “el protocolo que se
utiliza en las transacciones WWW es el HTTP y el lenguaje de marcas HTML” (Jose
Talledo, 2015, pág. 4).
HTTP
Cuando se habla de Hypertext Transference Protocol, se hace referencia al protocolo
de transferencia de hipertexto que comúnmente los navegadores manejan para ejecutar
las peticiones y recibir respuestas de los servidores web, con el objetivo que las
personas puedan navegar por una página web y visualizar información, para
comprender mejor esta definición imaginemos que visitamos la siguiente aplicación web
http://www.facebook.com. Donde claramente se puede observar que se une el
protocolo HTTP con Internet, de tal manera que las direcciones que visitamos siempre
se encuentran escritas primero con http seguido de www.
8
2.6. HERRAMIENTAS WEB
Se considera herramientas web a la agrupación de una o varios softwares web que
tienen como tarea abrir la puerta a la comunicación y colaboración con la Word Wide
Web. Hoy en día existen una infinita gama de herramientas web entre las que se
destacan por términos de comunicación, colaboración y usabilidad tenemos las
siguientes:
▪ redes sociales: permite la comunicación entre una o varias sin importar la
distancia a la que se encuentren.
▪ aplicaciones web: brinda a los usuarios el acceso a información distribuida en
la red Internet.
▪ blogs: ofrece la oportunidad de publicar información cada cierto tiempo
mediante los denominados artículos y posts.
▪ wiki: se considera un medio colaborativo, donde los miembros de la comunidad
pueden ingresar información para crear contenido de ideas actualizado.
▪ podcast: están dirigidos a la publicación de información en formato multimedia
es decir audio o video.
Una característica importante es que cuando una herramienta web se ejecuta lo hace
en un equipo denominado servidor manejando los recursos de este.
Aplicaciones Web
Como no hablar de las muy conocidas aplicaciones web que se han convertido en la
actualidad como una de los medios masivos para la publicación de información tanto
educativo, social, político, cultural a nivel mundial el hablar de aplicaciones web es
dialogar sobre la evolución del software informático que por un lado a dejado la
ejecución de su funcionamiento en un ordenador de escritorio para involucrarse en la
ejecución a través de un servidor web.
Para dar inicio al estudio de esta temática se define el siguiente concepto:
Las aplicaciones Web no son más que las herramientas de ofimática de la Web
2.0 que se manejan simplemente con una conexión a Internet, y en estos casos cabe
la opción de utilizar el ordenador sólo como forma de acceso a la aplicación remota.
(Villoria & Caivano, 2009, pág. 15)
Como ya se había mencionado anteriormente para que el usuario pueda acceder a una
aplicación web se puede utilizar cualquier navegador tales como Google Chrome,
9
Microsoft Edge, Safari, Mozilla Firefox, etc. Entre las ventajas más comunes de las
aplicaciones web se enumeran las siguientes:
▪ No es necesario la instalación de software especial en el lado del cliente,
porque para acceder a una aplicación web solo se necesita disponer de un
navegador de páginas web.
▪ La información es centralizada, es decir que la lógica de negocio se encontrará
centralizada en el servidor y los datos se encontrarán ubicados en una base de
datos centralizada en consecuencia se facilita el acceso a la misma.
▪ Mayor Seguridad, gracias a que la información se encuentra centralizada es
más fácil establecer una política de copias de seguridad. En el caso de ocurrir
un fenómeno natural o humano como la información no se encuentra en el lugar
de trabajo se evita pérdidas de información y se puede desplegar rápidamente
un nuevo puesto de trabajo (PC con un navegador web).
▪ Mejor movilidad, es decir que si la aplicación web se encuentra situado en un
servidor web en Internet cualquier usuario con un portal web y una conexión a
internet móvil podría acceder al software. (Ferrer Martínez, 2012)
Página Web
Una página web está relacionado a una URL específica y es considerado un documento
capaz de combinar diversos archivos en distintos formatos como audio, imágenes,
videos, escrito en un lenguaje conocido como HTML y que están alojados en un servidor,
para acceder a ellos es obligatorio el manejo de navegadores de internet.
Las páginas web fundamentalmente contienen información de temas específicos y para
acceder a su contenido los usuarios deben poseer permisos apropiados. A continuación,
se presenta los tipos de clasificación de las páginas web:
Según la forma en la que se muestra la información, las páginas web pueden ser:
▪ Estáticas: Están formados por un conjunto de archivos html, su característica
principal es que el contenido no cambia regularmente debido a que no existe
interacción con el navegante. Este tipo de páginas son ideales para sitios web
que no ameritan actualizar constantemente su contenido.
▪ Dinámicas: Está formado por contenido interactivo su principal característica es
que el contenido varía según las acciones del navegante gracias a que la
información en estas páginas se encuentra almacenada en una base de datos
desde donde se recupera la información necesaria según las peticiones del
usuario. (Virguez, 2017)
10
Según el tipo de acceso, las páginas web estáticas y dinámicas pueden ser:
▪ Públicas: No tienen ninguna restricción de acceso, es decir que cualquier
persona con una conexión a internet consigue visualizar el contenido de la
página.
▪ Privadas: conocidas también como restringidas, están dirigidas a ciertas
personas que poseen una identificación para que la aplicación web logre
reconocerlos y de esta manera permitirle visualizar el contenido de la página.
(Jiménez, 2013).
Según el tipo de tecnología utilizada, las páginas web pueden ser en:
▪ HTML: Son elaboradas mediante la utilización de lenguaje html, una de sus
desventajas es que suelen ser paginas estáticas por lo que solo permite ofrecer
información de representación sencilla.
▪ Flash: también conocidas como páginas animadas, son construidas a través del
software Flash de Adobe, lo que permite que tengan animaciones, efectos,
sonidos y movimientos. Entre sus desventajas se destaca que son muy pesadas
debido a que su tiempo de carga para visualizar el contenido es mayor.
▪ Lenguaje de Servidor: Son actualmente los más utilizados debido a su
versatilidad pueden realizar todo tipo de funcionalidades, están construidos
mediante la utilización de distintos lenguajes de programación como: PHP, ASP,
Ruby, entre otros. Para la construcción de este tipo de páginas se necesita
contar con una serie de conocimientos anexos. (Virguez, 2017)
Sitio Web
Un sitio web está formado por múltiples páginas web con diferentes URLs, que están
desarrolladas bajo un lenguaje denominado HTML, este conjunto de páginas web se
encuentran en un lugar virtual dentro de la red, alojadas en un dominio. Los sitios web
fueron creados para organizar la información que las páginas web poseen para intentar
bridar una vista atractiva al usuario que navega, Además es importante destacar que los
sitios web casi siempre son administrados por profesionales para dar un mejor realce a
la información que se difunde.
Portal Web
Un portal web o por su significado “puerta grande” es un sitio web que brinda a los
usuarios el acceso a diversos recursos web como correo electrónico, foros, redes
sociales, videos enlazados a YouTube, radio online, etc. El fin principal de un portal web
es tener bien informado al usuario sin limitar información desde un solo punto de acceso.
11
Los portales de internet suelen estar clasificados en los siguientes niveles:
▪ Horizontales: son también conocidos como portales masivos o portales de
propósito general, su objetivo es ser utilizado por una gran cantidad de usuarios.
▪ Verticales: están dirigidos a usuarios a los cuales se les brinda información de
temas específicos, por ejemplo: un portal de medicina, turismo, finanzas,
deportes, economía, etc.
▪ Diagonales: es una combinación de un portal horizontal y un portal vertical, se
caracteriza principalmente por el manejo de redes sociales como: Facebook,
YouTube, Instagram, Twitter. Están enfocados a usuarios muy particulares.
(Cardador Cabello, 2015)
2.7. ARQUITECTURA DE UNA APLICACIÓN WEB
Una aplicación web comúnmente se compone de una arquitectura Cliente/Servidor es
decir que la aplicación web se encuentra distribuida en diferentes ordenadores
atravesando una red de ordenadores, en la parte del cliente se ejecuta el navegador
web y en el servidor se ejecuta el servidor web para comunicarse entre sí mediante
internet utilizan el protocolo HTTP. Para dar un resumen de lo antes mencionado se
puede decir que la arquitectura de una aplicación web se compone de tres elementos
fundamentales que son:. (Sergio, 2001)
▪ Servidor Web
▪ Conexión de internet
▪ Clientes web
A continuación, se muestra la Figura 1 donde se pretende explicar cómo funciona la
arquitectura de una página web, “en la parte del servidor se puede observar la
distribución de las páginas de información destinadas a los usuarios que las requieran.
Para que los usuarios puedan acceder a estas páginas de información deberán realizar
las correspondientes peticiones mediante el protocolo HTTP una vez echas las
peticiones el servidor las recibe y este localiza la página web en su sistema de archivos
y finalmente envía de vuelta al navegador que lo solicito.” (Matehuala, 2015).
12
Figura 1: Arquitectura de una página Web. Fuente: (Matehuala, 2015)
“Una vez que la página de información es entregada al usuario que lo solicito, la
conexión entre el cliente y el servidor se rompe con esto se comprende que la lógica del
negocio en el servidor solo se activa con la ejecución de scripts de las paginas
solicitadas por el navegador en la parte del servidor y no por parte del cliente”.
(Matehuala, 2015).
La lógica de negocio forma parte de los componentes en una aplicación web debido a
que es aquí donde se define los procesos que implica a la aplicación.
2.8. ARQUITECTURA 3 CAPAS
La arquitectura tres capas representa el estilo de programación más utilizado para el
desarrollo de aplicaciones web, básicamente esta arquitectura divide la construcción de
la aplicación en las siguientes tres capas:
▪ Capa 1: Presentación, conocida también como capa de interface gráfica, es la
capa más cercana con el usuario ya que le muestra una interface gráfica del
recurso solicitado. Su objetivo es garantizar que la información sea accesible a
través de recursos web claros y amigables de tal manera que a dicha información
se llegue a través de un navegador web en cualquier dispositivo de acceso.
(López Sanz, y otros, 2016)
▪ Capa 2: Negocio, es distinguida también como: capa de lógica, capa de
aplicación, capa media o capa de lógica de negocio es aquí donde se gestionan
todas las funcionalidades de la aplicación web para lo cual recibe las peticiones
del usuario y desde ella se envía las respuestas apropiadas tras el
procesamiento de la información por parte del cliente. (López Sanz, y otros,
2016)
13
▪ Capa 3: Persistencia: su objetivo principal es encargarse del acceso de los
datos, en esta capa se localiza la configuración y codificación necesaria para el
acceso de los datos como para el manejo y almacenamiento del mismo. (López
Sanz, y otros, 2016)
Para una mejor comprensión de punto detallado anteriormente se presenta a
continuación la Figura 2 donde se ilustra la arquitectura de tres capas:
Figura 2: Arquitectura tres Capas Fuente: (López Sanz, y otros, 2016)
En la figura 2. se puede observar la arquitectura de tres capas que básicamente
representa a la mayoría de aplicaciones web.
2.9. TECNOLOGÍAS PARA EL DESARROLLO WEB
CLOUD9
Es un entorno de desarrollo integrado (IDE) en la nube propiedad de Amazon ofrece
soporte para desarrollo php, node, ruby entre otros lenguajes, además de ofrecer
servidor apache y servidor de base de datos incluido brinda la posibilidad de escribir
código fuente sin la necesidad de instalar un IDE en el ordenador, y permite
trabajar desde cualquier ordenador conectado a Internet y de manera remota. (Beard,
2018).
A continuación, se detallan los beneficios que posee este IDE:
▪ Codificación con solo un navegador: editar código sin la necesidad de instalar
ni configurar un IDE local.
▪ Codificación en conjunto en tiempo real: permite la colaboración de desarrollo
en parejas.
▪ Creación sencilla de aplicaciones sin servidor: no es necesario un servidor
para escribir, ejecutar y depurar código.
14
▪ Inicio rápido de nuevos proyectos: contiene herramientas para más de 40
lenguajes de programación lo que permite empezar a escribir código en cuestión
de minutos.
PHP
“Es un lenguaje de programación muy conocido de código libre que especialmente está
adaptado para el desarrollo de aplicativos webs, su acrónimo proviene de la palabra en
inglés Hypertext Preprocessor” (Henríquez, 2016, pág. 1). PHP es un lenguaje
embebido en páginas con código HTML y ejecutado del lado del servidor web, es decir
que al cliente solo se le envía la respuesta que se obtiene de dicha ejecución.
Entre la principal característica que tienen PHP están la que se detalla a continuación:
▪ Simplicidad: Es considerado un lenguaje fácil de aprender y usar debido a que
no es necesario realizar un estudio extenso para poder desarrollar programas
que resuelvan problemas cotidianos.
Este tipo de lenguaje está orientado al desarrollo de aplicaciones web dinámicas las
mismas que consiguen acceder a la información que se halla almacenada en una base
de datos. Puede conectarse con muchos motores de bases de datos como, por ejemplo,
MYSQL y PostgreSQL. (Luna, Peña Millahual, & Iacono, 2010)
FRAMEWORK
Como concepto general se parte indicando que un “Framework es considerado una
aplicación genérica incompleta y configurable a la que se puede incluir las últimas piezas
para desarrollar una aplicación correcta”. (Gutiérrez, 2016)
Entre los objetivos principales que destaca un framework es permitir al desarrollador
acelerar el proceso de construcción de aplicaciones a través de la reutilización de código
existente y el manejo adecuado de patrones de diseño. Concluyendo con este concepto
se puede describir que un framework permite:
o Mayor seguridad, debido a que posee herramientas integradas para validación
de datos.
o Mantener un código limpio y ordenado, su estructura de directorios ayuda a que
todo el código se encuentre en un lugar establecido para obtener mejores
resultados.
15
o Absoluta Rapidez, gracias a que el framework brinda la reutilización de código
accede que escribiendo poco código ya tengamos la mayor parte del aplicativo
funcionado.
o Tener una gran comunidad activa.
o Componentes e Integración con otras herramientas. (Mollericona Marín, 2015).
SYMFONY
Symfony es un popular framework informático creado por Fabien Potencier en octubre
del 2005, que elementalmente facilita el desarrollo de aplicaciones web, este proyecto
pertenece a la comunidad del software libre. Además, se encuentra construido mediante
PHP lo que lo hace compatible con la mayoría de gestores de base de datos en la
actualidad es a nivel tecnológico uno de los más utilizados. (Diligent Team, 2016)
Una de las grandes virtudes de Symfony es que posee una gran documentación la cual
es accesible mediante el sitio web oficial www.symfony.com, esto permite a los
desarrolladores familiarizarse con el correcto manejo del framework percibiendo las
ventajas y funcionalidades que tiene.
Estructura de Directorio de Symfony
Al utilizar Symfony en el desarrollo de un proyecto web se debe comprender claramente
el contenido de las carpetas más significativas entre las que se encuentran:
▪ app: Este directorio contiene la configuración y estructura necesaria del núcleo
del framework y la base de datos, dentro del mismo se encuentran los siguientes
subdirectorios:
o config: Contiene la configuración del framework, los archivos que lo
componen tienen extensión yml.
o Logs: Aquí se encuentran todos los recursos que pueden ser reutilizados
para la aplicación.
▪ bin: contiene todas las instalaciones del ORM de Symfony llamado doctrine.
▪ src: se refiere a los recursos, en este directorio se localizará los archivos
correspondientes al desarrollo del proyecto. Aquí es donde los desarrolladores
trabajan la lógica de negocio del proyecto.
▪ vendor: Aquí se almacena todos los componentes creados por terceros, por
ejemplos las dependencias o bundles de la aplicación.
▪ web: Corresponde a una carpeta pública visible al usuario este directorio es la
raíz de un proyecto, dentro de él se hallan los archivos app.php y app_dev.php
16
estos archivos están relacionados con un concepto usado en Symfony llamado
Front Controller el cual detalla que uno de estos archivos será el encargado de
recibir las peticiones que realiza el usuario dentro de la aplicación. (Mollericona
Marín, 2015)
DOCTRINE
Symfony posee internamente un ORM por sus siglas (Object Relation Mapper)
denominado Doctrine, que es el mapeo objeto relacional que utiliza symfony para
trabajar a travéz de una capa de abstracción con cada una de las tablas de la base de
datos y tratandolos como objetos desde la aplicación, todo esto lo cumple mediante las
clases PHP o conocidadas tambien como entidades los mismo que facilita la
persistencia y acceso a los datos.
SQL DESIGNER
Es una herramienta muy útil para diseñar fácilmente una base de datos en línea sea
grande o pequeña, es decir desde cualquier parte del mundo con solo la utilización de
un navegador y sin la necesidad de trabajar con un motor de base de datos. Actualmente
es una de las herramientas en diseño y modelado de esquemas de base de datos en
línea más utilizados y estables debido a sus características destacadas, lo mejor que lo
caracteriza ser Open Source lo cual permite ser descargado e implementado en un
servidor propio.
Este modelador de datos al finalizar el diseño tiene la posibilidad de generar un script
SQL compatible para cualquiera de los siguientes motores de base de datos:
o MySQL
o MSSql
o PostgreSQL
o SQLite
o Oracle
Además, se puede exportar en formato XML, esta herramienta está desarrollado en
PHP, MySQL y JavaScript. (Medina, 2007).
MYSQL
Es un motor de bases de datos relacional de código abierto propiedad de Oracle se
encuentra entre las mejores bases de datos a nivel mundial especialmente es usada
para desarrollar aplicaciones web ya que “permite a los desarrolladores realizar cambios
de sus sitios de manera sencilla con solo cambiar un archivo evitando tener que
modificar todo el código web además es considerado versátil, decir que permite ser
17
utilizado por varias personas al mismo tiempo, e incluso realizar varias consultas a la
vez” (Culturacion, 2014), MySQL alberga los datos en concepto de tablas estructuradas
con índices, llaves secundarias, entre otros campos para luego hacer uso del lenguaje
SQL para las transacciones de datos.
MySQL en compañía con PHP, se convierte en una mezcla de trabajo muy poderosa,
sobre todo para realizar aplicaciones cliente/servidor, por la sencilla razón de requerir el
uso de una base de datos rápida, segura y potente (Culturacion, 2014). Su instalación
se la puede realizar en los sistemas operativos Windows, Linux, MacOS de forma
independiente o en apoyo de otros softwares del entorno de programación como el
servidor web Apache, PHP y PhpMyAdmin. (Ramírez Navia, 2018)
PHPMYADMIN
Es una herramienta gráfica escrita en PHP de código abierto puesto en marcha desde
el año 1998, creado con la finalidad de administrar la base de datos MySQL a través de
la web. Entre las funcionalidades que puede realizar mencionada herramienta están las
siguientes:
▪ Crear y borrar base de datos.
▪ Crear copiar eliminar y modificar tablas.
▪ Eliminar, editar y modificar campos.
▪ Ejecutar diversas sentencias SQL.
▪ Gestión de Claves Primarias y Secundarias.
▪ Gestionar usuarios MySQL y Privilegios de Usuarios.
▪ Crear copias de seguridad.
▪ Importar y exportar base de datos de tipo CSV, SQL, XML, Excel entre otros.
(Mifsuf Talón, 2012)
Es importante mencionar que phpMyAdmin se encuentra situado en la mayoría de
alojamientos web por lo cual se puede encontrar en todo el mundo. De tal forma que,
aunque sea de manera básica se podrá manejarla en cualquier hosting que nos
localicemos.
GODADDY
Es una empresa instituida para registrar nombres de dominios en internet y que además
ofrece alojamiento web, GoDaddy brinda una gran diversidad de productos como:
- Dominios
- Sitios Web
- Hosting
18
- Seguridad Web
- Marketing en línea
- Correo electrónico y Office
El producto que más es utilizado por las personas es el alojamiento web o hosting en
inglés que ayuda a que los sitios o portales web puedan hacer presencia en internet,
esta empresa posee lo básico con precios cómodos además de ofertas para la
adquisición de productos nuevos y lo más novedoso tiene subastas de dominios en
línea.
cPanel Hosting
según GoDaddy (2019) “cPanel es un panel de control fácil de usar, diseñado para
gestionar determinados dominios o cuentas de alojamiento, en tu servidor dedicado o
en tu servidor privado virtual (VPS). Los usuarios finales pueden controlar todo, desde
añadir / eliminar cuentas de correo electrónico hasta gestionar bases de datos MySQL”
(pág. 1).
No obstante, cPanel se utiliza junto con WebHost Manager o WHM. WHM suministra el
registro y control de la administración del servidor dedicado o servidor privado virtual
(VPS). Se puede utilizar WebHost Manager para instaurar cuentas individuales, añadir
dominios a tu servidor, tramitar peculiaridades de alojamiento y efectuar el sostén básico
del sistema y del panel de control. (GoDaddy, 2019).
VISUAL STUDIO CODE
Visual Studio Code es un editor de código fuente ligero pero potente que se ejecuta en
el escritorio de una PC y está disponible para Windows, macOS y Linux. Viene con
soporte incorporado para JavaScript, TypeScript y Node.js y tiene un buen ecosistema
de extensiones para otros idiomas (como C++, C#, Java, Python, PHP, Go) y tiempos
de ejecución (como .NET y Unity). (Code, 2019).
XAMPP
Es un servidor web libre e independiente multiplataforma, es un software que integra en
una sola aplicación un servidor de base de datos MySQL, el servidor web Apache y los
intérpretes para lenguajes de script PHP y Perl. El origen de su nombre proviene de:
o X (con referencia a cualquier sistema operativo)
junto a las iniciales de:
19
Apache
o MySQL
o PHP
o Perl.
XAMPP admite efectuar pruebas de una página o sitio web desde un propio ordenador
sin la necesidad de acceder al internet. En el mercado de la tecnología existen versiones
para Linux, Windows MacOS, Solaris es fácil de instalar y usar y además es capaz de
interpretar páginas dinámicas. (Zepeda, 2015)
20
3. CAPÍTULO III. METODOLOGÍA
3.1. MODALIDAD BÁSICA DE LA INVESTIGACIÓN
A lo largo de este capítulo se establece el conjunto de técnicas y métodos que se usarán
para recolectar, ordenar y analizar los datos obtenidos para luego llevar a cabo las
tareas vinculadas al proyecto.
A continuación, se detalla el tipo de investigación realizado:
▪ Investigación de campo: Se aplica para obtener datos directamente de la
situación real del problema, por medio de técnicas de recolección.
▪ Investigación bibliográfica: proceso que propone recolectar, seleccionar,
clasificar y analizar el contenido del materia virtual y físico existente en la
fundación, que servirá de fuente teórica, conceptual y metodológica para
garantiza la calidad de los fundamentos teóricos de la investigación.
▪ Investigación acción: Esta investigación aprueba que el Autor del proyecto
asuma dos roles, el de investigador y el de participante.
3.2. RECOLECCIÓN DE LA INFORMACIÓN
Para la recolección de información necesaria para elaborar este proyecto integrador, se
hizo uso de las siguientes técnicas de recolección; que a continuación serán explicadas.
▪ Observación: La observación permitió examinar atentamente los aspectos más
significativos en actividades que realiza la reina de Amaguaña, en el contexto
donde se desarrollan regularmente; accediendo a la comprensión de la genuina
realidad del fenómeno.
▪ Bibliográfica: mediante esta técnica se recopilo información mediante
materiales bibliográficos existentes actualmente en la organización, también se
recolecto información a través de la web visitando cada red social que posee la
reina de tal manera se obtuvo ventajosos datos para los propósitos del proyecto.
▪ Entrevista Libre: La entrevista se la realizo a la señorita Ana Belén Morales
López, reina de la parroquia de Amaguaña, quien permitió que se le realizara
preguntas referentes a la situación actual de la organización de reinas de su
parroquia y las necesidades que existen lo cual permitió obtener la información
adecuada para la elaboración de la aplicación web.
Las técnicas detalladas anteriormente son las que se utilizó en este proyecto por ser las
que mejor se acoplan al contexto.
21
3.3. PROCESAMIENTO Y ANÁLISIS DE DATOS
Analizar y procesar la información obtenida de la investigación, requiere seguir el
proceso adecuado, donde se incluyen las siguientes etapas:
1. Analizar los requerimientos para comprender el propósito de la base de
datos.
2. Estructurar la base de datos para lo cual se debe organizar y agrupar los
datos analizados en tablas.
3. Especificar las respectivas claves primarias y analizar las relaciones
correspondientes para cada tabla.
El análisis de datos realizado, determino como debe está organizada la información, así
como también permitió estructurar el contenido que tendrá la aplicación web.
3.4. METODOLOGÍA DEL PROYECTO
Seguidamente, se describe el proceso que se realizará para gestionar las actividades
de cada objetivo específico empleando los siguientes puntos:
▪ Recopilar información necesaria acerca de las actividades y proyectos que
realiza la Reina de Amaguaña mediante técnicas de recolección de Información.
- Se colecciona la información mediante la observación, recopilación
bibliográfica y la entrevista libre que son las técnicas acordes al
problema.
▪ Crear un portal web que permita difundir información de una manera organizada
y oportuna a través del framework Symfony.
- Diseñar la base de datos en SQL Designer con la información analizada.
- Construir la aplicación web con ayuda del framework Symfony para
estructurar la lógica del negocio.
▪ Crear una interfaz dinámica para actualizar los eventos de interés social, cultural
y deportivo de la Institución mediante la utilización de hojas de estilos en cascada
(CSS).
- Elaborar hojas de estilo en cascada (CSS). para cada funcionalidad del
portal web con el propósito de tener una estructura dinámica para el
usuario navegante de la aplicación web.
▪ Publicar el Portal Web en un dominio y hosting propio para la cual se utiliza el
Hosting GoDaddy.
- Adquirir un dominio y un hosting en la organización GoDaddy para alojar
la aplicación web.
22
3.4.1. Metodologías de Desarrollo de Software
Lo que permite a un desarrollador construir una aplicación eficiente es la utilización de
las metodologías de desarrollo de software, debido a que estas toman en cuenta
aspectos tales como los costes, la planificación, la calidad del producto utilizando
marcos de trabajo para estructurar, planificar y controlar el proceso de elaboración del
sistema informático.
Para el autor de este proyecto la metodología de desarrollo de software será el modelo
encargado de indicar ordenadamente cuales sol las fases que se debe cumplir para
elaborar el portal web Reina de Amaguaña acorde a la necesidad del cliente. Dicho esto,
mostramos a continuación la Tabla 1 correspondiente al cuadro comparativo de las
metodologías tradicionales versus las metodologías ágiles.
METODOLOGÍA ÁGIL METODOLOGÍA TRADICIONAL
Orientada a proyectos pequeños Proyectos de cualquier tamaño
Problemas de escalabilidad en proyectos grandes
Problemas de adaptación en proyectos pequeños
Equipos pequeños (<10 personas) Efectivo con equipos grandes y/o diversos
Proyectos de corta duración Proyectos de cualquier duración
Poca documentación Mucha documentación
Pocos roles y más genéricos. Roles no intercambiables
Más roles y más específicos. Los roles no se intercambian
Mas flexibilidad en el contrato Contrato prefijado
El Cliente forma parte del equipo El Cliente es informado mediante reuniones con la dirección
La arquitectura se define y mejora a lo largo del proyecto
Arquitectura prefijada
Se espera cambios en el proyecto No se espera cambios importantes en el proyecto
Tabla 1: Cuadro comparativo de las metodologías de desarrollo de software Fuente: Ana Oyasa
3.4.2. Análisis de Metodologías Ágiles
No es nuevo indicar que construir una aplicación informática es un proceso tedioso y
confuso y que al mismo tiempo emplear las metodologías de desarrollo históricos no
aportan en mucho la elaboración de un software de calidad, por un lado, esto es debido
a que si existe un cambio en el algún punto inicial del proyecto se comprende como un
gran quiebre. Los métodos de programación utilizados eras considerados arcaicos y por
ende no contribuía a crear un ecosistema apto para el proceso.
Como ya se podía imaginar con la llegada de las nuevas tecnologías, expertos en
desarrollo de software se unieron para dar inicio a una nueva era de métodos que
fundamentalmente pretenden acoplar tres factores significativos el tiempo, la
rentabilidad y la calidad con el propósito de establecer un marco de trabajo con el cual
era viable acrecentar la calidad de desarrollo, reducir los tiempos, eliminar la
23
incertidumbre, aceptar la tolerancia a cambios para aumentar la satisfacción del cliente;
todo esto conocido actualmente como metodologías ágiles. (develapps, 2018)
La metodología ágil, principalmente ayuda a proveer respuestas rápidas a los cambios
que se reciben sobre un proyecto gracias a reuniones habituales denominadas
interacciones o sprints. En el desarrollo del sitio web “Fundación reina de Amaguaña”
se decidió compara las dos metodologías ágiles más utilizadas las mismas que se
descritas a continuación:
Srum: Sus puntos clave son innovación, productividad, flexibilidad, competitividad;
posee una estructura de desarrollo incremental, es decir que cualquier ciclo de
desarrollo del proyecto se divide en etapas de análisis, desarrollo y testing donde la
etapa de desarrollo comprende la interacción del proceso o sprint que son las entregas
frecuentes del producto final lo cual responde al cumplimiento de los objetivos
señalados. Su pilastra son las reuniones, entre las más importantes tenemos las
reuniones de planificación, diarias, de revisión que son ejecutadas una vez concluido un
sprint para plantear progresos en el avance del proyecto.
XP: su nombre proviene de Extreme Programming o Programación Extrema en español
su fuerte es las relaciones interpersonales el cual es la clave para el éxito en el desarrollo
del software basándose en la retroalimentación continua entre el cliente y el equipo de
desarrollo con el objetivo de obtener una buena comunicación fluida entre todos los
participantes además de simplicidad en las soluciones implementadas para enfrentar
los cambios. (Letelier Torres & Sánchez López, Metodologías Ágiles en el Desarrollo de
Software, 2003)
Una vez detallada las dos metodologías ágiles anteriores; a continuación, en la Tabla 2
se muestra un cuadro comparativo, y se pretende evidenciar la metodología ágil más
beneficiosa para el desarrollo del portal web Reina de Amaguaña.
CRITERIOS XP SCRUM
OBJETIVOS
Su prioridad es generar resultados directos como:
o Satisfacción del Cliente o Trabajo grupal o Actuación sobre variables
Crea modelos existentes: o Alto Rendimiento. o Disminución de costos de
desarrollo. o Conservar la calidad en todo el
desarrollo.
TIPO DE DESARROLLO
Leve y configurable desarrollado por las fases de:
o Planificación. o Diseño. o Codificación. o Prueba.
Desarrollo sencillo que demanda trabajo rígido.
o Control de manera empírica y flexible a la evaluación del proyecto.
FACILIDAD DE
USO
o Especialmente para medianos y pequeños grupos
o Para proyectos de riesgo fecha de entrega.
Su fundamento es el seguimiento de un plan
o Es un modelo adaptable
24
o No apto para muchas personas.
o Posibilidad de Cambio.
o Su construcción es incremental asentada en interacciones.
o No existe trabajo con diseño o abstracción.
TIPO DE REVISIÓN
Se debe integrar como mínimo una vez al día y realizar las pruebas sobre
la totalidad del proceso.
Sus pruebas se efectúan al finiquitar el proceso destacando la reutilización de los componentes de los programas ya
comprobados.
TIPO DE FRAMEWORK
Su fundamento es: o La adaptación. o Mayor flexibilidad. o Dinámica. o Funcionalidad.
Su fundamento es ser un proceso interactivo e incremental.
Tabla 2: Cuadro comparativo entre la metodología Srum y XP. Fuente: (socorrozegarra, 2017)
Una vez examinada la tabla anterior, se reconoce que la metodología que más se adapta
al entorno de trabajo de este proyecto es la Programación Extrema (XP) por factores de
cambios, tiempo, ambiente de trabajo y framework. Lo que hace posible cumplir el
objetivo general planteado al inicio de esta documentación.
3.4.3. Justificación de la metodología
La metodología ágil seleccionada para la fabricación del portal web Reina de Amaguaña,
es la metodología de Programación Extrema XP; debido a que se adapta al contexto del
proyecto, al mismo tiempo permite integrar conjuntamente al cliente que será el
encargado de operar la problemática expuesta.
Un punto importante que destaca a la metodología XP es que se encuentra entre las
dos metodologías agiles más usadas actualmente, porque resulta mucho más rápida, lo
que facilita la colaboración de cualquier participante del grupo de trabajo en cualquier
punto de desarrollo, esto es gracias a que sus protocolos y jerarquías no resultan tan
estrictos. Como el cliente siempre está en continua comunicación, los resultados son
verificados oportunamente de manera que se apruebe el sistema y así conseguir
seguridad y solidez en el desarrollo, de este modo el resultado final conseguirá
satisfacer las necesidades del cliente.
3.4.4. Metodología ágil XP
XP fundamenta su metodología en la relación de Cliente–Equipo de desarrollo, pues
trata de potencia las relaciones interpersonales motivando el trabajo en equipo y de tal
modo obtener un clima laboral provechoso, conjuntamente de simplicidad en las
soluciones implementadas y sobre todo mejor dominio para enfrentarse a los cambios.
25
Enseguida se describirá las características esenciales de XP organizados en los
apartados diferentes: valores, historias de usuarios, roles, reglas y prácticas.
3.4.5. Valores de XP
Entre el conjunto de valores que definen el trabajo de la metodología XP se hallan los
siguientes:
▪ Comunicación: hace referencia a la comunicación entre los clientes y el
desarrollador.
▪ Simplicidad: poner restricciones al programador para que desarrolle soluciones
solo para las necesidades requeridas.
▪ Retroalimentación: mediante cada prueba unitaria realizada se brinda
retroalimentación a cada miembro del equipo de trabajo tanto para el cliente
como para el o los desarrolladores.
▪ Valentía: esta metodología requiere disciplina para tener el valor de desarrollar
para las necesidades del hoy y no del futuro debido a que las necesidades del
futuro son muy variantes.
▪ Respeto: cumpliendo con cada uno de los valores XP el equipo infunde respeto
en cada participante, para que el desarrollo de software cumpla su objetivo.
3.4.6. Historias de Usuarios
Corresponde a la técnica que es utilizada para especificar los requisitos del sistema, se
construyen en tarjetitas de papel en las cuales se describe las particularidades que el
software a desarrollar debe mantener independiente que sean requisitos funcionales o
no funcionales. Conviene que la Historias de Usuarios sean lo bastantemente claras y
concretas para que los desarrolladores logren implementarlas en unas semanas.
3.4.7. Roles XP
La metodología XP traza los siguientes roles:
o Cliente: Es la persona que escribe las historias de usuario asignándole la
prioridad resolviendo así cuales se implementan en cada interacción para aportar
un avance significativo a la lógica de negocio, Además los clientes también son
los encargados de ejecutar pruebas unitarias para autorizar su implementación.
o Programador: Es la persona delegada de escribir las líneas de código de la
aplicación y también las pruebas unitarias.
26
o Tester: Es el responsable de las pruebas, asiste al cliente para escribir las
pruebas funcionales luego procede a ejecutarlas regularmente al finalizar esta
tarea propaga los resultados en el equipo.
o Tracker: Es el encargado de dar seguimiento del proceso de cada interacción
para lo cual comprueba el grado de aciertos entre las estimaciones realizadas y
el tiempo real dedicado.
o Coach: Es el encargado del proceso global, Guía al equipo para que cumpla con
las prácticas XP adecuadamente.
o Consultor: Es un miembro externo al equipo, que ofrece su ayuda para el
desarrollo del software en alguna temática que domina si surgiera
inconvenientes.
o Big boss: o Gestor su trabajo es la coordinación, es decir enlaza al cliente con
los programadores para que el equipo labore efectivamente estableciendo
condiciones adecuadas. (Letelier Torres & Sánchez López, issi, 2003)
3.4.8. Reglas y Prácticas XP
XP, al ser una metodología Ágil usa un enfoque conducido a objetos como prototipo
para el desarrollo y progreso, por lo tanto, esta metodología comprende como estructura
cuatro actividades: planeación, diseño, codificación y pruebas. A continuación, se
presenta la Figura 3 la cual instruye sobre el proceso XP y destaca ciertas tareas
importantes dentro de cada actividad.
Figura 3: Procesos de XP Fuente: Ana Oyasa
• Programación en parejas
• Integración continua• De Aceptación
• Mediante prototipos y diseño simple
• Historia de Usuario
Planeación Diseño
CodificaciónPruebas
REDISEÑO
Pruebas Unitarias Integración Continua
LANZAMIENTO
27
Una vez ilustrado mediante la Figura 3 los procesos de la metodología XP, en los
siguientes párrafos se detalla cada uno de los procesos para la comprensión de cada
una.
3.4.8.1. Planeación
En este proceso el desarrollador y el cliente trabajan conjuntamente para indicar como
crear y agrupar las historias mediante los requerimientos solicitados, el desarrollador
inicia escuchando las actividades de negocio que se realizan actualmente para
comprender las entradas, salidas y funcionamiento del sistema.
La Figura 4 muestra el orden de orden de ejecución de las historias de usuario en el
proceso de planeación.
Figura 4: Orden de ejecución de las en el proceso de planeación. Fuente: Ana Oyasa
3.4.8.2. Diseño
Como ya se venia mensionado en anteriores apartados su fundamento es la simplicidad
esto gracias a que XP solo diseña aquellas historias de usuario que el cliente ha
designado para la interacción afirmando el cumplimiento de los requerimientos. La
utilización de diagramas si esta permitido siempre y cuando se puedan estos sean muy
claros y que no tome mucho tiempo elaborarlos.
La metodologia XP determina que la fase de diseño es un regla que esta involucrada
durante todo el ciclo de vida del proyecto, con esto se entiende que primero se realiza
un diseño inicial simple que no se tarda mucho en conseguir al cual se le efectúa
modificaciones y correcciones a medida que progresa el proyecto con la intención de no
desaprovechar tiempo en el diseño.
1•La historias se implementarán de inmediato (en pocas
semanas)
2•Las historias con más valor entrarán a la programación de
actividades y se implementarán en primer lugar.
3•Las historias más riesgosas formarán parte de la
programación de actividades y se implementarán primero
28
3.4.8.3. Codificación
La codificación en la metodología XP se la efectúa paralelamente con el diseño la misma
que se halla sujeto a varias observaciones, uno de los aspectos que domina esta regla
es aseverar que el cliente permanentemente se encuentre presente en el desarrollo del
software lo cual demanda disponibilidad por parte del cliente, esto para ayudar a corregir
todas las incertidumbres que puedan surgir para garantizar que lo que se implementa
cubre con las necesidades planteadas en las historias de usuario.
XP mantiene que cuando se programa en parejas se logra un diseño de alta calidad y
un código más organizado con escasos errores de los que se obtiene al trabajar de
forma independiente, además de la importancia que tienen el contar con un compañero
que ayude a corregir inconvenientes en el tiempo de codificación, lo que sucede con
gran frecuencia.
3.4.8.4. Pruebas
XP reconoce que las pruebas son quizás la piedra angular de esta metodología, es decir
para que, cada módulo sea aprobado y posteriormente publicado debe pasar todos los
módulos, las mismas que convienen ser definidas antes de escribir el código.
Cevallos (2015) indica “que, una vez creada la prueba unitaria, el desarrollador está
mejor capacitado para centrarse en lo que debe implementarse para pasar la prueba
una vez que el código está terminado, se le aplica de inmediato una prueba” (pág. 124)
3.5. JUSTIFICACIÓN DE LAS HERRAMIENTAS DE
DESARROLLO
Las herramientas de desarrollo de software utilizadas en la elaboración del Portal Web
Reina de Amaguaña tienen la característica de ser en la mayoría software libre por el
principal beneficio que no generan ningún costo y este aspecto es fundamental para la
fundación debido a que su organización no posee por el momento los recursos
necesarios para invertir.
Entre las herramientas que se utilizaron en la elaboración de este proyecto se destacan
las siguientes:
▪ Cloud9 developmet: El entorno de desarrollo integrado (IDE) seleccionado es
Cloud9 developmet, se eligió esta herramienta por que brinda la posibilidad que
permite escribir código fuente sin la necesidad de instalar un IDE en el
29
ordenador, además permite trabajar desde cualquier ordenador conectado a
Internet y de manera remota
▪ Symfony: Es un framework para construir aplicaciones web PHP.
▪ Doctrine: El cual facilita el acceso y a la base de datos.
▪ SQL Designer: Para el modelado de la base de datos se seleccionó la
herramienta SQL Designer, esta herramienta es considerado el primero en línea
y lo mejor es que es Open Source.
▪ MySQL: servidor de base de datos usado en el desarrollo y producción de la
página web.
▪ PhpMyAdmin: administrador gráfico de MySQL.
▪ GoDaddy: Proveedor de hosting y dominio para el alojamiento de la página web.
▪ Visual Studio Code: Ide de desarrollo local ofrece soporte para desarrollo php,
es propiedad de Microsoft, aunque su licencia es gratuita.
continuación se incluye el Rankin de base de datos a nivel mundial, así como el ranking
de los proveedores de dominio.
3.5.1. Administrador de Base de Datos
MySQL es el administrador de base de datos que se utilizará para gestionar la base de
datos de la Fundación Reina de Amaguaña, cuenta con una doble licencia. Por una
parte, es de código abierto, pero por otra, cuenta con una versión comercial gestionada
por la compañía Oracle. Hoy en día, MySQL es la más famosa y utilizada en el todo el
mundo debido a que como sus principales características es que permite trabajar con
bases de datos relacionales, es decir, utiliza tablas múltiples que se interconectan entre
sí para almacenar la información y organizarla correctamente.
Para justificar la selección de la base de datos utilizada se expone a continuación en la
siguiente figura 5 el Rankin de las bases de datos con respecto al año 2019.
30
Figura 5: Top de los 3 mejores hostings en el año 2019. Fuente: (IT, 2019)
Como se puede observar en la Tabla 5 MySQL se encuentra en el segundo lugar a
nivel mundial por lo cual es elegida como la herramienta para almacenar los datos de
este proyecto integrador.
3.5.2. Proveedor de alojamiento web
Para justificar la selección del proveedor de hosting y almacenamiento se expone a
continuación en la Tabla 3. que representa el Top de los mejores proveedores de
dominio con respecto al año 2019. (top10, 2019)
HOSTING CARACTERÍSTICA PUNTAJE
▪ 30 días de garantía de devolución de dinero ▪ Generador de dominio y sitio gratis ▪ Soporte: 24/7 teléfono y chat ▪ Instalación de WordPress con 1 clic
▪ A partir de $ 2.95 / mes
9.8
▪ Para todos los tamaños de negocios. ▪ Garantía de devolución de dinero de 45 días ▪ Soporte: 24/7 teléfono y chat ▪ A partir de $ 2.75 / mes
9.5
▪ Rendimiento de alta velocidad ▪ 30 días de garantía de devolución de dinero ▪ Soporte: 24/7 chat
▪ A partir de $ 0,80 / mes.
9.3
▪ Dominio gratuito con plan anual. ▪ Tiempos de carga rápidos ▪ Soporte: 24/7 teléfono gratuito
▪ A partir de $ 1.00 / mes.
8.4
Tabla 3: Top de los 3 mejores hostings en el año 2019.
Fuente: Oyasa Ana
31
Como se puede observar en la tabla 3, GoDaddy debido a sus características y sobre
todo por ser un hosting económico y poseer un dominio gratuito es el elegido para
almacenar el portal web a desarrollarse.
32
4. CAPÍTULO IV. DESARROLLO DEL PROYECTO
4.1. PLANIFICACIÓN
Con respecto a la planificación y desarrollo del proyecto se utilizó la metodología XP,
porque mantiene comunicación continua entre el desarrollador y el cliente lo que permite
puntualizar ideas concretas de los requisitos del sistema.
Esta metodología ayuda a controlar aspectos como son costo, tiempo y alcance del
proyecto, así como fechas de entregas teniendo en cuenta los procesos primordiales de
la aplicación.
4.1.1. Especificación de Requerimientos
Para la recopilación de los requerimientos se desarrolló reuniones y entrevistas con la
actual reina de la Parroquia de Amaguaña, la señorita Ana Belén Morales López quien
va a ser la encargada de la gestionar el contenido del portal web Reina de Amaguaña.
4.1.1.1. Historias de Usuario
Para la creación de las historias de usuario se deberán utilizar descripciones, cortas y
esquemáticas en un lenguaje sencillo para fácil entendimiento del manejo de la
aplicación tanto para los clientes, los usuarios, y el desarrollador.
En la Tabla 4 que se muestra a continuación se muestra el formulario que se utilizó para
la creación de cada historia de usuario:
Historia de Usuario
Número: Usuario:
Nombre Historia:
Puntos Estimados: Prioridad del Negocio: (Alta / Media / Baja)
Interacción Asignada: Riesgo de Desarrollo: (Alto / Medio / Bajo)
Descripción:
Observaciones:
Tabla 4: Formulario para la creación de historias de usuario. Fuente: Oyasa Ana
▪ Número: identifica la historia de usuario con un único número.
▪ Usuario: es la persona que manejará la funcionalidad del sistema explicada en
la historia del usuario.
▪ Nombre de la Historia: corresponde al nombre que se asigna a una historia de
usuario elaborada.
▪ Puntos estimados: representa la cantidad en tiempo para la elaboración de una
historia de usuario.
33
▪ Prioridad del negocio: es la valoración que el cliente le determina a una historia
del usuario.
▪ Interacción Asignada: representa el número de intentos luego del cual el cliente
acepta implementar una historia de usuario.
▪ Riesgo del Desarrollo: es la valoración que se asigna a una historia de usuario
representa al equipo de desarrollo.
▪ Descripción: es el detalle de la información de una historia de usuario.
▪ Observaciones: se menciona puntos importantes de una historia de usuario, es
un campo no obligatorio.
La clasificación, agrupación y asignación de prioridad correspondiente a cada una de
las leyendas de usuario se las determino durante las reuniones que existieron con el
cliente y el desarrollador, agrupándolas en dos módulos: de Administrador y de Acceso
al Portal.
Seguidamente, se muestra las principales historias de usuario para cada módulo.
Módulo de Administrador
La Tabla 5 muestra la historia del usuario Slider Presentación.
Historia de Usuario
Número: 1 Usuario: Administrador / Responsable del Sistema.
Nombre Historia: Slider Presentación.
Puntos Estimados: 3 Prioridad del Negocio: Alta
Interacción Asignada: 2 Riesgo de Desarrollo: Bajo
Descripción: El portal web permite que el administrador actualice las fotografías que se muestran en la interface de inicio. Observaciones: Para la actualización del Slider de Presentación el administrador del sistema debe tener en cuenta que las fotografías que se deben subir deben tener un tamaño de 1900x1250 píxeles y un formato jpg, png.
Tabla 5: Historias de usuario. Slider Presentación.
Fuente: Oyasa Ana.
La Tabla 6 muestra la historia del usuario Cronograma.
Historia de Usuario Número: 2 Usuario: Administrador / Responsable del Sistema.
Nombre Historia: Cronograma
Puntos Estimados: 2,5 Prioridad del Negocio: Alta
Interacción Asignada: 1 Riesgo de Desarrollo: Alto
Descripción: El portal web permite que el usuario administrador pueda añadir, modificar y eliminar un nuevo cronograma. Los datos a ingresar son: nombre del evento, hora, lugar, fecha Observaciones: El campo de la fecha esta validado con un formato que brinda mayor facilidad al usuario para que ingrese este dato.
Tabla 6: Historias de usuario. Cronograma.
Fuente: Oyasa Ana.
34
La Tabla 7 muestra la historia del usuario Turismo.
Historia de Usuario Número: 3 Usuario: Administrador / Responsable del Sistema
Nombre Historia: Turismo
Puntos Estimados: 3 Prioridad del Negocio: Alta
Interacción Asignada: 2 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador añadir, modificar y eliminar un nuevo lugar turístico de la parroquia. Los datos a ingresar son: nombre del evento, descripción, foto. Observaciones: para el campo foto se encuentra asignado el botón seleccionar archivo para mayor facilidad del usuario.
Tabla 7: Historias de usuario. Turismo.
Fuente: Oyasa Ana.
La Tabla 8 muestra la historia del usuario Reinas.
Historia de Usuario Número: 4 Usuario: Administrador / Responsable del Sistema.
Nombre Historia: Reinas
Puntos Estimados: 1 Prioridad del Negocio: Alta
Interacción Asignada: 1 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador añadir, modificar y eliminar una reina. Los datos a ingresar son: nombre de la reina, año, Facebook, Twitter, Instagram, foto de la reina. Observaciones: para el campo foto de la reina se encuentra asignado el botón seleccionar archivo para mayor facilidad del usuario.
Tabla 8: Historias de usuario. Reinas. Fuente: Oyasa Ana.
La Tabla 9 muestra la historia del usuario Guía de Eventos.
Historia de Usuario
Número: 5 Usuario: Administrador / Responsable del Sistema.
Nombre Historia: Guía de Eventos
Puntos Estimados: 2,5 Prioridad del Negocio: Alta
Interacción Asignada: 2 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador añadir, modificar y eliminar un evento. Los datos a ingresar son: nombre del evento, breve descripción, descripción completa, seleccionar archivo. Observaciones: para el campo seleccionar archivo se encuentra asignado un botón para que el usuario guarde una foto correspondiente al evento añadido.
Tabla 9: Historias de usuario. Guía de Eventos. Fuente: Oyasa Ana.
La Tabla 10 muestra la historia del usuario Gastronomía.
35
Historia de Usuario Número: 6 Usuario: Administrador / Responsable del
Sistema
Nombre Historia: Gastronomía
Puntos Estimados: 1,5 Prioridad del Negocio: Alta
Interacción Asignada: 1 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador crear, modificar y eliminar un plato. Los datos a ingresar son: nombre del plato, descripción, foto del plato. Observaciones: para el campo foto del plato se encuentra asignado un botón seleccionar archivo para que el usuario guarde una foto correspondiente al plato añadido.
Tabla 10: Historias de usuario. Gastronomía. Fuente: Oyasa Ana.
La Tabla 11 muestra la historia del usuario Fiestas.
Historia de Usuario
Número: 7 Usuario: Administrador / Responsable del Sistema
Nombre Historia: Fiestas
Puntos Estimados: 2 Prioridad del Negocio: Alta
Interacción Asignada: 1 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador crear, modificar y eliminar una fiesta. Los datos a ingresar son: nombre de la fiesta, descripción, foto de fiesta.
Observaciones: para el campo foto de fiesta se encuentra asignado un botón seleccionar archivo para que el usuario guarde una foto correspondiente a la fiesta añadida.
Tabla 11: Historias de usuario. Fiestas Fuente: Oyasa Ana
La tabla 12 muestra la historia del usuario Extra.
Historia de Usuario
Número: 8 Usuario: Administrador / Responsable del Sistema
Nombre Historia: Extra
Puntos Estimados: 2,5 Prioridad del Negocio: Alta
Interacción Asignada: 2 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador editar reina actual. Los datos a ingresar son: nombre de la reina, palabras de la reina, Facebook, Twitter, Instagram, YouTube, foto 1, foto 2, foto3, foto 4. Y además se podrá ingresar la historia de Amaguaña. Los datos a ingresar son: nombre, quienes somos, Facebook, Twitter, Instagram, YouTube, foto. Observaciones: para el campo foto 1,2,3,4 de la reina y la foto de historia de Amaguaña se encuentra asignado un botón seleccionar archivo para que el usuario guarde una foto correspondiente a cada campo.
Tabla 12: Historias de usuario. Extra. Fuente: Oyasa Ana.
La Tabla 13 muestra la historia del usuario Configuración.
36
Historia de Usuario
Número: 9 Usuario: Administrador / Responsable del Sistema
Nombre Historia: Configuración
Puntos Estimados: 4 Prioridad del Negocio: Alta
Interacción Asignada: 2 Riesgo de Desarrollo: Alto
Descripción: El portal web permitirá al usuario administrador: crear usuario, lista de usuarios, añadir fotos a la galería, listar galería. Observaciones: para cada opción se encuentra asignado un botón para que el usuario realice cada proceso.
Tabla 13: Historias de usuario. Configuración. Fuente: Oyasa Ana.
Acceso al Portal
La Tabla 14 muestra la historia del usuario Acceso al Portal.
Historia de Usuario
Número: 10 Usuario: usuarios /Visitantes de Portal web
Nombre Historia: Acceso al Portal.
Puntos Estimados: 2 Prioridad del Negocio: Alta
Interacción Asignada: 1 Riesgo de Desarrollo: Medio
Descripción: Los usuarios que desean visitar el Portal Web Reina de Amaguaña, pueden acceder a través del url: www.sonrieamaguana.com Observaciones: para visitar el portal web los usuarios lo pueden hacer desde cualquier dispositivo electrónico conectado a Internet utilizando el navegador de su preferencia como por ejemplo Crome, Firefox, Opera, Safari, etc.
Tabla 14: Historias de usuario. Acceso al Portal. Fuente: Oyasa Ana
4.1.2. Plan de Entregables
Una vez ya creadas las historias de usuario proporcionados por el cliente, se procede a
definir las fechas de entrega para cada una de las historias de usuario creadas, para lo
cual se toma en cuenta un aspecto importante como lo es el tiempo que el desarrollador
destine para el desarrollo. Además, otro punto importante en el plan de entregas es
considerar establecer un orden, prioridad, interacción y dificultad a cada historia de
usuario para brindarle al programador mejor comprensión para el desarrollo.
4.1.2.1. Esfuerzo de Desarrollo
Para indicar el esfuerzo que realizará el desarrollador durante la elaboración de la
aplicación web se establece una plantilla, que contiene parámetros precisos para
evaluar el tiempo que llevará la elaboración de cada historia del usuario. El desarrollador
laborará cinco días a la semana durante cuatro horas al día. En la Tabla 15 que se
muestra a continuación se detalla el esfuerzo de trabajo establecido en horas, días,
semanas.
37
4.1.2.2. Plan de Interacción
Para representar el plan de interacción de cada uno de las historias de usuario se
muestra la Tabla 16 la cual permite conocer el orden de desarrollo, prioridad, riesgo y el
número de semanas que el programador destine para cumplir con la funcionalidad
descrita anteriormente. Además, se da a conocer a que interacción y modulo pertenecen
cada una de ellas, donde se visualiza las historias de usuario desde la HU1 hasta la
HU10 correspondientes a la primera interacción.
N.-
Historia de Usuario (HU)
Pri
ori
da
d
Rie
sg
o
Tiempo
Estimado
Interacción
Pu
nto
s E
sti
ma
do
s
Dia
s
Ho
ras
Se
ma
nas
I II
III
IV
V
VI
Administración
1 Slider Presentación. Alta Bajo 5 20 3 X
3
2 Cronograma. Alta Alto 3 12 2,5 X
2,5
3 Turismo. Alta Alto 3 12 3 X X
3
4 Reinas. Alta Alto 2 8 1
X
1
5 Guía de Eventos. Alta Alto 4 16 2,5
X
2,5
6 Gastronomía. Alta Alto 4 16 1,5
X
1,5
7 Fiestas. Alta Alto 3 12 2
X
2
8 Extra Alta Alto 5 20 2,5
X
2,5
9 Configuración Alta Alto 5 20 4
X
4
Acceso al Portal
10 Acceso al Portal Alta Medio 5 20 2
X
2
TOTAL 39 156 24 24
Tabla 16: Plan de Interacción HU1 hasta la HU10. Fuente: Oyasa Ana.
4.1.2.3. Estimación de Entregables
Con respecto a la estimación de entregables se parte mencionando que el cliente ha
manifestado dejar a criterio del desarrollador asignar el orden a las historias de usuario
independiente de la prioridad que mantiene cada una.
A continuación, en la Tabla 17 se muestra el orden de entrega de cada una de las
historias de usuario, pero cabe mencionar que se ha decidido iniciar por las historias de
Esfuerzo de Desarrollo
Horas 4
Días 5
Semanas 24
Tabla 15: Plantilla Esfuerzo de Desarrollo para el Proyecto.
Fuente: Oyasa Ana.
38
usuario que tienen el nivel de riesgo menor, la finalidad es disminuir esfuerzo en la
programación redundante.
N.- Historia de Usuario
Fe
ch
a d
e E
ntr
eg
a
Tiempo Estimado
Interacción
Dia
s
Ho
ras
Se
ma
nas
I II
III
IV
V
VI
01 – 02 30/08/2018 8 32 5,5 X
03 – 04 25/10/2018 5 20 4
X
05 – 06 20/01/2019 8 32 4
X
07 – 08 10/03/2018 8 32 4,5
X
09 – 10 28/05/2018 10 40 6
X
Total 39 156 24
Tabla 17: Plan de Entregas Fuente: Oyasa Ana.
4.1.3. Reuniones
Las reuniones establecidas con el cliente permitieron recopilar los suficientes datos para
comprender los requerimientos que tiene que satisfacerse mediante el portal web, cada
reunión tenía un tiempo aproximado de 60 minutos, una vez al mes. Por los tres primeros
meses, culminados los tres primeros meses Si el desarrollador tenía ciertas dudas, se
requería al cliente realizar una reunión, tomando en cuenta no interrumpir con sus
actividades laborales.
4.2. DISEÑO
4.2.1. Metáfora del sistema
La metáfora del sistema, permite que el desarrollador comprenda que para iniciar con la
elaboración de la aplicación web, como primer punto se debe tener claro el objetivo de
la aplicación detallando de manera sencilla su funcionamiento. Como ayuda se utilizará
las historias de usuario descritas anteriormente.
4.2.2. Proceso de Portal Web Reina de Amaguaña
En la figura 6 que se muestra a continuación, se indica el proceso que realiza el portal
web, mismo que fue concebido gracias a los requerimientos mostrados en las historias
39
de usuarios que se recabó como necesidad de la reina de la parroquia de Amaguaña
para mejorar la difusión de información con los habitantes de la parroquia.
Port
al w
eb R
ein
a d
e
Am
aguaña(C
onfigura
ció
n)
Slider Presentación
Cronograma
Añadir Cronograma
Revisar Cronograma
Turismo
Añadir Lugar
Revisar Lugar
Reinas
Agregar Reina
Revisar Reina
Guia de Eventos
Crear Evento
Revisar Eventos
Gastronomia
Crear Plato
Listar Plato
Fiestas
Crear Fiesta
Listar Fiesta
Extra
Editar Reina Actual
Historia Amaguaña
Configuración
Crear Usuario
Listar Usuario
Añadir fotos a Galería
Listar Galería
Fuente: Ana Oyasa
Figura 6: Proceso del Portal Web Reina de Amaguaña
40
Como se puede observar en la figura 7 se describen los procesos para el portal
web Reina de Amaguaña.
4.2.3. Modelo Entidad Relación
En este punto se presenta el modelo Entidad-Relación elaborado para el desarrollo
del portal web Reina de Amaguaña, la siguiente figura 7 muestra detalladamente
como se conformaron las tablas en la base de datos.
Figura 7: Base de Datos del Portal Web Reina de Amaguaña Fuente: Ana Oyasa
4.2.3.1. Módulos y funciones del Portal Web
El portal web reina de Amaguaña se encuentra dividido en 2 módulos que son:
• Módulo Gestión de Usuarios
• Módulo Administrativo
A continuación, se describe las funcionalidades que tienen cada módulo.
41
Módulo Gestión de Usuarios
El módulo visitante básicamente está dedicado a la autenticación de un usuario en la
aplicación. Entre las funciones que tiene este módulo se enumera las siguientes:
1. Crear Usuarios
2. Listar Usuarios, para su correspondiente edición o eliminación.
Módulo Administrador
En el módulo administrador se gestionan los procesos para organizar y almacenar la
información del portal web en la base de datos. Aquí todas las acciones que de manera
directa son del usuario Administrador, tendremos a disposición las siguientes funciones:
• Slider Presentación
• Cronograma
• Turismo
• Reinas
• Guía de Eventos
• Gastronomía
• Fiestas
• Extras
• Configuración
Cada una de estas funciones se gestionarán de acuerdo a las necesidades que se tenga
dentro de la organización de reinas.
4.2.3.2. Acceso al Portal Web
El acceso que tendrá el portal web está estructurado de dos partes, la primera parte
radica en brindar acceso a todos los usuarios visitantes, y por otra parte se ofrece el
ingreso al usuario Administrador quien debe poseer un usuario y contraseña para poder
visualizar las configuraciones correspondientes del perfil. Para mayor comprensión en
las siguientes líneas se realiza una breve descripción de como cada usuario debe hacer
para ingresar a la aplicación web.
Interface de Bienvenida
La interface que se muestra en la Figura 8, corresponde a la pantalla que se expondrá
a los usuarios visitantes que ingresen al portal web mediante el navegador de su
preferencia digitando el dominio www.sonrieamaguana.com.
42
Figura 8: Interface de Presentación del Portal Fuente: Ana Oyasa
Interface de Login
La interface que se muestra en la Figura 9, corresponde a la pantalla de entrada de
usuarios con perfil Administrador, donde se deberá ingresar los datos asignados
correspondientes a usuario y contraseña.
Figura 9: Interface de Login
Fuente: Ana Oyasa
Interface Módulo Administrador
Una vez que el usuario Administrador haya ingresado su usuario y contraseña la pantalla
que se desplegara es la misma que muestra la figura 10; en la cual se observa que en
43
la parte izquierda se localiza las opciones que están disponibles para configurar el portal
web.
Figura 10: Módulo Administrador.
Fuente: Ana Oyasa
Todas las opciones de configuración estarán disponibles para cualquier cambio que se
desee realizar con la única finalidad de mantener el portal web actualizado para los
usuarios visitantes.
4.2.4. Codificación
En esta sección se detallará los métodos principales que posee el portal web, para crear
cada método se utilizó la palabra reservada funtion seguido del nombre que se destinó
al método entre paréntesis se ingresó los parámetros correspondientes. A continuación,
en la Figura 11 se muestra las líneas de código del método encargado de controlar el
acceso de usuarios administradores al portal.
Figura 11: Método para acceso de usuario administrador. Fuente: Ana Oyasa
44
En la Figura 12 se muestra las líneas de código del método encargado del envío de
correo electrónico desde la ampliación web.
Figura 12: Método para envío de correo electrónico desde el portal web. Fuente: Ana Oyasa
En la Figura 13 se muestra las líneas de código del método encargado de guardar una
publicación dentro de la aplicación web.
Figura 13: Método para guardad una publicación. Fuente: Ana Oyasa
45
Este método es uno de método considerado el más importante ya que es el encargado
de guardar cualquier información para posteriormente publicarla en el portal.
Finalmente, en la Figura 14 muestra las líneas de código del método encargado en
realizar búsquedas.
Figura 14: Método para guardad una publicación. Fuente: Ana Oyasa
Mediante este método se busca en la base de datos las publicaciones y especialmente
es usado para la caja de búsqueda que se encuentra ubicado en la pantalla principal del
portal.
4.2.5. Equipo
A continuación, mediante la Tabla 18 se muestra las características del equipo donde
se realizó la implementación del sistema y las herramientas seleccionadas que han sido
utilizadas.
Equipo
Capacidad del Disco Disponible 1 Terabyte
Memoria RAM 512 MB RAM
Sistema Operativo Windows 10
Motor de Base de Datos PhpMyAdmin
IDE Cloud9 developmet
Tabla 18: Detalles del Equipo donde se Implementa el Sistema. Fuente: Oyasa Ana.
46
4.3. PRUEBAS
4.3.1. Pruebas Unitarias
En este punto se comprueba la funcionalidad de los métodos, la prueba unitaria que se
realizó especialmente fue del método “enviar un correo electrónico de pedido” con
destinatario a la reina de la parroquia de Amaguaña el método mencionado tiene el
propósito de ofrecer al usuario visitante del portal realizar un pedido y colaborar de esta
manera con la fundación, para demostrar el funcionamiento en la Figura 15 se muestra
nuevamente las líneas de código del método mencionado por fines prácticos.
Figura 15: Líneas de Código “Enviar Correo de Pedido”. Fuente: Oyasa Ana
Para comprobar que el método se ejecutó correctamente la Figura 16 muestra los datos
que ingreso un usuario visitante del portal por medio del cual desea solicitar cinco
pasteles, esta información del pedido se enviará al correo personal de la reina de la
parroquia Amaguaña.
La ruta que debe seguir el usuario visitante del portal para acceder al formulario para
realizar un pedido presentado en la Figura 15 se detalla en el manual de usuario. Ver
Anexo (A).
47
Figura 16: Pedido Realizado.
Fuente: Oyasa Ana
Finalmente, en la Figura 17 se muestra el correo electrónico que recibió la reina con el
correspondiente pedido realizado por el usuario que visito el portal web, en el cual se
puede verificar que se refleja los mismos datos ingresados en la Figura 16.
Figura 17: Correo electrónico recibido del pedido enviado a través del Portal.
Fuente: Oyasa Ana
Se puede observar que en la bandeja de entrada del correo electrónico de la Reina de
Amaguaña se ha recibido el mensaje del envió sin ningún tipo de error.
48
4.3.2. Pruebas de Aceptación
Las pruebas de aceptación tienen un grado de importancia muy alto en el desarrollo del
proyecto debido a que se verifica el éxito y buen funcionamiento de cada interacción.
Con cada verificación de la interacción se obtuvo una retroalimentación para mejorar las
próximas historias de usuario que deben ser entregadas.
A las pruebas de aceptación también se las conoce como pruebas del cliente, esto es
debido a que las pruebas se las realizo en presencia de la señorita Ana Belén Morales,
la cual se encargó de revisar si el portal cumple con la funcionalidad esperada.
4.3.2.1. Plantilla Prueba de Aceptación
Para las pruebas de aceptación se utilizará una plantilla la cual se muestra en la Tabla
19, para comprender cada uno de los componentes que posee la plantilla se procede a
realizar una breve descripción de cada componente a continuación.
Prueba de Aceptación
Código: No. Historia de Usuario:
Historia de Usuario:
Condiciones de Ejecución:
Entrada / Pasos de Ejecución:
Resultado Esperado
Evaluación de la Prueba:
Tabla 19: Plantilla para la Elaboración de las Pruebas de Aceptación. Fuente: Oyasa Ana.
▪ Código: permite identificar la prueba de aceptación es un código único.
▪ No. Historial de Usuario: identifica a la historia de usuario, número único.
▪ Historia de Usuario: muestra de modo general la descripción de la historia del
usuario.
▪ Condiciones de Ejecución: son condiciones que se deben realizar
anticipadamente y que convienen cumplirse para elaborar la prueba de
aceptación.
▪ Entrada / Pasos de Ejecución: se debe detallar los pasos a realizar para probar
la funcionalidad de la historia de usuario.
▪ Resultado Esperado: es la respuesta a la aplicación que el cliente espera se
ejecute correctamente.
49
▪ Evaluación de la Prueba: satisfacción del cliente sobre la respuesta del
sistema. Tiene dos niveles:
o Aprobada: si la respuesta de la aplicación y el diseño de la interfaz
cumple con las expectativas del usuario.
o No aprobada: si la respuesta del sistema o el diseño de la interfaz no
cumple con las expectativas del usuario.
A continuación, se muestra las principales pruebas de aceptación del portal web.
Módulo de Administrativo
La tabla 20 muestra la prueba de aceptación Slider de Presentación.
Prueba de Aceptación
Código: PA1 No. Historia de Usuario: 1 Historia de Usuario: Slider de Presentación.
Condiciones de Ejecución: El usuario debe ser un usuario Administrador. o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de
presentación. o Ingresar usuario y contraseña asignados. o Seleccionar opción Slider Presentación.
Entrada / Pasos de Ejecución: o Presionar la imagen que desea actualizar. o Buscar la ubicación de la imagen. o Seleccionar la imagen en formato png, jpg. o Presionar el botón Actualizar.
Resultado Esperado: La imagen ingresada se debe visualizar en el portal en la interface de presentación.
Evaluación de la Prueba: Aprobada.
Tabla 20: Prueba de Aceptación. Slider de Presentación. Fuente: Ana Oyasa.
La tabla 21 muestra la prueba de aceptación Cronograma.
Prueba de Aceptación
Código: PA2 No. Historia de Usuario: 2
Historia de Usuario: Cronograma
Condiciones de Ejecución: El usuario debe ser un usuario Administrador. o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de
presentación. o Ingresar usuario y contraseña asignados. o Seleccionar opción Cronograma.
Entrada / Pasos de Ejecución: o Seleccione la opción Añadir Cronograma. o Ingresar los datos: nombre del evento, hora, lugar, fecha. o Finalmente presionar guardar.
Resultado Esperado: El evento ingresado se muestra en el portal web en la sección de eventos.
Evaluación de la Prueba: Aprobada.
Tabla 21: Prueba de Aceptación: Cronograma Fuente: Oyasa Ana.
La tabla 22 muestra la prueba de aceptación Turismo.
50
Prueba de Aceptación
Código: PA3 No. Historia de Usuario: 3 Historia de Usuario: Turismo
Condiciones de Ejecución: El usuario debe ser un usuario Administrador. o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de
presentación. o Ingresar usuario y contraseña asignados. o Seleccionar opción Turismo.
Entrada / Pasos de Ejecución: o Seleccionamos la opción Añadir Lugar. o Ingresar los siguientes datos: nombre del evento, descripción, foto. o Seleccione el botón Guardar Lugar.
Resultado Esperado: o La información del lugar turístico ingresado se muestra en la sección Turismo del portal.
Evaluación de la Prueba: Aprobada.
Tabla 22: Prueba de Aceptación: Turismo Fuente: Oyasa Ana
La tabla 23 muestra la prueba de aceptación Asignar Actividades al Profesor.
Prueba de Aceptación
Código: PA4 No. Historia de Usuario: 4 Historia de Usuario: Reinas.
Condiciones de Ejecución: El usuario debe ser un usuario Administrador. o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de
presentación. o Ingresar usuario y contraseña asignados. o Seleccionar opción Reinas.
Entrada / Pasos de Ejecución: o Seleccionamos la opción Agregar Reina. o Ingresar los siguientes datos: nombre de la reina, año, Facebook, Twitter, Instagram, foto
de la reina. o Seleccione el botón Guardar Reina.
Resultado Esperado: La información de la reina ingresada se muestra en la sección Reinas del portal web.
Evaluación de la Prueba: Aprobada. Tabla 23: Prueba de Aceptación: Reinas
Fuente: Oyasa Ana.
La tabla 24 muestra la prueba de aceptación Guía de Eventos.
Prueba de Aceptación
Código: PA5 No. Historia de Usuario: 5
Historia de Usuario: Guía de Eventos
Condiciones de Ejecución: El usuario debe ser un usuario Administrador. o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de
presentación. o Ingresar usuario y contraseña asignados. o Seleccionar opción Guía de Eventos.
Entrada / Pasos de Ejecución: o Seleccionamos la opción Crear Evento. o Ingresar los siguientes datos: nombre del evento, breve descripción, descripción
completa, seleccionar archivo. o Seleccione el botón Guardar Evento.
Resultado Esperado: La información del evento ingresado se muestra en la sección Eventos.
Evaluación de la Prueba: Aprobada. Tabla 24: Prueba de Aceptación: Guía de Eventos.
Fuente: Oyasa Ana
51
La tabla 25 muestra la prueba de aceptación Gastronomía.
Prueba de Aceptación
Código: PA6 No. Historia de Usuario: 6 Historia de Usuario: Gastronomía. Condiciones de Ejecución: El usuario debe ser un usuario Administrador.
o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de presentación.
o Ingresar usuario y contraseña asignados. o Seleccionar opción Gastronomía.
Entrada / Pasos de Ejecución: o Seleccionamos la opción Crear Plato. o Ingresar los siguientes datos: nombre del plato, descripción, foto del plato. o Seleccione el botón Guardar Plato.
Resultado Esperado: o La información del plato ingresado se muestra en la sección Gastronomía del portal web.
Evaluación de la Prueba: Aprobada. Tabla 25: Prueba de Aceptación: Gastronomía.
Fuente: Oyasa Ana
La tabla 26 muestra la prueba de aceptación Fiestas.
Prueba de Aceptación
Código: PA7 No. Historia de Usuario: 7
Historia de Usuario: Fiestas Condiciones de Ejecución: El usuario debe ser un usuario Administrador.
o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de presentación.
o Ingresar usuario y contraseña asignados. o Seleccionar opción Fiestas.
Entrada / Pasos de Ejecución: o Seleccionamos la opción Crear Fiesta. o Ingresar los siguientes datos: nombre de la fiesta, descripción, foto de fiesta.
Seleccione el botón Guardar Fiesta.
Resultado Esperado: o La información de la fiesta ingresada se muestra en la sección Fiestas del portal web.
Evaluación de la Prueba: Aprobada. Tabla 26: Prueba de Aceptación. Fiestas.
Fuente: Oyasa Ana.
La tabla 27 muestra la prueba de aceptación Extra.
Prueba de Aceptación
Código: PA8 No. Historia de Usuario: 8 Historia de Usuario: Extra. Condiciones de Ejecución: El usuario debe ser un usuario Administrador.
o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de presentación.
o Ingresar usuario y contraseña asignados. o Seleccionar opción Extra.
Entrada / Pasos de Ejecución: o Seleccionamos la opción Editar Reina Actual. o Ingresar los siguientes datos: nombre de la reina, palabras de la reina, Facebook, Twitter,
Instagram, YouTube, foto 1, foto 2, foto3, foto 4. o Seleccione el botón Guardar Reina.
Resultado Esperado: La información de la reina actual ingresado se muestra en la sección Reinas del portal web.
Evaluación de la Prueba: Aprobada.
Tabla 27: Prueba de Aceptación: Extra. Fuente: Oyasa Ana
52
La tabla 28 muestra la prueba de aceptación Configuración.
Prueba de Aceptación Código: PA9 No. Historia de Usuario: 9 Historia de Usuario: Configuración.
Condiciones de Ejecución: El usuario debe ser un usuario Administrador. o Ingresar al portal mediante icono que se encuentra en la parte inferior de la interface de
presentación. o Ingresar usuario y contraseña asignados. o Seleccionar opción Configuración.
Entrada / Pasos de Ejecución: o Seleccionamos la opción que deseamos realizar. o Crear usuario o Lista de usuarios o Añadir fotos a la galería o Listar galería.
Se debe ingresar a cada opción para realizar el proceso. Resultado Esperado:
o La información de cada opción seleccionada se debe visualizar en el portal web según sea la sección editada.
Evaluación de la Prueba: Aprobada.
Tabla 28: Prueba de Aceptación: Configuración. Fuente: Oyasa Ana
Acceso al Portal
La tabla 29 muestra la prueba de aceptación Acceso al Portal.
Prueba de Aceptación
Código: PA10 No. Historia de Usuario: 10 Historia de Usuario: Acceso al Portal. Condiciones de Ejecución: El usuario debe ser cualquier persona que desee visitar el portal web.
Entrada / Pasos de Ejecución: o Conectarse al Internet. o Desde un navegador ingresar al url: http: www.sonrieamaguana.com.
Resultado Esperado: o Los usuarios podrán navegar sin ningún error al portal e interactuar con la misma.
Evaluación de la Prueba: Aprobada.
Tabla 29: Prueba de Aceptación: Acceso al Portal. Fuente: Oyasa Ana
4.4. DESPLIEGUE DEL PORTAL
Después de un arduo trabajo en el análisis, diseño y desarrollo del portal web, finalmente
se llegó a la etapa de la implementación del proyecto “Creación de canales informativos
para la gestión de Fundaciones Rurales del Distrito Metropolitano de Quito, en las
Parroquias Rurales. Caso: Amaguaña”, para realizar la implementación el paso a seguir
es alojar el portal web Reina de Amaguaña en el proveedor de dominio adquirido
GoDaddy, el mismo que permitirá almacenar la aplicación web en la nube para que se
encuentre disponible las 24 horas del día los 365 días del año; Es importante mencionar
que este proveedor reservará un nombre de dominio para que el usuario ingrese al portal
53
desde cualquier navegado conectado al internet con tan solo ingresar el dominio y no
necesariamente una IP.
A continuación, se realiza una descripción de las herramientas que permitieron
desplegar el portal web a través de GoDaddy.
4.4.1. Administración del Dominio
Como primer punto fue seleccionar el nombre de dominio el cual pertenece a
sonrieamaguana.com para esta elección se contó con la colaboración de la Reina de
Amaguaña quien fue la persona encargada de asignar este nombre, según comento la
reina este nombre lleva la frase simbólica de la campaña mediante la cual pretende
fomentar el turismo de la Parroquia.
Seguidamente se enumera tres aspectos que hay que tomar en cuenta en la
administración del dominio.
1. Dirección IP Compartida: 107.180.41.49
2. Dominio Principal: sonrieamaguania.com1
3. url: http://www.sonrieamaguana.com/web/
La Figura 18 muestra el dominio registrado en GoDaddy.
Figura 18: Dominio sonrieamaguana.com Fuente: Oyasa Ana
1 https://www.godaddy.com/
54
Como se puede observar el dominio adquirido es sonrieamaguana.com el mismo que
permitirá identificar el portal.
4.4.2. Administración del Cpanel
En la Figura 19 se muestra las herramientas utilizados para alojar el portal web, entre
los cuales se puede observar la base de datos MySQL y el gestor de base de datos
PhpMyAdmin, así como el administrador de archivos donde se guardará la carpeta del
proyecto.
Figura 19: CPanel del portal web vinculado al dominio sonrieamaguana.com
Fuente: Oyasa Ana
4.4.1. Administración de Archivos mediante el Cpanel
Para poder administrar los archivos primero se debe cargar la carpeta del proyecto al
Cpanel. En la Figura 20 se muestra la estructura del directorio que tiene el proyecto
Reina de Amaguaña.
55
Figura 20: Administrador de Archivos en el CPanel Fuente: Oyasa Ana
4.4.1. Administración de phpMyAdmin mediante el Cpanel
Un paso previo para la administración de la base de datos es importar la base de datos,
en la Figura 21 se muestra que mediante el gestor de base de datos PhpMyAdmin se
puede manipular la base de datos ReinaAmaguanaDb.
Figura 21: Administrador de Archivos en el CPanel Fuente: Oyasa Ana
Como se pudo observar en la figura anterior la base de datos contiene las cinco tablas
que se mostraron en la figura 17 del modelo Entidad-Relación.
56
4.5. ANÁLISIS DE RESULTADOS
4.5.1. Ejecución del Portal Web
Una vez administrado el cPanel y adquirido el dominio sonrieamaguana.com, el portal
web pudo ser puesto en ejecución, debido a que se encuentra almacenado en la nube
del hosting adquirido, hay que tomar en cuenta que para poner en producción el portal
web se realizó la alimentación de la base de datos es decir que se ingresó la información
relacionada a las actividades que realiza la reina de Amaguaña así como de los lugares
turísticos entre otros aspecto, Un punto importante fue la creación del siguiente usuario:
▪ Administrador: persona encargada en la configuración del portal web.
4.5.2. Recolección de Información para el Análisis
Para la recolección de información y posterior análisis se ha tomado como ayuda los
resultados obtenidos de las pruebas de aceptación de las historias de usuario debido a
que su información es preciso, claro, y sencillo de comprender y analizar.
4.5.3. Resultados de las pruebas de Aceptación
En la Tabla 30 se mostrará los resultados obtenidos de las pruebas de aceptación para
las Historias de Usuario con más relevancia.
N.- Historias de Usuario (HU) Código de Prueba de Aceptación
Resultado
Administración
1 Slider Presentación. PA01 Aprobado
2 Cronograma PA2 Aprobado
3 Turismo PA3 Aprobado
4 Reinas PA4 Aprobado
5 Guía de Eventos PA5 Aprobado
6 Gastronomía PA6 Aprobado
7 Fiestas PA7 Aprobado
8 Extra PA8 Aprobado
9 Configuración PA9 Aprobado
Usuario
10 Acceso al Portal PA10 Aprobado
Tabla 30: Resultado de las Pruebas de Aceptación.
Fuente: Oyasa Ana.
4.5.4. Análisis de los resultados
Mediante los resultados obtenidos de las pruebas de aceptación se evidencia que el
portal web Reina de Amaguaña desarrollado cumple con los requerimientos y
57
funcionalidades que el cliente solicita, además se verifica que el portal web mantiene
una interfaz dinámica que permite difundir información importante y oportuna a los
usuarios que la visitan por lo que finalmente se concluye que se ha cumplido con las
expectativas de la Reina de Amaguaña.
La carta de aceptación del portal web sonrieamaguana.com por parte de la señorita Ana
Belén Morales López Reina de la Parroquia Rural Amaguaña se encuentra en la sección
de Anexos de este documento. (Ver Anexo F).
58
CAPITULO V. CONCLUSIONES Y
RECOMENDACIONES
CONCLUSIONES
▪ El portal web sonrieamaguana.com, ha beneficiado a la organización de reinas
de la Parroquia Rural Amaguaña, puesto que se ha convertido en un canal de
comunicación apto para difundir las actividades y programas que realiza la reina,
evitando omitir información importante, reducir costos en la comunicación y
sobre todo evitar la pérdida de información.
▪ Gracias a que el sistema desarrollado es una aplicación web, permitirá a los
habitantes de la parroquia de Amaguaña y cualquier persona que navegue en el
portal, conocer si existe alguna actividad en la que pueda participar y de esta
manera beneficiarse o beneficiar a un familiar.
▪ El portal web queda con un completo manejo de actividades, cronograma de
actividades, guía de eventos, galería, manejo de redes sociales, conjunto de
base de datos de fácil acceso y de gran capacidad de almacenamiento, contador
de visitas del portal para mantener un óptimo registro y control de la información
y que la directiva pueda dar a conocer su labor dentro y fuera de la parroquia
con el propósito de conseguir un apoyo de empresas públicas y privadas.
59
RECOMENDACIONES
• Debido a que el portal web sonrieamaguana.com se encuentra alojado en la
nube por medio del proveedor de hosting GoDaddy se recomienda dar
continuidad a la renovación de la compra del proveedor para evitar inhabilitar la
aplicación.
• Como las actividades que realiza la reina de Amaguaña cambian diariamente es
recomendable subir la información al portal web inmediatamente para que los
usuarios que navegan en la aplicación puedan disfrutar de contenido
actualizado.
• Es importante que se realice copias de seguridad permanentes de los datos que
hospeda el portal web para respaldar la información en un caso de fallas por
cualquier factor tecnológico, natural o humano que se genere.
• La interacción que tiene el usuario mediante el portal web es por medio de redes
sociales y formularios por esta razón se recomienda a la Reina de Amaguaña la
utilización de sus redes sociales a través del portal web para mejor interacción.
• Actualmente la tecnología está en constante innovación es por esa razón que se
recomienda que para estar a la vanguardia de la tecnología se implemente una
App con relación al portal web para que los usuarios puedan descargarse y
utilizar la información del turismo de la parroquia con mayor facilidad.
60
BIBLIOGRAFÍA Activate Ecuador . (2014). Obtenido de http://www.activate.ec/content/gad-parroquial-
rural
Amaguaña, G. (06 de Febrero de 2016). Gobierno Autónomo de Amaguaña. Obtenido
de http://www.amaguania.gob.ec/index.php
Beard, E. Z. (18 de septiembre de 2018). amazon. Obtenido de
https://aws.amazon.com/es/cloud9/
Cardador Cabello, A. L. (2015). Implantación de aplicaciones web en entornos internet,
intranet y extranet. IFCD0210. Antequera: IC Editorial.
Cevallos, K. (8 de Mayo de 2015). Ingeniería del Software. Obtenido de
https://ingsotfwarekarlacevallos.wordpress.com/2015/05/08/metodologia-de-
desarrollo-agil-xp-y-scrum/
Code, V. S. (4 de marzo de 2019). Visual Studio Code. Obtenido de
https://code.visualstudio.com/docs
Culturacion. (24 de agosto de 2014). Culturacion. Obtenido de
https://culturacion.com/que-es-y-para-que-sirve-mysql/
develapps. (24 de enero de 2018). develapps. Obtenido de
http://www.develapps.com/es/noticias/metodologias-agiles-en-el-desarrollo-de-
software
Diligent Team. (14 de febrero de 2016). diligent. Obtenido de
https://www.diligent.es/framework-symfony-php/
Ferrer Martínez, J. (2012). Implantación de aplicaciones web. Madrid: RA-MA.
GoDaddy. (10 de enero de 2019). GoDaddy. Obtenido de
https://es.godaddy.com/company/about
guíaOSC. (24 de 10 de 2017). Guía OSC. Obtenido de https://guiaosc.org/que-es-un-
gobierno-autonomo-descentralizado/
Gutiérrez, J. (14 de 2 de 2016). lsi.us.es. Obtenido de
http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf
Henríquez, R. (2016). Desarrollador Web PHP. Madrid: Ing. Roberto Henríquez.
IT, s. (julio de 2019). db-engines. Obtenido de https://db-engines.com/en/ranking
Jiménez, J. Z. (2013). Aplicaciones Web. Madrid: Macmillan Iberia, S.A.
Jose Talledo, S. (2015). MF0493_3 - Implantación de aplicaciones web en entorno
internet, intranet y extranet. España: Ediciones Paraninfo,S.A.
Letelier Torres, P., & Sánchez López, E. (2003). Metodologías Ágiles en el Desarrollo
de Software. Alicante: Grupo ISSI.
Letelier Torres, P., & Sánchez López, E. A. (12 de Noviembre de 2003). issi. Obtenido
de http://issi.dsic.upv.es/archives/f-1069167248521/actas.pdf
61
Linares, L. (1998). Las fundaciones. Patrimonio, funcionamiento y actividades.
Valencia: Tirant lo Blanch y Universitat de Valéncia.
López Sanz, M., Soltero Dominguez, F. J., Sánchez Fúquene, D. M., Moreno Pérez,
Á., Bollati, V. A., & Vara Mesa, J. M. (2016). Programación Web en el Entorno
Servidor. Madrid: RA-MA.
Luna, F., Peña Millahual, C., & Iacono, M. (2010). PROGRAMACION WEB Full Stack
13 - PHP: Desarrollo frontend y backend.
Matehuala, I. T. (5 de junio de 2015). Programación Web. Obtenido de
https://programacionwebisc.wordpress.com/2-1-arquitectura-de-las-
aplicaciones-web/
Medina, D. (25 de agosto de 2007). WEBADICTOS. Obtenido de
https://webadictos.com/sql-designer-un-disenador-de-bases-de-datos-en-linea-
y-open-source/
Mifsuf Talón, E. (2012). Apache. Madrid: educacion.es.
Mollericona Marín, E. (31 de 8 de 2015). edsonmm. Obtenido de
http://www.edsonmm.com/estructura-de-directorios-y-fundamentos-en-
symfony-2/
Ramírez Navia, F. (6 de marzo de 2018). ITSoftware. Obtenido de
https://itsoftware.com.co/content/que-es-y-para-que-sirve-mysql/
Ramos Martín, A., & Ramos Martín, M. (2014). Aplicaciones Web. Madrid: Ediciones
Paraninfo, S.A.
Sergio, L. M. (2001). Programación en Internet: Clientes WEB. España: Club
Universitario.
socorrozegarra. (21 de noviembre de 2017). socorrozegarra. Obtenido de
http://socorrozegarra.blogspot.com/2017/11/cuadro-comparativo-modelo-xp-
scrum-rup.html
top10. (julio de 2019). top10. Obtenido de
https://www.top10bestwebsitehosting.com/?utm_source=google&kw=hosting%
20economico&c=237853360006&t=search&p=&m=p&adpos=1t1&dev=c&devm
od=&mobval=0&network=g&campaignid=146480388&adgroupid=6679006068&
targetid=kwd-38879742&interest=&physical=9069516&feedid=&
Villoria, L. N., & Caivano, R. M. (2009). APLICACIONES WEB 2.0 - Google docs.
Eduvim.
Virguez, M. d. (13 de enero de 2017). lifeder. Obtenido de
https://www.lifeder.com/tipos-paginas-web/
Zepeda, R. (22 de 11 de 2015). El Informático.com. Obtenido de
http://blogdelinformatico-reizer.blogspot.com/2015/11/que-es-xampp.html
62
ANEXO A
MANUAL DE USUARIO
ACCESO AL PORTAL WEB
Abrir el navegador web de preferencia y escribir en la barra de direcciones el siguiente
enlace: www.sonrieamaguana.com tal como se muestra en la imagen anexa.
Una vez escrita la dirección anterior, deberá oprimir el botón “Enter” de su teclado. Éste
lo trasladará a la página principal del Portal Web Reina de Amaguaña como se visualiza
a continuación.
USO DEL PORTAL WEB
A continuación, se exponen las secciones que componen este portal web y la forma de
cómo trabajar con cada una de ellas.
63
Menú de Opciones
En este panel se establecen las opciones que el portal web ofrece, las cuales trasladan
al usuario a las secciones que se encuentran disponibles para su navegación y manejo.
En las siguientes divisiones se describirán cada una de las alternativas contenidas en el
menú de opciones para que el manejo del usuario pueda realizarse de manera eficaz y
sencilla:
Opción Inicio
Al elegir esta opción, el navegante siempre será trasladado a la página principal del sitio
web. Si por alguna razón no se encuentra la sección buscada y desea regresar a la
página principal, deberá seleccionará este botón.
Opción Visita Amaguaña
La opción “Visita Amaguaña” contienen un submenú con las secciones que se muestran
en la siguiente captura:
A continuación, se detalla cada una de las alternativas contenidas en el submenú “Visita
Amaguaña”:
Fiestas Tradicionales
Esta página contiene la información más importante y representativa de las fiestas
tradicionales que mantiene la parroquia de Amaguaña, la cual será mostrada a los
64
usuarios con la finalidad de exponer parte de las tradiciones de los habitantes, así como
la identidad que constituye a Amaguaña.
En la captura de pantalla se muestra una imagen principal de la página de “Fiestas
Tradicionales”, seguida de una breve explicación de su contenido.
Mediante una breve redacción se muestra el significado de la fiesta tradicional en la
localidad; también muestra una fotografía que representa a la festividad.
Lugares Turísticos
Este apartado de la página web contiene la información más importante y representativa
de los lugares turísticos existentes en la parroquia de Amaguaña, la cual es mostrada a
los usuarios con la finalidad de presentar las bellezas naturales de la parroquia mismas
que sirven para ampliar el turismo de la zona.
A continuación, se muestra en pantalla una imagen de la página de “Lugares Turísticos”,
seguida de una breve explicación de su contenido.
65
Nos relata una breve redacción del significado de la fiesta tradicional en la localidad;
también muestra fotografías de los lugares que más afluencia de turistas presenta al
año.
Gastronomía
Esta página contiene la información de la gastronomía existentes en la parroquia de
Amaguaña, la cual es mostrada a los usuarios para que los visitantes tengan la
oportunidad de degustar de la tradicional gastronomía al visitar la parroquia.
A continuación, se muestra en pantalla una imagen de la página gastronomía, seguida
de una breve descripción de las comidas tradicionales de Amaguaña.
66
En esta ocasión se relata una breve redacción del significado de la gastronomía
tradicional de Amaguaña junto a una fotografía que permite que el visitante admire las
delicias de la parroquia.
Historia de Amaguaña
Esta sección se detalla una descripción breve de la Parroquia Amaguaña para que los
visitantes puedan conocer el origen y significado del nombre Amaguaña.
Opción Eventos
La opción “Eventos” contiene un submenú con las siguientes secciones como se
muestra en la siguiente imagen:
A continuación, se detalla cada una de las alternativas contenidas en el submenú
“Eventos”:
67
Cronograma
La siguiente captura corresponde a la interface “Cronograma” mediante el usuario
visitante del portal podrá informarse de los eventos próximos a desarrollarse
permitiéndole ser parte de cada evento o beneficiándose del mismo.
Eventos
En esta subsección de la opción “Eventos”, el navegante podrá encontrar fotografías de
los eventos realizados por la parroquia tanto recientes como de temporadas anteriores.
Opción Reinas
En esta opción los usuarios podrán encontrar información de la reina actual y su corte
de honor, tal como se muestra en la siguiente captura:
68
A continuación, se presentará la descripción de cada una de las subsecciones que
conforman la opción “Reinas”.
Ana Belén Morales
En este apartado se describe la biografía de la actual reina de Amaguaña con el
propósito de mostrar a los navegantes los ideales y un vínculo directo con las redes
sociales de la actual soberana.
Corte de Honor
En este apartado de la opción “Reinas” los usuarios tienen la posibilidad de conocer a
la corte de honor de este año, quienes estarán encargadas junto a la reina de realizar
distintas actividades en beneficio de la parroquia.
69
Opción Galería
Esta opción muestra al usuario diferentes fotografías y videos de los acontecimientos
importantes en la parroquia, dirigido por la reina y su corte de honor.
A continuación, se describen los apartados de la opción “Galería” para conocer mejor
su funcionamiento.
Fotos
En esta subsección de la página web el navegante puede observar las fotografías de
las diversas actividades de la parroquia tanto de las fiestas como de los eventos
benéficos de la parroquia.
70
Videos
En esta subsección de la página web el navegante puede observar los videos de las
diversas actividades de la parroquia tanto de las fiestas como de los eventos benéficos
de la parroquia.
Opción Contáctanos
La interface que se muestra, corresponde a la sección contáctanos del portal web, en
esta sección el usuario podrá interactuar con la reina mediante un formulario que se
encuentra en la parte media de la interface, adicional en la parte derecha esta Twitter y
en la parte izquierda se encuentra Facebook con el objetivo principal de que el usuario
mediante sus redes sociales pueda interactuar con el portal.
71
Opción Colaboración
La interface que se muestra, corresponde a la opción “Adquiere tu Pastel” del icono que
se encuentra en la parte superior del portal, mediante la cual el usuario podrá adquirir
un pastel, y de esta manera colaborar con el reinado para recolectar fondos en
beneficios de los más necesitado.
La interface que se muestra, corresponde a la opción Has tu pedido AQUÍ, el usuario al
seleccionar esta opción inmediatamente se presenta un formulario que le permitirá
ingresar los datos correspondientes con el pedido que desea realizar.
72
ACCESO AL PORTAL COMO USUARIO ADMINISTRADOR
Ingreso al portal
Para acceder al portal como administrador, primero debemos seleccionar la opción
“Inicio”, una vez ahí mediante las barras de desplazamiento nos dirigimos al pie de la
página.
En la parte inferior localizamos la oración “Copyright © Ana Belén de Amaguaña” y
presionamos en el ícono en forma de usuario.
73
Interface de Ingreso
La interface que se muestra, corresponde a la interface que se mostrará al usuario para
que pueda acceder al portal web una vez que se identifique con su usuario y contraseña
designados.
Una identificado el usuario se muestra por completo el módulo administrador con las
diversas opciones que están dispuestas en la parte izquierda de la pantalla permitiendo
ejecutar cambios en la presentación de la página web.
Panel de Opciones del Administrador
El Panel de Opciones del administrador se conformado por nueve opciones entra las
que tenemos: Slider Presentación, Cronograma, Turismo, Reinas, Guía de Eventos,
Gastronomía, Fiestas, Extra, Configuración.
74
A continuación, se describe cada opción que permitirá al administrador cambiar o
modificar elementos de la presentación.
Opción Slider Presentación
En esta opción el administrador tiene la oportunidad de acceder a las imágenes que se
muestran en la parte superior de la opción “Inicio”, para actualizarlas o cambiar la
secuencia de las mismas debemos presionar el botón “Actualizar”.
Opción Cronograma
Esta opción permite al usuario ingresar un evento próximo para que los visitantes
puedan asistir al mismo, igualmente pueden acceder a eventos ya publicados para
editarlos o eliminarlos dependiendo de la necesidad del administrador.
1
2
75
Según el requerimiento del usuario a continuación se explica cada una de las secciones
que conforman la opción “Cronograma”.
Añadir Cronograma
Esta sección permite agregar un evento que este por organizarse en la parroquia de
Amaguaña, para hacerlo deberá seguir el formulario presentado en la imagen y
presionar el botón del final para publicar el evento en la página web.
Revisar Cronograma
En esta opción podemos editar eventos previamente publicados en caso de cambio de
título, hora, fecha o lugar, además, mediante esta sección podemos seguir eliminando
los eventos ya realizados para que los usuarios tengan la oportunidad de observar
eventos venideros.
1
2
76
En caso de necesitar eliminar alguno de los eventos, el usuario deberá presionar el
primer ícono, el cual se encuentra en la parte derecha de cada evento.
En caso de necesitar editar alguno de los eventos, el usuario deberá presionar el
segundo ícono, el cual se encuentra en la parte derecha de cada evento.
Opción Turismo
Esta opción está enfocada para adicionar los “Lugares Turísticos” de Amaguaña y en
caso de necesitar cambiar algún dato de los sitios se puede realizar desde esta sección.
77
Opción Configuración
Contiene cuatro partes muy importantes que son: “Crear Usuario”, “Lista de Usuarios” y
“Añadir Fotos a Galería”, “Listar Galería”.
▪ Crear Usuario: la interface de creación de usuario donde se debe ingresar los
siguientes campos: nombre usuario, apellido usuario, CI, Nick, contraseña, una
vez ingresada la información se deberá presionar la opción Guardar usuario.
▪ Lista de Usuarios: la interface de lista de usuarios en el cual se puede observar
que existe dos iconos los cuales representan eliminar un usuario existente y el
78
otro icono modificar los datos del usuario respectivamente.
▪ Añadir fotos a Galería: para añadir fotos de la Reina de Amaguaña a la galería
del portal se debe presionar en cada uno de los botones con el nombre
“Seleccionar archivo”, los archivos que se puede guardar tienen que tener un
formato png y jpg. No es necesario que la imagen tenga un tamaño establecido.
El botón “Guardar”, como su nombre lo indica nos permite guardar en el portal
los archivos seleccionados los mismos que se mostrará en el menú galería.
▪ Listar Galería: esta interface permite eliminar la fotografía que el usuario desee
después de eliminar la fotografía se podrá añadir otra fotografía como se
detallaba en la figura anterior.
79
80
ANEXO B
MANUAL TÉCNICO
DIAGRAMA DE LA BASE DE DATOS
ESTRUCTURA DEL PROYECTO
La estructura del directorio de carpetas del proyecto es el siguiente:
81
ARCHIVOS PARA CONFIGURAR SYMFONY
Dentro de la carpeta web se halla dos archivos importantes para configurar el framework
Symfony y poder trabajar utilizando sus diversas ventajas, los archivos son los
siguientes:
o app_dev.php
o app.php
Estos archivos están relacionados con un concepto usado en Symfony llamado
Controlador Frontal o Front Controller en inglés que serán los encargados de recibir
las peticiones de cliente a la aplicación.
Archivo app_dev.php
Archivo app.php
82
El archivo necesario para trabajar en la nube es config.php ubicado en la carpeta web.
Archivo para configurar la base de datos la cual se encuentra en la siguiente ruta:
app/config/parameters.yml.
83
Archivo de rutas routing.yml se encuentra dentro de los recursos de bundle, archivo
donde se mapean las rutas y las acciones de la aplicación.
CLASE PRINCIPAL UserController.php
Donde se construye la lógica de las acciones de la aplicación.
84
MÉTODOS PRINCIPALES
Envío de correo electrónico desde la ampliación.
A través de este método se envía un correo desde el sitio web a los navegantes.
Redireccionar y mostrar lugares turísticos
Este método tiene la funcionalidad de mostrar los lugares turísticos que posee
almacenado el sitio web.
85
Control de acceso de usuarios al sistema
Método de alta importancia la cual permite tener un control de los usuarios para lo cual
también determina parámetros como nombre de usuario y la correspondiente
contraseña.
Eliminación de usuarios del sistema
Depura la base de datos eliminando los usuarios que desee.
86
Eliminación de publicación del sistema
Depura la base de datos eliminando las publicaciones que se desee.
Esto se realiza según el tipo que este sea puede ser un lugar turístico un plato típico etc.
en el sistema toda información se trata como publicación
Actualización de publicación
Actualiza información de las publicaciones del portal web.
87
Guardar publicación
Este método es uno de los más importantes ya que es el encargado de guardar cualquier
información de la página web.
88
Guardar fotos para la galería de la página.
Este método se encarga de guardar las fotos que subimos desde la interface de usuario.
Creación de usuarios
Método que guarda todos los usuarios creados mediante la interface de usuario.
89
Buscar en la base de datos las publicaciones
Este método se usa para la caja de búsqueda del sitio web.
Recuperar fotografías
Este método es el encargado de recuperar las fotografías de la base de datos para
colocar en la sección de galería.
Actualizar información
Actualiza toda la información se la sección de reinas en el sitio web.
90
Actualizar información de usuarios
Actualiza toda la información de los usuarios para lo cual maneja parámetros como
nombre, apellido, CI, Nick name y contraseña.
91
Actualizar fotos de la slider de la página web
Este método ayuda a actualizar las fotos que se muestran en la página principal del sitio
web.
En el presente manual técnico se ha detallado las clases, métodos escritos para
construir el sitio web “Reina de Amaguaña”, cabe destacar que el lenguaje de
programación utilizado es PHP así como también se aplicó el framework Symfony con
una conexión a la base de datos MySQL.
El propósito de este manual es ser una guía para los desarrolladores que deseen
levantar este proyecto y modificarlo para realizar mejoras y avances que beneficien a
las Fundaciones de Reinas.
92
ANEXO C
MANUAL DE INSTALACIÓN DEL SOFTWARE UTILIZADO
REQUERIMIENTOS MÍNIMOS DEL SISTEMA
Previo a la instalación del software debemos comprobar que el sistema tenga los
siguientes requerimientos mínimos:
• Sistema Operativo Windows 10
• Bits del Sistema Operativo: 64 bits
• Core i3
• 512 MB de Memoria RAM: 4 GB
• Acceso a Internet
• Capacidad del Disco Disponible 1 Terabyte
Importante: Antes de empezar con la instalación del sistema, se debe copiar la carpeta
SONRIE AMAGUANA del CD de Instalación a la unidad C del equipo donde vamos a
instalar el software.
INSTALACIÓN DE VISUAL STUDIO CODE 1.36 en Windows
Para realizar la instalación como primer paso nos dirigimos a la siguiente ruta
C:\SONRIE AMAGUANA\SOFTWARE UTILIZADO EN LA APLICACIÓN, a
continuación, seleccionamos el archivo VSCodeUserSetup-x64-1.36.1 presionamos el
botón derecho del mouse y elegimos la opción Ejecutar como administrador.
93
Nos saldrá la siguiente pantalla la cual nos pregunta si deseamos permitir el cambio
damos clic en Sí.
Al poner en marcha el instalador de Visual Studio Code nos muestra un aviso que
aparece si está activado el Control de Cuentas de Usuario y nos pregunta si Estamos
seguro de querer continuar presionamos la opción Aceptar.
La siguiente pantalla exige aceptar la licencia de Visual Studio Code para continuar la
instalación donde primero debemos seleccionar la opción Acepto el acuerdo y
finalmente dar clic en la opción Siguiente >.
94
La siguiente pantalla permite elegir el directorio de instalación donde se guardarán
archivos necesarios lo dejamos por default y damos clic en Siguiente >.
La siguiente pantalla permite elegir el nombre de la carpeta del menú de inicio lo cual
dejamos por default y damos clic en Siguiente >.
95
La siguiente ventana permite elegir algunas tareas adicionales tras la instalación.
Personalmente, aconsejo marcar la casilla "Crear un icono en el escritorio" y
mantener seleccionada la casilla que viene por default “Agregar a PATH (Disponible
después de reiniciar)” y finalmente damos clic en Siguiente >.
Finalmente se muestran las opciones elegidas en las pantallas anteriores. Para iniciar
la instalación, haga clic en Instalar.
96
A continuación, se instalará Visual Studio Code se debe esperar hasta que la barra de
color verde se complete.
Una vez completada la instalación, se muestra la pantalla final haga clic en Finalizar.
97
Al aparece la siguiente ventana se procede a cerrarla para lo cual damos clic en el icono
X ubicado en la parte superior derecha de la ventana.
La primera vez que se abre Visual Studio Code tras la instalación, se muestra una página
de bienvenida la misma que la cerramos.
98
Ya tenemos instalado y funcionando Visual Studio Code.
INSTALACIÓN DE XAMPP 1.8.1 en Windows
Para realizar la instalación como primer paso nos dirigimos a la siguiente ruta
C:\SONRIE AMAGUANA\SOFTWARE UTILIZADO EN LA APLICACIÓN, a
continuación, seleccionamos el archivo xampp-1-8-1-es-en-win presionamos el botón
derecho del mouse y elegimos la opción Ejecutar como administrador.
99
Nos saldrá la siguiente ventana la cual nos pregunta si deseamos permitir el cambio
damos clic en Sí.
Se muestra la siguiente interface no se debe realizar nada en especial hay que esperar
Al poner en marcha el instalador de XAMPP nos muestra un aviso que aparece si está
activado el Control de Cuentas de Usuario y nos pregunta si Estamos seguro de querer
continuar presionamos la opción OK.
La siguiente pantalla nos pregunta si deseamos descargar Visual C++ 2018 por lo cual
presionaremos en la opción No.
100
A continuación, se inicia el asistente de instalación. Para continuar, haga clic en el botón
"Next".
En la siguiente pantalla que se nos presenta podemos escoger que vamos a instalar y
que no en nuestro servidor. Podemos escoger todas las opciones como en este caso,
Pulsamos sobre el botón Next.
En la siguiente pantalla puede elegir la carpeta de instalación de XAMPP. La carpeta de
instalación predeterminada es C:\xampp. Si desea cambiarla, haga clic en el icono de
101
carpeta y seleccione la carpeta donde quiere instalar XAMPP. Para continuar la
configuración de la instalación, haga clic en el botón Next >.
En esta siguiente pantalla no indica que Bitnami nos puede proveer de instaladores de
las aplicaciones web Drupal, Joomla, WordPress y muchas otras para XAMPP. En este
caso no vamos a instalar nada, con lo que después podemos ver esta información.
Desmarcamos la casilla Learn more about Bitnami for XAMPP, y pulsamos sobre el
botón Next.
102
La siguiente pantalla simplemente nos informa de que el programa de instalación está
preparado para instalar el XAMPP en el PC. Si queremos cambiar algo podemos hacerlo
ahora y pulsar el botón Back para hacer los cambios, sino para empezar a instalar
XAMPP con la configuración que tenemos solo pulsamos sobre Next.
El proceso de instalación puede durar unos minutos por lo mismo se debe esperar hasta
que la barra verde se complete.
103
Finalmente aparece la siguiente pantalla que indica la finalización de la instalación de
XAMPP. Si no queremos que el Control Panel del XAMPP arranque ahora, dejamos sin
marcar la casilla Do you want to start the Control Panel now?. Aquí lo marcaremos
para iniciar de una vez el XAMPP, ya que hay que hacer unas configuraciones más
luego de instalar XAMPP. Pulsamos el botón Finish.
104
La siguiente pantalla muestra el panel de control de XAMPP el cual está listo para ser
utilizado.
Para poner en funcionamiento Apache, hay que hacer clic en el botón "Start"
correspondiente:
De igual para poner en funcionamiento MySQL, hay que hacer clic en el botón "Start"
correspondiente:
105
Por el momento solo minimizaremos la pantalla dando clic en el botón minimizar.
IMPORTANTE:
Si en un momento dado el Firewall de Windows nos salta, diciendo que ha bloqueado
algunas características del servidor Apache de XAMPP para las redes públicas y privadas.
Aquí simplemente debemos pulsar sobre el botón Permitir acceso.
106
INSTALACIÓN DE LA EXTENCIÓN MySQL EN VISUAL STUDIO CODE.
Para poder conectar MySql a la base de datos desde el editor Visual Studio Code,
primero se debe instalar dos extensiones:
La primera extensión que se va a instalar es la de MySQL, debemos ingresar a Visual
Studio Code, una vez abierta la aplicación damos doble clic sobre el icono Extensiones
que se encuentra en la parte izquierda.
En la barra de búsqueda de extensiones, escriba mysql.
107
Se debe seleccionar la opción MySQL management tool y luego dar clic en el botón
de color verde Install.
Debemos esperar unos segundos hasta que finalice la instalación, una vez concluido el
proceso se mostrara que MySQL se encuentra instalado.
108
Nuevamente en la barra de búsqueda de extensiones, se debe seleccionar la opción
MySQL Syntax. y luego dar clic en el botón de color verde Install.
Debemos esperar unos segundos hasta que finalice la instalación, una vez concluido el
proceso se mostrara que MySQL Syntax se encuentra instalado.
109
Luego cerramos la aplicación de visual studio code y la volvemos a iniciar para que haga
efecto las instalaciones de las extensiones y damos clic en el botón Explorer donde se
podrá observar en la parte inferior MySQL.
Damos clic en MYSQL y se desplegaran las bases de datos, en este caso se observará
vacío porque aún no se hace la conexión con la base de datos.
110
CREACIÓN DE LA BASE DE DATOS MYSQL EN PHPMYADMIN USANDO
XAMPP.
Como primer paso maximizamos la pantalla de Xampp y verificamos que Apache y
MySQL estén funcionando correctamente para lo cual comprobamos que se encuentren
de color verde.
Inmediatamente damos click en el botón Admin.
111
Se abrirá la siguiente página en el navegador.
Para crear una base de datos damos clic en el botón Base de Datos.
112
Escribiremos (en la zona que se resalta a continuación) el nombre que le queremos dar
a nuestra base de datos (vamos a denominarla "ReinaAmaguanaDb") luego damos clic
en el botón Crear.
113
En unos segundos se observa que la base de datos fue creada exitosamente.
Primero damos click en nuestra base de datos creada reinaamaguanadb luego clic en
la opción Importar.
Damos clic en la opción Examinar.
114
Buscamos el backup de la base de datos que se encuentra en la ruta C:\SONRIE
AMAGUANA\BACKUP BASE DE DATOS, damos clic en Abrir.
Lo demás los dejamos por default y presionamos el botón Continuar.
115
Y podremos visualizar nuestra base restaurada exitosamente.
116
CREACIÓN DE CONEXIÓN ENTRE MYSQL Y VISUAL STUDIO CODE
IMPORTANTE: Antes de hacer la conexión hay que fijarse que el servidor local MySQL
esté funcionando.
Abrimos Visual Studio Code y nos dirigimos a la opción Add Connection (+) damos clic.
117
En la barra que nos aparece ingresamos los datos del servidor, escribimos localhost y
presionamos la tecla Enter.
Luego escribimos el nombre de usuario que es root y presionamos la tecla Enter.
Nos solicita el password, pero como no tenemos no escribimos nada y presionamos
la tecla Enter.
Y también ingresamos el puerto del servidor local MYSQL en este caso es 3306 y
presionamos la tecla Enter.
118
Y por último pide certificado SSL lo dejamos vacío sin escribir nada y presionamos la
tecla Enter.
Y listo en la parte inferior izquierda nos aparecerá la conexión realizada exitosamente.
119
Si damos clic en localhost se desplegará todas las bases de datos que tenemos en la
cual se observa la base de datos creada y restaurada anteriormente reinaamaguanadb.
Si damos clic en la base de datos reinaamaguanadb se desplegará todas las tablas
que contiene nuestra base de datos.
120
ANEXO D
MANUAL DE EJECUCIÓN DEL CODIGO FUENTE
UBICANDO EL PROYECTO DENTRO DE XAMPP
Para realizar la ejecución del código fuente como primer paso nos dirigimos a la
siguiente ruta C:\xampp\htdocs luego seleccionamos todos los documentos, clic
derecho y seleccionamos la opción Eliminar.
Luego nos dirigimos a la siguiente ruta C:\SONRIE AMAGUANA\PROGRAMA
EJECUTABLE\app, luego seleccionamos todos los archivos existentes damos clic
derecho y seleccionamos la opción copiar.
121
A continuación, nos dirigimos a la siguiente ruta C:\xampp\htdocs hacemos clic
derecho y seleccionamos la opción Pegar.
Esperamos unos minutos y se podrá observar que los archivos ya se encuentran
pegados en la ruta correcta de xampp.
122
ABRIR EL PROYECTO EN VISUAL STUDIO CODE
Abrimos Visual Studio Code, nos vamos a la pestaña →File, luego a →Open Folder y
damos clic.
Buscamos y seleccionamos la carpeta htdocs que se encuentra en la ruta C:\xampp y
damos clic en “Seleccionar carpeta” lo cual nos abrirá el proyecto.
123
Nos mostrará el proyecto y toda su estructura
124
INGRESO A LA APLICACIÓN WEB
Importante: Antes de empezar con la ejecución de la aplicación, se debe asegurar que
en xampp esten activos los servicios de Apache y MySQL como se muestra en la
siguiente imagen.
Abrimos el navegador Microsoft Edge ingresamos en la barra de direcciones la siguiente
url: http://localhost/web y presionamos la tecla Enter.
Se abrirá el sitio web donde se encuentra ya la aplicación lista para ser navegada.
125
Para verificar el funcionamiento del sistema ingresaremos como usuario Administrador
para lo cual nos ubicamos al final del sitio web desplazándonos con la barra de la
derecha damos clic en el siguiente icono .
Inmediatamente aparecerá la siguiente pantalla Login.
126
127
ANEXO E
MANUAL DE EJECUCIÓN DEL CODIGO EJECUTABLE
EJECUCIÓN DEL SITIO WEB REINA DE AMAGUAÑA
Debido a que el proyecto web se encuentra alojado en el proveedor de dominio
GoDaddy para realizar la ejecución del sitio web se debe realizar los siguientes pasos:
1. Ingresar a cualquier navegador de su preferencia en nuestro caso Microsoft
Edge ingresamos en la barra de direcciones la siguiente url:
www.sonrieamaguana.com y presionamos la tecla Enter.
2. Inmediatamente se puede visualizar la primera pantalla del sitio web.
128
Para verificar el funcionamiento del sistema ingresaremos como usuario Administrador
para lo cual nos ubicamos al final del sitio web desplazándonos con la barra de la
derecha damos clic en el siguiente icono .
129
Inmediatamente aparecerá la siguiente pantalla Login.
Al alojarse el proyecto en un servidor web el sitio se encontrará disponible las 24 horas
del día los 365 días del año.
130
ANEXO F
CARTA DE ACEPTACIÓN
Quito, DM. 13 de febrero de 2018
CERTIFICADO
A través de la presente, ANA BELÉN MORALES LÓPEZ REINA DE LA PARROQUIA
RURAL DE AMAGUAÑA certifica que la señorita estudiante de la carrera de
INGENIERÍA INFORMÁTICA de la FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS
Y MATEMÁTICA de la Universidad Central del Ecuador:
Ana Gabriela Oyasa Sepa portadora de la cédula de identidad: 1720168952
Realizó su proyecto integrador para nuestra entidad titulado: “Creación de canales
informativos para la gestión de fundaciones rurales del Distrito Metropolitano de Quito,
caso Amaguaña” y producto de ello se ha recibido lo siguiente:
1. IMPLEMENTACIÓN DEL PORTAL WEB www.sonrieamaguana.com
2. CAPACITACIÓN SOBRE EL FUNCIONAMIENTO DEL PORTAL.
Cabe destacar que ambas acciones se realizaron con éxito, el portal web funciona
correctamente y por lo tanto se agradece el trabajo realizado por la estudiante pues será
de beneficio para toda nuestra comunidad.
Ana Belén Morales López
REINA DE LA PARROQUIA RURAL DE AMAGUAÑA
131