UNIVERSIDAD DE GUAYAQUIL FACULTAD DE INGENERÍA...

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE INGENERÍA INDUSTRIAL DEPARTAMENTO ACADÉMICO DE TITULACIÓN

TRABAJO DE TITULACIÓN

PREVIO A LA OBTENCION DEL TÍTULO

LICENCIADO EN SISTEMAS DE INFORMACIÓN

ÁREA

DESARROLLO DE SOFTWARE

TEMA

DESARROLLO E IMPLEMENTACIÓN DE UNA

APLICACIÓN WEB PARA EL CONTROL DEL

REPORTE TÉCNICO A CLIENTES MEDIANTE LA

FIRMA ELECTRÓNICA EN LA COMPAÑÍA EIKON

AUTOR

PRIAS SAMANIEGO PETTER LEANDRO

DIRECTORA DEL TRABAJO

ING. BELLO TOMALÁ YADIRA DEL ROCÍO, Mgs.

2017

GUAYAQUIL – ECUADOR

ii

DECLARACIÓN DE AUTORÍA

“La responsabilidad del contenido de este Trabajo de Titulación, me

corresponde; y el patrimonio intelectual del mismo a la Facultad de

Ingeniería Industrial de la Universidad de Guayaquil”.

PRIAS SAMANIEGO PETTER LEANDRO

C.C: 0930165089

iii

DEDICATORIA

Dedico mi tesis primeramente a Dios por brindarme la vida y a verme

puesto en el camino indicado para prepararme y desarrollar mis habilidades

y conocerme mejor tanto en el aspecto espiritual, como en el aspecto

profesional y para agradecerle por la familia que me ha dado.

A mis padres por estar pendiente de mí e impulsarme a ser una mejor

persona y darme su apoyo incondicional tanto a nivel moral y económico

cada vez que lo requería también por sus consejos a lo largo de esta etapa

que fueron claves; a mis hermanos que estuvieron atentos en cada paso

que daba y me brindaban su apoyo.

A mis abuelos y tíos por su voz de aliento y apoyo en cada paso que

daba que siempre estuvieron presente en momentos claves de mi vida que

requerí de su ayuda y me motivaron a continuar hasta el Final.

A mí mismo por tener la iniciativa, destreza y coraje de continuar hasta

el final de este camino, comprendiendo que el desarrollo personal es

prioridad y tener la satisfacción de que cumplí mi propósito.

iv

AGRADECIMIENTO

Agradezco en primer lugar a Dios por darme la creatividad,

perseverancia y me guío en todo el camino de esta meta gracias por el

apoyo incondicional.

A los tutores que me guiaron a lo largo de todo el proceso y por tener

la paciencia de explicarme el porqué de cada corrección y alentarme a

seguir hasta el final, les quedó totalmente agradecido.

v

ÍNDICE GENERAL

No. Descripción Pág.

PRÓLOGO 1

INTRODUCCIÓN 2

CAPÍTULO I

MARCO TEÓRICO


1.1 Antecedentes del Estudio 6

1.2 Documento Electrónico 6

1.3 La Biometría 7

1.4 La Firma electrónica & Digital 8

1.4.1 Firma Electrónica 8

1.4.1.1 Impacto entre Firma Electrónica & Firma Digital 10

1.4.1.2 Impacto entre Firma Digital & Firma Digitalizada 11

1.4.2 Firma Digital 11

1.4.2.1 Función Hash 14

1.4.2.2 Formatos de Firma Digital 15

1.4.2.2.1 CMS (Criptografic Message Syntax) 15

1.4.2.2.2 CADES (CMS Advanced Electronic Signatures) 15

1.4.2.2.3 XADES (XML Advaced Electronic Signature) 16

1.4.2.2.4 PADES (PDF Avanzado) 16

1.4.3 Adquisición de Certificado Firma Digital y A. C. 16

1.4.4 Marco Legal de la Firma Digital & Electrónica 20

1.4.4.1 Ley de Comercio Electrónico 20

1.4.4.2 Legalización de Documentos Mediante Firma Digital 21

1.5 Gestión Documentaria 22

1.5.1 Desarrollo de la Gestión Documental 23

vi


1.6 Metodología de Desarrollo 24

1.6.1 Metodología Iconíx 25

1.7 HTML 26

1.8 PHP 27

1.9 CSS 29

1.10 MySQL 30

1.11 Aplicación Web 31

1.12 Arquitectura del Sistema 32

1.12.1 Arquitectura de Dos Capas 32

1.12.2 Arquitectura de Tres Capas 33

1.12.3 Arquitectura de N-capas 33

1.5 Internet 34

CAPITULO II

METODOLOGÍA


2.1 Tipo de investigación 35

2.2 Metodología de Desarrollo 35

2.3 Población y Muestra 36

2.4 Técnicas de Recolección de Datos 36

2.4.1 Técnica de la Entrevista 37

2.4.2 Aplicación de la Entrevista 37

2.4.3 Resumen de la Entrevista de Especificaciones F. 37

2.4.4 Matriz de Resumen de Entrevista 37

2.5 Identificación del Problema 39

2.6 Metodología 40

2.6.1 Metodología Iconíx 40

2.7 Análisis de Requisitos 41

vii


2.7.1 Modelo de Casos de Uso 41

2.7.1.1 Listado de Actores y Funciones 42

2.7.1.2 Requerimientos Funcionales 42

2.7.1.3 Requerimientos no Funcionales 44

2.7.1.4 Diagrama de Casos de Uso 46

2.8 Modelo de Dominio 60

CAPITULO III

PROPUESTA


3.1 Tema 61

3.2 Objetivos 61

3.3 Entorno del Software 61

3.3.1 Arquitectura 62

3.3.1.1 Representación Modelo MVC 62

3.3.1.2 Capas de Desarrollo 62

3.3.1.3 Elementos que Componen la Arquitectura PHP 64

3.4 Fase de Diseño 65

3.4.1 Modelo – Diagrama de Clases 65

3.4.2 Diagrama de Actividades 66

3.4.2.1 Diagrama de Actividad Autentificación de Usuario 66

3.4.2.2 Diagrama de Actividad Gestionar Usuarios Técnico 67

3.4.2.3 Diagrama de Actividad Ingreso de Solicitud de T. 68

3.4.2.4 Diagrama de Actividad Asignación de Solicitud de T. 69

3.4.2.5 Diagrama de Actividad Ingreso de Actividades de S. 70

3.4.2.6 Diagrama de Actividad Gestionar Clientes 71

3.4.2.7 Diagrama de Actividad Consulta de Reporte Técnico 72

3.4.3 Modelo Entidad Relación 73

3.4.3.1 Diccionario de la Base de Datos 74

3.4.4 Lenguaje de Programación 74

viii


3.5 Diagrama de Secuencia 75

3.5.1 Diagrama de Secuencia Gestión de Usuario Técnico 76

3.5.2 Diagrama de Secuencia Gestión de Clientes 77

3.5.3 Diagrama de Secuencia Creación de Solicitud de T. 78

3.5.4 Diagrama de Secuencia Asignación de Solicitud 79

3.5.5 Diagrama de Secuencia Ingreso de Actividades de S. 80

3.5.6 Diagrama de Secuencia Consultar Reportes 81

3.6 Descripción de Desarrollo de Aplicación 82

3.7 Estudio de Factibilidad 83

3.7.1 Factibilidad Técnica 83

3.7.2 Factibilidad Económica 85

3.7.3 Factibilidad Operacional 87

3.7.4 Implementación 87

3.7.5 Mantenimiento 88

3.7.6 Impacto 89

3.8 Conclusiones 90

3.9 Recomendaciones 91

GLOSARIO DE TÉRMINOS 92

ANEXOS 93

BIBLIOGRAFÍA 132

ix

ÍNDICE DE IMÁGENES


1 Ubicación Física de la Empresa 3

2 Firma Electrónica 10

3 Creando y Verificando una Firma Digital 13

4 Algoritmo Hash 14

5 Automatización de Procesos en Gestión de la I. 23

6 Ejemplo de Código HTML 27

7 Ejemplo de Código PHP 28

8 Ejemplo de Código CSS 29

9 Ejemplo de Consulta de Datos en MYSQL 30

10 Estructura de Aplicación Web 32

11 Internet 34

12 Capas de Desarrollo 63

13 Arquitectura PHP 64

14 Modelo de Entidad Relación 73

x

ÍNDICE DE CUADROS


1 Firma Biométrica 9

2 Entidades para Certificación en el Ecuador 17

3 Tercero Vinculado – Security Data 18

4 Tercero Vinculado – ANF Autoridad de Certificación 19

5 Formato de Certificado Digital para la Web 32

6 Resumen de Entrevista para Obtención de Requisitos 38

7 Problemas Encontrados en Realización de Visita T. 40

8 Actores del Proceso 42

9 Cuadro de Requerimientos Funcionales 43

10 Cuadro de Requerimientos no Funcionales 45

11 Caso de Uso Autentificación de Usuario 47

12 Caso de Uso Gestionar Usuarios Técnicos 49

13 Caso de Uso Ingreso de Solicitud de Trabajo 51

14 Caso de Uso Gestionar Clientes 53

15 Caso de Uso Asignación de solicitud de trabajo 55

16 Caso de Uso Ingreso de actividades de servicio t. 57

17 Caso de Uso Consulta de Reportes 59

18 Características Técnicas de Computadora de Usuario 84

19 Características Técnicas del Servidor de la Empresa 84

20 Recursos 86

21 Detalle de Indicadores de Impacto 89

xi

ÍNDICE DE DIAGRAMAS


1 Diagrama de Caso de Uso General 46

2 Diagrama de Caso de Uso Autentificación de Usuario 47

3 Diagrama de Caso de Uso Gestionar Usuario Técnico 48

4 Diagrama de Caso de Uso Ingreso de Solicitud de T. 50

5 Diagrama de Caso de Uso Gestionar Clientes 52

6 Diagrama de Caso de Uso Asignación de solicitud 54

7 Diagrama de Caso de Uso Ingreso de Actividades de S. 56

8 Diagrama de Caso de Uso Consulta de Reportes 58

9 Diagrama Modelo de Dominio 60

10 Diagrama de Clase 65

11 Diagrama de Actividades Autentificación de Usuario 66

12 Diagrama de Actividad Gestionar Usuario Técnico 67

13 Diagrama de Actividad Ingreso de Solicitud de Trabajo 68

14 Diagrama de Actividad Asignación de Solicitud de T. 69

15 Diagrama de Actividad Ingreso de Actividades de S. 70

16 Diagrama de Actividad Gestionar clientes 71

17 Diagrama de Actividad Consulta de Reporte Técnico 72

18 Diagrama de Secuencia Gestión de Usuario 76

19 Diagrama de Secuencia Gestión de Clientes 77

20 Diagrama de Secuencia Ingreso de Solicitud de T. 78

21 Diagrama de Secuencia Asignación de solicitud 79

22 Diagrama de Secuencia Ingreso de Actividades de S. 80

23 Diagrama de Secuencia Consultar reportes 81

xii

ÍNDICE DE ANEXOS


1 Entrevista 94

2 Diagrama de ISHIKAGUA 98

3 Diccionario de Datos 99

4 Cronograma de Elaboración de Aplicación Web 103

5 Pantallas de la Aplicación Web 105

6 Instructivo de Instalación de Aplicativo 114

7 Manual de Usuario 117

xiii

AUTOR: PRIAS SAMANIEGO PETTER LEANDRO TÍTULO: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA EL CONTROL DEL REPORTE TÉCNICO A CLIENTES MEDIANTE LA FIRMA ELECTRÓNICA EN LA COMPAÑÍA EIKON DIRECTOR: ING. SYST. BELLO TOMALÁ YADIRA DEL ROCÍO, MGS.

RESUMEN

El presente trabajo de titulación plantea el desarrollo de una aplicación web para el control de reporte técnico a clientes utilizando firma electrónica en la compañía Eikon, cuyo objetivo primordial es el seguimiento de la solicitud de trabajo del servicio técnico asignado en el área de soporte, automatizar el proceso de entrega, documentar cada reporte generado y mejorar el respaldo digital de cada trabajo realizado para un control eficiente. La información presentada fue obtenida de entrevistas, libros y páginas oficiales de entidades que certifican el documento electrónico y firma electrónica como el Banco Central del Ecuador. Para el desarrollo de la aplicación se utilizaron lenguaje de programación PHP y base de datos MySQL, y herramientas de software libres. La utilidad de la aplicación es considerable para la empresa porque no posee una herramienta que permita optimizar el proceso del servicio y dar una mejor presentación al cliente.

PALABRAS CLAVES: Desarrollo, Aplicación Web, Firma Electrónica, Implementación, Empresa, Servicios Tecnológicos.

Prias Samaniego Petter Leandro Ing. Syst. Bello Tomalá Yadira, Mgs

C.C. 0930165089 Directora del Trabajo

xiv

AUTHOR: PRIAS SAMANIEGO PETTER LEANDRO SUJECT: DEVELOPMENT AND IMPLEMENTATION OF A WEB APPLICATION FOR THE CONTROL OF THE TECHNICAL REPORT TO CUSTOMERS THROUGH THE ELECTRONIC SIGNATURE IN THE EIKON COMPANY DIRECTOR: SYST. ENG. BELLO TOMALÁ YADIRA DEL ROCÍO, MGS.

ABSTRACT

The present final work of graduation establishes the development of a

web application for the control of technical report to clients using electronic the company Eikon, whose main objective is the work request tracing of the technical service, assigned in the support area, automatizing the delivery process, documenting each generated report and enhancing the digital support of each work performed for an efficient control. The information presented was obtained from interviews, books and official pages of companies that certify the electronic document and the electronic signature such as the Central Bank of Ecuador. For the development of the application the PHP programming language and MySQL database, and free software tools where used. The usefulness of the application is considerable for the company because, it does not have a tool that allows to optimize the service process and give a better presentation to the client.

KEY WORDS: Development, Web Application, Electronic Signature,

Implementation, Business, Technological Services.

Prias Samaniego Petter Leandro Syst. Eng. Bello Tomalá Yadira, Mgs

I.C. 0930165089 Director of Work

PRÓLOGO

Este proyecto tiene como título Desarrollo e Implementación de

Aplicación web para el Control de Reporte Técnico a Clientes utilizando

firma electrónica en la compañía Eikon que permite gestionar el proceso de

servicio de visita técnica y mantenimiento que se realiza a los clientes de la

Empresa.

El propósito de la aplicación es llevar un control de todo el proceso

que inicia desde la solicitud de servicio por parte del cliente hasta realizar

la visita por parte del técnico asignado y el envío del reporte del trabajo

realizado.

Este proyecto de aplicativo web está estructurado en 3 capítulos, los

cuales son detallados a continuación:

Capítulo 1: Elaboración del Marco Teórico, se investiga las

herramientas de desarrollo que van a ser utilizadas en el trabajo de

investigación.

Capítulo 2: Descripción de la metodología, en este capítulo se realiza

el levantamiento de información de acuerdo a las técnicas utilizadas para

la investigación entrevista, elaboración de casos de uso y diagramas.

Capítulo 3: La propuesta de la investigación en la cual se detalla paso

a paso todo el proceso de la solución que incluyen los diagramas de

actividades de los procedimientos que se aplicó durante todo el proyecto

en la compañía, complementado con la conclusión y recomendaciones

sobre el desarrollo de la aplicación web.

INTRODUCCIÓN

Tema

DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB

PARA EL CONTROL DEL REPORTE TÉCNICO A CLIENTES MEDIANTE

LA FIRMA ELECTRÓNICA EN LA COMPAÑÍA EIKON

Introducción

Como consecuencia del avance de las Tecnologías de Información

tanto en el ambiente web, como móvil y la manifestación del correo

electrónico en los procesos de una organización se llegó a vaticinar que el

papel desaparecería de las oficinas de forma definitiva (Esteban Navarro,

2001).

En la práctica el efecto es totalmente lo contrario; en la actualidad las

Tecnologías de la Información y las Comunicaciones en lugar de limitar el

uso del papel en las actividades diarias, está a incrementó su uso al facilitar

el acceso desde cualquier medio sea desde su casa u oficina, puedan

imprimir los documentos con la información que sea de su importancia

(Esteban Navarro, 2001).

Actualmente el término ha vuelto a tomar fuerza en muchas empresas

y gobiernos descentralizados que desean automatizar sus procesos para

de esta forma mejorar los procesos y de esta forma enganchar a nuevos

clientes con mejores productos y servicios (Fernández C., 2016). Las

tecnologías de información se están renovando continuamente por lo cual

debemos estar actualizados y desarrollar aplicaciones web para mejorar los

Introducción 3

procesos y ganar ventaja sobre las demás competencias, para el desarrollo

del aplicativo web se utilizarán las siguientes herramientas Open Source

como PHP, CSS y MySQL ya que con su fácil compatibilidad de interfaz en

cualquier servidor se adapta a los objetivos del proyecto.

Objeto de la investigación

Desarrollar una aplicación informática que permite tener un mejor

control y almacenamiento de los reportes técnicos, generando los

documentos en formato digital y almacenarlos en una base de datos en los

servidores de la compañía.

El reporte del servicio técnico y mantenimiento de la compañía EIKON

es llevado de manera física por medio de formularios donde el personal

técnico detalla los antecedentes, descripciones previo al trabajo realizado

y no se lleva un control al archivar los reportes de forma que sufren pérdidas

o daño por mala manipulación.

Este proyecto busca impulsar y automatizar los procesos donde

interviene la impresión de archivos físicos para el soporte técnico a

clientes, que se puede lograr llevando a cabo una mejor administración de

los recursos tecnológicos que posee la compañía.

IMAGEN Nº 1

UBICACIÓN FÍSICA DE LA EMPRESA

Fuente: Google Maps Elaborado por: Prias Samaniego Leandro

Introducción 4

Justificación

En la actualidad con el auge del desarrollo de las Tecnologías de

Información y Comunicaciones (Tics), estar conectados y consultar

información es frecuente entre las personas de esta forma se mantienen

informados de sus intereses individuales, principalmente en las redes

sociales que es donde encontramos la mayor cantidad de usuarios activos.

Según Parkes, (2015) indica que 3.200 millones de personas están ahora

en línea lo que representa el 43, 4% de la población mundial.

Con respecto a Ecuador según un estudio del Instituto de Estadísticas

y Censos (INEC), en el 2006 solo el 2.5% de los ecuatorianos tenía acceso

a internet. En la actualidad la cifra sobrepasa el 1000 %, es decir que el

26.1% usa internet. El estudio revela que el 83% de los encuestados se

conecta a internet a través de los smartphones y el 17% restante por

computadoras o tablets. Según las proyecciones se estima que, a este

ritmo, dentro de ocho años, el 50% de la población contara con internet

(Suarez, 2015).

Los gobiernos descentralizados y empresas privadas están

aprovechando las ventajas que tienen los usuarios conectados online para

marcar diferencia entre sus competidores mejorando sus servicios y captar

la atención de clientes a través de la publicidad y marketing online, de esta

forma ganar nuevos clientes potenciales y ofrecerles nuevas herramientas

desarrolladas con las tecnologías de información que promueve la agilidad

del trámite documentario en línea evitando el proceso papeleo adicional de

esta manera aprovechan de manera óptima los recursos.

Por medio del desarrollo de esta aplicación web se busca promover la

importancia de utilizar documentos electrónicos y firma electrónica para

disminuir el uso de papel en los procedimientos de las organizaciones

referente a la gestión documental llevando un eficiente control. En varios

Introducción 5

documentos al ser digitalizado y con el uso de la firma electrónica darle

validez legal al documento.

Objetivos de la investigación

Objetivo general

Desarrollar e Implementar un sistema web utilizando documentos

electrónicos y mediante el uso de la firma electrónica darle validez legal,

para mejorar el servicio técnico y la gestión documentaria del trabajo

realizado al cliente.

Objetivos específicos

✓ Recopilar información sobre el uso de la firma electrónica en

los documentos.

✓ Definir y establecer los diferentes actores y roles que

intervienen en el servicio técnico de acuerdo a la metodología

Iconíx.

✓ Desarrollar una aplicación web que permita el manejo de la

firma electrónica en los diferentes documentos del servicio

técnico para validar la calidad del servicio.

✓ Realizar pruebas con la aplicación y generar el documento

electrónico.

✓ Llevar un control de las solicitudes de trabajo generadas

mediante un estado de reporte que indicará el ingreso,

asignación, devuelta y terminó del servicio técnico.

✓ Generar reporte del servicio técnico en archivo PDF.

✓ Realizar envío del reporte generado del servicio realizado al

correo del cliente.

✓ Generar instructivo para la instalación del aplicativo web.

✓ Generar manual de usuario para manejo del aplicativo web.

CAPÍTULO I

MARCO TEÓRICO

1.1 Antecedentes del estudio

En la actualidad con el auge del desarrollo de las Tecnologías de

Información y Comunicaciones (Tics), la demanda de conservar los

recursos naturales por efectos del calentamiento global, se han llevado a

cabo nuevos estudios para aprovechar los recursos de la infraestructura TI,

dándole paso a los términos de documento y firmas digitales, la Ley de

Comercio Exterior ha logrado que proyectos de la misma índole hayan sido

impulsados exponencialmente para que las organizaciones tanto públicas

como privadas mejoren sus procesos y estos se encuentren respaldados

bajo el marco legal.

1.2 Documento electrónico

Rodríguez & Viega (2007) explica que la función de la informática y

las nuevas técnicas de comunicación, así como la transferencia electrónica

de datos, que permite intercambiar mensajes electrónicos en lugar de

documentos escritos, son elementos del actual contexto digital que

revalúan la concepción tradicional del documento y dan paso a los

documentos electrónicos. El mensaje electrónico de datos es la esencia de

los documentos electrónicos.

Desde el punto de vista amplio el documento electrónico es un objeto

físico que permite tener un respaldo tangible con respecto a la

documentación administrativa cuya finalidad es conservar y transmitir

información.

Marco Teórico 7

Soler (2008) demuestra que los documentos electrónicos pueden ser

utilizadas en un entorno analógico y electrónico, un elemento que ha

cambiado en el nuevo entorno electrónico es el significado de la forma. En

el ámbito electrónico la forma ha entrado en crisis porque no existe una

forma física visible al ojo humano, sino una codificación informática que lo

ha virtualizado.

También define al documento analógico como el que se representa

mediante soportes, como el papel, que suelen ser inteligibles para el ojo

humano y tienen un impacto visual directo. Y en cuanto al documento

electrónico como el que tiene que ser interpretado y mostrado al ojo

humano mediante el ordenador.

De acuerdo con Arías Pou (2006) indica que el documento electrónico

está íntimamente unido a la eficacia y la prueba de la firma electrónica, en

el documento electrónico que se incorpora. Se reconoce así la posibilidad

de que los documentos electrónicos tanto públicos como privados sean

objeto de soporte electrónico y tengan plena eficacia jurídica cuando hayan

sido firmados electrónicamente. De este modo se le otorga la validez

jurídica del documento electrónico independiente de la firma electrónica

que incorpore, esto es, si incorpora una firma electrónica reconocida,

avanzada o electrónica se someterá a las reglas generales de la prueba

documental.

Luego de analizar los distintos puntos de vistas de los autores,

podemos resumir que certificación electrónica de un documento por medio

de firma electrónica o digital es fundamentalmente un tema de confianza y

seguridad.

1.3 La Biometría

La Biometría es la parte de la biología que estudia en forma

cuantitativa la variabilidad individual de los seres vivos utilizando métodos

Marco Teórico 8

estadísticos, por cual se realiza mediciones en forma electrónica, guarda y

compara características únicas para la identificación de personas, entre

una de las forma que se realiza la identificación consiste en la comparación

de características físicas de cada persona con un patrón conocido y

almacenado en una base de datos (Rodríguez & Viega, 2007).

Los lectores biométricos tienen distintos procedimientos para

identificar a la persona que puede ser realizado desde las manos, ojos,

huellas digitales y voz, como indica Rodríguez & Viega (2007) explica que,

con relación a las diferentes técnicas utilizadas para firmar

electrónicamente un documento, se pueden distinguir entre las siguientes:

▪ Una técnica disponible es el uso de una tableta sensible y un lápiz

magnético conectados a un PC donde se registra la presión,

velocidad y coordenadas donde el operador apoya el lápiz. Esos

datos se combinan matemáticamente para formar la “firma

electrónica” de la persona. Posteriormente, se puede comparar esa

firma almacenada con otra para verificar si pertenecen a la misma

persona.

▪ Emisión de calor: se mide la emisión de calor de un cuerpo

(termograma) realizando un mapa de valores sobre la forma de cada

persona.

▪ Otra técnica de firma electrónica disponible en el mercado podría ser

el registro de la huella digital y de ciertos factores biológicos de la

piel que identifican unívocamente a la persona. El dispositivo

consiste en un tablero donde la persona coloca su dedo. Allí se

digitalizan la huella y los parámetros biológicos del dedo de la

persona, de tal forma que es imposible reproducirlos salvo que se

obligue a la persona a colocar su dedo en el dispositivo.

▪ Verificación de la voz: la dicción de una (o más) frase es grabada y

en el acceso se compara la voz (entonación, agudeza, etc.). Este

Marco Teórico 9

sistema es muy sensible a factores externos como el ruido, el estado

de ánimo y enfermedades de la persona, envejecimiento, etc.

▪ Verificación de patrones oculares: estos modelos pueden ser

basados en patrones del iris o de la retina y hasta el momento son

los considerados más efectivos.

CUADRO Nº 1

FIRMA BIOMÉTRICA

Fuente: https://securitcrs.wordpress.com/firma-electronica/ Elaborado por: Prias Samaniego Leandro

1.4 La firma electrónica & digital

1.4.1 Firma electrónica

La firma electrónica en el documento digital es de suma importancia

para darle una mayor veracidad al documento en los procesos importantes

de la organización, también se puede entender como cualquier método o

símbolo basado en medios electrónicos utilizado o adoptado por una parte

con la intención actual de vincularse o autenticar un documento,

cumpliendo todas o algunas de las funciones de la firma manuscrita (Soler,

2008).

La firma electrónica a su vez puede tener diferentes técnicas para

firmar un documento y permite darle una integridad al documento, así

tenemos las siguientes:

Marco Teórico 10

➢ Código secreto o de ingreso: es la necesidad de una combinación

determinada de números o letras, que son sólo conocidas por el

dueño del documento, o lo que todos usamos, por ejemplo, en los

cajeros automáticos, es el famoso PIN o Personal Identification

Number.

➢ Métodos basados en la Biometría: se realiza el acceso al

documento mediante mecanismos de identificación física o

biológica del usuario o dueño del documento.

IMAGEN Nº 2

FIRMA ELECTRÓNICA

Fuente: http://www.validatedid.com/es/ Elaborado por: Prias Samaniego Leandro

1.4.1.1 Impacto entre firma electrónica y firma digital

La firma electrónica comprende que una persona verifica una

determinada acción a través de cualquier medio electrónico. Se crea un

registro o historial en el que consta la fecha y los datos de quien lo ha

introducido.

La firma digital también conocido como mecanismo criptográfico que

permite al receptor envíe un mensaje firmado digitalmente, y luego

determinar la entidad originadora de dicho mensaje autenticación de origen

Marco Teórico 11

y confirmar que el mensaje no ha sido alterado desde que fue firmado por

el emisor. La firma digital se aplica en aquellas áreas donde es importante

poder verificar la autenticidad y la integridad de ciertos datos, por ejemplo,

documentos electrónicos o software, ya que proporciona una herramienta

para detectar la falsificación y la manipulación del contenido. Toda firma

digital será firma electrónica, pero no toda firma electrónica será firma

digital (Secur-IT, 2017).

1.4.1.2 Impacto entre firma digital y firma digitalizada

La firma digital es un proceso de cifrado matemático, mientras que la

firma digitalizada es la imagen del trazado de la firma manuscrita convertida

en un archivo de imagen, es decir, que se ha escaneado o que, mediante

algún hardware como pueden ser panel de firma, digitalizadores o tabletas

de firma, se ha registrado y guardado directamente en un ordenador

(Secur-IT, 2017).

1.4.2 Firma digital

La firma digital tiene su inicio desde la criptografía que es una rama

de las matemáticas actualmente forma parte de la informática y telemática

que utiliza métodos matemáticos con el objetivo de cifrar un mensaje o

archivo por medio de algoritmos que usan entre una o más claves. Al

realizarse el proceso da paso a los criptosistemas que permiten dar una

mejor integridad a los datos que corresponden a la seguridad informática

entre los cuales se indican los siguientes: confidencialidad, integridad,

disponibilidad y no repudio de emisor y receptor (Soler, 2008).

La firma digital entonces, es aquella que se crea usando un sistema

de criptografía asimétrica o de clave pública, también como consecuencia

del auge de las firmas digitales, ha sido necesaria la creación de una

infraestructura de las claves, surgiendo así la Infraestructura de Clave

Pública (ICP), más conocida por su nombre en inglés, como PKI (public key

Marco Teórico 12

infrastructure). “Por lo tanto, decimos que ésta es el conjunto de

componentes y políticas necesarias para crear, gestionar y revocar

certificados digitales que pueden ser utilizados para autenticar cualquier

aplicación, persona, proceso u organización de una red de empresa,

extranet o Internet” (Arías Pou, 2006, pág. 36).

La firma digital cuenta con las siguientes características que permite

brindar una mejor seguridad con el documento estos son:

Integridad. - Con la integridad permite asegurar al propietario que la

información en el documento no ha sufrido cambios no autorizados, ya sea

de manera accidental o de manera intencional, una vez que este haya sido

firmado.

Autenticación. - La autenticación permite identificar al emisor del

mensaje y sus atributos principales que lo identifican, asegurando que es

la persona que figura como firmante en el documento.

No repudio. - El no repudio es la característica que está ligada al

punto anterior, pues al autentificar la identidad del firmante, se evita que el

emisor del mensaje pueda negarlo firmado. De esta manera se garantiza

que el firmante está de acuerdo con el contenido del documento o es

vinculado como remitente de las siguientes formas ya sea como autor,

como revisor, dándose por enterado, etc.

Confidencialidad. - Esta función consiste en impedir que la

información que contenga el documento, sea este un contrato o firma,

sea vista por usuarios no autorizados.

Momento de la Firma. - Si la firma es llevada de forma correcta

incorporando información temporal evidente, es posible saber que el

Marco Teórico 13

documento existía previamente antes de un momento dado, que es el que

se indica cómo momento de la firma.

Actualmente la firma digital es el mecanismo de criptografía de clave

pública que permite brindar seguridad al receptor del documento firmado

digitalmente; la firma digital una clave privada del remitente para cifrar la

información a enviar y el receptor emplea la clave pública del remitente para

descifrarla, así se garantiza la autenticidad del origen de la información, y

se verifica que está no ha sido modificada desde su creación.

IMAGEN N° 3

CREANDO Y VERIFICANDO UNA FIRMA DIGITAL

Fuente: https://securitcrs.wordpress.com/criptografia/criptografia-asimetrica-clave-privada-y-clave-publica/. Elaborado por: Prias Samaniego Leandro

Marco Teórico 14

1.4.2.1 Función hash

Los hash o funciones de resumen son algoritmos que consiguen crear

a partir de una entrada ya sea de texto, una contraseña o archivo tendrá

una salida alfanumérica de longitud normalmente fija que representa un

resumen de toda la información que había sido dada, también hash se

define en la informática como la función o método para generar las claves

o llaves que identifican de manera casi unívoca a un documento

electrónico, archivo o registro que ha sido utilizado por la función el cual se

le denomina como un hash (Gutierréz, 2013).

Los hash o funciones son actualmente más vistos en distintas

aplicaciones, que pueden ser sistemas de facturación electrónica, de

seguridad o criptografía, procesamiento de datos y firmas digitales.

La huella digital se cifra gracias a la clave privada, de esta forma se

obtiene la firma digital.

IMAGEN N° 4

ALGORITMO HASH

Fuente: http://roble.pntic.mec.es/jprp0006/tecnologia/4eso_informatica/tramites_online/firma_electronica.htm. Elaborado por: Prias Samaniego Leandro

Marco Teórico 15

En la transferencia van tres cosas: El documento original sin cifrar, el

resumen cifrado (firma digital) y la clave pública.

1.4.2.2 Formatos de firma digital

EL formato de firma digital se conoce como el medio en donde se

estructura la información del archivo de la firma, el orden de esa

información da como producto un fichero, las etiquetas que indican cuando

empieza un campo y cuando termina, viene determinado por el formato en

que es enviada la firma. Existen distintos formatos actualmente de los

cuales tenemos: CMS, CAdES, PAdES, XAdES, etc. La evolución de

múltiples formatos de firma se debe a necesidades y escenarios

específicos, como se ha ido introduciendo la firma en formatos de

documentos ya existentes y de funcionalidades que se agregaron a lo largo

del tiempo (Rodriguez, 2015).

1.4.2.2.1 CMS (Criptographic Message Syntax)

Este formato es binario usado para la encriptación, autenticación,

resumen y firma de documentos. Este es el primer estándar de mensajes

protegidos criptográficamente es un formato de firma esta soportado en el

estándar PKCS#7. Este formato es muy útil para la firma de documentos

digitalmente, como los archivos de e-mails, PDF o cualquier tipo de

documento.

1.4.2.2.2 Cades (CMS Advanced Electronic Signatures)

Este formato es la evolución del formato CMS (criptographic message

syntax) tenía como finalidad de poder firmar archivos de gran tamaño y una

de las ventajas del formato era optimizar el espacio de la información en el

archivo, cuando la firma ha sido contenida por el documento electrónico

original.

Marco Teórico 16

1.4.2.2.3 Xades (XML Advaced Electronic Signature)

Es un formato que se desarrolló de manera paralela basándose en

XML-DSIG. Con el formato XadES el resultado es un archivo de tipo XML,

donde el formato de XML avanzado ofrece distintas ventajas al contrario de

la firma tradicional, puesto que, al estar basado en texto plano, su

estructura es legible por humanos.

Funciona de igual manera que el formato CAdES, pero es más

extensible y está orientada a documentos XML.

1.4.2.2.4 Pades (PDF Avanzado)

Es el formato que se basa directamente en PKCS#/ y utiliza el

estándar 32000-1 que establecen una estructura para la firma digital de

documentos su uso es más frecuente en cualquier aplicación que requiera

firmas en archivos PDF, ya que un PDF firmado no sufre ninguna alteración

del contenido. Con el formato PAdES se puede corroborar fácilmente el

documento firmado por el destinatario, ya que se lo puede realizar sin

herramientas externas simplemente se realiza el proceso de forma visual

al ser legible.

1.4.3 Adquisición de certificado firma digital y autoridad

de certificación

Para adquirir un certificado digital, la persona o entidad que desea

emplear certificados digitales debe cumplir con los procedimientos que

indica la PKI.

Las diferentes entidades de certificación digital a nivel nacional se

dedican a dar certificaciones estos organismos son las únicas denominadas

como “Autoridad de Certificación”.

Marco Teórico 17

CUADRO N° 2

ENTIDADES PARA CERTIFICACION EN EL ECUADOR

Fuente: Investigación Directa Elaborado por: Prias Samaniego Leandro

Las entidades de certificación de información se encargan de la

generación, administración, custodia y protección de las claves, también de

los certificados de firma electrónica, como la validación de la identidad e

información de los usuarios o solicitantes de firmas electrónicas. Esto es

realizado mediante el uso de la infraestructura pertinente y el recurso

humano capacitado para operar con absoluta pericia y confidencialidad.

Según la SENATEL en el Ecuador se tienen las siguientes

organizaciones como Autoridad de Certificación:

Se determinan organizaciones o entidades relacionadas actualmente

reconocidas como Terceros Vinculados.

Marco Teórico 18

CUADRO N° 3

TERCERO VINCULADO – SECURITY DATA


Esta información corresponde a las autoridades de certificación que

se encuentran habilitadas en el Ecuador.

Marco Teórico 19

CUADRO N° 4

TERCERO VINCULADO – ANF Autoridad de Certificación


Para obtener el certificado digital, se debe realizar la solicitud de

certificado a una de estas organizaciones en el mundo, la solicitud de

certificado viaja con los datos que permiten conocer la entidad a ser

certificada, por ejemplo en la web existen servicios que son certificados

para mantener la autenticidad del mismo a través de sus portales web o

sistemas transaccionales, el certificado digital en este caso avala la

autenticidad de este servicio en los diversos medios de publicación

(navegadores o browsers).

En los navegadores básicamente la extensión del archivo se resume

en:

CUADRO N° 5

FORMATO DE CERTIFICADO DIGITAL PARA LA WEB


Marco Teórico 20

Para obtener una firma digital, se genera mediante la clave privada

del emisor de la información, siguiendo los pasos a continuación:

✓ Se debe seleccionar el documento a transferir.

✓ Sobre el documento seleccionado se aplica una función de

hash.

✓ El resultado de la función de hash (huella digital) se encripta

mediante la clave privada del emisor, recordando que la

clave privada es el que emite una autoridad certificadora

sobre la entidad que desee transferir información,

garantizado así su autenticidad.

✓ Finalmente, la firma digital es la huella digital encriptado del

documento.

1.4.4 Marco legal de la firma digital & electrónica

En el siguiente marco se describe los lineamientos que se

determinaron con la Ley de Comercio Electrónico e indica los siguientes

parámetros a debe tener en cuenta para hacer uso de una firma electrónica.

1.4.4.1 Ley de comercio electrónico

Los organismos de control encargados de certificados y firmas

digitales en el Ecuador son: La Secretaría Nacional de Telecomunicaciones

– SENATEL – y el Consejo Nacional de Telecomunicaciones – CONATEL

(Banco Central del Ecuador, 2016).

LA LEY DE COMERCIO ELECTRÓNICO, FIRMAS

ELECTRÓNICAS Y MENSAJES DE DATOS (Ley No. 2002-67), establece:

Art.1.- Objeto de la Ley. - Esta ley regula los mensajes de datos, la

firma electrónica, los servicios de certificación, la contratación electrónica y

telemática, la prestación de servicios electrónicos, a través de redes de

Marco Teórico 21

información, incluido el comercio electrónico y la protección a los usuarios

de estos sistemas (Banco Central del Ecuador, 2016).

Art. 13 Firma electrónica. - Son los datos en forma electrónica

consignados en un mensaje de datos, adjuntados o lógicamente asociados

al mismo, y que puedan ser utilizados para identificar al titular de la firma

en relación con el mensaje de datos, e indicar que el titular de la firma

aprueba y reconoce la información contenida en el mensaje de datos

(Banco Central del Ecuador, 2016).

ART. 20 Certificado de firma electrónica. - Es el mensaje de datos

que certifica la vinculación de una firma electrónica con una persona

determinada, a través de un proceso de comprobación que confirma su

identidad (Banco Central del Ecuador, 2016).

1.4.4.2 Legalización de documentos mediante firma

digital

La Legalización de documentos consiste en emplear la firma digital

mediante algún medio tecnológico, tales como el reconocimiento de patrón

de huella digital como medio biométrico, o memorias de almacenamiento

(USB) denominado en la actualidad como “token” (dispositivo USB que

almacena la información digital de la persona) se puede hacer similitud con

un bolígrafo, y cumplir con las normas legales (Banco Central del Ecuador,

2016).

Según la norma del Banco Central del Ecuador se decretaron los

siguientes artículos correspondiente a la firma electrónica:

Art. 14.- Efectos de la firma electrónica. – La firma electrónica

tendrá igual validez y se le reconocerán los mismos efectos jurídicos que a

una firma manuscrita en relación con los datos consignados en documentos

Marco Teórico 22

escritos, y será admitid como prueba en juicio (Banco Central del Ecuador,

2016).

Art. 15.- Requisitos de la firma electrónica. – Para su validez, la

firma electrónica reunirá los siguientes requisitos, sin perjuicio de los que

puedan establecerse por acuerdo entre las partes:

a. Ser individual y estar vinculada exclusivamente a su titular.

b. Que permita verificar inequívocamente la autoría e identidad

del signatario, mediante dispositivos técnicos de

comprobación establecidos por esta Ley y sus

reglamentos;

c. Que su método de creación y verificación sea confiable,

seguro e inalterable para el propósito para el cual el mensaje

fue generado o comunicado.

d. Que, al momento de creación de la firma electrónica, los

datos con los que se creare se hallen bajo control exclusivo

del signatario; y,

e. Que la firma sea controlada por la persona que pertenece.

1.5 Gestión documentaria

La gestión Documentaria se conoce como el conjunto de Actividades

que permiten coordinar y controlar los aspectos relacionados con creación,

recepción, organización, almacenamiento, preservación, acceso y difusión

de documentos (Russo, 2009).

La percepción de documento se asocia a una o varias páginas en

papel actualmente se ha ampliado a ficheros en formato electrónico, por

ejemplo «un documento Word o PDF», este concepto está evolucionando

rápidamente y hoy en día se habla de mensajes de correo electrónico,

mensajes de voz, videoclips páginas webs, etc. (Tamayo, 2011).

Marco Teórico 23

La gestión documental es una práctica que se realiza para la

automatización de la documentación de procedimientos administrativos con

transacciones legales y comerciales en donde se aprovecha de manera

eficiente los recursos tecnológicos e infraestructura de las organizaciones.

IMAGEN N° 5

AUTOMATIZACIÓN DE PROCESOS EN GESTIÓN DE LA

INFORMACIÓN

Fuente: http://www.dokumentalistas.com/articulos/automatizacion-procesos-gestion-informacion-corporativa/ Elaborado por: Prias Samaniego Leandro

1.5.1 Desarrollo de la gestión documental

Durante siglos, la gestión documental en las organizaciones fue el

dominio exclusivo de administradores, archiveros y bibliotecarios, cuyas

herramientas manuales básicas eran los libros de registro, las carpetas,

archivadores donde se guardaban los documentos de papel. Tiempo

después se fueron sumando a ellos los informáticos por la complejidad y

nivel de sofisticación que alcanzaron los sistemas computacionales, siendo

ellos los expertos en los flujos de documentos y los procesos de cada

documento de soporte de papel o electrónico (Tamayo, 2011).

Marco Teórico 24

Actualmente se llevan a cabo proyectos de gestion documental de

diversas indole para mejorar los procesos en las organizaciones y llevar un

mejor mejor control de archivos evitando perdidas o fraudes en la

organización.

La transparencia en la gestión de la información es

indudablemente un valor basal en la dirección de las empresas y

las entidades públicas tendencia que se ha acelerado en forma

exponencial debido, entre otras razones, a los múltiples

escándalos de corrupción surgidos en un pasado cercano.

(Brunet, 2015, pág. 207)

1.6 Metodología de desarrollo

La metodología de desarrollo son un conjunto de procedimientos,

técnicas y ayudas de documentación para el desarrollo de software.

También es donde se define los objetivos del proyecto y las acciones

requeridas para solucionar una problemática o mejorar procesos en las

organizaciones.

Como indica (Alarcón, 2006) que cada fase de una metodología está

dividida en actividades, y éstas en tareas. Esta división de las fases permite

secuencializar el cumplimiento de una fase de forma más sencilla. Por otra

parte, la definición de actividades y de tareas permite monitoriza el avance

del proyecto de forma objetiva y evaluar el cumplimiento del proyecto. (pág.,

33)

Para el desarrollo de la aplicación es preciso tener en cuenta una

metodología que se acople a las necesidades de la organización, para

realizar una confiable recolección de datos y que se efectué a su vez el

desarrollo continuo de los objetivos planteados a lo largo del desarrollo

trazados en el proyecto.

Marco Teórico 25

1.6.1 Metodología iconíx

Se define como un proceso de desarrollo de software práctico. Iconíx

se encuentra entre la complejidad del RUP (procesos racionales unificados)

con la simplicidad y pragmatismo del XP (programación extrema) a pesar

de ser una metodología ligera no elimina las tareas correspondientes al

análisis y de diseño que XP no contempla (ICONIX, 2016).

Está metodología es dividida en cuatro fases las cuales son: Análisis

de requisitos, Análisis y Diseño preliminar, Diseño, Implementación.

La metodología Iconíx está conformada por el lenguaje de

modelamiento y un proceso de desarrollo de software práctico, una de las

características de esta metodología es que unifica un conjunto de métodos

orientado a objetos con el objetivo principal de abarcar todo el ciclo de vida

de un proyecto.

Está metodología se encuentra dividida en cuatro fases las cuales

son: Análisis de Requisitos, Análisis y Diseño preliminar, Diseño, e

implementación.

Análisis de Requisitos: En esta fase se realiza el modelamiento,

prototipo y casos de uso, antes de realizar el levantamiento de requisitos

para el diseño del prototipo, se hace un sondeo de los procesos que serán

parte del sistema. De esta forma se limitan las funciones, los diagramas de

clases que tendrá el sistema y determina los roles que ocuparan los

usuarios.

Análisis y Diseño preliminar: En el análisis y diseño preliminar se

describe las funciones que se llevaran a cabo en los diagramas de caso de

uso, los diagramas de actividades y el diagrama de robustez, la descripción

de cada uno de los diagramas se lleva de manera ordenada de acuerdo a

Marco Teórico 26

las funciones que se determinaron en el sistema. En esta etapa se define

el alcance del sistema, con el diagrama de actividades se tiene un

panorama gráfico de como interactuara el usuario con el sistema.

Diseño: En la fase de diseño se realizan los diagramas de secuencia

que se retro alimentan de los diagramas de caso de uso, estos permiten

ver como se comunica el sistema por medio de mensajes con las distintas

capas o métodos, se encuentra compuesto por el curso de acción, objetos,

mensajes y métodos que se han creado para cumplir con los

requerimientos planteados.

Implementación: en la fase de implementación se realiza la

programación del código con las especificaciones acordadas, también se

tiene en cuenta la continuidad del sistema por lo que es importante que

cuente con la reusabilidad, extensibilidad y confiabilidad, a media que se

va desarrollando el sistema se genera pruebas para verificar si cumple con

los requisitos planteados en el diseño hasta que este sea terminado y el

sistema se encuentre totalmente funcional.

1.7 HTML

HTML es un lenguaje de descripción de hipertexto compuesto por una

serie de comandos, marcas o etiquetas, también denominadas “Tags” que

permiten definir la estructura lógica de un documento web y establecer los

atributos del mismo (color del texto, multimedia, hipervínculos, etc…).

(Cobo, Gómez, Pérez, & Rocha, 2005, pág. 57)

En resumen, es un lenguaje que permite crear páginas web y para ello

utiliza unos comandos o etiquetas que indican o marcan que se debe

mostrar y de qué forma se puede realizarlo. Los comandos siempre van

incluidos entre los signos “< >” e insertados en el propio texto que compone

el contenido de la página. Estas etiquetas permiten especificar distintas

Marco Teórico 27

estructuras de la página y formato, además permiten la inserción de

contenidos como imágenes, vídeos, sonidos, etc.

IMAGEN N° 6

EJEMPLO DE CÓDIGO HTML

Fuente: http://html5facil.com Elaborado por: Prias Samaniego Leandro

1.8 PHP

Es un lenguaje que permite desarrollar aplicativos webs del lado

servidor - cliente además utiliza el script para el envío y almacenamiento

de datos, también por la flexibilidad que tiene PHP puede trabajar en

conjunto con el código del lenguaje HTML.

PHP permite trabajar fácilmente con las etiquetas de HTML. Entre las

funciones de PHP se pueden destacar la creación de imágenes, ficheros

pdf e incluso películas flash generadas desde que se corre la aplicación.

Otras de las características de PHP es que puede generar cualquier tipo de

Marco Teórico 28

texto, como XHTML y cualquier otro tipo de archivo, al poder autogenerar

estos archivos se almacenan internamente en una carpeta vez de

imprimirlos en pantalla, creando así una caché en el lado del servidor para

contenido dinámico (The Group Php, 2016).

PHP es un lenguaje que se interpreta desde el lado del servidor que

nace de la demanda del desarrollo de software libre que permite

compartir conocimientos y código para los desarrolladores de

proyectos open source o código abierto, se caracteriza por su

potencia, versatilidad, robustez y modularidad. AL igual que ocurre

con tecnologías similares, los programas son integrados

inicialmente desde el código HTML. (Cobo, Gómez, Pérez, & Rocha,

2005, pág. 23)

Fue uno de los primeros lenguajes de programación que se crearon

para la elaboración de aplicaciones web del lado del servidor, lo destacable

de trabajar con PHP es que el programador en su trabajo pueda aplicar

cualquier técnica de programación o desarrollo que le permita llevar un

código ordenado y una programación estructurada.

IMAGEN N° 7

EJEMPLO DE CÓDIGO PHP

Fuente: https://wpdirecto.com/destaca-tu-codigo-fuente-con-wordpress-con-syntaxhighlighter-evolved-21/ Elaborado por: Prias Samaniego Leandro

Marco Teórico 29

1.9 CSS

Como indican sus siglas en inglés (Cascade Style Sheet), este

lenguaje parte del estilo de cascada que se le da al conjunto de elementos

realizados en HTML (Hyper Text Markup Language) que permite una mejor

interacción con los atributos del proyecto como puede ser, por ejemplo: el

color el tamaño de letra y la posición de las ventanas.

Entre los objetivos principales de las hojas de estilo en cascada (CSS)

es separar el contenido de la estructura propia de la página web y su estilo.

El uso de hojas de estilo en cascada permite llevar un mejor control sobre

los elementos que integran la página o aplicación web (García, 2017).

En este lenguaje se lleva a cabo la separación del diseño sean estos

formatos o estilo de los contenidos de las páginas web.

IMAGEN N° 8

EJEMPLO DE CÓDIGO CSS

Fuente: http://mastersitios.com/todo-sobre-css3/herencia-y-cascada.html Elaborado por: Prias Samaniego Leandro

Marco Teórico 30

1.10 MySQL

Es una base de datos utilizada para proyectos open source ya que por

ser desarrollada en C y C++ facilita su integración con otras aplicaciones,

también permite llevar la administración de un sistema de base de datos

relacionales rápido, sólido y flexible.

MySQL es ejecutable en gran parte de las plataformas, entre las más

conocidas como: Linux, Unix y Windows. A pesar de que es utilizada en

una amplia gama de aplicaciones, MySQL se asocia principalmente con

aplicaciones basadas en la web en línea y es un componente importante

de una pila empresarial de código abierto llamado LAMP (Rouse, 2015).

Es ideal para el acceso de datos almacenados desde una página web

dinámica también para la creación de sistemas que realizan transacciones

on-line o para múltiples soluciones profesionales que impliquen almacenar

datos, a su vez realizar múltiples y rápidas consultas desde su interface.

IMAGEN N° 9

EJEMPLO CONSULTA DE DATOS EN MYSQL

Fuente: http://www.databasejournal.com/features/mysql/slideshows/top-10-mysql-gui-tools.html Elaborado por: Prias Samaniego Leandro

Marco Teórico 31

1.11 Aplicación web

Una aplicación web es un conjunto de páginas que se encuentra

conformado por páginas web estáticas y dinámicas que permiten

conectarse por medio de una interfaz de usuario amigable con el servidor

web de la organización para la consulta y envío de datos. Al realizarse la

consultada desde la web la página estática no tiene modificaciones porque

es solicitada por un usuario desde el navegador. Por el contrario, el servidor

modifica las páginas Web dinámicas antes de enviarlas al navegador

solicitante y la estructura que comparten al interactuar con el servidor web

es la que la denominada página dinámica.

Los equipos informáticos para la tecnología de la información

presentan una buena capacidad de compatibilidad ya que gran parte de los

sistemas operativos vienen con un navegador incorporado, por lo que es

posible ejecutar una aplicación en los sistemas operativos de escritorio,

smartphones y tablets independientemente de su sistema operativo (Perez,

2016).

Esta ventaja es bien aprovechada por las grandes instituciones con

diferentes sucursales, estudiantes, empresarios y para muchos usuarios

que necesitan programas específicos, pero no quieren llenar el ordenador

de aplicaciones.

Además, estas aplicaciones web tienen ventajas entre las más

importantes tenemos:

• Mantenimiento rápido y fácil, en el caso de las grandes

empresas sólo se debería solucionar un problema una sola vez

y no una por cada ordenador.

Marco Teórico 32

• Las aplicaciones web no utilizan recursos de almacenamiento

en el disco duro por lo que es muy importante ya que existen

equipos laptos, ordenadores muy potentes, muy delgados,

pero con poca capacidad de almacenamiento interno, por lo

que una aplicación web puede resultar determinante en el

ahorro de recursos y memoria (Pérez, 2016).

IMAGEN N° 10

ESTRUCTURA DE APLICACIÓN WEB

Fuente: http://www.templatemonsterblog.es/2013/07/17/como-se-puede-crear-su-primera-aplicacion-web/ Elaborado por: Prias Samaniego Leandro

1.12 Arquitectura del sistema

La aplicación web contará con una arquitectura definida, entre las

arquitecturas más conocidas tenemos: 2 capas, 3 capas y n capas.

1.12.1 Arquitectura de dos capas

Es también conocida como la arquitectura cliente/servidor, la cual

utiliza una interfaz de usuario que se instala y corre en una Pc o estación

de trabajo, enviando solicitudes a un servidor para poder ejecutar las

operaciones complejas.

Marco Teórico 33

1.12.2 Arquitectura de tres capas

La arquitectura de 3 capas define como organizar el modelo de diseño

en capas, que pueden estar físicamente definidas, la cual quiere decir que

los componentes de una capa sólo pueden hacer referencia a componentes

en capas inmediatamente inferiores.

La arquitectura en tres capas está compuesta por: la capa de

presentación, la capa de lógica de negocios o lógica de aplicaciones y una

última capa de almacenamiento o de datos.

Dividiendo la aplicación en capas se tiene una reducción del tiempo

de desarrollo, debido a que se maneja los módulos de forma independiente

y paralela; así mismo permite hacer actualizaciones de manera

independiente, si lo requiere (González, 2014).

1.12.3 Arquitectura de n-capas

Este estilo de capa se basa en una distribución jerárquica de los roles

y las responsabilidades para proporcionar una división efectiva de los

problemas a resolver. Los roles indican el tipo y la forma de la interacción

que se llevan a cabo con otras capas y las responsabilidades la

funcionalidad que implementan.

La aplicación distribuida en n-capas se encuentran los procesos

distribuidos en distintas capas que no son solo lógicas también se

encuentran capas físicas, los procesos se ejecutan desde distintos equipos,

que también pueden residir desde otras plataformas o sistemas operativos,

cada equipo posee una configuración diferente y se encuentre en perfecto

estado para realizar cada una de las funciones asignadas a nivel de interfaz

en la estructura de la aplicación, de modo que los recursos y la eficiencia

global estén en óptimas condiciones (Molina, 2013).

Marco Teórico 34

1.13 Internet

Como indica (Cobo, Gómez, Pérez, & Rocha, 2005) que el Internet

(INTERconected NETwork) es una red de ordenadores interconectados

entre si y que se comunican por medio de protocolos el más conocido como

protocolo TCP/IP. Esa primera característica de la diversidad de los

equipos conectados es clave para entender el funcionamiento de todos los

servicios de la red y para comprender la necesidad de realizar cualquier

desarrollo en el ámbito de la Internet.

El desarrollador de aplicaciones web debe tener presente los

conceptos de los protocolos de comunicación para poder crear aplicaciones

web dinámicas que permitan dar soluciones a numerosas problemáticas en

las organizaciones.

IMAGEN N° 11

INTERNET

Fuente: http://www.mxdsystems.com/internet-things-manufacturing-pt-2/ Elaborado por: Prias Samaniego Leandro

En la actualidad navegar por Internet es un hábito que se realiza de

manera constante por la alta demanda de estar intercomunicados con

responsabilidades laborales y profesionales a nivel mundial.

CAPITULO II

METODOLOGÍA

2.1 Tipo de investigación

En este capítulo se describe la metodología que se lleva a cabo para

el desarrollo del sistema.

El marco metodológico está constituido por métodos, técnicas

procedimientos e instrumentos que se emplearán en la ejecución de la

investigación y así dar una respuesta al problema de la presente

investigación que se pretende analizar.

Como método de investigación se usará la exploratoria, ya que, al ser

aplicado, parte de verdades previamente establecidas como principios

generales a la problemática, para luego familiarizarse con un panorama

general del proceso que se lleva en la organización y a su vez los

antecedentes de los procedimientos que ocasionan el problema.

La herramienta que se utilizará para la investigación será la entrevista,

gracias a ella se conocerá cuáles son las características que debe contener

el aplicativo web.

2.2 Metodología de desarrollo

Para el desarrollo de la aplicación web se utilizará un modelado

basado a objetos y la metodología Iconíx permite hacer un fácil y ligero

análisis de los requerimientos para la realización de la aplicación basado a

la descripción de los diagramas de caso de uso.

Metodología 36

2.3 Población y muestra

Se determina como población en estudio al personal administrativo y

personal del área de sistemas, los cuales podrían ayudarnos con iniciativas

para el desarrollo del aplicativo web.

Para la muestra al identificarse el personal de la compañía se

desarrolla como muestra a sus 10 colaboradores los mismos que

comprende al 100% de toda la organización.

2.4 Técnicas de recolección de datos

Para la elaboración de la aplicación web se va a utilizar métodos e

instrumentos de investigación los cuales permiten acceder al conocimiento

y recopilar la información del proceso que se realiza en el servicio técnico.

Para recopilación de información se utilizará la metodología de tipo

exploratoria, para obtener información desde un panorama general del

proceso de visita técnica que da inicio desde la petición del servicio hasta

la realización del trabajo por el personal técnico.

2.4.1 Técnica de la entrevista

El presente proyecto considera la aplicación de la entrevista como una

de las herramientas para la recolección de información ya que la entrevista

como el entrevistar son elementos esenciales aplicados en la vida

contemporánea.

Es comunicación primaria que contribuye a la construcción de los

hechos basados en un área determinada y permite la recolección de

información de las fuentes que intervinieron en dichos acontecimientos,

para tener un punto de vista global del área que se quiere realizar trabajos,

o conocerla más a fondo.

Metodología 37

2.4.2 Aplicación de la entrevista

Con respecto a la entrevista se usará un listado de preguntas abiertas

para conocer los problemas que se están presentando en el área y hacer

el levantamiento de los requerimientos de la aplicación web.

La ejecución de la entrevista para el presente proyecto será aplicada

al gerente de la compañía.

2.4.3 Resumen de la entrevista para especificaciones funcionales

A continuación, se detalla el resumen de la entrevista que fue

realizada al gerente general de la compañía EIKON que facilita la

información de los servicios que brinda y los requerimientos que deberá

tener la aplicación web el cual definirá las necesidades que tiene el área de

soporte. El modelo de la entrevista se encuentra en Anexo 1.

2.4.4 Matriz de resumen de entrevista

A continuación, se detalla el resumen de la entrevista que se realizó

en las oficinas de la compañía EIKON que duró aproximadamente una

hora, realizada al gerente.

Donde se conocerá todo el procedimiento del servicio técnico, desde

el requerimiento del cliente hasta la visita del técnico a las instalaciones que

se realiza a los clientes y que servicios se cubren en la misma.

También se hará un levantamiento de las posibles funciones que

tendrá la aplicación web para lograr los objetivos planteados con respecto

al reporte del servicio técnico. Luego de obtener estos datos se realizará

un análisis con las personas encargadas del área de soporte para

determinar las funciones esenciales que tendrá el aplicativo.

Metodología 38

CUADRO N° 6

RESUMEN DE ENTREVISTA PARA OBTENCIÓN DE REQUISITOS

FUNCIONALES

Metodología 39

Fuente: Investigación directa Elaboración: Prias Samaniego Petter

Este es el resumen que fue extraído de la entrevista realizada en las

instalaciones de la compañía para el levantamiento de requerimientos de

la aplicación web.

2.5 Identificación del problema

Luego de realizar la entrevista se identificaron los problemas que se

estaba generando en el área de soporte con respecto a los reportes del

servicio técnico realizado a los clientes.

La identificación del problema y de las áreas implicadas fue

proyectada en un diagrama para su mejor comprensión. Los mismos que

se han identificado se encuentran resumidos en el siguiente gráfico. (Véase

Anexo 2).

Metodología 40

CUADRO N° 7

