App Flow · Flujo de la aplicación

entrada ─▶ /  ─▶ /serie/:slug ─▶ /serie/:slug/:capitulo
                                    │ (scroll ≥ 80%)
                                    ▼
                              celebración ─▶ siguiente capítulo

Rutas

• / — inicio con serie destacada, novedades y continuar.
• /biblioteca — todas las series con filtros.
• /serie/:slug — detalle de serie y mapa.
• /serie/:slug/:capitulo — lectura y práctica.
• /docs y /docs/:doc — documentos del proyecto.

Recorrido principal

Quien llega por primera vez ve la serie destacada y los capítulos nuevos. Al entrar a una serie entiende el alcance y los prerrequisitos; al leer un capítulo practica en el playground. Al superar el 80% de la lectura, el capítulo se completa y la celebración invita a seguir con el siguiente. Al volver otro día, la franja «Continuar aprendiendo» lo lleva directo al capítulo pendiente.

Transiciones

• Navegación con precarga al pasar el cursor por los enlaces.
• Restauración de scroll al volver atrás.
• Celebración superpuesta sin bloquear la interacción, 1,9 s.

Recorrido principal

Un visitante nuevo llega al inicio y ve la serie destacada con su llamado a «Empezar», seguida del carril de capítulos nuevos. Al entrar a una serie encuentra la lista de capítulos y el mapa de prerrequisitos, que le indica qué conviene leer antes. Desde ahí abre el primer capítulo.

En el capítulo, la columna izquierda muestra en qué punto de la serie está, la central contiene la lectura y los playgrounds, y la derecha sigue su avance por las secciones. Al llegar al 80% del texto el capítulo se completa con una celebración, y la navegación al pie lo lleva al siguiente.

Cuando el aprendiz vuelve otro día, el inicio muestra «Continuar aprendiendo» con el siguiente capítulo pendiente y el porcentaje de la serie, de modo que retoma en un clic.

Estados de la interfaz

• Sin progreso: el inicio omite la franja de continuar.
• Búsqueda sin resultados: la biblioteca lo indica y ofrece limpiar los filtros.
• Capítulo inexistente: página de no encontrado con enlace a la biblioteca.
• Código con error: el teléfono muestra el mensaje en rojo sin romper la página.