…To seek out new life, and new civilizations — To boldly go where no one has gone before.

Development Info

This site was developed and tested in Mozilla Firefox, versions 2.0.0.1 through 2.0.0.8.

Appearance and functionality tests were conducted in Internet Explorer 6 and 7, Links, Lynx, Konqueror, and w3m (special thanks to i80and for testing in some of the more uncommon browsers).

Evolution

The underlying code of the site has gone through several revisions, and is regularly updated with new, more concise code. It started as a replacement for the old frames-based website, written in plain HTML. As time went on in the new site development, I came across PHP, a powerful server-side scripting language that allowed me to standardize the entire website from just a few files. I had already spent about a month and a half developing the new HTML site, but it was easily converted to PHP.

Since the conversion, I have added literally dozens of features, beginning with the message banners you see pop up when you do something such as fail a login, logout, successfully login, and change settings. I also added (I won't try to keep them in order) the jQuery library (by the amazing John Resig) and its TableSorter plugin (by Christian Bach), to sort the table of members in the members' section. I added the wonderful Interface effects by Stefan Petre, and increased the site's reliance on jQuery, using it instead of document.write() to insert the message banners.

Another interesting addition was the tooltips, which you can now see by pointing your cursor at just about any link, plus acronyms, certain form input fields, and (in the future) many other elements. They are generated dynamically from the title attributes of any tags the script is told to operate on. That's another jQuery plugin, this time by Jörn Zaefferer and Stefan Petre. The code is wonderfully written, and can even be extended with additional functions (I briefly toyed with the idea of adding transitions to the display and removal of the tooltips, but decided it made the interface too slow).

The crowning achievement of the development effort, aside from making sure it worked right in the initial launch (way back in, when was it, March 2007?), was making the site look (almost) the same in Internet Explorer (sometimes referred to by us Web designers as Suckernet Exploder) as it does in Firefox. This bit of mastery, accomplished about June 15, 2007, came from two simple tricks: I created a background image I could use to create false columns, contained the #nav and #content elements in another div, and inserted an extra element into the document flow just before the end of the inner container that had clear: both set, making it expand the containing div and fill the space between the tag and the footer. IE still has a few glitches, but the site is at least mostly usable.

Soon after making the site IE-compatible, the addition of pages, and therefore sidebar links, prompted the design of a system to hide extra links when they were not in use. A small span was added to the members' navigation bar, with its onclick attribute set to a function that would toggle the visibility of the extra links if they were undesired. This helped to reduce the clutter in the navigation.

The very next morning, I decided that having the links hideable was rather pointless if they didn't remember their visibility state. I utilized another jQuery plugin, Cookies, and wrote a couple blocks of code to facilitate this. The links hide themselves on clicking of the "Hide" span, and remain hidden on subsequent pages (relying on a cookie to store their visibility) until the user clicks "Show" again, at which point they remain visible until the user clicks "Hide", at which point… It's wonderfully simple really.

At this point, the humongous redesign of the old site was basically complete. The new site had style, interactivity, dynamic features, a wonderfully simple interface, and a lightweight feel (after initial JavaScript and CSS loading). The goal now was to add information as it became available, and to annotate that information with helpful tags and tips. The use of acronym tags became quite useful, and the tooltip script was implemented on these as well, displaying the title of the acronym in a nicely formatted box that didn't truncate the text (the tooltips in Firefox 3, as of alpha 5, no longer do this). Also, a special class of span was added, info, to denote helpful definitions that will slowly roll out as content revision progresses. This was also enhanced with the Tooltip script.

On June 17, 2007, I fixed some IE bugs. One made the login page inaccessible to IE6 users (at least my version). The problem was in using the Tooltip module on the inputs, which for some reason crashed IE's renderer. I added a conditional test using a new jQuery module, jQBrowser, by Dave Cardwell that only allows the tip-ization if the user's browser is not IE. Another was the navigation links being off if one of the links in the navigation had its innerHTML changed. Something that made the current highlighting simpler is the placement of the width properties in CSS instead of dynamic JavaScript. The nav bar is fixed-width anyway, so this shouldn't affect the design. Finally, I repaired some minute border problems in IE6 and below. The IE fixes stylesheet is on its way to becoming an integral part of the site.

In the wee hours of June 18, I continued tweaking the IE stylesheet, as well as solved other problems. I noticed that the link hiding didn't really work in IE, so I changed the extra elements (the toggle span and the <hr />) to be inserted by jQuery snippets and conditionally ran them only if the user's browser was not IE.

That afternoon, I created more classes of tooltip, plus new images (besides the "tip" icon) to go with them. Now, help items have a "help" icon and external links get "ext". I moved on to fixing layout problems in the settings form, tweaking the link hiding so it would work in Internet Explorer, and messing with the action of the message banner close links. No more fades; they just disappear (like Google's do). I find it cleaner than fading or "closing."

After uploading all the changes from June 17th (evening) and June 18th (morning and afternoon), I remembered that there was a jQuery plugin called Thickbox (by Cody Lindley), which would help with image galleries and stuff. I originally wanted to try it out on a new website I'm designing that will feature an image gallery, but I noticed its other applications, including AJAX page displays. I spent an hour or two adapting the forms I had for settings and login and modifying the logic behind the login checker so it would properly redirect after an AJAX login (the old login form no longer exists). I had some issues with the top borders of the fieldsets, but I fixed that by (sigh) removing the rounded corners. I also added a confirmation on logout using Thickbox.

In the very early morning of June 19 (I know it's always late, I just do my best programming then), I made another breakthrough. I changed the source order of the navigation and content frames (as recommended by accessibility guidelines), and tweaked the formatting to make the page display properly again. In doing so, I was able to remove an entire code block from the IE fixes file. Not only is it more accessible to people with screen readers (you never know who might stumble upon your site), but it reduces my hack load.

After getting some sleep on June 19 and attending to other tasks, I returned to the computer with nothing to do. After doing a quickie project of fixing the highlighting navigation in IE, I made a Thickbox-enhanced gallery for concept images. I used Google Picasa to generate thumbnails and resize the large images, then copied those files into the site and created my own gallery. Fortunately, I use the same background color as one of the Picasa page templates.

Soon after, it occurred to me that I should probably make hierarchical navigation. I added ten pixels to the left margin of the navigation bar and put in a one-pixel left border on all the links. This gave me a tabbish feel, which I liked for its own sake. I then began adding different levels as classes in the CSS file, and applied those classes to the existing links, rearranging them slightly to facilitate grouping. I changed the span I had been using for the toggle into an anchor (curses on the IE6 programmers that decided not to support hovering on anything but a bona fide link with an href) and copied XP's plus and minus boxes (I don't think Microsoft will mind) into images for the site.

It took some tweaking, but I got myself three levels of links (top, sub-, and sub-sub-links) and made them work in Internet Explorer (most of the tweaking was here ;) ). I modified the JavaScript functions I wrote to handle the toggles so they'd switch classes instead of HTML content, changed the effect to a slide out to the right ("under" the content) and made sure the result worked in IE.

I made so many tweaks to the styles following that, I can't detail them all. I know I made at least two major changes. First, I rewrote the JavaScript responsible for folding the members' links so it could (potentially) be re-used elsewhere in the navigation bar. I tweaked the styles for the tiered navigation for IE, and changed the fold effect (again) from the slide out right to a vertical blind (or is it more of a wipe?). I really can't decide which effect is better; perhaps this is another opportunity for user preferences?

Second, I fiddled with the fonts, making the content and footer have Arial (or at least, sans-serif) text (getting my #content size from MediaWiki). I had to fiddle around a little to make the Thickbox windows behave properly, but the result looks pretty good; better, in fact, than the Times New Roman (serif) I had been using.

I took a break from development on June 20, but returned for a small session in the afternoon/evening of the 21st (distracting myself from a video I had downloaded the previous day – on CSS). I implemented a jQuery plugin I had downloaded the day before, jquery-roundcorners-canvas, whose author I do not know, that generates rounded corners using Canvas, a technology I have encountered in Firefox and other Mozilla browsers (Safari also supports it). The download came with a JS implementation of Canvas for Internet Explorer, but after testing it I found too many peeking square borders, and dropped the include line from the site's code. I also struggled with making corners using this plugin for fieldsets and buttons, including those in Thickbox windows, and the tooltips, but the code did not generate corners and I had to grudgingly remain with the Mozilla CSS for those elements. I did manage to get rid of that CSS for most of the elements: The header, footer, container, message boxes, alert status div, and navigation links (I just added these rounds) all have Canvas corners. I did not have to test the design in Internet Explorer because as far as IE was concerned, nothing changed.

I downloaded a video on CSS designs from Google Video, and one of the recommendations the speaker (Douglas Bowman, founder of Stop Design) made was to use background for bullets instead of list-style-image, which can have unpredictable results across different browsers. I must say, that tip worked well for the bulleted lists on the site. Doug also illustrated the point of line height, and I increased my line-height setting for the content area to 1.5em, noting that it did indeed improve the text readability.

As a small project, I converted the stark anchor navigation to a series of nested unordered lists, for better accessibility in non-CSS browsers. I had to tweak the stylesheet a little to make the new design work in IE, but I previewed the result without the styles and it looks much better than it used to. It actually stays as a tree. I also (I was thinking about accessibility) made sure that the site would be usable with images turned off. I added a 1-pixel border to the left side of the content frame. On pages that are shorter than the navigation (there aren't many), it looks strange, but on normal pages it looks fine.

On June 22, I wrote an addition to the settings script that allows users to select the transition they want for collapsing sidebar sections. So far it has two choices, but it may be expanded (and the radios converted to a select menu) in the future. Yet another quickie project. Users can choose between a slide out to the right and a vertical "blind" effect.

In the wee hours of June 23, I changed the settings box to be only accessible by members (settings still take effect, they just can't be changed) and added more options. There are now six transitions: Slide Right, Slide Left, Slide Up, Slide Down, Vertical Blind, and Horizontal Blind. They are presented in a select menu to save space.

I moved the settings and log in/log out links to a separate list and positioned it in the upper right (again taking my font sizes from MediaWiki). I added display of currently logged in user, and changed the way messages are displayed, using a cookie to store message values across one pageview. This way, search engines won't index the queries (they like to treat these as completely different pages), and reloading the page doesn't show the same message repeatedly (the cookie is automatically deleted at the first normal pageview). To accommodate displaying messages for logged-in users, I had to tweak the page formatting a little, but it was a small change for a large gain. The messages adjust their top margin automatically depending on text size.

On June 24, I fixed a problem with the hiding links, reported by a friend of mine while he was testing the site. The problem was an incompatibility between the jquery-roundcorners-canvas script and hidden elements. Apparently, hiding things messed up the script, so no rounded corners were generated, and the browser's hover was off, making links near the top hard to click. I removed the rounded corners script snippet that did the change on the links and put in Mozilla-proprietary CSS. It won't validate, but it works. Only problem is, Firefox can only have rounded solid borders, so I had to make a little compromise on the design.

On September 9-10, the member "database" was augmented with fields to block login and display in the members' list. Other changes included an upgrade of the Thickbox UI widget and updating jQuery to 1.1.4. jQuery 1.2 was released on September 10, and it was tested with the site, but proved to cause infinite error loops when animating the member links, and the upgrade was reverted. A "no transition" option for the links was added while testing, and left to provide extra flexibility.

The wee hours of September 11 saw an update from Tablesorter 1.x to version 2.0. The plugin was rewritten, necessitating a modification of the in-page JavaScript that launched the sorter. A workaround for the previous row striping capability is in the works. Meanwhile, we have new code!

Egads! While I was happily updating Thickbox on September 10th, I neglected to remember that I had modified the Thickbox CSS code to prevent layout bugs with margins and padding. It was only one line commented out, but boy did it make a big difference! And I didn't even notice until I was reading this page out of nostalgia late on September 12 (well, Sept. 13 because it was after midnight) and noticed haywire formatting on the list of tools near the bottom. Digging with my Firefox Web Developer toolbar (a great little extension by Chris Pederick), I found that by disabling the Thickbox styles I could make the problem suddenly vanish. I opened the stylesheet and lo and behold, there it was staring me in the face. Cody Lindley, for some reason, thought it necessary to set margins and padding equal to zero for Thickbox to work. Commenting this line out fixes the problem, though it may cause issues in IE7; I can't check yet. Lists display properly in IE6 with or without the line, so I'm not sure what the deal is with Firefox. Oh well; I have it set so it works, and I'm not going to look this horse in the mouth.

Message Banners

The message banners had a little evolution of their own. They began as simply being there, inserted by PHP or JavaScript if certain conditions were met. Then they got multiple styles (yellow, red, red bold, big...). Then they were faded in and out by jQuery (automatically). Then the JavaScript-inserted ones got inserted by jQuery DOM scripting instead of document.write(). Soon after (or before, it's hard to remember), they got those "Close" links (inserted after page load by jQuery), and the auto-fadeout was turned off. I then changed the disappearance effect so they closed vertically as they faded away.

As mentioned above, the banners got another makeover on June 18, 2007, when the close effect was removed. This change resulted in a cleaner interface, and much faster. Extra CSS was added to the IE stylesheet to give them fixed width, keeping them from usurping the entire width of the top of the page (which looked really ugly).

Future Plans

In the future, I hope to fix a couple bugs. I have noticed that Firefox 3, due out Summer 2007, doesn't fade things in like it should. This bug is awaiting a response from the jQuery development team. Hopefully, the regression causing the fadeTo() problem in Firefox 3 can be solved before post-release mass-adoption by the public. Further out is fixing the message banners in IE6, though they might look fine in version 7; I don't have it, so I don't know.

Additionally, there is a lot of loose JavaScript lying around the base template that should be moved to an external file (or more than one, if the functions and scripts can be logically broken up). I plan to work on this as well, since removing the code from the base template will quicken load time for all non-initial visits and reduce bandwidth usage over multiple page views.

Notably for members, I have a growing list of potential Web hosts with the proper specifications for running a MediaWiki installation. Once this is set up, a lot of material should begin to be put there, with this site possibly turning into a public archive of things we want to disclose, or perhaps keeping its current functions as an augmentation to (or a relatively stable version of) certain wiki pages.

Compatibility

Some of the features available on this site do not function (or function improperly) when the site is viewed in Internet Explorer. These functions include the TableSorter (script just doesn't work in IE) and a few other minor JavaScript snippets that prettify the site. There are also a few minute layout bugs, most noticeably the lack of the current link overlapping the border line, most of which have been fixed with the IE-only stylesheet.

Rounded Corners

The rounded corners used on this site used to be generated entirely by Mozilla-proprietary style sheet properties, but were largely converted to Canvas elements using a jQuery plugin mentioned above (and, of course, in the list below). A few elements' corners are still using Mozilla CSS, but most of them are generated by the jQuery plugin. Eventually, I hope to make it so that the corners are visible in Internet Explorer, but the current version of excanvas I have (included with the corner-generating plugin) didn't produce very good results (it left a lot of peeking original borders), so I have disabled it. I am working on it for a future version of the site.

Tools

I used the following tools when developing this site (besides HTML):

  • JavaScript
    • jQuery library
    • jQuery plugins
      • TableSorter module
      • More Selectors module
      • Cookies module
      • Interface Elements module
      • Tooltip module
      • jQBrowser module
      • Thickbox module
      • jquery-roundcorners-canvas module
  • PHP
    • Login system
    • Dynamic messages
    • Array-based table generation
    • Ease of maintenance
  • CSS
    • Borders
    • Backgrounds
    • Positioning
    • Floats
    • Font formatting
    • Mozilla proprietary extensions (enhancements like rounded corners)
  • Images
    • PNG
      • Column background
      • W3C badges
    • GIF
      • User icon
      • External link icon
      • Tooltip icons
      • Combadge bullet
      • Animated favorite icon
    • JPEG/JPG
      • Concept images
    • ICO
      • Static favorite icon

Images

There are many images on this site, and they have varying sources. The icons of the Star Trek combadge are resized images of a graphic I got from a Trek site, but the tooltip icons, while they include that badge graphic, are entirely my own creation, using free fonts in The GIMP. The concept images (in the members' section) are JPEGs found using Google Image Search, and are actually photos of a Voyager model (at present). The thumbnails were generated using Google Picasa. I release all rights to images on this site incorporating copyrighted sub-sections, including Voyager and the combadge symbol.

The external site and user icons are GIFs I took from the MediaWiki "Monobook" skin and modified (using The GIMP) to better suit this site's design. I claim no rights to these images, and release my modifications under the original GNU license.