Guía para docentes — Motion EDUmind v3

🎯 ¿Qué es Motion EDUmind?

Aplicación web progresiva (PWA) para crear animaciones stop-motion directamente desde el navegador o instalada en el dispositivo. Funciona sin conexión una vez instalada.

🎓 Diseñada para el aula

Dos modos diferenciados: Modo Aula para el alumnado (pantalla completa, botones grandes, interfaz mínima) y Modo Pro para el docente o usuarios avanzados.

📵 Funciona sin internet

Todos los proyectos se guardan en el dispositivo (IndexedDB). El único acceso a red opcional es la búsqueda de pictogramas ARASAAC remotos.

♿ Accesible

Pictogramas ARASAAC integrados, retroalimentación visual y táctil (vibración, sonido, cuenta atrás), atajos de teclado, roles ARIA correctos.

📱 Multiplataforma

Funciona en Chrome/Chromium en tablets Android (Abalar), iPad, PC con Windows/Mac/Linux, y puede instalarse como app nativa desde el navegador.

ℹ️

La aplicación requiere HTTPS para acceder a la cámara. En el servidor de producción esto ya está configurado. En desarrollo local, usar localhost o 127.0.0.1.

👋 Primera puesta en marcha

La primera vez que se accede a la app aparece una pantalla de bienvenida para elegir el modo de trabajo. Esta elección se guarda en el dispositivo y no vuelve a aparecer en visitas posteriores.

Recreación — Pantalla de bienvenida (primera visita)

🎬

Motion EDUmind

Elige tu forma de trabajar y entra directo a capturar.

🎓 Modo Aula Pantalla completa, botones físicos grandes, filmstrip sencillo y foco total en capturar. Entrar

🧭 Modo Pro Timeline completa, exportaciones, ajustes finos y laboratorio de funciones avanzadas. Entrar

1

Pulsar el modo deseado. El navegador solicitará permiso de cámara: aceptar siempre para que la app funcione.

2

La elección queda guardada. En visitas siguientes la app abre directamente en el modo guardado.

3

Para cambiar de modo en cualquier momento: botón flotante 🧭 Modo aula / 🔒 Modo pro (esquina superior derecha). En Modo Aula pide confirmación para evitar que el alumnado cambie por error.

⚠️

Si el navegador ha bloqueado la cámara previamente, aparece un aviso en rojo. Hay que ir al candado de la barra de direcciones → Permisos → Cámara → Permitir y recargar la página.

🔀 Los dos modos de la app

🎓 Modo Aula Alumnado

Pantalla completa, sin menús ni sidebar
Botones grandes táctiles a la derecha
Filmstrip simplificado en la parte inferior
Cuenta atrás 3-2-1 antes de cada foto
Miniatura del fotograma capturado
Confirmación antes de borrar
Objetivo de fotos configurable por el docente
Nivel con acelerómetro (si el dispositivo lo soporta)

🧭 Modo Pro Docente / Avanzado

Sidebar izquierdo: cámara, ajustes, overlays, plantillas
Sidebar derecho: exportación, audio, premium, pictos
Timeline temporal con regla de segundos real
Undo/Redo hasta 20 pasos
Control de FPS (1–15), zoom cámara (1×–3×)
Onion Skin, rejilla de composición
Guía de movimiento animada
Dibujo y texto sobre la vista previa
Exportación a WebM, ZIP, JSON, PDF analógicos

🎓 Modo Aula — Pantalla principal

En Modo Aula la cámara ocupa toda la pantalla. Los controles están dispuestos en zonas fijas que no se solapan con la imagen.

Recreación — Modo Aula (estado normal, sin fotogramas)

📷

Motion Aula

🔒 Modo pro

📷

▶

-1

🗑

↺

⇋

⊞

⏱

🎯

0 fotogramas 0 s 🔴 Necesitas más fotos

💾 Guardar

0 fotos 0 s 6 FPS

📷1

2

3

4

5

Zonas de la pantalla

