Button (informatica): differenze tra le versioni

Versione delle 19:16, 17 feb 2021

Versione attuale delle 15:26, 19 ago 2024

(7 versioni intermedie di 5 utenti non mostrate)

Riga 1:

{{Nota disambigua|descrizione=informazioni sul pilota di Formula 1|titolo=Jenson Button}}

L'oggetto '''button''' è un oggetto innestato nell'oggetto [[Form]], della definizione [[XML]] DOM. La sua definizione permette di creare molte interazioni con l'utente nelle [[pagina web|pagine web]].

Quando ad esempio si clicca su un [[Form|modulo]] (p.es. quello di [[Wikipedia]] per la modifica delle pagine) si interagisce con l'operazione tramite un elemento '''Button'''.

Line 102 ⟶ 101:

== Hamburger button ==

[[File:Hamburger icon.svg|alt=Classica icona di un hamburger button|miniatura|150x150px|Classica icona di un hamburger button]]

Un ''hamburger button'', così chiamato per la sua involontaria somiglianza con un [[hamburger]], è un pulsante tipicamente posizionato nell'angolo superiore di un sito web. Il suo compito è far apparire o scomparire le voci di menu della pagina web al click dell'utente. Viene particolarmente utilizzato nelle versioni mobile delle pagine web per evitare che esse occupino troppo spazio all'interno della pagina, che su tali dispositivi è molto più ridotto rispetto ai computer<ref>{{Cita web|url=https://blog.hubspot.com/website/hamburger-button|titolo=What is a Hamburger Button — and How Does it Work?|autore=Anna Fitzgerald|sito=blog.hubspot.com|lingua=en|accesso=2021-02-17 febbraio 2021}}</ref>.

=== Critiche ===

È stato affermato che mentre il bottone "hamburger" è ormai conosciuto ma la sua funzionalità non è sempre immediatamente ovvia quando viene visto per la prima volta;  in particolare, gli utenti più anziani meno familiari con l'iconografia moderna potrebbero essere confusi<ref name="Loving & Hating the Hamburger Icon">{{CiteCita web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|titletitolo=Loving & Hating the Hamburger Icon|datedata=17 settembre 2018-09-17|websitesito=Webdesigner Depot|languagelingua=en|access-dateaccesso=23 febbraio 2019-02-23}}</ref>.

Questo bottone può aumentare il ''costo di interazione'' rispetto a un menu tradizionale, richiedendo clic aggiuntivi per recuperare le stesse informazioni, anche se con il vantaggio di un minore utilizzo dello schermo anche nelle [[applicazione mobile|app]] mobili. È stato anche affermato che i designer tendono a sovraccaricare queste icone con troppe informazioni nascoste<ref name="Loving & Hating the Hamburger Icon2Icon">{{Cite web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|title=Loving & Hating the Hamburger Icon|date=2018-09-17|website=Webdesigner Depot|language=en|access-date=2019-02-23}}</ref>.

=== Esempio ===

Line 114 ⟶ 113:

<div id="menuHamburger">

<input type="checkbox" />

<span></span>

<span></span>

<span></span>

<ul id="menu">

<a href="#"><li>Home</li></a>

Line 191 ⟶ 190:

transform: rotate(0deg) scale(0.2, 0.2);

}

#menuTogglemenuHamburger input:checked ~ span:nth-last-child(2)

{

transform: rotate(-45deg) translate(0, -1px);

Line 220 ⟶ 219:

== Formattazione ==

=== Stili [[CSS]] al passaggio del mouse ===

Stati al passaggio del mouse<ref>{{Cita web|url=https://zellwk.com/blog/style-hover-focus-active-states/|titolo=Style hover, focus, and active states differently {{!}} Zell Liew|sito=zellwk.com|lingua=en|accesso=2021-02-10 febbraio 2021}}</ref>:<syntaxhighlight lang="css">

.selector {

&:hover,

Line 286 ⟶ 285:

== Note ==

<references/>

{{Portale|informatica}}