In questi giorni ho aiutato un amico alle prese con un sito web a pagina singola e prendendo spunto dal sito vanadiumjs.com ho voluto implementare lo scroll automatico e animato. Dopo un giretto sul web ho trovato questo interessante script da cui ho imparato un po’ di cose che ti ripropongo.

Il mio non è stato solo uno sfizio: poiché la pagina era molto lunga mi sembrava utile inserire questa funzionalità al fine di evitare all’utente l’utilizzo prolungato della rotellina del mouse per poter scorrere la pagina. Certo, si poteva realizzare tutto con dei link interni di tipo “#id” evitando codice js e plugin jquery. Lo abbiamo fatto ugualmente perché la pagina era solo una e un po’ di dinamismo non guasta mai!

La proprietà “scrollTop”. La utiliziamo per delineare le caratteristiche dell’animazione all’interno del metodo $.animate(). Questa proprietà deve essere impostata con un valore intero pari alla distanza (in pixel) tra l’inizio della pagina e la posizione di destinazione.

Il plugin “easing”. Non è fondamentare per realizzare lo scroll animato in quanto all’animazione ci pensa già il metodo $.animate(). Questo plugin ci serve per aggiungere a jquery altri tipi di animazione. Per saperne di più visita la pagina del plugin in cui potrai provare tutte le animazioni.

Animazione “easeInOutQuad”. Il vero motivo per cui utilizziamo il plugin “easing” è per sfruttare l’animazione “easeInOutQuad” (uguale a quella di vanadiumjs.com) molto adatta per uno scroll animato: parte lenta, scorre veloce, e inizia a rallentare prima di arrivare sulla destinazione del link.

jConfirmAction è un ottimo plugin jQuery che permette di inserire facilmente delle dialog box di tipo “confirm” (quelle con i 2 pulsanti “ok” e “annulla”) molto più gradevoli di quelle di default e molto più comode per l’utente.

Leggero. Il plugin è molto leggero: ha una dimensione di 1,21 kb (non compresso).

Accessibile. Uno dei maggiori vantaggi è che funziona anche in caso di javascript disabilitato. Questo perché al tag <a> viene comunque impostato l’attributo href ma il plugin si occupa di bloccarne il comportamento di default con la funzione preventDefault(). A proposito dell’accessibilità con javascript ti consiglio di leggere questo articolo.

Migliora l’esperienza dell’utente. Una classica finestra di dialogo di tipo “confirm” appare sempre al centro della pagina. Questo comportamento potrebbe infastidire l’utente a causa del continuo via vai del mouse tra il link cliccato e il centro della pagina per cliccare “ok” o “annulla”. Il plugin jConfirmAction fa apparire la dialog box sopra il link cliccato, quindi con uno spostamento di pochi pixel l’utente arriva sui due pulsanti della dialog box. Se ciò ti sembra ininfluente pensa a una situazione in cui l’utente deve rispondere continuamente a più di una dialog box…

Semplice per il web designer. L’utilizzo di base del plugin richiede solo un paio di minuti per sistemare il link allo script, le righe di codice css e le immagini all’interno dei file e delle directory del sito.

Personalizzabile. Un aspetto che ho particolarmente apprezzato è la semplicità nella personalizzazione totale del plugin. Praticamente, in pochi passi, è possibile adattare alle proprie esigenze tutte le caratteristiche e i comportamenti del plugin: testi, immagini, css, html del box, codice javascript del plugin jquery.

Dopo aver letto l’interessante articolo di ImpressiveWebs su alcune tecniche javascript mi è venuta un’idea che ti piacerà. Ho deciso di integrarlo con le rispettive tecniche jquery ma, anziché limitarle esclusivamente all’ambito jquery cerco di mantenere comunque un legame con il puro codice javascript.

Per quale motivo? Innanzitutto perché è interessante vedere come da jquery si possa passare ai classici oggetti javascript e poi perché in alcuni casi si preferisce programmare in javascript senza rinunciare ad alcune potenzialità di jquery come, ad esempio, i selettori, spesso argomento di scontro (e confronto) fra i vari framework. Inoltre, come dice ImpressiveWebs, alcuni sviluppatori si trovano a dover lavorare a progetti già avviati nei quali non è possibile (o non è sicuro) utilizzare librerie come jquery, mootools, dojo, ecc.

Un ringraziamento speciale va a ImpressiveWebs che mi ha gentilmente autorizzato a tradurre buona parte dell’articolo orginale.

Ajax è una tecnica di programmazione (non un linguaggio) che ti permette di sviluppare applicazioni web interattive. In pratica, grazie ad Ajax puoi aggiornare alcuni dati della pagina senza ricaricare completamente la pagina, migliorando le prestazioni del tuo sito.

In questo articolo: effettuare le richieste e gestire le risposte, formati per lo scambio dati, utilizzare librerie e framework javascript, memorizzare Ajax in cache, evitare risposte duplicate, migliorare l’usabilità delle applicazioni ajax.