Zona	Posición	Contenido
Etiqueta	Arriba izquierda	Muestra "Motion Aula" como identificador del modo
Botón de modo	Arriba derecha	🔒 Modo pro — cambia a Modo Pro (con confirmación)
Columna de botones	Derecha, centrada verticalmente	Capturar, Reproducir, Deshacer (−1), Borrar (🗑), Girar (↺), Espejo (⇋), Rejilla (⊞)
Herramientas docente	Izquierda, sobre el filmstrip	⏱ temporizadores auto-captura, 🎯 objetivo de fotos
Semáforo de progreso	Izquierda, sobre el filmstrip	🔴/🟡/🟢 indica si hay suficientes fotogramas
Guardar (docente)	Derecha, sobre el filmstrip	💾 Exporta el proyecto como JSON de seguridad
Filmstrip	Parte inferior, fija	Resumen + carrusel de fotogramas capturados

📷 Modo Aula — Capturar fotogramas

Cada pulsación del botón rojo 📷 desencadena una cuenta atrás visual y, al terminar, captura la imagen de la cámara y la añade al carrusel.

Secuencia completa de una captura

1

El alumno pulsa el botón rojo 📷 (el mayor de la columna derecha). El botón se desactiva para evitar dobles pulsaciones.

2

Cuenta atrás 3 → 2 → 1 en pantalla completa (~2,7 segundos). El alumno puede preparar la escena antes del disparo.

3

Flash cian en pantalla + click de obturador (Web Audio) + vibración del dispositivo (50 ms). Retroalimentación multisensorial para todos los perfiles.

4

Miniatura del fotograma capturado aparece 1,3 s en la esquina superior izquierda. El alumno confirma visualmente que "salió bien".

5

La foto se añade al carrusel inferior y el contador de fotogramas se actualiza. El semáforo de progreso cambia de color según el total acumulado.

Cuenta atrás activa

📷

2

Miniatura post-captura (esquina sup. izq.)

📷

🎨

📸 3

Botones auxiliares de la columna derecha

Botón	Acción
↺ Girar	Rota la captura 180°. Útil si la cámara está invertida físicamente.
⇋ Espejo	Espeja horizontalmente la imagen capturada.
⊞ Rejilla	Muestra/oculta una rejilla de composición sobre la cámara para ayudar al alumnado a encuadrar. El botón se ilumina en verde cuando está activa.
−1 Deshacer	Deshace la última acción (equivale a Undo en Modo Pro).

💡

La rejilla ⊞ es especialmente útil para que el alumnado coloque los objetos siempre en el mismo encuadre. Al tener la línea central visible, es más fácil detectar desplazamientos involuntarios.

🎞️ Modo Aula — Carrusel y objetivo

La tira de fotogramas inferior (filmstrip) muestra todas las fotos capturadas como miniaturas. Incluye un indicador de progreso hacia el objetivo que el docente puede configurar.

Recreación — Filmstrip con 5 fotogramas y objetivo establecido (🎯 5 / 12)

5 fotos 0:50 6 FPS 🎯 5 / 12

🐱1

🐱2

🐱3

🐱4

🐱5

Leer el carrusel

🎞 Miniaturas

Cada tarjeta muestra el fotograma con object-fit: contain — se ve la imagen completa sin recortar, con fondo negro. El número rojo en la esquina indica el orden. La tarjeta con borde blanco es la seleccionada actualmente.

🎯 Píldora de objetivo

Muestra fotos conseguidas / fotos necesarias. Al llegar al objetivo se vuelve verde con una pequeña animación. Tocando la píldora se abre el selector para modificar el objetivo.

Configurar el objetivo de fotogramas

El docente pulsa el botón 🎯 (abajo izquierda, zona de herramientas) para abrir el selector.

Recreación — Modal selector de objetivo

1

Pulsar 🎯 en la zona de herramientas (esquina inferior izquierda, encima del filmstrip).

2

Usar los botones − y + para ajustar el número de fotos (mínimo 1, máximo 120).

3

Pulsar Establecer. El objetivo queda guardado en el dispositivo y visible en el filmstrip.

💡

El objetivo persiste entre sesiones (localStorage). Una buena práctica: configurarlo antes de entregar la tablet al alumno. Para 6 FPS y una animación de 2 segundos, el objetivo sería 12 fotos.

🗑️ Modo Aula — Borrar fotogramas

En Modo Aula el botón 🗑 elimina el fotograma seleccionado (con borde blanco en el filmstrip). Si ninguno está seleccionado, elimina el último. Siempre pide confirmación.

Recreación — Modal de confirmación de borrado

1

Seleccionar el fotograma a borrar tocando su miniatura en el filmstrip (queda resaltado con borde blanco). Si se omite, se borrará el último fotograma.

2

Pulsar el botón 🗑 en la columna derecha. Aparece el modal de confirmación.

3

Pulsar ✅ Sí para borrar o ❌ No para cancelar. Los botones son grandes (60 px mínimo) para facilitar el toque en tablet.

ℹ️

En Modo Pro el botón ↪️ Rehacer funciona como Redo normal (rehace acciones deshechas). El comportamiento de borrado con confirmación es exclusivo del Modo Aula.

⏱️ Modo Aula — Auto-captura

Captura fotogramas de forma automática cada 3, 5 o 10 segundos. Ideal para time-lapses de procesos lentos (experimentos, crecimiento de plantas) sin intervención manual.

1

Pulsar el botón ⏱ (esquina inferior izquierda) para mostrar los temporizadores. El botón se ilumina en mint.

2

Elegir el intervalo: 3s, 5s o 10s. El botón activo queda resaltado y aparece un indicador flotante con la cuenta regresiva hasta la próxima captura.

3

Para detener: pulsar Stop en la dock de temporizadores.

⚠️

La auto-captura no muestra la cuenta atrás 3-2-1 (para no interrumpir el proceso). El flash y el sonido sí se activan. Si se pulsa Reproducir mientras la auto-captura está activa, esta se detiene automáticamente.

💡

La dock de temporizadores empieza oculta por defecto. Esto evita que el alumnado active la auto-captura por error. El docente la muestra cuando sea necesario y la puede volver a ocultar.

▶️ Modo Aula — Reproducción

El botón verde ▶ reproduce la animación desde el fotograma seleccionado. El botón cambia a ⏸ durante la reproducción.

1

Opcionalmente, tocar un fotograma en el filmstrip para empezar desde ese punto.

2

Pulsar ▶ verde. La cámara en directo se oculta y los fotogramas se reproducen en el área principal a la cadencia de FPS configurada.

3

Pulsar ⏸ para pausar. La reproducción se detiene y vuelve la cámara en directo.

💡

El semáforo de progreso cambia a 🟢 cuando hay suficientes fotogramas para reproducir con fluidez. En modo Aula los FPS son los que estaba configurados cuando se entraron las fotos (por defecto 6 FPS). El docente puede cambiarlos en Modo Pro.

🛠️ Modo Aula — Herramientas del docente

Semáforo de progreso

🔴

Rojo
Menos fotos que las necesarias para 1 segundo de animación

🟡

Amarillo
Material suficiente para empezar a probar

🟢

Verde
Listo para reproducir y exportar

Guardar proyecto (💾)

El botón flotante 💾 Guardar (esquina inferior derecha, encima del filmstrip) exporta el proyecto completo como fichero .json al dispositivo. Permite hacer copias de seguridad antes de exportar el vídeo.

Nivel con acelerómetro

Si el dispositivo dispone de sensor de orientación (la mayoría de tablets Android), aparece automáticamente en la parte inferior izquierda un indicador de nivel: una burbuja circular que se desplaza según la inclinación del dispositivo. Cuando la tablet está nivelada, la burbuja se centra y cambia a color verde. En iOS 13+ el primer toque activa el permiso.

💡

El indicador de nivel es útil cuando el alumnado fotografía escenas cenitales o laterales y necesita mantener el ángulo constante entre fotogramas.

Cambiar entre modos

El botón 🔒 Modo pro (esquina superior derecha) muestra un diálogo de confirmación antes de cambiar para evitar salidas accidentales. Una vez en Modo Pro, el botón equivalente no requiere confirmación.

🧭 Modo Pro — Pantalla principal

El Modo Pro muestra la interfaz completa con navbar, dos sidebars, zona central con cámara, barras de estado, insights y timeline temporal.

Recreación — Modo Pro (diseño de escritorio / tablet apaisada)

📷

📸 Capturar

▶️ Reproducir

↩️ Deshacer

↪️ Rehacer

4 fotogramas 0:40 48 KB 🟡 Buen ritmo

0 s

1 s

2 s

3 s

F1

F2

F3

F4

⚙️ Modo Pro — Cámara y ajustes

Sidebar izquierdo — Sección Cámara

Control	Descripción
Selector de cámara	Desplegable con todas las cámaras disponibles. El último usado se recuerda entre sesiones.
🔄 Girar	Rota la captura 180° (para cámaras físicamente invertidas). Se resalta en azul cuando está activo.
🪞 Espejo	Espeja horizontalmente. Útil en selfie o para animar con texto. El espejo afecta tanto a la previsualización como a la captura.

Sidebar izquierdo — Sección Ajustes

Control	Rango / Valores
🎬 FPS (slider)	1 a 15 fotogramas/segundo. 6 FPS es el valor por defecto. A 4 FPS se necesitan 4 fotos por segundo de animación.
🔁 Bucle	La reproducción vuelve al principio al terminar.
👻 Onion Skin	Superpone el último fotograma con transparencia sobre la vista en directo. El slider de opacidad (0–1) controla su intensidad.
📐 Rejilla	Muestra una cuadrícula de composición con líneas centrales resaltadas en mint.
🔍 Zoom (slider)	1× a 3×. Amplía la vista de la cámara (útil para objetos pequeños).

Guía de movimiento (avanzado)

La sección Guía de Movimiento en el sidebar izquierdo permite trazar una trayectoria de animación sobre la vista en directo. Parámetros configurables:

Frame inicio

Fotograma desde el que empieza la guía (por defecto 0)

Duración

Número de fotogramas que abarca la guía (por defecto 12)

Easing

Lineal, Ease-in, Ease-out, Ease-in-out para controlar la aceleración

📏 Modo Pro — Timeline temporal

La timeline muestra el tiempo real de la animación (en segundos), no solo miniaturas. La regla superior marca los segundos; la aguja vertical (playhead) indica la posición de reproducción actual.

🔍 Zoom temporal

Botones − y + junto a la etiqueta del zoom actual (p.ej. "1.00×"). Ampliar permite ajustar duraciones de fotogramas con precisión.

↔ Reordenar fotogramas

Arrastrar una tarjeta de fotograma y soltarla sobre otra la mueve a esa posición. El borde mint indica el destino válido.

🖱 Scrubbing

Arrastrar sobre la regla de tiempo desplaza la posición de reproducción y muestra el fotograma correspondiente en la vista previa.

🗑 / ⧉ Acciones por tarjeta

Cada tarjeta en la timeline muestra un botón de borrar (🗑, esquina superior derecha) y uno de duplicar (⧉, debajo). Sin confirmación en Modo Pro.

ℹ️

La duración de cada fotograma es 1000 ms / FPS. Si cambias los FPS después de haber capturado fotogramas, la duración total de la animación cambia.

✏️ Modo Pro — Overlays y dibujo

La sección Overlays del sidebar izquierdo permite añadir elementos encima de la imagen de la cámara antes de capturar.

✏️ Dibujar

Activa el modo dibujo a mano alzada sobre la vista en directo. Al capturar, el dibujo queda integrado en el fotograma.

📝 Texto

Abre un diálogo para escribir texto. El texto se superpone en la posición central y queda incluido en la siguiente captura.

🗑️ Limpiar

Elimina todos los overlays pendientes sin capturar. El indicador de estado muestra el número de overlays activos.

💡

Los overlays se acumulan y se aplican en la siguiente captura. Se puede dibujar varias veces y también añadir un pictograma (Shift+Click en la galería) antes de disparar.

📋 Plantillas de aula

Las plantillas configuran automáticamente FPS, Onion Skin, rejilla y modo de interfaz para diferentes tipos de proyecto. Se acceden desde el sidebar izquierdo en Modo Pro.

📚

Historia

4 FPS · Onion · Aula

🏃

Movimiento

8 FPS · Onion · Rejilla · Pro

🧪

Experimento

3 FPS · Auto 10 s · Aula

🖼️

Pictos

4 FPS · Abre galería · Aula

📐

Geometría

5 FPS · Rejilla · Aula

🌱

Crecimiento

2 FPS · Auto 5 s · Aula

🎨

Arte

4 FPS · Onion · Aula

ℹ️

Las plantillas que activan la auto-captura (Experimento, Crecimiento) la inician automáticamente al seleccionarlas. Las que activan el Modo Aula (beginner) cambian la interfaz para el alumnado.

🖼️ Pictogramas ARASAAC

La app incluye un catálogo local de pictogramas ARASAAC y permite buscar en la base de datos online. Los pictogramas se pueden usar como fotogramas completos o como overlays.

1

En el sidebar derecho, pulsar 🖼️ Buscar. Se abre el modal de pictogramas.

2

Escribir en el buscador. Por defecto busca en el catálogo local. Activar "Buscar en ARASAAC online" amplía los resultados (requiere internet).

3

Click normal → crea un fotograma completo con el pictograma (1280×720 px, fondo blanco). Shift + Click → añade el pictograma como overlay sobre la cámara en directo.

ℹ️

Los pictogramas ARASAAC se distribuyen bajo licencia Creative Commons BY-NC-SA. Se incluyen únicamente para uso educativo no comercial. El fichero ARASAAC_NOTICE.txt incluido en la app contiene los créditos completos.

📤 Exportar la animación

Desde el sidebar derecho (Modo Pro) o el botón 💾 Guardar (Modo Aula) se puede exportar en diferentes formatos.

Resolución de exportación

El selector Resolución tiene tres opciones:

Original

La resolución nativa de la cámara del dispositivo. Por defecto.

720p

1280×720 px. Buen equilibrio calidad/tamaño.

1080p Premium

1920×1080 px. Requiere cuenta Premium.

Formatos de exportación

Formato	Botón	Uso recomendado
WebM	🎬 WebM	Vídeo reproducible en cualquier navegador y en Android. Incluye la narración de audio si se ha grabado.
ZIP de secuencia	🗜️ ZIP	Descarga todos los fotogramas como imágenes PNG numeradas. Para edición externa (Kdenlive, Blender, etc.).
JSON	💾 JSON	Proyecto completo con todos los fotogramas en base64. Se puede importar en otro dispositivo con la misma app.
NDJSON	📄 NDJSON	Formato de línea de proyecto para integraciones avanzadas.
Zootropo PDF	🌀 Zootropo	Plantilla A4 imprimible para crear un zootropo de papel con los fotogramas del proyecto.
Fenakistiscopio PDF	⭕ Fenakist.	Plantilla A4 para el disco de fenakistiscopio.

💡

Para compartir con las familias, WebM es el formato más sencillo. En dispositivos Abalar, el fichero aparece en la carpeta de descargas del navegador y se puede reproducir directamente.

🎙️ Narración de audio

En Modo Pro, la sección Audio y vídeo del sidebar derecho permite grabar una narración y mezclarla con el vídeo al exportar a WebM.

1

Pulsar 🎙️ Grabar. Se muestra un aviso de privacidad (LOPD) la primera vez — aceptar para continuar.

2

El botón se vuelve rojo parpadeante y muestra un contador de tiempo. La barra de nivel indica si el micrófono está captando audio.

3

Pulsar ⏹ Detener. La narración queda guardada en el proyecto. Aparecen los botones ▶ Escuchar y 🗑️ Borrar.

4

Al exportar a WebM, el audio se mezcla automáticamente con la animación.

⚠️

Las grabaciones de audio contienen datos biométricos de voz (LOPD/RGPD). La app procesa todo localmente y no envía ningún dato a servidores externos. En contexto educativo, asegurarse del consentimiento antes de grabar voces de menores.

📁 Gestor de proyectos

La app soporta múltiples proyectos guardados en el dispositivo. El botón 📁 Proyectos de la navbar (Modo Pro) abre el gestor.

📂 Proyectos locales

Lista de todos los proyectos guardados en el dispositivo. Se puede crear uno nuevo, cargar uno existente, renombrarlo o eliminarlo. El proyecto activo aparece marcado.

☁️ Nube Premium

Sincronización bidireccional con el servidor EDUmind. Requiere cuenta activa con nivel Premium.

🖼️ Galería Premium

Galería pública de proyectos compartidos por la comunidad EDUmind. Los proyectos pueden hacerse públicos o privados.

↩️ Importar

El botón 📂 Importar del sidebar derecho (Modo Pro) carga un fichero .json o .ndjson exportado previamente.

ℹ️

El proyecto se guarda automáticamente en IndexedDB antes de cerrar la pestaña (evento beforeunload). No es necesario guardar manualmente en el uso habitual.

📲 Instalar como PWA

