Bring your website to the next level…check out pinning!


    I was just preparing a slide deck to talk about IE9 features and realized I really haven’t taken the time to explain what the heck pinned sites are on this blog and how they work. Pinned sites are a fantastic feature of IE9, and as more and more users are discovering them, you want to make sure your website makes the most of this feature. This is a great way to add a little wow to your site!

    Before I get into the technical stuff, let me take a moment to tell you why you want your web site to support pinning. Users who pin your site will visit your site more often, and will spend more time on your site, so if you are building a site for a business: In the words of Martha Stewart “That’s a good thing”. Whether its a simple little website to track your hockey pool you want your users to access easily, or a public site you are supporting to help a business or group we build the site because we want users to spend time there. So if pinning increases the amount of time users spend there, you want pinning.

    If you are using IE9 or higher you can quickly try out pinning right now to see how it works. Open a tab in your browser and visit tsn. Now drag the tab down to your taskbar. You will see a TSN icon appear on your taskbar and you will also notice the TSN website now looks different, the forward and back buttons appear in red to match the logo. The icons on your page have changed from the IE logo to the TSN logo. The icon you see is called a favicon, and you can set the of the forward and back buttons based off the favicon or by specifying specific colors.


    Now let’s take a closer look at that logo you just added to the task bar.  You can close the IE windows with TSN and relaunch the site by clicking on that icon. That’s nice, basically just like you can have icons for launching your desktop applications, you now have an icon to launch a web site. Here’s the really cool part, you can also right click on the icon to go directly to a particular part of the website like the News or TV Schedule. It’s like Browser Favorites but wayyyyy better!


    Nice Eh? And it’s really easy to do. Since its implemented with metatags, you can add the functionality for your users who have IE9 without breaking the website for users on other browsers. You can make your pinned site as simple or as fancy you want, it’s just a matter of how much time you want to spend, 10 minutes to set up a favicon? an hour or a day to add more functionality.

    You can just add a favicon, quick and easy!

    You can add a jumplist to the pinned site just like TSN did, to make it easier for users to navigate the site using a few metatags or JavaScript.

    You can get fancy with thumbnail buttons, and notifications by adding a little more JavaScript.

    Read on to find out how!

    1. Create a favicon

    If you are a talented graphic artist, or have someone on your team who knows how to make .ico files good on you! For the rest of us check out xiconeditor.com. You can import a .JPG, .GIF, .BMP, .PNG, or .ICO file, crop it and xiconeditor will generate a .ico file suitable for pinned sites. That was easy Smile

    2. Add the favicon to your HTML in the <head> section.

    <link rel="shortcut icon" href="favicon.ico"/>

    Now you will see your favicon appear in the browser and on the toolbar if you pin your site. Next you should set up your meta data for the pinned site in the <head> section

    • application-name specifies the name of your pinned application, give it a meaningful name.
    • msapplication-tooltip specifies what will be displayed when you hover over the pinned application in the start menu (not the taskbar)
    • msapplication-starturl specifies the URL to be launched when the pinned website is launched
    • msapplication-window tells IE9 how big to make the browser when it launches the pinned application
    • msapplication-navbutton-color tells IE9 what color to use for your navigation buttons, if you omit this tag, IE9 will take the color from your favicon. Specify any hex color or CSS3 color name.
    <meta name="application-name" content="My Pinned Content" />
    <meta name="msapplication-tooltip" content="Launch My pinned site" />
    <meta name="msapplication-starturl" content="http://localhost:42942/PinnedSites/index.html"/>
    <meta name="msapplication-window" content="width=1024;height=768" />
    <meta name="msapplication-navbutton-color" content="#FF3300" />

    3. Add a Static Jump List

    The Jump List is the context menu that appears when you right click on the pinned site icon on your taskbar. To add a task to the jump list, you need to add a meta tag for msapplication-task. You can add up to 5 static tasks to the jump list. The tasks in the jump list will appear in the same order as you define the tasks in the HTML.

    Msapplication-task indicates this is a task you want to add, in the content attribute you specify

    • name – this is the text that will be displayed in the jump list
    • action-uri this is the URL to open if someone selects this task from the jump list
    • icon-uri specifies the icon to display in the jump list for this task.
    • window-type (optional) specifies if the destination should be opened in a tab (default), self (the current tab) or window (a new pinned site window)
    <meta name="msapplication-task" content="name=View Pictures; 
    action-uri=http://localhost:42942/PinnedSites/pictures.html; icon-uri=favicon.ico" />

    4. Add a Dynamic Jump List (if you want to)

    Use JavaScript to create tasks dynamically on a jumplist, you do not have the 5 task limit with dynamic jump lists. Creating dynamic tasks requires using the following methods

    • window.external.msSiteModeCreateJumpList() to create the dynamic jump list
    • window.external.MsSiteModeAddJumpListItem() to add a task to the dynamic jump list
    • window.external.msSiteModeShowJumpList() to display the jump list
    function AddJumpList()
        if (window.external.msIsSiteMode())
             window.external.msSiteModeCreateJumplist("My Dynamic List");
             window.external.msSiteModeAddJumpListItem("Added with code","http://www.tsn.ca/","favicon.ico");

    So with a few meta tags you can set up your website as a pinned site, with a little JavaScript you can even have a dynamic jump list. If you want to update the jumplists later, no problem! In fact I wrote some blogs explaining How to update a static jumplist, and how to update a dynamic jump list

    5. Go all out and add a thumbnail toolbar (if you want to)

    If your website plays video or audio, or you have other actions you want users to control from their pinned site, in addition to the jump lists you can use JavaScript to add a toolbar of thumbnail buttons! Use it to advance slides, pause and play a video or song. This will actually take a bit more time and work, but it’s pretty cool!

    Use window.external.msSiteModeAddThumbBarButton to add a 16X16 icon to the thumbnail toolbar

    Use window.external.msSiteModeShowThumbBar to display the thumbnail toolbar

    • Create icons for each button you want on the toolbar
    • Add each button to the thumbnail toolbar
    • Define the action you want for each thumbnail toolbar

    You cannot add buttons to a toolbar after the toolbar is visible! (You can hide or disable buttons, but you can’t add or remove them)

    Thumbnail toolbars can hold a maximum of 7 buttons. You can sometimes use one button as a toggle switch between modes e.g. Play and Pause can be one button instead of making a Play and a Stop button

    For example to add a button

    var btnRed = window.external.msSiteModeAddThumbBarButton('red.ico', 'Red');
    var btnBlue = window.external.msSiteModeAddThumbBarButton('blue.ico', 'Blue');
    document.addEventListener('msthumbnailclick', onButtonClicked, false);
    Then add a line of code to display the toolbar

    Create event handlers for the thumbnail toobar to define the actions to take when a button is pressed (As an added bonus if you are using IE9 you can use AddEventListener instead of attachEvent).

    document.addEventListener('msthumbnailclick', onThumbnailButtonClicked, false);
    function onThumbnailButtonClicked(btn) {
              switch (btn.buttonID) {
                  case btnRed:
                      document.bgColor = '#990000';
                  case btnBlue:
                      document.bgColor = '#000099';

    If you want to have a toggle button, for example a play/pause button, on your toolbar, you use window.external.msSiteModeAddButtonStyle to define a style with an alternative icon image and tooltip for a specified button and use window.external.msSiteModeShowButtonStyle to change the icon image and tooltip for the button in your event handler.

    styleColored = 0;  //default style ID, this style was created when you added the button
    styleClear = window.external.msSiteModeAddButtonStyle(btnRed, 'white.ico', "Clear");
    function onThumbnailButtonClicked(btn) {
              switch (btn.buttonID) { 
                 case btnRed:
                 if (document.bgColor != '#990000') 
                      document.bgColor = '#990000';
                      window.external.msSiteModeShowButtonStyle(btnRed, styleClear);
                else {
                      document.bgColor = '#FFFFFF';
                      window.external.msSiteModeShowButtonStyle(btnRed, styleColored);
                  case btnBlue:
                      document.bgColor = '#000099';

    So did you get all that? Don’t worry you don’t have to do everything! I just wanted you to know all your options. Any site can be pinned. If you add a favicon, you make your site look better when its pinned. When you add a jumplist you make it easier for a user to navigate to specific regions in your site. You decide how much functionality makes sense! For more information about pinned sites check out BuildMyPinnedSite.com which has more great information including how to add notifications (those tiny icon overlays, like one in Windows Messenger that shows you if you are signed in), suggestions on how to help users learn how to pin your site, and how to measure the success of your pinned site! Download IE9 and start pinning your site today!

    This blog is also posted on the Developer Connection

  • Go DevMENTAL

    MSP Voice: Microsoft and the New World by Oscar Guerrero


    On October 7th I looked into the Future. I don't claim to have foresight powers, but Craig Mundy magically painted his vision with such realism that some of the panelists were left dumbfounded at his eloquence. The Chief Research and Strategy Officer of Microsoft presented a world where technology went from being a tool to being a helper. A world where doctors rely on the help of technology for diagnosis, as well as for the distribution thereof. A world where classes are given globally and laptops or slates add to the teaching environment rather than to the social networks. A world where everyone, regardless of their profession, gets to enjoy the help of their own STARK Enterprises J.A.R.V.I.S robot helper.

    It is refreshing to see Microsoft focusing on social entrepreneuring fields, which seems to come from it's chairman. Mr. Mundie explained that before concentrating on his philanthropic efforts, Bill Gates guided Microsoft's research group into areas of social development as well as initiating talks with universities and their developments in these fields. It is up to Universities such as McGill to leverage the technology and indulge in health, education and communications research.

    Among most of the hidden gems coming out of Microsoft's technologies is Kinect. This tool has seen the light mostly on the gaming sector, but it is slowly creeping its way into more relevant markets such as health. This technology is a stepping stone into the realm of possibilities of what can be done in Health. Entrepreneurs have always thought of simply linking people with video and voice. A doctor teleconferencing with a patient through Skype. Kinect takes the concept of telepresence to a completely different level. With Kinect the experience is enriched with gestures and reactions through movement and depth perception. It is easy to mention examples of monitoring critical patients and scenarios such as launching a 911 call when a patient is moving or shaking strangely and even to check whether they are being active enough, but perhaps the most impressive advantage is that all of that and more can be done for the price of $150.

    Thanks to Microsoft's recent release of the Kinect SDK for windows, developers have the ability to produce a new set of services in many domains through more natural ways of interaction. Thus, decreasing the complexity for users and flattening out the usability learning curve.

    I believe Kinect is the link between us and that New World Craig Mundie prophesized. Soon we will start seeing the ability to turn on the lights by voice or dimming them with a hand wave at the reach of everyone simply because the technology exists, it is affordable and Microsoft has given it to us on a silver platter!

    If you would like to live the experience yourself, there is a transcription of Craig Mundie's panel at McGill University for you to read.

    Oscar Guerrero - McGill University MSP

  • Go DevMENTAL

    Hey you. Yeah, you. Wanna Windows Phone?


    Now that I’ve caught your attention with the title of this post, I want to introduce you to a really great promotion we are holding at Microsoft Canada for you as a mobile app developer (by the way, when I write “app”, I actually mean “app or game”).

    One of the biggest comments that I get when talking to people interested in building an app for Windows Phone is that they don’t have a device.  Then they ask me where they can get a Windows Phone.  The easiest answer is to go to your local wireless carrier and purchase a Windows Phone (likely with a data plan) from them.  That isn’t always optimal (hey, I get it – if you’re locked into a plan it’s a tough sell to get another one with your carrier of choice).  The second choice is to purchase a Windows Phone from a distributor like zones.com, where you can purchase a device that is not attached to a data plan, but those phones are typically not subsidized by the distributor or the device manufacturer.

    Now, for those of you that publish 2 or more new, quality apps for Windows Phone, we will actually give you a Windows Phone to keep through the Mango App Challenge.  Feel free to re-read that.  Your eyes are not deceiving you.  There are terms and conditions, of course, but the gist of the offer is that if you create 2 new apps (i.e.: they don’t already exist in the Marketplace) that meet a certain quality bar and you publish them under a Canadian Marketplace account before December 15th, we’ll be delivering you a shiny new Windows Phone with the Windows Phone 7.5 OS (formerly codenamed “Mango”) already installed on it.  It’s that simple.  We’re so confident in your ability to bring some amazing apps to the Marketplace that we have 300 devices total for this offer to give out to developers.

    So, are you interested?  I thought you might be.  For those of you that know Windows Phone development already, chances are you’ve already fired up Visual Studio 2010 and have great ideas ready to be converted into code.  For those of you that have not built apps for Windows Phone, we have you covered as well.  There are tonnes of resources available to you to learn how to build apps for Windows Phone and the tooling is freely downloadable.  The only thing you need to to is register as a developer for Windows Phone (this registration is required to publish apps to the Windows Phone Marketplace). As a student, registration is free through Dreamspark!  Below are some resources to get you started (and they are great for new and seasoned developers alike!).

    How to Get Started Building Apps for Windows Phone and Enter the Mango App Challenge

    • Visit the Microsoft Canada Windows Phone Developer Resource Page:  This is a one-stop link shop for pretty much everything you need to start building for Windows Phone (in fact, the links below this one are included in this Resource page)
    • Download the free developer tools
    • Learn how to develop for Windows Phone with free training like this, this and this
    • Register as a Canadian-based publisher on the App Hub (this will allow you to publish apps to the Marketplace)
    • Build and test your 2 apps.  Then submit your apps for certification in the Marketplace.  When it passes certification, publish your apps.
    • Submit your 2 published apps to the Mango App Challenge before December 15, 2011.
    • If you meet the requirements of the Mango App Challenge and there are still phones available from this offer, then you will be notified that you have scored yourself a free Windows Phone!

    Good luck and happy coding!

  • Go DevMENTAL

    Who the heck is Craig Mundie? And What does Microsoft Research do?


    Craig Mundie is visiting the University of Toronto tomorrow October 6th, and McGIll university Friday October 7th. This is a big deal! Why? In the words of Inigo Montoya “Let me ‘splain”

    Craig Mundie is the Chief Research and Strategy Officer for Microsoft. Microsoft Research is where some of the coolest stuff happens. I know when you think of Microsoft you may think of Windows, Office, maybe .NET, but there is so much more and so much of it is just amazing! How about Kinect? Popular Mechanics recently listed the Kinect SDK for Windows as one of the 10 most Innovative Tech Products of 2011.  Microsoft Research helps projects like the Large Hadron Collider figure out how to store and process what they call big data: the petabytes of data they collect from accelerators, telescopes, and sensors. I bet you never suspected that you would be hearing about Microsoft research at conferences on AIDS, but you will because of work on vaccine trials for AIDS to analyze how the AIDS virus attacks the immune system.

    Technology has come so far, so fast! My first computer had 16KB of memory (yeah I am that old but I never programmed with punch cards), it had a cassette player and game cartridges. Video calls were for science fiction like the Jetsons, holograms were for Star Wars. Now we can do video calls on our phones! And Windows Phone just keeps getting better and better, don’t believe me? Trust this guy he obviously knows what he is talking about.

    So where will technology go next? Well that’s what Craig is coming to town to talk about. He’s coming to Canada to talk about Converging Worlds: A New Era in Computing. We are starting to see a fundamental transformation in how we interact with computers and what we can expect from them. Powered by insights from big data, more natural user interfaces, and a merging of the physical and digital worlds, this new era of computing will enable exciting new capabilities. Craig Mundie will discuss how we can harness these new technologies to take on some of the world’s most complex challenges.

    Technology has evolved, our expectations from technology have evolved, the future is exciting and you are going to create that future! Take advantage of this rare opportunity to get a unique insight on the opportunities open to you!

    University of Toronto: Thursday, October 6, 11:30-12:30pm. Bahen Center for IT, Adel S. Sedra Lecture Theatre, room 1160. No registration required

    McGill University: Friday, October 7, 3:00-4:00pm. Redpath Hall, 3461 McTavish. No registration required

  • Go DevMENTAL

    Kinect SDK named by Popular Mechanics as one of the 10 Most Innovative Products


    KinectNergI was kind of surprised but not totally, when I saw that announced in a tweet. Thanksgiving dinner this year at our place culminated in the family taking turns busting a move to Dance Central on Xbox Kinect and both my niece and sister walked away saying “I need one of those”. Sure the games are fun, but when you stop to think about it what’s really amazing is the technology behind it: infrared camera, laser depth sensors, microphone array, all for about $150! Obviously they did something right as Guinness World records confirmed it as the fastest selling consumer electronics device ever. It sold an average 133,333 units a day for a total of 8 million units in 60 days From November 2010 to January 3, 2011.

    That’s the hardware, but what Popular Mechanics is talking about is the software. The software that you and I can write! Because you can download the Software Development Kit. This is where things start to get really cool. Because now we can start using all that amazing hardware to do neat stuff! It’s amazing what people are coming up with: nerf gun cubicle protection, or jazzing up the reception room. This version of the SDK is a beta and has been released so enthusiasts, students and faculties out there can get in and play with the capabilities of the Kinect device. So for now its for research and fun, but the Kinect site does mention they expect to release a commercial version at a later date.

    The SDK has APIs for raw sensor streams to collect data from the depth sensor, color camera sensor, and the microphone array. You can use an API to do skeletal tracking (this one is definitely one of the cooler features to play with). With the microphone array and APIs in the SDK you can do noise suppression and echo cancellation to identify the sound source and integrate with a speech recognition API as well. You can see a fun example using skeletal tracking and speech recognition with a Kinect controlled RoboSapien.

    It’s fun to play with but a lot of universities are doing serious research on what you can do with Kinect as well. Popular Mechanics mentions the UC Davis students who developed 3D videoconferencing, University of Minnesota is using it as a tool to identify autism, ADD, and OCD in kids. There is huge potential when you combine the hardware, the SDK, and the imagination of the worlds developers! The Kinect was so cool that people were hacking it before the SDK was released. Great to see a real SDK out and supported to encourage innovative development.

    The entire SDK is under 100MB. You don’t have to have an Xbox to play with the SDK, you can just buy the Kinect sensor unit and connect it to your PC. I have a Kinect already, and would love to start coding but i guess I’ll have to wait until my son finishes dancing “Don’t Sweat the Technique” first Smile

Page 1 of 2 (9 items) 12