Designing Web Pages with Home Page Publisher 2.0

Written by Marco J. Shmerykowsky

Introduction

When this whole "Internet and world wide web thing" started gaining speed a few years ago, it was pretty much the domain of computer types who weren't frightened by writing code. When you wanted to create a web page, you simply fired up your favourite text editor and started typing. After writing a few lines of C code, putting together a few lines of HTML is an exercise in relaxation.

Not everyone, believe it or not, likes to write code. Some prefer to work in a visual environment where you drag, drop, and click your way to a finished product. In order to serve this market, software developers began to develop visual tools such as Microsoft's FrontPage editor, Adobe's PageMill, and Netscape's Composer. The OS/2 market has its own selection of web authoring tools. Although I tend to prefer the text-editor approach, my attention was caught by a product from JBC software called HomePage Publisher.

Upon starting the program, the user is immediately presented with a familiar interface which looks like a standard word processor.

The top of the screen contains a set of standard pull-down menus and toolbar buttons which cover common file functions and the majority of the commonly used HTML tags. The rest of the screen contains the "work area" where both "non-frame" and "framed" pages are composed. All three of these areas have a few special features which I find interesting.

The pull-down menus provide access to some unique and useful functions. The first function, called "Mirror Web", allows a user to essentially copy entire web pages from the Internet to a local hard drive.

This feature saves the HTML code, all associated graphics files, and reproduces the referenced directory structure in a user specified directory on the local machine. Since this feature can encounter files with long file names, it must be configured to save the files to an HPFS formatted drive. I found this to be quite nice for those occasions when I wanted to do an "offline" review of an interestingly designed web site. In order for it to be truly useful for web site management, however, it would have to provide a two-way transfer capability so that once changes to a mirrored web site are performed locally, they can be quickly uploaded to the remote site.

The next feature present on the "File" menu has to do with reviewing both the HTML code and the final pages. Although HomePage Publisher provides a WYSIWYG viewing capability, the author has made provisions for allowing the user to preview the pages through external programs such as Netscape/2 or Web Explorer. If Netscape is already started, then HomePage Publisher will use a DDE link to transfer the current document to the browser, otherwise the document is first saved and then loaded into the browser.

The program also allows the user to view and edit the HTML source code through the use of either an internal or a user configured external editor. Users of visual programs tend to fall into two groups over this capability: those who want formatted code and those who don't want to ever see the code. I guess due to my background as an engineer, I tend to prefer formatted code. For example, I like to indent my "data" tags in a table slightly so that I can quickly spot where the row ends and begins. This would be analogous to indenting the code placed in between braces in a C program.

Version 2.0 Level B1 of HomePage Publisher adds an excellent way satisfying the desire for formatted code. [Author's Note: Level C should be released shortly.] Under the "Options" pull-down menu, there is a selection titled "HTML code." This option brings up a dialogue box that gives the user the ability to control the format of the code.

Rather than adhering to an arbitrary standard, the program allows the user to choose the maximum line length, the case of the HTML tags (ie. all uppercase, all lowercase, or mixed case), the number of spaces to "indent" code located "between the braces" in C parlance. The user can also choose from a list of options such as "skip line before Paragraph" and "Generate end-row tag." I hope this feature gets expanded a little further after some input from the program's user base. I'm sure there are a couple of additional formatting options which sit on many user's "wish" lists. For example, I think it would be helpful if the internal HTML viewer provided a visual distinction between the HTML tags and the page content. Although it's not a format which gets saved to the HTML file, it does make working with the code easier within the program.

The pull-down menus also provide access to "templates" for the creation of new documents, insertion of common HTML tags, a spell check utility, and toolbar configuration. The program provides two customizable toolbars. These toolbars can be placed at either of the application window's four edges, they can be detached from the main application window, or they can be hidden from view. The user has the additional option to choose between icons only, text only, or text and icon buttons. Finally, the user can employ drag & drop techniques to organize the functions on the two toolbars.

Functions can be moved between the toolbars, removed, added, and grouped in any order. The user also has the option of disabling the "bubble help" which pops up when the mouse pointer rests onto of a toolbar button. The flexibility provided by the toolbar could be further improved if the user had the ability to create new buttons and functions such as adding a button which would link to an external graphics program.

Once you've gotten familiar with HomePage's pull down menus and configured your toolbars, you're ready to start designing web pages. (As an aside, I've discussed my "golden rules" for web design in the EDM/2 article "The Service-Oriented Home Page Primer").

To start a new page you simply select one of seven "template" options from the "File|New" menu. The templates are nothing more than HTML files with the names "template.001" to "template.007". Thus in order to assign a unique HTML creation to a template selection, the user only needs to perform a simple copy operation (i.e. "copy mypage.html template.001"). After selecting the template, HomePage will immediately ask the user to save the file. This is done so that the program can automatically create the relative references to image files, sound files, and other links during the design process. An immediate save isn't mandatory, but it seems to make dealing with the references easier.

Now that a some sort of basic HTML document has been loaded, the user can begin the creative process. This process can be accomplished by working in two different "logical" environments. The first environment is a pure WYSIWYG world where you don't have to think about special symbols or dialogue boxes. Simply start typing away as you would in a word processor. When the program needs additional information, a dialogue box will pop up and ask for additional information. It's a basic "don't bother me with the details" approach.

As a engineer, however, I tend to want a little more insight into what I'm working with. Fortunately, HomePage publisher provides a few options which provide a functionality that is similar to WordPerfect's "reveal codes" option. Under the "Options" pull down menu, the user can select "Extended Setting" and "Show Attributes." The "extended setting" option inserts a dynamic dialogue box across the top of the HTML document.

This dialogue box provides a tabular method for filling in the information required by a particular tag. For example, when inserting an image, the dialogue box will prompt the user for values for a border thickness, horizontal & vertical positioning, alternate text, alignment, and "resized" image parameters. Since all of the options are presented, the user is relieved of the need to memorize the acceptable parameters for a certain tag. It should be noted that this "extended setting" has a three way setting. It can be displayed continuously, automatically when called for, or "on demand" by double left clicking on the document itself. Finally, the "show attributes" option displays graphical symbols in the work area to indicate information such as a character return, an indent, or a change in font.

The rest of the basic page design is very similar to life within a word processor. Simply start typing. Minor typeface and text positioning such as bold, italics, and right justification are accomplished through standard toolbar buttons. The "fancy" stuff is accomplished through additional toolbar buttons. There is essentially no difference between laying out a form with selections lists galore and creating a series of hypertext links. Simply position the cursor, click the appropriate toolbar button, and fill in the information requested by the dialogue box. It should be noted, however, that the user is still restricted to standard HTML constructs which define characteristics such as font style and size. Although the program seems to operate like a visual, desktop publishing like environment, you're still dealing with basic HTML.

Two key features in many OS/2 programs have always been the use of the right mouse button and the ability to drag & drop. HomePage Publisher provides both of these capabilities to some extent. The context menu which pops-up when the user right clicks on the HTML provides management capabilities for both tables and frames. The user can delete, insert, or duplicate either an entire cell, row or column in one simple step. The "extended settings" for a given table, row, or cell can also be accessed from this menu. Personally, I found this to be one of the most useful constructs in the program where the "visual design" method posed some attraction for the "ol' fashioned" hand code method I tend to prefer. It should be noted, however, that table "size" must be done manually by choosing the numerical dimensions or relative percentages. It would be an improvement if the user could resize the tables with the use of the mouse, thus adding to the "visual" design experience. Finally, the frame management capabilities have a similar implementation. In addition to toggling between a "no frames" and "frames" view, the user can create, delete, and split frames.

The drag & drop capability of the program is helpful and seems to be undergoing continuing improvement. In version 2.0 Level B1, the user has the ability to drag & drop images between HomePage Publisher and OS/2 folders and other programs. Earlier versions only allowed images to be dragged "into" the program. Within the program, however, dragging an image to another part of the document will create a duplicate reference. Since this is supposed to be an environment where page layout is done visually, I feel it would be more effective to have the program move the image. Ideally, the program could provide a user defined toggle so that a default action of either "copy" or "move" could be set.

Since this isn't an article on the details of web design, I'm not going to go into the specifics of the HTML tags and features which HomePage Publisher is capable of producing. In general, the program produces quality code which is in compliance with the HTML 3.2 specification. The program also tries to produce code which will produce standard effects in multiple browsers. For example, the program implements centring of text through the use of both "alignment" parameters and the Netscape developed "center" tag.

With that stated, I'd like to highlight a few additional tid-bits to improve the work experience. First, for those users that have hair trigger delete keys, HomePage Publisher provides a convenient undo/redo dialogue box where each action performed is listed. The user can either step through the list or jump to a point within the list. In terms of functionality these features would be similar to "tracing" through a function and setting breakpoints.

The next feature is the implementation of a "color wheel" for picking colours.

The colour wheel can be used to set the background colour of the document, unvisited links, visited links, active links, default text, and 15 "custom" colours. These custom colours may be accessed when assigning a different colour to a block of text or to a portion of a table. Although for the most part users should attempt to stick within the 256 colour palette when designing a page, the colour wheel makes choosing a colour quick and simple. In order to gain an appreciation for how well it works, simply compare it to the "colour mesh" implement in that product from the Northwest that resembles a product commonly found at Home Depot.

The final point worthy of special notice actually consists of two interrelated creations. The first is the help system. Unlike many shareware applications, the developer of HomePage Publisher has taken the time to create a searchable help document which contains both screen shots and quality descriptions for all of the officially sanctioned functionality within the program.

Unofficially, however, HomePage Publisher has a very useful feature which should spark the interest of any OS/2 developer. The program is capable of automatically generating IPF files. Once these files are put together with an index and a "help compiler," a searchable INF file is created. Although the feature is provided "as-is," I feel it is extremely useful. Consequently, here are the "as-is" instructions on how to generate IPF files:

1. Manually insert the following tag into the HTML file to be "converted" prior to loading it into HomePage Publisher:
2. Load this file into the program. Upon your next save, the program will rewrite it into both HTML and IPF formats.
3. All image files used in the HTML document must also be saved in a BMP format. This is due to the fact that IPF supports images in a BMP format only. When HomePage Publisher creates the IPF file, the extension on all image file references will be changed to .BMP.
4. Manually create a table of contents for your IPF files
5. Compile the IPF files. The required compiler should ship with most OS/2 compilers. It was included in the copy of Watcom C/C++ version 10.0 which I purchased a few years ago.

With this utility a shareware author can create an on-line reference manual and a searchable reference manual in one shot.

Finally, I must address two hardware related issues. First, HomePage Publisher requires at a minimum a 486DX4 processor and 16 Mb of RAM. The author recommends a Pentium or Pentium Pro class machine with 32 Mb of RAM. A 386 processor or a system with 8 Mb or less of memory is insufficient. I tested the program on both a 486DX4 - 100 machine with 48 Mb and on a Pentium Pro 200 with 64 Mb. Although the 486 system exhibited slower video response, it adequately supported the program.

The second hardware issue relates to a video display problem which seems to be centred on a bug in the OS/2 Presentation Manager API. These API's, which are used when displaying transparent images or "background images", can cause problems with some video drivers. I tested the program with an ATI Graphics Ultra Pro (EISA) card and a Matrox Millennium card. Both cards failed to properly display the background image or the "transparent colour" of an image. Once I tried the GRADD drivers for the Matrox card, however, the background images began to display properly. According to the HomePage Publisher web site both ATI and Matrox technical support are looking into the problem.

For a comparison, I feel that HomePage Publisher is on the same level as Adobe's PageMill for Windows. A few users I've spoken with have questioned the parity on price. While both programs retail for nearly $100, Adobe theoretically provides the promise of better technical support. However, in my personal experience, I've gotten far more solutions and bug fixes from shareware authors than I ever got from a major corporation. Thus I don't consider it an issue.

So what's the long and short of it from an engineer who is a confirmed command line junkie? In short, HomePage Publisher is an excellent program which includes a few little "features" which places it one notch above equivalent Windows programs. It seems to be improving with time. As long as user feedback (both "I want to see the code" and "code - what's that" variety) is continually factored into the development of the program, OS/2 users can expect to have a quality web page design tool.

HomePage Publisher 2.0 Level B1 [Note: Level C to be released shortly]

Price:

HPP 2.0 Entry version ($49). This registration will not give you access to frame support.

HPP 2.0 Pro version ($95). All the options enabled, including frame support.

JBC Software
Jean-Bernard Clerin
20, rue de la Beauderie
77173 CHEVRY-COSSIGNY
FRANCE
E-mail: Clerin@CompuServe.Com
Home Page: http://ourworld.compuserve.com/homepages/clerin/