Clippings: i Preferiti per il tuo sito

Come poter aggiungere al tuo sito una lista degli articoli preferiti dai tuoi utenti

Articolo in lingua inglese: «Clippings: bookmarks in your site»

Cosa sono i Clippings

Se avete Explorer o Netscape 6 guardando sulla sinistra di questa pagina potete notare una nuova funzionalità aggiunta a PRO.htm.it: i Clippings (ovvero “I tuoi preferiti”). I Clippings non sono altro che una lista di articoli o di pagine web che l’utente può salvare durante la sua navigazione nel sito e visualizzare successivamente. Sono come i Bookmark di Netscape oppure i Preferiti di Explorer ma, e questo è il bello, non sono conservati nel browser ma nel sito che state visitando.

I clippings accompagnano il navigatore nella navigazione del sito e gli permettono di salvare i link degli articoli più interessanti con un semplice click sulla piccola icona presente a sinistra del titolo. La lista di articoli salvati, aggiornata automaticamente, verrà visualizzata anche ad un successivo accesso dell’utente.

I Clippings sono una funzione utile sia per il navigatore, che può avere a disposizione un “contenitore” in cui salvare gli articoli preferiti o quelli da leggere in seguito, sia per il webmaster del sito, che avrà tra le mani uno strumento di fidelizzazione in più.

Il codice è stato rilasciato dal suo ideatore, John Weir, sotto licenza GPL (open source). Ciò significa che potete utilizzare, modificare e distribuire liberamente il javascript senza paura di incorrere in violazioni di copyright, con l’unico accorgimento di mantenere il copyright inalterato.

Per sapere come utilizzare nelle proprie pagine i clippings senza addentrarvi nella configurazione del codice potete visualizzare le pagine di esempio oppure scegliere di utilizzarli in 30 secondi.

Il codice base

Per prima cosa scaricate il Javascript clipping.js da questo sito (pagina di download). Il file contiene tutto il codice che gestisce i vari eventi. Il Javascript dovrà poi essere incluso nelle vostre pagine aggiungendo tra i tag <head> </head> di ogni documento in cui volete che esso funzioni il codice di richiamo:

<script type=”text/javascript” src=”clippings.js”></script>

Naturalmente se il vostro Javascript risiede in una directory diversa da quella in cui compare il documento dovrete utilizzare il percorso specifico. Se, ad esempio, inserirete il Javascript nella directory js del vostro sito dovrete indicare il percorso in questo modo:

<script type=”text/javascript” src=”/js/clippings.js”></script>

Questo codice carica nella memoria del computer del visitatore, attraverso il browser, tutte le impostazioni che servono a far funzionare i clippings. L’interazione con l’utente è gestita da un box in cui verranno visualizzati i titoli degli articoli salvati e le opzioni per cancellarli, e da un comando che permetta all’utente di aggiungerli con un semplice click.

Il box viene creato con il seguente codice:

<div id=”demo”>

 <div id=”clippingsMenu”>

  <div id=”clippingsContainer”></div>
 
  <div id=”clippingControls”>

   <div id=”clippingsCounter”></div>
   <a href=”javascript:eventClearReadClippings()” class=”mI”>Elimina gli articoli
articoli</a>    <a href=”javascript:eventClearAllClippings()” class=”mI”>Elimina tutti gli
articoli</a>   </div>
 </div>
</div>

Questo è il codice che invece permette di aggiungere un articolo o un elemento alla lista dei preferiti:

<a id=”clp1″>Primo articolo</a>
<a id=”clp2″>Secondo articolo</a>

Questa parte deve essere fatto seguire, anche alla fine della pagina, da quest’altro che richiama la funzione di aggiunta:

<script type=”text/javascript”>

