INFORME FINAL

UNIDAD PRODUCTIVA:

DEVELOPERS

PRESENTADO POR:

Camilo Andres Diaz Montalvo

Nathalia Cruz Prada

Derian Antonio Epe Epe

1
 SERVICIO NACIONAL DE APRENDIZAJE (SENA)

CENTRO DE DESARROLLO AGROEMPRESARIAL Y TURÍSTICO DEL HUILA (CDATH)

LA PLATA-HUILA

202

Tabla de contenido
Introducción 4

Análisis del sistema 4

Roles dentro de la unidad productiva 4

Roles que ocupan dentro del equipo de desarrollo de software 5

Nombre del producto 5

Descripción del producto 6

Requerimientos funcionales y no funcionales 6

Requerimientos funcionales 6

Requerimientos no funcionales 6

Diseño del sistema 7

Diagramas de casos de uso 7

Diagrama de procesos 7

Diseño arquitectónico 8

Diccionario de datos 9

Diagrama Modelo Entidad-Relación 10

Diagrama relacional 10

Diagrama de la arquitectura del software 11

Interfaces gráficas 12

Componentes básicos 14

Codificación del sistema 15

Código de los módulos y las interfaces gráficas 15

Archivos HTML 15

Archivos CSS 38

Implementación y pruebas del sistema 63

2
 Manual técnico 63

Manual de usuario 63

Conclusiones 64

Manual técnico 64

Introducción 70

Objetivos 70

Objetivo general 70

Objetivos específicos 70

Contenido técnico 70

Arquitectura del sistema 70

Directorio App 71

Directorio Database 71

Directorio Public 71

Directorios adicionales 71

Cómo Ingresar al sistema web 72

Manual de usuario 72

Introducción 76

Objetivo 76

Manual de usuario 76

Dispositivos de escritorio 76

Cómo ingresar al sistema 76

Rol administrador 76

Cómo iniciar sesión 76

Cómo registrar un usuario 76

Cómo visualizar las asistencias 77

Rol usuario 77

Cómo iniciar sesión 77

Cómo Registrar su asistencia 77

3
1. Introducción

2. Análisis del sistema

2.1. Roles dentro de la unidad productiva

Los roles son asignados dependiendo del desempeño que ha demostrado cada

integrante de la unidad productiva.

Figura 1
Organigrama de la unidad productiva

Fuente: Propia

2.2. Roles que ocupan dentro del equipo de desarrollo de software

Es muy importante tener en cuenta que el desarrollo de software requiere destrezas y

habilidades, teniendo en cuenta que este tipo de proyectos sigue una serie de pasos

específicos que permiten llevar un proceso ordenado, además, cada uno de esos pasos

requiere de un integrante del equipo que cuente con las habilidades necesarias para realizar

un trabajo exitoso. Los roles son asignados dependiendo de las habilidades que ha

demostrado cada integrante de la unidad productiva.

Tabla 1
Roles dentro del equipo de desarrollo

4
 NOMBRE Y APELLIDO CARGO RESPONSABILIDAD
- Garantizar la calidad del desarrollo
y diseño del proyecto.
Gerente
- Gestionar el proyecto del área de
tecnología.
- Diseña interfaces de usuario.
- Se reúne con el cliente para la
aprobación del diseño.
Diseñador
- Valida el desarrollo de interfaces
para satisfacer las necesidades del
cliente.
- Codificar la especificación del
sistema.
- Reducir el tiempo de codificación.
- Explorar herramientas de
Programador
desarrollo.
- Explorar estilos de codificación.
- Disminuir el número de posibles
errores.

2.3. Nombre del producto

Se utilizó “OPTIX” como nombre del aplicativo web por requerimiento de la empresa

para la cual fue desarrollado este software.

2.4. Descripción del producto

Es un aplicativo web cuyo propósito es registrar el ingreso y salida de los funcionarios

a la empresa OPTIX llevando un control de las asistencias junto con sus novedades al

momento del ingreso.

2.5. Requerimientos funcionales y no funcionales

2.5.1. Requerimientos funcionales

- Solo se permitirá el acceso a los usuarios registrados por el administrador. Los

