I feed Rss sono uno dei migliori sistemi per diffondere contenuti sul Web: sono comodi per gli utenti perché consentono di ricevere le novità dei siti preferiti e sono utili per chi gestisce un sito Web perché permettono, a costo zero, di raggiungere un ampio numero di lettori. In Internet Explorer 8 è stata introdotta una tecnologia che amplia ed espande il concetto di feed Rss: le web slice.
Le web slice sono simili ai feed: consentono all'utente di ricevere gli aggiornamenti di una pagina Web. Tuttavia se ne differenziano perché permettono di sottoscrivere non, come avviene di solito, un semplice file di testo, ma una vera e propria pagina Web con moduli, immagini, testo modificato dai fogli di stile e così via. La pagina sarà visualizzata in un box direttamente dalla barra dei preferiti (figura 1) del browser.
Figura 1: Il box con la web slice di HTML.it
(clic per ingrandire)
Per aggiungere una web slice al proprio browser web slice ufficiale HTML.it 30
Maggiori dettagli sull'aggiunta di una web slice li indicheremo nell'ultima pagina di questo articolo; per prima cosa ci occuperemo invece di descrivere i passi necessari per dotare il proprio sito di questa tecnologia
Vediamo dunque come aggiungere una web slice ad un sito attraverso i due sistemi più comuni: incorporandola in una pagina Web oppure predisponendo una pagina alternativa ad hoc.
Creare una web slice incorporata
Una web slice può contenere solo una porzione di una pagina web. Nell'esempio in figura 3 vediamo, ad esempio, una web slice (sulla destra) che visualizza solo il primo post di un blog (sulla sinistra).
Figura 3: Una web slice incorporata in una pagina Web
(clic per ingrandire)
È certamente il metodo più semplice per creare una web slice poiché basta formattare con del codice specfico la porzione della pagina che si desidera pubblicare.
Prima del contenuto da aggiungere alla web slice aggiungete questo codice:
<div class="hslice" id="web-slice">
<span class="entry-title" style="display:none;">Nome sito</span>
<p style="display:none;">Gli aggiornamenti avvengono ogni <span class="ttl">30</span> minuti.</p>
<div class="entry-content">
La sintassi segue il formato hAtom microformati
Come si evince dal listato, la web slice viene inizializzata
hslice
div
id
identificativo
web-slice
Altro elemento obbligatorio è il titolo della web slice
entry-title
ttl
display:none
Il rigo 4 inizializza invece il blocco di codice da usare per la visualizzazione
<div class="entry-content">
</div> </div>
Terminato questo sarà possibile aggiungere la web slice ad Explorer. Grazie alla Rss platform, Windows richiederà ogni 30 minuti la pagina verificando che il titolo o il contenuto all'interno della classe entry-content
web-slice
Creare una web slice ad hoc
Se la pagina Web non ha contenuti tali da poter essere utilizzati nel box della slice, o se si volesse fornire contenuti più ricchi aggiungendo script o elementi dinamici, è necessario creare una slice ad hoc: una pagina web con contenuto personalizzato. Questo sistema è lo stesso utilizzato dalla slice di HTML.it mostrata in figura 1.
Il procedimento di aggiunta di una web slice ad hoc parte sempre dalla delimitazione del contenuto attraverso il quale la slice stessa diventa visibile all'utente. Inserite questo codice attorno ad un elemento ben visibile nella pagina (il logo del sito, un paragrafo in homepage e così via):
Ciò che cambia è l'elemento entry-content.
slice.html
<a rel="entry-content" href="slice.html" style="display:none;">Visualizzazione alternativa</a>
Anche in questo caso, chiuso l'elemento div
</div>
Per quanto riguarda la visualizzazione
Un modo molto semplice per formattare la pagina slice.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Web Slice</title>
<style type="text/css">
.panel
{
display: table-cell; /* Organizza il contenuto come in tabella */
font-family: verdana; /* Scegli un carattere ad alta leggibilità */
font-size: 12pt; /* Le dimensioni raccomandate per il carattere */
height: 99px; /* (Altezza(240) - Margini(3*14)) / 2 */
text-align: center; /* Testo centrato */
width: 139px; /* (Larghezza(320) - Margini(3*14)) / 2 */
}
.entry-title
{
font-size: 16pt; /* Grandezza visibile */
vertical-align: top; /* Mantieni il titolo in alto nella pagina */
}
</style>
</head>
<body style="margin: 0">
<div style="width: 320px">
<div style="display: table; border-spacing: 14px;">
<div style="display: table-row;">
<div class="entry-title panel">Web Slice</div>
<div class="panel">
<!-- Il titolo o il contenuto -->
</div>
</div>
<div style="display: table-row;">
<div class="panel">Contenuto</div>
<div class="panel">Contenuto</div>
</div>
</div>
</div>
</body>
</html>
Il codice è stato riadattato da quanto pubblicato da Microsoft alla pagina Internet Explorer 8 Web Slice Style Guide
Gestire gli aggiornamenti
Le web slice si affidano per la segnalazione degli aggiornamenti alla Rss platform di Windows. È questo componente che scarica ad intervalli regolari la pagina verificando che il contenuto o il titolo della slice sia cambiato e segnalando l'aggiornamento ad Explorer. Non è tuttavia un sistema efficiente lasciare che Windows scarichi un'intera pagina per verificarne l'eventuale aggiornamento: troppa banda verrebbe consumata da utenti e web server. Usando invece l'attributo rel="feedurl" in un link si potrà segnalare a Windows una pagina alternativa, molto più leggera, dalla quale ricevere la segnalazione di aggiornamento.
Aggiungendo, sempre all'interno del codice della slice, il tag
si indicherà a Windows di utilizzare per l'aggiornamento la sezione content-update update.html
I due listati presentati poco sopra avrebbero dunque questa nuova forma. Il codice per la slice incorporata sarà:
<div class="hslice" id="web-slice">
<span class="entry-title" style="display:none;">Nome sito</span>
<a rel="feedurl" href="update.html#content-update" style="display:none;">Aggiornamento alternativo</a>
<div class="entry-content">
<!-- Contenuto da visualizzare nella slice -->
</div>
</div>quello per la slice ad hoc sarà:
<div class="hslice" id="web-slice">
<span class="entry-title" style="display:none;">Nome sito</span>
<a rel="feedurl" href="update.html#content-update" style="display:none;">Aggiornamento alternativo</a>
</div>Non resta da fare altro a questo punto che indicare il contenuto che dovrebbe avere la pagina update.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>HTML.it Web Slice</title>
</head>
<body>
<div class="hslice" id="content-update">
<span class="entry-title">Nome sito</span>
<div class="entry-content"><a href="http://programmazione.html.it/guide/leggi/183/guida-objective-c/">Guida Objective C</a></div>
<p>Gli aggiornamenti avvengono ogni <span class="ttl">30</span> minuti.</p>
<a rel="entry-content" href="slice.html" style="display:none;">Visualizzazione alternativa</a>
</div>
</body>
</html>
Da notare due cose. In primo luogo la presenza dell'id
content-update
feedurl
contenuto vero e proprio della slice
slice.html
pagina.html
<a rel="entry-content" href="pagina.html#web-slice" style="display:none;">Visualizzazione alternativa</a>
Facendo attenzione a sostituire a web-slice
Ricordiamo, infine, che è anche possibile indicare come pagina di aggiornamento un feed Rss o Atom contenente un solo elemento (se ne contiene di più, l'efficacia della pagina alternativa viene meno). Nel feed Rss è da notare il tag <ttl>
Aggiungere una web slice a IE8
Come detto, per aggiungere una web slice ad Internet Explorer 8 ci sono due sistemi standard: scorrere il puntatore del mouse sulla porzione di pagina identificata come slice - per mezzo del codice che abbiamo descritto nelle pagine precedenti dell'articolo -, oppure premere il pulsante verde sulla barra degli strumenti di Explorer. È anche possibile tuttavia creare un pulsante o un link che esegua automaticamente l'aggiunta. Il codice da usare è il seguente:
Si tratta del classico comando per aggiungere una pagina ai preferiti con Internet Explorer. I parametri da passare al metodo sono 3: il primo (update.html#content-update Nome sito slice
Altro parametro da tenere d'occhio in quest'ambito è l'ordine di preferenza. Ogni pagina infatti potrebbe avere una o più porzioni impostate come slice (il massimo supportato è 100).
Al clic del mouse sull'icona Explorer aggiungerà, per impostazione predefinita, la prima slice in ordine di apparizione. Per indicare al browser un'altra slice si dovrà includere tra i tag <head> e </head> della pagina il seguente codice:
accertandosi di sostituire a #web-slice-01
Infine un codice per bloccare la visualizzazione della cornice verde attorno alla slice. Includendo questo meta tag nella pagina l'utente potrà aggiungere le web slice solamente attraverso il pulsante verde nella barra dei comandi di Explorer:
