Interfaz Gráfica de Usuario (GUI)

Alumna: Garcia Calderon Zaira Linnet

Materia: Tópicos Avanzados de Programación
Maestro: Jorge Carranza Gómez
Hora: 2:00 – 3:00
 ¿Qué es una interfaz Gráfica de Usuario?
Está compuesto por un amplio conjunto de componentes de interfaces de usuario que
funcionen en el mayor número posible de plataformas. La interfaz de usuario permite al
programa interactuar con el usuario.

Introducción
Definición: La interfaz Gráfica de usuario, conocida en inglés como Graphical User
Interface (GUI) es la forma en que un usuario puede interactuar con un dispositivo
informático sin introducir comandos de texto en una consola. Es un entorno visual
amigable que permite al usuario realizar cualquier acción sin necesidad de tener
conocimientos de programación.
Un ejemplo del GUI son los entornos Windows, MacOs o Android, gracias a los cuales
se pueden enviar comandos a través de gestos o movimientos de ratón, sin necesidad de
introducir ningún código.

Características Generales de la GUI

• La GUI es lo primero que juzga en una aplicación.
 • Ponen limitaciones en la comunicación maquina con el usuario.
• Hay que tener siempre presente la interfaz de usuaria que determina la usabilidad
de la aplicación.
• Facilidad
• Diseño ergonómico mediante el uso de menús, barras de acciones o íconos
• Operaciones rápidas, reversibles; que sea de cambios inmediatos
• Contiene herramientas de ayuda que orientan al usuario.

¿Para qué sirven las Interfaces gráficas de usuario?

Su función principal es simplificar la comunicación entre una máquina o un sistema
operativo y un usuario. Antes de que se desarrollaran y popularizaron las GUI, solo las
personas con conocimientos profundos de informática podían usar un computador, pero
las interfaces gráficas sustituyeron la complejidad de los comandos por acciones
predeterminadas simbolizadas por elementos visuales muy sencillos de comprender.
A mediados de los ochentas, Mac se convirtió en el referente de las interfaces gráficas
amigables desarrollando equipos con funciones muy complejas, pero “tan fáciles de usar
como una tostadora”, y por esas mismas fechas Microsoft lanzó Windows 1.0, un sistema
operativo que se caracterizaba por tener una interfaz gráfica similar, lo que le valió una
demanda millonaria de parte de Apple.
Una buena GUI no solo es importante para los programas, sistemas operativos y
aplicaciones. Se estima que el 68% de los visitantes que abandonan un sitio web lo hacen
debido a que la experiencia de usuario, incluyendo la Interfaz, no está optimizada para
sus necesidades y expectativas.

Ventajas
✓ Simple y fácil de usar.
✓ Diseño visualmente atractivo.
✓ Incluso los usuarios con menos conocimientos técnicos pueden ejecutar
aplicaciones simples con la GUI.
✓ La representación visual facilita enormemente la búsqueda de documentos y
archivos.
✓ El sistema responde a instrucciones que el usuario puede indicar de forma muy
intuitiva gracias al formato visual.
✓ El sistema responde a instrucciones que el usuario puede indicar de forma muy
intuitiva gracias al formato visual.

Desventajas
 Menor flexibilidad: solo se pueden ejecutar instrucciones preprogramadas.
 La funcionalidad del sistema no se puede cambiar ni adaptar.
 Las GUI requieren una cantidad de memoria relativamente grande en el sistema.
  Las GUI son más lentas que las interfaces basadas únicamente en la línea de
comandos.
 Para el desarrollador, es comparativamente más difícil diseñar una GUI fácil de
utilizar.
 Algunas aplicaciones requieren más tiempo para ejecutarse.

¿Qué requisitos debe cumplir una GUI?

Una buena GUI debe ser, sobre todo, fácil de utilizar para el usuario. Durante la fase de
diseño, es importante que la GUI se controle de manera intuitiva. No obstante, para
lograrlo es necesario comprender bien las necesidades y preferencias del usuario. Un
diseño orientado a la experiencia de usuario tiene el propósito de proporcionar al usuario
lo que este espera de la aplicación. Si vas a desarrollar una GUI, presta atención a los
siguientes aspectos:
Mantén la simplicidad: se recomienda prescindir de elementos de diseño innecesarios y
elegir designaciones simples y fáciles de comprender.
Diseña con orientación a un objetivo: cada página debe estar bien estructurada; cada
elemento debe tener una función clara.
Consistencia: si se utilizan múltiples elementos y gráficos, es importante que todos los
componentes individuales sean consistentes entre sí.
Diseño y tipografía: las unidades de diseño, los colores y los textos deben resaltar u
ocultar el elemento, dependiendo de la finalidad del componente. También es importante
utilizar fuentes y tamaños de fuente apropiados para la función y fáciles de comprender.
Actualizaciones de usuario: una interfaz gráfica de usuario también debe informar sobre
errores y cambios en el estado.

Componentes
Las interfaces gráficas de usuario integraron en sus inicios una novedad que hoy en día
es de uso corriente: el mouse o ratón, que fungía como puntero para señalar y seleccionar
los diferentes elementos de la GUI, que tradicionalmente se categorizaron como ventanas,
iconos o carpetas.
Contenedores: Un contenedor es un componente que puede mostrar en su interior otros
componentes. A los componentes que no son contenedores se les conoce como
componentes atómicos.
• Menús: Los menús son elementos que contienen botones distribuidos verticalmente. La
pulsación de uno de estos botones abrirá un nuevo menú o bien iniciará alguna acción de
la aplicación. Los menús pueden aparecer al pulsar el botón secundario del ratón sobre
algunos elementos de la interfaz. Si el contenido del menú depende del elemento pulsado,
se denomina menú contextual.
• Barras de menús: Las barras de menús suelen aparecer en la parte superior de las
ventanas. Se componen de una barra horizontal con botones, que al ser pulsados
despliegan verticalmente un menú.
Ventanas de aplicación: Las ventanas de aplicación son aquellas que contienen a todos
los elementos de una aplicación.
• Ventanas: Las ventanas son elementos encargados de albergar a otros y que
generalmente, se pueden mover libremente por la pantalla. Existen diferentes tipos en
base a su uso y características.
• Cuadros de diálogo: Los cuadros de diálogo son ventanas que, normalmente, se
muestran un breve periodo de tiempo en la pantalla. Se suelen utilizar para informar al
usuario de alguna situación o pedirle datos en un momento determinado.

• Ventanas internas: Las ventanas internas son un tipo de ventanas específico. Se suelen
utilizar para albergar documentos dentro de la ventana de aplicación o para mostrar cajas
de herramientas.
• Componentes: Todos aquellos elementos de una interfaz gráfica con entidad propia y
una funcionalidad asociada con componentes. Por ejemplo: botones, barras de
desplazamiento, etiquetas, imágenes, listas desplegables, tablas, árboles, etc. No son
componentes, por ejemplo, los colores, las líneas, las letras, los píxeles, etc.
• Controles: Los controles son aquellos componentes que pueden recibir información del
usuario cuando éste interactúa con la aplicación mediante el ratón o el teclado. Los más
comunes son: botones, barras de desplazamiento, cuadros de texto, etc.
CONTROLES MÁS USUALES Y SUS CARACTERÍSTICAS
La lista de controles que pueden utilizarse para confeccionar una interfaz de usuario
basada en formularios Windows es muy extensa, pero existe un grupo cuyo uso resulta
mucho más frecuente. Forman parte de este grupo los botones, cuadros de texto, listas,
botones de radio y etiquetas de texto, entre otros. A la hora de insertar un control en el
formulario tenemos varias opciones: hacer doble clic sobre el control en el Cuadro de
herramientas, hacer clic sobre el control y después en el punto del formulario donde se
desea colocar, o bien, hacer clic sobre el control sin soltar y a continuación arrastrar y
soltar sobre el formulario a fin de delimitar el área que deseamos asignar como tamaño
inicial.
RECUADROS DE TEXTO
• TextBox: Es el más simple y utilizado. Sirve para pedir una o varias líneas de texto sin
más control intrínseco que el de poder limitar la longitud, el número máximo de caracteres
a introducir.
• MaskedTextBox: Similar al anterior, añade las propiedades necesarias para conseguir
que la información introducida se ajuste a una cierta máscara o patrón, como puede ser la
de un teléfono, NIF, código postal, etc.
• RichTextBox: Se utiliza para facilitar la introducción o visualización de texto con
formato, usando estilos de párrafo y carácter tales como la alineación, sangrado, tipos y
tamaños de letra, bolos, etc.
En los tres casos la propiedad Text nos permite tanto recuperar el texto introducido en
ejecución como modificarlo, mediante una simple asignación.
•Los controles TextBox y RichTextBox cuentan también con la propiedad Lines, una
matriz de tipo string que hace posible el acceso individual a cada una de las líneas de
texto en lugar de al contenido completo.
BOTONES DE RADIO Y DE SELECCIÓN
A veces no es necesario que el usuario introduzca un dato escribiéndolo mediante teclado,
sino que puede elegirlo entre varias opciones exclusivas entre sí o, sencillamente, marcar
o desmarcar una cierta posibilidad.
En estos casos se usan dos tipos de botones: RadioButton y CheckBox. Ambos tienen en
común los siguientes miembros fundamentales:
• Text: Contendrá el texto descriptivo de la opción y que aparecerá junto al botón.
• Checked: Esta propiedad de tipo bool determina si el botón está marcado o no.
• Click: El evento que se genera al hacer clic sobre uno de estos botones.
• CheckedChanged: Evento que notifica un cambio de la propiedad Checked.
Funcionalmente, sin embargo, se comportan de manera diferente. Un CheckBox cambia
de estado cada vez que se hace clic sobre él, invirtiéndose el valor de la propiedad
Checked, sin afectar para nada al resto de controles del mismo tipo que existan en el
contenedor.
• CheckBox Es el control adecuado cuando se quiere dar una opción que el usuario puede
marcar o desmarcar, del tipo sí/no, verdadero/falso.
LISTAS DE DISTINTOS TIPOS
•El siguiente grupo de componentes más utilizado es el de las listas, ya sean simples,
desplegables o de elementos que pueden marcarse y desmarcarse, los tres tipos
representados por los controles ListBox, ComboBox y CheckedListBox,
respectivamente.
•La única diferencia entre un ListBox y un ComboBox es que este último aparece como
un recuadro de texto con una lista desplegable asociada, siendo posible, según el estilo
empleado, escribir en ese recuadro de texto en lugar de elegir un valor de la lista.
•El control ListBox, por el contrario, ocupa un área mayor y muestra un cierto número de
elementos de la lista, así como unas barras de desplazamiento en caso de que fuesen
necesarias.
•En ambos casos las propiedades SelectedIndex y SelectedItem permiten
obtener/modificar el índice del elemento elegido o directamente el elemento.

