Web Gadgets

Welcome to what promises to be one of the last--if not the last--Web Wandering columns. As you have probably read elsewhere in this issue, the management of the BCS has decided to close down BCS Journal, The Active Window, and PC Report in favor of a single group-wide publication. At press time, it appeared doubtful that I would be a part of this new publication, so I have decided to say my good-byes now.

I have been a member of the volunteer staff that produces PC Report for several years and have written more articles for it than I care to think about. The end of PC Report is the end of an era for me. It marks a momentous change in the structure and philosophy of the BCS; whether this is a change for the better or not only time will tell.

I hope you have enjoyed reading the magazine that I and so many others have labored each month to bring to you. By and large, I have had a wonderful time writing for PC Report, be it meeting notes, reviews, tips, or Web Wandering. I am more than a little regretful that the future may hold no more OS/2 Meeting Notes or Comdex reports for me; writing acerbic articles is better than therapy, and cheaper too!

I have also greatly enjoyed corresponding with those of you who have taken the time to send me letters or e-mail messages. As anyone who throws their work before the public can tell you, the complimentary letters are the most fun to receive and the nasty ones are the most fun to answer.

If you would like to comment on the coming changes (even to say "Good Riddance!"), feel free to send me e-mail at "pcreport@miken.com." Good luck out there on the Web!

Internet Tips

Don't get WinSocked!

Actually, nothing could be farther from the truth. Like many others before, Netscape simply stole an idea from academia and made a paper killing. Even that dubious achievement would have been impossible without a little piece of code that lives in a file called WINSOCK.DLL.

All messages sent over the Internet are transmitted using a protocol called TCP/IP. Any application that wants to use Internet services must be able to send and receive TCP/IP packets. The Winsock ("Windows Sockets") API provides a standardized way for Windows applications to communicate with the Internet (or any other device that supports TCP/IP). In case you were wondering where the name came from, Winsock is a descendant of a UNIX API library called "Berkeley Sockets."

Without a standardized TCP/IP interface, each Internet client application would have to include its own TCP/IP code. The arrival of the Winsock standard (and its counterpart on the Macintosh) made the Internet explosion possible by allowing almost anyone with a personal computer to jack in.

Winsock frees programmers from the drudgery of TCP/IP coding. It also takes care of things like sharing an Internet connection among multiple client applications running simultaneously.

How We Got Here

Users of Windows 3.x aren't so lucky. The Internet fad is very recent compared to Windows; when version 3.1 was released, nobody could have imagined a serious need for TCP/IP support. At that time, TCP/IP on PCs was mostly used to connect to UNIX machines on corporate LANs. TCP/IP tools were correspondingly expensive and hard to set up, usually involving large TSRs, arcane command lines, and cryptic configuration files.

Once the Internet started to liven up, TCP/IP tool vendors began to get their act together. Drivers morphed from 16-bit DOS TSRs to 32-bit Windows VxDs. The first GUI setup programs materialized. Winsock DLLs appeared under every Christmas tree. Someone opened Pandora's Box and unleashed the Trumpet TCP/IP package upon an unsuspecting world.

Soon everybody wanted in. The on-line services began offering Internet access in a variety of ways. The proprietary TCP/IP stacks were joined by Microsoft's free, built-in Winsock, which appeared first under Windows NT and then under Windows 95.

The results were all too familiar. Every Internet product acted as if it owned the system, merrily installing over whatever happened to get in the way. Adding a new Internet suite or an on-line service client would disable existing Net apps more often than not.

Better Watch Out...

It's revolting, but almost none of the installers that cause these problems make any attempt to see if you have a working TCP setup before they start copying files and altering your system configuration. To name some of the suspects: CompuServe WinCIM 2.0, NetManage Internet Chameleon, and many more.

Almost any Internet suite that claims to give you "everything you need to join the Internet revolution" should be considered suspect. All these products assume that you are installing them in order to gain Internet access. If you already have access, you may be in jeopardy.

If you are installing a single Internet component, for example a mail reader like Eudora Pro or a Web browser like Netscape Navigator, you are probably safe. These clients presume you have a working Internet connection. All they ask for is a Winsock interface.

Protecting Windows

You should also save your TCP/IP program's files if you know what and where they are. One crude but generally effective way to do this is to back up your entire SYSTEM directory.

Protecting Win95

Though built around its Registry, Windows 95 still reads the WIN.INI and SYSTEM.INI files to provide backwards compatibility. If an Internet installer adds a rogue virtual device driver to SYSTEM.INI, it can disable your Net connection or even make Win95 unable to start up.

Installers can also add TSRs to AUTOEXEC.BAT and/or device drivers to CONFIG.SYS. Depending on what they do, these additions can make your Win95 installation unstable or even crash it entirely. Other, less obvious effects may include making Windows 95 think that 32-bit access to your hard disk is unsafe, greatly decreasing your system's apparent speed.

The key to working with Windows 95 and the Internet is remembering that everything you need is built into the system. You should never install anything that promises to give you TCP/IP access. For example, don't install Trumpet Winsock on top of Windows 95.

A corollary to this rule is: if you are using a TCP/IP stack under Windows 3.x, uninstall it before upgrading to Windows 95.

It's fine to install Internet client software, such as Web browsers, USENET news readers, or mail programs, but when you install these products, try to avoid installing things like TCP/IP stacks, dialers, or "Wizards." To do this, you may need to choose the "custom installation" option if one is provided.

The Aftermath

If you get an error message like "TCP cannot find something.VXD," your WINSOCK.DLL has almost certainly been overwritten. If your system locks up or crashes when you try to access an Internet service, the sabotage may have gone deeper; it's time to check out the .INI files.

If only one Internet client isn't working, search your hard disk for files named WINSOCK.DLL. Hunt down and delete or rename any that you find, other than the one in your Windows / Windows 95 directory (and your backup). The odd way that Windows loads DLLs can cause it to read the wrong Winsock file depending on which Internet client is launched.

CompuServe Over the Internet

CompuServe has recently released version 2.0.1 of its Windows access client, which is called WinCIM. This client provides a number of fancy new features, including a way to access the Web from your CompuServe account. It also includes a decent free Web browser called Air Mosaic, which you can use on any Winsock connection, CompuServe or not.

WinCIM 2.0.1 is especially interesting because it is designed to allow access to CompuServe over a Winsock TCP/IP connection. That's right: you can log into CompuServe and use any of its services while using the Internet as your transport.

Why would you want to do this? There are two main reasons: speed and cost.

At press time, many of CompuServe's modems were limited to 14.4 kbps. Only a relatively small number of urban sites offered 28.8 kbps access. If you log in via your Internet provider, and the provider offers 28.8 kbps speed, you can theoretically double your throughput and halve the time you spend on-line, thus lowering your CompuServe bill. Notice I said theoretically: if you log on during peak usage hours, you are unlikely to see much speed improvement; CompuServe's ancient hardware infrastructure is more of a bottleneck than the slow modems.

Another weakness of CompuServe's modem network is its relative sparseness. If you live outside a large city, connecting to CompuServe probably requires a toll call. For example, I can connect on a local call, but only at 1200 bps. Not much point in that. To get 14.4 kbps, I have to dial Worcester, which is a toll call.

Connecting over the Internet solves both these problems. At work, I have access to a very high-speed Internet connection; CompuServe really lopes along when I log in outside of business hours. From home, my Net provider is a local call and provides 28.8 kbps access: for me, it's always cheaper and faster to use CompuServe over the Internet than to dial in directly.

How To

Once you have the install file, which is called WCINST.EXE, you can go ahead and back up your Winsock files, then install it. If you are already a CompuServe member, you don't need the "sign-up pack," so you can save quite a bit of disk space by un-checking the "Install Sign-Up" box.

Launch WinCIM and open the Special / Session Settings... dialog box. Create a new connection by clicking the "New" button; type "Winsock" (or any other useful name) in the "Current" field. Fill in your name, user ID, and password if they are not already present. Set the "Network" field to "Internet" and the "Dial Type" to "Direct." The "Connector" and "Baud Rate" settings are ignored. At the bottom of the dialog box, check the "Winsock" box.

Voilà! That's it! Click OK to save the new connection settings, start up your Internet connection as usual, then select "File / Connect..." to log into CompuServe. Note that you have to start your Net connection manually, even under Windows 95; for some reason, WinCIM doesn't trip Win95's demand Internet dialer.

Some debugging hints:

• If the Winsock box is grayed out in the Session Settings dialog, copy or move the files CID*.* from your Windows / Win95 directory to your WinCIM directory.
• If WinCIM shows "Logging into CompuServe" for a really long time, then an error message, try deleting or renaming the WINSOCK.DLL file in the WinCIM directory.
• If you are having trouble connecting to CompuServe, open another Internet client, such as a Web browser, and make sure your Internet connection is still working. If it isn't, restore WINSOCK.DLL from your backup.

  Though CompuServe is the first of the commercial on-line services to offer connection via the Internet, I expect the others will follow suit soon enough. Allowing Internet connection is an incredibly cheap way to enlarge your modem pool by several orders of magnitude; it also provides faster transport than the direct modems in many cases, at least until the Internet bogs down.

Windows NT and SLiRP

Further, if you are having trouble making NT talk to the Internet, Steve suggests making sure that the NetBEUI protocol is installed, even if you're not otherwise using it.

Web Gadgets

Beautiful Web pages usually conceal one of the darkest secrets of the Internet: nearly everything that's cool on the Web is a bitmapped graphic. That's right. Here we are in the days of graphical operating systems, built-in scaleable outline fonts, and powerful graphics metafile languages, but the Web's beauty was mostly created by hand, one pixel at a time.

This ugly secret has enormous ramifications. First, it helped make the Web popular. Web browsers like Netscape Navigator are fairly simple things: boiled down to the essentials, all they have to do is interpret HTML--which is no great challenge--and be able to display bitmapped graphics. Requiring browsers to interpret vector drawings or perform font rendering would have made them vastly more complex, slower, and much harder to implement. It also might have limited the cross-platform nature of the Web that we currently enjoy.

The other ramifications aren't so pleasant. The price of all those bitmapped graphics is bandwidth. The more visually interesting a page is, the more bitmap data it has to transfer to your system. This means that state-of-the-art pages can take forever to download, given the current modem speeds of 28.8 kbps or less.

Bitmaps also place demands on the Internet's infrastructure. A graphics-heavy site like Rocktropolis (rocktropolis.com) may transfer half a megabyte or more of bitmaps to your system for each page that you view. Multiply this load by all the Net surfers and sites out there, and you can see why the Internet is often bandwidth-starved.

Another awkward characteristic of bitmaps is their device-dependence. If you create a bitmap that is 100 pixels wide by 100 pixels tall with 256 colors, it is always going to have those characteristics. The graphic may look too big on a 640 by 480 monitor and too small on a 1024 by 768 screen. If the viewing computer has less than 256 colors available, some kind of dithering or color-mapping will be employed, possibly making the image unrecognizable. If you stretch or shrink the bitmap to accommodate differing device resolutions, its quality will suffer.

Needless to say, these are the reasons that vector graphics formats appeared on computers. A vector drawing can be mathematically scaled to fit the display device and will usually require far less data than a bitmap to express the same image. Unfortunately, vector graphics are at best a distant dream on the Web.

GIF Me!

Originally promulgated by CompuServe, the GIF format is relatively simple to display, hence its dominance on the Web. It is currently limited to 256 colors per image, though the colors can be defined using RGB triplets, and it uses the familiar LZW compression scheme.

LZW is a lossless compression method, so a graphic saved in GIF format will always "look exactly like" the original bitmap image, as long as the source image used 256 colors or less. If the source image used more than 256 colors, some colors will be substituted, degrading the graphic.

"Lossy" compression schemes like the one used by the JPEG format can vastly reduce the number of bytes used to represent an image, but JPEG is not directly supported by all browsers. JPEG compression taken to extremes also inflicts a distinctive "blocky" distortion on the image.

Given its limitations, GIF is an acceptable format for graphical items like text, lines, circles, or simple drawings, that is, images with large areas of solid color. It is very inappropriate for photographic images, which usually have far more than 256 colors. Photographic images also tend to interact badly with the LZW compression scheme, sometimes causing it to actually increase the size of the image file. It's almost essential to use JPEG for photographs, especially since the most popular browser, Netscape Navigator, can directly display JPEG graphics.

But What Can I Do?

• Palette mapping. GIF is limited to 256 colors, but some systems have even less colors available. A properly-created GIF file lists the most commonly-used colors first in its internal color table, so the software rendering the image can use "pure" colors for the popular hues and dithered tones for the rest.

  Since colors in a GIF are defined using Red-Green-Blue coordinates, it is fairly easy to get "close" colors if your monitor can't show the exact hue requested by the image. Unfortunately, Netscape Navigator sometimes messes this process up, which can cause very odd effects, but the idea is there.

• Compactness. GIFs can contain up to 256 distinct colors, but they can also contain many less, as few as two colors. Using the smallest possible number of colors in your GIF bitmaps can greatly reduce their size. For example, nearly all the GIF gadgets on my Web page are less than 1,000 bytes long and many are less than 100 bytes. Keeping images small in this way makes them transfer to the browser very quickly.
• Transparency. The GIF format allows you to specify one color that is "transparent." In other words, when the browser renders the graphic, wherever the "transparent" color appears, the browser lets the background color or pattern show "through" the graphic. This is how you can create text or drawings that appear to have no "background."
• Animation. Though this feature is as yet little used, GIF files can contain a series of images to be displayed in succession. If the rendering is done quickly enough, it's possible to perform crude animation using a multi-image file.
• Text. The GIF standard provides a very primitive way of displaying text on top of the bitmapped image.
• Interlaced Rendering. If you watch a browser displaying a bitmap, it will usually start at the top of the image and proceed gradually downward as the image data is retrieved from the host. Interlaced rendering causes the "whole" graphic to appear immediately but in a simplified form. As data arrives, the image gradually becomes sharper and more detailed until it is complete.

Creating Web GIFs

Keep your GIFs small. The best ways to do this are to reduce the color palettes you use and to size the graphics appropriately. If you make your graphics too wide or tall, visitors will have to scroll their browsing windows to see them. The best size is unfortunately very hard to determine, since visitors may be using anything from a television set to a Silicon Graphics workstation to view your site; the best you can do is preview the graphics on your own system.

It's also important to test your GIFs at a couple of different color depths. For example, I generally run my system at 32-bit color depth, which theoretically yields 4 billion possible colors, though it seems little different from the 24-bit (16.7 million hue) "True Color" modes of yore. When I have created a graphic for the Web, I test it at 256 colors, since many systems run at that color depth. This test is important because Navigator often performs some rather odd color renderings; I occasionally need to alter the images to make them work correctly at lower color depths.

Though the GIF standard supports up to 256 colors, it's important to remember that on a 256-color Windows system, you really only have about 240 colors available. The others are used as system colors.

Method 1: Steal

You can be a thief too. If you see a graphical element on somebody's web page that you like, just steal it! Everyone else does.

To steal a graphic, click on it with the right mouse button. A context menu will appear including the "Save this graphic as..." command. Choose this command, fill in the Save As... dialog box, and you're done!

Method 2: Draw

Many drawing programs, such as CorelDRAW, can export GIF files. CorelDRAW 6.0, in fact, has an excellent GIF export filter that supports transparency and interlaced rendering. A drawing program gives you access to whatever outline fonts are installed on your system and usually to a library of clip art.

