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

1. Building great standards based websites for the big wide world with ASP.NET 4 TathamOddieSenior ConsultantReadifyASP.NET MVP@tathamoddie Damian EdwardsProgram ManagerMicrosoft(former ASP.NET MVP)@damianedwards

3. The ProjectWhat does “done” mean? • Determine your “done” definition up front • Ours were: • XHTML compliance • WAVE test • Unit tested • Browser support: IE6, IE7, IE8, FF2, FF3, Sa3 • Non-JavaScript support • Develop your own

4. StandardsXHTML primer • XHTML is based on HTML 4.01 • Adds XML compliance & extensibility • XHTML 1.0 • Frameset • Transitional • Strict • XHTML 1.1 • ASP.NET is geared to serving XHTML

5. StandardsChoosing a standard • XHTML 1.1 is the latest & most strict • However it deprecates commonly used elements & attributes • iframe • target • Choose a base & switch when necessary • HTML5 is backwards compatible so consider using it

6. demo ASP.NET & HTML

7. REACH

9. Experience Chrome HTML 5 XDR DOM Storage Selector API CSS 3 / extensions CSS 2.1 DOM 1.0 Level 2 PNG JavaScript XHTML 1.0, 1.1 CSS 1 HTML 4.01 HTML 3.2 Safari 4 Browsers above the baseline “just work” Firefox 3.6 IE8 Progressive Enhancement Opera 9.5 Firefox 3.1 Safari 3 Firefox 3 Baseline Firefox 2 Standards Browsers IE7 Browsers below the baseline need specific attention Safari 2 Firefox 1 Graceful Degradation IE6 Reach

10. ReachBuilding usable websites • Important to have a browser support baseline • CSS layouts: load quicker, easier to maintain, best support for majority of users • Progressively enhance from a standards compliant base • Build non-JS functionality first, then layer JS on top

11. demo Reach

12. AccessibilityGetting started • WAI – Web Accessibility Initiative • http://www.w3.org/wai • WCAG 1.0 & 2.0 • WAI-ARIA • WebAim.org • WAVE accessibility evaluation tool

13. MarkupKnow your server controls • Pop quiz… what HTML gets rendered? • Label control • Panel control • Enabled attribute • Do you really need the server control?

14. demo Using multiple forms

15. MarkupForm layout • Forms are fundamental to good websites • Layout affects accessibility, stylability & maintainability • Choose a consistent form layout model & stick to it

16. <fieldset class="customer-details"> <legend>Customer Details</legend> <ol> <li class="first-name"> <label for="firstName">First Name:</label> <input id="firstName" type="text" /> </li> <li class="last-name"> <label for="lastName">Last Name:</label> <input id="lastName" type="text" /> </li> <li class="action save"> <input type="submit" value="Save" /> </li> </ol> </fieldset>

17. <fieldset class="customer-details"> <legend>Customer Details</legend> <ol> <li class="first-name"> <label for="firstName">First Name:</label> <input id="firstName" type="text" /> </li> <li class="last-name"> <label for="lastName">Last Name:</label> <input id="lastName" type="text" /> </li> <li class="action save"> <input type="submit" value="Save" /> </li> </ol> </fieldset> fieldset { float: left; clear: both; } fieldsetol { list-style-type: none; margin: 0; padding: 15px; } fieldsetolli { clear: both; margin: 004px; } fieldsetollilabel { display: block; width: 120px; float: left; } fieldsetolli.action { padding: 000120px; }

18. <fieldset class="customer-details"> <legend>Customer Details</legend> <ol> <li class="first-name"> <label for="firstName">First Name:</label> <input id="firstName" type="text" /> </li> <li class="last-name"> <label for="lastName">Last Name:</label> <input id="lastName" type="text" /> </li> <li class="action save"> <input type="submit" value="Save" /> </li> </ol> </fieldset> fieldset { float: left; clear: both; } fieldsetol { list-style-type: none; margin: 0; padding: 15px; } fieldsetolli { clear: both; margin: 004px; } fieldsetollilabel { display: block; width: 110px; float: left; margin-right: 10px; text-align: right; } fieldsetolli.action { padding: 000120px; }

19. <fieldset class="customer-details"> <legend>Customer Details</legend> <ol> <li class="first-name"> <label for="firstName">First Name:</label> <input id="firstName" type="text" /> </li> <li class="last-name"> <label for="lastName">Last Name:</label> <input id="lastName" type="text" /> </li> <li class="action save"> <input type="submit" value="Save" /> </li> </ol> </fieldset> fieldset { float: left; clear: both; } fieldsetol { list-style-type: none; margin: 0; padding: 15px; } fieldsetolli { clear: both; margin: 004px; } fieldsetollilabel { font-size: 0.8em; color: #444; display: block; } fieldsetolliinput[type=text] { width: 200px; } fieldsetolli.action { margin-top: 10px; }

20. <fieldset class="customer-details"> <legend>Customer Details</legend> <ol> <li class="first-name"> <label for="firstName">First Name:</label> <input id="firstName" type="text" /> </li> <li class="last-name"> <label for="lastName">Last Name:</label> <input id="lastName" type="text" /> </li> <li class="action save"> <input type="submit" value="Save" /> </li> </ol> </fieldset> fieldset { float: left; clear: both; } fieldsetol { list-style-type: none; margin: 0; padding: 15px; } fieldsetolli { float: left; margin: 030px00; } fieldsetollilabel { display: block; float: left; margin-right: 10px; } fieldsetolli.action { margin: 0; }

21. Client Performance • Use YSlow to highlight potential issues • Minimize requests • Combine your CSS during build/deployment • Combine JS with ScriptManager • Use CSS sprites for background images • GZIP compression

25. $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 -ErrorActionSilentlyContinue ; $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 ;

26. QualityBuilding for testability • Why tests matter • Types of tests • Unit test • Integration test • Functional test • Performance test

27. QualityWeb Forms MVP • Additive • Facilitates good architecture • New features • http://webformsmvp.com

28. demo Web Forms MVP

29. In ConclusionTakeaways • Web standards make accessibility, reach, quality & maintenance easier • ASP.NET supports XHTML, but needs tweaking & developer awareness (HTML5 is coming) • Determine your done criteria early & automate as much as possible • Ensure quality by using testable patterns, DI, IOC & unit testing

30. Resources • http://tath.am • http://damianedwards.com • http://www.w3.org • http://www.webaim.org • http://webformsmvp.com • http://markupsanitizer.codeplex.com • http://www.graysonline.com