Web Publishing
Introduction

If your goal is to create a Web site of your own, the Web itself is an obvious & natural How To resource. For proof, Google “Web Publishing”. You will assuredly find what you seek among the 4,000,000 or so hits.

Alternately, you can continue reading.

Why continue reading? 3 reasons:

1)   I perused thousands of hits;

2)   I published a working Web; &

3)   Most importantly, I documented it all.

My Web Scheme, Abbreviated

My Web scheme is very simple: I publish Word-written documents & Excel-produced spreadsheets & charts/graphs on the Web.

This scheme is Spartan & lean, emphasizing content over presentation. It uses a minimum of Web-based software technologies: Cascading Style Sheets (CSS) & JavaScript in addition to strict, W3C-validated XHTML.

If your Web scheme radically differs, then what follows may not be useful.

My Resume, Abbreviated

October of 2007 will be my 40th anniversary as a software professional.

Beyond this meaningless generality:

    I am detail-oriented to the point of being anal, or OCD, or both.

    I am manic about software standards, & do not countenance exceptions to these standards.

    I am passionate about both technical & political writing, & have similarly rigorous standards for writing as I do for software.

You'll find what I create & write to be unique. Whether or not it's worthwhile is a separate issue.

My Web Scheme, Expanded

Windows is my desktop.

I use the Microsoft Office 2000 suite: Word for documents, & Excel for tables & graphs. For my purposes, neither Office XP nor Office 2003 seem worth the upgrade.

I have evaluated Sun Microsystems' OpenOffice office suite, primarily Writer & Draw. However, their marketing claim:

WRITER can of course read all your old Microsoft Word documents, or save your work in Microsoft Word format for sending to people who are still locked into Microsoft products.

is belied by the fine-print reality in the Writer help file for About Export & Import Filters:

OpenOffice.org Writer can read various versions of the Microsoft Word text format. You also can save your own texts in Word format. However, not everything available with OpenOffice.org Writer can be transferred to MS Word, & not everything can be imported.

“Not everything” includes Word styles. This alone disqualifies OpenOffice.

I use GlobalSCAPE's CuteHTML & Macromedia's HomeSite for editing HTML, Cascading Style Sheets, & JavaScript, the former for its joyous austerity, & the latter for its codesweepers like the HTML Tidy utility & others that automate the process of converting HTML markup into XHTML.

Excel-produced graphs are OK as is. As gif, jpg/jpeg, or png images, they can be uploaded directly to the Web. The same is not true for spreadsheets, however. The HTML that Excel generates to convert spreadsheets into HTML tables is unsalvageable. I hand-code all HTML tables. Profuse thanks to whoever originally designed the numeric keypad on the 101 keyboard.

I use Broderbund's Print Shop® Photo Pro to convert image formats (eg, bmp to png), & only for this purpose. If I need to rescale the size of jpg images, Word works just fine.

I use Windows Paint to manipulate charts and/or graphs, including charts produced by Excel, and charts & graphs downloaded from the Web & republished on my Web site. All charts & graphs on this site are single-pixel-sharp; no blurred edges for me.

An example of my obsession with image precision is in order.

I wanted a US flag on the Home Page, so I Googled “US flag”, & inspected tens of images. None seemed satisfactory. Either the colors looked wrong, or the proportions looked wrong, or the stars looked like shriveled starfish in a frying pan. It was time to research.

Answer.com courtesy of Wikipedia solved the color problem:

Colors used: Old Glory Red (PMS 193, RGB BF0A30) and Old Glory Blue (PMS 281, RGB 002868)

USFlag.org solved the proportion problem. From their Standard Proportions For The United States Flag page:

I used the above image as a basis for creating my US flag.

After magnifying the image 8 times, I determined that USFlag.org sacrificed mathematical regularity for proportionality. I decided to do the reverse; ie, edit the flag to make it mathematically regular.

1)   For the USFlag.org image, the stars are not uniform, symmetric, or centered.

For example, below are the 2nd & 3rd stars from row 3 magnified 8 times:

    The images are not a uniform size: The left image is 16 X 14 pixels, while the right image is 17 X 14; ie, the horizontal line in the middle of the image extending to the left edge is not the same length between the 2 stars.

    The left & right sides of the images are not symmetric; ie, the left side has a grayed pixel near the bottom leg (colored light yellow to accentuate it), & the right side has an extra white pixel near the bottom leg.

    The images are not centered; ie, the right image has 4 pixels to the left of the bottom left leg, but only 3 pixels to the right of the bottom right leg.

I redrew the star to correct these problems:

This 17 X 14 pixel image is symmetric & centered.

The USFlag.org star used gray for the star outline. I chose to use 2 different shades of blue. These shades are transition colors between Old Glory Blue & white based upon the RGB color scale:

- RGB (000,040,104) - Old Glory Blue
- RGB (085,112,154) - Transition Color #1
- RGB (170.184,204) - Transition Color #2
- RGB (255,255,255) - White

Scan the RGB values vertically. The arithmetic differences between the values for the red, green, & blue components are 85, 72 or 71, & 50 or 51, respectively. Thus, Old Glory Blue transitions to white with mathematical regularity.

The redrawn star using Old Glory Blue as background looks like this:

2)   For the USFlag.org image, horizontal, vertical, & diagonal distances between stars are not uniform.

The horizontal distance between stars averages 36 pixels, but can be 35 or 37, & the vertical distance between stars averages 16 pixels, but can be 14, 15, 17, or 18. Assumedly, these mathematically-irregular distances were necessary to maintain correct proportionality. I redrew the star field. Horizontal & vertical distances between stars are now a uniform 36 & 16 pixels, respectively.

Final edits involved removing the extraneous lines & text from the original image, & correcting a few minor problems (eg, the border was not a uniform color; 30 or so pixels that should have been blue were gray). Below is the result:

I decided to add 2 pictures to the flag: The flag raising at Iwo Jima, & a picture I took at the Presidio of San Francisco National Cemetery on Memorial Day, 2004.

To me, the flag raising at Iwo Jima is The Picture of the 20th century. Not the edited version, mind you, but the original picture. IwoJima.com solved this problem. Below is the original Joe Rosenthal photograph:

Changing the colors & adding the 2 pictures plus my logo completed the flag:

Some might say that I overdid this one image. Those ‘some’ might even be right. However, I overdo all images, & overdo everything else, too -- at least, insofar as attention to detail is concerned.

Consider this: Might my OCD benefit you?

Web Publishing Documents

There are 4 separate Web Publishing documents. All of them are tutorials, but tutorials of a considerably different nature & flavor than the usual tutorials found on the Web:

1)   They are How To's.

For example, the Word-to-Web Styles document not only explains everything you need to know to publish Word documents on the Web, but also gives you detailed instructions on how to do it. These instructions are always prefaced by a discussion of the necessary high-level concepts.

2)   They supply more than information.

Examples & code samples abound; eg, my Master Web Cascading Style Sheet: Version 2.0 is downloadable.

3)   They cover the gamut.

The usual CSS tutorial addresses CSS only. The usual HTML tutorial addresses HTML only. That's not unusual. In fact, one of the recommended Best Practices for publishing on the Web (A Best Practice with which I strongly disagree) is to keep each Web page small, & address only a few, self-contained topics.

Not here. It is impossible to understand CSS unless CSS is considered in context, & referenced against everything else that associates with it. What this “everything else” can be & often is are subject matters from far afield. That's reality, a reality that no “Best Practice” can abjure.

4)   They are polished products.

As I educated myself, I concurrently wrote these Web Publishing documents. In most cases, I immediately tried to implement what I learned. This interplay among researching, writing, & doing improved & refined this Web Publishing series of documents.

I believe my published Web is first rate. If so, my Web Publishing documents are, too.

Be warned: The documents are long. Some documents (eg, Word-to-Web Styles; Various & Sundry) have tens of large images. Why? It's necessary. The topics & subject matters addressed are extraordinarily wide-ranging, even eclectic. Casually perusing the documents is not a good approach.

However, there is a saving grace. Each of the 4 documents has a bookmarks sub-menu. This sub-menu is essentially the document's outline or table of contents. Thus, you can quickly grok the substance of each document via a quick perusal of its bookmarks.

The 4 documents are briefly explained below.

2.0 Upgrade

I published version 1.0 of my Web site in 2001 & have added to it since then.

Frankly, I was satisfied that 1.0 worked. By June 2005, however, I became dissatisfied with the software technology it used. As a result, I decided to revamp 1.0's underlying software technology & bring it into conformance with current standards.

What standards? Peruse the 2.0 Upgrade document.

Directory Structure

On my computer, there are currently in excess of 5.000 files used exclusively for Web Publishing.

Keeping track of these files is a daunting task, & would be near impossible if the directory structure were not well defined. The Directory Structure document details the hierarchical organization of folders & files, & the rules associated with their use.

Word-to-Web Styles

Fortunately, Microsoft Word styles have an almost-direct analog on the Web: Cascading Style Sheets.

What's a Word style? Let's excerpt what the Word help file says:

A style is a set of formatting characteristics that you can apply to text in your document to quickly change its appearance. When you apply a style, you apply a whole group of formats in one simple task. For example, you may want to format the title of a report to make it stand out. Instead of taking three separate steps to format your title as 16 pt, Arial, & center-aligned, you can achieve the same result in one step by applying the Title style.

A paragraph style controls all aspects of a paragraph's appearance, such as text alignment, tab stops, line spacing, & borders, & can include character formatting. If you want a paragraph to have a particular combination of attributes that aren't in an existing style (for example, a bold, italic, center-aligned heading in the Arial Narrow font), you can create a new paragraph style.

A character style affects selected text within a paragraph, such as the font & size of text, & bold & italic formats. Characters within a paragraph can have their own style even if a paragraph style is applied to the paragraph as a whole. If you want to be able to give certain types of words or phrases the same kind of formatting, & the formatting isn't in an existing style, you can create a new character style.

Simple enough.

I use 30 Word styles. Corresponding to each of these styles is an associated CSS style definition.

For further info, peruse the Word-to-Web Styles document.

Various & Sundry

This document contains miscellaneous topics: Web site color schemes; HTML tables; charts or graphs produced by Excel or downloaded from the Web; JavaScripts; & the skeletal structure of a standard XHTML document.

For further info, peruse the Various & Sundry document.