About This Site

Web

Other

Site Implementation

Chris Ryan [21030691] <chris@rhodeschroma.com>

This page includes information on Web standards, the PHP framework developed for the site, and brief notes on Google Sitemaps and Google Analytics.

The site has, since January 2005, been hosted by eHosting.ca, an excellent hosting company in Vancouver, BC. The mailing list has, since 2006, been hosted by my friend Chris Masterton, also here in Vancouver.

Tools

Software I use includes Mac OS X, BBEdit, Acorn, Photoshop, OmniGraffle, Cornerstone, Interarchy, Feeder, and Integrity.

The site is currently maintained on my Mac Pro. The latest major revision of this site (completed January 2005) was developed mostly on my 15-inch PowerBook G4. For the first version of this site in 1999, I used a Power Mac 8500 running Mac OS 8, with an earlier version of BBEdit and the classic paint program Studio/32 from Electronic Arts (several features of which are still not matched by Photoshop!).

Web Standards Compliance

In the latest major revision, I updated the site from badly outdated markup to the latest Web standards: 100% strict XHTML 1.0 with CSS used for all presentation (see chroma.css). Tables are used only for tabular data, there are no spacer gifs, and only standard structural tags are used. (See the Web Standards Project for more information.) Accessibility is vastly improved, and compatibility broadened (in terms of current and future browsers, and alternate devices). This also improves the maintainability of the site.

I later added print CSS styles, which format the content for the printed page and eliminates the navigational elements. Try doing a print preview on this page, for example.

CSS Issues

CSS is used for all layout on the site. I encountered three issues of note, one well-known and two obscure. One of them (the IE text-jog problem, #2 below) actually delayed the launch of the site as it affected layout on IE/Windows, which is the most popular browser with site visitors (see Site Statistics: Browsers).

The main content area uses borders and interior padding, so a "box model" CSS hack is required in order to have IE/Windows draw it with the correct width. Here is the relevant CSS that I used for the #content selector:
```
border-style: solid;
border-width: 0 1px 1px;
padding: 18px 19px 18px 20px;
width: 620px;
voice-family: "\"}\"";
voice-family:inherit;
width: 579px;
```
The issue that almost drove me crazy: The IE Three Pixel Text-Jog. Because of this bug in IE/Windows, as the main content area and left side navigation have no space between them, the content area was being pushed down so that it began vertically following the left side navigation. It took me some time to track down a reason for this rendering issue, and maddeningly longer to figure out how to apply the fix to my particular markup. This will only mean something to adept developers. But when I finally hit on the following CSS and the site rendered properly in IE/Windows, I literally danced around the house for ten minutes.
```
html>#content { width:579px; }

/* Hide from IE5-mac \*/

* html #nav {
	margin-right: -3px;
}

* html #content {
	height: 1%;
	margin-left: 0;
}
```
A third issue affected only IE/Mac, and as that browser was obsolete and had a small and declining share of hits when I re-launched the site in January 2005, I went live without a fix (I managed to address the issue within a month).

IE/Mac had a similar rendering problem to that for Windows above, but it was easier to track down and fix. It turns out that the browser has a bug in which a specified width can be off by a pixel or so. The following CSS fixed the problem.
```
#content p, #content ul, #content ol { padding-right: 1px; }
```

Future Work

Currently the left-side navigation is simply a series of links; I want to change this to an unordered list (<ul>/<li> tags).

PHP Site Framework

After having developed and updated the site for several years, I began to think about how I could save time and effort and focus more on content and less on the tedium of site maintenance. Inspired by the separation of content and presentation promised — but not entirely delivered — by CSS and XHTML, I developed several requirements:

no duplication of markup or content;
robust URLs that represent content and contain no structural information;
a method for mapping the URLs to site structure;
a lightweight solution to allow editing of HTML content in a text editor (I wasn't really interested in going to MySQL at this point).

I decided I would map a single PHP parameter to page content; the page name (<title> tag); and the page's position in the site (i.e., what section it lives in, and whether there are "parent" pages). I used an array stored in a session variable.

<?php $_SESSION['pages'] = array(
	// ...
	"registry" => array( 9, "Instrument Registry" ),
	"2101" => array( 9, "Model 2101 (Europe)", registry ),
	// ...
) ?>

The first array item shows how each entry contains its own array, with values for site section number (9, in this case) and page title ("Instrument Registry"). The next line shows a "child" page, containing a third element in its page array that identifies the parent page (registry). So, given id as the parameter, a simplified way to present the page title would be:

<title><?php echo($_SESSION['pages'][$id][1]); ?></title>

(It is more complex in practice, given parent and sub-pages, the mailing list archives — see below — and other considerations.)

The entire site is generated from a single index.php file. In this way, not only are the visual design and layout of the page separated from the markup, via CSS, but using PHP the page navigation and site structure are merely "wrappers" for the content. A given page — for instance, rhodeschroma.com/?id=registry — may be moved to different site sections and/or levels in the site architecture, without affecting the URL. The section number references navigational elements (the section number LED graphic and the side navigation).

One challenge of this approach is that, as a site grows larger, so does the array; at a certain point it may become infeasible. One strategy I developed to reduce the size of the array somewhat was to add a second parameter for mailing list archives: id maps to year, and an extra month parameter ensures redundant array entries are not required for every month of each calendar year. For example, rhodeschroma.com/?id=2006&month=01.

	"2006" => array ( 9, "ChromaTalk Archives: 2006" ),
	"01" => array ( 9, "January" ),
	// etc.

This avoids the requirement for near-duplicate array entries such as 199901, 200001, 200101, etc. The page title (similar to sub-pages) is a concatenation of the main page name and that for the month parameter — something like the page title constructed for sub-pages as in "Rhodes Chroma · The Chroma CPU Plus (CC+): User's Guide".

	"cpuplus" => array ( 6, "The Chroma CPU Plus (CC+)" ),
	"cpuplusmanual" => array ( 6, "User's Guide", cpuplus ),

Similarly, the navigation is generated from a single file per section, making maintenance easy (previously each page in the site had its own copy of all navigational content and markup, requiring custom changes to every file affected by an update or addition). PHP is used to set CSS classes and hide and show information as appropriate for the current page.

Future Work

I want to convert the entire site to use $_GET rather than depending on register_globals being turned on; I understand that this will be required rather than optional in PHP version 6.

Google Sitemaps

In order to be indexed more efficiently and completely by the leading search engine, I implemented a Google Sitemaps file for rhodeschroma.com. This is a simple XML file that is easy to create and maintain, and appears to result in a better-indexed site, particularly for new pages.

Google Analytics

I have been trying out Sawmill for log file analysis but in the summer of 2006 added Google Analytics to the site which provides good day-to-day statistics views and adds system information such as monitor resolution and bit depth. See Site Statistics for more information.