Módulo 1: Bienvenida a Qt Designer

Qué es, para qué sirve y por qué un diseñador gráfico debería aprender a usarlo

---

Objetivos de Aprendizaje

Al finalizar este módulo serás capaz de:

• Explicar qué es Qt Designer y para qué sirve
• Diferenciar Qt Designer de herramientas de diseño gráfico tradicionales
• Instalar Python, PySide6 y abrir Qt Designer correctamente
• Identificar los 5 paneles principales de la interfaz
• Comprender el flujo de trabajo diseñador → archivo .ui → aplicación

---

1.1 ¿Qué es Qt Designer?

Qt Designer es una aplicación visual que te permite crear interfaces de usuario (UI) para programas de escritorio arrastrando y soltando elementos, exactamente como diseñarías un poster en Illustrator o una maqueta en Figma.

Es parte del ecosistema Qt, un framework profesional usado por empresas como:

• Adobe (partes de Photoshop y Premiere)
• Tesla (pantallas de los vehículos)
• VLC Media Player (el reproductor completo)
• VirtualBox (toda la interfaz)
• Autodesk Maya (partes de la interfaz)
• Spotify (versiones de escritorio antiguas)
• WPS Office (suite de oficina)
• KDE Plasma (escritorio de Linux)

Miles de aplicaciones de escritorio en todo el mundo están construidas con Qt.

¿Para qué sirve Qt Designer?

¿Qué NO es Qt Designer?

• NO es un programa de dibujo → No pintas píxeles ni creas ilustraciones
• NO es una herramienta de edición de fotos → No retocas imágenes
• NO es un editor de código → No necesitas escribir código para usarlo
• NO es Figma/Photoshop → No creas imágenes estáticas, creas interfaces interactivas

---

1.2 Analogía Fundamental: Tu Mesa de Trabajo Digital

🎨 ANALOGÍA DEL DISEÑO

>

Piensa en Qt Designer como tu mesa de trabajo digital. Así como en Photoshop tienes capas, pinceles y herramientas organizadas en paneles, en Qt Designer tienes:

>

- Widgets (botones, textos, imágenes) → como tus elementos de diseño

- Propiedades (color, tamaño, fuente) → como tu panel de propiedades

- Un lienzo donde todo cobra vida → como tu canvas/artboard

>

La diferencia clave: en lugar de crear una imagen estática (PNG, JPG), estás creando una interfaz interactiva que una persona puede usar. Es como si tu diseño de Figma pudiera abrirse como una aplicación real.

Qt Designer vs. Herramientas que ya Conoces

🎨 ANALOGÍA DEL DISEÑO

>

Si Photoshop es como pintar un cuadro (resultado estático), Qt Designer es como diseñar el interior de una casa:

>

- Defines dónde va cada mueble (widget)

- Cómo se relacionan entre sí (layouts)

- Y qué pasa cuando alguien abre una puerta o enciende una luz (signals y slots)

---

1.3 El Ecosistema: ¿Cómo encaja todo?

┌─────────────────────────────────────────────────┐
│                  TU ROL: DISEÑADOR               │
│                                                  │
│  Qt Designer (aplicación visual)                 │
│       │                                          │
│       ▼                                          │
│  Archivo .ui (tu diseño guardado)                │
│       │                                          │
│       ▼                                          │
│  ─── Se entrega al programador ───               │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│              ROL DEL PROGRAMADOR                 │
│                                                  │
│  Python + PySide6                                │
│       │                                          │
│       ▼                                          │
│  Carga el archivo .ui                            │
│       │                                          │
│       ▼                                          │
│  Agrega la lógica (qué pasa al hacer clic)       │
│       │                                          │
│       ▼                                          │
│  Aplicación funcional (.exe)                     │
└─────────────────────────────────────────────────┘

El archivo .ui

Cuando guardas tu diseño en Qt Designer, se crea un archivo con extensión .ui. Este archivo es XML (texto estructurado) que describe:

• Cada widget que colocaste
• Su posición y tamaño
• Sus propiedades (color, texto, fuente, etc.)
• Las conexiones entre widgets (signals y slots)

🎨 ANALOGÍA DEL DISEÑO

>

El archivo .ui es como tu archivo .psd o .fig: contiene todo tu diseño editable. La diferencia es que en lugar de ser un formato propietario cerrado, es XML abierto que cualquier programa puede leer.

---

1.4 Instalación Paso a Paso

Paso 1: Instalar Python

Python es el lenguaje de programación que ejecutará tu aplicación. Qt Designer viene incluido con PySide6 (el paquete de Python para Qt).

1. Ve a [python.org](https://www.python.org/downloads/)
2. Descarga la última versión de Python 3 (3.8 o superior)
3. Ejecuta el instalador
4. IMPORTANTE: Marca la casilla "Add Python to PATH" antes de instalar
5. Haz clic en "Install Now"

Verificar instalación:

Abre la terminal (CMD en Windows, Terminal en macOS/Linux) y escribe:

python --version

Deberías ver algo como Python 3.12.x.

Paso 2: Instalar PySide6

PySide6 es el paquete que incluye Qt Designer y todas las herramientas de Qt para Python.

pip install PySide6

Esto descargará e instalará:

• PySide6 → Las bibliotecas de Qt para Python
• pyside6-designer → Qt Designer (la aplicación que usarás)
• pyside6-uic → Herramienta para convertir .ui a Python

Verificar instalación:

pyside6-designer --version

Paso 3: Abrir Qt Designer

Para abrir Qt Designer, ejecuta en la terminal:

pyside6-designer

Se abrirá una ventana con el título "New Form" preguntándote qué tipo de ventana quieres crear.

💡 CONSEJO: Puedes crear un acceso directo en tu escritorio al ejecutable pyside6-designer.exe para no tener que abrirlo desde la terminal cada vez. En Windows, búscalo en C:\Users\TU_USUARIO\AppData\Local\Programs\Python\PythonXX\Scripts\pyside6-designer.exe.

---

1.5 Primer Contacto con Qt Designer

Al abrir Qt Designer por primera vez, verás el diálogo "New Form" con estas opciones:

💡 CONSEJO: Para tus primeros ejercicios, selecciona "Dialog without Buttons". Es el lienzo más simple y te permite concentrarte en aprender sin distracciones.

---

1.6 Los 5 Paneles de Qt Designer

Cuando seleccionas un tipo de ventana y haces clic en "Create", verás la interfaz completa de Qt Designer. Está dividida en 5 paneles principales:

1. Widget Box (Caja de Widgets) — Panel Izquierdo

Es tu paleta de herramientas. Aquí encuentras todos los elementos disponibles organizados por categorías:

• Spacers → Espacios flexibles invisibles
• Buttons → Botones de todo tipo
• Display Widgets → Labels, imágenes, barras de progreso
• Input Widgets → Campos de texto, selectores, sliders
• Containers → Group Box, Tab Widget, Stacked Widget
• Item Widgets → Listas, tablas, árboles

🎨 ANALOGÍA DEL DISEÑO

>

El Widget Box es como tu caja de herramientas física de diseñador: ahí están tus pinceles, reglas, cutter, etc. Pero en lugar de herramientas de dibujo, son "piezas de interfaz" listas para usar.

2. Object Inspector (Inspector de Objetos) — Panel Superior Derecho

Muestra la jerarquía de elementos de tu diseño, como el panel de Capas en Photoshop.

Aquí puedes:

• Ver qué widget está dentro de cuál
• Renombrar widgets
• Reorganizar la jerarquía
• Seleccionar widgets difíciles de alcanzar

3. Property Editor (Editor de Propiedades) — Panel Inferior Derecho

Es el panel más importante. Muestra todas las propiedades del widget seleccionado:

• QObject → Nombre interno (objectName)
• QWidget → Propiedades visuales (enabled, geometry, font, cursor, styleSheet, etc.)
• Propiedades específicas → text (para Labels), pixmap (para imágenes), etc.

🎨 ANALOGÍA DEL DISEÑO

>

El Property Editor es como el panel de Propiedades de Illustrator o el panel de Diseño de Figma: ahí cambias colores, tamaños, fuentes, efectos, etc.

4. Resource Browser (Navegador de Recursos) — Panel Opcional

Aquí gestionas tus imágenes, iconos y archivos que usarás en el diseño.

🎨 ANALOGÍA DEL DISEÑO

>

Similar al panel de Bibliotecas de Adobe Creative Cloud o los Assets de Figma: tus recursos reutilizables organizados.

5. Área de Trabajo (Form/Canvas) — Centro

Tu lienzo principal. Aquí arrastras y sueltas los widgets para construir tu interfaz.

🎨 ANALOGÍA DEL DISEÑO

>

Es tu artboard de Figma o tu canvas de Photoshop: el espacio donde todo se une.

---

1.7 Atajos de Teclado Esenciales

---

1.8 Tu Primer Diseño: "Hola Mundo" Visual

Vamos a crear algo simple para que entiendas el flujo de trabajo básico.

Paso a paso:

1. Abre Qt Designer y selecciona "Dialog without Buttons"
2. Haz clic en "Create"
3. En el Widget Box (izquierda), busca la sección Display Widgets
4. Arrastra un Label al área de trabajo
5. Con el Label seleccionado, ve al Property Editor (derecha abajo)
6. Busca la propiedad text y cambia "TextLabel" por "¡Hola Mundo!"
7. Busca la propiedad font y haz clic en el botón ... para cambiar tamaño y estilo
8. Ahora arrastra un Push Button desde la sección Buttons
9. Cambia su texto a "Cerrar"
10. Guarda el archivo como hola_mundo.ui (Ctrl+S)

🎨 ANALOGÍA DEL DISEÑO

>

Acabas de hacer el equivalente a crear un documento nuevo en Photoshop, agregar un texto y un botón. La diferencia es que este "diseño" puede convertirse en una ventana real de una aplicación.

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 1: Mi Primera UI

>

Objetivo: Crear tu primera interfaz funcional y familiarizarte con Qt Designer.

>

Pasos:

1. Instala Python desde python.org (marca "Add to PATH")

2. Abre la terminal y ejecuta pip install PySide6

3. Ejecuta pyside6-designer para abrir la aplicación

4. Explora libremente la interfaz durante 5 minutos sin miedo a romper nada

5. Crea un Dialog sin botones

6. Agrega un Label con tu nombre como texto

7. Cambia la fuente del Label a algo grande y llamativo (24pt, negrita)

8. Agrega un Push Button con el texto "Salir"

9. Cambia el color de fondo del Dialog (propiedad styleSheet: background-color: #1a1a2e;)

10. Cambia el color del texto del Label a verde (#41CD52)

11. Guarda como mi_primera_ui.ui

>

Resultado esperado: Una ventana oscura con tu nombre en verde grande y un botón de salir.

---

Recursos Adicionales

---

Evaluación de Comprensión

Responde estas preguntas para verificar que entendiste el módulo:

1. ¿Qué es Qt Designer y para qué sirve?
2. ¿Cuál es la diferencia principal entre Qt Designer y Photoshop?
3. ¿Qué es un archivo .ui y a qué archivo de diseño gráfico se parece?
4. ¿Cuáles son los 5 paneles principales de Qt Designer?
5. ¿Qué tipo de ventana recomendarías para empezar a practicar?
6. ¿Qué comando se usa para abrir Qt Designer desde la terminal?
7. ¿Qué propiedad del Property Editor usarías para cambiar el texto de un Label?

---

Siguiente módulo: → [Módulo 2: Tu Primera Interfaz](01-primera-interfaz.md)

python --version

pip install PySide6

pyside6-designer --version

pyside6-designer