Scott Hanselman

IE9, Site Specific Browsers, and adding your own Jump List Items to Pinned Tabs

September 15, '10 Comments [46] Posted in ASP.NET | ASP.NET MVC
Sponsored By

Site Specific Browsers aren't a really new idea. In 2005 there was an app called Bubbles I ran for a while that would let you run a website with minimal "browser chrome." Mozilla Prism (né WebRunner) is a Firefox add-in that does a similar thing. Google Chrome includes the idea of Application Shortcuts. The idea of all this is that some web apps are really applications and you think about them as applications. For me, I think of Gmail and Facebook and Twitter and Basecamp as applications not necessarily as browser tabs. The notion of Site-Specific Browsers is definitely arriving.

Internet Explorer 9 Beta (IE9) is out now and includes a featured called "Site Pinning" which is a effectively Site Specific Browsers. It's integrated nicely with Windows 7. It's easy for you as a developer or site owner to add these features to your site.

Here's the basic idea from a markup perspective from a Channel 9 example:

<meta name="application-name" content="Channel 9 Audio Player" />
<meta name="msapplication-tooltip" content="Channel 9 Podcasts" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-task" content="name=Msdn Flash Podcasts;action-uri=./?topic=msdnFlash;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-task" content="name=IE Podcasts;action-uri=./?topic=connectedShow;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-task" content="name=Other Podcasts;action-uri=./?topic=other;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-task" content="name=All Podcasts;action-uri=./;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-navbutton-color" content="#FF3300" />
<meta name="msapplication-starturl" content="./" />

You add meta keywords (you don't need to add them all) to represent Jump List Tasks. Here's what Twitter added:

<meta name="msapplication-task" content="name=New Tweet; action-uri=http://twitter.com/home; icon-uri=images/ie/tweet.ico" />
<meta name="msapplication-task" content="name=Direct Messages; action-uri=http://twitter.com/inbox; icon-uri=images/ie/dm.ico" />
<meta name="msapplication-task" content="name=Mentions ; action-uri=http://twitter.com/replies; icon-uri=images/ie/mentions.ico" />
<meta name="msapplication-task" content="name=Favorites; action-uri=http://twitter.com/favorites; icon-uri=images/ie/fav.ico" />
<meta name="msapplication-task" content="name=Search; action-uri=http://search.twitter.com; icon-uri=images/ie/search.ico" />

If I visit Twitter with IE9:

Image of Twitter in IE9

Then either drag the TAB or the FAVICON to the Taskbar:

Image of Twitter in the middle of a drag-drop on the way to begin pinned to the taskbar

Then I'll get a Twitter icon in my Windows 7 Taskbar that looks nice like any other app. If I right click on it, I'll get a jump list like any other application. Compare this screenshot to the meta tags above:

Image of Twitter as a pinned app with a jumplist showing common actions

If I run Twitter, the Twitter app icon will show up to the left of the back button. The back and forward buttons also change color (it's subtle here because Twitter's icon is blue like the default blue, but you'll see later) and the home button is gone from the toolbar. Note that you CAN change the color (see the code above) if you don't like the automatically calculated color.

Image of Twitter as a pinned app. The back button is light blue, like the twitter icon.

Now, this browser is site-specific. The Pinned Tab will effectively become a Twitter app.

Rather than dragging the site to my taskbar, I could have click the Tools icon (the gear) and clicked File|Add To Start Menu:

Screenshot of File | Add site to Start menu

Now my app is in the Start Menu, as are my jump lists:

Image of Twitter pinned to the Start Menu with the Twitter JumpList showing

If you want, you can also use Javascript to push overlay icons to your pinned app. For example:

Image of Twitter pinned to the Taskbar with a "3" overlaid.

Via code like this:

//show
window.external.msSiteModeSetIconOverlay(iconUri, toolTip);
//hide an Overlay Icon:
window.external.msSiteModeClearIconOverlay();

There's also the ability to add and remove jump list items dynamically to keep track of a search history or favorites, for examples. You can even add taskbar buttons like this:

Image of Channel 9 as a pinned tab. There's a forward, back and play media button

Here's a little code for the example:

document.addEventListener('msthumbnailclick', onButtonClicked, false); 
var btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);
window.external.msSiteModeShowThumbBar();
function onButtonClicked(e) {
switch (e.buttonID) {
case btnPlay:
play();
break;
}
}

Adding Basic Jump Lists to your own Site

I'll add some jump lists to this blog. Here's my site visited in IE9. See my big head in there? That's just my favicon.ico that I made with IcoFX, a great free icon editor.

Shot of my site in IE9. The back button is blue.

You can't TELL me you haven't always wanted my tiny transparent head on your taskbars, Dear Reader. Come on! ;)

