Oltre alle novità riguardanti HTML5, l'ultima release di Internet Explorer offre la possibilità di avere una forte integrazione tra i siti web "preferiti" ed il proprio sistema operativo.
Questa funzione prende il nome di Pinning e permette di aggiungere sulla taskbar di Windows 7 il sito che più si desidera, in modo da avere un accesso rapido e notifiche in tempo reale: è un po' come se fosse una vera e propria applicazione installata sul proprio computer, ma senza la parte di setup, aggiornamento, etc, che normalmente circonda le applicazioni desktop.
Prima di addentrarci nella parte più tecnologica - lo sviluppo - è bene apprendere il perché può convenire implementare questa feature sul proprio sito; i principali motivi sono:
- Accesso rapido alle varie sezioni del sito;
- Separazione dell'applicazione web e del browser all'interno della taskbar;
- Notifiche sulle ultime novità con accesso rapido;
Da qui è facilmente intuibile come il Pinning stabilisca un forte "legame" tra l'utente e l'applicazione web, con il conseguente aumento delle hits sul sito.
Per meglio comprendere cosa significhi introdurre il Pinning è utile avere una panoramica delle diverse funzionalità, l'immagine seguente le mostra tutte:
Figura 1. Gli elementi del Pinning
(clic per ingrandire)
Di seguito esamineremo come realizzare ed utilizzare al meglio le feature sopra mostrate.
HightResolution Icon
La classica favicon dei siti può non essere abbastanza grande per il Pinning: la taskbar di Windows 7 infatti offre una risoluzione superiore a quella normalmente utilizzata nelle favicon (16x16 pixel): è quindi necessario crearne una di dimensioni superiori (64x64 pixel). In commercio esistono tantissimi tool, sia free che a pagamento, che consentono di creare file .ico contenenti all'interno diversi formati.
Sul sito BuildMyPinnedSite.com troviamo un'applicazione Web molto comoda e semplice da utilizzare, gentilmente offerta da Microsoft.
Figura 2. Creare la favicon
(clic per ingrandire)
La particolarità dei file .ico è quella di contenere all'interno più "immagini" in diversi formati (16x16, 32x32, etc): questo ci permette di avere un solo file nel nostro sito, potendone sfruttare i diversi formati in maniera del tutto trasparente sia per l'utente finale che per lo sviluppatore, in quanto sarà il browser a scegliere il formato corretto.
Il primo Pinning
Per iniziare a sfruttare da subito le potenzialità offerte da questa release di Internet Explorer, una volta creata l'icona si passa alla scrittura di semplicissimo codice HTML.
Tutto il codice che andremo a scrivere per il Pinning e le feature che seguiranno in questo articolo, va inserito all'interno del tag <head> della pagina HTML.
Inserendo il codice seguente il nostro sito web dovrebbe essere pronto per il Pinning:
<meta name="application-name" content="Build My Pinned Site" />
<meta name="msapplication-tooltip" content="Start Build My Pinned Site" />
<meta name="msapplication-starturl" content="http://quiblog.it" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#3480C0" />Possiamo quindi subito provare a trascinare l'icona del sito all'interno della nostra taskbar, ottenendo un risultato simile a quello mostrato nello screenshot seguente:
Jump List
Un'altra caratteristica molto interessante del Pinning è la possibilità di "linkare" le varie sezioni del sito prima che questo sia aperto all'interno del browser, permettendo così una veloce navigazione nelle varie sezioni da parte dell'utente.
Anche questa implementazione è veramente semplice, e consiste nella scrittura di tag "meta", come mostrato dal codice seguente:
<meta name="msapplication-task" content="name=Blog;action-uri=http://www.quibrowser.it/;icon-uri=/favicon.ico" />
<meta name="msapplication-task" content="name=Contact;action-uri=http://www.quibrowser.it/contact;icon-uri=/icon-contact.ico" />
<meta name="msapplication-task" content="name=Search;action-uri=http://www.quibrowser.it/search;icon-uri=/icon-search.ico" />
<meta name="msapplication-task" content="name=Twitter; action-uri=http://www.twitter.com;icon-uri=/icon-twitter.ico" />A questo punto, chiudendo e riaprendo il sito, passando per il Pinning creato precedentemente e cliccando con il tasto destro del mouse sull'icona della taskbar, dovrebbero apparire le voci precedentemente inserite: Blog, Contact, Search e Twitter, come mostrato dallo screenshot seguente:
Figura 4. La Jump List
(clic per ingrandire)
Quella appena vista è chiamata anche jump list statica: i suoi link non cambieranno "mai" durante il ciclo di vita del sito web.
Dynamic Jump List
Tramite Javascript è anche possibile creare delle jump list dinamiche contenenti un set di link verso delle news o, come nel nostro esempio, verso post di un blog.
Per facilitare la scrittura del codice Javascript è stato realizzato un comodissimo plugin per la libreria jQuery, che espone un elenco di funzioni nate allo scopo di facilitare l'implementazione del Pinning all'interno del nostro sito. Il plugin è pinify ed è scaricabile gratuitamente.
Per la creazione della jump list dinamica è sufficiente gestire quattro semplicissimi step:
- Verificare che il browser sia in SiteMode;
- Rimuovere eventuali vecchie jump list;
- Creare una nuova jump list;
- Aggiungere gli elementi alla jump list;
Traducendo questo elenco in codice Javascript, si dovrebbe avere una cosa del genere:
Possiamo caricare la jump-list dinamica inserendo all'interno di un elemento un elenco di link, infatti essa assume un senso nel momento in cui l'elenco viene aggiornato con una certa frequenza, e quindi la parte di aggiunta di un elemento interagisce con una parte server side (json, xml, etc).
Notifiche
L'ultima feature riguardante il Pinning che andremo a trattare in quest'articolo riguarda le notifiche. Sempre tramite l'utilizzo di javascript è possibile notificare all'utente che qualcosa è avvenuto all'interno del sito web. Nei social network questo tipo di notifiche serve per comunicare all'utente un eventuale messaggio da un amico, un commento, un like, etc.
Con IE9 esistono due tipologie di notifiche:
- Tramite OverLay Icon (figura1);
- Tramite Flash Taskbar (figura2);
Indipendentemente dal tipo di notifica scelta, l'utilizzo è veramente molto semplice. Per le notifiche di tipo OverLay è necessario creare una seconda icona (come quella creata inizialmente per il Pinning del sito) che andrà a sostituire l'icona principale sulla taskbar, in modo da attirare l'attenzione dell'utente nel momento in cui c'è da notificare qualcosa.
<script type="text/javascript">
$.pinify.addOverlay({
title: "Esempio di notifica",
icon: "/icons/overlay.ico"
});
</script>Per il flash dell'icona sulla taskbar è sufficiente implementare quanto segue:
<script type="text/javascript">
$.pinify.flashTaskBar();
</script>Scoprire il pinning
Purtroppo l'utente non ha modo di sapere se il sito che sta consultando implementa il Pinning oppure no. Per questo motivo sta a noi developer implementare il codice che notifica al visitatore la disponibilità di tale feature.
Una volta creato il codice HTML con un testo che informa l'utente su tale funzione, è sufficiente utilizzare il seguente blocco di codice javascript:
<script type="text/javascript">
$(document).ready(function(){
$.fn.pinable({
closeTitle : 'Close',
containerElement : 'body',
cookieName : 'miocookie',
cookieLength : 30, // 30 giorni
debug : false, // modalità debug: mostra sempre il banner anche con diversi browser
discStyle : 'toast', // discoverability style; le opzioni sono: toast, topHat and pushUp
dragAlt : 'Trascinami!', // testo alternativo all'icona
elementId : 'pinning-discoverability', // id del banner
logoPath : '/discoverability/images/logo.png', // percorso del logo
message : 'Trascina l'icona nella taskbar di Windows e abilita le caratteristiche speciali di IE9.',
slideDuration : 'fast', // durata
useCookie : true // spegne e accende i cookie
});
});
</script>Link utili
Per approfondire nel dettaglio le API del Pinning e delle altre funzionalità dell'integrazione di Internet Explorer 9 con il desktop di Windows che abbiamo illustrato, trovate su MSDN la documentazione sull'argomento.
