# La interfaz

> Un recorrido por cada parte de la ventana de Pyzed Design: la barra de título y sus menús, las pestañas y ventanas de documentos, los cuatro docks y sus paneles, la barra de herramientas, el lienzo, la barra de estado y las notificaciones.

Source: https://albakore.github.io/pyzed/es/editor/interface/

Pyzed Design es una ventana dividida en unas pocas zonas, y cada zona tiene una sola tarea. Cuando conozcas sus
nombres, el resto del manual se lee solo. La disposición toma ideas de editores que mucha gente ya conoce: los paneles
y la barra de título se inspiran en el editor de código [Zed](https://zed.dev), el lienzo del formulario y la grilla
de propiedades en Visual Basic y Qt Designer, y las ideas de nodos y escenas en Godot y Unreal Engine.

```mermaid
flowchart TB
    T["① Barra de título: menú ☰ · proyecto / archivo · Ejecutar ▶ Detener · 🔍 Buscar · Ver · Ayuda · ⚙"]
    subgraph W[" "]
        direction LR
        L["② Dock izquierdo<br/>Herramientas · Proyecto · Dependencias"]
        subgraph C["③ Centro"]
            direction TB
            D["Pestañas de documentos"]
            TB["Barra de herramientas"]
            F["Lienzo (o el grafo de un shader)"]
        end
        R["④ Dock derecho<br/>Propiedades · Eventos · Agente"]
    end
    B["⑤ Dock inferior: Código · Consola"]
    S["⑥ Barra de estado"]
    T --> W --> B --> S
```

## ① La barra de título

La franja de arriba del todo. De izquierda a derecha (Ejecutar, Detener y el buscador quedan en el centro):

| Elemento | Qué hace |
| --- | --- |
| **☰** | El menú principal: Nuevo, Abrir, Ir a archivo, Guardar, Ajustes, archivos recientes y los comandos de Ejecutar. |
| **Entorno** | Aparece en WSL: la distribución de Linux donde corre el proyecto (*Ubuntu*...), como el indicador remoto de Zed. |
| **Nombre del proyecto ⌄** | El proyecto activo (o *Sin proyecto*). Haz clic para abrir el **selector de proyectos**: los abiertos en esta ventana y los recientes; ver [Varios proyectos en una ventana](https://albakore.github.io/pyzed/es/editor/projects/#varios-proyectos-en-una-ventana). |
| **Rama** / **worktree** | La rama de git del proyecto (clic para cambiar de rama) y, en un worktree enlazado, su nombre. |
| **/ nombre de archivo ⌄** | El documento que está delante. Haz clic para abrir otro formulario, componente o shader. |
| **●** | Aparece cuando el documento tiene cambios sin guardar. |
| Insignia **Componente** / **Shader** | Indica en qué [vista](https://albakore.github.io/pyzed/es/editor/views/) estás cuando no es un formulario. |
| **▶ Ejecutar** (<kbd>F5</kbd>) | Ejecuta el formulario, previsualiza el componente o abre el shader en su propia ventana. |
| **■ Detener** (<kbd>Mayús</kbd>+<kbd>F5</kbd>) | Cierra lo que abrió Ejecutar. Desactivado si no hay nada en marcha. |
| **🔍 Buscar** (<kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>P</kbd>) | Abre la [paleta de comandos](https://albakore.github.io/pyzed/es/editor/menus-and-commands/#paleta-de-comandos): comandos, paneles, ajustes del editor, atajos y archivos recientes. |
| **Ver** (icono de paneles) | Docks, paneles, cuadrícula y guías, vistas previas con otros temas, idiomas y marcos de ventana. |
| **Ayuda** (icono ?) | Atajos, la referencia integrada, la ventana de bienvenida, actualizaciones y Acerca de. |
| **⚙** (<kbd>Ctrl</kbd>+<kbd>,</kbd>) | [Ajustes](https://albakore.github.io/pyzed/es/editor/settings/). |

Cada entrada de los menús aparece con sus teclas en [Menús y comandos](https://albakore.github.io/pyzed/es/editor/menus-and-commands/). Todo lo
que puedes pulsar en un menú está también en la **paleta de comandos** (el buscador, o <kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>P</kbd>):
escribe unas letras de su nombre y pulsa <kbd>Enter</kbd>.

### El marco de la ventana

Por defecto Pyzed Design dibuja su **propio marco de ventana**: la barra de título también contiene los botones de
minimizar, maximizar y cerrar, con el estilo de tu sistema, y los bordes de la ventana sirven para cambiar su tamaño.
Arrastra la barra de título para mover la ventana; haz doble clic para maximizarla. Así la ventana es compacta e
igual en todas las plataformas.

**¿Prefieres el marco de tu sistema?:**

Desactiva **Ajustes → Apariencia → Marco de ventana propio** para usar el marco de tu sistema operativo (se aplica la
próxima vez que abras Pyzed Design). Tus apps pueden usar los mismos marcos: mira `ui.window_frame` y `Window.frame`
en la [referencia de la API](https://albakore.github.io/pyzed/es/reference/ui/).

Marco de ventana propio</strong> desactivado, la barra conserva los menús y Ejecutar, y tu sistema dibuja el marco y sus botones alrededor." />

## ② ④ ⑤ Docks y paneles

Los paneles viven en **docks** alrededor del centro: izquierdo, derecho, inferior y uno superior que está vacío hasta
que mueves un panel allí. Cada dock muestra una pestaña a la vez. Cualquier sitio acepta cualquier pestaña: un panel
puede ir junto a las pestañas de formularios en el centro (por ejemplo, el editor de código al lado de tus
formularios), un formulario puede ir a un dock lateral, y cualquier pestaña puede flotar en una **ventana propia**,
sola o apilada con otras.

| Panel | Dock | Para qué sirve | Manual |
| --- | --- | --- | --- |
| **Herramientas** | Izquierdo | Todo lo que puedes colocar, sobre la **Estructura** (el árbol de lo colocado); los iconos van [coloreados por rol](https://albakore.github.io/pyzed/es/editor/toolbox-and-canvas/#colores-de-los-iconos). En un shader se convierte en la barra **Shading** y las variables del shader. | [Herramientas y lienzo](https://albakore.github.io/pyzed/es/editor/toolbox-and-canvas/) |
| **Proyecto** | Izquierdo | Los archivos del proyecto en árbol, con búsqueda, estado de git y un menú contextual. | [Proyectos](https://albakore.github.io/pyzed/es/editor/projects/) |
| **Dependencias** | Izquierdo | Paquetes, ruff y ty del proyecto (solo con un proyecto abierto). | [Proyectos](https://albakore.github.io/pyzed/es/editor/projects/) |
| **Propiedades** | Derecho | Todo sobre la selección: texto, tamaño, colores, datos, comportamiento. | [Propiedades](https://albakore.github.io/pyzed/es/editor/properties/) |
| **Eventos** | Derecho | Los eventos de la selección y el manejador Python conectado a cada uno. | [Eventos](https://albakore.github.io/pyzed/es/editor/events/) |
| **Agente** | Derecho | Un agente de IA que crea formularios y componentes y escribe su código. | [Agentes de IA](https://albakore.github.io/pyzed/es/editor/ai-agents/) |
| **Código** | Inferior | El editor de Python, mientras hay un manejador o un archivo abierto. | [Editor de código](https://albakore.github.io/pyzed/es/editor/code-editor/) |
| **Consola** | Inferior | Lo que imprime un formulario en marcha, los eventos que maneja y sus errores. | [Ejecución y consola](https://albakore.github.io/pyzed/es/editor/console-and-running/) |

Qué puedes hacer con ellos:

- **Cambiar** con las pestañas de arriba de cada dock.
- **Arrastrar** cualquier pestaña, de un panel o de un formulario: a lo largo de su fila para reordenarla, sobre otra
  fila para apilarla allí, sobre un dock o el centro para moverla allí, o fuera de la ventana para abrirla en una
  **ventana propia**. Mientras arrastras, una copia de la pestaña sigue al puntero, el sitio de destino se ilumina y,
  sobre una fila, una barra marca dónde caerá. Suelta más pestañas sobre una ventana para apilarlas y arrástralas de
  vuelta sobre la ventana principal para devolverlas.
- **Mover** un panel desde el menú: el botón del dock al final de la fila de pestañas abre **Mover *panel* a**
  izquierdo, derecho, inferior, superior o **Centro**, o **Ventana nueva**. La pestaña de un panel fuera de los docks
  tiene una **×** que lo devuelve a su dock. En una ventana propia, el mismo botón ofrece **Devolver todo a los paneles
  laterales**, y cerrar la ventana hace lo mismo: los formularios vuelven a la ventana principal y los paneles a sus
  docks.
- **Cambiar el tamaño** de un dock arrastrando su borde que da al lienzo.
- **Ocultar** un dock con su **×**, o alternarlo: <kbd>Ctrl</kbd>+<kbd>B</kbd> (izquierdo),
  <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>B</kbd> (derecho), <kbd>Ctrl</kbd>+<kbd>J</kbd> (inferior).
- **Guardar la distribución** con **Ver → Guardar la distribución como…** y cambiar entre distribuciones desde
  **Ver → Distribuciones**. Pyzed trae **Por defecto**, **Programar** (el código junto a las propiedades),
  **Concentración** (solo el lienzo y el dock derecho), **Eventos y código** y **Código con los formularios** (el
  editor de código como una pestaña junto a los formularios y los eventos a la izquierda); **Eliminar esta
  distribución** borra una tuya.
- **Restablecer** todo con **Ver → Restablecer los paneles**. Dónde está cada panel, el orden de las pestañas, el tamaño
  de cada dock y las ventanas de paneles (con su tamaño y posición) se guardan con tus ajustes y se reabren la próxima
  vez.

**Una disposición para escribir código:**

En un portátil, elige **Ver → Distribuciones → Programar**, u oculta el dock izquierdo (<kbd>Ctrl</kbd>+<kbd>B</kbd>) y
añade controles con <kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>A</kbd>. Con dos pantallas, arrastra **Código** y **Consola**
a la segunda y guarda el resultado como una distribución propia.

## ③ El centro: pestañas, barra de herramientas y lienzo

### Pestañas de documentos y ventanas

Cada archivo abierto es una pestaña: `Formulario · login.pzform`, `Componente · rating.pzcomp`, un shader, un archivo
Python, la referencia o las notas de la versión. El final de la fila de pestañas dice qué vista está delante
(**Vista de formulario**, **Vista de componente**...).

- **Haz clic** en una pestaña para cambiar; cada documento conserva su selección y su historial de deshacer.
- **Arrastra** una pestaña por la fila para reordenarla, o sobre un dock para trabajar en ese formulario al lado del
  del centro.
- **Arrastra una pestaña fuera** de la ventana para darle una ventana propia, con sus pestañas, barra de herramientas y
  lienzo. Suéltala sobre otra ventana de Pyzed Design para apilarla allí. **Ver → Mover la pestaña a una ventana
  nueva** y **Mover la pestaña a la ventana principal** hacen lo mismo con el teclado (útil en Wayland, donde las
  apps no pueden saber dónde están sus ventanas).
- Los paneles también pueden compartir esta fila: suelta aquí la pestaña **Código** o **Consola** y quedará entre los
  formularios.
- Los paneles siguen al formulario que usaste por última vez, esté donde esté. Al cerrar una ventana de documentos,
  sus pestañas vuelven a la ventana principal.

### Barra de herramientas

Bajo las pestañas de un formulario o componente: **Nuevo formulario**, **Abrir**, **Guardar**, **Nuevo componente**;
**Deshacer** y **Rehacer**; las herramientas de **alinear**, **distribuir**, **mismo tamaño** y **centrar**; **Traer
al frente**, **Enviar al fondo** y **Eliminar**; y al final **Cuadrícula**, **Ajustar**, **Guías inteligentes**,
**Redimensionar el contenido con sus anclajes**, **Ajustar la selección a la cuadrícula** y **Editar el código**
(<kbd>F7</kbd>). Las herramientas que no se aplican a la selección aparecen en gris, y cada tooltip muestra su atajo.
Un shader tiene su propia barra; ver [la vista Shader](https://albakore.github.io/pyzed/es/shading/shader-designer/).

### Lienzo

El formulario tal como se verá al ejecutarse, dentro de un marco de ventana, sobre una cuadrícula de puntos. Haz clic
para seleccionar, arrastra para mover, tira de las asas para cambiar el tamaño. Todo está en
[Herramientas y lienzo](https://albakore.github.io/pyzed/es/editor/toolbox-and-canvas/).

**Mira tu formulario en otros sistemas:**

**Ver → Vista previa del marco de ventana…** dibuja el formulario dentro del marco de macOS, Windows 11, GNOME, Ubuntu
o KDE Plasma, para comprobar cómo se verá allí sin salir de tu equipo. No cambia nada del formulario.

## ⑥ La barra de estado

La barra de abajo te dice dónde estás y alterna algunas cosas con un clic:

| Elemento | Significado |
| --- | --- |
| `120, 48` | Dónde está el puntero en el formulario, en píxeles. |
| `sign_in 344×32 en 48, 304` | El control seleccionado, su tamaño y posición (o los del formulario, o cuántos hay seleccionados). |
| **Colocando Botón…** | Aparece mientras colocas un control desde las herramientas. |
| Tema / idioma | Aparece mientras previsualizas otro tema o idioma; haz clic para cambiarlo. |
| **macOS**, **Windows 11**... | El marco de ventana que muestra el lienzo; haz clic para elegir otro. |
| **12 controles** | Cuántos controles tiene el documento. |
| **Cuadrícula 8px** · **Ajustar** | Haz clic para activar o desactivar la cuadrícula y el ajuste. |
| `Ln 12, Col 8` · **ty** · **ruff** | Mientras programas: el cursor y el estado de los servidores de lenguaje. |
| **Actualizar a X.Y.Z** | Hay una versión nueva lista; ver [Actualizaciones](https://albakore.github.io/pyzed/es/download/#actualizaciones). |

Ocúltala con **Ver → Barra de estado**.

sign_in</code> seleccionado." plain />

## La ventana de bienvenida

Cuando Pyzed Design arranca sin un archivo, te recibe la **ventana de bienvenida**: crea o abre un proyecto,
vuelve a uno reciente o crea un proyecto a partir de un ejemplo (apps, juegos, demos, bloques e integraciones).
Vuelve a abrirla desde **Ayuda → Bienvenida**. Todo sobre ella está en
[Bienvenida y ejemplos](https://albakore.github.io/pyzed/es/editor/examples/).

## Notificaciones

Mensajes cortos aparecen en una esquina durante unos segundos: guardado, copiado, un cable que no se puede conectar,
un comando que falló... Haz clic en la **×** para cerrar uno; se muestran como mucho cuatro a la vez.

## Abrir páginas e iniciar sesión

Los enlaces del editor (Ayuda → Documentación, la referencia, las páginas de inicio de sesión de los agentes de IA) se
abren en tu navegador predeterminado. Cuando Pyzed Design se ejecuta dentro de **WSL** en Windows, se abren en el
navegador de Windows, sin que aparezca una ventana de consola, salvo que elijas otro con la variable `BROWSER`.

## Siguiente