Desarrollo de la interfaz gráfica para la plantilla de actividades del Taller Integral de Arquitectura

1. Introducción

El ambiente para el Taller Integral de Arquitectura I y II de la Facultad de Arquitectura fue una de las iniciativas que impulsaron la puesta en marcha del proyecto general “Ambientes Digitales de Aprendizaje” (ADA), desarrollado por la Dirección General de Cómputo y de Tecnologías de Información y Comunicación de la Universidad Nacional Autónoma de México (DGTIC). Los ADA son ambientes o espacios virtuales de aprendizaje (Díaz Díaz & Castro Arévalo, 2017), que tienen el objetivo de ofrecer a los docentes la posibilidad de proponer y realizar actividades mediante el desarrollo de una planeación didáctica (San Vicente Parada, 2021). Dichas planeaciones están disponibles para su consulta por parte de los estudiantes, otros docentes y público en general desde cualquier dispositivo conectado a Internet. Los contenidos se encuentran licenciados mediante Creative Commons, lo que permite a profesores interesados incorporarlos parcial o completamente en sus asignaturas o estrategias particulares de enseñanza-aprendizaje. En esta colaboración entre profesores, diseñadoras instruccionales y equipo tecnológico, se realizaron diferentes propuestas de ambientes a partir de las situaciones de aprendizaje del taller, en el cual los diseñadores gráficos fueron los responsables de generar y consolidar la identidad visual de éste, el estilo de navegación y la presentación de componentes de cada actividad a implementarse en el gestor de contenidos educativos Moodle.

Cabe mencionar que los ADA desarrollados en Moodle conservan la estructura de navegación de un curso estándar en esta misma plataforma: una disposición general semejante en las portadas y plantillas de actividades, utilizando colores e iconografía adaptada a las diferentes áreas de conocimiento y entidades de la UNAM. Además, sus contenidos se muestran de forma abierta, sin necesidad de un usuario y contraseña. Para cada propuesta de ADA, se cuidaron los estándares de accesibilidad y buenas prácticas de Moodle en la presentación de actividades (CAST, 2025; Pineda, Valdivia y Ciraso, 2015; Yunos, Muslim, Hussain, 2024). Entre éstas, se incluyen la integración de los títulos de secciones que permite generar un índice de contenidos accesible para los lectores y asistentes de pantalla; la disposición con mayor o menor detalle en la descripción de actividades para el estudiante; y la incorporación de un bloque para docentes que ofrece recursos explicativos de la motivación de las actividades, sugerencias de implementación y consideraciones para adaptarlas a cada grupo específico. Cada ADA se diseñó como un paquete flexible que puede funcionar como un proyecto, un caso específico, un módulo parcial o un curso completo. Además, estos ambientes permiten obtener una copia, exportarlos a otros entornos Moodle y extenderse, modificarse y conducirse sin herramientas o conocimientos técnicos adicionales.

En el caso concreto del ADA del Taller de Arquitectura I y II, se planteó la alternativa de desarrollar una propuesta de diseño de interfaz a la medida y personalizada. Esta decisión surgió ante la inquietud de los profesores, quienes consideraban que Moodle era muy rígida visualmente para sus necesidades pedagógicas, para el proceso creativo e iterativo, así como para la dinámica en las sesiones presenciales del taller, que conjuntan tres cursos en un solo taller. Además, debían gestionar la cantidad de material disponible y la secuencia con que querían presentarlo, lo cual era una oportunidad inigualable de mostrar las posibilidades y niveles de personalización de la interfaz que ofrece la plataforma y los frameworks gráficos que incluye.

Con el propósito de generar la interfaz gráfica pertinente, se realizaron visitas guiadas a las instalaciones de la Facultad de Arquitectura y se asistió a clases del taller de la materia, se mantuvieron pláticas con los docentes y se revisaron publicaciones sobre temas relacionados con la arquitectura en su proceso de composición. Esto tuvo la finalidad de contrastar los estilos de diseño editorial y multimedia más usados en esta área para sensibilizar al equipo de diseño sobre el ambiente, la comunidad estudiantil de la facultad y todos los aspectos que pudieran servir de referente para tener un mayor acercamiento al proyecto.

La identidad visual del taller contempló el diseño de:

• Un logotipo, imagotipo o isologo.
• Portada de la Facultad de Arquitectura
• Portada de acceso al taller
• Programa general y desglose de actividades
• Plantilla de actividades

Para la definición de estos elementos, se consideraron fundamentos de diseño aplicados para el entorno de la web vinculados con la experiencia de usuario UX y la interfaz de usuario UI (Bidart, 2023). El desarrollo de cada uno de estos conceptos requirió de un proceso específico para cumplir con un objetivo particular de comunicación visual (Paredes-Calderón & Nájera-Galeas, 2020).

El objetivo del ambiente virtual de aprendizaje del Taller Integral de Arquitectura I y II fue construir dos aulas virtuales en Moodle donde se guiara al estudiante en su aprendizaje de forma auxiliar y durante el desarrollo del taller, pero, además, que sirviera de fuente de consulta para el público interesado, en una propuesta que intercala contenidos disciplinares, ejemplos de trabajo e ideas y referencias para profundizar en aspectos alrededor de los proyectos estructurados en la modalidad de Aprendizaje Basado en Proyectos (ABP). Para lograrlo, la Plantilla de actividades del Taller integral de Arquitectura I y II, objeto de este trabajo, tuvo el propósito de dar un marco de referencia para que las diseñadoras instruccionales y tecnopedagógicas pudieran trasladar los contenidos del temario en secuencias de enseñanza-aprendizaje, donde ellas, los profesores titulares del taller y la gente interesada en el Ambiente Virtual de Aprendizaje pudiera modificarlo y extenderlo utilizando los editores Atto o TinyMCE, que incluye Moodle de paquete, sin conocimiento de HTML o CSS. Para este fin, la propuesta de plantilla se comprobó mediante el recurso Comprobador de contraste de la página web “WebAIM” (Webaim, s. f.), el cual valida la legibilidad de los contenidos, así como su traslado en una plantilla duplicable y editable que pueda modificarse sin necesidad de conocimiento específico de CSS y HTML. De esta manera, se pueden aprovechar los elementos con algún tipo de interacción o efectos visuales sin temor a romper su código e interactividad.

2. Metodología

Para el desarrollo de la solución gráfica de la plantilla de actividades, se tomó como referencia la metodología sistemática de Bruce Archer (Song & Wang, 2025), llamada “Modelo sistemático para diseñadores”. En ésta, se propone “Seleccionar materiales correctos y darles forma para satisfacer las necesidades de función y estética, dentro de las limitaciones de los medios de producción disponibles” y consta de tres fases principales: identificar el problema, definir criterios, así como analizar opciones y seleccionar la mejor solución para su implementación, como se muestra en la Figura 1.

Figura 1

Esquema de las fases de la metodología de Bruce Archer

Esta metodología se adaptó a la naturaleza del proyecto en un contexto educativo, en donde la interfaz gráfica debería cumplir con criterios funcionales, técnicos, pedagógicos y estéticos.

2.1 Fase analítica

En esta fase, se identificaron las necesidades y las limitaciones tecnológicas de la plataforma Moodle, obteniendo la información siguiente:

• Se debía generar un ADA para el taller “Jorge González Reyna”, de la carrera de Arquitectura en la UNAM.
• El nombre del taller sería “Taller Integral de Arquitectura” curso I y II, impartido en el primer año de la carrera.
• El taller debería estar disponible en línea, accesible para consulta de la comunidad universitaria en todo momento.
• El diseño de la interfaz gráfica debería integrar el encabezado y pie institucional acorde a los lineamientos gráficos para los sitios web de la DGTIC (Dirección General de Tecnología de la Información y Comunicaciones, 2022).
• El concepto gráfico de la identidad visual del taller debería tener referencias visuales con la Facultad de Arquitectura y el Taller “Jorge González Reyna” con el fin de lograr una identificación y sentido de pertenencia por parte de los alumnos.
• El taller se conforma de tres componentes: Investigación, Proyectos y Construcción, los cuales contienen secuencias didácticas llamadas “Actividades”, vinculadas de manera integral en el curso.
• La información de cada actividad se desplegaría en una sola página.
• El equipo tecnológico implementaría la plantilla a partir de la definición del diseño de interfaz en la plataforma Moodle mediante el uso del framework Bootstrap. Dicho framework permite incorporar un diseño de interfaz gráfica diferente a la que presenta la plataforma por defecto bajo un marco responsivo (Chávez Calderón, et al., 2022), pues se basa en el uso de HTML y hojas de estilo CSS.
• El total de actividades sería de 37 para el primer curso y 39 para el segundo curso, resultado del trabajo realizado por los docentes y los especialistas en didáctica.

2.2 Fase creativa

En esta fase, se utilizó una de las herramientas de usabilidad en el diseño de interfaces para la elaboración de wireframes (Murillo, 2016) y prototipos a nivel de imagen. Estos se presentaron al equipo didáctico y tecnológico con el fin de obtener realimentación y realizar ajustes necesarios para su validación con los docentes, asegurando la pertinencia pedagógica del diseño, como se muestra en la Figura 2.

Figura 2

Esquema sobre el proceso iterativo

Consecuentemente se revisaron los documentos de texto de las actividades con la finalidad de identificar el tipo de información contenida, como se muestra en la Figura 3, comparando unas con otras para poder establecer elementos en común e importancia de los mismos, y así poder bocetar las primeras ideas. El resultado fue una propuesta de wireframe para validar la arquitectura, organización y jerarquización de la información, como se muestra en la Figura 4, así como la elaboración de un primer prototipo para mostrar a los docentes un primer acercamiento a lo que podría ser la plantilla de actividades, como se puede ver en la Figura 5.

Figura 3

Actividad desarrollada en texto plano

Figura 4

Primer wireframe de la actividad

Figura 5

Primera propuesta de prototipo para intercambiar puntos de vista entre el equipo de trabajo y los docentes con el fin de definir los alcances del diseño

De esta revisión, se tomaron decisiones que delimitaron aspectos que impactaron en la definición del diseño de la plantilla de las actividades, considerando que se integrarían un total de 76 actividades, además de incluir algún elemento que visualmente identificara el tipo de componente al que pertenecían, manteniendo la coherencia visual con las demás páginas del taller.

Aunque en algún momento se planteó la posibilidad de generar una plantilla con algunos elementos en las actividades con un diseño personalizado, se descartó de inmediato esta posibilidad debido a las limitaciones de no contar con los recursos humanos técnicos suficientes ni el tiempo para implementar esa alternativa de acuerdo con el cronograma del proyecto.

Una vez definidos los requerimientos y las necesidades, el equipo de diseño revisó los principios de UX y UI relacionados con la arquitectura de la información, los principios de usabilidad de Nielsen Nielsen (Panimboza Deleg, 2025), principios de percepción de la Gestalt (Olalde Ramos, 2024) y principios de accesibilidad web a considerar para el desarrollo de las propuestas de interfaz gráfica de la plantilla.

2.3 Fase de ejecución

Los profesores del taller “Jorge González Reyna” de la Facultad de Arquitectura de la UNAM integraron los tres cursos que lo componen, investigación, proyecto y construcción; en propuestas modulares de proyectos arquitectónicos con diferentes grados de desarrollo en términos de entregables: desde análisis de la forma y volumetría, un partido arquitectónico (el concepto fundamental, la visión y la intención del arquitecto, que guía el diseño de un edificio) y un proyecto ejecutivo, como lo ocupan los profesionales de la construcción (Natarén, 2022). En la página principal del curso, se muestran los proyectos integrales en términos de la seriación de actividades para llegar a los resultados esperados. Asimismo, en cada una de las actividades conformantes, se asignaron códigos de color, tanto en la pleca del encabezado como en los contornos de los bordes de las tablas, para identificar las actividades que correspondían a cada curso del taller. De esta manera, al final de cada proyecto, el calificador de Moodle permite obtener los promedios de los tres cursos que componen el taller para cada proyecto, los cuales corresponden administrativamente a la calificación de cada parcial del primer y segundo semestre de la carrera de Arquitectura, donde se imparte el taller.

Esta dinámica hizo patente el reto de diferenciar visualmente las actividades de los diseños instruccionales de cada curso del taller, integrando las instrucciones específicas, los criterios y rúbricas de evaluación de cada una y su contribución al proyecto que componen, para que los estudiantes pudieran realizarlas y entregarlas en tiempo, aún sin haber estado presentes en clase cuando éstas fueron descritas. Para contribuir a la claridad en el alcance de los entregables, la plantilla debía ser lo suficientemente adaptable para reflejar de forma rápida el curso al que pertenecían, los objetivos y las instrucciones con ejemplos de proyectos semejantes.

La plantilla de actividades contempló estas necesidades de diseño, integrando los aspectos técnicos de implementación con las decisiones gráficas para generar la propuesta final de las diferentes plantillas. Cada una contempló las secciones pertinentes según los requerimientos de cada actividad particular, tales como carruseles, galerías, imágenes colapsables, etcétera. Asimismo, se adaptaron al framework de desarrollo web seleccionado, se optimizó el código y se alineó a las clases CSS del framework correspondientes, asegurando la accesibilidad tanto en aspectos de legibilidad como en coherencia visual. De este modo, se generó una propuesta que respondió a los principios de UX y UI que persigue este proyecto.

Al momento de elegir el framework de trabajo, Moodle disponía de tres marcos de construcción de interfaces y de carga de AJAX: jQuery UI, el Moodle UI Component library y Bootstrap, todos con patrones para adaptar pantallas de la interfaz de Moodle y con comunidades grandes y consolidadas. Aunque JQuery proporciona más efectos visuales y facilita la inclusión de Javascript, dando más dinamismo a las páginas, se optó por Bootstrap ya que ofrecía la posibilidad de editar directamente desde el editor HTML de elección, TinyMCE o Atto, sin necesidad de intercalar entre la vista de edición y la vista de código para las porciones interactivas.

Por la experiencia obtenida en el equipo de trabajo, relacionada con la personalización de temas visuales en diferentes proyectos, se decidió que, durante la etapa de desarrollo y en paralelo a la construcción de actividades “tipo” que materializarían las propuestas de diseño, se tendrían clases generales declaradas en el tema visual con la finalidad de tener cambios de forma ágil sin entorpecer el trabajo de las diseñadoras instruccionales y tecnopedagógicas. Esto permitió cambiar estilos para revisiones sin tener que editarlos masivamente en páginas para el posterior traslado a la plantilla de actividades. Una vez aprobada y validada la plantilla, cerca de la culminación de la primera etapa del proyecto, los estilos CSS definidos inicialmente en la sección «CSS adicional» del tema visual habilitado en Moodle, se trasladaron ya bien a estilos inline dentro de cada etiqueta HTML o a una zona de estilos generales en el bloque cero del curso. De esta manera, fue posible trasladar la plantilla a otros entornos Moodle sin tener que pedir al administrador de la plataforma destino tener que incluir clases adicionales en su tema visual. En el apartado 2.4, se describe ese proceso a nivel operativo.

2.3.1 Disposición

Con base en la propuesta de wireframe y las reuniones con los docentes, se integraron elementos para facilitar la identificación de cada tipo de actividad, así como la agrupación de la información en cuatro secciones principales, como se ejemplifica en la Figura 6.

Figura 6

Wireframe de la página de actividades

Esta disposición se adapta tanto a monitores anchos como a pantallas móviles sin alterar significativamente sus secciones, cumpliendo tanto con pautas de navegación y accesibilidad web, con un diseño responsivo y acorde a los requerimientos del proyecto y de Moodle.

2.3.2 Integración de identidad gráfica

Considerando que el contenido de la actividad eran instrucciones en texto plano, y algunas de ellas eran de considerable extensión, se decidió crear un concepto gráfico minimalista que visualmente pudiera apoyar al usuario en la identificación de una separación y la diferenciación entre las secciones, para una lectura más ágil del contenido.

De esta manera, en la propuesta se integraron trazos de líneas rectas con formas simples para las secciones con información complementaria de la actividad y para la sección de “indicaciones”, se asignó un color de fondo sólido para destacar la misma, generando un área de mayor atención visual y jerarquía que, a su vez, serviría como el elemento diferenciador entre las actividades de los tres componentes de cada curso, lo anterior, reforzado con la integración de una pleca en la barra superior del encabezado con el nombre del componente y asignación del color de fondo correspondiente.

2.3.3 Tipografía

Se optó por utilizar dos fuentes tipográficas para diferenciar y jerarquizar los elementos textuales, agregando un estilo personal a los textos, ya que el 90% del contenido de la plantilla estaría conformado por texto plano.

• Roboto: se definió como la fuente primaria en sus variantes light y regular, que, por su trazo, es una de las fuentes más utilizadas y recomendadas para los bloques de texto, además de que se considera como una fuente muy flexible y adaptable a diversos dispositivos.

• Barlow: se definió como la fuente secundaria para integrar los títulos y subtítulos que, por su trazo regular, redondeado y alargado, presentan una semejanza visual con la tipografía usada en los pies de planos de los arquitectos.

2.3.4 Paleta de color

La paleta de color se basó en tres colores para mantener una relación cromática con la utilizada en los sitios web institucionales de la DGTIC, como se muestra en la Figura 7.

Figura 7

Paleta de color

2.3.5 Generación de la paleta de color complementaria para las actividades de los componentes

Una vez definida la propuesta, el resto a resolver era encontrar una paleta de colores para el fondo de la sección “Indicaciones” de la plantilla de actividades correspondiente a los tres componentes del curso I y a los tres componentes del curso II. Esta selección debía garantizar un contraste suficiente con respecto a los colores definidos para la tipografía, pues, de lo contrario, habría sido necesario buscar y definir nuevos colores para la tipografía de las actividades de cada componente, ya que cada uno tiene un color de fondo asignado.

Para poder definir los seis colores de fondo, se usó la herramienta web “Comprobador de contraste” de la página WebAIM (Webaim: comprobador de contraste, s. f.), la cual permite hacer una comparación de códigos de color entre el color de fuente y fondo, verificando que exista un contraste suficiente para que sean legibles los textos. Cabe mencionar que actualmente existen diversas herramientas web de acceso gratuito para hacer estas validaciones, sin embargo, se eligió ésta por el nivel de resultados que muestra, por lo que se hicieron diversas pruebas hasta encontrar los colores adecuados para la validación de contraste, atendiendo las recomendaciones de las pautas de accesibilidad para el contenido en la web Web Content Accessibility Guidelines WGAC 2.1 (World Wide Web Consortium, 2018).

2.4 Codificación de plantillas

Entre las posibilidades de construcción para las plantillas que dispone Moodle o pueden incorporarse, se eligió Bootstrap, un marco de referencia con herramientas para prototipar y estandarizar interfaces Web de grandes proyectos. Esta selección se fundamentó gracias a su arquitectura modular y personalizable, que permite importar sólo los componentes necesarios en cada ocasión y habilitar opciones globales como degradados y sombras, CSS con variables estandarizadas y una importante cantidad de funciones, mapas y efectos, que funcionan entre diferentes navegadores (Bootstrap Team, 2023). Además, Bootstrap tiene la ventaja de estar incluido en el paquete de distribución estándar de Moodle, tiene una considerable cantidad de ejemplos de uso en la red y una comunidad grande de desarrolladores que comprueban su compatibilidad con numerosos equipos de escritorio y móviles, lo que facilita la construcción de vistas y sitios Web.

Se retomó uno de los aspectos definidos en la fase analítica, en el que se menciona incluir el encabezado y pie de página institucional conforme a los lineamientos de imagen para los sitios web de la DGTIC, práctica que en el equipo de trabajo se ha implementado en otros proyectos con Moodle, como Tu aula virtual, Formación Académica, Retos TIC, etcétera, se adaptó el encabezado y pie de página a esta disposición. Ahora bien, hacia el interior de los cursos o ADA, los profesores editores deciden cómo se integrarán los elementos dentro de éste. Aunque tienen relativamente pocas opciones para cambiar el desplegado de las actividades, pueden decidir colocar los enlaces a las mismas en forma de lista, bloques, gradilla o mosaicos, lo que cambia el formato de curso. De igual forma, tienen la posibilidad de intercalar contenido enriquecido mediante Etiquetas de Moodle (mod_label) llamadas Zonas de texto y medios desde Moodle 4.0.

En el interior del curso, tanto en la página principal como en las páginas de actividades y plantillas, los editores HTML impiden de manera predeterminada incluir etiquetas <script>, <embed>, <style> e <iframe>, con el fin de evitar cualquier forma de secuencias de comandos entre sitios potencialmente maliciosa (cross-side scripting), pero se puede configurar para que ciertos perfiles puedan incrustarlas mediante la opción de seguridad del sitio «Habilitar contenido confiable», disponible en Administración del sitio > Seguridad > Políticas de seguridad del sitio Moodle. (Moodle HQ, s. f.). Con esta opción habilitada, se agregó una etiqueta <style> en la sección de encabezado de la página de la actividad base con clases para que se dispusiera del cien por ciento de la página del curso y así mostrar las secciones pertinentes con fondo de color del sitio a pantalla completa.

Como se comentó en el apartado de ejecución, durante el desarrollo y consolidación de las plantillas de actividades, se utilizaron clases generales de Bootstrap y se mantuvo la convención de la biblioteca de componentes de Moodle (como los nombres de categorías y de cursos declarados en cada etiqueta <body>) para minimizar la personalización de clases adicionales para conseguir efectos o desplegados específicos. Una vez aprobada la plantilla general de actividades que comprendieron el proyecto, se trasladaron los estilos personalizados a etiquetas <style> en la primera parte de cada respectiva página de actividad, o bien, en los bloques cero o encabezados de curso, con el objetivo de poder trasladar los cursos o parte de ellos a otros sitios Moodle. Así, se consiguió que todas y cada una de las actividades se puedan modificar mediante los editores HTML de Moodle desde el navegador web, sin necesidad de modificar los roles de profesores editores, de incrustar código ni de intercalar la vista de diseño y la de código HTML fuente mediante la edición, como se aprecia en la parte derecha de la Figura 8, pues, al alinearnos a las convenciones de Moodle, las plantillas son compatibles con las disposiciones de desplegado de Moodle.

Se agregaron clases estandarizadas para los componentes de cada sección de página a desplegarse y se cuidó que el código HTML de las plantillas permaneciera al editarse desde las pantallas de Atto y de TinyMCE.

Figura 8

Detalles de plantilla de actividades, con un bloque colapsable de Bootstrap (izquierda) que puede editarse directamente desde el editor HTML de Moodle sin entorpecer (derecha)

Se ocupó el contenedor estándar de Bootstrap (con la clase container, diferente a fluid-container) para la plantilla general de actividades, marcando las zonas para poder agregar secciones. Esta selección se fundamentó en que éste permite manejar anchos fijos según la resolución de cada pantalla, no de manera fluida a nivel de píxel, sino en secciones de anchos de pantalla (Bootstrap Team, 2023). Para los efectos de muestra de secciones, se ocupó el efecto collapse estándar de Bootstrap (Bootstrap Team, 2022), como se muestra en la Figura 8 arriba, obteniendo elementos editables desde la interfaz web. Para las galerías de trabajos, se implementó un carrusel con miniaturas en la parte inferior que facilita la selección de elementos individuales (Bootstrap Team, 2022), ajustado a la rejilla de Bootstrap, lo que permite adaptar todos los elementos a diferentes tamaños de pantalla. Las únicas clases adicionales que se agregaron fueron los bordes de las plantillas de instrucciones, el formato para las viñetas numeradas y la sección de objetivos, recursos y productos, que, si bien se formaron en un contenedor estándar de Bootstrap, dichas clases permiten personalizar el espacio de relleno (padding) y la posibilidad de mostrarlo adaptativamente según el ancho de pantalla mediante una tabla, por compatibilidad CSS en navegadores anteriores, que puede mostrarse en fila en pantallas reducidas.

Para mostrar los cuadros de la tabla en forma de lista, se colocaron anchos relativos en los cuadros externos (width: 30vw;) que, en tamaños de pantalla pequeños, se ajustan al 100% con márgenes a la izquierda y derecha. Para mantener la proporción de cuadros internos, al <div> que contiene el texto dentro de cada cuadro se le agregó el atributo de «aspect-ratio: 1», ancho de bloque completo (width: 100%;) y desbordamiento automático (overflow: auto;), de tal modo que, en los casos donde el texto ocupe más espacio del disponible, aparezca una barra de desplazamiento y se mantenga el tamaño de cuadrado, tal cual se aprecia en la Figura 9. Un ejemplo completo del código del esquema de la plantilla se encuentra en la figura del Anexo A de este documento.

Figura 9

Detalle de desplegado de cuadrados en las secciones de objetivos, que se mantengan cuadrados sin importar el ancho de la pantalla

3. Resultados

Como resultado de la validación de contraste, se obtuvieron los seis colores requeridos, cumpliendo con el nivel AA de accesibilidad web que permite la legibilidad de textos de tamaño normal y grande con respecto al color de fondo, como se muestra en la Figura 10.

Figura 10

Captura de pantalla de la herramienta de validación de colores

Al tener definidos los seis colores con su respectivo código hexadecimal, únicamente se requirió definir seis nuevas clases para la hoja de estilos CSS correspondiente a la plantilla de actividades, ya que se mantuvieron los mismos colores definidos para las fuentes tipográficas, ver Figura 11.

