ANNOUNCER: Ladies and gentlemen, please welcome Corporate Vice President, Microsoft, Dean Hachamovitch. (Applause.)

DEAN HACHAMOVITCH: Good morning. Welcome to MIX11. It’s an honor to be here with the people who build the Web and make it great: developers. When you think about consumer activities and business that people do today with PCs and devices, the Web and its patterns continue to dominate. Whether it’s watching a movie, choosing where to eat, updating friends or figuring out where they are, the importance of HTML5 programming patterns keeps growing, even if the details and specifics aren’t visible to consumers.

Native experiences continue to be the best experiences. On phones, for example, people consistently choose native applications over websites. As developers, we’d rather have native support for important features rather than an add-in or a hack.

Now, lots of things lose in translation. Dante is best in Italian. Shakespeare is best in British. Surak is best in Vulcan. It’s just — some things are just not the same in translation. And the same is true for the Web. The sites that you visit and the sites that you write are better when your browser runs them natively.

Every library, every layer, every abstraction between your site and the device challenge performance, reliability, and the overall experience. Native experiences are the best experiences. Web experiences are the most important experiences. The only native experience of the Web of HTML5 today is on Windows 7 with IE9. To deliver the most native HTML5 experience, we built IE9 from the ground up for HTML5 and for Windows.

We released it globally four weeks ago with a goal of delivering the best experience of the Web on Windows. Now, today we’re going to cover three things. First, we’ll show examples from the development community of sites taking advantage of native HTML5 support. A year ago, many of these experiences would have required a plug-in or not been possible in a browser.

Now, these are live sites that you can run today. Then we’ll look at IE9’s approach, the patterns like same markup and platform previews that are key to real progress moving the Web forward. Then, we’ll start the conversation about what’s next. We released the final IE9 just four weeks ago, so now is a good time for that.

All right, so let’s look at a few real sites. Now, the point of these demos is that a year ago, doing what these production sites do would have required a plug-in. Over the last 12 months, the development community has started taking advantage of fully hardware-accelerated HTML5 and pushing the limits of what’s possible in the browser.

Native HTML5 support in Windows with IE9 makes a huge difference in what sites can do. Now, these are live and in production, not lab prototypes, and you can run them now. So, let’s take a look.

So, here’s a Windows 7 machine with IE9 installed, and you’re looking at my desktop. And you’ll see that there are Windows apps like Outlook and Word, and they’re pinned on my taskbar. Next to them, you’ll see I actually have some websites pinned, so there is Facebook and Hotmail. Now, these are the websites, not an application, but the actual websites. And they support jump lists, Facebook programmed its jump list using some markup and script, and Hotmail also programmed a jump list, in fact, they even have a new mail notification that they can program from their site.

So, what are you seeing here? People can pin your site to their taskbar. You can make it more engaging for them with markup and script.

All right, so let’s look at some of these sites. Now, here’s Foursquare. Foursquare gives you and your friends new ways to explore places. They build a better way, a visual way, to interact with all of their information. So, what you see here is a graphical representation of Foursquare, focused on Mandalay Bay. And you know, it’s the hotel — in fact, I can zoom out and zoom in. You can see all these different things around the hotel. They made a lot of great decisions. I pan and zoom around — this is, again, an HTML5 website that you can run today.

And they made a few fun decisions. The height of buildings represent how popular they are. There are numbers that tell you how many people are hanging out there right now. And they even have flags out in front of places where there are deals.

So, why don’t I just click to go into this building. And you’ll see a lot of people wandering around and see how many people are here now, and there’s a special I talked about. I can look at pictures; it’s always fun. I can go back now, I can open up the box, and I can exit out of here. Now, this is live, and you can run this today.

Now, let’s look at another example. There are these super-creative anime artists. And they do this amazing work, and let me just start this off — what you see here is actually SVG. This is an HTML5 graphics technology, it’s not a video. This is the same SVG that you may have seen in floorplans and technical engineering documents. It’s just fully hardware-accelerated.

Now, this is going to play through, and again, this is SVG, and I can go through here, and I’m pretty sure this is what I’m supposed to click. This is a simplified version right here, this yellow button. And part of their experience is you can customize what the anime is. Now, this is a great way for more creative engagement between the anime designers and all of their fans.

So, I’ll come over here, and I’m going to make the face. I can choose any color. I’ll just choose blue, and I’ll make the eyes green, and I’ll make the hair red, and you’ll see there are a lot of reasons I’m not quitting my day job. And I’ll go through, and now you’ll see the anime play again, but with all of my colors.

Now, this Web technology in IE9 is robust enough for this example, and it’s really ready for your site as well. Now, that’s a great animation, but what about video?

So, here’s what another artist has done with HTML5. This is called director’s cut. And what it is is that it makes custom music videos. It’s a Web page, just remember, this is a Web page. Now, around the outside, these are all the different angles from which Bon Jovi shot their concert. And what you could do is just choose which angle you want in your custom video.

So, I’ll move that one. And then you’ll notice that all these videos advance by the right amount of time, so I can see what the next shot will be. It’s always a good time for the drum solo. There we go. I’ll do a shot like that. And this is a Web page. And I can go through and build up my own video.

Now, this uses HTML5 video and a lot of canvas. The HTML5 video is projected onto a canvas, and you can do all sorts of interesting manipulations with it. Now, I can actually preview the video here, and you’ll see how there’s a progress indicator, and this is what the video will actually be. And I can actually style transitions from scene to scene and share it and publish it with friends. And you can run this today on the Web using HTML5.

Now, here’s the last demo, and it’s Pac-Man. I have to tell you, I love Pac-Man. And so I pinned this board to the taskbar, and we’re going to hear the sounds of the ’80s, using HTML5 audio and full hardware acceleration. Let’s go ahead, and I’ll play. Wee! Now, you’ll notice that there are some exits on these boards. (Video game sounds.) And the boards just keep going.

So, what’s actually going on here other than my mad Pac-Man skills? Well, it’s Pac-Man’s 30th birthday. And for his birthday, Namco made the world’s biggest Pac-Man game. What you can do here is you can actually pan around all these different games very easily. You can pan through the navigator, you can pan there. You can actually create your own games and share them with friends.

Now, all the HTML5 technologies that you’ve seen here are robust enough in IE9 for these scenarios, as well as your sites. And these are live, and you can run them today. They run in other browsers, just a bit slower.

So, I want to give one other example just to illustrate the performance point. It involves a new test drive site called Pinball. And what I’m going to do is I’m going to start a Chrome dev channel build, and I’m going to go straight into Paintball. And what you see here is canvas and canvas global composition mode. Now, these are features that we added in the IE9 release candidate based on community feedback. And what you saw here is Chrome loading up this test drive site, and there are some rendering artifacts.

We’re just going to go ahead and run it. Here’s a paintball gun, and it’s going. Now, while that’s going, I’m going to bring it up in IE9. And you’ll see the difference that full hardware acceleration makes. So, we’ll let this go ahead.

Now, see, hardware acceleration is not just a yes or no checkbox. Much like standard support is not just a yes or no checkbox. And the same with native experiences, fitting into the consumer desktop and having jump lists. So, that’s IE9 showing it, and we’ll come back here, and Chrome is still working on it.

So, look, the point here is that developers deserve HTML5 done right in order for their experiences, for what you build to be amazing.

