WebHints: FunnelWeb

Graphical Web Authoring Tools

At the time of writing (November 1995) there's a kind of gold rush on in the computer industry to bring dozens of graphical WWW/HTML editors to market as quickly as possible so as to enable Joe Sixpack to create his own web page by pointing and clicking on his PC during the NBL commercials.

Yeah right! :-)

Well, it's half sensible. Point and click webmaking will certainly make it easier for a lot of people to create webs. However, as anyone who's created any web of non-trivial size knows, inserting text and images into a web is the easy part. The time-consuming activities are:

Organizing the information in the web.
Procuring suitable images.
Editing the images for presentation in the pages.
Writing the text in the pages.
Wiring up links.
Managing the web as a whole.
Maintaining a consistent style throughout the web.

It would seem that the only reason anyone might care about an graphical web editor is if they REALLY don't like reading and editing HTML. As that includes about 99.99% of the population, I suppose the graphical editors will be a success. But WE don't mind HTML, do we readers? :-)

OK, so given that we're going to stick with editing HTML directly, how can the job be made easier? With FunnelWeb, that's how!

What Is FunnelWeb?

FunnelWeb is a literate programming macro preprocessor. It was originally designed to assist in the documentation of computer programs, but has since been found to be useful in the creation of collections of text files sharing common characteristics. This makes it perfect for webmaking.

A Simple WWW FunnelWeb Example

To use FunnelWeb to construct a web, you create a single web.fw file. This will contain the contents of all the .html files in the web (store the binaries elsewhere). The various .html files are represented as macros in the web.fw file. Here's a very small example FunnelWeb source file. It describes a web consisting of two files: index.html and feeding.html.

@O@<index.html@>@{
<HTML>
<HEAD>
<TITLE>The Walrus Web</TITLE>
</HEAD>
<BODY>
<P>Welcome to my web. For information on feeding walruses
click <A HREF="feeding.html">here</A>.
</BODY>
</HTML>
@}

@O@<feeding.html@>@{
<HTML>
<HEAD>
<TITLE>The Walrus Feeding Page</TITLE>
</HEAD>
<BODY>
<P>Feed your walrus fish!
</BODY>
</HTML>
@}

Feeding the above file through FunnelWeb will cause FunnelWeb to generate the files index.html and feeding.html. Though simple, even this feature alone makes FunnelWeb worth using as it means that you can:

Skip around the web without opening ten windows.
Store, communicate, and manage the web as a single file.
Perform find/replace operations on the entire web.

FunnelWeb Macros

FunnelWeb also provides a general-purpose parameterized macro facility. This means that you can define macros for all the repetitive HTML constructs. For example, in the above web, we could define a macro for the HTML at the start and end of pages.

@$@<Begin web page@>@(@1@)@M@{
<HTML>
<HEAD>
<TITLE>@1</TITLE>
</HEAD>
<BODY>
@}

@$@<End web page@>@M@{
</BODY>
</HTML>
@}

@O@<index.html@>@{
@<Begin web page@>@(The Walrus Web@)
<P>Welcome to my web. For information on feeding walruses
click <A HREF="feeding.html">here</A>.
@<End web page@>
@}

@O@<feeding.html@>@{
@<Begin web page@>@(The Walrus Feeding Page@)
<P>Feed your walrus fish!
@<End web page@>
@}

Because there's only two pages involved in the above, the simplifications provided by FunnelWeb may not seem worth the extra fuss, but imagine the savings and simplifications that the above macro mechanism can provide when your web is 10, 20, or 100 or more pages long. For example, this WebHints web has been constructed using FunnelWeb with a macro for the start and end of each page. Thus, a blank page in this web is expressed like this:

@O@<funnelweb.html@>@{
@<Begin page@>@(WebHints: FunnelWeb@)

@<End page@>
@}

The begin macro contains all the HTML introductory parts, the background and text setting and the font size setting. The end macro contains the entire page footer. The advantages of this scheme are as follows:

Not having to continually cut and paste repetitive HTML constructs.
A consistent style applied throughout the whole web.
The entire web style can be changed by changing a single macro definition.

Coding Common Hyperlinks

When constructing a web, some hyperlinks are referred to quite often. For example, there might be an acronym page to which several other pages link. However, each time you want to refer to the acronym page, you have to write something like:

For more info, see the <A HREF="acronym.html">Acronym Page</A>.

which is messy. However, if you're using FunnelWeb, you can define a macro for a link to the page:

@$@<Acronym Page@>@M@{<A HREF="acronym.html">Acronym Page</A>@}

Once you've done this, you can write:

For more info, see the @<Acronym Page@>.

Not only is this cleaner, but it means that if you ever change the name of the acronym page, or move it to another directory, you can change the FunnelWeb macro definition rather than performing a search/replace.

Other FunnelWeb Techniques

FunnelWeb macros can be used in many other ways to make writing HTML a breeze. Whenever the HTML gets too heavy or repetitive, you just stick it in a macro and keep on going. It's extremely effective.

How To Obtain FunnelWeb

FunnelWeb is free and is available for a wide variety of platforms, including Macintosh. For more information, check out the FunnelWeb page. FunnelWeb takes a little getting used to, but is definitely worth it for anyone serious about creating webs.