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.