All right, so now let’s go ahead and look at the patterns that we’ve seen in IE9. You’ve seen some great examples of live sites taking advantage of native HTML5; now, let’s look at the patterns for how we got here and where we go next. Now, many people want a better Web, a faster, more powerful and more native, a more interoperable Web. We want actual progress to that goal, not just activity.

The Web makes progress when developers can take advantage of new technology to build sites that feel and run more like native applications than Web pages across production-quality browsers that use the same markup consistently. That’s when the Web delivers on the promise and the value of standards — when we as an industry deliver on consumer and business HTML5.

So, let’s take a look at some of the IE9 patterns. So, here’s a slide from last year’s MIX. We have a clear commitment to Web standards and the community. Conversations with the community during IE9 led to some great feedback. This updated slide reflects how we acted on community feedback. And you can see we added more standards support like WAS; we developed HTML5 labs to work on more experimental standards.

Now, part of what’s great about working on Web technology is that everyone has an opinion, and any discussion will be kind of like radio shows around sports where fans are calling in, only it’s technical enthusiasts. Instead of calling in, they’re going to blog and tweet. And so given just the nature of the conversation, we wanted to give you an insider view on several decisions that went into IE9.

Native implementations are just better for developers, for consumers, and businesses. The performance and feel of sites, it’s just closer to what people expect from apps. Using compatibility layers to run cross-platform in non-native ways makes browser development easier; it doesn’t always make a better browser or the best experience of the Web.

Browsers that optimize for modern operating systems more directly deliver better experiences. Someone who’s spread too thin across too many different operating systems and too many different versions of too many different operating systems can’t deliver the best experience on any one of them.

Building a new browser for the 10-year-old version of Windows that came with IE6 didn’t make sense. There are too many limitations in the graphics and security architecture.

Now, as Windows 7 usage overtakes XPs in more and more countries, the decision to build for the future of the Web makes sense. Windows 7 usage has passed XP in France, in the U.K., in Australia, and now in the United States. The list keeps growing.

OK, so practical developers when they see a new technology, they ask about stability. They ask, “How much is this technology going to change?” IE9 supports lots of emerging, but not yet final standards. For example, fonts and performance measurement and privacy.

Now, these are stable enough to expect that the same markup will work consistently. Other standards just aren’t there yet like Web sockets, for example. So, here’s a video and for context, in this video one character is reading from blog posts and release notes of some browsers, and the other character is a developer trying to get her work done. Why don’t we roll the video?

(Video segment.)

DEAN HACHAMOVITCH: (Applause.) This is why we developed HTML5 labs. Your feedback was super clear. It’s that, look, these technologies are important, and there are issues to work through, and it’s also important to minimize the random and the churn that developers deal with and the time that developers like you wait reworking sites for browser updates.

OK. Finally, there’s a difference between cadence and progress. And excuse me for the math thing, I promise there are now integrals or matrices or vectors, just bear with me here, right?

You can think about this a lot like momentum because there is more than one factor. What’s important is progress over time. Cadence is just releases per time, how often the updates shift. Increased cadence just means bigger version numbers and more frequent updates of incomplete software. The key factor is how substantial each release is, how much progress each release makes.

Cadence is similar to other measures that most folks have moved on from, like Acid3. In fact, for the next version of Internet Explorer, we will change the cadence of platform previews to be between 8 and 12 weeks apart rather than 8. It’s just more effective for making real progress with developers and the community given the time it takes to work through the issues that you report. Ultimately, the point is progress in making the Web better.

So, we’re about three weeks into the development of IE10, and this is a good time to start sharing information. So, to help demo it, please welcome Steven Sinofsky, the president of Windows and Windows Live at Microsoft. (Applause.)

STEVEN SINOFSKY: Hi there, Dean, how’s it going? Woo! Woo! OK. So, we have some exciting stuff to show; I think we’re going to show the developer preview of IE10.

DEAN HACHAMOVITCH: OK. So, I’m going to be running a Chrome dev build and I think I’m on audience right is my screen, and you’re —

STEVEN SINOFSKY: Over here. OK, so this is a platform preview for IE10. And so we’ve got some new demos to show you and to show you some of the new technologies here. Of course the first thing we had to do is update the fish.

DEAN HACHAMOVITCH: Absolutely.

STEVEN SINOFSKY: So we’ve got a new fish update. So, let’s go to the new fishbowl benchmark. And this is a much prettier fish thing, going to go ahead and hide that. And let’s build this whole demo from scratch. So, now we’re using a whole bunch of new CSS work in HTML5, transitions, composition, it’s all some pretty slick stuff. So, first let’s put our frames-per-second counter up there because we love to count this.

So, first we’re going to add some fish. So, here are the fish swimming around, nice little translucent background, things like that. Let’s go ahead and add some water.

DEAN HACHAMOVITCH: OK.

STEVEN SINOFSKY: So water, this is pretty cool. This is actually an HTML5 video that’s the background of the fish. In fact, you can see it’s someone’s swimming pool. There’s, like, the filters in the background and stuff like that.

So, now let’s frame this and maybe mask it a little bit. So, it’s starting to look like a little bit of a fishbowl there. We’ll add a background and a foreground. And keep an eye out up here, you can see we’re going to go ahead and add some shine and maybe a little bit of shadow.

DEAN HACHAMOVITCH: Can we slow down here because my —

STEVEN SINOFSKY: Oh, sorry about that.

DEAN HACHAMOVITCH: OK.

STEVEN SINOFSKY: I’m going to keep going, though.

DEAN HACHAMOVITCH: OK.

STEVEN SINOFSKY: So here’s some audio. So, now we’ve got some audio. And just to top it off, we’ll add a logo. So — OK —

DEAN HACHAMOVITCH: You always get the good demos.

STEVEN SINOFSKY: Yeah, I know, that’s how it works. I’m going to go ahead and add some more fish. I’m not sure you should go ahead and do that.

DEAN HACHAMOVITCH: A lot of fish here at Mandalay Bay. I don’t want to put any more fish, the fish police will show up. Let’s take a look at some other demos, how about that?

STEVEN SINOFSKY: OK, why don’t we try CSS3 multi-column here?

DEAN HACHAMOVITCH: OK. So, CSS3 multi-column.

STEVEN SINOFSKY: There we go. So, this is going to show some new features for just doing columns. Column layout like you would in a newspaper or something like that.

DEAN HACHAMOVITCH: So we’ll show a tweet and —

STEVEN SINOFSKY: So these are not real tweets. This is just a mockup; we should just tell everybody that.

DEAN HACHAMOVITCH: They were someone’s tweets.

STEVEN SINOFSKY: They were someone’s tweets at some point.

DEAN HACHAMOVITCH: They’re not live.

STEVEN SINOFSKY: They’re not live tweets, OK. But what’s neat here is we’re going to go ahead and just keep showing the tweets, highlighting them and showing multiple ones. And what I think you want to notice is take a look across the top. Now, part of the features of CSS columns is that they should flow really nicely and really not clip and line up really well. So, go ahead and auto show the tweets, and they’re just going to start flowing through.

DEAN HACHAMOVITCH: Yeah.

STEVEN SINOFSKY: And how are you — you’re sort of clipping them at the top there.

DEAN HACHAMOVITCH: It’s not quite clippy, but it’s —

STEVEN SINOFSKY: Clippy? Uh oh, bring on Clippy.

DEAN HACHAMOVITCH: All right, so we’re going to —

STEVEN SINOFSKY: So we’re going to cycle the columns. And so now this just shows that having multiple layout for this. And you can still see that we have these odd layout challenges there. And so the importance of same markup and really implementing the standards correctly is something that’s going on here. So, it’s pretty cool to just keep showing that. Why don’t we go and keep going? Showing some other ones —

(Crosstalk.)

STEVEN SINOFSKY: — griddle? Is that what we’re going to do? Yeah, let’s do griddle. OK, so griddle, this shows the CSS Flexbox. So, this is pretty cool. So, this is one where you want to do an N by M layout of some regions in your screen. And one of the neat things about this CSS is that it allows you to resize the window. So, now as I resize, wow, you’re not doing very well over there —

DEAN HACHAMOVITCH: This is kind of sad right now.

STEVEN SINOFSKY: But as I resize, you see it shows the grid in a correct way. In fact, you keep resizing it, and you see how it changes almost to, like, a mobile view there.

DEAN HACHAMOVITCH: That’s really cool.

STEVEN SINOFSKY: So pretty cool, so —

DEAN HACHAMOVITCH: All right, so we’ll go back and maybe show some ES5 Strict mode.

STEVEN SINOFSKY: OK.

DEAN HACHAMOVITCH: Strict mode, try strict mode.

STEVEN SINOFSKY: OK, so a lot of the work in the platform preview behind the scenes is also just to improve across-the-board standards. So, ES5 Strict script is really just a way of tightening up the language, making sure that when you develop your site that you handle a bunch of edge conditions and boundary cases and stuff. So, we have a whole bunch of code samples in the platform preview like, for example, undeclared variables.

DEAN HACHAMOVITCH: Got it.

STEVEN SINOFSKY: And so that’s a pretty common mistake. You know, you’re used to just using variables. And so when you run this code in Strict mode, of course, you’ll get an error because you’re using an undeclared variable. And so you can see not the most exciting, no fish, no swimming, but it is really —

DEAN HACHAMOVITCH: Great for developers.

STEVEN SINOFSKY: Great for developers.

DEAN HACHAMOVITCH: OK. Maybe the thing that we could share right now is CSS gradients. Now CSS gradients are just beautiful. It’s a way to make your Web pages —

STEVEN SINOFSKY: I want to interrupt your demo. It looks like you’re trying to do a demo, there’s that Clippy thing again, you know, just for fun, it is actually the 10th anniversary of Clippy retiring today. (Cheers, applause.) Ironically, there’s only one person in the room who worked on Clippy, and it’s not me.

DEAN HACHAMOVITCH: Thanks, Steven. (Laughter.)

STEVEN SINOFSKY: OK, but I was there too. All right, but actually, you mentioned that we’re going to show something really beautiful in HTML5 with CSS gradients. I actually just wanted to show you a laptop that’s available now for order on Windows 7.

So, this is a newly released laptop; you can pre-order it; it’s available online all over the place. And I just wanted to show you this one because it is actually beautiful.

This is the Samsung 900 series. And it’s running Intel’s latest core processor. It has HD graphics, so all of the graphics that we’re showing work super, super well on this machine. It’s just over a kilogram, and it’s just 0.6 inches thin and has super-fast standby and resume. It’s really, really cool. So, this is a great new Windows 7 laptop that’s available and just wanted to make sure when we talk about beautiful things, people see that we have some beautiful hardware to run the platform preview on as well.

DEAN HACHAMOVITCH: All right. So, we’re going to transition back from this beautiful thing back to CSS gradients. So, let’s go to the gradient maker.

STEVEN SINOFSKY: OK. So, gradients are a huge pain in the neck for everybody.

DEAN HACHAMOVITCH: Right.

STEVEN SINOFSKY: You’re always trying to do these 1-pixel-wide things and have them work, and every time an artist wants to change it, it’s back to Photoshop and all this. So, CSS has these gradients sort of built in.

DEAN HACHAMOVITCH: Right.

STEVEN SINOFSKY: So in the Windows preview, we’ve gone and implemented that.

DEAN HACHAMOVITCH: So why don’t we actually show them a gradient in action.

STEVEN SINOFSKY: Wee!

DEAN HACHAMOVITCH: Hey, that’s my line. Yellow. All right, so we have got that and we can choose a different kind of gradient —

STEVEN SINOFSKY: I’m sorry, I’m just adding more stuff; you keep talking.

DEAN HACHAMOVITCH: I’ll just keep talking here; it’s just like work. OK, so circular — well, you know, I’m going to add a stop too then.

STEVEN SINOFSKY: But all of this you can just change by changing the markup pretty straightforward.

DEAN HACHAMOVITCH: Right.

STEVEN SINOFSKY: There are different types of shapes, and you can obviously change the gradients and things like that.

DEAN HACHAMOVITCH: Right. Why don’t we take a look at the markup down here. And you’ll see that there’s actually a lot of different markups. Now, the point here in showing this markup is that, you know, first, all the browsers today use a vendor prefix here. And, you know, that’s totally fine for where this emerging standard is in the process.

Developers have even more extra work on top of that. They need to hand different markup to different Web kit browsers because, well, there are just different Web kit implementation out there. So, this is kind of like the whole borders and radius thing that we did last year. I mean, why don’t we go back and take a look at that.

STEVEN SINOFSKY: So we’re going to go back to the old borders and radius thing, huh?

DEAN HACHAMOVITCH: Right. So, I’m going to dig up borders and radius — and, oh, you’re ahead of me, so let me start getting over there, and we’ll make it dotted, a thicker border width, and we’ll animate it in. Wow, OK, so kind of the point here is that it’s — you know, the borders still aren’t quite right across other browsers. So, you need to use different markup just to get the borders there and actually the borders you end up — the output you end up with just isn’t the same either.

STEVEN SINOFSKY: So there’s still work across all the browsers where they’re trying to get up to speed on the standards stuff, but there was something interesting I wanted to just point out about this particular machine because I was running the IE10 platform preview on a machine running the ARM microprocessor.

So, we’ve been showing some cool demos on Intel, but this is also the platform preview running in our labs on an ARM machine out back there. And you can see it says right there, processor, ARM family 7, model CO9.

DEAN HACHAMOVITCH: Revision 100.

STEVEN SINOFSKY: So we’re also hard at work on IE10 on some forward-looking things.

So, what I wanted to do is take a minute and make one more announcement about the future. I want to really quick ask everybody to mark their calendars for a save the date. And so we’ve got a save the date coming up with the next Microsoft Developer Conference on September 13–16, 2011, in Anaheim, California, will be our next developer conference. And we’re super excited to tell everybody to save the date today. Obviously, it’s going to sell out really quickly, and so in the next few weeks, or in the future, we’ll open up the reservations and make sure that you get your spot. We have a lot of exciting things to talk about there. So, definitely save the date, September 13–16, 2011, in Anaheim.

So, all the things that you’re hearing about today, HTML5 and the power of the Web and same markup and all those kind of things are going to be just as important in the preview of things that we’re going to show at the developer conference in September. So, definitely save the date, HTML5, we’re pretty excited. So, thank you for giving me a chance to show the super-exciting stuff and the platform preview.

