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.

Durante la realizzazione di un sito arriva sempre il momento in cui è necessario utilizzare dei pacchetti di icone, ad esempio per linkare il profilo sui vari social network o per elencare i metodi di pagamento accettati.

Se stai realizzando un cms la scelta del giusto pacchetto di icone può addirittura diventare un problema. Infatti, poiché un generico cms ha molte funzioni alle quali associare l’icona adatta, a meno che tu non voglia prenderle a caso da google immagini, hai bisogno di pacchetti completi in grado di soddisfare le esigenze attuali (e future) del tuo cms.

Il fatto è che non sempre hai il tempo e la voglia di correre su internet per cercare l’icona adatta, anche perché sarebbe difficile trovarne una allineata allo stile di quelle che stai già utilizzando.

Quindi per non avere più preoccupazioni dai uno sguardo ai seguenti pacchetti di icone e scegli quelli più adatti alle tue esigenze!

Se stai considerando l’idea di inserire un po’ di banner e annunci sul tuo sito ti consiglio di leggere questo interessante articolo pubblicato su Business Insider in cui vengono classificati i formati più odiati dagli utenti.

L’articolo è stato strutturato molto bene in quanto descrive i 10 formati incriminati fornendo lo screenshot del sito che lo utilizza, il tutto all’interno di una bellissima slide-show.

Il Mime HTML e lo schema data:URL sono due importanti ingredienti nella ricetta che ti permetterà di ridurre le richieste HTTP.

• Una pagina Mime HTML è un tipo di pagina web in cui è possibile scriverci sia il codice html sia dei dati come immagini, oggetti flash, file audio
• Lo schema data:URL è una tecnica grazie alla quale è possibile inserire i dati nella pagina web (che abbiamo già visto nell’articolo Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css e che riprenderò per evitarti di fare su e giù per il blog)

Non utilizzeremo queste due tecniche separatamente ma ci serviranno per creare il mix esplosivo per caricare quanti più dati possibile in una sola richiesta http: quella della pagina web.

Lo schema data:URL

Per capire bene il Mime HTML è necessario sapere come codificare i file in base64 e come utilizzarli all’interno della pagina per poi vedere l’intera struttura di un documento MHTML.

Il vantaggio fondamentale di questa tecnica consiste nel risparmio di tante richieste http quanti sono gli oggetti e le immagini codificati in base64 che inseriamo nella pagina.

Dopo il precedente articolo su come utilizzare la cache del browser passiamo ad azioni più concrete per ridurre le richieste http: minimizzare il numero di componenti di una pagina. Dico “concrete” perché, mentre i comportamenti e le tecniche relative alla cache possono avere effetti diversi a seconda del browser e delle sue impostazioni, diminuire i componenti di una pagina è qualcosa che dipende esclusivamente dal webmaster, con risultati e prestazioni prevedibili.

Gestire la cache è fatica sprecata?

Assolutamente no! Il fatto è che ogni utente che accede al sito la prima volta deve comunque attendere il caricamento completo della pagina e dei suoi componenti, che vengono subito memorizzati in cache. Il miglioramento di prestazioni si verifica a partire dalla seconda pagina che viene visitata in quanto i componenti vengono letti dalla cache, evitando di effettuare nuove (e inutili) richieste http.

Vantaggi immediati

Diminuire i componenti di una pagina consente di avere un notevole aumento delle prestazioni che migliora l’esperienza tutti gli utenti, vecchi e nuovi, dalla prima all’ultima pagina.

In questo articolo vedremo alcune tecniche che riducono drasticamente il numero e il tempo di caricamento relativo a immagini, script e css. Queste tecniche non fanno altro che combinare questi componenti in modo da caricarne pochi ma più pesanti anziché molti ma leggeri. Parleremo di image maps, sprite css, dello schema data:URL, di generatori di sprite css, di come combinare automaticamente javascript e css, vedremo che a volte è meglio inserire il codice direttamente nella pagina html, e come è possibile evitare gli script duplicati.