Escrito por Jaime L.

Vera Campos

Diseño Gráfico, fundamental...

06-October-2006
Actualmente la historia de la informática es inherente a las interfaces gráficas, debido a que los
sistemas operativos gráficos han influido en la evolución de la industria del hardware y el software. La
Interfaz Gráfica de Usuario (IGU) es la traducción del vocablo inglés Graphic User interface (GUI).

La primera interfaz gráfica de usuario se desarrolló en los laboratorios de XEROX, en los años sesenta.
En 1984, Apple, la compañía de computadoras Macintosh, la puso a disposición del público, siendo
además la pionera en su introducción, además del ratón (mouse). Fue hasta 1993 cuando se
generalizaron las interfaces gráficas de usuario, con la primera versión popular del sistema operativo
Windows 3.0 de Microsoft.

Básicamente, una interfaz es un dispositivo que permite una comunicación entre dos sistemas. Cuando
se habla de la interfaz de un programa o aplicación (software), se trata del conjunto de herramientas y
mecanismos que permiten al usuario interactuar con la computadora, facilitando las operaciones de
información o datos. Es el aspecto visible como tal que tiene un programa, como se presenta ante los
usuarios.

En el caso de una interfaz gráfica de usuario, se incluye una serie de elementos, como: menús,
ventanas, teclado, ratón, sonidos en algunos casos y la participación gráfica en sí, con el apoyo de
representaciones visuales. También se requiere una pantalla o monitor de computadora, con el fin de
que el usuario pueda interactuar con las opciones del menú y los íconos, dentro del sistema. De esta
forma puede abrirse el canal de comunicación entre el usuario y la computadora.

En una interfaz gráfica de usuario para la Web, debe tenerse una visión clara sobre el sitio o la página,
no sólo al determinar la estructura, la navegación y los contenidos, sino también al realizar el diseño
gráfico como tal. Con esto puede lograrse una buena usabilidad, legibilidad, accesibilidad y
funcionalidad. Cabe señalar que para esto no es necesario emplear lo último en recursos tecnológicos
y/o gráficos espectaculares.

El diseño de los gráficos en la interfaz es útil para que el usuario vea en pantalla la información que
pueda serle de interés. Éste le proporciona las herramientas que verá durante el tiempo que se
relacione con la interfaz, así como la posibilidad de tomar las acciones necesarias como respuesta al
sistema. Hoy en día, los gráficos diseñados en la computadora proveen una comunicación de manera
ilustrada, lo que facilita la interacción con el hombre.

En esto radica la participación del diseñador gráfico, que es de suma importancia, porque él es quién
tiene la posibilidad de integrar eficientemente elementos visuales como imágenes, tipografías,
espacios, colores, etcétera.

Por otra parte, en el diseño y la combinación de elementos, como objetos gráficos y representaciones
visuales, debe prevalecer una coherencia y una unidad, porque favorece la identificación de objetos.

La tipografía y la aplicación de color son aspectos que deben ser tratados cuidadosamente en el
momento de establecer una buena interfaz, esto en razón de un buen contraste y una inmejorable
legibilidad, como elementos formales del diseño gráfico en relación con los contenidos.

Con una interfaz bien diseñada, el usuario debe sentirse arropado en el momento de realizar sus
búsquedas y cubrir sus necesidades de información, gracias al equilibrio entre contenidos y gráficos. De
otra forma sería un fracaso, porque la interfaz no cubriría bien las necesidades de los usuarios, a
quienes se dirige y por quienes se planea.

Ejemplos de Interfaz Gráfica de Usuario en una página Web

En este primer ejemplo, puede apreciarse que el diseño gráfico contribuye a que sean distinguidos los
objetos del contenido, por medio de la creación de íconos para reforzar las ideas, además del uso de
color para destacar la información principal y la secundaria. En este caso los tópicos principales se
encuentran a la izquierda y los secundarios, a la derecha. Es notoria la legibilidad en el área de texto-
información.

En este segundo ejemplo, el concepto se acentúa con la incorporación de elementos visuales

propiamente contextuales: íconos basados en la propia temática del contenido. Los elementos de fondo
y los colores recrean un ambiente de sucesos pasados.
Este último es un ejemplo claro y simple de acceso rápido a la información, con un manejo de
reticencia en elementos visuales y contenido, para el usuario que está acostumbrado a realizar
búsquedas de información de manera ágil y concreta.

En resumen, una buena interfaz gráfica de usuario requiere simplicidad y funcionalidad. Por otro lado,
aunque el diseño gráfico tiene una presencia implícita, debe ser considerado como parte fundamental
en el éxito o el fracaso de la interfaz, porque a través de ésta se refuerzan notablemente las ideas y/o
conceptos en los contenidos.

3tweetsretweet

(Actualizado: 17 de Diciembre de 2007) Java posee una API (Interfaz para

porgramación de Aplicaciones) que es la encargada de manipular las interfaces gráficas
hechas con Swing. Esta nos permite crear GUI’s realmente bonitas. Pero primero
necesitamos tener unos conceptos claros, como por ejemplo que es Swing y eso del Java
look and feel (llamado a veces “Metal”).

Los componentes de Swing están escritos en Java, sin ningún código de especificación
de ventanas. Esto facilita la creación de interfaces gráficas sin tomar en cuenta el
sistema de graficación de ventanas donde se trabaje, y simplificando el desarrollo de
aplicaciones. Swing además soporta una arquitectura de visualización (Look And
Feel). Ésta característica dota a los usuarios con la habilidad de cambiar la apariencia de
una aplicación sin reiniciarla y sin que el desarrollador se tenga que cambiar por
completo su conjunto de subclases.

Java Look And Feel (de ahora en adelante J&F) es un API multiplataforma
proporcionada por JavaSoft. Voy a ser breve, así que si necesitas información específica
puedes buscar en san google.
Java L&F implementa todas las funcionalidades básicas de Swing, pero tambén se
extiende en otras áreas incluyendo:

• Temas
• Sliders (barras de selección de rangos)
 • Toolbars (Barras de herramientas)
• Trees (arboles de contenido)

Ahora, y para ver de que estamos hablando vamos a tomar como ejemplo un programa
hecho por los maestros del L&F: Michael Albers, Tom Santos, Jeff Shapiro y Steve
Wilson.

El programa lo puedes encontrar en los demos que se encuentran en los JSDK. Vas a
donde tienes instalado el SDK de Java y buscas la carpeta demo/jfc/Metalworks, allí
encontrarás la aplicación que vamos a tomar como objeto de ejemplo.

Para ejecutar el programa que ya está compilado (Metalworks.jar), digitas desde una
shell:

java -jar Metalworks.jar

Y lo que veras es un programa como este (ten en cuenta que según tu versión del SDK
el programa puede cambiar o no estar; yo utilizo el J2SDK 1.5):

Como puedes observar es una interfaz gráfica realmente bonita y llamativa. Aunque es
la que viene por defecto con el L&F en su versión 5. Podéis jugar con este programita
que te dará más de una sorpresa agradable. Por ejemplo vas al menú Theme y
seleccionas el que quieras, veras cosas como estas:
La interfaz de usuario cambia de aspecto sin necesidad de recompilar o reiniciar la
aplicación, es decir, cambia en tiempo de ejecución. Pero lo que nosotros queremos es
saber como hacer esto, veámos:

Creando un JFrame con el Look And Feel activado

Esto es muy sencillo de hacer. Lo único que tenemos que hacer es activar el Look And
Feel, pasando true como parámetro al mí©todo estático
setDefaultLookAndFeelDecorated de JFrame y de JDialog. Por ej.:

Código:

view source

print?
01 //Ejemplo1Look .java
02 import javax.swing.*;
03 import java.awt.event.*;
04 import java.awt.*;
05 public class Ejemplo1Look extends JFrame
06 {
07 public Ejemplo1Look()
08 {
09 super("Ejemplo 1");
10 JButton boton = new JButton("Mostrar dialogo");
11 boton.addActionListener(new ActionListener(){
12 public void actionPerformed(ActionEvent e){
13 JOptionPane.showMessageDialog(null,
14 "Y así se ve un cuadro de dialogo de error",
15 "Mensaje",JOptionPane.ERROR_MESSAGE);
16 }
17 }
18 );
19 getContentPane().add(new JLabel("Asi se ve un Frame"),
20 BorderLayout.NORTH);
21 getContentPane().add(boton);
22 setSize(200,80);
23 setVisible(true);
24 }
25 public static void main(String args[])
26 {
27 JFrame.setDefaultLookAndFeelDecorated(true);
28 JDialog.setDefaultLookAndFeelDecorated(true);
29 Ejemplo1Look ventana = new Ejemplo1Look();
30 ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
31 }
32 }

