DHTML Utopia: Modern Web Design Using JavaScript & DOM

HTML and CSS are great tools for designing attractive, accessible websites that look and work great in a variety of browsers. This is (or should be) the goal of every web designer out there. There are times, however, when it would be nice to have some tricks for transforming text or creating important effects that html and css alone can't quite handle. Maybe you want to make sure a form is filled in correctly before it gets submitted, or maybe you just want to add a subtle movement to attract the visitor to a certain area of the page.

This is where DHTML comes in handy. The "D" in DHTML stands for "dynamic", and incorporates a little thing called JavaScript to get the job done. Unfortunately, JavaScript can appear daunting to the web designer who doesn't have much formal programming experience. DHTML Utopia: Modern Web Design Using JavaScript & DOM is a book that introduces this language to the masses, and provides some useable scripts along the way. Let's take a peek inside to see what the fuss is all about.

DHTML Utopia begins with a brief overview of what DHTML is and how it fits into the HTML/CSS structure. Much of this will be a review for the web developer, but it’s important to understand how the three languages will work together. HTML defines content descriptions (header, paragraph, list, etc...), CSS defines layout and style, DHTML defines behavior. Chapter two introduces the Document Object Model, or DOM. Up until now, I thought that DOM was just a large Italian entertainer/actor (cue laugh track). It is, however, an important step to understanding the hierarchal structure of elements and nodes within the document. If you haven't been exposed to the DOM before, this chapter is worth reading, and re-reading. I have since found that this concept applies to other areas of programming, not just DHTML.

Subsequent chapters then explain various JavaScript concepts, while simultaneously helping the reader to build various web components into their site. Chapter four discusses how to detect the features of different browsers. After all, if a visitor to your website doesn't have JavaScript enabled, or uses a browser that doesn't support the technology, you still want them to be able to see your website as an attractive page. Chapter five discusses the use of animation, and also warns the web designer to use animation sparingly on the page:

Frivolous animations will divert your users' focus from valuable content. When implementing subtly and tastefully, though, animation can tie the disparate parts of your page together very neatly. It is therefore very important not to overuse animation techniques. Apply animation with a light hand.

The reader is then shown how to develop JavaScript code that will help forms get filled out correctly. If somebody fills out your form, but doesn't fill in the e-mail address correctly (or not at all), a script can show them the error and have them try it again. A slide-out menu is also built from start to finish. The code is included within the pages of DHTML Utopia so that you can type it in directly to your editor. If you're not the kind of person who likes to do that sort of thing, though, you can also download the code examples from the publisher. Word of advice to anybody just looking for some good code: You can find other, similar DHTML examples that are available at various places on the web for free. There's no guarantee they're going to be of this quality, and you're not likely to learn much along the way. But if you want to learn this exciting, useful language so that you can eventually roll your own code some day, this book was meant for you.

The book was published by SitePoint, a company who aims to help web designers learn innovative, standards-based methods to develop, create and market web sites. DHTML Utopia fits right in with that philosophy. It was written by Stuart Langridge, an information architect from the UK and frequent contributor to SitePoint.

Is DHTML Utopia the end-all and be-all of JavaScript tutorials? Certainly not. At 304 pages, I would think it just presents the basics of this language. But if you’re ready to roll up your sleeves and get busy putting together some well-written, readily useable scripts, then this book is for you. These ideas are going to find their way into some site projects that I have coming up.