Entornos de Desarrollo Integrado (IDE)

Los estudiantes aprenden mejor el diseño de interfaces cuando experimentan el proceso, no solo al escuchar conceptos teóricos. Al construir prototipos físicos con papel y discutir en grupo, transforman ideas abstractas en soluciones concretas que conectan la lógica del código con la experiencia humana.

• 2o de Preparatoria
• Tecnología
• 3 actividades
• 45 min–60 min

Aula Invertida

⏱ 50 min·Individual

Comparación: Editor de Texto vs. IDE

Los estudiantes escribirán un pequeño programa en un editor de texto simple (como Notepad) y luego el mismo programa en un IDE. Compararán el tiempo de escritura, la facilidad para detectar errores y la experiencia general, documentando sus hallazgos.

Preparación y detalles

¿Cómo un IDE mejora la productividad del desarrollador en comparación con un editor de texto simple?

Consejo de Facilitación: Durante la actividad de prototipado en papel, camina entre los grupos y pide que cada equipo explique con una sola oración qué problema específico de su comunidad resuelve su diseño.

Setup: Salón estándar: flexible para actividades grupales durante la clase

Materials: Contenido previo a la clase (video/lectura con preguntas guía), Verificación de preparación o boleto de entrada, Actividad de aplicación en clase, Diario de reflexión

• Comprender
• Aplicar
• Analizar
• Autogestión
• Autoconciencia

Aula Invertida

⏱ 60 min·Grupos pequeños

Exploración de Herramientas de Depuración

Se les proporcionará a los estudiantes un programa con errores lógicos intencionados. Deberán usar las herramientas de depuración del IDE (puntos de interrupción, paso a paso, inspección de variables) para encontrar y corregir los errores, explicando su proceso.

Preparación y detalles

¿Qué herramientas de un IDE son más útiles para la depuración de código?

Consejo de Facilitación: En el Gallery Walk de Usabilidad, entrega tarjetas de observación con una rúbrica de 3 criterios (claridad, accesibilidad, estética) para que los estudiantes evalúen los prototipos de sus compañeros.

Setup: Salón estándar: flexible para actividades grupales durante la clase

Materials: Contenido previo a la clase (video/lectura con preguntas guía), Verificación de preparación o boleto de entrada, Actividad de aplicación en clase, Diario de reflexión

• Comprender
• Aplicar
• Analizar
• Autogestión
• Autoconciencia

Aula Invertida

⏱ 45 min·Individual

Personalización del IDE

Los estudiantes investigarán y aplicarán al menos tres personalizaciones en su IDE, como temas visuales, atajos de teclado o extensiones útiles. Presentarán sus personalizaciones y explicarán por qué las eligieron.

Preparación y detalles

¿Cómo podemos personalizar un IDE para adaptarlo a nuestras preferencias de desarrollo?

Consejo de Facilitación: En el debate de estética vs. funcionalidad, asigna roles específicos (usuario, desarrollador, diseñador) a cada estudiante para que argumenten desde perspectivas distintas y evites respuestas genéricas.

Setup: Salón estándar: flexible para actividades grupales durante la clase

Materials: Contenido previo a la clase (video/lectura con preguntas guía), Verificación de preparación o boleto de entrada, Actividad de aplicación en clase, Diario de reflexión

• Comprender
• Aplicar
• Analizar
• Autogestión
• Autoconciencia

Enseñando Este Tema

Enseña este tema con un enfoque basado en proyectos, donde los estudiantes construyan significado a través de la iteración. Evita explicar todos los conceptos de diseño de interfaces antes de empezar a crear. En su lugar, introduce herramientas clave (como paletas de colores accesibles o jerarquías visuales) justo antes de que las necesiten en sus prototipos. La investigación muestra que los estudiantes retienen mejor cuando aplican conceptos inmediatamente después de aprenderlos.

Qué Esperar

Al finalizar las actividades, los estudiantes podrán explicar cómo el diseño de interfaces mejora la usabilidad, identificar errores comunes en prototipos de papel y argumentar con ejemplos la importancia de la accesibilidad. La evidencia de aprendizaje incluirá prototipos revisados, debates fundamentados y reflexiones escritas sobre el proceso.

Cuidado con estas ideas erróneas

Idea errónea común

Durante la actividad de Prototipado en Papel, algunos estudiantes pueden pensar que diseñar una interfaz es solo elegir colores bonitos.

Qué enseñar en su lugar

Durante el Prototipado en Papel, observa si los estudiantes están eligiendo colores o formas sin justificar cómo mejoran la legibilidad o la navegación. Redirige su atención hacia la funcionalidad preguntando: '¿Cómo ayudará este botón al usuario a completar su tarea principal?' y pide que anoten esa respuesta en su prototipo.

Idea errónea común

Durante el Gallery Walk de Usabilidad, algunos pueden creer que todos los usuarios interactúan con la tecnología de la misma forma.

Qué enseñar en su lugar

Durante el Gallery Walk, entrega a cada observador una tarjeta con un perfil de usuario ficticio (ej. adulto mayor, niño de 8 años, persona con daltonismo) y pide que evalúen el prototipo usando ese filtro. Luego, en la discusión grupal, compara las diferencias en las observaciones para demostrar que un diseño debe adaptarse a distintos usuarios.

Ideas de Evaluación

Verificación Rápida

Después de Prototipado en Papel, presenta a los estudiantes un fragmento de código simple con una GUI mal diseñada (ej. botones superpuestos o etiquetas confusas). Pide que identifiquen qué herramienta del IDE usarían primero para corregir el problema (punto de interrupción, inspección de variables, etc.) y expliquen por qué esa herramienta es relevante para su prototipo en papel.

Pregunta para Discusión

Durante el Gallery Walk de Usabilidad, pide a los estudiantes que mencionen al menos dos características específicas de un IDE (ej. autocompletado, depuración visual) que les ayudarían a implementar su prototipo y expliquen cómo esas características mejoran la eficiencia en comparación con un editor de texto.

Boleto de Salida

Al finalizar el debate de Estética vs. Funcionalidad, entrega a cada estudiante una tarjeta con el nombre de una herramienta de depuración (ej. 'Paso a paso', 'Inspeccionar variable', 'Ver pila de llamadas'). Pide que escriban una oración describiendo su función principal y un escenario concreto donde sería útil en el desarrollo de su aplicación comunitaria.

Extensiones y Apoyo

• Challenge: Pide a los estudiantes que graben un video de 60 segundos mostrando cómo un usuario con discapacidad visual (usando un lector de pantalla) navegaría en su aplicación, y expliquen qué ajustes harían para mejorar la experiencia.
• Scaffolding: Para estudiantes que luchan con el prototipado en papel, proporciona plantillas de interfaces básicas (como una ventana con menú y botones) para que completen los elementos faltantes.
• Deeper exploration: Invita a un desarrollador local o usa un video corto para mostrar cómo un IDE real (como Visual Studio o NetBeans) ayuda a implementar la interfaz diseñada en papel, destacando características como autocompletado o depuración visual.