TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

Módulo profesional 08: Desarrollo de interfaces (código: 0488)

Contenidos (duración 120 horas)

Tabla de contenido
CONFECCIÓN DE INTERFACES DE USUARIO...............................................................................................................2
1. INTERFACES DE USUARIO............................................................................................................................2
1.1. INTRODUCCIÓN A LAS INTERFACES DE USUARIO..........................................................................................2
1.2. ¿QUÉ SON LAS INTERFACES DE USUARIO?.................................................................................................4
1.3. EVOLUCIÓN DE LAS INTERFACES DE USUARIO.............................................................................................9
1.4. TIPO DE INTERFACES DE USUARIO..........................................................................................................14
1.5. ELEMENTOS DE LAS GUI. PROPIEDADES Y CARACTERÍSTICAS.......................................................................17
2. HERRAMIENTAS PROPIETARIAS Y LIBRES DE EDICIÓN DE INTERFACES..................................................................28
2.1. HERRAMIENTAS DE DISEÑO DE INTERFACES.............................................................................................29
2.2. ELEMENTOS DE LAS HERRAMIENTAS DE DESARROLLO DE INTERFACES............................................................30
3. COMPONENTES: CARACTERÍSTICAS Y CAMPOS DE APLICACIÓN BORRADO...........................................................33
3.1. VENTANA DE CUADRO DE COMPONENTES...............................................................................................35
3.2. OTROS CONTENEDORES (PANELES)........................................................................................................37
3.3. AÑADIR/ELIMINAR COMPONENTES EN LA INTERFAZ DE USUARIO.................................................................38
3.4. UBICACIÓN Y ALINEACIÓN DE COMPONENTES. MODIFICACIÓN DE PROPIEDADES.............................................40
4. LIBRERÍAS DE COMPONENTES DISPONIBLES PARA DISTINTOS SISTEMAS OPERATIVOS Y LENGUAJES DE PROGRAMACIÓN 42
4.1. CARACTERÍSTICAS ESPECÍFICAS DE LAS HERRAMIENTAS DE DISEÑO DE INTERFACES...........................................43
4.1.1. CONTROLES: CLASES, PROPIEDADES Y MÉTODOS......................................................................................43
4.1.2. DIÁLOGOS MODALES Y NO MODALES.....................................................................................................46
5. ENLACE DE COMPONENTES A ORÍGENES DE DATOS. DATAGRID........................................................................48
6. LOS EVENTOS: CONCEPTO, ASOCIACIÓN DE ACCIONES, EVENTOS ESCUCHADORES.................................................53
7. EDICIÓN DEL CÓDIGO GENERADO POR LAS HERRAMIENTAS DE DISEÑO...............................................................53
Confección de interfaces de usuario.

1. Interfaces de usuario
Actualmente, tiene alrededor multitud de ejemplos de aplicaciones informáticas, con las
interfaces de usuario correspondientes, que ayudan a la vida cotidiana de los seres
humanos. Naturalmente, ante un ordenador, se utilizarán muchas aplicaciones, pero ante
un cajero automático en el que se quiere sacar dinero o realizar cualquier otra operación,
habrá que interactuar con otro tipo de interfaz de usuario (que será interactiva, en este
caso).

Sin embargo, hay muchos más ejemplos: hoy en día ver el televisor, con el TDT
incorporada, representa tener que utilizar una serie de menús y opciones. Éste es otro
tipo de interacción entre un hardware electrónico y las personas, mediante otro tipo de
interfaz de usuario. También lo será un reproductor de MP3, que traerá una pequeña
interfaz muy simple, pero necesaria para su funcionamiento. Y no hace falta que hablemos
de las interfaces que llevan todos los aparatos dedicados al ocio, como las consolas de
videojuegos. Y podría hablarse también de los teléfonos móviles.

Las interfaces de usuario están en continua evolución y deben conocerse una serie de
herramientas que permitan su desarrollo.

1.1. Introducción a las interfaces de usuario

Empezaremos recordando el funcionamiento de un sistema informático. ¿Cómo consigue
un usuario manejar como a él le interesa un ordenador? El conjunto de piezas que
componen el hardware de un ordenador deberá llegar a funcionar según los deseos del
usuario. Pero la relación entre uno y otro tendrá algunos actores intermedios, como
puede verse en la figura 1.1.
 Figura 1.1 Actores en la relación con el hardware

En primer lugar, se encuentra el sistema operativo, encargado de la gestión y coordinación

de las tareas que llevan a cabo un intercambio de información entre los diferentes
recursos. Se compondrá de un sistema de entrada/salida, de la gestión de procesos, de la
gestión de la memoria principal o del sistema de archivos, entre otros. A su vez actuará de
interfaz entre el hardware y las aplicaciones utilizadas.

En segundo lugar, tendremos las aplicaciones. Éstas se encuentran por encima del sistema
operativo (el que necesitarán, adaptándose a él) y por debajo de los usuarios. Las
aplicaciones tendrán unas funcionalidades concretas, y ayudan a los usuarios a conseguir
sus objetivos determinados.

¿Dónde se encuentran las interfaces? Las interfaces forman parte de las aplicaciones. Son
la parte de las aplicaciones con las que se relacionarán los usuarios.

CES
El International Consumer Electronic Show –
abreviado como CES – es la feria mundial anual
más importante de tecnologías de consumo, con
las novedades más importantes del mercado.

En la figura 1.2 puede verse un ejemplo de interfaz actual de un microondas, presentado

en el CES 2010, junto con una lavadora. Sus interfaces están basadas en Android, sistema
operativo para dispositivos móviles basado en una versión modificada de Linux.
 Figura 1.2 Interfaz de un microondas

Existen muchos tipos de aplicaciones informáticas. Se pueden agrupar según su finalidad,

el entorno de uso, si son de uso genérico o si son hechas a medida, pero también se
pueden agrupar según sean aplicaciones de gestión empresarial, para el ocio, ofimáticas,
de gestión del hardware, aplicaciones en un entorno cliente-servidor, en un entorno
web… Nos fijaremos a lo largo de los siguientes apartados en aquellas interfaces
pertenecientes a utilidades creadas para facilitar las tareas o automatizar los
procedimientos tanto a escala empresarial como a escala masiva de usuarios.

1.2. ¿Qué son las interfaces de usuario?

Existen muchos tipos de interfaces de usuario en muchos ámbitos diferentes. Por esta
razón, es difícil encontrar una definición única que deje claro el concepto.

Una aplicación informática tendrá varias interfaces de usuario.

Una interfaz de usuario es un conjunto de elementos (que
pueden pertenecer al software o al hardware) que ofrecen una
información al usuario, y permiten, además, la interacción
(física o lógica) entre el usuario y el ordenador, por medio de
un dispositivo periférico o un enlace de comunicaciones.

Dentro de las interfaces de usuario diseñadas para aplicaciones informáticas, nosotros nos
fijaremos en las interfaces de usuario gráficas o GUI ( graphical user interface).

Las GUI permitirán al usuario interactuar con el sistema informático de más formas que la
que históricamente ha sido la única alternativa hasta hace unos años: teclear
instrucciones complejas y difíciles de entender para el usuario no experto.

Las interfaces gráficas de usuario (GUI) son aquellas que

utilizan elementos gráficos, como pueden ser menús, ventanas
 o diálogos, además del uso de otros recursos del sistema
informático (periféricos como el teclado, el ratón o el sonido)
para permitir al usuario interactuar con el ordenador de forma
muy sencilla e intuitiva.

Una de las novedades más importantes de las interfaces gráficas de usuario, aparecida a
mediados de los ochenta, fue la aparición del ratón como periférico. Utilizarlo permite a
los usuarios poder precisar la ejecución de las instrucciones, para poder interactuar con
las interfaces sin necesidad de teclear una sola instrucción.

Actualmente podemos encontrar un uso generalizado de las interfaces gráficas de

usuario. La gran mayoría de los sistemas operativos tienen este tipo de interfaz, de modo
que integrar una aplicación en el sistema operativo sea muy sencillo, y sólo sea necesario
adaptar algunos parámetros. Incluso existen dispositivos que han desarrollado su sistema
operativo propio, como los dispositivos móviles, con sus propias interfaces. En
la figura 1.3 puede verse un ejemplo con el iPad, de Apple.

Figura 1.3 Interfaz gráfica IPAD

Algunos ejemplos de interfaces gráficas de usuario los podemos encontrar en los

siguientes sistemas:

 Windows: la interfaz de usuario de Windows ha ido evolucionando junto con la

evolución del sistema operativo. No tiene nada que ver la interfaz del antiguo
Windows 3.1 con la de Windows 95, Windows XP, Windows Vista o Windows 7.
Todas tienen algunos denominadores comunes, como ofrecer un menú de inicio,
 una barra de tareas, un escritorio y algunas características como la ejecución de
varias ventanas de forma simultánea o la configuración de muchas de sus
funcionalidades.

 MAC: los sistemas informáticos de los Mac llevan un sistema operativo Mac OS X.
El nombre de la interfaz gráfica de usuario que incorpora su sistema operativo se
conoce como Aqua (desde el año 2000). Antes, con los sistemas operativos
Mac OS 8 y 9 la interfaz gráfica de usuario se había llamado Platinum. Se trata de
una interfaz que intenta ofrecer unos colores y unas texturas lo suficientemente
atractivas como para ayudar al éxito del sistema operativo. Aporta un Dock, una
barra de accesos directos a las aplicaciones y carpetas de documentos, que facilita
la navegación por el sistema. Incorpora también un menú siempre en la misma
ubicación, que irá cambiando en función de la aplicación que esté activa.

 Linux: el sistema UNIX/Linux lleva una interfaz primaria o básica de tipo texto, y
era el único sistema para poder interactuar con él hasta no hace mucho
tiempo. Actualmente existen varias interfaces gráficas, como:
o X Window: incorpora un modelo cliente-servidor que permite el uso
directo por parte de las aplicaciones de los periféricos de entrada/salida.

o KDE (SUSE Linux): entorno de escritorio para varios sistemas

operativos. Permite la ejecución automática de nuevos dispositivos de
datos, incorpora un inicio rápido.

o GNOME: entorno de escritorio en el proyecto GNU. Nació como alternativa

a KDE. Mejora su usabilidad y aporta elementos útiles para discapacitados.

o Open Look: permite ver y ejecutar varias aplicaciones de forma simultánea

en diferentes ventanas.

A continuación, se muestran algunos ejemplos de interfaces para los tres sistemas

operativos explicados.

En la figura 1.4 se puede ver un ejemplo de interfaces en el sistema operativo Windows

3.11.
Figura 1.4 Interfaz gráfica de Windows 3.11|Unidad1 Apartado1|http:

En la figura 1.5, uno de Linux.

Figura 1.5 Interfaz gráfica de UNIX

En la figura 1.6 un ejemplo de interfaces en un sistema operativo Mac OS.

Figura 1.6 Interfaz gráfica de un Mac

Cada interfaz tendrá su razón de ser y sus funcionalidades bien definidas, pero podemos
establecer algunas funciones principales que pueden desempeñar las interfaces gráficas
de usuario. Podemos encontrar:
  Configuración de las interfaces gráficas de usuario y del entorno de trabajo.
 Control de acceso a una aplicación informática.
 Sistemas de ayuda interactivos.
 Gestión y manipulación de directorios y archivos de un sistema operativo.
 Arranque y cierre de un sistema informático mediante un sistema operativo.
 Intercambio de datos entre distintas aplicaciones.
 Comunicación entre sistemas informáticos.
 Ayuda al desarrollo de aplicaciones informáticas.
 Ayuda al diseño y desarrollo de interfaces gráficas de usuario.
 Gestión y manipulación de las funcionalidades que puedan configurarse en los
sistemas informáticos.

Todas estas funciones principales más habituales de las interfaces de usuario se pueden
incluir dentro del objetivo principal de una interfaz de usuario, que consiste en
comunicarse de forma sencilla y agradable con el usuario por medio de un dispositivo de
entrada/salida.

CLI
Acrónimo de command line interface, es decir,
'interfaz de línea de instrucciones'. Permite a los
usuarios interactuar con el ordenador por
medio de líneas de texto simples que contienen
instrucciones.

Pero no todas las interfaces han sido, ni son, sencillas y agradables de utilizar. Las
interfaces de líneas de instrucciones (CLI, command line interface) , son un tipo de interfaz
más arcaico, pero con algunas funcionalidades mucho más prácticas para sus usuarios,
normalmente usuarios más expertos.

¿Quién preferirá utilizar una interfaz de tipo CLI antes que una interfaz gráfica de
usuario? Los usuarios con muchos años de experiencia, que tuvieron que aprender las
instrucciones básicas para poder trabajar con los sistemas operativos y están más
habituados a este tipo de interfaces, o, simplemente, quieren utilizarlas, ya que una
instrucción compleja será muy complicada representar mediante los elementos que
ofrecen las interfaces gráficas.

Otros dispositivos de hardware harán necesario el uso de estas interfaces. Por ejemplo, un
router o un conmutador algo complejo ofrecerá unas posibilidades de programación que
requerirán el trabajo mediante líneas de instrucciones.

Todos los sistemas operativos ofrecen la posibilidad de trabajar mediante un intérprete de

instrucciones, por ejemplo, el shell de UNIX, o el símbolo del sistema de Windows. Habrá
que tener también en cuenta que no todas las funcionalidades se pueden representar
mediante interfaces de usuario. Por ejemplo, las funcionalidades que requieren muchas
instrucciones serán difícilmente programables mediante interfaces; sin embargo, con una
pequeña programación Batch en Windows o los shell scripts en UNIX, se programarán con
facilidad.

Uno de los puntos críticos será el diseño de las interfaces de usuario. Será necesario que
cumpla todos los requisitos y que sea sencilla de utilizar. Si en la fase de diseño no se
consiguen estas premisas, difícilmente se obtendrá una interfaz adecuada para ser
utilizada de forma agradable y sencilla por sus usuarios, sin que éstos necesitan horas de
formación o un buen manual al lado mientras interactúan con la interfaz.

1.3. Evolución de las interfaces de usuario

Hablar actualmente de interfaces gráficas de usuario es una cuestión que parece que no
tenga mucha razón de ser, ya que las interfaces son parte de nuestro día a día, como un
elemento muy cotidiano del que no parece que sea necesario hablar. Pero no siempre fue
así. No hace mucho tiempo no se podía hablar de interfaces gráficas, o, si se podía hablar,
al menos no era del mismo tipo de interfaces que podemos disfrutar ahora.

A lo largo de los años, las interfaces gráficas han estado ligadas de las manos con los
sistemas operativos. A medida que éstos iban evolucionando, las interfaces de las
aplicaciones que se ejecutaban sobre aquellos sistemas operativos habían evolucionado
en la misma medida, o más, si esto era posible.

Los sistemas operativos gráficos acercaron la informática a muchos más usuarios de los
que hasta ese momento habían utilizado los ordenadores. Ya no era necesario ser
conocedor de las órdenes a introducir por la línea de instrucciones o tener conocimientos
de BASIC. Por ejemplo, cuando apareció Windows 3.1, el primer sistema operativo de gran
consumo basado en ventanas, muchas aplicaciones se adaptaron a este nuevo tipo de
interfaces y también se basaron en ventanas, lo que hizo mucho más fácil y accesible el
uso de la informática en el gran público.

Para poder comprender la evolución de las interfaces, también debemos fijarnos en la

evolución del hardware sobre el que ejecutamos los programas y en la evolución de las
técnicas de ingeniería del software. A medida que el hardware evolucionaba en
prestaciones y descendía en coste había una lucha por conseguir el negocio de la
informática de gran consumo a escala de software, es decir, en cuanto a sistemas
operativos. Todo esto ha llevado a una lucha entre diferentes empresas por desarrollar los
entornos más agradables y sencillos de utilizar, lo que ha provocado una continua
evolución de las interfaces a lo largo de los últimos años.
Empresas como Apple, Xerox, Be o Microsoft han sido las que más tiempo y dinero han
dedicado a esta labor durante las últimas cuatro décadas. Además, también
intercambiaron algunas acusaciones y demandas entre ellas.

A lo largo del tiempo se puede dividir la evolución de las interfaces de usuario en las
siguientes fases:

 Interfaces de usuario basadas en la línea de instrucciones (hasta los años setenta).

 Nacimiento de las interfaces de usuario, hacia 1970.
 Evolución hacia las interfaces gráficas de usuario (1980-1995).
 Interfaces gráficas de usuario no basadas en instrucciones (1996-2001).
 Interfaces gráficas de usuario interactivas (2002-ahora).

Interfaces de usuario basadas en la línea de instrucciones

En los inicios de los sistemas informáticos no existía ninguna interfaz de usuario. Si se

quería modificar la programación se accedía directamente al hardware para realizar las
adecuaciones pertinentes. Posteriormente, con la programación por lotes tampoco existía
una interfaz que permitiera la interacción. El usuario debía indicar un conjunto de
instrucciones en el sistema que, una vez procesadas, ofrecería unos resultados.

A partir de los años sesenta, con los lenguajes de órdenes, se llegó a la interfaz de línea de
instrucciones. Esta interfaz permitía al usuario interactuar con el ordenador con una línea
de texto, que serviría como texto que llevaría incluido un comando.

Hay que tener en cuenta que estamos hablando de una época en la que un único
ordenador central daba servicio a muchos usuarios, que van enviando instrucciones a ese
ordenador central, que distribuye su tiempo entre las solicitudes.

En la figura 1.7 se puede ver un ejemplo de ese tipo de máquinas.

Figura 1.7 Interfaz basada en línea de instrucciones

Nacimiento de las interfaces de usuario (1970)

En la década de los setenta comienza a evolucionarse hacia el uso de un ordenador por

parte de un único usuario. Estos primeros ordenadores personales permitirán a los
usuarios almacenar información, editarla y compartirla de forma sencilla. Las aplicaciones
que se desarrollan siguen estos objetivos e intentan ofrecer unas interfaces de usuario
adecuadas para conseguirlo. Se suele utilizar un diseño de interfaces de dos dimensiones
con menús jerárquicos de pantalla completa. Se utilizan las teclas de función como una
forma de interactuar con las aplicaciones y de completar los menús.

Al mismo tiempo, la empresa Xerox desarrolló, tras muchos años de investigaciones en el

PARC (Palo Alto Reseach Center), el ordenador Xerox Star en 1981. Dentro de estas
investigaciones, en 1973 se desarrolló la primera interfaz gráfica de usuario. El objetivo
era obtener un sistema informático lo suficientemente pequeño para poder ser
transportable, para trabajar en una oficina, con un sistema operativo con interfaz gráfica y
poder compartir información de forma sencilla.

En la figura 1.8 se puede ver un ejemplo de Xerox Star.

Figura 1.8 Xerox Star

Evolución hacia las interfaces gráficas de usuario GUI (1980-1995)

En la década de los ochenta los ordenadores personales se hicieron más habituales para el
gran público, aunque las interfaces gráficas de usuario tardarían un poco en llegar. En esta
fase se empiezan a utilizar las interfaces llamadas WIMP ( windows, icons, menus and
pointer) , es decir, interfaces que disponen del movimiento de un puntero por la pantalla y
que tendrán ventanas, iconos y menús. Se puede considerar que hasta el momento se
trabajaba en dos dimensiones con las interfaces con líneas de instrucciones y, a partir de
la aparición de las interfaces WIMP, se puede considerar que se utiliza una tercera
dimensión que permite trabajar con más de una ventana (y aplicación) a la vez,
superponiendo una encima de la otra.

WIMP
Tipo de interfaz, acrónimo de windows, iconos, menús and
pointers, es decir, 'ventanas, iconos, menús y punteros'.

Las GUI permiten a los usuarios trabajar directamente en aquellas funcionalidades que les
interesan, y deben desplazarse hasta otras interfaces para localizar y poder utilizar otras
funcionalidades. Ofrecen una interacción con los usuarios que se basa en la manipulación
directa, ofrece los elementos importantes para el usuario en cada interfaz y permite su
manipulación.

Las primeras interfaces gráficas hemos visto que empezaron a desarrollarse a mediados
de los años setenta (Xerox), pero hasta mediados de los ochenta no las desarrollaron
masivamente otras empresas, lo que provocó el uso más generalizado de los
ordenadores. En el siguiente cuadro podemos ver la evolución de las interfaces y algunos
sistemas operativos que se fueron desarrollando:

 1981: Xerox Star

 1984: Apple Macintosh
 1985: Commodore Amiga, Microsoft Windows 1.0
 1990: Microsoft Windows 3.0
 1992: IBM HUESO 2 2.0
 1995: Microsoft Windows 95
 1998: KDE/ Gnome
 2001: Apple Mac HUESO X 10.0, Microsoft Windows XP

Interfaces gráficas de usuario no basadas en instrucciones (1996-2001)

A partir del año 1995 existe un cambio muy importante en el uso de las interfaces de
usuario. La aparición de sistemas operativos que interactúan con los usuarios de forma
única y completa con GUI convirtió las interfaces en un elemento más de consumo y
generalizó más aún el uso de los ordenadores personales dentro de las casas y sistemas
informáticos en las organizaciones.

Este gran cambio supuso un cambio en la forma de desarrollar aplicaciones para los
nuevos sistemas operativos gráficos, y permitió también investigar y evolucionar mucho
más en este campo.

Las interfaces gráficas de usuario siguen utilizando elementos de las interfaces del estilo
WIMP, pero cada vez más evolucionados, con nuevos elementos y funcionalidades. Una
de las novedades más importantes es la aparición de elementos multimedia que se
pueden añadir a las interfaces, como sonidos (ya sean alertas de que avisan al usuario de
una mala interacción o un sonido de fondo que se puede escuchar durante el
funcionamiento de la interfaz).

Estos elementos pueden considerarse, utilizando el término con comillas, una

“dimensión” más para añadir a las dos dimensiones que tenían las interfaces de estilo
WIMP, aunque no se puede hablar propiamente de una tercera “dimensión”, los
elementos que se añaden de tipo multimedia, sonido o interpretación de voz o realidad
virtual es hacia dónde empezaron a evolucionar las interfaces.

En la figura 1.9 puede verse un ejemplo de sistema operativo con un entorno WIMP. El
sistema operativo del ejemplo se llama Haiku, un proyecto de código abierto desarrollado
en C++ que desea recrear el sistema operativo BeOS.

Figura 1.9 Ejemplo de interfaz gráfica no basada en instrucciones

Interfaces gráficas de usuario interactivas (2002-ahora)

Las interfaces gráficas que nos encontramos actualmente (y la evolución hacia las que nos
encontraremos en el futuro) van encaminadas a utilizar aún más dimensiones y otras
evoluciones.

La primera nueva “dimensión” que se incorporó fue la de utilizar elementos

multimedia. En algunos casos por necesidad y en otros para investigar hacia una evolución
que haga aún más sencillas y útiles las interfaces. Un elemento multimedia podrá ser la
incorporación de imágenes en las interfaces, sonidos o animaciones. Por esta razón se
podría considerar una tercera "dimensión" el concepto de tiempo (las animaciones
utilizarán un tiempo estipulado para que se pueda completar) o incluso una cuarta
"dimensión" con el concepto de comunicación verbal. Hoy en día las personas con
deficiencias visuales pueden utilizar una interfaz gráfica gracias a las indicaciones verbales
que puede ofrecer cada elemento de la GUIya dispositivos de entrada de datos específicos
para ellos.

Pero tampoco se dejará de lado en el futuro el aprovechamiento de las nuevas

posibilidades que puede ofrecer añadir una tercera dimensión real a las interfaces, gracias
también a la evolución de los dispositivos de salida más habituales, las pantallas, que
después de evolucionar a la tecnología de LED (también en las pantallas de ordenadores),
llegarán antes que tarde a la tecnología 3D, algo muy aprovechable por las interfaces para
explorar nuevas posibilidades.

1.4. Tipo de interfaces de usuario

Las interfaces gráficas pueden clasificarse en diferentes tipos en función de las
características y funcionalidades que tengamos en cuenta. Si se habla de tipos de
interfaces, podemos encontrar algunas que se utilizan en los diferentes sistemas
operativos.

Por ejemplo, existe un tipo de interfaces basadas en WIMP. WIMP muestra un tipo de
formato de interacción entre las personas o usuarios y los ordenadores (y sus interfaces).

Usuarios de interfaces
Habrá que tener en cuenta el nivel de conocimientos de los
usuarios de las aplicaciones y las interfaces a la hora de
diseñarlas. Hay usuarios novatos, usuarios intermedios y
usuarios expertos en el uso de aplicaciones e interfaces.
WIMP es un estilo de interacción que utiliza normalmente un ratón para controlar la
ubicación de un cursor que se irá desplazando por las interfaces. Otro elemento
importante del WIMP es la utilización de ventanas para presentar la información de forma
organizada. También se utilizan iconos y menús para ofrecer las funcionalidades
adecuadas a los usuarios.

A partir de este conjunto de elementos, las opciones de los menús y las que representan
los iconos serán activadas a partir de los punteros que se moverán con el dispositivo físico
(ratón), y se modificarán las informaciones para mostrar en las ventanas.

El estilo de interacción WIMP busca reducir el tiempo de aprendizaje que necesitará un

usuario para utilizar de forma óptima una interfaz gráfica facilitando el recuerdo de las
opciones que ofrece. A su vez será más sencilla de utilizar por parte de usuarios no
expertos.

Si dividimos las interfaces en función de la forma de interaccionar con los usuarios,

podremos encontrar tres tipos de interfaces:

 Las alfanuméricas, con las que habrá que trabajar con instrucciones, también
conocidas como las interfaces de línea de instrucciones (CLI). Este tipo de interfaz
será la única posibilidad de trabajar con estos sistemas, utilizando toda la pantalla
para este objetivo.

 Las interfaces gráficas de usuario (GUI) . Este tipo de interfaces permiten una
interacción más rápida, sencilla e intuitiva gracias al hecho de representar de
forma gráfica los elementos de las interfaces.

 Las interfaces desarrolladas para pantallas táctiles. Estas interfaces deben

adaptarse a las necesidades de un dispositivo de entrada y de salida a la vez, que
será una pantalla táctil, ya sus características específicas (utilizar iconos más
grandes, al no poder trabajar con la misma precisión que un ratón, o no utilizar
menús, por ejemplo).

 Las interfaces desarrolladas para dispositivos móviles. Dispositivos como teléfonos

móviles, PDA (personal digital assistant) u otras herramientas similares disponen
de sistemas operativos y tipos de interfaces adecuadas a sus necesidades
(pantallas de tamaño limitado, pantallas táctiles…).

Si nos fijamos en cómo se ha desarrollado la interfaz, los elementos con los que se ha
construido, podemos encontrar tres tipos:
  De hardware: se trata de interfaces que permiten la interacción entre el usuario y
el sistema informático mediante elementos de hardware, dispositivos como
pulsadores o lectores de barras u otros reguladores o instrumentos.

 De software: éstas son las interfaces desarrolladas para ordenadores que basan su
creación en desarrollo de software, mediante el cual se llevará a cabo toda la
interacción con los usuarios.

 De software-hardware: son interfaces que compartirán los dos tipos explicados

anteriormente. Por un lado, interfaces de software con algún elemento o
dispositivo de hardware necesario para recoger algún tipo de información
específica (por ejemplo, un lector de código de barras).

Otras formas de clasificar las interfaces son según la arquitectura de las aplicaciones y su
forma de trabajar:

API
Del inglés application programming interface, 'aplicación para
programar interfaces'. Facilitará la interacción entre distinto
software.

 Aplicaciones locales: interfaces Winforms. Estas aplicaciones se desarrollan para

trabajar en una única máquina un único usuario al mismo tiempo. Se habrá podido
desarrollar en diferentes lenguajes de programación y se podrá haber vinculado a
diferentes tipos de bases de datos, pero se encontrarán instaladas en una máquina
que será el único sitio desde el que se podrá utilizar. Este tipo de aplicaciones,
habitualmente, disponen de interfaces de tipo Winforms . Este nombre es el que
se da en las API incluidas en entornos integrados de desarrollo que facilitan la
creación de interfaces basadas en ventanas y otros elementos de tipo WIMP.

 Aplicaciones cliente-servidor. Este tipo de aplicaciones están basadas en el trabajo

en más de una máquina, en la que una hará de servidor y el resto (una o muchas
más) harán de clientes que acceden remotamente al servidor para acceder a los
datos o funcionalidades. Es necesario realizar una instalación en la máquina
servidor y otra instalación en cada una de las máquinas cliente. También se podría
dar el caso de trabajar con aplicaciones cliente-servidor en una única máquina. El
tipo de interfaces que se utilizan habitualmente para este tipo de aplicaciones
también serán las Winforms, aunque también se podrán utilizar interfaces de tipo
Web.

 Aplicaciones Web. Son un tipo específico de las aplicaciones cliente/servidor. Este

tipo de aplicaciones permite acceder a datos y funcionalidad a través de las redes
telemáticas, siendo el acceso más habitual el que se realiza a través de un
 navegador de Internet, que accede a un servidor web, donde se localizarán los
datos y la implementación de las funcionalidades. Las interfaces serán de
tipo Web, se ejecutarán las funcionalidades y la manipulación de datos en el
servidor y enviarán sólo las interfaces o datos para mostrar a los navegadores que
acceden de forma remota. En los últimos tiempos se está mejorando este sistema
para hacer que la transferencia de información sea cada vez más pequeña, e
implicar entonces la máquina cliente cada vez más.

Una última forma de clasificar las interfaces es a partir del software donde se
desarrollarán:

 Plataformas RichClient: Son herramientas de desarrollo de software que

contendrán todos los elementos necesarios para diseñar y desarrollar sin otra
necesidad una interfaz gráfica de usuario. Además, se podrán aprovechar de las
bibliotecas y elementos existentes. Esta forma de trabajar facilita el desarrollo y la
integración de los elementos y la aplicación desarrollada en su entorno. Se pueden
desarrollar aplicaciones locales y cliente/servidor. Ejemplos de entornos RichClient
son Visual Studio (de Microsoft) o, en código abierto, Eclipse o NetBeans.

 Plataformas ThinClient: Son herramientas de desarrollo de software que necesitan

otras herramientas para poder diseñar y desarrollar interfaces gráficas de usuario y
partes de software.

1.5. Elementos de las GUI. Propiedades y

características
Estudiada la evolución de las interfaces gráficas de usuario a lo largo del tiempo, podemos
observar cómo el denominador común ha sido llegar a ofrecer a los usuarios unas
interfaces con una usabilidad óptima. Para ello se ha establecido que las interfaces deben
cumplir una serie de características que, entre otras, serán:

Metáfora
Como sabéis, en literatura una metáfora consiste en sugerir
una idea haciendo referencia a otra cosa que el lector ya
conoce.

 Accesible e intuitiva: una interfaz debe ser intuitiva en su uso, mostrar con
claridad las funcionalidades que ofrece y facilitar llegar de manera sencilla y clara.
 Uso de metáforas: para identificar las funcionalidades que representan o los
objetivos que simularán, las interfaces deben utilizar metáforas que vinculen
sencillamente icono o imagen con funcionalidad u objetivo.

 Aprendizaje y uso fácil: las interfaces deben ser fáciles de usar y también de
aprender por parte de los usuarios más novatos.

 Consistencia: las interfaces deben seguir un mismo diseño y estructura entre ellas
y también con otras interfaces de aplicaciones análogas. También tendrán que ser
consistente cuando se ejecuten en diferentes entornos.

 Ofrecer el control de las interfaces: una interfaz debe saber entregar su control al
usuario que la utilizará.

 Anticipación: se tendrán que prever los posibles errores que pueda cometer un
usuario o las necesidades que pueda demostrar y ofrecer soluciones antes de que
aparezcan o controlándolos y ofreciendo soluciones.

 Legibilidad: tendrán que ser fácilmente interpretables y ofrecer una legibilidad

adecuada a los usuarios.

 Autonomía: un usuario no debe necesitar más información o ayuda que la que una
interfaz le ofrece o, la que puede encontrar a partir de las indicaciones que le
indicará esta interfaz.

 Reducir carga de memoria: para poder utilizar una interfaz más de una vez no será
necesario obligar a los usuarios a recordar la ubicación de las funcionalidades, sino
que éstas tendrán que ser sencillas de encontrar. Esto hará que no sea
indispensable memorizar muchas informaciones para aprender a utilizar una
interfaz determinada.

 Internacionalización de la interfaz: debe permitir ser entendida y utilizable por

usuarios de diferentes culturas e idiomas o bien haciéndola internacional con
iconos fácilmente reconocibles o con la posibilidad de seleccionar el idioma con el
que se va a querer trabajar.

 Valores iniciales: también conocidos como valores por defecto o estándar. Son los
valores que en las interfaces que llevan un formulario incorporado aparecerán
inicialmente seleccionados. Además, deben poder ser descartados de forma
sencilla.

 Ley de Fitts: una interfaz debe conseguir optimizar la ley de Fitts. Esta ley, en
ergonomía, moldeará el movimiento humano, haciendo una estimación del tiempo
que puede necesitar un ser humano para mover un puntero desde una zona de la
 pantalla a otra teniendo en cuenta variables como los objetivos, la distancia hasta
alcanzarlos y el tamaño que van a tener.

Las interfaces gráficas de usuario (GUI a partir de ahora) disponen de una serie de
elementos propios, comunes a muchas de las GUI desarrolladas, que dispondrán de unas
características y propiedades. Con este elemento se facilitará el desarrollo de las GUI de
las aplicaciones informáticas, ofreciendo la posibilidad de cumplir la mayoría de las
características definidas.

Para que el usuario pueda utilizar estos elementos, deberá utilizar alguno de los
dispositivos de entrada/salida que se han ido desarrollando en los últimos años. El teclado
del ordenador ha sido el dispositivo indispensable, como es hoy en día el ratón. Pero hay
otros como el touchpad (ratón táctil), la tableta gráfica, el trackball ( bola), los joysticks ,
las pantallas táctiles o los micrófonos. Como dispositivos de salida, aparte de la pantalla,
serán importantes los altavoces o los LED informativos.

Algunos de estos dispositivos serán indispensables para el correcto funcionamiento de

algunos de los elementos que ofrecen las GUI. Cada interfaz gráfica utilizará algunos
elementos en función de su entorno de trabajo, y no todos ellos tienen los mismos
elementos.

Algunos de los elementos de las GUI que se pueden encontrar de forma habitual en
muchas interfaces son:

 Ventanas
 Cuadros de diálogo
 Asistentes
 Menús
 Pestañas
 Barras de herramientas
 Iconos
 Entorno de trabajo
 Entornos de escritorio
 Controles
 Tipografía

Ventanas

Dentro de los diferentes elementos de las GUI, encontramos uno de los más importantes,
que son las ventanas (windows) . Las ventanas son, normalmente, bidimensionales y de
forma rectangular, y se ubicarán en el escritorio del sistema operativo. Cuando tenemos
abierta más de una ventana ubicada en un mismo escritorio, la que estará activa será la
que podremos ver, la que estará más cerca de nosotros, y el resto quedarán por debajo,
escondidas. Hay que decir que en los sistemas operativos más modernos empiezan a
utilizarse técnicas de transparencia para poder identificar algunos elementos de las
ventanas no activas, ubicadas por debajo de la ventana activa.

Las ventanas nos ofrecen la posibilidad de trabajar a la vez con distintos entornos, que
podrán ser de la misma aplicación o de diferentes aplicaciones.

Por ejemplo, trabajar con ventanas nos ofrece la posibilidad de tener dos documentos
ofimáticos abiertos (una hoja de cálculo y un documento de texto) e ir alternando la
información escrita en ambos documentos o ir copiando información de un documento a
uno otro. En la figura 1.10 se puede encontrar un ejemplo de trabajo con ventanas en un
entorno de trabajo con el sistema operativo Windows 7.

Figura 1.10 Sistema operativo Windows 7

En un caso de utilización de una misma aplicación informática, el hecho de trabajar con

ventanas nos permitirá tener más de una interfaz abierta al mismo tiempo, lo que nos
permitirá comparar la ejecución de dos funcionalidades o tener dos interfaces distintas
abiertas a la vez, una para consultar datos y otra para modificar otros datos.

Las ventanas nos permitirán ofrecer información al usuario de forma organizada. Nos
permitirá navegar por las funcionalidades de una aplicación visualizando la información de
forma jerarquizada. Esto permite gestionar y manipular la información de forma bastante
sencilla. Cada ventana puede ser manipulada como al usuario le interese, maximizándola
o minimizándola, moviéndolas o cerrándolas, navegando o haciéndolas mayores… Las
ventanas contendrán interfaces gráficas de usuario que incorporarán otras elementos
propios de las GUI, como menús, pestañas, barras de herramientas, objetos gráficos o
multimedia, que permitirán tanto la salida como la entrada de datos para que el usuario
pueda llevar a cabo varios procesos.
A lo largo de los años las ventanas han ido evolucionando, llegando hoy a lo que se podría
llamar un estándar de diseño de ventanas, con unos elementos básicos, de los que harán
uso todas las ventanas, como son: el marco, la cabecera de la ventana, el espacio del
contenido, la barra de desplazamiento y el pie de la ventana.

El marco ayuda a distinguir lo que pertenece a la ventana y lo que no. Además, sirve para
redimensionar los tamaños de la ventana. Como prácticamente todos los elementos,
podrá configurarse en la mayoría de los casos. La cabecera de la ventana es el lugar donde
se encontrarán situados los iconos que identifican y permiten llegar a las principales
funcionalidades de la aplicación que se ejecuta en esa ventana. El espacio de contenido
variará en tamaño en función de las dimensiones de la ventana. Será el sitio donde se
mostrará la información (imagen, contenidos multimedia, de texto…). La barra de
desplazamiento o scrollaparecerá en caso de que el espacio de contenido sea menor que
la información a mostrar. De esta forma el usuario se puede desplazar por los contenidos
no visibles inicialmente a la ventana. Finalmente, el pie de la ventana se utiliza para
ofrecer informaciones diversas relacionadas con la ventana o con la aplicación y los
contenidos que se mostrarán.

Cuadros de diálogo

Los cuadros de diálogo son un tipo de ventanas, también consideradas como ventanas
secundarias. Los cuadros de diálogo aparecen por encima del resto de ventanas pidiendo
una interacción concreta al usuario, que deberá contestarle. Esta interacción podrá ser
sólo informativa (un mensaje de ancianos o advertencia que habrá que confirmar que se
ha leído para poder continuar) o un requisito concreto de algún dato o de alguna acción
que habrá que contestar de manera concreta para poder continuar utilizando la
aplicación.

Un ejemplo de cuadro de diálogo lo encontramos al intentar finalizar una aplicación. Si ha

habido cambios en el documento con el que se ha trabajado o con los datos con los que se
ha abierto una aplicación, al intentar finalizar esta aplicación nos preguntará si la
queremos finalizar sin guardar los datos o si queremos hacerlo. Este cuadro de diálogo no
nos permitirá seguir trabajando con la aplicación hasta que no haya contestado su
mensaje.

En la figura 1.11 se muestra un ejemplo de un cuadro de diálogo generado por la

aplicación Mozilla Thunderbird, para manejar correo electrónico.
 Figura 1.11 Ejemplo de cuadro de diálogo

Asistentes

Los asistentes son ventanas que van apareciendo una detrás de otra hasta llegar a un
determinado objetivo. Como su nombre indica, asisten al usuario hasta completar una
funcionalidad, preguntando paso a paso todas las informaciones necesarias hasta
completarla correctamente. De esta forma el usuario no podrá olvidarse de introducir una
información o escogerá mal una opción.

Los asistentes son habituales en la instalación de software o ayuda en la utilización de una

funcionalidad muy concreta.

En la figura 1.12 se muestra un ejemplo de un asistente de instalación del software Mozilla

Thunderbird.

Figura 1.12 Ejemplo de wizard

Menús
Los menús son un elemento muy importante para las interfaces de usuario, puesto que
serán los encargados de mostrar todas las posibilidades de interactuar con la aplicación
informática.

Los menús desplegarán todo el conjunto de funcionalidades que tendrá el usuario a su

alcance. Cada opción de un menú dispondrá de un subconjunto de opciones, lo que
convierte a los menús en un árbol jerarquizado con un número de niveles que habrán
decidido los desarrolladores. Cuanto más niveles tenga, más complicado será que un
usuario llegue a una determinada funcionalidad.
Los menús se encuentran en un área determinada de la interfaz, normalmente justo
debajo del marco superior. La forma más habitual de seleccionar una opción de un menú
será utilizando el ratón. Haciendo clic sobre uno de los textos, se activará aquella opción y
se desplegarán todas las opciones relacionadas. Sin embargo, las aplicaciones deben
poder ofrecer menús accesibles para usuarios que no dispongan de ratón, con la
posibilidad de moverse por los menús con un teclado utilizando la combinación de la tecla
Alt con la letra subrayada para llegar a una opción determinada.

En la figura 1.13 se muestra un ejemplo de un menú del software Mozilla Thunderbird.

Figura 1.13 Ejemplo de menú, de Mozilla Thunderbind

Como puede verse en la imagen, muchos menús indican las combinaciones de teclas que
permiten llegar a la misma funcionalidad de forma más rápida. Un usuario habitual de una
aplicación memorizará las funcionalidades más indispensables para él. En ocasiones, en
vez de la combinación de teclas puede haber otras informaciones gráficas que
complementen la información en formato de texto que identifica una funcionalidad, o
bien indicadores de cómo se encuentra una opción (si se puede ejecutar o no o si está
activada o no) o la agrupación a la que pertenece.

Finalmente, hay que tener presente la evolución de los menús. En las últimas aplicaciones,
como el paquete de ofimática Office 2007 o Office 2010, los menús han evolucionado
hacia una muestra de funcionalidades por medio de iconos, minimizando la presencia del
texto. Esta evolución puede llevar a la confusión a los usuarios acostumbrados a una
forma determinada de trabajar. Se puede ver un ejemplo de menú de Office 2007 en
la figura 1.14.

Figura 1.14 Otro ejemplo de menú, de Microsoft Office 2007

Existen muchos tipos de menús, dependiendo de su entorno de ejecución o de la tipología

de aplicación a la que pertenece la interfaz donde se encontrará el menú. Los menús más
habituales que podemos encontrar son los menús contextuales, los menús de navegación
y los menús jerárquicos:

 Menús jerárquicos: menús representados en forma de árbol, con un número de

niveles horizontal (opciones del menú) y un número determinado de niveles
verticales (hasta dónde podrá llegar el usuario navegando por el menú). Las
opciones que se encuentren a un nivel tendrán correspondencia entre ellas. Son
utilizados de forma habitual en sistemas operativos y aplicaciones de toda índole.

 Menús contextuales: no se encontrarán visibles en la interfaz hasta que el usuario

provoque su activación. Son menús que se abrirán en una nueva ventana flotante,
que variarán en función de la ubicación del ratón en el momento de llamarlos
(normalmente haciendo clic con el botón derecho del ratón). De esta forma, será
diferente el menú que aparecerá si se hace clic sobre el marco de la ventana o si se
hace clic sobre el área de trabajo.

 Menús de navegación (scrolls): se pueden considerar una evolución de los menús

jerárquicos. Se trata de un tipo de menú que muestra sólo las opciones más
utilizadas de los menús, ocultando el resto, pero dejando visible un pequeño icono
que, al ser seleccionado, muestra todo el resto de las opciones del menú. Esto nos
da la sensación de poder navegar por el menú y sus items. Este tipo de menú se
utiliza cuando son muchas las opciones que se quieren mostrar en una interfaz de
usuario.
Existen otros tipos de menús. Uno que habrá que tener en cuenta por su importancia es
el menú de inicio. Este menú lo desarrolló Microsoft para el sistema operativo Windows
95 y ha evolucionado hasta la fecha en toda la familia de sistemas operativos de Windows
y en otros sistemas operativos que lo han adaptado, como, por ejemplo, GNU/Linux. Se
trata de un menú jerárquico que ofrece el acceso a muchas de las funcionalidad y
opciones de configuración del sistema operativo, llegando a la mayoría de sus elementos y
aplicaciones.

Pestañas

Las pestañas de propiedades son un elemento que permite mostrar un conjunto de datos
o funcionalidades relacionadas entre sí de forma agrupada. En una misma ventana se
podrán mostrar los contenidos de tantas ventanas como se desee, separándolas por
pestañas, que tendrán que tener un título y contener informaciones relacionadas. Se
puede ver un ejemplo en la figura 1.15.

Figura 1.15 Ejemplo de pestañas de propiedades

Barras de herramientas

Las barras de herramientas facilitan el acceso a algunas funcionalidades mediante un

icono. Todas las funcionalidades ofrecidas en las barras de herramientas se podrán
encontrar desarrolladas en los menús, pero no todas las opciones que ofrecen los menús
se podrán encontrar en las barras de herramientas.

Una vez seleccionadas aquellas funcionalidades que se utilizarán más habitualmente se

identificará cada una con un símbolo que represente esa funcionalidad. Las
combinaciones de teclas son otro método para acceder a estas opciones de los menús.
De esta forma se limitará a una sola acción (un único clic) el acceso a las principales
funcionalidades, lo que las hace mucho más sencillas y accesibles.

En la figura 1.16 puede verse un ejemplo de una barra de herramientas.

Figura 1.16Ejemplo de barra de herramientas, de Mozilla Thunderbird

Iconos

Los iconos son imágenes que representan funcionalidades o acciones que se podrán
realizar haciendo un clic encima. Entre otros sitios, en las interfaces gráficas de usuario,
son elementos que se utilizan en las barras de herramientas.

Podrán identificar también archivos, carpetas, otras aplicaciones o dispositivos de un

sistema informático. Es necesario que los iconos sean muy fácilmente identificables por
parte de los usuarios, o, en su defecto, que estén muy bien informados de sus
funcionalidades. En caso contrario el usuario deberá memorizar su significado, lo que no
cumpliría uno de los principios de las GUI, el de no obligar a memorizar información al
usuario para su correcta utilización.

Se trata de un elemento muy importante en las interfaces de usuario, puesto que hará
más rápido, atractivo y sencillo el uso de las aplicaciones más que si las informaciones que
se ofrecen al usuario son en formato texto. Además, en el caso de aplicaciones
internacionales, los iconos pueden ser los mismos en distintas culturas y, en cambio, las
traducciones pueden ser mal entendidas algunas veces.

Entorno de trabajo

El entorno de trabajo debe considerarse como un elemento más de una interfaz gráfica de
usuario. Es un elemento más de las interfaces, como los menús, las barras de
herramientas o muchos otros.

Se trata de la ubicación principal de las informaciones con las que se interactúa con el
usuario, donde se mostrará el texto, imágenes o datos que el usuario habrá solicitado
mediante los menús.

En la figura 1.17 se puede ver un ejemplo de un entorno de trabajo con el sistema

operativo Mac OS.
 Figura 1.17 Ejemplo de un entorno de trabajo, de Mac

Tipografías

El texto que se va a utilizar en la comunicación con los usuarios dispondrá de varias

opciones tipográficas para ser mostrado. La cuidadosa elección de estas tipografías
también ofrecerá un mensaje específico al usuario y es un elemento más a tener en
cuenta en el diseño y desarrollo de las interfaces.

Se conocen como tipografía digital los tipos de letra desarrollados exclusivamente para
pantallas, para su uso en interfaces gráficas de aplicaciones informáticas. De esta forma,
Microsoft tiene un sistema propio de tipo desarrollado, tanto para su sistema operativo
como para las aplicaciones que funcionarán encima. Apple también ha dedicado un
importante esfuerzo a este tema, y desarrolló las primeras fuentes exclusivas para
pantallas de sistemas informáticos.

Otras características a tener en cuenta de las tipografías digitales serán la intensidad y los
colores utilizados, así como los diferentes tamaños de letra. Una correcta elección de
todas estas variables puede influir mucho en la apreciación por parte del usuario de la
interfaz desarrollada.

Controles

Existen muchos tipos de componentes que se pueden utilizar en las interfaces gráficas de
usuario. Un tipo de componentes son los controles. Éstos proporcionan funciones a la
interfaz de usuario que permitirán muchas más posibilidades en las interacciones entre
interfaz y usuario.
Un tipo de control son los botones, objetos de control que dan la opción de introducir un
dato de confirmación en el sistema. Existen diferentes tipos de botones:

 Botones en forma de radio (radio buttons): son elementos que se utilizan en

formularios o en menús para dar a seleccionar al usuario una opción entre una
lista. Estos botones en forma de radio son botones redondos que podrán ser
escogidos por medio de acciones de usuario.

 Botones de confirmación (check box): botones de forma cuadrada muy parecidos

a los de radio, también para poder seleccionar opciones de una lista de
opciones. La diferencia con los botones en forma de radio será que en los botones
de confirmación se podrá seleccionar más de una opción entre las mostradas, y en
cambio en los botones en forma de radio sólo se puede seleccionar una.

 Botones de relieve: este tipo de botones imita un botón de un dispositivo físico

que simula un volumen, dando así la posibilidad de tener varios estados (activado
o no, seleccionado o no), además de poder incluir texto con la definición de la
funcionalidad que va a representar.

Además de los botones existen muchos otros tipos de componentes, como pueden ser los
elementos de entrada de texto o los elementos de información de salida, como la barra de
progreso o la barra de estado, o los elementos compuestos, como las barras de tareas o
el combo box.

2. Herramientas propietarias y libres de edición de

interfaces
El desarrollo de una interfaz gráfica de usuario desprenderá mucho del lenguaje de
programación que se utilice y de su entorno de desarrollo.

Generaciones de lenguajes
Lenguajes de tercera generación: C, C++, C#, Java, Delphi, …
Lenguajes de cuarta generación: Visual Basic .NET, PL-SQL, PHP, ASP,
…

Será muy diferente (y se necesitarán herramientas de software diferentes) desarrollar una

aplicación informática con un lenguaje de programación de tercera generación, en la que
se trabajará con bibliotecas para poder tener acceso a un entorno gráfico, o trabajar con
un lenguaje de cuarta generación, con componentes gráficos y de acceso a datos
incorporados.
Otra diferencia importante será desarrollar una aplicación para un entorno Web o
desarrollarla por un entorno de ventanas (Winforms). Los componentes, lenguajes,
metodología de trabajo y posibilidades serán diferentes en ambos casos.

Las herramientas de creación y edición de interfaces son un tipo de

software que ayudará al programador a desarrollar interfaces que
sigan las indicaciones establecidas en la fase de diseño a partir del
análisis de las necesidades. Deberán tener en cuenta todas las fases
de desarrollo de un proyecto informático.

Este tipo de software deberá tener en cuenta muchas disciplinas, puesto que la creación
de una interfaz de usuario engloba conceptos de diseño gráfico, de lingüística, de
ergonomía, de sociología, de programación y tecnología informática y de psicología
cognitiva, entre otros.

Hay muchas herramientas diferentes en el mercado en función del lenguaje de

programación que se utilice, en función del entorno de desarrollo o de si la herramienta es
de propiedad o es libre.

Para conseguir desarrollar de forma sencilla las interfaces, las herramientas incorporan
varios elementos preprogramados que facilitan mucho la creación de interfaces gráficas
complejas de una forma sencilla. Así será muy sencillo añadir a una interfaz un menú o un
icono, tan sencillo como desplazar este elemento al panel principal donde se desarrolla la
interfaz, y modificar posteriormente sus propiedades. Estos elementos pueden ser para
fomentar la iteración con el usuario (ayudas, actualización de datos, acciones sobre
cursores…) o elementos para configurar las interfaces (iconos, ventanas, controladores de
dispositivos, menús…). Además, se pueden gestionar los posibles errores por parte del
usuario al utilizar la interfaz, procesar excepciones.

Otras características que hay que tener en cuenta de las herramientas para la creación y
edición de interfaces gráficas es que éstas son tipos de herramientas del tipo WYSIWYG,
es decir, se podrán observar de forma directa los cambios en el diseño y desarrollo de las
interfaces. Lo que hacen es lo que verá el usuario final de las aplicaciones, y se pueden ver
los resultados de forma inmediata.

A continuación, se enumeran algunas de las muchas herramientas de desarrollo de

interfaces existentes:

 Microsoft Visual Studio: Se trata de un entorno de desarrollo integrado

desarrollado por Microsoft para sistemas operativos Windows. Es de pago. Soporta
los siguientes lenguajes de programación: Visual C++, Visual C#, Visual J#, ASP.NET
y Visual Basic .NET.
  Eclipse: Desarrollado inicialmente por IBM. Actualmente desarrollado por una
fundación sin ánimo de lucro, lo que hace la herramienta gratuita y de código
abierto. Soporta, entre otros, los lenguajes Java, C++, Perl y PHP. Es
multiplataforma.

 IDE NetBeans: Desarrollado inicialmente por Sun, que actualmente patrocina los
proyectos de desarrollo. Herramienta de código abierto y gratuita. Soporta, entre
otros, los lenguajes Java, JSP, C++ y PHP. Es multiplataforma.

 MonoDevelop: Entorno de desarrollo gratuito y de código abierto. Actualmente

patrocinado por Novell. Diseñado para C#, también soporta Java o Boo. Es
multiplataforma.

 SharpDevelop: Entorno de desarrollo de código abierto. Para los lenguajes de

programación C#, Visual Basic .NET y Boo. Para sistemas operativos Windows. Para
desarrolladores que no quieren o no pueden utilizar Microsoft Visual Studio.

2.1. Herramientas de diseño de Interfaces

Las interfaces gráficas están llenas de elementos que ofrecen muchas posibilidades para
interactuar con los usuarios. Pero hay que echarle un vistazo desde el punto de vista de
los desarrolladores de interfaces gráficas. ¿Cómo podrá un desarrollador elegir cuáles son
los iconos que querrá utilizar para identificar diferentes acciones? ¿Cómo seleccionará la
forma más adecuada de interactuar en cada momento? ¿Cuáles son las herramientas que
podrán servir para conseguir esos objetivos?

Hasta no hace muchos años desarrollar una interfaz gráfica de usuario era una tarea
bastante compleja. Actualmente existen muchas herramientas que automatizan este
proceso, y hacen, incluso, propuestas automáticas de interfaces a partir de las tablas de
una base de datos. Con pequeñas modificaciones, el desarrollador dispondrá de una
interfaz que cumpla los objetivos marcados.

Pero todavía existe la posibilidad de programar como se hacía hace años, utilizando la
programación por código, de forma parcial o completa. Es muy difícil encontrar, hoy en
día, gente que aún desarrolle interfaces gráficas de usuario a partir de un lenguaje de
programación. Sin embargo, si es más habitual utilizar herramientas de diseño de
interfaces y, a partir de ubicar manualmente los elementos en las ventanas, manipular
posteriormente el código que configurará y gestionará las acciones de estos elementos. La
programación visual consiste en diseñar las interfaces colocando los elementos en los
formularios y configurando sus propiedades y acciones sin tener que implementar una
línea de código.
Muchas de estas herramientas de diseño y desarrollo de interfaces de usuario tienen
algunos elementos comunes (o muy similares), como puede ser disponer de un área de
diseño, una paleta de componentes, editores de propiedades o diferentes contenedores.
Para explicar algunos de estos elementos que son similares en sus características y uso se
utilizará como herramienta para los ejemplos la versión 2010 del software Visual Studio,
de Microsoft.

2.2. Elementos de las herramientas de desarrollo de

interfaces
Al iniciar el trabajo con una herramienta de diseño y desarrollo de interfaces gráficas es
necesario identificar y entender muy bien el entorno de trabajo, es decir, bajo qué sistema
operativo y condiciones se ejecutará.

En la figura 1.18 se puede ver el entorno de trabajo de Visual Studio 2010 al iniciarlo con
un proyecto en Visual Basic para una aplicación desarrollada con Windows Forms. Este
entorno de trabajo es muy similar al que puede encontrarse en cualquier otra
herramienta de desarrollo de interfaces, como Eclipse o Mono.

En el momento de escoger la posibilidad de trabajar con un proyecto que permite crear

interfaces gráficas el desarrollador dispondrá de diferentes elementos que facilitarán
mucho su labor. Como puede verse en la figura, en la parte central se encuentra el área
de diseño, donde quedará desarrollada la interfaz que se diseñará. Esta área es un espacio
rectangular dentro de la que se irán añadiendo los elementos de la interfaz gráfica de
usuario, como pueden ser texto, imágenes o componentes más complejos como controles
u otros paneles. El área de diseño dispone de pestañas que permitirán trabajar con más de
una interfaz al mismo tiempo. A la izquierda se dispone de la ventana con el cuadro de
herramientas ya derecha se encuentra la ventana con las propiedades del componente
con el que se está trabajando en un momento determinado.

Figura 1.15 Herramienta Visual Studio 2010

Cabe destacar también de este entorno de trabajo la parte superior, con el menú y las
barras de herramientas, que permiten acceder a las funcionalidades que ofrece el entorno
de desarrollo de aplicaciones e interfaces.

De este modo, como resumen, se pueden identificar los siguientes elementos en el

entorno de trabajo de una aplicación de diseño o de desarrollo de interfaces de usuario:

 Menús: Es donde se localizarán todas las funcionalidades que ofrece el

software. Se pueden definir acciones para un conjunto de teclas y configurar qué
funcionalidad estarán más accesibles. En la figura 1.18 puede verse representado
por el número 1.

 Menú de barra de herramientas: Conjunto de iconos, en la parte superior de la

interfaz, normalmente justo debajo del menú. Cada icono representa una acción a
desarrollar, a la que también se podría llegar por medio del menú en formato de
texto. En la figura 1.18 puede verse representado por el número 2.

 Área de diseño: Ocupa la parte central. Contendrá los paneles en los que se irán
ubicando los elementos que se quieren añadir a la interfaz. Dispondrá de pestañas
para poder trabajar con más de un panel o interfaz al mismo tiempo. En
la figura 1.18 puede verse representado por el número 3.

 Cuadro de herramientas: Contiene todos los elementos que podremos añadir a los
paneles que se estén desarrollando en el área de diseño. Seleccionando y
arrastrando cada elemento en el área de diseño se podrá diseñar la interfaz que
queremos. En la figura 1.18 puede verse representado por el número 4.

 Hoja de propiedades: Es una ventana en la parte derecha del área de diseño que
