Le anteprime relative a tutti i link presenti all'interno di una pagina possono essere renderizzate o al momento del caricamento della stessa (in tal caso il tempo necessario sarà naturalmente maggiore rispetto a quello standard impiegato in assenza del plug-in) oppure al suo termine. Lo snapshot può essere personalizzato tramite un insieme di funzionalità accessorie: inoltre si presenta con un layout completamente differente a seconda della tipologia di contenuto a cui punta il collegamento ipertestuale al quale fa riferimento.Nello specifico è possibile (sorvolare con il mouse i link indicati per visionare gli esempi):

• Mostrare l'anteprima di un feed RSS in forma sintetica o estesa (RSS Shot™ Excerpt o Expanded) .
• Far vedere un video senza dovere mostrare un'anteprima del primo fotogramma, come ad esempio si fa incorporando un video di YouTube, ma semplicemente indicandone appunto il link (VideoShot™ ).
• Mostrare la sintesi di un termine della Wikipedia inclusi i link in essa contenuti (WikiShot™).
• Mostrare la foto di un attore o di un personaggio famoso e la sua biografia e/o filmografia prelevandone i dati direttamente dall'Internet Movie Database (MovieShot™ ) .
• Mostrare il profilo completo di foto, dettagli anagrafici ed altro relativo ad un utente di MySpace.Com.
• Mostrare un grafico relativo ai dati finanziari fruibili mediante servizi come: Yahoo! Finance, Google Finance, CNN Money, MSN MoneyCentral, MarketWatch, MorningStar ( StockShot™ ) .
• Evidenziare i dettagli di un prodotto disponibile su Amazon.com (ProductShot™).
• Ascoltare un MP3, mostrando contemporaneamente, se disponibili, i dati di traccia e la copertina dell'album (AudioShot™ ) .
• Mostrare un foto album condiviso su Photobucket, Flickr, Picasa Web. (PhotoShot™ ).
• Mostrare semplicemente la miniatura grafica del sito a cui fa riferimento il link collegato (PreviewShot™).

Tutto questo è possibile aggiungendo alla pagina web della quale si vuole estendere le funzionalità dei link, un riferimento ad una libreria javascript residente sul server remoto shots.snap.com.

Installazione e configurazione

L'installazione e la configurazione di questo plug-in è molto semplice e può essere effettuata in 4 semplici passaggi mediante la procedura guidata disponibile sul sito www.snap.com. E' indispensabile utilizzare tale procedura poichè è necessario fornire l'indirizzo assoluto del sito al quale si vuole aggiungere il plug-in per ottenere un codice univoco di riferimento associato ad esso, che sarà poi incorporato nel codice dello script fornito alla fine dell'ultimo passaggio. Si possono impostare i seguenti parametri:

• la dimensione dell'anteprima, grande o piccola,
• il colore del fumetto selezionabile da una palette di otto tinte fondamentali,
• la lingua di default utilizzata per i preview,
• la presenza o meno di una casella di testo con cui lanciare ricerche mediante il motore di proprietario di Snap.com,
• renderizzare le anteprime solo dei link esterni, solo dei link interni o di entrambi
• renderizzare solo i PreviewShot™ (e quindi rinunciare a tutte le altre funzionalità avanzate di anteprima)
• renderizzare i preview solo alla fine del caricamento della pagina web (per accelerarne il processo che altrimenti sarebbe un pò più lento)
• scegliere se mostrare accanto ai link abilitati all'anteprima l'iconcina di un fumetto che indichi appunto la presenza della funzionalità Snap Shots: decidere inoltre se abilitare l'attivazione del preview solo al click sull'iconcina o al click sia su di essa che sul link
• scegliere se mostrare al'interno del fumetto anche un immagine personalizzata (ad esempio un logo) che dovrà essere trasmesso via upload durante la procedura guidata: l'imagine può avere una grandezza massima di 100 Kbyte, dimensioni non superiori a 100 per 20 pixel e fornita in formato .jpg o .gif.

Al termine della procedura verrà fornito un frammento di codice javascript che andremo ad includere all'interno della pagina web alla quale si vuole applicare il plug-in, subito prima del tag di chiusura . Inoltre, opzionalmente, viene data la possibilità di copiare un ulteriore script (da inserire in un punto qualsiasi della pagina a scelta dell'utente) che darà la possibilità ai visitatori del nostro sito di abilitare o disabilitare la funzionalità Snap Shots mediante lo Snap Shots Opt-In Badge.

Lo script necessario all'attivazione del plug-in sarà simile al seguente (per motivi di visualizzazione ho dovuto suddividere il codice su più righe, ma in realtà và messo tutto su un unica riga altrimenti potrebbe generare errore):

La riga di codice prodotta non è altro che una chiamata ad una libreria javascript a cui si possono passare una serie di variabili che permettono di impostare, anche successivamente, quanto appena descritto. Nello specifico:

• ap - Indica se gli Snap Shots sono attivi o no di default. (0 = off, 1 = on)
• sb - Attiva il box di ricerca mediante il motore di Snap.Com. (0 = no, 1 = si)
• cl - Attiva o meno la visione dell'immagine personalizzata trasmessa durante la procedura di registrazione. (0 = non mostra l'immagine, 1 = mostra l'immagine)
• df - Attiva la procedura di renderizzazione delle anteprime solo al termine del caricamento della pagina (0 = no, 1 = si)
• key - Codice alfanumerico univoco creato durante la procedura di registrazione. E' un paramentro necessario e non va modificato.
• link_icon - Attiva o meno l'iconcina accanto ai link abilitati agli Snap Shots (on, off)
• oi - Indica se l'attivazione del plug-in è controllata dallo Snap Shots Opt-In Badge presente sul sito (0 = off, 1 = on) { Questa opzione dovrebbe essere impostata ad off fino a quando non si decida di inserire il codice relativo alla visualizzazione dello Snap Shots Opt-In Badge }
• po - Indica se verranno renderizzati solo i PreviewShot™ o anche tutte le altre tipologie di preview disponibili (0 = tutti, 1 = solo anteprima della pagina web a cui punta il link)
• shots_trigger - Indica se accanto al link dovrà essere mostrata anche l'iconcina che indica l'attivazione del plug-in per il link stesso, oppure se dovrà essere mostrato solo il link. (icon, both)
• si - Indica se gli Snap Shots saranno attivi anche per i link interni al sito ospitante, cioè che puntano a pagine dello stesso sito (0 = no, 1 = si)
• size - imposta la dimensione del fumetto, piccola o grande (small, large)
• th - Imposta il colore di fondo del fumetto (silver, ice, green, linen, orange, pink, purple, asphalt)
• domain - Nome del dominio (ovvero del sito) che ospita il plug-in. Questo parametro è indispensabile.

Il javascript andrà copiato all'interno di ciascuna pagina per la quale si intenda usufruire delle funzionalità Snap Shots. Se il proprio sito ha una pagina master o un template con cui vengono impostate tutte le altre pagine (ad esempio blog, siti in tecnologia .NET, ecc.) è possibile applicare i preview a tutti i link del proprio sito semplicemente copiando solo una volta il codice fornito all'interno di tale pagina.

Tips and Tricks

E' possibile decidere se attivare o meno la funzionalità Snap Shots sul singolo link applicando ad esso la classe "snap_shots" o "snap_noshots". Consideriamo ad esempio il seguente link:

Se non vogliamo attivare l'anteprima su questo link, basterà aggiungergli la classe "snap_noshots":

Se il link in oggetto ha già una classe attribuita ad esempio "redlink", si può utilizzare la proprietà di applicazione a cascata degli stili aggiungendo in coda all'attributo class il valore "snap_noshots". Quindi:

Analogamento l'applicazione della classe "snap_shots" forza l'attivazione del preview sul link anche se gli Snap Shots sono stati disattivati di default impostando il parametro ap=0.

Con procedura analoga è possibile attivare o disattivare l'anteprima per tutti i link contenuti all'interno di un blocco di testo. E' sufficiente racchiudere il blocco in un tag contenitore

…

come nell'esempio seguente (si ipotizza che di default gli Snap Shots siano disattivati per tutti i link

…
Questo collegamento attiva Snap Shots
…
Anche questo collegamento attiva Snap Shots
…

Questo link non attiva Snap Shots

Si può fare un discorso analogo per attivare o meno l'iconcina di notifica della presenza della funzionalità Snap Shots, su uno o più gruppi di link attribuendo ai tag html o

le classi "snap_trigger_icon", "snap_trigger_both" e "snap_no_icon" che consentono rispettivamente di attivare la visualizzazione dell'anteprima solo cliccando sull'iconcina di notifica, cliccando sia sull'iconcina che sul link e non mostrare affatto l'iconcina. Naturalmente vale quanto detto prima relativamente all'eventuale sovrapposizione di più classi all stesso tag.

Come installare Snap Shots sulle principali piattaforme di blogging

Premesso che la procedura guidata già descritta produce codice perfettamente valido per qualunque piattaforma di blogging (io ho effettuato l'aggiunta del plug-in su BlogEngine.Net senza alcuna difficoltà), sono stati realizzati dei plug-in o delle procedure semplificate per:

• WordPress
• Blogger / Blogspot
• Moveable Type

Installazione client side

Finora abbiamo descritto la procedura di installazione del plug-in server side, ovvero direttamente sull'host che ospita il nostro sito. E' possibile però installare il plug-in direttamente lato client, ovvero sul browser, per permetterci di utilizzare la tecnologia Snap Shots su tutti i siti che andremo a visitare, indipendentemente dalla presenza o meno del plug-in server side.

Sono disponibili le estensioni sia per Internet Explorer 6.x e 7.0, Mozilla Firefox 1.5 e 2.0 e Safari unificate in un unico setup.

Conclusioni

E ' senz'altro leggitimo chiedersi se un oggetto di questo tipo abbia o meno la sua utilità. Secondo me sì, ma con qualche riserva.

Io lo trovo geniale per il supporto alle anteprime avanzate: poter mostrare in tempo reale una definizione Wiki, mostrare un video o ascoltare un file audio senza l'ausilio di applet o collegamenti diretti con YouTube o altro repository multimediale costituiscono un notevole valore aggiunto ai contenuti del proprio sito consentendo anche una navigazione più agevole ai visitatori che non devono rimbalzare tra dozzine e dozzine di iperlink

Le semplici anteprime dei siti sono un pò fini a se stesse e possono essere utili solo per rendersi conto, in tempo reale se il link sul quale stiamo per cliccare è ancora attivo oppure no (infatti in tal caso l'anteprima mostrerebbe la pagina di errore 404).

Bisogna tenere presente inoltre che questo plug-in mina spaventosamente l'accessibilità del proprio sito: è necessario quindi prevedere un foglio di stile dedicato alle perferiche di tipo screen reader che escluda automaticamente le funzionalità Snap Shots.