UNIVERSIDAD POLITÉCNICA DEL VALLE DE TOLUCA

INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN

PÁGINA WEB DE BARBERIA

PRESENTA:

EDREY ZAID ALVAREZ FABILA

DOCENTE:

DR. en E. JUAN GABRIEL VELÁZQUEZ GÓMEZ

ENERO DE 2024
 gestión de
integración
 DESCRIPCIÓN DEL PROYECTO

La creación de la página web se aborda desde una perspectiva estratégica,

considerando no solo la presencia en línea, sino cómo esta puede ser una herramienta
clave para mejorar y potenciar la experiencia del cliente en "Mv Brothers". El diseño de
la página va más allá de la simple presentación de información, para ello se
implementará una innovación de reconocimiento facial. Se concibe para cautivar a los
usuarios y proporcionar una experiencia envolvente que refleje la calidad y el
profesionalismo de la barbería.

La elección de la metodología ágil XP no solo es una decisión práctica, sino una

declaración de compromiso con la mejora continua. Se espera una evolución constante
para asegurar que la página se ajuste a las expectativas cambiantes y dinámicas del
cliente. La flexibilidad inherente de XP no solo es una característica técnica, sino un
motor para la innovación. Se fomentarán adaptaciones continuas durante cada fase del
desarrollo, asegurando que la página evolucione para satisfacer las necesidades y
expectativas cambiantes de los clientes. La implementación de HTML, CSS, JavaScript
y MySQL se realiza estratégicamente. HTML para estructurar las interfaces, CSS
define la estética y presentación visual, JavaScript aporta dinamismo e interactividad y
MySQL para la base de datos ,contribuyendo al enfoque centrado en la experiencia del
usuario.

La ejecución del proyecto se realizará específicamente en la ubicación de "Mv

Brothers" en Almoloya de Juárez. Esto permite una adaptación precisa a las
particularidades de la barbería, considerando elementos únicos que reflejan la
identidad de la marca.
4.1. Desarrollar el Acta de Constitución del
Proyecto PMBOK® Guide 5th

ACTA DE CONSTITUCIÓN – PROJECT CHARTER

PROYECTO: Barbería Mv Brothers

NOMBRE DEL DOCUMENTO: Acta de Constitución

FECHA DE CREACIÓN: 09/01/2024

AUTOR: Edrey Zaid Alvarez Fabila

REVISIÓN: Luis Fernando Martínez Valdes

DESCRIPCIÓN DEL PROYECTO: El proyecto tiene como enfoque principal el

desarrollo de una página web destinada a potenciar la satisfacción del cliente y
brindar una experiencia de calidad, como innovación se implementará el
reconocimiento facial. Se utilizará la metodología ágil XP, utilizando HTML para
estructurar las interfaces, CSS para definir el diseño y la presentación de los
elementos, JavaScript para incorporar interactividad y dinamismo y MySQL
para la base de datos. La flexibilidad inherente a la metodología XP permitirá
realizar adaptaciones de forma continua durante todo el proceso de desarrollo.
Se realizará en la barbería "Mv Brothers" ubicada en Almoloya de Juárez.
DESCRIPCIÓN DEL PRODUCTO: La página web se creará con el propósito de
tener una mejor publicidad, mantener informados a los clientes y construcción
de comunidad. Además, contará con una característica avanzada que es el
reconocimiento facial. El enfoque integral busca no solo informar, sino también
ofrecer interacción dinámica y atractiva con tecnologías innovadoras.

OBJETIVOS: Desarrollar una página web destinada a fomentar una comunidad

más sólida, mejorar la visibilidad mediante una estrategia publicitaria efectiva,
mantener a los clientes informados y ofrecer una experiencia positiva.

CRITERIOS DE ÉXITO: Buscar un considerable incremento en la clientela de

la barbería, lograr una presencia destacada en línea, mantener a los clientes
informados y promover de manera más amplia la marca.
 REQUISITOS DE APROBACIÓN DEL PROYECTO: Licencias, lenguaje
de programación, equipo de cómputo e insumos.

FINALIDAD DEL PROYECTO: Garantizar una experiencia mejorada para los

clientes, mantenerlos informados, incrementar la visibilidad mediante estrategias
publicitarias que despierten su interés y fortalecer la presencia en línea.

ENTREGABLES PRINCIPALES: Una página web de calidad estable con las

funcionalidades necesarias, para brindar una mejor experiencia a los clientes y
al dueño del negocio al poder tener un crecimiento notable.

JUSTIFICACIÓN DEL PROYECTO: El proyecto se llevará a cabo en respuesta

a la problemática identificada en la barbería con una clientela limitada y
presencia publicitaria deficiente. El objetivo primordial es mejorar la eficiencia
operativa con miras a incrementar la base de clientes y consolidar el
reconocimiento de la misma.

PRINCIPALES INTERESADOS: Edrey Zaid Alvarez Fabila (Líder del proyecto)

y Luis Fernando Martínez Valdes (Dueño del negocio).

RIESGOS INICIALES: Posibles fallas de luz, inestabilidad del internet de la

zona así como la falta de conocimiento del usuario.

DURACIÓN E HITOS:
-Creación de la documentación del 9 de Enero al 18 de Enero del 2024.
-Creación de la interfaz para el usuario del 19 de Enero al 2 de Febrero del
2024.
-Programación e implementación del reconocimiento facial del 3 de Febrero al
16 de Febrero del 2024.
-Actualización del reconocimiento facial del 17 de Febrero al 8 de Marzo del
2024.
-Entrega completa de la página web del 9 de Marzo al 29 de Marzo del 2024.

PRESUPUESTO: El presupuesto aproximado de licencias, mano de obra e

insumos sería de $19,400.

SPONSOR: Luis Fernando Martínez Valdes

DIRECTOR DEL PROYECTO: Edrey Zaid Alvarez Fabila
Ilustración 1 Acta de Constitución

Fuente: Elaboración Propia

gestión de
alcance
 ESTRUCTURA DE DESGLOSE DEL TRABAJO EN EL PROYECTO

El proyecto se formula a través de la metodología XP que consiste en un enfoque ágil

