BrainStream v. 2.5: About this Web site
(Last Updated: March 23, 2004 )
Update News
03/23/2004, 1:35pm ET
Well, I've moved from BrainStream version 2.0 to 2.5. Why only half-way to version 3? Because all that's changed so far is the infrastructure. I have moved away from Blogger and into MovableType 3.31.
I'm incredible impressed - I've been running The Leaky Cauldron on it for a while but I haven't really had a chance to play with it. Now that my work requires me to be up on the latest technologies, I've decided to use BrainStream as a testbed.
Aside from playing extensively with the <$MTInclude$> tag I've only worked on MT-Blacklist to save little kids looking for Harry Potter from stumbling across sexually-oriented comment spam.
But coming soon, you'll be able to witness a "Day in the Life" by following along my del.icio.us linkfest via an RSS feed. You'll also be able to (hopefully) read the same news I'm interested in categorically once I relocate all my RSS feeds of interest here.
I'm also hoping to create some photo galleries with my oodles of digital and non-digitized photos, categorize my book, music, and movie collection & finally begin to move several years of my writings from paper to the Web.
01/31/2002, 5:00pm ET
This current iteration of BrainStream is its second coming. The first time was quite easy - I was feeling quite Celtic and went searching across the Web for appropriate clipart to fit the mood. At that time, I didn't really care how the site went up, I was more concerned with first having a presence and then having something to talk about. As long as it was easy to get posted, I was happy.
Then I had to go and develop a conscious. Yup - not the smartest thing in the world and had I known the work ahead of me, I may have ignored the little voice in my head. You see, I've been working with Web standards in one way or another for about 5 years. I've done Web accessibility consulting, advocated for accessibility, technical edited about a dozen books about HTML, XHTML, and XML, worked for a Web standards consultancy, bitched about the lack of Web standards implementation through the Web Standards Project, and even told companies how they could better use Web standards in their products -- all the while managing a small handful of Web sites that were completely contradictory to that which I was preaching.
"I feel the key to international propagation of accessible design techniques lies in restructuring the fundamental learning process of developing a Web site. When I first got involved with Web development back in 1994, HTML was nothing more then an easy-to-use programming language used to design Web sites. Several years later, with the birth of XML, my viewpoint changed and I saw the dichotomy between a markup language used to give context to information (HTML) and a styling language for designing the look and feel of a site (CSS). This new approach to Web development allowed me to design Web sites with Web accessibility as part of the process - not an afterthought or something I needed to go back and do after my site is created." - B.K. DeLong, January 2002
So this second version of the BrainStream Web site is a manifestation of the above thoughts.
Standards Compliance
I was lucky. While working at ZOT Group, I had taken a significant amount of time to redo the company's Web site to adhere to W3C's recommendations. It basically looked like this version of BrainStream except the header and footer were separate frames and the color scheme was a straight red and white.
Since I am a big fan of information reuse, I took that exact layout and used it for the first draft of what you see now. After several comments, I opted to remove the frames in favor of the box model. And though it was nice to have the consistent different-colored header and footer no matter how long the page, my final solution made the site more usable.
To double-check my work, I have run the site through W3C's XHTML validator, W3C's CSS validator, and CAST's Bobby accessibility validator. I originally checked it in Netscape 6, Netscape 4.6, IE6.0, and Opera 4.0 on the Windows platform, and have had several people check it out on Macs. I hadn't tried Linux machines nor have I tried earlier 4.x versions or 3.0 versions of Netscape. That was until BrowserCam came long and it is darn cool - basically someone wrote a script to launch a set of URLs in 6 different browser versions on 4 different platforms. I highly recommend it.
Please email me if you find a glaring error while viewing my site in your browser.
Sounds pretty intense, yes? Actually, it's still a work in progress and there will always be things I can do to make it more usable and accessible to the Web surfing population. I'm always learning new things and am not afraid to try them.
WYSIWYG
Is anyone else tired of the above acronym? The concept of "WYSIWYG" has distorted Web development everywhere. Web authoring tools take any sort of shortcuts they can to spit-out code that will make a Web page exactally as the person laid it out; completely distorting the line between markup and style.
My point? This site was completely created by hand using Microsoft's Notepad text editor.
The CSS Trick
One of the biggest obstacles to creating a Web site using straight XHTML + CSS was Netscape 4.x browsers. Most of the styles that worked in more recent browsers look horrendous in Netscape. With the ZOT Group site, I solved the problem by using Javascript to detect the operating system and browser version, and then deliver one of two stylesheets.
Then I learned of the @import trick. It's not a hack - it's perfectly legit CSS. The key is that Netscape 4.x doesn't recognize it.
It works like this: In order to have a successful (X)HTML + CSS Web site without using tables for layout, you have to have two stylesheets. One sheet is the main stylesheet which has properties and rules that will work in all browsers including Netscape 4.x. You have your page load the main stylesheet like this:
<link rel="stylesheet" type="text/css" href="css/main.css" />
The second stylesheet has only what will work in the newer browsers like Netscape 6, Opera 4.0, Netscape 5 etc. You load it like this:
<style type="text/css" media="all">
@import "css/load.css";
</style>
Netscape 4.x doesn't recognize the import at-rule (@import) so it ignores it. Therefore, anything that doesn't work in Netscape 4.x, place in the stylesheet loaded with this method. I even had some styles I had to use in Netscape 4.x to get the desired effect I was going for that made the newer browsers hiccup. So in the second stylesheet loaded with @import, I overrode a few style properties set by the main stylesheet.
Pretty darn cool. Kudos to Eric Costello for showing me that one.
CSS MIME Type
One of the other issues I ran into while developing the site was that stylesheets did not load up in Mozilla. The reason? My Web server was identifying my CSS as a MIME type of text/plain instead of text/css. Even though I specify text/css when I import both stylesheets, the Web server itself needs to identify it as text/css.
The solution: (thanks to Eric Meyer pointing it out) since my Web server is Apache, I went into the /usr/local/etc/httpd/conf/ directory and edited the file "mime.types". As the last line of the file, I put:
text/css [TAB] css
Once I saved the file and restarted the server (kill -HUP httpd-process-id), I could see the change for myself:
I typed:
telnet brain-stream.com 80
Result:
Trying 209.95.107.206...
Connected to brain-stream.com.
Escape character is '^]'.
I typed:
GET /css/main.css HTTP/1.0
(hit ENTER twice after you type the above line)
Result:
HTTP/1.1 200 OK
Date: Thu, 31 Jan 2002 21:57:43 GMT
Server: Apache/1.3
Last-Modified: Thu, 31 Jan 2002 03:05:05 GMT
Content-Type: text/css
Note the value of "Content-Type".