Why Script? / Update: CSS2 Rollovers - WebReference Update - 020325 | WebReference

Why Script? / Update: CSS2 Rollovers - WebReference Update - 020325

((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) March 28, 2002

___________________________ Sponsors ________________________________ This newsletter sponsored by: 802.11 Planet Spring 2002 events.internet.com Nanotech Planet Spring 2002 _____________________________________________________________________

This week Kenneth Tibbetts joins us again with a piece on the benefits of scripting for the Web. After more iterations than we care to count, we think we've perfected our CSS2 rollovers. See the latest versions below. In other news IE is dominating Netscape but AOL's rumored change looms large (30% some say).

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

New this week on WebReference.com and the Web:

1. FEATURE: Why Script? 2. UPDATE: Pure CSS2 Rollovers 3. OTHER VOICES: * A Better Printable Page 4. NET NEWS: * IE Continues To Outpace Netscape

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:

subscribe-html@webreference.com

or for this text newsletter:

subscribe@webreference.com

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.

/-------------------------------------------------------------------\ Coming to the East Coast! 802.11 Planet Spring 2002 Conf. & Expo Sponsored by IBM --The Only Trade Show & Expo Focused on 802.11 Business-- June 10-12 Pennsylvania Convention Center, Philadelphia, PA. Whether you're an expert in 802.11 or need to quickly get up to speed and profit from it, 802.11 Planet is the premier event for this exploding industry. Register today & save! http://seminars.internet.com/80211/spring02/index.html

\--------------------------------------------------------------adv.-/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. FEATURE: Why Script?

In a perfect Internet we could do all the processing on the server and deliver to each end user exactly the content he needs and can use. Every mouse click, keystroke or window event would display a freshly served page. Every browser would be a dumb terminal, whose only job would be to render the pages and send requests for new content...

Nahhh.

There are some pretty good reasons to use scripting on web pages.

1. Bandwidth

There isn't enough, it isn't fast enough, and if it ever does improve its going to be crammed so full of streaming movie trailers and diet soda commercials that most of us are going to be in the same place we are in right now. Waiting for content to load is just behind spam in most user's top ten hates about the Web.

Doing some of the work on the visitor's machine saves a lot of back and forth traffic.

And that brings us to number 2:

2. Suffering Server

There is a certain amount of processing your server has to do, a certain amount it ought to do, and a lot that it does without any particular reason. Servers have many jobs, and as the applications they must run get bigger and take more processing time, they really can use a break where they can get it.

Sending and resending the same information to the same user after running it through an ASP or PHP routine gets old really fast. Especially today.

3. Capability

From looking at the server logs I see that over half of the people who get online and look at my sites have computers that are bigger, faster and newer than my server. And it is a pretty good server. I'm not talking about overclocking, byte talking, pringles eating computer experts. I mean Uncle Dave and cousin Sue and John the lobsterman.

The hardware has come along so fast that we programmers haven't come close to stretching its ability. And even the machines stacked up by the dumpster have the power to run a script in a browser. So let these nifty machines do some of the work. Maybe a lot of the work. When you get down to the user interface and events on the user's machine, you come to reason number 4.

/-------------------------------------------------------------------\ ** When Face-to-Face is the Only Way ** The Internet is great for exchanging information and ideas, but nothing beats in-person learning and networking. Check out internet.com's upcoming Spring 2002 conferences and expositions including: ** ClickZ E-Mail Strategies ** Nanotech Planet ** 802.11 Planet (Wireless) ** Grid Computing Planet and more. Visit http://events.internet.com today!

\--------------------------------------------------------------adv.-/

4. Useful Web Pages

Once a page is served to the browser, it is out of the server's control. The browser's job is to display the page and respond to events. Actually, you could say that the browser's job is to present the visitor with the content he wants in a useful form. Making a page, or all your pages, easy to use and navigate just makes good sense.

Scripting events on your web pages can make the difference between a usable page and a useful page. With scripting you can display exactly the information your visitor wants to focus on, and easily change the view as he pleases.

You can script some useful routines - a text sizer to instantly give a user a large print display, or a table of contents that will organize a long page automatically, or a function that will sort a table or bring up a new display based on the cell the user clicks on. And I'm not the one to talk about menus and image rollovers.

5. Standards

The W3 doesn't require that conforming agents support scripting, but it does allow for it, and they are working on event handling. Almost every browser has a scripting engine that can handle HTML events - onclick, onmouseover, onkeypress, onload and so on. It is sensible to keep your scripts in centrally located JavaScript files, as they are easier to update.

* Conclusion

Web pages are about content. Scripting is a way to enhance what you've got, not an end in itself. A visitor will come to your site if it has content he wants. He'll come back if the experience is pleasant.

The server assembles and/or delivers the page to the browser. If you can improve the user experience once he has the page on his computer, if you can make your pages more useful, I believe it is worth the time spent coding and testing, and testing.

In fact, I can't think of a good reason NOT to use scripts!

See you online!

# # # #

About the author: Kenneth Tibbetts writes for people and their computers from his homebuilt home in central Maine, where he and his wife, artist Rhena Tibbetts, have been exercising hardware with their own code since keypunching meant punching actual holes in things.

They love the advances in technology, but they aren't in awe of it, as you can see from their web site at http://www.yankeeweb.com. Kenneth can be reached at: postmaster@yankeeweb.com.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. UPDATE: Pure CSS2 Rollovers

The response to our "Evolution of Rollovers" article has been great. The initial, and updated rollovers still had minor problems with various browsers, and did not "look right" in Netscape 4.x. Fear not, gentle reader. With the help of a cast of CSS mavens, we think we've perfected our CSS2 rollovers, at least the vertical version.

We've created a new directory and moved these updated rollovers from the newsletter to the directory, which is at:

http://www.webreference.com/new/rollovers/

There you'll find demos of vertically stacked rollovers that look similar on Netscape 4.x, and work on everything we tested, including IE6. We've included three versions, that take slightly different approaches to the problem. Note that we use the link rel method, rather than the @import method to associated the CSS file.

Next we'll tackle the horizontal rollovers. Let me know what you think and if you find any quirks.

/-------------------------------------------------------------------\ Nanotech Planet Spring 2002 Conference & Expo coming to CA! Sign up today for the hottest upcoming event on the business of nanotechnology May 13-15 in San Jose. At Nanotech Planet Spring 2002 you'll get the latest news and developments, understand the current applications, and learn where this technology will take biomedicine, materials science, optics & microelectronics. Talk nanotech with companies, labs, VC firms & Gov't agencies. http://events.internet.com/nano/spring02/

\--------------------------------------------------------------adv.-/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. OTHER VOICES: A Better Printable Page

NuBlog shows us how to create the perfect printable page. http://www.contenu.nu/article.htm?id=1217 Content.nu, Mar. 23, 2002

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 4. NET NEWS: IE Continues To Outpace Netscape

A new study released Wednesday by WebSideStory shows Internet Explorer (IE) continues to top the browser charts, and is taking the Netscape faithful with them. In just seven months since its release, IE6 has grown from 2.4 percent to 30.5 percent share, second only to IE5. WebReference.com statistics show 83.5% for IE, 8.1& for Netscape, 1.4% for Opera. http://www.internetnews.com/dev-news/article/0,,10_999091,00.html Internetnews.com, Mar. 28, 2002

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

Andrew King Newsletter Editor, WebReference.com aking at internet dot com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ARE YOU BABYSITTING YOUR EMAIL LIST SERVER SOFTWARE? Upgrade to Lyris ListManager From The Experts at SparkLIST, Save Money, and Remove Headaches With Our Free Installation Assistance Offer:http://SparkLIST.com/solutions/software/intm/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Claudia at 1-203-662-2863 or send email to mailto:nsladsales@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit http://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 160 Web sites is organized into 16 channels: Internet Technology http://internet.com/it E-Commerce/Marketing http://internet.com/marketing Web Developer http://internet.com/webdev Windows Internet Technology http://internet.com/win Linux/Open Source http://internet.com/linux Internet Resources http://internet.com/resources ISP Resources http://internet.com/isp Internet Lists http://internet.com/lists Download http://internet.com/downloads International http://internet.com/international Internet News http://internet.com/news Internet Investing http://internet.com/stocks ASP Resources http://internet.com/asp Wireless Internet http://internet.com/wireless Career Resources http://internet.com/careers EarthWeb http://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - http://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp http://internet.com - The Internet & IT Network Copyright (c) 2002 Jupitermedia Corp. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~