UNIVERSIDAD POLITÉCNICA DE SINALOA 

PROGRAMA ACADÉMICO DE INGENIERÍA EN INFORMÁTICA 

Tesina 

 “Migración de framework de 

diseño en una aplicación web y sus implicaciones” 

Para cumplir la acreditación de las estadías profesionales y contar con los créditos necesarios para obtener el grado de Ingeniero en Informática

Autor:

Erik Abraham Godoy Rojas (2017030708)

Asesora: MC. Melissa Osuna Cárdenas

Asesor OR: Lic. José Guadalupe Arevalos Palomares

Mazatlán, Sinaloa 15 de Diciembre de 2020

 

Carta de aceptación de tema de tesina           

 

Carta de aceptación de revisión de tesina 

Agradecimientos Agradezco a mi familia, en especifico a mi padre Pablo, mi madre Erika, mi hermano

Pablo Eduardo y mi Abuelo Pablo por ayudarme en los momentos de dificultad tanto económicamente como emocionalmente, debido a que gracias a ellos pude

continuar estudiando y preparándome. Es gracias a ellos que estoy en este punto de

mi carrera y por eso les agradezco enormemente.

Agradezco a mis profesores por ayudarme a forjar los cimientos de este tan basto campo el cual es la Informática, yo entre a esta carrera sin ningún conocimiento

previo y en este punto puedo decir que me siento preparado para afrontar los retos

que están por venir

Un agradecimiento especial a la Dra. Vanessa Guadalupe Felix Aviña, la cual siempre estuvo al pendiente apoyando desde su puesto como tutora de nuestro

grupo.

Agradezco también a mis amigos los cuales hicieron de esta travesía bastante

divertida y llevadera, ya que su apoyo fue fundamental para lograr mi preparación

Índice Agradecimientos 2

Índice 3

Índice de Figs 5

Resumen 8

Abstract 8

Capítulo 1 9 Antecedentes 9

Localización 10 Objetivos de la institución 10 Misión 11 Visión 11 Planteamiento del problema 11 Propuesta de investigación 12 Objetivos de la investigación 12

Objetivo general 12 Objetivos particulares 12

Preguntas de investigación 13 Hipótesis 13 Limitaciones y supuestos 13 Relevancia 14

Capítulo 2. 15 Términos y Definiciones 15 Diferentes framework de diseño web 28

Boostrap 28 Materialize 29 Material-UI 30 Skeleton 31 Foundation 32 Initializr 33 Amazium 34 StackLayout 35 HTML5 Boilerplate 36 Kickstart 37 MontageJS 38

Capítulo 3 39 Previa a la integración al plan de acción. 39

Plan de acción. 40 Detalles de la migración de framework 41 Desarrollo 44

Actividades del Equipo 1 44 Actividades del Equipo 2 45 Mimetización 46

Resultados 46 Conclusión 65 Bibliografía 66

Índice de Figuras Fig 1.0 Localización de la empresa

Fig 2.0 Página oficial de Boostrap.

Fig 2.1 Logo del framework Materialize. Fig 2.2 Logo del framework Material-UI.

Fig 2.3 Logo del framework Skeleton. Fig 2.4 Logo del framework Foundation.

Fig 2.5 Logo del framework Initializr.

Fig 2.6 Página oficial de Amazium. Fig 2.7 Logo de el framework Stacklayout.

Fig 2.8 Página oficial del framework HTML5 Boilerplate. Fig 2.9 Página oficial del framework Kickstart.

Fig 2.10 Página oficial del framework MontageJS.

Fig 3.0 Plantilla de materialize. Fig 3.1 Plantilla de AdminLTE.

Fig 3.2 Dashboard con el sidebar inactivo (actual). Fig 3.3 Dashboard con el sidebar inactivo (migración).

Fig 3.4 Dashboard con el sidebar activo (actual).

Fig 3.5 Dashboard con el sidebar activo (migración). Fig 3.6 Usuarios sin datos (actual).

Fig 3.7 Usuarios sin datos (migración). Fig 3.8 Usuarios con datos (actual).

Fig 3.9 Usuarios con datos (migración).

Fig 3.10 Usuarios agregar nuevo (actual). Fig 3.11 Usuarios agregar nuevo (migración).

Fig 3.12 Empleados principal sin datos (actual). Fig 3.13 Empleados principal sin datos (migración).

Fig 3.14 Empleados principal con datos (actual).

Fig 3.15 Empleados principal con datos (migración). Fig 3.16 Empleados agregar nuevo (actual).

Fig 3.17 Empleados agregar nuevo pestañas minimizadas (migración). Fig 3.18 Empleados agregar nuevo pestañas maximizadas (migración).

Fig 3.19 Empleados pestaña Empleados (actual).

Fig 3.20 Empleados pestaña Empleados (migración). Fig 3.21 Empleados pestaña datos personales y emergencia (actual).

Fig 3.22 Empleados pestaña datos personales (migración). Fig 3.23 Empleados pestaña emergencia (migración).

Fig 3.24 Empleados pestaña experiencia laboral sin datos (actual).

Fig 3.25 Empleados pestaña experiencia laboral sin datos (migración). Fig 3.26 Empleados pestaña experiencia laboral con datos (actual).

Fig 3.27 Empleados pestaña experiencia laboral con datos (migración). Fig 3.28 Empleados pestaña experiencia laboral nueva (actual).

Fig 3.29 Empleados pestaña experiencia laboral nueva (migración).

Fig 3.30 Empleados pestaña cursos/reconocimientos sin datos (actual). Fig 3.31 Empleados pestaña cursos/reconocimientos sin datos (migración).

Fig 3.32 Empleados pestaña cursos/reconocimientos con datos (actual). Fig 3.33 Empleados pestaña cursos/reconocimientos con datos (migración).

Fig 3.34 Empleados pestaña cursos/reconocimientos con nuevos (actual).

Fig 3.35 Empleados pestaña cursos/reconocimientos con nuevos (migración).

Resumen En este documento se abordará el tema de las implicaciones que tiene la migración

de un framework de diseño web, incluyendo las diversas situaciones en las que todo

el equipo de trabajo tuvo que atravesar durante la duración del proyecto, estas experiencias serán mayormente narradas desde la perspectiva del autor de la

tesina, esto con el fin de mantener la objetividad y la usabilidad de estas experiencias para futuros estudiantes y compañeros de este campo de la Ingenieria

en informatica.

Además se hablará sobre el proceso general que se hizo para avanzar el proyecto

paso a paso, junto con diversas situaciones que se presentaron a lo largo del mismo, como estas fueron solucionadas a lo largo del proyecto y la modalidad de

trabajo que se manejo durante la duración del proyecto esto debido a los tiempos en

los que se realizó el mismo en los cuales azotaba la pandemia COVID-19.

Abstract In this document we will be looking through the implications that has the change of design framework of an application to another, in here I will be adding the

experiences that the whole team had to go through, these experiences will be told from the point of view of the author to keep these experiences valuable to another

students in this field of study.

Here we will be talking too about the general process step by step that has been

made in order to progress in the project, in addition to some situations that happened around the project and how these were solved and how the pandemic of COVID-19

affected the way of working on the project..

1 Capítulo I 

1.1 Antecedentes

ARP Soluciones Tecnológicas surge derivado de las necesidades que sus

fundadores identificaron en los diversos sectores económicos de la ciudad de Mazatlán, Sinaloa. Compartieron visión y esquemas de trabajo basados en la

responsabilidad, eficiencia y compromiso para poder generar los resultados que permitiera cumplir y superar las expectativas de los clientes. En los múltiples sectores localizaron oportunidades debido a que los clientes

buscaban soluciones integrales tecnológicas enfocadas específicamente a sus necesidades y capacidades de inversión, debido a ello se estableció un programa

de trabajo modular donde el cliente solo requiere invertir lo mínimo para obtener una herramienta tecnológica diseñada a su medida y priorizando en atender y resolver

sus principales necesidades operativas. Esto generó que independientemente de la magnitud de las empresas, todas sin distingos, puedan obtener soluciones integrales tecnológicas adaptadas a su

capacidad de inversión, pero con el mismo nivel de eficiencia y productividad que con base al aprovechamiento de sus recursos humanos, técnicos y operativos

quienes trabajando en conjunto con tecnología se pueda potencializar su

productividad y obtener los resultados esperados por las empresas como lo es incrementar su utilidad, aminorar las cargas administrativas, optimizar los tiempos y

crecer sistemáticamente en el mercado.

1.2 Localización

Oficina ubicada en calle Mar de Bering número 3506 fraccionamiento Real Pacífico,

código postal 82124, en Mazatlán, Sinaloa. (Debido a la contingencia sanitaria provocada por el contagio de COVID-19, se

mantiene cerrada temporalmente, por lo que se está aplicando la medida de home

office).

 Fig 1.0 Localización de la empresa [27]

1.3 Objetivos de la institución ● A mediano plazo, registrar presencia a nivel Latinoamérica.

● Generar productos tecnológicos que sean referentes en los diversos sectores industriales y productivos del país.

● Destacar como una empresa referente en tecnología con precios accesibles para todas las empresas.

● Generar diversos esquemas de trabajo en conjunto con tecnología para hacer

más eficientes los recursos de las empresas e incrementar su productividad. ● Generar productos para todos los sectores económicos del país y capitalizar los

productos que nos permita tener un crecimiento constante anual de la empresa. ● Participar en el sector gubernamental con innovación tecnológica para que

puedan generar y ofrecer servicios públicos a la ciudadanía de manera más

rápida, sencilla y eficiente.

1.4 Misión

Ofrecer a nuestros clientes soluciones tecnológicas de innovación y estratégicas,

para el mejoramiento de la administración empresarial mediante la implementación de soluciones integrales personalizadas, venta de equipo y aplicación de servicios

que permitan obtener una alta rentabilidad en las distintas actividades económicas.

1.5 Visión

Ser una empresa líder en la creación e innovación de tecnologías de información,

satisfaciendo las expectativas de nuestros clientes, basado en el profesionalismo de nuestros colaboradores y en la excelente calidad de nuestros productos y servicios,

con una visión vanguardista destacándose así en el ámbito empresarial.

1.6 Planteamiento del problema

Cuando se realiza una integración de sistemas la identidad empresarial es una de las cuestiones más importantes, con lo cual cuando se realizan integraciones de

sistemas de software establecidos se tiene que tener en claro cuál identidad será la

dominante, con lo cual surge otro problema y es el adaptar la parte no dominante para que se esta se adecue. En este caso en concreto se realizará una adaptación

de diseño a un software, con el fin de realizar una integración de varios sistemas de la empresa ARP Soluciones. Esto a su vez genera diversas interrogantes como:

¿Qué pasos se van a seguir para poder realizar esta integración?, ¿Por dónde

comenzamos?, ¿Cuáles son los puntos principales que debemos tener en cuenta al momento de realizar dicha integración?, entre otras.

1.7 Propuesta de investigación

Teniendo en cuenta lo anterior descrito en el planteamiento del problema, la

propuesta de investigación, será el dar seguimiento a los cambios que se realizarán en el software en cuestión empezando por el análisis del mismo y el contraste con la

propuesta de diseño además de conocer un poco más a fondo los framework,

plugins y herramientas que se utilizaran en este proceso de adaptación.

Además de ser posible se realizará un seguimiento a la integración de ambos

sistemas de igual manera tomando en cuenta las tecnologías que se utilizaran, los

problemas encontrados y sus soluciones a lo largo de este proceso, todo esto con el fin de tener una documentación útil en caso de encontrar problemas similares en un

futuro

1.8 Objetivos de la investigación

1.8.1.1 Objetivo general

Actualizar por completo el front-end del software de administración escolar para

lograr una integración con el sistema administrativo en un periodo estimado de 4

meses, con el fin de poder comenzar el proceso de integración en el back-end

1.8.1.2 Objetivos particulares

● Adecuar los componentes del front-end del software de administración

escolar para su actualización conforme a la identidad del sistema

administrativo ● Migrar los componentes del front-end de librería gráfica utilizada, descartando

el framework Materialize e integrando la biblioteca multiplataforma Bootstrap

4, usando la plantilla de AdminLTE 3 como modelo.

● Identificar los problemas que surjan durante el proceso de integración para su

consecuente resolución.

1.9 Preguntas de investigación

A partir del planteamiento del problema y las implicaciones técnicas de la propuesta

de investigación, se presentaron algunas preguntas a responder: ¿Qué implicaciones tiene el cambio de diseño en un sistema?*

¿Qué ventaja ofrece cambiar de librería gráfica, pasando de Materialize a

Bootstrap? ¿Cuáles son los posibles problemas que podemos encontrar al cambiar de librería

gráfica?

1.10Hipótesis

Se espera que la integración de los sistemas permite comercializar un producto de

software mucho más completo, con una gran variedad de opciones y adaptabilidad, así como una solución para diversas organizaciones e instituciones, así también la

homogeneización de la identidad del software de administración escolar permitirá

que este sea reconocido como parte de la oferta de ARP Soluciones, mejorando su presentación y posicionamiento en el futuro.

1.11Limitaciones y supuestos

Las limitaciones actuales más agravantes debido al periodo en el que se realizara

este proyecto es el actual estatus de la pandemia de Covid-19 que se sufre a lo largo del país, esto podría afectar el avance del proyecto debido a la necesidad de

adaptar una modalidad de trabajo a distancia, la cual era poco convencional para

ambas partes.

Con respecto a un supuesto se podría mencionar los constantes cambios que tienen las tecnologías, esto enfocándonos a una posible obsolescencia de la librería de

diseño que se optó por utilizar para realizar este proyecto, lo cual puede afectar el

funcionamiento del software a largo plazo.

Además existe el aspecto de la compatibilidad de ambos framework, en primer medida al momento de realizar una migración de esta índole se deberían optar por

framework que sean adaptables a la mayoría de los sistemas, sin embargo cuando se realiza una migración con el fin de poder integrar distintos sistemas es distinto,

debido a que de manera forzada el sistema que se integra tiene que tener las

características gráficas del sistema principal, lo cual “obliga” a utilizar un framework de diseño en especifico y esto puede traer problemas al momento de realizar la

migración. Se considera que este no fue el caso debido a que se utilizaron frameworks y plantillas capaces de adaptarse a la mayoría de los sistemas, dicho

esto aún se debe tener en cuenta este aspecto por los puntos abordados

anteriormente.

1.12 Relevancia

En un producto de cualquier índole, resulta vital que su identidad esté bien definida,

y está a su vez esté bien relacionada con su marca, y sea congruente con lo que su empresa representa, es por esta misma razón que resulta imperativo realizar esta

actualización del diseño del sistema para poder presentar este sistema como uno que pertenece a los sistemas de ARP Soluciones, empresa la cual cuenta con una

identidad bien definida. Esto adquiere una importancia cuando se abordan temas

como la integración la cual requiere que todas las partes involucradas tengan sinergia y puedan trabajar de una buena manera, para que la experiencia del

usuario no se vea mermada por cuestiones técnicas.

Además de que en procesos de integración se requiere que ambas partes tengan

cohesión lo cual teniendo diseños totalmente diferentes esto puede no ser posible y el usuario pudiera llegar a pensar que está fuera del sistema en sí.

Esto otorga a esta migración un matiz distinto con lo cual toma mayor importancia el realizar este proceso de manera exitosa.

2 Capítulo II ¿Qué es el desarrollo web front-end?

Según wikipedia el desarrollo web Front-end consiste en la conversión de datos en una interfaz gráfica para que el usuario pueda ver e interactuar con la información

de forma digital usando HTML, CSS y JavaScript.

Tomando en cuenta esto, podemos decir que el desarrollo web front-end tiene

diversas implicaciones como: ¿Cuales son las tendencias actuales de diseño?, ¿Cuál es la identidad del sistema?, ¿A qué público está enfocado el sistema?. Este

es el principal tema de esta investigación, el entender las implicaciones que la migración de diseño implica y cómo se abordó en la realización de este proyecto.

Esto para que esta experiencia pueda ser guardada y utilizada por diversos

desarrolladores en un futuro, con el fin de tener un “camino a seguir” cuando se encuentren en una situación similar.

2.1 Términos y Definiciones

2.1.1 Base de Datos: Conjuntos de datos interrelacionados entre sí y su fin es servir a uno o varios usuarios, sin redundancias perjudiciales e innecesarias,

es independiente de la aplicación que la utilice y tiene operaciones

específicas. [1]

2.1.2 Base de datos relacionales: Una base de datos relacional es un tipo de base de datos que almacena y proporciona acceso a puntos de datos

relacionados entre sí. Las bases de datos relacionales se basan en el modelo

relacional, una forma intuitiva y directa de representar datos en tablas. En una base de datos relacional, cada fila de la tabla es un registro con un ID

único llamado clave. Las columnas de la tabla contienen atributos de los datos, y cada registro generalmente tiene un valor para cada atributo, lo que

facilita el establecimiento de las relaciones entre los puntos de datos. [1]

2.1.3 MySQL: Es un sistema de manejo de base de datos relacionales de código

abierto que ofrece una gran variedad de herramientas de gestión de base de datos, las cuales son rápidas, confiables y fáciles de utilizar. Además cuenta

con una gran cantidad de software contribuido disponible. Originalmente

estaba hecho para manejar bases de datos grandes de una manera más rápida que las soluciones existentes en su momento y a sido un éxito en

entornos con gran demanda por muchos años. Aunque sigue constantemente en desarrollo, MySQL Server el día de hoy ofrece un gran número de

funciones con una conectividad confiable, rápida y segura. [2]

