An excellent presentation on building standards based websites - “Building standards based website using ASP.Net (4.0) - ReMix Australia”
Tatham’s blog post to the above video - http://blog.tatham.oddie.com.au/2009/06/18/video-building-great-standards-based-websites-for-the-big-wide-world-with-asp-net-4-0/
And here are my notes I made while viewing this video that you might find useful:
Website created: http://www.graysonline.com/
Started off 9 years ago as an ASP site
the current ASP.net version started of as a project with 2 developers, and then ramped up to 12 developers and with an ops team at its peak.
Full time designer was dedicated to the project -> consistent look and feel
tech stack used
Asp.Net 3.5
Commerce Server 2007 (cart, profiles, etc)
SqlServer 2005
Endeca (search - Java based)
Dev methodology: Scrum
Need to Define what done means on your project (do it early)
XHTML compliance
Unit tested
Browser support
WAVE test
FireBug - useful tool for FireFox (similar for IE dev toolbar)
Used XHTML 1.1 standard
XHTML 1.1 deprecates stuff like iframe, target, etc.
Use XHTML 1.1 as base for most pages and XHTML 1.0 on the pages that require it.
Why target is not supported by XHTML 1.1
http://www.w3.org/MarkUp/2004/xhtml-faq#target
-ASP.Net pages by default target XHTML 1.0 transitional
-XHTML 1.1 supported natively by VS 2008
-To change your page use:
Update the doctype in your aspx page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
To the web.config
set: xhtmlConformance mode="strict" (default is transitional)
-use CSS friendly adapters
-use ASP.Net themes & skin files
-Do all of the above in one easy step while setting up your project using the "Visual Studio 2008 XHTML 1.1 Project"
http://www.codeplex.com/VSXHTML11Templates
The future - ASP.Net 4.0 – cool features coming:
-allows you to control the ID that is used on controls
sample options: static, predictable
also allows you to add a row suffix
makes it easier to use CSS to control design
-disable viewstate at container level
Panel disabled, means all contained controls have viewState disabled
you can still enable it for each control individually
Useful tool:
XHTML markup sanitizer: http://markupsanitizer.codeplex.com
Cleans up HTML markup so as to be XHTML conformant
ASP.Net Accessibility:
- its the law
- WCAG 1.0 & 2.0
- WebAim.org
- WAVE accessibility evaluation tool
http://wave.webaim.org/
Make XHTML compliance part of development Cycle.
- Uses a VSTS integration test
- need to find out more
AspNetDevelopmentServer
Speaks to W3C validator to determine compliance
Controlling how some commonly used controls render to HTML
- panels sometimes render as fieldsets
default rendering is as a div
can render as fieldsets - very useful (done by setting the GroupingText attribute)
- labels will render as a HTML label when you use the associatedcontrolid attribute (which is the correct way to do it) http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.groupingtext.aspx
- use radiobuttonlist instead of radiobutton http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobuttonlist.aspx
Server Controls:
- typically can be used only within a Form tag
- can be hacked to be used outside the Form tag
override - VerifyRenderingInServerForm to always return true for the page
http://msdn.microsoft.com/en-us/library/system.web.ui.page.verifyrenderinginserverform.aspx
-using multiple forms in one page:
only one server form allowed
use action attribute to submit to a different page
action="page.aspx"
use it as a client.form
need to test this
Support for multiple browsers (increasing reach)
- dont target browsers
instead target standards
set the baseline standard (typically CSS3/extensions - which is FireFox 3, Safari 3 Opera 9.5 and IE8)
CSS 2.1 for IE7 and FireFox 2 support
Think about users who might be on slow internet connections
- use YSlow
http://developer.yahoo.com/yslow/
- use GZip Compression
- CSS sprites - need to read up on this
Progressive enhancements
-make basic site
-add bells and whistles (javascript, etc) later.
-eg: shoppingg cart drop down on same page
*created as a simple link
*used jquery to add behavior to link to show a div containing cart details
Testing
-unit tests
*tests the basic unit of code
-integration
*combines some of the units to test them together
-functional
* uses whatin - a wrapper around IE
-performance
Mocks - RhinoMocks
http://ayende.com/projects/rhino-mocks.aspx
No comments:
Post a Comment