About this site

This page explains my objectives for this site and the coding techniques I've used.

“Freely you have received, freely give.” —Matthew 10:8

Topics this page:

Site Map  
About this site  

What's The Point of This?

Unlike most personal websites I've seen, this site is NOT a personal billboard to impose on the world my vacuous opinions about inane subjects.

I put this site together primarily as a “personal notebook” available from any browser wherever I am (so I can can go senile anytime I want).

With this site, I aim to offer content rather than attitude. (On this site you'll find high "keyword density" -- the number of times keywords are used on a web page divided by the total number of words on the page.

So this site is less of a "blog" (dated transitory streams of consciousness) than a personal repository on the WWW that enables me to refine over time the diagrams, flowcharts, checklists, and “memory joggers” I develop as I study each topic. For example, as I come across a key date in history, I update my list of historical events. This is my way of capturing web wisdom before sites disappear with a dot-bomb meltdown.

An updateable repository (like a wiki) allows me to over time go "deeper", as defined by Bloom's taxonomy

We don’t need more information. We don’t need better information. We don’t need automatically filtered and summarized information. We need understanding. —Cluetrain Manifesto (quoted in Wurkit)

Information Integration

Unlike most other sites, the art, sounds, and quotes here are not listed by type of media file but integrated into a multi-media presentation of each subject.

This is why I construct a lot of html tables to compare and contrast information. (the highest level on Bloom's taxonomy)

I also use this site to try various website coding techniques, so some pages might be incomplete or give you Javascript errors.

This site is how I experiment on making sense of the incongruous aspects of life, art, technology, science, spirituality, etc. So if my stuff seem complicated or plain wrong, I need your helpful comments.

By making my notes public, I'm taking a risk. I'm exposing how well I've applied, analyzed, synthesized, and evaluated the material I have come across. So I trust you to comment appropriately.

All our knowledge brings us nearer to our ignorance. —T. S. Eliot

Please also note that this site does not aim to be offer a tutorial such as what you might find from courses people pay money to view. So please don't expect complete dissertations on any subject here. I am not trying to impress you.

But I do hope to occassionally amuse you

Bloom's Taxonomy

1. Knowledge - information
2. Comprehension - understanding
3. Application - use
4. Analysis - dissect
5. Synthesis - rearrange, compare
6. Evaluation - judging, recommending

   We fear things in proportion to our ignorance of them. —Livy

   The happiness of a man in this life does not consist in the absence but in the mastery of his passions. —Alfred Lord Tennyson

I Hope To Be Not...

A Canute — a person who makes preposterous statements, especially of his own importance and power. Based on a legend of a (misinterpreted) command that the tide not turn by King Canute (of England in 1016, of Denmark in 1018, and of Norway in 1035).

A bore — a non-entity who resents his humble lot in life, and seeks satisfaction for his wounded ego by forcing himself on his betters. — H. L. Mencken

sciolism

Microsoft Encarta—

"talking with pretended expertise: displays of sham learning designed to deceive or impress"

The American Heritage® Dictionary of the English Language: Fourth Edition. 2000—

"A pretentious attitude of scholarship; superficial knowledgeability. "

John Pierpont Morgan, called "the Napoleon of Wall Street", kept a white enamel plaque over the mantel in his study that said, in blue French Provençal script: Pense moult, parle peu, écris rien (Think Much, Speak Little, Write Nothing). Fellow art collector Isabella Stewart Gardner also had this in her collection.

Pleonasm - use of redundant words.

Alexa Average Traffic Rank of this website (wilsonmar.com) was
109,686 on 11 Jul '05
116,256 on 18 Jul '05
138,001 on 11 Oct '05
153,914 on 26 Nov '05
 99,872 on 26 Apr '06
 99,948 on 20 Sep '06
153,463 on 5 Aug '07
Now:


Google page rank:
4?

Site Design Principles

This web site aims to be:

Visible Accessible Useful Easy Fast Clean Thorough Inspiring Flexible Grateful Secure

The remainder of this page describes how we achieve these.

Visible
(Searchable)

1. A field to enable user search through the site.
2. Keywords
3. RSS feeds to announce changes.
4. Email subscriptions.
5. Links to Technorati and blog indexes.
6. Several default landing page names have been defined:
   default.htm, default.html,
   index.htm, index.html, index.shtml, index.php, index.jsp, index.asp
   home.htm, home.html,
   welcome.htm, welcome.html

Accessible

1. Access keys are defined on every page.
2. This site is processed through several scanners:
   • The Lynx Viewer is used to view what the web page would look like in the Lynx text-only browser for blind users with refreshable Braille displays.
   • (previously called) Bobby, a free service and commercial product from Watchfire.com that analyzes web pages for compliance to accessibility guidelines.
   • HTML Validator, a free service for checking whether web pages conform to published HTML standards.
   • Web Page Backward Compatibility Viewer displays web pages without modern browser features.
3. This site was designed and tested for readability when read using several accessibility products:
   • JAWS screen reader program for Windows.
   • IBM Home Page Reader reads text on web pages to blind users and provides magnification and highlighting to low vision users. [Free trial]
   • Links, a text-only browser for visual users with low bandwidth.
   • Opera, a cross-platform visual browser with accesibility-related features such as text zooming, user stylesheets, and image toggle.
4. Link text make sense out of context (rather than "click here").

• W3 accessibility checklist, a busy developer's guide to accessibility.
• W3 accessibility guidelines explains the reasons behind each guideline.
• W3 accessibility techniques explains how to implement each guideline.
• U.S. Federal Government Section 508 accessibility guidelines.
• WebAIM, a non-profit organization dedicated to improving accessibility to online learning materials.
• Designing More Usable Web Sites list of resources.

Building Accessible Websites by Joe Clark.

Constructing Accessible Web Sites by Jim Thatcher and others has screenshots of how various screen readers and alternative browsers interpret various tags and markup. "Also has an amazing chapter on the current state of legal accessibility requirements."

• DDA (Disability Discrimination Act)
• Accessible HTML/XHTML Forms
• Accessify

Useful

• Use these icons to give you a clue about what will happen when you click on an icon or underlined link:

  	another section on the same page being viewed.
  	another page on this website.
  	another website.
  	a HTML webpage
  	a screen capture
  	a newsgroup entry
  	a page with valuable content mirrored on our website (to make sure that we have it in case the site goes away). Clicking on this icon instead of the link would get you our mirrored version.
  	an email address.
  	a tool to use for better efficiency

• Don't go into long explanations unless the page is a tutorial.
• Present some useful information, advice, or at least a joke on every page —NOT yet another list of links or a teaser advertisement. Pretty graphics don't pay the bills! We, too, are sick of going from one menu to another.
• Include "sound-bites" in our pages to summarize memorable wisdom related to a page. This has become a distinctive feature of this web site.

Easy

To get around this site quickly ...

• Save you from needing to drag your mouse all over the screen, we put extra navigation buttons close to the scroll bar on the right edge of your screen:

  	Top of the current page. (You can also press Ctrl-Home to do this).
  	Up to the previous topic on the same page.
  	Down to the next topic on the same page.

• Let you skip through a page by providing icons for you to mouse click your way through the whole site like a paper book, in a linear way:

  	Previous topic on this site.
  	Next topic on this site.

• Submit buttons are made easy to find by being encasing in a contrasting border:

Fast

• Don't use a lot of graphics (such as rule lines) or complicated formatting to waste loading time (and clutter up the screen).
• Keep each file small (to what the Windows Notepad program can handle).
• Put big graphics and complicated Java programs in pages you ASK for.
• Use Emblaze utility to compress graphics for fastest possible loading.
• Use "interlaced GIFs" or "progressive JPGs" supported by newer browsers. They first display a low-resolution but more compact, copy of a high-resolution (bandwidth-hogging) graphics file as it in the same position as graphics (using the LOWsrc= HTML command). The smaller is gradually replaced with the more detailed version if the viewer remains on the page.
• Break up large graphics into smaller pieces (like a jigsaw puzzle).

Clean

• Use a background color instead of background graphics that make it difficult to read the content.
• Don't play background sounds to annoy you (and those around you).
• Don't use more than one animated graphic on a page.
• Don't use annoying scrolling marquees at the bottom of browser windows. (We'll show off our Java skills elsewhere, thank you).
• We include banners from Link Exchange and others because ... we have to.
• Create a new, separate window ONLY for links to unrelated "side-bar" topics.
• Use icons to illustrate the type of file to be invoked :

  	plays a Real Audio sound message.
  	plays a MIDI audio file.
  	plays an au audio file popular on Unix or Macintosh computers.
  	plays a Microsoft Windows wav sound message.
  	retrieves a document which needs the Adobe PDF reader.
  	creates a new mail window for you to to open a new email screen (with that person's email address already filled in) so you could compose an email message to the person
  	brings up a page with photos (which may take a long time to load).

• Allow you to break free of frames by clicking on the underlined page topic title at the upper left corner of each page.
• Periodically use Web QA Tools to find broken links and other problems. Because we link directly into content, we stand a big chance of a “URL Not Found” (broken link) message because the author changed the file name, put it in a different directory/folder, or plain went out of business.

Thorough

• Provide icons to quickly get at:

  	Personal Main Menu and Site Index.
  	Calendar/Schedule.
  	Registration -- Sign our Guestbook (and become eligible for winning free stuff).
  	Search the Internet and access the best of Reference Works on the Internet.
  	Who we are and how we can help.
  	Definitions of words from a glossary or dictionary

Inspiring

• Have at least one joke or humorous tidbit on every page which is in context to the subject matter on that page. This is different than the way most joke sites offer their material. — by system component (themes, etc.) and popularity (the Top10, etc.), not by processes.
• Present material from a variety of sources in order to encourage constructive dialogue among different beliefs and perspectives.
• Include material from a spiritual (religious) perspectives. However, religious affliation is not a separate role because being a Christian (or whatever belief) permeates how we approach and carry out all our words and actions, every object we hold dear, and the traits we seek to achieve.
• We use these icons to indentify quotes and links:

  	a quote of wisdom.
  	a quote from the Bible or other text.
  	a joke to make you smile or maybe even laugh.
  	a warning for you to take heed.
  	a reminder of what to remember.
  	a creative idea for you to try.
  	a tool that you may find useful.
  	a Javascript programming trick for you to use in your code.
  	a work instruction for you to do.

Flexible

• Keep text close to the left edge
• Use the font size default set in the user's browser rather than specify our own size.
• Specify several fonts, inclduing Verdana. If you don't have this font, download it for free from Microsoft Typography.
• Program HTML <TABLE commands so they are still readable when the screen size is adjusted up to half of a full size screen.

1. If there is an overlapping box icon at the upper right corner of that frame, click it.
2. Move your cursor to the edge of the frame (its border) until the cursor arrow turns into a two-headed arrow, then hold down the left mouse button and drag it to expand or contract the frame to the size you want.

Secure

• Use METHOD=POST instead of GET to obtain data from user forms.
• Offer secure "Https" connections when handling private data.
• Specify Cache-control to prevent storing of secure entities sent with responses from browers.
• Scramble email addresses in "mailto:" links.
• Do not release information to anyone, including any "affliates" or "business partners."
• Obtain a digital signature for the executables we create (from Verisign or other entitity).

Grateful

• Provide citations to copyrighted material. If you see a violation, please let me know.
• Link to annotations such as [THWSO] for The Hersh Web Site Observer.
• Provide a link to more information about the source of a quote, such as a biography.
• Quotes followed with “(NIV)” indicate that the quotes is from the New International Version of the Holy Bible. An example:
  “Wheverer your heart is, there is your treasure, also.” (NIV)

Coding Rules

Here are the HTML, CSS, and Javascript coding standards used to create this site.

Environment Graphics Positioning Music Multimedia Features

Environment

1. The first non-comment line is the Formal Public Identifier (FPI) declaration defined by the W3C to indicate the flavor of HTML syntax used in the document. This Document Type Definition (DTD) tells client internet parsers which set of syntax rules to use when validating. [Choosing a DTD]

   Pages using CSS file global.css are coded to:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

   Pages using CSS file g1.css are coded to:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   Note that <XML is not the first line because IE6 goes into "quarks" mode if <DOCTYPE is not the first line of a HTML file.

2. Next is a language definition:
   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

3. In META author tags, I have included my phone number, and I don't recall getting any spam calls from it.

4. "Content-Type" for international characters.
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

   To display European characters:

   <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

5. If a page is formatted for the 150 by 150 pixels on a typical Palm OS device, the 177 by 208 pixels on a Nokia 3650 smartphone, or the 215 by 270 pixels of a typical Pocket PC device, Aventgo recognizes this tag:
   <META NAME="HandheldFriendly" content="True">
6. We put a TITLE on every page (which appears on the white-on-blue bar at the top of browser windows). Robert Gasiorowski reported that Netscape Navigator 4 sometimes won't work without it.
   A January 1998 Sitemetrics survey of 25,000 enterprise web sites found that while more than 96% of the sites surveyed use the common TITLE tag, only 31% include the META Keyword tag used by most of the largest search engines to catalog the Web site. Just 28% of the sites had a META Description tag used by many of the search engines to create summary descriptions.

7. The JavaScript between the <HEAD> and </HEAD> commands are compiled and run first. This also sets the code away from other text on the page.

   The Javascript requested by the BODY onload ...

   The Javascript to invoke setUserOptions() at the bottom of the page is executed after the page loads. This is why the screen contrast and font change buttons at the top of the page appears a few seconds after the page appears loaded.

8. We add <!- at the beginning of the script and --> at the end of our scripts. to hide Java scripts from less powerful browsers. This will not affect the script's performance.

9. We program to JavaScript1.0 for compatibility with those using Microsoft Internet Explorer 3.0 (which is not licensed from Java). We don't use JavaScript1.1 features such as dynamic image updating and new object constructors.

10. We include alt= attributes to <IMG> tags for text-based browsers and for browsers which display braille instead of text for blind people.
11. Functional names to graphic files. Example, the graphic separating items is named “itemsep.gif” rather than an abbreviation of “green box with white background”, which is the graphic's name in the folder containing Graphics.
12. We specify height= and width= for each image because Java Scripts are picky and the images display quicker.
13. code TABLEs in small sections so upper tables appear as lower tables are loaded. Browser wait until an entire TABLE has loaded before showing anything.
14. Use thick Horizontal Rules for WebTV users by coding <HR SPACE=2>
15. Avoid using white text within shaded tables because handhelds and older browsers (such as AOL 2 and Navigator 2) don't support shaded tables.
16. To avoid a hassle for users with obsolete bookmarks, we don't delete files. Instead, we replace the content with these redirection commands:
    <html><head>
<meta http-equiv="refresh" content="0; url=http://www.wilsonmar.com/index.htm">
</head> <body><font size=+1><b>
This site has been redesigned!</b></font> <p> In a moment, you will be automatically redirected to the new page. (If your browser doesn't refresh, <a href="http://www.wilsonmar.com/"> click here</a>.)
<P> Please update your bookmarks when you arrive there! </body></html>

Graphics

1. For better looking fonts, I will be adding sIFR (Scalable Inman Flash Replacement) that replaces text with Flash for clients with Flash 6+.

2. Buttons are save in transparent GIF 89 graphic file format.
3. Photographic images in JPG format at the typical resolution of computer monitors — 72 dots per inch.
4. Default background color to <BODY bgcolor="#FFFFE0" which is light beige in Netscape 4 and light grey in Internet Explorer 4. It is easier on the eyes than an all white (FFFFFF) background, and avoids warping WebTV browsers.
5. HSPACE="0" VSPACE="0" are not used.
6. Shadows on graphics fall to the LEFT of the item — the light source is on the upper right corner (where the title appears).
7. When enough people use browsers that support HTML 4.0, we'll
   • change from encasing quotes between &#147; and &148; (rather than generic &quot;) to <Q> and </Q>.
   • change from <b> and <i> to <strong> and <em>.

Positioning

1. The formatting of various items on this website are specified by a combination of tables and javascript as well as CSS. Cascading Style Sheets are difficult because they don't work the same on all browsers, and not at all on very early browsers.

   Javascript is needed for language and other user preferences.

   CSS here use tags with naming conventions described in CSS Zen Garden. This would enable me to immediately apply their cool designs on content here. Their classes:

   • intro - pageHeader, quickSummary, preamble
   • supportingText - explanation, participation, benefits, requirements, footer
   • linkList - linkList2 - lselect, larchives, lresources

2. I will be using the "Holy Grail" of CSS layouts: fluid middle columns that expand to fill large screens, with fixed sized columns on the left and right -- that work on all browsers, with workarounds for IE5 PC.

3. This will be spit out from a Wiki engine.

4. Use both the <CENTER> command and the <P align="center" command so it will do it in both browsers.
5. To remove all extra spacing added to each frame by default, we add in <BODY tag the Explorer-specific topmargin=0 leftmargin=0 attributes and the Navigator-specific marginwidth=0 marginheigth=0 attributes.
6. We specify 15 or 20 pixels between columns of text.
   </td><TD width="15">&nbsp;
7. CCS tags, not tables are not used to align sections on the screen. w3.org To make sections of the screen appear seamless, we specify zero pixels in cellspacing="0" (between TABLE cells) and cellpadding="0" (between elements in a TABLE). We make table headings reprint after a page break with these tags:
   <table border="1" cellpadding="4" cellspacing="0"
   
   summary="This table ...">
   <thead>
   <tr valign="bottom">
   <th id="t1" scope="col"> ... </th>
   <th id="t2" scope="col"> ... </th>
   </tr>
   </thead><tbody>
   <tr valign="top">
   <td scope="row" headers="t1"> ... </td>
   <td headers="t2"> ... </td>
   </tr>
   </tbody></table>

8. We don't use margin-left: or margin-right: CSS tags because we want navigational icons to appear near the edge of the frame window control bars.
9. We don't use TOP tags relative to the top of the browser window so that the division is adjusted in coordination with adjacent elements.
10. To ensure that browsers don't automatically give us a wider column that we want, we force a table column to break by inserting text after specifying a font color that's the same as the background.
11. Use static tags <br /> to create a line break, <p> for a single blank line, and <p>&nbsp;</p> for multiple blank lines.

Sounds

• I used to think that it would be entertaining to have some sound with every page. So I put in Netscape EMBED commands such as:
  <EMBED src="http://merc.tv/sounds/soundfile.mid" width="144" height="60" AUTOSTART="FALSE" VOLUME=80% LOOP=FALSE>

  I didn't code Microsoft BGSOUND command because it doesn't provide an option to turn off:

  <NOEMBED>
  <BGSOUND src="soundfile.mid" LOOP=1>
  </NOEMBED>

  Then I realized that having the media player icon makes the page look trashy.

  So now I just have a button for those who chose to waste bandwidth downloading the sound file.

  

Multimedia

Plug-in's are a hassle. But Microsoft had included Macromedia in their list of add-ons.

First, we detect the browser used, what plug-ins are installed, then take the user to the most advanced version. To show a Macromedia Shockwave multimedia file (such as those featured on Macromedia Shocked sites , we write code three ways:
1. <OBJECT code to display flash movies on Microsoft browsers:
   <body>
   <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
   id=movie8layer width=550 height=400>
   <PARAM name=movie value="movie8layer.swf"> <PARAM name=quality value=high> <PARAM name=bgcolor value=#000000>
   <EMBED src="movie8layer.swf" quality=high bgcolor=#000000 width=550 height=400 type="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
   </OBJECT>
   </BODY>
   </HTML>
2. <EMBED src=... > for Netscape browsers.
3. For older browsers (and those who refuse to download the plug-in), a “traditional” (perhaps animated) gif file between <NOEMBED> tags.

Features

1. Click on an icon to access Search Engines on the web.
2. See how background and font colors look together -- just by moving the mouse around.