ASP.NET 2.0

Redesigning my website with the help of Expression Blend

Laurent Bugnion — Mon, 20 Oct 2008 09:53:50 GMT

I decided to completely redesign my website www.galasoft.ch (yes, it's about time, I know). For this process, I decided to inspire myself (loosely) from my good friend Robby Ingebretsen's site, which is both simple and beautiful.

In order to get a better idea of what I want to reach, I decided to work like most web designers and to create a mockup first. Instead of creating a static picture, however, I used Expression Blend, a tool I am fairly proficient in, to create a WPF application demonstrating not only the new website's look&feel, but also "faking" some of the dynamic behaviours, such as what happens when a window gets resized, or when the mouse hovers over links. Blend also allowed me to test various color themes and to understand how they react together when the user works with the page.

An advantage of mocking up the pages before implementing them is to get feedback. Because I am not a web designer, I am sometimes struggling to improve the site's conformance to standards and best practices, its overall beauty and of course the user experience. However, this is a profession that requires a lot of experience and talent. Let's face it, many web developers nowadays are just downloading an existing template somewhere on the web, tweaking it (and often breaking it) and then thinking what the heck. Because I want to learn from the best, however, I am publishing the "mockup" application as a ClickOnce WPF application, and looking for feedback. Simply click here, install the application and start playing.

When you use the application, you can change the color themes by clicking on the buttons on the bottom-right. The default color theme is the one I prefer, and the one I am also implementing in CSS at the moment.

Principles and ideas

I want the site to be cleaner and easier to use than now.
I want to do my best to respect current best practices in HTML, CSS and JavaScript.
I want to avoid hacks as much as possible (such as CSS hacks).
I want each page to be linkable with a unique link.
When server-side code must be generated, I want to use ASP.NET MVC and stay clear of web forms.
I want to reduce the usage of client-side JavaScript, and start using 3rd party libraries, especially jQuery.
I want to use Silverlight to enhance the website only, but not to replace functionality.

These principles I want to follow have two purposes:

It will make the site nicer and easier to use.
It will allow me to learn new technologies that I deem important in the moment.

This last goal has always been a major driver for all my private projects, and this one is no exception.

Designing in Blend

Designing in Blend presents a learning curve, especially for developers who don't have a background using Adobe products (though Expression Blend is made by Microsoft, its usage inspires itself from Adobe Illustrator (such as for keyboard shortcuts and overall user philosophy). Because it is also a development environment, it can compile .NET code and even execute it, both "statically" (for example loading design-time data when a Window is opened on the design area) and "dynamically" (press F5 to test your latest changes and run the real application).

Once you master the basics of Blend (and my good friend Brennon Williams' book "Expression Blend Unleashed" will help you there), it is faster to mock the web page up rather than with trial and errors in CSS (even with the support of the "design view" and the 3 CSS helper dialogs in Visual Studio ("CSS Properties", "Manage Styles" and "Apply Styles"). I found however that a good basic knowledge of CSS helps tremendously, especially in deciding what can be implemented in CSS and what cannot. Knowing the limitations of the target technology speeds things up (not all effects of WPF can be achieved in CSS), even though the "designer" (yeah, me) should not let this be a brake to creativity.

After writing 642-825 and 642-845, those professionals who are interested in EX0-101 or 642-552 decide to move on with 70-294 or 70-647 so that more certifications can be achieved in less time.

Choosing colors

The color palette I use for the new design has 4 background colors, one "standard" font color and one "active" font color.

The font color was easy to choose, since I simply "stole" Robby's gorgeous #3A3A3A. It's a very dark gray, but is not as hard on the eyes as a plain black.

The 3 basic colors brown, black and white are preserved from the original Gala head. The black and white are straightforward, and the brown was actually taken from the picture of my cat shown below. I still needed a background color for the header. I wanted something very light and bright, derived from the brown color. This is where I used a really cool tool for designers: Adobe Kuler. This tool allows you to enter keywords and will present you with a choice of color palettes uploaded by the community. In my case, I entered the words "brown cat" and was served with 5 palettes. I took a few light browns from these palettes, and put them in the file "HeaderBackgroundBrushes.xml". In my opinion, the clear winner is a light brown which is much brighter than all others, and very soothing: #F9E4B3.

All these light browns can be seen in action in the page mockup, as well as in color palettes, as described below in the section titled "The test application in short".

As for the active link colors, I started with a bright orange (which was not very well legible in my opinion) and tested many variations. The winner in my opinion is a color between orange and brown, which is less aggressive than a bright orange, and still contrasts enough with darker and lighter colors: #D98000

Choosing font

The font is also stolen (I mean, inspired) from Robby's website: It is a gorgeous Verdana (a Sans Serif font), which I find particularly legible. I also followed Robby for the line height and set it to a whooping 165%. This separates the lines very nicely.

I tried to follow best practices (as I understand them) to set the font size in the body selector and then to work with "em" units everywhere else. This is a place where I am sure that I can improve my CSS, so if you have a better suggestion, please let me know!!

The WPF application allows switching between fonts for the H1 and H2 headers. I started making these headers in Verdana too, but after talking with Nas Khan, I decided to follow Robby again and to use Georgia (a Serif font) for the headers. I think it's a winner, and it clearly differentiates between header and paragraph text. Of course I have fallback fonts for the computers where Verdana and Georgia are not installed.

Redesigning logos

I thought long about it, and decided to keep the cat's head as my main logo for my site. First, I like it a lot. It's been my companion since I started publishing about software engineering back in 1997 (more or less, I don't remember exactly when). It's simple and easy to recognize.

Short historical intermission

The name GalaSoft comes from my cat Gala, who unfortunately is not with us anymore. Gala was a farm kitten, a merciless hunter who could also turn into a huge fur ball of tenderness when she felt like it. I went through highs and lows with her until she one day decided to walk the road and disappeared (after 9 years living with us, and after my second daughter Laeticia was born). The brown color I used in the logo comes in fact from a picture of Gala, and is as close as possible from her original colors (black, brown, white).

The name Gala itself has two origins: I chose it to honor Gala Dali, Salvador Dali's wife. Salvador has always been a source of inspiration for my work. It is also a reference to Galadriel from the Lord of the Rings (a book I have been avidly reading and re-resing since I was 15). I thought that an elven princess' name fitted that cat very well, and I was right.

End of historical intermission

Because I didn't want to be limited by the format of the logo, I redrew it in Expression Design, and then exported it in XAML. Being vector oriented, this format allows me to seamlessly resize the images. Of course I am forced to choose a raster format for the web (I choose PNG), so after sizing the logo to the right dimensions, I take snapshots of it and save these as a collection of images.

I also took a shot at redesigning the site's logo, and created two versions for now. I still didn't decide which one I prefer, and it's possible that it changes after feedback. To have the same ease in resizing as with the cat's head, I also made the logo in Expression Design and exported it to a XAML resource dictionary (Expression Design exports as a DrawingBrush, which you can use to "paint" a Rectangle, for example).

The logo is inspired by the following idea:

The mix of a "brush" font (STXingkai) and a "coding" font (Consolas, the most beautiful monospace font currently available) is representing the mix of art and technology that software development is made of. I strongly believe that a good software developer is at a crossroad between an artist and an engineer, and I like my logo to be an affirmation of this.

The logo is not definitive, and will probably evolve a little more. I want to put a few ideas to the test and see how they look.

The test application in short

I made the application to allow studying variations in colors and fonts without having to go through a process of modify/start/dislike/end/modify etc... but instead being able to just click some buttons. First I designed the layout in Expression Blend. Of course this requires a good idea of what design you want to achieve, but since Blend is a visual design tool, it makes it really easy to modify the layout without having to bang your head over CSS too much.

Caution: WPF layout is much more flexible that HTML/CSS layout. You need to be aware of CSS limitations before you start doing crazy stuff in Blend. A prior knowledge of CSS is required before you start designing your mockup in Blend. This would be true of any mockup technology anyway.

I created a few XML files containing various colors for the header background, the page background and the active links. I chose XML as a format so that I can add, remove or modify some colors without having to rebuild or even restart the application. The XML files' build action is set as "Content". Once the application is running, it is able to locate the XML files and display them to the user who can edit and reload them to see the changes (see below how to do that).

Thanks to WPF and its ability to do data binding, the amount of code needed to load the XML files (I used LINQ to XML) and display all the elements in a ListBox is really minimal. In addition, I am able to retemplate the ListBox to make it look exactly like I want (in this case, a thin horizontal list of items that the user can select).

The application has 3 such listboxes, each corresponding to an XML file: Header Background (from the XML file "HeaderBackgroundBrushes.xml"), Page Background ("PageBackgroundBrushes.xml"), Active Link color ("LinksForegroundBrushes.xml"). These listboxes are displayed by the buttons "1" to "3". The button "4" allows to choose a different font for the headers H1 and H2 (from the file "Fonts.xml").

To edit the XML files and reload them during runtime, use the buttons labeled "O" (for "open") and "R" (for "reload" after you edited the XML file). The files can be edited in any text editor and are very simple. Note that for colors, you can use the color name (such as "Red" or "Yellow"), the HTML code (such as #FF0000) or the WPF code including the alpha channel (such as #FFFF0000). Once the edit has been done, reload the file with the "R" button, and you should see the new, deleted or modified items appear in the corresponding listbox. The page's look and feel will also be updated automatically.

Once the application starts, a thin window is displayed with a number of buttons.

The button marked "GalaSoft Head" opens a window with the head logo in full width and height. This is the logo exported from Expression Design as XAML DrawingBrush, so the resize is seamless.
"Logo Choices" shows two versions of the logo I work on. These can also be resized, in order to check the effect at various sizes.
"Color Palettes" opens a window showing the 4 base colors side by side. On the bottom of this window, you'll find the buttons I mentioned earlier in this article. Note that some of these buttons are not active in this particular window. The button labeled "1" allows you to change the 4th color (Light Brown). The button "3" allows to change the text color (including the "hover" color for the label "Big Text", simulating a a:hover CSS effect. The other settings have no effect in this window.
"Mock With Resize" shows a window with a mockup HTML page. Using the buttons at the bottom, you can change the Header Background color, the Page Background color, the Active Links color, and the fonts for the H1 and H2 headers. Remember that you can edit these colors and fonts using the "O" and "R" buttons.
"Mock Firefox" shows the same pseudo HTML page as it would appear in Firefox. Read more about this below.
"Shutdown" will close all the windows and shut the application down.

Mocking up Firefox

I am very visual and I find that the header with the navigation bar and all the tabs in Firefox influences the way I perceive the page's look and feel. I wanted to have a way to see the page with all this additional chrome (pun intended). To simulate this, I made a screenshot of the top of a Firefox window and added this as an image to a WPF Grid. To make it more realistic, I made the WPF window chromeless, which means that it doesn't have any title bar. The title bar is simulated by the Firefox screenshot. To make it a bit more user friendly, I added two invisible rectangles (note: to make them invisible but still let them react to mouse input, set the Visibility property to Hidden): One of them on top of the title bar takes click and drag mouse events, and moves the WPF window accordingly. This allows dragging the window to another location. The other smaller invisible rectangle is located on top of the Firefox screenshot, where the "close" button (the one with an X) is located on the picture. When this invisible rectangle is clicked, the window is closed. This simulates the behavior of a "real" Firefox window. I didn't implement any resize, minimize or maximize action, but it would be possible too.

Even though I didn't implement this, it would be easy to switch between Firefox, IE, Opera and any other browser to compare the page's perceived look and feel.

Publishing as ClickOnce

To gather comments from as many people as possible, the easiest way is to publish the mockup as a ClickOnce application. ClickOnce is a not very well known way to deploy a .NET application (not just WPF, any .NET app) over a website. Personally I love ClickOnce, even though it has limitations: The install is on a per-user basis (can't install for all users of a PC), you cannot access the registry (so it is impossible to register COM components, for example), and you cannot specify in which folder the application will be installed. On the other hand, it is really easy to publish and install a ClickOnce application and it has a built-in version check allowing you to push newer versions of your application to every connected user.

To publish the application as ClickOnce, right click on your .NET client application and select Publish in the Solution Explorer. This opens a wizard where you can specify the destination folder on your website (I usually publish my ClickOnce applications over FTP to my web server, but you can also publish to the local file system (for example to burn on a CD), or to the local IIS (for example to test the deployment). You can also specify if an entry should be added to the Start menu, in order for the user to be able to start the application just like she would start Word or Firefox. This is a nice touch.

Note that more advanced settings can be found by right clicking on the project you want to deploy, selecting Properties from the context menu, and then choosing the tab Publish. These settings allow to specify exactly which files must be marked as pre-requisite, which files must be deployed (for example, you don't want to deploy the .NET framework, but marking it as prerequisite will trigger a check of the client machine, and the user will be asked to install .NET if it's not already present). You can also specify the auto-update mechanism for your application.

Once all the settings have been set, publish your ClickOnce application to the web server. Depending on your settings, a file named "publish.htm" will be created. This is the URL you want to give to your users.

The file publish.htm

By clicking on the Install button, the ClickOnce deployment will be triggered. After installation, the application will be started. Because I set the version check to occur before each start (which is a bit annoying, but since the design might change often in the consulting phase, it is needed), every time that the user starts the application, it will connect to my web server and check if a newer version is available.

Note: The version being checked here is the ClickOnce manifest version, which is not the same as the assembly version. The ClickOnce version can be set manually when you publish the application, or it can be incremented automatically every time that you publish a newer version.

Auto-increment the ClickOnce version (in the project properties)

One important caveat is that the XML files used for configuration must be explicitly marked as Included. Because they are built as Content, they will not be included in the assembly (this way they are available for modifications during runtime). To include these files explicitly in the deplyoment, click the Application Files button in the project properties (tab Publish) and then change the Publish Status for the XML files to Include.

Including files built as Content

What did I learn?

- Typography in "basic" WPF is not as flexible and advanced as in CSS. This might sound surprising, but remember that WPF has a whole "flow document" set of features which I chose not to use in this application, for simplicity sake. Remember: I am not trying to make a new WPF application to display content here. The final application will be HTML and CSS based, and this is where I should refine the styles. (For example, I couldn't modify the line height in my TextBlocks, but I am using a line height of 165% in CSS, which gives a much neater and clearer impression). Also, ClearType is... well, the anti aliasing of fonts that were clearly not made with anti aliasing in mind is disturbing.

- Designers are really cool: The site was inspired and reviewed by some of my designers and artist friends: Robby Ingebretsen, Corrina Barber, Nas Khan, Brennon Williams, Gigi Lee. All gave me really valuable feedback.

- A nice design is a simple design: Even though Expression Blend and WPF allow for crazy stuff, the best is to keep it clean and simple. The content is at the center (that's a programming website!). Also, CSS is more limited than WPF, so having a good prior knowledge of CSS (or at least of its capacities and limitations) is really necessary before starting creating in Blend.

- Variations between browsers suck - nuff said. One more reason to keep the design simple and clean.

Next steps

The very next step in this process is to put up a first live page with the new design. This will happen very soon and will be related to my book Silverlight 2 Unleashed. Since I plan to put some material online in relation with the book, this will be a great occasion to test the new look and feel.

After that, I want to gradually convert the whole site. This will be a relatively long work, because I want to convert the structure of the site (to an ASP.NET MVC application) and the design (the new style discussed here), and at the same time try to preserve the legacy URLs to avoid breaking existing links as much as possible. I don't have everything figured out at the moment, but I will blog about it when the time comes.

I also want to redesign my blog to stay in line with the site's design. The good people at GeeksWithBlogs host my blog but I am able to use my own subdomain blog.galasoft.ch, so it makes sense to have a blog looking very consistent with the site galasoft.ch.

Download

In case someone is interested to take a look, I provide the following code:

Converting and customizing XAML to PNG with server-side WPF

Laurent Bugnion — Fri, 10 Oct 2008 12:48:54 GMT

One Tweet by Oliver Sturm (http://twitter.com/olivers) the other day got me to thinking. He was asking about the possibility to host graphics for a web site in XAML format, and the best way to render it.

Currently, there are 3 possible ways that I know of to render XAML in a web browser

Loading the XAML file directly in an IFRAME will trigger Windows Presentation Foundation on the client (if available). The IFRAME can be positioned in the page so the it "blends" with the HTML page. That's only for Windows (IE and Firefox) and requires .NET 3.0 (or preferably 3.5/3.5 SP1) installed on the client. I wouldn't recommend that solution.
Silverlight can load loose XAML files. However, Silverlight XAML is less powerful than WPF XAML. Not all controls and features are supported. Also, it requires a plug-in to be installed on the client. The plug-in is available for a number of platforms, but still. More lightweight than solution 1, but still not ideal to render static images.
Rendering the XAML on the web server. This solution has the advantage to require installation of the .NET framework only on the web server (a controlled environment). WPF can render in memory, which is very convenient. No need for a visual, you can just load the XAML in a stream, and render as a bitmap image it in a memory stream, which in turn can be passed to the Response. Multiple bitmap formats are supported. In this example, we will use PNG.

I really want to write a more in-depth article about that, but for now I already post source code demonstrating 3 possible uses for this technique. To install the demo, follow the steps below.

Note: I am having some issues installing this on my web server, and trying to clear things up now. It works fine locally however.

Download the source code (Zip)
Unzip to a folder on your PC.
Open the Solution file in Visual Studio 2008. Note: This is targetting .NET 3.0.
Make sure that the web application "GalaSoft.Web.ConvertXamlToPng" is set as startup project.
Make sure that the file "index.html" is set as StartUp page.
Run the application by pressing Ctrl-F5.

After 350-001 and VCP-310, many professionals do not register immediately for 646-204 or even 70-649 and wait before they attempt 70-620 and that too after registering with testking.

The demo has 3 parts:

Localizing an image: In this sample, some strings are fetched from the resources (using a standard .NET resource manager) and set in the XAML scene after it has been loaded in memory. This solves a recurrent problem for web site managers: How can we design pictures in various languages without having to create (and store) one picture per supported language. In this demo, the same XAML file is localized in 3 different languages, and rendered to PNG.

Scaling an image: WPF and XAML are great for flow layout and element composition. Using tools like Expression Design and Expression Blend, it is easy to create compelling graphics that resize neatly. The second sample demonstrates this and allows the use to specify any size for an image. The XAML is loaded and rendered to that size directly on the server. Note that if you choose a very large size (thousands of pixels), the image appears pixellated. I am not sure yet what is the reason for it.

Customizing an image. In this last sample, you can parameterize multiple elements of the XAML scene. It's all a matter of finding the right element after the XAML has been loaded (FindName helps), finding the right DependencyPropertyand reflection are needed) and then setting the right object.

Just a word on the technology

One thing that WPF requires when it is being rendered (visually or in memory) is a STA (single threaded apartment). However, ASP.NET pages are typically rendered in MTA (multi threaded appatment). To solve this, you can either force an ASPX web page to run in STA (by using the <%@ ASPCOMPAT="true" %>directive in the Page) but that will degrade the performances. A much better way is to create a worker thread and to render the XAML in this thread.

One problem with that is that WPF is very particular with threads: To put it simply, a visual element created in a thread may not be used in another thread. We run into that problem when we parameterize the SolidColorBrush used by the last sample. In that sample, the replacement brush is created on the main thread, but used in the worker thread which creates an Exception. To avoid this issue, we "freeze" the SolidColorBrush after it is created. Frozen objects cannot be modified anymore, but they can be shared between threads.

What's missing?

Some things are still missing to this demo. I really would like to get it to work on my web server, but I am getting some issues. My understanding so far is that some assemblies are missing on the web server, which creates exceptions.

Another thing I would love to support is zoomability. Since XAML elements are vector graphics, and since ScaleTransform is supported, it is rather easy to add zoomability to an image. I experimented with that already and with good results, but it's not ripe for distribution yet. The problem here is that dimensions get all kind of wacky when you zoom an image (a 500 pixels wide image zoomed with a factor of 200% is suddenly 1000 pixels wide) and I am still looking for the best way to implement this in a generic way.

The XamlToPngConverter class

This is the main component used for the conversion. I won't write too much about it now, but it's implemented in a generic way, so that XAML can be loaded from any stream, and rendered to any stream. This allows for saving static images to a file, for example, rendering to a web response like here, etc... More details will follow.

I hope you like this demo and that it is useful. While it requires .NET 3.0 on the web server (and while it's not as straightforward on remote web servers as I was hoping for), it's a useful technique that I will be playing with more in the close future.

Microsoft to add jQuery in Visual Studio: Why I think it's great

Laurent Bugnion — Mon, 29 Sep 2008 12:44:28 GMT

The news took the community by surprise and the reactions are overwhelmingly positive: Microsoft is going to ship jQuery with the ASP.NET MVC framework (very soon) and with Visual Studio (in a near future). For more details, ScottGu and Scott Hanselman are talking about that in a very complete way.

I think it's great news on many levels. First, because I hear that jQuery is a great framework. I must admit I never used it, because I didn't do much web development lately (but I will get back to it in a number of private projects soon) and also because I am usually wary of frameworks and prefer to develop my own JavaScript. Of course this is only viable because I used JavaScript mainly on small private projects for the past few years, and I wanted to have the learning effect of programming against it directly instead of having a higher level framework to "talk to". I think that now is the time for me to look more into it, however, and this is just what I will do for my site www.galasoft.ch which needs a rather heavy facelift anyway.

But more importantly, it's a major step forward for Microsoft. There was a request for similar functionality in ASP.NET AJAX. This was on the list of requirements for a future version. And yet, instead of using the vast resources at their disposal, Microsoft decided to use an existing, widely acknowledged open source framework. They also plan to contribute patches to jQuery, but will do so following the standard procedure that this open source framework is already using.

This is really newsworthy because there are many other areas where such a decision could also be taken. I don't even want to talk about the Entity Framework vs NHibernate fiasco that so many others already dissected. But think about all the other areas: Testability immediately comes to mind...

Of course this also raises questions. Scott Koon already mentioned some of them, the one that I particularly appreciate being: "How will companies who are normally allergic to OSS code react to this [...]". After having worked for almost 13 years for Siemens, I know what he means. Every time we proposed an OSS technology, the question was always: Is that really safe. And I have to admit that, given the development timespan of some of our projects (typically 2 years between variant analysis and first release) and the lifespan of our products (typically more than 10 years and often much more than that), sometimes I have been careful with that too. See what happened to NDoc for example.

Still, there are so many other projects where OSS totally makes sense, and where Microsoft can save time and energy instead of reinventing the wheel. I am really glad to see that happening today, and think it's a great sign for Microsoft and for all .NET developers out there.

TweetMyPage V0.2 - Now with "from TweetMyPage" indicator

Laurent Bugnion — Thu, 29 May 2008 23:00:35 GMT

As soon as I had my info page online, I asked Twitter to accept TweetMyPage as a Twitter application, and to mark the messages posted with TweetMyPage with "from TweetMyPage". Note for developers: There is a form to fill on the Twitter API page. It's really fast, and one day later I got the answer that it was accepted.

From now on, messages posted from TweetMyPage are marked as such:

I got a couple of testers so far, and already got a few requests for additional features. I am now evaluating how I can modify the application to integrate these new features, and will update TweetMyPage as soon as I got time (in 2018) (just kidding).

TweetMyPage is in beta for the moment, and if you want to try it, I'll be happy to send you an invite (just leave a comment down here or send me an email. If all goes well, I will make TweetMyPage public next week or so.

MIX08 Keynote (11)

Laurent Bugnion — Wed, 05 Mar 2008 19:56:14 GMT

WeatherBug

New Silverlight application running on Nokia
Cool app, "very easy to develop using Silverlight"

Scott Guthrie

Wrapping up and summarizing.

Time to have lunch!!

MIX08 Keynote (10)

Laurent Bugnion — Wed, 05 Mar 2008 19:50:39 GMT

Cirque du Soleil

Use WPF application to track cast information
Cirque du Soleil recruiting ScottGu for their shows. Good idea. "Come see the Man Who Never Sleeps".

Scott Guthrie

Performance for WPF videos and image handling MUCH better. Pretty cool
Write custom effects in WPF and they are pushed to the hardward for acceleration. (for example ripples, shadows, etc...)
Effects applied to controls during runtime, physics engine calculation, all pushed to hardware for better performance.
All these included in .NET 3.5 SP1 available this summer.
"Let's talk about mobile", yes, let's!
Silverlight available for Windows AND non-Windows mobile phones.

Stimulant

Silverlight application running on mobile phone.
See where your friends are in real time.
Photos and videos.
Tell your friend you're on your way in real time.
Shows current location in real time.
"Rich intuitive user experience for mobile environment".

Scott Guthrie

"Trying to get Silverlight on as many mobile devices as possible"
Microsoft to partner with Nokia for Silverlight

MIX08 Keynote (9)

Laurent Bugnion — Wed, 05 Mar 2008 19:18:57 GMT

Scott Guthrie about Silverlight

Silverlight controls developedby MSFT are shipped as Open Source!
Devigner role officially mentioned in ScottGu's slides! Yes I do exist!
Show off new SL 2 applications

AOL

Builds new AOL email client using Silverlight.
Using IsolatedStorage much faster and more advanced than using the browser cache.

Scott Guthrie

Enable user experience that doesn't exist today.
Deep zoom. Based on research project. Navigates through very large images by downloading only portions of them

Hard Rock and Vertigo

AMAZING application: HardRock.com then look for Memorabilia. Collection of high def pictures (2 BILLIONS pixels), with amazing deep zoom abilities. Wow. Mind blowing.
Wow, first time I am asked to install SL 2 Beta 1 :)

MIX08: Keynote (6)

Laurent Bugnion — Wed, 05 Mar 2008 18:26:14 GMT

Dean Hachamovitch (IE General Manager)

IE8: Select an address, choose "Live map" from a context menu and get a Live Map view of the place.
Web slices: User can subscribe to parts of a web page. Hover on a part of the site, icon shows up, select a "web slice" and subscribe.Displays a new bookmark, live view of the web page "extract".
Beta 1 of IE8 available for developers after the keynote

Scott Guthrie

Quick peep of live Silverlight sites.
1.5 million installations of Silverlight per day, should accelerate with SL2
SL2 Beta 1 available today
Silverlight 2.0 now runs on mobile devices.
Bandwidth can be an issue --> adaptive streaming added to SL2. Switch between bitrates automatically as CPU and bandwidth change. No need to write any code for that, SL takes care of it dynamically.

MIX08: Keynote (5)

Laurent Bugnion — Wed, 05 Mar 2008 18:11:54 GMT

Dean Hachamovitch (IE General Manager)

CSS2.1. Demo in Firefox, Safari, looks the same. Opens in IE7 and it doesn't look the same.IE8 supposed to be the answer to that.
First time showing IE8 to the public
Focus on CSS and understanding standards the same way than developers are.
Legacy web. Legacy pages developed for IE look bad in Firefox and in Safari.
IE8 has a "Emulate IE7" button for legacy pages. In the future, IE8 should behave just like Firefox and Safari, at the risk of breaking legacy pages.
Improving performance for rendering web pages and JavaScript.
"We're not done", more to come.
Back button for AJAX. Back button shows back the previous AJAX request.

#Mix08

MIX08: Keynote (4)

Laurent Bugnion — Wed, 05 Mar 2008 18:11:00 GMT

Ray Ozzie keynote:

"Many amazing technologies available today, but I would like you to bet on us" Oh really?

Scott Guthrie keynote:

Just launched .NET 3,5, VS2008, IIS7, Windows Server 2008
Scott talks about the new features in ASP.NET 3.5, mentions LINQ
IIS7 makes deployment and administration much better

Dean Hachamovitch (IE General Manager)

Introduces IE8
Cool T-shirt

#Mix08