Skip Site Navigation «

Help

hnav«help

Abstract

This is a multi-purpose document. For visitors who would like a better understanding of loadaverageZero, there is a wealth of information below. But it also serves several other purposes. One of which is to implement some programming logic that allows me to define, through a set of PHP data objects, the entire structure of this document. This abstraction allows me to automatically generate both the Concise Table of Contents and the Expanded TOCs below, as well as all the headings, sections, sub-headings, and so on. In addition, I can easily insert a link that allows you to quickly jump from one section of the document to another for clarification when several topics are related.

Unlike most of the resources on this Web site, such as the Learning Labs, the framework of this document is vertical in nature. By that I mean it is self-contained and lacks previous and next links to major topics that are stored in separate locations. These differences are normally described as tall, or deep, as opposed to horizontal, or broad. This makes the TOCs, especially the expanded form, critical in navigating to the section of the document that interests you most.

horizontal/vertical

Figure 1. Horizontal and Vertical Documents.

The benefit of this abstraction, and the programming logic behind it, should be fairly clear. I can quickly restructure the document if it doesn’t seem to flow correctly, or if I feel it may be confusing to the reader. I can also quickly modify or add new sections as I feel the need or as new features are added (or even old ones removed) from this Web site. Any changes I make to the structure of the TOCs are updated in real-time. I also hope to get some feedback from users, so I can continue to improve on it. And of course afterwards, I can adapt what I’ve learned and tested here when creating other documents that are similar in structure and complexity.

While the majority of my visitors are themselves design, development or programming professionals, I cannot make any assumptions about their level of expertise. Nor should I make assumptions about any physical or cognitive disabilities they may have. Unfortunately, due to the advanced nature of loadaverageZero, a reasonable, modern client software program (browser) is important.

Tip: If you’ve ever been frustrated visualizing or navigating documents that are complex, highly technical, or vertical in structure like this one, then I recommend giving Document Map a try. Who needs frames when you have Firefox extensions? Frames are only effective on those pages that use them anyway.

Accessibility Statement

This resource is designed to help all visitors, including those with disabilities. Rather than having a separate document, I have included information on those features here. In particular, the sections on Font Sizes, Color, Forms, Access Keys and Skip Navigation should be of interest.

Status of this Document

This resource is a fairly large project for me, complex in nature, and a new feature of this Web site. It remains, as of the last updated date:

Tuesday, February 17th, 2009 @ 10:38 PM EST (2009-02-18T03:38:18Z)

very much a Work in Progress.

Concise Table of Contents

Expanded Table of Contents

1. Introduction

This page, like the rest of my Web site, is a work in progress. It is impossible for me to do everything and still publish material, but I have tried along the way to make loadaverageZero as easy to use as I can and I strive to continue to improve on it as I go along. If you have questions, comments or would like to help me with errors or omissions, please feel free to Contact Me.

2. Language

I am an American and my primary written language is English, so naturally spellings, idioms, date formats (other than standardized formats) and special characters specific to American English (en-US) will be in use on this Web site. If you are using an aural browser or screen reader due to a sight disability, or for other reasons, then that will be your heard language and use as well. I try to be as diligent as I can when writing so my spelling, grammar and punctuation are correct. I hope to some day soon provide translations of this Web site into several other major languages such as Spanish, German, French, and so on.

3. Styles and other Conventions

The name of the game here is consistency, so the visitor will know what to expect from one page to the next. I try to stick to this general rule, although I may deviate from it from time to time when I’m trying out new things.

3.1. Typography

A detailed description of computer fonts, and typography in general, is well beyond the scope of this document. Visit Eric Meyer’s introductory Working with Fonts and CSS for background information and links to other resources on this topic.

3.1.1. Font Faces

Regardless of what fonts you have installed on your computer, you should get a consistent interface on this Web site. I may suggest a certain font-family, but I always give a generic last measure in my stylesheets for this very reason. You can also override my selections through your browser or other user-agent’s settings. Advanced users can also control these style settings through User Stylesheets, check the browser’s Help interface, or do a Search on the Web for more information on this topic.

3.1.1.1. Proportional Fonts

For the vast majority of the text on this Web site I use a sans-serif proportional font, and suggest to the browser the font-family Trebuchet MS.

3.1.1.2. Monospace Fonts

For monospace fonts, used in example markup, source code, computer output, etc. I suggest Lucida Console, various alternatives and once again fall back on the generic monospace font-family. Study the various CSS style sheets listed on the Site Map for more details on this and many more topics discussed on this help page.

3.1.1.3. Cursive and Fantasy Fonts

I avoid all use of cursive or fantasy fonts, except for occasionally in a graphic image.

3.1.2. Special Characters

For special and extended characters, this Web site uses the Unicode UTF-8 character set. If you have difficulties seeing special characters (indicated by a ? question mark) you may want to set your browser to use UTF-8 encoding and install a font that supports the full range of characters. This will not impact ordinary Web sites as UTF-8 is designed to be backwardly compatible. You may find your Web experience more enjoyable as a whole after doing this.

3.1.3. Font Styles

Although bold text is really more about font-weight, it is included here regardless. Perhaps I should rename this topic Font Appearance.

3.1.3.1. Italics and Quoting

1. A phrase or paragraph in italics usually indicates I am quoting either an individual or a source reference of some kind. You will also know I’m quoting someone or a source by the use of double curly quotes around the phrase. Nested quotes, although rare, are indicated by single curly quotes on the inner phrase. Quotes in computer code are not the same thing, so you will not see the curly style there.

2. A single word or very short phrase in italics usually indicates emphasis.

3. Curly quotes around single words or very short phrases are difficult to define, so you will have to rely on the context in which they are used. It can often be taken to mean the same thing as the expression so-called, or according to the experts or some other similar subjective remark.

4. Bold italics indicates emphasis.

3.1.3.2. Bold

Within paragraph text and outside some other context, this is also a general indication of emphasis. All uppercase (and possibly bold) means I am SHOUTING. Headings are also by convention boldfaced, and I use decreasing font-sizes per the conventions in a structured or technical document such as this one.

In addition to these techniques, I may also use Color to emphasize certain elements. Perhaps to the chagrin of some design purists.

3.1.3.3. Keyboard

Keyboard examples use a block style designed to look like a computer Key. Go figure!

3.1.4. Font Sizes

Although there is much heated debate in Web design circles on the best way to approach this issue, I have chosen to set the base font-size on the body element of every page to the same size regardless of the browser. This allows me to scale up from there, so my pages display consistently and containers are a predictable size. Every modern browser anyway, and this also depends on the extent to which CSS is supported by the vendor. If you are using a legacy browser, or some of the things I describe to you on this page and elsewhere on this Web site either do not appear or do not work correctly, then I highly recommend you upgrade. I have my personal favorite, or you can visit browse happy to get viewpoints and reviews on some others.

From the very beginning of the design process for this Web site my goal has been to make it both liquid, meaning the interface shrinks and grows with the size of the window it’s running in, and elastic, meaning you can change the size of the base font and the design scales up (or down) right along with it. There is an imaginary vanishing point just below the site logo at the top of every page. If you slide the font-size up and down you’ll see exactly what I mean. Please give it a try, especially if you have a sight impairment as that is exactly the reason I so carefully planned it this way.

3.2. Color

Unless otherwise noted, during this discussion on color I am referring to the most common use of this Web site, which is the paragraphs of text and other page elements inside this content area. The majority of which is designed for contrast in a dark, close to black, textual foreground on a very close to pure white foreground. I have an intense dislike for light foreground colors on a dark or black background. So, unless I am under tremendous pressure to serve such an interface as an alternative to users that prefer it, you will never see it on this Web site.

For individuals that suffer from various forms of color blindness, when I use a term like blue, it will mean whatever appears to you as that color. I have to do some research to understand this problem a little better.

Hyperlinks (or text links or anchors) are in a bolder font-style, and in a dark shade of red. Links you have already visited are displayed in a slightly paler shade of red. Except for special cases, links are not underlined until you place your mouse cursor over them or they otherwise have focus. I am liberal to the point of rarely missing placing a title attribute on links, so you can find additional information about the destination Web address by hovering over them.

3.2.2. Citations

Are generally also links to the source, but unlike normal links they are always underlined and colored dark blue in a bold font-style. The same principles regarding titles on links also applies to citations.

