Manual de Usuario de StreamEdu

StreamEdu es un entorno de reproducción inteligente y toma de notas diseñado para estructurar cursos educativos a partir de videos de YouTube, playlists y recursos digitales, sin distracciones de algoritmos ni publicidad lateral.

Requisitos del Sistema y Compatibilidad

La aplicación no requiere instalación de software auxiliar ni configuración de servidores locales. Funciona directamente abriendo el archivo index.html en cualquier navegador web moderno:

• Google Chrome / Brave / Edge: Soporte total, incluyendo la moderna API nativa window.showSaveFilePicker para descargas directas de notas.
• Mozilla Firefox / Apple Safari: Soporte completo con fallback transparente de descarga automática mediante blobs.
• Dispositivos Móviles y Tablets: Interfaz con diseño fluido adaptativo (Mobile-First) y cajón desplegable lateral.

La primera vez que inicias StreamEdu, la aplicación presenta un modal interactivo de bienvenida que te permite elegir entre dos caminos de aprendizaje:

El Recorrido Guiado Interactivo (Spotlight Tour)

El tour oscurece la pantalla suavemente y proyecta un foco iluminado sobre los cinco elementos neurálgicos de la aplicación:

La barra superior es el centro neurálgico de control. A continuación se presenta la captura de la aplicación en el tema Lemon Ice-Cream con los puntos funcionales clave:

StreamEdu - Vista Principal (Tema: Lemon Ice-Cream)

Figura 1: Interfaz general con reproductor de video 16:9, barra de progreso global, botones de gestión y acordeón lateral.

El reproductor de StreamEdu está optimizado para YouTube con estrictas directivas de privacidad, relación de aspecto 16:9 y soporte de fragmentación por minutos:

Formatos de Enlace de YouTube Soportados

Puedes ingresar casi cualquier variante de URL de YouTube en la aplicación:

• URLs estándar de navegador: https://www.youtube.com/watch?v=VIDEO_ID
• URLs acortadas de compartir: https://youtu.be/VIDEO_ID
• URLs con timestamps de inicio y fin: https://www.youtube.com/watch?v=VIDEO_ID&t=120s o parámetros JSON start: 60, end: 300 para reproducir solo el fragmento educativo deseado.

Barra de Acciones Inferior

Justo debajo del reproductor se ubica la barra de navegación inmediata de la lección:

Controlador Inteligente de YouTube y Auto-Avance

StreamEdu integra YouTubePlayerController mediante la API oficial de IFrame de YouTube, ofreciendo una experiencia de reproducción automatizada:

• Detección de Finalización en Tiempo Real: Cuando un video concluye de reproducirse (evento YT.PlayerState.ENDED), la lección se marca automáticamente como vista y se emite una notificación Toast confirmatoria.
• Control de Fragmentos por Minutos (Start / End): En lecciones fraccionadas, un temporizador interno verifica periódicamente la posición de reproducción. Al alcanzar el minuto límite (endTime), detiene la reproducción y registra la lección como concluida.
• Auto-Avance Continuo: Tras completarse la lección actual, el sistema avanza fluidamente a la siguiente lección tras un intervalo de 800 ms, permitiendo estudiar en modo manos libres.
• Fallback Seguro Offline / Protocolo Local: Si no hay conexión a internet o se ejecuta la aplicación bajo el protocolo local file:///, el sistema conmuta automáticamente al reproductor tradicional por parámetros de URL, garantizando que el curso siga siendo 100% usable.

La barra lateral organiza todo el material pedagógico. Está diseñada para navegar rápidamente mediante teclado o ratón:

Herramientas de Organización

• Edición Inline de Títulos: Haz clic en el botón lápiz (✏️) al lado del título del curso o de cualquier módulo para renombrarlo instantáneamente sin salir de la vista.
• Buscador Reactivo: Escribe en el campo «Buscar lección o tema...» para filtrar en tiempo real las clases por palabras clave en sus títulos.
• Pestañas de Filtrado por Estado:
  • Todos (N): Visualiza la totalidad del curso.
  • Pendientes (N): Oculta las lecciones ya vistas para enfocarte en lo que te falta.
  • Listos (N): Lista únicamente el contenido que ya dominaste.
• Módulos Acordeón: Haz clic en la cabecera de un módulo para colapsarlo o expandirlo, manteniendo despejada tu área de trabajo.
• Pestaña Flotante «LIBRETA»: Pestaña vertical dorada ubicada en el borde derecho del panel para abrir el cuaderno con un solo clic.

La Libreta de Apuntes es un cajón lateral deslizante que te permite tomar notas estructuradas mientras miras la clase sin perder de vista la lección:

StreamEdu - Libreta de Apuntes en Markdown con Vista Previa

Figura 2: Cajón lateral de notas con selector de fuentes, barra de formato Markdown, renderizado en vivo y botones de exportación.

Herramientas de Edición y Tipografía

La libreta cuenta con una barra de herramientas completa en la parte superior:

• Selector de Tipografía (5 Fuentes): Alterna instantáneamente entre cinco familias tipográficas:
  • Plus Jakarta (Sans): Moderna, limpia y de máxima legibilidad técnica.
  • Architects Daughter: Estilo manuscrito dinámico inspirado en Virgil / Excalidraw.
  • Patrick Hand: Caligráfica cuidada para notas de estudio personales.
  • JetBrains Mono: Monoespaciada perfecta para programación, snippets y terminal.
  • Merriweather: Tipografía serif para lectura cómoda y descansada de apuntes extensos.
• Selector de Tamaño: Elige entre 13px, 15px, 17px o 19px según tus preferencias visuales.
• Botones Rápidos de Markdown: Encabezados (H1, H2, H3), Negrita (B), Cursiva (I), Listas (≡), Citas (”) y Bloques de Código (<>).
• Pestañas Editor / Vista Previa: Alterna entre la escritura en texto plano y la previsualización formateada con soporte de sintaxis Obsidian (incluyendo tareas interactivas - [ ]).

Anexar y Descargar Apuntes

StreamEdu utiliza un esquema JSON abierto y universal. Puedes estructurar tus propios cursos en cualquier editor de texto o compartir archivos .json con tus compañeros de estudio:

Estructura Estándar de un Archivo de Curso

{
  "title": "Masterclass de Desarrollo Web Frontend",
  "description": "Curso completo desde fundamentos hasta arquitecturas avanzadas",
  "version": "2.0.0",
  "resources": [
    {
      "title": "MDN Web Docs",
      "url": "https://developer.mozilla.org",
      "type": "link"
    }
  ],
  "modules": [
    {
      "id": "mod_1",
      "title": "Módulo 1: Fundamentos y Semántica Web",
      "lessons": [
        {
          "id": "les_1_1",
          "title": "1. Estructura y Semántica Moderna en HTML5",
          "url": "https://www.youtube.com/watch?v=UB1O30fR-EE",
          "duration": "1:08:44",
          "completed": false,
          "start": 0,
          "end": 4124,
          "notes": "Introducción a etiquetas header, nav, main y footer."
        }
      ]
    }
  ]
}

Campos Técnicos de cada Lección

Exportación Dual: JSON Ligero vs Paquete Completo (.zip)

Al hacer clic en el botón «Exportar JSON» de la cabecera, StreamEdu evalúa inteligentemente si tu curso contiene archivos locales almacenados en IndexedDB:

Importador Polimórfico y Motor de Empaquetado en el Cliente

StreamEdu incluye el módulo ZipPackager, un motor de compresión y descompresión binaria desarrollado en Vanilla JavaScript puro (con cálculo nativo de CRC-32 y DataView):

• Cero Dependencias y 100% Privado: Todo el empaquetado y descompresión ocurre en la memoria RAM de tu navegador. Ningún archivo ni dato se transmite jamás a un servidor externo.
• Arrastrar y Soltar Universal (Drag & Drop): Puedes soltar tanto archivos .json como paquetes .zip o .licpack en la zona de carga de «Cargar JSON».
• Restauración Automática en IndexedDB: Al importar un paquete comprimido, el sistema extrae course.json, carga el temario y guarda de nuevo todos los archivos binarios de la carpeta attachments/ en la base de datos local del navegador, sin generar duplicados.

Al hacer clic en el botón «Recursos» de la barra superior, se despliega el panel modal de materiales asociados al curso activo. Este panel cuenta con dos modalidades de almacenamiento:

Pestañas del Gestor de Recursos

• Pestaña 1: Subir Archivo Local (Máx. 10 MB): Permite arrastrar o seleccionar documentos PDF, diapositivas, proyectos comprimidos o imágenes. El contenido binario se almacena directamente en la base de datos IndexedDB de tu navegador para acceso sin internet.
• Pestaña 2: Vincular Enlace en la Nube: Para registrar enlaces a carpetas de Google Drive, repositorios de GitHub, tableros de Figma o artículos web con título personalizado.
• Badge Contador Dinámico: El botón superior refleja en tiempo real la cantidad total de materiales disponibles en el curso.
• Descarga y Eliminación Individual: Cada tarjeta de recurso cuenta con un botón para descargar el archivo a tu disco o abrir el enlace, así como un botón para eliminarlo del curso.

StreamEdu cuenta con 8 paletas minuciosamente calibradas para ofrecer un contraste cromático superior a los estándares de accesibilidad WCAG AAA:

Tabla de Atajos de Teclado

Preguntas Frecuentes (FAQ)