Sunday, June 28, 2009

ASP.Net Resources – Building standards based websites

An excellent presentation on building standards based websites - “Building standards based website using ASP.Net (4.0) - ReMix Australia

Get Microsoft Silverlight

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: