EX20: Building great standards based websites for the big wide world with ASP.NET 4

Building great standards based websites for the big wide world with ASP.NET 4Tatham OddieSenior ConsultantReadifyASP.NET MVP@tathamoddieDamian EdwardsProgram ManagerMicrosoft(former ASP.NET MVP)@damianedwards3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1

The ProjectWhat does done mean?Determine your done definition up frontOurs were:XHTML complianceWAVE testUnit testedBrowser support: IE6, IE7, IE8, FF2, FF3, Sa3Non-JavaScript supportDevelop your own3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3StandardsXHTML primerXHTML is based on HTML 4.01Adds XML compliance & extensibilityXHTML 1.0FramesetTransitionalStrictXHTML 1.1ASP.NET is geared to serving XHTML3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4StandardsChoosing a standardXHTML 1.1 is the latest & most strictHowever it deprecates commonly used elements & attributesiframetargetChoose a base & switch when necessaryHTML5 is backwards compatible so consider using it3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5ASP.NET & HTMLdemo 3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6REACH 3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7

Browsers below the baseline need specific attentionBrowsers above the baseline just workHTML 5XDRDOM StorageSelector APICSS 3 / extensionsCSS 2.1DOM 1.0 Level 2PNGJavaScriptXHTML 1.0, 1.1CSS 1HTML 4.01HTML 3.2BaselineIE8Opera 9.5Safari 3Firefox 3IE7Firefox 2IE6Firefox 3.1StandardsExperienceReachBrowsersProgressive EnhancementGraceful DegradationSafari 2Firefox 1ChromeSafari 4Firefox 3.6ReachBuilding usable websitesImportant to have a browser support baselineCSS layouts: load quicker, easier to maintain, best support for majority of usersProgressively enhance from a standards compliant baseBuild non-JS functionality first, then layer JS on top

3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10Reachdemo 3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11AccessibilityGetting startedWAI Web Accessibility Initiativehttp://www.w3.org/waiWCAG 1.0 & 2.0WAI-ARIAWebAim.orgWAVE accessibility evaluation tool3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12MarkupKnow your server controlsPop quiz what HTML gets rendered?Label controlPanel controlEnabled attributeDo you really need the server control?

3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13Using multiple formsdemo 3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14MarkupForm layoutForms are fundamental to good websitesLayout affects accessibility, stylability & maintainabilityChoose a consistent form layout model & stick to it3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15

Customer Details

1. First Name:
2. Last Name:

Customer Details

1. First Name:
2. Last Name:

fieldset { float: left; clear: both;} fieldset ol { list-style-type: none; margin: 0; padding: 15px; } fieldset ol li { clear: both; margin: 0 0 4px; } fieldset ol li label { display: block; width: 120px; float: left; } fieldset ol li.action { padding: 0 0 0 120px; }

Customer Details

1. First Name:
2. Last Name:

fieldset { float: left; clear: both;} fieldset ol { list-style-type: none; margin: 0; padding: 15px; } fieldset ol li { clear: both; margin: 0 0 4px; } fieldset ol li label { display: block; width: 110px; float: left; margin-right: 10px; text-align: right; } fieldset ol li.action { padding: 0 0 0 120px; }

Customer Details

1. First Name:
2. Last Name:

fieldset { float: left; clear: both;} fieldset ol { list-style-type: none; margin: 0; padding: 15px; } fieldset ol li { clear: both; margin: 0 0 4px; } fieldset ol li label { font-size: 0.8em; color: #444; display: block; } fieldset ol li input[type=text] { width: 200px; } fieldset ol li.action { margin-top: 10px; }

Customer Details

1. First Name:
2. Last Name:

fieldset { float: left; clear: both;} fieldset ol { list-style-type: none; margin: 0; padding: 15px; } fieldset ol li { float: left; margin: 0 30px 0 0; } fieldset ol li label { display: block; float: left; margin-right: 10px; } fieldset ol li.action { margin: 0; }

Client PerformanceUse YSlow to highlight potential issuesMinimize requestsCombine your CSS during build/deploymentCombine JS with ScriptManagerUse CSS sprites for background imagesGZIP compression3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

21

$PSScriptRoot = Split-Path -Parent Path `(Get-Item -Path $MyInvocation.MyCommand.Path).FullName ;$YuiAssemblyPath = Join-Path -Path $PSScriptRoot ChildPath `"Dependencies\YUI Compressor\Yahoo.Yui.Compressor.dll"[Void][System.Reflection.Assembly]::LoadFrom($YuiAssemblyPath) ;

$AggregateFile = Join-Path -Path $Path -ChildPath "styles.agg" ;Remove-Item -Path $AggregateFile -ErrorAction SilentlyContinue ;

$CssFilesPattern = Join-Path -Path $Path -ChildPath "*.css" ;

Get-ChildItem -Path $CssFilesPattern -Exclude print.css `| Sort-Object -Property Name `| Get-Content `| Add-Content -Path $AggregateFile -Encoding UTF8 ;

[string]$CssContent = Get-Content -Path $AggregateFile[Yahoo.Yui.Compressor.CssCompressor]::Compress($CssContent) `| Set-Content -Path $AggregateFile ;

QualityBuilding for testabilityWhy tests matterTypes of testsUnit testIntegration testFunctional testPerformance test

3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26QualityWeb Forms MVPAdditiveFacilitates good architectureNew features

http://webformsmvp.com

3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27Web Forms MVPdemo 3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28In ConclusionTakeawaysWeb standards make accessibility, reach, quality & maintenance easierASP.NET supports XHTML, but needs tweaking & developer awareness (HTML5 is coming)Determine your done criteria early & automate as much as possibleEnsure quality by using testable patterns, DI, IOC & unit testing

3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

29Resources

http://tath.amhttp://damianedwards.comhttp://www.w3.orghttp://www.webaim.orghttp://webformsmvp.comhttp://markupsanitizer.codeplex.com http://www.graysonline.com

3/15/2010 5:21 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

303/15/2010 5:21 PM 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

31