Módulo 15: Proyecto Final — Portfolio de Diseño

Aplica todo lo aprendido creando un proyecto completo y profesional

---

Objetivos de Aprendizaje

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

• Integrar todos los conceptos del curso en un proyecto real
• Diseñar una aplicación completa con Main Window, diálogos y formularios
• Aplicar temas visuales coherentes en toda la aplicación
• Crear una interfaz profesional lista para ser usada por un programador
• Evaluar tu propio trabajo con una rúbrica profesional
• Presentar tu portfolio de diseños en Qt Designer

---

15.1 Descripción del Proyecto

Aplicación de Gestión de Proyectos Creativos

Vas a diseñar la interfaz completa de una aplicación para gestionar proyectos creativos. Esta aplicación simula una herramienta tipo "Trello + Figma" para diseñadores que necesitan organizar sus proyectos.

🎨 ANALOGÍA DEL DISEÑO

>

Este proyecto es como tu examen final de diseño: integra todo lo que has aprendido en una pieza completa que puedes mostrar en tu portfolio.

---

15.2 Requisitos del Proyecto

Parte A: Ventana Principal (Main Window)

┌─────────────────────────────────────────────────────────────────┐
│  [MenuBar] Archivo  Edición  Ver  Proyecto  Herramientas  Ayuda │
├─────────────────────────────────────────────────────────────────┤
│  [Toolbar] 📁 📂 💾  ✏️ 🗑️  🔍  📊  ⚙️                         │
├──────────────┬──────────────────────────────────────┬───────────┤
│  [Dock]      │                                      │  [Dock]   │
│  Proyectos   │          ÁREA CENTRAL                │  Propied. │
│              │                                      │           │
│  [Tree]      │  [Tab Widget]                        │  [Form]   │
│  📁 Proyecto1│  ┌──────────────────────────────┐    │  Pos X:   │
│    📄 Diseño │  │ [Diseño] [Recursos] [Calend.]│    │  Pos Y:   │
│    📄 Assets │  │                              │    │  Ancho:   │
│  📁 Proyecto2│  │  [Contenido de la pestaña]   │    │  Alto:    │
│    📄 Diseño │  │                              │    │  Color:   │
│              │  │                              │    │  Fuente:  │
│              │  └──────────────────────────────┘    │  Opacidad:│
│              │                                      │  ━━━●━━━  │
│              │                                      │           │
├──────────────┴──────────────────────────────────────┴───────────┤
│  [StatusBar]  Listo  |  3 proyectos  |  12 tareas  |  UTF-8     │
└─────────────────────────────────────────────────────────────────┘

Requisitos específicos del Main Window:

1. Menu Bar completo:

• Archivo: Nuevo Proyecto (Ctrl+N), Abrir (Ctrl+O), Guardar (Ctrl+S), Guardar Todo (Ctrl+Shift+S), Separador, Exportar, Separador, Salir (Ctrl+Q)
• Edición: Deshacer (Ctrl+Z), Rehacer (Ctrl+Y), Separador, Cortar (Ctrl+X), Copiar (Ctrl+C), Pegar (Ctrl+V), Separador, Seleccionar Todo (Ctrl+A)
• Ver: Zoom In (Ctrl++), Zoom Out (Ctrl+-), Ajustar (Ctrl+0), Separador, Pantalla Completa (F11), Separador, Mostrar/Ocultar Panel Izquierdo, Mostrar/Ocultar Panel Derecho
• Proyecto: Nuevo Proyecto, Importar Assets, Separador, Configuración del Proyecto, Separador, Cerrar Proyecto
• Herramientas: Preferencias (Ctrl+,), Separador, Limpiar Caché
• Ayuda: Documentación (F1), Atajos de Teclado, Separador, Acerca de

1. Toolbar con iconos:

• Al menos 8 acciones con iconos SVG
• Separadores entre grupos de acciones
• iconSize: 24x24
• toolButtonStyle: IconOnly

1. Dock Widget "Proyectos" (izquierda):

• Tree Widget con estructura de proyectos
• Título: "Explorador de Proyectos"
• allowedAreas: LeftDockWidgetArea
• Contiene al menos 2 proyectos con sub-items

1. Dock Widget "Propiedades" (derecha):

• Form Layout con campos de propiedades
• Título: "Propiedades"
• allowedAreas: RightDockWidgetArea
• Campos: Posición X, Posición Y, Ancho, Alto, Color, Fuente, Opacidad (Slider)

1. Central Widget con Tab Widget:

• Pestaña "Diseño": Frame grande como área de trabajo (con Grid Layout de fondo simulando una cuadrícula)
• Pestaña "Recursos": List Widget en modo IconMode con recursos del proyecto
• Pestaña "Calendario": Calendar Widget con eventos marcados

1. Status Bar:

• Label "Listo"
• Label "3 proyectos"
• Label "12 tareas"
• Label "UTF-8"

---

Parte B: Diálogo "Nuevo Proyecto"

┌─────────────────────────────────────────┐
│  NUEVO PROYECTO                         │
├─────────────────────────────────────────┤
│                                         │
│  ┌─ Información del Proyecto ────────┐  │
│  │  Nombre:*      [_______________]  │  │
│  │  Cliente:      [_______________]  │  │
│  │  Tipo:         [▼ Branding    ]  │  │
│  │  Descripción:                     │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │ Describe el proyecto...     │  │  │
│  │  │                             │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
│                                         │
│  ┌─ Fechas ─────────────────────────┐  │
│  │  Inicio:  [__/__/____]           │  │
│  │  Entrega: [__/__/____]           │  │
│  └──────────────────────────────────┘  │
│                                         │
│  ┌─ Deliverables ───────────────────┐  │
│  │  ☐ Logo                          │  │
│  │  ☐ Manual de marca              │  │
│  │  ☐ Papelería                     │  │
│  │  ☐ Redes sociales               │  │
│  │  ☐ Sitio web                    │  │
│  │  ☐ Otro: [_________________]    │  │
│  └──────────────────────────────────┘  │
│                                         │
│              [Cancelar]  [Crear Proyecto]│
└─────────────────────────────────────────┘

---

Parte C: Diálogo "Preferencias"

┌─────────────────────────────────────────┐
│  PREFERENCIAS                           │
├─────────────────────────────────────────┤
│  [General] [Apariencia] [Atajos] [Avanz.]│
├─────────────────────────────────────────┤
│                                         │
│  ┌─ General ────────────────────────┐  │
│  │  Idioma:      [▼ Español      ]  │  │
│  │  Auto-guardado: cada [5] minutos │  │
│  │  ☐ Iniciar con el sistema        │  │
│  │  ☐ Abrir último proyecto al inicio│ │
│  └──────────────────────────────────┘  │
│                                         │
│  ┌─ Atajos de Teclado ──────────────┐  │
│  │  Acción          │ Atajo         │  │
│  │  ────────────────┼────────────── │  │
│  │  Nuevo Proyecto  │ Ctrl+N       │  │
│  │  Guardar         │ Ctrl+S       │  │
│  │  Deshacer        │ Ctrl+Z       │  │
│  │  Buscar          │ Ctrl+F       │  │
│  │  Pantalla compl. │ F11          │  │
│  └──────────────────────────────────┘  │
│                                         │
│        [Restaurar] [Aplicar] [Aceptar]  │
└─────────────────────────────────────────┘

---

Parte D: Estilo Visual Completo

Paleta de colores

Tipografía

---

15.3 Guía Paso a Paso

Fase 1: Estructura Principal (30-40 min)

1. Crea un Main Window
2. Configura el windowTitle a "CreativeStudio - Gestión de Proyectos"
3. Configura el tamaño inicial a 1200x800
4. Crea todas las Actions necesarias en el Action Editor
5. Crea el menú completo con todos los items y atajos
6. Agrega las Actions a la Toolbar
7. Agrega los Dock Widgets laterales
8. Configura el Central Widget con el Tab Widget
9. Configura la Status Bar

Fase 2: Contenido de las Pestañas (20-30 min)

1. Pestaña "Diseño":

• Frame grande como área de trabajo
• Aplica un estilo de cuadrícula con styleSheet
• minimumSize: 600x400