3.2.3. Abbreviations and Acronyms

Are by convention always in uppercase, and on this Web site are also indicated by a dark blue color in bold text. Because the overall theme and the majority of the topics covered by this Web site are technical in nature, I have take special care to always expand the full text of any acronym or abbreviation using a title attribute. Which you can access in the same way you can access title attributes on links or any other page element that supports them. Occasionally I omit a title, but never on abbreviations or acronyms except for circumstances when it becomes redundant. For additional feedback you may also see a dashed underline and/or a help cursor. This will depend on the browser you are using and how fully it supports CSS. Titles will be discussed again later in this document in the section on Iconography.

3.2.4. Menus

Menu options have several different default background colors, usually something neutral. Rather than underlining them when you place your mouse over them or they otherwise have focus, I highlight the option with a pale yellow background color. Active pages, or menu options that represent the page you are currently viewing are highlighted in a copper color.

3.2.5. Framed and Boxed Content

Some content is placed inside a box, the most common example being source code or computer output which you can identify by a monospace pure black font on a pure white background to offset it from the surrounding page. See the section on Monospace Fonts for more information. These boxes are also framed with a dashed border.

Certain pages also have boxes with sold dark border. These are generally quotes, which are discussed in greater detail in the section on Font Styles under the topic Italics and Quoting. Like the code boxes described above, they are set on a pure white background, but unlike those elements, I use Proportional Fonts as described under the section on Font Faces.

Deviations from these general rules should be carefully explained within the context of the document you see them in.

3.2.6. Target Headings

If you are running that rare breed of modern browser that supports the CSS3 :target pseudo-class selector on fragment identifiers, then on reaching a link to one within this Web site you will see that heading change to a dark green color. Whoa! What does all that mean? Basically, if I have a link to a resource (page) and then to a specific section that has a heading element (normally colored black) it will draw your attention by changing color. I guess the best way to explain it just to have you try it: Target Headings.

3.3. Iconography

I am not a graphic designer, so other than a few images such as my logo, the majority of this Web site is designed through the use of CSS, colors, and fonts as documented up to this point. I do, however, like to reinforce certain elements through visual cues using small, or iconic images.

3.3.1. Before Icons

Prefix images, or in the language of CSS and presentation before content, can either precede a single sentence or short paragraph, or may appear in the context of a list, much like bullets. They are designed to provide feedback and impart visual semantic value prior to whatever textual information follows.

3.3.1.1. Asides and Interjections

Digressions, remarks, parenthetical departures, call them whatever you like!

Attention — This information is important and should be regarded.
Help — Help on a topic, or a FAQ followed by an answer.
Info — Indicates extra details are available via an external link.
Note — A brief notation, of the sticky variety.
3.3.1.2. Link Lists

Examples of link lists include a Table of Contents, a list of resources in a particular folder, or on a larger scale, the loadaverageZero Site Map. They may be either ordered (sequential) or unordered (though not necessarily random), and each element in the list is a hyperlink to some other resource. Like title attributes, I'm not shy about using links. They are the keystone of the WWW.

A directory container or folder.
An open, visited or animated folder.
A link within the current document. See Target Headings.

Note: Occasionally, icons are used in both before and after context. See directly above.

3.3.1.3. Resources by Media Type

These icons are indicators of the document or resource type. The list is short, but it’s growing. Keep in mind that PHP scripts often represent something else. For this Web site that usually means they are XHTML documents, such as this one.

A PHP script.
A CSS stylesheet.
An RSS/RDF/XML Syndication Feed.
A PDF document.

3.3.2. After Icons

Postfix icons, or after content, may appear almost anywhere within the content area. However, they are generally in paragraph or list context.

A link to an external resource (outside this Web site).
An internal hyperlink.
An email or mailto: link.
A new resource.
Indicates a Tooltip (title) is available for more information.
A link to the top of the page or the Table of Contents
Meant to draw your attention below the icon.

4. Forms

I do not make extensive use of forms on this Web site. At the time of this writing, the only pages using them are the Contact and Search resources. But on those pages, I have carefully designed them to be both accessible and easy to use. Features that are summarized below will be added to any and all new forms as they are needed in the future.

