Desarrollo de Interfaces

11/11/2017 Desarrollo de interfaces
D E S A R R O L L O D E I N T E R FA C E S
1. Confección de 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 quieren sacar dinero o hacer cualquier otra operación,
habrá interactuar con otro tipo de interfaz de usuario (que será interactiva, en este caso) .
Hay, sin embargo, muchos más ejemplos: hoy en día ver el televisor, con el TDT
incorporado, representa tener que utilizar una serie de menús y opciones. Este 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 llevará una pequeña interfaz muy
simple, pero necesaria para su funcionamiento. Y no es necesario que hablemos de las
interfaces que llevan todos los aparatos dedicados al ocio, como las consolas de
videojuegos. Y se podría hablar también de los teléfonos móviles.
Las interfaces de usuario están en continua evolución y se han de conocer una serie de
herramientas que permitan su desarrollo.
1.1. Introducción a las interfaces de usuario
Comenzaremos recordando el funcionamiento de un sistema informático. Como 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 se
puede ver en la figura 1 .1 .
Figura 1.1. Actores en la relación con el hardware
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 1/43
En primer lugar se encuentra el sistema operativo, encargado de la gestión y la

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 la
vez actuará de interfaz entre el hardware y las aplicaciones utilizadas.
En segundo lugar tendremos las aplicaciones. Estas 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.
Donde se encuentran las interfaces? Las interfaces forman parte de las aplicaciones. Son la
parte de las aplicaciones con la que se relacionarán los usuarios.
CES
El International Consumer Electronic Show -
abreujat 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 se puede ver 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
Hay muchos tipos de aplicaciones informáticas. Se pueden agrupar según la 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 en los apartados siguientes 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.1.1. ¿Qué son las interfaces de usuario?

Hay 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
vamos a fijar 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 maneras 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 manera 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 tal manera que
integrar una aplicación al sistema operativo sea muy sencillo, y sólo haya que adaptar
algunos parámetros. Incluso hay dispositivos que han desarrollado su sistema operativo
propio, como los dispositivos móviles, con sus interfaces propias. En la figura 1 .3 se puede
ver 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 sistemas
siguientes:
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 bastante atractivas para ayudar al éxito
del sistema operativo. Aporta un Dock, una barra de accesos directos a las
aplicaciones y en las 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 hasta no hace mucho tiempo. Actualmente
hay varias interfaces gráficas, como:
X Window : incorpora un modelo cliente-servidor que permite el uso directo

por parte de las aplicaciones de los periféricos de entrada / salida.
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.
GNOME : entorno de escritorio dentro del proyecto GNU. Nació como
alternativa a KDE. Mejora la usabilidad y aporta elementos útiles para
discapacitados.
Open Look Muestra 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 que se han explicado.
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 | Unitat1 apartado1 | http:
/ En. Wikipedia. Org / wiki / File: Windows_ for_ Workgroups. Png
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 cumplir 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 diferentes 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 se puedan configurar 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 manera sencilla y agradable con el usuario por medio de un dispositivo de
entrada / salida.
CLI
Acrónimo de command line interface , es decir, la
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 usar. 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.
Quien preferirá utilizar una interfaz de tipo CLI antes de 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, las quieren usar, ya que una
instrucción compleja será muy complicada de 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; en cambio, 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 obtendrá una interfaz adecuada para ser utilizada
de manera agradable y sencilla para sus usuarios, sin que estos necesitan horas de
formación o un buen manual junto mientras interactúan con la interfaz.
1.1.2. Evolución de las interfaces de usuario

Hablar actualmente de interfaces gráficas de usuario es una cuestión que parece que no
tenga mucho razón de ser, ya que las interfaces son parte de nuestro día a día, como un
elemento muy cotidiano de lo que no parece que sea necesario hablar. Pero no siempre ha
sido 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 sido ligadas de las manos con los sistemas
operativos. A medida que estos 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 eso era posible.
Los sistemas operativos gráficos acercaron la informática a muchos más usuarios de los
que hasta ese momento habían usado los ordenadores. Ya no era necesario ser conocedor
de las órdenes que había que introducir por la línea de instrucciones o tener
conocimientos de BASIC. Por ejemplo, cuando apareció el 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, y eso hizo mucho más fácil y
accesible el uso de la informática al gran público.
Para poder comprender la evolución de las interfaces, es necesario también que nos
fijamos 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 prestaciones y bajaba en coste había una lucha para 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 para desarrollar
los entornos más agradables y sencillos de utilizar, lo que ha provocado una continua
evolución de las interfaces en los últimos años.
Empresas como Apple, Xerox, Be o Microsoft han sido las que más tiempo y dinero han
dedicado a esta tarea durante las últimas cuatro décadas. Además, también han
intercambiado 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 (1.980 a 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 había ningún interfaz de usuario. Si se
quería modificar la programación se accedía directamente al hardware para hacer las
adecuaciones pertinentes. Posteriormente, con la programación por lotes tampoco había
una interfaz que permitiera la interacción. El usuario tenía que indicar un conjunto de
instrucciones al sistema que, una vez procesadas, ofrecería unos resultados.
A partir de los años sesenta, con los lenguajes de comandos, 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 una orden.
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 este
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 se empieza a evolucionar 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 una manera sencilla. Las
aplicaciones que se desarrollan siguen estos objetivos e intentan ofrecer unas interfaces de
usuario adecuadas para conseguirlo. Se suele usar un diseño de interfaces de dos
dimensiones con menús jerárquicos de pantalla completa. Se usan las teclas de función
como una manera de interactuar con las aplicaciones y de completar los menús.
Asimismo la empresa Xerox desarrolló, después de muchos años de investigaciones en el

PARC (Palo Alto Reseach Center), el ordenador Xerox Star 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 manera 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, menús and
pointer ), es decir, interfaces que disponen del movimiento de un puntero para 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 hora,
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 tienen que 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 cada interfaz y
permite su manipulación.
Las primeras interfaces gráficas hemos visto que se empezaron a desarrollar 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:
1,981 : Xerox Star

1984 : Apple Macintosh
1985 : Commodore Amiga, Windows 1.0
1990 : Microsoft Windows 3.0
1992 : IBM OS 2 2.0
1995 : Microsoft Windows 95
1998 : KDE / Gnome
2001 : Apple Mac OS X 10.0, Microsoft Windows XP
Interfaces gráficas de usuario no basadas en instrucciones (1996-2001)

A partir de 1995 hay 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 manera ú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 los sistemas
informáticos a las organizaciones .
Este gran cambio supuso un cambio en la manera 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 continúan 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 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 se pueden considerar, utilizando el término con comillas, una

"dimensión" más que 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 donde comenzaron a evolucionar las interfaces.
En la figura 1 .9 se puede ver 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 quiere 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 otro
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, de sonidos o de 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 GUI y 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 más pronto que tarde a la tecnología 3D, algo muy aprovechable para las
interfaces para explorar nuevas posibilidades.
1.1.3. Tipo de interfaces de usuario

Las interfaces gráficas se pueden clasificar 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, hay un tipo de interfaces basadas en WIMP. WIMP muestra un tipo de
formato de interacción entre las personas o usuarios y las computadoras (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 nuevos, 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
manera organizada. También se usan 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 búsqueda reducir el tiempo de aprendizaje que necesitará

un usuario para utilizar de manera óptima una interfaz gráfica facilitando el recuerdo de
las opciones que ofrece. A la 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, y utilizan 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 manera
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 al mismo tiempo,
que será una pantalla táctil, ya sus características específicas (usar 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 un 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 : estas 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 maneras de clasificar las interfaces es según la arquitectura de las aplicaciones y su

manera de trabajar:
API
Del inglés application programming interface ,
aplicación para programar interfaces '. Facilitará la
interacción entre diferente software.
Aplicaciones locales: interfaces Winforms. Estas aplicaciones se desarrollan

para trabajar en una única máquina un único usuario a la vez. Se deberá 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 lugar desde donde se podrá utilizar. Este tipo de aplicaciones,
habitualmente, disponen de interfaces de tipo Winforms . Este nombre es el que se
da a 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 oa las funcionalidades. Hay que hacer una instalación en la máquina
servidor y otra instalación en cada una de las máquinas cliente. También es podría
darse 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 por medio de las
redes telemáticas, y el acceso más habitual es lo que se hace por medio de un
navegador de Internet, que accede a un servidor, donde se localizarán las 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 manera 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 ninguna
otra necesidad una interfaz gráfica de usuario. Además se podrán aprovechar de las
bibliotecas y elementos existentes. Esta manera 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.1.4. 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 como el denominador común ha sido llegar a ofrecer a los usuarios unas
interfaces con una usabilidad óptima. Para conseguir esto 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, debe 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 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 deberán 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 : deberán 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 : deberán 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
habrá obligar a los usuarios a recordar la ubicación de las funcionalidades, sino que
éstas deberán ser sencillas de encontrar. Esto hará que no sea indispensable
memorizar muchas informaciones para aprender a usar 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
querrá 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
seleccionados inicialmente. Además, deben poder ser descartados de manera sencilla.
Llei de Fitts: una interfície ha d’aconseguir optimitzar la llei de Fitts. Aquesta llei, en
ergonomia, modelarà el moviment humà, fent una estimació del temps que pot neces-
sitar un ésser humà per moure un punter des d’una zona de la pantalla fins a una altra
tenint en compte variables com els objectius, la distància fins a assolir-los i la grandà-
ria que tindran.
Les interfícies gràfiques d’usuari (GUI a partir d’ara) disposen d’una sèrie d’elements pro-
pis, comuns a moltes de les GUI desenvolupades, que disposaran d’unes característiques i
propietats. Amb aquests element es facilitarà el desenvolupament de les GUI de les aplica-
cions informàtiques, cosa que ofereix la possibilitat d’acomplir la majoria de les caracterís-
tiques definides.
Perquè l’usuari pugui fer servir aquests elements, haurà de fer servir algun dels dispositius
d’entrada/sortida que s’han anat desenvolupant al llarg dels últims anys. El teclat de
l’ordinador ha estat el dispositiu indispensable, com ho és avui dia el ratolí. Però n’hi ha
d’altres com el touchpad (ratolí tàctil), la tableta gràfica, el trackball (bola), els joysticks,
les pantalles tàctils o els micròfons. Com a dispositius de sortida, a banda de la pantalla,
seran importants els altaveus o els LED informatius.
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 todas tienen el 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 se empiezan a
utilizar 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 al mismo tiempo con diferentes
entornos, que podrán ser de la misma aplicación o de diferentes aplicaciones.
Por ejemplo, el hecho de 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 un 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 diferentes

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 manera organizada. Nos
permitirá navegar por las funcionalidades de una aplicación visualizando la información
de manera jerarquizada. Esto permite gestionar y manipular la información de manera
bastante sencilla. Cada ventana puede ser manipulada como al usuario le interese,
maximizando la o minimizando la, moviéndolas o cerrándolas, navegando a él o
haciéndolas más grandes ... Las ventanas contendrán interfaces gráficas de usuario que
incorporarán otros 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.
Al llarg dels anys les finestres han anat evolucionant, i s’ha arribat avui dia al que es
podria anomenar un estàndard de disseny de finestres, amb uns elements bàsics, dels
quals faran ús totes les finestres, com són: el marc, la capçalera de la finestra, l’espai del
contingut, la barra de desplaçament i el peu de la finestra.
El marc ajuda a distingir què pertany a la finestra i què no. A més, serveix per redimensio-
nar les mides de la finestra. Com pràcticament tots els elements, es podrà configurar en la
majoria dels casos. La capçalera de la finestra és el lloc on es trobaran situades les icones
que identifiquen i permeten arribar a les funcionalitats principals de l’aplicació que s’exe-
cuta en aquella finestra. L’espai de contingut variarà en mida en funció de les dimensions
de la finestra. Serà el lloc on es mostrarà la informació (imatge, continguts multimèdia, de
text…). La barra de desplaçament o scroll apareixerà en el cas que l’espai de contingut
sigui més petit que la informació per mostrar. D’aquesta manera l’usuari es pot desplaçar
pels continguts no visibles inicialment a la finestra. Finalment el peu de la finestra es fa
servir per oferir informacions diverses relacionades amb la finestra o amb l’aplicació i els
continguts que es mostraran.
Quadres de diàleg
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á contestar. Esta interacción podrá ser sólo
informativa (un mensaje de aviso o de 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 las 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 lo queremos hacer. Este cuadro de diálogo no
nos permitirá continuar trabajando con la aplicación hasta que no hayamos 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 gestionar correo electrónico.
Figura 1.11. Ejemplo de cuadro de diálogo
asistentes
Los asistentes son ventanas que van apareciendo una tras otra hasta que se llega a un
determinado objetivo. Como su nombre indica, asisten al usuario hasta completar una
funcionalidad, preguntando paso a paso todas las informaciones necesarias hasta
completar correctamente. De esta manera 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 como 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, ya 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 funcionalidad determinada.
Los menús se encuentran en un área determinada de la interfaz, normalmente justo

debajo del marco superior. La manera 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á esa opción y se
desplegarán todas las opciones relacionadas. Pero 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 se puede ver en la imagen, muchos menús indican las combinaciones de teclas que
permiten llegar a la misma funcionalidad de manera más rápida. Un usuario habitual de
una aplicación memorizará las funcionalidades más indispensables para él. A veces, 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 mediante iconos, minimizando la presencia del
texto. Esta evolución puede llevar a la confusión a los usuarios acostumbrados a una
determinada manera 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
Hay 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ú. El menús más
habituales que nos 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 donde podrá llegar el usuario navegando por el menú). Las opciones que se
encuentran en un nivel tendrán correspondencia entre ellas. Son utilizados de manera
habitual en sistemas operativos y aplicaciones de toda índole.
Menús contextuales : no se encontrarán visibles en la interfaz hasta que el usuario
no provoque la activación. Son menús que se abrirán en una 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 este modo, será
diferente el menú que aparecerá si se hace clic en el marco de la ventana o si se hace
clic sobre el área de trabajo.
Menús de navegación ( ruidos ) : 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, y oculta el resto, pero dejando visible un pequeño icono que,
al ser seleccionada, muestra todo el resto de las opciones del menú. Esto nos da la
sensación de poder navegar por el menú y sus ítems. Este tipo de menú se utiliza
cuando son muchas las opciones que se quieren mostrar en una interfaz de usuario.
Hay 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 hoy día 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, y llega 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
de funcionalidades relacionadas entre sí de manera agrupada. En una misma ventana se
podrán mostrar los contenidos de tantas ventanas como se quiera, separándolas por
pestañas, que deberán 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 a 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 poder acceder a estas opciones de los
menús.
De esta manera 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 se puede ver un ejemplo de una barra de herramientas.
Figura 1.16. Ejemplo de barra de herramientas, de Mozilla Thunderbird
iconos
Los iconos son imágenes que representan funcionalidades o acciones que se podrán llevar
a cabo haciendo un clic encima. Entre otros lugares, a 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 el significado, lo que no
cumpliría uno de los principios de las GUI , el de no obligar a memorizar información al
usuario para usarlas correctamente.
Se trata de un elemento muy importante en las interfaces de usuario, ya 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 las mismas en diferentes 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 lo son 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, las imágenes o los datos que el usuario habrá pedido
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 utilizará en la comunicación con los usuarios dispondrá de varias opciones
tipográficas para ser mostrado. La elección cuidadosa 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 las fuentes desarrollados exclusivamente para

pantallas, para usarlos en interfaces gráficas de aplicaciones informáticas. De este modo,
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
esfuerzo importante 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 distintos tamaños de letra. Una elección correcta de todas
estas variables puede influir mucho en la apreciación por parte del usuario de la interfaz
desarrollada.
controles
Hay muchos tipos de componentes que se pueden utilizar en las interfaces gráficas de
usuario. Un tipo de componentes son los controles. Estos 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 al sistema. Hay 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 elegidos 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, y da 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 representará.
Además de los botones hay 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 .
1.1.5. Herramientas de propiedad y herramientas 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.
Una altra diferència important serà desenvolupar una aplicació per a un entorn Web o
desenvolupar-la per un entorn de finestres (Winforms). Els components, els llenguatges,
la metodologia de treball i les possibilitats seran diferents en tots dos casos.
Les eines de creació i edició d’interfícies són un tipus de programari que

ajudarà al programador a desenvolupar interfícies que segueixin les
indicacions establertes en la fase de disseny a partir de l’anàlisi de les
necessitats. Hauran de tenir en compte totes les fases de desenvolupa-
ment d’un projecte informàtic.
Aquest tipus de programari haurà de tenir en compte moltes disciplines, ja que la creació
d’una interfície d’usuari engloba conceptes de disseny gràfic, de lingüística, d’ergonomia,
de sociologia, de programació i tecnologia informàtica i de psicologia cognitiva, entre
d’altres.
Hi ha moltes eines diferents al mercat en funció del llenguatge de programació que es faci
servir, en funció de l’entorn de desenvolupament o de si l’eina és de propietat o és lliure.
Para conseguir desarrollar de manera sencilla las interfaces, las herramientas incorporan
diversos elementos preprogramados que facilitan mucho la creación de interfaces gráficas
complejas de una manera sencilla. Así será muy sencillo añadir a una interfaz un menú o
un icono, tan sencillo como desplazar este elemento en el 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 los (iconos, ventanas,
controladores de dispositivos, menús ...). Además, se pueden gestionar los posibles errores
por parte del usuario en utilizar la interfaz, procesar excepciones,
Otras características a tener en cuenta de las herramientas para la creación y edición de

interfaces gráficas es que estas son tipos de herramientas del tipo WYSIWYG , es decir, se
podrán observar de manera 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:
En la sección Actividades de la web del módulo

puede encontrar algunos ejemplos de interfaces
desarrolladas con diferentes herramientas, tanto
libres como de propiedad, para diseñar, desarrollar y
editar interfaces gráficas de usuario.
Microsoft Visual Studio . Se trata de un entorno de desarrollo integrado

desarrollado por Microsoft para sistemas operativos Windows. Es de pago. Soporta
los lenguajes de programación siguientes: 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.
NetBeans IDE . 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.
1.2. 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 darle un vistazo desde el punto de vista de los
desarrolladores de interfaces gráficas. Como podrá un desarrollador escoger cuáles son los
iconos que querrá utilizar para identificar diferentes acciones? Como seleccionará la
manera más adecuada de interactuar en cada momento? ¿Cuáles son las herramientas que
podrán servir para conseguir estos objetivos?
Hasta no hace muchos años desarrollar una interfaz gráfica de usuario era una tarea
bastante compleja. Actualmente hay 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 manera parcial o completa. Es muy difícil encontrar, hoy en
día, gente que todavía desarrolle interfaces gráficas de usuario a partir de un lenguaje de
programación. En cambio, si que 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 ni 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 en su
uso se utilizará como herramienta para los ejemplos la versión 2010 del software Visual
Studio, de Microsoft.
1.2.1. Elementos de las herramientas de desarrollo de interfaces
Al iniciar el trabajo con una herramienta de diseño y desarrollo de interfaces gráficas hay
que identificar y entender muy bien el entorno de trabajo, es decir, bajo qué sistema
operativo y condiciones se ejecutará.
En la figura 1.18 es pot veure l’entorn de treball del Visual Studio 2010 en iniciar-lo amb
un projecte en Visual Basic per a una aplicació desenvolupada amb Windows Forms.
Aquest entorn de treball és molt similar al que es pot trobar en qualsevol altra eina de
desenvolupament d’interfícies, com 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 tarea. Como se puede ver 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 cual 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 a la vez. A la izquierda se dispone de la ventana con el cuadro de
herramientasya derecha está la ventana con las propiedades del componente con el
que se está trabajando en un momento determinado.
Figura 1.18. 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

podrán definir acciones para un conjunto de teclas y configurar qué funcionalidad
estarán más accesibles. En la figura 1 .18 se puede ver 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 para
desarrollar, a la que también se podría llegar a través del menú en formato de texto.
En la figura 1 .18 se puede ver representado por el número 2.
Área de diseño . Ocupa la parte central. Contendrá los paneles donde 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 a la vez. En la figura 1 .18 se puede
ver representado por el número 3.
Cuadro de herramientas . Contiene todos los elementos que podremos añadir en

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 se puede ver representado por 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 que se tenga 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 se puede
ver 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 quiere 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 para
desarrollar.
IDE
Acrónimo del ángulos integrated development
environment , es decir, el entorno de desarrollo
integrado '.
Otro ejemplo de IDE es el Eclipse, desarrollado por IBM para desarrolladores de Java.
Como se puede ver 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
1.2.2. Componentes: características y campos de aplicación

Cuando se habla de interfaces de usuario normalmente es utiliza un vocabulario que
incluye palabras como contenedores , controles o componentes . Hay que 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 se podrá reutilizar, 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 se podrá añadir
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 llevar a cabo en
tiempo 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 poderse
diseñar y configurar. 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 hacer de contenedor de otros controles.
Es una herramienta adecuada para ocultar o mostrar un tipo de controles determinados.
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 el 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 marco o sin, los
cuadros de diálogo ...
Una vez aclarados ciertos conceptos verá algunos ejemplos de los componentes que
forman una interfaz gráfica de usuario.
Hay 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 .1 se muestran algunos
de los principales elementos (componentes y controles) que podremos encontrar iguales o
muy similares en varias herramientas de diseño de interfaces o entornos integrados de
desarrollo de software.
Tabla 1.1. Algunos elementos del diseño de interfaces

componente nombre Descripción
Label Ofrece la posibilidad de ubicar al formulario una etiqueta con un texto
determinado, que no podrá ser manipulado por el usuario de la aplicación.
Button Son botones que ejecutarán una funcionalidad cuando se haga clic o doble clic
sobre él. Contendrán un texto indicativo de la acción que representan
PictureBox Permite seleccionar una imagen o un gráfico de un archivo previamente
existente. Este archivo podrá ser de los diferentes tipos de archivos de
imágenes que hay (jpg, gif, bmp, ico ...).
Progress Ofrece la progresión en la ejecución de una funcionalidad determinada que se
Bar está ejecutando (por ejemplo, la actualización de muchos datos en una base de
datos) .No debe confundirse con HScrollBar y VScrollBar.
radiobutton Son un conjunto de opciones agrupadas que ofrecen diferentes alternativas al
usuario para poder escoger una. Las opciones que se ofrecen serán
mutuamente excluyentes. Si se quiere poder elegir más de una opción a la vez,
hay que utilizar un checkbox.
checkbox Alternativa a los radiobutton. Conjunto de opciones con un espacio en forma
de cuadrado a la derecha para poder seleccionarlas. Se podrá seleccionar más
de una opción a la vez.
ListBox Este control muestra las opciones en formato de lista. El usuario podrá
seleccionar una o más de las opciones.
TextBox Puede mostrar información en formato texto escrita en tiempo de diseño y
recoger información introducida por el usuario en tiempo de ejecución.
ComboBox Combina un control de tipo TextBox y uno de tipo ListBox. Ofrece una lista de
opciones, de las que se podrá seleccionar una o bien introducir un texto en el
cuadro de edición.
1.2.3. 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 necesario seleccionarlo con el ratón y arrastrarlo hasta el área de diseño
dentro de un formulario.
En la sección Anexos de la web del módulo podrá

encontrar ejemplos de cómo hay que añadir nuevos
componentes ya existentes en la ventana del cuadro
de herramientas y cómo se pueden crear nuevos
grupos de elementos.
Hay 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 de 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)
1.2.4. 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 hay que 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 el 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 la 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 se hará siempre utilizando las

teclas Ctrl o Mayús .
Los controles agrupados dentro de un contenedor se moverán, copiarán o se pegarán

todos juntos cuando se aplique una acción en el contenedor. Estos controles agrupados
borrarán cuando el contenedor se elimine.
Figura 1.21. Otros contenedores
En la figura 1 .22 se puede ver un ejemplo en el que tenemos un texto con dos opciones
creadas como radiobutton. Todos estos controles se han agrupado y han convertido en uno
solo.
Figura 1.22. Controles agrupados
1.2.5. Añadir / eliminar componentes a 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 manera de añadir un nuevo control a un formulario es:
Tener abierto un formulario donde se quiere 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 queremos.

Hacer clic sobre el formulario o arrastrarlo hasta el formulario en el que se quiera
meter para que forme parte de aquella interfaz, como se puede observar 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 de tipo Button al formulario
Form1.
Figura 1.23. Añadir componente
De manera 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 hacer 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
de éste; si está seleccionado otro control, el nuevo control el posicionará sobre este.
Para desplazar la mayoría de los controles simplemente hay seleccionarlos y arrastrar con
el ratón cuando el cursor toma la forma de una cruz. Sin embargo, para desplazar algunos
controles hay que utilizar el tirador que tienen en forma de cruz. En la figura 1 .24 se
puede ver 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 seleccionarlo y

utilizar la tecla Supr para suprimirlo, y de esta manera se pierde el diseño y la
configuración del objeto.
Hay controles que no son visibles. En versiones anteriores de Visual Studio, estos
controles también aparecían sobre el formulario. En el 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.25. Componente invisible
En la figura 1 .25 se puede ver un ejemplo de controles invisibles de tipo ToolTip y la

manera de trabajar.
1.2.6. Ubicación y alineación de componentes. Modificación de propiedades

Una vez colocados los componentes en los formularios hay que ubicarlos de manera 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 hay varios
controles seleccionados. En estos casos, la operación se hará sobre el último control
seleccionado. El primer control seleccionado será el que actúe como control primario y
los otros 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 los controles por debajo.
Centrar los controles verticalmente.
Alinea los controles para arriba.
Alinea los controles a la izquierda.
Alinea los controles a la derecha.
Centrar los controles horizontalmente.

encontrar más ejemplos e informaciones de cómo
hay que ubicar y alinear los componentes en un
formulario.
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 según 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.26. Propiedades de un componente

encontrar más ejemplos e informaciones sobre las
propiedades de los componentes, y también de cómo
modificarlas y otras características específicas.
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 formulario mismo, por lo 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, por lo que en la ventana "Propiedades" aparezcan las propiedades comunes a
todos.
1.2.7. Bibliotecas de componentes disponibles para diferentes 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 unas determinadas propiedades que sigan un patrón
similar o corporativo, para usar sólo determinados elementos propios en el desarrollo de
interfaces para una determinada organización .
Esta situación lleva a muchos desarrolladores crear componentes y dejarlos al alcance de

otros desarrolladores (ya sea de forma gratuita o no). Al igual que hay 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.

encontrar algunas referencias concretas a bibliotecas
de componentes.
Estos componentes pueden ser de uso genérico o de utilización muy concreta 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 de desarrollo de interfaces. Y podrán ser vinculados con
determinadas funcionalidades (acceso a determinadas bases de datos, componentes
gráficos para identificar componentes concretos de un determinado ámbito ...).
Por ejemplo, hay bibliotecas de componentes diferentes para herramientas de desarrollo

de interfaces en entorno Web y para herramientas de desarrollo de interfaces en torno
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
ventana pequeña. Son muy populares en entornos
Mac como accesos a las aplicaciones de uso más
frecuente.
Otra manera de llamar 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 se podrá reutilizar para desarrollar otras aplicaciones o para otros
programadores.
Hay widgets para 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 se podrá seleccionar 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.
1.3. 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 diversos

á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 las
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 en bases de datos, lo que

permite consultar, modificar, añadir o borrar datos a un conjunto de datos determinado.
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.
1.3.1. Controles: clases, propiedades y métodos
objeto
En un contexto de programación orientada a objetos,
un objeto es una instancia a una clase.
Los controles son objetos que permiten un desarrollo de las interfaces más sencillo 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 día, se use 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 hay que interactuar con una
ventana que pregunta si se desea guardar el trabajo.
Todos estos controles ya están creados y no será necesario programar 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 elegido 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 cuentan con tres características importantes :
propiedades
Métodos (procedimientos y funciones)
eventos
Las propiedades son las características que identifican cada control. Estos son lo que
son a partir de las partes que constituyen el objeto. Por ejemplo, una persona se podría
decir 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 hacer tanto la entrada como la salida de datos en
nuestras aplicaciones.
Algunas de las propiedades de que dispone el control son:
Texto : 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 Texto1, 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 el TextBox queremos introducir la dirección de una persona
podemos asignar a esta propiedad el valor TextBox_Direcció.
Multilíneas : Permite que introducimos 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 lo pueda modificar por error.
Las propiedades del control pueden ser modificadas en tiempo de diseño. Como se puede
observar 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 este 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 hacer ciertas operaciones útiles sobre este control y obtener una respuesta.
Por ejemplo, un método de un radiobutton permite ordenar alfabéticamente sus

componentes o bien otro método permite hacer una búsqueda de un dato concreto.
Los procedimientos y las 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 Nom_del_Metode (Ajustes)

Líneas de código
End sub
funciones:
Function Nom_de_la_Funció (Ajustes) se Valor_per_retornar

Líneas de código
Nom_de_la_Funció = valor
End function
Un evento es una acción determinada que se puede hacer vinculada

con un control.
Por ejemplo, si sobre un control de tipo Button se hace un clic con el ratón se ejecutará
una determinada acción. Se puede decir que el evento "click sobre el control Button" activa
una 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.
1.3.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 lo 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 el usuario de continuar interactuando con el resto de 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 se puede utilizar 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.

encontrar más ejemplos e informaciones de cómo
hay que crear un cuadro de diálogo modal y uno no
modal.
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 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
1.3.3. 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.
Dataset 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.
Hay varios tipos de fecha binding o enlaces a datos, como los simple fecha binding o
complejo fecha binding .
Simple fecha 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, tales 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 NomColumna de la tabla NomTaula a un control de

tipo TextBox de la siguiente manera:
Me.SqlDataAdapter1.Fill (Me.DataSet1, "NomTaula")

Dim bind As Binding
bind = New Binding ( "Text", Me.DataSet1.Tables ( "NomTaula"), "NomColumna")
Me.TextBox1.DataBindings.Add (bind)
Tal como se observa, en el ejemplo se hace uso de la clase Binding , clase que permite
crear un vínculo para un control indicando algunos parámetros, en el 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 hay una modificación en la propiedad de destino, el cambio también se hace para
el objeto origen. Si el objeto es un DataSet, los datos de la base de datos no son
modificadas. El DataSet debe ser sincronizado con la base de datos.
Complejo fecha bindings

Este tipo de enlace es posible entre un control que puede actuar como interfaz o
visualizador de datos, ya que dispone de la capacidad de mostrar varias 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 enlace entre una parrilla 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

inherits System.Windows.Forms.Form
Private dataGridView1 As New DataGridView ()

Private bindingSource1 As New BindingSource ()
Private dataAdapter As New SqlDataAdapter ()
Private WithEvents RecarregarBDButton As New Button ()
Private WithEvents ActualitzarBDButton 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 e 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; persiste 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)
'Llenamos una nueva tabla de datos y la enlazamos a BindingSource.

Dim table As New DataTable ()
Me.dataAdapter.Fill (table)
Me.bindingSource1.DataSource = table
Catch ex As SQLException
MessageBox.Show (ex.Message)
End Try
End Sub
End Class
Si quisiéramos actualizar la información de la base de datos:
Private Sub RecarregarBDButton_Click (ByVal sendero As Object,

ByVal e As System.EventArgs) _
handles RecarregarBDButton.Click
'Recarga la información de la base de datos

GetData (Me.dataAdapter.SelectCommand.CommandText)
End Sub
Private Sub ActualitzarBDButton_Click (ByVal sendero As Object,

ByVal e As System.EventArgs) _
handles ActualitzarBDButton.Click
'Actualizar la base de datos con los cambios que ha hecho 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 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 objetos nuevos,
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
no sabe nada 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, se vuelve a conectar 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 manera 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 órdenes SQL a una base de datos.
En la figura 1 .31 se puede ver esquemáticamente la relación entre estos objetos.
Figura 1.31. Esquema de ADO. NET
1.3.4. Los acontecimientos: concepto, asociación de acciones, eventos oyentes.

Una aplicación no puede saber en qué momento el usuario querrá llevar a cabo una
determinada funcionalidad. Esta interacción será asíncrona durante la ejecución del
programa. Los eventos o acontecimientos 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 otras veces
no queremos tratar el evento con ninguna acción (por ejemplo cuando el usuario presiona
con el ratón sobre un texto al que no hemos asignado ninguna información
complementaria).
Para aclarar su significado, se llamarán algunos de los evento 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.
En la sección "Actividades" de la web del módulo

puede encontrar un ejercicio resuelto con el uso de
los controles básicos del cuadro de herramientas.
De este modo, si queremos que un texto se ponga de color rojo en situarnos encima, y de
color gris en salir (con el ratón), tenemos que crear las instrucciones de los
acontecimientos mouseEntered y mouseExited ; el primer evento se encargará de poner el
texto de color rojo y el segundo de ponerlo de color gris.
1.3.5. Edición del código generado por las herramientas de diseño

Los entornos integrados de desarrollo y las 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 la necesidad de tener que 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 modificar y adecuar 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 manera 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 editar, 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
habrá sido de mucha ayuda la herramienta de desarrollo. Se puede ver un ejemplo de
edición de código con el Microsoft Visual Studio en la figura 1 .32 .
Figura 1.32. Herramienta de diseño
Prácticamente todos los IDE que hay 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.

Desarrollo de Interfaces

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Desarrollo de Interfaces

Încărcat de

Drepturi de autor:

Formate disponibile

11/11/2017 Desarrollo de interfaces

1. Confección de interfaces de usuario

Actualmente, tiene alrededor multitud de ejemplos de aplicaciones informáticas, con las

1.1. Introducción a las interfaces de usuario

Comenzaremos recordando el funcionamiento de un sistema informático. Como consigue

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 la

En la figura 1 .2 se puede ver un ejemplo de interfaz actual de un microondas, presentado

Figura 1.2. Interfaz de un microondas

Hay muchos tipos de aplicaciones informáticas. Se pueden agrupar según la finalidad, el

1.1.1. ¿Qué son las interfaces de usuario?

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

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

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

Figura 1.3. Interfaz gráfica IPAD

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

X Window : incorpora un modelo cliente-servidor que permite el uso directo

Open Look Muestra y ejecutar varias aplicaciones de forma simultánea en

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

En la figura 1 .4 se puede ver un ejemplo de interfaces en el sistema operativo Windows

Figura 1.4. Interfaz gráfica de Windows 3.11 | Unitat1 apartado1 | http:

/ En. Wikipedia. Org / wiki / File: Windows_ for_ Workgroups. Png

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

Configuración de las interfaces gráficas de usuario y del entorno de trabajo.

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

1.1.2. Evolución de las interfaces de usuario

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

Interfaces de usuario basadas en la línea de instrucciones

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)

Asimismo la empresa Xerox desarrolló, después de muchos años de investigaciones en el

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)

1,981 : Xerox Star

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

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

En la figura 1 .9 se puede ver un ejemplo de sistema operativo con un entorno WIMP. El

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

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

La primera nueva "dimensión" que se incorporó fue la de utilizar elementos multimedia.

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

1.1.3. Tipo de interfaces de usuario

Habrá que tener en cuenta el nivel de conocimientos

WIMP es un estilo de interacción que utiliza normalmente un ratón para controlar la

El estilo de interacción WIMP búsqueda reducir el tiempo de aprendizaje que necesitará

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

De hardware : se trata de interfaces que permiten la interacción entre el usuario y el

Otras maneras de clasificar las interfaces es según la arquitectura de las aplicaciones y su

Aplicaciones locales: interfaces Winforms. Estas aplicaciones se desarrollan

Plataformas RichClient : Son herramientas de desarrollo de software que

1.1.4. Elementos de las GUI. Propiedades y características

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

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

permitirá comparar la ejecución de dos funcionalidades o tener dos interfaces diferentes

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

En la figura 1 .11 se muestra un ejemplo de un cuadro de diálogo generado por la

Figura 1.11. Ejemplo de cuadro de diálogo

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