Programa Clase 3: Estructura de una app – Wiki de animales

Objetivos de la clase

  • Importar y adaptar un proyecto base tipo “Wikipedia de animales”.

  • Agregar nuevas fichas de animales con nombre, foto y descripción.

  • Completar la estructura de navegación del prototipo.

  • Implementar scroll vertical en la vista principal para permitir más contenido.

Duración total: 90 minutos

Inicio (10 minutos)

Objetivo: Presentar el desafío y activar la observación.

Actividades:

  • Breve introducción: ¿Qué es una “Wiki de animales”? ¿Qué elementos necesita?

  • Mostrar una versión inicial con pocas fichas (elefante, delfín, etc.).

  • Explicar que cada alumno descargará esta versión para modificar y ampliar.

Desarrollo (70 minutos)

Paso 1: Importación del proyecto base (10 min)

  • Descargar archivo base desde enlace compartido (por ejemplo, Google Drive o classroom).

  • Importar en Figma: Archivo → Importar → Seleccionar archivo .fig.

  • Verificar que aparezcan los frames iniciales (bienvenida, ficha de un animal, menú, etc.).

Paso 2: Agregar nuevas fichas de animales (30 min)

  • Copiar una ficha existente y duplicarla (por ejemplo, la del elefante).

  • Buscar y agregar nuevas imágenes en PNG con fondo transparente.

  • Cambiar nombre, foto y descripción del animal (ej. tigre, colibrí, zorro, ballena, etc.).

  • Incorporar 3 o más nuevas fichas al prototipo.

Paso 3: Implementar scroll vertical (20 min)

  • Seleccionar el frame principal o “Home”.

  • Extender el alto del frame y ubicar las nuevas fichas en columna.

  • En la pestaña Prototype, configurar: Scroll behavior → Vertical.

  • Probar la navegación con Present para verificar el desplazamiento fluido.

Paso 4: Revisar navegación general (10 min)

  • Asegurarse de que todos los botones del menú estén conectados a sus vistas.

  • Conectar cada tarjeta de animal al detalle correspondiente (si aplica).

Cierre (10 minutos)

Objetivo: Observar el avance y fortalecer la reflexión.

Actividades:

  • Voluntarios muestran una ficha nueva y su funcionamiento con scroll.

  • Comentarios guiados: ¿Qué fue lo más fácil?, ¿qué fue lo más desafiante?

  • Recordatorio: en la próxima clase se trabajará con scroll horizontal y pruebas en el celular.

�� Rúbrica de Evaluación – Clase 3 (Wiki de animales)

Criterio

Nivel 1 (Inicial)

0

Nivel 2 (En desarrollo)

2

Nivel 3 (Logro esperado)

3

Nivel 4 (Sobresaliente)

4
Importación del proyecto base en Figma No lo importa Lo importa con errores Proyecto base importado Importa, organiza y personaliza
Creación de fichas de nuevos animales No crea nuevas fichas Crea 1 o 2 fichas incompletas Crea al menos 3 fichas completas Crea 4+ fichas bien diseñadas
Calidad del contenido (nombre, imagen, descripción) Elementos poco claros Contenido parcial o sin coherencia Contenido claro y bien presentado Contenido completo y visualmente atractivo
Implementación del scroll vertical en Home No lo aplica Lo aplica con errores Scroll funcional y fluido Scroll optimizado y bien distribuido
Conexión entre fichas y navegación general Sin conexión Conexiones incompletas Flujo funcional entre vistas Flujo completo, intuitivo y atractivo
Participación y autonomía en el trabajo Mínima Limitada o con mucha ayuda Activa y autónoma Proactiva y colaborativa

 

24 puntos