1Universidad Técnica de Manabí, Portoviejo – Ecuador.

* Autor para correspondencia

Comó citar el artículo: Chávez Calderón, J.X., Zambrano Romero, W.D., Cedeño Palma, E.A., Zambrano Zambrano, D.M. & Cotera Ramírez, G.A. (2022). El Frontend: Diseño web adaptativo y diseño web responsivo para el desarrollo de aplicaciones web. Informática y Sistemas: Revista de Tecnologías de la Informática y las Comunicaciones, 6(1), 1-11. DOI: https://doi.org/10.33936/isrtic.v6i1.4625

Enviado: 26/04/2022

Aceptado: 04/06/2022

Publicado: 09/07/2022

Autores

* Jhonny Xavier Chávez Calderón

Walter Daniel Zambrano Romero

Emilio Antonio Cedeño Palma

Dannyll Michellc Zambrano Zambrano

Gabriel Agustín Cotera Ramírez

El Frontend. Diseño Web Adaptativo y Diseño Web Responsivo para el desarrollo de aplicaciones web

The Frontend. Adaptive Web Design and Responsive Web Design for Web Application Development

Resumen

El desarrollo web ha evolucionado a gran escala, el presente artículo realiza una comparativa entre dos importantes marcos de diseño que son indispensables para el desarrollo de interfaces web, como son el marco responsivo y adaptativo, destacando sus principales ventajas y diferencias a través del método experimental, propiamente enfocado en el desarrollo de un portal web, que se desarrollará para mostrar información sobre la cantidad de investigaciones científicas que publican las Facultades de la Universidad Técnica de Manabí, para el estudio comparativo se usó la herramienta Google Page Speed Insights, donde se aplicaron métricas de evaluación impuestas por W3C, con respecto al rendimiento y optimización. Para garantizar la calidad de la investigación se aplicó el método Delphi, en un cuestionario dirigido a 50 Docentes de diferentes Universidades Ecuatorianas, con la finalidad de conocer el marco de diseño más adecuado al momento de desarrollar y producir sistemas web.

Palabras clave: Diseño web responsivo, Diseño web adaptativo, Desarrollo web, Frontend, Métricas.

Abstract

Web development has evolved on a large scale, this article makes a comparison between two important design frameworks that are essential for the development of web interfaces, such as the responsive and adaptive framework, highlighting its main advantages and differences through the experimental method, properly focused on the development of a web portal, The Google Page Speed Insights tool was used for the comparative study, where evaluation metrics imposed by W3C were applied, with respect to performance and optimization. To guarantee the quality of the research, the Delphi method was applied in a questionnaire directed to 50 teachers from different Ecuadorian Universities, with the purpose of knowing the most adequate design framework at the moment of developing and producing web systems.

Keywords: Responsive web design, Adaptive web design, Web development, Frontend, Metrics.

1. Introducción

En los últimos años, la producción de sistemas informáticos para móviles y tabletas se ha visto agigantado en diversas áreas. En este artículo se indaga sobre los mecanismos que existen para desarrollar interfaces gráficas para sistemas en línea que constantemente buscan métodos innovadores con soluciones pertinentes para presentar sus contenidos en dispositivos de diversas escalas, siempre poniendo la mira en el usuario final, para de esa manera captar mayor volumen de usabilidad en Internet.

Los sistemas web han evolucionado de manera acelerada, por lo que han reducido la producción de los sistemas de escritorio, las grandes empresas han migrado sus sistemas locales a la web, ya que los servicios en línea brindan a los usuarios una mayor disponibilidad y rapidez para obtener información, es ahí donde entra en juego el diseño web como parte del desarrollo, es muy importante porque es parte de la experiencia que tendrá el cliente al navegar por un sitio (Manso Guerra, 2016).

El presente tema es innovador desde el punto de vista de producción de sistemas informáticos orientados a la web, ya que es parte del proceso de mantenimiento de software. Para esto se analizan la usabilidad del Diseño Web Adaptativo (AWD) y del Diseño Web Responsivo (RWD), que son considerados como los dos grandes mecanismos para el desarrollo de interfaces gráficas, basándose en resultados obtenidos a través de experimentación de autores, se manifiesta que las aplicaciones son altamente disponibles y accesibles para los usuarios, cuando se usa estos tipos de diseño, requiriendo sólo un dispositivo que tenga un navegador web para acceder (Adenan, 2020).

Adicional a lo anterior, este tema es relevante porque busca conocer el marco de diseño más ventajoso a la hora de desarrollar interfaces gráficas, aplicando para ello un método científico de evaluación, una parte importante de este tema se debe a que el Frontend es actualmente un tema interesante y que ha venido evolucionando a través de los Frameworks, aunque es un tema que ya ha sido explorado, en ocasiones los investigadores desconocen el origen para el aparecimiento de nuevos lenguajes gráficos, como por ejemplo: Bootstrap, Bulma CSS, Pure CSS, Tailwind CSS, entre otros.

La finalidad de la presente investigación es demostrar que marco de diseño se adapta a mejor a las buenas prácticas, usabilidad y

experiencia del usuario

2. Materiales y Métodos

La metodología de esta investigación es de carácter cuantitativo, bibliográfico y experimental. Se ha realizado una revisión bibliográfica en bases de datos de alto nivel, como IEEE, Scopus, ACM y diversos congresos científicos donde se ha extraído información sobre la usabilidad que ofrecen AWD y RWD.

Como parte del método científico aplicado en el presente proyecto, se utilizará la experimentación, la cual consistirá en el desarrollo de un portal web aplicando RWD y AWD, el sitio será un prototipo de portal que en el futuro tomará un valor significativo para la Universidad Técnica de Manabí (UTM), debido a que será un espacio dedicado a la información de investigaciones científicas publicadas por las Facultades de la UTM. En la experimentación se harán comparaciones según métricas de evaluación impuestas por W3C a través de la herramienta de Google “Page Speed Insights”, los aspectos considerados serán: carga, velocidad de navegación, presentación, volumen de código, entre otros.

Otro método utilizado para garantizar la calidad de la investigación es el Delphi o consulta a expertos, que es utilizado para conocer cuál es el marco de diseño recomendado para desarrollar interfaces web. Los expertos son 100 docentes especializados en el área de Ingeniería de Software, los cuales son pertenecientes a diferentes Universidades Ecuatorianas. De los 100 docentes, se procedió a trabajar con una muestra de tipo finita sobre la población total, aplicando la siguiente fórmula:

Datos

Z = Coeficiente de confiabilidad.

P = Proporción de éxito.

Q = Proporción de fracaso (Q = 1-P).

E = Margen de error.

Las herramientas utilizadas en esta investigación son: Google Form para desarrollar los formularios (método Delphi), Visual Studio Code como IDE para la codificación de las interfaces, en la parte AWD se utilizará CSS, HTML y JavaScript, y se modelarán diferentes aspectos de presentación para los tamaños generales 360x640, 600 x 1024, 800x1280, y finalmente 1366x768, en la parte RWD se utilizará el framework Bootstrap en su versión 5.0.

Para un resultado eficiente de la experimentación se formularán cuatro hipótesis que se deberán evaluar al final de la presente investigación, estas son:

• H0: El diseño web adaptativo (AWD) posee mejores uti-lidades para el desarrollo de interfaces web que infieren en la calidad de navegación del usuario según expertos.

• H1: El diseño web responsivo (RWD) posee mejores uti-lidades para el desarrollo de interfaces web que infieren en la calidad de navegación del usuario según expertos.

• H2: El diseño web adaptativo (AWD) posee una mejor valoración según Page Speed Insights.

• H3: El diseño web responsivo (RWD) posee una mejor valoración según Page Speed Insights.

2.1 El Frontend como carta de presentación de la web

Dentro del mundo informático, el desarrollo web, se ha convertido en una de las áreas con mayor demanda laboral para un Ingeniero en Sistemas (Pérez Ibarra, 2021). Dentro de esta área informática, se encuentran dos vertientes muy importantes para los desarrolladores, el elegante FrontEnd y el robusto Backend.

El Frontend, es un componente visual dentro del desarrollo web, está compuesto por todas aquellas tecnologías que se ejecutan del lado del cliente, específicamente visualizadas en el navegador web, de manera general, los lenguajes de diseño pioneros en el desarrollo web son: HTML, CSS y JavaScript, cuya implementación se da, en el desarrollo de interfaces gráficas adecuadas para los usuarios (Valdivia-Caballero, 2016).

Un profesional encargado del FrontEnd, debe trabajar regularmente con estas tres tecnologías, aunque es elemental que conozca la manera de trabajar del BackEnd (lado servidor), debido a que es importante para el diseño del maquetado en HTML y su debida estilización en CSS.

2.1.1 Principales objetivos del Frontend

Busca implementar la responsividad de las interfaces, para que una aplicación web sea multiplataforma (Alonso Vega, 2013). Permite la creación de API’s para el consumo de datos de manera fácil y a su vez mejora la experiencia del usuario (Berbel Marín, 2018). Presentar la información, de manera dinámica y estilizada para los diversos tipos de usuarios (Deshmukh, 2019, March).

2.1.2 Evolución acelerada del Frontend

Las tendencias en desarrollo web, a través de la aparición de frameworks han marcado una evolución muy acelerada en el componente Frontend, debido a que todo empezó por los lenguajes de diseño clásicos: HTML, CSS y JavaScript, que han sido la base para la construcción de nuevas mejoras en el diseño web (Zelaya, 2020). En la actualidad se puede encontrar diversos marcos visuales, que mejoran la calidad de las interfaces tomando en consideración diversos aspectos de las aplicaciones web, tales como: formularios, botones, tablas, banners, fondos, colores, alertas, cargas, tipografías, adaptabilidad de interfaces a móviles, efectos e interactividad con el usuario, entre otros.

2.1.3 Frameworks destinados al Frontend (Responsividad de interfaces web)

Los frameworks que en la actualidad son más usados por los desarrolladores web (Zelaya, 2020), son:

• Bootstrap.

• Bulma.

• Skeleton.

• W3CSS.

• Angular JS.

• React JS.

• Vue JS.

• Vuetify, entre otros.

2.2 Aproximación a los marcos de diseño web

Para la creación de interfaces web, es necesario en primera instancia conocer el alcance que tendrá la página o portal que se vaya a realizar, en caso de que el usuario requiera que sea ejecutado en diversos tamaños de pantalla, se podrá abordar en dos temáticas, el AWD y RWD, que son marcos para el diseño de interfaces, ambas con características y maneras diferentes de implementación pero que tienen el mismo fin, brindar una experiencia de navegación óptima para el usuario final. Bajo esta premisa se plantea realizar una comparativa entre ambos marcos para el diseño de interfaces.

2.2.1 Enfoque del diseño web adaptativo (AWD)

AWD es un marco de diseño relativamente nuevo para la mejora progresiva de sitios web, enfocado a la accesibilidad, usando hojas de estilo con tecnología de scripting para diseñar diversas páginas web que se adaptan según el dispositivo que esté usando el usuario en tiempo real (Yousaf, 2018).

Se necesitan los siguientes recursos para realizar un diseño adaptativo:

• Diseño fluido con rejillas flexibles y Media Queries.

• Imágenes, objetos, vídeos o medios similares flexibles.

• Fuentes tipográficas con valores relativos.

Enfoque del diseño web adaptativo (AWD) La técnica utilizada en el diseño web adaptativo, se basa en ajustar el contenido de los sitios web al ancho del área de visualización de cada dispositivo personalizado. Presenta algunas características, como: Diseño fluido basado en porcentajes y píxeles.

El uso de Media Queries Para configurar la altura, la anchura y la resolución del dispositivo móvil en el que se quiere ejecutar. Por ejemplo, si desea consultar el sitio en una resolución móvil de 450px. Cabe destacar que en el archivo estilo_movil.css se ha colocado algunos estilos sencillos a modo de demostración.

Cabe destacar que en el archivo estilo_movil.css se ha colocado algunos estilos sencillos a modo de demostración

En esta sección aún no se hace ningún cambio porque no llega al límite máximo de 450px. Se presenta a continuación

Si apreciamos en el caso anterior, el cambio se realiza cuando es menor a 450px, se espera a través de este ejemplo muy sencillo resaltar la funcionalidad de AWD, obviamente se complica un poco cuando se comienzan a colocar dentro del HTML más etiquetas de recursos dependiendo de la página a desarrollar.

En resumidos términos el marco AWD se maneja a través de media queries para la presentación de interfaces según el programador lo haya establecido, en el caso de la tienda de Amazon, el portal web de ellos funciona bajo el marco AWD, lo que quiere decir que existen 3 tipos de interfaces creadas específicamente por el desarrollador para dispositivos como ordenadores, tabletas y móviles. La funcionalidad AWD se da al momento que un usuario accede a la tienda, y el servidor detecta la pantalla del dispositivo que está usando el usuario, en tal caso lo redirecciona a la presentación que se ajusta de manera eficiente a su equipo.

Ventajas del diseño web adaptativo El desarrollo de interfaces web mediante el diseño adaptativo es ventajoso, y contribuye a los siguientes beneficios (Labrada, 2013):

• Personalización de interfaces: Con AWD, los desarrolla-dores podrán hacer una interfaz diferente para cada resolución, en la que se podrán colocar los recursos óptimos para cada pantalla del dispositivo.

• Adaptación de la velocidad de la interfaz: Se notará la fluidez, la carga de recursos será más rápida, debido a que ya está especificado para qué tipo de dispositivo, eliminando recursos que ralentizan la ejecución, por ejemplo: en dispositivos móviles no se mostrarán imágenes masivas como en un dispositivo de escritorio.

Desventajas del diseño web adaptativo La desventaja de aplicar el AWD es que hay que ajustar correctamente las escalas de resolución para cada dispositivo, hay que hacer algunas presentaciones de la misma plantilla, nunca se sabe en qué dispositivo navegará el cliente, por lo que las páginas deben hacerse según las resoluciones generales emitidas por el W3C. Además, se genera una masiva codificación para cada interfaz (Labrada, 2013).

2.2.2 Enfoque del diseño web responsivo (RWD)

El Internet ha entrado en su versión Web 3.0, a su vez ha incorporado el desarrollo de la tecnología móvil, debido a que cada vez se utilizan más terminales móviles inteligentes (Li, 2019).

Es allí donde aparece el RWD que es un marco de diseño que resuelve el conflicto de algunos sitios al no poder adaptarse a los teléfonos móviles u otras interfaces de dispositivos. Por ello, el RWD se ha convertido en un tema de investigación de gran interés para los desarrolladores y diseñadores de experiencia de usuario (UX), el objetivo del marco de diseño RWD, es que las páginas web tradicionales puedan mejorar la experiencia del usuario.

El RWD incorpora varias tecnologías para poder cumplir con el desarrollo de interfaces (Li, 2019):

• HTML5

• CSS3

• Rejillas de fluidos

• Imágenes flexibles

Características del diseño web responsivo A su vez posee las siguientes características:

• Ajuste automático del tamaño de una imagen u objeto a la pantalla del dispositivo que se esté usando.

• Uso de paquetes de media queries minimizados.

• Automatización para el proceso de la grid automática, a través de Frameworks, tales como: Bootstrap, Materialize, Foundation, entre otros.

La esencia del RWD es permitir el acceso al contenido web para todos los dispositivos existentes a través de la capacidad de respuesta de las interfaces, hoy en día existen varios tipos de dispositivos que presentan diferentes dimensiones de pantalla, de ahí la necesidad de adaptar el diseño del contenido web (Pérez Ibarra, 2021).

Los dispositivos móviles de pantalla pequeña están ganando popularidad a medida que avanza el tiempo. También se puede hablar de las consolas de juegos y las SmartTV, que son cada vez más comunes entre los consumidores, ya que permiten navegar por Internet en dispositivos de alta resolución con comodidad. La capacidad de respuesta responde a los puntos de ruptura establecidos por el W3C en 2014, cuando comenzó el movimiento de la Web 3.0 (Otto, 2014).

Dentro de la web responsiva hoy en día se pueden encontrar algunos frameworks que facilitan la tarea de desarrollo frontend, algunos de ellos son: Bootstrap, Materialize, Skeleton, Angular, React, entre otros, pero en esta investigación se utilizará Bootstrap para hacer la comparación contra AWD.

Bootstrap como marco de trabajo para el desa-rrollo de interfaces responsivas Bootstrap (BS) es un framework de diseño que permite desarrollar sitios web adaptativos y modernos, la idea básica de BS es utilizar las características empaquetadas de CSS para trabajar la adaptabilidad a través de puntos de ruptura y mediante el uso de una retícula de doce columnas que ofrece BS (Tapani, 2014). Este artículo no pretende profundizar en Bootstrap, sólo se considera dentro del RWD como uno de los frameworks más utilizados por los desarrolladores web.

Ventajas del diseño web responsivo Bootstrap tiene magníficos beneficios para el desarrollo Frontend, ya que se acopla visualmente a las necesidades y experiencias del usuario (Rodríguez, 2018). Estos son:

• Permite la inserción de elementos inline: iconos, menús desplegables, formularios, entre otros, utilizando sintaxis cortas que se pueden encontrar en su documentación.

• El diseño será adaptable, no se verá afectado por la escala o resolución del dispositivo móvil.

• El diseño de columnas es más rápido y fácil de configurar.

• Permite el uso del lenguaje de preprocesamiento Less.

Puntos de interrupción ofrecidos por Bootstrap Bootstrap permite una adaptabilidad dinámica a través de la inserción de filas y columnas, lo cual es una ventaja importante que presenta ya que el desarrollador, conociendo la sintaxis básica de sus componentes, podrá crear rápidamente formularios, botones, galerías, entre otros elementos de las páginas web (W3schools., 2018).

3. Resultados y Discusión

Antes de utilizar las métricas, se desarrollará como ejemplo un prototipo de portal web donde se evidencie información de cantidades de artículos publicados por Facultad dentro de la Universidad Técnica de Manabí, el portal se desarrolla en base a los marcos de diseño AWD y RWD. Una vez desarrollados, ambos sitios serán subidos a un servidor de prueba donde a través de la herramienta PageSpeed Insights (se medirá el tiempo de carga y la velocidad de navegación) y a su vez también con el módulo de Google Test Mobile (se mide el porcentaje de adaptabilidad).

Implementación del sitio con AWD y medición de los problemas de rendimiento

Resultado e interpretación: El sitio web en modo escritorio tiene un tiempo de renderizado de imágenes y texto de 0,8 s. La velocidad de visualización del contenido de cada página es de 1,0 s. El renderizado de la imagen gif principal es de 0,9 s. El tiempo que tarda la página en ser totalmente interactiva es de 0,8 s. La página no experimenta caídas en la carga. Y finalmente los movimientos de los elementos en la carga es de 0,077 s

Resultado e interpretación: El sitio web en resolución Tablet presenta una lentitud en el renderizado de la imagen y el texto debido a que supera los 2,4 segundos. La velocidad con la que se observa el contenido de cada página es de 2,5 segundos. El renderizado de la imagen gif principal es de 2,4 segundos. El tiempo que tarda la página en ser totalmente interactiva es de 2,4 segundos. La página no experimenta caídas en la carga. Y finalmente los movimientos de los elementos al cargar es de 0,139 s

Resultado e interpretación: El sitio web para dispositivos móviles con AWD tiene un renderizado de imágenes y textos de 1,6 s, considerado como promedio. La velocidad con la que se observa el contenido de cada página es de 2,4 segundos. El renderizado de la imagen gif principal es de 1,6 segundos. El tiempo que tarda la página en ser totalmente interactiva es de 1,6 s. La página experimenta mucho bloqueo en la carga, con un tiempo total de 0 ms. Y finalmente los movimientos de los elementos en la carga es de 0,046 s.

Comparativa propuesta - Sitio en relación al marco AWD

Con respecto a la renderización de imágenes y texto, mientras menor sea el tiempo de renderizado, mejora la calidad de respuesta de una interfaz, y es lo que los usuarios buscan, una experiencia agradable y rápida en la web (Gustafson, 2016). El sitio muestra una renderización de imagen y texto más eficiente cuando es presentado en la resolución de escritorio, debido a que solo necesita 0,8 s en comparación a la resolución de tableta con 2,4 s y la de móvil con 1,6s.

Uno de los aspectos esenciales en un portal o aplicación web, es la velocidad de respuesta del contenido (texto), por lo que se recomienda siempre que no exceda de los tres segundos (Perez, 2020). El contenido aparece más rápido en la resolución de escritorio con un tiempo de 1,0 s, en comparación a la respuesta de la tableta con 2,5 s y el móvil con 2,4 s.

En una aplicación o página web, se recomienda usar siempre resoluciones optimizadas de poco tamaño, que tengan un renderizado de entre 0,3 s a 1,0 s (Veloz, 2016). Por lo tanto, la resolución de escritorio, cumple con lo establecido con un renderizado de 0,9 s, mientras que en tableta tiene 2,4 s y en el móvil 1,6 s.

La interactividad es una de las propiedades que toda aplicación web debe tener, por ende, se recomienda que su tiempo de respuesta sea menor a 1,0 s (Barba, 2015). En la implementación AWD del sitio, la resolución de escritorio tarda 0,8 s en ser interactiva, lo que refiere a un tiempo eficiente para la calidad y experiencia que el usuario tenga del sitio. No siendo así en la resolución de tableta con 2,4 s y la de móvil con 1,6 s.

Implementación del sitio con RWD y medición de los problemas de rendimiento

Resultado e interpretación: El sitio web para dispositivos móviles y tabletas en modo RWD tiene un renderizado de imágenes y textos de 2,0 s. La velocidad con la que se visualiza el contenido de cada página es de 2,6 s. El renderizado de la imagen gif principal es de 2,0s. El tiempo que tarda la página en ser totalmente interactiva es de 2,1 s. La página experimenta un bloqueo en la carga de 30 ms. Y finalmente los movimientos de los elementos en la carga es de 0 s.

Resultado e interpretación: El sitio web para la resolución de los ordenadores (portátiles y de sobremesa), tiene una muy buena representación de la imagen y el texto con 0,7 seg. La velocidad con la que se observa el contenido de cada página es de 0,9 segundos. El renderizado de la imagen gif principal es de 0,7s. El tiempo que tarda la página en ser totalmente interactiva es de 0,7s. La página experimenta un bloqueo en la carga de 3 ms. Y finalmente los movimientos de los elementos en la carga es de 0 s.

Comparativa propuesta - Sitio en relación al marco RWD

Con el marco RWD, se logra una renderización de imágenes y texto, de 2,0 s, por lo que excede al 1,0 s, recomendados para la mejora de la calidad de respuesta, los usuarios tendrían que esperar un pequeño lapso de tiempo para que aparezca la imagen, por lo que la experiencia se vería afectada (Gustafson, 2016). El sitio muestra una renderización de imagen y texto más eficiente cuando es presentado en la resolución de escritorio, debido a que solo necesita 0,7 s en comparación a la resolución de tableta y móvil con 2,0 s.

La velocidad de respuesta del contenido (texto), es algo muy necesario para la experiencia del usuario en un sitio web, por lo que se recomienda siempre que no exceda de los tres segundos (Perez, 2020). El texto aparece más rápido en la resolución de escritorio con un tiempo de 0,9 s, en comparación a la respuesta de la tableta y el móvil con 2,6 s. Con RWD, también se deben colocar imágenes de poco tamaño, que no afecten la navegación y el renderizado que debe estar en un rango de 0,3 s a 1,0 s (Veloz, 2016). En las pruebas con RWD, la resolución de escritorio, permite un renderizado de 0,7 s, mientras que en tableta y móvil tiene una duración de 2,0 s.

Una de las propiedades que toda aplicación web debe presentar, es la carga interactiva de todo su contenido, incluyendo tipografías, efectos, y cualquier archivo multimedia, por lo que se recomienda que su tiempo de respuesta deba ser menor a 1,0 s (Barba, 2015). Con la resolución de escritorio en RWD, la respuesta a la carga interactiva de los elementos en pantalla es de 0,7 s, lo que es considerado como un tiempo eficiente y a su vez mejora la experiencia del usuario. Por otra parte, para la resolución de tableta y móvil, la página tarda 2,1 s en ser interactiva.

Método Delphi

Resultado e interpretación: La figura 9 muestra el número de profesores que participaron en la encuesta. Cabe señalar que las universidades se eligieron acorde a la especialidad establecida (Ingeniería de Software) y que se solicitó el permiso debido a las autoridades académicas.

Resultado e interpretación: 43 docentes consideran que es preferible el marco RWD para desarrollar interfaces web. Mientras que 7 están a favor de AWD.

1. Seleccionar las características, por las cuales usted utiliza-ría el marco de diseño escogido en la pregunta # 1

Resultado e interpretación: Para 41 docentes, RWD tiene mejor rendimiento en el momento de la ejecución, debido a que la mayor parte de los frameworks tienen sus componentes incrustados en la nube o también de manera minimizada, esto influye en la velocidad de ejecución de los elementos en pantalla, ya que se sincronizan de manera rápida, mientras que 9 docentes consideran que AWD rinde más, porque se diseña una interfaz para cada dispositivo, en este caso se puede simplificar algunos aspectos visuales mientras la pantalla del dispositivo sea más pequeña.

Con respecto a la originalidad de la interfaz, 34 docentes mencionan que RWD es mejor debido a la gran cantidad de elementos que ofrecen los Frameworks, y 16 afirman que AWD tiene mayor originalidad, debido a que pueden desarrollar elementos desde cero.

Otra característica es la reducción del código CSS, 43 docentes afirman que RWD es más simplificado, ya que se apoya en el uso de librerías y extensiones, que simplifican la redundancia de código, mientras que 7 docentes mencionan que AWD es más reducido, ya que por cada interfaz según el dispositivo en el cual se vaya a ejecutar, se puede quitar código no necesario, en el caso de dispositivos móviles, se podría quitar imágenes grandes.

Por otro lado, acorde a la adaptabilidad de las interfaces, 30 docentes consideran que RWD permite la presentación multiplataforma con tan solo diseñar una interfaz, mientras que 20 docentes mencionan que AWD permite un mejor diseño para cada dispositivo, ya que en este marco se deberá crear diferentes interfaces según la dimensión de la pantalla.

Por último, con respecto a la simplicidad y rapidez, RWD es aceptado por 40 docentes, debido a la simplicidad que los frameworks otorgan, en el caso de Bootstrap con su grid y sus múltiples elementos HTML y CSS empaquetados, por otra parte 10 docentes afirman que AWD es muy rápido a la hora de ser ejecutado en la web, debido a que al crear una interfaz para cada dimensión de pantalla de los dispositivos se puede añadir o quitar elementos dinámicos que perjudiquen la carga de la página.

Resultado e interpretación: 37 docentes afirman que el marco RWD tiene una mayor autonomía y por lo tanto se convierte en el diseño adecuado para desarrollar interfaces haciendo uso de buenas prácticas, finalmente 13 docentes afirman que el marco AWD es más rígido y que requiere de un mayor esfuerzo a la hora de las maquetaciones, ya que se deberán desarrollar diversas plantillas.

Discusión

Evidentemente el marco RWD, es la modalidad actual para el diseño de interfaces web, debido al acelerado avance de los dispositivos móviles, obviando de cierta manera la presentación de las interfaces tradicionales que solo podían ser visualizadas desde los ordenadores.

Para concretar los resultados originados de la encuesta de expertos y de la experimentación, se puede resumir las diferencias principales que existen entre AWD y RWD (Tabla 9):

Usar uno de los dos marcos de diseño dependerá netamente del desarrollador, ambos marcos poseen ventajas y desventajas. Pero acorde a los resultados de la investigación, el marco que más se encuentra estable en la actualidad para el desarrollo ágil de interfaces es el RWD, debido a que la mayor parte de los usuarios utilizan múltiples dispositivos, y por lo tanto el RWD brinda un mayor despliegue para las aplicaciones en el aspecto de adaptabilidad. Por otra parte, las empresas para evitar gastos innecesarios en desarrollo de interfaces, recomiendan la utilización de frameworks que pertenecen al marco RWD. Algunos ejemplos: Angular, React, Bootstrap, Bulma CSS, entre otros. Las actuales aplicaciones web utilizan las tecnologías antes mencionadas con el objetivo de simplificar el desarrollo de interfaces y mejorar la calidad de experiencia que tenga el usuario usando algún servicio

4. Conclusiones

Luego de haber estudiado la eficacia del marco de diseño web adaptativo (AWD) y del diseño web responsivo (RWD) para el desarrollo de sitios web dinámicos, se concluye que el diseño RWD es más óptimo para el desarrollo de interfaces web considerando los valores originados desde la herramienta Google Speed Insights con relación a las métricas de la W3C.

Por otro parte, acorde al método Delphi los docentes afirman que RWD es y será el marco de diseño más utilizado por los desarrolladores en la actualidad y a futuro, debido a la constante actualización de recursos, su simplicidad al momento de codificar y también por la reducción de código CSS, además por su rapidez para implementar interfaces a través del uso de componentes ya diseñados.

Sin menospreciar el marco AWD, algunos docentes se manifestaron, afirmando que ofrece una gran diversificación a la hora de desarrollar diferentes interfaces para cada dispositivo, aunque es un poco tradicional, tiene algunas opciones que le permiten posicionarse aún como un buen marco de diseño.

Referente a las hipótesis de investigación, se cumplen la H1, afirmando que el marco RWD posee mejores utilidades para el desarrollo de interfaces web que infieren en la calidad de navegación del usuario según expertos. A su vez la H3, que considera que el diseño web responsivo (RWD) posee una mejor valoración según Page Speed Insights.

Para trabajos futuros se pretende realizar una comparativa entre algunos frameworks pertenecientes al marco RWD, con el objetivo de conocer las principales potencialidades y popularidad en entornos empresariales.

Agradecimientos

Agradezco a mi Dios Todopoderoso por brindarme la salud e inteligencia, con las cuales pude desarrollar este artículo científico. Además, estoy muy agradecido por la ayuda de mi tutor el Ing. Walter Zambrano, quien siempre estuvo allí asesorando de manera correcta. Un agradecimiento especial a mis padres quienes siempre me han brindado su apoyo y estuvieron allí ayudándome a alcanzar la meta de poder graduarme. Gracias a la FCI por abrirme las puertas al conocimiento

Contribución de los autores

Jhonny Xavier Chávez Calderón, Emilio Antonio Cedeño Palma: Conceptualización, Metodología, Software, Análisis formal. Jhonny Xavier Chávez Calderón, Gabriel Agustín Cotera Ramírez: Redacción – borrador original del artículo. Walter Daniel Zambrano Romero: Conceptualización, Visualización, Investigación. Dannyll Michellc Zambrano Zambrano: Supervisión, Redacción – revisión y edición del artículo.

Conflictos de interés

Los autores declaran no tener ningún conflicto de interés.

Referencias bibliográficas

Adenan, A. H., Abdullah, N. A. S., Hussain, M., & Sahudin, S. (2020, November). A Comparative Study of Web Design for Reengineering Pharmacokinetics Application. In 2020 IEEE Conference on Open Systems (ICOS) (pp. 53-58). IEEE. doi:10.1109/ICOS50156.2020.9293641

Alonso Vega, A. (2013). Responsive Web Design interfaces web adaptables al dispositivo empleando HTML5 y CSS3.

Barba Soler, J. P. (2015). Diseño y desarrollo web. Análisis de casos (Doctoral dissertation, Universitat Politècnica de València) http://hdl.handle.net/10251/49757

Berbel Marín, P. (2018). Desarrollo de un frontend en ReactJS. https://repositori.uji.es/xmlui/bitstream/handle/10234/179297/Memoria_Pablo_Berbel.pdf?sequence=1&isAllowed=y

Deshmukh, S. M. (2019, March). Building a single page application web front-end for E-learning site. In 2019 3rd International Conference on Computing Methodologies and Communication (ICCMC.) IEEE, 985-987. doi:10.1109/ICCMC.2019.8819703

Gustafson, A. (2016). Adaptive Web Design, Second Edition.

Labrada, E., & Salgado, (2013). Diseño web adaptativo o responsivo. Revista Digital Universitaria Vol(14).

Li, N., & Zhang, B. (2019, November). The design and implementation of responsive web page based on HTML5 and CSS3. In 2019 International Conference on Machine Learning, Big Data and Business Intelligence (MLBDBI) (pp. 373-376). IEEE.

Manso Guerra, Y. C., & Pedro Febles, J. (2016). Diseño web adaptativo para la plataforma educativa ZERA. Revista Cubana de Ciencias Informáticas, 10(2), 100-115.

Otto, M., & Thornton, J. (2014). Bootstrap.

Peltomäki, V. (2014). Bootstrap Framework as a web design tool.

Pérez Ibarra, S. G. (2021). Herramientas y tecnologías para el desarrollo web desde el FrontEnd al BackEnd. In XXIII Workshop de Investigadores en Ciencias de la Computación (WICC 2021, Chilecito, La Rioja).

Perez, A. (2020). Características y funcionalidades de inter-acción e interfaz en el prototipo de visualización de los recursos culturales emergentes en el proyecto de investigación creando paz. http://hdl.handle.net/20.500.11912/6155

Rodríguez, R. V. (2018). Análisis de frameworks web adaptativos basados en HTML5. .

Tapani, C. (2014). Study and Integrate Bootstrap 3 for OpixManager.

Valdivia-Caballero, J. J. (2016). Modelo de procesos para el desarrollo del front-end de aplicaciones web. Interfases, (009), 187-208. DOI: https://doi.org/10.26439/interfases2016.n009.1245

Veloz, A. (2016). De la interfaz del usuario al responsive web design. . Editorial UCSG, 59-66.

W3schools. (2018). Bootstrap 3 Tutorial.

Yousaf, N. A. (2018). Towards adaptive and responsive web design: A systematic literature review. Language,. International Conference on Engineering, Computing & In-formation Technology (ICECIT 2017), 55-60.

Zelaya, C. (2020). Nuevas tendencias en desarrollo Web.