para el desarrollo de la página web que se basa en un conjunto de prácticas y
principios destinados a mejorar la calidad de la misma y la satisfacción del cliente.
Brinda un diseño simple y elegante en lugar de anticipar futuros requisitos por lo que
facilita la adaptación a cambios, así como una comunicación cercana y continua con el
cliente para comprender y adaptarse rápidamente a los cambios. Dicho esquema se
compone de la estructura de las actividades del proyecto, mismas que se utilizan para
su desarrollo.

Ilustración 2 EDT de Metodología XP

Fuente: Elaboración Propia

gestión del
tiempo
 DIAGRAMA DE GANTT

El diagrama representa el tiempo en el que se realizará la página web, se muestra por

medio de colores rellenando celdas, cada una hace referencia a una semana, de dicha
forma se puede llevar un control del tiempo estimado y observado las actividades
próximas para poder desarrollarla.

Ilustración 3 Diagrama de Gantt

Fuente: Elaboración Propia

gestión de
costos
 GESTIÓN DE COSTOS

La gestión de costos implica planificar, estimar, presupuestar, controlar y analizar los

costos asociados con las actividades y recursos necesarios para alcanzar los objetivos
de la página web.

MANO DE OBRA

CANTIDAD NOMBRE DESCRIPCIÓN SALARIO SALARIO

TOTAL

1 Líder del Organiza y mantiene el orden $750 $7000

Proyecto

Verificador Aprueba cualquier beneficio $650 $1950

1 de la página web

2 Programador Desarrolla la página web $650 $1950

1 Desarrollador Crea una parte de la página $600 $1800

web

Diseñador Diseña la página web con las

1 características de uso $500 $1500

Total $14200

Ilustración 4 Mano de Obra

Fuente: Elaboración Propia

MATERIA PRIMA

CANTIDAD NOMBRE DESCRIPCIÓN COSTO COSTO

UNITARIO TOTAL

2 Licencia Para darle un plus MES $500 $1000

Lenguajes de
2 programación , Desarrollo y la $2000 $2000
HTML, CSS, programación de la
JAVASCRIPT página web

1 Interactúa con la $300 $600

MySQL programación
 Total $3600

Ilustración 5 Materia Prima

Fuente: Elaboración Propia

INSUMOS

CANTIDAD NOMBRE DESCRIPCIÓN COSTO COSTO

UNITARIO TOTAL

1 Útil para el $400 $800

Luz eléctrica desarrollo de la
página web

1 Internet Ayuda para la $400 $800

creación y el
diseño

Total $1600

Ilustración 6 Insumos

Fuente: Elaboración Propia

El presupuesto que se tiene de inicio es de $19,400, que incluyen los costos de

recursos humanos, materia prima e insumos. Esto brinda una visión para realizar un
presupuesto para el desarrollo del proyecto, mismo que puede variar conforme su
desarrollo.

TOTALES

RECURSO CANTIDAD TOTAL

Mano de Obra $14200

Materia prima $3600

Insumos $1600

Total del proyecto: $19,400

Ilustración 7 Totales

Fuente: Elaboración Propia

gestión de
recursos
humanos
 FORMATO DE TEXTO

Identificar los conocimientos de cada personal involucrado en el desarrollo e

implementación de la página web, y así mismo tener una visión general de cada rol que
cubre dentro del mismo, esto nos ayudará a poder realizar una página de calidad,
estable y confiable.

Recurso Habilidades Aptitudes Conocimientos Experiencia Nivel de

Humano Estudios

Líder del Aportar Orden Manejo de diseño HTML, Css, Ingeniero en

proyecto ideas para y múltiples formas JavaScript y informática
la para la interfaz MySQL
elaboración
del proyecto

Verificador Lógica y Organización y Documentación y 2 años de Ingeniero en

destreza en creatividad manejo de experiencia informática
solucionar equipos
problemas

Programador Lógica Identifica Lenguajes de 2 años de Ingeniero en

Analitico fácilmente programación experiencia Tecnologías de la
problemas información
Matemáticas

Desarrollador Brinda un Facilidad de Lenguajes de 3 años de Ingeniero en

seguimiento trabajo en programación experiencia Tecnologías de la
a las fases equipo y orientados a información
creatividad objetos

Diseñador Brinda Facilidad de Creatividad en 3 años de Diseñador gráfico

facilidad de trabajo en dibujo y uso de experiencia e Ingeniero en
uso al equipo y es ciberseguridad ciberseguridad
usuario y creativo
diseña
interfaces

Ilustración 8 Formato de Texto

Fuente: Elaboración Propia

 ORGANIGRAMA

Se muestra el organigrama de “Mv Brothers Barbería”, donde se estructuran de manera

clara todos los especialistas involucrados, identificando el cargo de cada uno y su
correspondiente función laboral. Además, se destaca el líder del proyecto, quien se
encargará de la organización y coordinación del personal. El verificador resolverá
problemas, el desarrollador dará seguimiento a las fases, el programador se ocupará
de la programación, conexión a la base de datos, diseño, corrección de errores y
mantenimiento. Por su parte, el diseñador se encargará de crear interfaces, dotándolas
de un estilo mejorado y una mayor facilidad de uso.

Ilustración 9 Organigrama

Fuente: Elaboración Propia

 RACI

Representa la responsabilidad de los profesionales involucrados en el proyecto y a su

vez, los roles que ocupa cada uno.

Actividad Líder del Verificador Programador Desarrollador Diseñador

proyecto

Planificación R I-R -- I I

Diseño A-C A -- I A-R

Codificación R I A A I

Pruebas I A A-R -- R

Lanzamiento A-R I I-A R I

Ilustración 10 RACI

Fuente: Elaboración Propia

La función que tiene RACI, descripción y con sus significados, ayuda a los equipos a
brindar calidad con respecto a los roles y determinar quién es el responsable de dicha
tarea específica.

LETRA/ DESCRIPCIÓN FUNCIÓN

SIGNIFICADO

R - RESPONSABLE Persona encargada de realizar la Lleva a cabo la acción específica,

actividad ejecuta la tarea

A - APROBADO Persona responsable de que la actividad Aprueba o rechaza el trabajo

se termine en forma correcta realizado, toma decisiones finales

C - CONSULTADO Persona que tiene cierta información para Brinda orientación y conocimiento
realizar el trabajo relacionado con la actividad

I - INFORMADO Persona que se les debe informar el Deben ser informadas sobre el
estado y resultado del trabajo desarrollo de la tarea

-- NINGUNO No está involucrada la persona No involucrado en este apartado

Ilustración 11 Tabla de Simbología

Fuente: Elaboración Propia

gestión de
calidad
 DIAGRAMA DE ISHIKAWA

Mediante este diagrama se representa una evaluación de los problemas y sus posibles causas que podrían influir en la decisión de cancelar
el proyecto.

Materiales
Medición
Recursos limitados Medio Ambiente
Falta de seguimiento para licencias
Luz inestable
Técnicas Maquinaria de
desactualizadas rendimiento deficiente
Desempeño
Descarga eléctrica Insatisfactorio del
Poco rendimiento
Falta de claridad en Falta de conexión a Equipo Informático
y eficientización
los requerimientos Internet
Carga de
información Uso no autorizado Falta de
retardada del logotipo electricidad

Mantenimiento Técnica de carga Formación

errónea deficiente del
Información personal
Falta de presupuesto
insuficiente Insuficiente
Dificultades de inversión
Maquinaria Escasa
comunicación
desactualizada familiaridad del
Ausencia personal con el
Maquinaria de estándares tema
y conocimiento
Contexto inadecuado

Método lIustración 12 Diagrama de Ishikawa

Mano de Obra
Fuente: Elaboración Propia
gestión de
riesgos
 ESTRUCTURA DE DESCOMPOSICIÓN DE RIESGOS
Elaborar el diagrama de estructura de descomposición de riesgos tiene el objetivo
de identificar todos los posibles riesgos que podrían surgir durante la realización de
las tareas especificadas en el EDT, los cuales podrían obstaculizar el progreso del
proyecto.

Ilustración 13 EDR
Fuente: Elaboración propia

MATRIZ DE RIESGO
Determina de forma objetiva los riesgos relevantes para la salud y seguridad de los
trabajadores que enfrenta una empresa, los riesgos de la tabla que cruza la
probabilidad de que ocurran con el impacto que tendrían en caso de concretarse.
Lo que permite priorizar los riesgos, identificar aquellos que requieren atención
inmediata y planificar estrategias para mitigarlos o gestionarlos de manera efectiva,
ayuda a tomar decisiones informadas y a mejorar la preparación ante posibles
eventos adversos.
 Matriz de Riesgo

Probabilidad

Improbable Posible Ocasional Moderado Constante

Riesgo 2 4 6 8 10

1 Insignificante 2 4 6 8 10

2 Menor 4 8 12 16 20

3 Moderado 6 12 18 24 30

4 Crítico 8 16 24 32 40

5 Fatal 10 20 30 40 50

Ilustración 14 Matriz de Riesgo

Fuente: Elaboración propia

SIMBOLOGÍA DE LA TABLA DE RIESGOS

La manera en que la tabla se traduce es con números que indican el rango, colores
asociados a dichos rangos y sus respectivos significados, facilita a los equipos
ofrecer calidad en relación con los roles y determinar el nivel de riesgo asociado a
cada uno.

COLOR

2a8 Riesgo Aceptable

Ilustrar riesgos de bajo impacto y baja probabilidad
implica visualizar situaciones con escasa
10 a 18 Riesgo Tolerable posibilidad de ocurrencia y, en caso de
materializarse, con efectos de menor envergadura.

Se refiere a riesgos con una probabilidad

moderada de materializarse y un impacto
20 a 24 Riesgo Alto considerable en caso de que sucedan. Estos
riesgos tienen una posibilidad significativa de
ocurrencia y podrían acarrear consecuencias
importantes.
 Se establece una reserva para riesgos con alta
probabilidad de materializarse y un impacto
30 a 50 Riesgo Extremo potencialmente significativo o crítico en caso de
que lleguen a suceder. Estas situaciones tienen
una elevada probabilidad de ocurrir y podrían
acarrear consecuencias de importancia
considerable.

Ilustración 15 Simbología de la Tabla de Riesgos

Fuente: Elaboración propia
 Matriz de análisis de riesgo Probabilidad de Amenaza (1=Improbable, 2=Baja, 3=Probable, 4=Alta, 5=Muy
Alta)
Clasificación Conflictos originados por la criminalidad Sucesos Sucesos derivados de la impericia, negligencia de usuarios y
común y motivación política de origen decisiones de instituciones
físico

Datos e información

1 1 2 3 4 4 3 5 5 3 4 3 3 4 4 4 2 2
2 2 2 4 6 8 8 6 10 10 6 8 6 6 8 8 8 4 4
Estudio inadecuado
de la viabilidad *
3 3 3 6 6 12 12 9 15 15 9 12 9 9 12 12 12 6 6
Estimación
tiempo errónea
de
*
2 2 2 4 6 8 8 6 10 10 6 8 6 6 8 8 8 4 4
Interfaces
documentación
sin
*
4 4 4 8 12 16 16 12 20 20 12 16 12 12 16 16 16 8 8
Código inadecuado
y/o incompleto *
3 3 3 6 6 12 12 9 15 15 9 12 9 9 12 12 12 6 6

Error al ejecutar *
4 4 4 8 12 16 16 12 20 20 12 16 12 12 16 16 16 8 8
Inadecuada
depuración de *
errores
3 3 3 6 9 12 12 9 15 15 9 12 9 9 12 12 12 6 6
Entrega tardía y/o
Incompleta *
Ilustración 16 Tabla de Riesgos
Fuente: Elaboración propia
gestión de
INTERESES
 MATRIZ PODER-INTERÉS

Se evalúa el rendimiento al agrupar a los interesados según su nivel de autoridad.

Este se fundamenta en el conocimiento que aportan sobre las características
individuales, el poder que poseen y su capacidad de participación a lo largo del
proyecto.

Ilustración 17 Matriz Poder-Interés

Fuente: Elaboración propia

El líder del proyecto es responsable del éxito general del proyecto. Este nivel de
responsabilidad otorga al líder un poder considerable para tomar decisiones clave y
dirigir el curso del proyecto. Esta perspectiva aumenta tanto su poder como su
interés en las diversas dimensiones del proyecto.
En cuanto al menor interés de los desarrolladores y programadores podría
deberse a que pueden estar más enfocados en su trabajo técnico y no
necesariamente interesados en cuestiones políticas, administrativas o de gestión.
Esto les otorga un poder relativo, ya que su experiencia es esencial para el
desarrollo y mantenimiento de sistemas y aplicaciones.
Los diseñadores a menudo se centran en la creatividad y la ejecución de ideas
visuales. Aunque su contribución es esencial para la estética y la usabilidad, pueden
tener menos participación en decisiones estratégicas y de alto nivel que afectan al
proyecto en su conjunto. Esto puede limitar su involucramiento en aspectos más
amplios del proyecto, reduciendo su poder en la toma de decisiones.
El trabajo del verificador a menudo se centra en identificar errores, inconsistencias
o problemas en el trabajo realizado por otros. Mientras que esto es esencial para
mantener la calidad, puede significar que su poder se manifiesta principalmente en
la identificación y reporte de problemas, en lugar de en la toma de decisiones
estratégicas. Aunque pueden tener un menor poder en términos de toma de
decisiones estratégicas, los verificadores suelen tener un alto interés en garantizar
la integridad y calidad del trabajo. Su enfoque está en identificar y corregir
problemas para contribuir al éxito general del proyecto.
 ANEXOS

El dueño del negocio lee el acta de constitución con el permiso para evitar
malentendidos y en caso de tener alguna duda o irregularidad, aclararlo en ese
mismo instante. Firma el documento, dando así la autorización. Esto con el fin de
futuras aclaraciones que se presenten a lo largo del desarrollo del proyecto.

Ilustración 18 Fotografía del dueño leyendo y firmando el acta de constitución

Fuente: Elaboración propia

Al final se anexa el acta de constitución firmada por el dueño, teniendo en cuenta

que ya está de acuerdo con todo lo planteado en ella. Para así poder proceder a
empezar con el desarrollo de la página web, informando que se le visitará para
mostrarle evidencias del proceso de desarrollo del mismo.
Ilustración 19 Acta firmada
Fuente: Elaboración propia
INVESTIGACIÓN,
DESARROLLO E
INNOVACIÓN DEL
PROYECTO
 TIPO DE INNOVACIÓN

La página web de la barbería "MV Brothers" implementará una innovación

incremental que se centra en mejorar la interactividad mediante el reconocimiento
de voz para la navegación entre las distintas interfaces. Esta mejora permitirá a los
clientes explorar y acceder a los servicios de manera más intuitiva y práctica,
utilizando comandos de voz para desplazarse por las opciones disponibles.

La implementación de esta innovación se llevará a cabo en la página web de la

barbería, la cual utilizará tecnología avanzada de reconocimiento de voz para
entender y procesar los comandos emitidos por los usuarios, facilitando así la
navegación fluida y sin esfuerzo a través de las diferentes secciones y servicios
ofrecidos.

Esta iniciativa de innovación está estrechamente relacionada con el reconocimiento

de voz, ya que busca optimizar y perfeccionar los procesos y algoritmos
involucrados en esta tecnología específica. Algunas de las razones por las cuales se
aplica la innovación incremental al reconocimiento de voz incluyen:

● Mejora de la precisión y fiabilidad: La innovación se orienta hacia el

aumento de la precisión y fiabilidad del reconocimiento de voz, permitiendo
que la página web interprete con mayor exactitud los comandos emitidos por
los usuarios y responda de manera apropiada.
● Optimización del rendimiento: Se busca mejorar la velocidad y eficiencia
del reconocimiento de voz para garantizar una respuesta más rápida y fluida
de la página web a los comandos emitidos por los usuarios, mejorando así la
experiencia de navegación.
● Mayor interactividad: La implementación del reconocimiento de voz ofrece
una experiencia de usuario más interactiva y personalizada, permitiendo a los
clientes interactuar de manera natural con la página web y acceder a los
servicios de forma más intuitiva y conveniente.
INNOVACIÓN
TIPO Y SECCIÓN
DE ÁREA
 EXPLORANDO LAS FRONTERAS DE LA INNOVACIÓN

La innovación es el motor que impulsa el rendimiento empresarial, en la barbería

MV Brothers se reconoce que para destacar en la industria de la barbería, es
esencial adoptar nuevas tecnologías y métodos que mejoren la experiencia del
cliente y optimizar las operaciones internas. Es por eso que se ha implementado la
innovación para maximizar el rendimiento y garantizar la excelencia en cada
aspecto del negocio.

Rendimiento de Finanzas: La capacidad para innovar se refleja en la gestión

financiera. Se ha asignado recursos significativos a iniciativas de investigación y
desarrollo, priorizando proyectos como la implementación del reconocimiento de voz
en la página web de la barbería. Esta inversión estratégica no solo permite ofrecer
servicios más eficientes, sino que también fortalece la posición competitiva en el
mercado.

Recursos Humanos: En MV Brothers, se comprende que el equipo es fundamental

para impulsar la innovación. Por eso, se ha cultivado un entorno laboral que fomenta
la creatividad y el aprendizaje continuo. Los barberos son más que empleados; son
innovadores que aportan ideas y perspectivas únicas para mejorar constantemente
los servicios.

Retorno de Inversión: Evaluar el éxito de las iniciativas innovadoras es

fundamental. Más allá del retorno financiero, es analizar cómo estas inversiones
impactan en la satisfacción del cliente y la eficiencia operativa. Al maximizar el
retorno de inversión, se asegura que la innovación implementada en MV Brothers
contribuya al crecimiento y éxito a largo plazo.

Rendimiento en Innovadores: La implementación del reconocimiento de voz en la

página web de la barbería es un claro ejemplo de innovación. Esta tecnología
permite ofrecer una experiencia más personalizada y eficiente, adaptada a las
necesidades específicas de cada cliente. Además, empodera a los barberos,
permitiéndoles centrarse en lo que hacen mejor: brindar experiencias excepcionales
a los clientes.
 ACTIVIDADES POR REALIZAR EN LA PÁGINA WEB

El diagrama representa el tiempo en el que se realizará la página web, se muestra

por medio de colores rellenando celdas, cada una hace referencia a una semana, de
dicha forma se puede llevar un control del tiempo estimado y observado las
actividades próximas para poder desarrollarla, ahora se explicara más a fondo que
se realizará en cada una.

Ilustración 1 Diagrama de Gantt

Fuente: Elaboración Propia
 PLANIFICACIÓN

Análisis de Requisitos: Recopilar y documentar los requisitos del dueño del

negocio y de los usuarios para la página web, considerando las expectativas
específicas en cuanto a la experiencia del cliente y la implementación del
reconocimiento de voz. Identificar los requisitos funcionales y no funcionales del sitio
web, como la capacidad de los comandos de voz, la compatibilidad con diferentes
dispositivos y navegadores, la seguridad de los datos, entre otros.
Definición de Estándares de Prueba de Adaptación: Para garantizar que la
página web se adapte adecuadamente a las necesidades cambiantes y dinámicas
del cliente. Determinar los criterios de aceptación que se utilizarán para evaluar el
grado de adaptación de la página web a medida que evolucionen los requisitos y las
expectativas del cliente.
Planificación de Pruebas: Diseñar un plan de pruebas que incluya casos de
prueba para verificar la adaptación de la página web a diferentes escenarios y
requisitos cambiantes. Establecer una estrategia de pruebas que permita realizar
pruebas de adaptación de manera continua a lo largo del ciclo de vida del proyecto,
en línea con la metodología ágil XP.
Definición de Objetivos y Alcance del Proyecto: Establecer claramente los
objetivos del sitio web, cómo mejorar la experiencia del cliente, aumentar la
presencia en línea, destacar la calidad y profesionalismo de la barbería. Delimitar el
alcance del proyecto, incluyendo la implementación del reconocimiento de voz como
una innovación clave.
Planificación del Contenido y Estructura del Sitio: Definir los tipos de contenido
que se incluirán en el sitio web, como información sobre servicios, testimonios de los
usuarios, galería de imágenes, entre otros.
Selección de Metodología de Desarrollo: Utilizar la metodología ágil XP para el
desarrollo del proyecto, destacando su flexibilidad y enfoque en la mejora continua.
Elección de Tecnologías y Plataforma: HTML, CSS, JavaScript y MySQL como
las tecnologías principales para la implementación del sitio web, considerando sus
roles en la estructuración, presentación, interactividad y gestión de datos,
respectivamente.
Planificación de la Implementación: Establecer un plan detallado para la
ejecución del proyecto, considerando la ubicación específica de "Mv Brothers" en
Almoloya de Juárez y adaptando el desarrollo del sitio web a las particularidades de
la barbería.

DISEÑO

Definición de Requisitos de Entorno: Identificar los requisitos específicos del

entorno de desarrollo, teniendo en cuenta la implementación del reconocimiento de
voz y las tecnologías seleccionadas (HTML, CSS, JavaScript, MySQL). Establecer
los requisitos necesarios para el desarrollo y prueba del sitio web, asegurando que
el entorno sea adecuado para el desarrollo ágil.
Configuración del Entorno de Desarrollo: Instalar y configurar las herramientas y
tecnologías necesarias en el entorno de desarrollo, incluyendo el editor de código,
servidores web, MySQL para la base de datos, frameworks y bibliotecas de
desarrollo, entre otros. Asegurar que el entorno de desarrollo esté correctamente
configurado para admitir la implementación del reconocimiento de voz, incluyendo la
integración de bibliotecas y APIs necesarias para esta funcionalidad.
Preparación de Datos y Recursos: Preparar los datos y recursos necesarios para
el desarrollo del sitio web, como imágenes, textos, estilos visuales y cualquier otro
contenido necesario para la implementación del diseño.

CODIFICACIÓN

Desarrollo del Sitio Web: Escribir el código fuente utilizando HTML, CSS y
JavaScript para crear la estructura, el diseño visual y la interactividad del sitio web,
respectivamente. Implementar las funcionalidades requeridas, utilizando las APIs y
bibliotecas pertinentes para esta característica innovadora.
Implementación de la Base de Datos: Crear y configurar la base de datos
utilizando MySQL para almacenar y gestionar la información del sitio web, como
datos, testimonios, imágenes, entre otros.
Configuración del Entorno de Producción: Preparar el entorno de producción
para alojar y ejecutar el sitio web, configurando servidores web, bases de datos y
otros servicios necesarios para su funcionamiento. Realizar pruebas de despliegue
para asegurar que el sitio web se implemente correctamente en el entorno de
producción y esté disponible para su acceso público.
Ejecución del Proyecto: Seguir las prácticas de la metodología ágil XP para la
ejecución del proyecto, trabajando en iteraciones cortas y entregando incrementos
funcionales del sitio web de manera regular, revisar el código, resolver problemas y
realizar ajustes según sea necesario durante el desarrollo del proyecto.
Programación y Optimización: Escribir código limpio y eficiente siguiendo las
mejores prácticas de programación, incluyendo comentarios, nombramiento de
variables significativas y modularización del código. Optimizar el rendimiento del
sitio web mediante técnicas de programación y configuración adecuadas, como la
compresión de archivos, el almacenamiento en caché y la minimización de
solicitudes al servidor.

PRUEBAS

Soporte durante el Desarrollo: Proporcionar soporte continuo, ayudando a

resolver problemas técnicos y respondiendo preguntas relacionadas con el
desarrollo del sitio web. Garantizar que los requisitos funcionales y no funcionales
se implementen correctamente y se cumplan los estándares de calidad
establecidos.
Verificación de Funcionalidad: Asegurar que todas las funcionalidades del sitio
web se implementen correctamente y funcionen según lo esperado. Verificar el
correcto funcionamiento del reconocimiento de voz asegurándose de que identifique
correctamente la voz de los usuarios y proporcione una experiencia de usuario fluida
y satisfactoria.
Pruebas de Integración: Para asegurar que todos los componentes del sitio web
funcionen juntos de manera armoniosa y se comuniquen correctamente entre sí.
Probar la integración entre el front-end y el back-end, incluyendo la interacción entre
la interfaz de usuario y la base de datos.
Pruebas de Rendimiento y Carga: Para evaluar el tiempo de carga y la capacidad
de respuesta del sitio web, asegurándose de que pueda manejar cargas de usuarios
esperadas sin problemas de rendimiento. Evaluar el comportamiento del sitio web
bajo cargas de trabajo extremas, identificando posibles cuellos de botella y
optimizando el rendimiento según sea necesario.
Pruebas de Usabilidad: Evaluar la facilidad de uso y la experiencia de los usuarios
del sitio web, identificando posibles áreas de mejora en la navegación, el diseño y la
interactividad. Recopilar comentarios de los usuarios durante las pruebas de
usabilidad para realizar ajustes y mejoras en el diseño y la funcionalidad del sitio
web.