Por su parte, la particularidad del control CheckedListBox está en que cada elemento
aparece como un CheckBox, de tal forma que es posible marcarlo y desmarcarlo.
Mediante la propiedad CheckedItems se obtiene la colección con los elementos que haya
marcados en cada momento, mientras que Items, como en el caso de las otras listas,
contendría todos los elementos, marcados y no marcados.
•Además de los ya citados en los puntos previos, hay dos controles más cuyo uso es
reiterado en toda aplicación Windows: Label y Button, las etiquetas de texto y los
botones. La finalidad del primero es sencillamente mostrar un texto, el que se asigne a la
propiedad Text, para servir como título o cabecera de listas, secciones y, en general,
introducir cualquier tipo de aclaración o descripción en la ventana.
Como la mayoría de los controles, Label dispone de propiedades como Font, ForeColor
y BackColor que permiten configurar el tipo de letra y los colores de tinta y fondo. El
objetivo del control Button es desencadenar algún tipo de acción: aceptar o rechazar los
datos de un formulario, acceder a una ventana auxiliar para seleccionar un archivo, etc.
También cuenta con la propiedad Text, a la que asignaremos el título que deba aparecer
en el botón, si bien, su característica más importante es el evento Click ya que será el que
ponga en marcha la acción asociada.
Conclusión
En resumen, la interfaz gráfica de usuario (GUI) desempeña un papel fundamental en la
interacción entre los seres humanos y la tecnología digital, facilitando la comunicación y
el control de aplicaciones y sistemas complejos. A lo largo de los años, las GUI han
evolucionado desde simples conjuntos de elementos visuales hasta experiencias
interactivas y envolventes.
Una GUI exitosa se caracteriza por su capacidad para ofrecer accesibilidad, usabilidad y
eficiencia. La disposición inteligente de elementos, la elección adecuada de colores y
tipografía, y la integración de retroalimentación en tiempo real contribuyen a una
experiencia del usuario fluida. Sin embargo, la esencia de una GUI efectiva radica en su
capacidad para comprender las necesidades y expectativas del usuario, permitiéndoles
interactuar de manera intuitiva y lograr sus objetivos de manera eficaz.
El diseño de una GUI implica un equilibrio entre creatividad y funcionalidad. Una estética
atractiva puede captar la atención, pero la funcionalidad sólida y la facilidad de uso son
esenciales para mantener a los usuarios comprometidos a largo plazo. Las pruebas de
usabilidad, la retroalimentación continua y la adaptación a medida que evolucionan las
tecnologías y las preferencias de los usuarios son elementos clave para el éxito a largo
plazo de cualquier interfaz. A medida que avanzamos hacia un futuro impulsado por la
tecnología, las GUI seguirán evolucionando para abordar desafíos emergentes. Desde
interfaces más táctiles e intuitivas hasta la integración de la inteligencia artificial y la
realidad aumentada, las posibilidades son emocionantes. En última instancia, una GUI
exitosa trasciende su función de mero diseño visual y se convierte en un facilitador de
experiencias significativas y productivas para los usuarios en su interacción con el mundo
digital.
Referencias
→ Urrutia, D. (2023). Qué es Interfaz Gráfica de Usario (GUI) - definición y

ejemplos.Arimetrics

https://www.arimetrics.com/glosario-digital/interfaz-grafica-usuario-gui

→ Jose-Antonio-Sandoval-Acosta. (2022). Topicos Avanzados de

PROGRAMACION Unidad 2 GUI Interfaz grafica de usuario. Dokumen.tips.
https://dokumen.tips/engineering/topicos-avanzados-de-programacion-unidad-2-

guinterfaz-grafica-de-usuario.html?page=3

→ Ecdisis Estudio. (2022). ¿Qué es la interfaz gráfica de usuario GUI? Ecdisis

Estudio.

https://ecdisis.com/que-es-la-interfaz-grafica-de-usuario-gui/

→ Equipo editorial de IONOS. (2021). ¿Qué es una interfaz gráfica de usuario (GUI)

IONOS Digital Guide.

https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-una-gui/