In questo articolo implementeremo in modo semplice ed efficace un blocco di notizie a rotazione ottenute tramite RSS/XML accessibile anche a utenti senza javascript, come disabili, amanti della command-line, oppure motori di ricerca… Tutto è possibile grazie al Javascript non intrusivo di DOMNews e a una libreria PHP chiamata Magpie RSS.

Scarica il codice sorgente dell’esempio, completo di Magpie RSS 0.61 e DOMnews 1.0:
News Ticker RSS accessibile

# UPDATE 06/06/07 # Abbiamo realizzato un widget per WordPress che implementa DOMnews e i concetti alla base di questo articolo (senza MagPie): Accessible RSS News Ticker.

Per prima cosa, le notizie. Prenderemo come esempio il feed RSS 2.0 di Amisnet, ma è possibile usare qualunque RSS 2.0 valido. Avremo poi bisogno di una libreria PHP per ricevere e interpretare il file RSS, e in questo esempio useremo Magpie RSS, una libreria molto solida e molto semplice. Non ultimo, ciò che renderà dinamica e accessibile la nostra News Box sarà DOMNews.

Per cominciare, dovremo includere nel nostro codice php la libreria Magpie, e verificare se siamo in grado di ricevere e interpretare correttamente il feed RSS.

PHP

//iniziamo a rendere la lista

Otterremo una lista non ordinata contenente i titoli del nostro RSS, che potrà essere stilizzata tramite fogli di stile, con gli opportuni riferimenti. In modo da renderla allo stesso tempo dinamica e accessibile, includeremo nella sezione head della nostra pagina il file javascript e il foglio di stile ottenuti da DOMnews, in questo modo:

XHTML

e modificheremo leggermente il nostro piccolo script php, in modo da attivare il javascript tramite l’ID del div che conterrà la nostra lista. Avremo bisogno di convertire la data dal formato RSS () a un formato più utile al nostro News Ticker; ci serviremo di una semplice funzione PHP per spezzare la data in una array dei suoi componenti, e rimontarla secondo il nostro gusto.

PHP

A questo punto, non ci resta che stilizzare e arricchire un minimo la nostra lista, e avremo terminato la struttura di base del ticker. Il codice completo della pagina di esempio: