fsff

1. Planificación Curricular: Algoritmo y Programación con
HTML, CSS y JavaScript
1. Introducción
La presente planificación curricular está diseñada para una unidad de "Algoritmo y
Programación" que busca expandir las habilidades de los estudiantes más allá de los
fundamentos de lógica de programación, que ya han sido cubiertos con PSeInt. El
objetivo principal de esta unidad es introducir a los estudiantes en el ámbito del
desarrollo web fundamental, dotándolos de las bases esenciales de HTML para
estructurar contenido, CSS para estilizarlo y JavaScript para añadir interactividad y
lógica dinámica a las páginas web. Se busca que, al finalizar el curso, los estudiantes
sean capaces de "crear y estructurar páginas web básicas usando HTML y estilarlas
con CSS," así como "desarrollar páginas web dinámicas con características
interactivas usando JavaScript".1
Este enfoque práctico y progresivo tiene como fin
último preparar a los estudiantes para roles de desarrollo front-end, capacitándolos
para crear "interfaces de usuario amigables y experiencias que impulsen el éxito del
sitio web".2
El perfil del estudiante para esta unidad es particular, ya que se trata de individuos
que poseen una base sólida en lógica de programación, familiaridad con conceptos
como variables, condicionales, bucles y funciones, gracias a su experiencia previa
con PSeInt. Esta experiencia previa representa una ventaja pedagógica considerable,
dado que la "lógica de programación" es una habilidad fundamental y transferible a
cualquier lenguaje de programación.3
La transición a HTML, CSS y JavaScript
implicará aplicar estos conceptos lógicos a un nuevo paradigma, el entorno del
navegador y el Modelo de Objeto de Documento (DOM), así como aprender la sintaxis
específica de JavaScript, un lenguaje "ubicuo, popular e increíblemente poderoso de
la web".5
La experiencia previa de los estudiantes con PSeInt es un factor clave que puede
acelerar significativamente su aprendizaje de JavaScript. Dado que ya comprenden
los conceptos de variables, estructuras de control (como condicionales y bucles) y
funciones, la instrucción en JavaScript puede centrarse en cómo estos conceptos
familiares se expresan sintácticamente en el nuevo lenguaje y, de manera crucial,
cómo interactúan con los elementos visuales de una página web a través del DOM. Al
no tener que re-enseñar la lógica de programación desde cero, el tiempo de clase
puede dedicarse de manera más eficiente a las particularidades del desarrollo web,
como la manipulación del DOM y el manejo de eventos. Esta estrategia no solo

2. optimiza el tiempo de instrucción, sino que también refuerza la confianza de los
estudiantes al demostrarles que sus habilidades existentes son directamente
aplicables y valiosas en este nuevo campo, haciendo que el material nuevo se perciba
como una extensión natural de su conocimiento previo.
2. Consideraciones del Calendario y Duración
La planificación de esta unidad curricular se ha ajustado a las fechas proporcionadas
por el usuario, que van desde el 2 de junio de 2025 hasta el 31 de julio de 2025. Al
considerar un esquema de clases una vez por semana, es fundamental calcular el
número exacto de sesiones disponibles. La fecha de inicio del lunes 2 de junio de
2025 es consistente con calendarios académicos consultados.6
El desglose de las fechas de clase semanales, asumiendo que las sesiones se
imparten los lunes para maximizar la duración del curso, es el siguiente:
● Junio 2025: Lunes 2, Lunes 9, Lunes 16, Lunes 23, Lunes 30 (5 clases).
● Julio 2025: Lunes 7, Lunes 14, Lunes 21, Lunes 28 (4 clases).
Esto suma un total de 9 semanas efectivas de clase.
Se ha realizado una revisión de los días festivos nacionales que podrían afectar el
cronograma dentro del período especificado.6
Los días festivos identificados son el
jueves 19 de junio de 2025 (Juneteenth) y el viernes 4 de julio de 2025 (Independence
Day). Dado que las clases están programadas para los lunes, ninguno de estos días
festivos impacta directamente el horario semanal de las sesiones, asegurando que las
9 clases se puedan impartir sin interrupciones por feriados.
La solicitud inicial del usuario mencionaba una planificación para 12 clases; sin
embargo, se reconocía la posibilidad de que este número no se cumpliera dentro del
período de fechas proporcionado ("no se si se cumplan lo de las doces clases pero
trata de hacerla con las semanas que te di fehca"). Esta flexibilidad es crucial, ya que
el cálculo de semanas efectivas revela que solo se dispone de 9 sesiones. Por lo
tanto, el plan curricular se ha ajustado para cubrir los fundamentos esenciales de
HTML, CSS y JavaScript en este plazo de 9 clases.
La discrepancia entre el número deseado de clases (12) y las semanas disponibles (9)
tiene una implicación directa en el diseño del currículo. Esta reducción del 25% en el
tiempo de instrucción para un curso que introduce tres nuevas tecnologías
fundamentales exige un enfoque altamente estratégico y condensado. El plan debe
priorizar los conceptos más esenciales y la aplicación práctica inmediata sobre una

3. cobertura exhaustiva o la exploración de temas avanzados. El objetivo principal es
asegurar que los estudiantes adquieran una comprensión sólida de los fundamentos
absolutos necesarios para construir una página web funcional y básica. Esta
priorización es vital para evitar la sobrecarga de información y garantizar que los
estudiantes puedan asimilar y aplicar los conocimientos clave de manera efectiva
dentro del tiempo limitado.
3. Estructura Pedagógica y Progresión del Contenido
La filosofía de enseñanza para esta unidad se centrará en un modelo de "aprendizaje
práctico y progresivo". Esto implica un fuerte énfasis en el "aprender haciendo",
donde cada concepto teórico se complementa inmediatamente con ejercicios
prácticos y la construcción de componentes web reales. Este enfoque se alinea con
las metodologías exitosas de plataformas de aprendizaje reconocidas como The Odin
Project 8
y freeCodeCamp 10
, las cuales son elogiadas por su "introducción práctica" 8
y sus "tutoriales y proyectos interactivos".11
La progresión de los temas se diseñará
de manera gradual, comenzando con los fundamentos de HTML para establecer la
estructura, avanzando a la estilización con CSS, y culminando con la introducción de
la interactividad mediante JavaScript. Este proceso permitirá a los estudiantes
construir sobre conocimientos previos, reforzando el aprendizaje a medida que
avanzan.
En cuanto a la integración de HTML, CSS y JavaScript, si bien la secuencia tradicional
de enseñanza suele ser HTML completo, luego CSS completo, y finalmente JavaScript
completo, una integración más iterativa y entrelazada ha demostrado ser más
efectiva para el aprendizaje práctico, especialmente para principiantes. Tal como se
observa en la metodología de The Odin Project, "se empieza con HTML/CSS, se pasa
a JavaScript, se vuelve a HTML/CSS, se regresa a JavaScript, y así sucesivamente. Se
ha encontrado que este enfoque es bastante efectivo".9
Este método permite una
"repetición espaciada automática" de los conceptos y "previene el aburrimiento" al
cambiar constantemente el contexto de aprendizaje.9
La razón detrás de esta estrategia de entrelazado radica en la naturaleza sinérgica de
las tres tecnologías en el desarrollo web. Múltiples fuentes expertas destacan la
importancia de integrar HTML, CSS y JavaScript, refiriéndose a ellas como la "santa
trinidad del desarrollo web".2
Un enfoque estrictamente lineal podría llevar a que los
estudiantes no comprendan cómo las piezas encajan entre sí o cómo construir algo
verdaderamente funcional hasta etapas muy avanzadas del curso, lo que podría
generar desmotivación. Al introducir HTML básico, aplicar inmediatamente CSS

4. básico para estilizarlo, y luego añadir JavaScript básico para interactuar con esos
elementos HTML ya estilizados, los estudiantes obtienen una comprensión inmediata
y tangible de cómo estas tecnologías colaboran. Esta aplicación inmediata y la
retroalimentación visual no solo refuerzan el aprendizaje, sino que también aumentan
el compromiso del estudiante y reducen la probabilidad de agotamiento. El resultado
es que los estudiantes pueden "construir productos tangibles y compartibles en el
menor tiempo posible" 9
, lo cual es un poderoso factor de motivación para los
principiantes. Esta estrategia pedagógica va más allá de la simple cobertura de
temas, fomentando una comprensión holística del desarrollo web como una disciplina
integrada, donde cada componente desempeña un papel vital en la creación de una
experiencia de usuario funcional y atractiva.
4. Planificación Detallada de Contenidos por Semana
Dado que el período de clases permite 9 semanas efectivas, el plan se ajustará para
cubrir los fundamentos esenciales de HTML, CSS y JavaScript en este plazo. Se
priorizarán los conceptos clave y las actividades prácticas sobre la cobertura
exhaustiva de temas avanzados, asegurando una base sólida para los estudiantes.
La siguiente tabla, Tabla 1: Planificación Semanal de Contenidos, es una entrega
explícita requerida por el usuario y representa una hoja de ruta clara y estructurada
para el instructor. Permite visualizar la progresión del curso, asegurar la cobertura de
temas esenciales y gestionar el tiempo de clase de manera efectiva. Al ser
descargable en formato Excel/CSV, facilita su uso y adaptación por parte del usuario,
sirviendo como una guía práctica y adaptable para la implementación del curso.
Tabla 1: Planificación Semanal de Contenidos (Descargable en formato
Excel/CSV)
Semana Fecha (Lunes) Área Temática Conocer
(Conceptos Clave)
1 2 de junio de 2025 Introducción al
Desarrollo Web y
HTML Básico
¿Qué es el desarrollo
web (front-end vs.
back-end)? Cliente-
servidor y HTTP.12
Introducción a HTML:
estructura básica de

5. un documento
HTML.3
Elementos y
etiquetas HTML.3
Atributos.3
Boilerplate HTML.8
Configuración del
entorno de desarrollo
(editor de código
como VS Code,
navegador).5
2 9 de junio de 2025 Contenido HTML
Estructurado
Párrafos,
encabezados, saltos
de línea.3
Listas
(ordenadas,
desordenadas, de
definición).3
Enlaces
(absolutos vs.
relativos, enlaces a
email, anclas).3
Imágenes (inserción,
atributos alt, enlaces
de imagen).3
Elementos
semánticos HTML5
(div, section, header,
footer, nav, main,
article).2
3 16 de junio de 2025 Introducción a CSS:
Estilo y Selectores
¿Qué es CSS?
Beneficios.2
Reglas
CSS, selectores (tipo,
clase, ID, atributos,
pseudoclases).2
La
cascada,
especificidad y
herencia.3
Tipos de
estilos (externos,
incrustados, en

6. línea).3
Propiedades
básicas: color,
background, font-
family, font-size,
text-align.3
El modelo
de caja (Box Model):
margin, border,
padding, content.3
4 23 de junio de 2025 Diseño Responsivo
Básico con CSS
Concepto de diseño
responsivo: la
necesidad de
adaptar sitios web a
diferentes
dispositivos y
tamaños de pantalla.2
Unidades de medida
relativas (em, rem, %,
vw, vh) vs. absolutas
(px).3
Media Queries:
sintaxis y uso para
aplicar estilos
condicionalmente.2
Imágenes
responsivas (srcset,
picture element).10
5 30 de junio de 2025 Layouts Avanzados
con Flexbox y Grid
Flexbox:
introducción, display:
flex, flex-direction,
justify-content, align-
items, flex-wrap,
flex-grow, flex-
shrink.2
CSS Grid:
introducción, display:
grid, grid-template-
columns, grid-
template-rows, grid-
gap, grid-area.2
Diferencias clave y

7. cuándo usar cada
uno para diferentes
escenarios de layout.
6 7 de julio de 2025 Fundamentos de
JavaScript: Sintaxis y
Lógica
¿Qué es JavaScript?
¿Cómo se usa en
desarrollo web?.3
Dónde escribir
código JavaScript.3
Variables (var, let,
const - diferencias y
mejores prácticas).2
Tipos de datos.2
Operadores
(aritméticos,
comparación,
lógicos, asignación).3
Estructuras de
control:
condicionales (if/else,
switch, operador
ternario).3
Bucles
(for, while, do...while,
forEach para
arrays).3
Funciones
(declaración,
llamada, parámetros,
retorno de valores).3
7 14 de julio de 2025 Manipulación del
DOM y Eventos
El Modelo de Objeto
de Documento
(DOM): ¿qué es y
cómo JavaScript
interactúa con él?.3
Acceso a elementos
HTML (por ID, clase,
etiqueta, selector de
consulta como
querySelector/query
SelectorAll).3

8. Modificación de
contenido
(textContent,
innerHTML) y
atributos de
elementos
(setAttribute,
removeAttribute).
Creación y
eliminación de
elementos
dinámicamente.
Manejo de eventos:
on-event handlers vs.
addEventListener().3
Eventos comunes
(click, submit,
keydown, mouseover,
input).
8 21 de julio de 2025 Formularios y
Validación con
JavaScript
Elementos de
formulario HTML
(input de varios tipos,
textarea, select,
button).3
Envío de
formularios y el
comportamiento por
defecto del
navegador.
Validación de
formularios con
JavaScript 1
: acceso
a valores de entrada,
comprobación de
formatos,
visualización de
mensajes de error.
Expresiones
regulares básicas
para patrones de
validación comunes
(emails, números).3

9. Prevención del envío
por defecto
(event.preventDefaul
t()).
9 28 de julio de 2025 Proyecto Final y
Próximos Pasos
Revisión y
consolidación de
conceptos clave de
HTML, CSS y
JavaScript. Sesión de
trabajo intensivo en
el proyecto final, con
tiempo para
preguntas y
depuración.
Presentación de
proyectos finales (o
avances
significativos).
Recursos para
aprendizaje continuo
y auto-dirigido (MDN
Web Docs, The Odin
Project,
freeCodeCamp,
Coursera).8
Conceptos
avanzados para
explorar después del
curso (APIs,
frameworks
JavaScript como
React/Vue, desarrollo
back-end con
Node.js, control de
versiones avanzado
con Git/GitHub).1
La planificación de la Semana 1, que se centra en el establecimiento de fundamentos
y el entorno de desarrollo, es de suma importancia. Múltiples fuentes de currículos
autorizados 5
dedican las lecciones iniciales a la configuración del entorno de
desarrollo y a la introducción de conceptos web fundamentales. Para los estudiantes

10. que se inician en el desarrollo web, la configuración inicial puede ser una barrera
significativa; un proceso de configuración guiado y sin problemas minimiza la
frustración temprana y permite a los estudiantes pasar rápidamente a la codificación
real. Un entorno de desarrollo bien configurado y comprendido reduce los obstáculos
técnicos y aumenta el tiempo de práctica productiva, lo que, a su vez, construye
confianza y mantiene el impulso inicial. Esto no se limita a la instalación de software,
sino que también introduce a los estudiantes a las herramientas profesionales y al
contexto operativo básico (cómo funciona la web) que utilizarán a lo largo de su
trayectoria de desarrollo, fomentando buenas prácticas desde el principio.
La Semana 2, enfocada en el contenido HTML estructurado, destaca la importancia
de la semántica y la accesibilidad desde el principio. No es suficiente con
simplemente colocar contenido en una página; el contenido debe estar estructurado
de manera significativa. La enseñanza de HTML semántico desde el inicio previene el
desarrollo de malos hábitos de codificación, como la dependencia excesiva de la
etiqueta div para todo. El uso de marcado semántico mejora la legibilidad del código
para los desarrolladores, contribuye a la optimización para motores de búsqueda
(SEO) 2
, y es crucial para la accesibilidad web, ya que los lectores de pantalla y las
tecnologías de asistencia dependen en gran medida de la estructura semántica para
interpretar el contenido para usuarios con discapacidades. Introducir y enfatizar los
principios de HTML semántico y la accesibilidad básica desde el principio lleva a que
los estudiantes escriban código más robusto, mantenible e inclusivo, lo cual es una
habilidad crítica en el desarrollo web profesional.
La Semana 3, que introduce CSS, subraya la necesidad de dominar los selectores y el
Modelo de Caja como fundamentos del estilo. Los selectores CSS y el Modelo de Caja
son conceptos fundamentales consistentemente destacados en todos los esquemas
curriculares relevantes.2
Sin una comprensión sólida de cómo apuntar con precisión a
los elementos HTML (selectores) y cómo los elementos ocupan e interactúan con el
espacio en una página (Modelo de Caja), el estilo CSS efectivo y predecible es
imposible. Estos son los bloques de construcción absolutos del diseño visual en la
web. Una comprensión profunda y práctica de estos conceptos capacita a los
estudiantes para aplicar estilos con precisión, depurar problemas de diseño y lograr
los resultados visuales deseados. Por el contrario, una comprensión débil en este
punto conducirá a una frustración significativa más adelante. Este conocimiento
fundamental es crítico antes de pasar a técnicas de diseño más complejas como
Flexbox o Grid, asegurando que los estudiantes desarrollen una comprensión
conceptual de por qué los estilos se comportan de la manera en que lo hacen, en

11. lugar de simplemente memorizar propiedades o depender del ensayo y error.
La Semana 4, dedicada al diseño responsivo básico con CSS, resalta la relevancia
inmediata de esta habilidad en el desarrollo web moderno. El diseño responsivo es
consistentemente enfatizado como un principio y una habilidad clave en el desarrollo
web contemporáneo.2
En el panorama actual de dispositivos diversos (teléfonos
inteligentes, tabletas, computadoras de escritorio), un sitio web debe adaptarse con
fluidez a varios tamaños de pantalla. Un sitio no responsivo se considera obsoleto y
ofrece una mala experiencia de usuario. Introducir los principios de diseño responsivo
y las Media Queries desde el principio significa que los estudiantes construyen
inmediatamente sitios web que son funcionales y visualmente atractivos en una
amplia gama de dispositivos, lo que hace que sus proyectos iniciales sean más
relevantes e impresionantes. Esta sección lleva a los estudiantes más allá del diseño
de páginas estáticas hacia la adaptabilidad dinámica, un pilar fundamental del
desarrollo front-end moderno, e inculca una mentalidad de "mobile-first" o
"responsive-first", que es una práctica recomendada en la industria.
La Semana 5, enfocada en layouts avanzados con Flexbox y Grid, presenta
herramientas esenciales para diseños complejos y eficientes. Flexbox y CSS Grid son
universalmente reconocidos como los sistemas de diseño más importantes y
potentes en CSS moderno, frecuentemente destacados en los esquemas
curriculares.2
The Odin Project incluso dedica trabajo de proyecto específico a
Flexbox.8
Los métodos de diseño tradicionales (por ejemplo, el uso extensivo de float
o position para diseños de página) son a menudo engorrosos, menos intuitivos y
propensos a problemas para diseños complejos. Flexbox y Grid ofrecen formas
robustas, semánticas y altamente eficientes de organizar el contenido. Dominar estos
sistemas de diseño modernos permite a los estudiantes crear estructuras de página
sofisticadas, adaptables y mantenibles con significativamente menos esfuerzo y más
previsibilidad. Esto representa un gran salto en sus capacidades prácticas de
desarrollo web, preparándolos para construir interfaces de grado profesional que
cumplan con los estándares de diseño y desarrollo contemporáneos.
La Semana 6, que introduce los fundamentos de JavaScript, establece una conexión
directa con el conocimiento previo de PSeInt de los estudiantes. Los temas de esta
semana (variables, tipos de datos, operadores, condicionales, bucles, funciones) son
los bloques de construcción centrales de la lógica de programación. El usuario
especificó que los estudiantes ya han cubierto estos fundamentos con PSeInt. Por lo
tanto, los estudiantes ya poseen una comprensión conceptual de lo que hacen estas

12. construcciones de programación y por qué se utilizan. El objetivo principal de
aprendizaje aquí cambia de "¿qué es un bucle?" a "¿cómo escribo un bucle en
JavaScript?". Al trazar paralelismos explícitos y mapear los conceptos de PSeInt a sus
equivalentes en JavaScript, los estudiantes pueden transferir más fácilmente su
comprensión lógica. Esto reduce la carga cognitiva asociada con el aprendizaje de
nueva sintaxis y paradigmas, acelerando su adquisición de los fundamentos de
JavaScript. Este puente pedagógico es crucial para una transición más fluida,
reforzando los fundamentos de programación existentes en lugar de tratar
JavaScript como un tema completamente nuevo.
La Semana 7, dedicada a la manipulación del DOM y los eventos, representa el
corazón de la interactividad web. La manipulación del DOM y el manejo de eventos se
presentan consistentemente como los mecanismos principales para añadir
interactividad a las páginas web utilizando JavaScript.1
Esta semana marca el punto
crucial donde JavaScript va más allá de las simples salidas de consola y afecta
directamente los aspectos visuales e interactivos de la interfaz de usuario. Es donde
los estudiantes realmente ven su código "cobrar vida" en la web. Una comprensión
sólida de cómo JavaScript puede leer, modificar y crear elementos dentro del DOM, y
cómo puede responder a diversas acciones del usuario, es el habilitador directo para
construir características dinámicas como formularios interactivos, presentaciones de
imágenes, sistemas de menú sofisticados y aplicaciones de una sola página.1
Esta
semana marca un hito significativo en el curso, ya que los estudiantes obtienen el
poder de transformar páginas web estáticas en aplicaciones atractivas y receptivas al
usuario, cumpliendo un objetivo central del curso y abordando directamente el deseo
del usuario de enseñar "lógica con este lenguaje" en un contexto web.
La Semana 8, que aborda formularios y validación con JavaScript, se enfoca en una
aplicación práctica de la lógica y el DOM para la interacción real. La validación de
formularios es una aplicación específica, altamente práctica de JavaScript
mencionada en varios esquemas curriculares.1
Este tema requiere inherentemente
que los estudiantes integren su conocimiento de HTML (estructuración de
formularios), CSS (estilización de elementos de formulario y mensajes de error) y
JavaScript (implementación de lógica de validación, manipulación del DOM para
mostrar retroalimentación y manejo de eventos de envío de formularios). La
construcción y validación de formularios interactivos proporciona un escenario
concreto y del mundo real para aplicar todos los conceptos aprendidos de manera
sinérgica. Esto mejora las habilidades de resolución de problemas de los estudiantes,
les enseña sobre la integridad de los datos y los introduce a aspectos cruciales de la

13. experiencia del usuario.4
Esta sección lleva a los estudiantes de la comprensión
teórica a la construcción de componentes funcionales que manejan la entrada del
usuario de manera segura y efectiva, lo cual es una habilidad crítica para casi
cualquier aplicación web que recopila datos.
Finalmente, la Semana 9, dedicada al proyecto final y los próximos pasos, sirve como
una consolidación del aprendizaje, fomentando la autonomía y delineando una ruta
de aprendizaje continuo. Esta semana está diseñada como una culminación,
permitiendo a los estudiantes integrar todas las habilidades aprendidas en un
proyecto integral.1
Además, varias fuentes enfatizan la importancia del aprendizaje
continuo y la provisión de recursos.8
El panorama del desarrollo web evoluciona
rápidamente, y ningún curso introductorio puede cubrir todos los aspectos. El
objetivo es equipar a los estudiantes no solo con habilidades, sino con la capacidad
de seguir aprendiendo de forma independiente. Un proyecto final bien definido
permite a los estudiantes demostrar su dominio integrado y construir una pieza
tangible para su portafolio. Al mismo tiempo, guiarlos hacia recursos adicionales
confiables y delinear posibles próximos pasos los capacita para convertirse en
aprendices autónomos y de por vida, lo cual es invaluable en una industria dinámica.
Esta semana transforma el curso de una experiencia de aprendizaje discreta en una
plataforma de lanzamiento para el autoaprendizaje futuro y el crecimiento
profesional, alineándose con el objetivo de pasar de "principiante" a "cómodo" 11
y
fomentando una verdadera autonomía del desarrollador.
5. Actividades Prácticas y Dinámicas para el Aprendizaje
Las actividades prácticas y dinámicas son esenciales para el aprendizaje de la
programación web, especialmente para estudiantes principiantes. Se buscará un
equilibrio entre ejercicios guiados que construyan la memoria muscular de la
codificación y proyectos más abiertos que fomenten la resolución de problemas y la
creatividad.
Actividades Sencillas y Fundamentales (Ejercicios de Codificación, Mini-
Proyectos):
● Ejercicios de Codificación Guiados:
○ HTML: Los estudiantes crearán un documento HTML simple 3
, añadirán
párrafos, encabezados y texto 3
, insertarán enlaces e imágenes 3
y
construirán diferentes tipos de listas.3
Estos ejercicios están diseñados para
consolidar la sintaxis básica y la estructura del documento.
○ CSS: Se practicará la creación de hojas de estilo externas, incrustadas e en

14. línea.3
Los estudiantes estilizarán fuentes, colores y propiedades de texto 3
y
aplicarán el modelo de caja a elementos HTML 3
para comprender cómo los
elementos ocupan espacio.
○ JavaScript: Se realizarán ejercicios para escribir mensajes de alerta y
cambiar el color de fondo de un elemento HTML.3
Se trabajará con variables,
arrays y operadores en la consola del navegador.3
Los estudiantes escribirán
funciones básicas que realicen cálculos simples 3
y aprenderán a acceder y
manipular elementos del DOM, como cambiar el texto de un párrafo o añadir
un elemento a una lista.3
● Mini-Proyectos Progresivos:
○ Proyecto: Página de Recetas (HTML Foundations): Un proyecto inicial
para solidificar el uso de HTML para estructurar contenido con enlaces,
imágenes y listas.8
○ Proyecto: Página de Aterrizaje (Flexbox): Un proyecto para aplicar Flexbox
en la creación de un diseño de página responsivo y moderno.8
○ Construir un "Cat Photo App" o similar: Un proyecto guiado para aprender
HTML y CSS básicos, con enfoque en la aplicación de estilos y la
comprensión de la estructura.10
○ Crear un formulario de registro/pedido simple: Este proyecto integrará
HTML para la estructura del formulario, CSS para su estilo y JavaScript para
la validación de los datos de entrada.3
Sugerencias de Actividades Dinámicas e Interactivas (Juegos de Codificación,
Herramientas Online):
● Juegos de Codificación:
○ Flexbox Froggy y Grid Garden (Codepip): Estos juegos interactivos son
altamente recomendados para dominar los conceptos de Flexbox y CSS Grid
de manera lúdica y visual.17
Transforman el aprendizaje de propiedades de
diseño complejas en un desafío atractivo.
○ HTML Academy: Esta plataforma ofrece "cursos interactivos profundos" con
"teoría muy fácil de entender" y "práctica inmediata".18
Es una excelente
herramienta para reforzar conceptos de HTML y CSS de forma autónoma,
permitiendo a los estudiantes aprender a su propio ritmo.
○ Codepip (otros juegos): Se puede explorar otros juegos de Codepip como
Nester (para HTML), CSS Scoops (para Selectores CSS) o Stringo (para
Strings de JavaScript) para practicar habilidades específicas de HTML, CSS y
JavaScript a través de desafíos gamificados.17

15. ○ Scratch: Aunque es más visual y basado en bloques, Scratch puede ser útil
para reforzar la lógica de eventos y secuencias en una interfaz amigable
antes de sumergirse completamente en JavaScript puro, especialmente para
estudiantes que aún están consolidando la lógica de programación.19
● Herramientas Online y Entornos Interactivos:
○ JSFiddle/CodePen: Estas plataformas en línea permiten a los estudiantes
escribir y probar código HTML, CSS y JavaScript directamente en el
navegador. Facilitan la experimentación rápida, el compartir código y la
depuración colaborativa (Hands-On Lab: Intro to HTML (JSFiddle), Enhancing
JavaScript Skills using JSFiddle - 1
).
○ Consola del Navegador (Developer Tools): Es fundamental enseñar a los
estudiantes a usar las herramientas de desarrollador del navegador (ej.
Chrome DevTools, Firefox Developer Tools) para inspeccionar elementos
HTML, modificar estilos CSS en tiempo real y depurar código JavaScript. Esta
es una "habilidad esencial" 11
y fundamental para la resolución de problemas.3
La integración de la gamificación y la depuración activa es crucial para la retención
de conocimientos y el desarrollo de habilidades de resolución de problemas.
Múltiples fuentes 17
destacan el valor del aprendizaje basado en juegos y los entornos
interactivos, mientras que la importancia de las herramientas de desarrollo del
navegador es consistentemente señalada.3
Los formatos tradicionales de clase
pueden llevar a un aprendizaje pasivo. La gamificación, a través de plataformas como
Codepip o HTML Academy, aprovecha la motivación intrínseca, transformando el
aprendizaje en un desafío agradable que ayuda a que los conceptos "se fijen por
períodos más largos" 9
y reduce el agotamiento.
Además, la introducción temprana y consistente de las herramientas de desarrollo del
navegador no es solo una actividad dinámica, sino una habilidad fundamental e
indispensable para cualquier desarrollador web. Empodera a los estudiantes para
comprender cómo se renderiza su código, depurar problemas de forma
independiente y experimentar en tiempo real. Esto aborda directamente el objetivo
de aprendizaje de desarrollar "habilidades de resolución de problemas para
solucionar, encontrar y corregir errores".15
La relación causal es clara: métodos de
aprendizaje interactivos y atractivos conducen a una mayor motivación estudiantil,
una mejor retención de conceptos y habilidades más sólidas para la resolución de
problemas. La enseñanza proactiva de habilidades de depuración con herramientas
reales reduce significativamente la frustración del estudiante y aumenta la
autosuficiencia, preparándolos para los desafíos del desarrollo en el mundo real. Este

16. enfoque transforma el aprendizaje pasivo en exploración activa, experimentación y
resolución crítica de problemas, lo cual es crucial para formar programadores
competentes y responde directamente a la solicitud del usuario de "actividades que
sean más dinámicas".
6. Estrategias de Evaluación y Ponderación
La evaluación del curso se diseñará para medir tanto la comprensión conceptual de
los principios de HTML, CSS y JavaScript como la aplicación práctica de estas
habilidades en el desarrollo web. El enfoque principal estará en la capacidad de los
estudiantes para crear soluciones funcionales y que cumplan con los estándares de
la industria.
La siguiente tabla, Tabla 2: Plan de Evaluación y Ponderación, es la segunda entrega
explícita requerida por el usuario. Proporciona una transparencia total sobre cómo se
evaluará a los estudiantes, qué se espera de ellos en cada etapa y cómo se
ponderará su rendimiento general en el curso. Esta claridad es crucial para la
planificación del instructor, la motivación del estudiante al entender el peso de cada
actividad, y la alineación con los objetivos de aprendizaje. Al ser descargable en
formato Excel/CSV, facilita su integración en los sistemas de gestión de aprendizaje y
su comunicación a los estudiantes.
Tabla 2: Plan de Evaluación y Ponderación (Descargable en formato Excel/CSV)
Semana Fecha (Lunes) Área Temática Técnica de
Evaluación
Ponderación
1 2 de junio de
2025
Introducción al
Desarrollo Web
y HTML Básico
Ejercicio
Práctico en
Clase (Creación
de HTML
Boilerplate y uso
de Elementos
Básicos)
5%
(Participación/T
areas)
2 9 de junio de
2025
Contenido
HTML
Estructurado
Mini-proyecto:
Página de
Recetas (HTML
puro)
10% (Proyecto)

17. 3 16 de junio de
2025
Introducción a
CSS: Estilo y
Selectores
Quiz Corto
(Conceptos de
Selectores CSS,
Cascada y Box
Model)
5% (Quiz)
4 23 de junio de
2025
Diseño
Responsivo
Básico con CSS
Ejercicio
Práctico Guiado
(Aplicación de
Media Queries
para un diseño
responsivo
simple)
5%
(Participación/T
areas)
5 30 de junio de
2025
Layouts
Avanzados con
Flexbox y Grid
Mini-proyecto:
Recrear Layout
complejo
usando Flexbox
o Grid
10% (Proyecto)
6 7 de julio de
2025
Fundamentos
de JavaScript:
Sintaxis y Lógica
Examen Corto
(Fundamentos
de JavaScript:
Variables, Tipos
de Datos,
Operadores,
Condicionales,
Bucles,
Funciones)
10% (Examen)
7 14 de julio de
2025
Manipulación
del DOM y
Eventos
Ejercicio
Práctico:
Manipulación
del DOM y
Eventos (ej.
Contador de
clics)
5%
(Participación/T
areas)
8 21 de julio de
2025
Formularios y
Validación con
Proyecto
Intermedio:
15% (Proyecto)

18. JavaScript Formulario con
Validación
JavaScript
9 28 de julio de
2025
Proyecto Final y
Próximos Pasos
Proyecto Final:
Desarrollo de
una Página Web
Interactiva (ej.
Portfolio
Personal o
Calculadora)
35% (Proyecto
Final)
Los principios generales de ponderación se basan en un equilibrio entre la evaluación
formativa y sumativa, con un énfasis significativo en la aplicación práctica, lo cual es
coherente con las metodologías de evaluación observadas en cursos similares.20
Los
proyectos prácticos, que acumulan entre el 40% y el 50% de la calificación (con el
Proyecto Final representando el 35% y los Mini-proyectos el 15%), reflejan
directamente la naturaleza práctica y orientada a habilidades del curso. Esta
ponderación incentiva a los estudiantes a sintetizar sus conocimientos y producir
soluciones funcionales, que es el objetivo final del aprendizaje del desarrollo web.
La evaluación formativa se llevará a cabo a través de quizzes cortos (20-30% de la
calificación total) y ejercicios en clase/tareas (20-30% de la calificación total). Estos
elementos, como los "20 desafíos" en freeCodeCamp 10
o los "más de 30 ejercicios"
en New Horizons 3
, proporcionan retroalimentación continua. Esto permite a los
estudiantes identificar y corregir conceptos erróneos de manera temprana y refuerza
el compromiso constante con el material.
La relación entre una estrategia de evaluación bien equilibrada y el rendimiento del
estudiante es directa: una evaluación integral garantiza una valoración completa de
diversas habilidades (conocimiento conceptual, aplicación práctica, resolución de
problemas), motiva el esfuerzo constante a lo largo del curso y ofrece amplias
oportunidades para el aprendizaje correctivo. Este enfoque va más allá de la mera
memorización, valorando la capacidad del estudiante para crear, solucionar
problemas e integrar diferentes tecnologías, que son atributos esenciales de un
desarrollador web competente.
7. Recomendaciones Adicionales para el Instructor

19. Para maximizar la efectividad de este plan curricular, se sugieren las siguientes
recomendaciones adicionales para el instructor:
● Uso de Herramientas de Desarrollo (Navegador, Editor de Código):
○ Es fundamental fomentar el uso de un editor de código moderno, como Visual
Studio Code, desde el principio del curso.5
Estas herramientas están
diseñadas para mejorar la productividad y la experiencia de codificación.
○ Se debe enseñar a los estudiantes a utilizar activamente las herramientas de
desarrollador del navegador (por ejemplo, Chrome DevTools, Firefox
Developer Tools) para inspeccionar elementos HTML, depurar CSS y
JavaScript, y comprender el Modelo de Objeto de Documento (DOM) en
tiempo real.3
Esta es considerada una "habilidad esencial" 11
para cualquier
desarrollador web.
○ La exposición temprana y la instrucción en el uso de estas herramientas
capacitan a los estudiantes con capacidades esenciales de resolución de
problemas y autoaprendizaje, reduciendo su dependencia del instructor para
cada error. Esto los prepara para los flujos de trabajo de desarrollo en el
mundo real y fomenta una mentalidad de solución de problemas
independiente.
● Fomento del Aprendizaje Colaborativo y la Resolución de Problemas:
○ Se debe animar a los estudiantes a trabajar en parejas o pequeños grupos
para resolver problemas de codificación y depurar código. La colaboración
no solo facilita el aprendizaje mutuo, sino que también simula entornos de
desarrollo profesional.
○ Es importante promover la práctica de "preguntar por ayuda" 8
y unirse a
comunidades de aprendizaje, ya sean foros en línea o grupos de estudio.8
Estas comunidades son recursos valiosos para superar obstáculos y obtener
diferentes perspectivas.
○ Se recomienda integrar desafíos que requieran un "pensamiento dinámico" 22
para descomponer problemas grandes en componentes más pequeños y
manejables. Esto entrena a los estudiantes en una habilidad fundamental
para cualquier programador.
● Recursos Complementarios para Estudiantes:
○ Documentación Oficial: Se debe presentar MDN Web Docs (Mozilla
Developer Network) como la fuente principal y más confiable de referencia
para HTML, CSS y JavaScript.9
Acostumbrar a los estudiantes a consultar la
documentación oficial es una habilidad vital.
○ Plataformas Interactivas: Recomendar plataformas como freeCodeCamp 10
,

20. The Odin Project 8
, HTML Academy 18
y Codepip 17
para práctica adicional y
aprendizaje auto-dirigido. Estas plataformas ofrecen ejercicios interactivos y
proyectos que complementan el material del curso.
○ Tutoriales en Video: Complementar las lecciones con recursos visuales de
plataformas como YouTube o Coursera 9
puede ofrecer perspectivas
adicionales y diferentes estilos de enseñanza.
La provisión de una lista curada de recursos confiables y el fomento de su uso
cultivan una mentalidad de aprendizaje continuo y adaptabilidad, que son cruciales
para una carrera exitosa en tecnología. El panorama del desarrollo web evoluciona
rápidamente, y ningún curso único puede cubrirlo todo. Al empoderar a los
estudiantes para que se conviertan en aprendices y solucionadores de problemas
independientes, el curso los prepara para un crecimiento profesional a largo plazo,
yendo más allá de la naturaleza transaccional de un curso para fomentar la
autonomía.
8. Conclusión
Este plan curricular ofrece una ruta estructurada y eminentemente práctica para que
los estudiantes, que ya cuentan con sólidos fundamentos en lógica de programación
gracias a PSeInt, transiten exitosamente al campo del desarrollo web front-end. A
pesar de la limitación de tiempo a 9 semanas efectivas, el diseño del curso prioriza la
adquisición de habilidades fundamentales y la construcción de proyectos tangibles,
asegurando que los estudiantes obtengan una base sólida y aplicable.
El enfoque pedagógico se centra en el aprendizaje práctico y progresivo, integrando
de manera sinérgica HTML, CSS y JavaScript desde las primeras etapas del curso.
Esta metodología, que entrelaza las tres tecnologías, permite a los estudiantes ver
resultados inmediatos y comprender cómo trabajan en conjunto para crear
experiencias web dinámicas. Además, la incorporación de actividades dinámicas,
como juegos de codificación y el uso intensivo de las herramientas de desarrollador
del navegador, no solo aumenta el compromiso de los estudiantes, sino que también
fomenta habilidades críticas de depuración y resolución de problemas.
Al finalizar esta unidad, los estudiantes no solo estarán equipados con las habilidades
esenciales para crear y estilizar páginas web interactivas, sino que también habrán
desarrollado una mentalidad de resolución de problemas, depuración y aprendizaje
continuo. Esta base los prepara para explorar temas más avanzados de forma
autónoma, como frameworks JavaScript modernos (React, Angular, Vue), desarrollo

21. back-end (Node.js), integración de APIs, bases de datos y control de versiones
avanzado con Git/GitHub. En esencia, el curso sirve como una plataforma de
lanzamiento para su desarrollo profesional continuo en el dinámico mundo del
desarrollo web.
Obras citadas
1. Introduction to Web Development with HTML, CSS, JavaScript ..., fecha de
acceso: mayo 23, 2025, https://www.coursera.org/learn/introduction-to-web-
development-with-html-css-javacript
2. Front-End Web Development Mastery: HTML, CSS, JavaScript - Nucamp Coding
Bootcamp, fecha de acceso: mayo 23, 2025,
https://www.nucamp.co/blog/coding-bootcamp-web-development-
fundamentals-frontend-web-development-mastery-html-css-javascript
3. 55320 Programming with HTML, CSS, and JavaScript | New Horizons, fecha de
acceso: mayo 23, 2025,
https://www.newhorizons.com/course-outline/courseid/100001089/coursename/
55320-programming-with-html-css-and-javascript
4. HTML, CSS, JavaScript Online Training Course [Real-Time] - Naresh IT - NareshIT,
fecha de acceso: mayo 23, 2025, https://nareshit.com/courses/html-css-java-
script-online-training
5. HTML, CSS, and Javascript for Web Developers - Coursera, fecha de acceso:
mayo 23, 2025, https://www.coursera.org/learn/html-css-javascript-for-web-
developers
6. Summer 2025 - Registrar - Texas A&M University, fecha de acceso: mayo 23,
2025, https://registrar.tamu.edu/academic-calendar/summer-2025
7. Summer 2025 Academic Calendar, fecha de acceso: mayo 23, 2025,
https://summer.harvard.edu/adult-college-students/calendar/
8. Foundations | The Odin Project, fecha de acceso: mayo 23, 2025,
https://www.theodinproject.com/paths/foundations/courses/foundations
9. I Finished The Odin Project's Foundation Track - DEV Community, fecha de
acceso: mayo 23, 2025, https://dev.to/sydalwedaie/i-finished-the-odin-projects-
foundation-track-58g
10. Free Course: Responsive Web Design from freeCodeCamp | Class ..., fecha de
acceso: mayo 23, 2025, https://www.classcentral.com/course/freecodecamp-
responsive-web-design-34059
11. Learn web development | MDN, fecha de acceso: mayo 23, 2025,
https://developer.mozilla.org/en-US/docs/Learn_web_development
12. Web Development Fundamentals Autumn 2025 T4216 - Education - Jönköping
University, fecha de acceso: mayo 23, 2025,
https://ju.se/en/study-at-ju/courses/programme-course/web-development-
fundamentals-autumn-2025-t4216.html

22. 13. HTML/CSS Skills Assessment: Evaluate Your Web Design Expertise | Coursera,
fecha de acceso: mayo 23, 2025, https://www.coursera.org/resources/html-css-
skill-assessment
14. Top HTML CSS JAVASCRIPT Interview Questions & Answers - H2K Infosys, fecha
de acceso: mayo 23, 2025, https://www.h2kinfosys.com/blog/top-html-css-
javascript-interview-questions-answers/
15. INF 6420: Web Development - School of Information Sciences - Wayne State
University, fecha de acceso: mayo 23, 2025, https://sis.wayne.edu/course/inf6420
16. The Responsive web design course - HTML-CSS - The freeCodeCamp Forum,
fecha de acceso: mayo 23, 2025, https://forum.freecodecamp.org/t/the-
responsive-web-design-course/660199
17. Codepip | Learn to code by playing games, fecha de acceso: mayo 23, 2025,
https://codepip.com/
18. HTML Academy: World's deepest interactive courses in HTML, CSS and
JavaScript, for free, fecha de acceso: mayo 23, 2025, https://htmlacademy.org/
19. 15+ Ways of Teaching Every Student to Code (Even Without a Computer) -
Edutopia, fecha de acceso: mayo 23, 2025, https://www.edutopia.org/blog/15-
ways-teaching-students-coding-vicki-davis
20. COSC-1336 Programming Fundamentals I - Faculty - Austin Community College,
fecha de acceso: mayo 23, 2025,
https://lighthouse.apps.austincc.edu/faculty/syllabus?id=498910
21. Online Course Syllabus CST 2309: Introduction to Web Programming Instructor
Information - City Tech, fecha de acceso: mayo 23, 2025,
https://www.citytech.cuny.edu/computer-systems/docs/courses/CST2309.pdf
22. The complete beginners guide to dynamic programming - Stack Overflow, fecha
de acceso: mayo 23, 2025, https://stackoverflow.blog/2022/01/31/the-complete-
beginners-guide-to-dynamic-programming/