Cada widget facilita un tipo específico de interacción entre el usuario y la computadora, y aparece como una parte visible de la interfaz gráfica de usuario de la aplicación, tal como lo define el tema y lo representa el motor de representación. 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, las etiquetas, los botones y las casillas de verificación . Otros actúan como contenedores que agrupan los widgets que se les agregan, por ejemplo, las ventanas , los paneles y las pestañas.
La estructuración de 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, la palabra widget entró en el inglés estadounidense como un término genérico para cualquier dispositivo útil, particularmente un producto fabricado para la venta; un gadget .
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 los 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, 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 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, aparecen en gris.
Cualquier widget muestra una disposición de información que el usuario puede modificar, 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 de GUI son elementos gráficos que se utilizan para crear la interfaz hombre-máquina de un programa. Los widgets de 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 almacenar 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 usan 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 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 mouse. Un widget que no puede responder a dichos eventos se considera deshabilitado. La apariencia de un widget generalmente difiere según esté habilitado o deshabilitado; cuando está deshabilitado, un widget puede dibujarse en un color más claro (" atenuado ") o estar oscurecido visualmente de alguna manera. Vea la imagen adyacente para ver un ejemplo.
La ventaja de desactivar los controles no disponibles en lugar de ocultarlos por completo es que se muestra a los usuarios que el control existe pero que no está disponible en ese momento (con la implicación de que cambiar algún otro control puede hacer que esté disponible), en lugar de dejar al usuario posiblemente con la incertidumbre de dónde encontrarlo. En los cuadros de diálogo emergentes, los botones pueden aparecer en gris poco después de su aparición para evitar clics accidentales o dobles toques involuntarios.
Un concepto relacionado (pero diferente) es el de 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 están alojados en un motor de widgets .
Lista de widgets genéricos comunes
Varios widgets mostrados en UbuntuLos widgets de Qt se representan según tres máscaras diferentes (diseño artístico): Plastik, Keramik y Windows
Selección y exposición de colecciones
Botón : control en el que se puede hacer clic para realizar una acción. Equivalente a un pulsador que se encuentra en instrumentos mecánicos o electrónicos.
Botón de opción : control en el que se puede hacer clic para seleccionar una opción de una selección de opciones, de forma similar a la selección de 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 seleccionado anteriormente.
Casilla de verificación : control en el que se puede hacer clic para habilitar o deshabilitar una opción. También se denomina casilla de verificación. La casilla indica un estado "activado" o "desactivado" mediante una marca de verificación ☑ o una cruz ☒. Puede mostrarse en un estado intermedio (sombreado o con un guion) para indicar que varios objetos en una selección múltiple tienen diferentes valores 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 : funciona de manera similar a una casilla de verificación. Se puede activar y desactivar, pero a diferencia de las casillas de verificación, este suele tener un efecto inmediato.
Botón de alternancia: funciona de manera similar a una casilla de verificación, funciona como un interruptor , aunque aparece como un botón. Se puede activar y desactivar.
Botón dividido: control que combina un botón (que normalmente invoca alguna acción predeterminada) y una lista desplegable con acciones secundarias relacionadas
Botón de ciclo : un botón que hace circular su contenido a través de dos o más valores, lo que permite seleccionar uno de un grupo de elementos.
Control deslizante : 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 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 dentro de 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 : lista de elementos para 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, íconos, 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 (generalmente 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 incluir varios 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 diseñado para permitir al usuario ingresar texto
Producción
Etiqueta : texto utilizado para describir otro widget
Barra de estado : un elemento de control gráfico que constituye 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 utilizado para visualizar la progresión de una operación extendida de la computadora, como una descarga, una transferencia de archivos o una instalación.
Barra de información : un elemento de control gráfico utilizado por muchos programas para mostrar información no crítica al 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 puede almacenar de forma compacta contenido que se oculta o se revela al hacer clic en la pestaña del widget.
Cajón : Láminas o superficies laterales que contienen contenido suplementario y 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 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 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, carátulas de álbumes o fotografías.
Bubble Flow: un elemento animado y bidimensional que permite a los usuarios explorar e interactuar con toda la vista de árbol de un hilo de discusión.
Carrusel (informática): un widget gráfico utilizado para mostrar tarjetas visuales de forma 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 ACM SIGGRAPH sobre software de interfaz de usuario . págs. 46–55. doi :10.1145/62402.62407. ISBN0897912837. Número de identificación del sujeto 12924752.
^ Swick, Ralph R.; Weissman, Terry (1988). X Toolkit Widgets - Interfaz X en lenguaje C. pág. 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 Winter . 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 .
^ https://material-ui.com/demos/drawers/ Componente Drawer de React - Material-UI
Enlaces externos
Aplicaciones web empaquetadas (widgets): empaquetado y configuración XML (segunda edición) - Recomendación del W3C del 27 de noviembre de 2012
Widgets 1.0: El panorama de los widgets (primer trimestre de 2008). Borrador de trabajo del W3C del 14 de abril de 2008
Requisito para la estandarización de widgets. Nota del grupo de trabajo del W3C del 27 de septiembre de 2011