PROBLEMAS ENCONTRADOS EN REALIZACIÓN DE VISITATÉCNICA

Problemas

Causas

Efectos

Falta de

seguimiento en

los Reportes

Poco interés en el

seguimiento de cada

trabajo realizado

Retraso en los cobros

por los trabajos

realizados

Pérdida de los

documentos

físicos

No se lleva un proceso de

archivo de documento

Volver a realizar la visita

técnica, postergación de

trabajos

Falta de respaldo

de trabajos

realizados.

No se lleva un protocolo

de respaldo de

documentos.

Perder el soporte del

trabajo realizado.

Fuente: Entrevista Elaboración: Prias Samaniego Petter

2.6 Metodología

Luego de hacer un análisis a la problemática que tiene la organización

en base a los requerimientos se va a utilizar la metodología Iconíx que es

la que se acopla al desarrollo de la aplicación web y permite tener un

panorama general de lo que se requiere.

2.6.1 Metodología iconíx

La Metodología Iconíx es una de las metodologías de desarrollo de

software que se basa en la complejidad de la metodología RUP (Rational

Unified Processes) combinada con la practicidad para desarrollar de la

metodología XP (Extreme Programing). Se encarga de unificar un conjunto

Metodología 41

de métodos de orientación a objetos, con el objetivo de abarcar todo el ciclo

de vida de un proyecto. Su enfoque es considerado como minimalista, ya

que comprende el conjunto mínimo de medidas que son necesarias para el

proyecto de desarrollo.

Las fases de esta metodología son las siguientes:

• Análisis de requisitos

• Análisis y diseño preliminar

• Diseño

• Implementación

2.7 Análisis de requisitos

En esta fase de la metodología definida como análisis de requisitos

se define el proceso de estudio de las necesidades de los usuarios para

llegar a formalizar los requisitos del sistema a nivel funcional.

Para esta fase se utilizó la siguiente herramienta:

2.7.1 Modelo de casos de uso

Los modelos de caso de uso están retro alimentados por la entrevista

que se realizó previamente en el área luego de determinar las funciones

que se realizan en el área cada uno de los actores como el analista y

técnico en cada actividad que se realiza.

Para el desarrollo de los casos de uso de la aplicación web para

control de reportes técnicos a clientes, se analizaron los procesos con cada

uno de los actores implicados en el servicio técnico. A continuación, se

define los actores que interactuarán con la aplicación web junto con

funciones.

Metodología 42

2.7.1.1 Listado de actores y funciones

CUADRO Nº 8

ACTORES DEL PROCESO

Administrador /

Analista de Sistema

• Creación de Usuarios para técnicos.

• Habilitar usuarios técnicos.

• Creación de Clientes.

• Creación de Solicitud de Trabajo.

• Asignación de solicitud de trabajo a Técnico.

• Consulta Solicitudes Ingresadas al Sistema.

• Estados de Solicitud.

• Actualizar estados de solicitud.

• Consulta de Reportes.

• Reenvío de Reporte.

• Eliminar solicitud.

Técnico / Helpdesk

• Ingresar actividades de Servicio Técnico.

• Devolver solicitud de trabajo.

• Generar reporte PDF.

• Consulta de Solicitudes.

• Reenvío de Reporte.

Fuente: Entrevista

Elaboración: Prias Samaniego Petter

2.7.1.2 Requerimientos funcionales

A continuación, se detallan los requerimientos funcionales que

conformarán las funciones del sistema, basado a los objetivos que se

plantearon al inicio del proyecto.

Metodología 43

CUADRO Nº 9

CUADRO DE REQUERIMIENTOS FUNCIONALES

No. Requerimiento Descripción

RF1 El administrador creará

los roles de usuarios

para darle los privilegios

La aplicación web tendrá la opción de

parametrizar usuarios y parametriza a

las opciones que puede ingresar el

técnico.

RF2 El administrador y

técnico ingresan los

datos y generan el

documento electrónico

El aplicativo web permite al usuario

ingresar, editar y actualizar los datos

del reporte técnico


técnico envían el

documento electrónico

generado al cliente

El sistema permitirá hacer envío de

cada reporte técnico generado al

correo de los clientes


técnico consultaran los

documentos

electrónicos de los

reportes técnicos

El sistema proporcionará los datos

según los filtros por fecha, ruc, nombre

y número de ticket en el caso que lo

lleve.

RF5 El administrador podrá

ingresar al sistema

solicitudes de trabajo

El sistema le va permitir ingresar el

requerimiento del cliente previo al

servicio técnico solicitado.

RF6 El administrador

asignara un técnico para

que realice el servicio

técnico

El sistema proporcionara una vista de

los técnicos que ya se encuentran

registrados en la base de datos para

luego asignarle la solicitud de trabajo.

RF7 El Administrador

contara con la opción de

eliminar solicitud

Sólo el usuario administrador contará

con la opción de eliminación en el caso

que lo requiera.

Metodología 44

RF8 El Técnico podrá

ingresar, actualizar y

guardar la información

del servicio técnico

realizado.

El sistema le permitirá realizar ingreso

de datos por el trabajo realizado y

también modificar a información antes

de generar el documento PDF.

RF9 El Administrador podrá

habilitar y dar de baja al

usuario técnico creado.

El sistema le permitirá habilitar al

usuario luego se encuentre creado

para que pueda revisar las solicitudes

de trabajo que se le han asignado, de

la misma forma puede darle de baja

para que ya no pueda ingresar al

sistema.

RF10 EL Administrador podrá

cambiar el estado de la

solicitud para volverla

asignar.

El sistema contará con la opción de

cambiar estado de solicitud, que le

permitirá llevar un mejor control de las

solicitudes de trabajo para el servicio

técnico, en el caso que el técnico

asignado no pueda realizar el trabajo el

administrador podrá reasignarlo a otro

técnico.

RF11 El Técnico contará con

la opción devolver

solicitud

El sistema le va permitir cambiar el

estado de la solicitud que se le ha

asignado, en caso de que se le

presente inconvenientes para llevar a

cabo el servicio técnico.

Fuente: Definición de la reunión con el entrevistado Elaboración: Prias Samaniego Petter

2.7.1.3 Requerimientos no funcionales

A continuación, se detallan los requerimientos no funcionales pero

que ocupan una pieza clave para el funcionamiento de la aplicación web.

Metodología 45

CUADRO Nº 10

CUADRO DE REQUERIMIENTOS NO FUNCIONALES

No. Requerimiento Descripción

RNF1 Usabilidad Debe ser de fácil uso, interfaces

gráficas amigables con el usuario

RNF2 Multiplataforma La aplicación web debe desarrollarse

en un lenguaje de programación que

sea compatible con los servidores de

la compañía

RNF3 Seguridad El ingreso al aplicativo solo se llevará

a cabo con un usuario y contraseña

RNF4 Restricción El ingreso de datos al aplicativo y el

generar documentos solo será

utilizado por el departamento de

sistemas

RNF5 Disponibilidad La aplicación web estará operativa las

24 horas.

RNF6 Contingencia En caso de pérdida energética en las

instalaciones, la aplicación web se

levantará en un periodo de 15 a 30

minutos, luego de que empiecen a

trabajar los generadores eléctricos en

las instalaciones de la compañía.

RNF7 Implementación La aplicación web será instalada en

uno de los servidores del área de

sistemas en la compañía.

RNF8 Sistema Operativo La aplicación web trabajara con el

sistema operativo Windows 7 que se

encuentra instalado en el servidor.

Fuente: Definición de la reunión con el entrevistado Elaboración: Prias Samaniego Petter

Metodología 46

2.7.1.4 Diagrama de casos de uso

Se utiliza está herramienta con el objetivo documentar todo el análisis

realizado con los actores involucrados en un diagrama detallado con el

comportamiento operacional y funcional de los diferentes procesos

establecidos.

DIAGRAMA Nº 1

DIAGRAMA DE CASO DE USO GENERAL

Fuente: Investigación de campo Elaborado por: Prias Samaniego Leandro

Metodología 47

DIAGRAMA Nº 2

DIAGRAMA CASO DE USO AUTENTIFICACIÓN DE USUARIO

Fuente: Investigación de campo Elaboración: Prias Samaniego Leandro

CUADRO Nº 11

CASO DE USO “AUTENTIFICACIÓN DE USUARIO”

CASO DE USO Modulo Autentificación de usuario

ACTORES

Analista, Técnico

TIPO Principal

Flujo de Eventos:

Acción Analista:

1. Accede a la URL para el ingreso del

sistema.

3. Ingresar usuario y contraseña.

Acción Sistema:

2. Muestra página de Login.

4. Comprobar credenciales de

usuario.

5. Mostrar pantalla de Inicio.


Metodología 48

DIAGRAMA Nº 3

DIAGRAMA DE CASO DE USO GESTIONAR USUARIO TÉCNICO


Metodología 49

CUADRO Nº 12

CASO DE USO “GESTIONAR USUARIOS TÉCNICOS”

CASO DE USO Módulo Registro Usuario Técnico

ACTORES Administrador

TIPO Principal

Flujo de Eventos:

Acción Analista

1. Acceder a la opción ingresar

nuevo usuario.

2. Elige opción de registro de

usuarios.

4. Ingresa datos del técnico, estos

incluyen: nombre, apellidos, firma

electrónica, usuario y clave.

5. Escoger rol de usuario.

7. Selecciona guardar datos.

9.Selecciona habilitar técnico.

11.Seleccionar cambiar estado de

técnico.

13.Accede a opción actualizar.

Acción Sistema

3. Mostrar pantalla de registro.

6. Mostrar los 2 tipos de roles a

escoger para el usuario (Admin /

Administrador).

8. Registra usuario técnico.

10. Estado del técnico activado.

12. Actualiza estado del técnico

ha inactivo.

14.Actualiza registro del técnico.

15.Mostrar detalles del técnico

actualizado.


Metodología 50

DIAGRAMA Nº 4

DIAGRAMA DE CASO DE USO INGRESO DE SOLICITUD DE TRABAJO


Metodología 51

CUADRO Nº 13

CASO DE USO “INGRESO DE SOLICITUD DE TRABAJO”

CASO DE USO Módulo Ingreso de solicitud de trabajo

ACTORES Administrador

TIPO Primario

Flujo de Eventos:

Acción Analista: 1. Crear nueva solicitud.

2. El Analista realiza la

búsqueda del cliente

por el Ruc o CI.

5. Asignar solicitud a

cliente.

6. Ingresar motivo de

Servicio.

7. Selecciona grabar

solicitud.

9. Seleccionar eliminar

solicitud.

Acción Sistema:

3. Enviar alerta de crear cliente en

caso de no encontrar registros del

cliente.

4. Mostrar datos del cliente.

8. Genera solicitud de servicio.

10. Actualiza el estado de la solicitud a

Inactivada.


Metodología 52

DIAGRAMA Nº 5

DIAGRAMA DE CASO DE USO GESTIONAR CLIENTES


Metodología 53

CUADRO Nº 14

CASO DE USO “GESTIONAR CLIENTES”

CASO DE USO Modulo asignación de solicitud a usuario

técnico

ACTORES

Administrador

TIPO Principal

Flujo de Eventos:

Acción Administrador:

1. Acceder a la opción ingreso de

nuevo cliente.

3. Ingresar datos del cliente como:

cédula o ruc, nombres, apellidos,

correo, teléfono y dirección de

establecimiento.

6. Selecciona consultar datos de

cliente.

7. Acceder a la opción buscar

cliente por RUC / CI.

10. Acceder a la opción actualizar

datos del cliente.

11. Ingresar datos a modificar.

Acción Sistema:

2. Mostrar formulario de registro.

4. Registra cliente.

5. Mostrar cliente registrado.

8. Realiza Búsqueda de clientes

en la base de datos.

9. Mostrar clientes encontrados.

12. Guarda los cambios

realizados.


Metodología 54

DIAGRAMA Nº 6

DIAGRAMA DE CASO DE USO ASIGNACIÓN DE SOLICITUD

DE TRABAJO


Metodología 55

CUADRO Nº 15

CASO DE USO “ASIGNACIÓN DE SOLICITUD A USUARIO

TÉCNICO”

CASO DE USO Modulo asignación de solicitud a usuario

técnico

ACTORES

Administrador

TIPO Principal

Flujo de Eventos:

Acción Administrador:

1. Administrador accede a la opción

de asignación de solicitud.

3. Realiza búsqueda de técnico.

6. Selecciona el técnico donde se

asignará la solicitud.

7. Reasignar solicitud ir a la opción

asignaciones.

8. Seleccionar cancelar asignación.

Acción Sistema:

2. Muestra formulario de

asignación.

5. Muestra registro de los técnicos

ingresados en el sistema.

9. Actualiza estado de solicitud ha

ingresada.


Metodología 56

DIAGRAMA Nº 7

DIAGRAMA DE CASO DE USO INGRESO DE ACTIVIDADES DE

SERVICIO TÉCNICO


Metodología 57

CUADRO Nº 16

CASO DE USO “INGRESO DE ACTIVIDADES DE SERVICIO

TÉCNICO”

CASO DE USO Ingreso de actividades de servicio técnico

ACTORES

Técnico

TIPO Secundaria

Flujo de Eventos:

Acción Técnico:

1. Se dirige a la pestaña

solicitudes.

2. Ingresa a la opción solicitudes

asignadas.

4. Escoger tipo de servicio.

6.Ingresar actividades realizadas

durante el servicio.

7. Selecciona registrar datos de

solicitud.

9. Selecciona devolver solicitud

en caso de tener inconvenientes

para no poder realizar el servicio

técnico.

Acción Sistema:

3. Mostrar pantalla de solicitudes

asignadas.

5. Mostrar formulario de registro de

actividades.

8. Almacena actividades de la

solicitud.

10. Actualiza estado de solicitud ha

ingresada.


Metodología 58

DIAGRAMA Nº 8

DIAGRAMA DE CASO DE USO CONSULTA DE REPORTES


Metodología 59

CUADRO Nº 17

CASO DE USO “CONSULTA DE REPORTES”

CASO DE USO Modulo Consulta de Reportes

ACTORES Administrador, técnico

TIPO Secundaria

Flujo de Eventos:

Acción de Actores:

1. Seleccionar la pestaña

reportes.

2. Escoger la opción consultar

reportes.

3. Ingresar datos en filtro de

búsqueda.

6. Ingresar en la opción estado

de reporte.

7. Seleccionar generar PDF.

10. Selecciona actualizar datos

de reporte.

11. Ingresa datos a modificar

en el reporte.

13. Ingresa correo del cliente

para realizar re envío de

reporte.

14. Ingresa filtro de búsqueda.

16. Seleccionar estado.

17. Seleccionar reenviar

correo.

Acción de Sistema:

4. Realiza búsqueda de reportes.

5. Mostrar detalles del reporte.

8. Descarga el formato PDF.

9. Envía reporte al correo del cliente.

12. Actualiza los datos del reporte.

15. Muestra detalles del reporte.

19. Envía reporte al correo del cliente.

Fuente: Investigación de campo Elaborado por: Leandro Prias Samaniego

Metodología 60

2.8 Modelo de dominio

Modelo conceptual de todos los temas relacionados con un problema

específico. En él se describen distintas entidades, atributos, papeles y

relaciones, además de las restricciones que rigen el dominio del problema.

DIAGRAMA Nº 9

MODELO DE DOMINIO


CAPITULO III

LA PROPUESTA

3.1 Tema

PROPUESTA DEL DESARROLLO E IMPLEMENTACIÓN DE UNA

APLICACIÓN WEB PARA EL CONTROL DEL REPORTE TÉCNICO A

CLIENTES MEDIANTE LA FIRMA ELECTRÓNICA EN LA COMPAÑÍA

EIKON

3.2 Objetivos

Desarrollar e Implementar una aplicación web que se encuentre

desarrollado bajo la arquitectura de tres capas de PHP utilizando software

libre y que sea amigable con el usuario.

3.3 Entorno del Software

Para el desarrollo de la aplicación web de Control de Reporte Técnico

a clientes de la compañía EIKON se utilizará la tecnología del lenguaje de

programación PHP para la capa de Negocio, HTML y CSS para la capa de

presentación y para la capa de Acceso a datos se utilizará la plataforma

MySQL. Se establece estas subdivisiones referentes al desarrollo de la

aplicación para que el programador tenga una mejor visión de los

procedimientos, incluyendo la interfaz de usuario y las funciones que se

aplicará para acceder a los datos de la aplicación.

Propuesta 62

3.31 Arquitectura

Se propone trabajar la arquitectura de 3 capas MVC (Modelo-Vista-

Controlador), para tener una estructura ordenada de todo el sistema. La

arquitectura tiene como ventaja en las aplicaciones web permitirles realizar

las actualizaciones de las versiones futuras con eficiencia.

3.3.1.1 Representación modelo mvc (modelo-vista-controlador)

Es un modelo de 3 capas de negocio, el proceso empieza desde la

vista capa de presentación o pantallas de la aplicación, la capa lógica de

negocio o control y la capa de datos o modelo donde se guardará los datos

del reporte. Lo que indica que la vista por ningún motivo tendrá

comunicación directa con el modelo.

3.3.1.2 Capas de desarrollo

Las capas de desarrollo del modelo MVC (Modelo-Vista-Controlador)

es una manera de aplicar estándares en la estructura del componente,

módulos, plugins, etc.

Por lo cual basado a este modelo se ha dividido la estructura del

desarrollo de la aplicación web, a continuación, se describe cada una de

las capas indicando el tipo de proceso que realizará en la aplicación, estas

son:

BEEN. - Es la vista capa de la presentación de la aplicación

básicamente la interfaz o plantilla con la que va interactuar el usuario para

ingresar datos.

Propuesta 63

BO. - Es la capa lógica del negocio (presentación y de acceso a datos)

separando completamente la lógica de negocio de acceso de datos. Aquí

se detallan las funciones que se va aplicar en la aplicación, esta capa es la

intermediaria entre la capa de presentación y la capa de modelo de datos.

DAO. - Es la capa de modelo de datos o base de datos donde los

componentes de acceso a datos encapsulan la tecnología empleada para

acceder a la capa de datos, separando completamente la lógica de negocio

de la lógica de acceso a datos. Es donde se almacenará la información del

cliente y las solicitudes de trabajo realizadas en la base de datos.

Para una mejor comprensión de la comunicación de las 3 capas

visualice el gráfico a continuación:

IMAGEN N° 12

CAPAS DE DESARROLLO

Fuente: https://sites.google.com/site/aunaris2/programacion/modelo-vista---controlador Elaborado por: Prias Samaniego Leandro

Propuesta 64

Esta división entre la capa de presentación y la de la lógica permite

una gran flexibilidad a la hora de construir aplicaciones, ya que se pueden

tener múltiples interfaces sin cambiar la lógica de la aplicación. La tercera

capa se encarga de administrar los datos que se envían a la aplicación,

estos datos pueden estar registrados en una base de datos.

3.3.1.3 Elementos que componen la arquitectura de php

Se describe la comunicación que existe de diferentes partes del

controlador por la que está compuesta la arquitectura, desde el inicio de

ejecución de lenguajes diferentes, a través de extensiones y hacia las

bibliotecas de PHP al final.

IMAGEN N° 13

ARQUITECTURA PHP

Fuente: http://php.net/manual/es/mongodb.overview.php Elaborado por: Leandro Prias Samaniego

Propuesta 65

3.4 Fase de diseño

3.4.1 Modelo - diagramas de clases

En el diagrama de clases se va a presentar las relaciones entre las

clases que compondrán la aplicación web, las funciones y procedimiento

que se utilizan para el tratamiento de la información antes de que sea

ingresada a la base de datos.

Para el desarrollo de la aplicación se propone el siguiente diagrama

de clases y se detalla los atributos que llevará cada uno de los objetos.

DIAGRAMA Nº 10

DIAGRAMA DE CLASE


Propuesta 66

3.4.2 Diagrama de actividades

El diagrama de actividades se va a mostrar el proceso de la aplicación

web como un flujo de trabajo a través de una serie de acciones.

3.4.2.1 Diagrama de actividad correspondiente al proceso de

autentificación de usuario.

DIAGRAMA Nº 11

DIAGRAMA DE ACTIVIDAD AUTENTIFICACIÓN DE USUARIO


Propuesta 67


gestionar usuario técnico.

DIAGRAMA Nº 12

DIAGRAMA DE ACTIVIDAD GESTIONAR USUARIO TÉCNICO


Propuesta 68


ingreso de solicitud de trabajo

DIAGRAMA Nº 13

DIAGRAMA DE ACTIVIDAD INGRESO DE SOLICITUD DE TRABAJO


Propuesta 69


asignación de solicitud de trabajo a usuario técnico

DIAGRAMA Nº 14

DIAGRAMA DE ACTIVIDAD ASIGNACIÓN DE SOLICITUD DE

TRABAJO A USUARIO TÉCNICO


Propuesta 70


ingreso de actividades de servicio técnico.

DIAGRAMA Nº 15

DIAGRAMA DE ACTIVIDAD INGRESO DE ACTIVIDADES DE

SERVICIO TÉCNICO


Propuesta 71


gestionar clientes

DIAGRAMA Nº 16

DIAGRAMA DE ACTIVIDAD GESTIONAR CLIENTES


Propuesta 72


consulta de reporte técnico

DIAGRAMA Nº 17

DIAGRAMA DE ACTIVIDAD CONSULTA DE REPORTE TÉCNICO


Propuesta 73

3.4.3 Modelo entidad relación

El modelo de entidad relación es la base que se diseña para la

aplicación web, esta contiene la base de datos las claves primarias y

foráneas relacionadas entre ellas.

IMAGEN N° 14

MODELO DE ENTIDAD RELACIÓN

Fuente: Desarrollo de Aplicación Web Elaborado por: Prias Samaniego Leandro

Propuesta 74

3.4.3.1 Diccionario de la base de datos

A continuación, se ha realizado el diccionario de base de datos el cual

se elaboró basándose en el Entidad – Relación.

Para ver el modelo de Diccionario de Base de Datos Véase Anexo 3.

3.2.4.2 Lenguaje de programación

Para el desarrollo de la aplicación web se utilizarán las siguientes

herramientas de tecnologías de información más conocidas actualmente en

los proyectos open source., las mencionamos a continuación:

Se utilizará NetBeans que es un entorno de desarrollo libre, una

herramienta para poder escribir, compilar, depurar y ejecutar programas.

Está escrito en Java, pero puede servir para cualquier otro lenguaje de

programación. NetBeans IDE es un producto libre y gratuito sin

restricciones de uso.

La interfaz de esta herramienta es multiplataforma por lo que maneja

múltiples lenguajes de programación permite agregar o quitar módulos,

también es adaptable en el desarrollo rápido de aplicaciones móviles y web,

así como aplicaciones con HTML, JavaScript y CSS. El IDE también

proporciona un gran conjunto de herramientas para el desarrollo en PHP,

C++ y es muy amigable con el usuario. Utiliza plugins que permite modificar

el entorno y mejorar el área donde se está trabajando.

Se utilizará MySQL es un gestor de base de datos completamente

desarrollado en lenguaje C/C++, lo que ofrece una estabilidad de trabajo

impresionante. También, cuenta entre sus características, con una

excelente capacidad de integración con diferentes entornos de desarrollo

de software y de aplicaciones cliente/servidor, por lo tanto, es muy popular

Propuesta 75

entre los programadores de aplicaciones web y entre administradores de

base de datos en todo el mundo con licencia de código abierto GPL en la

versión 5.0.

3.2.5 Diagramas de secuencia

El diagrama de secuencia permite saber la comunicación por medio

de mensajes de las actividades y funciones que interactúan con las capas

del sistema, deja un panorama más claro de lo que se va a realizar en la

aplicación web en el correspondiente orden de ejecución.

La secuencia de las actividades se basa en los diagramas de casos

de uso que fue retro alimentado con el respectivo análisis de los

requerimientos que se obtuvo en la entrevista realizada.

Con el desarrollo de los diagramas de secuencia se obtiene el

funcionamiento del sistema de forma visual.

Luego se determina las funciones o procedimientos claves que se

ejecutaran en lo largo de los distintos procedimientos.

Es importante saber el tipo de mensaje que es enviado a cada capa

una de las funciones para interpretar mejor el diagrama.

A continuación, tenemos los siguientes elementos:

• Gestión de Usuario Técnico

• Gestión de Clientes

• Creación de Solicitud de Trabajo

• Asignación de Solicitud de Trabajo

• Ingreso de Actividades de Servicio Técnico

• Consultar Reportes

Propuesta 76

3.5.1 Diagrama de secuencia gestión de usuario

técnico

DIAGRAMA Nº 18

DIAGRAMA DE SECUENCIA GESTIÓN DE USUARIO TÉCNICO

Fuente: Desarrollo de Aplicación Web Elaboración: Prias Samaniego Leandro

Elementos:

▪ Pantalla de Inicio de Sesión de Usuario interfaz web.

▪ Validación de Usuario envío de datos direccionamiento de datos.

▪ Verificación de credenciales de usuario administración de datos.

▪ Formulario de ingreso de técnico interfaz web.

▪ Registro de técnico administración de datos.

Propuesta 77

3.5.2 Diagrama de secuencia gestión de clientes

DIAGRAMA Nº 19

DIAGRAMA DE SECUENCIA GESTIÓN DE CLIENTES


Elementos:

▪ Buscar datos cliente interfaz web.

▪ Ingresar cédula o RUC envío de datos direccionamiento de datos.

▪ Consulta de cliente administración de datos.

▪ Formulario de ingreso de cliente interfaz web.

▪ Registro de cliente administración de datos.

Propuesta 78

3.5.3 Diagrama de secuencia ingreso de solicitud de

trabajo

DIAGRAMA Nº 20

DIAGRAMA DE SECUENCIA INGRESO DE SOLICITUD DE TRABAJO


Elementos:

▪ Presenta formulario creación de solicitudes de trabajo interfaz web.

▪ Formulario de datos para enviar datos de solicitud de trabajo

direccionamiento de datos.

▪ Administración de datos para generar solicitud.

Propuesta 79

3.5.4 Diagrama de secuencia asignación de solicitud

de trabajo

DIAGRAMA Nº 21

DIAGRAMA DE SECUENCIA ASIGNACIÓN DE SOLITUD DE

TRABAJO


Elementos:

▪ Pantalla de solicitudes registradas administración de datos.

▪ Usuarios ingresados direccionamiento de datos.

▪ Solicitud de trabajo asignada interfaz web

Propuesta 80

3.5.5 Diagrama de secuencia ingreso de actividades de

servicio técnico

DIAGRAMA Nº 22

DIAGRAMA DE SECUENCIA INGRESO DE ACTIVIDADES DE

SERVICIO TÉCNICO


Elementos:

▪ Filtrar registro de trabajo interfaz de usuario.

▪ Formulario de estado de reporte direccionamiento de datos.

▪ Envío consulta reporte administración de datos.

▪ Formulario de actualización de reporte administración de datos.

Propuesta 81

3.5.6 Diagrama de secuencia consultar reportes

DIAGRAMA Nº 23

DIAGRAMA DE SECUENCIA CONSULTAR REPORTES


Elementos:

▪ Pantalla de búsqueda de reportes realizados interfaz web.

▪ Generar Reporte PDF direccionamiento de datos.

▪ Envío de PDF a correo administración de datos.

▪ Re envío de Reportes administración de datos.

Propuesta 82

3.6 Descripción de desarrollo de la aplicación

Se va a desarrollar una aplicación web que permita realizar un

seguimiento de las visitas técnicas que parte desde la creación de la

solicitud de trabajo por pedido del cliente, luego de estar creada la solicitud

de trabajo se le asignará un técnico para que proceda con la visita a la

organización, en caso de que el técnico asignado tenga inconvenientes en

no poder realizar el trabajo, tendrá una opción para devolver la solicitud y

está sea nuevamente re asignada por el administrador a otro técnico del

área y pueda concluir con el trabajo.

Se crearán 2 roles de usuario uno para usuario administrador que

tendrá acceso a todas las opciones del sistema y otro para usuario Admin

que contará con un límite de opciones de la aplicación, sólo el usuario

administrador será el encargado de poder agregar y asignar permisos para

los nuevos usuarios.

El técnico al ingresar a la aplicación con su respectivo usuario y

contraseña va a poder visualizar las solicitudes de trabajo que le fueron

asignadas por el analista de sistema o administrador, luego de revisar el

motivo por el que fue generada la solicitud podrá filtrar el motivo de visita y

elegir el tipo de registro para realizar el trabajo y generar el reporte entre

las dos opciones que cuenta el aplicativo que son: registro de visita y

registro de mantenimiento.

Al generarse el reporte se enviará el documento PDF con el detalle

del trabajo realizado el cual contiene la firma adjunta del técnico asignado,

estos datos le llegarán al correo del cliente que fue ingresado al momento

de generar la solicitud de trabajo.

Cada reporte técnico llevara un código que se va a generar apenas el

documento sea creado para evitar las repeticiones y facilitar la búsqueda

Propuesta 83

del mismo desde la base de datos que solo tendrá acceso el personal de

usuario técnico y administrador.

El cronograma de elaboración de este proyecto se puede observar en

el Anexo Nº 4 “Cronograma de Elaboración de Aplicación Web”.

3.7 Estudio de factibilidad

Establecer la factibilidad del desarrollo de la aplicación web es la

primordial forma de sustentar su implementación, en este estudio se relata

varios aspectos donde se analiza su facilidad.

Se determinará o viable del proyecto de desarrollo de la aplicación

web de tres formas principales: técnica, económica y operativa.

3.7.1 Factibilidad técnica

La aplicación web será de escritorio con el enfoque Cliente –

Servidor en donde el cliente en este caso será el técnico que se conecta a

servidor por vía internet para enviar la información y generar los reportes

técnicos esta aplicación será desarrollada en el lenguaje PHP y la

información se guardará en una base de datos MySQL.

Actualmente la compañía EIKON S.A. cuenta con equipos de

computación en las instalaciones que son compatibles con el aplicativo web

y que están disponibles para poder ser utilizados y para el correcto

funcionamiento de la aplicación web.

A continuación, se detallan las características técnicas de los

equipos técnicos que se encuentran en las instalaciones del área de

sistemas y son usadas por los técnicos del área para dar asistencia técnica

a los clientes:

Propuesta 84

CUADRO Nº 18

CARACTERISTICAS TÉCNICAS DE COMPUTADORA DE USUARIO

Toshiba Satellite L55-B

Procesador Intel® Core™ I5 5200U 2,2 GHz

Memoria DDR3L – SDRAM de 6GB, 1600MHz

Disco Duro Sata 3.0 Gb/s de 1 TB, 5400 rpm

Lector de Disco DVD SuperMulti SATA

Periféricos 1 RJ-45, 1 VGA

Pantalla LED 15.6” de diagonal (1366 x 768)

Sistema

Operativo

Windows® 8.1 PRO


A continuación, se detallan las características técnicas del servidor

donde se instalará la aplicación web y la base de datos MySQL que

almacena los datos del sistema:

CUADRO Nº 19

CARACTERISTICAS TÉCNICAS DEL SERVIDOR DE LA EMPRESA

HP Desktop 460-P009NS

Procesador Intel® Core I5 6400U 2,2 GHz

Memoria DDR4 – SODIMM de 8GB, 2133MHz

Disco Duro Sata 3.0 Gb/s de 1 TB, 7200 rpm

Lector de Disco DVD + /-RW SuperMulti SATA

Periféricos 1 RJ-45, 1 VGA

Monitor ACER 18.5” V196HQLAB LED

Sistema Operativo Windows® 7 Ultímate


Propuesta 85

Para la implementación y ejecución se explica lo siguiente:

I. Los equipos con lo que cuenta la compañía cumplen con las

características recomendadas para un buen funcionamiento y

ejecución del lenguaje de programación y el motor de base de datos.

II. Se utiliza una herramienta de desarrollo de software y un gestor de

base de datos con licencias de tipo GPL.

III. Se instalará el servidor de plataforma independiente XAMPP, para

cargar la base de datos y la carpeta que contiene la aplicación en

una de los servidores del área de sistemas.

IV. La carpeta que contiene el proyecto del aplicativo web será subida

al servidor para que los técnicos puedan acceder a ella vía Internet.

Técnica es factible la implementación y ejecución del aplicativo web

en el servidor que cuenta la empresa dado que si cumple los requisitos y

las especificaciones técnicas.

3.7.2 Factibilidad económica

Los recursos técnicos y humanos necesarios para el desarrollo de

este proyecto se detallan a continuación:

✓ Un servidor

✓ Laptop

Como evaluación de la factibilidad económica se tiene lo siguiente:

➢ Costo de hardware para el proyecto no tendrá ningún costo ya que

la empresa cuenta con los recursos.

Propuesta 86

➢ Costo de software y licencias es totalmente nulo siempre y cuando

se respeten las cláusulas de uso GPL del entorno de desarrollo y del

motor de la base de datos.

➢ Las licencias de sistemas operativos ya están incluidas desde el

momento que se adquirieron los equipos.

➢ Los costos de Recursos Humanos se detallan a continuación en

horas hombre para la elaboración del sistema.

CUADRO Nº 20

RECURSOS

ITEM N Horas

/

Semana

Cantidad

/Semana

Valor /

Hora

Valor /

Semana

Valor /

Total

Desarrollador 7 5 $18 $126 $630

Internet 5 $50 $50

Gasto de

Transporte

5 $50 $50

Total de Recursos

Humanos

$730


Es conveniente administrar y desarrollar la aplicación web ya que la

valoración económica considera recursos que existen actualmente en la

empresa. Por lo que no es necesario realizar fuertes gastos,

económicamente es factible porque no toca incurrir en gastos adicionales

de hardware y software porque el desarrollo del aplicativo en netamente

abstracto a su vez el desarrollo será ejecutado por el investigador del

proyecto para la compañía.

Propuesta 87

3.7.3 Factibilidad operacional

El principal valor agregado que entregará el sistema, es que permita

facilitar el control de los reportes técnicos mediante estados que le permitirá

saber al analista si el trabajo ya ha sido realizado o puede asignar la tarea

a otro técnico en caso que se presente un improvisto al técnico asignado y

también al ser generados los reportes en de formato digital facilitando el

almacenamiento y dando una mejor presentación del servicio al cliente,

también existen otros recursos tales como:

1. Optimizar los procesos

2. Minimizar la perdida de los reportes técnicos

3. Ahorro de Impresión de Reportes

Dicho esto, se considera factible desde el punto de vista operacional

la implementación de esta aplicación web.

3.7.4 Implementación

Las actividades que se realizaran para poner en funcionamiento el

sistema de información o aplicación web son las siguientes:

A. Al instalación y configuración del servidor tendrá una duración de 2

horas laborales fuera de los horarios de oficina, para evitar

inconvenientes y retrasos en el cumplimiento de tareas con los

trabajadores.

B. Se instalará el programa Xampp en el servidor para el levantamiento

aplicativo web que estará en una carpeta y se habilitara la base de

datos MySQL.

C. Para la capacitación de los usuarios del área técnica se tomará 1

hora y media en la sala de reuniones de la compañía que será

Propuesta 88

coordinado para un horario no laborable con el personal de recursos

humanos.

D. Se utilizarán equipos de la empresa como el proyector y laptop.

E. Se entregará un manual de usuario del funcionamiento la aplicación

web para que los usuarios se respalden en caso de alguna duda.

F. Se configurarán al usuario administrador con sus permisos de

acceso al sistema también al usuario técnico.

G. Una vez implementado se realizarán 3 días de pruebas con el

aplicativo web.

H. Se realizará una documentación detallada de los requisitos para la

instalación de la Aplicación Web.

I. Se realizará la entrega formal del sistema a los usuarios mediante la

firma de un acta de entrega donde se aprueba la solución.

3.7.5 Mantenimiento

El mantenimiento del almacenamiento de los archivos que genere la

aplicación web, es recomendable que se realice de manera preventiva esta

puede ser trimestral o semestral dependiendo del flujo de reportes

generados.

Se manejará un proceso interno para realizar un respaldo mensual de

la base de datos de la aplicación que será coordinada con el DBA de la

compañía para optimizar el proceso y este sea llevado de manera

automática en una nueva ruta del servidor.

En caso de nuevos requerimientos debe ser por medio de una

correspondiente solicitud de requerimientos que será analizada para

posteriormente hacer el levantamiento de información que será realizado

en conjunto con el analista del área de soporte para establecer las

funciones nuevas que tendrá la aplicación.

Propuesta 89

3.7.6 Impacto

A continuación, se describe el impacto que recibirá la empresa:

a) Con la aplicación web se reducirá los gastos de servicios de

imprenta para el diseño de los reportes técnicos, que se destina en

un 10% incluido en el gasto de suministros de oficina.

b) Se mejorará el proceso de asistencia técnica que se realiza con los

clientes y a su vez el control por cada solicitud de trabajo que se

genere, y el almacenamiento de los reportes técnicos.

A continuación, se detallan los indicadores a través de los cuales se

medirá el impacto que tendrá el sistema:

CUADRO Nº 21

DETALLE DE INDICADORES DE IMPACTO

Indicador Formula Resultado Frecuencia

Reducción de suministros de

oficina

[(Valor Mes

Anterior – Valor Mes Actual) /

Valor Mes Actual] *100

Ahorros de

suministros de Oficina 10%

Mensual

Mejora del proceso de asistencia

técnica

Horas Mes Anterior – Horas Mes

Actual

Número de

horas extras por levantamiento

de reporte extraviado

Mensual

Fuente: Investigación directa Elaboración: Prias Samaniego Leandro

Propuesta 90

3.8 Conclusiones

Después del desarrollo e implementación de la aplicación web para

realizar el control de reportes técnicos a clientes de la propuesta planteada

se concluye lo siguiente:

La aplicación permitirá llevar un control de cada solicitud de trabajo

que es generada antes de realizar la visita técnica, mediante estados de la

solicitud el administrador o analista podrá saber si la visita ha sido

realizada.

La aplicación tendrá un menú interactivo que le permitirá al

administrador asignarle los permisos que crea necesarios al técnico.

Se optimiza el proceso de control de visitas técnicas con la creación

de las solicitudes de trabajo que es generada solamente por el analista o

administrador del sistema, la cual será registrada en la base de datos de la

aplicación.

En la base de datos se logra tener un orden de la información y esto

permite generar con facilidad los reportes técnicos dando un mejor respaldo

a cada asistencia técnica realizada.

Se logra eliminar el reporte físico de esta forma se ahorra en gastos

de imprenta por elaboración de fichas técnicas, existirá un mejor control de

la información ya se encontrará de forma ordenada y precisa que también

se podrá consultar a través de filtros. También se minimiza el margen de

error por duplicidad o daño del reporte en físico por mal uso.

Se utilizará la firma electrónica para darle veracidad al documento

electrónico y a su vez tener validez para procesos legales como la

Auditoría.

Propuesta 91

Se reorganiza todo el proceso de servicio técnico a los clientes de la

compañía, que se inicia desde la recepción de la solicitud de trabajo

solicitada por el cliente hasta que el técnico asignado realicé el respectivo

trabajo en las instalaciones.

El servidor de correo del aplicativo al generar el envío del reporte PDF

al cliente, automáticamente se enviará un respaldo del mismo.

Se optimizará los recursos tecnológicos de la empresa, dando paso a

la iniciativa de procesos con cero papeles aportando a la preservación del

medio ambiente.

3.9 Recomendaciones

Después de haber realizado el desarrollo e implementación de la

aplicación web, dado ciertos puntos de vistas encontrados se puede

recomendar lo siguiente:

Para realizar cambios en la aplicación como el ingreso de nuevos

campos debe tener en cuenta la capa de la aplicación que será afectada.

Se recomienda que solo el personal previamente capacitado haga uso

del sistema para evitar envíos de reportes con datos erróneos.

Se recomienda verificar que los campos del reporte estén completos

para que se pueda generar el documento PDF correctamente.

Realizar un back up de los reportes generados en la base de datos,

de forma semanal o mensualmente para garantizar un mejor respaldo de

los trabajos realizado.

GLOSARIO DE TÉRMINOS

Asignación: Trata del acto de y el resultado de asignar: indicar,

establecer u otorgar aquello que corresponde.

Control: Hace referencia al dominio, mando y preponderancia o a la

regulación sobre un sistema.

Estado: Es una configuración única de información en un programa o

máquina.

Menú: Es una serie de opciones que el usuario puede elegir para

realizar determinadas tareas

Open Source: Código Abierto, tipo de software que no requiere

licenciamiento y que pone su código fuente a disposición del público sin

restricciones.

Plugins: Programas que pueden anexarse a otro para aumentar sus

funcionalidades (generalmente sin afectar otras funciones ni afectar la

aplicación).

Reporte: Informe o noticia de tipo documento que puede ser impreso,

digital o audiovisual, etc., con la finalidad de transmitir información.

Solicitud: Cualidad de la persona solícita o dispuesta a servir y

satisfacer a los demás. Otro concepto es que la solicitud inicia el trámite de

una acción no contenciosa.

ANEXOS

Anexos 94

ANEXO Nº 1

ENTREVISTA REALIZADA AL GERENTE EN LAS OFICINAS DE LA

COMPAÑÍA EIKON

1. ¿Cómo se manejan actualmente para gestionar los reportes

técnicos que se llevan a cabo con los clientes?

Actualmente se lleva a cabo un procedimiento manual, que inicia desde la

solicitud de la visita técnica que hace el cliente, que luego es asignada por

el analista al personal técnico o helpdesk, donde se le indica los

antecedentes del problema, el sistema que maneja el cliente y las posibles

medidas que puede seguir para resolver la resolución del servicio técnico,

después se le entrega una ficha de reporte para que describa los datos del

cliente con la descripción del sistema y los pasos que realizo para resolver

el inconveniente, al finalizar se firma el documento y se entrega una copia

de la ficha al cliente como constancia del trabajo realizado, otra copia al

analista como soporte de la solicitud atendida y la original se entrega al

área de cobranzas donde se encargaran de emitir la factura del servicio

prestado.

2. ¿Existe algún tipo de sistema para consultar documentos

digitalizados? ¿Cómo realizan las consultas?

La empresa cuenta con un módulo de facturación electrónica donde se

ingresar los datos de la factura y luego se envía al SRI para su respectiva

autorización, luego de la autorización del documento se archiva el PDF de

la factura.

En este caso se hacen consultas de las facturas autorizadas desde un

portal web que viene ser un repositorio de los documentos autorizados por

el SRI.

Anexos 95

3. ¿Existe un manual de procesos para que el personal técnico o

helpdesk asignado pueda llevar a cabo el soporte técnico y en el

caso que sea novato en el área qué medidas se toman?

Actualmente no se cuenta con un manual de procedimientos con los pasos

para realizar la visita técnica desde la asignación del analista al personal

de técnico hasta la corrección y resolución del servicio técnico, para este

caso el analista le da indicaciones de forma verbal haciendo un breve

resumen de la solicitud del cliente y como llenar la ficha técnica, luego le

hace la entrega de la ficha técnica para que ingrese lo antecedentes y le

indica que módulo del sistema debe chequear, en el caso que el técnico

asignado es nuevo en el área se le da una rápida inducción del proceso

llevado por el analista de sistemas para que el técnico pueda responder a

la solicitud del cliente.

4. ¿Existe algún problema con la documentación de los reportes

técnicos luego de finalizar con la visita técnica? ¿Y Por qué?

Se ha diagnosticado que en el proceso correspondiente a la visita técnica

se presentan algunos inconvenientes con la documentación de los reportes

técnicos realizados por distintas razones entre las cuales bajo distintos

puntos de vista se ha llegado a la conclusión de que son las siguientes

como:

1) Falta de control por el analista de sistema en la entrega de los

reportes técnicos realizados por el personal técnico o helpdesk.

2) Mezcla de los reportes con documentación de facturación en

los folders de la compañía.

3) Daño o pérdida del reporte físico por mala manipulación.

Anexos 96

5. ¿Los clientes saben solicitar respaldos adicionales de los trabajos

realizados, en el caso de extraviar el documento?

Muchas veces los clientes tienen este inconveniente ya sea por descuido o

mala manipulación del respaldo físico que se les entrega al finalizar el

trabajo, por lo cual saben solicitar nuevamente documento para informarles

a sus superiores de los trabajos realizados y llevar un registro de las

medidas fueron tomadas para la corrección y resolución del servicio

técnico. En ocasiones que se presenta el caso se le hace llegar una copia

en físico a sus instalaciones para su respectivo uso.

6. ¿Por qué le gustaría llevar un mejor control de los reportes

técnicos?

Para brindar un mejor servicio y tener un mejor control de seguimiento de

visitas técnicas que se lleva a cabo con los clientes, también ayudaría en

la documentación del procedimiento de los mantenimientos mensuales que

se da a los servidores de los clientes que tienen contrato de mantenimiento

mensual con la compañía.

7. ¿Qué aporte cree usted que le daría una aplicación web de

documentación de reportes técnicos a la organización?

Sería de gran ayuda ya que daría una mejor presentación a la empresa con

los clientes que le prestamos servicios y le da a conocer que la empresa le

gustan los cambios con la optimización de los procesos internos de la

compañía para brindarles una mejor atención, a su vez se llevaría un mejor

control de la documentación de reportes técnicos y no habría perdida de

