Documento Residencia Mas Que Pura

SECRETARÍA DE EDUCACIÓN PÚBLICA
TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE MÉRIDA
“PLANTA PURIFICADORA MÁS QUE PURA”
PROYECTO:
“Desarrollo de un Sistema Web para el control de

pedidos de agua purificada”
PRESENTA:
BR. CEH POOL FELIX JESUS
BR. GUTIÉRREZ VIDAL RANDY

GERARDO
BR. ESTRELLA TOLOZA JASON

MICHELLE
PERÍODO:
DEL 31 DE ENERO AL 18 DE JUNIO DE

2022
MÉRIDA, YUCATÁN, MÉXICO 2022.
ÍNDICE DE CONTENIDO
1.1 Antecedentes........................................................................................................ 4
1.2 Planteamiento del problema...............................................................................4
1.3 Propuesta de solución......................................................................................... 4
1.4 Objetivos............................................................................................................... 5
1.4.1 Objetivo General........................................................................................... 5
1.4.2 Objetivos Específicos...................................................................................6
1.5 Justificación......................................................................................................... 6
1.6 Delimitaciones...................................................................................................... 8
1.6.1 Alcances....................................................................................................... 8
1.6.2 Limitaciones.................................................................................................. 8
CAPITULO II. MARCO TEORICO...............................................................................9
2.2. Ingeniera de Software....................................................................................... 11
2.2.1 UML............................................................................................................ 11
2.3. Herramientas Utilizadas.................................................................................... 16
2.3.1 Visual Studio Code................................................................................... 16
2.3.2. HTML5...................................................................................................... 16
2.3.3. CSS........................................................................................................... 17
2.3.4. Java Script................................................................................................ 17
2.3.5. PHP........................................................................................................... 17
2.3.6 MySQL....................................................................................................... 18
2.3.7 XAMPP....................................................................................................... 18
2.3.8 Bootstrap................................................................................................... 19
2.3.9 Adobe Xd................................................................................................... 20
2.4 Estado del Arte................................................................................................... 20
2.4.1 Empresa AGUA LUVI................................................................................20

2.4.2 Empresa CERVECERÍA DE COLIMA.......................................................21
CAPITULO III............................................................................................................. 23
DESARROLLO.......................................................................................................... 23
3.1 Planificación................................................................................................. 23
3.2 Desarrollo..................................................................................................... 24
3.3 Revisión........................................................................................................ 41
3.4 Retroalimentación........................................................................................ 43
3.5 Lanzamiento................................................................................................. 44
CAPITULO IV............................................................................................................. 57
CONCLUSIONES...................................................................................................... 57
4.1 Recomendaciones.............................................................................................. 58
1.1 Firmas
1.2 Referencias
1.1 Antecedentes
El 19 de junio del 2019, la química Diana Cervera Fuentes, fundó la empresa “Mas
que Pura” la cual se ubica en la calle 69 Carretera Dzityá; la empresa se dedica a la
venta de aguas embotelladas para empresas privadas, e instituciones públicas y
privadas.
Actualmente, cuenta con 18 empleados laborando en la empresa; gracias al

excelente equipo que conforma la empresa, es una de las purificadoras con mejor
posicionamiento en el estado de Yucatán.
La empresa cuenta con el área de Sistemas, Investigación, Marketing, Logística y

Finanzas. Actualmente, Mas Que Pura tiene como clientes a las empresas más
importantes de la región. El producto más vendido son las botellas de 600 ml de agua
con las etiquetas personalizadas con los logos de las empresas que los soliciten. El
segundo producto más vendido son los galones de agua de 10 y 20 litros que son únicos
en el mercado.
Como empresa socialmente responsable, apoyan a fundaciones, actividades

altruistas y becas a estudiantes.
1.2 Planteamiento del problema
Actualmente la empresa cuenta con un Software de Sistema de Punto de

Venta e Inventarios, que realiza las siguientes actividades: implementación de
una base de datos para facilitar la gestión del producto y cuentas y así llevar un
control eficaz de la información generada en esta operación que es la entrada y
salida de aguas embotelladas [3]. Dicho Software no cuenta con una interfaz tan
amigable del administrador, ya que su única función es llevar un control de
inventarios de los productos de entradas y salidas, pero también hay un punto
importante en el cual el cliente solo puede realizar su pedido acudiendo
personalmente a las instalaciones de la empresa o vía telefónica, de igual
manera, cuando se realiza una venta, el cliente no recibe una nota de remisión
de su pedido. La problemática que tiene la purificadora es que todos los
registros de los proveedores y clientes están anotados en una agenda realizada
manualmente. Eso ha provocado que pierdan los números o que por descaste
de las hojas se vean borrosos los números, nombre y dirección de los
proveedores y clientes. Para poder recuperar los datos han sido un gran
problema, por ello se necesita un software de base de datos para realizar los
datos de los proveedores y clientes para la empresa más que pura.
1.3 Propuesta de solución
Implementar un sistema de control web a través de la programación web:

HTML (por sus siglas en inglés, HyperText Markup Language), CSS (por sus
siglas en inglés, Cascading Style Sheets), JS (del acrónimo, Java Script), PHP
(del acrónimo, HyperText Pre-Processo), SQL (por sus siglas en inglés,
Structure Query Language) y Bootstrap. Se implementará en computadora; para
llevar un mejor control de los pedidos. Cada cliente al momento de acceder al
Sistema Web visualizará las diferentes secciones: El Registro, donde podrá
registrarse con su Nombre, Dirección y No. de teléfono, el Catálogo de los
productos, donde podrá elegir los diferentes tamaños de recipiente de agua,
costos tanto para el mayoreo como el menudeo, donde al seleccionar el
4
producto, le redirija a un formulario, para realizar el pedido con las
especificaciones personalizadas (etiqueta, logotipo). Para finalizar, ya una vez
hecho todo el registro del pedido, se le dará clic al botón “Descargar
Comprobante”, donde el cliente obtendrá su nota de remisión del pedido. Del
lado del administrador ingresará al Sistema Web, logueandose con su usuario y
contraseña. Al acceder tendrá las secciones de: Pedidos, donde podrá visualizar
una tabla que contendrá todos los pedidos en el orden que se van registrando,
también podrá eliminar o modificar el pedido (si el cliente decide realizar algún
cambio), podrá descargar toda la información de cada pedido en formato PDF
(por sus siglas en inglés, Portable Document Format), tendrá acceso a la
sección del Catálogo de los Productos, donde podrá modificar los precios y las
imágenes. Tendrá acceso a la sección de Ventas, donde observará el historial
de las ventas realizadas por semana, eliminar ventas que el cliente cancelará,
por último, la sección de Clientes, donde visualizará a manera de tabla a todos
los clientes que ya se han registrado en el Sistema, además podrá modificar los
datos de cada uno e inclusive eliminar el registro de alguno.
La empresa podrá buscar en la base de datos, información como nombre
de la empresa, dirección, teléfono, nombre del proveedor, correo electrónico y
los precios que le salen cada producto que se lo venden cada proveedor. En
caso de los clientes serán los mismos datos y el precio que se les deja por
unidad y cada cuanto solicitan las botellas de agua y garrafones.
De igual manera, el sistema se adaptará a dispositivos móviles para que los
usuarios puedan realizar su pedido de una forma más amigable.
1.4 Objetivos
1.4.1 Objetivo General
Desarrollar un sistema web para el control de los pedidos y las ventas para la
empresa Más Que Pura, con el fin de facilitar a los clientes, la compra del producto,
haciendo más sofisticada y rápida la orden, teniendo un mejor control de los pedidos
por parte del administrador de la empresa.
5
1.4.2 Objetivos Específicos
 Realizar las entrevistas con el cliente (Félix, Randy y Jason).

 Analizar la información recabada (Félix, Randy y Jason).
 Recaudar los requerimientos del Sistema Web (Félix, Randy y Jason).

 Realizar las maquetaciones correspondientes de cada módulo con sus respectivas
secciones del Sistema Web (Félix).
 Recopilar de la información para la base de datos (Randy).
 Diseñar la base de datos de acuerdo con los requerimientos (Jason).
 Diseñar cada módulo del Sistema Web (Randy).
 Diseñar y desarrollar la parte del administrador y los clientes (Félix y
Randy).
 Desarrollar el Sistema Web mediante el lenguaje de programación Web (Félix y
Randy).
 Desarrollar una base de datos para gestionar toda la información de
los pedidos del cliente y proveedores (Jason).
 Realizar pruebas al sistema (Félix, Randy y Jason).
 Implantar el Sistema Web (Félix, Randy y Jason).
 Capacitar al personal autorizado que utilizará el Sistema Web (Félix,

Randy y Jason).
1.5 Justificación
El proyecto surge por la necesidad de llevar a cabo un mejor control para el

manejo de los pedidos para la empresa, ya que cada vez son más los clientes
nuevos, ocasionando un crecimiento empresarial, ya que el software con el que
cuentan actualmente no cuenta con interfaces amigables, y las únicas funciones son
gestionar un control de inventario de los productos que hay en la bodega.
La empresa busca innovar su servicio con el uso de las nuevas tecnologías.
Al implementar este sistema para la empresa, los clientes podrán ingresar de
6
manera sencilla al Sistema Web donde ahí mismo podrán realizar su pedido, con las
especificaciones que el cliente desee, ver el catálogo y los costos del producto; y a
su vez el administrador podrá ingresar al Sistema Web como Admin, para poder
monitorear todos los pedidos (con las especificaciones que el cliente haya dado) y
tener un control de la información de los proveedores.
La justificación tecnológica es que facilitara al usuario en el manejo de la información de

los proveedores y clientes. Gracias al software tendrán toda la información en un dispositivo (pc
o laptop) para agilizar en la búsqueda y en el control de los proveedores y clientes de la
purificadora.
Al manejar el software y la base de datos, podrá llevar un control de los proveedores y

clientes así la empresa, tendrán un mejor manejo ordenado de los costos de cada proveedor,
los datos como número telefónico, nombre de la empresa o del proveedor, correo electrónico y
dirección. En caso de los clientes tendrán los mismos datos y adicionalmente tendrá cuantas
botellas y garrafones le venden al mes a cada uno de los clientes.
7
1.6 Delimitaciones
1.6.1 Alcances
 El sistema desplegará a los clientes en tiempo real las diferentes presentaciones

del producto.
 El sistema podrá registrar a cada cliente.
 El sistema permitirá el registro de los pedidos del cliente.
 El sistema conocerá los pedidos realizados durante el día.
 El sistema podrá facturar las notas de remisión del cliente.
 El administrador podrá modificar o cancelar algún pedido.
 El sistema podrá llevar un historial de ventas por semana.
 El sistema a nivel administrador podrá modificar precios y productos.
 Facilitar la información de los costos de los proveedores.
 Se facilitará la base de datos para mejorar la información de tener en libreta a un
software.
1.6.2 Limitaciones
 El Sistema Web no contará con la certificación SSL para mayor seguridad.

 No hay la disponibilidad por parte de la empresa para las sesiones.
 Solo es compatible con el Sistema Operativo Windows y Android.
 Falta de presupuesto por parte de la empresa.
 Recolecta de información con el área administrativa.
8
CAPITULO II. MARCO TEORICO
Este capítulo presenta los conceptos teóricos sobre los cuales se fundamenta este
proyecto. De igual manera se presenta la metodología que se utilizó para el desarrollo
de este, así como las herramientas utilizadas y el estado del arte.
9
2.1. Sistemas Web
Se denomina sistema web a aquellas aplicaciones de software que puede utilizarse accediendo a
un servidor web a través de Internet o de una intranet mediante un navegador.
Figura 1:Sistema Web
Ventajas de las aplicaciones web:
 Sólo es necesario usar un ordenador con un navegador web y conectarse a Internet. Las
aplicaciones basadas en web usan menos recursos que los programas instalados.
 Las aplicaciones web son muy sencillas de utilizar, sólo necesitará conocimientos básicos
de informática para trabajar con ellas.
 Las aplicaciones web pueden ser usadas por varios usuarios al mismo tiempo. Al estar toda
la información centralizada no tendrá que compartir pantallas o enviar emails con
documentos adjuntos. Varios usuarios pueden ver y editar el mismo documento de manera
conjunta.
Las aplicaciones web son muy usadas hoy en día, debido a lo práctico del navegador web como
cliente ligero, y el poco consumo de recursos que este genera a diferencia de una aplicación de
escritorio [Víctor:2016].
10
2.2. Ingeniera de Software
La Ingeniería del Software es una disciplina o área de la Informática o Ciencias de la
Computación, que ofrece métodos y técnicas para desarrollar y mantener software de calidad que
resuelven problemas de todo tipo. Hoy día es cada vez más frecuente la consideración de la
Ingeniería del Software como una nueva área de la ingeniería, y el ingeniero del software
comienza a ser una profesión implantada en el mundo laboral internacional, con derechos,
deberes y responsabilidades que cumplir, junto a una, ya, reconocida consideración social en el
mundo empresarial y, por suerte, para esas personas con brillante futuro. Consiste con áreas muy
diversas de la Informática y de las ciencias de la computación, tales como construcción de
compiladores, sistemas operativos o desarrollos de Intranet/Internet, abordando todas las fases
del ciclo de vida del desarrollo de cualquier tipo de sistemas de información y aplicables a una
infinidad de áreas tales como: negocios, investigación científica, medicina, producción, logística,
banca, control de tráfico, meteorología, el mundo del derecho, la red de redes Internet, redes
Intranet y Extranet, entre otros [Pressman:2005].
2.2.1 UML
El Lenguaje Unificado de Modelado (UML) desempeña un rol importante no solo en el
desarrollo de software, sino también en los sistemas que no tienen software en muchas
industrias, ya que es una forma de mostrar visualmente el comportamiento y la estructura de
un sistema o proceso. el UML ayuda a mostrar errores potenciales en las estructuras de
aplicaciones, el comportamiento del sistema y otros procesos empresariales [1].
Ventajas del UML:

 Simplifica las complejidades
 Mantiene abiertas las líneas de comunicación
 Automatiza la producción de software y los procesos
 Ayuda a resolver los problemas arquitectónicos constantes
 Aumenta la calidad del trabajo
 Reduce los costos y el tiempo de comercialización