usuarios deben ingresar al sistema con un usuario y contraseña.

- Solo el administrador podrá realizar el registro de los usuarios.

5
 - Solo el administrador tendrá acceso a la información del registro de ingresos, salidas

y novedades

- Solo el administrador podrá hacer cambios de contraseña de usuario. El usuario

deberá enviar un correo al administrador solicitando el cambio de contraseña.

2.5.2. Requerimientos no funcionales

- El sistema será multiplataforma.

- El sistema requerirá conexión a internet.

- El sistema deberá consumir menos de 2 GB de memoria RAM.

- El tiempo de aprendizaje del sistema por un usuario deberá ser menor a 20 m.

- El sistema debe contar con manuales de usuario estructurados adecuadamente.

- El sistema debe tener un “diseño Responsive”

- El sistema debe tener interfaces gráficas adecuadas.

- El sistema debe ser intuitivo

3. Diseño del sistema

3.1. Diagramas de casos de uso

Figura 2
Diagrama de casos de uso

6
 Fuente: Propia

3.2. Diagrama de procesos

Figura 3
Diagrama de procesos

7
 Fuente: Propia

3.3. Diseño arquitectónico

Mediante el uso del patrón de diseño de arquitectura de software MVC, se logra

facilitar la programación del sistema web, ya que al separar el software en las tres etapas

que provee este diseño arquitectónico y los cuales son los siguientes: modelo, vista y

controlador, permite llevar ordenadamente el desarrollo de cada módulo del proyecto, facilita

el mantenimiento en caso de errores, también crea independencia de funcionamiento.

8
3.4. Diccionario de datos

Antes de codificar el sistema web, es necesario saber quién va a usar el sistema y qué

datos necesita ingresar el usuario para poder usar el sistema, por esta razón es necesario

tener disponible un diccionario de datos, ya que esta herramienta ayuda a recopilar las

características lógicas y puntuales de los datos que se van a utilizar en el sistema.

Tabla 2
Diccionario de datos

Tabla admin
Dominio
Atributo Descripción
Tipo Longitud PK
usuario Varios caracteres 50 No Nombre del administrador
contraseña Varios caracteres 60 No Contraseña del usuario

Tabla registro _user

Dominio
Atributo Descripción
Tipo Longitud PK
Contraseña Varios caracteres 10 No Contraseña del usuario
Nombre Varios caracteres 30 No Nombre del usuario
Apellido Varios caracteres 30 No Apellido del usuario
Identificación Varios caracteres 30 No Número de identificación del usuario
Contacto Varios caracteres 30 No Numero de celular del usuario
Correo Varios caracteres 30 No Correo electrónico del usuario

Tabla registro_dia
Dominio
Atributo Descripción
Tipo Longitud PK
Nombre Varios caracteres 10 Sí Nombre del usuario que hace el registro
Apellido Varios caracteres 50 No Apellido del usuario que hace el registro
Fecha Varios caracteres 10 No Fecha de registro del usuario
H_ Entrada Varios caracteres 10 No Hora de registro ingreso
H Salida Varios caracteres 1000 No Hora de registro salida
Novedades que registra el usuario al
Novedad Varios caracteres 5000 No
momento del registro

3.5. Diagrama Modelo Entidad-Relación

Figura 4
Diagrama Modelo Entidad Relación (MER)

9
 Fuente: Propia

3.6. Diagrama relacional

Figura 5
Diagrama relacional

Fuente: Propia

10
3.7. Diagrama de la arquitectura del software

Figura 6
Diagrama de componentes

Fuente: Propia

3.8. Interfaces gráficas

Figura 7
Página principal
}Fuente: Propia
Figura 8
Módulo Inicio de sesión

11
 Fuente: Propia

Figura 9
Módulo Administrador Registro de usuario

Fu

ente: Propia

Figura 10
Módulo Administrador Registro de dia

Fuente: Propia

12
Figura 11
Módulo Usuario Registro dia

Fuente: Propia

3.9. Componentes básicos

Durante el desarrollo del sistema web, se usan diferentes herramientas, cada una con

una finalidad distinta, permitiendo desarrollar software en el menor tiempo posible.

- LARAVEL: Laravel es un framework de código abierto para desarrollar aplicaciones y

