Web slice per IE8: come crearle e gestirle

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.

Per aggiungere una web slice al proprio browser, l'utente dovrà usare il pulsante verde che compare sulla barra dei comandi di Explorer o passare il mouse su una sezione "sensibile" del sito predisposta dal webmaster. Sebbene sia più corretto che la sezione "sensibile" corrisponda esattamente alla sezione che sarà aggiornata, una web slice può essere inclusa in qualsiasi parte del documento: se state visualizzando questo articolo con Internet Explorer 8, passando il mouse su questo paragrafo noterete che, oltre ad un contorno verde, viene mostrata in alto a sinistra l'icona della web slice. Se fate clic su quell'icona, o su quella visualizzata sulla barra dei comandi di Explorer, aggiungerete ai preferiti la web slice ufficiale di HTML.it, aggiornata ogni 30 minuti.

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. I sistemi sono diversi: nel box di Explorer è possibile visualizzare una porzione di una pagina già pubblicata online, visualizzare una pagina ad hoc (come nella figura 1), visualizzare il primo elemento di un feed Rss o non visualizzare nulla ma limitarsi a segnalare l'aggiornamento al browser. Quando una web slice viene aggiunta al browser, il suo titolo comparirà nella barra dei preferiti e, in presenza di un aggiornamento, lampeggerà, trasformando in grassetto il testo.

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).

È 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, un microformato progettato per distribuire contenuti. I microformati sono degli standard che permettono di aggiungere uno strato semantico a tradizionali pagine Web marcando i contenuti già pubblicati con attributi come class o id.

Come si evince dal listato, la web slice viene inizializzata attraverso la classe hslice aggiunta ad un elemento (rigo 1). In questo caso si è utilizzato per comodità un elemento div, ma è possibile utilizzare qualsiasi altro elemento XHTML disponibile. Ogni web slice dovrà avere inoltre un id identificativo (nel nostro caso web-slice): è l'elemento che sarà usato da Explorer per individuare il contenuto da aggiornare e dovrà essere univoco nel contesto della pagina (non ce ne devono essere due uguali).

Altro elemento obbligatorio è il titolo della web slice, titolo che comparirà nella barra dei preferiti di Internet Explorer: lo si imposta attraverso la classe entry-title (rigo 2). La classe ttl (rigo 3) indica invece l'intervallo di tempo, espresso in minuti, che dovrà trascorrere da un aggiornamento ad un altro: se si salta questa impostazione, Explorer utilizzerà il valore predefinito che, se non modificato dagli utenti, è pari a 24 ore. Da notare che sia il titolo sia il tempo di aggiornamento sono stati nascosti attraverso la proprietà Css display:none, è un semplice trucco per impostare il parametro senza mostrarlo all'utente.

Il rigo 4 inizializza invece il blocco di codice da usare per la visualizzazione: tutto ciò che sarà incluso fra <div class="entry-content"> e la sua chiusura, sarà visualizzato all'interno della web slice. Finito di predisporre il contenuto da visualizzare, non resta dunque da fare altro che chiudere gli elementi aperti poco prima:

    </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 della slice web-slice sia cambiato o no. Se Windows dovesse trovare del nuovo contenuto, mostrerà l'avviso su Explorer.

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):

<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>

Ciò che cambia è l'elemento entry-content. Questo dovrà essere trasformato in un link che punta alla slice ad hoc, una vera e propria pagina web indipendente, che chiameremo slice.html:

<a rel="entry-content" href="slice.html" style="display:none;">Visualizzazione alternativa</a>

Anche in questo caso, chiuso l'elemento div, la web slice diventerà funzionante.

</div>

Per quanto riguarda la visualizzazione, è necessario tenere a mente che Explorer visualizzerà la slice ad hoc all'interno di un box fisso di 320x240 pixel e non la adatterà al contenuto effettivo, come invece accade per le slice incorporate. Inoltre, Explorer bloccherà eventuali finestre di dialogo, pop-up e controlli ActiveX (se non già precedentemente installati).

Un modo molto semplice per formattare la pagina slice.html con queste dimensioni è quello pubblicato qui sotto:

<!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, una risorsa che contiene diversi suggerimenti sulla progettazione delle web slice.

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

<a rel="feedurl" href="update.html#content-update" style="display:none;">Aggiornamento alternativo</a>

si indicherà a Windows di utilizzare per l'aggiornamento la sezione content-update della pagina 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 alla riga 8, lo stesso utilizzato come riferimento per feedurl. In secondo luogo la riga 12: in quel punto va indicato il contenuto vero e proprio della slice, quello che dovrà comparire all'interno del box di Internet Explorer. Nel caso fosse una pagina ad hoc basta indicare il nome della pagina (nel nostro caso slice.html), nel caso fosse invece solo una porzione di una pagina, andrebbe indicato il percorso relativo della web slice. Posto, ad esempio, che la pagina che contiene la porzione di contenuto da visualizzare si chiami pagina.html, dovremmo indicare alla riga 12 il seguente codice:

<a rel="entry-content" href="pagina.html#web-slice" style="display:none;">Visualizzazione alternativa</a>

Facendo attenzione a sostituire a web-slice l'id effettivo della 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> (riga 7) utilizzato per impostare la frequenza di aggiornamento:

<?xml version="1.0"?>
<rss version="2.0">
  <channel>
    <title>HTML.it Web Slice</title>
    <link>http://www.html.it</link>
    <description>Aggiornamento delle web slice</description> 
    <ttl>30</ttl>
    <item>
      <title>Guida Objective C</title>
      <link>http://programmazione.html.it/guide/leggi/183/guida-objective-c/</link>
    </item>
  </channel>
</rss>

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:

<a href="javascript:void(0);" onclick="window.external.AddToFavoritesBar('update.html#content-update', 'Nome sito', 'slice'); return false;" title="Aggiungi la Web Slice">Aggiungi la web slice</a>

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) è l'indirizzo in cui risiede la web slice, completo di id. Il secondo (Nome sito) è il testo da pubblicare sulla barra dei preferiti di Explorer; il terzo (slice) è il parametro invariabile che comunica al browser che non si tratta di un preferito tradizionale, ma di una web 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:

<link rel="default-slice" type="application/x-hatom" href="#web-slice-01" />

accertandosi di sostituire a #web-slice-01 l'id della slice che si desidera impostare come predefinita.

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:

<meta name="slice" scheme="IE" content="off"/>

Riferimenti

• Subscribing to Content with Web Slices, Msdn Microsoft
• Web Slice Format Specification - Version 0.9, Msdn Microsoft
• Internet Explorer 8 Web Slice Style Guide, Msdn Microsoft