On November 6th, 2007, Facebook launched a series of new tools to help advertisers target the 54 million people now regularly using their site. They're still throwing around a 3% weekly growth rate and have a target of 60 million active users by the end of the year, so it's not hard to picture the day in the not-so-distant future when hospitals Facebook babies before handing them over and the little bundle of joy comes with a neural implant that pokes their parental units when the diaper is full.

The new tools round out the Facebook Business offerings to an even six:

             
• Social Ads
             
• Pages
             
• Beacon
             
• Insights
             
• Platform
             
• Polls

Platform and Polls are old news to anyone following the company, so the really interesting news is in the other four. All of them are very much interlinked, so that you create a Page for your brand or product, advertise it through Social Ads to a very targeted market, learn about your success through Insights, and connect to your off-Facebook (off-Book?) service via Beacon, build custom apps for your Page on Platform, and learn about your users through Polls. It's a marketer's dream, but what does it mean for you as a user? The web is somewhat up in arms about Beacon particularly because it just stinks of privacy violations, at least if you care about things like companies tracking your every move online. This post is going to dig deep in Beacon and see what makes it tick from a purely technical perspective, but we'd be happy to do a follow-up post about the ethical question if there's enough interest. Leave a comment and let us know!

Pinging Beacon

This post is an in-depth look at Beacon, and is broken down into a few sections to make it easier for you to navigate:

• Beacon in a Nutshell: an overview of Beacon and a visual tour of the user interface elements
• Beacon from 10,000 Feet: a look at the technology behind Beacon from way up high. Read this if you don't want the finer details but do want an idea of how it works.
• Blocking Beacon: if you're concerned about privacy and want to stop Beacon, check this part out.
• Walking through the Code: this is the section for you if you're the type of person who loves reading code listings and wants to know exactly what makes it tick.

Beacon in a Nutshell

Here's what Facebook has to say:

Allow your customers to share with their friends the actions they take on your website. For user actions you define, Facebook Beacon will publish a story in the user's profile and to friends' News Feeds with a link back to your site.

What that means in real terms, is that you can add a recipe to your recipe box on Epicurious, and you'll get a very familiar looking Facebook pop-up in the bottom right corner of your window letting you know that your new recipe is being sent to your news feed:

If you do nothing, you have effectively opted-in and you have consented for the item to be published (i.e.: Facebook will assume your consent to publish the content). The window will disappear eventually, and the next time you log into Facebook, you'll see a notice like this one at the top of your homepage:

If you go to your Profile page, the items will appear mixed in with everything else in you mini-feed:

You'll notice that those two screen captures show different recipes being added, which is because Beacon isn't entirely without issues. Although I've been playing with it for a few hours now, items about Epicurious recipes stopped being added to my feed just after 7:30pm. There may be some internal limitations applied by the algorithm to stop feeds from being overloaded with actions from any one site, or it might just be broken :). The help page on Epicurious explains that they are sending four types of actions to Facebook:

             
1. Rate a recipe
            
2. Review a recipe
            
3. Add a recipe to your Recipe Box
            
4. Register on Epicurious

Encounters with Beacon are slowly starting to be reported on other sites as well. A post from yesterday on Groundswell documents a Close encounter with Facebook Beacon in which Charlene Li (Vice President, Principal Analyst for Forrester Research) had her first run-in on Overstock.com. In her post, she explains how she bought a coffee table from that site and was surprised to discover, when she logged into Facebook later that week, that there was a notice at the top of her page about the purchase:

Charlene should have been shown the pop-up window as well but she might have missed it or something might have failed to show it while she was on Overstock (there's a slight delay before it pops up, so it's possible that she navigated away from the page or closed the window before she saw it). It's unfortunate that it didn't work as advertised because, as she says:

The biggest problem is the lack of transparency. Facebook is right in that I would really like to have some things that I do on third party sites to conveniently appear in newsfeed, e.g. events I'm attending from Evite or eBay/craigslist listings so that my friends know about them. That's the promise of Beacon. But I need to be in control and not get blindsided as I did in the example above. I was seriously wigged out, but wouldn't have been if Overstock had simply told me that they were inserting a Facebook Beacon and given me the opportunity at that time to opt-in to Beacon.

