Resources

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 : http://www.firevox.clcworld.net/about.html

• Browsercam.com: 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: tinyurl.com/kywbq
For detailed lecture notes: tinyurl.com/fhh7n