Datasheet

27
Chapter 1: Taking the Web to the Next Level
to extend. Firefox was designed from the beginning to have its capabilities
extended — and a number of very clever programmers have added incredible
extensions to the tool. A few of these extensions have become “must haves”
for Web developers:
Web Developer Toolbar
The Web Developer Toolbar by Chris Pederick is an incredible tool. It adds a
new toolbar to Firefox with a number of extremely useful capabilities:
✓ Edit CSS: You can pop up a small window and type in CSS code. The CSS
will take effect immediately in real time, so you can see exactly what
effect your CSS has on the view of the page.
✓ Display Ruler: This incredibly handy tool allows you to draw a ruler on
your page to see exactly how large various elements are. This is really
useful for debugging Web layouts.
✓ Outline tables: This tool helps you make sense of table-based layouts.
It’s a good way to see how a complex table-based design is created.
It’s best to avoid table-based layout, but sometimes you have to look at
somebody else’s pages.
✓ Resize menu: The Resize menu lets you see how your page looks in a
number of other standard sizes. This can be very useful when you’re
designing a layout.
✓ Validation tools: Web Developer includes a number of really handy
tools for validating your Web pages. It includes links for validating HTML
and CSS, as well as the primary accessibility standards.
HTML Validator extension
This incredible extension brings the same validation engine used by the W3C
to your browser. It gives quick feedback on the validity of any page you view.
It also adds much more information to Firefox’s View Source page, including
feedback on exactly which validation errors you have. (Validation informa-
tion is not provided by the normal View Source page.) The hints for fixing the
errors are actually helpful, and there’s also a tool for automatically repairing
the code with the excellent HTML Tidy program. HTML is the foundation for
your JavaScript code, and invalid HTML provides a faulty framework. With
the HTML Validator, there’s no reason to have invalid pages. Figure 1-12
shows the improved View Source window with the warnings tab and the but-
tons for fixing the code with HTML Tidy.
05_417997-ch01.indd 2705_417997-ch01.indd 27 10/26/09 9:55 PM10/26/09 9:55 PM