Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
“UNIANDES - IBARRA”
CARRERA DE SISTEMAS
TEMA:
AMBATO - ECUADOR
2016
CERTIFICACIÓN DEL ASESOR
Es todo cuanto puedo decir en honor a la verdad, facultando al interesado hacer el trámite
respectivo para la evaluación por parte del jurado que designe la Institución.
Atentamente,
DECLARACIÓN DE LA AUTORÍA DEL PROYECTO
Atentamente,
-----------------------------------
Hernando Ortega
Autor
DEDICATORIA
1.INTRODUCCIÓN……………………………………………………………………...1
1.1 Antecedentes de la Investigación ................................................................................. 1
1.2 Planteamiento del problema......................................................................................... 2
1.3 Formulación del problema ........................................................................................... 3
1.4 Delimitación del problema........................................................................................... 3
1.5 Objeto de investigación y campo de acción................................................................. 3
1.6 Identificación de la línea de investigación ................................................................... 3
1.7 Objetivo General .......................................................................................................... 3
1.8 Objetivos Específicos .................................................................................................. 4
1.9 Idea a Defender ............................................................................................................ 4
1.10 Justificación del tema................................................................................................. 4
1.11 Metodología investigativa a emplear ......................................................................... 5
1.11.1 Investigación documental – bibliográfica ............................................................... 6
1.11.2 Investigación de Campo.......................................................................................... 6
1.11.3 Resumen de la Estructura del Proyecto .................................................................. 7
1.11.4 Aporte teórico y significación práctica. .................................................................. 8
CAPITULO II .................................................................................................................... 9
2.MARCO TEORICO ....................................................................................................... 9
2.2Análisis de las distintas posiciones teóricas sobre las Aplicaciones web. .................. 10
2.2.1 Aplicación web ....................................................................................................... 10
2.2.6 Base de datos .......................................................................................................... 15
2.2.7 Servidores web ........................................................................................................ 22
2.2.8 Lenguaje de programación web PHP..................................................................... 24
2.2.9 Navegadores web .................................................................................................... 26
2.2.10 PHPRunner ........................................................................................................... 27
2.2.11JavaScript ............................................................................................................... 29
2.2.12JQuery .................................................................................................................... 31
2.2.13HTML5 .................................................................................................................. 32
2.2.14CSS3 ...................................................................................................................... 34
2.3Valoración crítica de los conceptos principales de las distintas posiciones teóricas
sobre las aplicaciones web. .............................................................................................. 38
2.4 Conclusiones parciales del capítulo. .......................................................................... 39
CAPÍTULO III ................................................................................................................. 40
3.MARCO PROPOSITIVO ............................................................................................. 40
3.1 Tema: ......................................................................................................................... 40
3.2 Descripción de la propuesta ....................................................................................... 40
3.3 Desarrollo de la propuesta ......................................................................................... 40
3.3.1 Metodología de Desarrollo ..................................................................................... 40
3.3.2 Análisis previo ........................................................................................................ 41
3.3.3 Diseño ..................................................................................................................... 46
3.3.4 Desarrollo................................................................................................................ 56
3.3.5 Pruebas .................................................................................................................... 58
3.3.6 Implementación ...................................................................................................... 68
3.3.7 Validación de la propuesta ...................................................................................... 69
CONCLUSIONES ........................................................................................................... 70
RECOMENDACIONES .................................................................................................. 72
ÍNDICE DE CUADROS
Las herramientas que han sido utilizadas para la construcción del presente trabajo son las
denominadas de uso libre, como son principalmente la base de datos MySql, el lenguaje de
programación Web PHP, Framework PHPRunner (RAD) y el servidor web Apache,
también se utilizó herramientas adicionales como MySQL Workbench, JavaScript, Ajax, y
Dreamweaver.
The following thesis work consists of the performance and programming of a web
application aimed to the automation in the management processes of the technical support
for the telecom company Nextel Cia. Ltd. From the city of Atuntaqui.
This web application will permit the access to information from any place where the user is
using a gadget with internet access to perform searches, for the company`s tech staff.
The tools used for the construction of this work are the free-to-use ones. Such as the data
basis MySql, the programming language Web PHP, Framework Php runner (RAD) and the
web server Apache. Apart from these tools, additional tools such as MySQL, Workbench,
JavaScript, Ajax, and Dreamweaver were used.
With the use of these elements, the web performance was carried out where mainly the
work designated for each employee of the Nextel Cia. Ltd. was registered.
In summary, the web application will automate the management processes of the technical
support and will be available for every user at any required moment.
CAPITULO I
1. INTRODUCCIÓN
El trabajo del Señor Darwin Fernando Farinango Chávez en 2015 con la realización del
“Portal Web para la Gestión de Ventas en el Almacén CHF-ARTE’S de San Antonio de
Ibarra” donde se pretende mejorar la gestión de ventas mediante la Implementación de un
Portal Web Orientado al Comercialización Electrónica.
En Mayo del 2015 la señorita María Luzmila Otavalo Criollo realizó “Aplicación web
para la Gestión Contable de la microempresa comunitaria de agua potable y alcantarillado
“ECAPASR” SCC, de la Parroquia de San Rafael, Cantón Otavalo”, donde pretende
mejorar los procesos contables de la microempresa comunitaria de Agua Potable y
Alcantarillado “ECAPASR” SCC, Implementando mediante el lenguaje PHP y MySql
como Base de Datos.
La Ingeniera Mónica Nátaly Hernández Manzano, en Abril del 2015 con el tema
“Aplicación Web Para la Gestión de Evaluación Académica en la Universidad Regional
Autónoma De Loa Andes”, donde el objetivo principal es lograr la agilidad en un alto
porcentaje el cálculo de resultados, en los exámenes de admisión y nivelación, los cuales se
obtendrán en tiempo real, de manera eficiente y eficaz con la utilización de tecnologías
como es el lenguaje de programación C# y la utilización de herramientas ORM (Mapeo
Objeto Relacional) como novedad en el ámbito del desarrollo de aplicaciones.
1
1.2 Planteamiento del problema
Debido a las necesidades de agilitar la gestión de soporte técnico, muchas veces los
funcionarios del cuerpo técnico por la extensa cantidad de documentación acumulada, no
entregan completamente todos sus reportes y respaldos de lo que han realizado en el
transcurso del día.
2
producciones esperadas por parte de los técnicos.
3
1.8 Objetivos Específicos
Con este argumento, al analizar todos los procesos actuales de cómo se llevan a cabo
dentro del área de soporte se puede concluir que urge un cambio en el sistema sobre todo
para mantener al cliente satisfecho viendo la puntualidad, el profesionalismo, el trabajo a
tiempo, la solución inmediata y algunos aspectos positivo que se lograría con el uso de la
aplicación web que abarcan para brindar un servicio de calidad, esto significa también los
buenos comentarios y recomendaciones de los clientes las mismas que son relevantes para
el prestigio de la empresa logrando a demás extenderse con el ingreso de nuevos usuarios.
Existen varios tipos de metodologías que ayudan con los procesos de investigación que
permitan analizar las necesidades de la empresa de cómo se desempeña laboralmente y
posteriormente a un desarrollo de un software de calidad y en un cronograma previamente
estipulado.
5
Para iniciar el desarrollo del sistema se empleará el método inductivo para tener en
conocimiento de cómo se realizan los procesos de cada una de las actividades que ejercen
el personal de cada departamento dentro de la institución, posteriormente agrupar toda la
información obtenida para luego pasar a un análisis antes de continuar con el desarrollo y
programación del sistema mediante herramientas adicionales, un lenguajes de
programación, y una base de datos.
Las técnicas a aplicarse en este proceso investigativo son la encuesta, así como también los
instrumentos de investigación que están orientados a las técnicas son los cuestionarios que
se utilizarán para las encuestas dirigido hacia los clientes y empleados de la empresa.
6
1.11.3 Resumen de la Estructura del Proyecto
Capitulo II. Marco Teórico.- La base teórica del presente informe es la parte
fundamental del trabajo investigativo ya que tiene que ver con el fundamento
relacionado a las herramientas de software libre mismas que se utilizaran para el
desarrollo de la aplicación web se fundamenta científicamente MySql como gestor de
base de datos, el lenguaje de programación web PHP, y Apache como servidor web,
esta netamente sustentado en los medios de información como internet, libros,
biblioteca virtual, etc. La cual es bastante reciente y ligada estrictamente con el
desarrollo de proyectos informáticos, aprovechando a su vez por la utilización de la
información científica y tecnológica, la misma que sirve como base para dar solución a
la propuesta planteada.
7
1.11.4 Aporte teórico y significación práctica.
Con el uso de las nuevas tecnologías y el aporte teórico, científico y práctico se pretende
llegar hacia un nuevo cambio en lo que se refiere a la gestión de los procesos de soporte
técnico de la Empresa de Telecomunicaciones Nextel Cía. Ltda. De la ciudad de Atuntaqui
Provincia de Imbabura. Lo que lleva un avance muy importante para la empresa, puesto
que estas tecnologías han sido estudiadas he implantadas en diferentes empresas e
instituciones y han logrado éxito en su misión a nivel empresarial.
Dicha aplicación estará desarrollada bajo software libre ya que es una ventaja para la
institución y jefe de proyecto debido a que no incluye costos de software y la integración
de Mysql, como base de datos, el servidor web Apache y el lenguaje de programación web
PHP es novedoso porque es un software libre y muy seguro en el almacenamiento de la
información de la Empresa.
8
CAPITULO II
2. MARCO TEORICO
Hablando de diseño, las páginas web comenzaron como simples documentos de texto sin
los adornos modernos con los que se está familiarizado. Como resultado, los navegadores
web en realidad no tendrían que ser capaces de hacer toda esa magia en absoluto. HTML
representaba contenido de acuerdo a una jerarquía semántica, permitiendo que el autor de
la página pudiese elegir la importancia relativa de las diferentes piezas de contenido, de
manera parecida a como un escritor crea capítulos, títulos y párrafos de contenido. (De La
Cruz, 2015)
9
A medida que la web comenzó a despegar, los creadores de sitios web quisieron aumentar
los límites estéticos asociadas a las webs. No se conformaban con documentos de texto
plano y quisieron introducir una serie de efectos como la posibilidad de incorporar
imágenes, organizar el contenido en secciones visuales y tener un “diseño” en torno a los
contenidos que estaban creando.
Una de las etiquetas originales disponibles para los autores de páginas fue la etiqueta
<table>. Fue creada para permitir el etiquetado de datos tabulares (HTML nació de una
comunidad científica después de todo, y los científicos adoran los datos y cifras
organizadas en tablas). Pronto se dieron cuenta de que podían aprovecharse de esas tablas
y las usaron para etiquetar páginas completas, podían organizar diferentes partes de
contenido en áreas específicas de la página. Y así nació el diseño web. (De La Cruz, 2015)
2.2 Análisis de las distintas posiciones teóricas sobre las Aplicaciones web.
Según el Autor (Cardador, 2014) manifiesta que, la ingeniería del Software, la cual es la
encargada de estudiar los principios y metodologías para el desarrollo y mantenimiento de
sistemas Software, define Aplicación Web como el conjunto de herramientas orientadas al
usuario con el fin de que este pueda acceder a un servidor web mediante el uso de un
navegador web que se conecta a internet o bien a una intranet.
También menciona que una aplicación web es una aplicación Software que se codifica bajo
un determinado lenguaje de programación, que es soportado por los navegadores web y
que sirve para que el usuario pueda interactuar con el servidor web.
Para desarrollar aplicaciones web, se van a usar los lenguajes de programación o bien los
entornos de desarrollo integrado, conocidos como IDE, en los cuales se diseñara mediante
código la aplicación web y luego se podrá ir testeando con las herramientas que ofrece que
dicho código es correcto y cumple con sus objetivos.
10
Las Aplicaciones Web son muy exitosas debido a su independencia del sistema operativo
que tenga instalado el usuario y porque pueden encontrarse de cualquier tipo: web-mails,
tiendas on-line gestión bancaria, blogs, foros, etc. Parte de este éxito se basa también en el
concepto de interactividad que mantienen las aplicaciones web con el usuario. Un ejemplo
es el uso del formulario o gestionar bases de datos.
(Véronneau, 2015) Manifiesta que, puede ser difícil percibir la diferencia entre un sitio
web y una aplicación web. Según el Diccionario Oxford en línea, nos enteramos que una
aplicación es "un programa o conjunto de programas para ayudar al usuario de un
ordenador para procesar una tarea específica". Una aplicación web es básicamente una
manera de facilitar el logro de una tarea específica en la Web, a diferencia de un sitio web
estático que es más bien una herramienta, no menos importante, para la comunicación.
(Alegsa, 2010) Una aplicación web es cualquier aplicación que es accedida vía web por
una red como internet o una intranet. En general, el término también se utiliza para
designar aquellos programas informáticos que son ejecutados en el entorno del navegador
o codificado con algún lenguaje soportado por el navegador (como JavaScript, combinado
con HTML); confiándose en el navegador web para que reproduzca la aplicación.
De acuerdo con los diferentes Autores, Aplicación web es todas aquellas aplicaciones que
las personas pueden utilizar que están alojadas en un servidor web por medio de internet o
de una intranet a través de un navegador en otras palabras es una aplicación de software
que se codifica en un lenguaje soportado por los navegadores web por la que se espera el
óptimo rendimiento del navegador por donde sale la aplicación web.
2.2.1.1 Características
11
Al tratarse de aplicaciones que funcionan sobre la web, no es necesario que el usuario
reciba actualizaciones, ya que siempre va a estar viendo la última versión.
2.2.1.2 Tipos
Las aplicaciones web pueden diferenciarse por los diferentes tipos tales como:
2.2.1.2.1 Publicitario
Este tipo de aplicaciones web, enfoca su objetivo principal en lanzar al mundo de la web la
información acerca de su empresa y cada uno de sus artículos y/o productos a usuarios a
nivel mundial mediante la red de internet.
Estas Aplicaciones se orientan particularmente al área de Marketing de la empresa, en
efecto, promocionar la producción y servicios y conseguir mejores y nuevas oportunidades
dentro del mercado.
Características
Impresionar al publico
Ser llamativo y claro para los usuarios que visiten el sitio
No se mantiene siempre en la web
Entre más amplio mejor
12
2.2.1.2.2 Informativo
Características
2.2.1.2.3 Comunidad
Son Aplicaciones web que se crean con el fin de reunir usuarios con intereses en común,
donde facilita a las comunidades organizadas la publicación en Internet de un evento
mediante la creación de un sitio Web
Características
2.2.1.2.4 Catálogo/tienda
Son Aplicaciones web que las empresas implementan en la web con el fin de vender sus
productos en internet de forma directa, así como también pueden tener la posibilidad de
que sus clientes puedan pagar desde el lugar donde se encuentran.
13
Este tipo de aplicaciones Web son una herramienta de marketing que hoy en día ha sido de
gran utilidad y progreso para las empresas.
Características
Ventajas
Desventajas
14
2.2.2 Base de datos
Una base de datos prácticamente es un almacén de datos que generalmente se los genera a
través de un sistema o por los mismos SGBD los cuales son importantes para muchos
usuarios o empresas e instituciones etc. En donde quiera que veamos las siglas BD
estamos presenciando contenidos de una base de datos en informática, además debemos
saber que el tema base de datos es un tema considerablemente extenso ya que estas
herramientas que se las ha venido utilizando son de vital importancia y el contenido en
general se subdivide en varias categorías por lo cual lo hace más extenso.
Actualmente se ha ido creando o saliendo diferentes tipos y modelos de bases de datos a
continuación se mostrara algunos de ellos.
Según (González, 2015) Los tipos de base de datos que podemos encontrar atendiendo a la
forma de organizar la información o a su estructura interna son:
Una base de datos relacional es una base de datos en donde todos los datos visibles al
usuario están organizados estrictamente como tablas y en donde todas las operaciones que
se realizan en la base de datos se hacen sobre estas tablas.
15
Todos los registros están asociados a un documento
Este tipo de base de datos está orientado exclusivamente a gestionar de forma efectiva
el almacenamiento y exceso a los documentos
Base de datos a texto completo.- son aquellas que están constituidas por los propios
documentos en formato electrónico, por un volcado completo de su texto. Pueden
incorporar además campos en los que se contiene la información fundamental para
facilitar su descripción y recuperación.
Base de datos referenciales.- sus registros no contiene el texto original si no tan solo la
información fundamental para describir y permitir la localización de documentos
impresos, sonoros, iconográficos, audiovisuales o electrónicos.
Según la cobertura temática, es decir, la disciplina científica o materia que abarca las bases
de datos documentales se pueden clasificar en:
Multidisciplinares
Especializadas
16
Otros tipos de bases de datos son:
Estas bases de datos son muy útiles para el caso de aplicaciones en las que se maneja un
gran volumen de información y los datos están muy compartidos, permitiéndonos crear
estructuras estables y con un gran rendimiento.
La redundancia de datos es uno de los principales problemas que presentan estas bases de
datos.
Los sistemas jerárquicos y en red forman la primera generación de los SGBD. Pero estos
sistemas presentan algunos inconvenientes como son:
Estas bases de datos han sido sustituidas por las bases de datos relacionales.
17
Bases de datos orientadas a objetos
Una base de datos orientada a objetos es una base de datos donde los elementos son objetos
esto puede ser bases de datos multimedia y contener videos, imágenes y sonidos, donde la
herencia nos permite una mejor presentación de la información. Esta base de datos tiene
una identidad de ser un todo y no una sola parte de una gran base.
El objetivo de una base de datos orientada a objetos son los mismos que los de las bases de
datos tradicionales, pero con la ventaja de representar los modelos de datos con un marco
mucho más eficiente, manteniendo la integridad y la relación entre ellos.
Las claves que poseen estas bases de datos son el poder que confieren al diseñador para
especificar tanto la estructura de objetos completos como las operaciones que se pueden
aplicar a esos objetos.
El único fin de estas bases de datos es el envío y recepción de datos a grandes velocidades.
Estas bases de datos son muy poco comunes y están dirigidos al entorno de análisis de
calidad, datos de producción e industrial, es de gran importancia comprender que su único
fin es recolectar y recuperar los datos a la mayor velocidad posible, por lo tanto, la
redundancia y la duplicación de información no es un problema como las demás bases de
datos.
18
Bases de datos deductivas.
Estas son un sistema de bases de datos pero con la diferencia de que permiten hacer
deducciones atreves de inferencias. Se basa principalmente en reglar y hechos que son
almacenados en la base de datos.
2.2.2.2 MYSQL
Según (Arias, 2015) MYSQL es un sistema de gestión de base de datos (SGBD), que
utiliza el lenguaje SQL (Lenguaje de consulta estructurada, en inglés Structured Query
Language) como interfaz. Actualmente es una de las bases de datos más populares, con
más de 15 millones de instalaciones en el mundo.
(Arias, 2015) Manifiesta que, MYSQL fue creado en Suecia por dos suecos y un finlandés:
David Axmark, Allan Larsson y Michael “Monty” Widenius, que han trabajado juntos
19
desde la década de los 1980. Hoy su desarrollo y mantenimiento emplean
aproximadamente 400 profesionales en el mundo entero, y más de mil contribuyen
probando el software, integrándolo en otros productos, y escribiendo acerca de este.
El 16 de enero del 2008, MYSQL AB, desarrolladora de MYSQL fue adquirida por Sun
Microsystems, por un billón de dólares americanos, un precio jamás vista en el sector de
las licencias libres. El 20 de abril de 2009, se anunció que Oracle compraba a Sun
Microsystem y todos sus productos, incluyendo MYSQL.
2.2.2.2.2 Características
Las siguientes características además son consideradas como ventajas ante otros sistemas
gestores de base de datos (SGBD) por su gran velocidad, por ser libre en cuanto a costos
aunque en la actualidad la concesión de licencias ha cambiado de acuerdo con el artículo
mencionado anteriormente en la breve historia de MYSQL, por otro lado podemos
mencionar su estabilidad y potente con todas las características que se requirieren las
aplicaciones web.
A Continuación una lista de las principales características del sistema de base de datos
MYSQL como son:
Interioridades y portabilidad
Escrito en C y en C++
20
Las funciones SQL están implementadas usando una librería altamente optimizada y
deben ser tan rápidas como sea posible. Normalmente no hay reserva de memoria tras
toda la inicialización para consultas.
El servidor está disponible como un programa separado para usar en un entorno de red
cliente/servidor.
2.2.2.2.3 Ventajas
Según (Cobo, 2005) MYSQL ofrece varias ventajas respecto a otros sistemas gestores de
bases de datos:
Tiene licencia pública, permitiendo no solo la utilización del programa sino también la
consulta y modificación de su código fuente. Resulta por tanto fácil de personalizar y
adaptar a las necesidades concretas.
para aquellos que deseen que sus desarrollos basados en MYSQL no sean “código
abierto “existe también una licencia comercial.
21
controlando el acceso simultaneo de un gran número de usuarios a los datos y
autorizando el acceso solo a usuarios autorizados.
22
Para la buena utilización del servidor web y que este funcione correctamente se debe
utilizar un método para intercambiar la información o transferir los sitios web al ordenador,
esto se realiza mediante el protocolo http (protocolo de transferencia de hipertexto), es el
que aparece al inicio en la barra de búsqueda cuando se ingresa cualquier dirección de
internet.
Para (Ramos, 2011) Un servidor web es un programa diseñado para aceptar peticiones
HTTP del navegador y servir las páginas web que tiene alojadas. Para navegar a un sitio
web se necesita saber la dirección web exacta del sitio. Cada sitio web tiene una dirección
única conocida como URL (Uniform Resorurse Locator – Localizador Uniforme de
Recursos). En una URL se pueden distinguir tres partes: el Protocolo, el nombre de
dominio del ordenador servidor y la ruta en el servidor. El protocolo que se utiliza para
servir páginas web es HTTP, el nombre de dominio indica el ordenador de internet que nos
va a dar la información solicitada y la ruta indica la ubicación del archivo solicitado dentro
del servidor (véase figura N°1).
Figura N°1, partes de una URL (Localizador Uniforme de Recursos) - Fuente: (Ramos, 2011).
Apache: este es el más utilizado en todo el mundo, es gratuito y corre sobre toda
plataforma
Microsoft ISS: solo funciona sobre Windows, si se quiere implementar en otro sistema
se deberá utilizar una máquina virtual.
23
Ngnix: este sistema web es muy rápido y corre solamente en sistemas Unix y
Windows.
Lighttp: este también es uno de los más rápidos pero su principal característica está en
que soporta cargas pesadas sin perder balance, utilizando poca memoria RAM y poco
del CPU.
Es un servidor web gratuito, el más popular el cual abarca el 70% de los sitios web en el
mundo, este es apto para trabajar con distintos sistemas operativos, ya que es flexible,
eficiente y rápido. El servidor web Apache es utilizado principalmente para realizar
servicios a páginas web ya sean estáticas o dinámicas.
(Cobo, 2005) Manifiesta que, PHP es un lenguaje interpretado del lado del servidor que
surge dentro de la corriente denominada código abierto (open source). Se caracteriza por su
potencia, versatilidad, robustez y modularidad. Al igual que ocurre con tecnologías
similares, los programas son integrados directamente dentro del código HTML.
24
desarrollados en ASP al lenguaje PHP, una de las más conocidas es asp2php. Comparando
el lenguaje PHP con el lenguaje Perl, utilizado habitualmente en la programación CGI,
puede decirse que PHP fue diseñado para desarrollo de scripts orientados a web, mientras
que Perl fue diseñado para hacer muchas más cosas y debido a esto, se hace muy
complicado. La sintaxis de PHP es menos confusa y más estricta, pero sin perder la
flexibilidad. En comparación con ColdFusion, PHP es más rápido y eficiente para tareas
complejas de programación, además PHP resulta más estable y usa una menor cantidad de
recursos. En definitiva, PHP es uno de los lenguajes más utilizados actualmente en el
desarrollo de aplicaciones web y viene experimentado un constante crecimiento en su nivel
de utilización en Internet.
2.2.5.2 Características
25
o Manipulación de datos (cálculos, modificaciones de cadenas de texto, etc.)
o Adopción de decisiones en función de algún dato.
o Presentación de valores de los datos resultantes, implicados dentro del código
HTML
o Acciones sobre el sistema de fichero del servidor, incluyendo la creación,
modificación, lectura, y eliminación de datos.
Según (Ramos, 2011) Un navegador web (del inglés web browser) es un programa que
permite visualizar la información que contiene una página web, pues interpreta el código
de la página (normalmente HTML) y lo visualiza en la pantalla. Es la herramienta que
utiliza el usuario para moverse e interactuar con la información contenida en la distintas
páginas web en la red.
2.2.6.1 Historia
26
A finales del 2004 apareció en el mercado Firefox, una rama de desarrollo de Mozilla.
Actualmente está consiguiendo una gran popularidad gracias a sus pestañas. Su ligereza y
su versatilidad, basada en un sistema modular de extensiones. (Ramos, 2011)
En la actualidad Existen muchos más navegadores como Ópera, Zafarí, Konqueror,
SeaMonkey, Camino, Maxthon, o Google Chrome. Cada uno de ellos tiene unas
características específicas. (Ramos, 2011)
(Xlinesoft, 2015) PHPRunner crea un conjunto de páginas PHP para acceder y modificar
cualquier MySQL, Oracle, MS SQL Server, PostgreSQL o base de datos de MS
Access. Usando generados usuarios de páginas PHP puede buscar, editar, borrar y añadir
datos en la base de datos.
Ofrece un gran número de plantillas de aplicación - sitios web temáticos ya hechos con
interfaz gráfica completa y la estructura de base de datos. Todas las plantillas son fáciles de
trabajar y completamente personalizable. La plantilla se podría utilizar como un sitio web
de soporte solo, o se podría integrar con otras aplicaciones web PHPRunner. (Xlinesoft,
2015)
En PHPRunner todas las fuentes de datos y las relaciones entre ellos, incluyendo detalles
magistrales, se muestran visualmente lo que son muy intuitiva para manejar. Es posible
unir dos o más conjuntos de datos con facilidad de arrastrar y soltar. Una vez que se haya
establecido las relaciones, en la solicitud se puede navegar a través de los registros
maestros y rápidamente saltar por encima de los detalles de esos registros. Algunos
escenarios básicos de maestro-detalle relaciones serían datos de clientes y pedidos, o los
pacientes y los registros médicos. (Xlinesoft, 2015)
27
2.2.7.1 Compatibilidad
PHPRunner compatible con las siguientes bases de datos: MySQL, Oracle, Microsoft SQL
Server, MS Access, PostgreSQL, archivos de hojas de cálculo, Informix, DB2, SQLite,
cualquier otra base de datos compatible con ODBC. (Xlinesoft, 2015)
2.2.7.2 Seguridad
PHPRunner que permite proteger con contraseña el acceso a la aplicación web. Puede
codificar ya sea el nombre de usuario y contraseña, almacenar las combinaciones de inicio
de sesión en la base de datos o utilizar la autenticación de Active Directory. Puede agregar
la opción inicio de sesión con Facebook a su sitio. PHPRunner también le permite
establecer el permiso grupos de usuarios donde se pueden restringir las tablas y vistas,
páginas y la funcionalidad del sitio, ya sea a la derecha en el software o en línea.
(Xlinesoft, 2015)
2.2.7.3 Características
Viene con funcionalidad incorporada AJAX basada en la toma de sus sitios web mucho
más fácil de usar
Conexiones de bases de datos múltiples.
Compatibilidad con Active Directory
Permitirá crear y modificar tablas justo en el software.
Permite subir todo el conjunto de páginas a un servidor web a través de FTP
Permite integrar sin problemas las aplicaciones web que construya en su sitio web
existente. Podrá asemejarse a la apariencia de todas sus páginas.
Ofrece una gran variedad de controles de edición, que le permiten personalizar el
aspecto de los campos de editar y añadir páginas
Cuadros desplegables dependientes
Cargar los documentos e imágenes de cualquier tipo a la base de datos o en un
directorio en el servidor web
Controles editor de texto enriquecido
Puede personalizar el aspecto visual de la aplicación web mediante la selección de una
amplia gama de diseños de página y esquemas de color y su modificación
Permite establecer permisos dinámicos
28
2.2.7.4 Requisitos del sistema
2.2.8 JavaScript
29
escritorio. Esta mejorada capacidad permitió superar viejas limitaciones de rendimiento y
confirmar el lenguaje Javascript como la mejor opción para la web.
Para aprovechar esta prometedora plataforma de trabajo ofrecida por los nuevos
navegadores, Javascript fue expandido en relación con portabilidad e integración. A la vez,
interfaces de programación de aplicaciones (APIs) fueron incorporadas por defecto en cada
navegador para asistir al lenguaje en funciones elementales. Estas nuevas APIs (como Web
Storage, Canvas, y otras) son interfaces para librerías incluidas en navegadores. La idea es
hacer disponible poderosas funciones a través de técnicas de programación sencillas y
estándares, expandiendo el alcance del lenguaje y facilitando la creación de programas
útiles para la web.
Siguiendo los mismos lineamientos que en CSS, existen tres técnicas para incorporar
código Javascript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusión de
archivos externos es la recomendada a usar en HTML5. (Gauchat, 2012)
(Gauchat, 2012) Esta es una técnica simple para insertar Javascript en nuestro documento
que se aprovecha de atributos disponibles en elementos HTML. Estos atributos son
manejadores de eventos que ejecutan código de acuerdo a la acción del usuario.
Los manejadores de eventos más usados son, en general, los relacionados con el ratón,
como por ejemplo onclick, onMouseOver, u onMouseOut. Sin embargo, encontraremos
sitios web que implementan eventos de teclado y de la ventana, ejecutando acciones luego
de que una tecla es presionada o alguna condición en la ventana del navegador cambia (por
ejemplo, onload u onfocus).
Según (Gauchat, 2012) Para trabajar con códigos extensos y funciones personalizadas
debemos agrupar los códigos en un mismo lugar entre etiquetas <script>. El elemento
30
<script> actúa exactamente igual al elemento <style> usado para incorporar estilos CSS.
Nos ayuda a organizar el código en un solo lugar, afectando a los elementos HTML por
medio de referencias.
Del mismo modo que con el elemento <style>, en HTML5 no debemos usar ningún
atributo para especificar lenguaje. Ya no es necesario incluir el atributo type en la etiqueta
<script>. HTML5 asigna Javascript por defecto.
Para (Gauchat, 2012) Los códigos Javascript crecen exponencialmente cuando agregamos
nuevas funciones y aplicamos algunas de las APIs mencionadas previamente. Códigos
embebidos incrementan el tamaño de nuestros documentos y los hacen repetitivos (cada
documento debe volver a incluir los mismos códigos). Para reducir los tiempos de
descarga, incrementar nuestra productividad y poder distribuir y reusar nuestros códigos en
cada documento sin comprometer eficiencia, recomendamos grabar todos los códigos
Javascript en uno o más archivos externos y llamarlos usando el atributo src.
En Javascript las acciones de los usuarios son llamadas eventos. Cuando el usuario realiza
una acción, como un clic del ratón o la presión de una tecla, un evento específico para cada
acción y cada elemento es disparado. Además de los eventos producidos por los usuarios
existen también otros eventos disparados por el sistema (por ejemplo, el evento load que se
dispara cuando el documento es completamente cargado). Estos eventos son manejados por
códigos o funciones. El código que responde al evento es llamado manejador. Cuando
registramos un manejador lo que hacemos es definir cómo nuestra aplicación responderá a
un evento en particular. Luego de la estandarización del método addEventListener(), este
procedimiento es usualmente llamado “escuchar al evento”, y lo que hacemos para
preparar el código que responderá a ese evento es “agregar una escucha” a un elemento en
particular. (Gauchat, 2012)
31
2.2.9 JQuery
(Gauchat, 2012) Esta es la librería web más popular disponible en estos días. La librería
jQuery es gratuita y fue diseñada para simplificar la creación de sitios web modernos.
Facilita la selección de elementos HTML, la creación de animaciones y efectos, y también
controla eventos y ayuda a implementar Ajax en nuestras aplicaciones.
La librería jQuery se encuentra en un archivo pequeño que se puede descargar desde
www.jquery.com y luego incluir en nuestros documentos usando la etiqueta <script>.
Provee una API sencilla que cualquiera puede aprender y rápidamente aplicar a sus
proyectos.
Una vez que el archivo provisto por jQuery es incluido en nuestro documento, ya estamos
listos para aprovechar los métodos simples incorporados por la librería y convertir nuestra
web estática en una moderna y práctica aplicación.
JQuery tiene la ventaja de proveer soporte para viejos navegadores y vuelve simple tareas
cotidianas. Puede ser utilizado junto con HTML5 o como una forma simple de reemplazar
funciones de HTML5 en navegadores que no están preparados para esta tecnología.
2.2.10 HTML5
HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo.
HTML5 propone estándares para cada aspecto de la web y también un propósito claro para
cada una de las tecnologías involucradas. A partir de ahora, HTML provee los elementos
estructurales, CSS se encuentra concentrado en cómo volver esa estructura utilizable y
32
atractiva a la vista, y Javascript tiene todo el poder necesario para proveer dinamismo y
construir aplicaciones web completamente funcionales.
2.2.10.1 Historia
Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear
la estructura básica de páginas web, organizar su contenido y compartir información. El
lenguaje y la web misma nacieron principalmente con la intención de comunicar
información por medio de texto. (Gauchat, 2012)
(Gauchat, 2012) La especificación también incluye algunos elementos con la única tarea de
proveer estilos.
Esta es una lista de los que consideramos más relevantes:
33
<aside> Este elemento representa contenido que está relacionado con el contenido
principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras
laterales, publicidad, etc…
<footer> Este elemento representa información adicional sobre su elemento padre. Por
ejemplo, un elemento
<footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del
documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo
sino también para diferentes secciones dentro del cuerpo, otorgando información adicional
sobre estas secciones específicas.
<article> Este elemento representa una porción independiente de información relevante
(por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento
<article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems
relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.
<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene
múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
<figure> Este elemento representa una porción independiente de contenido (por ejemplo,
imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es
información que puede ser removida sin afectar el fluido del resto del contenido.
<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto
relacionado con el contenido de un elemento <figure>, como la descripción de una
imagen.
<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular
o que ha sido mostrado en respuesta de la actividad del usuario.
<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo,
descargos, restricciones legales, declaración de derechos, etc…).
<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema,
etc…).
<address> Este elemento encierra información de contacto para un elemento <article> o
el documento completo. Es recomendable que sea insertado dentro de un elemento
<footer>.
<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por
los usuarios y el navegador.
El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para
programas y navegadores es incluido como el valor del atributo datetime. Un segundo
34
atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la
fecha de publicación.
2.2.11 CSS3
(Gauchat, 2012) CSS es un lenguaje que trabaja junto con HTML para proveer estilos
visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc. La
versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La
especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a
esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web
y esta es la razón por la que cada vez que mencionamos HTML5 también estamos
haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías
completamente separadas.
2.2.11.1 Historia
(Gauchat, 2012) CSS3 provee nuevas propiedades para crear efectos visuales y dinámicos
que son parte esencial de la web en estos días.
border-radius Esta propiedad genera esquinas redondeadas para la caja formada por el
elemento. Posee dos parámetros diferentes que dan forma a la esquina. El primer
parámetro determina la curvatura horizontal y el segundo la vertical, otorgando la
35
posibilidad de crear una elipsis. Para declarar ambos parámetros de la curva, los valores
deben ser separados por una barra (por ejemplo, border-radius: 15px / 20px). Usando
solo un valor determinaremos la misma forma para todas las esquinas (por ejemplo,
border-radius: 20px). Un valor para cada esquina puede ser declarado en un orden que
sigue las agujas del reloj, comenzando por la esquina superior izquierda.
Box-shadow Esta propiedad crea sombras para la caja formada por el elemento. Puede
tomar cinco parámetros: el color, el desplazamiento horizontal, el desplazamiento vertical,
el valor de difuminación, y la palabra clave inset para generar una sombra interna. Los
desplazamientos pueden ser negativos, y el valor de difuminación y el valor inset son
opcionales (por ejemplo, box-shadow: #000000 5px 5px 10px inset).
@font-face Esta regla nos permite cargar y usar cualquier fuente que necesitemos.
Primero, debemos declarar la fuente, proveer un nombre con la propiedad font-family y
especificar el archivo con src (por ejemplo, @fontface{ font-family: Mifuente; src:
url('font.ttf') }). Luego de esto, podremos asignar la fuente (en el ejemplo Mifuente) a
cualquier elemento del documento.
Linear-gradient (posición inicio, color inicial, color final) Esta función puede ser
aplicada a las propiedades background o background-image para generar un gradiente
lineal. Los atributos indican el punto inicial y los colores usados para crear el gradiente. El
primer valor puede ser especificado en pixeles, en porcentaje o usando las palabras clave
top, bottom, left y right. El punto de inicio puede ser reemplazado por un ángulo para
proveer una dirección específica para el gradiente (por ejemplo, linear-gradient(top,
#FFFFFF 50%, #006699 90%);).
Radial-gradient (posición inicio, forma, color inicial, color final) Esta función puede ser
aplicada a las propiedades background o background-image para generar un gradiente
radial. La posición de inicio es el origen y puede ser declarado en pixeles, porcentaje o
como una combinación de las palabras clave center, top, bottom, left y right. Existen dos
36
valores para la forma: circle y ellipse, y puntos de terminación pueden ser declarados para
cada color indicando la posición donde la transición comienza (por ejemplo, radial-
gradient(center, circle, #FFFFFF 0%, #006699 200%);).
rgba() Esta función es una mejora de rgb(). Toma cuatro valores: el color rojo (0-255), el
color verde (0-255), el color azul (0-255), y la opacidad (un valor entre 0 y 1).
hsla() Esta función es una mejora de hsl(). Puede tomar cuatro valores: el tono (un valor
entre 0 y 360), la saturación (un porcentaje), la luminosidad (un porcentaje), y la opacidad
(un valor entre 0 y 1).
outline Esta propiedad fue mejorada con la incorporación de otra propiedad llamada
outline-offset. Ambas propiedades combinadas generan un segundo borde alejado del
borde original del elemento (por ejemplo, outline: 1px solid #000000; outline-offset:
10px;).
border-image Esta propiedad crea un borde con una imagen personalizada. Necesita que
el borde sea declarado previamente con las propiedades border o border-with, y toma al
menos tres parámetros: la URL de la imagen, el tamaño de las piezas que serán tomadas de
la imagen para construir el borde, y una palabra clave que especifica cómo esas piezas
serán ubicadas alrededor del elemento (por ejemplo, border-image: url("file.png") 15
stretch;).
37
transition Esta propiedad puede ser aplicada para crear una transición entre dos estados de
un elemento. Recibe hasta cuatro parámetros: la propiedad afectada, el tiempo que le
tomará a la transición desde el comienzo hasta el final, una palabra clave para especificar
cómo la transición será realizada (ease, linear, ease-in, ease-out, ease-in-out) y un valor
de retardo que determina el tiempo que la transición tardará en comenzar (por ejemplo,
transition: color 2s linear 1s;). (Gauchat, 2012)
Las aplicaciones web actualmente son utilizadas en las grandes y medianas empresas ya
que por medio de estas pueden lograr optimizar el servicio, el trabajo, mejor desempeño y
ayuda en la competitividad del negocio ya que la importancia en el manejo de estas
tecnologías logran el avance y adelanto de cualquier empresa o institución.
De acuerdo con el análisis que se ha realizado en cuanto a la utilización de las aplicaciones
por la web para la ayuda del trabajo en las empresas en el área de telecomunicaciones, se
ha notado un ligero avance por parte de las empresas que han implantado dentro de su
sistema laboral.
38
2.4 Conclusiones parciales del capítulo.
La base teórica del presente informe esta netamente sustentado en los medios de
información como internet, libros, biblioteca virtual, etc. La cual es bastante reciente y
Gracias a las nuevas tecnologías que hoy en día ofrecen para la ayuda de construcción
de aplicaciones web, es donde se puede lograr satisfacer las necesidades del usuario de
39
CAPÍTULO III
3. MARCO PROPOSITIVO
3.1 Tema:
El propósito de este documento es recoger, analizar y definir las necesidades de alto nivel
y las características de un sitio web que proporciona el servicio de gestión en los procesos
de gestión de Soporte Técnico de Nextel Cía. Ltda.
El documento se centra en la necesidad requerida por los participantes en el proyecto y los
usuarios finales que intervendrán.
Esta funcionalidad se basa en proporcionar y dar a conocer a la Compañía “Nextel Cía.
Ltda, los servicios que ofrece el personal de Soporte y Clientes los beneficios y
obligaciones.
En esta fase se describen los principales procesos que se realizan en la gestión de Soporte
Técnico por parte de los empleados del área, así como también el personal de atención al
cliente y bodega.
La Empresa Nextel. Cía. Ltda. Consta con las siguientes áreas o departamentos.
1. Administrativa
2. Soporte Técnico
3. Atención al Cliente
4. Bodega
La Empresa de Telecomunicaciones Nextel. Cía. Ltda. Tiene un sistema de gestión de
Soporte Técnico donde los procesos se realizan de forma inadecuada y no cuenta con una
aplicación web donde promociona la información necesaria para realizar dichos procesos.
A continuación se presentan los siguientes diagramas de casos de uso establecidos para los
diferentes procesos que realiza la aplicación web.
41
3.3.2.1.1.1 Creación de actividades
3.3.2.1.1.1.1 Descripción
42
3.3.2.1.2.1 Creación De actividades
3.3.2.1.2.1.1 Descripción
1. Ingresa al sistema
2. Revisa soportes asignados
3. Realiza soporte
4. Ingresa cambios
5. Revisa Instalaciones
6. Realiza Instalaciones
7. Ingresa datos del enlace
43
3.3.2.1.3.1 Creación de actividades
3.3.2.1.3.1.1 Descripción
El Jefe Técnico una vez ingresado a la aplicación web con los datos de autentificación
proporcionados por el administrador del sistema, podrá seleccionar el menú que desee ya
que puede revisar las actividades de los Técnicos, así como también podrá ingresar
soportes he instalaciones, actividades de infraestructura o a fines. Todos estos datos serán
agregados o modificados en la base de datos al momento de guardar.
1 Ingresa al sistema.
2 Actualiza información de soportes he instalaciones.
3 Busca cliente para asignar soportes a Técnicos
4 Ingresa instalación
5 Asigna soporte a Técnicos
6 Crea actividades laborales para el Técnico durante la jornada laboral.
7 Ingresa observaciones de soportes
8 Guarda la información.
44
3.3.2.1.4.1 Creación de actividades
3.3.2.1.4.1.1 Descripción
El personal encargado de bodega una vez ingresado a la aplicación web podrá seleccionar
el menú que desea ya que es quien gestiona el módulo de inventario, además en quien
asigna equipos y materiales según las actividades de los Técnicos.
1. Ingreso al sistema
2. Ingresa al módulo inventario
3. Ingresa categorías
4. Ingresa equipos
5. Realiza la búsqueda de equipos y materiales para asignar a Técnicos
6. Registra la salida de equipos y materiales
7. Guarda información
45
3.3.2.1.5.1 Creación de actividades
3.3.2.1.5.1.1 Descripción
El Administrador es quien tiene la facultad de ver y revisar todos los procesos que se
realicen en el sistema ya que es el indicado de dar mantenimiento del sistema y la base de
datos
3.3.2.1.5.1.2 Flujo de eventos
1. Ingreso al sistema
2. Ingreso de parámetros
3. Mantenimiento a la base de datos
4. Realiza consultas
5. Realiza el mantenimiento del Sistema
6. Es quien da los privilegios de usuarios
7. Crea usuarios
8. Coordina las actividades que deberán seguir los empleados de la empresa de las
Diferentes áreas, para las respectivas revisiones e ingresar datos en la BBDD.
9. Reportes
3.3.3 Diseño
Soportes. En este módulo el personal de soporte visualiza todas las actividades asignadas a
cada Técnico
46
Seguridad. En este módulo el sistema controla el rol de usuarios y permite el registro e
identificación de cada uno de los trabajadores.
47
Modelo lógico de la Base de datos
48
Script de la base de datos
INSERT INTO `cliente` (`CEDULA`, `APELLIDOS`, `NOMBRES`, `EDAD`, `DIRECCION`, `MAIL`, `TELEFONO`, `CELULAR`,
`SEXO`, `REFERENCIA`, `ESTADO`) VALUES
CREATE TABLE IF NOT EXISTS `detallesalidaequipos` (
`IDDETALLSALEQ` int(11) NOT NULL AUTO_INCREMENT,
PRIMARY KEY (`IDDETALLSALEQ`),
KEY `FK_REFERENCE_15` (`IDSALIDAEQUIPOS`),
KEY `FK_REFERENCE_16` (`IDEQUIPO`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `equipo` (`IDEQUIPO`, `IDCATEGORIA`, `CODIGO`, `MARCA`, `DESCRIPCION`, `CANTIDAD`, `ESTADO`)
VALUES
49
PRIMARY KEY (`CEDULAP`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `personal` (`CEDULAP`, `APELLIDOS`, `NOMBRES`, `DIRECCION`, `EDAD`, `TELEFONO`, `CELULAR`,
`SEXO`, `CARGO`, `MAIL`, `ESTADO`) VALUES
50
Diccionario de datos
Categoría
Campo Tipo Nulo Predeterminado Comentarios Mime
id_categoria int(11) No
Ciudad
Campo Tipo Nulo Predeter Enlaces a Comentarios Mime
minado
Id ciudad int(11) No
Id provincia int(11) Sí NULL Provincia -> idprovincia
Cliente
Campo Tipo Nulo Predeterminado Comentarios Mime
Cedula varchar(13) No
Apellidos varchar(50) Sí NULL
Nombres varchar(50) Sí NULL
51
Sexo varchar(10) Sí NULL
Detallesalidaequipos
Campo Tipo Nulo Predeter Enlaces a Comentarios Mime
minado
Iddetallesaleq int(11) No
Idsalidaequipos int(11) Sí NULL Salidaequipos -> IDSALIDAEQUIPOS
Idequipo int(11) Sí NULL Equipo -> IDEQUIPO
Hora datetime Si NULL
Lugar text Si NULL
Detallesolicitud
Campo Tipo Nulo Predeter Enlaces a Comentarios Mime
minado
Iddetallesol int(11) No
Idsolicitud int(11) Sí NULL solicitud ->IDSOLICITUD
Descrpcion text Sí NULL
Estado varchar(10) Sí NULL
Detallesoporte
Campo Tipo Nulo Predeter Enlaces a Comentarios Mime
minado
Iddetallesoporte int(11) No
Idsoporte int(11) Sí NULL
Idsolicitud int(11) Sí NULL
fechadetallesoprt Datetime Si NULL
descripciondetsop text Si NULL
52
Equipo
Campo Tipo Nulo Predeterm Enlaces a Comentarios Mime
inado
Idequipo int(11) No
Id categoría int(11) Sí NULL categoría->IDCATEGORIA
Código varchar(50) Sí NULL
Marca varchar(50) Sí NULL
Descripción varchar(50) Sí NULL
Cantidad Int (11) Si NULL
Estado varchar(50) Sí NULL
Observacionessoporte
Campo Tipo Nulo Predeterminado Comentarios Mime
Id observaciones int(11) No
Idsoporte int(11) Sí NULL
Idsolicitud int(11) Sí NULL
fechaobservacion Datetime Si NULL
Descripcion text Si NULL
Personal
Campo Tipo Nulo Predeterminado Comentarios Mime
Cedulap varchar(13) No
Apellidos varchar(100) Sí NULL
Nombres varchar(100) Sí NULL
Dirección varchar(100) Sí NULL
Edad varchar(10) Sí NULL
Teléfono varchar(50) Sí NULL
Celular varchar(50) Sí NULL
Sexo varchar(100) Sí NULL
Cargo varchar(100) Sí NULL
Mail varchar(50) Sí NULL
Estado varchar(10) Sí NULL
53
Provincia
Campo Tipo Nulo Predeterminado Comentarios Mime
Idprovincia int(11) No
Provincia varchar(50) Sí NULL
Estado varchar(10) Sí NULL
Salidaequipos
Campo Tipo Nulo Predeterminado Comentarios Mime
Idsalidaequipos int(11) No
Idsoporte int(11) Sí NULL
Idsolicitud int(11) Sí NULL
Solicitud
Campo Tipo Nulo Predeter Enlaces a Mime
minado
Idsolicitud int(11) No
Cedula varchar(13) Sí NULL cliente -> CEDULA
Id ciudad int(11) Sí NULL ciudad -> IDCIUDAD
Cedulap varchar(13) Sí NULL personal -> CEDULAP
Fecha solicitud datetime Sí NULL
Descripción text Sí NULL
Estado varchar(13) Si NULL
Tipo varchar(50) Si NULL
Soporte
Campo Tipo Nulo Predeter Enlaces a Mime
minado
Idsoporte int(11) No
Idsolicitud int(11) No solicitud IDSOLICITUD
54
Estado soporte varchar(10) Sí NULL
Soporte tecnico_uggroups
Campo Tipo Nulo Predeterminado Comentarios MIME
GroupID int(11) No
Label varchar(300) Sí NULL
Soporte tecnico_ugmembers
Campo Tipo Nulo Predeterminado Comentarios MIME
UserName varchar(300) No
GroupID int(11) No
Soporte tecnico_ugrights
Campo Tipo Nulo Predeterminado Comentarios MIME
TableName varchar(300) No
GroupID int(11) No
AccessMask varchar(10) Sí NULL
Cuadro N°16, Tabla Soporte tecnico_ugrights - Fuente: Autor
Soporte tecnico_users
Campo Tipo Nulo Predeterminado Comentarios MIME
ID int(11) No
username varchar(300) Sí NULL
password varchar(300) Sí NULL
email varchar(300) Sí NULL
fullname varchar(300) Sí NULL
groupid varchar(300) Sí NULL
active int(11) Sí NULL
55
3.3.4 Desarrollo
Conexión
56
FOREACH( $HOSTS AS $H )
{
$THIS->CONN = @MYSQL_CONNECT($H.":".$THIS->PORT, $THIS->USER, $THIS->PWD);
IF( $THIS->CONN )
{
$_SESSION["MYQSLADDRESS"] = $H;
BREAK;
}}
IF (!$THIS->CONN || !MYSQL_SELECT_DB($THIS->SYS_DBNAME, $THIS->CONN))
{
UNSET( $_SESSION["MYQSLADDRESS"] );
TRIGGER_ERROR( MYSQL_ERROR(), E_USER_ERROR );
}
IF( $CMYSQLNAMES != "" )
@MYSQL_QUERY("SET NAMES ".$CMYSQLNAMES);
$THIS->MYSQLVERSION = "4";
$RES = @MYSQL_QUERY("SHOW VARIABLES LIKE 'VERSION'", $THIS->CONN);
IF( $ROW = @MYSQL_FETCH_ARRAY($RES, MYSQL_ASSOC) )
$THIS->MYSQLVERSION = $ROW["VALUE"];
IF( SUBSTR($THIS->MYSQLVERSION, 0, 1) <= "4")
$THIS->SUBQUERIESSUPPORTED = FALSE;
RETURN $THIS->CONN;
}
Formulario principal
{BEGIN CONTAINER_LOGIN}
<DIV CLASS="RNR-C RNR-CV RNR-C-LOGIN">
{BEGIN LOGINHEADER}
<DIV CLASS ="RNR-BRICKCONTENTS STYLE2 RNR-B-LOGINHEADER {$BRICKCLASS_LOGINHEADER}"><SPAN><H1>
{$PAGETITLELABEL LOGIN} </H1>
</SPAN></DIV> {END LOGINHEADER}
{BEGIN MESSAGE_BLOCK}
<DIV CLASS="RNR-BRICKCONTENTS STYLE1 RNR-B-MESSAGE {$BRICKCLASS_MESSAGE}"><DIV CLASS="RNR-
MESSAGE"> {$MESSAGE} </DIV></DIV> {END MESSAGE_BLOCK}
{BEGIN CONTAINER_FIELDS}
<DIV CLASS="RNR-C RNR-CV RNR-C-FIELDS">
57
CLASS="FIELDGRID">
<TR>
<TD>
{BEGIN USERNAME_LABEL}NOMBRE DE USUARIO:{END USERNAME_LABEL}
</TD>
<TD CLASS="RNR-CONTROL">
<INPUT TYPE="TEXT" NAME="USERNAME" {$USERNAME_ATTRS}>
</TD>
</TR>
<TR>
<TD>
{BEGIN PASSWORD_LABEL}CONTRASEÑA :{ END PASSWORD_LABEL}
</TD>
<TD CLASS="RNR-CONTROL">
<INPUT TYPE="PASSWORD" NAME="PASSWORD" {$PASSWORD_ATTRS}>
</TD>
</TR>
<TR>
<TD>
{BEGIN REMEMBER_PASSWORD_LABEL}RECORDAR CONTRASEÑA :{ END REMEMBER_PASSWORD_LABEL}
</TD>
<TD>
<INPUT TYPE="CHECKBOX" {$REMEMBERBOX_ATTRS}>
</TD>
</TR>
</TABLE>
</DIV>
{BEGIN LOGINBUTTONS}
<DIV CLASS="RNR-BRICKCONTENTS STYLE2 RNR-B-LOGINBUTTONS {$BRICKCLASS_LOGINBUTTONS}"><A
HREF="#" CLASS="RNR-BUTTON MAIN" {$LOGINLINK_ATTRS}>PRESENTAR</A>
{BEGIN CONTINUE_BUTTON}
<A HREF="#" CLASS="RNR-BUTTON" {$CONTINUEBUTTON_ATTRS}>CONTINUAR</A>
{END CONTINUE_BUTTON}
</DIV> {END LOGINBUTTONS}
</DIV>
{END CONTAINER_FIELDS}
</DIV>
</DIV>
{END CONTAINER_LOGIN}
</DIV>
<DIV CLASS="RNR-MIDDLE">
<DIV CLASS="RNR-LEFT {$BLOCKCLASS_LEFT}"> </DIV>
<DIV CLASS="RNR-CENTER {$BLOCKCLASS_CENTER}"> </DIV>
<DIV CLASS="RNR-RIGHT {$BLOCKCLASS_RIGHT}"> </DIV></DIV>
<DIV CLASS="RNR-BOTTOM {$BLOCKCLASS_BOTTOM}"><!--%%BOTTOM %%--> </DIV></DIV>
{$FOOTER}
<P ALIGN="CENTER"><IMG SRC="IMAGES/LOGO_FINAL05.PNG" BORDER="0">
</P> {END BODY} </BODY></HTML>
3.3.5 Pruebas
Hoy en día las aplicaciones web han evolucionado a tal punto que son indispensables para
las grandes y medianas empresas ya que se encargan de controlar en todos los
departamentos y llevar el control de la economía.
Las pruebas del sistema tienen como objetivo verificar y analizar la funcionalidad del
sistema a través de sus interfaces externas, comprobando que dicha funcionalidad sea la
esperada en función de los requisitos del sistema y los requerimientos del usuario.
58
Sin embargo, muchas técnicas de prueba del sistema están descritas solo de manera
informal. Además, la fase de prueba del sistema suele realizarse al final del proceso de
desarrollo, por lo que estas pruebas suelen realizarse de manera superficial e incompleta.
Al utilizarse una forma informal para la realización de las pruebas, no se puede asegurar
que el software esté libre de errores. De hecho, uno de los problemas más difíciles con este
tipo de pruebas, es saber cuándo parar de probar.
Las pruebas
Son los procesos que permiten verificar y revelar la calidad de un producto como la
aplicación web y utilizada para identificar posibles fallos de implementación, calidad, o
usabilidad de un programa de ordenador, básicamente es una fase en el desarrollo de
software consistente en probar las aplicaciones construidas.
Un buen caso de prueba es aquel que tiene una falta de probabilidad de mostrar error
descubierto hasta entonces.
59
profesionales altamente capacitados en lenguajes de desarrollo, métodos y técnicas de
pruebas y herramientas especializadas. El conocimiento que debe manejar un ingeniero de
prueba es muchas veces superior al del desarrollador de software.
Las pruebas de software se integran dentro de las diferentes fases del ciclo del software
dentro de la Ingeniería de software. Así se ejecuta un programa y mediante técnicas
experimentales se trata de descubrir que errores tiene la aplicación web.
En la aplicación web de gestión de soporte técnico, se desarrolló la respectiva prueba con
el objetivo de corregir errores y modificarlo la cual se tomó en cuanta los siguientes puntos
de suma importancia de la aplicación web.
Las pruebas del software son un elemento crítico para la garantía de calidad de la
aplicación web y representa una revisión final de las especificaciones, del diseño y de la
codificación. La creciente percepción de la aplicación web como un elemento del sistema y
la importancia de los costes asociados a un fallo del propio sistema, están motivando la
creación de pruebas minuciosas y bien planificadas.
La prueba es un elemento crítico para la calidad del software. La importancia de los costes
asociados a los errores, promueve la definición y aplicación de un proceso de pruebas
minuciosas y bien planificadas. Las pruebas permiten validar y verificar el software,
entendiendo como validación del software el proceso que determina si el software satisface
los requisitos, y verificación como el proceso que determina si los productos de una fase
satisfacen las condiciones de dicha fase.
Las estrategias de pruebas permiten enfocar el plan de pruebas; Este comprende la visión
del proceso de pruebas, definición de actividades y roles involucrado en cada una de ellas.
60
3.3.5.1 Pruebas de la aplicación web basado en modelos
Verifica que cada elemento encaja de forma adecuada y que se alcanza la funcionalidad y
el rendimiento del sistema total. La prueba del sistema está constituida por una serie de
pruebas diferentes cuyo propósito primordial es ejercitar profundamente el sistema de la
aplicación web y los módulos que contiene dicha aplicación para la ejecución de la gestión
de Soporte Técnico.
Pruebas de Seguridad
Con tiempo y recursos suficientes, una buena prueba de seguridad terminaría por acceder
al sistema. El papel del diseñador del sistema es hacer que el coste de la entrada ilegal sea
mayor que el valor de la información obtenida.
La fase de pruebas necesita una organización seria y fiable. Las pruebas funcionan cuando
encuentran errores. Debe de realizarse una planificación exhaustiva.
61
Terminación de las Pruebas
Pruebas de regresión
Tiene como finalidad verificar el sistema de la aplicación web luego, de haber realizado
cambios o después de corregir fallas de la aplicación web de manera que mantenga una
correcta funcionalidad especifica.
Pruebas de operación
Pruebas de rendimiento
Tiene como finalidad medir la capacidad de la aplicación web con los procesos del
sistema bajo diferentes cargas, incluyendo espacios de almacenamiento y la utilización de
la unidad de procesamiento del sistema de la aplicación web.
62
Pruebas de sobrecarga
Pruebas negativa
Tiene como propósito medir el estrés de la aplicación web en la situación inesperada, como
casos de uso que normalmente no serían utilizados de manera simultánea.
La prueba requerida se efectúo con cada una de las tablas de la base de datos
“serviciotecnico2015”, abriendo nuevos registros, modificando y eliminándolos.
Descripción
Este proceso cubre el conjunto de pruebas unitarias realizadas sobre la Base de Datos
(todas las tablas). Las pruebas que se realizaron a cada una de estas tablas a través de los
formularios fueron:
a) Ingreso de datos: validación de registro en blanco, validación de datos erróneos,
validación de tipos de datos, validación de longitud de los registros, validación con
datos nulos, validación de duplicidad de claves primarias.
b) Modificación de datos: validar la existencia del registro solicitado, validar la no
modificación de la clave primaria, validar tipo de dato, etc.
c) Validación de Cálculos: Validar tipos de datos, validar existencia de productos en
stock, validar la cantidad a reservar, validar la aproximación de decimales.
d) Acceso al sistema: validar la existencia del usuario y la contraseña en la base de datos
MySql, validar la conexión a la base de datos.
e) Consultas-Reportes: validad los resultados de los reportes, validar parámetros de
entrada y resultados esperados.
El entorno del cual partiremos para realizar la prueba será el formulario de entrada de la
aplicación.
63
Comprobar que la consulta funciona correctamente
Nos introducimos en el sistema como usuarios registrado en la base de datos MySql y con
los permisos correspondientes, accediendo a su funcionalidad y solicitamos consultar
realizar una determinada acción, el sistema nos mostrara información, mensaje y lista con
los resultados que se hayan almacenado en la base de datos del sistema.
Condiciones de ejecución
Las condiciones de ejecución del caso de prueba son que el usuario debe ingresar
correctamente los datos solicitados por el Sistema-Aplicación Web. Consultar la Base de
Datos ‘MySql’ (tabla: user)’ para ver toda la especificación completa de los datos.
Entrada
Resultado esperado
La Aplicación Web nos muestra una interfaz sencilla y fácil de manipularla, que muestra
información según sea la solicitada.
Evaluación de la Prueba
Para la siguiente evaluación de la aplicación web se tomara como más importante los
resultados cuantitativos por lo que se ha tomado la forma de la calificación y la evaluación
64
de la siguiente manera.
Calificación alta comprende el 100 %
Calificación alta media comprende el 75%
Calificación media comprende el 50%
Calificación media baja comprende el 25%
Calificación baja comprende el 10%
65
3.3.5.5 Pruebas generales de hardware
PRUEBA DETALLE
Conexión de piezas (teclado, mouse, Se verifico que la instalación de los
pantalla, reguladores, UPS) componentes de entrada y salida de datos
este correctamente conectado
Encendido Se verifico que el computador encienda de
manera correcta, los dispositivos
funcionaron correctamente y el arranque del
sistema operativo donde se va a ejecutar la
aplicación fue correspondiente a usar
Corte de Energía Eléctrica Se Utilizó el UPS para evitar perdida de
información por algún corte de energía.
PRUEBA DETALLE
Instalación de Windows Se Verifico que la instalación de Windows,
esté en buenas condiciones, sin fallas
internas y que arranque al momento de
encender el computador.
Instalar paquetes Framework de Microsoft Fueron Comprobados e instalados los
paquetes Framework de Microsoft para que
los paquetes a utilizar funcionen
correctamente
Instalación de herramientas de Desarrollo Se instaló correctamente los programas de
(MYSQL, PHPRUNNER, Servidor web desarrollo de la aplicación Web,
Apache, ) verificando compatibilidad de los sistemas
operativos y ejecutando varios ejemplos
para verificar la funcionalidad de los
programas.
Instalación de Xampp El lenguaje PHP que es la base para el
desarrollo de la aplicación web necesita de
66
un programa instalado como es el Xampp,
el cual es un paquete que viene incorporado
el servidor de base de datos MYSQL, PHP
y el Servidor Web Apache, para que
mediante la configuración en el servidor
Apache, desde el browser digitando
localhost, se ejecute la aplicación web
localmente
Aplicación web
PRUEBA DETALLE
Código Fuente Se Verifico que la sintaxis usada este
correctamente al momento de realizar
compilaciones
Hipervinculos Al trabajar con formularios y el paso de
información de un formulario a otro se
verifico que los vínculos o enlaces se hagan
de manera relacionada.
Conexión a la base de Datos Al momento de compilar se verifico los
errores de conexión a la base de datos
posteriormente dando la solución
respectiva, ya sea verificando el nombre de
usuario y contraseña o también la sintaxis
de la cadena de conexión
Alineación y Justificación de Texto Se realizó una presentación agradable a la
vista de la información a mostrar, con los
espacios correspondientes entre los
márgenes y alineaciones.
Diseño, Estilos CSS y Colores Se optimizo el espacio a utilizar y realizar
combinaciones de colores agradables al ojo
67
humano utilizando los colores propios de la
institución
Consultas SQL (Insert, Update, Delete) Una vez comprobada la conexión con la
base de datos, se verifico que las consultas
SQL lleguen a la base de datos, mediante
try y catch para informar del error
ocasionado, evitando que la aplicación se
detenga.
Validación de cajas de texto Se Comprobó que las validaciones en PHP
o java script, realicen la función deseada,
compilando la aplicación y verificando que
en cada caja de texto permita el ingreso de
solo letras o números según lo necesario.
Creación de Roles de Usuario en la Base A momento de crear los usuarios, se
de Datos verifico que dicho usuario conste en la base
de datos con los permisos necesarios
otorgados.
Sesiones Se Programó condiciones para que no
puedan ingresar al sistema evadiendo el
login principal, usando variables de sesión
Respaldos de la Base de Datos y Backup Se Comprobó que el backup funcione al
momento de importar esos datos en la Base
de Datos, para evitar problemas de pérdida
de la información
3.3.6 Implementación
69
CONCLUSIONES
Una aplicación Web que permita administrar cada uno de los datos almacenados de
manera correcta, donde nos brindó la información requerida, solicitada para el
desarrollo de dicha aplicación.
La Empresa ha concedido que se realice las pruebas necesarias para verificar el buen
funcionamiento de la aplicación y la solución a posibles errores encontrados durante el
proceso del mismo.
70
la aplicación web permitirá agilizar los procesos que establecen día a día en la
Empresa con mayor rapidez y en la ejecución de todos sus procesos, así brindando un
servicio de calidad para el cliente, y la comodidad para el personal de las diferentes
áreas y administrativos.
71
RECOMENDACIONES
72
BIBLIOGRAFÍA
Manual de Usuario
A continuación se presenta el manual de usuario el mismo que será una guía para el cliente
final el cual facilitara en el manejo de la aplicación web.
El presente menú es presentado por el sistema como primera presentación unas ves que el
usuario ingrese al sistema según sea su rol, en el caso del súper usuario se presentaran
todas las opciones que tiene disponible el sistema.
En este panel se presentan todos los empleados que han sido registrados en el sistema, el
Por medio de este formulario podemos registrar a los empleados de la empresa, llenando
cada uno de los campos requeridos.
Por medio de este formulario podemos ingresar la provincia y la ciudad de los lugares
donde tiene cobertura la empresa.
Por medio de este panel con el botón “añadir nuevo “el administrador podrá agregar
nuevos usuarios de la lista de empleados asignándoles el usuario y contraseña el cual
deberán utilizar como usuario el número de la cedula y la clave asignada por el
administrador.
Por medio de este panel, el súper administrador puede asignar a los empleados el rol de
usuarios con sus respectivos privilegios.
En la parte derecha del panel el súper administrador deberá marcar la casilla del usuario
según le corresponda.
PANEL DE BODEGA
Por medio de este formulario podemos registrar los equipos adquiridos por la empresa,
llenando cada uno de los campos requeridos.
FORMULARIO DE REGISTRO DE SALIDA DE EQUIPOS
En este panel se puede visualizar todos los clientes que han sido registrados el cual
también por el mismo se puede abrir el formulario de ingreso de nuevos clientes haciendo
Por medio de este formulario podemos registrar la información necesaria del cliente,
llenando cada uno de los campos requeridos.
PANEL SOPORTES E INSTALACIONES ASIGNADAS
hacemos clic en .
En este panel se muestra los detalles de cada soporte realizado por parte del técnico en el
cual el administrador puede dar de baja el soporte en cuanto se haya culminado con éxito
dicho soporte.
En este panel se muestra los detalles de cada soporte realizado por parte del técnico en el
cual el administrador puede dar de baja el soporte en cuanto se haya culminado con éxito
dicho soporte.
En el cuadro son los datos del enlace del el soporte o instalación realizado por parte del
técnico en la red de la empresa.
De la misma manera como en los paneles anteriores, con los botones “añadir nuevo” se
En este panel se muestra las observaciones realizado por parte del jefe técnico, en el cual el
técnico puede visualizar dichas observaciones.
CERTIFICADO DE IMPLANTACIÓN