Widget Albo POP

Introduzione

Il Widget Albo POP è un elemento da inserire all'interno di pagine web per mostrare avvisi provenienti da un albo pop o da un qualsiasi altro feed RSS. In particolare, ad ogni visualizzazione o refresh della pagina verrà mostrato un avviso selezionato casualmente dall'albo al quale è collegato il widget. Questa guida contiene tutte le istruzioni per inserire un widget albo pop sul proprio sito. La sezione Guida Veloce mostra semplicemente il codice da inserire nel proprio sito in maniera un po sporca, mentre la sezioen Guida Dettagliata spiega in maniera più dettagliata i vari passaggi da effettuare ed è utile soprattutto a chi vuole personalizzare la visualizzazione del widget sul proprio sito.

Guida Veloce

Un widget albo pop deve essere collegato ad un feed RSS. Nelle pagine dei vari albi presenti sul sito albopop.it per goni albo è indicato il corrispondente feed RSS. Ad esempio nella pagina dell'albo pop dell'Università di Catania è indicato come feed RSS http://www.opendatahacklab.org/albopop/unict/unict2RSS.php. Per aggiungere un widget albo pop sul proprio sito web è sufficiente inserire il seguente codice nel punto della vostra pagina dove volete che il widget sia mostrato, curandosi di sostituire il feed RSS che usiamo a titolo di esempio (sempre http://www.opendatahacklab.org/albopop/unict/unict2RSS.php) con quello del feed relativo all'albo di vostro interesse.

<link rel="stylesheet" type="text/css" href="http://www.opendatahacklab.org/commons/css/albopopwidget.css" />
<div id="albopopwidget">
  <header>
    <a href="https://github.com/aborruso/albo-pop/wiki/Widget-Albo-POP">Albo POP Widget</a>
  </header>
  <script type="text/javascript" src="http://www.opendatahacklab.org/rss-tools/js/rss-tools.js"></script>
  <script type="text/javascript" defer>
    drawRssWitdget("http://www.opendatahacklab.org/albopop/unict/unict2RSS.php", "albopopwidget");
  </script>	
</div>		

Guida Dettagliata

Per inserire un widget Albo POP è possibile utilizzare la libreria rss-tools realizzata dall'opendatahacklab. Per utilizzare questa libreria è necessario importarla dalla URL http://www.opendatahacklab.org/rss-tools/js/rss-tools.js. Solitamente questa operazione viene effettuata all'interno dell'elemento head inserendo la riga seguente:

<script type="text/javascript" src="http://www.opendatahacklab.org/rss-tools/js/rss-tools.js"></script>

È disponibile anche uno stile css ufficiale per i widget albo pop all'indirizzo http://opendatahacklab.org/commons/css/albopopwidget.css, che è possibile comunque modificare senza restrizioni seguendo le istruzioni indicate nelle sezioni seguenti. L'importazione di stili esterni in pagine web deve essere posta necessariamente nell'elemento headcome segue:

<link rel="stylesheet" type="text/css" href="http://opendatahacklab.org/commons/css/albopopwidget.css" />

Eseguite queste operazioni preliminari, è necessario definire all'interno della propria pagina web un container che conterrà l'avviso da mostrare. Tale container può essere un qualsiasi elemento HTML di tipo contanier, alcuni esempi sono div,article e section. È importante che per il container venga dichiarato un id. Per i meno esperti ricordiamo che l'id di un elemento in un documento HTML (e quindi XML) è una stringa che caratterizza univocamente l'elemento all'interno del documento, quindi non devono esistere due elementi con lo stesso id all'interno dello stesso documento. Nel caso in cui si utilizzi lo stile css albopopwidget è necessario che questo id sia proprio albopopwidget.

Se si utilizza lo stile css di albo pop widget visto prima, è importante inserire un elemento header all'interno di questo contanier, che sarà il titoletto del widget. All'interno dell'header potere usare il livello di intestazione appropriato (h1,h2,h3, ...) per la vostra pagina web, oppure non usare ulteriori tag di interstazione. L'esempio che segue mostra un container con id albopopwidget ed una intestazione che punta a questa pagina wiki. L'utilizzo di questa intestazione è incoraggiato per diffondere l'uso del widget ed è da me (Cristiano Longo) ritenuto sufficiente per assolvere agli oneri di attribuzione.

<div id="albopopwidget">
  <header>
    <a href="https://github.com/aborruso/albo-pop/wiki/Widget-Albo-POP">Albo POP Widget</a>
  </header>
</div>		

Infine è necessario riempire questo container con le informazioni provenienti dal feed RSS dell'albo. A questo fine si usa la funzione drawRssWitdget(rssurl, widgetid) fornita dalla libreria rss-tools. Il primo parametro è l'indirizzo del feed RSS dell'albo. Per ogni albo pop questa informazione è indicata nella pagina dell'albo all'interno del sito albopop.it. Il secondo parametro è invece l'id del container che abbiamo inserito in precedenza per accogliere l'avviso. L'esecuzione dello script è opportuno che sia deferita (attributo defer nel tag script) così da non rallentare il caricamento della pagina, e può essere piazzata in qualsiasi parte della pagina. Riportiamo nel seguito un frammento che popola il container con id albopopwidget visto prima con un avviso dall'albo dell'Università di Catania. Si noti che http://dev.opendatasicilia.it/albopop/unict/unict2RSS.php è la URL del feed dell'albo pop dell'Università di Catania, e deve essere sostituito nel caso in cui si vogliano mostrare avvisi da altri feed.

<script type="text/javascript" defer>
  drawRssWitdget("http://dev.opendatasicilia.it/albopop/unict/unict2RSS.php", "albopopwidget");
</script>	

Per concludere riportiamo un esempio completo di pagina html che include un widget albo pop collegato al feed dell'Università di Catania

<!DOCTYPE html>
<html>
  <head>
    <title>Test Albo POP Widget</title>
    <!-- si imposta lo stile per il widget -->
    <link rel="stylesheet" type="text/css" href="http://opendatahacklab.org/commons/css/albopopwidget.css" />
    <!-- si importa la libreria per tracciarlo -->
    <script type="text/javascript" src="http://www.opendatahacklab.org/rss-tools/js/rss-tools.js"></script>
  </head>
  <body>
    <h1>Albo POP Widget Test Page</h1>
    <!-- qui viene definito il container che accogliera' l'avviso -->
    <div id="albopopwidget">
      <header>
        <a href="https://github.com/aborruso/albo-pop/wiki/Widget-Albo-POP">Albo POP Widget</a>
      </header>
    </div>		
    <!-- poi viene eseguito lo script per popolarlo -->
    <script type="text/javascript" defer>
      drawRssWitdget("http://dev.opendatasicilia.it/albopop/unict/unict2RSS.php", "albopopwidget");
    </script>	
  </body>
</html>