Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Desarrollo de Interfaces
Desarrollo de Interfaces
D E S A R R O L L O D E I N T E R FA C E S
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 1/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 2/43
11/11/2017 Desarrollo de interfaces
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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 3/43
11/11/2017 Desarrollo de interfaces
Algunos ejemplos de interfaces gráficas de usuario los podemos encontrar en los sistemas
siguientes:
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 5/43
11/11/2017 Desarrollo de interfaces
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:
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 6/43
11/11/2017 Desarrollo de interfaces
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.
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.
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:
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 7/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 8/43
11/11/2017 Desarrollo de interfaces
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
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 9/43
11/11/2017 Desarrollo de interfaces
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:
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).
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 10/43
11/11/2017 Desarrollo de interfaces
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
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 11/43
11/11/2017 Desarrollo de interfaces
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.
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:
API
Del inglés application programming interface ,
aplicación para programar interfaces '. Facilitará la
interacción entre diferente software.
Una última manera de clasificar las interfaces es a partir del software donde se
desarrollará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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 13/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 14/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 15/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 16/43
11/11/2017 Desarrollo de interfaces
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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 17/43
11/11/2017 Desarrollo de interfaces
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.
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 .
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 18/43
11/11/2017 Desarrollo de interfaces
(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 .
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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 19/43
11/11/2017 Desarrollo de interfaces
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.
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.
tipografías
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 20/43
11/11/2017 Desarrollo de interfaces
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.
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:
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 .
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 , ...
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 21/43
11/11/2017 Desarrollo de interfaces
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.
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,
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 22/43
11/11/2017 Desarrollo 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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 23/43
11/11/2017 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.
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:
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 24/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 25/43
11/11/2017 Desarrollo de interfaces
estos términos para poder entender qué será lo más necesario en cada caso, en la creación
de una interfaz gráfica.
¿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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 26/43
11/11/2017 Desarrollo de interfaces
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 ...
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 27/43
11/11/2017 Desarrollo de interfaces
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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 28/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 29/43
11/11/2017 Desarrollo de interfaces
En la figura 1 .23 se puede ver cómo se añade un control de tipo Button al formulario
Form1.
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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 30/43
11/11/2017 Desarrollo de interfaces
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.
icono Descripción
Alinea los controles por debajo.
Centrar los controles verticalmente.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 31/43
11/11/2017 Desarrollo de interfaces
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 32/43
11/11/2017 Desarrollo de interfaces
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 ...).
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 33/43
11/11/2017 Desarrollo de interfaces
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.
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.
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.
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.
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
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 34/43
11/11/2017 Desarrollo de interfaces
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.
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:
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.
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:
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 35/43
11/11/2017 Desarrollo de interfaces
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.
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 .
método:
funciones:
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 36/43
11/11/2017 Desarrollo de interfaces
palabras, los cuadros de diálogo modales son aquellos formularios que hasta que no se
cierran no dejan continuar con la aplicación.
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.
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 .
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 37/43
11/11/2017 Desarrollo de interfaces
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 .
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
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 38/43
11/11/2017 Desarrollo de interfaces
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.
importes System
importes System.Data
importes System.Data.SqlClient
importes System.Windows.Forms
<STAThreadAttribute ()> _
Public Shared Sub Main ()
Application.Run (New Form1 ())
End Sub
Me.dataGridView1.Dock = DockStyle.Fill
Me.Controls.AddRange (New Control () {Me.dataGridView1, Me.ParentForm})
Me.Text = "Ejemplo de DataBinding: DataGrid"
End Sub
End Sub
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 39/43
11/11/2017 Desarrollo de interfaces
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)
Catch ex As SQLException
MessageBox.Show (ex.Message)
End Try
End Sub
End Class
End Sub
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 40/43
11/11/2017 Desarrollo de interfaces
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:
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 41/43
11/11/2017 Desarrollo de interfaces
GetFocus : este evento se activa cuando el control recibe el enfoque, es decir, cuando
se activa el control en tiempo de ejecución para introducir datos o realizar alguna
operación.
LostFocus : es lo contrario del evento anterior, se activa cuando el control pierde el
enfoque, es decir, se pasa a otro control para seguir introduciendo datos.
De 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.
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 42/43
11/11/2017 Desarrollo de interfaces
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.
https://ioc.xtec.cat/materials/FP/Materials/2252_DAM/DAM_2252_M07/web/html/WebContent/u1/a1/continguts.html 43/43