Tableros

Un tablero en Zettly es un lienzo infinito — una sola superficie desplazable que puede contener desde un boceto rápido hasta un plan de proyecto completo. La idea se acerca más a una pizarra que a un documento. Sueltas piezas en él, las conectas y las reorganizas a medida que el panorama se aclara.

Lo que hace que los tableros de Zettly sean distintos de otras herramientas de lienzo es que las piezas que sueltas en un tablero están vivas. Un widget de nota muestra la nota real, en tiempo real. Un widget de tareas lee del mismo hub de tareas que ves en la superficie Tareas. Un widget de calendario en un tablero es el mismo calendario que ves en la superficie Calendario. No hay copias obsoletas ni sincronización manual — cuando cambia la cosa subyacente, el widget en el tablero también cambia.

Esta página recorre los bloques de construcción, los widgets en vivo y cómo armar un tablero para un trabajo real.

El lienzo en sí

Un tablero es una sola superficie plana que se extiende en todas las direcciones. Te desplazas con el botón central del ratón o el trackpad, haces zoom con la rueda de desplazamiento o los controles de zoom, y ajustas todo el tablero a tu ventana con una sola pulsación de tecla.

Algunas cosas que el lienzo te da por defecto:

• Una cuadrícula que ajusta los widgets a una alineación limpia. Desactívala para colocación libre.
• Capas que te permiten separar preocupaciones. Un patrón común es una capa de fondo para un título de proyecto o un boceto, una capa media para los widgets en vivo y una capa de primer plano para anotaciones y tinta.
• Minimapa en la esquina para orientarte en un tablero extenso.
• Niveles de zoom desde “ajustar todo” hasta “editar un solo widget de cerca”.

El lienzo es el mismo motor que alimenta Diapositivas y presentaciones, así que todo lo que aprendas sobre dibujar en un tablero funciona en diapositivas también. Las dos superficies comparten un vocabulario de formas, conectores y tinta.

Widgets en vivo: por qué importan los tableros

Un widget es un trozo de contenido del vault soltado en el lienzo. Cuando sueltas un widget, permanece conectado a la fuente — edita la fuente y el widget se actualiza, sin paso extra.

Los tipos de widget que más usarás:

• Widget de nota — una nota renderizada en una tarjeta con forma de tablero. Puedes redimensionarla, colocarla donde quieras, y el texto y los enlaces de la nota subyacente están vivos. Toca para entrar en modo edición y estás editando la nota real, en el tablero. Es el widget más común, y el que más usarás.
• Widget de tareas — una porción del hub de Tareas. Puedes acotarlo a un proyecto (una etiqueta), un estado o un filtro guardado. Las tareas nuevas que añades en el tablero aparecen en el hub; las tareas completadas en el hub se actualizan en el tablero.
• Widget de calendario — una porción de la superficie Calendario. Suelta una semana o un mes en el tablero. Arrastra eventos para reprogramar; los cambios vuelven al calendario.
• Widget de grafo — una porción del Grafo de conocimiento acotada a un subconjunto de notas (una etiqueta, una carpeta o un filtro guardado). Es una buena forma de añadir contexto a un tablero de proyecto sin saturar el lienzo con notas.
• Widget Mermaid — pega código fuente de un diagrama Mermaid y se renderiza como una escena en vivo y editable en el tablero. Consulta la sección sobre Mermaid más abajo.
• Widget de texto — una nota adhesiva o un bloque de texto flotante. Útil para etiquetas, encabezados y llamadas.
• Widget de imagen — un archivo de imagen de tu vault, embebido a cualquier tamaño.

Los widgets pueden redimensionarse, rotarse y agruparse. Puedes moverlos, caparlos y conectarlos con conectores. El punto es que un tablero es una composición — un solo lienzo que reúne las piezas del vault que importan para el trabajo en cuestión.

Herramientas de dibujo

El motor de dibujo en un tablero es el mismo que se usa en lienzos de notas y diapositivas, así que la experiencia es consistente entre superficies.

Las herramientas de dibujo incluyen:

• Tinta con sensibilidad a la presión en dispositivos compatibles
• Formas — rectángulos, elipses, rombos, flechas, líneas, cajas de llamada
• Notas adhesivas para texto flotante
• Conectores que se ajustan a puntos de anclaje en formas y widgets
• Un lazo para seleccionar y mover grupos
• Una goma que entiende qué trazo estás tocando
• Ajuste a cuadrícula y ajuste a forma para alineación ordenada

Los conectores merecen una mención especial. Cuando conectas un widget A a un widget B, el conector los sigue mientras mueves cualquiera de los dos lados. Conecta una nota a una tarea, y has dibujado un enlace visual entre “qué es esto” y “qué hay que hacer”. Un patrón común es conectar las notas de un proyecto a sus tareas, y las tareas al widget de calendario que muestra el cronograma — una vista de todo el proyecto en un solo tablero.

Mermaid: de código fuente a escena

Si has escrito diagramas Mermaid (los bloques de código mermaid populares en Markdown), puedes pegar el código fuente directamente en un tablero y Zettly lo convierte en una escena de lienzo en vivo y editable.

Esto es lo que significa en la práctica:

1. Pegas un código fuente Mermaid de flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram o gantt.
2. Zettly analiza el diagrama y lo dispone como un conjunto de formas de lienzo, conectores y bloques de texto.
3. Las formas son ahora objetos de tablero de primera clase — puedes arrastrarlas, cambiar colores, editar etiquetas, añadir formas nuevas y conectarlas a widgets en vivo.
4. El código fuente Mermaid original se conserva junto a la escena, así que puedes volver a texto plano si quieres.

El resultado es un diagrama que puedes esbozar en texto pero refinar visualmente, sin renunciar al código fuente estructurado. Consulta Diapositivas y presentaciones para cómo funciona la misma conversión en diapositivas.

Capas y organización

Para un tablero pequeño — unas notas y un boceto rápido — las capas son exceso. Para un tablero de proyecto real, valen la pena.

Una configuración común de tres capas:

• Capa de fondo. Un título, un brief, un boceto del diseño del proyecto, un logo. Bloqueada por defecto.
• Capa de widgets. Todos los widgets en vivo — notas, tareas, calendario, grafo. Donde ocurre el trabajo.
• Capa de anotaciones. Tinta, llamadas, flechas, trabajo de borrador. La capa de “pensar en voz alta”.

Puedes ocultar y mostrar capas mientras presentas el tablero, o usarlas para mantener el lienzo ordenado a medida que crece. El panel de capas está en el sidebar derecho.

Construir un tablero de lanzamiento: un ejemplo trabajado

Digamos que estás lanzando un producto pequeño. Tienes una nota de proyecto, una lista de tareas, un calendario con fechas de lanzamiento y un puñado de notas relacionadas de la fase de planificación. El tablero de lanzamiento reúne todo en una sola vista.

Paso 1: Título y brief. Suelta un widget de texto en la capa de fondo con el nombre del proyecto y una descripción de una línea. Bloquea la capa de fondo.

Paso 2: La nota de proyecto. Suelta un widget de nota con tu nota principal de proyecto (la “fuente de verdad” del lanzamiento). Fíjala arriba a la izquierda en la capa de widgets. Es el ancla del que cuelga el resto del tablero.

Paso 3: Notas relacionadas. Suelta widgets de nota para el brief, la investigación de usuarios, la lista de verificación de lanzamiento y cualquier otra nota de la que dependa el lanzamiento. Colócalas alrededor de la nota de proyecto. Conecta cada una a la nota de proyecto con un conector etiquetado — las etiquetas se convierten en un mapa visual de cómo encajan las piezas.

Paso 4: Tareas. Suelta un widget de tareas. Acótalo a una etiqueta como #lanzamiento o un filtro guardado. El widget muestra solo las tareas de este lanzamiento. Arrastra las tareas a un orden sensato en el tablero.

Paso 5: Calendario. Suelta un widget de calendario mostrando el mes de lanzamiento. Arrastra los hitos del widget de tareas al calendario para programarlos — las fechas vuelven al hub de tareas.

Paso 6: Grafo. Suelta un widget de grafo acotado a la etiqueta de lanzamiento. El grafo muestra cada nota conectada al lanzamiento, organizada visualmente. Mueve el widget a una esquina del tablero para que no compita con el diseño principal.

Paso 7: Anotar. Cambia a tinta, dibuja flechas, añade llamadas. La capa de “pensar en voz alta”.

Lo que obtienes es un solo lienzo que puedes abrir en cualquier dispositivo y ver el lanzamiento de un vistazo — qué está hecho, qué queda, cuándo ocurren las cosas y cómo se relacionan las piezas. El mismo tablero, presentado en Diapositivas y presentaciones, se convierte en una revisión de lanzamiento.

Tableros y el resto de la app

Algunas notas prácticas:

• Los tableros se guardan como archivos en tu vault. Un tablero es un solo archivo en formato estructurado, versionable e inspeccionable. La estructura de carpetas para tableros depende de ti.
• El mismo widget puede vivir en varios tableros. Suelta un widget de nota en tu tablero de lanzamiento y en tu tablero de revisión semanal. Editar la nota desde cualquier lugar actualiza ambos.
• Los tableros pueden exportarse a PDF o PNG. Útil para compartir, especialmente con personas que no usan Zettly.
• Los tableros son nativos del lienzo. Las formas, conectores y tinta de los tableros funcionan en diapositivas, y viceversa. Consulta Diapositivas y presentaciones.

Cuándo usar un tablero (y cuándo no)

Los tableros brillan cuando:

• Tienes varias piezas de contenido del vault que necesitan verse juntas
• El trabajo es espacial — diagramas, diseños, planes, bocetos
• Quieres una sola pantalla que resuma un proyecto
• Estás preparando material que eventualmente se convertirá en una presentación

Los tableros son menos útiles cuando:

• Estás escribiendo un documento largo (usa una nota)
• Necesitas una estructura estrictamente lineal (usa una presentación)
• Lo que quieres capturar es un solo concepto (una nota basta)

El punto es que los tableros son una superficie de composición. Reúnen otras cosas. Las cosas en sí viven en las superficies que mejor las manejan.

Consulta Diapositivas y presentaciones para qué pasa cuando un tablero se convierte en diapositivas, y Grafo de conocimiento para la visualización de las conexiones que un tablero está haciendo.