Escolar Documentos
Profissional Documentos
Cultura Documentos
i/v
4.3 Estudio de factibilidad ............................................................................................................. 28
4.3.1 Factibilidad técnica........................................................................................................... 28
4.3.2 Factibilidad Económica..................................................................................................... 29
4.3.3 Factibilidad operativa ....................................................................................................... 30
Capítulo 5 - Desarrollo del proyecto ................................................................................................. 31
5.1 Casos de Uso ........................................................................................................................... 31
5.1.1 Diagramas de casos de uso .............................................................................................. 33
5.2 Diagrama de secuencia ........................................................................................................... 35
5.3 Diagramas de Clases ................................................................................................................ 35
5.4 Diagrama de contexto ............................................................................................................. 37
5.5 Diagrama de Navegación ........................................................................................................ 37
5.6 Diseño de la Base de Datos ..................................................................................................... 39
5.6.1 Modelo Entidad-Relación ................................................................................................. 39
5.6.2 Normalización del Modelo Entidad-Relación ................................................................... 40
5.6.3 Modelo Relacional ............................................................................................................ 41
5.6.4 Diccionario de Datos ........................................................................................................ 42
5.7 Diseño de la Interfaz Gráfica de Usuario................................................................................. 46
Capítulo 6 - Pruebas y Resultados ..................................................................................................... 52
Capítulo 7 - Conclusiones .................................................................................................................. 53
7.1 Competencias Desarrolladas o Aplicadas ............................................................................... 53
7.2 Conclusiones............................................................................................................................ 54
7.3 Recomendaciones ................................................................................................................... 58
Bibliografía ........................................................................................................................................ 59
Anexos ............................................................................................................................................... 60
........................................................................................................................................................... 61
ii / v
Índice de Figuras
Ilustración 1 Vista de la agencia google maps................................................................................... 17
Ilustración 2 plano planta baja .......................................................................................................... 18
Ilustración 3 plano planta alta........................................................................................................... 18
Ilustración 4 plano servicio................................................................................................................ 19
Ilustración 5 Plano de SITE ................................................................................................................ 19
Ilustración 6 Ejemplo de diseño de bosquejos de interfaz ............................................................... 46
Ilustración 7. Diseño de interfaz de usuario administrador con sketch............................................ 47
Ilustración 8 Diseño de Interfaz de inicio de sesión ......................................................................... 47
Ilustración 9 Diseño de interfaz de usuario panel de usuarios de administrador ........................... 48
Ilustración 10 Diseño de interfaz consulta de afluencia administrador ........................................... 49
Ilustración 11 Diseño de interfaz registro de afliencia...................................................................... 50
Ilustración 12 Diseño de interfaz visualizador de reportes RMD administrador .............................. 51
Ilustración 13 interfaz de acceso a usuario ....................................................................................... 56
Ilustración 14 interfaz de usuario, registro afluencia ....................................................................... 56
Ilustración 15 Interfaz panel de usuario ........................................................................................... 57
Ilustración 16 interfaz de visualización de reportes de actividad ..................................................... 57
iii / v
Índice de Tablas
Tabla 1 Entregables de la fase 1 de UWE .......................................................................................... 22
Tabla 2 Requerimiento Funcional 1. Iniciar sesión ........................................................................... 23
Tabla 3 Requerimiento Funcional 2. Registrar usuario ..................................................................... 23
Tabla 4 Requerimiento Funcional 3. Eliminar usuario ...................................................................... 23
Tabla 5 Requerimiento Funcional 4. Modifica información de usuario ............................................ 23
Tabla 6 Requerimiento Funcional 5. Visualizar reportes de afluencia .............................................. 23
Tabla 7 Requerimiento Funcional 6. Visualizar reportes de afluencia .............................................. 24
Tabla 8 Requerimiento Funcional 7. Consulta registros ................................................................... 24
Tabla 9 Requerimiento Funcional 8. Agregar nuevo prospecto........................................................ 24
Tabla 10 Requerimiento Funcional 9. Realizar encuesta de satisfacción ......................................... 24
Tabla 11 Requerimiento funcional 10. Actualizar registros .............................................................. 24
Tabla 12 Requerimiento Funcional 11. Enviar correo electrónico .................................................... 24
Tabla 13 Requisito Funcional 12. Generar reportes de actividad RMD ............................................ 25
Tabla 14 Requerimiento Funcional 13. Generar reportes de actividad afluencia a piso .................. 25
Tabla 15 Requerimiento No Funcional 1. Servidor web.................................................................... 26
Tabla 16 Requerimiento No Funcional 2. PHP 5 oporterior .............................................................. 26
Tabla 17 Requerimiento No Funcional 3. Mysql Como SGBD ........................................................... 26
Tabla 18 Requerimiento No Funcional 4. Servicio DNS..................................................................... 26
Tabla 19 Requerimiento No Funcional 5. Servicio Ftp ...................................................................... 26
Tabla 20 Requerimiento No funcional 6. Restricción de acceso a la aplicación ............................... 27
Tabla 21 Requerimiento No Funcional 7. Integridad referencial de la BD........................................ 27
Tabla 22 Requerimiento No Funcional 8. Manejo de sesiones de usuario ....................................... 27
Tabla 23 Requerimiento No Funcional 9. Nombre del requerimiento no funcional 3 ..................... 28
Tabla 24 Requerimiento No Funcional 10. Soporte de Navegadores ............................................... 28
Tabla 25 Caso de uso 1. Iniciar sesión ............................................................................................... 31
Tabla 26 Caso de uso 2. Registrar Usuario ........................................................................................ 31
Tabla 27 Caso de Uso 3. Eliminar Usuario ......................................................................................... 32
Tabla 28 Caso de Uso 4. Modifica usuario ........................................................................................ 32
Tabla 29 Casos de uso Administrador ............................................................................................... 33
Tabla 30 Casos de uso Dirección y Mercadotecnia ........................................................................... 34
Tabla 31 Casos de uso Hostess .......................................................................................................... 34
Tabla 32 Diagrama de clases ............................................................................................................. 36
Tabla 33 Diagrama de Navegación .................................................................................................... 38
Tabla 34 Modelo Entidad Relación.................................................................................................... 40
Tabla 35 Diagrama Relacional ........................................................................................................... 41
Tabla 36 Diccionario de datos. Tabla Usuario ................................................................................... 42
Tabla 37 Diccionario de datos. Tabla Prospecto .............................................................................. 43
Tabla 38 Diccionario de datos. Tabla Cliente .................................................................................... 43
Tabla 39 Diccionario de datos. Tabla Unidad .................................................................................... 44
Tabla 40 Diccionario de datos. Tabla Encuesta ................................................................................. 44
Tabla 41 Diccionario de datos. Tabla Info_Encuesta ........................................................................ 44
Tabla 42 Diccionario de datos. Tabla medio_Difusion ...................................................................... 45
Tabla 43 Diccionario de datos. Tabla tipo_prospecto ....................................................................... 45
iv / v
Tabla 44 Diccionario de datos. Tabla Llamada .................................................................................. 45
Tabla 45 Diccionario de datos. Tabla Sucursal .................................................................................. 45
Tabla 46 Diccionario de datos. Tabla Ctegoria .................................................................................. 45
Tabla 47 Ocurrencias de los gestos .......................................................Error! Bookmark not defined.
v/v
I. Resumen
Este reporte técnico está dedicado de sistematización de dos procesos de operación de la
empresa GASME automotriz S.A. de C.V. estos dos procesos tienen la finalidad de atraer
antiguos y nuevos clientes, pero con la ventaja de proporcionar datos que ayuden a
aumentar el interés de adquisición de unidad o servicio.
El primer proceso consiste en la afluencia a piso la cual esta tarea consiste en guardar la
información que proporcionan los clientes al visitar una sucursal se obtienen datos de
interés de los clientes los cuales son analizados y usados por el departamento de
mercadotecnia con el fin de ofrecer mejores servicios y captar mayor interés por parte de
dichos clientes.
El segundo proceso está enfocado en contactar a clientes los cuales adquirieron servicios o
unidades en años posteriores y los cuales podrían estar interesados en adquirirlos
nuevamente, este proceso es llevado a cabo mediante llamadas telefónicas ejecutadas por
los usuarios RMD, y tiene la finalidad de actualizar información de contacto y ofrecer como
ya menciono servicios o unidades.
La decisión de usar tecnologías web se basa en mayor experiencia y conocimiento por parte
del residente y también por la facilidad de implementación.
1 / 78
Abstract
This technical report is dedicated to the systematization of two operating processes of the
company GASME automotriz S.A. of C.V. These two processes have the purpose of
attracting old and new customers but with the advantage of providing data that help
increase the interest in purchasing a unit or service.
The first process consists of the influx to the floor which this task consists in keeping the
information provided by the clients when visiting a branch, obtaining data of interest of the
clients which are analyzed and used by the marketing department in order to offer better
services and attract more interest from those customers.
The second process is focused on contacting clients who acquired services or units in later
years and who may be interested in acquiring them again, this process is carried out through
telephone calls executed by RMD users, and is intended to update information contact and
offer as I mentioned services or units.
The concentration of the information obtained from the previous processes is stored in
physical form in printed formats for the case of the influx and in spreadsheets for the case
of the telephone call process, which means that the execution time of both processes is
slow and complicated
Once collected information on both processes, the marketing department makes activity
reports which contain statistical data that are reviewed by address for analysis, these
reports are generated manually using graphing tools available in Power Point.
The systems department of the company proposes a solution based on a web application
which offers a user interface that facilitates the collection of information and allows it to be
stored within a relational database and also offers an interface for consulting said
information which will be presented and graphed as it suits the company, for this a graphing
framework based on java script, and JQuery is used, which will allow the automation of the
creation of activity reports.
This application will be implemented through an Apache Web server mounted on a Linux
server based on CentOS version 7, for the diffusion the DNS service will be subtilized
allowing access to the users that are within the perimeter of the company network.
The decision to use web technologies is based on greater experience and knowledge on the
part of the resident and also for the ease of implementation.
2 / 78
II. Introducción
Dentro de este informe técnico podrá encontrar detalles de los procedimientos, actividades
y desarrollo que fueron llevados a cabo para alcanzar la sistematización de los procesos de
prospección de clientes inactivos y afluencia a piso de clientes nuevos que se llevan a cabo
en la automotriz GASME S.A. de C.V.
Por otro lado, la afluencia a piso se refiere al registro de información de los clientes que
visitan la agencia diariamente, esta información se obtiene directamente de los clientes a
manera de encuesta al ingresar por primera vez a la sucursal, al igual que el proceso anterior
esta información es utilizada con fines de marketing que permitan incrementar las ventas.
El departamento de sistemas de la empresa plantea una solución que ofrezca a los usuarios
llevar a cabo dichos procesos de una manera sistematizada, buscando optimizar el
desempeño de los empleados que intervienen en ellos y así también reducir el tiempo en
el que son llevados a cabo, la propuesta es una aplicación web utilizando una metodologías
y patrones de diseño garanticen la funcionalidad y efectividad de la misma.
Hoy en día las aplicaciones y tecnologías basadas en lenguajes de programación web han
tomado mayor fuerza sobre los lenguajes que se utilizan para el desarrollo de aplicaciones
desktop (Aplicaciones de escritorio) debido a su flexibilidad y a la gran cantidad frameworks
y herramientas disponibles que existen, Frameworks como “Electron JS” permiten crear
aplicaciones de escritorio nativas utilizando JavaScript, HTML y CSS, por otro lado Apache
Córdova permite crear aplicaciones móviles utilizando tecnologías web.
La aplicación propuesta propone el uso de las tecnologías HTML5, CSS3 y Boostrap 3 como
lenguajes de maquetación y estilos, por lado del cliente el lenguaje utilizado será JavaScript
y el procesamiento de la información del lado del servidor será llevado a cabo mediante
PHP. Esta aplicación utilizará un servidor web apache el cual se ejecutará en un entorno
Linux utilizando el sistema operativo CentOS 7 Los siguientes capítulos son dedicados al
desarrollo de la aplicación según la metodología de desarrollo elegida.
3 / 78
III. Definición del Problema
Por otro lado, el proceso de afluencia a piso por otro lado es llevado a cabo de manera
manual, el registro se realiza en una hoja control impreso, dichas hojas son almacenados a
manera de archivo, esto dificulta la consulta de dicha información en el futuro. Después de
ser registrado el prospecto es asignado con APV (Asesor de venta) para concretar la
adquisición de una unidad.
Del proceso de prospección por afluencia se espera reducir el tiempo de ejecución y mejorar
el control de los siguientes procesos.
4 / 78
• Controlar y cuantificar los registros generados de la afluencia a puso.
• Automatizar el proceso de generar reportes de afluencia.
• Asignación y control del cliente con un APV
5 / 78
IV. Objetivo General
Sistematización del proceso de prospección y afluencia a piso de GASME Automotriz, Commented [Office1]: Actualización de Objetivo General
mediante el desarrollo de una aplicación web que permita agilizar la tarea de recolección
de la información obtenida de los clientes durante el desarrollo de dichos procesos,
aumentado la productividad de los usuarios que se ven involucrados y con esto facilitar el
análisis y estudio de la información recopilada con fines relacionados al marketing.
6 / 78
V. Objetivos Específicos Commented [Office2]: Se actualizaron los objetivos
especificos según procesos y carcateristicas de ellos que se
planea mejoren o sean optimizados, en efecto como
menciono habia objetivos que se referian a funciones que
• Identificar, analizar y comprender el proceso de afluencia y prospección de debia cumplir la aplicación o de las cuales dependia.
clientes llevado a cabo en la automotriz GASME.
• Del análisis del proceso de afluencia y prospección determinar soluciones
tecnológicas que permitan la sistematización de dichos procesos.
• Reducir el tiempo en el que es llevado a cabo la recolección de información.
• Poder cuantificar el número de clientes que visita las 3 agencias de manera
regular.
• Analizar los registros generados de una manera más fácil y práctica.
• Acceso a la aplicación en las tres sucursales.
• Unificar la información en una base de datos única.
• Facilitar el acceso a la información a los directivos de la empresa.
• Permitir el control y gestión de usuarios.
• Introducción al análisis de datos.
7 / 78
VI. Justificación
Cada distribuidor Nissan tiene una certificación especifica que garantiza la calidad en los
servicios que provee, estas certificaciones permiten a Nissan establecer ciertos estándares
de calidad que puedan medir el nivel de cada distribuidor por sucursal, estos estándares se
forman de ciertas actividades y rutinas que deben de cumplirse en periodos predefinidos,
entre estas actividades se encuentra la afluencia y la prospección de clientes, por lo que
estos dos procesos son considerados como vitales, por lo que debemos mencionar el
impacto que la aplicación tendrá en el desarrollo de estas actividades a manera de lista se
hace mención de los principales beneficios que se obtendrán con el desarrollo e
implementación de la aplicación web así como la optimización de los sub tareas que se
involucran, en primer lugar el ahorro de tiempo al registrar un cliente nuevo, actualmente
el proceso de registro es llevado a cabo de manera escrita en checklist impresos por lo el
primer impacto positivo de la aplicación es reducir el tiempo de registro, lo segundo es la
reducción del papel involucrado en el proceso de afluencia, como lo mencionamos el
proceso es llevado a cabo de manera manual, este proceso es llevado a cabo en las tres
agencias por lo que se utiliza una cantidad considerable de papel, al hacer uso de la
aplicación los registros serán guardados en una base de datos, por lo que todos los checklist
impresos serán remplazados, la aplicación también facilitara la consulta de información de
meses y días anteriores gracias a la unificación de dicha información en base de datos única
para las tres agencias, es decir los usuarios podrán obtener la información que ha sido
registrada con anterioridad no importando la agencia o la fecha en que se hayan llevado a
cabo, como se mencionó la recopilación de esta información es necesaria debido a que es
analizada por el departamento de mercadotecnia con fines de marketing, al concentrar toda
esta información de manera centralizada permite que el análisis sea más efectivo y rápido,
gracias a la inclusión del framework Chart JS podemos graficar la información según
convenga y generar información estadística que sirva para comprender mejor dicha
información, las tecnologías web ofrecen la capacidad de poder acceder a la aplicación en
diferentes lugares de una manera fácil, utilizando la infraestructura de comunicación
disponible en la empresa, lo que representa una ventaja económica al no tener que adquirir
equipamiento extra para la difusión de la aplicación.
Como valor agregado cabe mencionar que el proyecto servirá como introducción a nuevas
tecnologías y técnicas tanto de desarrollo como de mercadotecnia dentro de la empresa,
esto es una gran ventaja porque permite aprovechar algunos beneficios y herramientas de
Big Data, sin la necesidad de adquirir un servicio profesional en cloud como por ejemplo la
solución de Oracle “Cloud Business Intelligence” la cual ofrece un sin fin de herramientas y
asesores para poder aprovechar al máximo la explotación de datos, sin embargo el costo es
elevado para que una empresa sin experiencia en el campo pueda adquirirlos, pero al
implementar la aplicación si los resultados obtenidos son los esperados se podrá analizar
8 / 78
con más cautela una posible adquisición de estos servicios teniendo un procedente de la
importancia y beneficios que estos ofrecen dentro de la operación de nuestra empresa.
Para el departamento de sistemas es una gran oportunidad de experimentar y obtener
experiencia ya que el proyecto involucra diferentes tecnologías que comprenden desde su
desarrollo hasta su implementación y difusión, por lo el proyecto ofrece una oportunidad
de crecimiento en conocimiento y promueve la actualización contaste de infraestructura y
capacitación por parte de los miembros del equipo
9 / 78
VII. Alcances y Limitaciones
La primera fase tiene que ver con la investigación de flujo de operación del o de los procesos
que se buscan sistematizar, aquí hacemos uso de la ingeniería de requerimientos para
obtener información de los usuarios que intervienen en dichos procesos y las funciones a
las que están ligados de esta fase obtenemos los alcances:
• Identificación de usuarios
• Diagramas de casos de uso
• Requerimientos funcionales
• Requerimientos no funcionales
La segunda fase corresponde al diseño lógico y funcional del sistema como tal, esto quiere
decir diseñar los elementos que interactúan directamente con el sistema o aplicación, de
esta fase se obtiene:
10 / 78
Las fases correspondientes que marcan la metodología UWE son:
Fase de pruebas
Fase de implementación
Fase de Mantenimiento
Debido a que la fase numero 3 (desarrollo) se encentra aún en proceso estas 3 últimas
etapas se encuetan detenidas lo que género que el proyecto tuviera las siguientes
limitantes:
Limitaciones en desarrollo
• Desarrollo de contacto de clientes para RMD
• Desarrollo de interfaz de encuesta de salida
• Desarrollo de interfaz de consulta de actividad RMD y hostess (Dirección)
• Desarrollo de interfaz de consulta de clientes inactivos RMD
Estos puntos serán llevados una vez concluya la fase de desarrollo la cual ya mencionas se
encuentra en continuidad.
11 / 78
VIII. Marco teórico
La afluencia de clientes se define como el proceso por el cual uno o más clientes acuden a
una tienda o sucursal directamente con el fin de adquirir un producto o servicio, algunas
técnicas del marketing digital señalan que el llevar un control y registro de la afluencia diaria
presentada permite el análisis de datos que en la actualidad es más conocida como big data,
este análisis en conjunto con áreas de la mercadotecnia como el Marketing y el E-Comerce
permiten a las empresas poder llevar a cabo campañas más atractivas a los clientes basados
en su propia información, de igual manera la prospección de clientes deriva del proceso
anterior, una vez que la atención de un cliente es captada este se convierte en prospecto
de compra-venta por lo que la empresa y los representantes de ventas deberán ofrecer al
cliente el producto/servicio que pueda agradar más y con esto garantizar la compra/venta.
Actualmente la relación del marketing y la era digital han causado que grandes compañías
inviertan en el análisis de grandes cantidades de información referentes a personas
interesadas en adquirir productos o servicios relacionados con el giro comercial de dicha
empresa, en este caso el big data es el análisis de información digital que impacta
directamente en la mercadotecnia que las empresas llevan a cabo principalmente mediante
el marketing y el E-commerce.
El big data es la técnica de estudiar grandes cantidades de información la cual es llevada a
cabo mediante la mezcla de la informática con la estadística. Toda la información analizada
por la big data es generada de un conjunto de subsistemas o aplicaciones, un ejemplo son
las búsquedas en un navegador el cual tiene un algoritmo programado para almacenar y
clasificar las búsquedas de un usuario, esta información puede ser obtenida por la empresa
dueña de dicho navegador y puede ser utilizada para mejorar la precisión de dichas
indagaciones o como se menciono puede ser utilizada con fines de marketing digital.
Otro de los términos relacionados con nuestro proyecto y las tecnologías empleadas en él
es el “Business Analytics”, este concepto al igual que el big data ha sido adoptado por las
empresas en la actualidad, lo que las ha obligado a contar con entornos de operación que
implementan todas las tecnologías antes mencionadas, dichos entornos son conocidos
también con el nombre de “Business Intelligence” todo esto se debe al aumento de
información generada día con día, como lo dice La famosa frase (Peter Drucker) “No se
puede administrar, lo que no se puede medir” (Behn, 2005).
Con lo anterior podemos afirmar que el desarrollo de una aplicación para la gestión y
control de los recursos obtenidos de la tarea o tareas derivadas del proceso afluencia y en
conjunto con las técnicas de análisis de datos y marketing digital permitirá a la empresa
poder mejorar sus campañas para obtener mejores resultados comerciales, sin embargo es
necesario conocer como Gasme Automotriz ejecuta actualmente este proceso, es decir cuál
es el orden de ejecución de los factores que interactúan con él, primero es necesario saber
que el objetivo principal es la sistematización de estos procesos es transformar el modo
12 / 78
actual de cómo es llevado a cabo uno o más procesos y en nuestro haciendo uso de TI,
sistematizar en un entorno de TI según Microsoft se refiere a la acción de ejecutar uno o
más tareas o procesos mediante el uso de herramientas tecnológicas que pueden involucrar
hardware o software, en nuestro caso haremos uso de tecnologías web que involucran el
desarrollo de software (aplicación web) y el uso de hardware (servidor web), la decisión de
utilizar de lenguajes de programación basados en tecnologías web tiene que ver
principalmente con la flexibilidad y curva de aprendizaje que estas ofrecen, es decir por el
lado de la flexibilidad no encontramos con un sin fin herramientas que facilitan la
integración de aplicaciones web con sistemas para los que no están diseñadas, esto quiere
decir que una aplicación web puede ser ejecutada en sistemas operativos móviles y de
escritorio mediante la utilización de dichas herramientas las cuales demandan poco
esfuerzo extra por parte de los desarrolladores, estas frameworks normalmente ofrecen la
posibilidad utilizar nuestra aplicación web en diferentes sistemas operativos sin la
necesidad de realizar un desarrollo nativo para cada sistema, este tipo de aplicaciones cada
día toman más fuerza en el mercado principalmente como ya lo mencionamos a la
portabilidad que ofrecen, cordova(web a móvil) y electrón JS (web a entornos de escritorio
Windows o Mac OS) son los principales frameworks que se utilizan para realizar este tipo
de aplicaciones, otro ejemplo de lenguajes que proponen este tipo de aplicaciones multi
plataforma es C# el cual hace uso de su framework .NET que en conjunto con Xamarin
hacen posible el desarrollo aplicaciones que puedan ser compatibles con todos los sistemas
disponibles, sin embargo C# demanda mayor conocimiento y mayores recursos para poder
llevar a cabo cualquier tipo de aplicación ya que es un lenguaje de programación más
robusto, es decir “puede proveer de más herramientas” que un lenguaje web como PHP y
JavaScript, con respecto a la curva de aprendizaje, el desarrollo web se considera más fácil
por algunos autores y desarrolladores ya que estos lenguajes normalmente se adaptan a
casi todos los paradigmas de programación.
A lo largo de este documento podrán encontrar más información con respecto al desarrollo
de la aplicación la cual le servirá para tener una mejor referencia del proyecto en general.
Aplicación web: Una aplicación web funciona en entornos basados en tecnologías web, por
lo cual necesita de un servidor web para que sea almacenada y ejecutada y que permita ser
accedida desde cualquier navegador web. Una aplicación web utiliza el modelo cliente
servidor el cual negocia las peticiones entre el cliente y la aplicación.
Servidor web: Un servidor web es un servicio de red ofrecido por un sistema operativo de
red el cual permite ejecutar ya almacenar páginas y aplicaciones web, un servidor web
puede ejecutarse en entornos Windows y Linux.
13 / 78
PHP: Lenguaje de programación web el cual se ejecuta del lado del servidor, esto quiere
decir que se encarga de la ejecutar y conceder las peticiones que son solicitadas por el
cliente.
JavaScript: Es un lenguaje de programación que te permite crear contenido nuevo y
dinámico, controlar archivos de multimedia, crear imágenes animadas y muchas otras cosas
más. (Aunque, no todo, pero es increíble lo que puedes llegar a hacer con tan sólo unas
pocas líneas de código de JavaScript).
HTML: es un lenguaje de marcado que usa la estructura para dar un sentido al contenido
web, por ejemplo, define párrafos, cabeceras, tablas, imágenes y vídeos en la página.
CSS: es un lenguaje de reglas en cascada que usamos para aplicar un estilo a nuestro
contenido en HTML, por ejemplo, colocando colores de fondo, fuentes y marginando
nuestro contenido en múltiples columnas.
Framework de desarrollo: el término framework, se refiere a una estructura software
compuesta de componentes personalizables e intercambiables para el desarrollo de una
aplicación. En otras palabras, un framework se puede considerar como una aplicación
genérica incompleta y configurable a la que podemos añadirle las últimas piezas para
construir una aplicación concreta.
Chart.JS: Chart JS es una librería basada en JavaScript y JQuery que permite grafica
información estática o información almacenada en una Base de Datos, la cual ofrece
diferentes tipos de gráficos.
Servidor Web: Un servidor web es un servicio que opera dentro de un sistema operativo el
cual tiene la capacidad de ejecutar y almacenar páginas y aplicaciones basadas en
tecnologías web, existen diferentes tipos de servidores web, los más conocidos son Apache
servidor web de código abierto y IIS servidor web disponible ´para los sistemas operativos
de red de Microsoft.
Servicios de red: Los servicios de red como su nombre lo dicen proveen servicios que son
puestos a difusión ya sea en redes locales o redes de internet, un servicio web por ejemplo
permite o facilita la obtención de recursos por parte de los usuarios.
14 / 78
LAN: Red de are local se caracteriza por ser una red de computadoras que se interconectan
entre si dentro del mismo perímetro de red.
Perímetro de la red: Define el tamaño de una red o conjunto de redes, solo los dispositivos
dentro del perímetro de una red pueden tener comunicación.
Casos de uso: Un caso de uso representa la interacción de un usuario con un proceso por
medio de este estudio se define el comportamiento que software deberá tener
dependiendo de las acciones del usuario.
Gestor de base de datos: Un sistema gestor de base de datos tiene la capacidad de crear y
administrar y gestionar información que se encuentre almacenada en una base de datos.
MVC: Es un patrón de diseño utilizando en desarrollo web que permite el control de los
elementos que participan el modelo cliente servidor, el patrón de diseño MVC propone un
sistema en el cual intervienen 3 elementos principales un modelo una vista y controlador.
MER: Modelo entidad relación es un esquema o modelo que permite el modelaje de base
de datos en su etapa inicial permite definir las entidades (tablas) y sus atributos y su relación
con otras entidades.
15 / 78
Modelo Relacional: El modelo relación pertenece a la segunda fase de diseño de base de
datos en esta fase las entidades se convierten en tablas y la relación que exista definirá la
estructura final de la base de datos.
16 / 78
Capítulo 2 - Antecedentes de la Empresa
2.1 Historia
2.3 Misión
Brindar a nuestros clientes y acreedores la mejor experiencia de relación de negocios en la
industria automotriz día tras día, guiándolos hacia una inversión inteligente, exitosamente
y totalmente satisfactoria para todos.
2.4 Visión
Ser el grupo de agencia número 1 de la zona centro, que brinde que mejore la mejor
experiencia de compra y servicios automotrices, creando relaciones duraderas con nuestros
clientes, proveedores, acreedores, accionistas y nuestro personal.
17 / 78
2.5 Política de Calidad
Satisfacer las necesidades de ventas, servicio preventivo y correctivo, así como el suministro
de partes originales para los vehículos de nuestros clientes, ofreciendo una mayor eficiencia
con procesos estandarizados de calidad avalados por Nissan Mexicana, logrando el
desarrollo permanente de nuestro capital humano
18 / 78
Ilustración 4 plano servicio
19 / 78
Capítulo 3 - Metodología de Desarrollo
3.1 Selección de la metodología
• Lenguajes de programación.
• Gestores de base de datos.
4. Pruebas: Se mide la funcionalidad de la aplicación, mediante pruebas.
• Pruebas entre navegadores.
• Accesibilidad.
• Seguridad.
• Funcionalidad.
• Concurrencia.
20 / 78
5. Fase de implementación: Representa el aspecto que tienen las actividades que se
conectan con cada clase de proceso.
• Requisitos de Hardware.
• Sistema operativo.
• Servidor web.
• Servicios y configuraciones de red.
6. Mantenimiento:
• Corrección errores.
• Depuración.
• Control periódico.
• Actualizaciones.
21 / 78
Capítulo 4 - Análisis de Requerimientos
Fase 1 de UWE
Entregables de la fase 1
Tabla 1 Entregables de la fase 1 de UWE
ID Nombre Descripción
22 / 78
Puede visualizar los reportes de afluencia a piso generados por el sistema de
acuerdo a las actividades registradas periódicamente por el hostess.
Mercadotecnia.
Puede visualizar los reportes por el sistema de acuerdo a las actividades generadas
periódicamente por los RMD.
Puede visualizar los reportes de afluencia a piso generados por el sistema de
acuerdo a las actividades registradas periódicamente por el hostess.
Nota: Todas las funciones de la aplicación tanto generales como especificas solo
podrán ser ejecutadas por usuarios registrados.
RF 1 Iniciar sesión
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
Inicio de sesión del usuario dentro de la aplicación
RF 2 Registrar usuario
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
Registro de usuario por parte del administrador.
RF 3 Eliminar usuarios
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
El administrador tiene la facultad de eliminar usuario de a aplicación.
23 / 78
Tabla 7 Requerimiento Funcional 6. Visualizar reportes de afluencia
RF 7 Consulta registros
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
El administrador y el usuario RMD puede consultar los registros de las funciones de hostess y
RMD
RF 10 Actualizar registros
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
El usuario RMD puede actualizar los registros de los clientes inactivos.
24 / 78
4.1.2 Referidos a la aplicación
El sistema genera reportes del tráfico de clientes en piso y clientes contactados por los RMD.
Basados en los siguientes parámetros:
RMD
Hostess
Generales
25 / 78
4.2 Requerimientos No Funcionales
4.2.1 Requisitos de Rendimiento
• Servidor web Apache o IIS para el alojamiento de la aplicación.
• PHP 5.0 o superior como lenguaje de programación del lado del servidor.
• MySQL como Manejador de base de datos.
• Servicio DNS activado para la resolución de nombres de dominios.
• Servicio FTP para la trasferencia de archivos con el servidor.
Tabla 15 Requerimiento No Funcional 1. Servidor web
RN 1 Servidor web
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
Es necesario un servidor web donde será alojada la aplicación permitiendo también su difusión.
RN 2 PHP 5 o posterior
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
EL servidor web debe soportar lenguaje PHP en su versión 5 o porterior
26 / 78
4.2.2 Requisitos de Seguridad
RN 7 Integridad referencial
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
Las tablas deben contener integridad referencial.
27 / 78
4.2.4 Requisitos de Portabilidad
• Responsividad.
• Soporte de navegadores Google Chrome, Firefox, Safari.
RN 9 Responsividad
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
La aplicación web se adapta a múltiples dispositivos.
RN 10 Soporte de Navegadores
Tipo: Requisito Restricción Prioridad: Esencial Deseado Opcional
La aplicación web es compatibles con diferentes navegadores.
Técnico
Operativo
Económico
4.3.1 Factibilidad técnica
La factibilidad técnica tiene que ver con los recursos y herramientas técnicas necesarias
para el desarrollo e implementación de nuestra aplicación web.
En primer lugar, al tratarse de un proyecto de desarrollo es necesario contar con los
conocimientos necesarios enfocados a las tecnologías de desarrollo elegidas, el desarrollo
web involucra directamente tres tecnologías base HTML, CSS y JavaScript y PHP además de
frameworks y librerías:
Desarrollo
28 / 78
Lenguaje de programación
Frameworks
Boostrap versión 3
Librerías
JQuery 3.1
Chart JS
Dejando de lado el desarrollo y diseño web entran en juego tecnologías de desarrollo del
lado del servidor
29 / 78
Software
HTML
CSS
JavaScript
PHP
Boostrap 3
Chart.js
JQuery
MySql
Cent OS
Apache
Las tecnologías de desarrollo escogidas no representan un costo por adquisición de recursos
ya que son tecnologías open Source.
Hardware
Servidor
El sistema operativo de red necesita ser instalado y configurado en un equipo que cumpla
con las características necesarias. Este equipo fue suministrado por departamento y no
represento gastos de adquisición.
4.3.3 Factibilidad operativa
La factibilidad operativa se refiere a todos los procesos que dependen de los recursos
humanos que participen durante la realización del proyecto se deben identificar todas las
actividades que son necesarias para lograr el objetivo.
30 / 78
Capítulo 5 - Desarrollo del proyecto
5.1 Casos de Uso
CU 1 Iniciar sesión
Descripción El usuario inicia sesión en la aplicación
Actor Principal Todos los actores Frecuencia de uso: Baja Media Alta
Precondiciones El actor debe estar registrado
Pos condiciones El actor accede a la interfaz de usuario
Disparador Servidor al acceder al dominio
Curso básico de Ingresa usuario y contraseña
eventos El sistema valida el formulario
El sistema permite el acceso
El usuario visualiza la interfaz de usuario
Extensiones de Ingresa usuario y contraseña
eventos El sistema valida el formulario
El sistema deniega el acceso por usuario o contraseña incorrecta
Excepciones
CU 2 Registrar Usuario
Descripción El administrado registra usuarios
Actor Principal Administrador Frecuencia de uso: Baja Media Alta
Precondiciones El actor debe estar registrado y ha iniciado sesión
Pos condiciones El actor accede a la interfaz de usuario
Disparador Servidor al acceder al dominio
Curso básico de Ingresa usuario y contraseña
eventos Registra al usuario
El sistema verifica que el usuario no exista
El sistema permite el acceso
El usuario visualiza la interfaz de usuario
Extensiones de Mensaje: El usuario ya existe
eventos Error Ingrese información correctamente
Excepciones
31 / 78
Tabla 27 Caso de Uso 3. Eliminar Usuario
CU 3 Registrar Usuario
Descripción El administrador elimina usuario
Actor Principal Administrador Frecuencia de uso: Baja Media Alta
Precondiciones El actor debe estar registrado y ha iniciado sesión
Pos condiciones El actor accede a la interfaz de usuario
Disparador Servidor al acceder al dominio
Curso básico de Elimina usuario
eventos El sistema elimina el usuario
Extensiones de Mensaje: El usuario no existe
eventos
Excepciones
CU 4 Registrar Usuario
Descripción El administrado registra usuarios
Actor Principal Administrador Frecuencia de uso: Baja Media Alta
Precondiciones El actor debe estar registrado y ha iniciado sesión
Pos condiciones El actor accede a la interfaz de usuario
Disparador Servidor al acceder al dominio
Curso básico de El usuario registra
eventos El sistema Valida la información
El sistema guarda el nuevo registro
Extensiones de El sistema validad la información
eventos Mensaje de erro el usuario ya existe
Excepciones
Consulte el apartado anexo para visualizar los casos de uso en el formato establecido por
UWE.
32 / 78
5.1.1 Diagramas de casos de uso
33 / 78
Tabla 30 Casos de uso Dirección y Mercadotecnia
34 / 78
5.2 Diagrama de secuencia
El diagrama de clases representa la abstracción de entidades que sirven para crear módulos
que serán utilizados en el desarrollo de una aplicación o sistema, una clase está compuesta
por atributos y métodos.
Las clases que están presentes en nuestro diagrama son las siguientes
• Login
• Usuario
• Administrador
• RMD
• Hostess
35 / 78
• Dirección
• Mercadotecnia
• Reportes
Login: La clase encargado del inicio de sesión y control de sesiones de los usuarios.
Usuario: Representa la abstracción de los usuarios en general, los cuales interactúan con el
sistema.
Reportes: Es la clase la cual se encarga de generar reportes de actividad relacionados con
los usuarios RMD y Hostess.
Las clases Administrador, RMD, hostess, Dirección y Mercadotecnia son clases hijo de la
clase usuario, esto quiere decir que comparten características y acciones, pero también
tienen acciones y características propias.
36 / 78
5.4 Diagrama de contexto
37 / 78
Tabla 33 Diagrama de Navegación
38 / 78
5.6 Diseño de la Base de Datos
5.6.1 Modelo Entidad-Relación
Declaración de entidades
• Prospectos
• Usuario
• Cliente
• Unidad
• Llamada
• InfoLlamada
• Encuesta
• InfoEncuesta
Prospecto: Se refiere a los clientes que son registrados derivados de la afluencia a piso en
cada agencia.
Usuario: Es la entidad relacionada a los usuarios que interactúan directamente con la
aplicación.
Cliente: Es la entidad relacionada con los clientes inactivos que provienen del proceso de
restauración de la base de datos del antiguo ERP.
Unidad: Se refiere a las unidades (Vehículos) que están ligadas directamente con los clientes
inactivos.
Llamada: El proceso de contacto de un cliente llevado a cabo por un RMD.
InfoLlamada: Entidad que tiene la finalidad de vincular a la entidad Llamada, usuario y
Clientes en la cual se almacena la información generada de la ejecución del proceso de
llamada, esta entidad pretende ser usada como catalogo para generar reportes.
Encuesta: Entidad relacionada con el proceso de encuesta que es ejecutado por el usuario
hostess.
InfoEncuesta: Vincula la entidad encuesta, usuario y prospecto, tiene la finalidad de guardar
la información generada de la ejecución del proceso de encuesta, esta entidad al igual que
InfoLlamada pretende ser usada como catalogo
39 / 78
Tabla 34 Modelo Entidad Relación
Una de las principales ventajas de normalizar una base de datos es evitar la duplicidad de
información, esto quiere decir que evita que exista información repetida en dos o más
tablas.
Existes varios niveles de normalización dependiendo del tamaño ya la complejidad de la
base de datos, no existe una regla como tal que indique hasta que forma normal debe estar
normalizada un base de datos, ya que esto también depende del criterio y experiencia del
DBA.
La normalización se lleva a cabo durante el proceso de transición entre una entidad y una
tabla, ya que la entidad es una abstracción de un sujeto o proceso el cual no puede ser
normalizado. Nuestra base de datos se encuentra normalizada hasta la tercera forma
normal.
40 / 78
5.6.3 Modelo Relacional
Modelo relacional - ER
El modelo relacional representa las tablas que integran la base de datos que han sido
normalizadas, muestra la relación entre tablas y su comportamiento cabe mencionar este
modelo es el último proceso que se realiza antes de comenzar con el desarrollo de la base
de datos.
Cada entidad del MER representa una tabla y cada atributo representa una columna de la
tabla, una vez que se tenga identificado las entidades, atributos y relaciones que serán
normalizadas se construyen el ER.
Tabla 35 Diagrama Relacional
41 / 78
5.6.4 Diccionario de Datos
Usuario
Llave Nombre Tipo Tamaño Descripción
PK usuario_id varchar 10 Identificador de usuario
nombre varchar 15 Nombre del usuario
apellidoPat varchar 20 Apellido Paterno del usuario
apellidoMat varchar 20 Apellido Materno del usuario
usuario varchar 10 Nombre de usuario
password varchar 15 Contraseña del usuario
FK sucursal_id varchar Identificador de tabla sucursal
FK categoría_id varchar Identificador de tabla categoría
Tabla
Llave Nombre Tipo Tamaño Descripción
PK usuario_id Varchar 10 Identificador de la fila primary key
ApellidoPat Varchar 20 Apellido paterno del usuario
42 / 78
Tabla 37 Diccionario de datos. Tabla Prospecto
Cliente
Llave Nombre Tipo Tamaño Descripción
PK cliente_id varchar 10 Identificador de cliente
nombre varchar 20 Nombre del cliente
apeliidoPat varchar 20 Apellido paterno del cliente
apellidoMat varchar 20 Apellido materno del cliente
e-Mail Correo electrónico del cliente
telefonoMovil Teléfono de contacto móvil
telefonoCasa Teléfono de contacto casa
dirección Domicilio del cliente
ciudad Ciudad de procedencia
estado Entidad federativa de
procedencia
Prospecto
Llave Nombre Tipo Tamaño Descripción
PK prospecto_id varchar 10 Identificador del prospecto
nombre varchar 20 Nombre del prospecto
apellidoPat varchar 20 Apellido paterno del prospecto
apellidoMat varchar 20 Apellido materno del prospecto
fecha_ingreso date 10 Fecha de registro
procedencia varchar 15 Lugar de procedencia
e-mail varchar 20 Correo electrónico del prospecto
telefonoCasa Varchar 15 Teléfono de contacto casa
telefonoMovil varchar 15 Teléfono de contacto celular
apv varchar 15 Asesor profesional de venta
asignado
vehiculo_interes varchar 15 Unidad de interés del cliente
color_interes varchar 15 Color de la unidad de interés
FK sucursal_id varchar Identificador de tabla sucursal
FK medio_id varchar Identificador de tabla medio de
medio de difusión
FK tipo_id Varchar Identificador de tabla tipo de
usuario
FK usuario_id varchar Identificador de tabla usuario
43 / 78
Tabla 39 Diccionario de datos. Tabla Unidad
Unidad
Llave Nombre Tipo Tamaño Descripción
PK unidad_id varchar 10 Identificador de unidad
VIN varchar 25 Número de serie único de cada unidad
tipoUnidad varchar 10 Tipo de unidad Nuevo o semi nuevo
descripción varchar 10 Características de la unidad
modelo varchar 10 Año de fabricación
fechaFactura varchar 10 Fecha de facturación de la unidad
FK cliente id varchar Identificador de la tabla cliente
Encuesta
Llave Nombre Tipo Tamaño Descripción
PK encuesta_id varchar 10 Identificador de encuesta
pregunta varchar 100 Preguntas de la encuesta
Info_Encuesta
Llave Nombre Tipo Tamaño Descripción
PK info_Id varchar 5 Identificador de tabla
FK usuario_id varchar Identificador de tabla usuario
FK prospecto_id varchar Identificador de tabla prospecto
44 / 78
Tabla 42 Diccionario de datos. Tabla medio_Difusion
Medio_difusión
Llave Nombre Tipo Tamaño Descripción
PK medio_id varchar 5 Identificador de medio de difusión
tipo varchar 20 Tipo de medio de difusión
tipo_prospecto
Llave Nombre Tipo Tamaño Descripción
PK tipo_id varchar 3 Identificador de tipo de prospecto
clase varchar 20 Clase de prospecto
llamada
Llave Nombre Tipo Tamaño Descripción
PK llamada_id varchar 5 Identificador de llamada
duración time Lapso de tiempo de la llamada
fecha date Fecha de ejecución de llamada
cliente_id varchar Identificador de la tabla Cliente
usuario_id varchar Identificador de la tabla usuario
Sucursal
Llave Nombre Tipo Tamaño Descripción
PK sucursal_id varchar 2 Identificador de la sucursal
nombre varchar 15 Nombre de la sucursal
descripción varchar 20 Detalles
Categoría
Llave Nombre Tipo Tamaño Descripción
PK categoría_id varchar 5 Identificador de Categoría del usuario
puesto varchar 15 Puesto del usuario
departamento varchar 15 Departamento del usuario
45 / 78
5.7 Diseño de la Interfaz Gráfica de Usuario
El diseño de interfaces se refiere al diseño de la interfaz o interfaces graficas con las cuales
interactúan directamente los usuarios, estas interfaces son un modelo preliminar de cómo
lucirá la aplicación una vez terminada y deben ser realizadas de acuerdo a la navegación
que se espera la aplicación ofrezca a los usuarios.
El diseño UI/UX (User Interface/User Experience), permite elaborar y diseñar interfaces de
aplicaciones web de una manera fácil y sencilla. El concepto de estos elementos tiene que
ver, en el primero caso con la interfaz y los elementos que el usuario visualiza, mientras el
que UX son las acciones que se generan de las interacciones del usuario con los elementos
antes mencionados. El primer paso para el diseño de interfaces es obtener el flujo de la
aplicación y plasmarlo en un bosquejo de la que será nuestra interfaz de usuario.
Una vez que contamos con nuestros bosquejos es necesario elegir el software de diseño de
interfaces que utilizaremos a lo largo del proyecto. Existen diversos softwares para el diseño
y modelado de las interfaces web, Adobe Photoshop, Ilustrador, Sketch, etc.
Sketch es uno de los softwares para diseño digital de interfaces más populares que existen,
debido a su uso intuitivo y a la gran cantidad de plugins disponibles, además de contener
múltiples herramientas que facilitan el trabajo a los diseñadores.
https://www.sketchapp.com/
46 / 78
Ilustración 7. Diseño de interfaz de usuario administrador con sketch
47 / 78
Ilustración 9 Diseño de interfaz de usuario panel de usuarios de administrador
48 / 78
Ilustración 10 Diseño de interfaz consulta de afluencia administrador
49 / 78
Ilustración 11 Diseño de interfaz registro de afluencia
50 / 78
Ilustración 12 Diseño de interfaz visualizador de reportes RMD administrador
51 / 78
Capítulo 6 - Pruebas y Resultados
• Pruebas
• Implementación
• Mantenimiento
No fueran llevadas a cabo debido a que la etapa de desarrollo Fase 3 de la metodología se
encuentra en proceso, una vez finalizada esta etapa se procederá a la evaluación de
resultados de la aplicación mediante su implementación por un tiempo de prueba en el que
los usuarios medirán el rendimiento y funcionalidades ofrecidas, estos resultados serán
evaluados por el departamento de sistemas en busca de errores o mejora y optimización
de funciones.
52 / 78
Capítulo 7 - Conclusiones
7.1 Competencias Desarrolladas o Aplicadas
Las competencias las cuales fueron desarrolladas fueron:
Ingeniería de software
53 / 78
7.2 Conclusiones
La etapa de pruebas no puede ser llevada a cabo hasta obtener el 70% de la funcionalidad de la
aplicación por lo que se encuentra en espera.
La etapa de mantenimiento no se concluye debido a que esta etapa depende directamente del
término de las 5 etapas antecesoras, por lo que se pospone hasta el término e implementación del
proyecto.
De igual manera el uso de un framework de diseño web como es boostrap 3 nos permite que el
desarrollo fronted se llevado a cabo de una manera rápida, fácil y estructurada, esto facilita las cosas
para desarrolladores que aun no dominan CSS3 ya que sus sistema de grillas hace que el
posicionamiento de los elementos pase de ser una tarea complicada a algo practico y sencillo de
igual manera boostrap 3 incorpora el diseño responsivo, esto quiere decir que la aplicación se
adaptar a dospositivos de cualquier tamaño, otra ventaja de boostrap es que al incorporar clases
predefinidas estas contienen estilos que no ahorran tiempo y esfuerzo, por ejemplo existen
diferentes tipos de barras de navegación y diferentes tipos de botones de los que podremos
disponer solo con incluir el nombre de la clase, pero la principal ventaja que encontramos durante
el desarrollo frontend de la aplicación fue que boostrap es el framework mas utilizado hoy en dia
por lo que existen comunidades, foros y basta documentación en caso de necesitar ayuda extra en
temas mas complejos.
54 / 78
Por otro lado chart .js es una framework basado en java script y boostrap 3 el cual nos permite
dispones de multiples diseño de graficas prediseñados que faciltan la tarea de graficar, chart js es
una framework open source por lo que nos poermite realizar modificaciones en sus condigo fuente
de ser necesario ademas pueden modificarse aspecto basicos como color, tamaño o tipo de grafico
que sera utilizado, con esta herramienta nos ahorramos el desarrollo de una funcion para graficar
desde 0, ademas que en comparación con google charts, chart js nos ofrece un mayor numero de
graficos disponibles y su nivel estetico es mayor esto ultimo podria interpretarse tambien a que sus
graficos son más bonitos que los de google chart.
El estatus del proyecto queda en desarrollo ya que tendrá continuidad y se actualizará nuevas
funciones y módulos.
55 / 78
Ilustración 13 interfaz de acceso a usuario
56 / 78
Ilustración 15 Interfaz panel de usuario
57 / 78
7.3 Recomendaciones
58 / 78
Bibliografía
59 / 78
Anexos
60 / 78
61 / 78
.
62 / 78
63 / 78
64 / 78
65 / 78
66 / 78
67 / 78
68 / 78
69 / 78
70 / 78
71 / 78
72 / 78
73 / 78
74 / 78
75 / 78
76 / 78
77 / 78
78 / 78