Skip to main content

​
Descripción

Mint es el editor de páginas HTML integrado en Tangerine. Permite construir contenido educativo interactivo — similar a herramientas como Articulate Rise — combinando bloques de texto, imágenes, galerías, multimedia y componentes interactivos en una página web visualmente atractiva. A diferencia de Lemonade, que se centra en actividades evaluativas (preguntas con respuesta), Mint está diseñado para contenido expositivo e interactivo: lecciones, explicaciones, recursos de consulta y páginas con elementos dinámicos como acordeones, comparativas antes/después o intercambiadores de imagen.
Rol requerido: Administrador (backoffice) o Docente (frontoffice)
Los docentes acceden al mismo editor Mint desde el frontoffice al editar lecciones dentro de sus cursos. La interfaz es idéntica en ambos contextos.

​
Cómo acceder desde el backoffice

El editor Mint se abre siempre dentro del contexto de un programa digital, desde la pestaña Contenidos.
1

Abrir un programa digital

Desde el menú lateral, el administrador accede a Contenidos > Programas digitales y selecciona el programa que desea editar.
2

Navegar a la pestaña Contenidos

En la configuración del programa, se selecciona la pestaña Contenidos para visualizar la estructura de módulos, submódulos y materiales.
3

Añadir o editar una Página html

Dentro de un submódulo, el botón + Añadir despliega un menú con los tipos de material disponibles. La opción Página html crea una nueva página Mint.
Menú de añadir material mostrando la opción Página html junto a Material, Quiz, Tarea, Videolecciones y Sección
Para editar una página existente, se hace clic en el icono de tres puntos (⋯) del material y se selecciona Editar.
Menú contextual de una página html con opciones Editar, Mover a, Duplicar y Eliminar
Además de “Página html”, Mint también soporta el tipo Página html dual, que permite crear versiones diferenciadas de contenido para profesor y estudiante dentro de la misma página. Esta opción es útil cuando el docente necesita ver guías didácticas o notas adicionales que no deben ser visibles para el estudiante.

​
Interfaz del editor

Al abrir una página Mint, el sistema presenta un editor WYSIWYG a pantalla completa organizado en tres zonas:
Vista completa del editor Mint mostrando la barra superior, el área de contenido y la paleta de bloques inferior

​
Barra superior

​
Área de contenido

Zona central donde se visualizan y editan los bloques. Cada bloque muestra al pasar el cursor una barra de acciones con:
  • Editar — Abre las opciones de configuración del bloque
  • Subir / Bajar — Reordena el bloque dentro de la página
  • Duplicar — Crea una copia del bloque
  • Borrar — Elimina el bloque
  • Sustituir por bloque compatible — Cambia el tipo de bloque manteniendo el contenido donde es posible
Bloque de texto seleccionado mostrando el borde púrpura y los botones de acción
Los bloques se pueden reordenar arrastrándolos con el asa de arrastre que aparece al lado izquierdo del bloque.

​
Paleta de bloques

En la parte inferior del editor, una paleta de acceso rápido permite insertar los tipos de bloque más comunes con un clic: El botón Todos abre la Biblioteca de bloques completa en un panel lateral.

​
Botón Previsualizar

En la esquina inferior derecha, el botón Previsualizar muestra cómo verá el estudiante la página final, sin las herramientas de edición.

​
Biblioteca de bloques

La Biblioteca de bloques organiza todos los tipos disponibles en 11 categorías. Se abre haciendo clic en Todos en la paleta inferior.
Biblioteca de bloques abierta mostrando las categorías en el panel lateral izquierdo
Bloques para contenido textual con distintos niveles de jerarquía.
Categoría Texto de la Biblioteca de bloques mostrando las previsualizaciones de Párrafo, Párrafo con cabecera y Párrafo con subcabecera
Bloques para contenido destacado que llama la atención del lector.
Bloques para texto con formato destacado.
Bloques para contenido visual con distintas disposiciones.
Categoría Imágenes de la Biblioteca de bloques
Colecciones de imágenes en distintas distribuciones.
Bloques para contenido audiovisual y embebido.
Componentes dinámicos que el estudiante puede manipular.
Categoría Interactivos mostrando Acordeón, Intercambiador de imagen, Antes y después e Imagen volteable
Los bloques interactivos son especialmente útiles para contenido que requiere exploración activa por parte del estudiante, como comparar fases de un proceso histórico (Antes y después) o explorar las partes de un organismo (Gráfico etiquetado).
Permite embeber actividades evaluativas creadas con Lemonade directamente dentro de la página Mint.Las actividades Lemonade embebidas mantienen toda su funcionalidad (corrección automática, feedback, puntuación) dentro del flujo de la página Mint.
Integración con plataformas de contenido educativo externas.

​
Edición de texto enriquecido

Los bloques de texto soportan un editor de texto enriquecido con las siguientes opciones de formato:
  • Negrita, cursiva y subrayado
  • Listas ordenadas y con viñetas
  • Enlaces
  • Fórmulas matemáticas (renderizadas con KaTeX)
  • Tooltips de texto (palabras con información adicional al pasar el cursor)
El formato se aplica seleccionando el texto y usando la barra de herramientas contextual que aparece sobre la selección.

​
Layout de filas y columnas

El botón Editar layout en la barra superior activa el modo de disposición avanzada. Este modo permite:
  • Organizar bloques en filas y columnas
  • Definir el ancho proporcional de cada columna
  • Crear diseños más complejos que una simple secuencia vertical de bloques
La funcionalidad de layout por filas y columnas está habilitada por configuración del programa. Si no se ve el botón Editar layout, el programa no tiene activada la opción enableRowColumnLayout.

​
Auto-guardado

El editor Mint implementa un sistema de auto-guardado para prevenir pérdida de datos:
  • Guardado parcial cada 5 segundos mientras hay cambios pendientes
  • Guardado completo cada 60 segundos
No existe un botón manual de “Guardar” dentro del editor — los cambios se persisten automáticamente. Al cerrar el diálogo del editor (con el botón X), el sistema realiza un guardado final antes de cerrar.
Si se cierra el navegador o se pierde la conexión antes de que el auto-guardado se ejecute, los últimos cambios (hasta 5 segundos de trabajo) podrían perderse.

​
Versión dual (Profesor / Estudiante)

Cuando una página se crea como Página html dual, el editor muestra un selector de versión que permite alternar entre:
  • Versión Profesor — Contenido completo incluyendo notas didácticas, guías de facilitación y material de referencia
  • Versión Estudiante — Contenido visible para el alumno, sin las notas del profesorado
Cada versión se edita de forma independiente. Los bloques de tipo Notas para el profesorado solo son visibles en la versión profesor, independientemente de si la página es dual o no.

​
Situaciones especiales

No directamente. El tipo de página (simple o dual) se define al crear el material. Para convertir una página simple en dual, se debe crear una nueva página dual y reconstruir el contenido, o solicitar el cambio a nivel de base de datos.
El editor no tiene bloqueo de edición concurrente. Si dos usuarios editan la misma página al mismo tiempo, el último en guardar sobrescribirá los cambios del otro. Se recomienda coordinar la edición de contenidos entre los miembros del equipo.
No directamente. Al hacer clic en Editar en un bloque de actividad Lemonade, se abre el editor Lemonade dentro de Mint para modificar la actividad. Los cambios en la actividad se reflejan en todos los lugares donde esté referenciada.
El programa puede incluir una opción de Importar Mint que permite cargar páginas previamente exportadas. Esta funcionalidad está disponible desde el menú de opciones del submódulo.
Sí. Desde el menú contextual (⋯) del material en la vista de contenidos del programa, la opción Duplicar crea una copia completa de la página con todos sus bloques.
Las páginas Mint están asociadas al contenido del programa. Cada página es una instancia propia, por lo que los cambios en una no afectan a copias en otros programas. Solo si se comparte el mismo contenido base (por referencia), los cambios se propagan.

​
Relacionado

Editor Lemonade

Herramienta de autor para crear actividades evaluativas con múltiples tipos de preguntas.

Contenidos del programa

Gestión de módulos, submódulos y materiales dentro de un programa digital.

Crear contenido

Flujo completo para crear cualquier tipo de contenido en el backoffice.

Editar programa

Configuración general y pestañas de un programa digital.