4.1. Labels

I do not use tables to layout forms, instead they are designed with modern divisional markup and the use of presentation, or CSS stylesheets. All input prompts are coded using <label> elements so there is a direct correlation between each input element and the corresponding description. Depending on the input type, selecting the label will either select the input element (such as a radio button) or give focus to the form element if further input (such as text) is required. Additional information is provided through the use of title attributes (tooltips).

4.2. Input Elements

In addition to the use of label elements, all form fields for text input hold a default, or placeholder value so the user has a clear indication of what they are expected to enter. Required fields are clearly marked with a red asterisk. For additional feedback, both the border around the input element and/or the input label prompt may change color during the process of using the form. At such time as more complex forms are necessary, they will be designed using methods such as grouping related items together, and by the use of <fieldset> elements to reinforce this organization. See the Accessible Forms article, from WaSP, for additional information.

4.3. Validation and Submission

I use two levels of validation. On submitting a form, a client-side (browser) script (ECMA or JavaScript) will attempt to confirm the form has been filled out completely and accurately. Again, errors or omissions will trigger alerts, highlighting and other user feedback as an aid in correcting any mistakes. If the browser either does not support scripting, or the user has disabled it, a second measure of validation is in place to supplant the first. When all checkpoints are satisfied, this server-side script will complete processing of the form and present the user with appropriate feedback on the action(s) taken.

For information on activating form elements without the use of a mouse or similar device, see the help section regarding Access Keys.

5. Site Navigation

If you can’t find your way around this Web site I must be doing something terribly wrong. If you are new to the site, then hopefully after you skim through this brief documentation of the different methods of navigating around loadaverageZero you’ll quickly be able to find what you’re looking for.

5.1. Toolbar Menu

Just under the masthead and logo, and anchored to the right, you should find a series of menu options that represent some basic resources available from anywhere on this site. Including from your keyboard if they’re not visible to you for whatever reason(s). This is called the Toolbar Menu and the selections are summarized below.

5.1.1. Home

Like many Web sites, this is the entrance, introduction or hierarchical root of loadaverageZero. It summarizes my fundamental design goals, some background information and a list of news and Announcements for this Web site. You can easily start over at this point by clicking on either the Toolbar Menu Home button, the site logo located on the left side of the masthead, the site favicon located at the bottom of every page or by using the Access Key 1. More information on the last method is located in the section on Access Keys.

5.1.2. About this Site

This page contains some additional information about my programming and design philosophies. Perl programmers may enjoy a few things I have to say there.

5.1.3. Contact the Site Owner

Located on the Contact page is my general profile, and a form that will automatically drop me an email. Until I have forms for commenting on each article I publish, this is the best way to send me feedback. Please use a regarding (Re:) Subject line so I know what you’re referring to.

5.1.4. Search this Site or the WWW

loadaverageZero is fully indexed by Google, so you can use this page to Search for resources available on this Web site by keywords or phrases. The full power of Google is available from there if you are familiar with their more advanced features, and you can also search the entire WWW from this interface. Also available are features to search the blog universe via Technorati, as well as the ODP (dmoz.org) Web site which is the foundation of Yahoo and most other Web directories.

See the help section on Forms for additional information regarding the Contact and Search resources.

5.1.5. Site Map

Like many other sites, I maintain a current Site Map which allows you to both visualize the entire site structure as well as navigate to almost anywhere at loadaverageZero.

5.1.6. Help

That’s why you’re here.

5.2. Access Keys

Notice how the Toolbar Menu items each have numbered arrows? These are access keys, accelerator keys, or keyboard shortcuts. They allow you to jump to those resources without using a mouse. From anywhere on this Web site. To use them you press and hold a special (meta) key and then the number. On Macintosh computers (Macs) the key is Ctrl, on Windows (PCs) the access key is Alt. I will be using the shorthand notation: AK to mean whatever happens to be the correct meta key on your machine.

If you are using Internet Explorer for Windows, then you also need to press the Enter key after the AK combination. Other browser and platform combinations may vary somewhat, so you will have to investigate if these instructions do not work. Unfortunately, some browsers lack support for this feature.

The global access keys include:

  1. Home
  2. About
  3. Contact
  4. Search
  5. Site Map
  6. Help