As I mentioned above, this isn't a post about the privacy or security concerns of Beacon (though it will address some of them below). There's some pretty neat web technology at play which we thought would interest our more technical readers, and so, just like we used to do with Dad's calculator we're going to take Beacon apart and put it back together again (hopefully in one piece – sorry Dad!).

Beacon from 10,000 Feet

That basically wraps up our tour of how Beacon does what it does. It's a fairly long explanation, so here's a quick summary:

            
1. The partner site page includes the beacon.js file, sets a

   <meta>

   tag with a name, and then calls Facebook.publish_action.
            
2. Facebook.publish_action builds a query_params object and then passes it to Facebook._send_request.
            
3. Facebook._send_request dynamically generates an

   <iframe>

   which loads the URL http://www.facebook.com/beacon/auth_iframe.php and passes the query_params. At this point, Facebook now knows about the news feed item whether you choose to publish it or not.
            
4. The

   <iframe>

   loads a facebook_helper.html file, which lives on the partner site, and which contains a call to Facebook.process_message_from_helper.
            
5. Facebook.process_message_from_helper parses a call to Facebook._perform_action from its own query_string and calls it.
            
6. Facebook._perform_action dynamically creates the toast pop-up and displays it in the bottom right corner of the window.
            
7. The user is given the choice of cancelling the publication (i.e.: opting-out), which will cause the item not to appear in their news feed.

And there you go! A very clever series of steps to allow for a very simple integration by partners and a neat side-step of the Cross-site Scripting security features in modern browsers.

Blocking Beacon

Those of you wearing tin foil hats (or hats at all, really), are probably wondering how you can block this nefarious beast from spreading all of your secrets. You've got a few options:

• If you're not worried about Facebook knowing what you do but are worried about your friends finding out, you can go into the External Websites area of your Privacy settings and set specific sites to never publish. They'll only show up after you've triggered them the first time, so the list will only contain sites you've already visited which are Beacon-enabled.
            
• If you're worried about Facebook and you're friends knowing what you do on other sites, make sure you don't browse other sites while you're logged into Facebook. When you add a recipe to your recipe box and aren't logged in, a request is still made for the beacon.js file and gets as far as creating the

  <iframe>

  and loading auth_iframe in it, but that page now returns "no user" and the process stops.
            
