In questo articolo presenteremo un semplice metodo per ottenere una pagina web ottimizzata per dispositivi mobili senza dover affrontare complesse attività di progettazione e di sviluppo: vedremo come sia possibile elaborare i contenuti di un sito esistente e proporli in un formato compatibile agli strumenti di navigazione portatili. Si tratterà ovviamente di un compromesso: in cambio della velocità di implementazione dovremo sacrificare qualcosa in termini di controllo sui contenuti, che ricaveremo da una fonte esterna.
RSS
RSS è un linguaggio di marcatura costruito secondo le regole di XML grazie al quale è possibile esportare e distribuire con estrema semplicità i contenuti di un sito web. Si tratta di un formato che ha preso piede negli ultimi anni (anche se la prima versione è datata 2000) grazie alla possibilità offerta da molte piattaforme di gestione dei contenuti, come blog e content management system, di generare i feed, ossia file RSS liberamente a disposizione dei navigatori, in modo automatico e costantemente aggiornato.
Tipicamente queste informazioni possono essere gestite tramite appositi programmi (news aggregators) che permettono di consultare simultaneamente tutte le fonti che l'utente ha sottoscritto, verificando la presenza di aggiornamenti sui siti di interesse. Chi volesse approfondire e conoscere tutte le potenzialità di questo formato, può leggere questo articolo di Francesco De Francesco.
Per il nostro obiettivo è interessante notare che RSS è una delle migliori applicazione di uno dei principi ispiratori di XML: strutturare l'informazione in modo semantico affinché anche programmi diversi possano condividere ed elaborare gli stessi dati. Il nostro esercizio cercherà, appunto, di dimostrare come sia semplice generare un sito web mobile a partire dai contenuti di un sito web già esistente.
Il principale vantaggio di una simile tecnica è l'opportunità di riutilizzare le informazioni che già sono messe a disposizione da un sito potendo fare a meno di tutte quelle componenti che su un dispositivo mobile potrebbero essere d'intralcio alla navigazione. Anziché applicare un foglio di stile per dispositivi mobili, che si limita a nascondere alcune parti della pagina senza però evitare all'utente lo scaricamento completo, riutilizzare un feed RSS permette di creare una pagina leggera e funzionale, che l'utente potrà richiamare per accedere direttamente ai contenuti ottimizzando la fruizione da cellulare o palmare.
Preparazione
Per raggiungere il nostro obiettivo ci aiuteremo con un semplice script PHP che può essere scaricato dal sito web di Global Syndication. Il PHP RSS Parser consente di specificare l'indirizzo di un feed RSS che si vuole far elaborare allo script in questione. Per semplicità utilizzeremo il feed delle ultime news del sito della BBC, reperibile a questo indirizzo. Premendo invio otterremo del codice da copiare e incollare nel nostro script PHP.
È necessaria una precisazione: il codice va inserito all'interno di una struttura XHTML già impostata. Quindi, consigliamo di utilizzare questo codice e di inserire, in luogo del nostro commento, il codice ottenuto dal sito citato:
Listato 1. Modello di pagina XHTML
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Il mio sito web mobile</title>
</head>
<!-- inserire qui lo script ottenuto da http://www.globalsyndication.com/rss-parser -->
<body>
</body>
</html>
Modificare e adattare lo script
Il listato di codice così ottenuto non deve spaventare: anche chi è alle prime armi con questo linguaggio di programmazione può modificarlo con molta facilità. Infatti la parte che richiede un nostro intervento è quella conclusiva (successiva all commento che recita "output HTML"). Lo script in questione non genera un codice di marcatura perfetto: si limita a circondare l'informazione estratta dal feed RSS con un generico tag <div>. Sarebbe invece importante fare in modo che l'output sia in formato XHTML Mobile Profile, linguaggio di cui abbiamo parlato nella guida di questo sito dedicata ai siti per dispositivi mobili. Per chiarezza espositiva riportiamo con qualche commento in più la parte finale dello script:
Listato 2. output HTML
// contiene il titolo del feed, dovrà diventare un tag <h2>
print ("<div class="channelname">" . $rss_channel["TITLE"] . "</div>");
// contiene la descrizione del feed, può diventare un elemento <p>
print ("<div class="channeldescription">" . $rss_channel["DESCRIPTION"] . "</div><br />");
if (isset($rss_channel["ITEMS"])) {
if (count($rss_channel["ITEMS"]) > 0) {
for($i = 0;$i < count($rss_channel["ITEMS"]);$i++) {
if (isset($rss_channel["ITEMS"][$i]["LINK"])) {
// è il caso in cui oltre al titolo della news viene specificato
//anche un link: sarà un <h2> contenente un link (<a>)
print ("n<div class="itemtitle"><a href="" .
$rss_channel["items"][$i]["link"] . "">" .
$rss_channel["ITEMS"][$i]["TITLE"] . "</a></div>");
} else {
// è il caso in cui il link non sia presente: sarà un <h2>
print ("n<div class="itemtitle">" .
$rss_channel["ITEMS"][$i]["TITLE"] . "</div>");
}
// contiene la descrizione dell'item, può diventare un elemento <p>;
print ("<div class="itemdescription">" .
$rss_channel["ITEMS"][$i]["DESCRIPTION"] . "</div><br />");
}
} else {
print ("<strong>There are no articles in this feed.</strong>");
}
}
Struttura e presentazione
Non ci resta, a questo punto, che provare il funzionamento del nostro esercizio. Sarà sufficiente caricare il nostro script in uno spazio web in grado di interpretare il linguaggio PHP. Il risultato sarà simile all'immagine seguente:
Non resta, quindi, che applicare alcune regole di stile per rendere la lettura delle news più agevole e gradevole. Nello specifico, potremmo assegnare il seguente foglio CSS, da includere esternamente per non appesantire il codice della pagina:
Listato 2. Foglio di stile
html, body {
font-family: Verdana, Arial, sans-serif;
font-size: 1em; padding: 0px; margin: 0px;
}
h1 {
font-size: 1.2em; background-color:#ededed;
color:#000000; margin:0px;
}
h2, p {font-size: 1em; margin-left: 0.5em;}
a {color:#000099;}
e ottenere così la versione mobile del sito che abbiamo scelto:
