VISUALIZACIÓN Y PENSAMIENTO COMPUTACIONAL A TRAVÉS DEL MODELO DE CAJAS CSS: UNA ESTRATEGIA LÚDICA PARA LA ENSEÑANZA DEL DISEÑO WEB
DOI:
https://doi.org/10.61530/redtis.vol9.n1.2025.256Palabras clave:
Aprendizaje visual, Codificación creativa, CSS, Diseño web, Modelo de cajas, Pensamiento computacionalResumen
El presente trabajo describe una estrategia de aprendizaje activo y visual para la enseñanza del modelo de cajas en CSS, uno de los conceptos fundamentales del diseño web. Se propone una metodología basada en la creación de figuras y objetos utilizando únicamente etiquetas <div> y propiedades de estilo, con el fin de favorecer la comprensión espacial de márgenes, bordes, rellenos y contenido [1]. A través de la elaboración de representaciones como personajes de 8 bits (por ejemplo, Mario Bros) y estructuras organizadas como la tabla periódica, los estudiantes desarrollan habilidades de pensamiento computacional [4], creatividad y resolución de problemas. Los resultados muestran un incremento en la comprensión del modelo de cajas, la motivación y la capacidad de abstraer estructuras visuales en código. Este enfoque promueve una enseñanza significativa del CSS mediante la codificación creativa [3], fortaleciendo la conexión entre teoría y práctica.
Referencias
[1] J. N. Robbins, Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web
Graphics, 5th ed.. Sebastopol, CA, USA: O’Reilly Media, 2018.
[2] M. Storey, A. Zagalsky, F. F. Filho, L. Singer, and D. M. German, "How developers use CSS," IEEE
Software, vol. 35, no. 2, pp. 74-80, 2018.
[3] S. Bocconi et al., "Developing Computational Thinking in Compulsory Education. Implications for
policy and practice," Scientific and Technical Research Reports, 2016.
[4] V. Dagiene and V. Dolgopolovas, "Short Tasks for Scaffolding Computational Thinking by the
Global Bebras Challenge," Mathematics, vol. 10, no. 17, p. 3194, 2022.
[5] E. Lahtinen, K. Ala-Mutka, and H. Järvinen, "A study of the difficulties of novice programmers,"
ACM SIGCSE Bull., vol. 37, no. 3, pp. 14-18, 2005.
[6] R. Mayer, Multimedia Learning, 3rd ed. , Cambridge, Ed.: UK: Cambridge Univ. Press, 2020.
[7] M. Resnick, Lifelong Kindergarten. MA, USA: MIT Press, 2018.
[8] C. Zhou and W. Zhang, "Computational Thinking (CT) towards Creative Action: Developing a
Project-Based Instructional Taxonomy (PBIT) in AI Education," Education Sciences, vol. 14, no. 2,
p. 134, 2024.
[9] S. Grover, R. Pea, and S. Cooper, "Designing for deeper learning in a blended computer science
course for middle school students," Computer Science Education, vol. 25, no. 2, pp. 199-237, 2015.
[10] J. M. Wing, "Computational thinking," Commun. ACM, vol. 49, no. 3, pp. 33-35, 2006.
[11] V. Shute, C. Sun, and J, Asbell-Clarke, "Demystifying computational thinking," vol. 29, 2017.
[12] David P. Ausubel, Educational Psychology: A Cognitive View, Rinehart & Winston Holt, Ed. New
York, NY, USA: Springer Netherlands, 1968.
[13] F. Díaz Barriga, Estrategias docentes para un aprendizaje significativo. Ciudad de México, México:
McGraw-Hill, 2022.
[14] S Tobón, Competencias y aprendizaje basado en proyectos. Ciudad de México, México: Pearson,
2020, vol. 41.
[15] D. Kokotsaki, V. Menzies, and A. Wiggins, "Project-based learning: A review of the literature,"
Improving Schools, vol. 19, no. 3, 2016.
[16] J. W. Thomas, A Review of Research on Project-Based Learning. San Rafael, CA, USA: Autodesk
Foundation, 2000.
[17] Mozilla Developer Network. (2024) CSS Box Model. MDN Web Docs. [Online].
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
Descargas
Publicado
Número
Sección
Licencia
Derechos de autor 2025 Roberto Antonio Martínez Thompson, Gloria Irene Téllez Rodríguez, Mónica Avelina Gutiérrez Haros, Álvaro Peraza Garzón
Esta obra está bajo una licencia internacional Creative Commons Atribución-NoComercial-CompartirIgual 4.0.
Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0)
This is a human-readable summary of (and not a substitute for) the license.
Advertencia.
Usted es libre de:
Compartir — copiar y redistribuir el material en cualquier medio o formato
Adaptar — remezclar, transformar y crear a partir del material
El licenciador no puede revocar estas libertades mientras cumpla con los términos de la licencia.
Bajo las condiciones siguientes:
Reconocimiento — Debe reconocer adecuadamente la autoría, proporcionar un enlace a la licencia e indicar si se han realizado cambios<. Puede hacerlo de cualquier manera razonable, pero no de una manera que sugiera que tiene el apoyo del licenciador o lo recibe por el uso que hace.
NoComercial — No puede utilizar el material para una finalidad comercial.
CompartirIgual — Si remezcla, transforma o crea a partir del material, deberá difundir sus contribuciones bajo la misma licencia que el original.
No hay restricciones adicionales — No puede aplicar términos legales o medidas tecnológicas que legalmente restrinjan realizar aquello que la licencia permite.
Avisos:
No tiene que cumplir con la licencia para aquellos elementos del material en el dominio público o cuando su utilización esté permitida por la aplicación de una excepción o un límite.
No se dan garantías. La licencia puede no ofrecer todos los permisos necesarios para la utilización prevista. Por ejemplo, otros derechos como los de publicidad, privacidad, o los derechos morales pueden limitar el uso del material.
Cómo citar
