SilverSpine Technology

I have devised architecture for developing websites that allows for search engine friendly Silverlight web sites. The current guidelines from Microsoft for Silverlight search engine optimization (SEO) is that they are working with search engines to help them index XAML files, but with Silverlight 2 bundling those XAML files into a XAP file those search engines will have more work than they bargained for to index this new breed of rich interactive applications.

My method involves using HTML for the purpose that Tim Berners-Lee had in mind, content. All of the site content will be housed in semantically correct HTML. This way if the person viewing your web site does not have Silverlight installed they can still view all of the content of the site. Coupled with CSS and JavaScript this “No-Silverlight” version of the site can be quite compelling. However, if the user has the Silverlight plug-in then the rich interactive interface comes out and the site dazzles the viewer.

There are many benefits to this methodology:

1. Search Engine Optimization
2. Centrally Managed Content
3. Accessibility and Portability
4. Localization
5. Time Savings
6. No Need for Specialized Skill Sets to Maintain

I have written five blog entries describing some of these benefits. The five blog entries that I've already written on this technique can be found here:

1. Silverlight SEO
2. More on Silverlight SEO
3. Centrally Managed Content
4. Accessibility and Portability
5. Localization

I'm still working on a working demo of this technology. Look for a link for this coming soon. I wrote these blog entries months ago, but it is just now coming into use a lot at work. We've named it "SilverSpine" because we call the HTML content the "spine" of the site. Please let me know if you have any questions, or room for improvement.

When to use Canvas

On a Microsoft internal discussion list Dave Relyea gave a very well described resoning of when to use a Canvas:

The usage of Canvas elements in controls and layout containers is an anti-pattern and should be avoided. Unless you have some sort of user drawing/design/charting surface or something where thinking in any terms other than X and Y is unnatural, you should not be using a Canvas anywhere.

Canvas always returns 0,0 for its desired size in MeasureOverride.

For layout purposes, no space will ever be allocated for a Canvas, even if the Canvas has a Width and Height set.

Canvas returns exactly what it was given in ArrangeOverride.

This means that layout will never impose a clip on the Canvas, even if the Canvas has a Width and Height set and those exceed the space that layout is giving it.

Canvas measures its children at infinity,infinity.

Children can be as big as they want to be. This may not be bad in and of itself, but if you want the children to fit into a container, you can just let layout do it for you.

Canvas arranges its children at their desired size, and places them at their Canvas.Top/Left.

The Children of a Canvas can effectively be anywhere on the screen, and will not cause clipping (although they will be clipped by other explicit or layout clips in the ancestor chain). If this is a behavior that you need, you can use a TranslateTransform instead.

Clips may be explicitly applied to the Canvas, of course, but that is not the solution, and clipping is expensive.

EDIT: Dave just dusted off his blog and posted what is quoted above. Here's is Why [Dave] Doesn't Like Canvas.

Sometimes Analytics Suck

I recently added Microsoft Analytics to my site. I wanted to see just how few people read this site. In general I'm surprised that there are actually a few of you out there. My other web site does a bit better, but that's usually because either someone is looking for a lame character from a TV show, or they've linked from a radio station in Florida. Either way you may have been faced with this Security Warning pictured at the right. The problem is that my site isn't in your Trusted Sites list (rightly so you don't know me) but Microsoft automatically added live.com to that list for you. The 1x1 blank gif that Microsoft Analytics adds to my site to perform that tracking comes from live.com and so is doing a cross trusted site query that throws this message up... on every single page. :-@

Please leave me a message in the comments to let me know if you are experiencing this and if it is annoying. I'll then be forced to implement some other Analytics system. If you have any suggestions (other than Google) let me know.

Installing Silverlight Part 2

I recently blogged about using navigator.plugins.refresh() to help make the installation experience a happier one for people on Firefox and Safari. Well according to Jamie Rodriguez on his blog, this will be baked into the next version of the silverlight.js file.

This will be great. Rather than building your own script to check every 5 seconds if Silverlight has been installed, you can rely on Microsoft doing it for you. That way you can utilize their QA department to test it and all you have to do is update your silverlight.js file.

The added benefit here is that since Silverlight 2.0 is 100% compatible with Silverlight 1.0 (it is actually a superset of features from 1.0) you can take the 2.0 version of silverlight.js and use it on your Silverlight 1.0 site!

Installing Silverlight

If you have been to a web site that is using Silverlight chances are you've seen the medallion that asks you kindly to install this tiny little piece of software. If you have and you skipped it, shame on you. Go find a site that forces you to install Silverlight and do it. I'll wait... Here's one for you to try.

Now the install is fairly painless except for one part. Once the plug-in has been installed you have to either refresh the current page if you are using IE, or you have to restart the browser if you are in Safari or Firefox.

There is a way around the refresh, but it only works in IE. The idea is that if you know the user is going to install the plug-in, just check every 5 seconds if the install has finished. If it has, then refresh the page automatically.

The problem though is that this method only works for IE. That said an IE only fix may still help about 60% of your site viewers. What about the other 40%. The problem with the other browsers is that with the Netscape Plug-in model, the installed plug-ins are only detected at startup. You have to actually close the browser and reopen it. This makes for a large number of drop-off viewers to your site.

At least, that is what I thought. Also, this was the guidance I've been giving people for the past 6 months. I guess I should have looked into the problem a little more. Piotr Puszkiewicz has found a solution.

navigator.plugins.refresh();

Since IE has no clue what this is, IE will throw an exception. Just put this line in a Try/Catch and it should be good in IE, Safari, and Firefox.

Anyway, for a full description and some code samples go to this blog entry:

http://blogs.msdn.com/piotrp/archive/2008/05/02/automatically-start-silverlight-on-install.aspx

Moving forward I'll package this into my install scripts and use it for all sites I'm involved in. Thank you Piotr Puszkiewicz.

Server Unleashed on Silverlight Spotlight

The Server Unleashed web site that I built has been added to the Silverlight Showcase on silverlight.net.

Granted I submitted it, but still it is pretty cool to see something that I worked on listed on this site.

I have recently finished the second update to the site and hopefully it'll be going live soon.

There will be at least one more major update and that will be for the content regarding Hyper-V!

Command Prompt Candy

I'm known for having a console that looks a little strange. I prefer the red font on black background. Although I'm trying a super dark green background with green font at work. My home system looks like this:

The problem with it is that I'm getting pretty bored with the font itself. Today I switched to Lucinda Console as it is the only other font allowed in the settings. Then I got home and I found this blog entry from the IEBlog. It describes how to set the Consolas font for use in the console window. Now I have some nice new command prompt candy:

Difference in Margin Between HTML and XAML

The Margin attribute of XAML elements acts different than in HTML. There are still the three ways of describing this information. The first way is simply, make all sides the same. These are identical in HTML and XAML (except that margin is capitalized in XAML).

XAML only allows you to work in pixels. So you do not need to mark the 10 with a "px" as you do in HTML. This will give the object a nice 10 pixel margin on all sides.

What if you wanted the top and bottom to have one margin and the left and right to have a different one? Well to do that will describe the first difference between HTML and XAML:

Wait... What?!?

There are a couple of things going on here. The first is that you describe the left/right margin first in XAML and you describe top/bottom first in HTML. The second thing to notice is that in XAML you add the left to the right or the top to the bottom and enter that value. The HTML and XAML will both produce 10 pixels of margin at the top, 10 pixels of margin at the bottom, 20 pixels of margin on the right, and 20 pixels on the left. But keep in mind that XAML lists the left/right first and you add the two together.

Think you got it? Well now for the final element of twist:

I bet you had it all figured out didn't you? Well this is also simple, but you need to keep it in mind when doing Silverlight. XAML expects Margin to be listed as Left, Top, Right, Bottom. HTML is Top, Right, Bottom, Left. They both go clockwise around the box, but HTML starts on the top and XAML starts on the left.

I hope this helps anyone out there.

Analyst Predicts Silverlight Adoption Expected to Triple

Evans Data predicts that in the next 12 to 18 months Silverlight will triple its market share:

http://www.eweek.com/c/a/Application-Development/Silverlight-Adoption-Expected-to-Triple/

The problem with this article is that it doesn’t specify if that means that the 2% market penetration will triple to 6% or if they are talking about the number of Silverlight enabled sites will triple in the next 12-18 months. The driving case for the tripling will be the developer tools. Although a lot of people are having issues with the first release and the beta releases of Expression Blend and Expression Encoder, look for the released second version to add a much needed level of stability and clean code output.

Paragraph Elements are not for Spacing

A friend of mine just launched a new business venture called stackoverflow. Jeff will be doing what he does best, and hopefully that will mean that we can contract him out to help us from time to time.

The reason I'm blogging about it here is his web site was clearly just thrown together to get it up on the web. For someone who spends his day finding new ways of dampening the sound on his Rock Band drum kit, I would think he'd be a little bit more 21st century (or even Web 2.0) about his web site.

Granted the web site is just an image and some text, the interesting thing here is the code. View source on his web site and you will find an example of an HTML technique that I thought was left back in 1996. That is he is using an unclosed paragraph element for spacing the text blocks on his page. Paragraph elements are for paragraphs.

"The P element represents a logical paragraph"

Although in HTML it does not need to be closed, it seems to have been the best practice since about the time people were really hot on migrating to XHTML.

Because my wife is standing here telling me I can't just insult Jeff's new web site, I've decided to correct the HTML. Jeff, if you read any of my blogs, this is for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>stackoverflow</title>
<meta name="description" content="Stackoverflow is sort of like 
the anti-experts-exchange (minus the nausea-inducing sleaze and 
quasi-legal search engine gaming) meets wikipedia meets 
programming reddit." />
</head>
<body>
<div style="text-align:center; margin-top:100px;">
<img src=
"http://img510.imageshack.us/img510/7056/
thenamiracleoccursbx8.png" width="435" height="496" 
alt="I think you should be more explicit here in step two." 
title="I think you should be more explicit here in step two." />
</div>
<h2>Wondering what stackoverflow.com will be?</h2>
<p>Listen to <a href="http://www.stackoverflow.com/audio/
stackoverflow-podcast-001.mp3">the first stackoverflow 
podcast</a> with <a href="http://www.joelonsoftware.com/">Joel 
Spolsky</a> and <a href="http://www.codinghorror.com/blog/">Jeff 
Atwood</a>. (MP3 file, 8.32 MB, 46:12).</p>
<p>If you'd like to submit a question to be answered in our next 
episode, record an audio file and mail it to <a 
href="mailto:podcast@stackoverflow.com">
podcast@stackoverflow.com</a>. Remember, it <em>must</em> be an 
audio question -- 90 seconds or less, please.</p>
</body>
</html>