Alternativas para el método de edición de cada presentación

Actualmente, cada presentación será editada directamente en HTML, debido a la ausencia de un editor WYSIWYG para Reveal.js dentro de nuestro sistema (descartado para esta etapa del proyecto). Además, la generación de gráficas, simulaciones y otras tareas en Python son hechas por aparte y luego exportadas e incrustadas en el HTML, de alguna forma. Es decir, son dos procesos separados difíciles de integrar en un solo flujo.

Modelo de edición de Streamlit

Streamlit es una plataforma (poderosa) de creación de aplicaciones web desde Python, de código abierto, que convierte un documento de Python (con todas sus posibilidades) en un sitio HTML donde puede mostrar resultados como: DataFrames, gráficas, y casi cualquier cosa con su API.

Tiene, además, todas las opciones de edición de formato clásicas de texto: títulos, LaTeX, Markdown, etc., y aplicaciones de terceros para lienzos editables, etc.

Esta es, por mucho, la herramienta más poderosa para generar aplicaciones web desde Python. Su API es maduro y bien estructurado y mantenido.

Sabiendo esto, es posible imaginar que la plataforma de presentaciones sea una especie de envoltura que da formato de presentaciones (Reveal.js) a la edición que se hace en el documento de Python con la instrumentación de Streamlit.

El problema en ese caso para ser de cambiar radicalmente el tema de la aplicación web generada, más toda la integración con el backend en Django.

Modelo de edición de Manim

Manim (An animation engine for explanatory math videos) es también una herramienta poderosa, y aunque el producto es diferente, un video, su proceso de creación tiene algunas similitudes, específicamente que hay un código fuente en Python donde modela textos y animaciones.

Manim es también de código abierto y puede ser integrado de otras formas en el proyecto.

Pero calma, paso a paso con el modelo de edición

Antes de tratar de integrar Streamlit es posible encontrar inspiración en su modelo:

flowchart LR
    A[Código fuente de Python] 
    B[Servidor]
    C(Sitio web)
    A --> B --> C

Para nosotros también tiene sentido porque unifica la edición del contenido del sitio en un código fuente de Python, incluyendo textos, simulaciones, animaciones y otros.

Posibilidades previstas

Es importante explorar más estos modelos de edición, porque podrían ser realmente un camino más estable de edición de presentaciones y de aumento de las posibilidades de despliegue de contenido.

Entonces, tareas:

• Averiguar si es posible, como primera posibilidad, incrustar contenido de Streamlit en otros sitios (dificultad baja, idoneidad baja)
• Evaluar si es posible modificar el código de Streamlit para darle nuestro formato y backend (dificultad alta, idoneidad alta)
• Crear nuestro propio "convertidor" de un código fuente en Python para editar todo el contenido (incluyendo gráficas, simulaciones, etc.) y generar la presentación (dificultad media, idoneidad media/alta)

Sí.

Para esto hay que encontrar la forma de guardar el HTML de Reveal.js de la presentación en la base de datos y que luego Django lo renderice.

Tomar en cuenta la forma más fácil de hacer ediciones de la presentación localmente para luego "subirlas" al sistema.

Otras cosas para tomar en cuenta:

• Archivos multimedia

Quiero que alguien responda una pregunta. Quiero que aparezca un aviso a una persona al azar.

Esto es parte de un problema más general relacionado con enviar un "mensaje" (en el sentido amplio) del presentador a cualquiera de los asistentes.

¿WebSockets?

Durante la presentación, pueden estar habilitadas "reacciones" a lo que está sucediendo, elegidas apropiadamente para intentar reflejar "los sentimientos" de los participantes, con categorías como:

• Interesante
• Aburrido
• Complejo
• Otros descriptores de la materia

El registro de esto podría retroalimentar en tiempo real a quien presenta o bien servir para rediseñar la presentación.

La implementación imaginada es algo así como: en una esquina hay un menú desplegable de emojis que representan cada reacción. Se envía la reacción y la diapositiva a la que pertenece, pero no el nombre del participante, para tener anonimidad.

Introducción

Las presentaciones deben incluir formas de "interactividad" tipo formulario con preguntas de comprensión de la materia. Ejemplos similares:

• Cuestionarios de Zoom
• Kahoot!
• Nearpod
• Google Forms

Excepto Zoom, Kahoot! y Nearpod tienen una interfaz gráfica muy desarrollada para ese tipo de interacción.

Google Forms

Google Forms tiene los siguientes tipos de preguntas (entre paréntesis su equivalente HTML):

• Respuesta corta (text)
• Párrafo (textarea)
• Varias opciones (radio)
• Casillas (option)
• Desplegable (select)
• Escala lineal (un arreglo unidimensional de radio)
• Cuadrícula de varias opciones (un arreglo bidimensional de radio)
• Cuadrícula de casillas (un arreglo bidimensional de option)
• Fecha (date)
• Hora (time)

Nearpod

Nearpod tiene las siguientes categorías de diapositivas:

Interactivo