When using a drawing program, you have the ability to configure things like the resolution and color depth of the exported image. This means you can export your drawing, preview the result, and then try another set of export filter settings if needed. You can also easily scale elements of the drawing, change the fill colors of objects, and so on, and then re-export. This approach tends to be much simpler than working directly with the bitmap in a paint program.

Most of the graphical elements on my Web page were created with CorelDRAW 6.0. Its convenient and highly configurable GIF export filter makes Web gadget creation a snap.

As a starting point, I generally choose an export resolution of 75 by 75 with the smallest color palette possible. I use interlaced rendering only for the largest graphics, of which I try to have only a very few. Dithering and anti-aliasing should usually be shut off.

Method 3: Paint

 

Table 1. GIF Image tools

	URL	Description
Ulead Quick Viewer	ftp://ftp.coast.net/SimTel/win3/ graphics/ulview11.zip*	Excellent freeware viewer for many graphics formats
Xiaomu Niu's Internet Application Collection	sage.cc.purdue.edu/~xniu/ winsock/mmviewer.htm	Good collection of graphics viewers and tools
Consummate Winsock Apps Graphics Tools	cwsapps.texas.net/image.html	More graphics tools including Win95
Adobe	www.adobe.com/Software/DOWNLOAD/ Updates/Photoshop/Windows/GIF89A.ZIP	Photoshop GIF89a export filter
Official Corel Home Page	www.corel.com	Corel tips and error reports
Chris Dickman's Unofficial Corel Home Page	www.corelnet.com	Good non-partisan Corel resource
Lview Pro Home Page	mirror.wwa.com/mirror/ busdir/lview/lview.htm*	Decent shareware image editor. Can create transparent GIFs.
GIF Construction Set	www.north.net/alchemy/gifcon.html*	Tool can build multi-image GIFs and transparent GIFs. Ignore requests to purchase unbelievably lame-sounding books.

* Programs marked with asterisks may be easier to find and download via the Virtual Shareware Library vsl.cnet.com.

Using a paint program gives you control over your Web gadgets, right down to the individual pixels. I have often created Web graphics by starting with a bitmap exported from a drawing program, then refining the image with Adobe Photoshop.

As described above, there are disadvantages to using a paint program to create your Web graphics. For example, if you find that your graphic is too large or too small, resampling it to a new size will probably cause unwanted artifacts. It's hard to reposition items that are "part" of the image. Nevertheless, at least some pixel editing is often needed, especially for small gadgets like custom bullets.

The biggest disadvantage to Photoshop in particular is the learning curve (precipice might be a better word) associated with that product. Even after several years of heavy use, I would describe my relationship with Photoshop as one of mutual suspicion. Using Photoshop proficiently requires lots of practice.

At press time, the current version of Photoshop (3.0.1) had no built-in support for advanced GIF features like transparency and interlaced rendering. However, there is a powerful GIF export filter plug-in available for Photoshop on CompuServe and at Adobe's web site www.adobe.com. Installing the filter requires only copying a single file into a particular directory.

As with most things involving Photoshop, using the export filter takes practice. It has a number of subtleties and undocumented functions. To make the most of the filter you need to understand Photoshop features like transparency and alpha channels, which take some learning.

That's the eternally frustrating tradeoff with Photoshop: it offers unequaled power and control at the price of a truly hellish user interface. The program is full of obnoxious interface quirks; for example, holding down the <Alt> and/or <Ctrl> keys alters the functions of certain buttons in some dialog boxes. This is a Macintosh tradition that nobody needed brought across to the PC. Photoshop is the only Windows program I know of that you must read every page of the manual to use properly; half the application's functionality is hidden.

Suffice it to say that a less powerful and friendlier product like Corel PhotoPaint might be a better choice for most Web graphic needs.

Preview, Preview, Preview

Used judiciously, GIF gadgets can give your Web page a distinctive and exciting look. Unless you stick to plain-vanilla HTML, they're the only tools you've got, so get cracking!