Cada widget facilita un tipo específico de interacción usuario-computadora y aparece como una parte visible de la GUI de la aplicación según lo define el tema y lo representa el motor de renderizado. El tema hace que todos los widgets se adhieran a un diseño estético unificado y crea una sensación de cohesión general. Algunos widgets admiten la interacción con el usuario, por ejemplo, etiquetas, botones y casillas de verificación . Otros actúan como contenedores que agrupan los widgets que se les agregan, por ejemplo ventanas , paneles y pestañas.
Estructurar una interfaz de usuario con kits de herramientas de widgets permite a los desarrolladores reutilizar el 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.
Alrededor de 1920, widget entró en el inglés americano como término genérico para cualquier dispositivo útil, en particular un producto fabricado para la venta; un artilugio .
El kit 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 pegamento para ensamblar widgets en una interfaz de usuario completa.
El mismo año, en el manual X Toolkit Widgets - C Language X Interface de Ralph R. Swick y Terry Weissman, dice: [3]
En X Toolkit, un widget es la combinación de una ventana o subventana X y su semántica de entrada y salida asociada.
Finalmente, todavía en el mismo año, Ralph R. Swick y Mark S. Ackerman explican de dónde viene el término widget : [4]
Elegimos este término porque todos los demás términos comunes estaban sobrecargados de connotaciones inapropiadas. Sin embargo, ofrecemos la observación a los escépticos de que la realización principal de un widget es su ventana X asociada y la letra inicial común no es inútil.
Uso
Ejemplo de widgets habilitados y deshabilitados; el marco en la parte inferior está deshabilitado, están atenuados.
Cualquier widget muestra una disposición de información que el usuario puede cambiar, como una ventana o un cuadro de texto . La característica definitoria de un widget es proporcionar un único punto de interacción para la manipulación directa de un tipo determinado de datos. En otras palabras, los widgets son bloques de construcción visuales básicos que, combinados en una aplicación, contienen todos los datos procesados por la aplicación y las interacciones disponibles sobre estos datos.
Los widgets GUI son elementos gráficos que se utilizan para construir la interfaz hombre-máquina de un programa. Los widgets GUI se implementan como componentes de software . Los kits de herramientas de widgets y los marcos de software, como por ejemplo GTK+ o Qt , los contienen en bibliotecas de software para que los programadores puedan usarlos para crear GUI para sus programas.
Se ha desarrollado una familia de widgets reutilizables comunes para contener información general basada en la investigación de Palo Alto Research Center Inc. para la interfaz de usuario de Xerox Alto . Varias implementaciones de estos widgets genéricos a menudo se empaquetan juntas 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 cómo debe comportarse. [5] Cada tipo de widget generalmente se define como una clase mediante programación orientada a objetos ( OOP ). Por lo tanto, muchos widgets se derivan de la herencia de clases.
En el contexto de una aplicación, un widget puede habilitarse o deshabilitarse en un momento determinado. Un widget habilitado tiene la capacidad de responder a eventos, como pulsaciones de teclas o acciones del mouse. Un widget que no puede responder a tales eventos se considera deshabilitado. La apariencia de un widget normalmente difiere dependiendo de si está habilitado o deshabilitado; cuando está deshabilitado, un widget puede dibujarse en un color más claro (" atenuado ") o oscurecerse visualmente de alguna manera. Vea la imagen adyacente para ver un ejemplo.
El beneficio de deshabilitar los controles no disponibles en lugar de ocultarlos por completo es que se muestra a los usuarios que el control existe pero actualmente no está disponible (con la implicación de que cambiar algún otro control puede hacer que esté disponible), en lugar de dejar al usuario inseguro sobre dónde encontrarlo. el control en absoluto. En los cuadros de diálogo emergentes, los botones pueden aparecer atenuados poco después de aparecer para evitar hacer clic accidentalmente o tocar dos veces inadvertidamente.
Un concepto relacionado (pero diferente) es el widget de escritorio , una pequeña aplicación GUI especializada que proporciona información visual y/o fácil acceso a funciones utilizadas con frecuencia, como relojes, calendarios, agregadores de noticias, calculadoras y notas de escritorio. Este tipo de widgets están alojados en un motor de widgets .
Lista de widgets genéricos comunes
Varios widgets mostrados en Ubuntu .Widgets Qt renderizados según tres máscaras diferentes (diseño artístico): Plastik, Keramik y Windows
Selección y exhibición de colecciones.
Botón : control sobre el que se puede hacer clic para realizar una acción. Equivalente a un pulsador como el que se encuentra en instrumentos mecánicos o electrónicos.
Botón de radio : control en el que se puede hacer clic para seleccionar una opción entre una selección de opciones, similar a seleccionar una estación de radio de un grupo de botones dedicados a la sintonización de radio. 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 de los botones del grupo también se anula la selección del botón previamente seleccionado.
Casilla de verificación : control en el que se puede hacer clic para habilitar o deshabilitar una opción. También llamada casilla de verificación. El cuadro indica un estado "encendido" o "apagado" mediante una marca de verificación /marca ☑ o una cruz ☒. Se puede mostrar en un estado intermedio (sombreado o con un guión) para indicar que varios objetos en una selección múltiple tienen valores diferentes para la propiedad representada por la casilla de verificación. Se pueden seleccionar varias casillas de verificación en un grupo, a diferencia de los botones de opción.
Interruptor de palanca : funcionalmente similar a una casilla de verificación. Se puede activar y desactivar, pero a diferencia de las casillas de verificación, esto suele tener un efecto inmediato.
Botón de alternancia: funcionalmente similar a una casilla de verificación, funciona como un interruptor , aunque aparece como un botón. Se puede activar y desactivar.
Botón dividir: control que combina un botón (normalmente invoca alguna acción predeterminada) y una lista desplegable con acciones secundarias relacionadas.
Botón de ciclo : un botón que recorre su contenido a través de dos o más valores, permitiendo así la selección de uno de un grupo de elementos.
Control deslizante : control con un controlador 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 controladores). La barra permite a los usuarios realizar ajustes a un valor o proceso en un rango de valores permitidos.
Cuadro de lista : 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.
Spinner : control de entrada de valores que tiene pequeños botones hacia arriba y hacia abajo para recorrer un rango de valores
Lista desplegable : una lista de elementos entre los que seleccionar. Normalmente, la lista solo muestra elementos cuando se hace clic en un botón o indicador especial.
Menú : control con múltiples acciones en las que se puede hacer clic para elegir una selección para activar
Menú contextual : un tipo de menú cuyo contenido depende del contexto o estado vigente cuando se invoca el menú.
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 : un híbrido de 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.
Enlace : texto con algún tipo de indicador (normalmente subrayado y/o color) que indica que al hacer clic en él se pasará a otra pantalla o página.
Pestaña : un elemento de control gráfico que permite contener múltiples documentos o paneles dentro de una sola ventana
Barra de desplazamiento : un elemento de control gráfico mediante el cual se puede 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 ingresar texto
Producción
Etiqueta : texto utilizado para describir otro widget.
Barra de estado : un elemento de control gráfico que presenta un área de información que normalmente se encuentra en la parte inferior de la ventana.
Barra de progreso : un elemento de control gráfico que se utiliza para visualizar la progresión de una operación extendida de la computadora, como una descarga, transferencia de archivos o instalación.
Barra de información : un elemento de control gráfico utilizado por muchos programas para mostrar información no crítica a un usuario.
Envase
Ventana : un elemento de control gráfico que consta de 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 puede almacenar de forma compacta contenido que se oculta o se revela al hacer clic en la pestaña del widget.
Cajón : hojas laterales o superficies que contienen contenido complementario que se puede anclar, sacar o empujar 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 herramientas, comandos o información de fácil acceso para la aplicación actual.
Ventana de inspección : 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 cuadro dentro del cual se puede agrupar una colección de elementos de control gráfico como una forma de mostrar las relaciones visualmente.
Lienzo : elemento de dibujo genérico para representar información gráfica.
Cover Flow : un elemento animado tridimensional para hojear visualmente instantáneas de documentos, marcadores de sitios web, carátulas de álbumes o fotografías.
Bubble Flow: un elemento animado bidimensional que permite a los usuarios explorar e interactuar en 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 una manera que los usuarios puedan navegar rápidamente, tanto en sitios web como en aplicaciones móviles.
^ "Microsoft: elementos gráficos". msdn.microsoft.com . Microsoft . Consultado el 27 de abril de 2015 .
^ McCormack, Joel; Asente, Paul (1988). "Una descripción general del conjunto de herramientas X". Actas del primer simposio anual de ACM SIGGRAPH sobre software de interfaz de usuario . págs. 46–55. doi :10.1145/62402.62407. ISBN0897912837. S2CID 12924752.
^ Swick, Ralph R.; Weissman, Terry (1988). Widgets del kit de herramientas X: interfaz X en lenguaje C. pag. 1.
^ Ralph R. Swick, Mark S. Ackerman (1988). "El kit de herramientas X: más elementos para crear interfaces de usuario o widgets de alquiler". USENIX Invierno . págs. 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 .
