• Go DevMENTAL

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

    • 0 Comments

    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.

    TSNfaviconzoomin

    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!

    TSNJumpListZoomedin

    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");
             window.external.msSiteModeShowJumplist();
         }
    }

    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');
    window.external.msSiteModeShowThumbBar();
    document.addEventListener('msthumbnailclick', onButtonClicked, false);
    Then add a line of code to display the toolbar
    window.external.msSiteModeShowThumbBar();

    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';
                      break;
                  case btnBlue:
                      document.bgColor = '#000099';
                      break;
              }
          }

    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);
                      break;
                      }
                else {
                      document.bgColor = '#FFFFFF';
                      window.external.msSiteModeShowButtonStyle(btnRed, styleColored);
                      break;
                      }
                  case btnBlue:
                      document.bgColor = '#000099';
                      break;
              }
          }

    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

    Make Web Not War (this one time at DevCamp…)

    • 0 Comments

    Looking for a chance to geek out with fellow developers? Well if you are in or near Toronto, Montreal, or Vancouver, look no further. Not your usual conference setting, this event is meant to be relaxed but still designed to meet your need for brain food (not brains as food!) ! So it won’t stress your already overworked brain! Instead this is your chance to re-energize! No assignments! No mid-term! No final mark to worry about! This is just a chance to come and hear about some cool stuff going on in the ‘real world’ and scarf down a few free nibbles while you are at it.

    The event is a DevCamp (not Band Camp) sponsored by Make Web Not War. The event is free/complimentary/gratis/no charge/on the house as it were but you do need to register so we know how many of those little hot dogs wrapped in pastry stuck on the end of toothpicks to bring. By the way as an added bonus, there will also be a Raffle for an Xbox and Kinect! If you win, you can do cool stuff like this (as long as you download the Kinect SDK)

    Here’s all the pertinent details about the event so you can pencil it into your calendar (stylus it in? key it in? touch pad it in?)

    The When and Where…

    Toronto October 25th, Toronto Congress Center 650 Dixon Road 6:30PM – 10:00 PM

    Vancouver November 15th, Vancouver Convention Center, 1055 Canada Place 6:30PM - 10PM

    Montreal November 29th, Palais des Congres de Montreal, 159 rue Saint-Antoine Ouest, 9e étage 6:30PM – 10PM


    The Basic Plan…

    6:30pm to 7:00pm Registration, Beverages and Appetizers

    7:00pm to 7:10pm Intro

    7:10pm to 9:50pm Get dirty (TED style talks + break)

    9:50pm to 10:00pm Raffle for Kinect and XBOX!!!!

    10:00pm to 10:10pm Conclusion

    11:00pm Expect the Unexpected

     

    Want to make sure you know about other cool events, including events just for students? Sign up for the Student Newsletter so you don’t miss out!

  • Go DevMENTAL

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

    • 2 Comments

    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

    Get a sweet phone and some bragging rights!

    • 0 Comments

    I know you love challenges, so here’s a pretty sweet one.

    Develop and publish two quality apps for Windows Phone 7.5 “Mango” and get a free Windows Phone device along with a chance to be featured on the MSDN newsletter and the MSDN website.

    Nope, you didn’t misread or misunderstand any of that. What you just read, literally translates to:

    • Develop a couple of apps that you can cash-in on either through app sales or advertising
    • Get a free Windows Phone 7.5 device
    • Get bragging rights after potentially getting featured on the Microsoft Developer Network.

    And as an added bonus, the tools and the marketplace registration are free of charge to you through DreamSpark.

    So let’s recap that just one more time. Get the development tools for free. Get on the marketplace for free. Claim your free device. Get a chance to be featured on the Microsoft Developer Network. And last but not least, make money with your published apps.

    I told you it’s a sweet one! Now let’s get started.

    First, head over to DreamSpark to get the Professional Edition of Visual Studio 2010. Sure you can use the free Express Edition of Visual Studio, but why settle for a lighter edition, when you can have the professional at no charge? Simply associate your Live ID with your school email and you’ll have access to not just Visual Studio Pro but all of the software available through DreamSpark. The marketplace registration fee will also be waived through your DreamSpark account.

    Next, head over to the AppHub and grab the latest version of the Windows Phone SDK. With the Windows Phone SDK 7.1, you have all the tools you need to develop apps and games for the Windows Phone platform. While on the AppHub, you might want to setup your marketplace account.

    Be sure to take advantage of AppHub’s rich education catalog to help you get going with your own apps. The education content includes everything from simple code snippets to complete games, so be sure to reuse as much code as possible.

    As you develop your two (or more) apps, keep the quality checklist in mind. Your app should be well designed, usable, stable, engaging and social. You can check out some existing marketplace apps for inspiration on the Windows Phone Marketplace. Or check out a select bunch here. You should also bookmark this list of resources.

    When your apps are ready and published, don’t forget to submit them here. If you have any questions, be sure to get in touch with us here or here.

    Oh and one more thing. When you finally get your Mango device, be sure to celebrate by making a Mango smoothie.

Page 2 of 2 (9 items) 12