
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come poter aggiungere al tuo sito una lista degli articoli preferiti dai tuoi utenti
Articolo in lingua inglese: «Clippings: bookmarks in your site»
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.
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:
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 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:
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.
Se vuoi aggiornamenti su Clippings: i Preferiti per il tuo sito inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Alcuni utili consigli per migliorare le performance di caricamento e visualizzazione di una pagina web, sfruttando alcuni trucchi basati su Javascript.
Questo articolo introdurrà il linguaggio JavaScript ai programmatori Java enfatizzando soprattutto le differenze al fine di garantire un più rapido apprendimento.
Una serie di esempi pratici che mostrano le differenze principali tra le sintassi di Python e Javascript, utili a migrare da un linguaggio all’altro.
Vue.js è uno dei framevork JavaScript più utilizzati per la realizzazione di interfacce web e single page application. Questa guida affronta tutti i principali aspetti relativi allo sviluppo di applicazioni basate su Vue.js: dai principi di funzionamento, alla gestione degli eventi e il data binding, passando per la realizzazione di componenti personalizzati, e la gestione dello stato dell’applicazione.