About This Site This page explains the purposes and objectives of this site and how it has been designed to meet them.

Topics this page: Purpose Information Integration Site Design Principles Build of This Site Your comments???

Site Map   About this site   Enter your search terms Submit search form Web   WilsonMar.com

What's The Point of This?

Unlike many other personal websites I've seen, this site does NOT try to be a personal billboard to impose on the world my vacuous opinions about inane subjects.

This site aims 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).

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).

So this site is less of a "blog" (dated transitory streams of consciousness) than a personal repository on the internet 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.

Information Integration

An updateable repository (like a wiki) allows me to over time go "deeper", as defined by Bloom's taxonomy
1. Knowledge - information
2. Comprehension - understanding
3. Application - use
4. Analysis - dissect
5. Synthesis - rearrange, compare
6. Evaluation - judging, recommending

The highest level is Evaluation, which is why we construct HTML tables to compare and contrast information.

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)

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

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.

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

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

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

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...

This plaque is in the home of art collector Isabella Stewart Gardner, now a museum in Boston. It is a copy of the white enamel plaque that John Pierpont Morgan (who some call "the Napoleon of Wall Street") had over the mantel in his study. The blue French Provençal script Pense moult, parle peu, écris rien is the English Think Much, Speak Little, Write Nothing.

Obviously, I didn't follow their advice.

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

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

"A pretentious attitude of scholarship; superficial knowledgeability. " — The American Heritage® Dictionary of the English Language: Fourth Edition. 2000—

Pleonasm - use of redundant words.

Site Tools

• WP Framework - Ptah Dunbar
• Kubrick - the default theme
• K2 - Binary Bonsai
• Sandbox theme - Soctt Wallick
• Thematic - Ian Stewart
• Tarski - Ben Eastaugh
• Thesis from DIYThemes - Chris Pearson
• Nathan Rick
• Builder by iThemes - Chris Jean
• WP Tavern - Jeff Chandler
• WPCandy - Mike
• TwentyTen,TwentyEleven
• Toolbox
• Headway Themes
• Starkers - Elliot Jay Stocks
• Genesis by StudioPress
It's ironic, but the complexity of today's internet required use of the simplest of CMS: WordPress.org.

Why? It's all about a community creating plug-ins to WP hooks. Efficient. Modular. Extensible.

WordPress v3.3.1 is installed from the hosting panel, by invoking Fantastico.

WordPress is powered by PHP (like Joomla and Drupal).

I began with Rachel Baker's BooktStrapWP starter theme framework. It has HTML5/CSS3 CSS framework, device detection, Modernizr, HTML5Reset

Artisteer can be used to edit themes.

Good themes take advantage of the WP Widget system for sidebars.

Good themes take advantage of the 18,00+ WP Plugins to the ‘/wp-content/plugins/’ directory.
Plugins are activated through the Plugins menu in WordPress.
Action init fires after WP is loaded be before display.
Action wp_head fires within the theme's <head> tag.

Filter hooks modify data before an action takes place.
Filter wp_title filters the <title> tag.
Filter the_title filters the title of a post.
Filter the_content filters the content of a post.

Posts are copied from. The ___ plug-in turns them into static pages for caching.

Action publish_post fires when a post is published.
Post pages conform to hNews Microformat, for integration with Google News, Readability, etc.

Site Design Principles

Judging Websites
Google Sitemaps
This web site aims to achieve these adjectives:

Clean Interactive Social Accessible Useful Easy Fast Thorough Inspiring Flexible Grateful Secure Compliant

The remainder of this page describes how we achieve these.

Clean

Sites with Clean Design

• Apple.com is the standard
• MSDN Blogs
The top part of the page (with menus) is displayed briefly, then slides out of view, exposing the title and content.
This automation is for the sake of regular visitors.
This allows for more negative space to be used before text.

The top menu adjoins the top part of the window rather than floating (such as on Apple.com).

Objects that stay on the screen are creepy. They take control away from users.

The topic title at the top of each page is clickable to enable users to break free of frames.
It is defined within <H1 tags for SEO.

To minimize distractions, we:

• 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 ... .
• 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).

• 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.

Interactive

To be engaging:

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.

3. TBD: More!

Social

Google page rank: 4?

On every page:
1. Links to my Google+, YouTube, Twitter, LinkedIn pages. I don't like Facebook.
2. A field to enable user search through the site.
3. Keywords, tags.
4. RSS feeds to announce changes.
5. Email subscriptions.
6. Links to Technorati and blog indexes.
7. 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

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

1. All link text make sense out of context (rather than "click here").
2. All mages have alt tags.
3. Access keys are defined on every page.
4. Several scanners evaluate sites for accessibility:
   • 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.
   • 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.
   • No longer available: (previously called) Bobby, a free service and commercial product from Watchfire.com that analyzes web pages for compliance to accessibility guidelines.

5. Sites need to be tested for readability 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.

6. http://www.quirksmode.org/mobile/ list of tests.

Useful

Cool Home Pages.com

Lance calls his list of personal sites “The Soul of the Web”

Unlike authors such as Stephen King, this site is not a easy way to refuse interaction.

Quirksmode

Aren't you tired of clicking from link to link without getting “meat”. Well, we want you to benefit from clicking.
• These icons precede links to give you a clue as to the content:
  

  	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
  	a Skype URI for VOIP.

• 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

To accommodate a range of connection speeds, we chose FAST over fancy. So we ...

• 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).

Thorough

We try to provide a rich resource. So we ...

• 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

We like to laugh and have fun when we think, so we:

• 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 (Responsive)

People look at websites from small cell phones to HD screens. So this site needs to have a responsive design which adapts (expand and contract appropriately) as screen sizes are scaled larger or smaller: 240, 320, 480, 600, 768, 900, 1200 (1368), 1920 (HD).

• 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.
To adjust the size of a Web page frame:
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

We want people feeling safe with their information on our site, so we:

• 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

We want to give credit where it's due, so we:

• Provide citations to copyrighted material. If you see a violation, please let me know.
  We no longer link to annotations such as cyberjournalist.com (TheHersh 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)

Compliant

This page was designed to comply with official web design standards and will work in any web browser that is also designed to comply with those standards.

It is not common practice to include these icons from W3C, which can be clicked to run a validation report on the HTML and CSS:



http://jigsaw.w3.org/css-validator/validator?uri=http://www.wilsonmar.com/style.css
http://jigsaw.w3.org/css-validator/validator?uri=http://www.wilsonmar.com/global.css
http://jigsaw.w3.org/css-validator/validator?uri=http://merc.tv/global.css

Build of This Site

TODO: This site was built on techniques based on ARTICLE: Automated Optimization with HTML5 Boilerplate Build by Shi Chuan and


• Introduced by Paul Irish

Related:

Your rating of this page: Low High Your comments on this topic, please: Publish this comment publicly

Your first name: Your family name: Your location (city, country): Your Email address:  Email me updates

Top of Page Thank you!