2.1.4 Integración de aplicaciones: La integración de aplicaciones es el proceso

de lograr que aplicaciones independientes trabajen juntas para producir un conjunto unificado de funcionalidades. [3]

Los desarrolladores de aplicaciones siempre tienen que lograr comunicar disímiles arquitecturas de información y hacer interoperar diferentes

tecnologías, incluyendo sistemas operativos, lenguajes de programación, plataformas de aplicaciones y sistemas gestores de bases de datos. Las

soluciones de integración pueden tener muchas variantes y estar presentes a

varios niveles. [3]

En este trabajo se abordan los desafíos de la integración, criterios a considerar al realizar la integración y cuatro tipos de integración de

aplicaciones. En estos tipos de soluciones presentadas, los patrones de la

solución son el enfoque,no las implementaciones.

2.1.5 Software: Según la RAE el software se define como: Conjunto de programas, instrucciones y reglas informáticas para ejecutar ciertas tareas en una

computadora. Se considera que el software es el equipamiento lógico e

intangible de un sistema informático.[4]

2.1.6 Hardware: Según la RAE el hardware se define como el conjunto de aparatos de una computadora, de una manera más simple esto se refiere a

todas las partes físicas, tangibles de un sistema informático, sus componentes electricos, electronicos, electromecanicos y mecanicos. Un

ejemplo de hardware sería el monitor o pantalla, los cables, el gabinete, disco

duro, memoria RAM, Placa madre, etc.[4]

2.1.7 Desarrollador Back-End: Un desarrollador Backend es un programador que

trabaja del lado del servidor. Permitiendo que todo lo que vemos cuando

interactuamos con una aplicación o sitio web, funcione. Dicho de una forma

más informal, es el que trabaja detrás del escenario, moviendo los hilos para

que todo salga bien. [5]

El Back-end debe formarse como desarrollador de aplicaciones web o como

desarrollador de aplicaciones multiplataforma. Estudiar los diferentes lenguajes de programación que pueden ser necesarios para desarrollar su

trabajo. Según la empresa en la trabaje serán necesarios unos u otros. Por eso, es necesaria una visión global y específica de los diferentes lenguajes.

[5]

2.1.8 Desarrollador Front-End: Un Front-end Developer es aquella persona

encargada de programar el navegador de una web, es decir, es el encargado de traducir las definiciones de diseño y estilo visual realizadas en etapas

previas a códigos HTML semántico. Es una de las piezas fundamentales en un proyecto digital. [6]

● Principalmente, las funciones de un Front-end Developer serán:

● Traducir el diseño de un sitio a código HTML y CSS. ● Estructurar el contenido semánticamente

● Asegurar la accesibilidad ● Controlar tipografías, plantillas, formas del diseño y la interactividad.

● Programar, cambiar y mantener un sitio web.

● Adaptar el diseño de una web a diversos dispositivos y navegadores. ● Crear herramientas que mejoren la interacción entre usuario y web.

● Usar APIs para conectar la web con servicios y sistemas.

Aunque normalmente a un Front-end Developer se le asocien principios de diseño y de estructura de páginas web, como buen programador que es debe

ser consciente que su trabajo se realizará en el lado cliente, en muchos casos en el navegador. Pero aún así, esta persona ha de tener

conocimientos y tener en cuenta la usabilidad, legibilidad de la web o app, el

diseño y la estructura de páginas web y aplicaciones para procurar que el usuario pueda tener una experiencia de 10.

2.1.9 AJAX: Proviene del inglés Asynchronous JavaScript And XML (JavaScript y

XML con ejecución asíncrona). Al fin y al cabo AJAX es una forma de

desarrollo o programación de aplicaciones web que combina: - Una presentación basada en los estándares XHTML y CSS - Utiliza el DOM para

interactuar con la página web - Para el intercambio de datos se basa en XML y XSLT - Solicita datos a un servidor de forma asíncrona utilizando

XMLHttpRequest - Junta todo y lo presenta al usuario utilizando JavaScript.

[7]

2.1.10 CGI: Common Gateway Interface. Es un interfaz para que programas

externos (pasarelas) puedan funcionar bajo un servidor de información.

Actualmente, los servidores de información soportados son servidores HTTP (hypertext Transfer Protocol). Se trata de una interfaz escrita en un lenguaje

de programación (PERL, C, C++, Visual Basic, etc) y posteriormente ejecutada o interpretada por un servidor con la finalidad de contestar a

pedidos del usuario, el cual la visualiza desde una computadora con una

aplicación cliente; casi siempre desde la WWW. Esta interfaz permite obtener los resultados pedidos, como los que resultan al consultar una base de datos;

y está formada por ventanas, botones, menús e iconos, entre otros

elementos. [7]

2.1.11 CMS: Son las siglas en inglés de Content Management System, se trata de

un Sistema de gestión de contenidos que permite la creación y administración

de contenidos en páginas web. Consiste en una interfaz que controla una o

varias bases de datos donde se aloja el contenido del sitio. El sistema

permite manejar de manera independiente el contenido y el diseño.[7]

2.1.12 CSS: Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un

lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C

(World Wide Web Consortium) es el encargado de formular la especificación

de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es

separar la estructura de un documento de su presentación. [7]

2.1.13 DOM: Document Object Model o DOM es el API que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo

estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los

programas pueden acceder y modificar el contenido, estructura y estilo de los

documentos HTML y XML, que es para lo que se diseñó principalmente [7]

2.1.14 UI (User Interface): La interfaz de usuarios es el conjunto de elementos que ve la persona que visita tu página Web, desde los colores hasta los botones y

el contenido. La idea es que la interfaz sea amigable con el usuario, incluso que sea atractiva y que invite a navegar. De la necesidad de una buena

interfaz es que se genera la importancia del trabajo de los diseñadores Web.

[7]

2.1.15 Javascript: Un lenguaje de programación que permite añadir ciertas

funciones a las páginas web, e incluso alterar la manera en que se ven

algunos elementos dadas ciertas condiciones (ej. reducir el tamaño de la

cabecera al hacer scroll hacia abajo). [7]

2.1.16 jQuery: Es una librería de Javascript que permite manipular HTML, eventos,

animaciones y AJAX con mucha más facilidad, añadiendo atajos versátiles para que los desarrolladores puedan realizar estas acciones con mayor

facilidad. [8]

2.1.17 Script: Un script es una porción de código que es interpretado por los

navegadores para realizar dinámica una página web. Inicialmente hubieron

diversos lenguajes de script como Active X, DHTML y Javascript, aunque finalmente el predominio del uso de Javascript en los navegadores es muy

superior al resto ya que permite una mayor compatibilidad con los

navegadores web.[7]

2.1.18 HTML: El lenguaje de marcado de hipertexto es el componente básico de la

Web. Define el significado y la estructura del contenido web. Además de

HTML, se utilizan otras tecnologías generalmente para describir la apariencia/presentación de una página web (CSS) o la

funcionalidad/comportamiento."Hipertexto" se refiere a enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web.

Los enlaces son un aspecto fundamental de la Web. Al cargar contenido en

Internet y vincularlo a páginas creadas por otras personas. [7]

2.1.19 Sass: Sass es un lenguaje de hojas de estilo compilado en CSS. Este

permite usar variables, reglas anidadas, mixins, funciones y más todo con

una sintaxis totalmente compatible con CSS. Sass ayuda a mantener las hojas de estilo grandes bien organizadas y facilita compartir el diseño dentro

y entre proyectos. [9]

2.1.20 Framework: En el desarrollo de Software, un framework es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o

módulos de software concretos, en base a la cual otro proyecto de software

puede ser organizado y desarrollado. Típicamente, puede incluir soporte de programas, librerías y un lenguaje interpretado entre otros programas para

ayudar a desarrollar y unir los diferentes componentes de un proyecto. [1]

2.1.21 Data Binding: Es el proceso de establecer una conexión entre el interfaz de la aplicación con los datos que esta muestra, si el enlace tiene la

configuración correcta y la información provee las notificaciones apropiadas, cuando la información cambie de valor, el elemento que está unido a la

información cambiará su valor automáticamente. [10]

2.1.22 Helpers: Los helpers son una herramienta para generar código HTML o de

cualquier otra índole y comúnmente son utilizados para generar bloques de código que se repiten múltiples veces al rededor de nuestra aplicación o para

definir funciones las cuales de igual manera serán utilizadas distintas veces

en diferentes partes de nuestra aplicación. [7]

2.1.23 CSS Grid Layout: El CSS Grid Layout contiene las funciones de diseño

dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por

permitir dividir una página en áreas o regiones principales, por definir la

relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML. Al igual que las tablas, el grid layout

permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con

las tablas. [7]

2.1.24 React: Es una librería Javascript focalizada en el desarrollo de interfaces de usuario. Así se define la propia librería y evidentemente, esa es su principal

área de trabajo. Sin embargo, lo cierto es que en React encontramos un

