This course focuses on developing standards-compliant web pages. You will develop the skills and knowledge to design web pages that are rendered from valid XHTML markup and CSS style sheets. You will also learn how to use web development tools to inspect web pages and to debug markup and CSS issues. Thus, the web pages that you design in this course will render consistently on standards-compliant browsers from platform to platform.

This discussion focuses on the tools you will be using for web development.

Standards-compliant Browsers

Modern browsers include:

Standards-compliant web designs must be viewed using a standards-compliant browser. For this course, you are required to use Mozilla Firefox to view and verify your web designs. The primary reasons for this are:

If you don't have the latest version of Firefox installed on your system, install (or update) Firefox Open in a New Window using the custom installation option, ensuring that the DOM Inspector is selected in the Choose Optional Components dialog.

In most respects, IE6/Win is also considered a modern browser; however, IE6/Win exhibits several issues when rendering CSS, making it pseudo-standards-compliant. IE5/Win is notorious for its lack of support for CSS, requiring web developers to employ browser hacks so that IE5/Win will display web pages as intended. IE7/Win, released near the end of 2006, promised true standards-compliance; however, early tests have already revealed minor discrepancies compared to other browsers. Due to standards issues inherent in IE for Windows, IE for Windows will not be taken into consideration in this course, and you will not be required to test your pages in IE, except when specifically instructed to do so.

Browser Marketshare

Outside of this course you will certainly need to consider IE/Win in your designs, since IE6/Win currently has the greatest marketshare. Though browser marketshare statistics vary from source to source, approximate browser usage statistics may provide a sense that a browser is so rarely used that a site need not support people who use it. See the References below for a few browser marketshare reports.

Web Page Development and Debug Tools

Developing web pages using XHTML and CSS is very similar to conventional programming in many ways. Recognizing this, several developers have created debug and development tools to aid in designing and debugging standards-compliant web pages. There are several development tool add-ons available for Firefox. Specific tools will be demonstrated throughout the term whenever they are applicable to the particular CSS topic being discussed each week.

DOM Inspector

DOM Inspector
enlarge

Firefox and other Mozilla products feature the DOM Inspector Open in a New Window, optionally installed as an integrated development tool in Firefox 2.0. This tool can be used to inspect and edit the DOM of any web page. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes. Properties for all rules in all style sheets may be examined and edited, with changes dynamically updated in the integrated browser of the DOM Inspector. The Computed Style view will reveal all properties for the selected object. The use of this tool will be demonstrated in next week's lecture.

The Web Developer Toolbar

Web Developer Toolbar

The Web Developer Toolbar extension provides essential tools for assisting in the design and development of web documents. The many tools available include XHTML and CSS validation tools; element outlining; screen measurement; a dynamic stylesheet editor, and web page inspection. I strongly recommend that you install the Web Developer Toolbar, and spend some time getting familiar with its features. For additional information, visit the Web Developer website Open in a New Window.

Favelets (aka Bookmarklets)

Favelets are tools written in JavaScript. They are saved to your browser from the Favelet developer's web page as a bookmark. Favelets are invoked by clicking on the Favelets bookmark just as you would for a bookmarked webpage. Favelets have the benefit of being available on any browser than can run JavaScript, and they are relatively platform-independant. Since they are saved simply as bookmarks, they are extremely easy to add to or remove from your browser without any complications. We will discuss favelets in greater detail when we discuss fonts and text in week 4.

References