DEAN HACHAMOVITCH: All right.

STEVEN SINOFSKY: Thanks, everybody. (Applause.)

DEAN HACHAMOVITCH: Let’s look at just one more demo. Now, the point here is how much more important being native will become over time. So, here I am, again, at Windows. I’m going to start this Chrome build. What you see here is HTML5 video and, of course, the page is projecting the HTML5 video onto a canvas so it can be manipulated.

Now, what you see here is a CSS3 transition to resize the video as it’s playing and kind of move it to the back of the page.

Now, all around the outside here in the background, you see SVG animations. OK. Now that this is at the back of the page, I’m going to bring in four more canvases. So, you see these four additional canvases split out from all around the video. And the same video is being projected. So, now we have five HTML5 videos being played at the same time on five different canvases.

Now, I can pan around. You can see this is kind of a 3-D box thing, which is kind of neat. And these videos are independent. I can click here to fracture and then restore it. I can click over here and fracture this one independently. And the performance here is OK, right?

So, let me put that away and try it in IE10. Here you see the SVG was playing a little bit faster. Here’s the video. Now, we’ll see the same effects. The CSS3 transition was a lot smoother and faster. Now the 3-D effect will come in, this is the CSS 3-D transform that’s really fast. You’ll see that the panning is a lot smoother, and the SVG is playing better, the video isn’t glitchy, the fracture and restore is a lot faster.

So, this is an example of same markup, hardware-accelerated. Now, it’s not really exactly the same markup; this page is just a little bit different. There’s another video down over here. And it’s got the same markup, just copied and pasted. So, you’re going to see that slide, and again, it’s just as smooth. The videos come out; I can still pan; the SVG is cranking. I can fracture this and restore it. In fact, we’re playing two of these at the same time.

And if you notice, the scroll bar is actually an audio mixer. So, there’s Katy Perry. That’s a developer talking. And that’s a blend. (Applause.)

The other thing to point out here is that IE running 10 of these videos across 10 different canvases is actually using about 10 percent less CPU than the other browsers. And, again, that’s just another example of HTML5 running natively.

So, just to wrap up here, browsers that run natively with full hardware acceleration deliver website experiences that feel and run more like applications than pages.

All right, so let’s just recap these demos. There’s a new fishbowl. There’s CSS3 multi-column layout and CSS3 grid layout, CSS3 flexible box layout, ECMAScript 5 Strict mode, CSS3 gradients, CSS3 transitions, and CSS 3-D transforms. OK, I promise, no more demos.

All right, so what have we seen today and what’s next? IE9 delivers native support for HTML5 on Windows. You and your site can take advantage of that today and deliver significantly better browser experiences. We also look at how IE’s approach to new standards and regular updates results in less churn and more progress for the Web. And, third, we took an early look at IE10 and how it makes progress with native HTML5 support for more Web standard technologies.

There is actually one more thing to mention. The first IE10 platform preview is available for download now at IETestDrive.com. (Applause.) You can get the platform preview and try the new TestDrive site and samples and about 500 new tests submitted to standards bodies.

You’ll also find feedback tools so we can keep the conversation with the development community going. We’re looking forward to your feedback, thank you. (Applause.)

ANNOUNCER: Ladies and gentlemen, please welcome Corporate Vice President, .NET Developer Platform, Microsoft Corporation, Scott Guthrie. (Applause.)

SCOTT GUTHRIE: Thank you. Well, Dean just covered some of the great improvements we’re making to the browser. I’m here today now to talk about some of the great work we’re doing on the server.

It’s been a great year. We’ve shipped a lot of products over the last 12 months. In fact, today is the one-year anniversary of the release of Visual Studio 2010 and ASP.NET 4. Since then, we’ve shipped several updates to our Web stack, including ASP.NET MVC3, WebMatrix, IIS Express, and the new Razor syntax. And we think we’ve come a long way with the built-in capabilities with our Web server technology.

But you can never build in every feature a developer needs, and help with that earlier this year, we sponsored the creation of a free, open-source package manager for .NET that we call NuGet. NuGet makes it easy for developers to find, download and use open source libraries within Visual Studio, and it’s been fantastic to see how the community’s already contributed thousands of packages into the NuGet gallery.

Here’s just a small sampling of a few of them that you can now easily download using it. In addition to making it easier for developers to find and use open source libraries, we’re also now actively contributing code into open source projects. Last year at the MIX conference, John Resig, the founder of the jQuery Project, joined me onstage and talked about how Microsoft would be contributing code to jQuery going forward.

Since then, we’ve sponsored and contributed several jQuery plug-ins. These plug-ins work with all server-side frameworks and we think make Web development better for everyone.

Earlier this year, we also shipped ASP.NET MVC3, which introduced a ton of new capabilities and integrated both the NuGet package manager, as well as these jQuery libraries into all new projects. We think it’s a great release, with it a lot of features.

Today, though, I’m excited to announce that we’re refreshing ASP.NET MVC3 with a Visual Studio tooling update that’s bringing even more improvements. Some of these improvements include new HTML5 project templates that enable you to create sites using semantic-based HTML5 markup and take advantage of HTML5 capabilities from the beginning.

We’re also shipping as part of this update new updated versions of our jQuery libraries, both jQuery core, as well as jQuery validation and jQuery UI. We’re also pleased to announce today that we’re going to be shipping Modernizr, which is a free, open source JavaScript library that makes it easier to work with HTML5. One of the cool things about Modernizr is not only does it enable you to work better with HTML5, but it also includes capabilities so that you can use semantic HTML5 elements and tags within your pages while still using standard CSS techniques to style them on older browsers that don’t yet support HTML5. This allows you to start taking advantage of HTML5 immediately without having to sacrifice browser reach.

We’re also, as part of this update today, shipping Entity Framework 4.1 as part of ASP.NET MVC3, and I’m excited to announce that Entity Framework 4.1 is shipping officially today. This works with all .NET projects. (Applause.)

A few people in the audience looks like have actually already used the previews of it. This includes the Code First capability that — something a lot of people actually enjoy, and it’s added by default now to all ASP.NET MVC3 projects.

Also as part of today’s release, though, we’re adding some new scaffolding tooling support inside Visual Studio as well. And the great thing about this scaffolding support is it enables you to very quickly generate both controllers and views off of EF models, enabling you to very quickly build data-driven sites in a fraction of the time.

Enough talking, though, what I want to do now is actually have us write some code and show how new updates work in action. To do that, I’d like to bring someone who’s both smarter and far more attractive than me onstage to write that code. Unfortunately, that person wasn’t available, though, so instead, here’s Scott Hanselman. (Laughter.)

SCOTT HANSELMAN: (Applause.) So mean. So, mean. Hi, everybody. My buddy Rob Connery and I have this podcast that’s called This Developer’s Life. It’s an homage to a popular public radio show called This American Life, and we talk about developer issues and things from kind of an emotional point of view. And we decided that we needed an admin site and then a front-end site to manage our episodes of our podcasts.

So, first, I’m going to build the administration site in ASP.NET MVC, and then I’ll build the front end later in WebMatrix. This is what the front end is going to look like, and here’s the application that we’re going to build right now to manage both the episodes and the music for This Developer’s Life.

