A Fast Track to Create a Really Good Website

This is a menu of the topics on this page (click on any):

• Background   
• The Caveats of My Approach   
• An Example of My Approach   
  • A: Determine name, e-mail address, copyright & local path.   
  • B: Define website structure (tree of files & maybe subfolders).   
  • C: Select a template (or design one).   
  • D: Select color scheme (or make up a new one).   
  • E: Define metatags & icon graphics (if available).   
  • F: Create graphics & add to them to the resources folder.   
  • G: Assemble available source material (usually text & graphics).   
  • H: Compile or assemble the local version of the website.
  • I: Load the local website in your browser for quality control.   
  • J: Upload the local version of website to the server.
  • K: Verify there are no broken links.   
  • L: Verify the html code.
  • M: Improve content & graphics (discuss design criteria for a good web site).   
  • N: Improve content & graphics (getting the client to do the most work)   
  • O: Promote the website.   
  • P: E-commerce
  • Q: Measure the effectiveness of the website.   
  • R: System Infrastructure
• Helpful Websites for People Building Websites   
• Conclusion.

These key words may help (click on any): HTML    IE5 Save As    portal    templates    philosophy    java    my approach    start    structure    template elements    template definition    executables    color    metatags    graphics    compile    quality control    upload    verify links    verify code    design criteria    gif vs. jpeg    improve    promote    e-commerce    measurement    infrastructure    help    conclusion   .

Background

The internet is without a doubt becoming an immense force in technology and commerce. In terms of its implication for our way of life, its like the printing press and television except that it's happening in 10 years instead of 200 years or 50 years respectively for print & TV. In terms of its earning opportunity and its impact on commerce, it is the days of the 19th century "gold rush" and "robber barons" all over again.

From the standpoint of major corporate investment, the name of the game is to gain position. You don't even need to make money. Earnings and earnings multiples have no bearing on Internet stock prices. Look at this chart of the stock price of Amazon.com over the last two years.

Compare that with the revenue and earnings trends of Amazon.com over the past three years. And amazon.com doesn't predict positive earnings anytime soon either.

One of the truly remarkable things about this revolution in our way of life is that you can become a player with less capital and fewer technical skills than are required by most other high tech enterprises. Even if you don't care to work with it full time, you surely ought to have web skills within your repertoire. And the demand for talented people with web and e-commerce skills is very, very great.

If you already have skills in APL, I think you can make those skills a distinct advantage as a tool for the internet. But before we get to that there are a few other tools we'll need as well.

HTML is common to all approaches to the web, easy to learn, and absolutely mainstream, so let's take HTML as a given. Let's learn it happily. What we need to know is really simple, and the rest we'll learn as we need it.

Next, there are some things wherein HTML needs augmentation, especially things related to interactivity and special effects. So, we need some additional tools. The mainstream way to get these tools is through cgi, Perl and Java and the many software products built upon C and Java that enable one to be productive and splashy. Cold Fusion is the most widely used such product (Allaire Corporation) but I think APL can beat it in many applications. I'm told the minimum cost for putting up a modest shopping cart website with Cold Fusion is $3000. I wouldn't want to compete with that with what I have in APL today, but a real e-commerce website costs $20,000 to $200,000 and often millions of dollars. For $20,000 plus, I'd rather be working in APL.

One advantage that we APL'ers have is that we are accustomed to creating patterns (subroutines) and then providing parameters (arguments) to do a lot of work. Everytime I talk to a cgi/Perl/Java person it appears that they are explicitly hardwiring page references and parameters into intricate cgi, Perl and Java code that looks dreadfully tedious to me.

I am presently maintaining about 6500 web pages with highly varying levels of sophistication. Most are simple HTML. Half a dozen use cgi, one page uses Perl, and 400 or so pages use Java, Java applets or Javascript. Here's a web page that describes them: www.devplan.com/quikrite/qkwxmpls.htm

The way that I have learned is by looking at the work of others, and I'm happy if you want to look at my code.

Actually, if you want to look at my code I really can't do anything about it. Microsoft Internet Explorer 5.0 (IE5) has a wonderful feature whereby you can go to "file" and then "save as" and IE5 will neatly place on your hard drive the page you want and it will place into a single subdirectory all the gifs, jpegs, javascripts and whatever else is needed to render the page. It also changes all the references in the subject page so that instead of referencing the asset that the original programmer referenced, it references the asset as it is on your hard drive. So, you have a totally working web page in your computer with all the assets needed to make it work stored neatly in a single subdirectory. This is a great learning tool.

Here are some suggestions I have for one who wants to get started.

I've created a "portal" where I have made available the URL's for several hundred sites proven effective either by high traffic or by awards from organizations who may or not have objectivity. See: www.qkw.com/portal

Next, I've created ten templates which really are an approach which makes it very easy to create web sites. These are called "t0" through "t9" and can be seen at www.qkw.com. These first ten templates are compared at www.qkw.com/template. New templates can be easy to create, or they can be very complex.

I've begun developing my philosophy for creating web sites, see: www.devplan.com/quikrite/webdesgn.htm.

My approach to the web emphasizes spareness, efficiency, and emphasis on content and navigation.

I am finding java useful, and have examples of java code, javascripts, and java applets among my pages. These terms are a little confusing, and java is important, so let's take a moment to differentiate them.

Java is a cross-platform application-development language from Sun Microsystems. The idea behind it is quite simple: enable programmers to write code for programs that will run on a variety of platforms, including Mac, Windows and Unix.

Java also is useful for creating small application modules, known as "Java applets", for use on Web pages. Applets are compiled programs written in Java language but executable when they are embedded in Web pages. They can read files (like a data file on server) but generally cannot write to files.

JavaScript, a separate language that originated at Netscape, has some things in common with Java but is more comparable to languages such as Visual Basic or Perl. A "script" is similar to a macro. It takes a few commands and groups them together. Javascript is a series of instructions included in HTML code and run according to HTML specs (onmouseover, etc).

The Caveats of My Approach

My approach differs from the approach of most website tools and designers.

• I'm not drawn to the mystique of the creative process. I'd rather hire visual artists than do it myself and I'm always alert when I think I've found someone who might be good at it and who might like me for a client. As I said above, my focus is on content, speed of processing, and navigation. And, of these, content is king. Most of the people designing websites are producing pages that are slow and cluttered. I want my work to be like that of those who are producing effective web pages. So my approach is to study their pages and learn how to build templates that will replicate them with my content and with the easy variations that customize the implementation.
• Because I'm focussed on production, evolution, and therefore adaptability, I want tools that do a lot of work for each "event" I'm required to initiate. Pointing and clicking is labor intensive when you're managing a large website. A friend said, "Can't I download hundreds of tools for building websites from the internet?". I said "Yes, and each tool builder took pride in the range of flexibility he gave you. That means you might have hundreds or thousands of mouse clicks for each web page you create." I want to show you how to build a complete and lovely java enhanced web site...
  • in ten minutes if you have a talented repeat client,
  • a few hours if you have a clever but new client who followed your instructions,
  • or in a few days if you have a client who merely has his act together.
  • Admitedly, most clients don't fall into any of these categories, so be sure to put clauses into your contract providing for hourly billing for work he or she could have done.
• If you really believe that "content is king", then you are likely to be accumulating information in a format that is adaptable to many purposes. For example, I will soon have about 3000 photographs. For web display, photographs should be jpegs with 2,000-10,000 bytes for a thumbnail image or 12,000-50,000 bytes for a normal web image. If you are serious about accumulating images, you should think of your source art as being of the best quality you can manage. For magazine use, an image is likely to be 10-75mb. So, we have three formats for images and only one is important to archive. We have thumbnails, web images and "source art". The smaller image formats can all be easily created from the "source art", so only source art is important to protect with archival security. This viewpoint applies to other source materials, including text. Several decades ago, Marshall McLuhan said "The medium is the message!". That's because we were only then discovering the power of the media. Now the power of the media is obvious, so the useful expression is "Content is king!".

An Example of My Approach

During our workshop, we'll look at several templates that range from the simplest to some that use impressive special effects using Java. We'll use one of the java enhanced templates to build a website during the workshop using the same 12 steps I use for all my websites (A-L below).

A: Determine name, e-mail address, copyright & local path.

You only need five things from the client to make a very impressive start: the name of the site, an e-mail address, agreement on who owns the site, the path where you'll place the site in your local computer, and the "tree" (see "B"). The first and best advice I ever got was that the website on the server should be replicated identically on your computer. I'd never trust the server to store my only copy, and you'll want to do lots of testing and demonstrating with your local machine. That means internal links will be relative (../../).

If you want to find out if a name is available as a domain name, go to get-a-name.com and see if it's taken or not.

B: Define website structure (tree of files & maybe subfolders).

There are two tough things to do with the client. The first is get him to articulate or to work with you to create the tree structure of the site. I've used wrpTreeForm to build into my software the ability to interactively manipulate the tree while discussing it with the client. This APL utility is very easy to use and is available as a free download from Bill Parke's web site.

Some APL developers are successfully using a far more sophisticated OCX control called TLIST, but Bill's APL utility is all I need for now.

C: Select a template (or design one).

My first web pages had a lot of similarity. They looked like they had all been designed by the same person. But pretty soon it became evident that there is remarkable similarity in the structure of websites that appear very, very different. So, my templates are all created with elements chosen from the following list and always in precisely this order (with the exception that "text" and "datatables" may be used as many times as desired and in any sequence).

• doctype --
• windowtitle -- this is the title appearing on the top frame of the window.
• metatags --
• javalink --
• javaprep --
• metatag2 --
• body -- begins the display, including the most important color specifications.
• javamenuprep -- code preparatory to
• parentlogo -- logo of a parent organization (if any).
• logo -- logo for this website.
• topbuttons -- navigational buttons, perhaps the same as "bottombuttons".
• jumptobottom -- a button allowing the user to jump to the bottom of a big page.
• title -- the main title on the page.
• menu2 -- small menu options across the top of the page.
• subtitle -- a subtitle on the page.
• pagestructure1 -- a structural element, often for a simple table organization of content.
• leftmenu -- a major navigational feature for most websites.
• pagestructure2 -- a structural element, often for a simple table organization of content.
• datatable -- any data table, HTM2000 does a lot of work here very nicely.
• text -- any text element, HTM2000 handles text nicely.
• contentsmenu -- this is for links at the bottom of the page to subsidiary pages.
• pagestructure3 -- a structural element, often for a simple table organization of content.
• footer --
• hrulegraphic -- you might like a horizontal rule below the content.
• bottombuttons -- navigational buttons, perhaps the same as "topbuttons".
• jumptotop -- a button allowing the user to jump to the to0p of a big page.
• copyright -- who owns the intellectual rights to the content.
• path -- the path where the page will be placed on your local version of the website.
• filename -- the name of the page (I try to keep names below 8 letters).

I suggest you begin by taking an existing uncomplicated page and develop your own page from it. Don't take one from the web to start. Instead, take one from Adrian Smith's HTM2000, an APL workspace that can be freely downloaded. As you get good at that, then try some relatively simple pages from the web. So far, I've found that each of the pages I've found on the web and from which I wanted to learn could be replicated in my template structure. And that's how I've developed my templates.

The word "template" needs definition. For most web designers, it means they have written the html and Java code necessary to create a page and left the central "body" element empty. Then they cut and paste new material into the "body" element for each new page. That makes it easy to create lots of pages, but it does nothing to provide for a revised site structure.

I recommend for an APL programmer, a template begins as a function which builds an html page. As you experiment with it, you'll see how you want to generalize various pieces of it. That's how I began and the 29 elements above became the generalized scheme which accomodates all of my 6500 web pages.

An additional power derived from APL should also be noted. Each of these elements can be expressed as an executable APL expression. The test is simple. If an element is a literal vector with the "execute" character as its first element, then it is assumed to be an executable expression. This means I can write an APL function to do anything that I can't describe in an easier manner. Executable APL expressions are most often used to identify a database source and parameters.

D: Select color scheme (or make up a new one).

I haven't yet begun to experiment with color, but it won't be difficult. Except for graphics, color choices are only a few, primarily background and the choices associated with links. You might build a table where each cell had a different color, but that's for later.

You can understand colors and the codes by which we specify them by looking at the olynet/webman html color page.

If you want to build an interactive color selector into your template, try Bill Parke's RGB Color Selector, a custom color-selector dialog with decimal and hex modes.

E: Define metatags & icon graphics (if available).

Metatags are words and phrases in the header of a web page which identify the subject matter so that search engines can catalogue each page of the site. Icon graphics are the graphics that help provide identity and the look and feel of the site. They include the logo and also the navigational buttons.

F: Create graphics & add to them to the resources folder.

Graphics are likely to require more time that any other aspect of creating a web page. Photographs are fairly easy. You can rent time on a pretty high quality scanner at Kinkos. Digital artists, if they don't use a Mac, say Adobe Photoshop is the very best image processing software, but it is costly at around $800. I bought it but I find I can do everything I want with Paint Shop Pro from Jasc which costs about $70. If you want to automate image processing, Jasc also has a product called Image Robot ($89 from their website) which I am using to process my 3000 images. Paint Shop Pro also produces buttons (gifs). Since I'm trying to automate web site management as much as I can, I want to create buttons on the fly (under program control). I do that by storing blank buttons (no text) which are created in Paint Shop Pro and writing text on them with functions which use im2bmp.w3, a freely downloadable utility written by Gert Glantz and available from APL2000. It is an APL workspace with functions to create bitmap files from picture object images.

G: Assemble available source material (usually text & graphics).

I always hope that the client will collect and give me source material in a form convenient to use. It almost never happens. Budget plenty of time for this.

H: Compile or assemble the local version of the website.

For me this is an automated process that is done over and over again as new source material becomes available or as graphics and navigation evolve. I got a great start in building web pages from HTM2000, an APL workspace with demos for building web pages. It is especially good for building tables and is freely downloadable from Adrian Smith's company called Causeway.

I: Load the local website in your browser for quality control.

Since my process is automated, I only look at some of the pages for quality assurance. If you use a WYSIWYG editor, then quality control might be browsing the site after it is uploaded to make sure everything works and looks good.

J: Upload the local version of website to the server.

Your ISP is likely to tell you what ftp software he expects you to use. The most popular seems to be shareware called WSFTP. My ISP directed me to cuteftp which I've come to have great respect for. I consider the biggest flaw in the automated process to be synchronizing the local site (in my computer) with the files on the server. The upload process is easy for a few dozen files going into one or two directories, but it is very difficult for thousands of files going into dozens of subdirectories.

K: Verify there are no broken links.

There are services to which you can subscribe who, for a monthly fee, will scan your website for broken links. Even better than that, Bill Parke has an APL tool for scanning your site called TruLink, a HTTP Link Validator / Web Site Management Tool. I haven't used it yet, but I have great expectations of it. I asked Bill to scan this page for broken links. He reported "11 errors found searching 96 links in 1:59 minutes" and sent me a file identifying the errors. This points out the peril of links to other sites. You must check now and then to make sure they are still valid because if they are not it is you that appears careless.

An on-line service company can provide a list of all sites with links to your site, a list of all sites your site links to, and, most importantly, a daily check of all your links to make sure they are still valid. Cost is $199 annually, free trial is available. The service even checks links from other sites into your site to make sure you are being linked to in a valid manner. Contact Roy Bryant or www.seventwentyfour.com.

L: Verify the html code.

My first choice for a code validator is validator.w3.org which is made available by the same group of people who set the standards for the Internet. Another code validator has the advantage that it can check pages on your local computer: www.cen.uiuc.edu/cgi-bin/weblint.

M: Improve content & graphics (discuss design criteria for a good web site).

Some web designers will argue that you should first develop the overall look of the site, the graphics, and the site structure before building out content. I don't agree. I'd rather start with a simple template and an initial tree structure and make rapid progress on content knowing that graphics, navigation, and the overall look will evolve. We might be talking here about how an APL'er thinks vs. how a traditional systems person thinks.

It seems like most websites are designed so the webmaster can show off. Or, if we wish to be more gracious, they are designed for the bandwidth of tomorrow. I'm not in favor of being ahead of the curve on bandwidth. When most people have T1 lines, we'll know how to use that bandwidth. Meanwhile, here are Toni Will-Harris's rules edited to include my thoughts.

• Keep graphics files small. You can do a lot with a gif graphic of 500-2000 bytes or a jpg photo of 12,000-20,000 bytes. By the way, a surprising number of people don't know when to use a gif vs. a jpeg. Both are lossy, so neither should be considered your source art, but each has an advantage. A gif has a limited color pallete which allows it to get very small for buttons and other graphics that do not require an extensive color pallette. A jpeg is essential for a photo because it gets pretty good compression but retains a broad color pallette.
• Keep text files small. People really don't want to scroll down more than a screen or two. If content is bigger, maybe you should split it over several pages.
• Design for easy reading. Don't let style get in the way. Choose light pastel backgrounds. If your background is an image, make sure it does not interfere with readability.
• Design for the computers your site will be seen on. Older computers will be 256 colors (8-bit) and 640×480 resolution. Many people in the viewing public have never changed resolution from the factory settings. But research shows that 800×600 is now the most frequent resolution setting so that is what we should design for. I prefer 1024×768, so the truth is my pages probably look best at that resolution.
• Use "alt" tags on graphics. These appear on the screen while your page is loading. They are much more interesting than empty boxes, and your public can click on buttons that haven't yet loaded by use of the "alt" tags. So, they are a real courtesy and easy to add.
• Include contact information on every page. Why? Because people often save to disk or print one or another page. Any page they might save should have name, address, phone number, and e-mail information.
• Keep your site fresh. It should frequently have new material and outdated information should be deleted. The next thing I want to experiment with is having a random number generator select the main images so the home page will look different everytime you load it.
• Be generous. The information you provide should be complete enough to be satisfying.
• Be backward compatible. Your page should be modern enough to be interesting to leading edge viewers while still viewable by people with older technology.
• Test your site as others will see it. It's very important to view it with older browsers, with slower modems, and at verious levels of resolution.

N: Improve content & graphics (getting the client to do the most work)

For a start, let's ask the client to gather up all that he has on floppy disks. Most content will be in Word Perfect or MS Word. Someday I'll have a client who does a good job of preparing material for the web, but I haven't found him or her yet. Then lets convert all those documents to html thru the "save as" command. (Of course, if the source material is straight text with no word processing enhancements, then it's easier to save it as a text file and use that as your website source material.) Now, here is a critical moment -- who has the best translator from word processing to html. I've concluded that Star Office 5.0 is the best choice. It produces far simpler html than MS Word does (for a complicated document). That's important if you are the person who's going to carry it forward. No translation is perfect; rarely is a translation even satisfactory. So give yourself a break and get a free download of Star Office 5.0 for translating MS Word to html. If your source material is in Word Perfect, then first load it into MS Word and save it as a Word file because Star Office does not seem to have a filter to enable it to load a Word Perfect file.

As stated above, I want to work with the html code. Bill Parke has developed the WebTek HTML Editor, a plain-text editor enhanced for composing HTML documents, that has an important added benefit in that it has a splendid help system explaining html code. This is not a WYSIWYG.

I've struggled with how to get my clients to improve or enhance pages html pages. For that you probably need a WYSIWYG. I've more work to do on this, but my present approach is to let them edit my compiled page with Front Page, Page Mill, or whatever html editor they have. Then I strip out the header and use the body element as my source text, all under program control.

Another big improvement in content and efficiency may lie in VML Graphics. This is a new proposal from the W3C group to allow you to draw high-quality vector graphics directly in your web page. I recommend you attend Adrian Smith's presentation on this at the Orlando conference.

O: Promote the website.

I've done nothing to promote my websites except provide good content and good metatags. I have a very active public and a great deal of traffic (see "Q" below).

P: E-commerce

On-line queries, secure socket layer, fulfillment, .... I've not started working here yet, but I sure look forward to it. And I'm glad Fred Waid is there to show the way.

Q: Measure the effectiveness of the website.

Webtrends is the service I use for information about the use of my websites. It is licensed and operated by my ISP at a cost to me of $10 per month for each domain name. It provides a wealth of statistics and you can look at my reports for SwimGold and for the Morikami Museum. These reports for July show 213,000 hits in 16,000 user sessions for SwimGold and 26,000 hits in 3,600 user sessions for the Morikami Museum website. We could have a workshop on analyzing web traffic reports. Measurement is complicated by the fact that hits are not counted when they come from the browser's cache. Further these sorts of measures don't tell you much about the value people find in the website.

R: System Infrastructure

This could be a big topic, but I'll limit it here to a tool for making backups called ParkeNet File Manager by Bill Parke. It is an explorer-like file manager for Windows 9x, with file synchronization functions, and many other features.

Helpful Websites for People Building Websites

See: www.qkw.com/refer/webmstrs.htm

Conclusion

This page will be periodically updated and will be maintained on the web at ../../quikrite/fasttrak.htm. By using it in your browser, all the URL's to helpful websites are available with a mouse click.    Have fun!