Share
Javascript può aggiungere molti effetti speciali che possono davvero migliorare l'esperienza dell'utente. Ecco 10 tecniche Javascript semplici e intelligenti che aggiungono una dose extra di usabilità a qualsiasi pagina web.
Javascript viene in genere utilizzato come linguaggio estetico nello sviluppo web. Ciò significa che gli sviluppatori web dovrebbero quasi sempre utilizzare Javascript per una cosa sola: Migliorare l'esperienza del visitatore. Esistono molti modi intelligenti e utili per migliorare un sito dal punto di vista dell'interfaccia utente. Uno sviluppatore può trovare quasi tutti i frammenti di Javascript per ottenere ciò che lui o lei vuole realizzare.
Immagine in anteprima di miusam-ck.
Javascript è davvero un linguaggio potente e facile da imparare. Può essere utilizzato per eseguire semplici funzioni estetiche come la commutazione di un elemento. Può essere utilizzato per alimentare un client di posta elettronica dinamico e persino inviare dati istantaneamente. Javascript può essere semplice o avanzato come vuoi che sia.
Un ottimo posto per trovare le tecniche Javascript che possono migliorare le funzionalità del tuo sito sfogliando framework Javascript e i loro plugin e documentazione. Ecco alcuni framework che hanno un sacco di risorse, plugin e comunità dietro di loro:
I framework sono una benedizione per qualsiasi sviluppatore o progettista che desideri aggiungere rapidamente effetti Javascript ai propri layout, senza dover creare codice non elaborato. Molte delle tecniche che utilizziamo di seguito verranno eseguite su framework Javascript come JQuery o MooTools.
È importante notare che molte di queste funzionalità non sono grandi e antipatiche, ma piuttosto piccole e sottili. Troppo spesso gli sviluppatori si lasciano trasportare quando si tratta di aggiungere Javascript. Questi sono piccoli ma molto utile tecniche che possono essere utilizzate da quasi tutti gli sviluppatori. Noterai anche che la maggior parte di queste funzioni si occupa di nascondere abilmente e mostrare informazioni importanti in modi non tradizionali.
La nuvola di tag sub hover di jQuery è un eccellente esempio di un semplice componente di Javascript che aggiunge un tocco piacevole e sottile per etichettare le nuvole. Mentre l'utente si posiziona su un tag specifico e presenta tag secondari associati, viene visualizzata una finestra pop-up che mostra i tag secondari. Semplice, ma efficace.
Opacity Change è un piccolo tutorial su come usare Scriptaculous per fare un cambio di opacità per un elemento.
Le modifiche all'opacità sono ottime per molti motivi diversi: visualizzazione di contenuti in sospensione, visualizzazione di contenuti su cui è stato fatto clic e molte altre utili funzioni.
Essere in grado di ritagliare le foto dopo averle caricate è una funzionalità che potrebbero essere utilizzate da più applicazioni Web. Ecco perché il caricamento e il ritaglio delle immagini di jQuery sono una tecnica Javascript sottoutilizzata. Ritagliare le immagini è una funzione tanto necessaria quando si tratta di caricare immagini, e molte applicazioni Web potrebbero trarre vantaggio dall'aggiunta di questa utile funzionalità.
Onestamente, penso che quasi tutti i caricamenti di immagini potrebbero utilizzare una funzione di ritaglio di base. Tuttavia, il ritaglio di immagini non è la funzione Javascript più semplice da aggiungere a un modulo. È un processo piuttosto complicato, che utilizza librerie di immagini e Javascript. L'utilizzo di questo script basato sul framework jQuery può aggiungere molto all'esperienza dell'utente senza un sacco di codice aggiuntivo.
Man mano che gli hacker diventano più intelligenti e più numerosi, è sempre più importante per gli utenti del sito scegliere password forti e non indovinate che contengano una combinazione di lettere (maiuscole e minuscole), numeri e caratteri speciali. Tuttavia, questo compito è più facile a dirsi che a farsi. Gli utenti in genere non leggono le indicazioni se possono aiutarlo.
Mostrare visivamente la forza della password nei moduli di registrazione è un modo eccellente per incoraggiare gli utenti a rendere le password più difficili. Mentre questo sta lentamente diventando più comune questa tecnica semplice non è utilizzata da nessuna parte vicino come dovrebbe essere.
> Password Strength Meter funziona su prototipo / scriptaculous ed è un pratico script che mostra la forza della password con un misuratore colorato in tempo reale. Altri siti devono implementare questo tipo di script di "sicurezza" per aiutare gli utenti a vedere i pericoli dell'inserimento di password deboli.
Magic Zoom è uno script molto utile per i siti di eCommerce, così come altri siti che hanno immagini dettagliate. Invece di far fare all'utente un clic in più per ottenere un'immagine molto più grande e utilizzare la larghezza di banda, Magic Zoom consente di guardare essenzialmente attraverso una lente di ingrandimento in ogni immagine.
Magic Zoom è uno script a pagamento, ma vale la pena $ 47 se hai un negozio di e-commerce o qualsiasi altro sito che ha fotografie molto dettagliate. Puoi scaricare la versione di prova qui sotto.
Ogni singolo modulo su Internet dovrebbe avere questa funzione. Potrebbe essere solo il perfezionista in me, ma avere più forme di input che eseguono automaticamente l'input successivo sembra essere normale. È un vero sollievo quando compili elementi come i numeri di previdenza sociale quando l'input passa automaticamente al prossimo input.
Lo script jQuery Autotab è autoesplicativo e fa ciò che implica il nome: aggiunge gli autotab ai moduli con jQuery.
A volte sono le piccole cose in fase di sviluppo che possono davvero fare la differenza.
Anche se in genere non ci piace suonare il nostro corno su NETTUTS, come possiamo parlare di Javascripts intelligenti e utili senza far apparire il fantastico tutorial di Connor Zwick su come creare un utile modulo di login?
Il modulo di login Javascript è un'elegante combinazione di jQuery e un bellissimo layout di Photoshop per ottenere l'effetto di poter mostrare un modulo di accesso senza che la scatola occupi gran parte della pagina. Digg è un altro grande esempio di un sito che utilizza Javascript per mostrare e nascondere il modulo di accesso.
Le forme sono alcune delle parti più difficili del web design. Crea una forma troppo lunga e potresti spaventare un potenziale utente o cliente. Se il design di un modulo non è attraente, potrebbe spaventare anche un potenziale utente. Qualsiasi modo per rendere i nostri moduli Web più interessanti alla vista produrrà un tasso di conversione di iscrizione più elevato.
Il contesto che evidenzia lo script dei moduli Web è un eccellente attributo da aggiungere a un modulo di registrazione. È sorprendente che più moduli non offrano questa funzionalità. Essere in grado di vedere rapidamente i progressi di un modulo può migliorare sensibilmente l'esperienza dell'utente.
Lo script Sliding Top Panel è molto simile a Incredible Login Form. Nascondere / Mostrare informazioni importanti è la chiave per disegni belli e utilizzabili. Ogni volta che possiamo usare Javascript per mantenere ordinatamente le informazioni non necessarie, dovremmo sforzarci di farlo.
I pulsanti e i link di promozione del sito possono velocemente ingombrare un sito o il layout del blog. Sembra che se vuoi promuovere i post del tuo blog e altri contenuti su siti come Digg e Delicious, devi aggiungere un lungo elenco di pulsanti al tuo modello in modo da non escludere il social bookmarking o il sito di notizie preferiti di nessuno.
La cronologia sociale è utile perché esegue un test per vedere dove l'utente è stato di recente e carica le immagini su tali siti e solo quei siti. In sostanza, mostra al visitatore solo i pulsanti che vorrebbe vedere.
Come sa SocialHistory.js? Usando una perdita di informazioni carina introdotta dai CSS. I colori del browser hanno visitato collegamenti diversi rispetto ai collegamenti non visitati. Tutto quello che devi fare è caricare un intero gruppo di URL per i siti di social bookmarking più popolari in un iframe e vedere quali di questi link sono viola e quali sono blu.
Glen Stansberry è uno sviluppatore web e blogger che ha faticato più volte di quanto avrebbe voluto ammettere con i CSS. Puoi leggere altri suggerimenti sullo sviluppo web sul suo blog Web Jackalope.
Accentsconagua