La barra delle applicazioni
Per un sito internet è importante essere facilmente raggiungibile dagli utenti, fidelizzarli e informarli sulle novità che vengono pubblicate, in modo da mantenere vivo l'interesse.
Ci sono diversi modi per fare queste cose, molti validi, qui ci concentriamo su una tecnologia introdotta con Internet Explorer 9. La funzione di cui parliamo permette di inserire nella barra delle applicazioni di Windows 7 un collegamento diretto al tuo sito, con un'icona personalizzata e la possibilità di visualizzare un menu di collegamenti alle aree che vuoi promuovere maggiormente, che saranno inserite nella sezione Attività. Per farti un'idea del risultato finale, nella figura 1, puoi vedere cosa accade nella barra delle applicazioni una volta preparato il tuo sito per sfruttare questa tecnologia.
Figura 1: il sito nella barra delle applicazioni di Windows 7
Nota:
Una volta aggiunto il tuo sito alla barra delle applicazioni sarà come usare una vera applicazione web, con tanto di colori personalizzati nei pulsanti di navigazione. Il colore verrà scelto automaticamente in base a quello più presente nella tua icona.
L'icona
Adesso che abbiamo visto quale sarà il risultato finale, scopriamo insieme come realizzarlo. La prima operazione che dovrai fare sarà quella di procurarti un'icona per il tuo sito, la famosa favicon, ossia l'immagine che viene visualizzata nella barra degli indirizzi. Probabilmente ne hai già una, ma dovrai inserirne una seconda di dimensione 32x32 pixel: l'icona nella barra delle applicazioni richiede infatti una risoluzione maggiore rispetto a quelle che normalmente si usano nella barra degli indirizzi. L'icona puoi realizzarla con programmi di grafica, ma se non ti senti in grado puoi sempre reperirne di già pronte sul web, l'importante è che siano in formato "ico".
Per aggiungere alla tua pagina l'icona per la barra delle applicazioni, dovrai inserire questo collegamenti nella sezione <head> della pagina, sostituendo ovviamente l'indirizzo dell'esempio con quello corretto.
<link rel="shortcut icon" href="http://www.miosito.it/icona_ie9.ico" />
Nota:
L'inserimento dell'icona non è obbligatorio; se Internet Explorer 9 non la trova utilizzerà quella predefinita del tuo sito, e se nemmeno questa è presente userà un'icona generica.
L'applicazione web
Inserita l'icona dovremo dare un nome all'applicazione web e inserire l'indirizzo della home page. Questo servirà per creare un collegamento alla home del tuo sito. Per farelo dovremo usare i "metatag" application-name e msapplication-starturl che puoi vedere nel listato.
<meta name="application-name" content="Nome del sito" />
<meta name="msapplication-starturl" content="http://www.miosoto.it/" />
Inserimento dei collegamenti
Preparata la base della nostra applicazione web, è arrivato il momento di inserire i collegamenti alle aree che vogliamo promuovere, che non devono essere necessariamente all'interno del sito. Infatti, potresti usare questa funzione per rimandare alla tua pagina su Facebook o ad altri contenuti esterni.
Si possono inserire un massimo di cinque collegamenti e lo si fa con il metatag msapplication-task, dove dovremo specificare il nome da utilizzare nel menu, l'indirizzo a cui farlo puntare e, se lo desideri, un'icona personalizzata per ogni voce.
<meta name="msapplication-task"
content="name=Nome_voce;
action-uri=http://www.miosito.it/;
icon-uri=http://www.miosoto.it/icona_ie9.ico" />
Nota:
Le icone per il menu devono essere di 16x16 pixel, anche in questo caso in formato ico.
Aggiungere ulteriori collegamenti
Come abbiamo visto inserire le voci nel menu è molto semplice, ma ne puoi inserire solo cinque. Se non dovessero bastare, c'è un altro sistema basato su javascript che permette di inserire ulteriori link. Nel nostro caso, abbiamo usato questo metodo per inserire le novità della settimana.
Il sistema è molto semplice: per prima cosa si crea l'etichetta della lista usando la funzione msSiteModeCreateJumplist, che nel nostro caso è Notizie della settimana. Questo va fatto nel primo blocco di codice, mentre nel secondo bisogna inserire il titolo della notizia, nell'esempio è Notizia 1, l'indirizzo della pagina e, se la usi, l'indirizzo dell'icona che dovrà essere sempre in formato ico di 16x16 pixel.
Il codice che comincia con window.external.msSiteModeAddJumpListItem è quello relativo a una singola notizia; puoi duplicarlo quante volte vuoi per aggiungere ulteriori notizie.
try {
window.external.msSiteModeClearJumpList();
window.external.msSiteModeCreateJumplist('Notizie della settimana');
window.external.msSiteModeAddJumpListItem
('Notizia 1' ,
'http://www.miosito.it/notizia1.htm',
'http://www.miosito.it/news.ico');
// ...
} catch (ex) {
}
Nota:
La prima riga del codice che usa la funzione msSiteModeClearJumpList serve a svuotare la lista ogni volta che viene caricata, questo fa si che gli aggiornamenti vengano mostrati correttamente.
Il codice javascript puoi poi inserirlo in un file esterno o direttamente nella pagina. Se salvi lo script come appbar.js, per inserirlo come collegamento esterno usa questa semplice riga di codice.
<script type="text/javascript" src="appbar.js"></script>
Se invece vuoi inserirlo direttamente nel codice HTML della pagina, aggiungi lo script al posto dei puntini, tra le seguenti righe di codice:
<script language=javascript>....</script>
Conclusioni
In questo articolo abbiamo scoperto come fare ad aggiungere il tuo sito alla barra delle applicazioni di Windows 7 con Internet Explorer 9. Come fare a... usa questo servizio da tempo; se vuoi provarlo, vai sulla nostra home page, afferrate l'icona nella barra degli indirizzi e trascinala sulla barra delle applicazioni. Per accedere al menu, dovrai farci clic sopra con il tasto destro.
|
Luca Bertolli - Come fare a...
Sviluppatore e grafico con oltre 10 anni di esperienza professionale. Lavora in proprio nel settore del multimedia, della grafica e del web, prestando servizi di consulenza a piccole, medie e grandi aziende. Autore di libri informatici con Edizioni FAG e autore di articoli per riviste specializzate. Appassionato di fotografia e fotoritocco, fonda nel 2007 il portale tecnologico "Come fare a..." il sito imparare a usare il computer nell'era della vita digitale. |
