È on line la quarta variante sullo scroller di feed rss, realizzato con SimplePie e jQuery.
Il primo post della serie, che contiene tutte le informazioni necessarie per creare gli scroller lo trovate qui, mentre nella pagina della demo troverete tutti i link alle risorse necessarie, nonchè fogli di stile, hmtl, codice javascript e PHP. Ecco il link: Scroller n.4

Ho realizzato una nuova semplice variante dello scroller Rss, che abbiamo visto in questo post. In questo caso lo scroller visualizza un solo item per volta: la differenza sostanziale rispetto al primo esempio è che lo scrolling avviene in senso orizzontale. Non mi soffermo ancora sul codice necessario per parsare il feed, sul markup, il foglio di stile, e le poche (grazie a jQuery) righe di codice javascript necessarie per creare questo scroller, per il semplice fatto che tutte le informazioni (e tutti i link del caso) si trovano sempre nel primo post della serie, mentre dalla pagina della live demo è scaricabile tutto il codice. Ecco il link allo scroller n.3

Mentre qui trovate la live demo n.1 e qui la n.2
Qui il primo post con il tutorial dettagliato.

Qualche giorno fa abbiamo visto come parsare un un feed Rss, e visualizzarne il contenuto sfruttando jquery ed il plugin Serialscroll.
In quello scroller è visibile un item per volta: per ogni item si vede il titolo (che linka al permalink) e una breve descrizione. Qui c’è l’esempio funzionante, con il codice sorgente.

Oggi vi presento una variante di quell’esperimento (ed altre ne verranno…): questa volta vengono visualizzati tutti gli item che decidiamo di acquisire dal feed. Per ogni item è possibile visualizzare una breve descrizione del post, che compare nel box in alto, quando si passa con il puntatore sul titolo . Se invece si fa click, viene aperto il permalink del relativo post.

Non starò qui a scrivere un tutorial perchè la maggior parte delle informazioni basilari per realizzare questo scroller sono le stesse che avevo fornito nel primo esempio e che quindi trovate qui.
Inoltre anche nella pagina dello scroller n.2 troverete tutto il codice di cui avete bisogno (php, html, css e javascript). Per cui qui non aggiungo altro:  ecco il link allo scroller n.2.

Una buona idea per proporre il contenuto di un feed rss all’interno di una pagina web, può essere quella di inserire i vari item all’interno di un box, e rendere questo box scrollabile in modo che l’utente possa visualizzare gli item precedenti o successivi. Quello che vogliamo ottenere è – per intenderci – uno scroller come questo.
Il funzionamento di questo scroller è molto semplice: a livello di markup creeremo un contenitore per una lista di item di un feed rss. Ogni item sarà composto dal titolo con link al post, e dalla descrizione dell’articolo: dati che estrarremo dal feed utilizzando un parser PHP: Simplempie. Con i css faremo in modo che un solo item sia visibile. Infine con jQuery “attiveremo” due immagini in modo che funzionino da pulsanti per scrollare la lista da un item all’altro.

DOWNLOAD NECESSARI
Ecco quello di cui avremo bisogno (agli indirizzi che seguono, oltre che un bel po’ di gente a cui dire semplicemente grazie di esistere, troveremo sia gli script e le librerie di cui avremo bisogno, sia la documentazione necessaria per capirne a pieno il funzionamento):

• l’ultima versione di jQuery
• il plugin serialScroll (il pacchetto per il download contiene anche scrollTo che sarà necessario)
• il plugin Truncate
• l’ottimo parser PHP Simplepie

MARKUP
A questo punto siamo pronti… Cominceremo dal markup.
Il div SCREEN sarà il contenitore all’interno del quale si troveranno le immagini che funzioneranno da pulsanti e il div SCROLL, quello effettivamente da scrollare. Lo scrolling avverà relativamente agli elementi LI presenti all’interno del div SCROLL. Ecco il codice html (qui la live demo):

<div id="screen">
<img class="prev" src="img/up.png" alt="prev" />
<div id="scroll">
<ul>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li>...</li>
</ul>
</div>
<img class="next" src="img/down.png" alt="next" />
</div>

IL FOGLIO DI STILE
Bisognerà quindi impostare lo stile per questi elementi, in modo che venga visualizzato solo un elemento LI per volta. Per farlo assegneremo a SCROLL un altezza fissa e nasconderemo tramite la proprietà OVERFLOW tutto il contenuto del div che eccede quest’altezza. Tra le altre cose poi, distanzierermo verticalmente tra loro i vari LI settando un discreto margine inferiore. Ecco il CSS (qui il risultato):

#screen  {width:300px; text-align: center}
#screen img {margin: 0 auto}

#scroll {width:300px; height:90px; overflow: hidden; background: #dcdcdc; border: 1px solid #cccccc}
#scroll ul {margin:0; padding:0}
#scroll ul li {padding: 5px 10px 5px 5px; margin: 0 0 40px 0; list-style: none; text-align: left; }

jQuery, serialScroll e Truncate
Per far sì che lo scroll funzioni, bisognerà includere jQuery e ed il plugin serialScroll (che per funzionare ha a sua volta bisogno di scrollTo). Richiameremo anche Truncate, che ci servirà a breve.

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery/jquery.serialScroll.js"></script>
<script type="text/javascript" src="jquery/jquery.truncate.js"></script>

La funzione serialScroll ci permetterà di rendere scrollabile SCROLL, definendo LI come item a cui lo scroll dovrà riferirsi.

$(document).ready(function(){	

$('#screen').serialScroll({
target:'#scroll',
items:'li',
prev:'img.prev',
next:'img.next',
axis:'xy',
duration:700,
force:true
});

});

Resta da considerare un aspetto che può vanificare il nostro tentativo di rendere assolutamente gradevole l’aspetto dello scroller: all’interno dell’elemento LI che viene visualizzato si potrebbe trovare un testo che occupa uno spazio superiore all’altezza prevista. Una possibiltà per ovviare a questo problema è “troncare” il testo in questione, in modo che non ecceda l’altezza del nostro scroller e che quindi non risulti tagliato. A questo scopo utilizzeremo un altro plugin per jQuery, Truncate. Una volta incluso nella pagina, ci servirà per impostare il numero di caratteri oltre i quali sarà necessario troncare il testo (senza che però venga tagliata a metà l’ultima parola): in questo caso 150.

$("#scroll ul>li").truncate(150);

A questo punto il nostro scroller sarà pienamente funzionante: qui c’è una demo della versione realizzata fino ad ora. Adesso bisognerà riempirla con i contenuti da estrarre da un feed RSS.

PARSARE IL FEED RSS CON SIMPLEPIE
Evidentemente abbiamo bisogno di uno script server-side, in grado di recuperare il contenuto del feed che desideriamo visualizzare. Se utilizziamo PHP, fa al caso nostro Simplepie. Una volta incluso simplepie all’interno della pagina, potremo creare un array contenente i primi dieci item del nostro feed:

handle_content_type();
for ($x = 0; $x < $thefeed->get_item_quantity($total_articles); $x++  )
{
$articles[] = $thefeed->get_item($x);
}
?>

Utilizzeremo quindi un ciclo FOREACH per estrarre da questo array titolo, link e descrizione del post contenuti in ogni item. Sfrutteremo inoltre lo stesso ciclo per “creare” la lista all’interno della quale avverrà lo scrolling.

<?php
foreach ($articles as $item)
{
echo '<li><a href="' . $item->get_link() . '">' . $item->get_title() . '</a><br/>'. $item->get_description().' </li>';
}
?>

Questo è quanto: qui c’è la pagina PHP completa per realizzare lo scroller di feed rss che invece vedete in azione qui.

Spero che il tutorial sia stato utile: in questo caso ecco l’inidizzo per aggiungere danielerollo.com al vostro reader e restare sempre aggiornati.
Quanto a suggerimenti o critiche, come sempre potremo discuterne nei commenti…