Desarrollo de la interfaz gráfica para la plantilla de actividades del Taller Integral de Arquitectura
Contenido principal del artículo
Resumen
Se diseñó una interfaz gráfica para la plantilla general de actividades del curso en Moodle, en formato de Ambiente Virtual de Aprendizaje, del Taller Integral de Arquitectura I y II del taller “Jorge González Reyna” de la Facultad de Arquitectura de la Universidad Nacional Autónoma de México, basada en el modelo sistemático de Bruce Archer. El equipo de diseño realizó una serie de actividades de diagnóstico con el fin de contextualizar la identidad visual del taller. A partir de esta información, se desarrollaron wireframes y prototipos iniciales que fueron validados en un proceso iterativo con los distintos equipos participantes. Se definieron criterios gráficos como la disposición de los elementos, el uso de tipografía y una paleta de color para facilitar la lectura, navegación y coherencia visual entre los componentes. Para asegurar la legibilidad del contenido, se utilizaron herramientas digitales que permitieron validar el contraste entre texto y fondo, conforme a las pautas de accesibilidad web. Esta validación también contribuyó a optimizar el desarrollo técnico, al reducir el número de clases CSS necesarias para su implementación en la plataforma educativa. El resultado fue una plantilla funcional, accesible y estéticamente alineada con los objetivos institucionales y pedagógicos del taller, a pesar de las limitantes de tiempo disponible, inconsistencias en la interpretación de CSS entre navegadores y la necesidad de trabajar en paralelo con las diseñadoras instruccionales que montaban los contenidos en cada curso.
Descargas
Detalles del artículo

Esta obra está bajo una licencia internacional Creative Commons Atribución-NoComercial-SinDerivadas 4.0.
Este trabajo tiene la licencia CC BY-NC-ND 4.0
Citas
Bidart, M. (2023, 23 de octubre). Productos digitales, interfaces – UX/UI [Teórico, Licenciatura en Comunicación Visual, Facultad de Artes, Universidad Nacional de La Plata]. Repositorio SEDICI. https://sedici.unlp.edu.ar/handle/10915/161396
Bootstrap Team (2023). Grid system. Bootstrap 4.6 Docs. https://getbootstrap.com/docs/4.6/layout/grid/
Bootstrap Team (2022). Collapse and Carrousel Components. Bootstrap 4.6 Docs. https://getbootstrap.com/docs/4.6/components
CAST, Center for Applied Special Technology. (2025). Methods for response, navigation, and movement. Design Options for Interaction, Universal Design for Learning (UDL). https://udlguidelines.cast.org/action-expression/interaction/response-navigation-movement/
Chávez Calderón, J. X., Zambrano Romero, W. D., Cedeño Palma, E. A., Zambrano Zambrano, D. M., y 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), 79-95. https://doi.org/10.5281/zenodo.6859127 DOI: https://doi.org/10.33936/isrtic.v6i1.4625
Díaz Díaz, F., y Castro Arévalo, A. L. (2017). Requerimientos pedagógicos para un ambiente virtual de aprendizaje. Cofin Habana, 11(1), 1-13. Recuperado en 11 de agosto de 2025, de http://scielo.sld.cu/scielo.php?script=sci_arttext&pid=S2073-60612017000100004&lng=es&tlng=es
Dirección General de Tecnología de la Información y Comunicaciones (2022). Lineamientos gráficos para los sitios web de la DGTIC. Universidad Nacional Autónoma de México. https://www.tic.unam.mx/lineamientos-graficos-sitios-web-dgtic/
García García, A., González Alarcón, G. P., y Martínez Sánchez, M. E. (2024). Un ambiente digital de aprendizaje para la enseñanza de la arquitectura. Propuesta didáctica con una metodología activa. Edunovatic 2024: Conference proceedings. REDINE, Red de Investigación e Innovación Educativa. Adaya Press, España, 475-482. https://dialnet.unirioja.es/servlet/articulo?codigo=9970998
Moodle HQ. (2025). Styles. Core CSS organisation. Moodle API Guides. https://moodledev.io/docs/4.5/apis/plugintypes/theme/styles
Moodle HQ. (2024). Boost presets. Moodle developer documentation. https://docs.moodle.org/dev/Boost_Presets
Moodle HQ. (s. f.). Configuraciones de seguridad del sitio → Habilitar contenido confiable. https://docs.moodle.org/all/es/Configuraciones_de_seguridad_del_sitio#Habilitar_contenido_confiable
Murillo, D. (2016). Uso de esquemas o wireframes. El Tecnológico, 25(1), 21-23. https://revistas.utp.ac.pa/index.php/el-tecnologico/article/view/67
Natarén de la Rosa, E. L. (2022). Apuntes de Construcción. Taller Jorge González Reyna, Facultad de Arquitectura UNAM. https://ada.educatic.unam.mx/pluginfile.php/9548/mod_assign/intro/Apuntes%20de%20Construccion.pdf
Olalde Ramos, M. T. (2024). La buena composición visual. Universidad Autónoma Metropolitana.
https://doi.org/10.24275/uama.352.10714 DOI: https://doi.org/10.24275/uama.352.10714
Paredes-Calderón, B. A., y Nájera-Galeas, C. E. (2020). Comunicación visual, procesos de construcción de los signos visuales en los mensajes: Diseño y diseñador gráfico. Dominio de las Ciencias, 6(2 [Especial junio]), 995-1006. https://doi.org/10.23857/dc.v6i2.1262 (dominiodelasciencias.com)
Pineda i Herrero, P., Valdivia, A., Ciraso, C. (2015). Actividades de Moodle : manual de buenas prácticas pedagógicas. Universitat Autònoma de Barcelona. https://core.ac.uk/outputs/78536186/
Reinoso Yunga, E. N. y Zhindón Duarte, J. A. (2023). Método investigativo-creativo aplicado al diseño de interior residencial generado mediante contenedores marítimos. Revista de Investigación y Pedagogía del Arte, 13, 1-16. https://doi.org/10.18537/ripa.13.06 DOI: https://doi.org/10.18537/ripa.13.06
San Vicente Parada, A. D. C. (2021). La planeación didáctica para la enseñanza en línea. SCIAS - Educação, Comunicação e Tecnologia, 3(1), 158-179. https://doi.org/10.36704/sciaseducomtec.v3i1.4982 DOI: https://doi.org/10.36704/sciaseducomtec.v3i1.4982
Song, Y., y Wang, M. (2025). Revisiting the systematic method of Bruce Archer: A review on design as the third culture. The Design Journal, 28(5), 929–946. https://doi.org/10.1080/14606925.2025.2522557 DOI: https://doi.org/10.1080/14606925.2025.2522557
WebAIM. (s.f.). Contrast checker. https://webaim.org/resources/contrastchecker/
World Wide Web Consortium (W3C). (2018, 5 de junio). Web content accessibility guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/
Yunos, N., Muslim, N., Hussain, A. H., Hasim, N. A., Nazri, N. S., y Hamsan, M. H.(2024). Best Practice of Moodle Implementation for E-Learning: A Perspective of Public University Lecturers. Journal of Ecohumanism, 3(5), 261–268. https://doi.org/10.62754/joe.v3i5.3899 DOI: https://doi.org/10.62754/joe.v3i5.3899