muestra las propiedades o características del elemento seleccionado. Estos valores
de las propiedades se podrán modificar según interese para conseguir el
cumplimiento de los objetivos del diseño de las interfaces. En la figura 1.18 puede
verse representado por el número 5.

 Asistente: Ofrecen al desarrollador de la interfaz la posibilidad de crear una

interfaz a partir de plantillas o de una serie de cuadros de diálogo que irán
preguntando las características que desea que tenga para ofrecerle una propuesta
de interfaz prácticamente definitiva.

De hecho, todos estos elementos que componen una aplicación de desarrollo de

interfaces son los mismos que se pueden utilizar para crear interfaces para las
aplicaciones a desarrollar.
 IDE
Acrónimo del ángulos integrated development environment, es decir,
'entorno de desarrollo integrado'.

Otro ejemplo de IDE es Eclipse, desarrollado por IBM para desarrolladores de Java. Como
puede verse en la figura 1.19, su interfaz es muy parecida a la de Visual Studio,
prácticamente con los mismos componentes.

Figura 1.19 IDE Eclipse

3. Componentes: características y campos de aplicación

Borrado
Cuando se habla de interfaces de usuario normalmente se utiliza un vocabulario que
incluye palabras como contenedores, controles o componentes. Es necesario diferenciar
entre estos términos para poder entender qué será lo más necesario en cada caso, en la
creación de una interfaz gráfica.

Tiempo de diseño/ejecución
Tiempo de diseño: Cuando se están desarrollando las interfaces de
una aplicación informática.
Tiempo de ejecución: Cuando el usuario está ejecutando la aplicación
y está interactuando.

¿Qué es un componente? Se trata de un objeto que podrá reutilizarse, que permite

interactuar con otros objetos y proporciona el control sobre determinados recursos
externos en tiempo de diseño. Los componentes se podrán diseñar y configurar, lo que
hace que se pueda utilizar en una herramienta tipo IDE. Un componente podrá añadirse al
cuadro de herramientas, se podrá seleccionar y arrastrar hacia un panel o formulario y se
podrán modificar sus características. Todas estas acciones se podrán realizar en tiempos
de diseño. Los componentes podrán ser visibles o no visibles para el usuario en la
interfaz. Un componente que se hace no visible para el usuario ofrece algunas
posibilidades para el desarrollador que multiplican sus posibilidades a la hora de crear una
interfaz.

Algunos ejemplos de componentes simples: botones, listas desplegables, barras de

progreso, etiquetas, botones de radio… Algunos ejemplos de componentes complejos:
menús, tablas, árboles, cuadros de diálogo…

¿Qué es un control? Algunos autores consideran un control como un tipo de

componente. Otros indican que son objetos similares a los componentes, al poder
diseñarse y configurarse. Lo que sí está claro es que un control es un objeto que
proporciona una interfaz al usuario, y permite la interacción entre usuario y aplicación
para intercambiar información. Algunos ejemplos de controles pueden ser los botones, los
cuadros de listas, los cuadros de edición…

¿Qué es un panel? Es un control que servirá para contener otros controles. Es una
herramienta adecuada para ocultar o mostrar un determinado tipo de controles. Este tipo
de control podrá tener barras de desplazamiento del control, además de poder
personalizar sus características y propiedades de presentación. Un tipo de contenedor
será una barra de herramientas.

¿Qué es un formulario? Es un tipo de componente que será como una ventana que el
desarrollador, en tiempo de diseño, podrá utilizar para ubicar otros componentes o
controles. Un formulario puede existir por sí solo o puede formar parte de un conjunto de
formularios. Como ejemplos de formulario se tienen las ventanas con o sin marco, los
cuadros de diálogo…
Una vez aclarados ciertos conceptos veremos algunos ejemplos de los componentes que
forman una interfaz gráfica de usuario.

Existen muchos elementos y de muchos tipos, que se podrán utilizar para desarrollar
interfaces de usuario. Además, se podrán agrupar, crear otros nuevos e intercambiarlos
entre diferentes herramientas de diseño de interfaces. En la tabla .1 se muestran algunos
de los principales elementos (componentes y controles) que podremos encontrar iguales
o muy similares en diversas herramientas de diseño de interfaces o entornos integrados
de desarrollo de software.

Componente Nombre Descripción

Ofrece la posibilidad de ubicar en el formulario una etiqueta
Label con un texto determinado, que no podrá ser manipulado por
el usuario de la aplicación.
Son botones que ejecutarán una funcionalidad cuando se
Button haga clic o doble clic sobre ella. Contendrán un texto
indicativo de la acción que representan
Permite seleccionar una imagen o gráfico de un archivo
previamente existente. Este archivo podrá ser de los
PictureBox
diferentes tipos de archivos de imágenes existentes (jpg, gif,
bmp, ico…).
Ofrece la progresión en la ejecución de una funcionalidad
determinada que se está ejecutando (por ejemplo, la
Progress Bar
actualización de muchos datos en una base de datos). No
debe confundirse con HScrollBar y VScrollBar.
Son un conjunto de opciones agrupadas que ofrecen
diferentes alternativas al usuario para poder escoger una. Las
RadioButton opciones que se ofrecen serán mutuamente excluyentes. Si
se quiere poder escoger más de una opción a la vez, es
necesario utilizar un CheckBox.
Alternativa a los RadioButtons. Conjunto de opciones con un
espacio en forma de cuadrado a la derecha para poder
CheckBox
seleccionarlas. Se podrá seleccionar más de una opción al
mismo tiempo.
Este control muestra las opciones en formato de lista. El
ListBox
usuario podrá seleccionar una o más de las opciones.
Puede mostrar información en formato texto escrita en
TextBox tiempo de diseño y recoger información introducida por el
usuario en tiempo de ejecución.
ComboBox Combina un control tipo TextBox y uno tipo ListBox. Ofrece
 una lista de opciones, de las que se podrá seleccionar una o
introducir un texto en el cuadro de edición.
Tabla 1.1: Algunos elementos del diseño de interfaces

3.1. Ventana de cuadro de componentes

La ventana del cuadro de herramientas contiene los componentes y otros elementos que
se pueden utilizar en las interfaces que se desarrollan en el área de diseño. Para añadir un
componente es necesario seleccionarlo con el ratón y arrastrarlo hasta el área de diseño
dentro de un formulario.

Existen varios grupos de controles disponibles; el número depende del tipo de diseñador
activo en el editor. Cuando se está diseñando un formulario tipo Windows Forms,
aparecen las herramientas necesarias para trabajar con formularios Windows, que serán
diferentes de los componentes para trabajar con formularios Web y que, a su vez, están
agrupados por categorías de controles.

En la figura 1.20 (a) se pueden observar algunos de los tipos de componentes más
habituales en formularios de tipo Windows Forms. Estos componentes se agrupan en
contenedores, menús y barras de herramientas, impresión, cuadros de diálogo y datos,
entre otros.

En la figura 1.20 (b) se puede ver el detalle de algunos de los controles más habituales que
se utilizan: Los botones, las checkbox, las etiquetas, las listbox, las imágenes…

Esta ventana del cuadro de herramientas será posible personalizarla según las
necesidades del desarrollador. Es posible crear nuevos grupos o añadir componentes
adicionales a un grupo existente. Se pueden añadir otros componentes .NET o controles
ActiveX de los utilizados en aplicaciones que no son .NET.
 Figura 1.20 Cuadro de Componentes (a) y Ventana de cuadro de controles (b)

3.2. Otros contenedores (paneles)

Algunos controles Windows Forms del entorno de trabajo permiten funcionar como
contenedores de otros controles o componentes: se trata de los objetos Form, GroupBox
y Panel, que heredan de la clase ContainerControl. Para incluir controles dentro de un
contenedor, simplemente es necesario seleccionar uno de estos elementos y dibujar o
arrastrar un control dentro del contenedor. En la figura 1.21 se pueden observar los
contenedores que se encuentran preinstalados en Visual Studio 2010.

Clase
En un contexto de POO (programación orientada a objetos), una clase
es un conjunto de propiedades y métodos relacionados con un
significado propio.

Herencia
 En un contexto de POO es un tipo de relación entre clases, en el que
una deriva de una segunda, lo que permite la reutilización y extensión
del software. Permite la creación de una jerarquía de clases.

La selección de varios controles dentro de un contenedor debe realizarse siempre

utilizando las teclas Ctrl o Mayús.

Los controles agrupados dentro de un contenedor se moverán, copiarán o pegarán todos

juntos cuando se aplique una acción al contenedor. Estos controles agrupados se borrarán
cuando el contenedor se elimine.

Figura 1.21 Otros contenedores

En la figura 1.22 puede verse un ejemplo en el que tenemos un texto con dos opciones
creadas como RadioButtons. Todos estos controles se han agrupado y se han convertido
en uno solo.

Figura 1.22 Controles agrupados

 3.3. Añadir/eliminar componentes en la interfaz de
usuario
El cuadro de herramientas permite observar cuáles son los componentes que se podrán
utilizar para añadirlos al formulario que se desarrolle. En el caso de programación de
Windows Forms, la plantilla de un proyecto inicial crea por defecto un formulario vacío
sobre el que dibujaremos los controles.

La forma de añadir un nuevo control a un formulario es:

 Tener abierto un formulario donde se desea ubicar el control en el área de diseño.

 Abrir la ventana con el cuadro de herramientas.
 Seleccionar el grupo y el control o componente que deseamos.
 Hacer clic sobre el formulario o arrastrarlo hasta el formulario en el que se quiera
introducir para que forme parte de esa interfaz, como puede observarse en
la figura 1.23.
 Además, le podremos dar las medidas que queramos (figura 1.23).

En la figura 1.23 se puede ver cómo se añade un control tipo Button al formulario Form1.

Figura 1.23 Añadir componente

De forma alternativa, es posible incluir un control haciendo doble clic sobre el control o
componente que queremos en la ventana del cuadro de herramientas. En este caso, si
antes de realizar el doble clic sobre el control se encuentra seleccionado un formulario u
objeto virtual en el área de diseño, el control se posicionará en la parte superior izquierda
del mismo; si está seleccionado otro control, el nuevo control le posicionará sobre éste.
Para desplazar la mayoría de los controles simplemente es necesario seleccionarlos y
arrastrarlos con el ratón cuando el cursor toma la forma de una cruceta. Sin embargo,
para desplazar algunos controles es necesario utilizar el tirador que tienen en forma de
cruz. En la figura 1.24 puede verse un ejemplo de la acción de desplazamiento de un
control.
 Figura 1.24 Desplazar un componente

Para eliminar un control o componente ya ubicado en un formulario basta con

seleccionarlo y utilizar la tecla Supr para suprimirlo, de esta forma se pierde el diseño y la
configuración del objeto.

Existen controles que no son visibles. En versiones anteriores de Visual Studio, estos
controles también aparecían sobre el formulario. En Visual Studio .NET, estos controles
(como los cuadros de diálogo, el control ToolTip, o el control Timer) se dibujan sobre el
formulario, pero aparecen en la bandeja de componentes situada debajo del formulario.

Figura 1.24 Componente invisible

En la figura 1.25 se puede ver un ejemplo de controles invisibles de tipo ToolTip y la forma
de trabajar en ellos.

3.4. Ubicación y alineación de componentes.

Modificación de propiedades
Una vez colocados los componentes en los formularios es necesario ubicarlos de forma
que el usuario pueda entender las funcionalidades que ofrecen y disponerlos en una
distribución agradable y sencilla. El entorno de desarrollo dispone de herramientas que
permiten dar mayor precisión a la colocación de los controles mediante las características
de alineación, que aparecen en la opción “Alinear” del menú “Formato” o en la barra de
herramientas de Diseño (se puede seleccionar esta barra de herramientas u otra
cualquiera haciendo clic derecho en una zona de menús).

La mayor parte de estas opciones de alineación sólo se pueden utilizar cuando existen
varios controles seleccionados. En estos casos, la operación se realizará sobre el último
control seleccionado. El primer control seleccionado será el que actúe como control
primario y los demás controles se alinearán a partir del primero.

Para seleccionar varios controles se pueden ir marcando mientras se mantiene pulsada la

tecla Ctrl o Mayús.

Algunas opciones de alineación disponibles son:

Icono Descripción
Alinea de los controles por debajo.
Centra los controles verticalmente.
Alinea los controles por arriba.

Alinea los controles a la izquierda.

Alinea los controles a la derecha.

Centra los controles horizontalmente.

La modificación de las propiedades de los componentes, formularios o controles, por

ejemplo, es una tarea necesaria e importante para poder configurar estos objetos en
función de los objetivos del diseñador de las interfaces. Estos atributos o propiedades se
pueden modificar mediante código (en tiempo de ejecución) o mediante la ventana
“Propiedades” (en tiempo de diseño).

La ventana Propiedades proporciona un acceso a las propiedades accesibles en tiempo de

diseño. Como se puede ver en la figura 1.26, esta ventana muestra en la parte superior
una lista de las clases disponibles en un entorno dado (por ejemplo, si estamos en el
diseñador de un formulario, sólo mostrará los controles de este formulario) y debajo una
lista de las propiedades de la clase, indicando aquellas que se pueden modificar y las que
no, y marcando estas últimas en gris.
 Figura 1.27 Propiedades de un componente

Para modificar las propiedades de un control en tiempo de diseño se utiliza la ventana

“Propiedades”. Primero habría que seleccionar el control de la lista que aparece en la
parte superior de la ventana o en el propio formulario, de modo que aparecerían en la
ventana todas las propiedades de lectura y escritura modificables en tiempo de diseño
(hay otras propiedades que sólo se pueden modificar en tiempo de ejecución).

También es posible modificar las propiedades de varios controles, seleccionándolos en el

formulario, de forma que en la ventana “Propiedades” aparezcan las propiedades
comunes a todos.

4. Librerías de componentes disponibles para distintos

sistemas operativos y lenguajes de programación
Los elementos (componentes, controles…) de los que puede disponer un desarrollador de
interfaces gráficas para el diseño facilitarán mucho el trabajo. Esto se puede hacer
aprovechando elementos ya existentes y que no es necesario volver a implementar, y
también creando elementos con determinadas propiedades que sigan un patrón similar o
corporativo, para utilizar sólo determinados elementos propios en el desarrollo de
interfaces para una determinada organización.
Esta situación lleva a muchos desarrolladores a crear componentes y dejarlos al alcance
de otros desarrolladores (ya sea de forma gratuita o no). Al igual que existen muchos
ejemplos desarrollados en cualquier lenguaje de programación que están al alcance de los
desarrolladores o muchas bibliotecas con funciones de código o ejemplos, lo mismo
sucede con las bibliotecas de componentes.

Estos componentes pueden ser de uso genérico o de muy concreta utilización por parte de
determinados desarrolladores que buscan una funcionalidad concreta. Pueden estar
disponibles para un determinado lenguaje de programación o para una aplicación
determinada o un entorno integrado de desarrollo de interfaces. Y podrán estar
vinculados a determinadas funcionalidades (acceso a determinadas bases de datos,
componentes gráficos para identificar componentes concretos de un determinado
ámbito…).

Por ejemplo, existen bibliotecas de componentes diferentes para herramientas de

desarrollo de interfaces en entorno Web y para herramientas de desarrollo de interfaces
en entorno WinForms.

Widget
La palabra widget corresponde a una abreviatura de las
palabras window y gadget, es decir, 'ventana' y 'dispositivos'. Es una
aplicación accesible desde una pequeña ventana. Son muy populares
en entornos Mac como accesos a aplicaciones de uso más frecuente.

Otra forma de nombrar a los componentes o controles gráficos es widgets (widgets),

siempre dentro de un contexto de desarrollo de aplicaciones visuales con interfaces
gráficas de usuario. Un widget es un componente o control visual que se habrá
programado y podrá reutilizarse para desarrollar otras aplicaciones o para otros
programadores.

Hay widgets a desarrollar en entornos de sistemas operativos diferentes (Microsoft, Mac,

Linux…). Los widgets pueden ser virtuales o físicos, para diferenciar, por ejemplo, cuando
se haga referencia a un botón físico que podrá pulsar el usuario, o cuando nos referimos a
un botón virtual de una interfaz gráfica, que podrá seleccionarse con un clic de ratón.

Los widgets también serán específicos del entorno de programación, ya sea que se
desarrolle para un entorno Web o para un entorno WinForms.

4.1. Características específicas de las herramientas de

diseño de interfaces
Ciertos elementos de una interfaz gráfica de usuario se pueden utilizar en varios ámbitos o
aplicaciones no directamente relacionadas con el diseño de GUI.

Otros, en cambio, están directamente relacionados con las características específicas y

necesidades de las interfaces gráficas de usuarios. Los eventos, por ejemplo, permiten
asociar determinadas funcionalidades a que sucedan determinadas acciones o eventos
entre el usuario y la aplicación con la que trabaja.

Otra característica específica es vincular determinados controles a bases de datos, lo que

permite consultar, modificar, añadir o borrar datos a un determinado conjunto de datos.

Otros temas a tratar en este apartado están relacionados con los diálogos modales y no
modales y la edición de código generado por las herramientas de diseño y desarrollo de
interfaces gráficas de usuario.

4.1.1. Controles: clases, propiedades y métodos

Objeto
En un contexto de programación orientada a objetos, un objeto es
una instancia en una clase.

Los controles son objetos que permiten un desarrollo de las interfaces más sencillos
gracias a su posibilidad de modularidad y reutilización. Los controles tienen propiedades y
métodos, y se podrán asociar a eventos.

Los controles ofrecen un abanico de posibilidades muy grande a los desarrolladores, al

posibilitar dotar de unas mismas características a un conjunto de controles que se
utilizarán para interfaces directamente relacionadas o poder utilizar un mismo control en
varios proyectos de desarrollo de software.

Hoy en día, se utilice la aplicación que se utilice en un entorno visual con interfaces
gráficas de usuario, encontraremos un uso generalizado de los controles. Si se quiere abrir
un documento o una fotografía se utiliza un control que muestra un cuadro de diálogo que
permite navegar por nuestro sistema de carpetas hasta encontrar el archivo que
buscamos. O si se finaliza la ejecución de una aplicación muchas veces es necesario
interactuar con una ventana que pregunta si se desea guardar el trabajo realizado.

Todos estos controles ya están creados y no será necesario programarlos de nuevo, basta
con utilizar la aplicación informática adecuada para diseñar y desarrollar la interfaz o
buscar el control en una de las muchas bibliotecas a nuestro alcance. Una vez escogido el
control que interesa al programador, éste sólo tendrá que modificar características como
el tamaño o el color y añadirlo al formulario apropiado, asociando el código necesario
para que el control se comporte como interese cuando se ejecute la aplicación.

Los controles disponen de tres características importantes:

 Propiedades
 Métodos (procedimientos y funciones)
 Eventos

Las propiedades son las características que identifican a cada control. Éstos son lo que son
a partir de las partes que constituyen el objeto. Por ejemplo, una persona podría decirse
que presenta propiedades como podrían ser sus ojos, las orejas, los labios, la altura, el
peso… Estas propiedades pueden tener unos valores (por ejemplo, Ojos = Verdes, Orejas =
Grandes, Labios = Hasta, etc.) que harán que esa persona sea identificable respecto de
otra por aquellas características. Del mismo modo ocurre con los controles.

Un ejemplo de control: TextBox

Mediante este control podremos realizar tanto la entrada como la salida de datos en
nuestras aplicaciones.

Algunas de las propiedades de las que dispone el control son:

 Text: Se indica el texto que aparecerá en el control. Podemos asignar cualquier

texto en tiempo de diseño o ejecución.

 Name: Esta propiedad la tienen todos los controles: es el nombre que viene por
defecto, en este caso Text1, y es el nombre con el que se conocerá el control
cuando lo utilizamos en el código. En un mismo formulario no puede haber dos
controles con el mismo nombre. Conviene poner un nombre que represente la
función que tiene el control en la aplicación para que el código quede más
claro. Ejemplo, si en TextBox queremos introducir la dirección de una persona
podemos asignar a esta propiedad el valor TextBox_Direction.

 Multiline: Permite que introduzcamos varias líneas de texto en el control en lugar

de sólo una.

 Alignment: Alineación que tendrá el texto dentro del control: izquierda, centro o
derecha. Para que funcione la propiedad multilíneas debe estar con el valor true.

 Locked: Si su valor es true bloquea el control, es decir, el usuario no puede

introducir ni modificar el texto que contenga. Puede servir para utilizar el control
como salida de datos sin que el usuario pueda modificarlo por error.
Las propiedades del control pueden ser modificadas en tiempo de diseño. Como puede
observarse en la figura 1.27, una vez seleccionado el control, podremos acceder a sus
propiedades en la ventana que sale a la derecha, visualizando todas sus opciones y
valores.

Figura 1.27 Ejemplo de propiedades

Pero las propiedades también pueden ser modificadas en tiempo de ejecución, colocando
su nombre y el nombre de la propiedad, como, por ejemplo:

Text1.text = "HOLA"

Los controles siguen el principio de la encapsulación; esto significa que se puede tener un
control 50 veces en un formulario, y si le cambiamos una propiedad a un control sólo se
cambia en éste y no en los 49 controles restantes, es decir, cada control mantiene
encapsuladas sus propiedades.

Los métodos son los procedimientos o funciones asociados a un control, los cuales
permiten realizar ciertas operaciones útiles sobre este control y obtener una respuesta.

Por ejemplo, un método de un RadioButton permite ordenar alfabéticamente sus

componentes u otro método permite realizar una búsqueda de un dato concreto.
Los procedimientos y funciones son muy similares; la diferencia es que los procedimientos
no devuelven ningún valor, mientras que las funciones siempre devuelven un solo valor.

Un ejemplo, en código de Visual Basic, es:

Método:
Sub Nombre_del_Metodo (Parámetros)
Líneas de código
End sub

Funciones:
Function Nombre_de_la_Función (Parámetros) se Valor_para_retornar
Líneas de código
 Nombre_de_la_Función = valor
End function

Un evento es una acción determinada que puede hacerse vinculada

con un control.

Por ejemplo, si sobre un control tipo Button se hace un clic con el ratón se ejecutará una
determinada acción. Se puede decir que el evento “clic sobre el control Button” activa
cierta funcionalidad. Otros ejemplos de eventos pueden ser cerrar un formulario,
seleccionar una opción de una lista o modificar el contenido de un control que contiene
datos.

4.1.2. Diálogos modales y no modales

Un cuadro de diálogo es una ventana que aparecerá ofreciendo una información a los
usuarios en un momento determinado de la ejecución de una interfaz.

Un cuadro de diálogo es modal cuando la aplicación misma o el formulario que le ha

llamado no puede recibir ningún evento hasta que se haya cerrado el cuadro de diálogo.

Un cuadro de diálogo es no modal de lo contrario, cuando la aparición del cuadro de

diálogo no limita al usuario a continuar interactuando con el resto de las ventanas. En
otras palabras, los cuadros de diálogo modales son aquellos formularios que hasta que no
se cierran no dejan continuar con la aplicación.

A continuación, se muestran tres ejemplos de diálogos modales.

Un cuadro de mensaje es un cuadro de diálogo modal que puede utilizarse para mostrar
información textual y permitir que los usuarios tomen decisiones con botones. La figura
1.28 muestra un cuadro de mensaje que muestra información textual, expone un mensaje
y proporciona al usuario dos botones para responder al mensaje.

Figura 1.28 Ejemplo de cuadro de mensaje

Para crear un cuadro de mensaje, se utiliza la clase MessageBox. A continuación, se
muestra el código que crearía el mensaje que se muestra en la figura 1.28.

MessageBox.Show (
"Está a punto de cerrar el formulario sin haber guardado los cambios.", _
"Alerta", _
MessageBoxButtons.OKCancel, _
MessageBoxIcon.Warning )

Otro tipo de cuadros de diálogos son los cuadros de diálogos comunes, que pueden ser
tan modales como no modales. El entorno Windows implementa varios cuadros de
diálogo reutilizables que son comunes para todas las aplicaciones, incluyendo cuadros de
diálogo para abrir archivos, guardar archivos e imprimir.

Al ser el sistema operativo el que implementa estos cuadros de diálogo, se pueden

compartir entre todas las aplicaciones que se ejecutan en el sistema operativo, lo que
contribuye a la coherencia de la experiencia del usuario; cuando los usuarios están
familiarizados con el uso de un cuadro de diálogo proporcionado por el sistema operativo
en una aplicación, no necesitan obtener información sobre cómo utilizar este cuadro de
diálogo en otras aplicaciones.

Dado que estos cuadros de diálogo están disponibles para todas las aplicaciones y que
ayudan a proporcionar una experiencia de usuario coherente, se conocen como cuadros
de diálogo comunes. Un ejemplo de cuadro de diálogo sería el creado cuando se intenta
imprimir un documento. Se muestra en la figura 1.29.

Figura 1.29 Ejemplo de un cuadro de diálogo común

5. Enlace de componentes a orígenes de datos. Datagrid
El enlace de datos es el mecanismo proporcionado por algunas plataformas que permiten,
en aplicaciones con interfaz Windows o en aplicaciones web, enlazar objetos
contenedores de datos con los controles de formulario, para poder realizar operaciones
de navegación y edición.

DataSets ADO .NET

Representación de un conjunto completo de datos (tablas, campos,
relaciones…) que reside en memoria y ofrece un modelo de
programación independiente del origen de los datos.

Es posible enlazar datos (Databind) con los controles de formularios, no sólo desde
orígenes de datos tradicionales (como DataSets ADO .NET), sino también a casi cualquier
estructura que contenga datos, como estructuras, colecciones, propiedades y otros
controles.

Existen varios tipos de fecha binding o enlaces a datos, como los simple data binding o
los complejo data binding.

Simple data binding

Consiste en una asociación entre un control, que puede mostrar un único dato, y el objeto
que actúa como contenedor de datos, como el enlace entre un control TextBox o una
etiqueta y un objeto DataColumn de una DataTable de un DataSet.

Por ejemplo, puede vincular el campo NombreColumna de la tabla NombreTabla a

un control de tipo TextBox de la siguiente manera:

Me.SqlDataAdapter1.Fill(Me.DataSet1, "NomTabla")
Dim bind As Binding
bind = New Binding("Texto", Me.DataSet1.Tables("NomTabla"),
"NomColumna")
Me.TextBox1.DataBindings.Add(bind)

Tal y como se observa, en el ejemplo se hace uso de la clase Binding , clase que permite
crear un enlace para un control indicando algunos parámetros, en los que el primer
parámetro es la propiedad de destino, el segundo parámetro es el objeto origen que
contiene todos los datos y el tercer parámetro es el campo origen en el objeto
origen. Cuando existe una modificación en la propiedad de destino, el cambio también se
realiza para el objeto origen. Si el objeto es un DataSet, los datos de la base de datos no
son modificados. DataSet debe ser sincronizado con la base de datos.

Complejo data bindings

Este tipo de enlace es posible entre un control que puede actuar como interfaz o visor de
datos, ya que dispone de la capacidad de mostrar varios o todos los datos, normalmente
más de un registro, del objeto contenedor de datos. Esto se utiliza normalmente en
controles DataGrid (parrilla), ListBox o ErrorProvider. Un ejemplo clásico es el vínculo
entre una tabla de datos y un objeto DataTable de un DataSet. Se puede ver este ejemplo
representado en la figura 1.30.

Figura 1.30 DataGrid

Importes System
Importes System.Data
Importes System.Data.SqlClient
Importes System.Windows.Forms

Public Class Form1

Inheridos System.Windows.Forms.Form

Private dataGridView1 As New DataGridView()

Private bindingSource1 As New BindingSource()
Private dataAdapter As New SqlDataAdapter()
Private WithEvents RecargarBDButton As New Button()
Private WithEvents ActualizarBDButton As New Button()

<STAThreadAttribute()> _
Public Shared Sub Main()
Application.Run(New Form1())
End Sub

' Initialize the form.

 Public Sub New()

Me.dataGridView1.Dock = DockStyle.Fill
Me.Controls.AddRange(New Control() {Me.dataGridView1,
Me.ParentForm})
Me.Text = "Ejemplo de DataBinding: DataGrid"

End Sub

Private Sub Form1_Load(ByVal sendero As Object, ByVal y As

System.EventArgs) _
Handles Me.Load

' Enlaza el DataGridView a BindingSource y carga los datos de

la BD
Me.dataGridView1.DataSource = Me.bindingSource1
GetData("select * from Customers")

End Sub

Private Sub GetData(ByVal selectCommand As String)

Try
' Establecemos la cadena de conexión a la base de datos
Dim connectionString As String = _
"Integrated Security=SSPI;Persist Security Info=False;" + _
"Initial Catalog=Northwind;Data Source=localhost"

' Creación de un DataAdapter

Me.dataAdapter = New SqlDataAdapter(selectCommand,
connectionString)

' Creación de un CommandBuilder que nos permitirá hacer

' las operación de modificación, inserción y borrado.
Dim commandBuilder As New SqlCommandBuilder(Me.dataAdapter)

' Rellenamos una nueva tabla de datos y la enlazamos a

BindingSource.
Dim table As New DataTable()
Me.dataAdapter.Hijo(table)
Me.bindingSource1.DataSource = table

Catch ex As SqlException
MessageBox.Show(ej.Message)
End Try

End Sub

End Class
Si quisiéramos actualizar la información de la base de datos:

Private Sub RecargarBDButton_Click(ByVal sender As Object,

ByVal y As System.EventArgs) _
Handles RecargarBDButton.Click

' Recarga la información de la base de datos

GetData(Me.dataAdapter.SelectCommand.CommandText)

End Sub

Private Sub ActualizarBDButton_Click(ByVal sender As Object,

ByVal y As System.EventArgs) _
Handles ActualizarBDButton.Click

' Actualiza la base de datos con los cambios realizados por el

usuario
Me.dataAdapter.Update(CType(Me.bindingSource1.DataSource,
DataTable))

End Sub

ADO.NET es un conjunto de clases que exponen servicios de acceso a datos para el

programador de .NET, constituyen una parte esencial del entorno de trabajo .NET, y
permiten el acceso a datos relacionales o XML, entre d otros.
En realidad ADO.NET es una evolución del modelo de acceso a datos de ADO que utiliza
algunos objetos de ADO, como Connection y Command, y también añade nuevos objetos,
como por ejemplo DataSet, DataAdapter, DataReader.

A continuación, se hará un breve resumen de estos objetos:

 DataSet es un objeto independiente que almacena temporalmente los datos. Se

puede considerar como un conjunto de registros que siempre está desconectado y
que nada sabe sobre el origen y el destino de los datos que contiene. Dentro de un
objeto DataSet, al igual que dentro de una base de datos, hay tablas, columnas,
relaciones, restricciones, vistas, etc.

 DataAdapter es el objeto que se conecta a la base de datos para llenar el objeto

DataSet. Si es necesario, vuelve a conectarse a la base de datos para actualizar los
datos de la base de datos a partir de las operaciones realizadas en los datos
contenidos en el objeto DataSet (operaciones de inserción, modificación o
eliminación).
  DataReader proporciona una forma de leer una secuencia de registros de datos
sólo hacia delante desde un origen de datos SQL Server.

 Connection permite conectar con una base de datos y administrar las

transacciones en una base de datos.

 Command permite emitir comandos SQL en una base de datos.

En la figura 1.31 puede verse esquemáticamente la relación entre estos objetos.

Figura 1.31 Esquema de ADO.NET

6. Los eventos: concepto, asociación de acciones, eventos

escuchadores.
Una aplicación no puede saber en qué momento el usuario querrá realizar una
determinada funcionalidad. Esta interacción será asíncrona durante la ejecución del
programa. Los eventos o eventos proporcionan un mecanismo adecuado para tratar este
tipo de situaciones que, normalmente, son producidas desde el exterior de la aplicación,
por ejemplo, cuando el usuario presiona una tecla.

Cuando llega un evento, a veces nos interesa tratarlo (por ejemplo, la pulsación de un
número en una aplicación que presenta la funcionalidad de una calculadora) y en otras
ocasiones no queremos tratar el evento con ninguna acción (por ejemplo cuando l usuario
presiona con el ratón sobre un texto al que no le hemos asignado ninguna información
complementaria).
Para aclarar su significado, se llamarán algunos de los eventos más comunes que se
pueden producir en la ejecución de una aplicación por medio de sus interfaces gráficas de
usuario:

 MouseMove: al mover el ratón por encima de un control.

 MouseDown: al pulsar cualquier botón del ratón
 Change: al cambiar el contenido del control
 Click: al hacer clic con el botón izquierdo del ratón sobre el control
 GetFocus: este evento se activa cuando el control recibe el enfoque, es decir,
cuando se activa el control en tiempo de ejecución para introducir datos o realizar
alguna operación.
 LostFocus: es lo contrario del evento anterior, se activa cuando el control pierde el
enfoque, es decir, se pasa a otro control para seguir introduciendo datos.

De esta forma, si queremos que un texto se ponga de color rojo al situarnos encima, y de
color gris al salir (con el ratón), debemos crear las instrucciones de los eventos
mouseEntered y mouseExited ; el primer evento se encargará de poner el texto de color
rojo y el segundo de ponerlo de color gris.

7. Edición del código generado por las herramientas de

diseño
Los entornos integrados de desarrollo y otras herramientas de diseño y desarrollo de
interfaces son aplicaciones que permiten diseñar interfaces gráficas de usuario sin
necesidad de programar una sola línea de código. Pero en muy pocos casos un
desarrollador obtendrá un producto final sin necesidad de modificar algún detalle al que
no habrá llegado la aplicación de desarrollo.

Por esta razón será necesario tener acceso al código generado por las herramientas de
diseño, para poder modificarlo y adecuarlo a nuestras necesidades.

Hay aplicaciones que integran un editor de código, lo que permite acceder sin tener que
salir del entorno de desarrollo, además de poder ver los resultados de las modificaciones
hechas de forma inmediata.

Otras aplicaciones generan el código y los archivos necesarios para poder disponer de las
interfaces generadas, pero no permiten esta edición en su entorno de desarrollo, lo que
hará necesario el uso de otras aplicaciones para poder editarlo, aplicaciones que podrán
ser especializadas en estas tareas o podrán ser muy sencillas, como cualquier editor de
texto.
Es necesario que el código generado sea un código modular y sencillo de entender. Si un
programador debe dedicar más tiempo a entender y hacer suyo el código, puede que no
le haya sido de mucha ayuda la herramienta de desarrollo. Se puede ver un ejemplo de
edición de código con Microsoft Visual Studio en la figura 1.32.

Figura 1.32 Herramienta de diseño

Prácticamente todos los IDE existentes hoy en día permiten esta edición de
código. Algunos ejemplos de estas herramientas pueden ser Eclipse, MonoDevelop,
IDE NetBeans o Glade. Algunas de estas herramientas incluso generan código
automáticamente a partir de las interfaces en desarrollo en un entorno gráfico, lo que
facilita mucho el trabajo de los programadores.