6 settembre 2007  10

SnapShots: una guida completa

Web 2.0 

 width= La tecnologia Snap Shots consente di arricchire tutti i collegamenti ipertestuali di un sito con un sistema di anteprima a fumetto che compare automaticamente quando si fa sorvolare il puntatore del mouse sui collegamenti stessi.

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 </body>. 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):

<script type="text/javascript" src="http://shots.snap.com/snap_shots.js?ap=1&amp;
key=987d2fee005ttce1a44fb49bcc1bbcb&amp;sb=0&amp;th=ice&amp;cl=0&amp;
si=0&amp;po=0&amp;df=1&amp;oi=0&amp;lang=it-it&amp;
domain=www.iltuodominio.com">
</script>

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:

<a href="http://www.mysite.com">www.mysite.com</a>

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

<a class="snap_noshots" href="http://www.mysite.com">www.mysite.com</a>

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:

<a class="redlink snap_noshots" href="http://www.mysite.com">www.mysite.com</a>

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 <div> ... </div> come nell'esempio seguente (si ipotizza che di default gli Snap Shots siano disattivati per tutti i link

<div class="snap_shots">
    <p>
    ...
    <a href="link1.html">Questo collegamento attiva Snap Shots</a>
    ...
    <a href="link2.html">Anche questo collegamento attiva Snap Shots</a>
    ...
    </p>
</div>
<a href="link3.html">Questo link non attiva Snap Shots </a>

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 <a> o <div> 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:

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.

In linea di massima mi sento di consigliarlo, naturalmente senza esagerare. Per chi volesse approfondire segnalo naturalmente la sezione di F.A.Q. realizzata da Snap.Com

Esprimi il tuo giudizio

Commenti (10) -

Paul Angles
Paul Angles
06 set 2007 alle 18:38  01
Please pardon my inability to thank you properly in Italian, but even in Google translation, your post was wonderfully insightful and detailed.  Thank you!  Grazie!
Cristiano
Cristiano
07 set 2007 alle 12:48  02
This post has been written in order to help lots of Italian users who had difficulty translating the FAQs at http://www.snap.com/about/shots_faq.php as so far, we can't enjoy an Italian version...
Best regards
Igor
Igor
20 nov 2007 alle 18:01  06
Ciao.
Ho seguito le indicazioni della tua guida per l'installazione del plugin di Snap Shots dopo aver effettuato regolare iscrizione sul loro sito e aver prelevato il codice js.
Ho attivato il plugin ma non sono riuscito a trovare la pagina wp_footer dove inserire il codice prima del tag </body>.
Sinceramente nn credo di avr capito bene dove inserire il suddetto codice ed inoltre si cita anche questo codice "<?php do_action('echo_spa'); ?>" ke non capisco bene a cosa serva.

Puoi aiutarmi in merito?
Grazie

Cristiano
Cristiano
20 nov 2007 alle 23:09  07
@ Igor:

non hai specificato su quale piattaforma vuoi installare Snap Shots. Per i 3 sistemi citati nella guida (Wordpress, Blogger, Moveable Type) puoi fare riferimento alle procedure e/o plugin indicate dai link relativi.
Ad ogni modo, se usi WordPress, il nome del file php che contiene il footer (e quindi anche il tag di chiusura body) dipende dal template usato. Generalmente si chiama footer.php (e non wp_footer).
In alternativa puoi installare quest'altro plug-in (quando ho scritto la guida non era ancora disponibile):
wordpress.org/.../
scusaxche
scusaxche
26 feb 2008 alle 17:01  08
Scusa ma perche usare WP è una vergogna???? vedo uno stemma! che cos significa?? Grazie
Cristiano
Cristiano
26 feb 2008 alle 22:40  09
@ scusaxche:
Il tuo quesito è decisamente off topic rispetto all'argomento dell'articolo, ma ti rispondo ugualmente perchè non è la prima volta che mi viene posto questo interrogativo.

Non ho assolutamente nulla contro WordPress che, anzi uso con estrema soddisfazione per la gestione di altri blog che ho realizzato o per i quali ho l'incarico di editor o administrator.
I significato del banner è solo quello di indicare, in maniera simpatica e colorita, che il motore che gestisce questo blog non è appunto WordPress, ma non ne vuole assolutamente pregiudicare le caratteristiche e potenzialità che lo rendono uno dei più diffusi sistemi di blogging al mondo Smile
Un saluto Wink
Raffaella
Raffaella
12 mag 2008 alle 19:53  10
Grazie per le tue chiarissime indicazioni.Prenderò in  considerazione la possibilità di inserire Snap shots sul mio sito. Faccio una domanda probabilmente cretina. Non è in alcun modo incompatibile con adsense?
Cristiano
Cristiano
12 mag 2008 alle 22:59  11
@ Raffaella:
SnapShots è perfettamente compatibile con Adsense Smile
Luca
Luca
01 ago 2008 alle 17:03  12
Ciao, grazie per la utilissima guida.
Sai per caso se esiste qualche componente per abilitare  SnapShots per chi usa Joomla 1.5.x (o a limite anche per la vecchia versione 1.0.x)?
Grazie
Cristiano
Cristiano
01 ago 2008 alle 18:26  13
@ Luca:
Temo proprio di no. Comunque credo che sia relativamente semplice inserire il codice nel template di Joomla.

Pingbacks and trackbacks (4)+

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti