10856 Letture

Guida all'utilizzo della funzionalità pinning con IE9 e Windows 7 / prima puntata

Internet Explorer 9, come già sottolineato in altri nostri articoli, consente di trarre vantaggio da alcune funzionalità proprie di Windows 7: le più importanti si chiamano "pinning" e "jump lists". Con il primo termine si fa riferimento alla possibilità di visualizzare l'icona propria di un sito web direttamente all'interno della barra delle applicazioni di Windows 7.
Abbiamo già evidenziato in passato, sin dal momento del lancio del più recente tra i sistemi operativi del colosso di Redmond (ved. questo articolo) che, facendo scomparire la "barra di avvio veloce" propria di Windows XP, Microsoft ha aggiunto la possibilità di inserire, in modo permanente, l'icona di qualunque applicazione nella barra esposta in calce allo schermo. Per aggiungere un programma alla barra, è sufficiente avviare il software, fare clic col tasto destro del mouse sulla sua icona quindi scegliere la voce "Aggiungi questo programma alla barra delle applicazioni":


Analoga operazione può essere effettuata trascinando, con il tasto destro del mouse, il collegamento a qualunque programma installato sul sistema sulla barra delle applicazioni quindi scegliendo la voce "Aggiungi a barra delle applicazioni":


Le icone possono essere eventualmente eliminate dalla barra delle applicazioni, in qualunque momento, cliccandovi col tasto destro del mouse quindi selezionando la voce "Rimuovi questo programma dalla barra delle applicazioni".

Con il rilascio di Internet Explorer 9, Microsoft ha voluto estendere la funzionalità "pinning", potenzialmente, a tutti i siti e le applicazioni web. La nuova possibilità nasce dal fatto che Microsoft, così come altri produttori, stanno cercando di attribuire "dignità" di normali programmi alle applicazioni web. Ecco quindi che l'utente può inserire collegamenti ai siti web preferiti sia nella barra delle applicazioni sia, addirittura, nel menù Start del sistema operativo.

Il sito web che sceglie di abbracciare la nuova funzionalità può far leva sulle cosiddette "jump list" per proporre una serie di collegamenti raggiungibili cliccando, con il tasto destro del mouse, sull'icona aggiunta alla barra delle applicazioni di Windows 7:


Ciascun collegamento della sezione "Attività" è denominato "task" e può puntare a qualunque pagina. Ogni task, inoltre, può essere liberamente personalizzato facendo riferimento ad un'icona "ad hoc", memorizzata sul server web.
Per ciascun sito "pinned" viene creata una vera e propria istanza "personalizzata" di Internet Explorer che lavora in modo a sé stante rispetto alle altre.


Per procedere, è sufficiente adottare il seguente codice HTML, da inserire entro la tag <head> del sito web:

<meta name="application-name" content="Nome del sito web o dell'applicazione web"/>
<meta name="msapplication-tooltip" content="Commento"/>
<meta name="msapplication-starturl" content="http://www.indirizzodelsitoweb.it"/>
<meta name="msapplication-window" content="width=1024;height=768"/>
<meta name="msapplication-navbutton-color" content="#E90000"/>
<meta name="msapplication-task" content="name=Task numero uno; action-uri=http://www.indirizzodelsitoweb.it;icon-uri=favicon16.ico"/>
<meta name="msapplication-task" content="name=Task numero due; action-uri=http://www.indirizzodelsitoweb.it;icon-uri=favicon16.ico"/>
<meta name="msapplication-task" content="name=Task numero tre; action-uri=http://www.indirizzodelsitoweb.it;icon-uri=favicon16.ico"/>

Le varie meta tag introdotte con Internet Explorer 9 sono autoesplicative: la prima consente di specificare il nome del sito web che deve essere visualizzato nella barra delle applicazioni di Windows 7, un commento aggiuntivo ("tooltip"), la pagina principale del sito web (cliccando sull'icona "pinned", il browser sarà aperto su tale pagina), la risoluzione ed il colore da assegnare agli elementi della finestra di Internet Explorer 9 (questa tag può essere eventualmente omessa). Seguono poi i "task" ossia i collegamenti alle pagine del sito web che si desiderano "pubblicizzare" facendo clic sul pulsante aggiunto alla barra delle applicazioni di Windows 7.
Il nome dell'icona favicon16.ico deve essere sostituito col nome dell'icona 16x16 pixel da impiegare per ciascun "task" in elenco.

Windows 7 utilizza diversi formati di icone per la barra degli strumenti e per l'inserimento nel menù Programmi. Microsoft consiglia di realizzare un'icona multirisoluzione (la classica favicon.ico) che contenga i vari formati utilizzati. Giuseppe Guerrasio suggerisce il tool online X-Icon Editor che permette di generare un file favicon.ico contenente più formati (16x16, 24x24, 32x32 e 64x64 pixel).
Per importare l'immagine a partire dalla quale sarà possibile produrre il file favicon.ico, è sufficiente cliccare sul pulsante Import quindi su Upload.

La sintassi per richiamare il file favicon.ico dovrà poi essere modificata come segue (sempre nel codice HTML delle proprie pagine web):
>link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Il consiglio è quello di attivare, ove possibile, la compressione Gzip lato server in modo tale che anche il file favicon.ico, contenente diversi formati d'immagine, possa apparire di dimensioni minori rispetto a ciò che è in realtà (con ovvi benefici in termini di consumo di banda e di velocità nello scaricamento delle pagine web che compongono il proprio sito).


Ovviamente, file favicon.ico multirisoluzione possono essere creati anche ricorrendo a software di grafica come il famoso GIMP (presenteremo più avanti la procedura).

La funzionalità "pinning" di Windows 7, ora supportata da Internet Explorer 9, può essere sfruttata – ricorrendo ad alcune API JavaScript introdotte con il nuovo browser – per aggiungere delle sezioni sulle quali richiamare l'attenzione dell'utente, immediatamente sotto le "jump lists". Tale funzionalità è stata battezzata "Jump list categories" e si rivela particolarmente utile per proporre ai visitatori dei contenuti che vengano aggiornati dinamicamente.

Nelle prossime puntate citeremo l'esempio di un "unobstrusive JavaScript" ossia un codice che, eseguito su vari browser differenti non darà luogo ad errori od a comportamenti anomali nel caso in cui la funzionalità "pinning" non dovesse essere supportata (è il caso di tutti i prodotti diversi da Internet Explorer 9). Grazie a tale codice, sarà possibile mostrare una barra informativa che propone all'utente di Internet Explorer 9 la possibilità di aggiungere il sito web nella barra delle applicazioni del suo sistema.

Un'altra funzione JavaScript, consentirà di richiedere l'aggiunta di un sito web – previa autorizzazione dell'utente – al menù Programmi di Windows 7.

Vedremo anche come funzionalità similari sono state implementate in Google Chrome (il browser consente la creazione di un collegamento sul desktop) e su Mozilla Firefox 4.0, prodotto che dovrebbe essere rilasciato, in versione definitiva, il 22 marzo 2011.


  1. Avatar
    spectral
    16/03/2011 23:17:35
    Articolo interessante e molto utile: tuttavia riscontro una piccola inesattezza: il pinning per le pagine web è eseguibile soltanto trascinando l'icona del sito web dalla barra degli indirizzi alla barra delle applicazione :impossibile invece eseguiro col tasto destro del mouse aggiungendo la voce alla barra
Guida all'utilizzo della funzionalità pinning con IE9 e Windows 7 / prima puntata - IlSoftware.it