010108.html | WebReference


((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) January 8, 2001


This newsletter is sponsored by: IBM & BOT 2001 Seminar


****************************************************************** Stay ahead of the curve- with WebSphere software. Register now for access to the IBM Patterns for e-business Web site, and download a rich set of guidelines that can help you speed the development of e-business apps and reduce the code you have to write by 60-80%. For performance that can give you the edge in the next generation, the difference is Websphere software. http:// www.ibm.com/websphere/more35 **********************************************************adv.****

This week we have a special treat for you, a preview of Jeffrey Veen's new book, "The Art & Science of Web Design." Due in stores this week, Veen's new book takes a higher-level view of Web design and says designers today have to be like Web Renaissance men and women, well versed in the various aspects of Web publishing. We interview Jeffrey (of Wired fame), and also review and summarize his newest book.

We also have a lot of fresh code for you to play with, including Jonathan's latest Weblog, Peter's latest DHTML menus, and the Doc's Netscape 6 event scripting. Enjoy.

http://www.webreference.com *- link to us today http://www.webreference.com/new/ *- newsletter home http://www.webreference.com/new/submit.html *- submit article

New this week on WebReference.com and the Web:

1. INTERVIEW: Jeffrey Veen, author of "The Art & Science of Web Design" 2. PERL: Weblog 1.61 3. DHTML: DHTML Hierarchical Menus: Version 4.01 4. GRAPHICS: CorelDraw 101: Color Management Tools 5. JAVASCRIPT: Netscape 6, Part III: The Event Model 6. XML: XML and Java: A Match Made on the Internet 7. BOOK REVIEW: The Art & Science of Web Design 8. NEW LINKS: ASP Links 9. OTHER VOICES: * DOM XML: An Alternative to Expat

Like what you see? Get our front page e-mailed to you every business day with our HTML newsletter. Just send an e-mail to:


Spread the word! Feel free to send a copy of this newsletter to your friends and colleagues, and while you're at it, snap a link to WebReference.com.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. INTERVIEW: Jeffrey Veen, author of "The Art & Science of Web Design"

We interview Jeffrey Veen about his new book, and a new way at looking at Web design. Think liquid, rule-based, dynamic template- driven sites. By Andy King.


See also our book review below.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. MOTHER OF PERL: Weblog 1.61

Add a "blog" to your site today. Weblog 1.61 is an open source script that manages RSS channels through an intuitive browser-based interface. Capable of generating multiple formats (HTML, RSS, Palm, WAP) Weblog makes updating your front page (and raising your traffic) a breeze. By Jonathan Eisenzopf.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. DHTML LAB: DHTML Hierarchical Menus: Version 4.01

After much feedback, the first tweaks for HM4 are now available. Version 4.01 fixes a few bugs, answers your questions, and loads external files in a new way. By Peter Belesis.


****************************************************************** BOT 2001 Seminar* January 25th at The Fairmont, San Francisco Expert bot/intelligent agent developers, researchers and academics present the latest happenings and give specific information for cost effective solutions to improve business. A rare opportunity to network, share ideas, and put theory and research into practice. Register today - space is limited! http://seminars.internet.com/bot/sf01/registration.html **********************************************************adv.****

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 4. PRODUCTION GRAPHICS: CorelDraw 101: Color Management Tools

Confused by CorelDraw's color options. Not anymore. Learn all about palettes and pick your favorite. By Wendy Peck.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 5. DOC JAVASCRIPT: Netscape 6, Part III: The Event Model

Events in Netscape 6 bubble up like IE, and dive down like Netscape 4. Strap on your face mask for some JavaScript scuba lessons with your host, Dr. Yehuda Shiran.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 6. EXPLORING XML: XML and Java: A Match Made on the Internet

Java and XML make a great combination for implementing distributed e-business applications. By Michael Classen.


****************************************************************** ATTENTION WEB DEVELOPERS - Interested in turning your ordinary graphics into spectacular visual displays? Streamingmediaworld.com gives you the latest resources, techniques and tutorials for adding audio, video and flash to your web site. http://www.streamingmediaworld.com ***********************************************************adv.***

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 7. BOOK REVIEW: The Art & Science of Web Design, by Jeffrey Veen

Jeffrey Veen is on a mission to make the Web a better place. His latest book, "The Art & Science of Web Design," came from a need he saw for a higher-level view of Web design: "I looked around at what Web design books were available, and saw a hole in the market." Veen was Executive Interface Director for Wired Digital, and the man behind Webmonkey, HotWired, and HotBot's designs.

For many of you, reading this book will be an "aha" experience. According to Veen, Web design is no longer logos and layouts, it now takes a multidisiplinary approach, with elements of information architecture, programming, and of course design. Veen says: "The line between design and programming is getting more and more blurry." The rare few who stretch beyond their comfort zones and learn these other disciplines can become design masters. Jeffrey Veen is such a person.

It's a different kind of Web design book. Veen doesn't dwell on technical details, he guides you towards more elegant solutions. He provides ways you can find the best solutions (interfaces etc.) through the use of heuristic usability and pattern matching, rather than the tedious testing promoted by the likes of Jakob Nielsen. It's a new design philosophy really, a more fluid approach with "intelligent content that can figure out how to display itself correctly" created from dynamic publishing systems (databases and scripted templates).

And Veen makes it look easy. Veen's final chapter on "Object- Oriented Publishing" ties it all together with a great example of a database-backed scripted template (using ASP) front-end to a church's sermon respository. He whipped the site up on his hard drive using low-cost tools, and shows how easy it can be to create a consistent look site-wide, lower maintenance costs, and easily add new "views" of your data. The benefit of separating presentation from content is that your site can more easily adapt to changing standards, and formats. Want a WAP feed? No problem, query the database with a different template, or even an XSL style sheet.

The days of large static sites are numbered. Going to "dynamic publishing" using a database gives your company a strategic advantage over your competition, as you can publish content faster, and change designs and formats much more efficiently. Your site comes alive. For an outstanding book like this one I provide a summary for your edification.

>Book Summary: What follows is a summary of the book, by chapter:

1. FOUNDATIONS - Good design comes from a deep understanding of the technologies behind the scenes.

The Web is based on ideas from the electronic publishing industry and SGML. Just as typesetters specified presentation in the margins, CSS specifies presentation of HTML's structure. CSS *abstracts* presentation from content and allows different presentations for different devices and formats from the same data. The Web is an interplay between structured content, visual presentation, and behavior (what he calls words, pictures, and code). This theme carries throughout the book. A good Web page is a blend of presentation, structure, and interaction.

2. INTERFACE CONSISTENCY - Learning from convention will make your site better.

You can exploit existing de facto Web conventions on your site to maintain an edge. Impatient users aren't interested in learning new ways of navigating your site. Your site is one of the millions out there, and certain interface conventions have emerged (link colors, page layouts, navigation systems, and visual hierarchy) that you need to follow. You are creating a set of internal conventions across your site, based on external conventions from the rest of the Web. Use Pattern language to help sift through the different interface possibilities. If you manage your users' expectations through consistency, those users respond. You build trust through consistency.

Think Mac. Learn how one program works, you know them all. Same for the de facto Web conventions. Think of the basic rules of consistency as context. See an octagon while driving, you know when to stop. See a blue underlined link, you know where to click. He does say you can change link colors, as long as their meaning is clear.

Veen talks about the three panel layout, and the "LSD" design of portals (logo, search, and directory). Like Krug, Veen says each page on your site should answer three questions:

1. Where am I? 2. What's here? 3. Where can I go?

3. STRUCTURE - Information Architecture defined - from the Web's biggest sites to the simplest user experience, to an XML-enabled future.

Information architecture (IA) is structuring content to reveal patterns in data, making the complex clear. Architects need to present these strucures, patterns, and relationships (through hierarchy, and emphasis) then create maps or blueprints to help people reach their goals through Web interfaces. IA's are matchmakers, matching the site's view with the users.

>The Matrix

Veen gives an example of this by analyzing three ad-based portals, Yahoo, Snap, and Go. Portals want to avoid the "single-dip" user experience by integrating content and services to create as many opportunities for cross-selling as possible. Veen calls this "The Matrix," where vertical content areas bisect horizontal services. The more destinations you have, the more opportunities there are to make money.

>Extending the Web

XML simplifies sharing of data, and separates content from presentation. Once a group has agreed upon a set of common tags, just trade schemas and get back to work.

4. BEHAVIOR - Designing with interactivity and self-aware content.

There's no such thing as a controlled user environment. You need to give up control on the Web, let go of absolutes, and embrace the relative. Move from a pixel-based mindset to a rule-based one. Good designers embrace the limitations of the Web, and code around them. Creating self-aware content (through scripting) that adapts to its environment is a sign of the best designers. "Designers create rules for their pages, build in constraints and behaviors, so that their creations mold to the environment in which they're displayed."

Veen gives some examples to illustrate his point. Create "liquid pages" that automatically size to the user's screen. Get relative with CSS and em-based typography. He shows how to script auto- sizing headlines that match the width of the column below, like a newspaper does. "Good designers are harnessing the technology available to them and using it to encode the process they use to do good design."

5. BROWSERS - With so many broken browsers, you'll need a design strategy for all of them.

Veen shows that "old browsers never die" and shows some techniques you can use to create multi-browser designs that degrade gracefully.

6. SPEED - The performance of your Web site is the most critical factor of its success.

Study after study has shown that the number one complaint users have about the Web is speed, or the lack of it. Web pages just display too slow. And don't tell me more bandwidth is just around the corner, they've been saying that for 5 years, and they'll probably say it for another 5. "You'll lose more traffic to the principle of speed than any other." Veen shows some techniques you can use to squeeze every last byte out of your pages with CSS, and give the appearance of speed with positioning.

Veen says that slow modems are actually a benefit to the Web, as "constraint propagates creativity." He says designers do better work when they are constrained by the Web's limitations.

7. ADVERTISING - Being commercial is a reality. Is your site as effective as it could be?

"There's a harsh tension between usability and revenue." Veen looks at strategies (targeting, personalization) to raise clickthroughs and create ads users actually want to view.

8. OBJECT-ORIENTED PUBLISHING - Harness the power of dynamic, database-driven Web sites.

This is where it all comes together. The distinction between design and programming has become blurred, it's as intertwined as the Web itself. "Building effective and manageable Web sites today requires dynamic, page-generating tools." In order to compete, and move at Web speed, you've got to go to a database. Veen's point is that *anyone* can create a database-backed, templatized Web site, and gives an eye-opening example to convince you.

Careful planning up front can pay big dividends later on. He shows how server-side includes, and templates embedded with "middleware" like PHP and ASP can easily query SQL databases for truly dynamic sites. This "dynamic publishing" requires little maintenance, and gives designers a flexible way to display different views of their data. Highly recommended.

See also our interview with Jeffrey at:

http://www.webreference.com/interviews/veen/ http://www.veen.com/artsci/

The Art & Science of Web Design By Jeffrey Veen New Riders, $45 ISBN: 0-7897-2370-0

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 8. NEW LINKS: ASP Links

With the popularity of database back-ends on the Web, Active Server Pages have become a standard in Web development. Check out our links and learn something new.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 9. OTHER VOICES: DOM XML: An Alternative to Expat

Have you ever needed to parse XML using DOM? Here is an alternative to the SAX implementation.


That's it for this week, see you next time.

Andrew King Managing Editor, WebReference.com update@webreference.com

Alexander Rylance Assistant Editor, WebReference.com arylance@internet.com

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information about advertising in this newsletter, contact Frank Fazio, Director of Inside Sales, Jupitermedia Corp. Call (203)662-2997 or write mailto:ffazio@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a internet.com Commerce Partner, contact, David Arganbright, Vice President, Commerce and Licensing, (203)662-2858

mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This newsletter is published by Jupitermedia Corp. http://internet.com - The Internet Industry Portal ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription - http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 100 Websites are organized into 14 channels... Internet Technology http://internet.com/sections/it.html E-Commerce/Marketing http://internet.com/sections/marketing.html Web Developer http://internet.com/sections/webdev.html Windows Internet Technology http://internet.com/sections/win.html Linux/Open Source http://internet.com/sections/linux.html Internet Resources http://internet.com/sections/resources.html Internet Lists http://internet.com/sections/lists.html ISP Resources http://internet.com/sections/isp.html Downloads http://internet.com/sections/downloads.html International http://internet.com/sections/international.html Internet News http://internet.com/sections/news.html Internet Investing http://www.internet.com/sections/stocks.html ASP Resources http://internet.com/sections/asp.html Wireless Internet http://internet.com/sections/wireless.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Copyright (c) 2000 Jupitermedia Corp. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~