CalWac2 Notes: The Web Devlopment Toolkit: Tools and Tricks of the Trade
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:
- CSS viewer
- 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).