allClippings[allClippings.length] = new Clipping(1,”Primo articolo”,”http://www.sito.com/articolo1.htm”);

allClippings[allClippings.length] = new Clipping(2,”Secondo articolo”,”http://www.sito.com/articolo2.htm”);

</script>

In questo secondo codice sono indicate, tra parentesi e distinte da una virgola, le seguenti opzioni:

  • ID dell’articolo: deve essere univoco all’interno di un medesimo dominio e deve richiamare lo stesso numero indicato nel tag <a id=”clp[U]numero[/U]”>
  • Titolo dell’articolo: è il titolo che comparirà nel box dei preferiti
  • URL dell’articolo: è il link che corrisponde all’articolo o alla pagina che si vuole far visualizzare

Come notate ogni articolo è identificato da un numero univoco (in questo caso 1 e 2) che viene riproposto esattamente in entrambi i punti. Le uniche opzioni che possono essere modificate nel codice mostrato sopra sono segnalate in rosso.

Il risultato, con codice corrispondente, lo trovate nella pagina di esempio (Esempio 1).

La personalizzazione del codice

La cosa più importante di questo Javascript è la possibilità di personalizzazione illimitata. Può essere personalizzata gran parte della gestione del codice, compresa la sua visualizzazione. Potrebbe essere comodo, ad esempio, inserire il box in una tabella che da poter poi posizionare in qualunque zona del vostro sito, come ad esempio avviene in questo esempio (Esempio 2).

Tra le molte altre cose che possono essere personalizzate vi è la lingua dello script. Per mostrare in italiano il messaggio che avvisa dell’assenza di articoli salvati basta aprire il file clipping.js, cercare il testo della function drawClippings() e sostituire a:

newHTML = “<span class=’clippingItem’>There are currently no Clippings saved. To add a Clipping click on the Clipping icon.<br/><br/>”;

newHTML += “You can access your Clippings either through this menu, or clicking on the number to the right of the Clippings menu. That number represents unread Clippings.”

Un proprio messaggio:

newHTML = “Non hai salvato nessun articolo. Per salvare un articolo basta cliccare sull’icona accanto al suo titolo”;

Altra zona da personalizzare potrebbe essere la visualizzazione dei link nel box dei preferiti. Anche in questo caso basta modificare all’interno di clipping.js la stessa funzione di sopra. Nel caso seguente abbiamo aggiunto un elemento di lista (<li>) sia per visualizzare un pallino prima del titolo per da far comparire su una stessa riga gli articoli salvati. Abbiamo sostituito a

newHTML += “<a href=”javascript:loadClippingURL(“+i+”)” class='”+tClass+”‘ id=’cLink”+clipping.id+”‘>”;

il codice

newHTML += “<li><a href=”javascript:loadClippingURL(“+i+”)” class='”+tClass+”‘ id=’cLink”+clipping.id+”‘>”;

Nel caso di pro.html.it abbiamo anche eliminato la possibilità di leggere gli articoli in modo sequenziale attraverso il comando “Articolo successivo” (Next Unread Clipping). Pensiamo che la possibilità di cliccare sul link dell’articolo sia sufficiente. Così abbiamo eliminato dal codice del box la zona

<div id=”clippingsCounter”></div>

e abbiamo eliminato dal codice clipping.js i ogni riferimento alla funzione che segnala il conteggio degli articoli (clippingCounter) in modo da alleggerire anche il javascript esterno che viene scaricato sul computer dell’utente: abbiamo eliminato completamente la funzione updateClippingCounter(), la funzione eventShowNextClipping() e abbiamo eliminato ogni riferimento a updateClippingCounter(); semplicemente cancellandoli.

Per controllare le dimensioni dell’area del box bisogna invece modificare la funzione clippingsSetContainerHeight che si trova sempre all’interno del file clipping.js. Questa funzione ridimensiona automaticamente il box a 350 pixel se la risoluzione lo permette. Cancellatela del tutto se si desidera che il box abbia delle dimensioni adattabili al numero degli articoli aggiunti.

È bene agire anche sul codice che permette di aggiungere un articolo o una pagina. L’originale fornito dall’autore può essere sostituito con questo:

<a id=”clp1″ STYLE=”cursor: pointer; cursor: hand;”><img src=”/img/add.gif” heigth=”11″ width=”11″ alt=”Aggiungi l’articolo primo ai tuoi preferiti”></a>Articolo Primo

<script type=”text/javascript”>

allClippings[allClippings.length] = new Clipping(1,”Primo articolo”,”http://www.sito.com/articolo1.htm”);

</script>

È stato aggiunto un css (STYLE=”cursor: pointer; cursor: hand;”) che impone al cursore di trasformarsi in manina al passaggio sul link di aggiunta. È importante che le due istruzioni cursor siano scritte nello stesso ordine di questo esempio: Netscape 6.x e Mozilla non accettano il valore hand, ma solo il valore pointer che, tra l’altro, è quello standard del W3C. Inoltre è stata associata un’immagine al link ed è stato previsto anche un tag ALT che permette di visualizzare la descrizione dell’azione all’utente.

L’esempio (Esempio 3) è disponibile per la verifica di tutte le nostre modifiche.

Ultime precisazioni

I clippings funzionano solamente con i browser che hanno un buon supporto per il DOM (Document Object Model) del W3C. In questa categoria rientrano a pieno titolo Explorer (anche dalle versioni 5) e Nescape (dalla versione 6). Gli utenti che utilizzano Opera non visualizzeranno le funzioni dello script.

Il codice fa largo uso, oltre che di Javascript, anche dei CSS. Per una maggiore personalizzazione è consigliabile costruire ad hoc dei propri fogli di stile e sostituirli a quelli originali (solitamente collocati all’interno degli attributi class=”” all’interno del file clipping.js). Vari tutorial su come utilizzare propri fogli di stile li potete reperire su questo sito nella sezione CSS (in particolare leggere l’articolo:«Più CSS in una stessa pagina»).

Riportiamo altre informazioni indicate dall’autore dello script all’indirizzo http://www.smokinggun.com/code/clippings.php:

  • L’ID dei clipping deve essere unico all’interno dello stesso dominio
  • I Clipping possono essere ripetuti all’interno della stessa pagina, lo script riconosce i duplicati.
  • Sono necessari i Cookies. Se il browser non supporta i cookies verrà visualizzato un messaggio di avvertimento.
  • Lo script non include un sistema per generare dinamicamente l’ID di ogni clipping. Si potrebbe risolvere questo limite utilizzando un sistema dinamico in PHP che generi automaticamente l’ID per ogni articolo (su pro.htm.it questa funzione è delegate alle ASP).
  • Lo script è protetto da copyright ed è stato rilasciato sotto licenza GPL. Siete liberi di utilizzarlo, ma dovete mantenere il copyright e seguire la licenza (una traduzione in italiano della GPL la trovate su Open press). Se avete domande indirizzatele a info@smokinggun.com
  • Leggete i commenti presenti nel file clippings.js per ulteriori informazioni.

Guardate bene il codice di queste pagine e il codice del Javascript. La struttura è molto semplice e con un po’ di pazienza riuscirete ad adattarlo perfettamente alle vostre esigenze.

I Video di HTML.it