RA1, criterio b: Uso de las funciones del editor para la ubicación de componentes en la interfaz. 

1. No sale la imagen:

En el diseñador, selecciona tu JLabel → en Propiedades → Variable name = logo (igual que en el código).

La imagen logo_animals.png debe estar en src/main/resources/ (y que la carpeta esté marcada como Resources Root).

Ejecuta:  Build → Rebuild Project para asegurarte de que la imagen se copia a target/classes.

Pasos importantes en IntelliJ

1. Abre el diseñador (.form).

2. Elimina el JLabel que pusiste antes.

3. Añade un JLabel de “Custom Create”:

   • En el diseñador → arrastra un JLabel normal.

   • En propiedades → busca la opción Custom Create → márcala como true.

   • Ponle el nombre de variable logo.

👉 Así, IntelliJ no intentará inicializarlo automáticamente, sino que usará tu método createUIComponents().

private void createUIComponents() {

        // Aquí inicializas tu JLabel personalizado

        Animals = new JLabel(new ImageIcon(getClass().getResource("/logo_animals.png")));

    }

Criterio a.1: Diseño de menús según estándares.

Criterio g.1: Estructuración de menús contextuales con opciones relevantes y claras.

Criterio h: Componentes clave de menús contextuales (como títulos legibles y opciones relevantes).

Tarea de Diseño: Interfaz de Login en IntelliJ (sin eventos)

🎯 Objetivo

El alumnado debe crear varias interfaces gráficas de inicio de sesión utilizando IntelliJ GUI Designer, explorando la paleta de componentes y aplicando propiedades especiales. No es necesario programar la lógica de los botones ni los eventos todavía.

📑 Instrucciones de la tarea

1. Interfaz base (mínimo obligatorio)

   • JLabel con logo de la aplicación (puede ser imagen o texto con fuente especial).

   • JLabel + JTextField → Usuario.

   • JLabel + JPasswordField → Contraseña.

   • JCheckBox → “Aceptar términos y condiciones”.

   • JButton → “Acceder”.

2. Variaciones de la interfaz
   El alumnado debe entregar al menos 3 diseños distintos:

   • Versión 1 (Clásica): Solo con los componentes básicos.

   • Versión 2 (Extendida): incluir extras como JComboBox (idioma), JRadioButton (opción de “Recordar usuario”), JPanel para organizar mejor la estructura.

   • Versión 3 (Creativa): usar elementos menos comunes como JTabbedPane (login vs registro), JProgressBar (barra de carga ficticia), JSlider o JSpinner.

3. Propiedades especiales a demostrar
   Cada versión debe mostrar el uso de varias de estas propiedades:

   • Texto: setText, setFont, setForeground, setBackground.

   • Iconos: setIcon en JLabel o JButton.

   • Alineación: setHorizontalAlignment.

   • Tooltips: setToolTipText para dar pistas al usuario.

   • Visibilidad/edición: setEnabled, setEditable.

4. Presentación a entregar

   • Una presentación (pdf) que incluya:

     • Captura de pantalla de cada interfaz.

     • Nombre de los componentes usados.

     • Propiedades que se han modificado y su explicación (ej: “cambié el color de fondo del botón para destacar la acción principal”).

Criterios de evaluación

 
RA1. Genera interfaces gráficos de usuario mediante editores visuales utilizando las funcionalidades del editor y adaptando el código generado.
a) Se ha creado un interfaz gráfico utilizando los asistentes de un editor visual.
b) Se han utilizado las funciones del editor para ubicar los componentes del interfaz.
c) Se han modificado las propiedades de los componentes para adecuarlas a las necesidades de la aplicación.

RubricaM1Interfaces (1)

Criterios

Calificaciones Pts

Este criterio depende de una competencia de aprendizaje

Variedad de componentes

3 para >2 ptsExcelenteUsa 8 o más componentes diferentes correctamente.

2 para >1.2 ptsBienUsa 6–7 componentes correctamente.

1.2 para >0 ptsRegularUsa 4–5 componentes correctamente.

0 ptsInsuficiente o no realizado

3 pts

Este criterio depende de una competencia de aprendizaje

Uso de propiedades

4 para >3 ptsExcelenteAplica propiedades avanzadas: colores, fuentes, iconos, tooltips, alineación, etc.

3 para >2.4 ptsBienAplica propiedades básicas: texto, tamaño, posición.

2.4 para >1.6 ptsRegularPocas propiedades modificadas.

1.6 para >0 ptsInsuficiente o no realizadoTodo por defecto.

4 pts

Este criterio depende de una competencia de aprendizaje

Creatividad y presentación

3 para >2 ptsExcelenteInterfaces originales, claras y bien justificadas.

2 para >1.8 ptsBienInterfaces correctas con explicación aceptable.

1.8 para >0 ptsRegularInterfaces simples con poca explicación

0 ptsInsuficiente o no realizadoInterfaces pobres o sin explicación.

3 pts

Puntos totales: 10

Ejercicio Tema 2: “Paneles y Layouts como profesionales”

0) Objetivo didáctico

• Diseñar una interfaz a partir de un wireframe y un árbol de contenedores.
  
  

• Elegir conscientemente cuántos JPanel usar y qué layout conviene en cada zona.
  
  

• Practicar BorderLayout, FlowLayout, GridLayout y GridBagLayout en una sola ventana + JDialog modal.
  
  

• Entregar capturas + esquema + breve explicación (RA1 y RA4).
  
  

1) Planificación en papel (10 min)

1. Haz un boceto de esta ventana “Gestor de usuarios”:
   
   

   • Header (arriba): título + icono.
     
     

   • Lateral (izquierda): 5 botones de navegación (Dashboard, Usuarios, Informes, Ajustes, Ayuda).
     
     

   • Centro (formulario): 2 columnas con etiquetas/campos (Nombre, Email, Rol (JComboBox), Activo (JCheckBox), Notas (JTextArea)).
     
     

   • Derecha (previsualización): JTabbedPane con “Resumen” y “Logs”.
     
     

   • Barra inferior (abajo): botones “Cancelar”, “Limpiar”, “Guardar” alineados a la derecha.
     
     

Dibuja el árbol de contenedores:

JFrame (BorderLayout)

 ├─ NORTH: headerPanel (FlowLayout)

 ├─ WEST: navPanel (GridLayout 5x1)

 ├─ CENTER: formPanel (GridBagLayout)

 ├─ EAST: previewPanel (BorderLayout) → dentro: JTabbedPane

 └─ SOUTH: buttonBar (FlowLayout RIGHT)

2. 
   

3. Lista de componentes y propiedades clave (fuentes, tooltips, gaps, insets).
   
   

⚠️ Solo cuando tengas este esquema aprobado, pasas a IntelliJ.

2) Construcción en IntelliJ GUI Designer

2.1 Crear formulario y raíz

1. New → GUI Form → GestorUsuarios.
   
   

2. Selecciona el root panel → Right click → Set Layout → BorderLayout.
   
   

2.2 Header (NORTH)

1. Añade JPanel → posición NORTH del BorderLayout.
   
   

2. Set Layout → FlowLayout.
   
   

3. Inserta JLabel (icono+título).
   
   

   • Propiedades: text = "Gestor de usuarios", font = Bold 18, icon (si tenéis).
     
     

4. (Opcional) Añade un JSeparator debajo (queda elegante).
   
   

2.3 Navegación (WEST)

1. JPanel → posición WEST.
   
   

2. Set Layout → GridLayout y pon rows=5, cols=1, ajusta vgap=5.
   
   

3. Añade 5 JButton: Dashboard, Usuarios, Informes, Ajustes, Ayuda.
   
   

4. Propiedades de botones: Same Size Horizontally = true (si usas GridLayoutManager de IntelliJ, marca “Same Size…” para uniformar).
   
   

2.4 Formulario (CENTER) – GridBagLayout (el reto)

1. JPanel → posición CENTER.
   
   

2. Set Layout → GridBagLayout.
   
   

3. Inserta por filas (usa insets 5, anchor WEST, fill HORIZONTAL):
   
   

   • Fila 0: JLabel "Nombre" (gridx=0), JTextField (gridx=1, weightx=1, fill=HORIZONTAL).
     
     

   • Fila 1: JLabel "Email", JTextField (igual que arriba).
     
     

   • Fila 2: JLabel "Rol", JComboBox (modelo: Admin, Editor, Invitado).
     
     

   • Fila 3: JLabel "Activo", JCheckBox.
     
     

   • Fila 4: JLabel "Notas", JScrollPane con JTextArea (gridwidth=1, weighty=1, fill=BOTH) para que crezca verticalmente.
     
     

4. Revisa en cada campo:
   
   

   • weightx=1 en la columna de entradas para que se estiren al redimensionar.
     
     

   • insets = 5,5,5,5 (márgenes).
     
     

   • anchor = WEST en etiquetas.
     
     

   • fill = HORIZONTAL/BOTH en campos para que no “floten”.
     
     

2.5 Previsualización (EAST)

1. JPanel → posición EAST → Set Layout → BorderLayout.
   
   

2. Dentro, añade un JTabbedPane (CENTER).
   
   

   • Pestaña 1: “Resumen” → JTextArea readOnly dentro de JScrollPane.
     
     

   • Pestaña 2: “Logs” → JList o JTextArea.
     
     

3. Fija un Preferred Size (p.ej. 260 px de ancho) para que no coma todo el espacio.
   
   

2.6 Botonera (SOUTH)

1. JPanel → posición SOUTH.
   
   

2. Set Layout → FlowLayout y en propiedades alignment = RIGHT.
   
   

3. Añade JButton “Cancelar”, “Limpiar”, “Guardar”.
   
   

   • Marca Same Size Horizontally para uniformar.
     
     

   • (Opcional) Define Default Button = Guardar (en el JFrame).
     
     

3) Diálogo modal de confirmación (JDialog)

1. New → GUI Form → DialogConfirmacion (JDialog).
   
   

2. Añade JLabel (“¿Guardar cambios?”), JButton “Aceptar”, JButton “Cancelar”.
   
   

3. En la ventana principal, al pulsar Guardar:
   
   

   • dialog.setModal(true); dialog.pack(); dialog.setVisible(true);
     
     

4. (Sin lógica aún; esto es Tema 2: estructura y eventos mínimos).
   
   

4) Ajustes de comportamiento (que suelen fallar)

• Si algo queda demasiado separado al maximizar, es porque su contenedor usa GridLayoutManager con Size Policy = “Can grow” y sin pesos.
  
  

  • En GridBagLayout, controla weightx/weighty y fill.
    
    

  • En FlowLayout, manda el tamaño preferido de los componentes (no crece a pantalla completa).
    
    

  • En BorderLayout, el CENTER crece; EAST/WEST conservan su preferred width.
    
    

• Si no puedes meter un componente dentro de un panel:
  
  

  • Cortar (Ctrl+X) → seleccionar el panel → Pegar (Ctrl+V).
    
    

  • O Right click panel → Add → [componente].
    
    

5) Entrega del alumnado (README + capturas)

1. Wireframe dibujado (foto/escaneo).
   
   

2. Árbol de contenedores (como el del enunciado) indicando qué layout usa cada JPanel y por qué.
   
   

3. Capturas:
   
   

   • Vista general.
     
     

   • Redimensionada (para comprobar que el CENTER y Notas crecen bien).
     
     

   • Pestañas del JTabbedPane.
     
     

   • Diálogo modal abierto.
     
     

4. Mini tabla con las propiedades clave usadas (insets, weightx, fill, alignment…).
   
   

5. Enlace a GitHub con el .form, .java y el PDF con la planificación.
   
   

6) Criterios de evaluación (10 pts)

• Estructura / layouts elegidos (3 pts): usa Border + Flow + Grid + GridBag correctamente, con justificación.
  
  

• Uso de propiedades de distribución (3 pts): insets, hgap/vgap, anchor, fill, weightx/weighty, preferred size.
  
  

• Comportamiento al redimensionar (2 pts): CENTER y Notas crecen, EAST se mantiene estable, botonera alineada.
  
  

• Presentación/README (2 pts): wireframe, árbol de paneles, capturas y explicación.
  
  

7) Retos opcionales (para subir nota)

• Añade un JMenuBar arriba (Archivo/Editar/Ayuda).
  
  

• Convierte la botonera a GridLayout(1,3) y compárala con Flow RIGHT.
  
  

• Cambia el formulario a solo GridBag con gridwidth=2 para Notas (practicar spans).
  
  

8) Chuleta rápida para IntelliJ GUI Designer

• Cambiar layout del panel: Right click panel → Set Layout.
  
  

• Mover a otro panel: cortar (Ctrl+X) → seleccionar panel destino → pegar (Ctrl+V).
  
  

• Igualar tamaños: propiedades del contenedor → Same Size Horizontally/Vertically.
  
  

• Márgenes: insets (GridBag) o margins/border del panel.
  
  

• Espaciados: hgap, vgap (Flow/Grid).
  
  

• Que los campos crezcan: en GridBag → weightx=1, fill=HORIZONTAL/BOTH.

Tarea evaluable M5 · “Túnel del Terror → Ruleta TRUCO/TRATO” (JavaFX)

Objetivo

Crear una mini-app en JavaFX + Scene Builder con dos pantallas:

1. Entrada al túnel: recoge Nombre, Apellidos y Curso (DAM/DAW/SMR) con estética Halloween; valida y permite entrar. (RA1, RA4).

2. Ruleta: animación de giro y resultado binario: TRUCO o TRATO, mostrando arriba el nombre completo y el curso que llegan de la pantalla 1. (RA1, RA3, RA4).

Requisitos funcionales

Pantalla 1 · “Entrada al Túnel”

• Controles: TextField Nombre, TextField Apellidos, ComboBox Curso (DAM1/DAM2/DAW1/DAW2/SMR1/SMR2).

• Botón “Entrar si te atreves” (acción OnAction).

• Validación: no dejar continuar si hay campos vacíos; mensaje claro y breve. (RA4).

• Ambientación: fondo/imagen/niebla/sonido suave (opcional), tipografía legible y contraste correcto. (RA4).

Pantalla 2 · “Ruleta TRUCO/TRATO”

• Animación: al pulsar GIRAR, la ruleta (imagen o Canvas) rota y se detiene suavemente. (RA3).

• Resultado: calcular y mostrar “TRUCO” o “TRATO” (50/50 o sectores).

• UX: desactivar GIRAR durante el giro; mensaje final claro (label/alert). (RA4).

• Personalización: lista de “trucos” o “tratos” temáticos.

Requisitos técnicos (sugeridos)

src/main/java/.../Main.java src/main/java/.../EntradaController.java src/main/java/.../RuletaController.java src/main/resources/.../entrada.fxml src/main/resources/.../ruleta.fxml src/main/resources/.../halloween.css (opcional)

• Paso de datos: del controlador de “Entrada” al de “Ruleta” (setter o DTO simple). (RA1).

• Usabilidad: alineaciones/anchajes correctos en Scene Builder; mensajes adecuados en extensión y claridad. (RA4).

Entrega (Aula Virtual)

• enlace a GitHub (commits visibles).

• README breve: qué hace, cómo ejecutar, y 2 capturas (pantalla entrada y ruleta).

• Según tu PD: las entregas fuera de plazo o por vías no indicadas no se evalúan y el plagio implica 0 en los criterios afectados.