LANZAMIENTO

Retroalimentación: Recopilar una retroalimentación del dueño del negocio y los

usuarios sobre la funcionalidad, usabilidad y diseño del sitio web. Analizar los
comentarios recibidos y realizar ajustes finales en el sitio web en base a las
sugerencias y mejoras identificadas durante esta etapa.
Entrega de la Página Web: Preparar la página web para su lanzamiento público,
asegurándose de que esté completamente funcional. Realizar pruebas finales para
garantizar que todas las funcionalidades estén operativas y que no haya errores
críticos que afecten la experiencia del usuario.
Mantenimiento: Establecer un plan de mantenimiento para la página web, que
incluya la monitorización continua del rendimiento, la seguridad y la disponibilidad
así como garantizar que siga siendo segura y funcional a lo largo del tiempo.
ACTUALIZACIONES
 ANTES Y DESPUÉS DE LA PÁGINA WEB

En la imagen se aprecia claramente que en la interfaz de inicio previa, el texto era

notablemente pequeño, lo que dificulta la visualización del contenido y restaba
impacto al mensaje. Además, el tamaño reducido provocaba que la letra se perdiera
fácilmente, empeorando aún más la experiencia del usuario y disminuyendo la
efectividad del mensaje.

Ilustración 2 Interfaz de Inicio antes

Fuente: Elaboración Propia

En la imagen actual, se puede observar claramente que el tamaño del texto ha sido
modificado satisfactoriamente en la interfaz de inicio. Ahora, el contenido es más
legible y el mensaje resulta más impactante. Este ajuste mejorará significativamente
la experiencia del usuario, asegurando que el mensaje sea más efectivo y
fácilmente perceptible.
 Ilustración 3 Interfaz de Inicio después
Fuente: Elaboración Propia

Tras recibir comentarios por parte de algunos alumnos y el profesor, se tomó la

decisión de eliminar la interfaz de contacto. Estas sugerencias destacaron que en la
actualidad, la comunicación resulta más efectiva a través de plataformas de redes
sociales o aplicaciones de mensajería instantánea.

Ilustración 4 Interfaz de Contacto antes

Fuente: Elaboración Propia
Se optó por incorporar dos herramientas clave a la página web: una API de
WhatsApp y una API de Google Maps. Estas integraciones ofrecerán a los usuarios
la posibilidad de acceder de manera rápida y sencilla a la ubicación precisa de la
barbería, así como a sus horarios de atención y opciones de contacto.

Ilustración 5 Interfaz de Contacto después

Fuente: Elaboración Propia

En la interfaz de servicios, se identificó que el tamaño de letra era demasiado

pequeño, lo que dificulta la lectura. Además, se observó la ausencia de transiciones
en las letras, lo que afectaba negativamente al estilo y la estética de la página.

Ilustración 6 Interfaz de Servicios antes

Fuente: Elaboración Propia
En la interfaz de servicios actual, se perfeccionó la presentación al ampliar el
tamaño de la fuente y al introducir transiciones en el diseño de las letras, lo que
resultó en una mejora sustancial en la legibilidad y el estilo.

Ilustración 7 Interfaz de Servicios después

Fuente: Elaboración Propia

Se implementó una nueva interfaz de citas que proporciona una visión de los
servicios ofrecidos, junto con la asignación del profesional correspondiente para
atender a los clientes.

Ilustración 8 Interfaz de Citas

Fuente: Elaboración Propia
Una vez que el usuario elija el servicio deseado, será redirigido a otra interfaz donde
podrá seleccionar la fecha de su cita. Además, se mostrará claramente el día
correspondiente para facilitar la elección.

Ilustración 9 Interfaz de Citas elegir fecha

Fuente: Elaboración Propia

A continuación, se presentará la siguiente interfaz, donde el usuario podrá

seleccionar el horario deseado para su cita. Esta interfaz incluye iconos distintivos
para la mañana, la tarde y la noche, como parte de su diseño.

Ilustración 10 Interfaz de Citas elegir hora

Fuente: Elaboración Propia
Al final, se visualizará esta interfaz que confirmará la cita al usuario, mostrando la
fecha y hora seleccionadas, junto con un mensaje de confirmación sobre la cita
agendada.

Ilustración 11 Interfaz de Citas confirmación al cliente de su cita

Fuente: Elaboración Propia

Una vez que el usuario ha agendado la cita, el administrador, que en este caso es el
dueño del negocio, podrá visualizar todas las citas en Google Calendar. Además, la
aplicación le enviará notificaciones cada vez que se acerque la fecha de alguna cita.

Ilustración 12 Google Calendar mostrar a la barbería las citas que tiene

Fuente: Elaboración Propia
 RECONOCIMIENTO DE VOZ

Se ha implementado el reconocimiento de voz con el fin de enriquecer la

experiencia de navegación entre las diversas interfaces de la página web. Esta
característica permite que los usuarios interactúen de manera más natural y sencilla,
lo que hace que el acceso a los servicios sea más intuitivo y cómodo.

Ilustración 13 Implementación del reconocimiento de voz

Fuente: Elaboración Propia

También se ha integrado el reconocimiento de voz para acceder a una interfaz de

bienvenida, que es la principal al ingresar a la página web. Simplemente con
pronunciar el comando de inicio, los usuarios pueden acceder a esta sección y
luego navegar fácilmente entre las diferentes interfaces disponibles.

Ilustración 14 Implementación para entrar con reconocimiento de voz

Fuente: Elaboración Propia
ENTREGABLES
 ENTREGABLE

Los entregables son los productos finales, resultados o documentos que se generan
como parte de un proyecto o proceso, y que normalmente se entregan a un
interesado o cliente. Estos elementos concretos representan el resultado de una
actividad o fase específica dentro de un proyecto. Los entregables juegan un papel
fundamental en la gestión de proyectos al establecer expectativas claras, medir el
avance y asegurar el cumplimiento de los objetivos del proyecto.

Ilustración 15 Hoja de entregable

Fuente: Elaboración Propia
Documentación de requisitos
Al definir los requerimientos proporcionados por el cliente, se establece un conjunto
de pautas claras que guían cada fase del proyecto. Esto abarca la fase de
planificación, el proceso de diseño, la ejecución de las tareas, las pruebas
realizadas y el posterior mantenimiento de la página web.

Ilustración 16 Documentación de requisitos

Fuente: Elaboración Propia
Las pruebas y los resultados de pruebas

Las evaluaciones cubren una variedad de aspectos, que incluyen la funcionalidad, el

desempeño, la seguridad, la compatibilidad y la facilidad de uso. Cada tipo de
evaluación se enfoca en verificar aspectos particulares y garantizar su calidad y
confiabilidad. Tras completar las evaluaciones, se analizan y registran los resultados
obtenidos. Estos resultados ofrecen información valiosa sobre el funcionamiento de
la página web y cualquier inconveniente o defecto detectado durante las pruebas.

Ilustración 17 Las pruebas y los resultados de pruebas

Fuente: Elaboración Propia
Capacitación
La capacitación resulta fundamental en el proceso de implementación y uso por
parte del cliente. Al ofrecer instrucción y conocimientos esenciales sobre su
funcionamiento, se le otorga al cliente la posibilidad de familiarizarse con la página
web y comprender cómo navegar de manera efectiva.

Ilustración 18 Capacitación
Fuente: Elaboración Propia

Soporte Técnico
Proporcionar asistencia para resolver problemas técnicos y brindar orientación sobre
el uso. El objetivo principal es garantizar el funcionamiento eficiente de la página
web y ayudar a los usuarios a aprovechar al máximo sus características.

Ilustración 19 Soporte Técnico

Fuente: Elaboración Propia
ANEXOS
 PRUEBAS DE CAMPO

Estas pruebas implican poner la página web en funcionamiento y permitir que los
usuarios reales interactúen con ella para evaluar su rendimiento, funcionalidad y
usabilidad en condiciones reales. Durante las pruebas de campo, se pueden
recopilar comentarios y datos sobre la experiencia del usuario, como la facilidad de
navegación, la claridad de la información y la velocidad de carga. Esto permite
identificar y solucionar cualquier problema antes de lanzar la página web de manera
oficial.

Se entrevistó alumnos de distintas carreras con el fin de mostrarles la página web.

Dichas entrevistas permitieron obtener las siguientes observaciones para mejorar la
página web:

● Implementar una mensajería para aclarar dudas.

● Reducir el número de fotos.

● Letra con tonos más fuertes.

● Quitar un buscador ya que es repetitivo.

● Tener muy en cuenta la ortografía.

Se presentan las evidencias recopiladas de los alumnos de diversas carreras a

quienes se les mostró la página web, y quienes realizaron las observaciones
mencionadas anteriormente.

Ilustración 20 Alumno
Fuente: Elaboración Propia
 Ilustración 21 Alumno
Fuente: Elaboración Propia

Ilustración 22 Alumno
Fuente: Elaboración Propia
 Ilustración 23 Alumno
Fuente: Elaboración Propia

Ilustración 24 Alumno
Fuente: Elaboración Propia
Además, se llevó a cabo una entrevista con un profesor del departamento de
Tecnologías de la Información, cuya perspectiva y experiencia en el campo fueron
invaluables para identificar áreas de mejora específicas. Sus recomendaciones se
detallan a continuación:

● Implementar el reconocimiento de voz como innovación.

● Implementar bases de datos que podría ser un apartado de citas.

● Incrementar la interactividad mediante la inclusión de elementos dinámicos

que mantengan el interés del usuario.

● Reducir el número de fotos.

● Organizar mejor cada interfaz.

● Tener muy en cuenta la ortografía.

● Siempre empezar los párrafos con mayúsculas.

Ilustración 25 Profesor de Tecnologías de la Información

Fuente: Elaboración Propia
HERRAMIENTAS DE
IDENTIFICACIÓN
DEL PROBLEMA
 ANÁLISIS DE PARETO

Después de recopilar observaciones sobre el funcionamiento de la página web de

la barbería MV Brothers, tanto de las pruebas realizadas con el propietario del
negocio como de las pruebas de campo llevadas a cabo en la universidad en
colaboración con un profesor experto en el tema y alumnos de las diferentes
carreras, se han identificado las siguientes problemáticas:

➢ 50% Abundancia de imágenes en las interfaces.

➢ 20% Falta de interactividad en elementos dinámicos para mantener el interés

del usuario.

➢ 15% Desorganización en la disposición de las interfaces.

➢ 10% La legibilidad del texto se ve comprometida debido al tamaño de la letra.

➢ 5% La ausencia de una mensajería para aclarar dudas.

Al aplicar el análisis de Pareto, una herramienta reconocida por su capacidad para

identificar y priorizar los problemas más significativos se revela que una proporción
considerable, específicamente el 70%, de los defectos detectados en la página web
de la barbería MV Brothers están vinculados principalmente a dos áreas críticas. En
primer lugar, se destaca la sobreabundancia de imágenes en las interfaces, lo que
puede resultar una experiencia visualmente abrumadora y dificultar la navegación
fluida a través del sitio. En segundo lugar, se observa una carencia notable de
elementos interactivos y dinámicos diseñados para mantener el interés del usuario
durante su interacción con la plataforma.

Por consiguiente, se ha centrado esfuerzos en abordar estos dos aspectos en la

página web de la barbería MV Brothers, considerados como los principales defectos.
El objetivo es hacer que la página sea más dinámica e interactiva, lo que a su vez
la volverá más atractiva para los usuarios.
Este gráfico se basa en el principio de Pareto, lo que permite identificar y priorizar
de manera visual las áreas críticas en las que se requiere concentrar mayor
atención, ayudando a enfocar los recursos necesarios para lograr mejoras
significativas en las áreas que producen mayores beneficios.

Grafico 1 Análisis de Pareto

Fuente: Elaboración Propia

 DIAGRAMA DE ISHIKAWA

Mediante este diagrama se representa una evaluación de un problema y sus posibles causas, organiza estas causas en categorías
principales y subcausas, lo que ayuda a entender la complejidad del problema y a encontrar soluciones.

Materiales Medio Ambiente

Medición Uso de imágenes debido a Falta de control sobre la luz

limitaciones de presupuesto.
Falta de métricas claras para medir la
satisfacción del usuario. Ausencia de software de
diseño específico para
interfaces web.
Ausencia de herramientas de análisis
específicas.
Falta de herramientas
Evaluación inadecuada del impacto de adecuadas para el
la abundancia de imágenes. diseño.
Limitaciones en el acceso
Falta de seguimiento del
a bibliotecas de
comportamiento de la
transiciones de imágenes.
web.
natural.
Ambientes de trabajo
con iluminación Abundancia de imágenes
artificial insuficiente.
e interactividad en las
Iluminación inadecuada
interfaces de la página
en el entorno de trabajo.
web.
Cambios en la percepción del
color debido a la iluminación
ambiental.

Software de diseño Contratación de diseñadores sin Carencia de habilidades en la

obsoleto. experiencia en interfaces web. optimización de imágenes.

Limitaciones en las Falta de experiencia en Habilidades de diseño de

herramientas de diseño de diseño de software. software insuficientes.
software.
Planificación
Ausencia de formación
Incompatibilidad entre deficiente del diseño
específica en diseño de
dispositivos y navegadores. de interfaces.
interfaces.

Hardware insuficiente y Pantallas no calibradas Incapacidad para priorizar el

limitaciones de ancho de correctamente. contenido visualmente.
banda.

Maquinaria Método Mano de Obra

lIustración 1 Diagrama de Ishikawa

Fuente: Elaboración Propia
PLANTEAMIENTO
DEL PROBLEMA
 PLANTEAMIENTO DEL PROBLEMA

En el mundo del desarrollo web, se presentan numerosas alternativas que buscan

asegurar la entrega de proyectos de calidad. Estos proyectos no solo apuntan a la
creación de sitios web óptimos, sino que también aspiran a mejorar la eficiencia de
los negocios en su día a día, facilitando así el logro de metas y objetivos de manera
ágil. La correcta implementación de estas alternativas permite a las empresas tomar
decisiones fundamentadas que impulsan su crecimiento y su posición en el
mercado.

Es crucial destacar la complejidad de los componentes que conforman una página

web. La ejecución o programación de estos elementos puede resultar desafiante
debido a la diversidad de elementos. Desde la escritura del código hasta la
estructuración del diseño visual, cada detalle requiere atención para garantizar la
calidad del proyecto final. Es común encontrarse con situaciones en las que es
necesario programar o reestructurar componentes para satisfacer las necesidades
específicas del cliente y proporcionar una experiencia de usuario Ideal.

En el caso específico del desarrollo de la página web para la barbería MV Brothers,

se llevó a cabo un análisis por parte de expertos en el campo. Este análisis arrojó
una serie de sugerencias y recomendaciones destinadas a mejorar el sitio web
existente. Se identificó que se deberá mejorar la organización de los elementos en
las distintas interfaces del sitio, la falta de transiciones fluidas y una estructura poco
clara ya qué afectan negativamente la experiencia del usuario, lo que representa un
obstáculo para el cumplimiento de los objetivos del cliente.

En respuesta a estas observaciones, se realizarán ajustes específicos destinados a

optimizar la organización y la visualización del sitio web. Este proceso de mejora
continua reflejará el compromiso con la excelencia y la adaptación constante a las
necesidades de los usuarios por parte del dueño del negocio.
OBJETIVOS
 OBJETIVO GENERAL

Implementar modificaciones específicas destinadas a optimizar la disposición de las

interfaces, añadir transiciones suaves y enriquecer la interactividad para mejorar la
experiencia visual en la página web de la barbería MV Brothers ubicada en Almoloya
de Juárez.

OBJETIVOS ESPECÍFICOS

• Realizar un análisis detallado de la actual disposición de las interfaces en la

página web de MV Brothers.

• Identificar áreas de mejora en la disposición de las interfaces que puedan

afectar negativamente la experiencia visual del usuario.

• Diseñar e implementar nuevas disposiciones de interfaces que sean más

intuitivas y estéticamente atractivas.

• Investigar y seleccionar transiciones suaves que complementen la

experiencia visual general de la página web.

• Integrar las transiciones suaves de manera coherente y efectiva en las

diferentes secciones de la página web.

• Realizar pruebas de usabilidad para evaluar la efectividad de las

adecuaciones implementadas en la mejora de la experiencia visual.

• Recopilar y analizar retroalimentación de los usuarios para realizar ajustes

adicionales según sea necesario.

JUSTIFICACIÓN
 JUSTIFICACIÓN

En la actualidad, las páginas web son elemento fundamental para cualquier

empresa, ya que proporcionan una presencia digital. Funcionan como una
plataforma de comunicación y publicidad, permitiendo la interacción con clientes y
la promoción de productos o servicios. Además, sirven como una herramienta
estratégica para mejorar la visibilidad en línea y establecer credibilidad en el
mercado.

En el caso particular de la página web de la barbería MV Brothers presenta una

serie de desafíos que afectan negativamente la experiencia del usuario, incluyendo
una organización deficiente de los elementos en las distintas interfaces, la falta de
transiciones fluidas, y una estructura poco clara. Ante esta situación, se propone
realizar las adecuaciones necesarias destinadas a optimizar la disposición de las
interfaces y añadir transiciones suaves para mejorar la experiencia visual.

Para abordar estos desafíos de manera efectiva, se realizará un análisis detallado

de la actual disposición de las interfaces, con el fin de identificar espacios de mejora
que puedan afectar negativamente la experiencia visual del usuario. Este proceso
incluirá el diseño e implementación de nuevas disposiciones de interfaces que sean
más intuitivas y estéticamente atractivas, así como la investigación y selección de
transiciones suaves que complementen la experiencia visual de manera coherente
y efectiva en las diferentes secciones de la página web.

Los beneficios que tendrá el negocio con estas actualizaciones son una experiencia
online mejorada para los usuarios, el impulso al crecimiento a largo plazo, mayor
visibilidad, eficiencia incrementada y una posición más competitiva en el mercado,
todo enfocado en garantizar una experiencia de usuario de primera calidad.