Here's the code I'll add..

<meta name="msapplication-task" content="name=Complete Archives;action-uri=/blog/Archives.aspx;icon-uri=/blog/images/archives.ico" />
<meta name="msapplication-task" content="name=Speaking/Videos;action-uri=/blog/CategoryView.aspx?category=Speaking;icon-uri=/blog/images/videos.ico" />
<meta name="msapplication-task" content="name=Weekly Podcast;action-uri=/blog/CategoryView.aspx?category=Podcast;icon-uri=/blog/images/podcast.ico" />
<meta name="msapplication-task" content="name=Scott on Twitter;action-uri=http://twitter.com/shanselman;icon-uri=/blog/images/twitter.ico" />
<meta name="msapplication-task" content="name=Scott on Facebook;action-uri=http://facebook.com/scott.hanselman.public;icon-uri=/blog/images/facebook.ico" />
<meta name="msapplication-starturl" content="./" />
<meta name="application-name" content="Scott Hanselman's Blog" />
<meta name="msapplication-tooltip" content="Scott Hanselman's Blog" />

Then when I drag the favicon or tab to the task bar (or select File|Add to Start Menu) you'll see:

My site's custom jumplist including Archives, Videos, Twitter and Facebook

And the top of the browser  changes:

IE9 with my blog as an app. The back and forward buttons are now brown.

Pretty slick! While I don't see the world considering my blog an app, it was minimal effort to get this little bit of integration.

The more interesting ideas would be:

  • Adding a podcast player for Hanselminutes.com so the site could be an app
  • Keeping a separate list of recently searched for terms

Enjoy. Download IE9 here.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Configuring two wireless routers with one SSID (network name) at home for free roaming

September 12, '10 Comments [41] Posted in Hardware | Tools
Sponsored By

My downstairs wiring closet When we moved into the new house and setup the new home office a few years back, I posted about wiring the house for wired Cat-6 ethernet. I've never liked or trusted wireless, so when we started building the place it was always in the plan to wire everything and focus on speed.

Fast forward to 2010 and the Wii is wireless, the iPad and iPhones are wireless, the Windows Phone 7 is wireless, my wife's laptop is wireless, and it's all slow. It's slow because I'm using the standard Verizon (now Frontier) FIOS wireless router to cover all corners of a two story house. Over the last few weeks it's been especially irritating as the wife has moved her laptop into another room and I've started watching streaming Netflix from the corner of a room I'd never had a wireless device in.

I tried using the standard admin interface to boost the power of the wireless router a bit, but that didn't work. Then I bought an aftermarket external antenna for the router (it just screws on and replaces the standard antenna) and while that helped a little, I was still getting 1 or 2 out of 5 bars in the two rooms we used wireless devices the most. Streaming video or news (audio or video) or downloading podcasts was impossible.

I found an extra Verizon Router in my pile of tech junk while cleaning up and then got the idea to make a second wireless network upstairs. Sure, I could set it up easily with another SSID (service set identifier - a wireless network name) but that would be cheesy and my devices wouldn't roam smoothly between networks.

Here's the trick, thanks to some friends on Twitter and a little thought.

The Starting Point

In my case, I had a standard Verizon (ActionTec) router with the IP of 192.168.1.1. That's a static (non-changing) address. The router has DHCP (Dynamic Host Configuration Protocol) turned on, which means that this router hands out IP Addresses to my devices. It hands out those addresses in a certain range, specifically 192.168.1.2 through 192.168.1.254.

Your router will likely vary, but on this one you navigate to My Network, My Network Connections, then click on the Edit icon on the main network interface. You'll end up here:

Picture of the Network Connections Screen on a standard Verizon ActionTec Router

Notice the Start IP Address and End IP Address. You'll want to change this to 192.168.1.3 because we're going to use 192.168.1.2 as a static address for the second router when we set it up.

As an aside, you really should make sure your wireless router is using WPA2 for wireless security. If you're using WEP, it's about as effective as tissue paper, so change it to WPA2 with a strong password or find a techie nephew to do it for you.

Next, turn off your first (primary) wireless router completely. Routers aren't expecting folks to do what we're doing, so when you turn on the second router it will also default to 192.168.1.1. You're turning off the first so the second can be changed.

Turn on the second router and set its static IP address to 192.168.1.2. Under IP Address Distribution, set it to "disabled." It's important that you don't have TWO devices on your network passing out IP Addresses. This second router will only be bridging the wireless and wired world at your house. It has no responsibilities around IP addresses.

Here's an unnecessary diagram:

diagramnotneeded

Make sure the wireless settings of the second router is the same as the first router. Same SSID, same security type, same password. The only difference will be the channel. Moreover, we'll want to make sure the channels are sufficiently far apart.

Of course, if you're rich and famous and have a  HUGE area to cover, you can add a third wireless access point and just make sure that third AP uses a channel that's sufficiently far away from the other two. Try to make the second router be 5 away from the first router's channel. The guidance is channels 1, 6 and 11 are a good guideline. I used 11 for the first and 6 for the second.

Here's a great chart showing the channel spread from Wikipedia. I used channels 11 and 6 for my two routers.

wirelessfreqchart

Of course, you'll need an ethernet run going from a LAN port on your first router to a LAN port on your second router. In my case, each room has ethernet in the wall goingn to a gigabit switch. I pluged the second router into the wall from its LAN port and it worked.

Reboot everything, plug them all in and there you go.

Just thirty minutes later and I'm happily streaming video to my wireless portable devices in parts of my house that were previously useless.

Technical Summary

  • First Router
    • 192.168.1.1
    • DHCP to use the range 192.168.1.3-192.168.1.254
    • A wireless channel like 11
  • Second Router
    • 192.168.1.2
    • DHCP is disabled
    • Identical wireless security setup as First Router
      • Except the wireless Channel. Try channel 6 if the first is 11.
    • Plug hard-wire into the LAN port, not the WAN port.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

The .NET Micro Framework - Hardware for Software People

September 7, '10 Comments [24] Posted in Hardware | Micro Framework | Open Source
Sponsored By

imageI'm definitely a software person. I took EE in school and made an LED class, then a small computer like everyone else, and I know my volts and my amps for the most part, but that's about it. The limits of my skills are somewhere around adding an LED and some resistors to leech power off a USB adapter (which I recently did while working on the Hanselcade retro arcade build).

I look at hardware guys like Clint Rutkas in awe. I mean, seriously, who builds a T-shirt cannon from scratch for fun? Amazing.

Clint sent me a "Netduino" board today. It's similar to an Arduino board, except it uses the .NET Micro Framework. Micro you say? That's techie-speak for "tiny ass framework." I spoke to Colin Miller about this earlier in the year on video at Channel 9.

Remember my SPOT watch from 2004? That's Smart Personal Objects Technology, which is marketing-speak for "tiny ass framework." That watch is six years old (and still running nicely, sitting on my desk, in fact) and ran .NET.

Fast forward to today and I find myself plugging in this Netduino board to my computer and following Pete's Hello World Tutorial and I'm looking at this namespace.

using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;

It's back!

Ok, putting it all together in context. The Netduino is a board that's mostly Arduino compatible and has a published schematic (PDF here) so you could make one yourself, if you wanted. The .NET Micro Framework (or TinyCLR as some folks have called it) is literally that - it's a tiny CLR that runs .NET byte code. You can write C# and it'll run on tiny CPUs with tiny amounts of memory (like 64k or something similarly smallish.) It's been with us all this time, and there is an enthusiastic community built around it.

The .NET Micro Framework 4.1 source is available, it's Open Source under the Apache 2.0 License. (Ya, the new Microsoft is freaking me out also. There's a lot of source that's quietly making its way out under increasingly liberal licenses.) There's lots of great details at Pete's blog.

Here's what a Netduino looks like:

Netduino Overhead Photo

I'm going to think of some hardware ideas that I can build with this. I also have a more capable and fancy Tahoe II with a touch-screen, accelerometer, buttons and more. If you're looking to prototype something quick, or even build a complete system with an off-the-shelf board, do check it out! Here's what a Tahoe II looks like. Remember, all these boards use C# and .NET. It's amazing writing something for hardware using a language and framework I already know how to use. It literally gets me 80% of the way there from a learning curve perspective.