Figura 11

Paleta de color de fondos para las actividades de los dos cursos

De esta manera, el personal asignado para la integración de cada actividad solamente tuvo que hacer la referencia a la clase con el color de fondo correspondiente a la actividad y, para el equipo de diseñadoras instruccionales, fue transparente, de tal modo que la dinámica de integración fue la misma para todas las actividades, proceso que redujo considerablemente el tiempo de integración, como se muestra en la Figura 12.

Figura 12

Esquema de representation de asignación color de fondo de cada componente de ambos cursos

El equipo de diseñadoras instruccionales y tecnopedagógicas evaluaron los resultados del material y diseño en tres dimensiones: técnica, usabilidad y percepción del usuario (García García, González Alarcón y Martínez Sánchez, 2024) mediante la comparación de impresiones y sugerencias en encuestas semiestructuradas entre dos generaciones de estudiantes, quienes terminaban el curso anterior y quienes tomaban el curso propedéutico previo al inicio del primer semestre, donde se ocupó una copia de estos cursos. En el estudio, participaron los 114 estudiantes que tomaron o comenzaban el taller de arquitectura con los profesores Natarén, Quezada y Cueto Meza, así como 121 estudiantes de las mismas dos generaciones de grupos de los otros profesores que componen el taller Arq. Jorge González Reyna. A partir de los resultados obtenidos, los profesores manifestaron su deseo de incorporarse y aportar con materiales y variaciones a una siguiente revisión de los ambientes virtuales.

Gracias al número de reuniones donde se presentaron avances a los diferentes equipos, se documentaron problemas técnicos y se superaron inconsistencias en la herencia de estilos CSS y diferencias con estilos predeterminados de Moodle entre el sitio de ADA y en Tu aula virtual, donde se restauró una copia de los cursos.

Para evitar dejar clases globales en el resultado final a exportarse y compartirse o utilizar etiquetas <style> al inicio que pudieran omitirse al exportar el curso, se revisó que la opción de contenido confiable (Moodle HQ, s. f.) permitiera mostrar la personalización del curso en otras instalaciones de Moodle mediante atributos style en las etiquetas de cada página. Esta operación fue ciertamente más tardada, pero asegura que los estilos se desplegarán correctamente en cualquier sitio donde se importen y que se pueden editar tanto con Atto, como con TinyMCE, los editores que tiene disponibles Moodle.

La aplicación de la metodología de Archer demostró ser útil para estructurar el proceso técnico y justificar decisiones basadas en evidencia. Su enfoque racional y secuencial favoreció la documentación y comunicación entre equipos multidisciplinarios. Sin embargo, su estructura lineal exigió ajustes para integrarse con procesos de validación iterativa, típicos de los entornos digitales (Reinoso Yunga, & Zhindón Duarte, 2023). Comparada con metodologías como Design Thinking, Archer aportó mayor trazabilidad y rigor técnico, aunque menor agilidad en la ideación.

El rediseño de la plantilla de actividades basado en la metodología de Bruce Archer permitió mantener las pautas de accesibilidad que incluye Moodle y mejorar la legibilidad en las propuestas de distribución conforme a estándares internacionales (WCAG 2.1), reducir tiempos de carga y simplificar el código CSS, al tiempo que se incrementó la satisfacción y eficiencia de navegación de los usuarios. La solución implementada representa una práctica replicable para otras áreas académicas dentro de la UNAM.

4. Conclusiones

En el lado del diseño, se creó una identidad visual coherente con la Facultad de Arquitectura, alineada con los principios de UX y UI, dentro de las limitaciones de tiempo, recursos humanos y medios tecnológicos disponibles.

Con base en los resultados obtenidos de la aplicación del proceso metodológico para el diseño de la plantilla de actividades del Taller Integral de Arquitectura, se identificaron necesidades específicas mediante el trabajo colaborativo entre diseñadores, pedagogas y equipo técnico. Se generaron prototipos que fueron validados de manera iterativa, cuidando la jerarquización de la información, el uso de elementos gráficos diferenciados por tipo de actividad y un uso correcto del color para garantizar la legibilidad, obteniendo una plantilla adaptable, accesible y visualmente consistente, que facilitó su implementación en estilos CSS persistentes y transparentes en la edición para diseñadores instruccionales y docentes mediante la interfaz web. Con la validación del contraste de color, se aseguró el cumplimiento de accesibilidad web AA, sin comprometer el aspecto visual del diseño.