Motion EDUmind puede instalarse como aplicación nativa desde cualquier navegador compatible. Una vez instalada, funciona sin conexión y se actualiza automáticamente en segundo plano.

En Android / Abalar (Chrome)

1

Abrir la URL de la app en Chrome. Esperar a que cargue completamente.

2

Pulsar los tres puntos (⋮) en la esquina superior derecha → Añadir a pantalla de inicio o Instalar app.

3

Confirmar. La app aparece como icono en el escritorio y se abre en modo pantalla completa (sin barra del navegador).

Actualizaciones automáticas

⚡ Actualización inmediata

El Service Worker está configurado con skipWaiting + clientsClaim. Cuando se publica una nueva versión, la próxima vez que el alumno abra la app se descarga y activa automáticamente, sin intervención manual.

📵 Uso sin conexión

Todos los assets (JS, CSS, fuentes, imágenes) están precacheados. La app funciona completamente sin internet. Solo la búsqueda remota de ARASAAC y la nube requieren conexión.

⚠️

La APK nativa de Android (Capacitor) no se actualiza automáticamente — requiere redistribuir el fichero APK. Esta actualización automática aplica únicamente a la versión PWA (navegador).

⌨️ Atajos de teclado

Disponibles en Modo Pro (y en Modo Aula para dispositivos con teclado). No funcionan si el foco está en un campo de texto.

Tecla(s)	Acción	Notas
`Espacio` `Enter` `C` `F`	Capturar fotograma	En Modo Aula activa la cuenta atrás 3-2-1
`P`	Reproducir / Pausar	Inicia desde el fotograma seleccionado
`←` `→`	Mover selección entre fotogramas	Pausa la reproducción si está activa
`D` / `Ctrl+Z`	Deshacer (Undo)	Hasta 20 pasos de historial
`R` / `Ctrl+Shift+Z`	Rehacer (Redo)	Solo en Modo Pro
`G`	Activar / desactivar rejilla
`O`	Activar / desactivar Onion Skin
`L`	Activar / desactivar bucle
`M`	Activar / desactivar espejo
`B`	Alternar Modo Aula / Modo Pro	En Aula pide confirmación
`E`	Exportar a WebM
`Shift+↑`	Aumentar FPS en 1	Máximo 15
`Shift+↓`	Reducir FPS en 1	Mínimo 1
`Backspace`	Eliminar fotograma seleccionado	En Modo Pro, sin confirmación

🏫 Consejos para el aula

🎯 Antes de la sesión

Seleccionar la plantilla adecuada en Modo Pro antes de entregar el dispositivo
Configurar el objetivo de fotogramas 🎯 según el tiempo de animación deseado
Comprobar que la cámara tiene permiso y se ve correctamente
Si se usará auto-captura, probar el intervalo antes
Cargue el dispositivo (la cámara consume batería)

📐 Encuadre y movimiento

Activar la rejilla ⊞ para que el alumnado coloque siempre los objetos en la misma posición
Activar Onion Skin para ver la diferencia respecto al fotograma anterior
Cambios pequeños y regulares entre fotos = animación fluida
Fijar el dispositivo con un soporte si el temblido es un problema
Usar el indicador de nivel (acelerómetro) para ángulos constantes

💾 Gestión de proyectos

Cada grupo puede tener su proyecto independiente en el Gestor
Usar 💾 Guardar al terminar la sesión para tener una copia JSON de seguridad
Exportar el WebM al final y guardarlo en el directorio del aula
El proyecto se guarda automáticamente en el dispositivo; no hace falta Wi-Fi

⚡ Rendimiento

El límite máximo es 1.500 fotogramas por proyecto
A 6 FPS, 1.500 fotos = 250 segundos (4 minutos) de animación
La exportación WebM puede tardar 1-2 minutos en proyectos grandes en tablets de gama baja
Si la app va lenta, reducir el zoom de la cámara a 1×

Relación FPS → fotogramas por segundo de animación

FPS configurados	Fotos para 1 s	Fotos para 5 s	Movimiento percibido
2	2	10	Muy entrecortado / time-lapse
4	4	20	Stop-motion clásico de aula
6 (defecto)	6	30	Fluido para animación sencilla
8	8	40	Análisis de movimiento
12	12	60	Animación fluida / GIF suave