excelente aliado para hacer todo tipo de aplicaciones web, SPA (Single Page Application) o incluso aplicaciones para móviles. Para ello, alrededor de

React existe un completo ecosistema de módulos, herramientas y componentes capaces de ayudar al desarrollador a cubrir objetivos

avanzados con relativamente poco esfuerzo. [11]

2.1.25 API: Una API es un conjunto de definiciones y protocolos que se utiliza para

desarrollar e integrar el software de las aplicaciones. API significa interfaz de programación de aplicaciones. Las API permiten que sus productos y

servicios se comuniquen con otros, sin necesidad de saber cómo están implementados. Esto simplifica el desarrollo de las aplicaciones y permite

ahorrar tiempo y dinero. Las API le otorgan flexibilidad; simplifican el diseño,

la administración y el uso de las aplicaciones, y proporcionan oportunidades de innovación, lo cual es ideal al momento de diseñar herramientas y

productos nuevos (o de gestionar los actuales). [7]

2.1.26 SPA (Single-page application): Es una implementación de aplicaciones web que solo cargan un solo documento web, en el cual se actualiza el contenido

de dicho documento mediante Javascript APIs como XMLHttpRequest o

Fetch cuando se necesite mostrar diferente contenido. [7]

2.1.27 Fetch API: proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee

un método global fetch() que proporciona una forma fácil y lógica de obtener

recursos de forma asíncrona por la red. [7]

2.1.28 XMLHttpRequest: es un objeto JavaScript que fue diseñado por Microsoft y

adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la

W3C. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa. Una página web puede actualizar sólo

una parte de la página sin interrumpir lo que el usuario está haciendo.

XMLHttpRequest es ampliamente usado en la programación AJAX. [7]

2.1.29 Plugins: Los plugins (o plug-ins) son pequeños fragmentos de software que

interactúan con el navegador para proporcionar algunas funciones que en la mayoría de los casos son muy específicas. Ejemplos típicos de plugins son

los usados para mostrar los distintos formatos gráficos, o para reproducir

ficheros multimedia. Los plugins son ligeramente diferentes de las

extensiones, que modifican o se añaden a funcionalidades ya existentes. [7]

2.1.30 CSS layout mode: Un modo de diseño CSS(CSS layout mode), a veces

simplemente llamado "layout", es un algoritmo que determina la posición y

tamaño de cajas basado en la forma en la que interactúan con sus

(elementos) hermanos y padres [7]. Hay varios de ellos:

● El block layout, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de flotar(float) elementos o distribuirlos en múltiples columnas.

● El inline layout, diseñado para presentar texto.

● El table layout, diseñado para presentar tablas.

● El positioned layout, diseñado para posicionar elementos sin demasiada interacción con otros elementos.

● El flexible box layout, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.

● El grid layout, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).

2.1.31 Flexbox layout: El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método

que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Cuando describimos a flexbox como

unidimensional destacamos el hecho que flexbox maneja el layout en una

sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla

columnas y filas a la vez [7].

2.1.32 Grid layout: contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños

diferentes. También se destaca por permitir dividir una página en áreas o

regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML [7].

Al igual que las tablas, el grid layout permite a un autor alinear elementos en

columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los

elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superponen, de forma similar a los elementos

posicionados en CSS [7].

2.1.33 rem: Es una medida la cual toma el tamaño del elemento raíz a diferencia del

em que toma el tamaño del elemento padre [7].

2.1.34 pixeles: Un pixel puede definirse como la más pequeña de las unidades

homogéneas en color que componen una imagen de tipo digital. Al ampliar

una de estas imágenes a través de un zoom, es posible observar los píxeles que permiten la creación de la imagen. Ante la vista se presentan como

pequeños cuadrados o rectángulos en blanco, negro o matices de gris [7].

2.1.35 media queries: Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo

de dispositivo (como una impresora o una pantalla) o de características y

parámetros específicos (como la resolución de la pantalla o el ancho del

viewport del navegador) [7].

Se utilizan para:

● Aplicar estilos condicionales con las reglas-at @media e @import de CSS.

● Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML.

● Testear y monitorizar los estados de los medios usando los métodos

de javascript Window.matchMedia() y MediaQueryList.addListener().

2.1.36 Metodología BEM: BEM (Block, Element, Modifier o Bloque, Elemento,

Modificador) es una metodología ágil de desarrollo basada en componentes.

Fue creada por la empresa Yandex para desarrollar sitios en poco tiempo y

con un soporte de largo plazo.

El objetivo final de BEM es dividir la interfaz de usuario en bloques

independientes para crear componentes escalables y reutilizables. Propone un estilo descriptivo para nombrar cada una de las clases a utilizar,

permitiendo así crear una estructura de código consistente [12].

2.1.37 htaccess: Los ficheros .htaccess (o "ficheros de configuración distribuida") facilitan una forma de realizar cambios en la configuración en contexto

directorio. Un fichero, que contiene una o más directivas, se coloca en un

documento específico de un directorio, y estas directivas aplican a ese

directorio y todos sus subdirectorios [1].

2.1.38 Función (informática): En la informática, más precisamente en los lenguajes

de programación, una función es un tipo de subalgoritmo que describe una secuencia de órdenes. Estas órdenes cumplen con una tarea específica de

una aplicación más grande [1].

2.1.39 Mimetizar: Según la RAE es imitar o hacer algo según el estilo de otro [4], en

el contexto de este documento hace referencia a realizar los mismos cambios en una parte y que en la otra.

2.1.40 Cordova: Apache Cordova es un framework de desarrollo móvil, este te

permite el uso de tecnologías con estándares web (HTML5, CSS3 y Javascript) para el desarrollo multiplataforma de aplicaciones que se ejecuten

mediante wrappers los cuales tienen como objetivo a cada plataforma y depende de estándares que obedecen enlaces API a cada uno de los

dispositivos con dichos sensores, datos, estado de red, etc [13].

Apache Cordova se recomienda utilizar a:

● Desarrolladores móviles que quieran extender las aplicaciones a más de una plataforma, sin la necesidad de realizar re-implementaciones a

cada uno de los lenguajes de las distintas plataformas.

● Desarrolladores web que quieran lanzar aplicaciones web

empaquetadas para su distribución en diferentes portales app store.

● Desarrolladores móviles interesados en mezclar componentes de

aplicaciones nativas con WebView que puedan tener acceso a las API

de nivel de dispositivo. o si quieres desarrollar plugins de interfaces entre lo nativo y los componentes WebView.

2.1.41 Wrappers: En lenguajes de programación como JavaScript, un wrapper o

envoltorio es una función que llama a una o varias funciones, unas veces únicamente por convenio y otras para adaptarlas con el objetivo de hacer una

tarea ligeramente diferente [7].

Por ejemplo, las librerías SDK de AWS son un ejemplo de wrappers.

2.1.42 Material Design: Material es un sistema de diseño creado por Google para ayudar a los equipos a construir experiencias digitales de mayor calidad para

Android, iOS, Flutter y la web [14].

Este incluye componentes que son construidos en bloques interactivos para crear interfaces de usuario y estos incluyen un sistema de estatus en ellos

para concentrar la comunicación, selección, activación, errores, voltear,

presionar, arrastrar y deshabilitar, estos componentes necesitan [14]:

● Monitores, para organizar y colocar el contenido usando componentes como; cartas, listas y hojas.

● Navegación, permitiendo a los usuarios moverse en todo el producto

utilizando componentes como “navigation drawers” y ventanas

● Acciones, estas permiten a los usuarios realizar tareas utilizando

componentes como el botón de acción flotante

● Entrada: permite que los usuarios ingresen información y realicen

elecciones utilizando componentes como cajas de texto, chips y

controles de selección.

● Comunicación, Alertando la información clave de los usuarios y

mensajes utilizando componentes como snackbars, estandartes y

burbujas de diálogo.

2.1.43 Scripts (informática): Se denomina script a una serie de mandos que se

almacenan dentro de un archivo de texto y los cuales se caracterizan por

presentar un tamaño muy pequeño, que además de ello suelen ejecutarse en

grupos por medio de un intérprete en tiempo real [15].

El uso de los script es muy variado como es el caso de que se requiera algún

tipo de interacción con el sistema operativo o con los usuarios, también para

servir como puente, entre las diversas combinaciones de componentes.

En el mundo de la informática los script son muy utilizados ya que gracias a

ellos es posible programar ciertas tareas para que se ejecuten de forma

automática, solo con la creación de utilidades muy simples.

2.1.44 World Wide Web (Web): World Wide Web, literalmente telaraña de alcance

mundial, es un término usado en informática cuya traducción podría ser Red

Global Mundial o "Red de Amplitud Mundial"; es un sistema de documentos de hipertexto o hipermedios enlazados y accesibles a través de Internet. [15].

La Web fue creada alrededor de 1989 por el inglés Tim Berners-Lee y el

