Creare un News Ticker dinamico con jQuery e PHP

Aggiornamento 11/10/2012

Su suggerimento di alcuni lettori del blog, abbiamo caricato un archivio ZIP con con tutti i file descritti nell’articolo, necessari a provare questa soluzione. Per installarlo, è sufficiente:

  • scaricare il pacchetto;
  • estrarre i file in una directory sul web server, configurato in modo da eseguire PHP;
  • accedere al file index.php

Purtroppo al momento non è possibile avere uno “spazio demo” su questo server, ma gli esempi solitamente sono molto semplici e dovreste riuscire a provarli su qualsiasi sistema Web Server + PHP, come XAMPP/LAMPP e simili.

Buon divertimento!

newsticker_jquery_php.zip


Il news ticker è un elemento molto usato nei siti web, soprattutto quelli aziendali. È un modo molto efficace per attirare l’attenzione del visitatore e dirottarlo verso gli ultimi articoli del blog, offerte speciali o pagine promozionali, perché spesso sfrutta l’animazione o altri “effetti speciali”.

Nella “preistoria” del web (appena una decina d’anni fa!) per ottenere questo effetto era necessario ricorrere a componenti attivi come applet java o (peggio ancora) componenti ActiveX. Queste soluzioni avevano dei grossi problemi:

  • compatibilità: il browserm doveva avere installato il plug-in Java se si voleva usare una applet Java, oppure… essere Internet Explorer nel caso degli ActiveX;
  • stabilità: ancora oggi si parla con enfasi quasi mitologica dei memorabili crash (con tanto di schermata blu) provocati dai news ticker di allora;
  • utilizzo di banda: il browser deve scaricare parecchi kb di codice, che per le connessioni di quel tempo antico erano preziosissimi!
  • utilizzo di risorse: applet e ActiveX tendono ad occupare parecchia memoria e processore, rallentando il computer;
  • questi sistemi raramente venivano pensati per avere una degradazione dolce (cfr. Degrading gracefully), ovvero se il browser non supportava la tecnologia scelta, il componente semplicemente non veniva mostrato.

In tempi più recenti si è passati all’uso di filmati flash al posto di applet o ActiveX, sperando di risolvere questi problemi, ma non hanno mai raggiunto un risultato soddisfacente.

Un’implementazione jQuery

L’avvento dei browser moderni come Firefox, Safari e Chrome ha cambiato le carte in tavola, permettendo la nascita di librerie Prototype e jQuery, dei veri gioielli di compatibilità, leggerezza e flessibilità. In questo articolo utilizzeremo appunto jQuery e un il plugin jCarousel Lite.

Il news ticker che vogliamo realizzare avrà queste caratteristiche:

  • orientamento verticale;
  • una notizia alla volta;
  • movimento automatico;
  • ciclico: una volta raggiunta l’ultima notizia, ricomincerà da capo.

Un’altra caratteristica che vogliamo è che il news ticker si aggiorni automaticamente, senza dover modificare il codice della pagina originale. Per fare ciò prepareremo una directory /newsticker all’interno del nostro progetto, dove piazzeremo i frammenti di HTML che verranno inclusi dinamicamente dai nostri script.

Ecco quindi il codice PHP della pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>News ticker dinamico con PHP e jQuery</title>
  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
  <script>
$(document).ready(function() {
  $("#newsTicker").jCarouselLite({
      btnPrev: "#newsTicker_prev",
      btnNext: "#newsTicker_next",
      vertical: true,
      visible: 1,
      auto: 2000,
      speed: 800
  })
});
  </script>
</head>
<body>
<?php
// configurazione
define('NEWS_DIR', 'newsticker');

// array con l'elenco degli articoli
$articles = array();

// leggi elenco dei file
$handle = dir(NEWS_DIR);
while(false !== ($entry = $handle->read())) {
  $filename = NEWS_DIR . '/' . $entry;
  // considera solo i file con estensione .html
  if (is_dir($filename) || !preg_match("/\.html$/", $filename)) {
    continue;
  }

  array_push($articles, $filename);
}

// ordina al contrario
arsort($articles);
?>

<button id="newsTicker_prev">&lt;&lt;</button>
<button id="newsTicker_next">&gt;&gt;</button>
<div id="newsTicker">
  <ul>
<?php
  // se non ci sono articoli...
  if (count($articles) == 0) {
    echo 'Nessun articolo presente';
  }
  else {
    // includi tutti gli articoli
    for($i = 0; $i < sizeof($articles); ++$i) {
      $article = $articles[$i];
      ?>
      <li><?php include $article; ?></li>
      <?php
    }
  }
?>
  </ul>
</div>

</body>
</html>

 

Alcuni aspetti da notare:

  • la chiamata al metodo .jCarouselLite() trasforma il nostro <div> in un carosello, ovvero un componente dinamico che mostra una finestra di contenuti alla volta;
  • il componentne jCarouselLite, nonostante il nome, è molto configurabile;
  • il codice PHP legge la directory newsticker e carica tutti i file HTML presenti, ordinandoli alfabeticamente al contrario. In questo modo, se rispettiamo la convenzione adottata per i nomi dei file (article-0001.html, article-0002.html, ecc.), saranno mostrati per prime le ultime news.

Come potete notare i file jquery-1.7.1.min.js e jcarousellite_1.0.1.min.js vanno copiati nella directory /js.

Inseriamo poi qualche articolo d’esempio nella directory /newsticker :

article-0001.html
<h5>Promozione domini</h5>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor</p>
<a href="#">leggi</a>
article-0002.html
<h5>Nuova versione Debian</h5>
<p>Pellentesque lectus arcu, tincidunt sed rutrum sit amet, cursus in
arcu.</p>
<a href="#">leggi</a>
article-0003.html
<h5>Nuova funzione di backup</h5>
<p>Curabitur diam enim, malesuada in rutrum id, ultrices sed nisl. Ut bibendum
porttitor massa, non imperdiet nunc mollis sit amet.</p>
<a href="#">leggi</a>

Links