Widget (informatica): differenze tra le versioni

Versione delle 18:16, 16 feb 2019

Versione attuale delle 14:46, 20 set 2025

(36 versioni intermedie di 23 utenti non mostrate)

Riga 1:

[[File:Wikibookmarks.png|thumb|[[Menù a tendina]]]]

{{F|teorie dell'informatica|febbraio 2013}}

Nella [[Programmazione (informatica)|programmazione informatica]], un '''''widget''''' (crasi di ''window'', "finestra", e ''gadget'') è un componente dell'[[interfaccia grafica]] di un programma, tramite il quale l'utente può interagire con il programma stesso.

Un '''''widget''''', in [[informatica]], nell'ambito della [[Programmazione (informatica)|programmazione]], è un componente grafico di una [[interfaccia utente]] di un programma, che ha lo scopo di facilitare all'utente l'interazione con il [[programma (informatica)|programma]] stesso. In italiano è detto ''congegno''<ref>Vedi [http://iate.europa.eu/iatediff/SearchByQuery.do?method=searchDetail&lilId=1758465&langId=&query=widget&sourceLanguage=en&___domain=0&matching=&start=0&next=1&targetLanguages=it IATE].</ref> (o ''elemento'') ''grafico''; può essere una vera e propria ''miniapplicazione'' (cfr. [[applet]]).

Il termine, fu applicato per la prima volta agli elementi dell'interfaccia utente durante il [[Project Athena]] negli [[anni 1980|anni ottanta]] del [[XX secolo]], deriva dalla. contrazioneIn deiitaliano terminidetto "''congegno''<ref>Vedi [[Finestrahttp://iate.europa.eu/iatediff/SearchByQuery.do?method=searchDetail&lilId=1758465&langId=&query=widget&sourceLanguage=en&___domain=0&matching=&start=0&next=1&targetLanguages=it IATE].</ref> (informaticao ''elemento'')|window]] ''"grafico'', può essere una vera e "propria ''miniapplicazione'' (cfr. [[gadgetapplet]]''").

== Caratteristiche ==

==Caratteristiche ed utilizzo==

[[File:Command_button.png|thumb|[[Command button]]]]

Tipici esempi di congegni sono i pulsanti dell'interfaccia grafica di un programma (che possono essere premuti per inviare comandi) o i ''[[checkbox]]'' usati per operare delle scelte fra varie opzioni disponibili. I ''widget'' sono spesso raggruppati in raccolte (''toolkits'') costruite e messe a disposizione dei programmatori in vari ambienti operativi proprio per facilitare la costruzione di interfacce operatore grafiche ([[GUI]]).

[[File:Example_of_a_ribbon_(user_interface_element).png|thumb|[[Ribbon]]]]

[[File:Dialog1.png|thumb|[[Finestra di dialogo]]]]

[[File:Checkbox_States.svg|thumb|[[Checkbox]]]]

[[File:Combo-box.png|thumb|[[Combo box]]]]

[[File:List-box.png|thumb|[[List box]]]]

[[File:Radiobutton.png|thumb|[[Radio button]]]]

Microsoft usa il termine widget per indicare ciò che ai tempi di [[Windows Vista]] era denominato [[Gadget (informatica)|gadget]]: mini applicazioni delle quali l'utente può fruire dei contenuti direttamente in modalità visuale, attraverso un piccolo riquadro.

Spesso i ''widget'' sono racchiusi in speciali barre laterali, che consentono di scegliere quali widget visualizzare o semplicemente di organizzarli.

Tipici esempi di congegni sono i pulsanti dell'interfaccia grafica di un programma (che possono essere premuti per inviare comandi) o le ''[[checkbox]]''<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox|titolo=- HTML: HyperText Markup Language {{!}} MDN|sito=developer.mozilla.org|accesso=2021-02-22}}</ref> usate per effettuare delle scelte fra varie opzioni disponibili. I ''widget'' sono spesso raggruppati in raccolte (''toolkits'') costruite e messe a disposizione dei programmatori in vari ambienti operativi proprio per facilitare la costruzione di interfacce operatore grafiche ([[GUI]]). Spesso i ''widget'' sono racchiusi in speciali barre laterali, che consentono di scegliere quali widget visualizzare o semplicemente di organizzarli.

Tra i ''widget'' più noti e usati vi sono quelli di [[Windows Vista]], denominati Gadget, quelli di [[Yahoo Widgets]], quelli presenti in [[Mac OS]], quelli per [[Windows Mobile]] 6.5 e quelli della piattaforma web CMS [[WordPress]].

Tra i ''widget'' più noti e usati vi sono quelli di [[Windows Vista]]<ref>{{Cita web|url=https://www.tomshw.it/hardware/20-gadget-per-windows-vista/|titolo=20 Gadget per Windows Vista|sito=Tom's Hardware|lingua=it|accesso=2021-02-22}}</ref>, denominati [[Gadget]], quelli di [[Yahoo Widgets]]<ref>{{Cita web|url=https://yahoo-widgets.it.softonic.com/|titolo=Yahoo! Widgets|sito=Softonic|accesso=2021-02-22}}</ref>, quelli presenti in [[Mac OS]]<ref>{{Cita web|url=https://mac.iphoneitalia.com/4306/dashboard-scopriamo-i-migliori-widget-per-mac-e-come-utilizzarli-guide-slidetomac|titolo=Dashboard: scopriamo i migliori widget per Mac e come utilizzarli [GUIDE SlideToMac]|autore=Giuseppe Migliorino|sito=Mac - iPhone Italia|data=2011-02-04|accesso=2021-02-22}}</ref>, quelli per [[Windows Mobile]]<ref>{{Cita web|url=http://www.solopalmari.com/tag/widget-windows-mobile/|titolo=Widget Windows Mobile Archives|sito=SoloPalmari|accesso=2021-02-22}}</ref> 6.5 e quelli della piattaforma web CMS [[WordPress]]<ref name=":0">{{Cita web|url=https://wordpress.org/plugins/php-code-widget/|titolo=PHP Code Widget|autore=Otto|sito=WordPress.org|lingua=en|accesso=2021-02-22}}</ref>. I [[Content management system|CMS]] hanno generalmente tutti dei [[Plugin (informatica)|plugin]] che creano widget personalizzabili<ref name=":0" />. In alternativa si possono creare programmando in [[PHP]] o ASP.NET<ref>{{Cita web|url=https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-user-controls.htm|titolo=Loading widgets in ASP .NET User Controls|accesso=2021-02-22}}</ref>.

Tra quelli più usati, ci sono quelli per rappresentazioni meteorologiche, per il monitoraggio dell'[[hardware]] (utilizzo [[CPU]], [[RAM]] o [[Disco rigido|HDD]]), per il controllo della posta o semplici collegamenti a cartelle presenti sul computer e news scorrevoli. I ''widget'' dello stesso tipo si distinguono principalmente per l'aspetto, piuttosto che per le caratteristiche.

Tra quelli più usati ci sono quelli per rappresentazioni meteorologiche, per il monitoraggio dell'[[hardware]] (utilizzo [[CPU]], [[RAM]] o [[Disco rigido|HDD]]), per il controllo della posta o semplici collegamenti a cartelle presenti sul computer e news scorrevoli. I ''widget'' dello stesso tipo si distinguono principalmente per l'aspetto, piuttosto che per le caratteristiche.

== Lista dei widget maggiormente diffusi ==

Molti software in ambito professionale e business dispongono di widget specifici per lo scopo della singola tipologia di prodotto (ad esempio: CRM, ERP, BI e tantissimi altri).

=== Lista dei widget maggiormente diffusi ===

Lista di widget<ref>{{Cita web|url=https://doc.nuxeo.com/nxdoc/basic-widget-types/|titolo=Basic Widget Types|sito=Nuxeo Documentation|lingua=en|accesso=2021-02-22}}</ref>

* di '''comando'''

** ''[[Command button |''Button'']]''

** [[Dock]]

** [[Menù (informatica)|Menù]]

** Menu

*** [[Barra dei menumenù]]

*** [[MenuMenù a discesatendina]]

*** [[MenuMenù contestuale]]

** [[Ribbon]]

** ''[[Tree view]]''

* di '''dialogo'''

** ''[[Finestra diAbout dialogobox]]''

** ''[[Alert box]]''

** [[AboutFinestra boxdi dialogo]]

* di '''''input'''''

** [[Checkbox]]

* di '''input'''

** ''[[CheckboxCombo box]]''

** [[ComboLista boxdrop-down|Lista a casacata]]

** ''[[Drop-down List box]]''

** ''[[ListRadio box|button]]''List box'']]

** [[Radio button|''Radio button'']]

** [[Slider]]

** [[Spinner (informatica)|Spinner]]

** ''[[Text box|]]''Text box'']]

* di '''navigazione'''

** [[Barra degli indirizzi]]

** [[Barra di scorrimento]]

** [[Breadcrumb]]

** [[Scrollbar]]

** [[Tab (widget)|Tab]]

* di '''''output'''''

** [[Barra di stato]]

* di '''output'''

** [[Etichetta (informatica)|Etichetta]]

**[[Status bar |Barra di stato]]

** ''[[Progress bar]]''

** [[Etichetta (informatica) |Etichetta]]

** [[Progress bar|''Progress bar'']]

** [[Tooltip]]

== Esempi web ==

Widget di invio mail HTML-SVG-CSS<ref>{{Cita web|url=https://css-tricks.com/ten-ton-widgets/|titolo=Ten-Ton Widgets|sito=CSS-Tricks|data=2019-10-15|lingua=en|accesso=2021-02-22}}</ref>:<syntaxhighlight lang="html">

<a href="mailto:[e-mail]" target="_blank" style=" position: fixed; bottom: 10px; right: 10px; background-color: #1E88E5; width: 70px; height: 70px; border-radius: 50%; text-align: center;">

<span style="position: absolute; top: -9999px; left: -9999px;">

Contattaci

</span>

<svg width="40" height="40" viewBox="0 0 24 24" fill="white" style="position: relative; top: 14px;">

<path d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z"></path>

</svg>

</a>

</syntaxhighlight>Esempio di checkbox:<syntaxhighlight lang="html">

<p>Scegli:</p>

<div>

<input type="checkbox" id="scales" name="scales"

checked>

<label for="scales">Scales</label>

</div>

<div>

<input type="checkbox" id="horns" name="horns">

<label for="horns">Horns</label>

</div>

</syntaxhighlight>

=== Attributi WAI ARIA per l'accessibilità dei widget ===

{{Vedi anche|WAI-ARIA|Accessibilità (web)}}

'''WAI-ARIA (''Web Accessibility Initiative - Accessible Rich Internet Applications'')''' è un insieme di documenti pubblicati dal W3C ([[World Wide Web Consortium]]) che specificano come aumentare l'[[Accessibilità (design)|accessibilità]] dei contenuti dinamici e dei componenti per l'interfaccia utente sviluppati con [[AJAX]], [[HTML]], [[JavaScript]] e altre tecnologie collegate<ref>{{Cita web|url=https://www.w3.org/TR/wai-aria-1.1/|titolo=Accessible Rich Internet Applications (WAI-ARIA) 1.1|lingua=en|accesso=2021-02-22}}</ref>

* <code>aria-autocomplete</code>

* <code>aria-checked</code>

* <code>aria-disabled</code>

* <code>aria-errormessage</code>

* <code>aria-expanded</code>

* <code>aria-haspopup</code>

* <code>aria-hidden</code>

* <code>aria-invalid</code>

* <code>aria-label</code>

* <code>aria-level</code>

* <code>aria-modal</code>

* <code>aria-multiline</code>

* <code>aria-multiselectable</code>

* <code>aria-orientation</code>

* <code>aria-placeholder</code>

* <code>aria-pressed</code>

* <code>aria-readonly</code>

* <code>aria-required</code>

* <code>aria-selected</code>

* <code>aria-sort</code>

* <code>aria-valuemax</code>

* <code>aria-valuemin</code>

* <code>aria-valuenow</code>

* <code>aria-valuetext</code>

==Note==

Riga 57 ⟶ 120:

*[[Barra degli strumenti]]<!--

*[[Screenlet]] -->

== Altri progetti ==

{{interprogetto|preposizione=sul|wikt=widget}}

== Collegamenti esterni ==

* {{Collegamenti esterni}}

* {{FOLDOC||widget}}

{{Portale|informatica}}

[[Categoria:Interazione uomo-computer]]