If I do add any others, then I will update this Help page to reflect the change. Also refer to the next section on skip navigation.

5.2.1. Skip Navigation

There is one other special access key: 0. You should have no problem remembering this one since I selected it based on the name of this site: loadaverageZero (and because content is really the most important aspect of any Web site). This is known as skip navigation and it allows you to bypass all the menu options and jump directly to the the content area. While this feature is generally designed for users of aural (speech) browsers, if you are more comfortable navigating a Web site using your keyboard, try pressing AK+0 (see above), then hit your Tab key a few times to understand how this system works.

Or try clicking on the skip navigation link to the left of the main heading on any page.

5.2.2. Accessible Forms

Certain pages, notably those with forms such as the Contact page, also use access keys. More information on those pages can be found in tooltips provided over the input control label (or prompt, such as Name:), and are also designed to indicate the access key visually via an underline of that character (for instance: Name). Please note that these special keys are only relevant and accessible on those pages.

5.2.3. Limitations

I do not go overboard with access keys, such as using them on every menu option and so on. There is a very good reason for this: Because there are only a limited number of keys available, and often they conflict with or mask the browser’s (or other user-agent) own UI or functionality. In other words it doesn’t make much sense to assign my Help page to the keyboard shortcut Alt+H if that is designed to invoke the browser’s Help system!

5.3. Pebbles

Also known as breadcrumbs, although I consider that a misnomer, you can locate this navigation feature just below the masthead and toolbar menu and to the right of the top-level heading of each page. Each item in the Pebbles window takes you one step closer to the Home page, hence the metaphor. While most sites use this feature as simply a way of indicating to the user their current location in reference to the home page, I have designed mine as a full-blown navigation aid.

5.3.1. Index Pages

Each step in this path back to the Home page is comprised of an index, which represents a folder, or directory container. Unlike many sites, these are ordinary documents and may have anything from simple explanations of their purpose, to comprehensive introductions to whatever the container holds. The PHP Learning Lab series being an excellent example of the latter type.

FAQ: I’ve had several comments from visitors regarding the check mark at the beginning of the Pebbles list (which is a link to my Home page). This is actually the or square root or the math symbol for a radical. The UTF-8 codepoint for this character is 0x221a (hex) or 8730 (decimal). Bad joke, I know. More information can be found at the Unicode Letter Database.

5.3.2. Index Page Contents

In addition to this information, each Index Page also serves as a table of contents so you can navigate to the resources held there. Since some folders represent containers for menus, this is a yet another way to get at these same resources. I have built a lot of redundancy into this system so you can pick and choose a method that best suits your preference.

5.4. The Sidebar

Running the full height on the left of every page (when you are in full graphical mode) is the Sidebar. This object may also be referred to as the Vertical Navigation Menu area, or just vnav for short. At the time of writing this document, the contents of these menus are fairly constant. But that is subject to change. The long range goal, as I add more content to this Web site and as that area begins to fill up, is to have it adapt depending on where you are in the system. Menus may expand or collapse or disappear altogether based on the context or your location within the framework of this Web site.

5.4.1. Sidebar Menus

A quick look at the Sidebar Menus folder will reveal that the contents are in fact other container objects (folders or directories). For the moment these folders are my Learning Labs, and another for personal Commentary such as my Rant and Rave pages, and an as yet unfinished Blog feature. Each menu group has a heading link, which represents the index into that group and may also contain the introduction to each set, as described in more detail under the help section Index Pages. Also included are some of my Projects, but any of these features are subject to change so I will not continue to document them at this time.

5.4.2. Sidebar Buttons

Below the menu sets are a group of graphical buttons that let you access all sorts of wonderful options. Perhaps more so to me than you, but they’re still interesting.

5.4.2.1. W3C XHTML Validator

From any page on this Web site you can follow this link to find out what Markup language and DTD I am using and whether the code validates. Except for very rare cases, this means XHTML 1.1. If you happen to find a page that does not validate, then please do me a favor and Contact Me. I take great pride in serving the latest standard markup technology. I am also told that hubris is a sin.

5.4.2.2. W3C CSS Validator

This is another service from our friends at the W3C, again allowing me (and you) to check the validity of my presentation code. This Web site uses CSS 2.1 and some features of 3.0 as they are supported by certain advanced browsers. Get yourself one, browse happy!

5.4.2.3. DocSimple

Similar in concept to what user-interface designers refer to as Zoom Layouts is the DocSimple feature. From any page click on the button with the same name in the left-hand Sidebar. It will dismiss the masthead (logo banner across the top of the page), all the menus and most of the graphics. It will then present you with a much cleaner, easy to read, high-contrast interface with larger fonts. Try it on this page to see what I mean. To return to the full interface, simply refresh the page or click on the « link at the top of the page. I’m working on adding shortcut/access key to toggle you between these two modes, which is a little tricky so hang in there.

This feature is also related to the help section on Font Sizes.

5.4.2.4. Lynx Viewer

Similar to DocSimple, but less effective, the Lynx Viewer allows you to see any page on this Web site as you would with the text-mode browser Lynx. Special thanks to DJ Delorie for this service.

Update: It appears as if DJ has taken down this service so I have removed the button from the sidebar. I’ll have to look into a replacement for this. Actually, I already have fiddled around with coding one of my own in Perl, I just haven’t had the time to complete it.

5.4.2.5. View Source: XHTML/XML/HTML

Most browsers have this feature built-in, but I tried to make it a little easier to access. However, the link, and similar scattered about this Web site, are using a pseudo-protocol ”view-source:” in the link URI that is not supported by all browsers (Opera and Safari for example). If you get a 404 (Not Found) error, then this is probably the case. Simply use your browser’s native interface for viewing the document source code of the page you’re visiting.

5.4.2.6. View Source: PHP

I advocate open-source software, so within reason you are allowed to see the PHP source code to this and most other pages on this Web site. However, revealing details of the backend would be foolhardy. Markup, style and behavior files are implicitly public.

5.4.2.7. W3C Semantic Data Extractor

More information about the Semantic Data Extractor is available on the Dynamic Metadata PHP Labs page and under the Metadata section of drx.

5.4.2.8. Additional Button Resources

Below these buttons are some others that link to various Open Source software packages I use most frequently on this Web site. They include the host machine’s OS, the Web server I use, the server-side scripting language I use primarily, my RDBMS, and the client-side Web browser I prefer:

  1. FreeBSD — Faster and more secure than Linux.
  2. Apache — The most popular server driving the WWW.
  3. PHP — Hypertext Preprocessor (scripting language).
  4. MySQL — Open Source Database system.
  5. Firefox — Mozilla Web browser.

Also included are links to resources on Unicode, a Section 508 Accessibility Report from Cynthia Says™, and a link to the W3C Web Content Accessibility Guidelines from the WAI.

5.5. Previous and Next Links

Located at the bottom of pages that are part of a series of documents, such as the PHP Lab’s HTTP Protocol page, are previous and next links. They are designed to do exactly what you would expect them to do. The previous link on the first page of a series will take you to the index or introduction page for that series, and the next link on the last page is greyed out to indicate you’ve reached the end of the series. See Index Pages for more information.

5.6. Page Footer

At the bottom of every page is the last updated timestamp of the document or other resource you are viewing. It is generated automatically for every page when I modify it, so you can be sure you know exactly how current any page is, down to a granularity of seconds! See also the Status of this Document section near the top of this page.

Below the document timestamp is a link to the top of the page indicated by a dashed line followed on the right by double up arrows that should flash red when you place your mouse cursor over the link. Just below this and to the left I place an favicon that represents my Web site and is also a link to the Home page.

5.6.1. Copyright

Below this the visual structure of the Web site terminates with a footer element that includes a copyright notice and link on the left, where you will find my copyright policy and statement. On the right is also a link to my Creative Commons License.

6. Conclusion

This document, like the rest of loadaverageZero, will continue to change and evolve. Please feel free to Contact Me if you need clarification or would like to report any errors or omissions.

Thank you!

—Douglas Clifton

Last updated: Tuesday, February 17th, 2009 @ 10:38 PM EST [2009-02-18T03:38:18Z]   home

(c) 2009-2011, Douglas W. Clifton, loadaveragezero.com, all rights reserved.