servicios web con PHP 5, PHP 7 y PHP 8.

- XAMPP: Paquete de software libre, que consiste principalmente en el sistema de

gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para

lenguajes de script PHP y Perl.

- Navegador web: Programa que permite ver la información que contiene una página

web. El navegador interpreta el código, HTML generalmente, en el que está escrita la

página web y lo presenta en pantalla permitiendo al usuario interactuar con su

contenido y navegar.

13
 - Visual Studio Code: Editor de código fuente, desarrollado por Microsoft para

Windows, Linux y MacOS. Incluye soporte para la depuración, control integrado de

Git.

- HTML: (Lenguaje de marcas de hipertexto, del inglés Hyper Text Markup Language),

es el componente más básico de la web. Define el significado y la estructura del

contenido web

- CSS: (Hojas de estilo en cascada, del inglés Cascading Style Sheets), es un

lenguaje de diseño gráfico para definir y crear la presentación de un documento

estructurado escrito en un lenguaje de marcado.

- PHP: Lenguaje de programación de uso general que se adapta especialmente al

desarrollo web.

- MySQL: Sistema de gestión de bases de datos relacional desarrollado bajo licencia

dual: Licencia pública general/Licencia comercial por Oracle Corporation y es

considerada como la base de datos de código abierto más popular del mundo. Es

usada especialmente para entornos de desarrollo web.

4. Codificación del sistema

4.1. Código de los módulos y las interfaces gráficas

El sistema web fue codificado siguiendo el patrón arquitectónico MVC que nos brinda

el Framework de LARAVEL, especialmente usando los siguientes lenguajes: lenguaje base

PHP, lenguaje de marcado HTML, diseño gráfico CSS y como sistema gestor de bases de

datos MySQL.

4.1.1. Archivos HTML

Archivo 1
Inicio de sesión para el usuario y administrador.

14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{asset('css/sessions.css')}}" rel="stylesheet">
<title>Document</title>
</head>
<body>

<div class="login">
<div class="one box">
<div class="app-title">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
fill="currentColor" class="bi bi-eyeglasses" viewBox="0 0 16 16">
<path d="M4 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm2.625.547a3 3 0
0 0-5.584.953H.5a.5.5 0 0 0 0 1h.541A3 3 0 0 0 7 8a1 1 0 0 1 2 0 3 3 0 0 0
5.959.5h.541a.5.5 0 0 0 0-1h-.541a3 3 0 0 0-5.584-.953A1.993 1.993 0 0 0 8
6c-.532 0-1.016.208-1.375.547zM14 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/>
</svg>
</div>

<!-- Session Status -->

<x-auth-session-status class="mb-4"
:status="session('status')" />

<!-- Validation Errors -->

<x-auth-validation-errors class="mb-4" :errors="$errors" />
<div class="login-form">
<form method="POST" action="{{ route('login') }}">
@csrf

<!-- Identificacion -->

<div class="control-group">
<x-label for="identificacion"
:value="__('Identificación')" class="labelestilo" />

<x-input id="identificacion" type="identificacion"

name="identificacion" :value="old('identificacion')" required autofocus />
</div>

15
 <!-- Password -->
<div class="control-group">
<x-label for="password" :value="__('Password')"
class="labelestilo" />

<x-input id="password"
type="password"
name="password"
required autocomplete="current-password" />
</div>

<x-button class="btn">
{{ __('Log in') }}
</x-button>

<!-- Remember Me -->