TahoeII Large Development Board

There's also the GHI Electronics EMX Development system, so there's a lot of choices.GHI-00129 Large Development Board

With each of these boards (and others) you just need to get the Micro Framework 4.1, then the SDK for that specific board. It integrates into Visual Studio 2010. If you want to change the product, they are taking proposals in the .NETMF Forums.

Directly from Pete's blog:

Getting Started

What you'll need:

  • Netduino (Scott: or some other .NET Micro Framework board)
  • USB Cable (early Netduino units come with the USB cable) (Scott: Usually a micro- or mini-USB)
  • Visual Studio 2010 and the .NET Micro Framework 4.1 SDK  (you can use C# Express 2010 if you don't have Visual Studio)
  • Netduino SDK in 32 bit or 64 bit, depending on your host OS.
  • Optional: shields and starter kits to do cool things with netduino. Existing Arduino shields are compatible. A shield is just an add-on card that fits the pins on the board.

The SDK installs a device driver for talking to the Netduino. Make sure you select the one with the appropriate bitness, and that you install it before connecting the Netduino to the PC. I installed the VS2010 bits before the SDK, but it shouldn't matter.

Once you plug in the Netduino, using the USB cable, you should see the device driver get installed, and the power LED on the board light up.

Hello World with Morse Code

Now I just have the Netduino for now, so I haven't got any attachments. If I was a hardware guy, I'm sure I'd go try to take apart a toaster or remote control and declare something like "this toaster just needs a one OHM resister on pin-out 5A so I can invert the voltage and it'll toast bread over Bluetooth" but I have no idea what that means. All I can do with the Netduino out of the box to flash its LED, as Pete points out:

public static void Main() 
{
OutputPort onboardLed = new OutputPort(Pins.ONBOARD_LED, false);

while (true)
{
onboardLed.Write(true);
Thread.Sleep(500);

onboardLed.Write(false);
Thread.Sleep(500);
}
}

Let's make it fancier. How about outputting string using Morse Code? Wikipedia says a dot is 100ms long and a dash is 300ms. How hard can it be?

I could go to StackOverflow as they had a contest to see who could make the SMALLEST implementation that would take a string and output Morse Code. They have an extremely optimized (for lines of code) solution. But it's extremely silly. Certainly no more silly than me making an LED blink Morse Code as well, but I'd like to be able to actually read my code. ;)

So, here's a naive 10 minutes solution using this guys' two arrays because I'm too lazy to type up the Morse myself. I could have use a Hashtable also, but two parallel arrays was fine too. The .NET Micro Framework, being micro, doesn't have everything the full framework has. However, being open source, it has taken contributions and version 4.1 includes a Hashtable implementation.

I can even debug directly connected to the board!

netduino debugging

Here's my sad little program (it was very easy!)

using System;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;
using SecretLabs.NETMF.Hardware;
using SecretLabs.NETMF.Hardware.Netduino;
using System.Text;
using System.Collections;

namespace NetduinoApplication1
{
public class Program
{
public static void Main()
{
OutputPort onboardLed = new OutputPort(Pins.ONBOARD_LED, false);

while (true)
{
onboardLed.Write(false);

foreach (char c in " hello scott hanselman ")
{
string morse = ConvertTextToMorse(c);
Debug.Print(c + " = " + morse);
TransmitDotOrDash(onboardLed, morse);
}

}
}

private static Char[] Letters = new Char[] {'a', 'b', 'c', 'd', 'e', 'f', 'g',
'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u',
'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8',
'9', ' '};

private static String[] MorseCode = new String[] {".-", "-...", "-.-.",
"-..", ".", "..-.", "--.", "....", "..", ".---", "-.-", ".-..",
"--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-",
"...-", ".--", "-..-", "-.--", "--..", "-----", ".----", "..---",
"...--", "....-", ".....", "-....", "--...", "---..", "----.", " "};

public static String ConvertTextToMorse(char c)
{
int index = -1;
index = Array.IndexOf(Letters, c);
if (index != -1)
return MorseCode[index];
return string.Empty;
}


public static void TransmitDotOrDash(OutputPort port, string dotordash)
{
foreach (char c in dotordash)
{
TransmitDotOrDash(port, c);
}
Thread.Sleep(300); //gap between letters
}

public static void TransmitDotOrDash(OutputPort port, char dotordash)
{
if (dotordash == ' ')
{
port.Write(false);
Thread.Sleep(700); //gap between words
}
else //it's something
{
port.Write(true);
if (dotordash == '.')
Thread.Sleep(100); //dot
else
Thread.Sleep(300); //dash
port.Write(false);
}
}
}
}

Here's the debug output as I flash "hello scott hanselman" from the board.

Debug Output from the Netduino Board

All it all, it really couldn't be much easier. Next I'll try to get the Tahoe II working and maybe make a game for the boys. Perhaps hook up a speaker and a proximity sensor and see if they can sneak up on it.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Details on the 2010 Diabetes Walk and a Thank You

September 7, '10 Comments [10] Posted in Diabetes
Sponsored By

Over the last few months I've blogged and tweeted about diabetes (in between my regular stuff) and you guys, Dear Readers, have be so kind as to donate over US$32,000 to Team Hanselman via the American Diabetes Association. We haven't hit our arbitrary $50k goal, but I'm totally amazed we made it this far, using only and entirely social media.

If you're interested in learning more about Diabetes and Type 1 Diabetes (what I have) then check out some of the stuff made this summer.

As a point of interest, in 2007 I tweeted every single time I had to manage some aspect of my diabetes in a day. You might be surprised how often we diabetics have to think about diabetes. I hope YOU think about it as you enjoy that cookie! ;)

Also, check out "Diabetes: The Airplane Analogy" for a clear explanation on how blood sugar, insulin, and all this equipment works together.

This next Sunday the 12th, as a culmination of all this, we'll be walking as Team Hanselman in the ADA's StepOut to Fight Diabetes. If you are in or around Portland, you are welcome to join our team and meet us at the Team Hanselman tent.

We'll be walking with many thousands at the Rose Quarter in Portland. We'll be doing the three mile walk.

General Schedule:

  • 8am: Registration opens w/ light breakfast
  • 8:40: Opening ceremony begins – Red Strider Ambassadors, ADA Researcher Dr. Michael Harris, Warm-ups, NAYA Youth Dancers and NARA Drum Group
  • 9:00: One, three and six mile walk begins through Irvington District
  • 10:15ish: Lunch, entertainment, bouncy houses, basketball hoop, music from the River City Ramblers, Health Fair Tent, face painting and more.
  • 11:15: Kids Race Walk w/ Coach Carmen
  • 12:30: Portland Step Out: Walk to Fight Diabetes Finishes

Thanks to EVERYONE for all their help and support! Remember if you donated to please make sure your company matches your donation. Also, there's still time to make a tax-deductable donation and get it matched. Also feel free to give to your local country's diabetes organization as well!

Feel free to spread the word on social networking sites with this short link: http://hnsl.mn/diabeteswalk

You're a wonderful bunch of Dear Readers and I truly thank you for your support.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Hanselminutes Podcast 230 - Continuous Deployment with Jon Tørresdal

September 7, '10 Comments [2] Posted in Agile | ASP.NET | Podcast
Sponsored By

JonTorresdal

This week Scott talks to Jon Tørresdal from Norway via Skype. Jon is an Architect for a Norwegian insurance company, and an editor for InfoQ. His agile team practice Scrum and Jon shares his experiences making web deployment a no-click affair. What are the tools and techniques you need to make your automated build automate deployment to a production web farm?

NOTE: If you want to download our complete archives as a feed - that's all 230 shows, subscribe to the Complete MP3 Feed here.

Subscribe: Subscribe to Hanselminutes Subscribe to my Podcast in iTunes

Download: MP3 Full Show

Links from the Show

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is our sponsor for this show.

Building quality software is never easy. It requires skills and imagination. We cannot promise to improve your skills, but when it comes to User Interface and developer tools, we can provide the building blocks to take your application a step closer to your imagination. Explore the leading UI suites for ASP.NET AJAX,MVC,Silverlight,Windows Formsand WPF. Enjoy developer tools like .NET reporting,ORM,Automated Testing Tools, TFS, and Content Management Solution. And now you can increase your productivity with JustCode, Telerik’s new productivity tool for code analysis and refactoring. Visitwww.telerik.com.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.