🖱️ “Atención: si pensabas que un botón era solo para pulsar, aquí descubrirás que puede ser azul, redondo, con sombra, con evento… y que siempre falla en el peor momento 😅”
Tema 1: Introducción a la confección de interfaces
Tema 2: Clases y componentes
Tema 3: Interfaces con XML
Tema 4: Creación de componentes visuales
Tema 5: Explotación de componentes visuales
Tema 6: Usabilidad I
Tema 7: Usabilidad II
Tema 8:Confección de informes I
PARTE TEÓRICA
RA1, criterio b: Uso de las funciones del editor para la ubicación de componentes en la interfaz.
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.
Abre el diseñador (.form).
Elimina el JLabel que pusiste antes.
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")));
}
Resolución problemas comunes:
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.
RA3, criterio d: Asignación de eventos a componentes visuales creados en la interfaz.
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).
PARTE PRÁCTICA
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.
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”.
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.
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.
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
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).
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)
Lista de componentes y propiedades clave (fuentes, tooltips, gaps, insets).
⚠️ Solo cuando tengas este esquema aprobado, pasas a IntelliJ.
New → GUI Form → GestorUsuarios.
Selecciona el root panel → Right click → Set Layout → BorderLayout.
Añade JPanel → posición NORTH del BorderLayout.
Set Layout → FlowLayout.
Inserta JLabel (icono+título).
Propiedades: text = "Gestor de usuarios", font = Bold 18, icon (si tenéis).
(Opcional) Añade un JSeparator debajo (queda elegante).
JPanel → posición WEST.
Set Layout → GridLayout y pon rows=5, cols=1, ajusta vgap=5.
Añade 5 JButton: Dashboard, Usuarios, Informes, Ajustes, Ayuda.
Propiedades de botones: Same Size Horizontally = true (si usas GridLayoutManager de IntelliJ, marca “Same Size…” para uniformar).
JPanel → posición CENTER.
Set Layout → GridBagLayout.
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.
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”.
JPanel → posición EAST → Set Layout → BorderLayout.
Dentro, añade un JTabbedPane (CENTER).
Pestaña 1: “Resumen” → JTextArea readOnly dentro de JScrollPane.
Pestaña 2: “Logs” → JList o JTextArea.
Fija un Preferred Size (p.ej. 260 px de ancho) para que no coma todo el espacio.
JPanel → posición SOUTH.
Set Layout → FlowLayout y en propiedades alignment = RIGHT.
Añade JButton “Cancelar”, “Limpiar”, “Guardar”.
Marca Same Size Horizontally para uniformar.
(Opcional) Define Default Button = Guardar (en el JFrame).
New → GUI Form → DialogConfirmacion (JDialog).
Añade JLabel (“¿Guardar cambios?”), JButton “Aceptar”, JButton “Cancelar”.
En la ventana principal, al pulsar Guardar:
dialog.setModal(true); dialog.pack(); dialog.setVisible(true);
(Sin lógica aún; esto es Tema 2: estructura y eventos mínimos).
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].
Wireframe dibujado (foto/escaneo).
Árbol de contenedores (como el del enunciado) indicando qué layout usa cada JPanel y por qué.
Capturas:
Vista general.
Redimensionada (para comprobar que el CENTER y Notas crecen bien).
Pestañas del JTabbedPane.
Diálogo modal abierto.
Mini tabla con las propiedades clave usadas (insets, weightx, fill, alignment…).
Enlace a GitHub con el .form, .java y el PDF con la planificación.
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.
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).
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.
Crear una mini-app en JavaFX + Scene Builder con dos pantallas:
Entrada al túnel: recoge Nombre, Apellidos y Curso (DAM/DAW/SMR) con estética Halloween; valida y permite entrar. (RA1, RA4).
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).
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).
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.
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).
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%).
#
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
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.
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.
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.
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.
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.
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.