Este documento describe los conceptos básicos de las interfaces gráficas de usuario (IGU). Explica que las IGUs utilizan metáforas visuales como ventanas, menús e iconos para simplificar la interacción entre los usuarios y los ordenadores. También describe los principales elementos estructurales de una IGU como ventanas, barras de herramientas y botones, así como los requisitos para que una IGU sea fácil de usar.

1. Interfaces Gráficas
de Usuario
Alumno:
José A. Barazarte
CI: 27165343
Profesor:
Ing. Jose Guzmán
Instituto Universitario Politecnico
Santiago Mariño
Barinas. Edo. Barinas

2. Interface Grafica de Usuario
Con la idea de simplificar el uso de los ordenadores para usuarios de todo tipo y no sólo para los
expertos, se ha convertido en una práctica habitual utilizar metáforas visuales por medio de la
llamada interfaz gráfica de usuario (IGU ó GUI en inglés) para que el usuario interactúe y
establezca unsímbolo del sistema contacto más fácil e intuitivo con el ordenador. Si, como afirma
Neal Stephenson: "en el principio fue la línea de comandos..." línea de comandostal como los
hackers siguen hoy reivindicando no sólo con nostalgia, sino también como una forma de tener
control real sobre las máquinas, en la actualidad prima la cultura de la interfaz "amigable" y vistosa.
En estos casos, un simple clic de ratón sobre algún gráfico (imagen) que aparece en la pantalla,
sustituye a la tediosa tarea de escribir código fuente para que el ordenador interprete que debe
realizar alguna acción. En 1981 aparecieron los primeros ordenadores personales, los llamados
Pcs, pero hasta 1993 no se generalizaron las interfaces gráficas de usuario. El escritorio del
sistema operativo Windows de Microsoft y su sistema de ventanas sobre la pantalla se ha
estandarizado y universalizado, pero fueron los ordenadores Macintosh de la compañía Apple los
primeros que introdujeron las interfaces gráficas de usuario.

3. Una interfaz es un dispositivo que permite comunicar dos sistemas que no hablan el mismo lenguaje.
Restringido a aspectos técnicos, se emplea el término interfaz para definir el juego de conexiones y
dispositivos que hacen posible la comunicación entre dos sistemas. Sin embargo, cuando aquí
hablamos de interfaz nos referimos a la cara visible de los programas tal y como se presenta a los
usuarios para que interactúen con la máquina. La interfaz gráfica implica la presencia de un monitor
de ordenador o pantalla constituida por una serie de menús e iconos que representan las opciones
que el usuario puede tomar dentro del sistema.

4. Estructuras Interfaces Graficas de Usuarios
La estructura de una interfaz gráfica de usuario (GUI) puede variar dependiendo del diseño y
las necesidades específicas de la aplicación o sistema. Sin embargo, en general, una GUI está
compuesta por los siguientes elementos:
• Ventanas: Las ventanas son la base de una GUI y proporcionan un área visual donde se
muestran los elementos de la interfaz. Pueden ser ventanas principales o ventanas
secundarias, como cuadros de diálogo o paneles.
• Barras de herramientas: Las barras de herramientas contienen botones o iconos que
representan acciones o comandos comunes. Estas acciones suelen estar relacionadas con
la funcionalidad de la aplicación, como guardar, imprimir o deshacer.
• Menús: Los menús son listas desplegables que contienen opciones y comandos organizados
en categorías. Los menús pueden estar ubicados en la parte superior de la ventana o en
una barra de menú.
• Botones: Los botones son elementos interactivos que el usuario puede hacer clic para
realizar una acción específica. Pueden tener texto, iconos o ambos

5. • Campos de entrada: Los campos de entrada permiten al usuario ingresar datos, como texto,
números o fechas. Pueden ser campos de texto, casillas de verificación, botones de opción o
listas desplegables.
• Etiquetas: Las etiquetas se utilizan para mostrar texto descriptivo o información sobre los
elementos de la interfaz. Ayudan al usuario a comprender la función o el propósito de un elemento
en particular.
• Paneles: Los paneles son áreas de la ventana que se utilizan para agrupar y organizar elementos
relacionados. Pueden contener otros elementos de la interfaz, como botones, campos de entrada
o etiquetas.
• Iconos: Los iconos son representaciones gráficas de acciones, objetos o conceptos. Se utilizan
para facilitar la identificación rápida y visual de elementos en la interfaz.
Estos son solo algunos de los elementos comunes que se encuentran en una interfaz gráfica de
usuario. La estructura y organización de una GUI pueden variar según el diseño y las necesidades
específicas de la aplicación o sistema.

6. Requisitos que debe cumplir una Interfaz Grafica de Usuario
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.

8. Ejemplo de Interfaz de Usuario

9. Componentes Interfaces Graficas de Usuario
Los componentes en una interfaz de usuario son los elementos visuales con los que
el usuario interactúa para realizar acciones o ingresar información. Estos
componentes pueden variar dependiendo del diseño y la plataforma utilizada, pero
algunos ejemplos comunes incluyen:
• Botones: Permiten al usuario realizar una acción específica al hacer clic o tocar
el botón.
• Campos de texto: Permiten al usuario ingresar y editar texto, como nombres,
contraseñas o direcciones de correo electrónico.
• Etiquetas: Muestran texto descriptivo o información sobre otros elementos de la
interfaz.
• Casillas de verificación: Permiten al usuario seleccionar una opción entre varias.
• Listas desplegables: Muestran una lista de opciones y permiten al usuario
seleccionar una de ellas.
• Barras de desplazamiento: Permiten al usuario desplazarse por contenido que
no cabe completamente en la pantalla.
• Imágenes: Se utilizan para mostrar gráficos o ilustraciones en la interfaz.
• Menús: Proporcionan opciones y comandos organizados en categorías.

11. Contenedores Interfaz Gráfica de Usuario
En una interfaz gráfica de usuario (GUI), los contenedores son componentes que se utilizan para
agrupar y organizar otros componentes. Los contenedores proporcionan una estructura y diseño
visual a la interfaz, permitiendo organizar los elementos de manera lógica y coherente.
Algunos ejemplos de contenedores comunes en una GUI son:
• Ventanas: Las ventanas son el contenedor principal de una aplicación GUI. Pueden contener
otros componentes y proporcionan un área visual donde se muestra la interfaz.
• Paneles: Los paneles son contenedores que se utilizan para agrupar componentes
relacionados. Pueden ser utilizados para dividir la interfaz en secciones o áreas específicas.
• Cuadros de diálogo: Los cuadros de diálogo son ventanas emergentes que se utilizan para
mostrar mensajes, solicitar información o confirmar acciones. Pueden contener componentes
como botones, campos de texto o listas desplegables.
• Pestañas: Las pestañas se utilizan para organizar y mostrar diferentes conjuntos de
componentes en una misma ventana. Cada pestaña representa un contenido o funcionalidad
específica.
• Barras de desplazamiento: Las barras de desplazamiento se utilizan para mostrar contenido
que no cabe completamente en la ventana. Pueden ser horizontales o verticales y permiten al
usuario desplazarse por el contenido oculto.

12. Analogos en C++
En C++, para crear una interfaz gráfica de usuario (GUI), se pueden utilizar bibliotecas como Qt,
wxWidgets o GTK+. Estas bibliotecas proporcionan una amplia gama de componentes y
contenedores para construir interfaces gráficas interactivas.
Algunos de los componentes comunes que se pueden utilizar en una GUI de C++ son:
QPushButton: Un botón que el usuario puede hacer clic para realizar una acción.
#include <QPushButton>
QPushButton *button = new QPushButton("Click me");
2. QLabel: Una etiqueta que muestra texto o imágenes en la interfaz.
#include <QLabel>
QLabel *label = new QLabel("Hello, World!");

13. QLineEdit: Un campo de texto donde el usuario puede ingresar y editar texto.
cpp
#include <QLineEdit>
QLineEdit *lineEdit = new QLineEdit();
QCheckBox: Una casilla de verificación que permite al usuario seleccionar una opción.
cpp
#include <QCheckBox>
QCheckBox *checkBox = new QCheckBox("Check me");
QComboBox: Una lista desplegable que muestra opciones y permite al usuario seleccionar una
de ellas.
cpp
#include <QComboBox>
QComboBox *comboBox = new QComboBox();
comboBox->addItem("Option 1");
comboBox->addItem("Option 2");