Tecnología e Informática · 9o Grado

Ideas de aprendizaje activo

Creación de Interfaces Gráficas Sencillas

Los estudiantes de 9° grado aprenden mejor cuando construyen interfaces gráficas con sus propias manos. Este enfoque activo les permite descubrir cómo la disposición visual influye en la funcionalidad y la experiencia del usuario, haciendo visibles conceptos abstractos de programación.

• Derechos Básicos de Aprendizaje (DBA)
• DBA Tecnologia e Informatica: Grado 9 - Interaccion Humano-Computadora
• DBA Tecnologia e Informatica: Grado 9 - Solucion de Problemas con Algoritmos

• 30–50 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

• Enseñanza entre Pares
• 45 min · Parejas

Enseñanza entre Pares: Prototipo de Calculadora

En parejas, los estudiantes usan una herramienta visual como App Inventor para crear una interfaz con botones numéricos y caja de texto para resultados. Conectan los botones a funciones de suma y resta. Prueban el prototipo mutuamente y registran retroalimentación.

Diseñar una interfaz gráfica simple para un programa interactivo.

Consejo de Facilitación

En la actividad de prototipos en parejas, pide a los estudiantes que alternen roles entre diseñador y usuario para simular interacciones reales con la interfaz.

Qué observar

Entrega a cada estudiante una tarjeta con la descripción de una acción simple (ej. 'presionar un botón de 'guardar''). Pide que escriban: 1) El nombre del evento que se genera. 2) Un ejemplo de la lógica del programa que podría ejecutarse. 3) Un posible problema de usabilidad si el botón no se ve claro.

• Comprender
• Aplicar
• Analizar
• Crear
• Autogestión
• Habilidades de Relación

Actividad 02

• Aprendizaje Basado en Proyectos
• 50 min · Grupos pequeños

Grupos Pequeños: Evaluación de Usabilidad

Formen grupos de 4. Cada grupo diseña una interfaz para un menú de restaurante simple. Rotan para probar las interfaces de otros grupos, anotan problemas de navegación y proponen una mejora específica por interfaz.

Explicar la relación entre los elementos visuales de una interfaz y el código que los controla.

Consejo de Facilitación

Durante la evaluación grupal de usabilidad, guía a los estudiantes para que identifiquen al menos tres problemas en la interfaz de su compañero usando una rúbrica de criterios claros.

Qué observar

Muestra en pantalla una captura de una interfaz gráfica sencilla (ej. una calculadora básica). Pregunta a los estudiantes: '¿Qué widgets ven en esta interfaz? ¿Qué evento ocurriría si se presiona el número '5'? ¿Qué tipo de lógica del programa esperarían que se ejecute después de ese evento?'

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades de Relación
• Toma de Decisiones

Actividad 03

• Aprendizaje Basado en Proyectos
• 30 min · Toda la clase

Clase Completa: Galería de Críticas

Los estudiantes suben sus interfaces a una plataforma compartida. La clase navega por todas, vota las más usables y discute en plenaria las fortalezas y sugerencias colectivas para iterar.

Evaluar la usabilidad de una interfaz gráfica básica y proponer mejoras.

Consejo de Facilitación

En la galería de críticas, asigna a cada grupo un color para sus notas adhesivas y pide que peguen sus observaciones directamente sobre los bocetos expuestos.

Qué observar

Los estudiantes trabajan en parejas para diseñar un boceto de una interfaz para una aplicación simple (ej. un temporizador). Luego, intercambian bocetos. Cada estudiante evalúa el boceto de su compañero respondiendo: ¿Son claros los botones? ¿Se entiende la función de cada elemento? Proporciona una sugerencia concreta de mejora.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades de Relación
• Toma de Decisiones

Actividad 04

• Aprendizaje Basado en Proyectos
• 35 min · Individual

Individual: Mejora Personal

Cada estudiante selecciona su interfaz inicial, aplica tres mejoras basadas en retroalimentación previa y documenta cambios con capturas antes y después.

Diseñar una interfaz gráfica simple para un programa interactivo.

Consejo de Facilitación

Para la mejora personal, proporciona una plantilla con preguntas guía que ayuden a los estudiantes a reflexionar sobre la accesibilidad y la claridad de sus diseños.

Qué observar

Entrega a cada estudiante una tarjeta con la descripción de una acción simple (ej. 'presionar un botón de 'guardar''). Pide que escriban: 1) El nombre del evento que se genera. 2) Un ejemplo de la lógica del programa que podría ejecutarse. 3) Un posible problema de usabilidad si el botón no se ve claro.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades de Relación
• Toma de Decisiones

Algunas notas para enseñar esta unidad

Enseña este tema con un enfoque de diseño iterativo: primero construyen, luego prueban y finalmente refinan. Evita dar soluciones prefabricadas; en su lugar, plantea preguntas que lleven a los estudiantes a descubrir problemas por sí mismos. La investigación muestra que los estudiantes retienen mejor estos conceptos cuando ven consecuencias inmediatas de sus decisiones de diseño.

Los estudiantes demuestran comprensión cuando explican la relación entre elementos visuales y código, proponen mejoras basadas en pruebas de usabilidad y ajustan sus diseños iterativamente. La evidencia de aprendizaje incluye bocetos, prototipos funcionales y retroalimentación concreta.

---

Cuidado con estas ideas erróneas

• Durante la actividad de prototipos en parejas, muchos estudiantes pensarán que la interfaz gráfica solo es decorativa y no afecta la funcionalidad del programa.

  Usa la simulación de uso real en parejas: pide que un estudiante intente interactuar con el prototipo mientras el otro observa. Observen juntos si los botones mal colocados o poco visibles causan confusión o errores al presionarlos.

• Durante la evaluación grupal de usabilidad, algunos creerán que todos los elementos visuales funcionan igual sin importar su posición o tamaño.

  Entrega una rúbrica con criterios como 'claridad de navegación' y 'accesibilidad'. Pide a los grupos que prueben cada interfaz de sus compañeros y anoten en qué casos la disposición dificulta la interacción.

• Durante la galería de críticas, es probable que los estudiantes crean que el código y la interfaz se crean por separado sin relación.

  En la galería, muestra en tiempo real cómo un evento de la interfaz (como un clic en un botón) se conecta con una línea de código específica. Usa colores para vincular visualmente el widget con su manejador de eventos en el código.

---

Metodologías usadas en este resumen

• Enseñanza entre Pares
• Aprendizaje Basado en Proyectos