APRENDIZAJE BASADO EN PROYECTOS DIGI-
TALES PARA EL DESARROLLO DE PÁGINAS
WEB EDUCATIVAS CON HTML Y CSS
DIGITAL PROJECT-BASED LEARNING FOR DEVELOPING ED-
UCATIONAL WEBSITES WITH HTML AND CSS
Andrés Eduardo Soria Londo
Ministerio de Educación del Ecuador, Ecuador
Jhohana Patricia Valverde Albán
Ministerio de Educación del Ecuador, Ecuador
Ximena Rocio Sagñay Conde
Ministerio de Educación del Ecuador, Ecuador
Maricela Jaqueline Samaniego Moyota
Ministerio de Educación del Ecuador, Ecuador
Silvia Carolina Shagñay Sigcho
Ministerio de Educación del Ecuador, Ecuador
pág. 9396
DOI: https://doi.org/10.37811/cl_rcm.v9i3.18584
Aprendizaje basado en Proyectos Digitales para el Desarrollo de Páginas
Web Educativas con HTML y CSS
Andrés Eduardo Soria Londo1
andres.sorial@educacion.gob.ec
https://orcid.org/0009-0006-0651-4178
Ministerio de Educación del Ecuador, Ecuador
Jhohana Patricia Valverde Albán
jhohana.valverde@educacion.gob.ec
https://orcid.org/0009-0000-1563-8021
Ministerio de Educación del Ecuador, Ecuador
Ximena Rocio Sagñay Conde
ximena.sagnay@educacion.gob.ec
https://orcid.org/0009-0003-3635-0336
Ministerio de Educación del Ecuador, Ecuador
Maricela Jaqueline Samaniego Moyota
https://orcid.org/0009-0008-5937-365X
Ministerio de Educación del Ecuador, Ecuador
Silvia Carolina Shagñay Sigcho
silvia.shagnay@educacion.gob.ec
https://orcid.org/0009-0003-2752-1279
Ministerio de Educación del Ecuador, Ecuador
RESUMEN
Este artículo evalúa el impacto del Aprendizaje Basado en Proyectos Digitales (ABPD) en el desarrollo
de competencias para la creación de páginas web educativas con HTML y CSS en estudiantes de
bachillerato técnico de Chimborazo, Ecuador. Mediante un diseño cuasi-experimental con grupo
experimental (GE, n=60) y control (GC, n=60), se midieron tres dimensiones: dominio técnico (pruebas
pre-post test), calidad de proyectos (rúbricas) y percepción estudiantil (encuestas). Los resultados
demostraron que el GE obtuvo una mejora significativa de 30.5 puntos en conocimientos frente a 14.6
del GC (p<0.01), con un 78% de aprobación en el post-test. Las rúbricas revelaron avances destacados
en estructura HTML (68% nivel avanzado) y contenido educativo (80%), aunque se identificaron
desafíos en CSS responsive. La encuesta mostró alta motivación (92%) y valoración del trabajo
colaborativo (85%), respaldando la eficacia del ABPD para integrar teoría y práctica. El estudio aporta
evidencia empírica sobre la viabilidad de esta metodología en contextos con recursos limitados,
destacando su potencial para reducir brechas digitales mediante proyectos contextualizados. Se
recomienda complementar la formación con ejercicios específicos en diseño CSS y fomentar la
creatividad en futuras implementaciones.
Palabras clave: aprendizaje basado en proyectos, HTML/CSS, educación técnica, competencias
digitales, innovación educativa
1
Autor principal.
Correspondencia: andres.sorial@educacion.gob.ec
pág. 9397
Digital Project-Based Learning for Developing Educational Websites with
HTML and CSS
ABSTRACT
This article evaluates the impact of Project-Based Digital Learning (PBDL) on developing skills for
creating educational web pages using HTML and CSS among technical high school students in
Chimborazo, Ecuador. Using a quasi-experimental design with an experimental group (EG, n=60) and
a control group (CG, n=60), three dimensions were measured: technical proficiency (pre-post tests),
project quality (rubrics), and student perceptions (surveys). Results showed that the EG achieved a
significant improvement of 30.5 points in knowledge compared to 14.6 in the CG (p<0.01), with a 78%
pass rate in the post-test. Rubrics revealed notable progress in HTML structure (68% advanced level)
and educational content (80%), though challenges were identified in responsive CSS. The survey
indicated high motivation (92%) and appreciation for collaborative work (85%), supporting PBDL's
effectiveness in integrating theory and practice. The study provides empirical evidence of this
methodology's viability in resource-limited contexts, highlighting its potential to reduce digital divides
through contextualized projects. It recommends supplementing training with specific CSS design
exercises and fostering creativity in future implementations.
Keywords: project-based learning, HTML/CSS, technical education, digital competencies, educational
innovation
Artículo recibido 05 junio 2025
Aceptado para publicación: 09 julio 2025
pág. 9398
INTRODUCCIÓN
El presente artículo aborda la aplicación del Aprendizaje Basado en Proyectos Digitales (ABPD) como
estrategia pedagógica para la implementación de páginas web educativas con HTML y CSS, en
estudiantes de bachillerato técnico. El problema de investigación surge por la necesidad de superar los
métodos tradicionales de enseñanza de programación, que frecuentemente resultan ser muy abstractos
y descontextualizados, lo que limita la adquisición de competencias digitales esenciales (Hernández -
Sampier, & Mendoza, 2018). En ese sentid,o se evidencia este vacío en las calificaciones obtenidas en
las evaluaciones nacionales de habilidad tecnológica de estudiantes ecuatorianos (Ministerio de
Educación, 2023), lo que justifica la exploración de metodologías activas como el ABPD.
La justificación de la presente investigación reside en la exigencia de formar a estudiantes con capacidad
de desarrollar soluciones de ingeniería digital acorde a su contexto en regiones como Chimborazo,
donde se cuenta con limitado acceso a recursos tecnológicos, pero el potencial educativo es significativo.
En el plano teórico, el trabajo se sustenta en los trabajos de Larmer et al.,( 2015) que postula que el
aprendizaje se consolida en la práctica reflexiva en proyectos reales, y en el marco de las competencias
digital de la UNESCO (2018), que enfatiza la creación de contenidos como habilidad clave. Se conciben
las siguientes variables: domino técnico (HTML CSS), creatividad en diseño y motivación estudiantil,
medidas en pruebas estandarizadas, rúbricas y cuestionario.
Estudios previos, como el de García-Valcárcel y Basilotta(2017), indicando que el ABP puede
implementarse para mejorar las habilidades STEM, pero pocos se centran en la enseñanza de la
programación web en lugares rurales.
Esta investigación proporciona evidencia empírica de una escuela pública ecuatoriana que combina
técnicas cuantitativas con evaluaciones de proyectos completos. El contexto socioeducativo de
Chimborazo, con su relación con las brechas digitales a partir de un compromiso formal por la formación
técnica deja un escenario de prueba perfecto para la adaptabilidad de ABPD en condiciones de recursos
limitados.
METODOLOGÍA
El presente estudio adopta un enfoque cuantitativo con diseño cuasi- experimental, puesto que se busca
analizar la incidencia del aprendizaje digital basado en proyectos (ABPD) sobre el desarrollo de páginas
pág. 9399
web educativas en HTML y CSS en alumnos de bachillerato. Para lo anterior, se trabajará mediante un
grupo experimental y grupo de control sin aleatorización en la asignación, dado las condiciones naturales
del entorno escolar (Hernández-Sampieri & Mendoza, 2018). Por lo tanto, este diseño permite comparar
los datos antes y después de la intervención a través de las variables como el dominio técnico, la
creatividad y la motivación.
El ABPD se sustenta en la construcción activa de conocimiento a través de proyectos en realidades
funcionales, generando habilidades técnicas y colaborativas (Larmer et al., 2015). Por lo tanto, esta
metodología se ajusta de manera efectiva con la enseñanza de programación web, debido a que
promueve práctica y teoría en un ámbito real (García-Valcárcel & Basilotta, 2017).
Población, muestra y muestreo
Se seleccionó a una población de 120 alumnos de bachillerato técnico de una preparatoria pública en
Chimborazo, Ecuador. Se aplicó un muestreo no probabilístico por conveniencia, seleccionando dos
estratos de grupos intactos (30 alumnos cada uno), un grupo experimental, (ABPD )y otro de control
(método tradicional). La muestra es determinada por la viabilidad logística y el enfoque habilidades de
programación con conocimientos iniciales.
Los datos se recolectaron mediante una herramienta pre y post, rúbricas de evaluación de proyecto y
encuestas de percepción, analizándose para llevar una comparación estadística, con el software SPSS
(comparación de medias con t de Student) y correlaciones.
RESULTADOS Y DISCUSIÓN
Los hallazgos del trabajo arrojaron un impacto significativo de la metodología de Aprendizaje Basado
en Proyectos Digitales (ABPD) en el desarrollo de destrezas técnicas y motivacionales por parte de los
estudiantes de bachillerato, en particular, la creación de páginas web educativas en HTML y CSS. Los
hallazgos mostraron diferencias sustanciales resultantes entre el grupo experimental (GE), en donde se
aplicó la metodología ABPD,y el grupo de control (GC), quien siguió una metodología convencional.
Las pruebas de conocimientos (pre- y post-test) mostraron una mejora relativamente alta en el GE, con
un promedio de 30.5 puntos, pasando de 52.1 en el pre-test a 82.6 en el post-test. La mejora contrasta
con respecto al GC, que solo tuvo un avance de 14.6 puntos, con un promedio de 65.4. Además, en el
recuento, el 78% de los estudiantes en GE obtuvieron una calificación aprobatoria ( ≥70/100) en el post-
pág. 9400
test, mientras solo el GC solo logro un 42%. Con estos resultados se puede argumentar que el ABPD no
solo facilita la adquisición de conocimientos teóricos, sino que también fortalece la aplicación práctica,
esto se alinea a lo mencionado por García Valcárcel y Basilotta (2017), quienes destacan que los
proyectos promueven un aprendizaje más profundo y duradero.
La evaluación de los proyectos web usando rúbricas mostró que los estudiantes del GE adquirieron
destrezas técnicas específicas, particularmente en estructura HTML, en el cual el 68% lograron un
dominio avanzado en la rúbrica (4-5/5). Sin embargo, el diseño CSS presentó mayores desafíos, con un
55% de los estudiantes logrando un dominio avanzado. Esto sugiere que, aunque los estudiantes
comprendieron los fundamentos de CSS, aspectos como el diseño responsive y el uso de selectores
complejos requieren mayor refuerzo. Por otro lado, el contenido educativo fue en general el criterio
mejor evaluado, con 80% en niveles avanzados, es decir, la naturaleza interactiva de los videos y
cuestionarios fue una de las áreas más efectivas para el ABPD, por su capacidad de promover la
creatividad y la aplicación del conocimiento en la vida diaria.
En cuanto a la percepción por parte de los estudiantes, la segunda encuesta post-intervención mostró
altos niveles de motivaciones y satisfacción. A la pregunta sobre qué les pareció más estimulante del
proyecto, el 92% expresó que el proyecto fue más estimulante que las clases tradicionales y con relación
a la utilidad de HTML y CSS para su futura formación, el 95% piensa que son muy útiles, en tanto el
84% valoró de manera positiva el trabajo colaborativo, indicando que el ABPD no solo mejora las
competencias técnicas, sino también las habilidades sociales y de cooperación, correspondiendo con
Mozilla (2022) sobre los desafíos comunes en el aprendizaje de estilos web.
En general, el ABPD, demostró ser una metodología efectiva para la enseñanza del desarrollo web en
educación media superior. El enfoque práctico y colaborativo no solo incrementó el rendimiento, sino
que también aumentó la motivación de parte de los estudiantes para involucrarse activamente en su
aprendizaje. Los resultados demuestran la adecuación de su implementación en otros contextos
similares, sin embargo, se recomienda complementar la formación con ejercicios enfocados para
fortalecer el dominio de CSS y que se fomente aún más la originalidad en los diseños. Los hallazgos
añaden evidencia valiosa sobre la necesidad de integrar metodologías activas en el currículo de
informática, específicamente en un entorno público en el que el acceso a los dispositivos tecnológicos
pág. 9401
se encuentra limitado, pero la potencia del estudiante es amplia.
ILUSTRACIONES, TABLAS, FIGURAS
Tabla 1: Resultados de pruebas pre test, post tests
Grupo
Momento
Media (X
)
Desviación Estándar (σ)
% Aprobados (≥70/100)
Experimental
Pre-test
52.1
12.3
0.18
Post-test
82.6
9.8
0.78
Control
Pre-test
50.8
11.7
0.15
Post-test
65.4
10.5
0.42
Fuente: Elaboración propia (2025)
El GE mostró una ganancia de 30.5 puntos (vs. 14.6 en GC), validando la eficacia del ABPD.
La prueba t para muestras independientes confirma diferencias significativas (p < 0.01) en el post-test
entre GE y GC.
Tabla 2: Resultados de rúbrica de proyectos web (post intervención)
Criterio
Media (X
)
% Niveles 4-5
(Avanzado)
Ejemplo de Comentario
Estructura HTML
4.2
0.68
"Uso correcto de etiquetas semánticas (nav,
article)."
Diseño CSS
3.8
0.55
"Selectores anidados, pero limitado en
responsive."
Contenido educativo
4.5
0.8
"Incluyó videos explicativos y quizzes
interactivos."
Originalidad
3.6
0.45
"Diseño propio, aunque con inspiración en
templates."
Fuente: Elaboración propia (2025)
El 72% de los proyectos alcanzó una calificación final ≥4/5.
El criterio más débil fue originalidad, vinculado a la falta de repertorio previo en diseño web.
Tabla 3: Resultados de la encuesta de percepción
Ítem
Media (X
)
% Respuestas 4-5
"El proyecto fue más motivador que clases teóricas."
4.6
0.92
"HTML/CSS son útiles para mi futuro académico."
4.8
0.95
"Tuve dificultades con la sintaxis CSS."
3.4
0.4
"El trabajo en equipo mejoró mi aprendizaje."
4.3
0.85
Fuente: Elaboración propia (2025)
Tendencias:
Alta motivación (X
> 4.5 en ítems 1 y 2).
Dificultades técnicas focalizadas en CSS (40% las reportaron).
pág. 9402
CONCLUSIONES
Los resultados de esta investigación muestran que el Aprendizaje Basado en Proyectos Digitales
(ABPD) efectivamente permite que los estudiantes del bachillerato desarrollen competencias en diseño
de páginas web educativas con HTML y CSS. Los datos cuantitativos revelaron una mejora significativa
en el rendimiento académico del grupo experimental (GE) con un incremento promedio de 30.5 puntos
en las pruebas de conocimiento, respecto al 14.6 puntos del grupo de control (GC). Esta diferencia,
estadísticamente significativa (p< 0.01), con firma que el ABPD no solo facilita el aprendizaje teórico,
sino que también potencia su aplicación práctica, como lo mencionan García-Valcárcel y Basilotta
(2017) en sus estudios sobre el aprendizaje activo.
Los resultados de los análisis de los proyectos en las rúbricas muestran que los estudiantes del GE
alcanzaron un nivel avanzado en estructura HTML (68%) y contenido educativo (80%), aunque se
identificaron desafíos en el dominio de CSS, sobre todo en diseño responsive. Estos hallazgos coinciden
con los reportes de Mozilla (2022), que destacan la complejidad inherente a los estilos avanzados. Sin
embargo, la alta motivación reportada (92%) y la valoración positiva del trabajo colaborativo (85% )
refuerzan la postura de que el ABPD no solo desarrolla las habilidades técnicas, sino también
socioemocionales.
En consecuencia, este estudio se estipula la implementación de ABPD en la enseñanza de tecnologías
web, en especial en sectores educativos con recursos limitados. Los datos respaldan su eficacia, aunque
se recomienda complementar la metodología con ejercicios focalizados en CSS para optimizar
resultados. La evidencia presentada no deja lugar a interpretaciones subjetivas: el ABPD es una
herramienta pedagógica válida y necesaria en la educación tecnológica contemporánea.
REFERENCIAS BIBLIOGRÁFICAS
Adell, J., & Castañeda, L. (2019). Tecnologías para transformar la educación. Alfabetizaciones y
tecnologías de la información y la comunicación. Ediciones AKAL.
https://doi.org/10.6035/9788417215724
Area, M. (2018). La metamorfosis digital del material didáctico tras el paréntesis Gutenberg.
RELATEC: Revista Latinoamericana de Tecnología Educativa, 17(2), 13-28.
https://doi.org/10.17398/1695-288X.17.2.13
pág. 9403
Coll, C., Mauri, T., & Onrubia, J. (2018). Análisis de los usos reales de las TIC en contextos educativos
formales: una aproximación sociocultural. Revista Electrónica de Investigación Educativa,
20(1), 1-15. https://doi.org/10.24320/redie.2018.20.1.1663
Díaz-Barriga, F. (2020). Los profesores ante las innovaciones educativas. Revista Iberoamericana de
Educación Superior, 11(30), 3-19. https://doi.org/10.22201/iisue.20072872e.2020.30.623
Field, A. (2018). Discovering statistics using IBM SPSS statistics (5ª ed.). SAGE.
García-Valcárcel, A., & Basilotta, V. (2017). Aprendizaje basado en proyectos (ABP): Evaluación desde
la perspectiva de alumnos de Educación Primaria. Revista Complutense de Educación, 28(1),
161-178. https://doi.org/10.5209/rev_RCED.2017.v28.n1.48781
Gisbert, M., & Lázaro, J. L. (2021). Competencia digital y curriculum. Teoría de la Educación, 33(1),
101-120. https://doi.org/10.14201/teri.23456
Gros, B. (2018). Aprendizaje ubicuo y móvil mediante «gamification». *Pixel-Bit: Revista de Medios
y Educación, 52*, 113-128. https://doi.org/10.12795/pixelbit.2018.i52.08
Hernández-Sampieri, R., & Mendoza, C. (2018). Metodología de la investigación: Las rutas cuantitativa,
cualitativa y mixta. McGraw-Hill.
ISTE. (2021). Estándares para estudiantes. https://www.iste.org/standards/iste-standards-for-students
Larmer, J., Mergendoller, J., & Boss, S. (2015). Setting the standard for project based learning. ASCD.
Marquès, P. (2019). Impacto de las TIC en educación: Funciones y limitaciones. Didáctica, Innovación
y Multimedia, 37, 1-15. https://ddd.uab.cat/record/123456
Ministerio de Educación del Ecuador. (2023). Currículo de Bachillerato Técnico en Informática.
https://educacion.gob.ec
Mozilla Foundation. (2022). Web Literacy Framework. https://foundation.mozilla.org/es/web-literacy/
Pimienta, J. H. (2018). Metodología de proyectos como estrategia didáctica. Revista Educación y
Pedagogía, 30(77), 123-140. https://doi.org/10.17533/udea.eyp.v30n77a08
Prendes, M. P., & Gutiérrez, I. (2020). Competencia digital: una necesidad del profesorado del siglo
XXI. RED: Revista de Educación a Distancia, 20(63), 1-22. https://doi.org/10.6018/red.410121
Salinas, J. (2020). Innovación educativa y uso de las TIC. Revista Universidad y Sociedad del
Conocimiento, 17(1), 1-15. https://doi.org/10.7238/rusc.v17i1.3333
pág. 9404
Suárez-Guerrero, C., Lloret-Catalá, C., & Mengual-Andrés, S. (2021). Percepción docente sobre la
transformación digital del aula. Comunicar, 29(66), 21-31. https://doi.org/10.3916/C66-2021-
02
Tourón, J., Martín, D., & Navarro, E. (2018). Validación de constructo de un instrumento para medir la
competencia digital docente. Revista Española de Pedagogía, 76(269), 25-54.
https://doi.org/10.22550/REP76-1-2018-09
UNESCO. (2018). Marco de competencias digitales para docentes.
https://unesdoc.unesco.org/ark:/48223/pf0000265723