los mismos o retrasos en cobros por trabajos realizados donde no se

encontraba el detalle del soporte de la visita realizada.

Anexos 97

8. ¿Cómo le gustaría llevar la digitalización y documentación de los

reportes técnicos?

Que sea de manera online por medio del ingreso de un aplicativo web con

un usuario y contraseña para que el analista o personal técnico que este

asignado en la visita esto mismos puedan ingresar los datos y generar el

documento digital de cada visita realizada. Y luego este permita llevar un

almacenamiento de cada visita realizada en una base de datos para que

luego se pueda hacer consultas de las visitas que se le han realizado a los

clientes.

En el caso que el cliente solicite una copia de respaldo de una de las visitas

se pueda realizar un envío desde el aplicativo al correo del cliente.

9. ¿Cómo le gustaría que sean los reportes?

Con respecto a los reportes finales que se van a generar del aplicativo se

resumieron las siguientes funciones para cubrir con las necesidades de la

aplicación web se solicita que cumplan las siguientes definiciones:

I. Que puedan ser visualizados en formato PDF

II. Fácil interpretación en la presentación de las descripciones

III. Posea los campos correspondientes más importantes para

que se almacenen.

IV. Que se puedan almacenar imágenes en el caso que lo

requiera.

V. Que posea una personalización con el logo y color de la

compañía.

VI. Que cada reporte tenga su propio código de identificación

para evitar las repeticiones.

Anexos 98

ANEXO Nº 2

DIAGRAMA DE ISHIKAWA

Fuente: Investigación Directa Elaboración: Prias Samaniego Leandro

Anexos 99

ANEXO Nº 3

DICCIONARIO DE DATOS




Anexos 100




Anexos 101



Anexos 102



Anexos 103

ANEXO Nº 4

CRONOGRAMA DE ELABORACIÓN DE

APLICACIÓN WEB



Anexos 104



Anexos 105

ANEXO Nº5

PANTALLAS DE LA APLICACIÓN



Anexos 106



Anexos 107



Anexos 108



Anexos 109



Anexos 110



Anexos 111


Anexos 112


Anexos 113


Anexos 114

ANEXO Nº 6

INSTRUCTIVO DE INSTALACIÓN DE APLICACIÓN WEB

Finalidad del documento

Este documento permite al usuario conocer como está estructurado el

aplicativo web, la manera de como instalar, configurar y ejecutar el

aplicativo.

Análisis y requerimientos del sistema

El sistema se lo considera de tipo web ya que tiene la ventaja de poder

acceder desde cualquier dispositivo con acceso a internet. El aplicativo

puede correr en diferentes sistemas operativos Linux, Windows.

Se necesita un intérprete del lenguaje php en este caso se requiere de un

servidor Apache que soporte el lenguaje PHP en su versión 5.5 en adelante

no puede ser menor.

Librerías de extensión mysqli, Base de datos MySQL o maria db.

Una gestor o administrador de base de datos ejemplo phpmyadmin.

Para una instalación local se puede instalar XAMPP, WAMP etc.., este

incluye apache, php y MySQL.

Una herramienta para el desarrollo en este caso se recomiendo NetBeans

en su versión 8 o superior.

Anexos 115

Instalación

Crear la base de datos en MySQL, por medio de un administrador grafico

asignar un nombre a la base y cargar el respaldo el cotejamiento de la base

es utf8. Configurar el archivo de conexión en el proyecto colocar el nombre

de la base de datos y contraseña.

Configurar la ruta de descarga de los reportes.

Anexos 116

Una vez configurado el aplicativo si está en Linux iniciar los servicios de

apache y MySQL y acceder desde al navegador al Login del sistema.

Preguntas Frecuentes

a) ¿No aparece en el navegador el sistema?

Verifique que los servicios de apache y MySQL estén corriendo. Revise si

la carpeta del proyecto está colocada la ruta correcta, depende del sistema

operativo.

b) ¿No puede ingresar al sistema?

Verifique que el nombre de la base está correcto. Compruebe que el

usuario y contraseña sean los indicados.

c) ¿No envía los reportes el cliente?

Revise si la ruta de descarga es la correcta. Compruebe que no exista

firewall que bloquen él envió de correos o archivos adjuntos.

d) ¿No puedo ver la contraseña de usuario en la base?

Por seguridades el campo de contraseña este encriptado y además las

tablas contiene campos de auditora para saber que usuario registro o

modifico y en qué fecha lo realizo.

Anexos 117

ANEXO Nº 7

MANUAL DE USUARIO

APLICACIÓN WEB PARA EL CONTROL DE REPORTE TÉCNICO A

CLIENTES UTILIZANDO FIRMA ELECTRÓNICA EN LA COMPAÑÍA

EIKON

Anexos 118

Tabla de contenido

Inicio de sesión…………………………………………...…………………..119

Menú principal del sistema……………………………………………..……119

Registro de solicitudes……………………………………………………….120

Actualizar solicitud……………………………………………………………121

Asignar solicitud………………………………………………………………122

Registro de usuario técnico…...……………………………………….…….122

Registro de clientes…………………………………………………………..124

Solicitudes asignadas……………………………………………..…………126

Registro visita/mantenimiento….……………………………………..…….127

Consultar reportes……………………………………………………………128

Generar reporte………………………………………………………………129

Anexos 119

Inicio de sesión

1.- El usuario debe ingresar su respectivo usuario y contraseña para

acceder a las opciones de la aplicación web.

Menú principal del sistema

2.- Al ingresar al sistema visualizará las opciones dele menú, y las demás

opciones para poder realizar el seguimiento de las solicitudes de trabajo del

servicio técnico.

Anexos 120

Registro de solicitudes

1.- Para registrar una solicitud se debe acceder a la opción Registro-

>Clientes->crear solicitud en esta pantalla se visualiza los clientes

registrados para realizar la visita técnica.

2.- Para registrar una nueva solicitud se debe dar clic al icono el cual

permitirá visualizar una pantalla de registro.

Anexos 121

3.- Se deben llenar los campos correspondientes para generar una nueva

solicitud de trabajo.

Actualizar solicitud

1.- Para realizar la actualización de los datos se debe dar clic en el ícono.

2.- Esta acción permitirá editar los datos que se registraron al momento de

crear la solicitud del trabajo, por medio de un formulario para su

modificación, cabe mencionar que al momento de registrar datos o

actualizarlos el sistema guarda la fecha de registro o modificación y el

usuario que lo realizo en la base de datos.

Anexos 122

Asignar solicitud

1.-Para realizar la asignación de una solicitud al técnico se debe hacer clic

en el ícono luego se cargarán los datos principales de la solicitud y

un combo para seleccionar el técnico al cual será asignada la solicitud.

2.- Al momento se asignar la solicitud pasará de estado solicitado a

asignado y ya no se la podrá ver en la pantalla se solicitudes ya que esta

solo muestra las ingresadas y devueltas.

Registro de usuario técnico

1.- Para crear un nuevo usuario se debe dar clic en el ícono registrar usuario

luego de ingresar los datos escoger el tipo de usuarios que pueden ser:

I. Súper Admin (Tiene acceso a todas las opciones del sistema).

II. Administrador (Tiene acceso a ciertas opciones del sistema).

Anexos 123

III. Usuario (solo tiene acceso a la pantalla de consulta de Solicitudes).

IV. Para registrar un usuario se lo realiza desde la siguiente ruta

Registro->Usuarios.

2.- Al dar clic en registrar nuevo usuario se abrirá el siguiente formulario.

Anexos 124

3.- Se debe llenar todos los campos los más relevantes son la firma ya que

esta aparecerá en el reporte final, la firma debe ser previamente agregada

en la carpeta firma del proyecto y después agregando el nombre en el

campo firma del formulario.

4.- Está pantalla cuenta con las siguientes opciones adicionales como

actualizar, eliminar a los usuarios con los siguientes iconos Actualizar

Eliminar.

5.- Cabe mencionar que al momento de eliminar solo es de manera lógica

es decir que en la base no se elimina el registro solo se lo inactiva.

Registro de clientes

1.- Primero se realiza una consulta si el cliente se encuentra registrado, si

no se encuentran registros se procede a crearlo.

2.- Ingresa el RUC o CI del cliente que desea consultar.

Anexos 125

3.- Para registrar un usuario se debe dar clic al icono el cual nos

mostrara la siguiente página.

4.- Se debe llenar todos los campos los más relevantes.

5.- El sistema permite actualizar, eliminar a los usuarios con los siguientes:

▪ Ícono Actualizar

▪ ícono Eliminar

Cabe mencionar que, al momento de eliminar al cliente, solo es de manera

lógica es decir que en la base no se elimina el registro solo se lo inactiva.

Anexos 126

Solicitudes asignadas

Esta opción el administrador puede revisar las solicitudes que le han sido

asignadas al técnico correspondiente.

1.- El administrador debe ir a la siguiente ruta Solicitudes->Solicitudes

Asignadas.

2.- El sistema le mostrará el estado de las solicitudes si ya fueron atendidas.

3.- El analista podrá devolver la solicitud para que sea reasignada a un

nuevo técnico en caso de error. La solicitud cambia de estado asignado a

devuelto y esta aparecerá de nuevo en la pantalla de solicitudes del súper

Admin.

Anexos 127

Registro visita/mantenimiento

1.- El técnico debe ingresar con su usuario y contraseña, luego dirigirse a

la pestaña de solicitudes.

2.- EL técnico escoge el tipo de reporte para realizar el servicio técnico y

crear el PDF.

Anexos 128

3.- Luego procede a llenar los campos correspondientes a la visita realizada

y registrar la información.

Consultar reportes

1.- Para acceder a esta pantalla la ruta es la siguiente Reportes->Consulta

Reportes

2.- Esta pantalla permite consultar por los siguientes filtros:

✓ Código de la solicitud.

✓ Apellidos del cliente.

✓ Cedula o Ruc.

✓ Fecha de registro del trabajo.

✓ Tipo de Motivo.

3.- Esta opción está habilitada para todos los usuarios, pero solo el usuario

Súper Admin tiene los permisos para eliminar los registros.

4.- En la opción reporte permite al usuario tener una vista de los datos

ingresados, pero sin la posibilidad de editarlos ya que estos datos llenaran

el reporte ya sea el de visita o mantenimiento.

Anexos 129

Generar reporte

1.- Se debe filtrar el reporte que se desea generar.

2.- Hacer clic en la opción estado del reporte cargará un formulario con los

datos del reporte a generar.

4.- Hacer clic en generar PDF.

5.- Al generar el PDF envía al correo al cliente y luego descarga el PDF.

Anexos 130

Al dar clic en la opción Generar Reporte se creará el reporte y se realizará

tres acciones.

I. Descarga del Reporte.

II. Envió del reporte al correo del cliente.

III. Copia del reporte al correo de la empresa.

Al dar clic en la opción Reenviar correo se re enviará el documento adjunto

al nuevo correo ingresado.

Luego de haber realizado el envío el cliente recibirá el documento PDF del

servicio técnico que se realizó.

Anexos 131

Adicionalmente cabe indicar que le sistema es responsivo es decir se

puede adaptar a cualquier dispositivo.

BIBLIOGRAFÍA

Álvarez, M., & Álvarez, A. (2016). Introducción a la Sintaxis PHP. Obtenido

de https://desarrolloweb.com/articulos/307.php

Alarcón, V. F. (2006). Desarrollo de Sistemas de Informacion . En Una

metodología basada en el modelado (pág. 33). Barcelona: Ediciones

UPC.

Arías Pou, M. (2006). Manual Práctico de Comercio Electrónico. La Ley.

Banco Central del Ecuador. (2016). Certificación Electónica. Obtenido de

https://www.eci.bce.ec/

Brunet, N. (2015). Protección de datos y gestión documental: Decálogo

ampliado para la sociedad de información. Revista de la Facultad de

Derecho, 207. doi:DOI: http://dx.doi.org/10.22187%2Frfd20152

Cobo, A., Gómez, P., Pérez, D., & Rocha, R. (2005). En PHP y MySQL

Tecnología para el desarrollo de aplicaciones. España: Diaz de

Santos.

Esteban Navarro, M. (2001). El Profesional de la Información. Obtenido de

http://www.elprofesionaldelainformacion.com/contenidos/2001/dicie

mbre/9.pdf

Fernández C., P. (10 de Marzo de 2016). Archivista. Obtenido de

https://archivista.wordpress.com/tag/documentos-electronicos/

Bibliografía 133

García, A. (17 de 03 de 2017). Master Sitios. Obtenido de

http://mastersitios.com/todo-sobre-css3/herencia-y-cascada.html

González, E. M. (16 de Junio de 2014). Universo el periódico de los

Universitarios. Obtenido de

https://www.uv.mx/universo/566/infgral/infgral_13.html

Gutierréz, P. (15 de Enero de 2013). Genbeta. Obtenido de

https://www.genbetadev.com/seguridad-informatica/que-son-y-

para-que-sirven-los-hash-funciones-de-resumen-y-firmas-digitales

Iconix. (2016). Better Agile Methodology and Project Management.

Obtenido de http://www.iconixsw.com/

Molina, L. (12 de Marzo de 2013). Desarrollo de Aplicaciones para

ambientes distribuidos. Obtenido de

https://laurmolina7821.wordpress.com/1-1-3-aplicaciones-de-2-3-y-

n-capas/

Palomeque Ávila, Jhon. (2015). Implementación de Certificados Y Firmas

Digitales para Sistemas de Información Transaccionales en una

Empresa Gubernamental. (Tesis de Magister), Escuela Superior

Politécnica del Litoral - Espol, Guayaquil, Ecuador.

Parkes, S. (2015). Media Centre. Obtenido de

http://www.itu.int/net/pressoffice/press_releases/2015/57-

es.aspx#.WCioWfnhCCh

Perez, F. (28 de 06 de 2016). Yeeply. Obtenido de

https://www.yeeply.com/blog/ejemplos-desarrollo-de-aplicaciones-

web/

Bibliografía 134

Rodríguez, B., & Viega, M. J. (2007). Documento Electrónico y Firma

Digital. Viega & Asociados.

Rodriguez, J. (2015). Realsec. Obtenido de

http://www.realsec.com/noticias/firma-digital-sello-tiempo-cifrado-

documentos/

Rouse, M. (Enero de 2015). Teach Target. Obtenido de

http://searchdatacenter.techtarget.com/es/definicion/MySQL

Secur-IT. (12 de Abril de 2017). Secur-IT. Obtenido de

https://securitcrs.wordpress.com/firma-electronica/

Soler, J. (2008). La preservación de los Documentos Electrónicos. Editorial

UOC.

Solorio, M. (16 de 04 de 2013). Metodologia en Cascada. Obtenido de

http://metodologiaencascada.blogspot.com/

Suarez, J. (2015). Ecuavisa. Obtenido de

http://www.ecuavisa.com/articulo/noticias/actualidad/106184-

usabilidad-internet-se-incrementa-ecuador-segun-inec

The Group Php. (2016). The Group Php. Obtenido de The Group Php:

http://php.net.

UNIVERSIDAD DE GUAYAQUIL FACULTAD DE INGENERÍA...

Documents

Transcript of UNIVERSIDAD DE GUAYAQUIL FACULTAD DE INGENERÍA...