back to CATS home


CalWac2 Notes: The Web Devlopment Toolkit: Tools and Tricks of the Trade

User: kristin
Date: 4/25/2007 3:24 pm
Views: 108981
Rating: 13    Rate [





By Paul Reuger.

This session covered web development/QA tools (mostly Firefox extensions), streamlining the web production process, and creating a framework/styleguide for web production to support workflow and ensure that QA and accessibility testing are not overlooked.

Topics stressed in the presentation:

Create a Framework for web development projects which includes:

  • clear standards for the XHTML pages or templates as they are being created
  • standard set of tools used by every production artist to perform their work
  • a list of supported client operating systems and browsers that will be tested during production
  • supported testing and validation tools

Streamline the web development process:

  • create a set of reusable site design structures and make them accessible to web development staff.
  • create CSS modules that are used regularly and import them:
    • Core: forms, printing, typography
    • Layout: styles for handling around 15 standard layouts
    • Presentational: Styles for handling the visual and color differences between templates that create the look and feel.
    • Navigational: Basic styles for handling the different vertical, and horizontal navigation systems

Testing and development tools included:    

Firefox extensions:

  • CSS viewer
  • Firebug (great tool - inspects javascript, xhtml, and css for debugging when you hover over page)
  • Custom outline - useful for reviewing and checking certain types of tags, specifically for text-term content (h1, a, etc.)
  • Fangs: approximates what a screenreader will read and creates text-version
  • Remove css: Removes css styling so that you can make sure the page is structured correctly.
  • Check page links
  • Total Validator
  • Fire Vox Screen Reader - an open source, freely available talking browser extension for the Firefox web browser :
  • allows you to view your site on multiple platforms and browsers. Great tool, but costs around $500/month (not a FF extension).

For a full listing of links and extensions:
For detailed lecture notes: