When Written: July 2006
Before leaving for Verona I was fortunate to be invited to a Microsoft launch of their Expressions range of products. Interestingly, they decided to launch these in front of an invited audience of designers rather than developers. Interesting, because traditionally Microsoft have had very little to offer designers, that marketplace being the domain of Adobe and Macromedia (now of course the same company). The three products on show were all part of their Expressions range and were called; Graphic Designer, Interactive Designer and Web Designer, or as Adobe might call them Flash and Dreamweaver. The similarities between these new Microsoft products and the established market leader of Macromedia’s products, are quite considerable but with some very interesting differences. Microsoft’s Graphic and Interactive designer produce XAML. This is a text file that looks a little like XML but which a XAML player will display as a graphic rich interactive object on a web page, much like Flash currently does. However Flash needs a swf file to play and this format is propriety to Macromedia although there is now an SDK and a free licence if you wish to develop a product that produces swf files. Here is a small sample of XAML which draws a rectangle with a graduated fill:
<Rectangle Stroke=”#FF000000″ Width=”Auto” Height=”Auto” x:Name=”Rectangle” MinWidth=”0″ RenderTransformOrigin=”0.5,0.5″ Margin=”161,114,200,184″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” MinHeight=”0″>
<Rectangle.Fill>
<LinearGradientBrush StartPoint=”0,0.5″ EndPoint=”1,0.5″>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color=”#FF000000″ Offset=”0″/>
<GradientStop Color=”#FFFFFFFF” Offset=”1″/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Currently there is only an ActiveX player available for XAML which, although a small download, means that XAML will only work on Windows platforms. But perhaps we shall see XAML support in the Flash player, or perhaps Microsoft’s Expression range producing Flash readable SWF files. Or perhaps not? With Interactive designer you can control events and animation via time lines much like Flash. However the tool that I am particularly interested in is the Expression Web Designer.

This product is so like Dreamweaver in its looks and functionality that it hurts! But this Microsoft product which is still in beta, as a number of tricks up its sleeve. It is an incredibly good design tool using CSS, in fact like Dreamweaver it will only produce CSS compliant code. You select text and then say make it 12point in Ariel and you will not see a <FONT> tag in sight, it will produce a style for just that item. This style you can then drag from the page and put into a linked style sheet if you prefer and all the necessary changes to your web page will be made automatically. Web Designer’s code helper and design helper tools make this product a serious competitor.
One feature that for me is so worthwhile is the ability to drag ‘guides’ bordering any object on the web page, these guides show where the spacing and padding areas in a style are. This means fine tuning of a design and the placement of elements is made much easier as the rendering engine in Expression Web Designer is a great deal better at showing such changes than Dreamweaver. Because of this you can stay in the design environment rather than having to keep testing in a browser or two. It also has real-time links to standards and accessibility checkers built in so it will alert you to any breaches of standards that your web page design may have. Of course it has full support for Microsoft’s server side products such as ASP .NET2 and using the server side components is often just a case of dragging and dropping items from the various tool bars. This product is still in beta but you can download a free trial copy from http://www.microsoft.com/products/expression
Last article I wrote about stopping Firefox from pre loading web pages. This is where any other web pages that are linked from the web page you are currently browseing are loaded in the background so that as far as the use is concered their browsing experience is speeded up. However for a webmaster on a hosted server where they are charged by the amount of data their web server serves, this increase can mean a significant increase in cost or worse still disconnection. I mentioned that Google tells Mozilla to pre-fetch web pages from their search results and also the Google toolbar does pre-fetching. I also said that the solution to stopping this behaviour might be material for another article, well here we go! What is needed is to detect ‘X-moz: prefetch’ in the HTTP request from the user’s browser coming to our web server. To do this we have to configure the web server to return a ‘404’ error message saying the page is not available. How you do this varies depending on your web server, here are a few examples:
In IIS: (using isapi rewrite)
RewriteCond X-moz: prefetch
RewriteRule .* /prefetch-attemtp [L]
In Cold Fusion: (in application.cfm)
<cfset httpHeaders = GetHttpRequestData().headers>
<cfif StructKeyExists(httpHeaders, "X-moz") AND httpHeaders["X-moz"] IS "prefetch">
<cfheader statuscode="404" statustext="Not Found">
<cfabort>
</cfif>
In Apache: (using mod-rewrite in htaccess)
RewriteEngine On
SetEnvIf X-moz prefetch HAS_X-moz
RewriteCond %{ENV:HAS_X-moz} prefetch
RewriteRule .* /prefetch-attempt [L]
.NET2
public class WebForm1 : System.Web.UI.Page
{
public WebForm1()
{
System.String xmodHeader = HttpContext.Current.Request.Headers[“X-moz”];
if ((xmodHeader != null) && (xmodHeader.IndexOf(“prefetch”) >= 0))
{
HttpContext.Current.Response.StatusCode = 404;
HttpContext.Current.Response.StatusDescription = “Prefetching not allowed”;
HttpContext.Current.Response.End();
}
}
…
}
This not to say that pre-fetching is all bad, and should not be used. If you want the user’s browser to download some images whilst it’s idle then you could use: <link rel=”prefetch” href=”http://url.to.prefetch/” /> instead of using the traditional javascript methods to pre load images.
Article by: Mark Newton
Published in: Mark Newton