• Recordatorio de ponderación global: el trabajo práctico forma parte del bloque instrumental (≈60% del módulo, junto a teoría ≈30% y CPS ≈10%). 

Rúbrica (10 puntos)

#

Criterio (RA)

Excelente

Bueno

Regular

Mal

Máx

1

Interfaz “Entrada al Túnel” (RA1, RA4)

2,5 pts – Maquetación muy cuidada en Scene Builder; anchajes/alineaciones correctos; legibilidad alta; estética Halloween coherente y limpia.

1,75 pts – Correcta con pequeños detalles en espaciados/anchajes o consistencia visual.

1,0 pt – Distribución parcial; legibilidad/contrastes mejorables; inconsistencias.

0 pts – Desorden/solapes o baja legibilidad.

2,5

2

Validación y mensajes (RA4)

1,5 pts – No permite continuar con campos vacíos; mensajes breves, claros y visibles.

1,05 pts – Algún detalle menor (ubicación o redacción).

0,6 pts – Validación parcial o mensajes poco claros.

0 pts – Sin validación o feedback confuso/inexistente.

1,5

3

Paso de datos a la Ruleta (RA1)

1,5 pts – Nombre, apellidos y curso llegan y se muestran correctamente.

1,05 pts – Ligeros fallos de formato/ubicación.

0,6 pts – Solo parte de los datos o colocación pobre.

0 pts – No se muestran los datos.

1,5

4

Ruleta y feedback visual (RA3, RA4)

3,0 pts – Composición clara; botón GIRAR desactivado durante el giro; UX comprensible al finalizar (estado y mensajes).

2,1 pts – Gira correctamente con pequeños fallos de tiempos/estados.

1,2 pts – Giro básico/entrecortado; feedback mejorable.

0 pts – Sin comportamiento visual coherente.

3,0

5

Resultado TRUCO/TRATO (RA4)

1,5 pts – Resultado visible, destacado y comprensible.

1,05 pts – Se entiende, con margen de mejora visual.

0,6 pts – Se muestra pero poco claro/destacado.

0 pts – No se muestra adecuadamente.

1,5

Total: 10 pts

Instrucciones

1. Lee el Tema 7 completo (Usabilidad) y selecciona las ideas más importantes.
   Deberás incluir, como mínimo:

   • Qué es la usabilidad.

   • Por qué es importante en el diseño de interfaces.

   • Principales principios o heurísticas de Nielsen.

   • Ejemplos de buena y mala usabilidad.

   • Consejos o buenas prácticas para mejorar la experiencia del usuario.

2. Diseña una infografía original donde resumas toda esta información de forma visual.
   Puedes usar herramientas como Canva, Genially, PowerPoint, Piktochart o Google Drawings.

3. Aspectos que debe incluir tu infografía:

   • Título llamativo.

   • Textos breves y claros (no copiar párrafos largos).

   • Imágenes, iconos o gráficos que apoyen la información.

   • Colores y tipografía legibles.

   • Tu nombre y curso al final del trabajo.

4. Formato de entrega:

   • Descarga tu infografía en formato PDF o imagen (JPG/PNG).

   • Nómbrala así: Infografía_Usabilidad_TuNombre.

   • Sube el archivo al aula virtual antes de la fecha límite.

Criterios de evaluación (10 puntos)

Criterio

Puntos

Descripción

Contenido y comprensión del tema

3

Resume correctamente los conceptos clave de la usabilidad.

Claridad y organización de la información

2

La información está bien estructurada y fácil de seguir.

Diseño visual y creatividad

2

La infografía es atractiva, coherente y bien presentada.

Originalidad y elaboración personal

2

No se limita a copiar textos; demuestra comprensión propia.

Ortografía y presentación final

1

Uso correcto del lenguaje y formato adecuado.

Consejo final

Piensa que tu infografía debe servir para que cualquier persona pueda entender qué es la usabilidad sin leer el tema completo. Usa tus propias palabras, sé creativo y cuida el diseño.