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].