belga Robert Cailliau mientras trabajaban en la Organización Europea para la Investigación Nuclear (CERN) en Ginebra, Suiza, y publicada en 1992. Desde

entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web (como los lenguajes de marcado con los que se crean las

páginas web), y en los últimos años ha abogado por su visión de una Web

Semántica [15].

2.2 Diferentes framework de diseño web

2.2.1 Boostrap

 Fig 2.0 Página oficial de “Boostrap” [16]

Si bien Boostrap es una biblioteca multiplataforma, también funciona como framework de diseño, el cual tiene infinidad de variantes alrededor del mundo

lo cual lo hace uno de los principales referentes al momento de realizar un trabajo de diseño web.

Originalmente llamado Blueprint fue diseñado por Mark Otto y Jacob Thornton de Twitter Bootstrap es un conjunto de herramientas de código

abierto 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 adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end. Este es uno de los framework de diseño más

populares alrededor del mundo con un diseño rápido, personalizable y

responsivo, el cual hace poco actualice a la versión 4 el cual realizó cambios importantes a su arquitectura, el primero siendo la migración a Sass y el

cambio al diseño CSS flexbox [16].

2.2.2 Materialize

Fig 2.1 Logo del framework “Materialize” [17]

Se basa en el diseño creado por Google, Material Design es un lenguaje de

diseño que combina los principios básicos de diseño en conjunto con la innovación y tecnología. Materialize creado por Alvin Chang, Alan Chang,

Alex Mark y Kevin Louie se apropia de esos principios y los transforma en un

framework de diseño capaz desarrollar sistemas que permitan unificar la experiencia del usuario a través de todos sus productos en cualquier

plataforma y sus principios son [17]: ● Material se considera como una metáfora, la cual define la relación

entre el espacio y el movimiento, la idea es que la tecnología sea

inspirada por el papel y la tinta y sea utilizada para facilitar la creatividad e innovación.

● El movimiento provee sentido, el movimiento permite que el usuario dibuje en paralelo entre lo que puede ver en la pantalla y en la

realidad. Esto proveyendo tanto la retroalimentación y la familiaridad,

esto permite que el usuario se inmersa en sí mismo en tecnología desconocida.

2.2.3 Material-UI

 Fig 2.2 Logo del framework “Material-UI” [18]

Este framework se basa en el estilo de diseño de Material Design, el cual comenzó en 2014 con la intención de unificar React y Material Design, al dia

de hoy Material-UI a crecido para convertirse en uno de los framework de

diseño basados en librerías React UI más populares alrededor del mundo, respaldado por más de 1 millón de desarrolladores en más de 180 países

[18].

La visión de este framework de diseño es: ● Entregar componentes de React que se adecuen a las necesidades a

las necesidades de los desarrolladores

● Ser customizable ● Ser compatible con múltiples exploradores

● Promover el gusto por desarrollar, el sentido de comunidad y un entorno donde desarrolladores nuevos y experimentados puedan

ayudarse los unos a los otros.

2.2.4 Skeleton

Fig 2.3 Logo del framework “Skeleton” [19]

Skeleton es un framework de aplicaciones web y móviles el cual tiene como principales características la ligereza de sus librerías, además de no

necesitar compilarse para ser utilizado, está enfocado a proyectos pequeños debido a la limitada cantidad de elementos HTML que tiene [19].

Utilizando un sistema grid de 12 columnas que encoge el explorador o el dispositivo a pequeños tamaños. La anchura máxima puede ser cambiada

por solo una línea de CSS y todas las columnas cambian de tamaño acorde a este cambio. La sintaxis de este framework es bastante simple y hace que la

codificación responsiva sea mucho más fácil [19].

Además cuenta con una tipografía es Raleway proveída por Google basada

en rems haciendo que el tamaño de las fuentes y la relación de espacio pueda ser responsiva basada en una única propiedad de html. Skeleton

nunca cambia el tamaño de la fuente pero en caso de que se necesite para

su proyecto. Todas las medidas tienen como base 10 aproximadamente siendo una relación 1.0rem = 50px [19].

Skeleton utilizar media queries funciona con el grid escalable, pero además

tiene una lista de queries convenientes para estilizar tu sitio en todos los

dispositivos. Los queries tienen un modelo de mobile-first [19].

2.2.5 Foundation

Fig 2.4 Logo del framework “Foundation” [20]

Foundation surgió como un proyecto de ZURB para desarrollar código de interfaz de usuario más rápidamente alrededor de octubre de 2011 ZURB

libero Foundation 2.0 como código abierto bajo una licencia de MIT license en

junio de 2012 se dio a conocer Foundation 3.0, en febrero de 2013 salió a público Foundation 4.0 y en noviembre de 2013 la versión de Foundation 5.0

fue puesta en marcha [20].

Un framework para cualquier dispositivo, medio y accesibilidad. Foundation

es una familia de frameworks de diseño front-end el cual es modular y

consiste en una serie de hojas de estilo Css que implementan los distintos

componentes de la caja de herramientas que hacen fácil el diseño responsivo de sitios web, aplicaciones y correos electrónicos que luzcan sorprendentes.

Foundation es semántico, leíble, flexible y completamente personalizable. Además de tener múltiples plantillas de diseño, se van agregando nuevas

plantillas y recursos de buena calidad. Este es uno de los framework más

populares alrededor del mundo gracias a la cantidad de contribuyentes que aportan contenido y soluciones a este framework.

Foundation proporciona una cuadrícula responsiva y incluye componentes

de interfaz de usuario HTML y CSS, distintos elementos como botones,

formularios, barras de navegación, tipografía entre muchos otros Además de tener un rubro específico para correos electrónicos y el haber sido

desarrollado incluyendo Sass desde un inicio esto otorgó a los desarrolladores una manera más amable de ir desarrollando buenas

prácticas de programación [20].

2.2.6 Initializr

 Fig 2.5 Logo del framework “Initializr” [21]

Initializr es un framework de diseño que utiliza Boostrap 3.3.1, H5BP 5.0 y

JQuery el cual está enfocado en generar plantillas de diseño basadas en

HTML5 Boilerplate lo cual permite que se pueda elegir con libertad qué partes

se quieren dejar y que partes no se necesitan.Además tiene una plantilla responsiva para comenzar proyectos en cuestión de segundos, la cual hace

honor al punto fuerte de este framework logrando comenzar un proyecto en cuestión de minutos el cual es fácilmente* personalizable [21].

Si bien este framework utiliza en su mayoría características de HTML5

Boilerplate se concentra en poder iniciar proyectos de una manera rápida y

sencilla, evitando el uso de plantillas demasiado pesadas y elementos con código difícil de personalizar.

2.2.7 Amazium

 Fig 2.6 Página oficial de “Amazium” [22]

Amazium 4 fue creado para hacer que la construcción de prototipos sea lo

más sencilla y rápida posible. Este incluye muchos componentes modulares de Typography hasta Forms estos permiten que te concentres en las cosas

más importantes como el diseño. Teniendo como características principales [22]:

● El uso de SASS & Flexbox, esto permite una manipulación de CSS de

una manera más fácil y rápida.

● Grid personalizable, en este se pueden asignar los parámetros que uno quiera y esto da la opción de utilizar la cantidad de columnas y el

tamaño que uno desee

● Comienzo rápido, gracias a que Amazium sigue la metodología BEM, la cual significa que se puedan crear componentes de interfaz

extensibles y reutilizables para que puedan ser utilizados por una gran

cantidad de proyectos lo cual reduce el costo y el tiempo de desarrollo.

● Usa el estilo de primero-móviles el cual empieza por estilizar los

elementos a partir del diseño móvil, esto significa menos

sobreescrituras de código lo cual se traduce a hojas de estilo menos

complicadas.

● Tamaño pequeño, el tamaño total del archivo que contiene todos los

componentes y clases pesan alrededor de 9 KB.

● Código base simple, de igual manera gracias a la metodología BEM todos los estilos en Amazium pueden ser fácilmente sobreescritos de

ser necesario.

2.2.8 StackLayout

 Fig 2.7 Logo de el framework “Stacklayout” [23]

Uno de los factores que influenciaron el desarrollo del sistema StackLayout era el reto para encontrar una mejor solución para el diseño de antaño contra

el paradigma de contenido. Esto dio lugar al desarrollo de un sistema de plantillas CSS suficientemente flexible para atender a cualquier layout y

resolver suficientes problemas para ser usado como un framework de diseño

confiable para cualquier proyecto. Creado por Campbell McGuiness es un framework el cual tiene como objetivo

poder terminar con los problemas de los sistemas de CSS Grid Layout existentes haciendo uso de componentes inline-block [23].

Este framework es usado por empresas como: ● Decal CMS

● Working Software ● Matthouse Theatre

2.2.9 HTML5 Boilerplate

 Fig 2.8 Página principal de “HTML5 Boilerplate” [24]

HTML5 Boilerplate es un framework de diseño el cual a diferencia de otros framework incluye una forma revolucionaria para detectar si un explorador

