Button (informatica): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m ortografia |
rimossi wl secondo linee guida vedi Wikipedia:Wikilink#Wikilink nei titoli di sezioni e sottosezioni |
||
| (24 versioni intermedie di 14 utenti non mostrate) | |||
Riga 1:
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'''.
== Uso ==
Per la definizione dell'oggetto bisogna rifarsi all'elemento [[input]], dato che questo tag permette di definire vari tipi di oggetto di
=== Tipi di bottoni ===
Line 14 ⟶ 12:
=== Definire un bottone ===
C'è da fare una piccola parentesi su quando riguarda la definizione del tag nella
Esistono due modi che equivalgono a definire lo stesso tipo di oggetto in [[HTML]] per la definizione di un button.
<syntaxhighlight lang="html4strict">
<input type="button"></input>
</syntaxhighlight>
<syntaxhighlight lang="html4strict">
<button></button>
</syntaxhighlight>
==== W3C HTML 4.0 Recommendation ====
Nella definizione della [[W3C]] dovremo dunque differenziare i due tag.
Nel primo caso compaiono i seguenti attributi:
Nel secondo caso abbiamo invece:
=== Proprietà ===
{|class="wikitable"
! Proprietà
! Funzione
|-
| disabled || Abilita o disabilita l'oggetto
|-
| form || Ritorna un puntatore al form di riferimento
Line 81 ⟶ 83:
== JavaScript e button ==
A livello di [[
=== Metodi ===
*<code>blur()</code>: rimuove il fuoco dall'
*<code>click()</code>: simula l'evento di mouse-click.
*<code>focus()</code>: ottiene il fuoco per l'
=== Eventi ===
*<code>onBlur</code>: codice da eseguire quando si perde il fuoco.
*<code>onClick</code>: codice da eseguire quando viene cliccato l'oggetto.
*<code>onFocus</code>: codice da eseguire quando si ottiene il fuoco.
*<code>onMouseDown</code>: codice da eseguire quando si clicca l'oggetto con il [[mouse]].
*<code>onMouseUp</code>: codice da eseguire quando si rilascia l'oggetto con il mouse.
== 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=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">{{Cita web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|titolo=Loving & Hating the Hamburger Icon|data=17 settembre 2018|sito=Webdesigner Depot|lingua=en|accesso=23 febbraio 2019}}</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 Icon" />.
=== Esempio ===
HTML<syntaxhighlight lang="html">
<nav role="navigation">
<div id="menuHamburger">
<input type="checkbox" />
<ul id="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>Prodotti</li></a>
<a href="#"><li>Info</li></a>
<a href="#"><li>Contatti</li></a>
</ul>
</div>
</nav>
</syntaxhighlight>CSS<syntaxhighlight lang="css">
#menuHamburger
{
display: block;
position: relative;
top: 100px;
left: 100px;
z-index: 1;
user-select: none;
}
#menuHamburger a
{
text-decoration: none;
color: grey;
transition: color 0.3s ease;
}
#menuHamburger a:hover
{
color: red;
}
#menuHamburger input
{
display: block;
width: 80px;
height: 72px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menuHamburger span
{
display: block;
width: 43px;
height: 7px;
margin-bottom: 5px;
position: relative;
background: #f2eded;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.65s ease;
}
#menuHamburger span:first-child
{
transform-origin: 0% 0%;
}
#menuHamburger span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuHamburger input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuHamburger input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuHamburger input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 500px;
margin: -200px 0 0 -60px;
padding-top: 125px;
background: #dbdbdb;
list-style-type: none;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 20px 0;
font-size: 32px;
}
#menuHamburger input:checked ~ ul
{
transform: none;
}
</syntaxhighlight>
== 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=10 febbraio 2021}}</ref>:<syntaxhighlight lang="css">
.selector {
&:hover,
&:focus,
&:active {
}
}
</syntaxhighlight>Gli stati di "hover" sono generalmente rappresentati da un cambiamento di colore:<syntaxhighlight lang="css">
button {
background-color: #00ff00;
}
button:hover {
background-color: #ff00ff;
}
button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}
</syntaxhighlight>È possibile utilizzare una combinazione di <code>outline</code>, <code>border</code>e <code>box-shadow,</code>le proprietà per creare stili di messa a fuoco (quando per esempio il mouse clicca il bottone o quando l'utente lo ha già cliccato almeno una volta):<syntaxhighlight lang="css">
button:active {
background-color: #666;
border-color: #666;
color: #333;
}
</syntaxhighlight>
==== Tecniche ====
Esempio di un bottone creato solo in [[CSS|CSS 3]] (lo stesso risultato è ottenibile con un'immagine vettoriale o bitmap fatta in [[Inkscape]], [[Adobe Illustrator|Illustrator]], [[GIMP|Gimp]] o [[Adobe Photoshop|Photoshop]]):<syntaxhighlight lang="css">
.BUTTON_prova {
background: #3D94F6;
background-image: linear-gradient(top, #3D94F6, #C4CDDD);
color: #FFFFFF;
font-family: Brush Script MT;
font-size: 40px;
font-weight: 100;
padding: 40px;
box-shadow: 1px 1px 20px 0 #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.BUTTON_prova:hover {
border: solid #337FED 1px;
background: #1E62D0;
background-image: linear-gradient(top, #1E62D0, #3D94F6);
border-radius: 20px;
text-decoration: none;
}
</syntaxhighlight>
[[File:Example-button.png|alt=Risultato|centro|miniatura|Risultato]]
=== Esempi ===
<gallery>
File:Button-css-3.png|alt=Bottoni animati con CSS3 Animations. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse|Bottoni animati con [[CSS Animations|CSS3 Animations]]. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse
File:Button-css-2.png|alt=Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap|Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap
File:Button-css.png|alt=Esempi di bottoni formattati con CSS o SVG o programmi di grafica|Esempi di bottoni formattati con CSS o SVG o programmi di grafica
</gallery>
== Note ==
<references/>
{{Portale|informatica}}
[[Categoria:XML DOM]]
| |||