diseÑo y desarrollorepositorio.upsin.edu.mx/fragmentos/capitulo3marcos... · 2016. 9. 5. · 49...
TRANSCRIPT
48
CAPÍTULO III
DISEÑO Y DESARROLLO
49
3.1 – Diseño
Para la implementación de estas actualizaciones dentro de los sistemas web que
produce Stratia Consultores se optó por emplear como método de desarrollo la Programación
defensiva (defensive programing), debido a diversas características de esta metodología, las
cuales se mencionaran más adelante.
La programación defensiva es una forma de diseño defensivo aplicada al diseño de software
que busca garantizar el comportamiento de todo elemento de una aplicación ante cualquier
situación de uso por incorrecta o imprevisible que ésta pueda parecer. Esta característica fue
primordial para poder elegir este método para realizar el proyecto.
Debido a la gran cantidad de información delicada que se maneja en los sistemas mencionados
anteriormente, la protección de su integridad un punto esencial, la programación defensiva en
general, supone multiplicar las comprobaciones que se realizan en todos los módulos
programados, con la consiguiente penalización en carga de procesador, tiempo y aumento en
la complejidad del código. Las técnicas de programación defensiva se utilizan especialmente
en componentes críticos cuyo mal funcionamiento, ya sea por descuido o por ataque malicioso,
podría acarrear consecuencias graves o daños catastróficos.
La programación defensiva es un enfoque que busca mejorar el software y el código fuente, en
términos de:
Calidad: Reduciendo el número de fallos de software y, en consecuencia, problemas.
Comprensión: El código fuente debe ser legible y comprensible, a prueba de una
auditoría de código.
Seguridad: Hacer que el software se comporte de una manera predecible pese a
entradas o acciones de usuario inesperadas.
Una diferencia entre una programación defensiva y las prácticas tradicionales es que el
programador realiza pocas hipótesis, el cual intenta manejar todos los posibles estados de
error. En resumen, el programador nunca asume que una llamada a una función particular o
biblioteca trabajará bajo las entradas previstas, lo cual no le permite ver todos los posibles
escenarios en los que se puede manifestar un error. [18]
50
3.1.1 Técnicas de programación defensiva
La programación defensiva consta de diversas técnicas que le permiten abarcar casi
perfectamente todos los aspectos de desarrollo para lograr un entorno de programación con el
menor número de errores posibles.
3.1.1.1 Reducción de complejidad
Esta técnica busca que el código nunca sea más complejo de lo que es necesario,
la complejidad genera bugs, incluyendo problemas de seguridad. Esta meta pude tener
conflicto con el objetivo de escribir programas que puedan recuperarse de cualquier error
y manejar cualquier entrada de datos. Manejar todas las ocurrencias inesperadas en un
programa requiere que el programador añada código extra, el cual pudiera también tener
bugs al interferir con alguna otra instrucción.
3.1.1.2 Revisiones del código
Una revisión de código es donde alguien diferente al autor original realiza una auditoría
de código. Una auditoría de código hecha por el mismo creador es insuficiente. La auditoría la
debe hacer alguien que no sea el autor, como cuando se escribe un libro, debe ser revisado
por alguien que no sea el autor.
Simplemente haciendo el código disponible para que otros lo lean (software libre) es
insuficiente, pues no hay garantía que el código sea efectivamente revisado, no dejando que
sea rigurosamente revisado.
51
3.1.1.3 Pruebas de software
Las pruebas de software deberán ser para tanto que el software trabaje como debe,
como cuando se supone que pase si se realice deliberadamente malas entradas.
Las herramientas de prueba pueden capturar entradas de teclado asociadas con operaciones
normales. Luego las cadenas de texto de estas entradas capturadas pueden ser copiadas y
editadas para ensayar todas las permutaciones y combinaciones, luego ampliarlas para tests
posteriores después de cualquier modificación-. Los defensores de la clave de registro afirman
que los programadores que usan este método deberán asegurar que las personas a las cuales
se les están capturando las entradas estén al tanto de esto, y con qué propósito, para evitar
acusaciones de violación de privacidad.
3.1.1.4 Reutilización inteligente
La idea de esta técnica es capturar beneficios de un bien escrito y bien probado código
fuente, en vez de crear bugs innecesarios.
Sin embargo, reutilizar código no siempre es la mejor manera de progresar, particularmente
cuando la lógica del negocio está involucrada. Reutilizar en este caso puede causar serios
bugs en los procesos de negocio.
3.1.1.5 Problemas de legado
Antes de reutilizar viejo código fuente, bibliotecas, APIs, configuración y demás, debe
ser considerado si el trabajo anterior es válido para reutilizar, o si es propenso a problemas
de legado.
Los problemas de legado son problemas inherentes cuando se espera que viejos diseños
trabajen con los requerimientos actuales, especialmente cuando estos viejos diseños no fueron
desarrollados o probados con estos requerimientos en mente.
52
Muchos productos de software han experimentado problemas con viejos códigos fuente
legados, por ejemplo:
El código legado puede no haber sido diseñado bajo iniciativa de Programación
Defensiva, y puede por consiguiente ser de mucha menos calidad que un diseño más
nuevo de código fuente.
El código legado puede haber sido escrito y probado bajo condiciones que ya no aplican
más. Los viejos test de aseguramiento de calidad pueden no ser válidos.
El código legado no es escrito con nuevos problemas en mente. Por ejemplo, código
fuente escrito en 1990, puede ser propenso a vulnerabilidades de Inyección de Código,
porque muchos de estos problemas no eran extensamente entendidos en esa época.
3.2 – Desarrollo
Para poder dar inicio a este proyecto de actualización, primero se tuvo que realizar
un estudio, el cual arrojo resultados positivos, que permitieron dar inicio al desarrollo del
proyecto.
Figura 3. 1 Ejemplo de un bloque de código validado defensivamente.
53
Después de ser aprobado el proyecto se procedió a analizar los requerimientos, así como
jerarquizar los módulos más necesarios y establecer un plan de trabajo para poder seguir
un orden en las labores de programación.
Por ser en su mayoría, sistemas administrativos de empresas constructoras, los cuales
manejan gran cantidad de información relacionada con bienes materiales, el resultado de
la jerarquización de la importancia inmediata de los módulos era la siguiente:
Módulos de proveedores: Contienen información acerca de los proveedores, ya
sea de materiales, maquinaria o mano de obra.
Módulos de nómina: Todos aquellos que contengan relación referente con salarios
de trabajadores, asistencia y bonos.
Clientes: todos aquellos módulos donde se referencia algún tipo de relación entre
las empresas administradoras del sistema y sus clientes.
Configuraciones: Aquí se engloban las opciones estéticas de interfaz, así como
los módulos donde le es permitido al usuario establecer algún tipo de
configuración.
Debido a que se usaría una metodología de desarrollo seguro, se deben tomar en cuenta
bastantes factores, entre los más importantes está el tiempo, una metodología segura
implica un gran número de líneas de código extra, lo cual repercute en el tiempo de
programación de los módulos, por lo tanto para el desarrollo de este proyecto se optó por
usar las tecnologías y herramientas que se describen más adelante, con la finalidad
mitigar el impacto que tendría la programación con respecto al tiempo.
3.2.1 – Herramientas de desarrollo
Para el desarrollo del proyecto de actualización se utilizaron diversos recursos y
herramientas que serán divididos según la aplicación que se les daba en las respectivas tareas
del proyecto de actualización, cabe mencionar que en algunos puntos, algunas de las
herramientas utilizadas tenían una funcionalidad bastante similar con respecto a las demás,
54
pero esto se debió a que era necesario optimizar tiempos, por lo cual, para realizar una tarea
que podía ejecutarse con distintas herramientas, se utilizaba la que tuviera mejor desempeño
en la función requerida.
Ejemplificando a pequeña escala lo antes mencionado, en un marco hipotético, donde se tienen
dos utilerías que son capaces de realizar la interpretación de un código HTML y hacer una
depuración de código (Debug), si para realizar una tarea se necesita una interpretación de
HTML se optaría por utilizar la utilería que lo hiciera más rápido y con menos errores, mas, si
se necesitara realizar una depuración se debería revisar si es óptimo seguir utilizando la
misma utilería para realizar esa función, ya que pudiera ser que la utilería que era menos
eficiente a causa de ser más lenta interpretando, tome ventaja al ser más eficiente en realizar
una función de depuración, lo cual en el área de la programación es más importante.
Con el anterior ejemplo se hace una pequeña explicación acerca de los motivos que impulsaron
al equipo de desarrollo a tomar la decisión de utilizar esta metodología de trabajo, el cual, en
cierto punto se podría ver algo innecesario o incluso excesivo en el manejo de la optimización
del tiempo, pero al momento de revisar la gran cantidad de módulos dentro de los sistemas en
relación con el tiempo, se vuelve un aspecto primordial que no puede dejarse de lado.
3.2.1.1 Base de datos
Para las actividades que requerían el manejo de datos se tomó la decisión de continuar
utilizando MySQL que es un sistema de gestión de bases de
datos relacional, multihilo y multiusuario con más de seis millones de instalaciones. MySQL AB
desde enero de 2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle
Corporation desde abril de 2009 desarrolla MySQL como software libre en un esquema de
licenciamiento dual.
Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia, pero
para aquellas empresas que quieran incorporarlo en productos privativos deben comprar a la
empresa una licencia específica que les permita este uso. Está desarrollado en su mayor parte
en ANSI C.
Al contrario de proyectos como Apache, donde el software es desarrollado por una comunidad
pública y los derechos de autor del código están en poder del autor individual, MySQL es
patrocinado por una empresa privada, que posee el copyright de la mayor parte del código.
55
Esto es lo que posibilita el esquema de licenciamiento anteriormente mencionado. Además de
la venta de licencias privativas, la compañía ofrece soporte y servicios.
El motivo por el cual se eligió seguir trabajando bajo este lenguaje es por su fácil aplicación
dentro del desarrollo de aplicaciones web, así como la gran cantidad de documentación que
existe con respecto a este lenguaje de base de datos.
Las herramientas que se utilizaron para el manejo de datos en MySQL fueron las siguientes:
SQLyog: Es una herramienta GUI (Graphical User Interface) utiliza como sistema de
gestión de bases de datos relacionales (RDBMS) MySQL. Es desarrollado por Webyog,
Inc. con sede en Bangalore, India y Santa Clara, California.
Este gestor fue utilizado principalmente para la creación de sentencias MySQL, debido
a que su entorno es bastante amigable, además de ser muy eficaz en el momento de
ejecutar sentencias, lo cual era necesario para la realización de pruebas al momento de
trabajar con la manipulación. [19]
Navicat: Es un administrador gráfico de base de datos y un software de desarrollo
producido por PremiumSoft CyberTech Ltd. para MySQL, MariaDB, Oracle, SQLite,
PostgreSQL y Microsoft SQL Server. Cuenta con un Explorador como interfaz gráfica de
usuario soportando múltiples conexiones para bases de datos locales y remotas.
Esta utilería se empleó principalmente para realizar la revisión y análisis de las diferentes
bases de datos, debido a que el entorno en el cual se presentan los elementos que
conforman una base de datos es bastante amigable e intuitivo dentro de esta aplicación.
[20]
Figura 3. 2 Logo de MySQL
56
3.2.1.2 Codificación
Dentro del apartado de codificación, se utilizaron lenguajes de programación orientados
al desarrollo web, entre ellos destacan principalmente PHP, JavaScript y HTML, mas no es lo
único que se utilizó para el desarrollo del proyecto, ya que son necesarias utilerías para poder
escribir el código, poder interpretarlo y depurarlo, así como también es importante el uso de
herramientas dentro del código, las cuales pueden optimizar procesos internos y ejecutar
instrucciones de una manera más precisa y rápida.
3.2.1.2.1 IDES
Un IDE (Integrated Development Environment) es una aplicación informática que
proporciona servicios integrales para facilitarle al desarrollador o programador el desarrollo de
software.
Normalmente, un IDE consiste de un editor de código fuente, herramientas de construcción
automáticas y un depurador. La mayoría de los IDE tienen auto-completado inteligente de
código (IntelliSense). Algunos IDE contienen un compilador, un intérprete, o ambos.
Figura 3. 3 Logo SQLyog
Figura 3. 4 Logo Navicat.
57
Durante la realización de este proyecto se utilizaron dos diferentes IDES para la realización de
diversas tareas en cuanto a la escritura del código:
NetBeans: Es un entorno de desarrollo integrado libre, hecho principalmente para el
lenguaje de programación Java. Existe además un número importante de módulos para
extenderlo. Es un producto libre y gratuito sin restricciones de uso.
NetBeans es un proyecto de código abierto de gran éxito con una gran base de usuarios,
una comunidad en constante crecimiento, y con cerca de 100 socios en todo el mundo.
Sun MicroSystems fundó el proyecto de código abierto NetBeans en junio de 2000 y
continúa siendo el patrocinador principal de los proyectos (Actualmente Sun
Microsystems es administrado por Oracle Corporation).
Esta herramienta fue utilizada en la escritura del código casi en su totalidad, debido a
ser un IDE muy completo que cuenta con muy buenas opciones de revisión de sintaxis,
así como un autocompletado bastante eficaz, lo cual facilita bastante la escritura de
códigos extensos. [21]
SublimeText: Es un editor de texto y editor de código fuente está escrito en C++ y
Python para los plugins. Desarrollado originalmente como una extensión de Vim (Vi
IMproved), con el tiempo fue creando una identidad propia, por esto aún conserva un
modo de edición tipo vi llamado Vintage mode.
Se distribuye de forma gratuita, sin embargo no es software libre o de código abierto, se
puede obtener una licencia para su uso ilimitado, pero el no disponer de ésta no genera
ninguna limitación más allá de una alerta cada cierto tiempo.
Este, aunque no es considerado un IDE en su totalidad, cuenta con varias características
de un IDE, además del uso que se le dio, se optó por incluirlo en esta sección aun siendo
solo un editor de código fuente. Fue utilizado principalmente para la corrección de
errores después de la interpretación y depuración, debido a su rápida respuesta y la
ligereza del programa. [22]
Figura 3. 5 Logo de NetBeans IDE.
58
3.2.1.2.2 Librerías, Frameworks y Plugins
En el momento de realizar la escritura de código siempre se busca el hacer el menor
trabajo posible para llegar a un mismo resultado, dentro de la programación defensiva esto no
es tan adecuado, ya que se necesitan por lo general bloques de código extra para poder
prevenir un fallo dentro del sistema.
Por el hecho de que el código resultante utilizando la programación defensiva es bastante
extenso, se necesitan optimizar procesos dentro del código, para así reducir el tamaño del
código fuente final, para esto, el equipo de desarrollo decidió utilizar Librerías, Frameworks y
Plugins para agilizar la programación en ciertos módulos.
Debido a la gran cantidad de utilerías utilizadas que entran en este apartado, se mencionaran
a continuación solo los más relevantes, mencionando un poco de su historia y desarrollo, así
como las tareas para las que se utilizaron.
jQuery: Es una biblioteca de JavaScript, creada inicialmente por John Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la
técnica AJAX a páginas web.
Entre sus principales características están:
o Eventos.
o Manipulación de la hoja de estilos CSS.
o Efectos y animaciones.
o Animaciones personalizadas.
Figura 3. 6 Logo SublimeText
59
o AJAX.
o Soporta extensiones.
Consiste en un único fichero JavaScript que contiene las funcionalidades comunes de
DOM, eventos, efectos y AJAX.
La característica principal de la biblioteca es que permite cambiar el contenido de una
página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y
peticiones AJAX. Para ello utiliza las funciones $( ) y jQuery( ).
La librería jQuery fue utilizada principalmente para manejo de funciones AJAX,
modificación de CSS y por ser necesaria para algunas otras utilerías.
Bootstrap: Llamado anteriormente Twitter Bootstrap debido a que fue desarrollado por
Mark Otto y Jacbod Thornton de Twitter, es un framework o conjunto de herramientas
de software libre para diseño de sitios y aplicaciones web. Contiene plantillas de diseño
con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos
de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales
adicionales.
Para el uso de este framework es necesario utilizar la librería de jQuery, ya que utiliza
sus funciones para ejecutar sus propias funciones y métodos.
Fue utilizado para mejorar la apariencia de las interfaces sin necesidad de agregar
estilos manualmente, además de facilitar la adecuación de un diseño responsivo
Figura 3. 7 Logo de jQuery.
60
(Responsive Design) lo cual es un punto bastante importante en la web actual, ya que
con la introducción de nuevos dispositivos capaces de conectarse a internet, es
necesario poder adaptar los sistemas a diferentes resoluciones de pantalla.
DataTables: Es un plugin para el jQuery que a su vez es una librería de JavaScript. Es
una herramienta muy flexible, en base a los fundamentos de la mejora progresiva, y
añadirá controles de interacción avanzadas para cualquier tabla HTML.
Figura 3. 8 Logo Bootstrap
Figura 3. 9 Ejemplo de una página responsiva vista en distintas resoluciones.
61
Para el uso de este plugin es necesario incluir las librerías de jQuery mas actualizadas,
ya que trabajara sobre esta librería.
Fue utilizada para implementarse en tablas de muestra de datos. Este plugin es bastante
útil a la hora de mostrar datos dentro de tablas gracias a sus características, entre las
cuales está el diseño, el cual es bastante elegante, la posibilidad de paginar y ordenar
resultados, lo cual es muy útil a la hora de mostrar un gran número de registros, además
de permitir filtrar registros mediante un buscador, entre otras características.
El motivo principal que impulso al equipo a utilizar este plugin fue el hecho de que al
trabajar con jQuery y tener la opción de mostrar los registros mediante el resultado de
una consulta de AJAX la codificación sería bastante rápida, permitiendo agilizar
procesos. [23]
3.2.1.3 Interpretación
En cuanto a la interpretación de un código fuente escrito para la web se refiere, es
necesario siempre utilizar diferentes intérpretes, que en este caso son los navegadores de
internet, debido a que no todos cuentan con el soporte para diferentes elementos y tecnologías,
por lo cual podría fallar algún proceso dependiendo del interprete, principalmente en cuanto a
la visualización.
Por el hecho de ser un proyecto de actualización a sistemas ya existentes de empresas
específicas, este punto fue un poco menos complejo que si se hubiera tratado de un desarrollo
más general.
La primera acción que se realizó para tomar la decisión de que interpretes usar en las pruebas
fue, hacer una encuesta a los clientes para saber que navegador usaban la mayoría del tiempo
Figura 3. 10 Logo plugin DataTables.
62
para entrar a los sistemas, así como también buscar alternativas más genéricas al momento
de la programación, para evitar en el mayor grado posible los problemas de incompatibilidad
que pudieran surgir.
Como resultado de lo anterior se optó por utilizar principalmente dos intérpretes:
Google Chrome: Es un navegador web desarrollado por Google y compilado con base
en varios componentes e infraestructuras de desarrollo de aplicaciones (Frameworks)
de código abierto, como el motor de renderizado Blink (fork de WebKit). Está disponible
gratuitamente bajo condiciones específicas del software privativo o cerrado. El nombre
del navegador deriva del término en inglés usado para el marco de la interfaz gráfica de
usuario («chrome»).
Fue la opción primordial para realizar pruebas, debido a su gran popularidad entre todo
tipo de usuarios, así como la compatibilidad con tecnologías de desarrollo web y su muy
eficaz DevTools. Lo que permite entrar a fondo en los procesos internos del navegador,
para lograr una depuración de código más eficiente por tener acceso a bastantes
opciones de depuración. [24]
Figura 3. 11 Logo del navegador Google Chrome.
Figura 3. 12 Logo del navegador Google Chrome.
Figura 3. 13 DevTools del navegador Google Chrome.
63
Mozilla Firefox: (llamado simplemente Firefox) es un navegador web libre y de código
abierto desarrollado para Microsoft Windows, Android, OS X y GNU/Linux coordinado
por la Corporación Mozilla y la Fundación Mozilla. Usa el motor Gecko para renderizar
páginas web, el cual implementa actuales y futuros estándares web.
Firefox puede no ser el navegador más popular, pero si incorpora bastantes
características que lo hacen una buena opción en el momento de la interpretación y
depuración de código fuente escrito para la web. [25]
Al igual que Google Chrome, cuenta con herramientas de depuración bastante robustas,
además de ser bastante ligero y no requerir tantos recursos como Google Chrome.
3.2.2 – Análisis y actualización de base de datos
Debido a que cada sistema ya contaba con una base de datos no fue necesario el diseño
y creación de una base de datos nueva, pero por motivos de optimización, fue necesario
realizar un análisis de todos los elementos contenidos en la base de datos, su estructura y sus
métodos, para poder así desechar todo elemento innecesario, así como el integrar nuevos
elementos.
Para realizar esta función se utilizó Navicat por motivos mencionados anteriormente, se analizó
a fondo toda la estructura de las bases de datos relacionales, además de las funciones que se
encontraban almacenadas dentro de las mismas
Figura 3. 14 Logo del navegador Mozilla Firefox.
Figura 3. 15 depurador del navegador Mozilla Firefox.
64
Al concluir esta actividad se procedió a implementar los cambios correspondientes dentro de
las bases de datos, para lo cual se hizo un respaldo, además de un cambio de servidor.
3.2.3 – Diseño de las nuevas interfaces
Para mejorar el diseño de las interfaces se utilizó el Framework Bootstrap, debido a sus
grandes posibilidades de personalización, además de su facilidad de aplicación y comprensión.
El diseño de las nuevas interfaces se enfocó principalmente en generar un entorno llamativo a
y al mismo tiempo intuitivo utilizando solo los componentes necesarios además de cuidar su
ordenamiento y alineaciones, para que el usuario pueda ubicarse donde lo requiera en todo
momento.
Los principales elementos que se utilizaron son los siguientes:
Menús desplegables: Este componente permite mostrar una lista de enlaces como si
fuera un menú desplegable con la lista de acciones que el usuario puede realizar. Para
que funcionen sus características interactivas.
Este elemento se utilizó para rediseñar el menú de los diferentes sistemas, haciendo la
navegación más fácil y agradable para el usuario.
Figura 3. 16 Edición de una tabla usando Navicat
Figura 3. 17 Ejemplo de menú desplegable hecho con Bootstrap.
65
Formularios: Este componente es utilizado generalmente para hacer intercambios de
información con la base de datos (mostrar, guardar y eliminar), además en Bootstrap
permite dar estilo a los componentes contenidos en el, haciéndolo así más estético.
Botones: Son un elemento bastante pequeño, pero a su vez muy significativos e
importantes, debido a que son los elementos con los que el usuario final tiene mayor
contacto, son utilizados para realizar la gran mayoría de las funciones de los sistemas.
Es por eso que todo el equipo de desarrollo se enfocó en dar una buena apariencia a
estos elementos, para lo cual, se personalizaron con el uso de textos y tipografía de
Bootstrap que se muestra como iconos y hace más ligera la carga de la página.
Ventanas emergentes: Las ventanas emergentes fueron elementos primordiales en la
realización de este proyecto, debido a que tenían un gran número de aplicaciones, entre
las principales se encuentran el mostrar datos para realizar una modificación, introducir
datos para generar nuevos registros y eliminar datos.
Figura 3. 18 Ejemplo de ventana emergente hecha con Bootstrap.
Figura 3. 19 Ejemplo de botones personalizados con Bootstrap.
66
El uso de Bootstrap facilito la implementación de estas ventanas emergentes, debido a
que cuenta con diseños preestablecidos, así como animaciones y a funciones
particulares que ahorran espacio de código y tiempo.
RESULTADOS
Al día 3 de Diciembre del año 2015, fecha en la que se realizó la evaluación de resultados
alcanzados en la primera etapa del proyecto mencionado dentro de este documento se
observaron principalmente los resultados que se muestran a continuación:
Una reducción de casi un 50% en el tamaño del código, aun con todas las validaciones que se
agregaron a lo largo de cada módulo, todo esto gracias a las utilerías empleadas, mediante las
cuales solo se necesitaba añadir una librería para realizar procesos que traducidos a líneas de
código ocuparía un gran espacio.
Un menor tiempo de reacción dentro de la aplicación, lo cual se debe a la optimización de
procesos realizada en el sistema, además del uso de tecnologías más actuales, que por sí
solas aumentan efectividad.
Se logró una optimización bastante notoria dentro de la base de datos, logrando reducir espacio
de almacenamiento, campos innecesarios así como duplicidad de datos dentro de la aplicación.
Por ultimo como uno de los resultados más notorios fue la gran mejora dentro de la interfaz que
se logró gracias a la implementación de un nuevo diseño responsivo usando el framework
Bootstrap para facilitar la aplicación de estilos.
Figura 3. 20 Ejemplo de ventana emergente para agregar registros con Bootstrap.