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.

I cosiddetti “featured posts” sono un insieme di post che vengono scelti per esser messi in risalto. In questo blog, i “post in evidenza” sono quelli che considero essere i migliori. Mettendoli in risalto ho la possibilità di mostrare il meglio dei miei articoli al nuovo visitatore. Potrebbero esserci altri motivi, ad esempio di tipo commerciale (se i post in evidenza pubblicizzano qualcosa).

Nonostante ci siano un po’ di ottimi plugin per la gestione e la stampa dei “featured posts” ho sviluppato questo mio plugin che, credo, sia diverso dai plugin in circolazione e per certi versi offra una gestione più user friendly. Probabilmente questo sarà un giudizio soggettivo… In pratica, ci sono alcuni plugin che permettono di inserire gli id dei post, separati da virgole, in una casella di testo. Il mio plugin legge i “custom fields” (in italiano “campo personalizzati”) dei post che si decide di mettere in evidenza. In questo senso credo che impostare un campo personalizzato sia un po’ più user friendly rispetto all’aver a che fare con insiemi di numeri. Secondo te?

A primo impatto avere una lista di post casuali potrebbe sembrarti inutile. Infatti quando un lettore entra in un blog sa già cosa cercare oppure ci è arrivato tramite un motore di ricerca. Allora, perché dovresti inserire una lista di post casuali?

Vantaggi

• leggendo libri sull’usabilità dei siti web ho imparato che gli utenti sono molto pigri ma allo stesso tempo molto curiosi; allora ho pensato che se un lettore vuole leggere altri articoli è troppo pigro per ritornare nella homepage o nell’archivio, ma non per consultare una lista pronta di articoli da raggiungere con pochi click
• se hai inserito il plugin “post correlati” hai sicuramente notato che a volte ci sono pochi articoli correlati; è proprio in questi casi che torna utile avere una lista alternativa, da mostrare automaticamente quando articoli correlati
• gli appassionati di seo e guadagni online avranno subito pensato agli effetti in termini di tempo di permanenza; infatti invogliando gli utenti a visitare altre sezioni del sito o leggere altri articoli, ad esempio, avresti un aumento delle pagine viste con piacevoli conseguenze sul conto ad-sense
• quando un nuovo (e potenziale) lettore capita nel tuo blog è importante aiutarlo a scoprire il blog e gli articoli che scrivi; a tal proposito sarebbe vantaggioso avere il blocco “post in evidenza”, con gli articoli, secondo te, qualitativamente migliori