Bring up Visual Studio, and I’m going to say new project. And we’re going to create a new ASP.NET MVC application to create the back end. Except I’m going to be using the new ASP.NET MVC with tools update that came out today. This dialog box is a little different. We’ve got a new intranet application that is a default project template for Windows authentication, and we’ve got this new checkbox here that says, “use HTML5.” So the new project templates in MVC, when you check that box, will use HTML5 semantic markup.

OK, and we’ll bring up our new ASP.NET MVC project. The default project is coming in in Solution Explorer. I’m going to go ahead and just run the default so we’ll see what it looks like initially. Build and run our application, and this is the default MVC application. It’s a little bit different because it uses HTML5 so we’ve got some little rounded corners on our tabs. We’ve got those nice URLs that ASP.NET MVC developers are used to using lately.

And if I do a view source, you can see we’ve got the HTML5 doc type, we use things like heading, nav, section, footer. It’s a good-looking, clean page using HTML5.

Also new in the ASP.NET MVC tools update is NuGet packages that are pre-installed. So, when you say file, new project, you’re getting jQuery UI also Entity Framework 4.1, which was released today, including the new Code First technology. And as Scott said, we’re really pleased to announce that we are shipping Modernizr in the ASP.NET MVC3, so that means another open source piece of software shipping with Visual Studio.

Modernizr is great because it allows you to write HTML5 and CSS3 today, but it’ll still look OK on down-level browsers, so you don’t have to sacrifice compatibility while still working in HTML5. So, big thanks to Paul Irish and the folks at Modernizr for a great, great JavaScript library.

Now, the Entity Framework that was released today, I’m going to use that to create my database. I could do it model first, database first, but I’m going to use the new Code First to go and create my podcast model. I’ll say add class. We’ll make a podcast. This is going to be using POCO, plain old CLR objects. I’m not doing anything in the database right now; I’m just going to create some classes like episode because our podcast has episodes, and episodes have unique IDs, and episodes have titles, and episodes have the date that they were published, and the rest of this is really boring. (Laughter.)

And then our podcast, This Developer’s Life, is really known for its music because my friend Rob always adds a lot of really cool open source and Creative Commons music. So, I’ll just make a music track class as well.

So, you see that there’s a relationship there between episode and music tracks. Episodes have music tracks, and a music track is associated with an episode. So, we’re creating our entity model here that will eventually turn into the database.

I can also annotate my model by adding things like required and bringing in this data annotations name space. So, here I’m saying that the title is a required part of my entity model.

Now, I’m going to go and create out my controllers for ASP.NET MVC using the new add controller tooling that’s included in this tools update. I’ll create an episode controller, and I’ve got choices within the templates, and that dropdown is extensible. I’m going to pick a controller with read-write, full CRUD support, create, read, update and delete. I’m going to make an episode, and we’ll make a new data context that we’ll call podcast context. And then we’ll be using the Razor syntax to create our controller.

I’m going to hit add and on the right-hand side in the Solution Explorer; it’s going to start warming up and bringing in controllers, views, context for my episode, looking at that model, it’s just created the episode controller using the podcast context with details, create, edit, delete, as well as create and index all the views that I’m going to need for full CRUD support. And even though, of course, these were generated, I can come in here later and update them or even change them and customize them myself.

Let’s go and create a music track controller. Add controller, music track controller. Picking the music track, and we’re going to add that music track to the podcast context. I hit add and, notice where episode is, now comes in music track.

So, using just the information from my podcast model, I’ve created views and controllers for both episodes and music tracks and the way that they relate to each other.

Now, I haven’t said anything about databases or connection strings or anything like that yet. Even though I’m talked about Entity Framework, we haven’t talked about the database.

I’m going to use NuGet to go and get SQL Server Compact edition. I’m going to say add library reference, and we’re going to go online to the NuGet site and then I’m going to go and search for SQL Server Compact edition. And you can see that this is a package that has some dependencies. I’ll hit install and watch that right-hand side again when I hit accept, references are coming in and all the packages and then the packages that are dependent on, and I’ve just installed SQL Server Compact plus Entity Framework support within my people.

Now, you see this folder here that says app data. I’m going to right click on that and say open in Explorer. And then I’m going to use my favorite Windows 7 ninja move — and put that over there.

That folder is empty right now. We’ll go ahead and run our application. You have to do the sound effect yourself. I’m going to visit the episode controller. And a SQL Server database file just got created for me automatically.

I’ll go and create an episode. Hit create. I’ve got details, edit and delete for my episode. I’ll switch back into Visual Studio and in this app data folder, there’s my SQL Server database file. If I double click on that Compact edition database file, I’ve got support within Visual Studio and SP1 where I can open up, and there’s the tables that were created, as well as the columns.

I right click on episodes and show table data, there’s the episode I just created; all that tooling is built in, so you can talk to both SQL Server and SQL Server Compact within Visual Studio.

Now, you remember that required attribute? That required attribute was expressed in one place in my Entity Framework Code-First model, and that turned into a non-nullable column in my database. But it also turned into validation rules on the client side.

So, both jQuery validation and MVC know that it’s required and the database know that it’s required. So, you’re getting nice validation expressing it in one place with metadata using Code First.

Now, we’ll switch over to music track. We’ll make a new music track. Notice this dropdown here that says “episode.” The scaffolding noticed the relationship between episodes in music track. Not only was that database created in SQL Server Compact with a primary relationship between episodes that have music tracks, but also the scaffolding noticed that and created a dropdown, looking up those episodes for me and allowing me to create a music track right there.

So, in just about eight minutes using ASP.NET MVC3 with the new tooling update, along with Entity Framework 4.1 Code First released today, NuGet and jQuery, you can build all of this today. We’ve got a nice little administration for This Developer’s Life podcast. Thank you. (Applause.)

SCOTT GUTHRIE: Well, Scott just showed you how quickly you can build a data-driven application using ASP.NET MVC3 and the Entity Framework. You saw a handful of some of the new features that we’re releasing today as part of the ASP.NET MVC3 tooling update and how productive they can make you when you’re doing common tasks. I’m really pleased to announce that this update is now available for download. (Applause.)

Let’s take a look at another new free tool from Microsoft that you can use for Web development. It’s called WebMatrix and includes everything you need in order to build websites. It makes it easy to start with a new website from scratch or you can actually start it from an open source application or template. And it supports both ASP.NET and PHP, and includes a built-in Web server, integrated database, SEO optimization tools and built-in Web publishing support.

What I want to do now is hand it back over to Scott. He’s going to go ahead and show you can build a front end to This Developer’s Life using it.

SCOTT HANSELMAN: All right. Now we’re going to use WebMatrix, and we’re going to create that front end that we saw before. As Scott said, I could go and pick a site from a gallery or from a template. In this case, the prebuild template I’m going to use will be just the empty site, and we’ll create the front end for This Developer’s Life.

We’ll hit OK. By default, I don’t have anything here, but what I’m going to do is I’m going to fire up the administration page. And within here, this is how WebMatrix uses NuGet so I can bring packages down from here. I’m going to go up to our partners at Template Monster. And at Template Monster, I can go and buy templates — I’m going to pick this one because it looks awesome. Hit buy, 62 bucks, that’s cool, I lost 62 bucks yesterday, and there’s my phone number, good deal. Don’t call me.

So, I purchased a template now, and the way that they deliver is they’re giving me a private repository for those templates that I’ve purchased. So, now I’m just going to take that URL from Template Monster that has my purchases like the template that I just bought, and I’ll come over into the Web page’s administration.

We’ve got the regular NuGet package sources, but I’ve also got one for Template Monster. So, I’m going to paste in that delivery URL and say add package source. Now, if I go back to package manager and switch to the different source, I’ve got my purchases, including the template that I just bought. I’ll hit install, and we’ll bring that template into WebMatrix.

So, we successfully installed that template. Come back over here and hit files, and then here’s all of the template code, the scripts, and the content that I would need for my site.

Now, a minute ago, of course, we made that database. So, in the 30 seconds that Scott was talking, I just happened to fill out the database with additional information. You didn’t see me move, but it was really fast.

So, now I’ve got my shows and my database entered in from my administration site. I’ll come back, and from my template, we’ll fill in that information. We’re using the Razor syntax inside of WebMatrix, and Rob and I have been having a lot of fun with this. It’s a really, really enjoyable way to write code because you’re spending time switching back and forth between code and HTML in a really, really clean way with the Razor syntax.

I’m going to open my database, say select star from episodes, and then I’ll just kind of sprinkle around some of my code like I want the title here. And we’ll put the title here. And the alt text, and that image is actually going to end up being an image from the database. And description. I think we called it summary. And then the link, we’ll have it so when you click on a picture, we’ll send that off to an episodes page. And we’ll link off to episodes. That doesn’t exist yet. Episodes is hard to type. We have a short URL that we use for that. OK.

And then the episodes, conveniently enough, was written earlier. The episode is going to be a single call that grabs my episode and shows details. And that uses some helpers that we’ll talk about in a moment. I think I’ll also go and grab my layout because this was a template, and we’ll change this to This Developer’s Life — “developers” — cannot spell. And we’ll hit run. Cool.

So, then our site comes up. We’ve got the nice jQuery animation in our template. I click on one of these. Switch back over to my default. I said episode instead of episodes. Save that. Come back over to my site and run it. One of the nice things about Razor is that you can just make a change and hit refresh and make a change and hit refresh. So, often when I make mistakes, I’ll have my site on one monitor and WebMatrix on the other, make a change and hit refresh.

Here’s my episode page. I’ve got my podcast player, but I want to sprinkle a little bit of social on this page. There’s not enough social going on.

So, on the episode page, I’m going to use some helps, like here’s my podcast player helper. There were a number of other helpers that came with the template, like Facebook and Twitter and Disqus. Those helpers enable me to create really cool experiences really quickly.

I’ll just come down here at the bottom, and I’ll say Facebook dot like button. And we’ll say — we’ll put Disqus comments. I know how Rob loves to hear comments about the show. So, Disqus is hard to spell, show comments. Come back and I hit refresh. So, now I’ve got Facebook recommendations and comments on my podcast.

And then let’s go back to the home page. I’d like to have it so people can tweet about each of these shows. So, let me switch back and go to default, and I’ll put the tweet button right here. Twitter dot tweet button. All right. Switch back. Hit refresh. Now, it’s looking nice.

Now, we’ve got a list of episodes, we’ve got tweet buttons, we’ve got Facebook, we’ve got Disqus, all using helpers that came down from NuGet — it’s pretty awesome. But you know, it wouldn’t be a site if it didn’t have site pinning and HTML5 features and lots of cool IE9 stuff.

So, why don’t we switch back over to our administration console where we get our packages? I’ll login with my highly secure password, and I search for podcasts. Maybe someone has created a jQuery helper to make my life easier. How convenient. (Laughter.) So helpful, the open source community.

So, I’m going to go and install this jQuery helper for IE9. I just brought that down. And the scripts that I need for my IE9 podcast player are here. I’m going to uncomment out a conveniently placed line of script to include my jQuery plug-in.

And then I’ll switch back to the default. This podcast player is going to need some audio. So, I’ll use the HTML5 audio tag, and I know that we included the download URL. So, each episode has an MP3, and we’re going to use the audio tag rather than a plug-in to manage that.

And then at the bottom here, I’ll write a little bit of jQuery. We’ll say script, and then let me see if I can remember how to do jQuery open Resig function, close Resig, open Resig, we’re going to take all of our articles that have links, and we’re going to turn those into an IE9 podcast player. All right. Looks good.

Let’s go and run our application now, and we will grab our glasses. We’ll drag it down to the taskbar. So, now we’ve got an IE9-pinned site here.

I right click, and we have all the episodes available on our pinned site. But even better, if I hover over it, I’ve got podcast buttons so people can start listening to our podcasts right away from the site there, and that was all created with a jQuery plug-in, the audio tag, all in IE9, pinned to the taskbar, which is pretty sweet, if I may say so myself.

Now I’m going to hit publish. (Applause.) Rock on. Thank you, thank you. Now I’m going to hit publish. We’re going to use Web deploy to publish. This was set up on our server at our shared host. You’ll find many, many hosts that have Web deploy set up. I’m just going to click import publish settings, and we’ll pick the This Developer’s Life settings with the server and information that I need to go and deploy my site to www.ThisDevelopersLife.com.

We’re going to publish that information out. It tells me what’s available on our host. It’s going to send out our database and our stuff, and now we’re starting to publish. We’ll hit ThisDevelopersLife.com, going to fire up our new site created in WebMatrix using SQL Compact Edition, and I would encourage you to check it out as well.

So, what we’ve done is created an administration site using ASP.NET MVC3, and the tools update over in MVC we used C# and Razor and SQL Compact edition. And then we went into WebMatrix, and we used C3 and Razor and SQL Compact edition. So, you see the diversity of styles and Web development that’s all based on the same underlying Web platform. And I don’t know about you, but I will say that I have had more fun programming on the Web platform in the last year than I ever have before. And I would really encourage you to have a blast as well. Thank you very much. (Applause.)

SCOTT GUTHRIE: Thanks, Scott. One of the things that made Scott so productive in that last demo was he was able to use a bunch of libraries that helped him take advantage of and integrate his site with others on the Web. These can also be easily downloaded using NuGet and actually work with all ASP.NET projects. Here’s just a sampling of a couple of the popular ones that are already available within the gallery.

Now, WebMatrix allows you to start with a blank site or starter CSS template, like Scott just demonstrated when he built This Developer’s Life. But it also allows you to download and create new sites using popular open source application frameworks like WordPress, Drupal, Umbraco and DotNetNuke. And the tool basically makes it really easy for you to browse a gallery of all these applications, select them, sets up everything you need in order to be productive with then.

Orchard is a free open source project that we’re contributing code to that enables you to easily integrate CMS and blog functionality into your ASP.NET sites. It’s built using ASP.NET MVC3 and the Razor syntax that was shown here this morning. It can be easily customized using both WebMatrix, as well as Visual Studio. This week, the Orchard team is shipping a new release of it, and I’d like to invite Drew Robbins onstage, actually, to show it off in action and what you can do with it. Thanks, Drew.

DREW ROBBINS: Thanks, Scott. (Applause.) So over the next few minutes, we’re going to use Orchard CMS to create a flower store online. And why a flower store? Well, it’s spring and people are planting flowers, and so it’s something we need to get online quickly so we can not miss the opportunity. Orchard CMS is going to let us focus on the business value rather than worrying about building all the infrastructure for our site.

So, we’re here back inside of WebMatrix. Earlier, you saw Scott use site from template to create his site. This time, what we’re going to do is choose site from Web gallery. And site from Web gallery actually has all of the different great open-source applications that are available inside of our Web application gallery. And you can see that there are quite a few.

And so as we scroll down, we’ll find Orchard CMS and we’ll give the site name of florist and click next. And it’ll begin to download Orchard CMS. In fact, it will also download any dependencies that are required to run Orchard CMS on our local machines. And we want to run it locally first so we can customize it before we publish it to our hosting provider.

So, we’ll go ahead and execute this. And the first thing that Orchard will do is ask us just a few questions about our site. So, we need to pick a name for our site. So, Scott earlier built This Developer’s Life, I’m sure Scott needs flowers in his life, so we’re going to go ahead and build This Developer’s Florist.

And we’ll give our admin a password. We’ll scroll down and we can choose between the built-in storage or SQL Server Express. And then we can choose a recipe and click finish to start the setup.

Now, what a recipe is is just a configuration of Orchard. We chose the default configuration, there’s also a blog configuration and then there’s also a minimal configuration. And we expect the community will build more of these recipes over time for the popular scenarios that Orchard CMS will be used for.

So, we have kind of the default look and feel of the Orchard site here. And the first thing we want to do is make our site look the way we want it to look to our customers.

And so let’s log into the dashboard. And the dashboard is where you can set all the configuration settings for Orchard, you can manage your content, and you can add additional functionality.

And so we’re going to go to themes and apply a theme to our site. And Orchard has a great gallery of themes that you can browse through and download and choose for your site, but we want to do something a little bit different here. We’re actually going to use a tool from a great company in Portugal called Byne (ph). And they have this tool called Byne Tuning that you can use to generate your own custom theme.

And so we’re in the Byne Tuning tool, and we can choose a starter theme, and we’ll choose Orchard as what we want to generate. We’ll open up their customization panel, and you can see we can change the palette colors, we can click customize and change the background and we’ll choose this nice floral pattern. And when we’re doing customizing our theme, we can click submit my request, and we enter our information and Byne Tuning will generate this theme and send us a link to it.

I’ve already done that earlier, so let’s go back into Orchard and choose the theme from our local storage here. So, we’ll choose the generated theme. We’ll click install. And that will upload the theme into Orchard, and then we can just go ahead and set that to the current theme, and then we’ll go back to our site and you can see in just a few seconds that we’ll have a dramatic change in just the appearance of our site.

Now, what we have here is just the default content that — the example content that’s with Orchard, but we don’t have our products represented. So, the next thing we want to do is represent our products on the site. And to do that, we’re going to go back to the dashboard and we’re going to go to modules. And modules are just additional functionality that you can install into your Orchard CMS site.

We’re going to install a couple from the gallery, and there’s quite a few that are in the gallery that you can choose from. They’ve been contributed both by Microsoft as well as the community, and today we’re going to use one that is called e-commerce, and we’ll search for that. And all this is is just a simple example module that will bring a product content site into Orchard.

And then we’re also going to use a new module from Amazon.com retail services that allows you to integrate checkout by Amazon into your site so that people can actually pay us money for our products. So, we’ll install that as well.

Now, there are a few new things that have shown up on the left side of the dashboard. You’ll see the new product content site, and that’s what we’ll use to actually represent our flower in the database. But first, let’s actually create a list. So, we’ll call our list “seeds.” We’ll say that it’s going to contain product and we’ll tell it we want to show this on the main menu of our site, and we also want to provide a quick link in the dashboard for people to get back to the list and manage the products.

So, you can see now we have the seed list on the left side here. I can create a new product and we are going to call this product pink flower. You’ll notice I know a lot about flowers, which is why I’m so specific here.

And so we’ll say that this flower is — well, it’s pink. And we’ll give it a price of 12. And then we want to pick some media to represent our pink flower. And so we want to upload some pictures here. And so we’ll create a product folder to hold our pictures. And then we’re going to use a really neat convenience feature in Orchard that allows us to upload a series of image that are packaged into a zip file.

So, we’ll open this and upload. And then we’ll scroll through our images here and we’ll pick this flower that’s kind of pinkish. We’ll insert that, click save, and great, now we have a flower that is represented in our product list here.

To get the rest of the flowers into our database, I’m going to actually use an import-export functionality in Orchard that allows you to export content from one site and then import it into another. This is great for those who will use Orchard CMS over and over for different clients or different websites that you might be building.

And so I’ll choose an import file and import our products into the site. And great, so let’s go back to our site and see what happens. So, we’ll click on your site and we’ll click on seeds, and you’ll see now I have a list of products here that people can begin to browse and choose which flower products they want to purchase.

But they don’t have a way to purchase it yet, so let’s go back into the dashboard and implement that part. So, we have the Amazon functionality installed and we have this product content type, but we really need to connect the two. So, let’s go to this feature called content types. And what content types allows me to do is customize all the different content types that are represented in the Orchard database. And this is a really powerful way to combine different pieces of functionality into something that you want to use on your site.

And so here I have the different content parts that make up a product currently. I can add a new part, and so I can add the checkout by Amazon button. I can also go and add comments or tags or other pieces of functionality that I want to be part of my product. Click save and now if I go back to my site again and click seeds, you’ll see now I have the checkout by Amazon button on my site.

In fact, this is completely working. So, I’ve already gone out to their seller central site and registered as a seller. And so I can log in here and I can go ahead and place my order. And if you’ve ever ordered anything from Amazon, you’re probably familiar with these screens. So, I place my order and it takes me back to my site and says thanks for ordering.

So, that’s great. I can order these individual products. But a lot of times you want to have a shopping cart on your site. And the checkout by Amazon module also comes with a shopping cart. So, let’s go ahead and add that. So, we’ll go back to my dashboard and we’ll go to this other area called widgets. And widgets just allow me to place pieces of functionality on the different pages of my site in different zones of those pages. And in this case, we want to add to the header a shopping cart part.

We’ll save that and, again, go back to my site and we now have the shopping cart. I can go to my seeds list and I can add multiple items and then I can go ahead and check out with Amazon again.

Now, the shopping cart is nice, it was easy to get on the site, but it’s not really fitting in well with the theme that I have here. And so the next thing we want to do is actually customize the appearance of the shopping card. And Orchard allows you to really customize any of the components that are rendered on a page. And the way that we’re going to do that is actually switch back into WebMatrix. And this will show you kind of the powerful combination of WebMatrix and Orchard as a way for you to customize sites either in the Orchard UI or if you need to drop down to the files, you can do that as well.

So, what I want to do is go down into my theme and actually add a file here. So, I’ll add and existing file. Now, I’ll pull in the shopping cart. And let me open that up. And what this is is actually a part. And a part is just something that’s displayed on the Orchard page. And, basically, by adding this file, I’m overriding the default rendering for that part.

But what I wanted you to notice is that I’m using Razor here to actually define the appearance of the shopping cart. And so we’re reusing the same technology that you saw Scott using earlier to customize Orchard. In fact, Orchard is built on ASP.NET MVC3, and so when you go to build modules or themes or extend Orchard in other ways, you’re going to be using the same concepts that Scott Hanselman was using earlier in his demo.