• Video (fácil de integrar con HTML)
• Contenido web (sin problema de integración)
• Video de la BBC
• Nearpod 3D (algunos objetos tridimensionales predefinidos, en nuestro caso podríamos tener animaciones interactivas de gráficas matemáticas a partir de Bokeh, Matplotlib, etc.)
• Simulación PhET (integración con simulaciones interactivas de ciencias y matemáticas de PhET, podríamos evaluar posibilidad de integración también)
• Field Trip virtual (animación de realidad virtual)

Cuestionarios y juegos

• Quiz (opción múltiple como opciones o casillas)
• Draw it (dibujo a mano alzada)
• Rellena los espacios (drag and drop de palabras en un texto)
• Memory test (juego de pares en cartas, como este en JavaScript)
• Time to Climb (tipo competencia con animación)
• Matching pairs (parecido al juego de cartas pero que une texto con imágenes)

Debates

• Collaborate Board (un panel multimedia para colocar cosas)
• Flip (integración con Flip)
• Poll (recopilación de opiniones, que no es bueno/malo)
• Open Ended Questions (respuesta escrita)

Parece que muchas de estas opciones son posibles de integrar. El énfasis por ahora será en HTML "vainilla".

Modelos

Para crear una interfaz de creación de preguntas necesitamos los siguientes modelos:

Question

La descripción de la pregunta, incluyendo multimedia.

• question_id
• title (CharField): título del problema
• description (TextField): enunciado del problema en Markdown, incluyendo ecuaciones, links, etc. Podría ser útil un editor de Markdown para Django o un editor más robusto como Tiny.
• image (ImageField): una imagen ilustrativa del problema (opcional)
• data (FileField): un archivo con datos para el problema (opcional)
• form_type (CharField): el tipo de pregunta: selección única, texto, etc.
• question_set (IntegerField): el conjunto de preguntas dentro de la presentación
• topic (ForeignKey): un tema de la lista de temas (tabla Topic)

Choice

Cuando aplica, la pregunta puede tener distintas opciones, como en selección múltiple.

• choice_id
• question_id
• text
• is_correct

Answer

Donde se almacenan las respuestas históricas de los usuarios.

• answer_id
• question_id
• user_id
• choice_id

Topic

Lista "oficial" de los temas del curso

• topic_id (CharField): clasificación alfanumérica del tema
• name (CharField): nombre del tema

Diagrama

erDiagram
    Deck ||--o{ Question : has
    Question ||--o{ Choice : offers
    Question ||--o{ Topic : "related to"
    Answer }o--|| Question : "given to"
    User ||--o{ Answer : provides

Tareas

• Crear modelos
• Crear plataforma de creación de preguntas
• Habilitar espacio dentro de presentaciones
• Crear patrón de pregunta
• Editar CSS para configurar preguntas
• Integrar con programación para hacer preguntas programadas revisadas automáticamente

¿Cuáles son los tipos de usuarios? Crear modelos para cada uno y reglas de acceso a los recursos de la plataforma.

Actualmente la autenticación es con nombre de usuario (username) y contraseña, sin embargo, mejor que sea con correo institucional (@ucr.ac.cr) y contraseña, y así para hacer el inicio de sesión.

Opcional: utilizar tanto el correo completo ([email protected]) o solamente el maria.rodriguez y automáticamente se agrega el @ucr.ac.cr.

Shiny es una plataforma de Posit (ex-RStudio) para crear gráficas interactivas en web. ¿Hasta qué punto es posible integrar con Django para usar en las presentaciones?

Hace cosas similares a las que hace Bokeh (que ya tiene integración con PyScript, ventaja para Bokeh) y además tiene buen respaldo y perspectivas de evolución.

Quizá la pregunta más general es: ¿cuál plataforma de graficación interactiva podemos usar? Candidatos hasta ahora:

• Bokeh
• Shiny
• Matplotlib

Nota: esto es para crear gráficas que ya están incrustadas en la presentación y con las cuales interactúan los estudiantes (modificación de parámetros, por ejemplo), no es para ser editadas por ellos, como en los otros escenarios con PyScript, en donde es un ejercicio de programación.

Shiny, Bokeh, Matplotlib >>> visualización
PyScript + Matplotlib, etc. >>> programación

Criterios de selección:

• Compatibilidad con Django y Reveal.js
• Facilidad de edición
• Herramientas
• Documentación
• Comunidad
• Que sea más bonito y chiva

Importante hacer pruebas.

Yes.

Incluir información como sigla, nombre, descripción, etc.

TikZJax convierte elementos <script> de JavaScript en una página web con código de PGF/TikZ a imágenes SVG.

Ver demostración. Su desarrollo está detenido.

Esto podría ser una herramienta útil para las presentaciones porque las gráficas de las presentaciones del curso están hechas en TikZ o variantes, y podría habilitar traslados rápidos (aunque no óptimos) del material que ya existe.

Esta debería ser solo una de las herramientas de creación de gráficas, junto con las otras herramientas nativas de Python y de JavaScript/HTML/CSS.

• Probar funcionalidad básica de TikZJax con TikZ puro.
• Probar con PGFplots (\begin{axis}), posiblemente con la versión de drgrice1 para implementar algo así como <script type="text/tikz" data-tex-packages="pgfplots"> dentro de la presentación.

Comentarios

Funciona la implementación de TikZJax puro y parece útil porque TikZ tiene posibilidades muy amplias, sin embargo, sin PGFPlots es muy difícil graficar funciones matemáticas. De todos modos, no debería ser este el modo de hacerlo en esta plataforma. Deberían ser gráficas nativas o bien hechas en Python, con algún nivel mínimo de interactividad, en lugar de imágenes estáticas (SVG).

Por tanto, queda relegada a baja prioridad la integración necesaria de PGFPlots.

Con la reciente eliminación del REPL de PyScript, estamos en un dilema: podemos quedarnos con la versión anterior de PyScript y usar ese REPL, pero al mismo tiempo hay funcionalidades de la versión nueva que son útiles y necesitamos.

Un REPL en las presentaciones es un componente central, así que no podemos renunciar a ello.

Una opción que sería importante explorar es la combinación de un editor de texto para código, incrustado en la presentación, junto con las opciones de PyScript para ejecutar código en ciertos eventos, como con el decorador @when y las opciones py-onclick, por ejemplo.

Las ventajas de un editor, inclusive por encima del mismo <py-repl>, pueden ser:

• Libertad de configuración
• Extensibilidad
• Más

Ejemplos de editores:

• Ace.js: el más popular, mejor documentación, muchos colaboradores, aspecto un poco más antiguo
• CodeJar: más nuevo, aspecto más moderno, poco mantenimiento, proyecto personal

Este sistema está dirigido a personas estudiantes de la UCR, específicamente matriculados en el curso IE0405 - MPSS, por lo tanto, el registro en el sistema es exclusivo para ellos, a partir de la información oficial institucional (correo, nombre, etc.).

Por lo tanto, el proceso de registro no está abierto a cualquier usuario, sino que lo harán los administradores del curso para cada nuevo semestre.

Buena parte del material estará disponible para cualquier visitante (por ejemplo, el material de clase), sin embargo, solo los usuarios registrados tendrán estadísticas de participación, etc., y algunas otras restricciones (por ejemplo, acceso a una videconferencia sincrónica).

Por lo tanto, el formulario de registro debe ser un sitio accesible solamente desde la sesión de un administrador.

Al público solo se muestra el botón de inicio de sesión y quizá una nota de que el ingreso es por invitación.

Para colocar imágenes SVG y todo lo demás.

Para nuestro proyecto requerimos:

• Identidad visual de la UCR (colores, tipografías, etc.)
• Más contenido por cada diapositiva. Motivo: Reveal.js es para presentaciones en proyector mientras que nuestras presentaciones serán en pantalla personal en un navegador (tampoco tan pequeño porque puede ser visto en celular).
• Barra de herramientas o menú "flotante" en una esquina para tener acceso al resto del sitio y opciones para el usuario registrado, etc.
• Otras cosas configurables: citas (blockquote), ecuaciones, fragmentos de código, imágenes, etc.
• Logo en alguna parte de la diapositiva

Entonces, es necesario editar los archivos CSS descargados de Reveal.js, específicamente, crear un tema ucr.css dentro de /reveal/dist/theme/.

Manim es un paquete fabuloso para hacer animaciones programáticas con contenido matemático avanzado, como ecuaciones con LaTeX y gráficas dinámicas.

Es una excelente herramienta didáctica, como lo demuestra 3Blue1Brown en su canal de YouTube.

Hay una diferencia importante, sin embargo: que Manim genera videos, mientras que nuestro sistema necesita algo ligeramente distinto en el que el presentador pueda controlar el avance del video generado. Algo así como ver el video en "segmentos" específicos. Y esta es una característica importante.

Hay varias posibilidades:

• Colocar un video, simplemente, e ignorar la necesidad de controlar el avance, o bien, hacer el control manualmente (reproducir, pausar)
• Generar un conjunto de GIF (partir el video), donde cada uno es "un paso del problema"
• Manipular los controles HTML en <video> para parar o pasar a una posición específica. ¿Alguna herramienta de JavaScript que haga esto?
• Configurar el mismo Manim para indicarle dónde están las pausas en el video y que genere los segmentos
• (Opción ideal) Generar animaciones (por ejemplo, en SVG) directamente desde Manim, y no como un video

Algunas tareas

• Explorar Manim per sé (ejecutar ejemplos básicos y exportar GIFs)
• Explorar posibilidades de control de video segmentado
• Explorar cómo controlar remotamente el nivel de avance de un video (tipo WebSockets)

Agregar las plantillas según está indicado en el documento MODELS.md.

Nota: observar lo de las plantillas de Django, tipo:

{% extends 'base.html' %}

{% begin block %}

{% begin block %}

etc.

Porque sí.

Dentro de la presentación, en todo momento debe mostrarse una pequeña barra de herramientas o links arriba a la derecha (u otra parte) para navegar el documento o para regresar a la página de inicio, o para instrucciones básicas de Reveal.

Crear una página de inicio para registro de participantes e información general.

Nota: utilizar la plantilla de Bootstrap.