Widget

componente grafico di una interfaccia utente di un programma
Nota disambigua.svg Disambiguazione – Se stai cercando la serie animata, vedi Widget: un alieno per amico.

Un widget, in informatica, nell'ambito della programmazione, è un componente grafico di una interfaccia utente di un programma, che ha lo scopo di facilitare all'utente l'interazione con il programma stesso. Il termine, applicato per la prima volta agli elementi dell'interfaccia utente durante il Project Athena negli anni ottanta del XX secolo, deriva dalla contrazione dei termini "window" e "gadget". In italiano detto congegno[1] (o elemento) grafico, può essere una vera e propria miniapplicazione (cfr. applet).

CaratteristicheModifica

Tipici esempi di congegni sono i pulsanti dell'interfaccia grafica di un programma (che possono essere premuti per inviare comandi) o i checkbox[2] 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).

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[3], denominati Gadget, quelli di Yahoo Widgets[4], quelli presenti in Mac OS[5], quelli per Windows Mobile[6] 6.5 e quelli della piattaforma web CMS WordPress[7]. I CMS hanno generalmente tutti dei plugin che creano widget personalizzabili[7]. In alternativa si possono creare programmando in PHP o ASP.NET[8].

Tra quelli più usati, ci sono quelli per rappresentazioni meteorologiche, per il monitoraggio dell'hardware (utilizzo CPU, RAM o 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[9]Modifica

Esempi webModifica

Widget di invio mail HTML-SVG-CSS[10]:

<a href="mailto:esempio@gmail.com" 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>

Esempio di checkbox:

<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>

Attributi WAI ARIA per l'accessibilità dei widgetModifica

 Lo stesso argomento in dettaglio: Wai-aria e 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à dei contenuti dinamici e dei componenti per l'interfaccia utente sviluppati con AJAX, HTML, JavaScript e altre tecnologie collegate[11]

  • aria-autocomplete
  • aria-checked
  • aria-disabled
  • aria-errormessage
  • aria-expanded
  • aria-haspopup
  • aria-hidden
  • aria-invalid
  • aria-label
  • aria-level
  • aria-modal
  • aria-multiline
  • aria-multiselectable
  • aria-orientation
  • aria-placeholder
  • aria-pressed
  • aria-readonly
  • aria-required
  • aria-selected
  • aria-sort
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-valuetext

NoteModifica

  1. ^ Vedi IATE.
  2. ^ - HTML: HyperText Markup Language | MDN, su developer.mozilla.org. URL consultato il 22 febbraio 2021.
  3. ^ 20 Gadget per Windows Vista, su Tom's Hardware. URL consultato il 22 febbraio 2021.
  4. ^ Yahoo! Widgets, su Softonic. URL consultato il 22 febbraio 2021.
  5. ^ Giuseppe Migliorino, Dashboard: scopriamo i migliori widget per Mac e come utilizzarli [GUIDE SlideToMac], su Mac - iPhone Italia, 4 febbraio 2011. URL consultato il 22 febbraio 2021.
  6. ^ Widget Windows Mobile Archives, su SoloPalmari. URL consultato il 22 febbraio 2021.
  7. ^ a b (EN) Otto, PHP Code Widget, su WordPress.org. URL consultato il 22 febbraio 2021.
  8. ^ Loading widgets in ASP .NET User Controls, su www.jqwidgets.com. URL consultato il 22 febbraio 2021.
  9. ^ (EN) Basic Widget Types, su Nuxeo Documentation. URL consultato il 22 febbraio 2021.
  10. ^ (EN) Ten-Ton Widgets, su CSS-Tricks, 15 ottobre 2019. URL consultato il 22 febbraio 2021.
  11. ^ (EN) Accessible Rich Internet Applications (WAI-ARIA) 1.1, su www.w3.org. URL consultato il 22 febbraio 2021.

Voci correlateModifica

  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica