Scott Hanselman

Hanselminutes Podcast 154 - ASP.NET and the Mobile Web

March 26, '09 Comments [3] Posted in ASP.NET | ASP.NET MVC | Mix | Mobile | Podcast
Sponsored By

My one-hundred-and-fifty-fourth podcast is up. Scott's at Mix09 in Las Vegas this week and he sits down with Chris Woods, a Program Manager on the Mobile Browse Platform Team. They've just open sourced a MASSIVE database of mobile device capabilities, enabling better mobile development for ASP.NET developers. You can also check out Chris's Mix session on Mobile, or my NerdDinner ASP.NET MVC talk.

Subscribe: Subscribe to Hanselminutes Subscribe to my Podcast in iTunes

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is a sponsor for this show!

Building quality software is never easy. It requires skills and imagination. We cannot promise to improve your skills, but when it comes to User Interface, we can provide the building blocks to take your application a step closer to your imagination. Explore the leading UI suites for ASP.NET and Windows Forms. Enjoy the versatility of our new-generation Reporting Tool. Dive into our online community. Visit www.telerik.com.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Mix: Mobile Web Sites with ASP.NET MVC and the Mobile Browser Definition File

March 20, '09 Comments [26] Posted in ASP.NET | ASP.NET MVC | Mix | Mobile | Open Source
Sponsored By

UPDATE from 2011: These View Engines have a subtle release mode caching bug. Peter Mourfield and I have released a better MobileViewEngine for ASP.NET MVC 3 that is closer to what MVC 4 will look like. The updated blog post with the new MobileViewEngine is here.

I gave a talk at Mix 09 today called File | New Company: Creating NerdDinner.com with Microsoft ASP.NET MVC. It was a fun, if challenging talk to do. I did it it with no slides at all. Just me and Visual Studio. It was one of two talks at Mix that had just code. I wonder if it'll catch on? ;)

Anyway, it was quite the tightrope walk. I'll post the video here as soon as it's posted on the Mix 09 Sessions Site.

UPDATED: Here's the link to the video of my Mix09 talk:

Session Video: File | New Company: Creating NerdDinner.com with Microsoft ASP.NET MVC
image

The general structure was to start a File | New Company and build as much of NerdDinner.com as I could in the 75 minutes allotted.

Here's a few of the highlights...

XHTML Strict

[Valid] Markup Validation of uploadForm Submission - W3C Markup Validator - Windows Internet ExplorerI pointed out how nice and easy it is to get a site to validate as XHTML Strict using ASP.NET MVC. You've got complete control over every bit that goes out on the wire. Kudos to Michael Bach for caring. I'm still not 100% convinced that XHTML Strict is as crucially important as the <ul-mafia/> says it is, but it's a simple thing to do it you keep the markup clean, simple and semantic. ;)

Mobile and ASP.NET MVC

The talk was about developing on ASP.NET MVC, not about mobile, but it was easy to make the site available on mobile devices when I got wind of what the Mobile Browse Platform Team (in Microsoft's Dublin office) was releasing at Mix.

They released the Mobile Device Browser File on CodePlex under the Ms-PL license. It's created from a database from many sources, including the popular WURFL mobile device capabilities database, actual device tests, UAProfs, contributions, logs, and elsewhere. These sources are composited, stored in a database of thousands and thousands of devices. Then that's combined with the actual logs of mobile device traffic and this file with the top 1500 or so actual devices is created to get the broadest reach with a manageable file size.

It's a mobile.browser file that contains definitions for hundreds of the top individual mobile devices and browsers that hit Microsoft mobile sites. At run time, ASP.NET uses the information in the request header to determine what type of device/browser has made the request.

It detects the mobile device hitting your site and makes available 67 capabilities describing the requesting device. These capabilities range from screen size to cookie support to CSS support. It's everything you need to adaptively render content for mobile phones and devices.

This information is exposed to the developer through the Request.Browser property. The format of the .browser file is XML and the schema is defined here: Browser Definition File Schema. The Browser Definition File was introduced in the .NET Framework version 2.0. In earlier versions of the .NET Framework, the browserCaps element was used to define browser definitions in configuration files.

imageNow, ASP.NET MVC doesn't know anything about Mobile. Here's what I did to enable NerdDinner on Windows Mobile and iPhone.

First, I downloaded the new Mobile Device Browser File and put it in \App_Browsers\Devices in my ASP.NET project. Just by dropping this file in the App_Browser\Devices folder, I automatically get all these 67 capabilities populated in the Request.Browser option. I can address them like Request.Browser["AjaxSupportsGetElementByID"]. Just open up the mobile.browser file to see all your choices. There's also extensive documentation. They'll welcome  bug reports and patches.

The guys at Ascentium that I met at Mix threw me some code and we created a basic MobileCapableWebFormViewEngine. Kind of a long name, but basically I need to have ASP.NET MVC look in different folders for a View if the device is mobile.

imageFor example, ordinarily if you're in the Home Controller and the Index action, the ViewEngine's FindView() method gets called and will look in /Views/Home for Index.aspx.

The Mobile ViewEngine needs to detect the device and change where we look. I could just make a "Mobile" version and call it a day. However, since we've got a nice tree structure here, why not set up:

  • /Views/Home
  • /View/Home/Mobile
  • /View/Home/Mobile/iPhone
  • /View/Home/Mobile/MobileIE

etc...so, now we can have many different files, any combination of them.

image

We can also have things fallback neatly. For example, we can create a really specific View, say, for a Nokia "Whatever" when it needs the Details, but that Nokia will use the standard Mobile view in all other situations. This is accomplished by just the folder convention.

Here's a simple example to start.:

public class MobileCapableWebFormViewEngine : WebFormViewEngine
{
public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
{
ViewEngineResult result = null;
var request = controllerContext.HttpContext.Request;

// Avoid unnecessary checks if this device isn't suspected to be a mobile device
if (request.Browser.IsMobileDevice)
{
result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
}

//Fall back to desktop view if no other view has been selected
if (result == null || result.View == null)
{
result = base.FindView(controllerContext, viewName, masterName, useCache);
}

return result;
}
}

This can be expanded on like this (and in a number of other ways...switch statements, tables, conventions, it's up to you to map the Views as you like.

public class MobileCapableWebFormViewEngine : WebFormViewEngine
{
public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
{
ViewEngineResult result = null;
var request = controllerContext.HttpContext.Request;

//This could be replaced with a switch statement as other advanced / device specific views are created
if (UserAgentIs(controllerContext, "iPhone"))
{
result = base.FindView(controllerContext, "Mobile/iPhone/" + viewName, masterName, useCache);
}

// Avoid unnecessary checks if this device isn't suspected to be a mobile device
if (request.Browser.IsMobileDevice)
{
if (UserAgentIs(controllerContext, "MSIEMobile 6"))
{
result = base.FindView(controllerContext, "Mobile/MobileIE6/" + viewName, masterName, useCache);
}
else if (UserAgentIs(controllerContext, "PocketIE") && request.Browser.MajorVersion >= 4)
{
result = base.FindView(controllerContext, "Mobile/PocketIE/" + viewName, masterName, useCache);
}

//Fall back to default mobile view if no other mobile view has already been set
if ((result == null || result.View == null) &&
request.Browser.IsMobileDevice)
{
result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
}
}

//Fall back to desktop view if no other view has been selected
if (result == null || result.View == null)
{
result = base.FindView(controllerContext, viewName, masterName, useCache);
}

return result;
}

private bool UserAgentIs(ControllerContext controllerContext, string userAgentToTest)
{
return (controllerContext.HttpContext.Request.UserAgent.IndexOf(userAgentToTest, StringComparison.OrdinalIgnoreCase) > 0);
}
}

Remember when I said there were 67 capabilities for each of the devices? I might need a custom view for a device, but in many instances, I might just want to modify some small aspect of a few based on the browser's characteristics like screen width or height. I could control the Mobile ViewPort like this for phones that support it.

<meta name="viewport" content="width=<%= Request.Browser["ScreenPixelsWidth"] %>, height=<%=Request.Browser["ScreenPixelsHeight"]%>"/>

A more advanced example might be this. Say I store all my images in PNG format, but I come upon a phone that doesn't support PNG. I might automatically transcode my PNGs into JPGs. Same with a phone that supports WAV but not MP3.

Windows Mobile and iPhone

Armed with this, it was just a few hours work for my simple NerdDinner app to get mobile enabled. Now that I'm learning more about what devices can do what, I'll check all this in and continue to add functionality.

For iPhone I used Joe Hewitt's IUI JavaScript and CSS Framework (and the iPhone Simulator). The iPhone includes a lot of -webkit CSS extensions so the view did need be custom. It just doesn't work at all on other browsers, but it looks great on the iPhone. For Windows Mobile, I downloaded the free Windows Mobile 6.1.4 Emulator Images and the Device Emulator.

WindowClipping   WinMob

Again, I can do whatever I like with the markup, so on these devices, clicking the phone number initiates a call, clicking a map takes you to a mobile map solution, etc.

I'll be checking this in to the NerdDinner CodePlex project in the next few days. I'm really stoked that these guys released this data file. I just dropped it in, and ASP.NET suddenly got a lot smarter and I can now make great sites for any device. After this prototyping exercise, it's time for me to think about the interaction design for the mobile experience, rather than just "down-porting" the desktop site.

All in all, great fun, and a boon to ASP.NET and developers interested in mobile.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Mix 09 - First Half Rollup and Session Videos

March 20, '09 Comments [7] Posted in ASP.NET | ASP.NET MVC | Mix | Silverlight
Sponsored By

Mix Sessions 09 We are having a fine time at Mix '09 here in Las Vegas. You may have watched the keynotes live at http://live.visitmix.com/.

Even better, you can watch the sessions as fast as they can get them up online at http://sessions.visitmix.com/MIX09.

Here's a couple of choice (my choice) sessions you should check out. They are really well presented with not just slides, but also video of the presenter.


Get Microsoft Silverlight

image

I really enjoyed talking to the very awesome Johnny Lee. Seriously, get to know this guy.

"Wow. I just bumped into Johnny Lee in the halls here at Mix09. I'm a huge fan boi with a man-crush on this dude. You've seen Johnny before on Channel 9 talking to Robert Hess.  Johnny's a legend (in my mind) in the computer vision space, and he put up with me gushing at him here at Mix09. We chatted in the hall about computer vision, what he's working on, how he got the gig at Microsoft and where he sees the future of human-computer-interaction."

I'm also wandering around talking to interesting people and I've posted a few videos up at at Channel 9 under the "mix09" tag. There's a lot of videos up there from Charles and Tina from C9 as well. Check out this video of Miguel de Icaza on Moonlight, and ASP.NET MVC with Adam Kinney and Phil Haack.

I'm hoping to post more videos as I take them. I've also recorded at least two great episodes of Hanselminutes that will be up ASAP. More soon!

Technorati Tags: ,,,

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Microsoft Web Platform, Web Application Gallery, Web Platform Installer (and DasBlog)

March 18, '09 Comments [18] Posted in ASP.NET | DasBlog | IIS | Mix | Open Source | Tools
Sponsored By

Slash WebIt's so fun to help "announce" things, especially things that are a long time coming and that a lot of people worked on to make things "just work." (You can follow them on Twitter @mswebplatform.)

This is one of those fantastic things. Today, you can install free applications direct to IIS using the Web Platform Installer 2.0 and the Web Application Gallery. The WebPI will also check for application dependencies, and if you like, automatically download and install them. It'll install SQL Express, PHP, whatever you need to get your apps running.

For example, you can now install DasBlog just by clicking this button:

Install DasBlog now with the Web Platform Installer

There's a bunch of cool apps available in the gallery immediately, both ASP.NET and PHP (remember that IIS kicks ass at hosting PHP):

This gallery sits on top of some technologies that have been slowly but surely sneaking out of the most-awesome IIS team lately.

How's it work?

Here's some technical details. You can install free apps a few ways, and they are all easy.

  • You can visit the Web App Gallery, find an app and click install. If you've got the Web Platform Installer it'll launch out of the browser. (Don't worry, it's not a browser plugin, it's more like iTunes. It'll "leap out of the browser" from a link.)
  • You can open IIS manager on your machine after installing WebPI, and click "Install Application from Gallery." This feature is awesome enough to require a screenshot to drink in:image
  • Or, just run the Web Platform Installer and browse around the catalog. The list of apps comes down as an Atom Feed.

Hey, isn't that dasBlog in the list there? Why, yes! ;)

Packaging Your App - Technical Details - DasBlog

You can upload YOUR free app to the gallery. Start by downloading the Application Developer's Kit. We packaged up DasBlog 2.3 like this. You install DasBlog

The package is a zip file. Inside at the root are two files, manifest.xml and parameters.xml. You start by "exporting" your app already working in IIS. Then, if your app has specific needs you can edit the files manually.

For example, here's our manifest.xml, which is an MSDeploy file:

<MSDeploy.iisApp>

<!-- Copies content from path into the destination specified in parameters.xml and marks as an app in IIS 5.1, 6.0 and 7.x -->
<iisapp path="dasblogce" />

<!-- Set NTFS ACLs on the destination specified in parameters.xml -->
<setAcl path="dasblogce/content" setAclAccess="Read,Write,Delete" />
<setAcl path="dasblogce/logs" setAclAccess="Read,Write,Delete" />
<setAcl path="dasblogce/siteconfig" setAclAccess="Read,Write,Delete" />

</MSDeploy.iisApp>

Remember that DasBlog doesn't use a database, but rather stores all data in XML files in the content folder. Our MSDeploy file sets ACLs on a few directories to allow "Read,Write,Delete." This file encapsulates a potentially tricky setup step for DasBlog.

The parameters.xml is a little more sophisticated and drives a dynamic UI form inside of the Web Platform Installer 2.0.

For example, the blog owner's email is a parameter, and it's entered in two files. Since DasBlog uses XML files, we can use XPath to describe where to poke the values in.

<!-- Prompts for admin email -->
<parameter name="Email Address" description="Enter the blog owner's email address." defaultValue="dasblog@example.com">
<parameterEntry type="XmlFile" scope="dasblogce\\siteconfig\\site.config" match="//MSDeploy:Contact/text()" />
<parameterEntry type="XmlFile" scope="dasblogce\\siteconfig\\siteSecurity.config" match="//EmailAddress/text()" />
</parameter>

Here's what the generated UI looks like:

image

You can read about this format in the Application Developer's Kit. You can parameterize your SQL files as well, it's a very flexible format.

Then we zipped up the deployment and uploaded it to CodePlex. The CodePlex site is smart enough to notice when the Platform Installer is requesting a release (it sniffs the User-Agent) and serves up the file rather than the web site, so I can use CodePlex to host the zip. (It would have sucked to have to host somewhere else.)

MSDeploy -> WebDeploy -> Web Platform Installer 2.0 -> Web App Gallery

Just to take a second, and make sure this is clear.

There's the command-line MSDeploy engine, there's WebDeploy that integrates with IIS and has a nice UI, and there's the Web Application Gallery where you can get a bunch of free applications. When you're in the App Gallery, the Web Platform Installer will do the installation.

Here's how I see it. Of course, you just have to click a button, but I always like to see what's underneath.

image 

What's cool about this is that even if you don't want to put your app up on the Web Application Gallery, you can still use MSDeploy/WebDeploy to deploy your apps. They are REALLY powerful tools that can help you deploy, migrate between IIS6 and IIS7, and synchronize content and apps between machines in a web farm. If you deal with IIS apps all day, host them, develop them, etc, take some time and spend it over at http://www.iis.net.

Now, if you want to have your app included in the gallery, here's the principles your app should follow:

Web Application Gallery Development Principles

1. Be Current: The application you provide a link to must be the latest, stable final release version available, hosted on a publically available Web URL

2. Be Free of Charge: The application for which you submit a link to the Microsoft Web App Gallery must be provided free of charge and fully functional without time restrictions. You are welcome to charge for professional support or consulting services and/or provide an enhanced, enterprise version of the application for purchase on your site.  We will be happy to provide a link to your commercial products and services from your page in the Microsoft Web Application Gallery.

3. Be Compatible: The application to which you provide a link must run on Windows Server 2003, Windows Server 2008, Windows XP & Windows Vista using best practices on running ASP.NET applications and PHP applications on IIS.

4. Be Deployable: The application to which you provide a link must integrate with Microsoft Web Deploy as described in the Microsoft Web Application Packaging Guide, and run with the Microsoft Web Platform Installer v2.

5. Be Supported: You must provide a publicly available Web site where end users can download your application, find documentation and/or get free on a best effort basis support through a forum.

6. Be Hostable: The application to which you provide a link must run well in a shared hosted environment as well as when the user has administrative rights for the computer.

7. Be Inclusive: If your link is included in the Gallery, you should include a link on your application community’s Web site to your Application entry on the Microsoft Web Application Gallery.

8. Be Safe: The application to which you provide a link must not harm customers or be malicious, dishonest, destructive, invasive, or act in any manner restricted by the Web Gallery Application Submission agreement.

Get the Microsoft Web PlatformCongrats to the IIS and /Web teams for this release, and thanks for all the guys on dasBlog for helping. Big thanks to Bill Staples for letting dasBlog 2.3 in on the launch.

Enjoy!

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

FizzBin - The Technical Support Secret Handshake

March 16, '09 Comments [84] Posted in Musings
Sponsored By

This is a short post, but I think it's important. Let's make it a movement. Digg it, leave a comment, Reddit it. Start using it.

We need a word that says "I know tech" when you're on the phone with tech support, you'd just say "Fizzbin" and they'd know.

I hate that 5 minute to 5 hour long "ramp up" when I'm on the phone with any kind of technical support as they realize that we both know what we're doing. Or at least, one of us does.

"So, click the start menu...type C M D and press enter. Tell what you see?"

I propose that "Fizzbin" skips that first hour. I don't like feeling like it's an ego thing. I don't want to have to say, "Hey, I kind of know this stuff, can we kick it up a notch?" I don't like explaining that YES, I've checked the cable, and YES, I have tried resetting the modem.

I'd like my tech support experience to go like this:

"Hi, Internet Tech Support...what's your issue?"

"Fizzbin."

"You have an IP?"

"No. Your DHCP isn't passing out IPs. Am I banned?"

"Looks like your MAC is xxxx, you've been running a torrent?"

"Yes, I'll stop."

"Cool. You're un-banned. Fizzbin."

"Sweet. Catch you later."

Fizzbin. It's like pressing "0" at the automated teller prompt, but for geeks.

Technorati Tags:

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.