Software Reviews
Andy Boze, Editor
Programs Reviewed:
- HotDog Professional 6.2 (Sausage Software - www.sausagetools.com)
- NoteTab Pro 4.83 (Fookes Software - www.notetab.com)
Putting together a Web page isn't as simple as it used to be. Just a few short years ago, you could get by with knowing how to use about a dozen HTML tags. Today's Web pages are increasingly sophisticated and complex. Gone are the days when you composed your pages in Notepad. Word processors like WordPerfect or MS Word do acceptable jobs of exporting documents to HTML. WYSIWYG (What You See Is What You Get) HTML editors are wonderful if you prefer to focus on design and stay away from the HTML itself.
For all their convenience, WYSIWYG editors have some potential drawbacks. The code they produce is often idiosyncratic and bloated, and it usually isn't usable with any other WYSIWYG editor. Text-based HTML editors don't have these problems because the author is entirely in control. The author does have to have a good understanding of HTML, but the editor helps to relieve the most tedious aspects of composing a page. In this column, we'll take a look at two of the text-based editors.
HotDog Professional 6.2
Sausage Software
6500 Citywest Pkwy., Ste. 310
Eden Prairie, MN 55347
(952) 942-5858
www.sausagetools.com
Price: $99.95; SuperToolz plug-ins, $99.95; Visual Table Editor, $9.95; order directly from Web site.
Minimum System Requirements: Pentium PC (Pentium II or higher recommended); Windows 95, 98 or NT; 32MB RAM (64MB recommended)
HotDog has nearly everything that you would expect to find in an advanced HTML editor. One of its notable features is that it is highly customizable, from toolbars to layout to tag colors and just about anything else. HotDog has three main sets of features: functions, resources, and the editor. Let's start by looking at the program's functions.
All of HotDog's functions are available from the menu bar. Some of the menus will be familiar to any Windows user, and most of the rest will be obvious to anyone who has some familiarity with HTML. Many of the commonly needed functions can also be accessed quickly from the ten preconfigured toolbars. As with many programs these days, HotDog's toolbars can be dragged from their default locations and docked in other places within the workspace. Or they can be undocked and left to float anywhere on your desktop. Existing toolbars can be hidden or modified, and new custom toolbars can be created easily.
Menu Functions
The File menu contains a number of specialized functions in addition to the standard open, save, and print. "Import Text Document" allows you to import the text of another document into the current document or into a new one. Options are to import the text as is, enclosed in <PRE> tags so that it will display in your Web page exactly as it was in the original text; or you can convert the imported text to HTML with options to end lines with <BR> and to end paragraphs with <P>. "Preview Document" lets you view your current document in the Web browser of your choice, assuming that you already have it installed on your PC. "Open Website" lets you open a collection of files that you have previously defined. This is a particularly powerful function and will be discussed in more detail later.
The Edit menu contains the standard editing features, as well as a thesaurus and spell checker. "Paste Special" has two useful functions. "Smart Paste" lets you paste multiple lines of text as a single line. Choosing "Paste Into Table" lets you convert multiple tab-delimited lines into a table with all the necessary HTML properly inserted for you. This would be a nice feature to have in the "Import Text Document" as well, so that you wouldn't have to bother opening the document and copying text. It would also be convenient to be able to choose a different delimiter, but it's useful enough as it is. Also on the Edit menu is the "Preferences" dialog, which allows you to customize nearly every aspect to HotDog.
The Insert menu contains tools to let you insert common items, such as images, hyperlinks, comments, and lists. There are two special tools found here, "Image Thumbnail Table" and "Publish Field." "Image Thumbnail Table" lets you quickly take a collection of images and create thumbnail images from them. The new thumbnail images are saved into whatever location you specify, then a table is inserted into your document. The table contains the thumbnail images, and optional information about the originals, with hyperlinks to the original images. It took me less than two minutes to convert thirty GIF and JPEG images into thumbnails and have the table inserted into my document.
"Publish Field" is another useful Insert menu tool, allowing you create fields in your documents. HotDog comes with a single document template, but you can create as many of your own templates as you want. If you wanted to make templates for others to use with HotDog, you might want to be sure that they entered certain text in the document. "Publish Field" lets you automate getting that text. Whenever a document is opened from a template containing a publish field, HotDog opens a dialog for each field prompting the user for imput. The input text is then inserted into the document. You can define both the message in the dialog and a default answer. This probably works best for short pieces of text, like getting the page author's name or date. Alternatively, when you set up a field, you can specify that HotDog should fill in information automatically or read the information from a file.
The View menu contains tools that let you control what toolbars and resources are shown or hidden and what shortcut keys are in effect. The most interesting item is the "Multimedia Manager," which allows you to work with images, animations and sounds in a single environment. Open a directory containing multimedia files, and the different types will be displayed on different pages of the Multimedia Manager. Interestingly, it was able to determine that some of my GIF files were animated and showed them on the proper page. If you right click on an image, you can select to preview the image or insert it into your Web page, or you can edit the image in HotDog's built-in image editor, Image Lab. Image Lab isn't a full-featured graphics editor, but it does let you crop and resize images, set GIF transparency, do some JPEG effects and then save the edited image. Animations can be previewed or converted into still images. Sounds can be listened to or embedded in your Web page.
The Format menu lets you insert some commonly used format tags, such as bold, italic, heading, center, and paragraph and font attributes. Useful tools you'll find here are Quick Color, Document Properties, Document Information, and Convert. Quick Color lets you pick a color from a Web-safe palette or from a color picker with millions of colors and then inserts the hexadecimal code for the color into your document. Document Properties is a dialog that lets you fill in information about style sheets, background image and color, text and link colors, and then places that information into your document's <BODY> or <LINK> tag. The Document Information dialog provides an easy way to insert the title and metadata, such as keywords and redirection data, into your document. The Convert feature lets you convert text and tags to upper, lower or mixed case. You can also convert text to lists and to tables. The convert-to-list feature worked well but converting text to a table was less successful. The text had to be delimited with tabs, and multiple lines converted only to a table with a single row.
The remaining menu functions, Table, Frame, and Form, are relatively straightforward and provide tools and wizards to insert those elements into your document. The Tables wizard lets you create six predefined table types. The Quick Table tool lets you create a multirow, multicolumn table just by moving your mouse cursor over a grid that expands or contracts until you click on it when it shows the arrangement of cells you want. The Frame wizard makes it marvelously easy to create pages with multiple frames. You create a graphical representation of the way you want the frameset to look and enter the information for the contents of each frame. The HTML for the frameset is compiled and saved directly into the page you are editing. Creating a form using the form wizard is as simple as clicking buttons for the types of elements you want to include in the form and filling in the information pertinent to the element. For each element, the wizard only lets you fill in the information that is specific to its type. When you're done, the HTML is inserted into your document.
Resources
HotDog has thirteen resources that ease working with Web pages. One resource that many will find useful is the Web site manager. A Web site is a collection of HTML documents. Using the Website Wizard, you can quickly define your own Web sites. If you don't have the luxury of editing your Web pages directly on the server, you can upload a Web site by FTP and all files in that Web site are uploaded along with it. According to the
documentation, "HotDog Websites supports a complete multiuser environment with complete file locking and task management facilities. The new implementation of Tasks allows a website to be designed coherently by coordinating the work of many people. All site changes are updated on the fly on all users' machines in a networked environment. All basic functionality required of multiuser support has been included. For example, HotDog Pro will detect two users trying to edit the same file at once and will send a warning." A separate Internet Files resource lets you connect to an FTP server to download files directly into HotDog for editing. A file that was opened from the FTP server is saved back to the server after you have finished editing it.
Perhaps the most useful resource is the HTML Property Sheet. As you compose your document, clicking on any tag will display the tag's property sheet as well as complete information about the tag. The property sheet is a list of all attributes that apply to the particular tag element. The attributes are arranged into categories so that it's easy to tell which browsers support them. If you want to include an attribute in the tag, it's as simple as selecting the attribute from the property sheet. If an attribute has a fixed set of values, you can generally select the value you want from a drop-down list, which might be numbers, text or colors. Where there are no set values, you can type them on the line next to the attribute. Anything you enter in the property sheet is correctly added to the tag in your HTML document. Below the property sheet sits a window that explains in great detail how the element is used and offers suggestions and alternatives.
Other resources include a tool to create cascading style sheets, a list of extended characters that can be inserted directly into the document you are editing, a tool that displays the HTML structure of your document in an outline format, and several more.
The Editor
When you open HotDog, you see a layout that will be familiar to any Windows user. The menu bar and toolbars are at the top, with the workspace taking up the rest of the window below. The workspace is divided into three panes. The center pane comprises the editing area, where you work on the text of your Web page, and a preview area at the bottom, where you can see your HTML as it would appear in a Web browser. The two resource panes are at the left and right of the editing pane. The preview area, called ROVER, and the resource panes can be toggled off to maximize the editing area.
The editing pane has several buttons at the bottom so that you can toggle features such as word wrap, display of hidden characters like tabs and carriage returns, and syntax and tag highlighting. Syntax and tag hightlighting are two particularly useful features. By default, with syntax highlighting enabled, all HTML elements are colored blue, their attributes are colored magenta, attribute values are green and text is black. HTML, Cascading Style Sheets, JavaScript and other "languages" used in Web pages can all have their own syntax colors, and the colors are completely configurable. Tag highlighting, on the other hand, lets you color specific tags. For example, you might find that it would be useful to set all table-related tags to be yellow on a black background. With tag highlighting enabled, you can easily distinguish tables in your document from other HTML.
You could simply type all of your text and HTML code directly into the editor, but then you wouldn't be taking advantage of all its power. When you open a new document, you get a basic HTML template. Most commonly-used elements can be added to the document by positioning your cursor in the document, then clicking on an appropriate button. Depending on the element you want to insert, the code will either appear in the page or a wizard will open to help you create more complex elements like lists, tables and forms.
If you have the Property Sheet resource open, you can click on any HTML element in your document and a property sheet for that element will be displayed. From the property sheet, all of the element's possible attributes appear and you can select specific values that will then be placed directly into your document.
You can also right click on any tag in your document. Doing so will pop up a menu of available tasks, which for many tags will include an "Edit" function. For example, if you right click on a list tag such as <UL>, your list is opened in its own list editor. In the list editor, you can add list elements or delete them, define it as a bulleted or numbered list, select a bullet style, and select other list options. Clicking the OK button saves the edited list, with all of the options you selected, back into your document in proper HTML.
As I used HotDog, I was often surprised by the little things it did. Moving your mouse cursor over an image link displays a thumbnail preview of the image. Highlighting a color code such as #00FFA8 shows a small sample of the color next to your mouse cursor. HotDog also supports drag-and-drop editing so that you can highlight text, then move or copy it elsewhere in the document just by dragging it.
HotDog isn't without flaws. I use a high resolution on my 19" monitor, so I have enabled large fonts rather than using the normal small fonts. This seems to have an effect on some of the wizards and dialogs in HotDog, cutting off or obscuring the text in them. One thing lacking is a table editor. It's easy enough to insert a new table, but editing an existing table must be done completely by hand. Another lack is a multidocument find and replace.
SuperToolz Plug-ins
Sausage does make up for HotDog's deficiencies by offering a group of plug-ins called SuperToolz that can be purchased separately. One tool is the Visual Table Editor, which lets you to edit an existing table in your document. It allows you to manipulate the cells of the document and the contents of the cells through a simple graphical interface. The contents of a cell can be edited or dragged from one cell to another. Cells can be deleted, added or merged by right clicking on them. When you have the table laid out the way you want it, you simply save the changes back into your document. Another tool is a multifile find and replace. It only works across files that you specify rather than open documents in the editor, however.
There are several SuperToolz that can be handy to have. The Image Lab tool is actually an expanded version of the Image Lab function already included with HotDog. The tool allows you to rotate and resize images, blend images, add captions, and turn images into buttons for your Web pages. If you like to use backgrounds on your Web pages, the Reptile tool can make repeating tiles and gradients. Other tools let you insert JavaScript effects into your Web pages and help you compose multimedia presentations for your Web site.
Conclusion
HotDog is a relatively easy to use program offering a great set of features and a high degree of customizability. People new to HTML may very well be overwhelmed by all of the features, but the resources can all be turned off, leaving you with just the menus and toolbars that should be simple enough for anyone. If you are maintaining a large Web site, or have many people involved with the site, the Website management resources make this a good program to consider. It is reasonably priced, although you must add some of the SuperToolz plug-ins to get essential features.
NoteTab Pro 4.83
Fookes Software
Av. Eugene-Pittard 22 Ter
CH-1206 Geneva
Switzerland
fax: +41/22-789 58 44
sales@fookes.com
www.notetab.com
Price: $19.95
System requirements: Windows 95/98/ME/NT4/2000 or higher, 486 processor or faster, 4 MB of free disk space, 8 MB of RAM (16 MB for NT)
Technically, NoteTab Pro isn't an HTML editor, it's a powerful ASCII text editor with HTML capabilities. An ASCII editor won't let you compose documents with fonts and graphics like a word processor will, but for writing HTML code, programs or e-mail, a program like NoteTab is all you'd ever need. First we'll look at NoteTab's general features, then we'll take a look at features useful for Web page authors.
The menu bar consists of nine menus which contain functions that are mostly obvious. The File menu has all of the standard functions for opening, closing and printing files. There's also a Reopen function that lets you select from among the fifteen most recent files you had open. Of interest to people who need to use files on various operating systems is the Export function. You can take any file and export it into one of four formats: DOS/Windows, Mac, Unix, or even EBCDIC. Also useful is the Send function, which opens your e-mail client with the text of any document you have open in NoteTab. It worked very well with Netscape Messenger on my PC.
The Edit menu has all of the standard editing functions. I found the Reload function to be useful. If you make changes to a document and decide you've really made a mess of it, you can reload the document from disk to get a fresh, unchanged copy to work with. Another nice feature is Paste New, which pastes copied text into a new document without you having to open it first.
The Search menu gives you access to NoteTab's powerful find and replace functions. The Find function is mostly what you would expect. You enter a string of text that you want to locate in your document and as NoteTab finds each occurrence of the string, the string is highlighted. You can select whether you want the string to be searched as a whole word and whether the search should be case sensitive. You can also select whether you want to perform the search on just the current document or all open documents within NoteTab. The Replace function works in a similar manner, except you also specify the text that should replace whatever matches the find string. The thing that makes Find and Replace exceptionally powerful is that they support regular expressions. A regular expression is basically a pattern. For example, if I wanted to find all instances of words beginning with "n" and ending with "e", like "none" and "name," I could perform a search using the regular expression \sn[a-z]*e\s . You can use regular expressions with the Replace function, too. Find and Replace aren't limited just to files you have open in NoteTab. The Search Disk function lets you perform those operations on any files. If there are times that you don't want to find a text string but want to know how often it occurs in your document, the Count Occurrences funtion will do just that.
The Search menu also has functions for working with bookmarks. A bookmark is simply a marker you can place within your document. This is useful if you are working with a large document and want to be able to move quickly between sections of it. You can have up to ten bookmarks in a document. When you place a bookmark, a square, numbered bullet appears in the left margin at the beginning of the line. Although you can create bookmarks and move among them from the Search menu, the built-in keyboard shortcuts make it much more convenient to do so.
The View menu lets you control various elements of the program, including whether to show or hide the Toolbar, Clipbar, Ruler and Status Bar. Some of these elements will be covered later. All of NoteTab's options can be configured through the View menu.
The Modify menu has a variety of functions that let you manipulate the text of your documents. Some of the functions are: join and split lines, indent and unindent lines, insert bullets and line numbers, change text case, and quote or unquote text for e-mail. One particularly useful function allows you to sort lines in ascending or descending order. The sort function could be even more useful if you could select what column of text you wanted to sort on, such as the second character of each line, but clever users will be able to figure out how to do this with a little effort. Block editing is another useful function that lets you edit columns of text. For example, if you had a document with three columns of figures, you could easily move the first column to the end using the block editing functions. A handy feature of block edit is Sum, which gives you the ability to select a column of numbers and have it totaled.
The Document menu gives you a few convenient tools and functions. You can select properties for a specific document, such as word wrap, automatic indent and tab size. Insert File lets you insert the text of another file into the document you are currently editing. You can also insert date/time, the document's file name, and hard page breaks. An interesting function here is the ability to designate a document as a paste board. Whenever you copy text from any document, that text automatically appears in the paste board, in effect giving you a multiline clipboard.
The Favorites menu is a customizable selection of documents you frequently use or want to access quickly. The Tools menu has a number of useful feature. Enabling Auto-replace mode lets NoteTab replace text as you type it and you can completely customize what text is replaced. For example, if you commonly miskey "the" as "hte", NoteTab will correct it for you automatically. You could also have NoteTab replace "ALA" with "American Library Association" as you type. If you read long texts, you might find the Auto Scroll tool useful. Auto Scroll lets you scroll through text automatically at a rate you select.
The real power of NoteTab, and what makes it useful for HTML coders, is its built-in scripting language. Completed scripts, called clips, are stored in libraries. In fact, the Auto-replace feature is based on a clip library. NoteTab ships with a number of clip libraries that are too numerous to detail here. I'll focus on the HTML libraries.
If you enable the Libraries Bar, you'll see a series of buttons along the bottom of the NoteTab window. Clicking on any button will open its library in a panel beside the editing area. If you select the HTML library button, the library displays a menu of HTML editing clips. The "New Web page" clip, for example, is a wizard that leads you through setting up the tags for a basic Web page. After entering the information in the wizard, the properly composed HTML is written into a new document, which can be further edited.
The other HTML clips work pretty much as you would expect. To place header tags around text, you highlight the text, then double click on the header clip entry in the HTML library. It prompts you for the level number of the header, then places the header tags around the text you highlighted. Because it doesn't require any attributes, the center clip simply places center tags around any text you highlighted. There are also clips for more complicated elements like lists. The list clip prompts you for the number of items in the list, then inserts the HTML code for a list of that number of elements at the current location of the cursor in your document. NoteTab also has an HTML auto-replace clip library. If you enter your tags by hand, every beginning tag you type will automatically have its closing tag entered for you.
Another NoteTab feature that extends its usefulness to HTML coders is the Clipbar. A clipbar is a collection of clips from your clip libraries. The clips appear as buttons on a bar below the main toolbar. You can create your own custom clipbars simply by dragging clips from any clip library onto a clipbar. NoteTab comes with two HTML clipbars that use clips from the HTML clip library. Using a clipbar makes it easy to find the clips you use frequently.
NoteTab is highly configurable. Just about any function can easily be added to NoteTab's main toolbar. There's too much to be able to cover here, but a couple of configuration options will be of interest to HTML coders. The colors in the editor can be customized. NoteTab can recognize HTML tags, links and comments, as well as URLs, so you can pick colors for each of those, allowing them to stand out from the rest of the text of your document. NoteTab has a "Document to HTML" function, that takes any text document and converts it to HTML. You can customize the HTML NoteTab uses in that conversion.
Anyone who works with ASCII text will find a lot to like about NoteTab. Those who edit Web pages will appreciate the HTML functionality. NoteTab will be a good editor for people who really like to get their hands dirty with HTML. It's not a full-featured HTML editor, but it wasn't meant to be. Once code has been inserted in your document, you can only edit it manually. You can't edit your tables or lists in specialized editors. And NoteTab doesn't have sophisticated tools for Website management. Nevertheless, what it does do, it does amazingly well.
NoteTab comes in three versions, Pro, Standard, and Light. The Pro version has the richest feature set. Only the Pro version has multilevel undo/redo, bookmarks, and URL and HTML highlighting. The Pro and Standard versions include a spell checker, thesaurus, and clipbars. Even without those feature, the free Light version is incredibly useful.
Software of Which You Should Be Aware
Have you ever felt that your desktop (the one on your computer) was too cluttered? You've got all those shortcuts there that you can't get to because they're covered by the word processor, the Web catalog, your e-mail and a half dozen other things. Here are a couple of utilities that can help you work around the mess. Both programs should work with Windows 95, 98, or NT.
TrayMenu 2.0.1 is a nifty little program that sits in the system tray, near the clock on your Windows task bar. Its main purpose is to present you with a menu of all the shortcuts on your desktop. Even if your shortcuts are obscured, clicking on the TrayMenu icon will pop up a list of them that looks much like the Windows Start menu. Clicking on any shortcut on the TrayMenu menu will launch the shortcut, just as though you had double clicked on the shortcut on your desktop.
A useful feature of TrayMenu is to be able to put other shortcuts directly into the system tray. Any shortcut that you place in the same folder as TrayMenu's program will appear next to the TrayMenu icon. And you can make a special shortcut that places a Window List along side the TrayMenu icon. The Window List is a list of all windows, open or minimized. Any window on the list can be selected to open it and bring it to the top.
TrayMenu is easy to install. Just download the ZIP file and unzip it to its own directory. If you want to make sure that it runs every time you log in, add the program to your Startup group. TrayMenu is free from Iglyph Design and can be downloaded from the company's Web site, www.iglyph.com.
Tomoaki Nakashima's WinScroll lets you have several virtual desktops that you can scroll through. You can think of your desktop as having two layers, one layer that holds your wallpaper, shortcuts, and task bar, and another layer that holds any open windows. Using the WinScroll scrollbar, you can scroll the layer that holds the windows while the other layer remains fixed.
You can configure the number of virtual desktops you want to have. If you selected three, for example, then you could scroll through three desktops of windows. As you scroll from one desktop to the next, any window you open on that desktop stays there. You could have your word processor open on one desktop, e-mail on another, and your Web browser on a third. You can still use the task bar to select any program you want to use since the task bar doesn't scroll. Selecting a program from the task bar will cause the correct virtual desktop to scroll into view.
By default, the WinScroll scrollbar attaches itself to the right side of your desktop to let you scroll your virtual desktops vertically. You can undock the scrollbar and resize it to sit anywhere on your desktop. WinScroll's Gather feature lets you collect all open windows onto the current virtual desktop. Another useful feature lets you select windows that you don't want to scroll, essentially attaching them to the nonscrolling layer.
WinScroll is easy to install. All you have to do is download the ZIP file and unzip it to whatever directory you prefer. If you want it to run every time you log in, add the program to your Startup group. Double right clicking on the scrollbar brings up the configuration options. Download the program for free from the author's Web site at www.kinet.or.jp/naka/tomo/winscroll.html. Unless you prefer Japanese, be sure that you download the English version.