11
2.2.1.1 Diagrama de casos de uso
Este describe lo que un sistema hace las cosas, pero no la forma en que las hace. Un caso de uso
es un conjunto de eventos que ocurren cuando un “actor” usa un sistema para completar un
proceso. Un actor se define como cualquier persona o cualquier cosa que interactúa con el
sistema (persona, organización o aplicación) desde fuera del sistema. Por lo tanto, un diagrama de
casos de uso describe visualmente ese conjunto de secuencias y representa los requisitos
funcionales del sistema [1].
Figura 2:Ejemplo Diagrama de Caso de Uso
2.2.1.2 Diagrama de Actividades

Este representa un proceso paso a paso con un inicio y final claros. Es un conjunto de actividades
que deben realizarse para lograr un objetivo. Muestra cómo cada actividad conduce a la siguiente
y cómo todas estas se conectan. Además del desarrollo de software, estas se pueden utilizar en
casi cualquier entorno empresarial. También se denominan asignación o modelado de proceso
empresarial [1].
12
Figura 3:Ejemplo Diagrama de Actividades
2.2.2. Metodología Scrum
Permite abordar proyectos complejos desarrollados en entornos dinámicos y cambiantes de un

modo flexible. Está basada en entregas parciales y regulares del producto final en base al valor
que ofrecen a los clientes.
Es un proceso para llevar a cabo un conjunto de tareas de forma regular con el objetivo principal
de trabajar de manera colaborativa, es decir, para fomentar el trabajo en equipo.
Con este método de trabajo lo que se pretende es alcanzar el mejor resultado de un proyecto
determinado. Las prácticas que se aplican con la metodología Scrum se retroalimentan unas con
otras y la integración de las mismas tiene su origen en un estudio de cómo hay que coordinar a los
equipos para ser potencialmente competitivos.
En Scrum se van realizando entregas regulares y parciales del trabajo final, de manera prioritaria y
en función del beneficio que aportan dichas entregas a los receptores del proyecto. Por este
motivo, es una metodología especialmente indicada para proyectos complejos, con requisitos
cambiantes y en los que la innovación y la flexibilidad son protagonistas.
Las principales etapas de este modelo se transforman en actividades fundamentales

de desarrollo las cuales son:
13
1. Planificación
2. Desarrollo
3. Revisión
4. Retroalimentación
5. Lanzamiento
2.2.2.1 Fase de Planificación

En la primera reunión del equipo se definirán aspectos como la funcionalidad,
objetivos, riesgos del sprint, plazos de entrega, entre otros. Posteriormente se realiza
una junta entre el equipo y el jefe del proyecto para explicar cómo se desarrollará
cada punto del intervalo. Aquí se evaluarán cambios, toma de decisiones, mejoras y
más factores [2].
La clave para llevar una buena administración de los proyectos es hacer una
planificación y estimación del sprint, lo que te ayudará a establecer metas fijas y a
cumplir con los plazos.
Tal vez esta sea la fase más importante del proyecto, pues si eres el Master Scrum
tendrás que delegar las tareas correspondientes a cada grupo y hacer las
estimaciones de tiempos de entrega, así como crear una lista ordenada para clasificar
el trabajo según su prioridad.
2.2.2.2. Fase de Desarrollo

A esta fase se le puede conocer como: la sala de reuniones, ya que en este se debate el
sprint y se explora como optimizar el trabajo.
Cuando el trabajo del sprint está en curso, los encargados deben garantizar que no se
generen cambios de último momento que puedan afectar los objetivos del mismo. Además,
14
se asegura el cumplimiento de los plazos establecidos para su término [2].
En la implementación se cumple con los siguientes procesos:
 Crear entregables.
 Realizar daily stand-up.
 Refinanciamiento del backlog priorizado del producto.
En la fase de implementación o desarrollo no deberían hacerse cambios innecesarios de

última hora (se supone que para evitarlo existe una fase de planificación).
2.2.2.3. Fase de Revisión

Al final del desarrollo del intervalo, es posible analizar y evaluar los resultados. Si es
necesario, todo el equipo colaborará para saber qué aspectos necesitan ser cambiados [2].
En esta fase se fomenta la colaboración y retroalimentación entre todos. Se incluyen los

siguientes puntos:
 Colaboración entre equipos, supervisores, jefes y dueños de productos.
 Se admiten análisis externos como forma de complementación.
 El equipo de trabajo responde qué es lo que se ha desarrollado y qué carencias

han tenido.
 En base a ello, se puede regresar a la etapa de planificación para evaluar cómo

mejorar el siguiente sprint.
 La revisión incluye cómo, hasta ahora, el producto podría generar más valor.
 Se analizan las capacidades del equipo, la línea de tiempo, entre otros detalles,
para saber qué potenciar.
15
2.2.2.4. Fase de Retroalimentación
Los resultados pueden ser entregados para recibir un feedback no solo por parte de los
profesionales dentro del proyecto, sino también de las personas que utilizarán directamente lo
que se desea lograr; es decir, los clientes potenciales. Las lecciones aprendidas durante esta
etapa permitirán que el siguiente sprint pueda ser mucho más efectivo y ágil [2].
2.2.2.5. Fase de Lanzamiento
Con esto nos referimos al desenlace del proyecto y entrega del producto, donde deberías cumplir
con 2 únicas tareas que son: enviar entregables y la retrospectiva del proyecto [2].
2.3. Herramientas Utilizadas
En este apartado se presentan las herramientas que se utilizaron para la realización del
proyecto.
2.3.1 Visual Studio Code

Visual Studio Code es un editor de código fuente que permite trabajar con diversos lenguajes de
programación, admite gestionar tus propios atajos de teclado y refactorizar el código. Es gratuito,
de código abierto y nos proporciona una utilidad para descargar y gestionar extensiones con las
que podemos personalizar y potenciar esta herramienta. Las extensiones de Visual Studio Code
nos otorgan infinidad de opciones, como colorear tabulaciones, etiquetas o recomendaciones de
autocompletado. También hay extensiones que nos ayudan con el lenguaje de programación
que vayamos a usar (Python, C / C++, JavaScript) y muchos más lenguajes que pueden
funcionar con esta herramienta [Aitana:2018].
2.3.2. HTML5
HTML, le permite al usuario crear y estructurar secciones, párrafos, encabezados, enlaces y
elementos de cita en bloque (blockquotes) para páginas web y aplicaciones. HTML no es un
lenguaje de programación, lo que significa que no tiene la capacidad de crear una funcionalidad
dinámica. En cambio, hace posible organizar y formatear documentos, de manera similar a
Microsoft Word. 24 Cuando trabajamos con HTML, utilizamos estructuras de código simples
16
(etiquetas y atributos) para marcar una página web. Los documentos HTML son archivos que
terminan con una extensión .html o .htm. Puedes verlos usando cualquier navegador web (como
Google Chrome, Safari o Mozilla Firefox) [Gustavo:2020].
2.3.3. CSS
CSS es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar
elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la
representación visual del sitio. CSS fue desarrollado por W3C (World Wide Web Consortium) en
1996 por una razón muy sencilla. Fue diseñado para darle una mejor vista a la página un diseño,
para una mejor presentación y asignarle colores, sin el CSS las páginas web serian como las
televisiones antiguas a blanco y negro. El CSS maneja etiquetas para tener un mejor control de
los textos e imágenes que se quieran agregar a la página [Gustavo:2019].
2.3.4. Java Script

JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se
define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
25 JavaScript es un lenguaje de programación o de secuencias de comandos que te permite
implementar funciones complejas en páginas web, cada vez que se accede a una página web de
con este tipo de programación, muestra oportunas actualizaciones de contenido, mapas
interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo,
lo más seguro JavaScript está involucrado.
En pocas palabras este lenguaje de programación hace que nuestras páginas web en vez de ser
solo texto en una hoja, la hace más dinámica agregándole las animaciones [developer:2020].
2.3.5. PHP
PHP es un lenguaje para programar scripts del lado del servidor, que se incrustan dentro del
código HTML. Este lenguaje es gratuito y multiplataforma. Fue creado originalmente en 1994 por
Rasmus Lerdorf, pero como PHP está desarrollado en política de código abierto, a lo largo de su
historia ha tenido muchas contribuciones de otros desarrolladores. Actualmente PHP se
encuentra en su versión 4, que utiliza el motor Zend, desarrollado con mayor meditación para
cubrir las necesidades de las aplicaciones web actuales. Este lenguaje de programación está
17
preparado para realizar muchos tipos de aplicaciones web gracias a la extensa librería de
funciones con la que está dotado. La librería de funciones cubre desde cálculos matemáticos
complejos hasta tratamiento de conexiones de red, por poner dos ejemplos. Algunas de las más
importantes capacidades de PHP son: compatibilidad con las bases de datos más comunes,
como MySQL, SQL, Oracle, Informix, y ODBC. Incluye funciones para el envío de correo
electrónico, actualización de archivos, crear dinámicamente en el servidor 26 imágenes en
formato GIF, incluso animadas y una lista interminable de utilidades adicionales [Álvarez:2001].
2.3.6 MySQL
MySQL es un sistema de gestión de bases de datos relacionales de código abierto (RDBMS, por
sus siglas en inglés) con un modelo cliente-servidor. RDBMS es un software o servicio utilizado
para crear y administrar bases de datos basadas en un modelo relacional. Una base de datos es
un lugar en el que los datos son almacenados y organizados. La palabra «relacional» significa
que los datos almacenados en el conjunto de datos son organizados en forma de tablas. Cada
tabla se relaciona de alguna manera. Si el software no es compatible con el modelo de datos
relacionales, simplemente se llama DBMS [Gustavo:2020].
2.3.7 XAMPP
XAMPP es una distribución de Apache que incluye varios softwares libres. El nombre es un

acrónimo compuesto por las iniciales de los programas que lo constituyen: el servidor web
Apache, los sistemas relacionales de administración de bases de datos MySQL y MariaDB, así
como los lenguajes de programación Perl y PHP. La inicial X se usa para representar a los
sistemas operativos Linux, Windows y Mac OS X.
18
 Apache: el servidor web de código abierto es la aplicación más usada globalmente para la
entrega de contenidos web. Las aplicaciones del servidor son ofrecidas como software libre
por la Apache Software Foundation.
 MySQL/MariaDB: con MySQL, XAMPP cuenta con uno de los sistemas relacionales de

gestión de bases de datos más populares del mundo. En combinación con el servidor web
Apache y el lenguaje PHP, MySQL sirve para el almacenamiento de datos para servicios
web. En las versiones actuales de XAMPP esta base de datos se ha sustituido por
MariaDB, una ramificación (“Fork”) del proyecto MySQL.
 PHP: es un lenguaje de programación de código de lado del servidor que permite crear
páginas web o aplicaciones dinámicas. Es independiente de plataforma y soporta varios
sistemas de bases de datos.
 Perl: este lenguaje de programación se usa en la administración del sistema, en el

desarrollo web y en la programación de red. También permite programar aplicaciones web
dinámicas.
Además de estos componentes principales, esta distribución gratuita también incluye, según el
sistema operativo, otras herramientas como el servidor de correo Mercury, el programa de
administración de bases de datos PhpMyAdmin, el software de analítica web OpenSSL, Apache
Tomcat y los servidores FTP FileZilla o ProFTPd.
2.3.8 Bootstrap
Bootstrap es un Framework (librerías CSS) que trabaja y normaliza la mejora de los sitios. A partir
de la variante 3.x se ha llevado a cabo razonando que se ajusta tanto a las pantallas del área de
trabajo como a las versátiles y tabletas. Bootstrap ha sido creado y es mantenido por la
organización Twitter y ha sido entregado como un elemento de Código Abierto. Tiene una forma
de pensar extremadamente instintiva para el formato del sitio que puede ser adquirida
inmediatamente por los ingenieros que no vienen del universo de la arquitectura del sitio web.
19
2.3.9 Adobe Xd
Se trata de un software para crear y compartir interfaces para webs y apps, con el foco puesto en
la experiencia de usuario. Y, también, para compartir prototipos y así poder contar con feedback
sobre el uso real del producto. En la práctica, es una potente herramienta para crear diseños
adaptados a cada dispositivo, trabajarlos en equipo y ser ágiles en el día a día [14].
2.4 Estado del Arte
En este apartado se presentan los trabajos realizados por distintas compañías que tienen un giro
similar a la empresa Más Que Pura.
2.4.1 Empresa AGUA LUVI
La empresa Agua Luvi se dedica a la venta de servicio y a la distribución de agua purificada de

calidad. Su software tiene como función principal el facilitarles a sus clientes el poder realizar sus
pedidos mediante la página web, también muestran sus productos que manejan y explican el
proceso de la purificación de sus productos [15].
Características principales:
Acerca de nosotros: se puede observar su misión, visión, filosofía y valore, así como su equipo de
colaboradores.
Productos: sección de la variedad de productos que manejan.
Proceso de purificación: se explica el proceso de purificación a manera de texto y con una

ilustración a manera de diagrama.
Pedido en línea: formulario con los datos requeridos para poder realizar adecuadamente el pedido
de sus productos.
20
Figura 4:Página Web Agua Luvi
2.4.2 Empresa CERVECERÍA DE COLIMA

Es una empresa que se dedica a la fabricación y elaboración de cerveza sencilla, que mediante su
página web se encarga de dar a conocer la gran variedad de sus productos y hacer que lleguen
hasta la puerta de sus clientes y que la disfruten. Muestran ser una empresa socialmente
responsable con el medio ambiente [16].
Características principales:
Productos: como primera sección y como más importante muestran la gran variedad de productos
que manejan, así como sus diferentes presentaciones.
Club Colima: manejan una suscripción a la empresa, donde se obtiene una membresía que dota
de beneficios a sus clientes.
Nosotros: es el apartado donde explican sus orígenes, objetivos, personal.
Contacto: se llena el debido formulario para poder crear una cuenta y así poder realizar de manera
correcta y rápida los pedidos de sus productos.
Carrito: manejan su bolsa de compra, donde los clientes podrán inspeccionar los productos
disponibles y a su vez ir añadiéndolos al carrito para poder realizar el pedido.
21
Figura 5:Página Web Colima
22
CAPITULO III.
DESARROLLO
En este capítulo se describe el desarrollo del sistema web de cursos según la metodología de
desarrollo de software Scrum; esta metodología está basada en entregas parciales y regulares del
producto final en base al valor que se ofrecen a los clientes.
3.1 Planificación
En esta fase se analizó la situación actual en la empresa Más que Pura, con el propósito de
determinar los requerimientos y necesidades que se requerían para el desarrollo del Sistema Web.
Aquí se definieron aspectos como la funcionalidad, los objetivos, fechas de entrega de cada
avance, los riesgos que podría haber durante el sprint. Los requerimientos y las necesidades se
obtuvieron mediante un conjunto de cuestionarios que se enunciaron y se respondieron durante
esta etapa, las cuales toda la información recabada constituye la base para el desarrollo del
sistema web:
23
¿Cuál fue la motivación principal para un sistema web?
Con el avance tecnológico se permite el desarrollo de herramientas para obtener una mejor
eficiencia y confiabilidad para el manejo de las empresas. Este sistema web permite a la empresa
llevar un control de los pedidos y las ventas. De igual manera con la finalidad de facilitar a los
clientes la compra del producto.
¿Qué objetivos debe satisfacer el sistema web?

Desarrollar un sistema web que permita al cliente poder crear una cuenta y así poder ingresar al
sitio web para conocer los productos y las presentaciones que se manejan, realizar pedidos del
mismo y conocer más acerca de la empresa Más que Pura. El administrador podrá ingresar con su
usuario y contraseña, llevando el control del registro de los clientes, sus pedidos, las ventas que
se han realizado y un mejor manejo de los proveedores.
¿Quiénes podrán acceder al sistema web?

Podrán unirse al sistema web únicamente aquellos clientes que previamente hayan completado su
registro como usuarios del sitio, esto para una mayor facilidad al momento de realizar un pedido, y
el administrador, que mediante su usuario y contraseña podrá tener el acceso y tener todos los
privilegios.
¿Qué riesgos podrían tener al momento de implementar este proyecto?

Este sistema web no tendrá la certificación SSL, que ayuda para evitar hackeos, por lo que la hace
vulnerable. Otro riesgo que se corre es que no todos los dispositivos siguen todos los estándares
establecidos por la W3C, se podría llegar a un punto donde el diseño se vea afectado, teniendo
una variación en los colores y formas. Por último, podría tener variaciones según el navegador que
se use, así como la versión.
3.2 Desarrollo
En esta fase desarrollaremos todo lo entregable que se definió en la planificación, es una de las
fases más importantes para el equipo de trabajo.
24
3.2.1 Diagrama de Casos de Uso
En las siguientes imágenes se presenta el Diagrama de Casos de uso, que representa todas las
acciones que el administrador y cliente puede realizar dentro del sistema web. Esto permitió tener
una visión amplia sobre los objetos de contenido con los que el usuario trabajará.
Figura 6:Diagrama de Caso de Uso Administrador
25
Figura 7:Diagrama de Caso de Uso Usuario
3.2.2 Descripción de Caso de Uso
En este apartado se presenta las descripciones de caso de uso de cada una de las funciones
plasmadas en la sección anterior.
Tabla 1:Descripción de Caso de Uso "Iniciar Sesión"
Caso de uso: Iniciar Sesión
Actores: Administrador
Propósito: Iniciar sesión en el sistema.
Resumen: El sistema le permitirá al administrador

ingresar y navegar por todos los módulos.
Tipo: Primario.
Curso normal de los eventos
Acción del actor Respuesta del sistema
1. El administrador ingresa al sitio web.
2. El administrador da clic en la opción de 3. El sistema le despliega la interfaz con el
26
Iniciar Sesión. formulario de inicio de sesión.
4. El administrador captura los datos.
5. El administrador da clic al botón de Entrar. 6. El sistema verifica los datos.
7. El sistema valida los datos.
8. El sistema despliega la interfaz con todos
los módulos del administrador.
9. Este caso de uso finaliza cuando el
administrador ha ingresado al sistema.
Cursos alternos
Paso 4 Los datos son incorrectos. El sistema
muestra mensaje en pantalla.
Tabla 2:Descripción de Caso de Uso "Agregar grupo"
Caso de uso: Agregar grupo
Propósito: Dar de alta un nuevo grupo al sistema.

agregar un nuevo grupo, con su nuevo
nombre, nivel y estado.
Tipo: Primario.
1. <<INCLUDE>>: Iniciar sesión
2. El administrador selecciona la opción de 3. El sistema despliega una barra con dos
Accesorios. opciones a elegir.
4. El administrador selecciona la opción de 5. El sistema despliega la interfaz dónde se
Administrar grupos. muestra la tabla con los grupos existentes.
6. El administrador selecciona el botón 7. El sistema despliega el formulario para
AGREGAR GRUPO. ingresar los datos.
8. El administrador captura los datos
solicitados.
9. El administrador da clic en el botón 10. El sistema lee los datos capturados.
Guardar.
12. El sistema guarda los datos.
13. El sistema confirma el registro.
administrador ha registrado un nuevo grupo.
27
Cursos alternos
Paso 8 Los datos son incompletos. El sistema
Tabla 3:Descripción de Caso de Uso "Agregar Usuario"
Caso de uso: Agregar usuario
Propósito: Dar de alta un nuevo usuario

agregar un nuevo usuario, con su nombre de
usuario y contraseña.
Tipo: Primario.
4. El administrador selecciona la opción de 5. El sistema despliega la interfaz dónde se
Administrador de usuarios. muestra la tabla con los usuarios existentes.
6. El administrador selecciona el botón 7. El sistema despliega el formulario para
AGREGAR USUARIO. ingresar los datos.
solicitados.
Guardar.
administrador ha registrado un nuevo
usuario.
Cursos alternos
28
Tabla 4:Descripción de Caso de Uso "Agregar categoría"
Caso de uso: Agregar categoría
Propósito: Crear una nueva categoría.

añadir una nueva categoría.
Tipo: Primario.
2. El administrador selecciona la opción de 3. El sistema despliega la interfaz para
Categorías. agregar y el listado de categorías existentes.
4. El administrador llena el campo con el
nombre de la nueva categoría.
Agregar categoría.
administrador ha registrado una nueva
categoría.
Cursos alternos
Paso 4 El campo no es llenado. El sistema muestra
mensaje en pantalla.
Tabla 5:Descripción de Caso de Uso "Agregar producto"
Caso de uso: Agregar producto
Propósito: Añadir un nuevo producto

agregar un nuevo producto al catálogo.
Tipo: Primario.
29
Productos. opciones a elegir.
4. El administrador selecciona la opción de 5. El sistema despliega el formulario.
Agregar productos.
solicitados.
7. El administrador selecciona la categoría.
8. El administrador selecciona la imagen.
Agregar producto.
administrador ha registrado un nuevo
producto.
Cursos alternos
Paso 7 y 8 No fue seleccionada ninguna opción. El
sistema muestra mensaje en pantalla.
Tabla 6:Descripción de Caso de Uso "Subir Imagen"
Caso de uso: Subir imagen
Propósito: Subir una nueva imagen

cargar una nueva imagen para el catálogo de
productos.
Tipo: Primario.
2. El administrador selecciona la opción de 3. El sistema despliega la interfaz con las
Medios de comunicación. imágenes actuales.
30
4. El administrador selecciona la barra color 5. El sistema despliega la ventana con las
azul. carpetas de nuestro ordenador.
6. El administrador selecciona la imagen que
desea subir.
7. El administrador da clic en el botón Abrir. 8. El sistema lee la información elegida.
9. El administrador da clic en el botón Subir. 10. El sistema valida la información obtenida.
13. El sistema despliega en la interfaz la
nueva imagen agregada.
administrador ha subido una nueva imagen
al sistema.
Cursos alternos
Paso 9 No se ha seleccionado ningún archivo para
subir. El sistema despliega un mensaje en
pantalla.
Tabla 7:Descripción de Caso de Uso "Editar Usuario"
Caso de uso: Editar usuario
Propósito: Editar la información de un usuario.
Resumen: El sistema le permitirá al administrador editar

la información de un usuario, así como la
contraseña.
Tipo: Primario.
4. El administrador selecciona la opción de 5. El sistema despliega la interfaz con la
Administrador de usuarios. tabla donde se muestran los usuarios ya
existentes.
6. El administrador selecciona el icono del 7. El sistema despliega la interfaz con el
lápiz amarillo del usuario que desea editar. formulario.
8. El administrador captura los nuevos datos.
31
9. El administrador da clic en el botón 10. El sistema lee la información elegida.
Actualizar.
11. El sistema valida la información obtenida.
administrador ha subido una nueva imagen
al sistema.
Cursos alternos
Paso 8 No se han llenado todos los campos. El
sistema despliega un mensaje en pantalla.
Tabla 8:Descripción de Caso de Uso "Eliminar producto"
Caso de uso: Eliminar producto
Propósito: Eliminar un producto

eliminar un producto del catálogo.
Tipo: Primario.
Productos. opciones a elegir.
4. El administrador selecciona la opción de 5. El sistema despliega la interfaz con la
Administrar productos. tabla donde se muestran los productos ya
existentes.
6. El administrador selecciona el icono del 7. El sistema elimina el producto
bote de basura de color rojo que desea
eliminar.
13. El sistema confirma la eliminación.
administrador ha eliminado el producto.
Cursos alternos
32
Tabla 9:Descripción de Caso de Uso "Comprar producto"
Caso de uso: Comprar producto
Actores: Usuario
Propósito: Comprar un producto del catálogo.
Resumen: El sistema le permitirá al usuario comprar

uno o varios productos del catálogo.
Tipo: Primario.
2. El usuario selecciona la opción de 3. El sistema despliega la interfaz con el
Productos. catálogo de todos los productos disponibles.
4. El usuario selecciona el producto que
desea ordenar.
5. El usuario da clic en el botón de Pedir 6. El sistema despliega la interfaz con el
formulario.
7. El usuario llena los campos con la 8. El sistema valida los datos.
cantidad del producto que desea ordenar.
9. El sistema confirma el pedido.
10. El sistema despliega nota de remisión.
11. El usuario da clic en el botón Descargar
nota.
usuario ha realizado su compra.
Cursos alternos
7 Faltan campos por llenar. El sistema
despliega un mensaje en pantalla.
3.2.3 Diagramas de actividades
A continuación, se presentarán los diagramas de actividades, lo cual describen el proceso o flujo

de acciones de las descripciones de casos de uso presentados anteriormente.
33
Figura 8:Diagrama de Actividades "Caso de uso Iniciar Sesión"
34
Figura 9:Diagrama de Actividades "Caso de Uso Agregar grupo"
35
Figura 10:Diagrama de Actividades "Caso de Uso Agregar usuario"
36
Figura 11:Diagrama de Actividades "Caso de Uso Agregar producto"
37
Figura 12:Diagrama de Actividades "Caso de Uso Editar usuario"
38
Figura 13:Diagrama de Actividades "Caso de Uso Eliminar producto"
39
Figura 14:Diagrama de Actividades "Caso de Uso Comprar producto”
40
3.3 Revisión
En esta fase, le presentamos al representante de la empresa Más que Pura los avances y
resultados obtenidos del Sprint, y si es necesario se le realizan adaptaciones o cambios según lo
presentado.
A continuación, se muestra el avance del primer sprint presentado. Se puede observar cómo
estábamos maquetando el sitio mediante la herramienta Adobe XD, para que posteriormente
comencemos con la programación.
En la figura 13 podemos observar cómo había quedado el maquetado de la sección de Home con
los colores y diseño como se nos había pedido.
Figura 15:Home Primer Sprint
41
En la figura 14 se puede observar la continuación de la sección Home, donde se colocarían los
productos que se podrán fabricar, así como las redes sociales de la compañía.
Figura 16:Continuación Home primer sprint
En la figura 15 se puede observar el maquetado del módulo para que un usuario pueda registrase
colocando los datos solicitados.
Figura 17:Registro de usuario
42
3.4 Retroalimentación
En esta fase entregamos los resultados de los sprint mostrados en la fase anterior que fue la de
revisión para poder obtener un feedback por parte de las personas que utilizarán directamente lo
que deseamos lograr, es decir, los clientes potenciales. Esto nos ayudará a que el siguiente sprint
sea más efectivo y ágil.
En las figuras 16 y 17 se muestra como ha quedado los resultados ya realizados de manera

codificada y siguiendo el maquetado realizado con anterioridad. Posteriormente se le realizarían
unos cambios solicitados por los clientes potenciales.
Figura 18:Home Codificado
Figura 19:Inicio de Sesión
43
3.5 Lanzamiento
En esta última fase nos referimos a los entregables, al producto ya finalizado en su totalidad y listo
para entregarlo a los representantes de la empresa Más que Pura.
3.5.1 Interfaces
En las siguientes imágenes (de la figura 20 a la 23) se puede observar toda la interfaz de la página
web de la empresa, donde el administrador o el usuario podrá acceder a la información a cerca de la
compañía así como a la ventana para el inicio de sesión.
Figura 20: Página web, Inicio de Sesión
44
Figura 21:Misión y Visión
Figura 22:Estrategia y Marketing
45
Figura 23:Productos
En la figura 24 se muestra la ventana de Inicio de Sesión, donde el Administrador o Usuario

podrán ingresar al Sistema Web mediante su nombre de usuario y contraseña.
Figura 24:Inicio de Sesión
En la figura 25 se puede observar la interfaz del sistema web con todos los módulos disponibles
para el administrador.
46
Figura 25:Interfaz del sistema web
En la figura 26 se muestra la primera sección del sistema web que tiene de nombre Panel de
control, que su función es para tener un control de la cantidad de usuarios que tenemos
registrados, al igual que el número de categorías, productos y ventas con los que se cuenta
actualmente.
Figura 26:Panel de control
47
En la figura 27 se muestra el segundo módulo, que tiene por nombre Accesorios, que a su vez
tiene dos secciones, aquí ilustramos la primera sección que se llama Administrar grupos. Su
función es poder tener un control de todos los grupos con los que se cuenta, también podemos ver
el estado, editar, eliminar o agregar un nuevo grupo.
Figura 27:Administrar Grupos
En la figura 28 se muestra el formulario para crear un nuevo grupo.
Figura 28:Agregar grupo
48
En la figura 29 se muestra el módulo de la sección de Administrador de usuarios. Su función es
llevar un control de los usuarios que tenemos registrados actualmente, todo mediante una tabla,
donde nos muestra el nombre completo de la persona, el nombre de usuario, su rol, su estado, su
último inicio de sesión, las acciones que podemos realizar para cada usuario, que es editar o
eliminar y también se cuenta con la opción de agregar un nuevo usuario.
Figura 29:Administrador de usuarios
En la figura 30 se muestra el formulario para poder crear un nuevo usuario, donde se tendrá que
llenar los campos solicitados con la información del usuario.
Figura 30:Agregar usuario

49
En la figura 31 se muestra el formulario cuando deseamos editar la información de algún usuario,
donde podemos cambiarle el nombre, nombre de usuario, el rol, el estado e inclusive la
contraseña.
Figura 31:Editar usuario
En la figura 32 se muestra la sección de Categorías, donde podremos agregar una nueva

categoría, ver en la tabla las categorías existentes, así como editar o eliminar alguna.
Figura 32:Sección Categorías
50
En la figura 33 se observa el módulo de Productos, donde se encuentran dos secciones, la de
Administrar productos y Agregar productos, donde el administrador podrá ver el inventario con los
productos, también podrá editar, eliminar y agregar un nuevo producto.
Figura 33:Administrar Productos
En la figura 34 se observa el formulario para añadir un nuevo producto, donde pondremos la

descripción, seleccionaremos la imagen, la categoría, la cantidad, el precio de compra y el precio
de venta.
Figura 34:Agregar producto
51
En la figura 35 se muestra la sección de Medios de comunicación, donde el administrador podrá
observar la galería con las imágenes para los productos. También podrá cargar una nueva imagen
o eliminar alguna ya existente.
Figura 35:Lista de Imágenes
En la figura 36 podremos observar la sección de Ventas, donde se podrán agregar las ventas
realizadas, buscando el producto y añadir cuantos productos se vendieron.
Figura 36:Agregar Venta
52
De la figura 37 a la 39 se observan las secciones del módulo del Informe de ventas, donde se
podrá observar todas las ventas, y así tener un mejor control. Se pueden observar las ventas por
fecha, semana o mes.
Figura 37:Venta por Fecha
Figura 38:Venta por Mes
Figura 39:Venta por Día
53
3.5.2 Pruebas
En esta parte se demostrarán las pruebas realizadas en las secciones y módulos antes
mencionados para dejar en evidencia la funcionalidad de dicho proceso.
En la figura 40 se presenta el formulario para el inicio de sesión. Si el usuario no ingresa de

manera correcta el nombre de su usuario o contraseña, el sistema le arroja un aviso informándole
que el usuario o la contraseña con incorrectos.
Figura 40:Datos incorrectos
En la figura 41 se presenta el formulario para crear un nuevo grupo, al no llenarse todos los
campos solicitados, el sistema nos arroja un aviso informando la falta de datos por capturar.
Figura 41:Datos incompletos al crear grupo

54
En la figura 42 se demuestra como el sistema manda un aviso señalando la falta de información
para poder realizar con éxito el proceso de añadir un nuevo usuario.
Figura 42:Datos incompletos al crear usuario
En la figura 43 se observa como el sistema arroja un aviso al no completarse el campo solicitado para
crear una nueva categoría.
Figura 43:Datos incompletos al crear una categoría
En la figura 44 se observa como el sistema despliega un mensaje informando que la imagen ha

sido añadida al servidor, todo esto al momento de cargar la imagen.
55
56
CAPITULO IV.
CONCLUSIONES
En este capítulo se presentan las conclusiones del desarrollo de este sistema y recomendaciones
luego del desarrollo del programa para tener una excelente experiencia, así como también las
nuevas adecuaciones o modificaciones que se le puedan realizar a futuro. El proyecto desarrollado
con el nombre de “Desarrollo de un Sistema Web para el control de pedidos de agua purificada”, el
cual su objetivo es facilitar el trabajo del área administrativa y logística. Una vez elaborado el
análisis y el diseño del sistema a través de los casos de uso, diagrama de clases, diagrama de
actividades y diagrama de secuencia, la adecuada selección de la arquitectura en la que se basó
la implementación permite tener una visión de cómo se integran los componentes desarrollados
para alcanzar la funcionalidad requerida por el sistema.
Entregando un sistema en el que se puede llevar un mejor control de la base de datos de los
clientes, así como reforzar en conjunto con la pagina web los inventarios.
Sin duda alguna una página Web, es un complemento de mucha importancia para toda empresa
que piensa en el progreso y que busca extenderse para facilitar los datos de los clientes,
proveedores e inventarios, ya que con el sistema tiene un proceso a través del cual una empresa
lleva la administración eficiente y clara del movimiento de su mercancía, es decir entradas y
salidas de productos o materias primas y además, también se lleva un control de la información y
los recursos que se generan a partir de esta gestión.
57
4.1 Recomendaciones
Con el crecimiento de la empresa “mas que pura” la pagina web les facilitara para tener
un control más eficiente donde tendrán los clientes la compra del producto, haciendo
más sofisticada y rápida la orden. en tema administrativa y logística será más sencillo
ya que sabrán cuanto tienen de inventario y datos de los proveedores y clientes.
Ya su en un futuro si la empresa desea agregar mas productos de venta, desde la
pagina web podrán agregar desde la base de datos los nuevos productos que tendrán,
así como los datos de los clientes y proveedores nuevos.
58
FIRMAS DE ASESOR INTERNO, ASESOR EXTERNO Y RESIDENTES
Lic. José Mario Pérez Castillo

Asesor externo Asesor interno
Br. Félix Jesús Ceh Pool Br. Randy Gerardo Gutiérrez

Vidal
Residente
Residente
59
Br. Jason Michelle Estrella Toloza
Residente
REFERENCIAS
[1] Microsoft 365 Team (septiembre 24, 2019), La guía sencilla para la diagramación de UML y
el modelado de la base de datos. Consultado el 23 de junio de 2022 de:
https://www.microsoft.com/es-mx/microsoft-365/business-insights-ideas/resources/guide-to-
uml-diagramming-and-database-modeling#:~:text=El%20Lenguaje%20Unificado%20de
%20Modelado,de%20un%20sistema%20o%20proceso.
[2] ¿Qué es Scrum? (agosto 18,2021), de proyectosagiles.org Sitio web:

https://proyectosagiles.org/que-es-scrum/
[3] Las etapas del scrum: ¿cómo aplicar este método? (octubre 10, 2018).
Metodología Scrum, de conexionesan Sitio web:
https://www.esan.edu.pe/apuntes- empresariales/2018/10/las-etapas-del-scrum-
como-aplicar-este-metodo/
[4] Sistema de Punto de Venta e Inventarios Para Más Que Pura, del Instituto
Tecnológico de Mérida, Chan García Ángel Andrés (agosto de 2021).
[5] Pressman, Roger S. [2005]. Ingeniería del Software. Vol. I. 250 p
[6] . Víctor, [2016]. Ventajas de los sistemas web. Aeurus. Recuperado de:
http://www.aeurus.cl/blog/ventajas-de-los-sistemas-web/
[7] Visual studio code. Blog Aitana (16 de octubre de 2018). Recuperado el 10 de
octubre de 2020 de: https://blog.aitana.es/2018/10/16/visual-studio-code/
[8] Gustavo, B. (01 de abril de 2020). Que es HTML. Hostinger. Recuperado el

10 de octubre de 2020 de: https://normas-apa.org/referencias/citar-pagina-
web/
[9] Que es JavaScript. Developer (8 de agosto de 2020). Recuperado el 10 de

octubre de 2020 de:
https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu
60
%C3%A9_es_JavaScript
[10] Gustavo, B. [13 de mayo de 2019]. que es CSS. Hostinger. Recuperado el 10

de octubre de 2020 de: https://www.hostinger.mx/tutoriales/que-es-css/
[11] Álvarez (09 de mayo de 2001). Que es php. Desarrolloweb.com Recuperado

de: https://desarrolloweb.com/articulos/392.php
[12] Gustavo, B. (03 de octubre de 2020). Que es MYSQL. Hostinger.

Recuperado el 10 de octubre de 2020 de:
https://www.hostinger.mx/tutoriales/que-es-mysql/
[13] Alelopj.weebly.com. 2022. [en línea] Disponible en:

<https://alelopj.weebly.com/uploads/9/3/6/4/936494/roger_pressman-
ingeniera_del_software-v_ed-cap1.pdf> [Consultado el 25 de abril de
2022].
[14] Redacción Edix. Recuperado de:

https://www.edix.com/es/instituto/adobe-xd/ (consultado el 23 de junio de
2022)
[15] Luvi. Luvi.com. Recuperado de: http://www.luvi.com.mx/portal/

(Consultado el 10 de mayo de 2022).
[16] Cervecería Colima. Cerveceriadecolima.com. Recuperado de:

https://cerveceriadecolima.com/ (Consultado el 10 de mayo de 2022).
61

Documento Residencia Mas Que Pura

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Documento Residencia Mas Que Pura

Cargado por

Copyright:

Formatos disponibles

SECRETARÍA DE EDUCACIÓN PÚBLICA

TECNOLÓGICO NACIONAL DE MÉXICO

“PLANTA PURIFICADORA MÁS QUE PURA”

“Desarrollo de un Sistema Web para el control de

BR. GUTIÉRREZ VIDAL RANDY

BR. ESTRELLA TOLOZA JASON

DEL 31 DE ENERO AL 18 DE JUNIO DE

1.2 Planteamiento del problema...............................................................................4

1.3 Propuesta de solución......................................................................................... 4

1.4.1 Objetivo General........................................................................................... 5

1.4.2 Objetivos Específicos...................................................................................6

CAPITULO II. MARCO TEORICO...............................................................................9

2.2. Ingeniera de Software....................................................................................... 11

2.3. Herramientas Utilizadas.................................................................................... 16

2.3.1 Visual Studio Code................................................................................... 16

2.3.4. Java Script................................................................................................ 17

2.3.9 Adobe Xd................................................................................................... 20

2.4 Estado del Arte................................................................................................... 20

2.4.1 Empresa AGUA LUVI................................................................................20

Actualmente, cuenta con 18 empleados laborando en la empresa; gracias al

La empresa cuenta con el área de Sistemas, Investigación, Marketing, Logística y

Como empresa socialmente responsable, apoyan a fundaciones, actividades

Actualmente la empresa cuenta con un Software de Sistema de Punto de

1.3 Propuesta de solución

Implementar un sistema de control web a través de la programación web:

1.4.1 Objetivo General

 Realizar las entrevistas con el cliente (Félix, Randy y Jason).

 Recaudar los requerimientos del Sistema Web (Félix, Randy y Jason).

 Realizar pruebas al sistema (Félix, Randy y Jason).

 Implantar el Sistema Web (Félix, Randy y Jason).

 Capacitar al personal autorizado que utilizará el Sistema Web (Félix,

El proyecto surge por la necesidad de llevar a cabo un mejor control para el

La empresa busca innovar su servicio con el uso de las nuevas tecnologías.

Al implementar este sistema para la empresa, los clientes podrán ingresar de

La justificación tecnológica es que facilitara al usuario en el manejo de la información de

Al manejar el software y la base de datos, podrá llevar un control de los proveedores y

 El sistema desplegará a los clientes en tiempo real las diferentes presentaciones

 El Sistema Web no contará con la certificación SSL para mayor seguridad.

Figura 1:Sistema Web

Ventajas de las aplicaciones web:

Ventajas del UML:

Figura 2:Ejemplo Diagrama de Caso de Uso

2.2.1.2 Diagrama de Actividades

2.2.2. Metodología Scrum

Permite abordar proyectos complejos desarrollados en entornos dinámicos y cambiantes de un

Las principales etapas de este modelo se transforman en actividades fundamentales

2.2.2.1 Fase de Planificación

2.2.2.2. Fase de Desarrollo

En la implementación se cumple con los siguientes procesos:

 Realizar daily stand-up.

 Refinanciamiento del backlog priorizado del producto.

En la fase de implementación o desarrollo no deberían hacerse cambios innecesarios de

2.2.2.3. Fase de Revisión

En esta fase se fomenta la colaboración y retroalimentación entre todos. Se incluyen los

 Colaboración entre equipos, supervisores, jefes y dueños de productos.

 Se admiten análisis externos como forma de complementación.

 El equipo de trabajo responde qué es lo que se ha desarrollado y qué carencias

 En base a ello, se puede regresar a la etapa de planificación para evaluar cómo

2.2.2.5. Fase de Lanzamiento

2.3. Herramientas Utilizadas

2.3.1 Visual Studio Code

2.3.4. Java Script

XAMPP es una distribución de Apache que incluye varios softwares libres. El nombre es un

 MySQL/MariaDB: con MySQL, XAMPP cuenta con uno de los sistemas relacionales de