Interfaz

Cómo está organizado el editor de Irakasi y cómo funcionan sus controles.

El editor de Irakasi tiene algunas convenciones propias, desde cómo se comportan los botones y los campos hasta cómo aparecen y desaparecen los paneles. Esta página las explica desde los controles más pequeños hasta los paneles que los contienen, y da a cada panel el nombre que se usa en toda esta referencia.

Botones

Botones rectangulares y circulares

Las barras y los paneles usan tres tipos de botón, y su forma indica lo que hacen.

Botones de estado

Botones de estado primarios y secundarios

Los botones de estado de las barras son rectangulares. Activan o desactivan algo, como una herramienta, un panel o un ajuste, y permanecen resaltados mientras está activo. Tienen dos pesos:

  • Primarios, con color intenso cuando están activos, para los estados más importantes, como la herramienta seleccionada o el modo actual.
  • Secundarios, con un tinte suave cuando están activos, para estados menos importantes, como vistas opcionales y preferencias.

Botones de acción

Una columna de botones de acción circulares

Los botones de acción son circulares. Ejecutan una acción al momento, como deshacer o eliminar, y no se quedan pulsados.

Multibotones

Un botón con indicador de triángulo que revela alternativas ocultas

Los multibotones muestran un pequeño triángulo en uno de sus lados. El triángulo indica que el botón esconde alternativas. Puedes mostrarlas haciendo clic derecho sobre el botón, o haciendo clic y arrastrando en la dirección del triángulo. En un multibotón de estado, la alternativa que eliges sustituye a la que muestra el botón. En un multibotón de acción, la alternativa simplemente se ejecuta.

Campos

Campos numéricos

Campos numéricos de posición, tamaño, rotación, opacidad y ángulos

Los campos numéricos admiten escribir y arrastrar:

  • Arrastrar: pulsa sobre el campo y arrastra hacia arriba para aumentar el valor o hacia abajo para reducirlo. Un clic corto sigue colocando el cursor para escribir.
  • Botones de paso: algunos campos muestran pequeños triángulos a cada lado que cambian el valor en un paso. Mantén Mayús para pasos diez veces mayores.
  • Expresiones matemáticas: escribe una expresión como 120/4 y se resuelve al confirmarla o al salir del campo. Consulta Expresiones matemáticas en campos numéricos.
  • Límites: los valores escritos o arrastrados se mantienen dentro de los límites del campo. Un paso que superaría un límite deja el valor como está.
  • Unidades: los campos con unidad la muestran detrás del número y la ocultan mientras escribes.
  • Controlado por una animación: mientras una animación controla un valor, como la posición de un elemento animado, su campo es de solo lectura entre el inicio y el final del bloque. En el inicio o el final, los valores que admite el bloque siguen siendo editables.

Campos de color

Campo de color con el selector abierto

Un campo de color muestra el color actual en una muestra. Haz clic en la muestra para abrir el selector, donde también puedes escribir un código hexadecimal:

  • Área de color: arrastra para elegir el color.
  • L (luminosidad): hace el color más oscuro o más claro, con su campo o su deslizador.
  • C (croma): hace el color más apagado o más vivo, con su campo o su deslizador.
  • Paleta: una cuadrícula de colores predefinidos. Un color aparece resaltado cuando coincide con el color actual.
  • Cuentagotas: toma un color de cualquier punto de la pantalla, en los navegadores que lo admiten.

L y C vienen de OKLCH, un modelo de color basado en cómo percibimos el color. Usa L para acercar el brillo de colores de tonos distintos, o para ajustar el contraste sin cambiar el tono.

Cuando los elementos seleccionados tienen colores distintos, la muestra aparece con rayas diagonales.

Listas

Lista de geometría con la opción actual seleccionada

La mayoría de las listas aplican cada opción a medida que las recorres con las flechas del teclado, así puedes comparar opciones en el tablero. Las listas que añaden algo, sustituyen tu trabajo, recargan contenido en vivo o actúan sobre el texto que estás editando esperan a que elijas una opción.

Controles del panel de atributos

Secciones

Secciones Elipse y Trazo plegadas sobre la sección Relleno desplegada

El panel de atributos se divide en secciones. Haz clic en la cabecera de una sección para plegarla o desplegarla. Una sección plegada sigue plegada para cualquier elemento que selecciones, y el editor lo recuerda la próxima vez que abras el tablero en este navegador.

Valores mixtos

Campos con valores mixtos de varios elementos seleccionados

Con varios elementos seleccionados, un campo numérico cuyo valor es distinto entre ellos muestra ---, un campo de color muestra rayas y un interruptor puede mostrar un estado mixto. Al cambiarlo, todos los elementos seleccionados reciben el mismo valor. Consulta Atributos de una selección múltiple.

Copiar atributos

Botón para copiar atributos de relleno de otro elemento

Los atributos con un botón se pueden copiar de otro elemento del tablero. Consulta Tomar atributos de otro elemento.

Paneles

El editor con los nueve paneles señalados

Panel principal

Panel principal

Arriba a la izquierda. Comandos de archivo, de historial y de vista:

  • Menú de la app: comandos de archivo como Importar archivo (Importaciones), Descargar tablero, Exportar, Copiar e Imprimir.
  • Ajustes de interfaz: cambian cómo se muestra el tablero. Consulta Ajustes.
  • Deshacer: deshace el último cambio.
  • Rehacer: lo rehace.
  • Zoom: un multibotón de acción. Zoom a la selección encuadra los elementos seleccionados, o el contenido visible cuando no hay nada seleccionado, y Restablecer zoom devuelve el zoom a 1x. Consulta Acciones de navegación.
  • Entrar en pantalla completa: lleva la app a toda la pantalla. Salir de pantalla completa vuelve. Consulta Pantalla completa.

Cabecera del tablero

Cabecera del tablero

Arriba en el centro:

  • Nombre del tablero: el nombre del tablero que estás editando.
  • Versión: la Versión activa, cuando no es Main.
  • Usa IA con este tablero: abre los ajustes de conexión en un ordenador. Una vez conectado, muestra Servidor MCP conectado o WebMCP conectado. Consulta Conectar el tablero con IA.
  • Compartir contenido en directo: el botón con una pantalla junto al de conexión permite incluir contenido en directo en las capturas de tu asistente. Actívalo y elige esta pestaña en el aviso del navegador; un punto verde indica que la estás compartiendo. Desactívalo para dejar de compartirla.
  • Actividad de los agentes: tras la primera petición, la línea bajo el botón de conexión muestra la actividad actual del agente o la hora de su última acción. Haz clic para abrir las tareas y sus pasos mientras sigues usando el tablero. Consulta Seguir lo que hace.

Panel secundario

Panel secundario

Arriba a la derecha:

  • Selector de modo: cambia entre Modo creación, Modo animación y Modo reproductor. Consulta Modos.
  • Botones de paneles: muestran u ocultan cada panel. El modo reproductor solo conserva el del panel de atributos, y el del panel de línea de tiempo aparece en el modo animación o cuando el tablero tiene bloques de animación:

Panel de herramientas

Panel de herramientas

Abajo en el centro. Las herramientas para trabajar con el contenido del tablero, agrupadas en multibotones. Cada grupo muestra la última herramienta que usaste:

  • Navegación: Explorar tablero y Área de zoom. Consulta Herramientas de navegación.
  • Selección: Selección rectangular y Pintar selección. Consulta Herramientas de selección.
  • Texto: Texto, Texto en trazado, Bloque de texto enriquecido y Texto de código. Consulta Texto.
  • Trazados: Dibujo a mano alzada, Pluma, Curva por puntos y Línea recta por puntos. Consulta Trazados.
  • Geometría: Rectángulo, Elipse, Triángulo y Rombo. Consulta Elementos geométricos.
  • Flechas: Flecha, Flecha en codo, Flecha Bezier, Medir distancia y Medir ángulo. Consulta Flechas.
  • Borrador: elimina todos los elementos por los que arrastras. Ignora los elementos bloqueados, y no borra un grupo o un marco que contiene el punto donde empieza el trazo.
  • Objetos de tablero: Marco, Lienzo vacío, Cámara, Tabla, Elemento HTML, Tarjeta de archivo y Elemento de audio. Consulta Elementos.

Minimapa

Minimapa

Abajo a la izquierda. Consulta Minimapa:

  • Vista general: una pequeña vista de todo el tablero, para orientarte en uno grande.
  • Nivel de zoom: el zoom actual.
  • Mostrar minimapa: cambia entre el minimapa compacto y el expandido.

Panel lateral

Panel lateral

A la izquierda, se activa con . Contiene las listas siguientes. Mientras está desactivado, se desliza al acercar el puntero del ratón al borde izquierdo, fuera del modo reproductor, y se oculta de nuevo al salir de él. Elige una lista con el selector de la parte superior:

  • Tableros: los tableros guardados en este navegador, y los comandos para crearlos, subirlos e insertarlos. Consulta Gestión de tableros.
  • Versiones: las variantes de contenido del tablero actual, con Main en primer lugar. Consulta Versiones.
  • Iconos: una biblioteca de iconos que puedes buscar y colocar en el tablero como elementos. Consulta Biblioteca de iconos.
  • Cámaras: las vistas con nombre del tablero, que encuadran lo que muestra una animación o una presentación. Consulta Cámaras.
  • Secuencias: las animaciones del tablero. Cada secuencia tiene su propia línea de tiempo, y el panel de línea de tiempo muestra la activa. Consulta Secuencias.
  • Selecciones: conjuntos con nombre de elementos y bloques de animación que puedes volver a seleccionar con un clic. Consulta Selecciones con nombre.

Panel de acciones

Panel de acciones

A la izquierda del tablero, se activa con . Las acciones del contexto actual:

  • Con elementos seleccionados, los comandos que se les aplican, como eliminar, bloquear, duplicar y restablecer a Main.
  • Con una herramienta activa, las acciones que ofrece esa herramienta, como terminar o cancelar lo que estás dibujando.
  • En el modo animación, los comandos para crear y gestionar bloques de animación y pausas.

Panel de atributos

Panel de atributos

A la derecha, se activa con . Las propiedades del contexto actual. Consulta Atributos:

  • Con una herramienta activa: los ajustes de esa herramienta, como el trazo y el relleno con los que dibujará.
  • Con elementos seleccionados: sus atributos, agrupados en secciones.
  • Con un bloque de animación seleccionado: sus ajustes, como sus tiempos y su easing. Cuando hay un elemento y un bloque seleccionados a la vez, lo que muestra el panel depende del modo.
  • En el modo reproductor: los ajustes del reproductor.

Panel de línea de tiempo

Panel de línea de tiempo

Abajo, se activa con . Donde se reproduce y se edita la animación del tablero. Mientras está oculto y anclado, se desliza al acercar el puntero del ratón al borde inferior, fuera del modo reproductor. Consulta Panel de línea de tiempo:

  • Controles de cabecera: reproducción, visualización de pistas y ajustes de tiempo.
  • Tira de resumen: toda la duración de la secuencia, con el rango que se reproduce.
  • Regla y cabezal: el tiempo en segundos y el instante actual.
  • Pistas: filas que contienen los bloques de animación. Un bloque puede animar varios elementos.

Menús y ventanas

Menú contextual

Menú contextual abierto en el tablero

Haz clic derecho en el tablero, o mantén pulsado en una pantalla táctil, para abrir un anillo de comandos alrededor del puntero. Consulta Menú contextual.

Ventanas flotantes

Panel de línea de tiempo flotando sobre el tablero

Algunos editores pueden salir de su panel y flotar sobre el tablero, donde tienen más espacio:

Trabajar con una ventana:

  • Mover: arrastra su barra.
  • Cambiar el tamaño: arrastra sus bordes o esquinas. El borde superior del panel de línea de tiempo mueve la ventana.
  • Ocultar: las ventanas se ocultan en el modo reproductor y cuando la interfaz está oculta, y vuelven a aparecer donde estaban.