<div class="control-group">
<label for="remember_me" class="labelestilo">
<input id="remember_me" type="checkbox" class="rounded
border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring
focus:ring-indigo-200 focus:ring-opacity-50" name="remember">
<span class="ml-2 text-sm text-gray-600">{{ __('Remember
me') }}</span>
</label>
</div>

</form>
</div>
</div>
</div>
</body>
</html>

Archivo 2
Módulo administrador registro dia

<!DOCTYPE html>

16
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/
vI1Bx" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="{{asset('css/tabla.css')}}" rel="stylesheet">
<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" MEDIA=screen>
</head>
<body>

<div>
<div class="one box">
<!-- Div Header-->
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
fill="currentColor" class="bi bi-eyeglasses" viewBox="0 0 16 16">
<path d="M4 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm2.625.547a3 3 0 0 0-
5.584.953H.5a.5.5 0 0 0 0 1h.541A3 3 0 0 0 7 8a1 1 0 0 1 2 0 3 3 0 0 0
5.959.5h.541a.5.5 0 0 0 0-1h-.541a3 3 0 0 0-5.584-.953A1.993 1.993 0 0 0 8
6c-.532 0-1.016.208-1.375.547zM14 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/>
</svg>
</div>

</a>
</div>

<div class="table-responsive ">

<table class="table col-md-4 ">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>

17
 <th scope="col">Fecha</th>
<th scope="col">Hora Entrada</th>
<th scope="col">Hora Salida</th>
<th scope="col">Novedad</th>
<th scope="col">Identificación</th>
</tr>
</thead>
<tbody >
<tr>
<th scope="row">1</th>
<td>Juan</td>
<td>Diaz</td>
<td >28/08/2022</td>
<td>08:00</td>
<td>11:00</td>
<td>Computador</td>
<td>1081410492</td>
</tr>
</tr>
</tbody>
</table>

</div>
</div>
</div>
</div>

</body>
</html>

4.1.2. Archivos CSS

Archivo 15
login.css

*{

box-sizing: border-box;

18
*:focus {

outline: none;

body {

font-family: Arial;

background-color: #17181F;

padding: 50px;

.login {

margin: 20px auto;

width: 300px;

.one {

padding: 20px;

position: relative;

width: 300px;

height: 475px;

margin: 0 10px;

border: 1px solid transparen;

.box {

background: #17181F;

background-clip: padding-box;

border-radius: 1em;

19
}

.box::before {

content: '';

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

z-index: -1;

margin: -3px;

border-radius: inherit;

background: linear-gradient(to right, #6A11CB, #CB69C1);

.app-title {

text-align: center;

color: white;

padding: 40px;

.login-form {

text-align: center;

margin: 0 auto;

.control-group {

margin-bottom: 10px;

20
}

input {

text-align: center;

border: 0px solid transparent;

border-radius: 3px;

font-size: 15px;

font-weight: 200;

padding: 10px ;

width: 250px;

transition: border .0s;

input:focus {

border: 2px solid #CB69C1;

box-shadow: none;

.btn {

border: 0px solid transparent;

font-size: 16px;

line-height: 24px;

padding: 10px ;

text-decoration: none;

text-shadow: none;

border-radius: 3px;

21
 box-shadow: none;

transition: 0s;

display: block;

width: 250px;

margin: 0 auto;

background: linear-gradient(to right, #6A11CB, #CB69C1);

color: white;

.login-link {

font-size: 17px;

color: white;

display: block;

margin-top: 12px;

.login-link-2 {

font-size: 17px;

color: white;

display: block;

margin-top: 12px;

padding: 2px 3px 30px 5px;

.scan-code{

text-align: center;

22
 color: white;

padding: 40px;

.labelestilo{

color: aliceblue;

Archivo 16
Registro_dia.css

.one{
padding: 20px;
position: relative;
width: 100px;
height: 100px;
margin-top: 4px;
border-top-right-radius: 40px 40px;
margin-right: auto;
}
.box{
background: #17181F;
padding-left: 20px;
width: 180px;
height: 100vh;

}
.box::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -3px;

23
 border-radius: inherit;
background: linear-gradient(to right, #6A11CB, #CB69C1);
}

/* Div header */
.icono{
text-align: center;
color: white;
padding: 40px;
}

/* Div links */
div a {
font-size: 14px;
color: #fff;
display: block;
padding: 12px;
padding-left: 26px;
text-decoration: none;
outline: none;
width: 160px;

/* Div link on hover */

div a:hover {
color: white;
background: #fff;
position: relative;
background-color: #fff;
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
background-image: linear-gradient(30deg, #6A11CB, #CB69C1);
}
body{
background: #17181F
}
.espacio{
padding: 30px;
}

24
 .col-md-4{
width: 50%;
margin: 0px auto;
padding: 5px;
background: #fff;
position: absolute;
right: 18%;
left: auto;
top: 80px;
border-radius: 8px;
background: #17181F;
color: #fff;
border-color: #fff;
border: 20px;

5. Implementación y pruebas del sistema

5.1. Manual técnico

Permite saber qué hacer en caso de que se presenten fallas en el sistema, ya que

especifica las rutas establecidas y el orden de los archivos que están almacenados en las

carpetas.

5.2. Manual de usuario

Permite a los usuarios capacitarse sobre el manejo del sistema, sus funciones y

limitaciones que este presenta.

6. Conclusiones

El desarrollo de software es un proceso que emana tiempo y dedicación, además,

requiere habilidades fundamentales que harán de este un proyecto productivo. Son muchos

los pasos que se deben de seguir para poder obtener y ofrecer el producto esperado, todo

25
depende del levantamiento de los requerimientos, y aunque parezca sencillo, es el aspecto

fundamental del proyecto, ya que, si el analista falla en el proceso del levantamiento de los

requerimientos, contará con la mala suerte de desarrollar un producto cuyo uso será

ineficiente ante las expectativas del usuario.

7.1. Manual técnico

26
 MANUAL TÉCNICO

UNIDAD PRODUCTIVA: DEVELOPERS

PRESENTADO POR:

Camilo Andres Diaz Montalvo

Nathalia Cruz Prada

Derian Antonio Epe Epe

SERVICIO NACIONAL DE APRENDIZAJE (SENA)

CENTRO DE DESARROLLO AGROEMPRESARIAL Y TURÍSTICO DEL HUILA (CDATH)

LA PLATA-HUILA

2022

27
Tabla de contenido

28
Introducción 4

Análisis del sistema 4

Roles dentro de la unidad productiva 4

Roles que ocupan dentro del equipo de desarrollo de software 4

Nombre del producto 5

Descripción del producto 5

Requerimientos funcionales y no funcionales 6

Requerimientos funcionales 6

Requerimientos no funcionales 6

Diseño del sistema 6

Diagramas de casos de uso 6

Diagrama de procesos 7

Diseño arquitectónico 8

Diccionario de datos 9

Diagrama Modelo Entidad-Relación 10

Diagrama relacional 10

Diagrama de la arquitectura del software 11

Interfaces gráficas 12

Componentes básicos 14

Codificación del sistema 15

Código de los módulos y las interfaces gráficas 15

Archivos HTML 15

Archivos CSS 38

Implementación y pruebas del sistema 63

Manual técnico 63

Manual de usuario 63

Conclusiones 64

Manual técnico 64

Introducción 70

Objetivos 70

Objetivo general 70

29
 Objetivos específicos 70

Contenido técnico 70

Arquitectura del sistema 70

Carpeta Model 71

Carpeta View 71

Carpeta Controller 71

7.1.1.1.1.1.
Carpetas adicionales 71

Cómo Ingresar al sistema web 72

Manual de usuario 72

Introducción 77

Objetivo 77

Manual de usuario 77

Dispositivos de escritorio 77

Cómo ingresar al sistema 77

Rol administrador 77

Cómo registrar un taller 77

Cómo publicar un nuevo producto 77

Cómo ver usuarios que necesitan ayuda 78

Cómo publicar anuncios 78

Rol cliente 78

Cómo ver la información de contacto de los talleres registrados 78

Cómo ver los productos que ofrecen los 78

Cómo registrar la falla de un vehículo 79

Dispositivos móviles 79

Cómo ingresar al sistema 79

Rol administrador 79

Cómo registrar un taller 79

Cómo publicar un nuevo producto 79

Cómo ver usuarios que necesitan ayuda 79

Cómo publicar anuncios 80

30
 Rol cliente 80

Cómo ver la información de contacto de los talleres registrados 80

Cómo ver los productos que ofrecen los talleres registrados 80

Cómo registrar la falla de un vehículo 80

Plan de capacitación 81

Introducción 83

Justificación 83

Objetivos 83

Categorización de usuarios 83

Metodología 84

Cronograma de actividades 84

Recursos 85

Formato de pruebas 85

Definición 85

Pruebas 86

Caja negra 86

Caja blanca 88

Interfaz gráfica 89

31
7.4.1. Introducción

El presente manual tiene como objetivo brindar a todo usuario técnico del sistema web

Optix, patrón arquitectónico empleado, funcionalidades específicas y demás asuntos de

sumo interés.

7.4.2. Objetivos

7.4.2.1. Objetivo general

Facilitar el control de asistencias de la empresa, registrando en la base de datos la fecha

de ingreso, hora de entrada, hora de salida y novedades de los funcionarios.

7.4.2.2. Objetivos específicos

- Permitir el acceso a los usuarios registrados por el administrador. Los usuarios

deben ingresar al sistema con un usuario y contraseña.

- Administrar el registro de los usuarios

- Administrar la información del registro de ingresos, salidas y novedades

- Realizar cambios de contraseña si el usuario lo requiere.

7.4.3. Contenido técnico

7.4.3.1. Arquitectura del sistema

El sistema web Optix, está diseñado bajo el patrón de desarrollo MVC (Model, View,

Controller) que brinda el framework LARAVEL, donde a cada elemento de este patrón le

corresponde una carpeta nombrada correspondientemente, pero antes de todo, es esencial

saber que este sistema web está desarrollado para trabajar con dos roles (administrador y

usuario). Tenga en cuenta que este diseño arquitectónico es desarrollado usando el estilo

de programación orientada a objetos (POO).

32
7.4.3.2. Directorio App

El directorio app contiene el código central de la aplicación. Eso incluye clases que

puedan ofrecer funcionalidad a la aplicación, archivos de configuración y más.

Consideramos el directorio más importante de nuestro proyecto ya que es en el que más

trabajaremos.

7.4.3.3. Directorio Database

Aquí se encuentran los archivos relacionados con el manejo de la base de datos. Dentro

de este directorio se encuentran los subdirectorios:

factories : Aquí escribiremos nuestros model factories.

migrations : Todas las migraciones que creamos se ubican en este subdirectorio.

seeds : Contiene todas las clases de tipo seed.

7.4.3.4. Directorio Public

Dentro de este directorio colocaremos todos los recursos estáticos de nuestra

aplicación, es decir, archivos css, js, imágenes y fuentes.

8.

7.4.4. Directorios adicionales

Directorio Resources

Dentro de este directorio se encuentran los subdirectorios:

● assets : Aquí se ubican todos los archivos less de nuestra aplicación (útil para

desarrolladores front-end).

● lang : Aquí se encuentran todos los archivos de internacionalización, es decir, los

archivos para poder pasar nuestro proyecto de un idioma a otro

33
 ● views : Aquí ubicamos nuestras vistas en formato php.blade, Una plantilla es una

vista general, que tiene segmentos que pueden ser reemplazados mediante la

herencia de plantillas.

Directorio Routes

El directorio routes contiene todas las definiciones de ruta para su aplicación. De forma

predeterminada, varios archivos de ruta se incluyen con Laravel: web.php, api.php,

console.php y channels.php.

7.4.5. Cómo Ingresar al sistema web

Al tratarse de un sistema web multiplataforma, el usuario podrá única y exclusivamente

ingresar a él a través de un navegador web, teniendo en cuenta que su dispositivo debe

estar conectado a internet.

7.5. Manual de usuario

Anexo 5

34
 MANUAL DE USUARIO

UNIDAD PRODUCTIVA:

DEVELOPERS

PRESENTADO POR:

Camilo Andres Diaz Montalvo

Nathalia Cruz Prada

Derian Antonio Epe

SERVICIO NACIONAL DE APRENDIZAJE (SENA)

CENTRO DE DESARROLLO AGROEMPRESARIAL Y TURÍSTICO DEL HUILA (CDATH)

LA PLATA-HUILA

2022

35
 Tabla de contenido
1. Introducción 4
2. Análisis del sistema 4
2.1. Roles dentro de la unidad productiva 4
2.2. Roles que ocupan dentro del equipo de desarrollo de software 5
2.3. Nombre del producto 6
2.4. Descripción del producto 7
2.5. Requerimientos funcionales y no funcionales 7
2.5.1. Requerimientos funcionales 7
2.5.2. Requerimientos no funcionales 7
3. Diseño del sistema 8
3.1. Diagramas de casos de uso 8
3.2. Diagrama de procesos 9
3.3. Diseño arquitectónico 9
3.4. Diccionario de datos 10
3.5. Diagrama Modelo Entidad-Relación 11
3.6. Diagrama relacional 11
3.7. Diagrama de la arquitectura del software 12
3.8. Interfaces gráficas 13
3.9. Componentes básicos 15
4. Codificación del sistema 17
4.1. Código de los módulos y las interfaces gráficas 17
4.1.1. Archivos HTML 17
4.1.2. Archivos JS 40
4.1.3. Archivos CSS 42
4.1.4. Archivos PHP 68
5. Implementación y pruebas del sistema 88
5.1. Manual técnico 88
5.2. Manual de usuario 88
5.3. Plan de capacitación 88
5.4. Plan de pruebas 88
6. Conclusiones 88
7. Anexos 89
7.1. Cronograma de actividades 89
7.2. Formato de entrevista 89
7.3. Manual técnico 91
7.4.2.2. Objetivos específicos 95

36
 7.4.3. Contenido técnico 95
7.4.4. Carpetas adicionales 97
7.5. Cómo Ingresar al sistema web 98
7.6. Manual de usuario 98
2. 1 será el valor más bajo 114
3. 5 será el valor más alto 114

37
7.5.1. Introducción

El manual de usuario es fundamental para el éxito de todo tipo de proyectos que

requiera su uso. Por esta razón, el siguiente manual de usuario ayudará a los usuarios a

comprender el correcto funcionamiento del sistema web Optix.

7.5.2. Objetivo

Presentar las diferentes funciones que el usuario puede realizar cuando ingrese al

sistema, teniendo en cuenta el rol que desempeña. Podrá conocer las instrucciones exactas

para que la experiencia de uso sea aún más satisfactoria. Es necesario que el usuario

conozca cuál es el objetivo del desarrollo del sistema web.

7.5.3. Manual de usuario

7.5.3.1. Dispositivos de escritorio

7.5.3.1.1. Cómo ingresar al sistema

Al tratarse de un sistema web multiplataforma, es fundamental que el usuario cuente con

un dispositivo con soporte a navegadores web en sus versiones más recientes. Si ya cuenta

con uno, solo deberás digitar en la barra del navegador la siguiente dirección localhost/optix.

7.5.3.1.2. Rol administrador

7.5.3.1.2.1. Cómo iniciar sesión

El administrador encontrará en el módulo de inicio de sesión los campos a llenar en los

cuales se encuentra Username y Password, luego de diligenciar los dos campos dará click

en login

7.5.3.1.2.2. Cómo registrar un usuario

El administrador deberá iniciar sesión desde su rol, dentro del módulo administrador

podrá visualizar al lado izquierdo de su pantalla una barra lateral la cual contiene el enlace

Registro usuario, luego de dar click en el enlace se proyectará un formulario en el cual

deberá diligenciar todos los datos y por último dará click en el botón de registrar.

38
7.5.3.1.2.3. Cómo visualizar las asistencias

El administrador deberá iniciar sesión desde su rol, dentro del módulo administrador

podrá visualizar al lado izquierdo de su pantalla una barra lateral la cual contiene un botón

de Usuario, luego de dar click en él se proyectará una tabla donde se podrán ver todos los

datos de los usuarios que han registrado su asistencia.

7.5.3.1.3. Rol usuario

7.5.3.1.3.1. Cómo iniciar sesión

El usuario encontrará en el módulo de inicio de sesión los campos a llenar en los cuales

se encuentra Username y Password, luego de diligenciar los dos campos dará click en

login

7.5.3.1.3.2. Cómo Registrar su asistencia

El usuario luego de iniciar sesión se proyectará el módulo de usuario donde encontrará

dos campos Username y Novedades, el usuario deberá diligenciar su nombre de usuario y

si va ingresar con algún equipo tecnológico que se pueda confundir con alguno de la

empresa deberá diligenciar la novedad dando detalles del articulo, luego de llenar los

campos dará click en el botón Registrarse, lo cual generará un reporte con la fecha y hora

de ingreso o salida.

39