puede ejecutar ciertas características que pueda tener nuestra aplicación web, esto es Modernizr, además de esto HTML5 Boilerplate cuenta con un

alto rendimiento, helpers y Normalize.css, todo esto hace de este framework

uno bastante popular y utilizado por grandes empresas como [24]: ● Microsoft

● NASA ● Nike

● ITV News

● Creative Commons ● Australia Post

● Entre otras Esto por ser un framework robusto, rápido y profesional que incluye ficheros

.htaccess, de configuración de Apache que establece reglas de caché para

obtener un mejor rendimiento [24]. ● Algunas de las características de este framework son:.

● Multinavegador (también IE6). ● Preparado para HTML5.

● Optimizaciones para la visualización en navegadores para móviles.

● Clases específicas para IE, que facilitan un mayor control multi-navegador.

● Perfiles Javascript en función del navegador.

2.2.10 Kickstart

 Fig 2.9 Logo del framework “Kickstart” [25]

Kickstart comenzó como Kickstrap el cual era una herramienta extendida de

Boostrap y su objetivo era crear una capa más donde los usuarios pudieran crear sus propias personalizaciones y agregar extensiones de la comunidad,

esta capa está separada de Boostrap permitiendo que Boostrap en este

actualizado sin afectar los proyectos de personalización [25]. Este framework en si no se considera como un framework de diseño si no

como una librería CSS, la cual está enfocada en ser lo más ligera posible a la vez que es versátil y completa en cuestion de elementos útiles que provee, el

punto de Kickstart es su habilidad para extenderse y la poca cantidad de

recursos que consume su uso, esto ayudado principalmente por no utilizar JQuery [25].

2.2.11 MontageJS

 Fig 2.10 Logo del framework “MontageJS” [26]

MontageJS usa patrones de diseño y principios de software probados para

crear y diseñar proyectos y mejorar la experiencia de usuario con interacciones y experiencias de alta calidad, algunas cosas que diferencian a

este Framework de diseño de los demás son [26]:

Autoría visual y soporte para JS común esto porque MontageJS tiene una

Autoría visual basada en la nube dedicada a crear paginas web interactivas de manera más fácil y eficiente.

FRB (Functional Reactive Bindings) teniendo un two-way Data Binding entre

los componentes, objetos y colecciones. Componentes fácilmente reutilizables esto debido al enfoque modular para

romper complicados problemas en pequeñas partes para ser resueltas mientras que pequeños equipos trabajan juntos en la construcción de la

aplicación de manera simultánea.

Eficiencia y alto rendimiento MontageJS minimiza la alta demanda en el reflujo de layout ayudando a que el front-end sea mejor y eficiente gracias al

uso de ciclos de carga y delegación implícita de eventos, esto además hace que las paginas carguen de manera.

3 Capítulo III 

3.1 Previa a la integración al plan de acción.

En primera instancia se propuso una capacitación a los miembros del equipo

de trabajo, esta capacitación constó de 2 semanas con distintas pruebas, estas pruebas constan en lo siguiente:

● Capacitación 1: Se llevó a cabo una investigación teórica sobre distintos conceptos como; APIs, CodeIgniter, Integración, Mimetización, AJAX, entre

otros, esto para familiarizarse con el entorno de trabajo que se llevaría una

vez entrado al plan de acción.

● Capacitación 2: En esta se propuso la creación de un login con distintos campos como el usuario, contraseña, nombre, apellidos, edad y correo. Estos

datos deberían guardarse en una tabla de una base de datos y se debería utilizar algún tipo de encriptación para las contraseñas, además de

implementar una plantilla de diseño y “limpiarla” con el fin de poder

personalizarla más adelante.

● Capacitación 3: Aqui se realizó una investigación sobre cómo instalar y

utilizar las funciones de Datatable, y se pidió crear una vista para generar

distintas tablas con un mínimo de 100 registros cada una, las cuales tendrían una función de paginado y generador de reportes, además se comenzó a

realizar una investigación de integración entre frameworks de diseño.

● Capacitación 4: Se realizó una reunión en la cual se dio una pequeña plática sobre la migración de los framework de diseño y las posibles implicaciones

que esta tendría, además de una investigación sobre Córdoba un sistema de

desarrollo de aplicaciones móviles basadas en html y css.

● Capacitación 5: Se realizaron prácticas con versiones del sistema

“recortadas” las cuales seguían teniendo gran parte de la funcionalidad

original, esta práctica consistió en realizar la migración de frameworks

manteniendo dicha funcionalidad.

● Capacitación 6: Primera división entre equipos, cada equipo se encargaría de realizar un diseño distinto pero utilizando la plantilla de AdminLTE pero se

tendría cierta libertad en cuestión de posicionamiento de elementos y de uso

de fuentes

● Capacitación 7: Se solicitaron diversas validaciones las cuales eran libres en

cuestión al lenguaje en las cuales desarrollarlas (PHP, Javascript), estas

validaciones se deberían aplicar a las vistas previamente modificadas en capacitaciones anteriores además estas validaciones serian revisadas de

manera minuciosa, debido a que estas podrían ser utilizadas en el sistema

principal.

3.2 Plan de acción.

Para poder realizar el proyecto en cuestión en primera instancia se optó por tener una modalidad de trabajo home office esto debido a que en los tiempos

en los cuales se realizó este proyecto se sufre de la pandemia de Covid-19.

Además de otra modalidad en la cual el equipo de trabajo que consiste de 5

integrantes se dividiría en 2 equipos, un equipo se haría cargo de resolver distintas problemáticas en el sistema actual, esto con el fin de al momento de

realizar la mimetización se pudiera lograr de manera exitosa con la menor cantidad de inconvenientes.

Además de que el sistema en el cual se estaría trabajando estaba en producción lo cual que estaba siendo utilizado por una empresa en cuestión lo

cual requería de un plan de acción capaz de poder satisfacer las necesidades del cliente a la vez que se realizaba el proceso de migración.

El segundo equipo se haría cargo de realizar la migración del framework de diseño en las distintas vistas del sistema, tomando en cuenta que el

funcionamiento de ciertas partes del sistema se vería mermado por el hecho de no contener toda la información que se contenía en el sistema en

producción debido a distintas limitaciones de seguridad.

Hay que tener en cuenta este punto como uno muy importante debido a que las implicaciones de una migración en un sistema en producción son mucho

mayores a un sistema en desarrollo, estas implicaciones se verán reflejadas en puntos siguientes, en los cuales se abordarán de manera más detallada.

Aun así esto se lograra llevar a cabo debido a que principalmente era un migración de framework de diseño y no una migración total.

Este plan de acción seguirá siendo utilizado a lo largo del desarrollo del

proyecto sin cambios notables, en cuestión de rotación de actividades, sin

embargo se tendría planteada la posibilidad de esta rotación de actividades en caso de tener tiempo suficiente para la misma. Esto con el fin de poder recibir

experiencia en ambos rubros, aunque en última instancia no sería del todo necesario debido a que ambos equipos de trabajo se harían cargo de tareas

similares a lo largo del proyecto, llevando a cabo tareas de front-end y

back-end en menor o mayor medida.

Aun así sería importante tener presente que los equipos en su mayor parte no fueron rotados y esto no permitió poder experimentar en primera instancia lo

que implicó realizar las distintas actividades por lo cual los siguientes puntos

serán abordados desde la perspectiva de un integrante del Equipo 1 el cual se encargó de dar soluciones a distintas problemáticas del sistema actual el cual

estuvo involucrado en menor medida en la migración del framework de diseño, aun así se pretende que con la información recopilada a lo largo del desarrollo

del proyecto se pueda tener una conclusión satisfactoria sobre las

implicaciones que se tuvieron a lo largo del desarrollo del proyecto.

3.3 Detalles de la migración de framework

El sistema en el cual se estaría trabajando hace uso de un framework de

diseño basado en material design (materialize), este sería migrado a un framework basado en boostrap (adminLTE), aquí se establecen las primeras

implicaciones estás siendo principalmente la diferencia entre las funcionalidades de ambos framework.

 Fig 3.0 Plantilla de “Materialize ” [14]

 Fig 3.1 Plantilla de “AdminLTE ” [27]

En las figuras anteriores se puede apreciar la diferencia de diseño entre ambos

framework y se puede tener una vaga idea de que dirección se pretende tomar

en el cambio de diseño de la aplicación.

Algunos ejemplos de esto son la manera de manejar formularios entre ambos framework, materialize posee distintas funciones para rellenar los formularios,

además de tener que modificar el comportamiento de distintos elementos

debido a que al momento de abrir algunas vistas estos elementos serian

rellenados con dichas funciones y tendrian que comportarse de maneras especificas al tener información en ellos. Esto en boostrap no pasaba debido a

que está principalmente enfocado en los elementos visuales (front-end) y no en las funcionalidades en sí, en este caso se necesitó recurrir a la construcción

de distintas funciones en PHP y Javascript para seguir teniendo la

funcionalidad de rellenar algunos formularios deshaciéndose de las funciones de materialize que lo hacían en su lugar.

Otro ejemplo notable es el manejo de los modales, boostrap no soporta las

funcionalidad de modales anidados lo cual en materialize es posible debido a

diversos plugins aportados por usuarios de dicho framework, para esto se decidió optar por un enfoque poco ortodoxo y sintetizar modales y vistas, con

el fin de poder mantener la información seccionada y a la vez a la mano del usuario.

Este enfoque fue especialmente gratificante una vez que se logró aplicar con éxito esto permite el ahorro de tiempo de navegación para el usuario a la vez

que mostraba la información de manera más limpia y ordenada lo cual hace que visualmente estas vistas en partículas, en comparación con las anteriores

fueran de más fácil acceso y más cómodas de leer para el usuario.

3.4 Desarrollo

Como se mencionó en los puntos anteriores el desarrollo de la integración

comenzó dividiendo los equipos y trabajando en dichas tareas especificadas,

se tomará nota que el Equipo 1 se dio a la tarea de resolver las distintas problemáticas del sistema actual y el Equipo 2 se dio a la tarea de cambiar el

framework de diseño de las distintas vistas ya existentes.

3.4.1 Actividades del Equipo 1

El Equipo 1 en el cual forme parte se dedicó enteramente a trabajar dichas

problemáticas llegando a arreglar alrededor de un 90% de estos a lo largo de 2 meses de trabajo.

Estas problemáticas se dividieron en cuestiones de back-end y front-end al mismo tiempo pero más enfocadas al back-end, además de algunas

cuestiones de base de datos. A lo largo de este proceso se reportaron diversos inconvenientes en los cuales requirió cambiar por completo diversas funciones

lo cual tomó un tiempo más largo de lo esperado, esto de igual manera afectó

la integración de los trabajos de ambos equipos.

Estas soluciones serán documentadas a lo largo del desarrollo del proyecto, esto con fines de dejar referencias para futuros fines, la documentación no

tendría un estándar específico lo cual podría causar problemas a futuro, esto

es un punto importante a tomar en cuenta debido a que fue una de las flaquezas que se tuvieron a lo largo del desarrollo del proyecto.

Además de resolver problemáticas existentes también se requiere atender las

solicitudes de los clientes para realizar modificaciones y agregar

funcionalidades al sistema, lo cual se tenía previsto hasta cierto punto al inicio del proyecto, esto de igual manera trajo algunas otras implicaciones que

afectaron aún más el tiempo de integración.

3.4.2 Actividades del Equipo 2

El Equipo 2 como se mencionó anteriormente se dedicó a reemplazar el

framework de materialize por el de boostrap, esto en primera instancia se logró realizar de manera exitosa con un paso relativamente rápido, a lo largo de los

meses se lograron migrar alrededor de 40 vistas lo cual se logró a un buen paso.

A lo largo del desarrollo se tuvieron que manejar distintas problemáticas con cuestiones de compatibilidad en este lado debido a que el Equipo 1 estuvo

modificando constantemente funcionalidades las cuales ya se habían logrado migrar de framework de manera exitosa por el Equipo 2.

3.4.3 Mimetización

Esto dio lugar al proceso de mimetización en el cual participa el Equipo 1 con el Equipo 2, haciendo uso de la documentación realizada por el Equipo 1 estos

se encargaron de implementar las soluciones en las distintas vistas modificadas por el Equipo 2, verificando que la funcionalidad quedará igual a la

implementada en el sistema principal.

3.5 Resultados

Si bien se logró un progreso considerable, solo se logró completar la primera parte del proyecto, por ello no se puede considerar esto como un fracaso

debido a que el proyecto en sí está pensado con una duración más larga a la del tiempo disponible para las estadías profesionales (4 meses) la segunda

parte del proyecto se continuará desarrollando en el futuro y se espera poder seguir recopilando información, sin embargo se obtuvieron suficientes avances

como para poder puntualizar las implicaciones de la migración del framework

de diseño, algunas de las más importantes fueron:

➔ Diferencia en el manejo del Layout por parte de ambos framework, en este caso ambos framework contaban con un sistema grid de 12 columnas lo cual

no presentó un problema en primera instancia y esto facilitó en gran medida

el posicionamiento de los elementos en las diferentes vistas.

➔ Entendimiento de las clases en ambos framework, esto se refiere a lograr comprender la semántica lo cual personalmente considero que era bastante

simple, ambos framework tenían clases bastante fáciles de comprender con términos sencillos los cuales de igual manera ayudaron a que la sustitución

de clases entre ambos framework fuese más rápida.

➔ Distintos enfoques de los framework, por esto se entiende que normalmente los framework de diseño web se especializan en diversas áreas, por ejemplo

boostrap se especializa en el diseño responsivo de páginas web y materialize en este caso se especializa en diseños innovadores y diferentes

componentes los cuales interactúan entre sí, a lo cual aquí se pudieron encontrar diferentes problemáticas como se mencionaba anteriormente por

ejemplo el manejo de formularios en materialize implica el uso de

“rellenadores de contenido” que si bien podría realizarse de manera “manual” mediante scripts de javascript no tendría caso debido a que no se estaría

aprovechando las herramientas del framework.

En diversas ocasiones nos topamos con distintos formularios que eran rellenados con estas funciones a lo que se necesito modificar completamente

al momento de realizar la migración a bootstrap, además del manejo de

ventanas entre las vistas para reemplazar modales anidados que se utilizaban, esto debido a que boostrap no soporta estos mismos debido a

ciertas políticas que tiene respecto a ellos.

➔ Conocer límites de los framework, siempre nos vamos a encontrar con que hay cosas que no son posibles de realizar entre los framework y habrá que

encontrar formas de “simular” diferentes funcionalidades o diseños de otros framework, lo cual no es muy conveniente a la hora de realizar migraciones

debido a que esto suele tomar bastante tiempo de realizar.

Sin embargo indudablemente nos encontraremos con estos casos, lo que

podría recomendar para que esto suceda lo menor posible es investigar los framework antes de decidir utilizarlos, esto para asegurarse que estas

situaciones se presenten la menor cantidad de veces posible.

Ahora si bien hasta el momento no se encontraron ejemplos puntuales de estos casos en el desarrollo de este proyecto. Aun así se tomaron en cuenta

y se prepararon medidas para mitigar el retraso que estas pudiesen causar.

➔ Utilizar plantillas facilita las cosas pero también pueden limitarnos en lo que a diseño se refiere, si bien el primera instancia utilizar plantillas para facilitar el

proceso de diseño puede ser de gran utilidad hay que tener en cuenta que algunas plantillas gratuitas no cuentan con suficientes elementos disponibles

lo cual a la larga puede ser contraproducente, en este sentido se recomienda (de ser posible) utilizar plantillas que tengan al menos un 80% de los

elementos que se estén utilizando o que se planeen utilizar en el sistema

antes de realizar la migración.

Se presentaron casos en los cuales la falta de elementos disponibles en la plantilla demoró el accionar del Equipo 2, que se dio a la tarea de buscar

elementos “por fuera” de la plantilla y hacer que estos pudiesen incluirse dentro del diseño de la misma, esto algunas veces causaba que otros

elementos fueran modificados o que los elementos añadidos se vieran fuera

de lugar en comparación con el resto de la plantilla.

A continuación se mostrarán algunas figuras con los resultados de dicha

migración colocando cara a cara el antes y después de la misma, con el fin

de poder apreciar el cambio en la identidad de un sistema al realizar una migración de framework de diseño tómese en cuenta que algunas de estas

figuras están censuradas debido al acuerdo de confidencialidad que se firmó

con la empresa.

Estas pantallas son una pequeña parte del sistema y sirven para demostrar el

cambio de framework que es el punto principal de esta investigación, por lo

cual no se darán detalles sobre el funcionamiento de las mismas y solo se limitara a mostrar el trabajo realizado respecto al cambio de framework de

diseño con el fin de demostrar los resultados del mismo y cumplir el acuerdo

de confidencialidad anteriormente mencionado.

 

Fig 3.2 Dashboard con el sidebar inactivo (actual)

 

Fig 3.3 Dashboard con el sidebar inactivo (migración)

 Fig 3.4 Dashboard con el sidebar activo (actual)

 Fig 3.5 Dashboard con el sidebar activo (migración)

 Fig 3.6 Usuarios sin datos (actual)

 Fig 3.7 Usuarios sin datos (migración)

 Fig 3.8 Usuarios con datos (actual)

 Fig 3.9 Usuarios con datos (migración)

 Fig 3.10 Usuarios agregar nuevo (actual)

 Fig 3.11 Usuarios agregar nuevo (migración)

 Fig 3.12 Empleados principal sin datos (actual)

 Fig 3.13 Empleados principal sin datos (migración)

 Fig 3.14 Empleados principal con datos (actual)

 Fig 3.15 Empleados principal con datos (migración)

 Fig 3.16 Empleados agregar nuevo (actual)

 Fig 3.17 Empleados agregar nuevo pestañas minimizadas (migración)

 Fig 3.18 Empleados agregar nuevo pestañas maximizadas (migración)

 Fig 3.19 Empleados pestaña Empleados (actual)

 Fig 3.20 Empleados pestaña Empleados (migración)

 Fig 3.21 Empleados pestaña datos personales y emergencia (actual)

 Fig 3.22 Empleados pestaña datos personales (migración)

 Fig 3.23 Empleados pestaña emergencia (migración)

 Fig 3.24 Empleados pestaña experiencia laboral sin datos (actual)

 Fig 3.25 Empleados pestaña experiencia laboral sin datos (migración)

 Fig 3.26 Empleados pestaña experiencia laboral con datos (actual)

 Fig 3.27 Empleados pestaña experiencia laboral con datos (migración)

 Fig 3.28 Empleados pestaña experiencia laboral nueva (actual)

 Fig 3.29 Empleados pestaña experiencia laboral nueva (migración)

 Fig 3.30 Empleados pestaña cursos/reconocimientos sin datos (actual)

 Fig 3.31 Empleados pestaña cursos/reconocimientos sin datos (migración)

Fig 3.32 Empleados pestaña cursos/reconocimientos con datos (actual)

Fig 3.33 Empleados pestaña cursos/reconocimientos con datos (migración)

Fig 3.34 Empleados pestaña cursos/reconocimientos con nuevos (actual)

Fig 3.35 Empleados pestaña cursos/reconocimientos con nuevos (migración)

3.6 Conclusión

Cuando se tiene un sistema ya implementado se torna muy difícil realizar modificaciones y añadir funcionalidades si no se tiene un enfoque de desarrollo

correcto, esto puede derivar en problemas de versiones y pérdida de

funcionalidad.

Entonces para evitar estos problemas se optó por utilizar diferentes enfoques uno de los cuales es la integración de aplicaciones que es una práctica muy

común entre las empresas hoy en día, esto debido a las facilidades que esta

aporta, pudiendo realizar peticiones a distintas APIs lo que lo hace un método muy atractivo para ahorrar el desarrollo de funcionalidades.

Para que este enfoque tenga éxito es necesario tener una gestión cercana y

un manejo de contratiempos extenso, debido a que la probabilidad de que estos sucedan depende de lo robusta que sea la integración y en el caso de

migraciones de framework de diseño depende mucho de la cantidad de

herramientas que el nuevo framework que se va a adoptar posee.

Aun con toda esta incertidumbre la migración de framework de diseño es cada vez más sencilla de realizar por el hecho de que estos framework se hacen

cada vez más completos y compatibles los unos con los otros, además de

herramientas como el Sass, que hace que el manejo de hojas de estilo sea mucho más rápido y versátil, esta práctica puede ser mucho más viable en un

futuro no muy lejano.

Además de que las tendencias de diseño cambian constantemente esto

también alienta a los sistemas a evolucionar y buscar que sea lo mejor posible cada día estando a la vanguardia en comparación con sistemas que utilizan

frameworks de diseño obsoletos.

4 Bibliografía

[1] Ecured.cu. 2020. Framework - Ecured. [online] Available at:

<https://www.ecured.cu/Framework> [Accessed 24 November 2020].

[2] Dev.mysql.com. 2020. Mysql :: Mysql 8.0 Reference Manual :: 1.2.1 What Is Mysql?. [online] Available at:

<https://dev.mysql.com/doc/refman/8.0/en/what-is-mysql.html> [Accessed 24

November 2020].

[3]O. Vázquez Ruiz and O. Jordán Enriquez, "INTEGRACIÓN DE APLICACIONES EN LAS EMPRESAS", www.researchgate.net, 2006. [Online].

Available:

https://www.researchgate.net/publication/49594838_INTEGRACION_DE_APLICACIONES_EN_LAS_EMPRESAS. [Accessed: 20- Nov- 2020].

[4] ASALE, R., 2020. Diccionario De La Lengua Española | Edición Del

Tricentenario. [online] «Diccionario de la lengua española» - Edición del

Tricentenario. Available at: <https://dle.rae.es/> [Accessed 24 November 2020].

[5] García, Y., 2020. ¿Qué Es Un Front End Developer? Funciones, Habilidades Y Desafíos. [online] Thinking for Innovation. Available at:

<https://www.iebschool.com/blog/funciones-front-end-developer-analitica-usabil

idad/#:~:text=Un%20Front-end%20Developer%20es,previas%20a%20códigos%20HTML%20semántico.> [Accessed 24 November 2020].

[6] FP Online. 2020. ¿Qué Es Un Backend Developer? | FP Online. [online]

Available at: <https://fp.uoc.fje.edu/blog/que-es-un-backend-developer/>

[Accessed 24 November 2020].

[7], Glossary of Terms MDN Web Docs, 2020. [Online]. Available: https://developer.mozilla.org/en-US/docs/Glossary [Accessed 24 November

2020].

[8] js.foundation, J., 2020. Jquery. [online] Jquery.com. Available at:

<https://jquery.com> [Accessed 24 November 2020].

[9] Sass-lang.com. 2020. Sass: Documentation. [online] Available at:

<https://sass-lang.com/documentation> [Accessed 24 November 2020].

[10] Docs.microsoft.com. 2020. Data Binding Overview - WPF .NET. [online] Available at:

<https://docs.microsoft.com/en-us/dotnet/desktop/wpf/data/data-binding-overvie

w?view=netdesktop-5.0> [Accessed 24 November 2020].

[11] Desarrolloweb.com. 2020. Qué Es React. Por Qué Usar React. [online] Available at:

<https://desarrolloweb.com/articulos/que-es-react-motivos-uso.html>

[Accessed 24 November 2020].

[12] N. Ayancán, "Introducción a la metodología BEM para desarrollo front end | IDA Chile", Blog IDA Chile | Estrategia para el éxito de tu negocio, 2020.

[Online]. Available:

https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/. [Accessed: 09- Dec- 2020].

[13] Cordova.apache.org. 2020. Architectural Overview Of Cordova Platform -

Apache Cordova. [online] Available at:

<https://cordova.apache.org/docs/en/latest/guide/overview/> [Accessed 24 November 2020].

[14] "Material Design", Material Design, 2020. [Online]. Available:

https://material.io/design/introduction. [Accessed: 09- Dec- 2020].

[15] "¿Qué es Script? » Su Definición y Significado [2020]", Concepto de -

Definición de, 2020. [Online]. Available: https://conceptodefinicion.de/script/. [Accessed: 09- Dec- 2020].

[16] Mark Otto, a., 2020. About. [online] Getbootstrap.com. Available at:

<https://getbootstrap.com/docs/4.1/about/overview/> [Accessed 24 November 2020].

[17] Materializecss.com. 2020. Documentation - Materialize. [online] Available at: <https://materializecss.com> [Accessed 24 November 2020].

[18] Material-ui.com. 2020. Nuestra Visión - Material-UI. [online] Available at:

<https://material-ui.com/es/discover-more/vision/> [Accessed 24 November

2020].

[19] Getskeleton.com. 2020. Skeleton: Responsive CSS Boilerplate. [online] Available at: <http://getskeleton.com> [Accessed 24 November 2020].

[20] Get.foundation. 2020. Foundation Documentation | Foundation. [online] Available at: <https://get.foundation/frameworks-docs.html> [Accessed 24

November 2020].

[21] Verrecchia, J., 2020. Initializr - Start An HTML5 Boilerplate Project In 15

Seconds!. [online] Initializr.com. Available at: <http://www.initializr.com> [Accessed 24 November 2020].

[22] Amazium.co.uk. 2020. Amazium Site. [online] Available at:

<https://www.amazium.co.uk> [Accessed 24 November 2020].

[23] Stacklayout.com. 2020. Philosophy | Stacklayout - A Flexible Width,

Component Based CSS Layout System. [online] Available at: <http://www.stacklayout.com/philosophy.html> [Accessed 24 November 2020].

[24] Html5boilerplate.com. 2020. HTML5 Boilerplate: The Web’S Most Popular Front-End Template. [online] Available at: <https://html5boilerplate.com>

[Accessed 24 November 2020].

[25] Getkickstart.com. 2020. Kickstart - About. [online] Available at: <http://getkickstart.com/about/> [Accessed 24 November 2020].

[26] Montagejs.org. 2020. 5 Things About Montagejs Framework – Montagejs.

[online] Available at: <http://montagejs.org/things-about-montagejs-framework>

[Accessed 24 November 2020].

[27] "Free Bootstrap Admin Template | AdminLTE.IO", Adminlte.io, 2020. [Online]. Available: https://adminlte.io. [Accessed: 09- Dec- 2020].