Nel mio quotidiano peregrinare in ambito seo, mi sono imbattuto nell'ennesima gara di posizionamento sui motori di ricerca: dopo i velocipedi equestri, i fattori arcani, i phpisti malvisti, il globalwarming awareness2007, e tante altri seo-contest con sfumature che vanno dal serio-serioso fino ad arrivare al faceto, pare sia il momento del funzino apocrifo, gara di posizionamento sui motori di ricerca promossa in ambito universitario.
Incuriosito, mi sono messo a spulciare i motori di ricerca e mi sono imbattuto in uno dei siti che concorrono alla gara.
E qui smetto di parlare di motori di ricerca, promesso. In questo post.

La prima cosa che mi ha incuriosito è dovuta al software utilizzato per realizzare il sito stesso: si tratta di RapidWeaver (lo stesso utilizzato per Sbrana.com e del quale ho già parlato in una o due occasioni).
La seconda cosa che mi ha sorpreso del sito di cui vi sto parlando è la home page, forse un po' troppo sviluppata in verticale ma poco male: gli autori hanno utilizzato il plugin PageToc di Eike Preuss grazie al quale, cliccando sulle intestazioni poste in un menu completamente personalizzabile, l'utente viene automaticamente portato alla parte di contenuto di suo interesse.


Come è facile intuire, questa soluzione risulta oltremodo comoda nel caso di pagine particolarmente lunghe -come alcune landing page- o addirittura per siti monopagina organizzabili in topic, visto che si evita all'utente di dover scrollare la pagina del browser rischiando pericolosi incidenti con la rotella del mouse.

Niente di nuovo, penso: utile ma certo non una novità.
"Scodiciando" un minimo si riesce infatti ad offrire tale commodity ai nostri utenti in modo abbastanza semplice senza dover utilizzare PageToc, ma essendo gratuito e ben customizzabile non vedo controindicazioni di sorta nel suo impiego.

Sì, però mi sbagliavo.
Cliccando sulle intestazioni al visitatore viene sì visualizzato il relativo contenuto, ma questo avviene con un effetto scrolling particolarmente "coreografico".
Qualcosa di nuovo... se non mi ricordasse qualcosa che già ho visto da qualche parte.
Iniziando ad aprire i cassetti della memoria -e andando ad espldere una buona parte dei bookmark di Firefox, trovo la pagina di presentazione di K+ realizzata da Stuart Delta (ma prima non si chiamava X+? Misteri del marketing!) per promuovere un generatore di doorway realizzato assieme a Kerouac3001 che pare essere particolarmente efficace.

Ma ho promesso che non avrei parlato di seo: vediamo come realizzare una pagina con scrolling fluido con PageToc:
1) scaricare e installare il plugin PageToc di Eike Preuss,
2) aggiungete quindi una pagina "Styled Text with Table of Contents" al vostro progetto RapidWeaver,
3) dal tab "modifica" cliccate su "setup" (in basso a destra, come la maggior parte dei menu "imposta" di RapidWeaver) impostate il menu delle vostre intestazioni: potrete infatti decidere la loro dimensione, il loro posizionamento all'interno della pagina e quant'altro in modo molto semplice, in caso di dubbi potete far riferimento alla documentazione fornita da Eike,
4) otterrete quindi una pagina abbastanza simile a questa,
5) per implementare lo smooth scroll occorre scaricate le le classi javascript rilasciate sotto MIT-style licenze sulle quali ha lavorato Stuart (che non smetterà mai di stupirmi per l'eclettica preparazione e genialita') utilizzando la libreria di effetti in javascript Moo.fx creati da Valerio Proietti di Mad4Milk.
Ecco le classi da scaricare: classes.zip,
6) decomprimete lo zip, e caricate la cartella "classes" nella stessa directory che contiene la pagina sulla quale volete ottenere l'effetto "smooth" (spero non occorra spiegare come caricare una cartella via ftp),
7) ultimi due step: occorre richiamare le classi cartella "classes" appena caricata nell'head della pagina da "smoothare" realizzata con PageToc.
Per farlo potete andare a modificare il tema (comunque prima fatene una copia) o semplicemente modificate la pagina in questione, prima o dopo la sua pubblicazione, anche con un semplice editor di testo (Smultron, TextWrangler & so on).



8) per conludere dovete richiamare la funzione "attitude" al termine del codice html della pagina in oggetto:



che come vedete è da inserire prima della chiusura di "body" e "html".

9) Fatto.

10) Dimenticavo... la velocità dell'effetto scrolling è personalizzabile; per farlo è sufficiente andare a modificare il file "m4m.set.js", presente nella cartella "classes" che avete caricato sul vostro sito: con un editor di testo individuate il parametro "duration" -settato di default a 800- e divertitevi a sperimentare: a 8000 fate in tempo a vedervi "Via col Vento" in versione integrale.

Considerazioni: ci sarebbe da chiedersi in che ambito risulti efficace una simile applicazione (sito monopagina? landing page? webletter?) e quale potrebbe essere la reazione dell'utente.
Forse nel caso specifico di pesce apocrifo avrei preso in considerazione un'applicazione un po' diversa di questo javascript (i link che portano allo scrolling non sono così visibili), ma il risultato rimane innovativo e dinamico... diverso.

technorati tags: rapidweaver - javascript - smooth scrolling - funzino apocrifo

tag: rapidweaver, javascript