Developing Web Applications with ASP.NET and Web Standards
The End Game
ASP.NET is a very powerful platform for building the Web.
No matter how complicated back-end logic is, a Web Form ultimately produces HTML.
The $1M Question
Do we pay enough attention to the quality of HTML we send back to the user?
We can do better!
"Tag Soup" of Latter Days
Over the years it has become a habit to mix presentational and structural markup thus creating
"tag soup" (familiar to developers as "spaghetti code")
- <font> elements to set font face, size and color
- <table> to lay out page elements
- <b>, <u>, <i>, etc
- <blink>, <marquee>, <center> for "glamorous" effects
- <bgcolor> to set background color
How Did We End Up in This Mess?
- Developers were never taught properly
- WISIWIG tools produced proprietary or plain messy markup
- Years of "dot-com" pushed bad practices (browser sniffing, code forks, design for one particular browser, etc)
- As a result ~95% of web sites are obsolete
- W3C is not aggressive enough
What is Semantic (Structural) Markup?
- adj: Of or relating to meaning
- Semantic markup is about meaning. How does an element describe the content it contains?
- Example: <h1> connotes "the most important heading on the page", not "big, bold and ugly"
- Example: <p> designates a paragraph of text, not a fancy way to insert a line break
The Web Standards Trinity
A suite of specifications developed by The World Wide Web Consortium (W3C)
What is XHTML?
- HTML reformulated with XML syntax
- Both HTML and XML
- There's no advantage to use HTML 4.x any longer
- XHTML 1.0 spec has been around since 2000!
- Stricter rules for authoring markup
XHTML Ground Rules - Part I
- Document must contain correct DOCTYPE
- Documents must be well-formed
- Element and attribute names must be in lower case
XHTML Ground Rules - Part II
- Non-empty elements require end tags (eg. <p></p>)
- Attribute values always quoted (<a href="...." />)
- Empty elements always closed (<br />)
XHTML Ground Rules - Part III
Some elements and attributes have been deprecated
- <BASEFONT>, <FONT>, <CENTER>
- <U>, <APPLET>, <ISINDEX>, <S>, etc
name attribute of <img>, <form>, <iframe>, etc
- Therefore validate!
There are three DTDs in XHTML 1.0
- Strict: Elements deprecated in HTML 4.x (such as
font) are not allowed
- Transitional: Less restrictive DTD, i.e. deprecated elements are allowed
- Frameset: Pretend I didn't mention it
- Free HTML Validator (http://validator.w3.org/) from W3C
- Free CSS Validator (http://jigsaw.w3.org/css-validator/) from W3C
- Validate, fix, validate, ...
What is CSS?
- CSS stands for Cascaded Style Sheets
- CSS specs (currently solid in ver 2.1) are maintained by W3C
- Use CSS to control page layout for various media, typography, colors, etc
Separation of Content and Presentation
- Structure pages with semantic markup
- Use CSS to control the "look and feel"
One Stylesheet to Rule Them All
You can style the same code base in various types of media. "Build once, read everywhere."
- assistive devices
Benefits: Development Savings
- Code is easier to redesign
- True separation of design and code - let everyone do their job without overlap
- No need to recompile .NET code if server controls produce structured markup
- Single code base, many skins
- Developers hate UI. Let designers deal with it
Benefits: Bandwidth Savings
- Markup is cleaner with smaller footprint
- Pages load quicker
- Less bandwidth wasted
- Browsers cache CSS - less to download with every page request
Benefits: Accessibility & Wider Audience
- Governmental web sites (in US) must comply with Section 508 of the Rehabilitation Act
- People with a wider variety of browsing devices can access your content
- It's only a matter of time before lawyers start suing over accessibility laws
- Better positioning in search engines
Don't turn people down based on what they use to access your site or product
Benefits: Future Compatibility
Future compatibility with emerging user agents
Benefits: Be Ahead of the Game
- Few companies are aware of standards
- Build superior, accessible applications
- Reach wider audience
- Seize the opportunity and sell standards!
Test in Multiple Browsers
- Avoid "IE only" mentality
- Avoid catering to one particular browser
- Test with text-based browsers (eg. Lynx)
- No more "this site best viewed in xxxxx"
- Case in point: IBM goes silent on
Linux desktop effort
- No browser implements the specs perfectly (hair pulling)
- Some browser manufacturers are slower or more reluctant than others (politics)
- Have to use CSS hacks to keep presentation acceptable in older browsers
(I see old browsers. They are everywhere)
- Developers have to "unlearn" old habits (learning curve)
See if anyone in the audience is asleep and play "Ballmer sells Windows 1.0" to wake 'em up.
Web Standards in ASP.NET 1.x
- Server controls produce old, non-compliant markup
- Adaptive Rendering is evil
What is Adaptive Rendering?
Request object enquires about capabilities of the visiting browser
- Two tag writers to render HTML:
System.Web.UI.HtmlTextWriter to cater to Internet Explorer/Win 4.x, 5.x, 6.x
System.Web.UI.Html32TextWriter for all other ("downlevel") browsers
Problems with Adaptive Rendering
Html32TextWriter converts <div> elements into tables
- Client-side validation doesn't work in "downlevel" browsers
machine.config to disable Adaptive Rendering won't do much good
ids of controls make them a difficult target for styling
ASP.NET 2.0: Huge step forward
- <xhtmlConformance mode="Transitional|Legacy|Strict"/>
- Server controls produce standards-compliant markup
- Web Forms produce XHTML Transitional markup by default
VS.NET 2005: Huge step forward
- Helpful IntelliSense with HTML and DOM
- Built-in accessibility checker
- There is no "secret sauce recipe" for ASP.NET developers
- Apply what you learned today in everyday work (web forms, server and user controls)
- Don't lock yourself in on one specific browser
- Stop abusing browsers and write proper markup!
- Book: "Designing with Web Standards" by Jeffrey Zeldamn
- Book: "Eric Meyer on CSS" by Eric Meyer
- Book: "Web Standards Solutions: The Markup and Style Handbook" by Dan Cederholm
- Book: "Don't Make Me Think: A Common Sense Approach to Web Usability" by Steve Krug
- Blogs, blogs, blogs
Thank you. Come again.