La interfaz
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, 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.
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
Sección titulada «① 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. |
| 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 estás cuando no es un formulario. |
| ▶ Ejecutar (F5) | Ejecuta el formulario, previsualiza el componente o abre el shader en su propia ventana. |
| ■ Detener (Mayús+F5) | Cierra lo que abrió Ejecutar. Desactivado si no hay nada en marcha. |
| 🔍 Buscar (Ctrl+Mayús+P) | Abre la 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. |
| ⚙ (Ctrl+,) | Ajustes. |
Cada entrada de los menús aparece con sus teclas en Menús y comandos. Todo lo que puedes pulsar en un menú está también en la paleta de comandos (el buscador, o Ctrl+Mayús+P): escribe unas letras de su nombre y pulsa Enter.
El marco de la ventana
Sección titulada «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.
② ④ ⑤ Docks y paneles
Sección titulada «② ④ ⑤ 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. En un shader se convierte en la barra Shading y las variables del shader. | Herramientas y lienzo |
| Proyecto | Izquierdo | Los archivos del proyecto en árbol, con búsqueda, estado de git y un menú contextual. | Proyectos |
| Dependencias | Izquierdo | Paquetes, ruff y ty del proyecto (solo con un proyecto abierto). | Proyectos |
| Propiedades | Derecho | Todo sobre la selección: texto, tamaño, colores, datos, comportamiento. | Propiedades |
| Eventos | Derecho | Los eventos de la selección y el manejador Python conectado a cada uno. | Eventos |
| Agente | Derecho | Un agente de IA que crea formularios y componentes y escribe su código. | Agentes de IA |
| Código | Inferior | El editor de Python, mientras hay un manejador o un archivo abierto. | Editor de código |
| Consola | Inferior | Lo que imprime un formulario en marcha, los eventos que maneja y sus errores. | Ejecución y consola |
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: Ctrl+B (izquierdo), Ctrl+Alt+B (derecho), Ctrl+J (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.
③ El centro: pestañas, barra de herramientas y lienzo
Sección titulada «③ El centro: pestañas, barra de herramientas y lienzo»Pestañas de documentos y ventanas
Sección titulada «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
Sección titulada «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 (F7). 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.
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.
⑥ La barra de estado
Sección titulada «⑥ 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. |
Ocúltala con Ver → Barra de estado.
sign_in seleccionado.La ventana de bienvenida
Sección titulada «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.
Notificaciones
Sección titulada «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
Sección titulada «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.