• If you're paranoid about the entire process (or don't trust yourself to always log out of Facebook before browsing other sites), and you just want to make sure that nothing gets through, and you're using Firefox, follow Nate Weiner's excellent instructions in his Block Facebook Beacon post (basically, install the BlockSite add-on and add www.facebook.com/beacon/* and facebook.com/beacon/* to the list). If you're running InternetExplorer, you can try following these instructions to add the same two URLs to your restricted zone, but your life would really be much improved by downloading Firefox so I'd recommend you do that instead. UPDATE: we've confirmed that the exceptionally useful AdBlockPlus for Firefox will also block Beacon if you add a pattern for http://*facebook.com/beacon* to the list of filters. The script tag embed for the beacon.js file gets blocked which prevents the rest of the app from working. Note that you can set ABP to be disabled for certain sites (a virtual necessity if you use them often and they have heavy Flash requirements), which will in turn allow Beacon to work.
  

Walking Through the Code

IMPORTANT NOTE: All of the code shown here is copyright and all rights reserved and please-don't-sue-us owned by the respective parties who wrote and publish it. It was not disassembled for profit and we used only publicly available free tools (Firefox with the FireBug and TamperData Add-Ons installed) and source which was available through standard web protocols.

It has traditionally been very difficult to connect two websites together and exchange information between them without building complex backend integrations. Sure, they could have built Beacon by implementing a web service in which the third party servers (like Epicurious) would contact the Facebook services through an entirely backend channel whenever I did a certain something (like add a recipe to my recipe box), but that would have meant asking partners to invest some fairly serious engineering effort in order to support it, and the opportunity to display a fun pop-up window to allow me to opt-out would have been gone. Instead, Facebook followed the route of having partners embed a JavaScript file on their site, and make a simple JavaScript call to populate the item. Let's take a look at an example:

I'm a big fan of risotto – so big, in fact, that one of the reasons I married my wife was to get better access to her Risotto Milanese. I can't think of anything I'd really rather have for breakfast, so we're going to use a recipe for Breakfast Risotto as our example (you should load that page in another tab so that you can flip back and forth).

If you take a look at the source and search for Facebook, you'll find two entries. The first is on line 133 and sets up the name of this item for the news feed entry:

<meta name="facebook_label" content="Breakfast Risotto Recipe">

The second is on line 167 and actually pulls in the Facebook JavaScript file:

<script type="text/javascript" src="http://facebook.com/beacon/beacon.js.php?source=5194643289"></script>

The source ID (5194643289) identifies Epicurious and corresponds to a list maintained internally by Facebook, which allows them to validate sources. You can actually load that file directly and you'll find a suprisingly well formatted JavaScript class called window.Facebook. We'll dig into it a little bit later on, but the first method deserves mention all by itself, entirely based on its name:

write_awesome : function(url) {
             return '';
},

The two lines we're particularly interested in on the Epicurious page have to do with adding this recipe to our recipe box, and you'll find them on lines 1195 and 1197:

<a href="javascript:void(0);" id="addRecipeButton">Save To Recipe Box</a>
<script type="text/javascript">new LoginRequiredLink('240748',
                'addRecipeButton',
                '/user/recipebox/save?id=240748&returnto=/recipes/food/views/240748',
                'recipeBox',
                'recipeBox');</script>

For all intents and purposes, this has nothing to do with Beacon and basically just rewrites the addRecipeButton link to point to the right URL for saving it if you're logged in (note: a more modern approach would be to use Ajax to send a message to the server to save this recipe and prevent having to actually go to a different page, which would improve the experience here since the back button from the save page takes you back to effectively the same page in the pre-saved state). If you want to follow the rest of the way through this you're going to need to register an account on Epicurious, so go ahead and do that and I'll wait right here. Done? Great. Reload that page and you should now have an enabled Save to Recipe Box" button. Now, before you go and click on it to watch Beacon in action, you'll need to make sure that you've logged into Facebook in another tab or window. This is critical and is in fact overlooked by a lot of the people who are upset about the potential privacy violations: don't leave yourself logged into Facebook and you won't have a problem with other people using your machine and logging Beacon events. Go ahead and login and then hit that button.

You should now be on a page which shows the recipe as added. There's a lot of Epicurious-centered JavaScript at play on this page which we're not overly concerned about, so I'm not going to mention it except where it affects the Beacon integration. As on the previous page, we have a

<meta>

<script language="javascript">
    runOnLoad(function() {
        if (Facebook) {
                Facebook.publish_action('queue',
                    'http://www.epicurious.com/recipes/food/views/240748?mbid=fbfeed');
        }
    });</script>

Basically, if the Facebook object was instantiated when the beacon.js file was included, go ahead and publish an action of type 'queue' with the URL of this page as the link (with a tracker on the end so Epicurious knows you came to the recipe from a Facebook feed). The runOnLoad function gets called down on line 1330 from inside a

<script>

publish_action : function(action, urls) {
    urls = urls || window.location.href;

Set the urls variable to the value passed in or the location of the current page.

    setTimeout(function() {

Set a timeout of 50 milleseconds and then call the following function.

        if (Facebook._BROADCAST_ACTIONS[action]) {
            var query_params = [['action_name', action]];

Check to see if we were passed a valid type of action and set the action_name to the value passed in. The list of available actions is quite extensive: buy, wish_list, queue, sign_up, bid, review, add, book, comment, create, design, download, find, fly, get, join, play, post, rate, rent, shop, stay, subscribe, support, update, view, vote, watch, enjoy, order.

            if (typeof urls == 'object') {
                for (var i = 0; i < urls.length; ++i) {
                query_params = query_params.concat([['urls[' + i + ']', urls[i]]]);
            } 
       } else {
            query_params = query_params.concat([['urls[0]', urls]]);
        }
        Facebook._send_request('http://www.facebook.com/beacon/auth_iframe.php', query_params);
        }
    }, 50);},

Manipulate the URL if required to build the request and then send it to facebook using the _send_request function.

The next piece of code is key to how this whole thing works. Those of you familiar with JavaScript will know that browsers spend a lot of effort preventing something called Cross-Site Scripting (often shortened to XSS). We covered this back in July 2006 with a post on 5 Tips for Protecting Your Site Against XSS, and Wikipedia has an excellent a very in-depth look at the issue in their Cross-site Scripting entry. The gist of it is that you can't have a script from one site run on another site and you can't drop a cookie from one site and read it from another, so how does your news event from Epicurious get posted into Facebook without using a backend server connection? All thanks to the humble _send_request function (line 75 in beacon.js):

_send_request : function(url, query_params) {
    query_params = query_params.concat([['source_id', Facebook._source_id],
        ['random', Math.random()],
        ['ref_url', window.location.href]]);
    var src = url + '?' + Facebook._form_query_string(query_params);

This is pretty simple – parse the info handed to this function and get ready for below.

        setTimeout(function() {
        var ifr = document.createElement('iframe');
        ifr.style.display     = 'block';
        ifr.style.width       = '0px';
        ifr.style.height      = '0px';
        ifr.style.border      = '0px';
        ifr.style.margin      = '0px';
        ifr.style.padding     = '0px';
        ifr.style.overflow    = 'hidden';
        ifr.style.visibility  = 'hidden';
        ifr.src = src;
        document.body.appendChild(ifr);
    }, 0);
},

This is where it all goes down. This code creates an

<iframe>

So, an

<iframe>

<iframe>

<iframe>

<html><body><script type="text/javascript">window.onload = function() {
    window.top.Facebook.process_message_from_helper(
        window.location.search.substring(1),
        window.location.hash.substring(1));}</script>
</body></html>

Nice and short: when the page loads into the

<iframe>

<iframe>

process_message_from_helper : function(query_string, hash_string) {
            var params = Facebook._parse_query_string(query_string);

Facebook._parse_query_string is to an internal function (beacon.js, line 276) which pulls about the key/value pairs from the query string (e.g."action_name=queue") and returns an array containing the key and value (e.g.: ["action_name", "queue"]).

            var argument_list = [];
            var function_name = '';
            for (var i = 0; i < params.length; ++i) {
                var key = params[i][0];
                var val = params[i][1];
                if (key.substring(0, 3) == 'arg') {
                    argument_list[parseInt(key.substring(3))] = val;
                }

Some of the keys stored in the query_string start with 'argx' to denote that they arguments (where x is an integer indicating which argument this is – arg0, arg1, arg2, etc.). If that's the case, store the value in the argument_list array at that location (e.g.: arg0 goes into the argument_list[0]).

                          if (key == 'function_name') {
                                       function_name = val;
                          }
             }
             Facebook[function_name].apply(null, argument_list);
}

If the key is 'function_name', then we want to call that function in the Facebook object. That

if

else

if

It's interesting to note that none of the arguments which got stored when we built the query_string above started with arg or had a key of function_name. Since we had to fake our way into seeing the auth_iframe.php page, we didn't get a look at the full set of arguments passed into it from Epicurious. The trail would have gone cold here, were it not for the wonderful Firefox add-on called TamperData. With the add-on installed and the sidebar open, you can watch all of the GET and POST requests that a page makes as it loads. The recipe save page from Epicurious makes 116 requests to build the page, pulling from three servers (www.epicurious.com, www.google-analytics.com, and www.facebook.com). We only really care about the ones made to Facebook, of which there are 6. The GET call to auth_iframe.php is the one we're after, and it looks like this:

http://www.facebook.com/beacon/auth_iframe.php?action_name=queue
&urls[0]=http%3A%2F%2Fwww.epicurious.com%2Frecipes%2Ffood%2Fviews%2F240748%3Fmbid%3Dfbfeed
&source_id=5194643289
&random=0.2268030104517741
&ref_url=http%3A%2F%2Fwww.epicurious.com%2Frecipes%2Ffood%2Fviews%2F240748%3Frecipename%3DBREAKFAST%2520RISOTTO%26saved_to_box%3Dy

Which is not dissimilar to the version we constructed. Thanks to TamperData, we can get the response to that request, which contains the following location:

Location=http://www.epicurious.com/facebook_helper.html?function_name=_perform_action
&arg0=queue
&arg1=%5B%22http%3A%5C%2F%5C%2Fwww.epicurious.com%5C%2Frecipes%5C%2Ffood%5C%2F
views%5C%2F240748%3Fmbid%3Dfbfeed%22%5D
&arg2=<auth_token_redacted>
&random=1305590124

When the call gets made from Epicurious rather than by us, the response fits right into the pattern that process_message_from_helper is looking for. In fact, if you go to that URL and view the source, you'll seem the same thing we saw when we loaded auth_iframe directly, except now being served from Epicurious instead of Facebook. Applying what we know from process_message_from_helper, we've now essentially called:

_perform_action(queue, ["http://www.epicurious.com/recipes/food/views/240748?mbid=fbfeed"], <auth_token_redacted>, 1305590124);

Note that we've made a trip through the Facebook server to get here, which means Facebook has already recorded this news feed item whether we choose to publish it or not. This is a much longer function so I've edited out some parts which are not key to the core functionality. If you'd like to see the whole thing, we're now on line 159 of beacon.js. One thing to note before we dive in: the term 'toast' will only make sense if you've actually seen the pop-up appear. Since it rises up from the bottom edge of the window frame, it looks a lot like toast popping up in a toaster :)

_perform_action : function(action_name, urls, auth_token) {
             Facebook._kill_toast();

Although it may sound like it, no one at Facebook has a vendetta against breakfast foods (that we know of). This just kills the window if it's already visible from a previous instantiation.

             var toast = Facebook._toast = document.createElement('div');
             var query_param = [['action_name', action_name],
                          ['urls', urls],
                          ['source_id', Facebook._source_id],
                          ['ref_url', window.location.href],
                          ['random', Math.random()]];
             if (auth_token) {
                          query_param.push(['auth_token', auth_token]);
             }
             var src = Facebook._action_toast_url + '?' + Facebook._form_query_string(query_param);

Create the HTML element that will hold our toast, then setup the query_params. The toast window contains another

<iframe>

<iframe>

              [...redacted...]
             var iframe_style = 'width: 345px; height: auto; left: 0px;'
                         + 'border: 0px; margin: 0px; padding: 0px; display: block; position: absolute; background: transparent;';
             toast_inner.innerHTML = '<iframe src="%27%20+%20src%20+%20%27" style="" 
                     allowtransparency="true" frameborder="0" scrolling="no"></iframe>';

Format the

<iframe>

              var iframe = Facebook._toast_iframe =
              toast_inner.getElementsByTagName('iframe')[0];
             iframe.style.bottom = '-150px';
             toast.appendChild(toast_inner);
              document.body.appendChild(toast);
             [...redacted...]
         }}

Lastly, append the inner_toast div to the toast div which we created at the top. The next block calculates the position of the div and sets some style values.

We're almost done, honest. Referring back to our TamperData output, the URL for the

<iframe>

http://www.facebook.com/beacon/action_toast.php?action_name=queue&urls=["http%3A%2F%2Fwww.epicurious.com%2Frecipes%2Ffood%2F
views%2F240748%3Fmbid%3Dfbfeed"]&source_id=5194643289&ref_url=http%3A%2F%2Fwww.epicurious.com%2Frecipes%2Ffood>%2Fviews%2F240748%3F
recipename%3DBREAKFAST RISOTTO%26saved_to_box%3Dy&random=0.820036078758848&auth_token=<auth_token_redacted>

If you were logged into Facebook, and I hadn't removed the auth_token, and you load that URL in a window, you would probably see the contents of the toast window rendered in all of its glory. Since you can't do that, I'll just repeat the screenshot of the toast window from above:

You have five options at this point:

            
1. Close: closes the toast window and sends the news item to your news feed.
            
2. Learn More: takes you to a page on the Epicurious site with more information about the Facebook integration (Facebook Action Sharing and Story Publishing).
            
3. This isn't me: pops up a new window with a Facebook login in it so that you can login and add the item to your own news feed. This closes the toast window, but closing the login window without logging in didn't seem to log me out of Facebook. The recipe hasn't shown up in my feed, so I'm assuming that still blocked it from being published.
            
4. No Thanks: closes the toast window and stops the story from being published.

One important privacy consideration, despite this not being a privacy post, is that Facebook still knows that you added a recipe to your recipe box (or bought a book on Amazon, or a coffee table on Overstock.com, even if block the item from being posted to your news feed. I haven't seen any evidence here that shows that Beacon is sending along anything other than basically an action type, a name (in the

<meta>

Wrapping Up

That well and truly brings us to the end of our look at Facebook Beacon. It seems impossible that you might have read all this way down and not have been lulled into sleep, but if you're still awak (hi!) and have questions, leave them in the comments below and I'll do my best to answer them. If you're interested in reading more about this topic, and particularly about the privacy concerns or integration between Beacon and the other Business tools, let me know! Thanks for reading :)

Today we take a look at Expression Studio,  billed as:

Better Designer Tools for Better End-User Experiences

The suite includes tools for visual and web designers (Design and Web respectively), a media cataloguing tool (Media), and a cross-discipline Windows application development environment (Blend - mentioned in yesterday's post). If you haven't heard of it yet, it's only because most of them are still in Beta. Expect the hype machine to kick into action when the full suite is ready for purchase - until then, you can buy Expression Media, buy or try Expression Web, play with the RC1 (Release Candidate 1) release of Expression Blend, or play with the Beta1 release of Expression Design.

Express Yourself

Expression Suite is really interesting in some regards and business as usual in others. The tools share some common DNA with Visual Studio in that they're all part of the .NET 3.0 framework (forgive the occasionally incorrect terminology as we're not a Microsoft development shop - it may be more correct to say that they are built on the .NET 3.0 framework). With the exception of Media, they all communicate using a new XML-based markup language invented by Microsoft, called eXtensible Application Markup Language (XAML) (prounced zammel). The team behind Expression comes from a varied background of well-known players, including Silicon Beach (among many other things, makers of the awesome Dark Castle series of games), Avid, Adobe, Aldus, and Macromedia.

Our Expression day started off with a great intro by Angela Baxley, Product Manager (Expression), who stepped in for Erich Zocher, General Manager Tools (Expression), who couldn't make the morning. Despite her warnings about being new to the material, Angela did a great job presenting an overview of the platform based on one of the better PowerPoint decks we saw. As mentioned back on Day 2, her presentation saw a return of the equation Platform + Tools + Craft = UX, although in this case she was talking about the Platform + Tools piece while Darren was addressing the craft bit. Between Web and Blend (think ASP.NET and .NET Framework respectively) where the actual development work happens, the new platform provides the tools to build everything that a modern dev shop needs to produce.

The Value of Open Standards: XHTML vs. XAML

Most readers of our blog don't need a lecture on why web standards are important (for more information, see Web Standards on Wikipedia), nor do you need to be told that Microsoft has not exactly been known to embrace Open Standards in the past. Given that, you would presumably find yourselves equally as curious as I was to find out what was really meant by:

Expression Web is a professional design tool to create modern, standards-based sites which deliver superior quality on the Web.

Which really makes XAML all that much odder. David and I got in a debate with Arturo about whether XAML was actually an 'open standard', during which he confirmed that it was created at Microsoft and is controlled by them. By my books, that makes XAML a published file format rather than a standard and certainly not an open one by any means. This isn't a particularly new effort, as this handy Comparison of user interface markup languages tells us, and some of the projects go back ten years. We're familiar with a different XML-based approach called XUL (eXtensible User interface Language - pronounced zool as in the ancient Sumerian deity called Zuul, who you know from Ghostbusters). The cynic in me says that having Web do proper XHTML/CSS is an admission of defeat in the sense that Microsoft has been trying for years to  embrace and extend the HTML/CSS standards and maybe they've finally given up. Or maybe they got tired of people bashing the horrible HTML that came out of FrontPage and decided to fix it. Either way, standards support is almost always a good thing so yay! But then why not open up XAML or choose to contribute and work on one of the existing efforts? This is an important issue because anyone who choses to use Expression to build their applcations will be held hostage by the XAML file format and may have to make substantial changes to future versions of their software depending on what Micrsoft chooses to do with the format. Truly Open Standards are controlled by independent third parties who have (or at least appear to have) no particular bias towards any one firm and can therefore (theoretically) make decisions which drive the whole industry forward (e.g.: the W3 'owns' a number of standards including HTML and CSS). Maybe some of the Microsoft folks want to weigh in on this in the comments.

Expression Web

Web replaces FrontPage and is an effort to bring Microsoft's web design technology up to current levels by building a new application and environment rather than trying to fix the old stuff. It's designed to do HTML and XHTML, CSS formatting and code management, and XML/XLSTs, as well as to integrate closely with ASP.NET libraries for things like AJAX (via the AJAX Extensions). The demo was given by Wayne Smith, Senior Product Manager (Expression), who started with a really quick rundown of why standards are important:

1. Speed
2. Search Engine Indexing
3. Efficiency
4. Future Proofing the Web
5. It's professional!

We've spent more time cursing at InternetExplorer's lack of support for standards than most people will ever even spend in front of a browser, so this is a very welcome change in tune from the maker of the most popular browser in the world (though, I suppose, it remains to be seen how much the one hand talks to the other). I agree with all of Wayne's points here - we've been building standard compliant sites since we started the company because they just make more sense. In addition to the standards support, Web has a bunch of other great features:

• CSS Box Model: In 'design mode', the interface goes to great lengths to expose the box model (see BrainJar's CSS Positioning, or a neat-o 3D rendering by Jon Hicks). Wayne showed us how Web uses shaded borders to make the padding and margins more obvious, which you can kinda see at about 17:50 of this training video. Grab the 'crop marks' on the edge of any element to change the margin, or hold down shift and drag to change the padding.
• Style Application Mode: Web's Page Editor options allow you to toggle between having styles applied in either Auto Mode or Manual Mode, with Manual giving choices between inline, as classes in the head of this page, or as classes in an included document. You can also configure the Manual setting on different types of elements to behave differently (e.g.: apply h1...h6 styles inline but divs get styled in the included CSS).
• Multiple Doctype Support: Web supports proper doctype declarations for XHTML1.0 Transitional and Strict, which will affect the doctype output at the top of the page as well as the options in the IntelliSense code completion menus. Web also supports a Secondary Schema, consisting of various versions of InternetExplorer, which will be used to check code compatibility when rendering Quirks Mode pages.
• Style Manager: If you've ever used Word's Styles properly, then you're familiar with the way the Style Manager works. WYSIWYG previews of styles make it easy to pick the right text formatting and apply with a simple click.

Overall, I was really impressed with the product. If they ever released a version for Mac OS there's a good chance we might start using it internally (although it looked good, it didn't look good enough to run Parallels and Vista just to use it). If you're a Windows-based web shop, especially one that does ASP.NET work, you should take a look.

Expression Design

Arturo Toledo took over to show us Expression Design, a vector-based graphic design tool. I actually have no notes from his demo other than "Adobe Illustrator", which will tell you pretty much all you need to know. Challenging Adobe in this space is like trying to take them on in the Photoshop arena, which is ill-advised unless you're even bigger than they are and have mountains of cash. Which Microsoft happens to be and have. They may, in fact, be the only company out there who could reasonably stand a chance of taking any substantial market share away from the 800-pound gorrila. Right now I think you'll have a tough time ahead of you if you need to get your designers to try and switch over, unless the tools, keyboard shortcuts, and menu items mimick Illustrator pretty closely and your designers don't have to give up years of training and muscle memory. The biggest (only?) reason you would do this is to take advantage of the fact that Design can output XAML files to pull straight into Blend. That said, Mike Swanson (a Technical Evangelist with Microsoft) has released an Adobe Illustrator to XAML Export plugin with reasonably good support for the Illustrator feature set and better support coming soon (some of the unsupported features aren't available in Design or XAML), so yeah. Draw your own conclusions (get it? draw? ha!).

Expression Blend

In the same way that you can think of Web replacing FrontPage, Blend basically replaces VisualBasic. The primary intent for the Blend is to build Windows applications on the Windows Presentation Foundation (WPF). Arturo showed us a few demos of the kinds of things which Blend is intended for (the now defunct Microsoft Max project and the Avalon Patient Monitor specifically), which made for really cool looking interfaces with debatable practical value (like the now famous Jeff Han video). I'm always slightly suspicious of totally avant garde interfaces for medical applications which include snazzy animations and effects - when life-threatening decisions need to be made, I sure hope my doctor has to wade through flipping menus and rotating panels! - but it works very well as a proof of concept to show off how flexible Blend's toolset is. I was also slightly put off by Arturo's repeated statements that Blend finally lets you escape the tyranny of the boring gray button (and the Microsoft UX Guidelines) and map full motion video to your spinning control surfaces, which brought to mind thousands of horrendous Flashtastrophes (and one of my favourite Penny Arcade cartoons ever). At any rate, if we built Windows apps (or if WPF/E does become a potential competitor to Flash and gets widespread adoption as a browser plugin), it looks like a great environment for building interfaces. I think we, as a group, were a little confused about who it's being aimed at (see yesterday's post if you haven't already), but once we had sorted out their definition of 'designer', it all made sense. I was particularly impressed when Arturo pulled in an application that only its developer could love, built in Visual Studio, and then reskinned it without affecting the functionality (I grabbed two photos of the finished login and welcome screens). Going on personal experience, I have a suspicion that a lot of shops will end up using Blend by having their Dev team build off a spec and then having their UX/Visual team polish things, so it's great to see that the app works that way too.

Expression Media

Media is actually iView Media Pro, formerly made by iView Multimedia out of London, and acquired by Microsoft on June 27th, 2006, and is the only product in the Expression Suite which is available for Mac OS X. Media is a Digital Asset Management (DAM) Tool (which is fun to say - Dam Tool!), which basically sucks in all of your media in a whole littany of formats and then provides tagging and sorting capabilities. There's an important distinction in the DAM world between browsers (which just read the info available in the media files themselves - like EXIF data in JPEGs) and catalogues (which store their own meta data about the files and can therefore provide much easier and more efficient sorting). If you've used anything like Apple's iPhoto or Aperture, Adobe's Lightroom, or even Google's Picasa, you're familiar with the basics. Media goes further in that you can build up all kinds of ways of looking at photos, including adding custom fields (e.g.: a pro photographer might add price to track how much to charge for her images), and build collections for quick access (e.g.: all potentially good backgrounds in one area). It looked like an excellent media catalogue and something that we might make use of to store assets from different clients for easy retrieval by all of our Professional Services team members. There was some discussion about how much support was included for sharing the library files (could they be checked into a version control system? read of a network mount?) which I think was left open, so if any of the Microsoft folk know the answer, please feel free to leave a comment.

Final Expressions

I really had to work at putting myself in the mindset of a potential purchaser/user of the software since our Mac bias basically rules us out. Someone did ask Erich Zocher if there were plans to do Mac versions and there clearly aren't, which I think is a real shame. We spend a lot of time in the trenches of this industry and we're seeing more and more glowing Apples while we're down there - particularly amongst the digerati whose influence reaches far and wide

That's it for Day 4 - tune in tomorrow for the big wrap up!