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.

Consiglio la lettura questo articolo che ho trovato molto interessante perché mi ha aperto gli occhi su alcuni aspetti di javascript che non conoscevo.

Mi ha molto colpito il fatto che javascript è largamente utilizzato anche fuori dai browser.

I 5 miti da sfatare sono questi:

• javascript = java (chi non ha mai sentito questa affermazione? )
• javascript è un linguaggio “giocattolo”
• javascript si trova solo nei browser
• javascript è inconsistente e pieno di bug
• javascript non è “orientato agli oggetti”

Per approfondire i motivi per cui queste affermazioni sono sbagliate non ti resta che continuare a leggere l’articolo su sitepoint.com!

Scorrendo i feed con Google Reader mi capita di leggere dei titoli abbastanza assurdi. Risultato: non leggo il post! Ti spiego perché…

Per iniziare ti faccio un po’ di esempi:

• “30 best icon tutorials”
• “100+ web designer resources”
• “the big list of html5, javascript and css3″
• “ultimate collection of photoshop tutorials”
• “top 60 wordpress resources”

A primo impatto potresti pensare: “sei pazzo! con tutta quella roba che ti promettono non ci dai un’occhiata?!”.

Perché dovrei perder tempo a leggere un post enorme (pieno di link e di immagini da caricare) in cui potrei trovarci tutto e niente?

Photo by ex.libris | http://www.flickr.com/photos/exlibris/2383695697/

Come sempre le dichiarazioni di Steve Jobs hanno fatto tanto parlare, bloggare e twittare.

Fra le news di Apple.com è stato pubblicato un articolo in cui Steve Jobs, dopo una lunga argomentazione, spiega i motivi per cui i dispositivi Apple non saranno dotati della tecnologia Adobe Flash:

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

A conferma del fatto che una buona comunicazione grafica vale più di mille parole, questa mappa permette di avere in un batter d’occhio una visione completa dei maggiori social media suddivisi in categorie.

La mappa della conversazione, ideata e realizzata da Brian Solis e Jesse Thomas, vuole essere una rappresentazione del mondo dei social media, sempre in movimento e in continua evoluzione.

Questa mappa è stata particolarmente apprezzata: non solo gli autori ne hanno realizzate nuove versioni ma altri esperti l’hanno adattata con i social media più utilizzati nel proprio paese. Per questi motivi gli autori hanno intenzione di continuare ad aggiornarla e di voler presto iniziare a lavorare alla terza versione. Occhio!

Un altro buon motivo per darci un’occhiata, oltre alla curiosità, è che si possono scoprire molti social media di cui probabilmente non abbiamo mai sentito parlare e che, nel tempo libero, potremmo divertirci a sbirciare…

Sul sito theconversationprism.com è possibile scaricare la mappa in varie risoluzioni, ed eventualmente ordinare il poster (56 x 72 cm).