Web Tips for Macintosh Web Builders

Working With Graphics

• With respect to those of us working with GIF graphics on the Web, the entities affected by the GIF controversy are only the publishers of Netscape, Mosaic, JPEGView, Transparency, Photoshop, etc. This small group can afford the GIF LZW royalty of 15 cents per software package sold, and at this point, it would seem there is a 99% chance that everything will continue to be as it was before. (Except that Photoshop will now cost $595.15 :)

• GIF and JPEG's compression skills are complimentary, and they work together as a team in affording good compression across the entire spectrum of bitmapped image content.
  • GIF is best for images containing same-color horizontal-pixel sequences within it, such as logos, titles, and line-art images. GIF archives images with 256 [custom] colors maximum.

  • JPEG is best for complex real-life images and textured synthetic images, such as, say, a logo with textures and graduated fills. JPEG archives images in millions of colors only. (32-bits)

• There is currently no "vector graphics" option for the Web, so graphics created with ClarisDraw, Intellidraw, Illustrator, or Freehand, etc, must be converted to GIF images (or perhaps JPEG, as noted above).

• Graphics with a "transparent color" download and image VERY quickly. Aaron Giles' "Transparency 1.0" application makes it easy to simply click on a color in your image to make that the transparent color.

• When creating anti-aliased text or graphics, be sure to have the current background color set to the same color of gray that Netscape and Mosaic use, an RGB value of 52428, so that the graphic will be anti-aliased to that color. This will yield good-looking results whether the bkgnd is gray or white. Anti-aliasing to a white bkgnd usually results in a visible white fringe when displayed on a gray bkgnd.

• "Interleaved" GIFs are useful for large "clickable image-map" type graphics. This allows the user with a 14.4 modem link to potentially know where to click before the entire image loads, allowing them to move on quickly. For graphics of, say, less than 100 pixels on a side, it is perhaps not worth the bother. The "venetian-blinds" effect can sometimes be visually distracting or artistically unpleasant.

• Excellent results are achieved by creating your graphics against the aforementioned gray background, then choosing that background color as the "transparent color" when preparing your final graphic in GIF format.

• Interleaving the GIF graphic is optional, and a completely independent effect. JPEG graphics do not support interleaving or a "transparent color".

• When using Photoshop, or any other application, one should work and save in RGB mode, of course, and then save to a GIF (indexed color) graphic as the final (side) step, choosing "8-bit", "system palette", with "dithering" up to you.

• It is not convenient for most of us to see how Netscape renders our graphics on a Windows=81 PC, or an X-Window workstation, so time spent trying to obtain precise color results is something to consider.

• GraphicConverter 2.0.6 (Shareware) is currently the only single application that can manipulate, convert, and save GIF images as either interleaved and/or with a transparent color. It works with 32-bit color and JPEG graphics just as easily.

• The "ColorSwitch" (Shareware) control panel is effective in allowing you to conveniently switch your monitor back and forth between 256 colors, and thousands or millions of colors, while working with your graphics. It sports a convenient pull-down menu next to the Balloon Help menu. (Includes volume control, too :)

Arranging Pages and Graphics

• When initially creating web pages your first time, throw everything into the same folder. This allows you to simply call out only the name of your graphics, or your other web pages, when specifying them in HTML anchors (HREFs), freeing you from being concerned about "Mac folder vs. server directory" referencing.

• If you name the first (home) page "index.html" (for Unix servers) or "Default.html" (for MacHTTP servers), this will allow you to give out simpler URLs to others, because the URL does not call out the name of a web page. The server will assume a default page name when none is specified, as indicated.

• When things start to get into more than 10 pages, you will no-doubt have lots of savvy by then, :) and then be able to deal appropriately with the concerns of "Mac folder vs. server directory" referencing, and multiple entry points into your web pages. The simple approach above helps to minimize complexity in the beginning, and thus save you lots of time and tedium.

The Authoring "Loop"

• While developing web pages, you may find it convenient to use the new version of Tex-Edit+ (Shareware), which allows editing of any size of text file, yet will still soft-wrap the text so it is all "on-screen" without having to horizontal scroll. MicroSoft Word works the same way, and I hear version 6 supports an HTML-editing add-on. Claris also offers an HTML XTND translator for their editors.

• When you first complete the edits to a particular .html file, you can save it, and then drag it onto Netscape in the Finder, allowing you to immediately verify the changes. For the next go-round of the loop, switch back to the editor, make your changes, save again, then switch to Netscape and click the "Reload" button. E-Z.

• When you want to update the (Unix or MacHTTP) server, and you have System 7.1 or better, use version 1.4 of Anarchie. With Anarchie added to your set of open applications, you can use it to open up a window to the password-protected server directory containing the published HTML. Then simply drag and drop your .html file(s), or graphic(s), onto that window, causing the file(s) to be ftp'd to the server, thus making your updates immediately accessible to the Web without further action.

• If you wish to simulate the true experience of viewing your Web pages over a simulated Web connection while authoring, you can run MacHTTP and Netscape simultaneously on the same Mac. This trick involves setting your MacTCP control panel to use AppleTalk, setting a "dot-address" of, say, 192.0.1.2, restarting, and then using that dot-address instead of the usual server name when calling up your home page. Complete instructions for doing this are available via the MacHTTP Home Page at...

• By running MacHTTP and Netscape in this way, but while you are instead actually connected to the Internet in the normal manner, the Web pages you are authoring on your Mac are now also available to anyone on the Internet by having your friends reference the home page using *your* actual Internet dot-address.

  That dot-address is a fixed number for PPP-based connections, and a variable number for SLIP connections, and either are found displayed near the bottom of the MacTCP control panel while the connection to the Internet is active. (Don't forget about security concerns. :)

Miscellaneous tips

• "MacTCP Switcher" is a very handy utility that takes "snapshots" of your differing "MacTCP/service provider/MacHTTP" setups and then allows you to conveniently switch between them by simply choosing a menu item in your Apple Menu. This is how I switch between my "MacHTTP Web simulator" and my real Internet connection, for example.

• If you experience the *rare* instance of something you changed not showing up the way you expect within Netscape no matter what you do, first try quitting and restarting Netscape. But the fer-shure fix is to clear Netscape's cache from the preferences dialog. Many have gone in circles over this one! :)

• Occasionally, be sure to surf your web pages using the other browsers you don't normally use while authoring to double-check for the desired results. This includes browsers such as MacWeb, Mosaic, and Web browsers on other platforms you may have access to. Plus, starting in a couple of weeks, double-checking will include using the browsers from within online services such as Prodigy (Jan 27th), Compuserve, AOL, or eWorld. (Sheesh! :)

• Finally, take time out to have your web pages checked for correctness and compatibility by simply feeding the URL to one of the HTML validation services that are available free-of-charge on the Web. Here are links to a couple of them...

http://www.cc.gatech.edu/grads/j/Kipp.Jones/HaLidation/validation-form.html

• If your pages pass the test, you can proudly display the "HTML 2.0" logo -- a kind of Good Houskeeping Seal of Approval. :)

Have Fun!

http://www.electriciti.com/~supercrd/

Hope this helps.

Mark Hanrek
The Information Workshop
hanrek@cts.com