Interface Gráfica (GUI)

La evolución de la informática permitió pasar de comandos crípticos a entornos visuales intuitivos. Una GUI (Interfaz Gráfica de Usuario) permite a los usuarios interactuar con dispositivos electrónicos a través de indicadores visuales.

En esta lección, utilizaremos estos 5 términos clave:

GUI (Interfaz Gráfica de Usuario): Entorno visual que utiliza iconos y menús para interactuar con el sistema.
Widget (Componente): Elemento básico de interacción, como botones, ventanas o barras de desplazamiento.
Event (Evento): Acción detectada por el sistema (como un clic) que dispara una respuesta en la interfaz.
Layout (Disposición): La estructura o diseño que organiza cómo se posicionan los elementos en pantalla.
Accessibility (Accesibilidad): El diseño de interfaces utilizables por personas con diversas capacidades.

Componentes y Programación de Interfaces

A diferencia de la Shell, donde el flujo es lineal, una GUI (Interfaz Gráfica de Usuario) se basa en la programación dirigida por eventos. Cada Widget (Componente) permanece a la espera de un Event (Evento) del usuario.

// Ejemplo conceptual de manejo de un Event en un Widget
const submitButton = document.querySelector('#btn-save');

// El sistema "escucha" el Event
submitButton.addEventListener('click', () => {
    console.log('Procesando información...');
});

Diagrama de un Layout mostrando la jerarquía de Widgets y el flujo de un Event

Diseño y Responsabilidad

El Layout (Disposición) es fundamental para la experiencia de usuario (UX), ya que guía la vista y facilita la navegación. Finalmente, la Accessibility (Accesibilidad) no es una opción, sino un estándar: el uso de lectores de pantalla, contrastes adecuados y navegación por teclado asegura que la GUI sea inclusiva para todos.