Este programa tiene la siguiente salida:

Descargar programa!!!

Creando estilos visuales a partir de archivos de texto plano

Este es uno de los tantos mí©todos para crear estilos o temas y consiste en crear un
archivo de texto plano, que contendrá la configuración de visualización. Un ejemplo
sencillo puede ser este:

Código:

#Aquí puedes colocar comentarios

name=Payaso
primary1=200,0,66
primary2=0,0,255
primary3=0,255,0
secondary1=255,255,0
secondary2=0,255,255
secondary3=255,0,255
black=255,255,200
white=25,80,150[/code]
Puedes usar comentarios para documentar el tema; estos deben comenzar
con el símbolo numeral (#). Y la sintaxis del tema es
nombreEtiqueta=valor. Vamos a ver que significa cada etiqueta:

name=Payaso indica que el tema se llama Payaso.

primary1=200,0,66 es el color del borde externo
primary2=0,0,255 es el color del borde interno y el foco
primary3=0,255,0 es el color de la barra de titulo
secondary1=255,255,0 color del borde de los botones, labels, etc
secondary2=0,255,255 color de los botones al estar presionados
secondary3=255,0,255 color de fondo de los botones, labels, etc
black=255,255,200 color de las letras sobre las cajas de texto, etc
white=25,80,150 color del fondo de las cajas de texto, areas, etc

El programa que utiliza este archivo de estilo es:

Código:

view source

print?
01 //Ejemplo2Look .java
02 import javax.swing.*;
03 import java.awt.event.*;
04 import java.awt.*;
05 import java.io.*;
06 import javax.swing.plaf.metal.*;
07 public class Ejemplo2Look extends JFrame
08 {
09 public Ejemplo2Look()
10 {
11 super("Ejemplo 2");
12 JButton boton = new JButton("Cargar tema");
13 boton.addActionListener(new ActionListener(){
14 public void actionPerformed(ActionEvent e){
15 cargarTema();
16 }
17 }
18 );
19 getContentPane().add(boton);
getContentPane().add(new JLabel("Así se ven las labels"),
20
BorderLayout.NORTH);
getContentPane().add(new JTextField("Y así las cajas de texto"),
21
BorderLayout.SOUTH);
getContentPane().add(new JScrollPane(new JTextArea("Area de texto")),
22
BorderLayout.WEST);
getContentPane().add(new JSlider(SwingConstants.VERTICAL, 0, 200, 10
23
), BorderLayout.EAST);
24 setSize(400,200);
UIManager.addPropertyChangeListener(new
25
UISwitchListener((JComponent)getRootPane()));
26 setVisible(true);
27 }
28 public void cargarTema()
29 {
30 MetalTheme miTema = null;
31 try{
InputStream flujoEntrada =
32
getClass().getResourceAsStream("Tema.theme");
33 miTema = new PropertiesMetalTheme(flujoEntrada);
34 }catch(NullPointerException npe) {System.out.println(npe);}
35 MetalLookAndFeel.setCurrentTheme(miTema);
36 try{
37 UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
38 }catch (Exception ex){
39 System.out.println("Falló la carga del tema");
40 System.out.println(ex);
41 }
42 }
43 public static void main(String args[])
44 {
45 UIManager.put("swing.boldMetal", Boolean.FALSE);
46 JFrame.setDefaultLookAndFeelDecorated(true);
47 JDialog.setDefaultLookAndFeelDecorated(true);
48 Toolkit.getDefaultToolkit().setDynamicLayout(true);
49 System.setProperty("sun.awt.noerasebackground","true");
50 try{
51 UIManager.setLookAndFeel(new MetalLookAndFeel());
52 }catch ( UnsupportedLookAndFeelException e ){
System.out.println ("Metal Look & Feel no es soportada en esta
53
plataforma");
54 System.exit(0);
55 }
56 Ejemplo2Look ventana = new Ejemplo2Look();
57 ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
58 }
59 }

Esta es la salida del programa, y sí, ya se que es horrible, pero es

la única forma de mostrar bien para que es cada etiqueta:

Ahora, antes que se me olvide, tengo que aclarar algo. Para que el
programa funcione perfectamente tenemos que usar dos programas creados
por el maestro Steve Wilson: PropertiesMetalTheme.java y
UISwitchListener.java.

PropertiesMetalTheme, es una clase que crea un flujo hacia el archivo

de texto que contenga la configuración del tema, y carga las
propiedades que se encuentren allí. No voy a explicar en detalle el
funcionamiento de esta clase ya que eso está fuera de los límites de
este artículo, y además es muy fácil de comprender.

UISwitchListener, es una clase que permite cambiar la interfaz de

usuario en tiempo de ejecución, sin problemas inesperados.
Descargar programa!!!

Creando estilos visuales simples a partir de clases

Bueno, ahora vamos a ver una manera de crear estilos visuales a partir
de un programa (una clase) hecho en Java. El primer programa que vamos
a tomar como ejemplo es EstiloHalloween.java:

Código:

view source

print?
01 //Ejemplo simple de tema en clase
02 //EstiloHalloween .java
03 import javax.swing.plaf.*;
04 import javax.swing.plaf.metal.*;
05 import javax.swing.*;
06 public class EstiloHalloween extends DefaultMetalTheme
07 {
public String getName() { return "Halloween"; }private final
08
ColorUIResource primary1 = new ColorUIResource(204, 102, 0);
private final ColorUIResource primary2 = new ColorUIResource(255, 0,
09
0);
private final ColorUIResource primary3 = new ColorUIResource(255,
10
204,102);
11
12 protected ColorUIResource getPrimary1() { return primary1; }
13 protected ColorUIResource getPrimary2() { return primary2; }
14 protected ColorUIResource getPrimary3() { return primary3; }
15 }

Como ven todo es muy fácil; simplemente declaramos una clase que
herede de DefaultMetalTheme, y creamos tres objetos de la clase
ColorUIResource que sean privados (private) y constantes (final). Cada
uno vá a simbolizar un color para la interfaz de usuario. Si no
comprendes bien es porque no has leído lo de primary1, primary2, etc.
allí arriba. Los objetos ColorUIResource los inicializamos con tres
números separados por comas que representan un color en formato RGB.
Por último declaramos tres mí©todos protected que retornen el valor de
los objetos ColorUIResource.

El programa que utiliza la clase EstiloHalloween es:

Código:

view source

print?
01 // Ejemplo3Look .java
02 import javax.swing.*;
03 import java.awt.event.*;
04 import java.awt.*;
05 import javax.swing.plaf.metal.*;
06 public class Ejemplo3Look extends JFrame
07 {
08 public Ejemplo3Look()
09 {
10 super("Ejemplo 3 - Halloween");
11 JButton boton = new JButton("Mostrar dialogo");
12 boton.addActionListener(new ActionListener(){
13 public void actionPerformed(ActionEvent e){
14 JOptionPane.showMessageDialog(null,
15 "Y así se ve un cuadro de dialogo de alerta",
16 "Mensaje",JOptionPane.WARNING_MESSAGE);
17 }
18 }
19 );
getContentPane().add(new JLabel("Asi se ve un Frame"),
20
BorderLayout.NORTH);
21 getContentPane().add(boton);
22 setSize(200,80);
23 setVisible(true);
24 }
25 public static void main(String args[])
26 {
27 MetalLookAndFeel.setCurrentTheme(new EstiloHalloween());
28 try{
29 UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
30 } catch (Exception ex) {
31 System.out.println("Falló la carga del tema");
32 System.out.println(ex);
33 }
34 JFrame.setDefaultLookAndFeelDecorated(true);
35 JDialog.setDefaultLookAndFeelDecorated(true);
36 Ejemplo3Look ventana = new Ejemplo3Look();
37 ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
38 }
39 }

Como puedes ver estamos utilizando únicamente los tres colores

primarios para interfaces gráficas (primary1, primary2 y primary3). La
salida del programa es:

Descargar programa!!!

Pero ahora vamos a ver un programa que utiliza todas las combinaciones
de colores; la clase es EstiloHalloween2:

Código:

view source

print?
01 // EstiloHalloween2.java
02 import javax.swing.plaf.*;
03 import javax.swing.plaf.metal.*;
04 import javax.swing.*;
05 public class EstiloHalloween2 extends DefaultMetalTheme
06 {
public String getName() { return "Halloween"; }private final
07
ColorUIResource primary1 = new ColorUIResource(204, 102, 0);
private final ColorUIResource primary2 = new ColorUIResource(255, 0,
08
0);
private final ColorUIResource primary3 = new ColorUIResource(255, 204,
09
102);
10
 private final ColorUIResource secondary1 = new ColorUIResource( 111,
11
111, 111);
private final ColorUIResource secondary2 = new ColorUIResource(255,
12
204, 102);
13
private final ColorUIResource secondary3 = new ColorUIResource(204,
14
102, 0);
private final ColorUIResource black = new ColorUIResource(255, 255,
15
255);
16 private final ColorUIResource white = new ColorUIResource(0, 0, 0);
17
18 protected ColorUIResource getPrimary1() { return primary1; }
19 protected ColorUIResource getPrimary2() { return primary2; }
20 protected ColorUIResource getPrimary3() { return primary3; }
21
22 protected ColorUIResource getSecondary1() { return secondary1; }
23 protected ColorUIResource getSecondary2() { return secondary2; }
24 protected ColorUIResource getSecondary3() { return secondary3; }
25
26 protected ColorUIResource getBlack() { return black; }
27 protected ColorUIResource getWhite() { return white; }
28 }

No explico esta clase ya que tiene la misma escencia de la primera,

solo que, aparte de utilizar primary1, primary2 y primary3, utiliza
secondary1, secondary2 y secondary3, y el color de fondo de las cajas
de texto (white) y de las letras (black).

La aplicación que utiliza la clase EstiloHalloween2 es esta:

Código:

view source

print?
01 // Ejemplo4Look .java
02 import javax.swing.*;
03 import java.awt.event.*;
04 import java.awt.*;
05 import java.io.*;
06 import javax.swing.plaf.metal.*;
07 public class Ejemplo4Look extends JFrame
08 {
09 public Ejemplo4Look()
10 {
11 super("Ejemplo 4 - Halloween");
12 getContentPane().add(new JButton("Los botones XD"));
getContentPane().add(new JLabel("Así se ven las labels"),
13
BorderLayout.NORTH);
getContentPane().add(new JTextField("Y así las cajas de texto"),
14
BorderLayout.SOUTH);
getContentPane().add(new JScrollPane(new JTextArea("Area
15
de\ntexto")), BorderLayout.WEST);
getContentPane().add(new JSlider(SwingConstants.VERTICAL, 0, 200, 10
16
), BorderLayout.EAST);
17 setSize(400,200);
18 setVisible(true);
19 }
20 public static void main(String args[])
21 {
22 MetalLookAndFeel.setCurrentTheme(new EstiloHalloween2());
23 try{
24 UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
25 }catch (Exception ex){
26 System.out.println("Falló la carga del tema");
27 System.out.println(ex);
28 }
29 JFrame.setDefaultLookAndFeelDecorated(true);
30 JDialog.setDefaultLookAndFeelDecorated(true);
31 try{
32 UIManager.setLookAndFeel(new MetalLookAndFeel());
33 }catch ( UnsupportedLookAndFeelException e ){
System.out.println ("Metal Look & Feel no es soportada en esta
34
plataforma");
35 System.exit(0);
36 }
37 Ejemplo4Look ventana = new Ejemplo4Look();
38 ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
39 }
40 }

Esta es la apriencia del programa:

Descargar programa!!!

Video tutorial en html

http://www.youtube.com/watch?v=GOfhmzNLWzY&feature=fvwk