La label è mobile

Venerdì 29 Gennaio 2010 - 07:56

di Cesare Lamanna

Scripting

Che sia non intrusiva come soluzione non c’è dubbio; che richieda poche righe di codice Javascript è vero. Ho un po’ di dubbi sul fatto che sia ‘pratica’, ancor di più sul definirla ‘elegante’. Si tratta dello script basato su MooTools (demo) creato da David Walsh per emulare le sliding labels ottenute via jQuery (demo).

Come si vede, l’effetto consiste nel rendere animate la label associate ai campi di un form, label che scivolano fuori dal campo stesso nel momento in cui esso riceve il focus.

La mia opinione però conta poco. Cosa ne pensate?

Tags:

Categoria: Scripting | Permalink

Commenti

1

Una variante interessante, però è vero, non è detto che sia una soluzione così efficiente. L’effetto è bello da vedere, ma è molto più immediata una label interna che sparisce al clic. Comunque niente batte la chiarezza delle classiche label esterne.

# - postato da Tommaso Baldovino - 29 Gennaio 2010 - 09:09

2

Personalmente, rispetto all’effetto che si otterrebbe con l’attributo placeholder di html5, preferisco questa soluzione.

Mi capita spesso di muovermi da un campo all’altro con il tab in modo automatico, e quando arrivo sul campo del form da compilare, non mi ricordo cosa devo inserire :P

# - postato da Fra_T - 29 Gennaio 2010 - 10:04

3

Non saremmo qui se la tua opinione non contasse “qualcosa”. Comunquesia, concordo sulla bellezza dell’effetto, ma non cambia la sostanza, quindi, perché usare altri script? K.I.S.S.

# - postato da Gio - 29 Gennaio 2010 - 11:56

4

totalmente inutile, a parte che per “infighettire” il sito: se devo lasciare lo spazio vuoto accanto, tantovale che ci metto le label! al massimo posso evidenziare la label del campo col focus attuale per attirare l’attenzione dell’utente sul campo giusto…

# - postato da pbattino - 29 Gennaio 2010 - 12:15

5

Script carino, forse inutile, ma di effetto.

E molti clienti purtroppo guardano più a queste piccole cose che ad accessibilità e indicizzazione sui motori di ricerca.

# - postato da yesWEBcan - 29 Gennaio 2010 - 12:31

6

A me sembra proprio brutto. Come dice pbattino, se devo lasciare spazio, tanto vale metterci le label fin dall’inizio. E usare il placeholder come suggerimento.

Per evidenziare il campo che si sta editando, la cosa più elegante è cambiargli il colore di sfondo, come qua.

# - postato da Andrea - 29 Gennaio 2010 - 13:00

7

Infatti, come già detto, il meccanismo è inutile: se devo lasciare già lo spazio mi evito quello schifo ;-)

# - postato da Cristiano - 29 Gennaio 2010 - 13:27

8

A me piace. Rende più simpatico l’uso del sito.
Sicuramente è da usare solo in alcuni casi non per tutti i tipi di siti.

# - postato da Mte90 - 29 Gennaio 2010 - 15:27

9

Chiedo scusa per il leggero off topic ma vorrei segnalare un link che ho trovato cercando di approfondire l’argomento.
Si tratta di uno script rilasciato in pubblico dominio per implementare il place holder anche nei browser che non lo supportano ancora nativamente.
Sarebbe carino se qualcuno riuscisse a trovare o produrre materiale serio e comprensibile circa l’accessibilità di HTML5 e la compatibilità con eventuali strumenti per persone diversamente abili.
Ad esempio: uno screenreader mi legge il place holder in un form?

# - postato da Luca - 29 Gennaio 2010 - 22:02

10

per essere bello è un bell’effetto… ma perchè complicarsi la vita?

# - postato da Paolo - 30 Gennaio 2010 - 19:24

11

onestamente è molto carino, come tante “morbidezze” via js…

però (e finalmente torna agli onori della citazione) un po’ KISS philosophy non guasterebbe…

quando se ne viene con effetti presi tali e quali dalle librerie, io al mio designer rispondo di farmi cose altrettanto carine con le versioni “rigide” altrimenti che lavora a fare? non ha più ruolo…
e in questo caso gli chiederei di usare la label tradizionale…
in pratica lo costringo al kiss… e deve essere bello come kick!?!

# - postato da EsseZeta - 31 Gennaio 2010 - 16:39

Inserisci il tuo commento:





(puoi usare i seguenti tag HTML per formattare il testo -
a href, b, i, br/, p, strong, em, ul, ol, li, blockquote, pre):

 

Anteprima del commento