In fact, when you go to distribute your modules, the gallery is actually based on NuGet. And so Orchard CMS is really bringing a lot of these technologies together in a very nice package to make it easier for you to create sites quickly.

So, let’s go back to our site and refresh and you’ll see now I have a nicely rendered shopping cart and people can purchase. This is looking good.

The last thing I want to do is actually provide people a way that gives me feedback or actually gets support as well. And there’s another company called UserVoice that has a really nice service online to help you manage this feedback. So, they’re actually releasing a module with us today as well that allows you to easily integrate this into your site.

So, we’ll go back to the gallery and let’s search for their module. And we’ll install the UserVoice widgets module. And then, again, they implemented their functionality as a widget. So, we’ll go back to widgets, we’ll add this into the header again, and we have their feedback widget. We’ll select that and save. And let’s go back to our site one more time and you’ll see now I have their feedback tab here. People can click on that. They can give me suggestions, they can ask questions, they can contact me via e-mail, and I can manage that customer relationship using the UserVoice site.

So, great. I think we’re ready to actually have customers come to our site, but we’re not online yet. So, let’s go back into WebMatrix one more time and click that “publish” button that Scott showed you earlier. And we’ll import the settings for my hosting provider. We’ll validate one more time. Click save. We won’t check compatibility this time. And then we’ll click continue. And, again, what WebMatrix is doing now is uploading all these files that have changed up to the hosting provider.

Once that’s ready, I can click it and now I’m online and I can send this out to customers, I can start marketing my site and start making money. So, just in a few minutes, we’re able to go from a scratch Orchard CMS site, we’re able to theme it, we’re able to add a products list, we’re able to provide a way for people to actually check out through the check out by Amazon service, and we’re also able to integrate some customer feedback. We’re able to do that very quickly, get online, focus on the business that we wanted to provide people instead of the infrastructure. Thanks very much. (Applause.)

SCOTT GUTHRIE: So we spent some time this morning looking at how you can build great websites and applications and some pretty exciting technology that lets you do that.

I want to switch gears now, though, and talk about how — about some of the investments we’re making to enable you to scale those solutions even further with the cloud.

Windows Azure enables you to focus on your applications and frees you from having to worry about the plumbing it takes to run them. It provides the ability for you to grow and shrink your datacenter resources based on what your application actually needs, and best of all, Azure enables you to pay only for the resources that you actually use, which helps you save money and avoid up-front costs.

I’d like to invite Niels Hartviq from Umbraco on stage to talk about how they’ve taken their existing open source ASP.NET CMS system and are using Azure to scale it even further. So, please welcome Niels. (Applause.)

NIELS HARTVIQ: Thank you, Scott. Hi, I’m Niels from the Umbraco project. If you don’t know Umbraco, as Scott mentioned, it’s an open-source ASP.NET-based Web CMS, so it’s completely free. It’s currently powering more than 85,000 active websites including anything from small personal websites to global Web presences of Fortune 500s.

So, all these sites are made by a thriving community of over 10,000 active developers who are helping each other in our forums producing new add-ons and meeting at local meet-ups and conferences.

I’d just like to show you some of the sites they’ve built. For instance, Wired Co. U.K. runs on Umbraco, Heinz.com, the Davis cut site, and Vogue runs on Umbraco. Scott talked a little bit about this need for scaling these websites and many of these sites have very different spikes in traffic. So, for instance, Take That, when they go on tour or release a new album, Davis Cup when there’s a game on, and the Vogue site whenever Ralph Lauren produces new red polos.

So, one of the things we’re focusing on in the next version of Umbraco is a way to support this way of scaling. And I’d like to show you a little thing that we’ve been working on which is going to come in the next version of Umbraco, which is version 5, coming this summer. Based on ASP.NET MVC3 as well. Right now, we’ve got a site here running on Azure. It’s the site for our conference. And if I go to the admin panel of Umbraco, I’m just going to log in here. You’re going to notice that in the bottom corner down here, we’ve got an Azure section. And I can click this section.

What’s special about a conference site is that, you know, 40 to 50 weeks a year, there’s almost no traffic. But when the conference is on, we’ve got a ton of traffic with people who want to see videos of what’s going on and follow the conference virtually in general.

So, what we made is a thing we call Traffic Aware, which means that directly from within the Umbraco app, you can predict variations in your traffic and you can tell Umbraco to automatically scale.

So, for instance, I got a little even here, and my normal skill is one skill unit. But we got a tenfold spike in traffic. So, I just want to cope with that. So, I can just drag this slider and now I’m actually going to expect even more traffic. What’s happening now is that Umbraco will constantly monitor the traffic. And it knows the default rendering time of pages inside the core. And if they are going a little bit down and the traffic is going up, it’s going to use the Windows Azure REST APIs to scale out new instances if needed and remove instances if traffic goes down again. And it’s also going to change the amount of data it’s going to put up in the Windows AppFabric cache as well.

So, this goes completely beyond traditional scaling. It also goes beyond traditional cloud scaling. So, this is really combining the knowledge of a core product with the possibilities in the Azure APIs.

Now, there’s also — this is what’s coming soon, but a lot of our partners really want to go to the cloud today. So, we talk with one of our Canadian partners called Red Engine and together with them and thanks to amazing work by Steve Marks from Microsoft, I’m pleased to announce that this morning we’ve released a new version of the Windows Azure accelerator for Umbraco that lets you put your Umbraco site into the cloud in a matter of minutes and just a couple of mouse clicks.

So, we’re really, really excited about Windows Azure. We are all in on Azure both in the current version and the version coming this summer, and we think you should be as well. So, we’re also going to have a session tomorrow about Azure, so make sure to check that one and have a great MIX, thank you. (Applause.)

SCOTT GUTHRIE: Thanks, Niels. This week, we’re also releasing several new Azure-based services and capabilities. These include V2 of our Access Control Service, which provides open, federated-based login system that enables you to integrate with sites like Facebook, Twitter, and others.

We’re releasing a new cache service that enables you to better scale your applications and grow capacity. We’re releasing new CDN services that enable you to edge cache your content to speed delivery up to edge clients around the world.

We’re also releasing traffic management support that enables you to route global traffic to different data centers depending on where your users are accessing your sites from around the world. We think all this functionality kind of really lets you take your sites to the next level, and combined with all the other great development technologies that we’ve shown here this morning, really let you build great solutions.

So, we’ve shown a lot of great stuff today. Two things I think are pretty cool about all the demos that you’ve seen here this morning are, one, everything is new since the last MIX that we held. So, everything has been developed over the last 12 months and released over the last 12 months and it’s great to see some of that progress.

The second thing I think is also really cool is that everything that you’ve seen demo’d here this morning in my keynote is now shipping. And so you can do all of the exact same things that we did here on stage with production apps of your own and build some great things with it. We’re really excited to talk more with you this week about these technologies and to see what you ultimately create with it.

We talked a lot about technology this morning, but ultimately, it’s really the community that makes it happen and the products and the technologies that you’ve seen would not have been possible without the broad support of the overall community both in terms of giving feedback, telling us how to make it better, but also in terms of kind of just the libraries, all the open source packages that integrate with the core products and really make them special and work well.

And behalf of the entire team, I’d like to thank you all for your support. We really, really appreciate it and I hope you have a great week and a great MIX, thank you very much. (Applause.)

END