Por la parte técnica, el trabajo se centró en valorar las alternativas que ofrece Moodle para implementar las vistas generales y los componentes interactivos en cada propuesta de actividad y de secuencia de aprendizaje. Se buscó que las plantillas y sus secciones tuvieran etiquetas que cumplieran con las disposiciones de accesibilidad y sus atributos estuvieran dentro del espectro válido de Moodle; esto garantizó que, al utilizar cualquiera de los editores HTML de Moodle, se mantuviera la edición y se pudieran agregar, cambiar o eliminar partes de cada actividad sin necesidad de conocer HTML, CSS o Javascript ni alternar entre la vista de edición estándar y la de código fuente.

De igual manera, se ordenaron las actividades en el libro de calificaciones de Moodle para que se pudiera obtener agrupadamente las calificaciones de cada curso que compone cada Taller de Arquitectura Integral por parcial, mediante ponderación de categorías dentro de una misma aula en Moodle. Al utilizar solamente tipos de actividades existentes en la distribución estándar de Moodle, se maximizó la posibilidad de que pudieran exportarse y utilizarse en otros sitios Moodle, como se comprobó con la copia que se realizaron de los ADA a Tu aula virtual para ser utilizados en los talleres curriculares de los ciclos a partir de 2024-1. La elección de Bootstrap fue la que el mismo equipo de desarrollo de Moodle eligió en 2024 como marco preferido para el desarrollo de vistas en sus módulos estándar y para agregados de terceros (Moodle HQ, 2024). En los últimos dos años, se han publicado módulos para extender los editores HTML de Moodle y aprovechar elementos de Bootstrap incrustables y utilizables sin necesidad de utilizar código, como Bootstrap Elements (mod_bootstrapelements), HTML Bootstrap Editor (Tool) (tool_htmlbootstrapeditor) o Bootstrap Grid (atto_bootrsapgrid), disponibles en la página de descarga de agregados de Moodle.

Para proyectos futuros, se recomienda identificar tempranamente los requerimientos técnicos y pedagógicos, y validar los prototipos con el equipo de trabajo y docentes para reducir problemas de interpretación del contenido; así como aplicar herramientas de validación de accesibilidad web y definir avances parciales para tener un progreso escalonado. Es relevante incluir una fase de investigación participativa y trabajo colaborativo multidisciplinario con conocimientos técnicos sobre el proyecto para optimizar los resultados, entender la naturaleza del desarrollo de las actividades, retos, casos o proyectos que se van a llevar a cabo, cómo se les presentan a los estudiantes y qué productos se esperan obtener, las formas de evaluar y calificar, el tipo de acompañamiento que se realiza a lo largo del semestre y el estilo de enseñanza-aprendizaje que tienen los profesores autores, con el fin de reflejar tales aspectos en las composiciones gráficas y en las pantallas que utilicen a lo largo de sus cursos. Aunque sea un producto abierto y disponible para todo público, más que ser un repositorio de actividades, un ADA es una propuesta que le es útil a profesores y estudiantes específicos. Conocerlos ayudará a buscar soluciones encaminadas a ellos, sus necesidades y expectativas.

Declaración de contribución de autoría

Itzel Hernández Serra: Diseñadora de interfaces gráficas para web, generó la identidad visual del taller, su manual y la propuesta del logotipo. Realizó diversas propuestas de interfaz gráfica para los distintos diseños solicitados que se tomaron como base para la creación de las versiones definitivas. Desarrolló la plantilla de actividades. Miguel Zúñiga González: Especialista en plataformas educativas, codificador de las plantillas. Montó el Moodle que albergó el sitio de ADA productivo y de pruebas, realizó la propuesta de framework web para la plantilla general de actividades, homologó el desplegado de secciones y atendió las eventualidades durante la edición, publicación y copia del taller en otro sitio Moodle.

ANEXO A. PROPUESTA DE MAQUETA DE ACTIVIDADES CON ZONAS GENERALES Y EJEMPLO DE SECCIÓN DE CARRUSEL

Figura 13

Ejemplo de código

En este ejemplo, se asume que la actividad se dio de alta en el curso con ID 2.