Spatacoli

Category - Silverlight

  1. Expression Blend 3 SketchFlow is for Prototypes

    With the recent release of Silverlight 3 we also got a new version of Expression Blend. This new version, Expression Blend 3, includes an exciting new feature called “SketchFlow.”image_8_2

    Introduction

    There are three main aspects involved in SketchFlow: Sketch Styles, SketchFlow Map, and the SketchFlow Project. In this blog entry I’ll look at each of these aspects and how they can help us build a prototype of an application. First, however, let’s look at a brief overview of when this is useful.

    When starting a new project one of the first processes is to figure out what data the project will present to the user, and how this information should be laid out. This is usually the work of an Information Architect or a User Experience expert. When the IA or UX finishes their discovery process usually what comes out is a PDF document with annotated wireframes. These go to the designers and the designers put a pretty face on it and produces Photoshop files (PSD’s) that the Interactive Designers/Interactive Developers need to translate into a fully functional web site/web application/Rich Client Application/Rich Interactive Application. Sometimes you will be lucky enough to work with an IA/UX professional that will write up very detailed functional specifications, but in most cases an annotated comp is all you get. In extreme cases you’ll only get wireframes, site map, and the designer’s PSDs, but that’s a whole another headache waiting to happen.

    I digress, this black hole of information that isn’t gathered in most cases and only written in plain English in the best of cases really needs to be improved. This is the “need” that SketchFlow solves.

    Imagine if the IA/UX person could easily prototype the application in such a way that not only would the stakeholders be able to “play” with it, but the stakeholders could also make comments on it from the comfort of their own browser and send those comments back. Oh, and then add in the ability to export it all into a basic set of functional specs complete with screen shots. That is what SketchFlow provides.

    I know what you are thinking because I’ve been there before. If the stakeholder sees something that is too functional they’ll think it’s finished. A statement like, “Great, so when can we go live” comes to mind. Well, SketchFlow comes with a resource files that contains styles called Sketch Styles.

    Sketch Stylesimage_9_2

    Sketch Styles attempts to solve the “blue button” problem that can stop progress in a demo meeting with stakeholders. The “Blue Button” problem is the one where the wireframes look too polished and a stakeholder asks if you could make the button blue, or ask why the site doesn’t use the corporate color standards. Instead you can show the client something that looks like the image above.

    This is an image of a hypothetical prototype application. It’s hypothetical for this blog, but I’ve done this for other apps and it works pretty well. However, the really cool thing here is that although this looks like a crude drawing (except for that stick figure next to a graph as that truly is a crude drawing) it is 100% functional. On the left there is a real list box, and contained within that real list box are real buttons. Those real buttons are hooked up to logic that actually changes the page when viewing this prototype in a web browser. It is only the style that makes the list box and the buttons look like a crude drawing. This crude drawing style is there in an attempt to get the stakeholders to look beyond the surface and think about what the application actually does.

    SketchFlow Map

    image_10_2

    As I said earlier the buttons on this prototype actually navigate to the “Home,” “About,” and “Tickets” pages. I managed to quickly setup these pages using the “SketchFlow Map” feature in SketchFlow. This is seen in the image to the left here.

    The map always begins with the first page. From there you can create as many connected screens as you’d like. This map is a great replacement for a “Site Map” because this map actually represents actual pages in the prototype. You can color code the pages, create connected components, and arrange the pages in the map any way you’d like. This information is also presented in the SketchFlow Project that we’ll look at in a minute. One more place that this information appears is in the export to Word doc. Again, this makes it a handy starting point for the functional specifications.

    SketchFlow Project

    Once you’ve mocked out the entire application you can export the prototype to a SketchFlow Project. Then just host the project on a web site that the stakeholders can see and you have a platform for very rich interaction between clients and developers. I won’t discuss all the features of the SketchFlow Project, but it is a very handy tool to let the stakeholders see the progress of their application as it is still in the ideation stage.

    The stakeholders can make comments, highlight sections of the prototype, and draw all over it. However, to get that feedback back to the IA/UX teams is a rather cumbersome process that itself is more of a proof of concept than a fully baked product. After the stakeholder marks up the prototype, they can save those comments out to a XAML file and then E-mail that XAML file back to the IA/UX team. Then the IA/UX teams have to import that information into their SketchFlow prototype. To make this just slightly more complicated, that import action is hidden be default. You have to enable a “Feedback” pane by an option in the “Window” menu. Then you can load in the feedback. Granted that feedback pane can contain a whole history of feedbacks, but it just seems lightly less thought out than the rest of the product. This is only a Version 1 product (the SketchFlow part, Blend is actually a great solid Version 3 product) and as such I’m sure this process will be better thought out in the next version of the product.

    So Where Does that Leave Us?

    This has been just a real quick overview of the main features of SketchFlow. I haven’t even mentioned how you can create a temporary dataset for use in the prototype among lots of other little features. There are two (2) main issues that I have with this whole prototyping idea.

    The first issue I have with this whole workflow is that regardless of how many times you tell someone that what they are looking at is a prototype and they shouldn’t look at it for style or color, but for functionality they will immediately ask you to change the font. I can hear it now, “That title has to be in Segoe, and where is our logo and the consistent user experience?” On the other end of that spectrum are the customers that like the look of the sketch style and approve it to be in their application. Give it about a year and I’m sure I’ll be running across live applications that are using that sketch style.

    The second issue I have with this workflow is that far too few companies are willing to expend any amount of energy on a prototype that is throwaway code. What this means is that after the prototype is finished the powers that be will demand that the prototype code is used for the basis of the real application. I mean, it’s just a sketch style, can’t you just change the style to Contoso Corporation Style and it’s finished? If all you are looking at is the look and feel of the application you’d be 100% correct. However, there’s a reason that the instructions to “Convert into a production project” are 6 or 7 printed pages. It’s really not recommended!

    The prototype was built for speed of delivery, not for security, upgradability, or maintainability. The code behind the prototype that is delivered isn’t using any best practice of software architecture or a development pattern of any discernable type. The code in this prototype is throw away. Just think of it this way, would you have your software developers write the site copy? No. In that same way you shouldn’t let your IA/UX people write any final production code. They used SketchFlow to get an idea born and to play with it. The useful parts of the prototype are the ideas that come out of it. The functional specifications are still the final delivery of IA/UX, it’s just that in this case instead of flat 2D wireframes, the developers and designers actually have a prototype to play with as they are doing their job.

    Far too many people trivialize the role of the developer. It is important that people understand that a developer is not just a glorified typist. Clearly you hired experts in usability and information architecture to do the IA/UX work, and you hired experts in design to do the design work. Let the experts you hired to write code, write code. Don’t trivialize their abilities by forcing them to try to repurpose prototype code for a final product.

  2. Server Unleashed Gets Upgraded with Hyper-V

    I’ve been so busy lately trying to get the SQL Server Energy site out in about 15 languages that I forgot to post that last night I updated the Server Unleashed site with the new Hyper-V goodies. Of course it doesn’t talk about my favorite new product, Windows Hyper-V Server, but it’s a pretty good site, and one that has withstood the test of time so far.

    The code base I thought is pretty over-engineered. I keep meaning to write a post on my experience using the MVP pattern in Silverlight but you know how blogging priority goes down when you are busy. Adding in the code for Hyper-V was fairly straight forward. The most difficult part is that the four main pillars used to be on the main navigation screen, now they are hidden behind an "Innovations” button hover state.

    I’d like to thank Ben “Virtual PC Guy” for blogging about it as that reminded me to post something here about the update.

  3. First Full SilverSpine Implementation

    Today we soft launched the first site that is using the full implementation of SilverSpine. The SQL Server Energy site has gone live. Over the next couple of weeks we will be launching this same site in 15 languages all using the same exact codebase, but the content back (the SilverSpine) will have translated code. This is truly an exciting time.

    The site will look similar if you have Silverlight 2 (beta 2) installed or if you don’t have Silverlight at all. We are working on the Silverlight 2 RTW version but for obvious reasons (Silverlight 2 RTW hasn’t been released yet) we didn’t go live with that.

    This was a tremendous effort from a lot of people, but we’d like to call special attention to MSCOM for doing their best to stop the launch. We won, you lost. ;-)

    Check it out here: SQL Server Energy

  4. Silverlight 2 RC0 is Now Live!

    A year and a half ago we got a taste of a new technology. This was a technology designed to leverage developers knowledge of .NET on the client side browser. Some call it Microsoft’s answer to Flash, but mostly everyone just calls it Silverlight.

    Today we’ve reached a milestone in this long and sometimes rocky road to having a small .NET CLR running cross platform in the browser. Today, Silverlight 2 RC0 went live. I won’t spoil the moment with any more of my crap. I’ll just post a  few important links:

    However, I need to plug a Silverlight 1.0 site that is near and dear to my heart: Windows Server 2008 The Server Unleashed

    You may wonder why I’m linking to a Silverlight 1.0 site in a blog entry about Silverlight 2 RC0, well that’s because I wanted to show you that I didn’t make any code changes at all and this Silverlight 1.0 site works perfectly in Silverlight 2 RC0. Way to go to the testers working on backward compatibility. You deserve a raise.

  5. Silverlight 2 Beta 2: Should I Stay or Should I Go?

    RTW for Silverlight is still off in the near future. The RC0 build of Silverlight is mainly for developers, but you have a very important web site launching in 22 languages over the next couple of weeks. The ad campaign can’t wait for the RTW of Silverlight 2. What on Earth are you to do?

    Well as I see it you really have a few options.

    0) Wait for RTW to switch to a newer build. This is option 0 because it isn’t really an option. You really do need to be out there testing your beta 2 applications on RC0 to ensure that you get all the updates cleaned up. This way when RTW is launched you just “flip the switch” and you have gotten rid of all of those nasty pre-release bits once and for all.

    1) Leave beta 2 on your main development machine and setup the RC0 bits on a separate virtual machine or computer. For me I have the RC0 bits on my laptop and the beta 2 bits on my main development machine, but a virtual machine would work just as well.

    2) Switch back and forth between beta 2 and RC0 by using the tried and true “Add/Remove Programs” control panel applet. If you go with this option you need to remove several things. I think Vista shines here because you can use the search box to help find these components. First search for “Silverlight” and you should find three things to remove: “Silverlight 2 SDK”, “Silverlight Tools Visual Studio 2008 SP1 - ENU” and “Silverlight”. Then you should search for and remove the pre-release version of Blend (that’s Blend 2.5 if you have the Beta 2 bits installed and Blend 2 SP1 if you have the RC0 bits installed).

    The last step of option 2 is the difficult one. When you install the Silverlight Chainer it also installs a patch to Visual Studio. To find this in the Add Remove Programs control panel applet show updates if you are in XP or click on View Installed Updates if you are in Vista. Then look for (or search in Vista) the update with the KB#: KB956453 and remove that. Then you are clean and ready for a reinstall of which ever version you need at that moment.

    Personally I think this is a lot of work. That’s why I’m glad that I have plenty of virtual machines and extra hardware that I can have several machines running different bits of stuff.

    Oh, one last thing I should point out. Until Silverlight 2 ships, any site created with Silverlight 2 Beta 2 will fail to run with Silverlight 2 RC0 installed. The SilverSpine sites I’ve created all have a very rich HTML site to fall back on so I just disable Silverlight and I can surf the web without worrying about the Silverlight 2 RC0 incompatibility with Silverlight 2 Beta 2.

  6. KB955011 Silverlight Update

    Some of you may have noticed that there is a new critical update on Windows Update. This update brings Silverlight 2 Beta 2 up to a new build described in KB955011.

    This update improves stability, media streaming, and the auto-update component. Most importantly for a lot of people is that this build improves support for Firefox 3.

    Up till now, I’ve received a lot of questions from people about Silverlight on Firefox 3. They said that it just proves Microsoft cannot write a Netscape style plug-in. The fact is though that Firefox 3 included some breaking changes to the Netscape style plug-in that they did not share with Microsoft. They did however chose to share the details with Adobe. I’m sorry to go off on a rant here, but I think that this negativity towards Microsoft is completely unwarranted. Silverlight is a really good product and you will be seeing a lot more of it here on my blog.

    Give Silverlight a chance. If you are a little weary about installing beta software, there is a released version of it that downloads lickity-split. Go to www.microsoft.com/silverlight or silverlight.net for more information. If we can get more of you out there to install it, then maybe I won’t have to use the Windows Media Player control as much at work.

  7. Silverlight.js V1 to V2 Change in Functionality

    I’m sure there are a lot of changes in functionality in the Silverlight.js file from version 1 to version 2 beta 2. One of the ones I’m most excited about is that version 2 will automatically refresh the page after you’ve installed Silverlight so you don’t need to ask the user to restart their browser.

    However, today I was updating the Server Unleashed site with the new Silverlight.js file and I found a breaking change that I hadn’t seen documented anywhere. In Silverlight 1 I was checking if Silverlight was installed by using this property:

    Silverlight.available

    It seems they’ve removed this property, and now you need to use the method:

    Silverlight.isInstalled(“1.0”);

    to detect if Silverlight is installed. If I find more I’ll post them. If you know more, comment on them here.

  8. WebClient Does not Send HTTP Headers By Default

    Something to keep in mind as you are coding your Silverlight 2 Beta 2 applications is that the WebClient does not send any HTTP Headers by default. If you need some headers you must explicitly add them. For example, if you have a form you wrote in Silverlight and you need to post that data off to a web service or a POX page what you need to do is add something like this right after you initialize your WebClient (in this case the WebClient is called request):

    request.Headers[HttpRequestHeader.ContentType] = 
         "application/x-www-form-urlencoded";

    HTH

  9. Get Ready for Silverlight 2 Beta 2

    We are down to the last hour that we have to live without Silverlight 2 Beta 2. I’m sure that many of you are wondering what you can do to help pass the time. Well you can get your computer prepared for the new bits by following a few simple rules:

    1. First, be sure to uninstall all of that old beta 1 crap from your machine. That includes any beta 2 builds that you may have been lucky to get. The full list of items to remove include:
      1. VS90-KB947520 or KB949325
      2. VS90-KB950630
      3. VS08 Silverlight Tools
      4. Blend (1, 2, and 2.5)
      5. Deep Zoom Composer
      6. Silverlight SDK
      7. Silverlight Runtime
    2. Next, be sure to delete the following file if it exists: C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\Microsoft.VisualStudio.ServicesProxy.dll
    3. Delete the following file if it exists: %temp%\Silverlight Tools Beta2\Silverlight.2.0_Developer.exe
      • This one should raise the question, How did you get beta 2 you lucky so-and-so.
    4. Finally, the installation order of the new stuff. Install the developer chainer, then Blend, then the new Deep Zoom Composer.

    Now, it’s the weekend so let’s regroup on Monday with a cool demo to show everyone.

  10. Why Silverlight?

    Today I was pointed to an essay by W. Daniel Hillis titled "Richard Feynman and The Connected Machine." This essay started off with a phrase that I wish I could say, but never will get a chance to, "One day when I was having lunch with Richard Feynman." Start an essay like that an I am hooked. Most of the essay is about Mr. Hillis starting a company that was building a massively-parallel-processor computer. About half way through the essay is this paragraph:

    To find out how well this would work in practice, Feynman had to write a computer program for [Quantum Chromodynamics]. Since the only computer language Richard was really familiar with was Basic, he made up a parallel version of Basic in which he wrote the program and then simulated it by hand to estimate how fast it would run on the Connection Machine.

    My first thought was, "he did what, in what language?" I have a co-worker who will turn off if you suggest writing anything in basic, and here is one of the finest minds of the 20th Century making a version of basic that will run on a machine with 64,000 processors in 1983. Then he's simulating the code by hand. A-frackin-maz-waitforit----ING!

    Stop for a moment though, why write it in basic? Would I write it in basic? No. Why not? Because I am not familiar enough with basic to do that kind of work. I'd write it in C#. The reason I would use C# is not because I drink the Microsoft Kool-Aid (even though I do), it is because I'm most familiar with C#. It may not be the best language for the job, but if I need to get something done I need to go with what I know right now.

    What does this have to do with Silverlight? I am regularly asked in the course of a day why someone would write something in Silverlight instead of Flash. The answer is the same as why Richard used basic to code his program. It depends on what you know today. I know how to write C# very well. I don't know anything about ActionScript. Why would I go out and learn ActionScript to do something I could write in C# today? When people ask me why I like Silverlight, my answer is that as a .NET Framework engineer, and a C# coder to be more specific, Silverlight has a lower bar of entry than Flash does for me.

    Does that mean everyone should use Silverlight? Heavens no, but if you are a .NET Developer and already know the framework you have a good head start to learning Silverlight.

    As for the rest of the essay, the ending is a bit of a downer. I'm sorry that Richard Feynman is no longer with us. I'm glad that he has "told most of the good stuff [he] [knew] to other people." At least we have stories like this one to read.

  11. 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.

  12. 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.

  13. 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!

  14. 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.

  15. 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!

  16. 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.

  17. Silverlight SEO

    So you've downloaded the SDK, and you finally installed Visual Studio 2008. You crack it open and get your "Hello World" project running. Now you are ready to dive head first into a complete Silverlight site.

    Getting buy-off from the various organizations will be your first hurdle. They are interested in how well the site will perform in the search engines. You don't really care about that because you want to be able to have a stronger fidelity between what your designer has created and what you can deliver to the web.

    Search Engine Optimization will be the engine that drives traffic to your site, but if the search engine's spider cannot crawl your site then your site may not even exist. So what are you to do?

    The official line from Microsoft is that they are working with the major search engine sites to help them crawl XAML files. After all XAML is just XML and is plain text. However, with Silverlight 2 all of those XAML files will most likely be packaged up into a XAP file. A XAP file is essentially a ZIP and I'm not sure that search engines have the time to unzip the XAP just to index the contents.

    Well if you think about it, what do search engines index very well? If you guessed HTML pages then you'd be right. If you wrote your HTML page with content only then it is 100% pure gold for search engines.

    Not to get off track here, but I am a big proponent of the Semantic Web. Although I probably won't go so far as to say that you should be writing RDF triplets only, but I believe in the ideas of using elements that make sense. If you are writing a paragraph of text enclose it in a <P> tag. If you want to emphasize something enclose it in an <EM> tag. Also careful use of ID's and Classes make your HTML much more readable and makes it more friendly to search engines.

    Why do I bring that up? If you are careful enough to keep your style information in CSS and your dynamic actions in JavaScript you should be able to just transform your HTML into XAML and let Silverlight control the display, style, and actions. JavaScript can be used to translate the HTML into XAML if you are in Silverlight 1.0, but if you are using Silverlight 2.0 then just use the .NET Framework's XML classes to do an XSLT transform on your XHTML into XAML.

    Although this will create a bit of work for you in creating the XSLT the benefits you'll get go beyond just SEO. I'll investigate this more in a brief series of posts that will be published over the next couple of days.

  18. More on Silverlight SEO

    In my last post I described a method of building web sites that have the ability for search engines to crawl the site. This is important in Silverlight because traditionally all of the content within a Silverlight site is contained within the XAML. With the method described, all the content is still in the HTML.

    The question remains, though, why do I care? The first and most obvious answer is: if you don't how will anyone ever find your content?

    The second answer is a little more complicated. When you write a commercial web application you want to increase its visibility in search engines because another method of getting people to your site includes paid search. What does one have to do with the other you ask? Well if your site performs well in the search engine, then the cost of your paid search placement will go down. The closer to #1 your site is when you search your keyword terms, the less you have to pay for the targeted paid search.

    I'll describe more benefits to using this method of creating your Silverlight sites, but if any of this post doesn't make sense, please comment and I'll try to explain it better in a future post.

  19. Silverlight Centrally Managed Content

    In my previous posts about creating a Silverlight site that plays well with search engines I have only focused on SEO and SEA. There are a lot of other benefits to this model and I hope to map them out in a few posts. The difficulty is in finding out where to start.

    The main crux of this idea came from the Server Unleashed site that I was working on at the time has a separate HTML version of the site. This was particularly frustrating to me because I am a firm believer in the write once and test it then never write it again. That includes content. Content in one place makes it easier to make changes as they come in, and it actually makes it easier to localize a topic I'll get into in a few posts.

    There are thousands of Content Management Systems (CMS) on the market. I would even be willing to bet that every day sees the birth of at least one more. My own web site that you are reading right now uses a custom CMS that I wrote because I wanted bragging rights. Now I see the trouble with doing your own custom CMS is that you have to maintain it. Maintaining a site for someone that is willing to pay time and materials is one thing, but finding time to make changes to your own code is a bit more difficult. That's why there are some issues with this site that haven't been updated in a few years.

    I digress. If your CMS is a static HTML file or if it's Microsoft Office SharePoint Server 2007 as long as your content exists in one place you are in good shape to maintain the content moving forward. If you find that your content needs updating you only have to make the change and test it in one place.

  20. Silverlight Accessibility and Portability

    What's the big deal with having your content in a separate file anyway? Beyond SEO and the single responsibility principle there is what I consider to be the single most important reason: Accessibility.

    When I write about accessibility I really am talking about 508c compliance. If the person viewing your web site is hard of sight or cannot see at all then your site is worthless to them. I won't go into the legal reason of why your sites should be accessible (search "Target accessibility web site" to know more about that). Your site should function without the flashy bells and whistles that CSS, JavaScript, and Silverlight provide. The page should make sense to navigate in its pure text form. You should have main site navigation, but perhaps that should be near the bottom of the page. The most important thing about the page is the content, not the navigation. Maybe have a named link at the top of the page to quickly scroll to the navigation section, but make sure that the site content is first on the page.

    The site navigation should be simple and you should have a site map. All of these suggestions are SEO best practices, but really you are doing a favor for anyone that is coming to your site that relies on a screen reader to navigate the web.

    I'm not going to go through all the best practices of accessibility here, I'm sure over time I'll compile a full list of suggestions. Just know that you need to keep this in mind as you are building your site. If your HTML is clean and free of design elements or extra JavaScript cluttering up the page your are well on your way to building an accessible site.

    Since writing the content HTML is the first step of building a site. Launch it. Use the site without CSS or JavaScript. Can you get to all the content. If you turn off images, is there enough information on the screen to understand what the image was?

    Once you've reached this step you can do two more things. You can build a simple CSS for people that want to print your site. In this print version of your CSS turn off the navigation and anything that is not content.

    Next add a little bit of flair with CSS to your site and make things look better than 12pt black Times New Roman on white background. Throw in a little color and some font sizes here and there. Use this as the WAP version of your site.

    Constantly building from the rock solid framework of content only HTML and adding CSS and JavaScript using external files will help you create a site that can be used on all of the lowest common denominator systems out there.

    Once you've finished with this, you can finally go to the holy land... Silverlight. This is when you can turn on all of the bells and whistles. You will need to invest some time in writing an HTML to XAML converter, but it will be worth it. When you launch your site and everyone on the Internet can enjoy your site you will have a site worth being enjoyed.

  21. Localizable Silverlight

    In my previous post I discussed Silverlight SEO, and the strategy I'm using to enable search engines to crawl my sites. Even though most of my site is in Silverlight, search engines are able to crawl it because the content itself is actually in the HTML of the page. Then I transform it using some basic JavaScript.

    At McCann Worldgroup one of the most important tasks is making a site easy for subs to localize. Most of the time the subs don't have the experience with Silverlight or the money to pay for localizing an HTML version and a Silverlight version. With this method that I am trying to describe here, the subs only need to localize the HTML. All of these international groups have experience converting US English HTML into their language/dialect. With this methodology they can retain those same techniques to localize the HTML site and the Silverlight site at the same time.

    In order to do this though, you need to be conscious of the fact that not all languages have the same length of words as we do in the US. Beyond the obvious problem that many English words have extra characters (colour?) there are words in German that will put a strain on your design. Also Chinese is a bit of a problem, but I don't have any direct experience with that one yet.

    When designing a site for Silverlight (or even CSS/JavaScript) you should keep in mind that what content will fit in your 250px by 300px box looks great in US English may well not work at all in another language.

  22. Tim Sneath’s 50 Silverlight Applications

    Tim Sneath posted a blog entry titled "From A to Z... 50 Silverlight Applications" Now I am really excited about Silverlight, but with the customers that I have to support I have to be realistic when it comes to developing solutions. Microsoft has stated that Silverlight 1.0 will be released this summer. For those of you new to Microsoft product development that means it will be released probably in October or November. I figure if I have a web application that needs to go live in December or maybe late November I'm pretty safe suggesting Silverlight version 1.0 as an alternative to Flash.

    During Mix 07 I pointed out that they also released an "alpha" build of Silverlight 1.1 and all the really cool features were in that. Nobody with a Microsoft business card would even guesstimate when version 1.1 will be released (even after multiple shots at the friendly neighborhood bar). However, it seems that with all the ease of development built into version 1.1 nobody was paying attention to version 1.0.

    Anyway, back to Tim's post today. He posted links to 50 Silverlight applications (which most are really technology previews than applications, but let's not dwindle on that). I went through and tried my best to find out what people are using. I was surprised to find that of the 50, 18 of them were written in version 1.0. Good job to those of you who wrote your demo in version 1.0. I'm proud of you. 5 of them I either didn't want to install (executable Silverlight? Why not just stick with WPF) or they required a login. One didn't work, and one was actually a duplicate from the version 1.0 pile. That left 24 that were written in version 1.1.

    Now I understand the power that Silverlight 1.1 contains, but lets be honest, it's still an alpha build. Come on everyone, let's get the documentation and examples around version 1.0 up to the point that Microsoft is willing to say "We will release version 1.1 in April of next year." That way you'll know that sometime around September of next year you can start demonstrating your great Silverlight 1.1 applications to a released product.

  23. Silverlight: Enter the Breaking Changes

    One of the dangers of using pre-release software is the breaking changes that inevitably come along before the final version.

    The number of breaking changes between WPF beta 1 and WPF beta 2 were enough to discourage me from continuing on that platform until release. Actually I still haven't had a chance to get back into it, but I will.

    Joe Stegman of Microsoft has posted the first of what I'm sure will be many breaking changes for Silverlight. You can read the blog here.

    Keep in mind that even though he's posted this list, don't think that this list is a final comprehensive list of breaking changes between Silverlight beta and the RTW version. Expect more breaking changes to come.

  24. Mix07 Day 1–Session 1

    Building rich web experiences with Silverlight. This session was presented by Joe Stegman. Joe is an excellent presenter and I've attended many of his web casts including the Digital Black Belt series that helped prepare people for security issues with web site design. Joe was presenting Silverlight to us using the go-live loving beta of version 1.0. He made it clear that he would show us some of the stuff the Scott demonstrated in his keynote, only using the now-defunct-yet-not-released-yet version 1.0 of Silverlight.

    Let me tell you, I can't wait for 1.1 to be released. The amount of JavaScript that he had to write to hook things up was a little confusing. I was actually disappointed that they continued with the XAML method of finding nodes (findName) and not the fairly standardized DOM (getElementById). But that's just a small thing and we'll all forget about it when version 1.1 is released.

    Basically you include a script file and call a method to generate the Silverlight control. The Silverlight control is just a typical object tag with a type of "application/ag-plugin". For example:

    <object type="application/ag-plugin">
      <param name="Source" value="somexaml.xaml" />
    </object>

    The script file and function you'd call would prevent IE from forcing the user to click to activate though, so you should just use that. That's all you need for Silverlight. Notice there's no requirement for adding a managed assembly to the GAC, no special web.config settings, and that's all because you don't need them. During the keynote Scott showed running a Silverlight page that pushed some video to the screen running from a web server and browser on a Mac. No Windows required.

  25. Mix07 Day 1–The Keynotes

    Today was the first full day at Mix 07. It started this morning at 9:30 with a keynote address from Ray Ozzie who said this about following in Bill Gate's shadow, "There will never be another Bill Gates." Ray also gave the high level vision of what Silverlight really is. It isn't a Flash competitor, even though it will compete in that space. It's really the third wheel assisting apps that cannot decide if they are desktop applications or web applications.

    Scott Guthrie came out and gave demo after demo of how this can be used. The demos were for companies such as CBS, MLB, and Netflix. You can see those parts of the keynote on the Mix07 site (www.visitmix.com).

    One of the features that Scott made everyone excited about was the fact that Silverlight will include a .NET Framework to run on the client side. This is a cross browser, cross platform runtime that will run on the Mac. He then proceeded to do a demonstration of debugging client code running on a Mac from a PC. He went to the immediate window and changed the text that appeared on the Mac's browser. It was wicked cool.

    I know, I'm as shocked as you that I wrote "Wicked Cool" but please bear with me I'm building up to something.

    The demo's that he and the other speakers presented showed that Silverlight has the capability to be more than just flash. The demo called "Top Banana" which was a video mixing station in a browser was reported to weigh in at less than 50KB sent to the browser for the application (not counting the videos). Simply amazing...

    but...

    then it happened...

    The version of Silverlight that they were showing off is the next version. I know what you are thinking because I was thinking it too. How can they have a next version when the current version isn't even released? All the cool stuff for Silverlight that goes above and beyond just being a Flash competitor is in version 1.1. Which they have released the Alpha of today. Version 1.0 is in beta, but it has a go-live license. Because of that, you will see some demo's on here for Silverlight. Hopefully soon.

  26. You Just Can’t Escape Silverlight V1.1

    From the Silverlight V1.0 Beta SDK, "[The] Silverlight 1.0 Quick Starts - Implemented with Silverlight 1.1 Alpha, the quick starts provides an easy way for developers and designer to get up to speed on creating web experiences with Silverlight 1.1 Alpha."

    Um... no. The Silverlight 1.0 Quick Starts should be implemented in Silverlight 1.0 and should get developers and designers up to speed on Silverlight 1.0 Beta.

    Wow, if they are so in love with 1.1, why don't they dump 1.0 and just put all their effort into releasing 1.1?

  27. WPF/E

    Windows Presentation Foundation has obvious benefits both for creating rich user experiences in Windows and for ease of development, but how do those advantages translate to the web? Most people would give the answer that WPF is just Flash for Windows. Just take the application in Windows and rewrite it in Flash. Now let’s say that we’ve invested a lot of time training you and me on how to write WPF applications, and a customer comes back and says they want the same quality of user experience in a web app. We’d say that a different team of people would need to come up to speed on Flash and build it out in Flash. This would effectively duplicate our efforts. Do you think they will pay us double? They probably would not. What would be great is if there was some way to leverage our expertise in WPF for the web. This is where Windows Presentation Foundation Everywhere (WPF/E) fits into the picture.

    Microsoft today announced the availability of the development center for WPF/E on MSDN. It is currently only a Community Tech Preview, but by the end of 2007 there will finally be a viable competitor to Flash.

    More information can be found here:

    http://msdn2.microsoft.com/en-us/asp.net/bb187358.aspx