Widget gráfico

Elemento de interacción en una interfaz gráfica de usuario
gtk3-demo, un programa para demostrar los widgets en GTK+ versión 3

Un widget gráfico (también elemento de control gráfico o control ) en una interfaz gráfica de usuario 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 de computadora interactúa a través de la 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 representarlos. [1]

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.

Los constructores de interfaces gráficas de usuario facilitan la creación de GUI de manera 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 a través de manipulación directa .

Historia

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 .

En 1988, el término widget aparece en el contexto del Proyecto Athena y el sistema X Window . En An Overview of the X Toolkit de Joel McCormack y Paul Asente, se dice: [2]

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, todavía 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.

A veces los widgets se califican como 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 mouse de computadora ).

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 Ubuntu
Los 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.
  • 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 elegirlo de la lista de opciones existentes.
  • Icono : un símbolo rápidamente 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 ingresar números o texto en filas y columnas.
  • 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
  • Información sobre herramientas : ventana informativa que aparece cuando el mouse se desplaza sobre otro control
  • Ayuda con globos
  • 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.

Véase también

Referencias

  1. ^ "Microsoft: elementos gráficos". msdn.microsoft.com . Microsoft . Consultado el 27 de abril de 2015 .
  2. ^ 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. ISBN 0897912837. Número de identificación del sujeto  12924752.
  3. ^ Swick, Ralph R.; Weissman, Terry (1988). X Toolkit Widgets - Interfaz X en lenguaje C. pág. 1.
  4. ^ 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 .
  5. ^ "¿Qué es un widget? - Definición de WhatIs.com". WhatIs.com . Consultado el 3 de junio de 2020 .
  6. ^ https://material-ui.com/demos/drawers/ Componente Drawer de React - Material-UI
  • 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
Retrieved from "https://en.wikipedia.org/w/index.php?title=Graphical_widget&oldid=1243938438"