Sinds de eerste bèta-release van Internet Explorer 9 wordt er al over gesproken: De verbeterde integratie met de Windows 7 taakbalk. IE9 gebruikers hebben binnen Windows 7 de mogelijkheid om hun favoriete sites te pinnen op de taakbalk. Dit wordt gedaan door een IE9 tabblad uit de browser te slepen en deze in de taakbalk te plaatsen, waarna desbetreffende site met één klik kan worden geopend. Het bijzondere van deze pinned sites is echter dat webontwikkelaars zelf de mogelijkheid hebben om de beschikbare functionaliteit in de taakbalk uit te breiden. Hieronder volgt een overzicht met een aantal van de mogelijkheden en de code die nodig is om dit voor je eigen site te implementeren.
Het uiterlijk veranderen van de pinned site
De favicon van een pinned site komt terug in de taakbalk of het startmenu en in de browser zelf, naast de Vorige- en Volgende-knoppen. Het is dus handig om dit in te stellen:
<link rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico">
<link rel=icon type=image/ico href="./favicon.ico">
Overige instellingen kunnen worden aangepast met de volgende meta tags:
<meta name="msapplication-starturl" content="http://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
De msapplication-starturl bevat de URL van pagina die altijd moet openen wanneer op de pinned site wordt geklikt. Door middel van msapplication-window kan de grootte van het te openen IE9 browservenster worden opgegeven en de kleuren van de navigatie buttons kunnen worden gespecificeerd door het instellen van de msapplication-navbutton-color.
Het toevoegen van Jump List taken
Naast het snel openen van de standaardpagina van je website, kun je de IE9 gebruiker de mogelijkheid geven om ook onderliggende delen van je site snel bereikbaar te maken. Dit kan door middel van Jump List taken. Er kunnen maximaal vijf van deze taken worden getoond, wanneer er rechts wordt geklikt op de pinned site in de taakbalk. Op deze manier zijn ze toe te voegen:
<meta name="msapplication-task" content="name=Taak 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>
<meta name="msapplication-task" content="name=Taak 2;action-uri=http://www.host2.com/Page2.html;icon-uri=http://host/icon2.ico"/>
Te zien is dat niet per se verwezen hoeft te worden naar het eigen domein en dat voor iedere taak een ander pictogram kan worden ingesteld.
Een eigen Jump List categorie maken
Het is ook mogelijk om zelf een Jump List categorie te definiëren en deze te vullen met verschillende items door middel van een aantal JavaScript functies. Deze meer dynamische methode maakt het mogelijk om een bezoeker bijvoorbeeld te wijzen op een bepaalde gepersonaliseerde melding, die zich tijdens het bezoek voordoet. Klikken op het Jump List-item zal dat geval de desbetreffende melding tonen. Zie hieronder hoe je een categorie “Mijn Categorie” toevoegt met drie items:
window.external.msSiteModeCreateJumplist('Mijn Categorie');
window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico');
window.external.msSiteModeAddJumpListItem('Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico');
window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', 'images/item3.ico');
window.external.msSiteModeShowJumplist();
Om de lijst vervolgens te wissen gebruik je de volgende functie:
window.external.msSiteModeClearJumplist();
Bovenstaande JavaScript code is IE9 specifiek en kan dus in andere browserversies een fout opleveren, daarom is het raadzaam om door middel van het navigator.userAgent commando de User Agent string te controleren. Voor Internet Explorer 9 zal de versie token op MSIE 9.0 staan. Een voorbeeldfunctie om de browserversie op te vragen ziet er als volgt uit:
function getInternetExplorerVersion() {
var rv = -1; // Versie kan niet worden gelezen.
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
Uiteraard is het ook mogelijk om de fouten af te vangen met een try / catch blok.
Verder met pinned sites.
Bovenstaande voorbeelden zijn gebaseerd op de Pinned Sites Developer Documentation, waarin nog meer interessante features zijn te vinden om de user experience van je site verder te verbeteren. Zoals het gebruik van overlay icons voor het dynamisch aanpassen van het pictogram in de taakbalk. Of bekijk hoe je met de Thumbnail Toolbar JavaScript functies in je site kunt aanroepen vanuit de taakbalk.