
En una interfaz gráfica de usuario (GUI), un widget gráfico (también llamado elemento de control gráfico o control ) es un elemento de interacción , como un botón o una barra de desplazamiento . Los controles son componentes de software con los que un usuario interactúa mediante manipulación directa para leer o editar información sobre una aplicación. Las bibliotecas de interfaz de usuario, como Windows Presentation Foundation , Qt , GTK y Cocoa , contienen una colección de controles y la lógica para renderizarlos. [ 1 ]
Cada widget facilita un tipo específico de interacción entre el usuario y el ordenador, y aparece como parte visible de la interfaz gráfica de usuario (GUI) de la aplicación, definida por el tema y renderizada por el motor de renderizado. El tema unifica el diseño estético de todos los widgets, creando una sensación de cohesión general. Algunos widgets permiten la interacción con el usuario, como las etiquetas, los botones y las casillas de verificación . Otros actúan como contenedores que agrupan los widgets añadidos, como las ventanas , los paneles y las pestañas.
Estructurar una interfaz de usuario con kits de herramientas de widgets permite a los desarrolladores reutilizar código para tareas similares y proporciona a los usuarios un lenguaje común para la interacción, manteniendo la coherencia en todo el sistema de información.
Los creadores de interfaces gráficas de usuario facilitan la creación de interfaces gráficas de usuario de forma WYSIWYG , empleando un lenguaje de marcado de interfaz de usuario . Generan automáticamente todo el código fuente de un widget a partir de descripciones generales proporcionadas por el desarrollador, generalmente mediante manipulación directa .
Historia
Alrededor de 1920, la palabra "widget" entró en el inglés americano como un término genérico para cualquier dispositivo útil, en particular un producto fabricado para la venta; un gadget .
En 1988, el término widget se documenta en el contexto del Proyecto Athena y el Sistema X Window . En Una descripción general del X Toolkit de Joel McCormack y Paul Asente, dice: [ 2 ]
El conjunto de herramientas proporciona una biblioteca de componentes de interfaz de usuario ("widgets") como etiquetas de texto, barras de desplazamiento, botones de comando y menús; permite a los programadores escribir nuevos widgets; y proporciona el elemento clave para ensamblar los widgets en una interfaz de usuario completa.
Ese mismo año, en el manual X Toolkit Widgets - C Language X Interface de Ralph R. Swick y Terry Weissman, dice: [ 3 ]
En el X Toolkit, un widget es la combinación de una ventana o subventana X y su semántica de entrada y salida asociada.
Finalmente, también en el mismo año, Ralph R. Swick y Mark S. Ackerman explican de dónde proviene el término widget : [ 4 ]
Elegimos este término porque todos los demás términos comunes estaban cargados de connotaciones inapropiadas. Sin embargo, para los escépticos, cabe señalar que la principal implementación de un widget es su ventana X asociada, y que la letra inicial común no resulta inútil.
Uso

Cualquier widget muestra una disposición de información modificable por el usuario, como una ventana o un cuadro de texto . La característica principal de un widget es proporcionar un único punto de interacción para la manipulación directa de un tipo de datos determinado. En otras palabras, los widgets son bloques visuales básicos que, combinados en una aplicación, contienen todos los datos procesados por la aplicación y las interacciones disponibles sobre dichos datos.
Los widgets de interfaz gráfica de usuario (GUI) son elementos gráficos que se utilizan para construir la interfaz hombre-máquina de un programa. Se implementan como componentes de software . Los kits de herramientas y los marcos de software para widgets, como GTK+ o Qt , los incluyen en bibliotecas de software para que los programadores puedan utilizarlos para crear interfaces gráficas de usuario para sus programas.
Se ha desarrollado una familia de widgets reutilizables comunes para almacenar información general, basados en la investigación del Palo Alto Research Center Inc. para la interfaz de usuario de Xerox Alto . Varias implementaciones de estos widgets genéricos suelen agruparse en kits de herramientas de widgets , que los programadores utilizan para crear interfaces gráficas de usuario (GUI). La mayoría de los sistemas operativos incluyen un conjunto de widgets listos para personalizar que un programador puede incorporar en una aplicación, especificando su comportamiento. [ 5 ] Cada tipo de widget generalmente se define como una clase mediante la programación orientada a objetos ( POO ). Por lo tanto, muchos widgets se derivan de la herencia de clases.
En el contexto de una aplicación, un widget puede estar habilitado o deshabilitado en un momento dado. Un widget habilitado tiene la capacidad de responder a eventos, como pulsaciones de teclas o acciones del ratón. Un widget que no puede responder a dichos eventos se considera deshabilitado. La apariencia de un widget suele variar según esté habilitado o deshabilitado; cuando está deshabilitado, puede mostrarse en un color más claro ( en gris ) o quedar oculto visualmente de alguna manera. Consulte la imagen adjunta para ver un ejemplo.
La ventaja de deshabilitar los controles no disponibles en lugar de ocultarlos por completo es que se muestra a los usuarios que el control existe, pero que actualmente no está disponible (lo que implica que al modificar otro control podría habilitarlo), en lugar de dejar al usuario con la incertidumbre de dónde encontrarlo. En los cuadros de diálogo emergentes, los botones pueden aparecer atenuados poco después de su aparición para evitar clics accidentales o doble toque involuntario.
En ocasiones, los widgets se denominan virtuales para distinguirlos de sus contrapartes físicas; por ejemplo, botones virtuales en los que se puede hacer clic con un puntero , frente a botones físicos que se pueden presionar con un dedo (como los de un ratón de ordenador ).
Un concepto relacionado (pero diferente) es el widget de escritorio , una pequeña aplicación GUI especializada que proporciona información visual y/o acceso fácil a funciones de uso frecuente como relojes, calendarios, agregadores de noticias, calculadoras y notas de escritorio. Este tipo de widgets se ejecutan mediante un motor de widgets .
Lista de widgets genéricos comunes


Selección y exhibición de colecciones
- Botón : control que se puede pulsar para realizar una acción. Equivalente a un pulsador, como los que se encuentran en instrumentos mecánicos o electrónicos.
- Botón de opción : control que permite seleccionar una opción de entre varias, de forma similar a seleccionar una emisora de radio entre un grupo de botones dedicados a la sintonización. Los botones de opción siempre aparecen en pares o grupos más grandes, y solo se puede seleccionar una opción del grupo a la vez; al seleccionar un nuevo elemento del grupo, se deselecciona también el botón seleccionado anteriormente.
- Casilla de verificación : control que permite activar o desactivar una opción haciendo clic en ella. También se denomina casilla de verificación. Indica si una opción está activada o desactivada mediante una marca de verificación (☑) o una cruz (☒). Puede mostrarse en un estado intermedio (sombreada o con un guion) para indicar que los distintos objetos de una selección múltiple tienen valores diferentes para la propiedad representada por la casilla. A diferencia de los botones de opción, se pueden seleccionar varias casillas de verificación en un grupo.
- Interruptor basculante : Funciona de forma similar a una casilla de verificación. Se puede activar y desactivar, pero a diferencia de las casillas de verificación, suele tener un efecto inmediato.
- Botón de alternancia: Funciona de forma similar a una casilla de verificación , aunque tiene la apariencia de un botón. Se puede activar y desactivar.
- Botón dividido: control que combina un botón (normalmente para ejecutar alguna acción predeterminada) y una lista desplegable con acciones secundarias relacionadas.
- Botón de ciclo : un botón que alterna su contenido entre dos o más valores, lo que permite seleccionar uno de un grupo de elementos.
- Control deslizante : un control con un tirador que se puede mover hacia arriba y hacia abajo (control deslizante vertical) o hacia la derecha y hacia la izquierda (control deslizante horizontal) en una barra para seleccionar un valor (o un rango si hay dos tiradores). La barra permite a los usuarios ajustar un valor o proceso dentro de un rango de valores permitidos.
- Cuadro de lista : un elemento de control gráfico que permite al usuario seleccionar uno o más elementos de una lista contenida en un cuadro de texto estático de varias líneas.
- Selector giratorio : control de entrada de valor que tiene pequeños botones de arriba y abajo para recorrer un rango de valores.
- Lista desplegable : una lista de elementos entre los que elegir. Normalmente, la lista solo muestra elementos cuando se pulsa un botón o indicador especial.
- Menú : control con múltiples acciones en las que se puede hacer clic para elegir una selección que se pueda activar.
- Menú contextual : un tipo de menú cuyo contenido depende del contexto o estado vigente cuando se invoca.
- Menú circular : un menú contextual circular donde la selección depende de la dirección.
- Barra de menú : un elemento de control gráfico que contiene menús desplegables.
- Barra de herramientas : un elemento de control gráfico en el que se colocan botones, iconos, menús u otros elementos de entrada o salida en pantalla.
- Cinta de opciones : un híbrido entre menú y barra de herramientas que muestra una gran colección de comandos en un diseño visual a través de una interfaz con pestañas.
- Cuadro combinado ( cuadro de texto con menú adjunto o cuadro de lista ): una combinación de un cuadro de texto de una sola línea y una lista desplegable o cuadro de lista , que permite al usuario escribir un valor directamente en el control o elegir de la lista de opciones existentes.
- Icono : un símbolo fácilmente comprensible de una herramienta de software, una función o un archivo de datos.
- Vista de árbol : un elemento de control gráfico que presenta una vista jerárquica de la información.
- Vista de cuadrícula o cuadrícula de datos : una vista tabular de datos similar a una hoja de cálculo que permite introducir números o texto en filas y columnas.
Navegación
- Enlace : Texto con algún tipo de indicador (normalmente subrayado y/o color) que indica que al hacer clic en él se accederá a otra pantalla o página.
- Pestaña : un elemento de control gráfico que permite contener varios documentos o paneles dentro de una sola ventana.
- Barra de desplazamiento : un elemento de control gráfico que permite desplazar texto continuo, imágenes o cualquier otro contenido en una dirección predeterminada (arriba, abajo, izquierda o derecha).
Entrada de texto/valor
- Cuadro de texto (campo de edición): un elemento de control gráfico destinado a permitir al usuario introducir texto.
Producción
- Etiqueta : texto utilizado para describir otro widget
- Información sobre herramientas : ventana informativa que aparece cuando el ratón se sitúa sobre otro control.
- Ayuda con globos
- Barra de estado : un elemento de control gráfico que proporciona un área de información, generalmente ubicada en la parte inferior de la ventana.
- Barra de progreso : un elemento de control gráfico que se utiliza para visualizar el progreso de una operación informática prolongada, como una descarga, una transferencia de archivos o una instalación.
- Infobar : un elemento de control gráfico utilizado por muchos programas para mostrar información no crítica a un usuario.
Recipiente
- Ventana : un elemento de control gráfico que consiste en un área visual que contiene algunos de los elementos de la interfaz gráfica de usuario del programa al que pertenece.
- Panel plegable : un panel que permite almacenar contenido de forma compacta y que se oculta o se muestra al hacer clic en la pestaña del widget.
- Cajón : Láminas o superficies laterales que contienen contenido suplementario que pueden anclarse, extraerse o empujarse más allá del borde izquierdo o derecho de la pantalla. [ 6 ]
- Acordeón : una lista de elementos apilados verticalmente, como etiquetas o miniaturas, donde cada elemento se puede "expandir" para revelar el contenido asociado.
- Ventana modal : un elemento de control gráfico subordinado a la ventana principal de una aplicación que crea un modo en el que no se puede utilizar la ventana principal.
- Cuadro de diálogo : una pequeña ventana que comunica información al usuario y solicita una respuesta.
- Ventana de paleta – también conocida como "ventana de utilidades" – un elemento de control gráfico que flota sobre todas las ventanas normales y ofrece acceso rápido a herramientas, comandos o información para la aplicación actual.
- Ventana del inspector : un tipo de ventana de diálogo que muestra una lista de los atributos actuales de un objeto seleccionado y permite cambiar estos parámetros sobre la marcha.
- Marco : un tipo de caja dentro de la cual se puede agrupar un conjunto de elementos de control gráfico como una forma de mostrar relaciones visualmente.
- Lienzo : elemento de dibujo genérico para representar información gráfica.
- Cover Flow : un elemento animado y tridimensional para hojear visualmente instantáneas de documentos, marcadores de sitios web, portadas de álbumes o fotografías.
- Bubble Flow : un elemento animado bidimensional que permite a los usuarios navegar e interactuar con toda la vista de árbol de un hilo de discusión.
- Carrusel (informática) : un widget gráfico que se utiliza para mostrar tarjetas visuales de forma que los usuarios puedan navegar rápidamente, tanto en sitios web como en aplicaciones móviles.
Véase también
- Elementos de la interfaz gráfica de usuario
- Primitiva geométrica
- Motor de widgets para "widgets" inspirados en la física, en su mayoría no relacionados entre sí.
- Kit de herramientas de widgets : una biblioteca de software que contiene una colección de widgets.
- Técnica de interacción
Referencias
- ↑ "Microsoft: Elementos gráficos" . msdn.microsoft.com . Microsoft . Consultado el 27 de abril de 2015 .
- ↑ McCormack, Joel; Asente, Paul (1988). "Una visión general del conjunto de herramientas X" . Actas del 1.er simposio anual ACM SIGGRAPH sobre software de interfaz de usuario . págs. 46–55 . doi : 10.1145/62402.62407 . ISBN 0897912837. S2CID 12924752 .
- ↑ Swick, Ralph R.; Weissman, Terry (1988). Widgets de X Toolkit - Interfaz X del lenguaje C. pág. 1 .
- ↑ Ralph R. Swick, Mark S. Ackerman (1988). "The X Toolkit: More Bricks for Building User-Interfaces –or– Widgets for Hire" . USENIX Winter . pp. 221–228 . Consultado el 20 de noviembre de 2022 .
- ↑ "¿Qué es un widget? - Definición de WhatIs.com" . WhatIs.com . Consultado el 3 de junio de 2020 .
- ↑ https://material-ui.com/demos/drawers/ Componente Drawer React - Material-UI
Enlaces externos
- Aplicaciones web empaquetadas (widgets): empaquetado y configuración XML (segunda edición) - Recomendación del W3C, 27 de noviembre de 2012
- Widgets 1.0: El panorama de los widgets (primer trimestre de 2008). Borrador de trabajo del W3C, 14 de abril de 2008.
- Requisito para la estandarización de widgets. Nota del Grupo de Trabajo del W3C, 27 de septiembre de 2011.
- Elementos de control gráfico
- Elementos de la interfaz gráfica de usuario
- Interfaces gráficas de usuario
