Comprender
¿Qué necesita la persona y qué resultado espera?
Teoría · 16/09/20265 min
Diseña primero.
Comprueba después.
Semana 3 · Una necesidad educativa, una primera arquitectura y un cambio que puedas explicar.
Mg. Max Aldo Hidalgo Chávez
UNIFSLB · Técnicas de Programación II
Escanea el QR o abre el registro. Verifica la confirmación en MAXEDRA. Esta página no registra asistencia.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
01 · Propósito5 min
No comenzamos pidiendo código.
Un docente necesita preparar fichas claras de recursos. Nuestra primera versión recibe título, tipo y duración, comprueba una regla y presenta una ficha.
Organizar
¿Qué corresponde a la pantalla, las reglas y los datos?
Comprobar
¿Qué cambio hiciste y qué evidencia muestra que funciona?
Producto de semana 3: diagnóstico y plantilla explicada. La publicación es una práctica formativa; no agrega una PA.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
02 · Conversamos primero10 min
¿Puedes seguir un dato?
Una entrada
Escribo “Algoritmos” y pulso Preparar ficha. ¿De dónde llega ese texto?
Una función
La aplicación llama a validarRecurso. ¿Qué tarea esperas que cumpla?
Un objeto
La ficha reúne título, tipo y minutos. ¿Qué relación tienen esos datos?
Explica tu hipótesis con tus palabras. “Todavía no lo sé” también ayuda al diagnóstico.
En parejas: una persona sigue el recorrido; la otra pregunta. Luego cambian de papel.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
03 · Decisión de diseño10 min
¿Para quién construimos?
Usuario de referencia
Un docente que prepara recursos para una clase.
Necesidad
Presentar de forma consistente el título, tipo y duración de un recurso.
Límite de esta versión
Una ficha en pantalla. Sin cuentas, varios registros, servidor de datos ni IA integrada.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
04 · Primera mirada de arquitectura10 min
Pantalla, reglas y datos.
PantallaCampos, botón y resultado
→ReglasQué dato aceptamos
→DatosQué describe al recurso
Cambiar el color del botón modifica la presentación. Cambiar la longitud mínima del título modifica una regla.
Las responsabilidades pueden estar en un solo archivo al comenzar. Separarlas en ideas no significa crear tres servidores.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
05 · Honestidad técnica5 min
Un prototipo no es todo el sistema.
Ahora
El navegador interpreta el archivo, valida las entradas y muestra una ficha. Al recargar se pierde la ficha.
Más adelante
El proyecto podrá organizar registros, conservarlos, recuperar respaldos y consultar un servicio según las unidades del curso.
El portal del docente está en Hostinger. Tu proyecto de clase será otra aplicación y tendrá su propio repositorio. No necesitas acceso al alojamiento del docente.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6 · GitHub Docs · Crear un sitio con Pages. Ejemplos y secuencia: elaboración didáctica del curso.
06 · Reconocer, no memorizar10 min
¿Qué papel cumple cada uno?
HTML · estructura
Declara un campo, su etiqueta, un botón y un espacio para el resultado.
CSS · presentación
Define tamaños, separación y adaptación de los paneles a la pantalla.
JavaScript · comportamiento
Lee entradas, construye un objeto, aplica la regla y actualiza el resultado.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
07 · Vamos a observar15 min
Una ficha, un recorrido.
1 · EscriboAlgoritmos · 15 min
→2 · Se agrupaObjeto recurso
→3 · Se compruebavalidarRecurso
→4 · Se muestraFicha en pantalla
Antes de pulsar, anticipa: ¿qué ocurrirá con título vacío? ¿Y con duración 0?
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
08 · Objeto recurso10 min
La ficha no es una variable suelta.
const recurso = {
titulo: "Algoritmos",
tipo: "Actividad",
minutos: 15
};titulo y tipo contienen texto.
minutos contiene un número.
Todos describen el mismo recurso. recurso.titulo permite leer su título.
Cambiar un dato no equivale a cambiar la regla que lo valida.
Base: MDN · Trabajando con objetos. Ejemplos y secuencia: elaboración didáctica del curso.
09 · Función de validación10 min
La regla puede explicarse.
function validarRecurso(recurso) {
if (recurso.titulo.length < configuracion.minimoTitulo) {
return "Escribe un título más largo.";
}
// En la plantilla se comprueban también minutos y tipo.
return "";
}Este es un fragmento simplificado. La versión completa está en la plantilla.
Recibe
Un objeto con título, tipo y minutos.
Decide
Comprueba las condiciones de la ficha.
Devuelve
Un mensaje de error; o texto vacío cuando no hay error.
Base: MDN · Funciones. Ejemplos y secuencia: elaboración didáctica del curso.
10 · Diseñar una mejora10 min
¿Qué decisión vas a modificar?
const configuracion = {
proyecto: "AulaRecursos",
descripcion: "Diseño una ficha clara...",
minimoTitulo: 3
};Reto guiado: exigir al menos 4 caracteres en el título. Antes de editar, explica qué debe pasar con “Sol” y con “Luna”.
El número 4 es una decisión de este ejercicio, no una regla de la universidad. Modifica una sola decisión y conserva una copia anterior.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
11 · Tu primera ficha de diseño10 min
Describe antes de implementar.
Necesidad y usuario
¿Quién necesita qué resultado?
Parte afectada
¿La mejora toca pantalla, regla o dato?
Criterio observable
Con título de 3 caracteres, debe aparecer un mensaje y no crearse una nueva ficha.
Escribe una mejora concreta y explícasela a tu compañero. Después ubica el lugar del código que tendría que cambiar.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
12 · Comprobación10 min
Una mejora necesita evidencia.
Caso válido
Título “Luna”, tipo Actividad, 15 minutos: se muestra la ficha.
Caso inválido
Título “Sol” con mínimo 4: aparece el mensaje; no reemplaza la ficha anterior.
Algo anterior
El botón Limpiar sigue ocultando la ficha y reinicia los campos.
Registra resultado esperado, resultado observado y estado: pendiente, cumple o no cumple. No marques “cumple” antes de ejecutar.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
13 · Prompts escritos10 min
No delegues la comprobación.
DescribeProblema y resultado
→ConsultaPrompt y código mínimo
→RevisaCausa o propuesta
→PruebaResultado real
Para un error: pide una corrección mínima. Para una mejora: pide beneficio, riesgo y pruebas antes del código.
No hay conexión automática a Gemini o ChatGPT. Copia el prompt manualmente. No envíes contraseñas, datos de estudiantes ni la guía privada.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
14 · Compartir la primera versión5 min
Dos enlaces diferentes.
Repositorio en GitHub
Conserva el archivo y una explicación de los cambios. El commit identifica un cambio registrado.
Sitio en GitHub Pages
Permite abrir la aplicación en el navegador. Necesita una configuración de publicación y un archivo de entrada.
Publicarás tu
index.html y tu README.md, no el ZIP del portal, tu respaldo privado ni la guía del docente.Base: GitHub Docs · Crear un sitio con Pages · GitHub Docs · Configurar la publicación. Ejemplos y secuencia: elaboración didáctica del curso.
15 · Uso responsable5 min
Solo datos ficticios.
Antes de compartir
Revisa que no existan DNI, celulares, correos personales, claves ni datos de estudiantes.
En computadora compartida
Exporta tu respaldo y borra solo el borrador de este taller. Cierra tu sesión de GitHub.
Antes de salir
Abre el HTML descargado. Un archivo exportado no demuestra por sí mismo que funciona.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6 · GitHub Docs · Añadir archivos · MDN · localStorage. Ejemplos y secuencia: elaboración didáctica del curso.
16 · Continuidad5 min
Hoy no necesitamos hacerlo todo.
Unidad I
Comprender la base, adaptar una mejora y sustentarla.
Unidad II
Organizar responsabilidades y trabajar con varios registros.
Unidad III
Conservar y recuperar datos, consultar un servicio y comprobar la aplicación.
Publicar es un hito. Explicar y verificar la solución es el aprendizaje.
Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
17 · Antes de la práctica5 min
Del dato a la decisión.
1. Señala la entrada y el resultado.
2. Identifica un objeto y una función.
3. Explica qué regla cambiarías y por qué.
4. Anticipa una prueba normal y una de error.
Compara tus respuestas con el diagnóstico inicial.
Continuar a clase práctica →Base: Sílabo ET505 REV3 · pp. 2–3 y 6. Ejemplos y secuencia: elaboración didáctica del curso.
18 · ReferenciasConsulta
Base de la sesión.
Sílabo ET505 REV3 del 13/09/2026: competencia y resultados en p. 2; semana 3 en p. 3; metodología y evaluación en p. 6.
AulaRecursos, los ejemplos, los tiempos y la publicación guiada son desarrollo didáctico para esta sesión. No agregan PA ni cambian la ponderación oficial.
Abrir referencias completasBase: Sílabo ET505 REV3 · pp. 2–3 y 6 · MDN · Funciones · MDN · Trabajando con objetos · GitHub Docs · Crear un sitio con Pages. Ejemplos y secuencia: elaboración didáctica del curso.