1. Pestaña "Recursos":

• List Widget en modo IconMode
• Agrega items de ejemplo: "Logo.png", "Paleta colores", "Tipografía", "Mockup.psd"
• iconSize: 48x48

1. Pestaña "Calendario":

• Calendar Widget
• firstDayOfWeek: Monday
• gridVisible: true

Fase 3: Diálogos (20-30 min)

1. Crea el diálogo "Nuevo Proyecto" en un archivo dialog_nuevo_proyecto.ui
2. Crea el diálogo "Preferencias" en un archivo dialog_preferencias.ui
3. Configura todos los campos, layouts y estilos

Fase 4: Estilizado (20-30 min)

1. Define tu paleta de colores
2. Aplica styleSheet al Main Window para estilos globales
3. Estiliza botones, campos de entrada y contenedores
4. Agrega iconos a los botones de la toolbar
5. Estiliza los Dock Widgets
6. Estiliza el Tab Widget
7. Estiliza la Status Bar

Fase 5: Interactividad (10-15 min)

1. Configura Signals y Slots para el botón "Salir" -> cierra la ventana
2. Configura Signals y Slots para los botones de los diálogos
3. Conecta el slider de opacidad al valor numérico
4. Verifica que todo funcione correctamente

---

15.4 Rúbrica de Evaluación

Criterios de Evaluación

Escala de Calificación

---

15.5 Entrega del Proyecto

Archivos a entregar

proyecto_final/
├── main_window.ui              # Ventana principal
├── dialog_nuevo_proyecto.ui    # Diálogo nuevo proyecto
├── dialog_preferencias.ui      # Diálogo preferencias
├── recursos/
│   ├── recursos.qrc
│   ├── iconos/                 # Iconos SVG
│   └── imagenes/               # Imágenes
└── styles/
    └── tema_oscuro.qss         # Hoja de estilos (opcional)

Checklist de entrega

• [ ] Todos los archivos .ui se abren sin errores en Qt Designer
• [ ] Todos los widgets tienen nombres descriptivos
• [ ] Todos los contenedores tienen layouts aplicados
• [ ] El Main Window tiene menú, toolbar, docks, central widget y status bar
• [ ] Los diálogos tienen campos, layouts y botones funcionales
• [ ] Los estilos son coherentes en toda la aplicación
• [ ] La vista previa funciona correctamente
• [ ] Los Signals/Slots están configurados
• [ ] Los recursos están incluidos

---

15.6 Próximos Pasos

¡Felicidades! Has completado el curso. Ahora tienes las herramientas para diseñar interfaces profesionales para aplicaciones PySide6.

Siguientes pasos recomendados:

💡 CONSEJO FINAL

>

Recuerda: Qt Designer es tu herramienta de diseño. Así como un diseñador gráfico no necesita saber imprimir para crear un poster, tú no necesitas saber programar para crear interfaces. Tu trabajo es diseñar la experiencia visual; el programador se encarga de darle vida con código.

---

Evaluación Final

Preguntas de repaso general

1. ¿Cuáles son los 5 paneles principales de Qt Designer?
2. ¿Qué es un layout y por qué es esencial?
3. ¿Cuál es la diferencia entre un Dialog y un Main Window?
4. ¿Cómo creas una conexión entre un botón y una acción sin código?
5. ¿Qué es un archivo .ui y cómo se usa en una aplicación Python?
6. ¿Cuáles son las 3 formas de cargar un archivo .ui en Python?
7. ¿Qué es un Signal y qué es un Slot?
8. ¿Cómo aplicas un tema visual coherente a toda tu interfaz?
9. ¿Qué widget usarías para crear una interfaz con pestañas?
10. ¿Cuál es la convención de nombres recomendada para widgets?

---

Módulo anterior: ← [Módulo 14: Mejores Prácticas](13-mejores-practicas.md)

¡Has completado el curso! 🎉

proyecto_final/
├── main_window.ui
├── dialog_nuevo_proyecto.ui
├── dialog_preferencias.ui
├── recursos/
│   ├── recursos.qrc
│   ├── iconos/
│   └── imagenes/
└── styles/
    └── tema_oscuro.qss