www.SnydersWeb.com

Home : Web Sites : Personal Web Sites

Personal Web Sites

My personal web site has always been a place of learning and exploration for me. It is my personal forum to do whatever I want and explore ideas left untouched or unexplored during my regular work. It's a valuable creative and technical outlet for me.

the Snyder's Web - 2005

the Snyder's Web 2005
the Snyder's Web 2005, final Photoshop mockup
(click to enlarge)
Shortly after launching the Snyder's Web - 2002 version I became curious about using the browser's native XML functionality to pull in external content instead of using an IFrame. Since that time I had researched it off and on but I never was quite able to get something I was satisfied with. I was happy with the 2002 version, but was unsatisfied with a couple of aspects of it - mainly having to maintain 2 different versions for both legacy browsers and regular browsers. So for every page, there were two that must be maintained. The other huge downside to the 2002 version is that it wasn't search engine friendly - as a result my LegacyBrowser version got spidered and would appear on search engine results.

Over the last 2 years I have learned XHTML and code almost exclusively to that standard. If you're a web developer, this is the best and only way to make the jump, quit HTML 4.01 cold turkey and learn to write a document that passes the W3C's validator. The client XML objects require the document to fully comply with that standard - it cannot pull in HTML 4.01 since it is technically not XML, unlike XHTML. A side benefit is that it forces the overall quality of my coding be high.

Technically this site is considerably more advanced than the old versions - the interface is similar, the old sites uses JavaScript to provide information about the interface context whereas this version looks at the external document XHTML and changes the interface accordingly. The advantage to this is that the static (non JavaScript) driven version and JavaScript/XML version use the same document. Though this requires care must be taken to ensure that the interface elements are coded consistently in an exact pattern. Another great enhancement is that the old one used a print button to reformat the page for printing - this one takes full advantage of Print StyleSheets - all the user has to do is just print and it'll kick in.

A nice side effect to the way this site is coded, any page could serve as the entry page. The old site had a "front door" that had to be used to invoke the DHTML interface.

One downside to DHTML web sites is that they do break the back button - and this one unfortunately is no exception. Sadly there is no way for me to alter the browser's history - If I could alter that history for good means, good bet that malicious coders would use it for less than honorable purposes. This site is set up to jump to the last accessed page in the event refresh is clicked. Incidentally that would also allow a user to bookmark a specific page when before the 2002 version used a "bookmark" button. Another downside to this site is that animations may not be as smooth on older machines due to the large number of transparent effects on this site. Nevertheless it will work.

The look of the site is loosely based on the user interface in Doom 3. I liked the way it handled things, the way it moved and gave me a few neat ideas which you see before you. The hardest part of the graphical end of this site was the background. It took a while to get a nice circuit background tile that conveyed the feeling I was after without being too busy. The little spark effects you may be seeing were to enhance the whole future interface look.

As to the future - there is a chance I might investigate XSLT for extracting interface context and content. Right now this site contains a lot of JavaScript code that pulls exact sections of the external document - so if the interface is revised, it would also require a number of adjustments to the code.


the Snyder's Web - 2002

the Snyder's Web 2002 - rev2
the Snyder's Web 2002, final Photoshop mockup
(click to enlarge)
Looking to build on the 2001 version of my web site, I started brainstorming shortly after it launched. The 2001 version of the site worked well enough, but functionality wise it was lacking in a few areas. The biggest was it could only take two levels of content: Topic > Sub-Topic. That and browser bugs started showing up. Mozilla had the biggest/most annoying Bug #138120 that caused elements to be incorrectly unhidden. Internet Explorer 6.0 had a bug that caused the sub menu background not to properly render.

The look of this site is much like the 2001 Snyder's Web site but is a little more polished. The color saturation was decreased on the topic bars and logo. The topic bars also had their look tweaked a little bit, and the sub menus got a nice little bevel effect. The cut-out in the topic bar also exposes more of the sub menu and makes it stand out a little more. Since the sub menu now changes based on what sub topic is selected, I created a little feature that expands and blinks it to show the user that it had changed. Printing and bookmarking buttons were moved under the topic bar this time. As far as the interface, the biggest change was the addition of the sub topic system. This allowed content to be deeply nested. I can have Topic > Sub Topic > Sub Topic... ad nauseum. Implementing this meant that the internal architecture of the site had to be overhauled.

the Snyder's Web 2002 - rev2
the Snyder's Web 2002, "Power Crumbs" design
(click to enlarge)
The internal architecture was something I had thought of when I was toying with the idea of the "Power Crumbs" design pictured left. The biggest technical problem was that the 2001 Snyder's Web site was that sub menu data for the topic bars was stored in the main script files. To store what page belongs where would've created a huge amount of JavaScript arrays for data stores. It also would've made the site very difficult to maintain. The only solution was to move most of this data to the content files and have those set the interface context that they are supposed to be accessed. This means the content files state what topic they belong under, what their sub menu is, and what sub topic under the topic bar they belong. The site in turn determines if an interface change is needed and adjusts accordingly.

One enhancement on this site that may be turned on later is a sound system. I had to disable it because Internet Explorer developed severe memory issues. With the sound off, Internet Explorer doesn't grow much in terms of memory consumption, but with it on - it's a totally different story. I have often seen it crash Windows 9x/Me boxes. There are different implementations of sound that might be more memory friendly for Internet Explorer, but unfortunately those were proprietary to that browser. I still believe that sound, if done right, can enrich the user's experience with audio AND visual feedback for their actions. I plan to revisit this later as time permits.

Each time I have developed a new version of my personal site, I have always learned new and different things. As my skills grow, so will my coding. This latest batch of enhancements may be the end of the line for this particular design but I am not holding my breath on that.


the Snyder's Web - 2001

the Snyder's Web - rev2
the Snyder's Web, final Photoshop mockup
(click to enlarge)
I have had ideas for a DHTML web site since 1998 when the 4.0 browsers were released. My goal was to write a DHTML web site that used a common code base for both major browsers on the market, Internet Explorer 4.0 and Netscape Communicator 4.0. During my original research and development, it became apparent that it would take much more time than I was willing to invest to develop this web site. I eventually abandoned this project, but I learned a lot from the research and development which I was able to apply to my work. I also held on to the ideas, never forgetting my goals.

At the 1998 C|Net Builder.com web conference in New Orleans, Louisiana, Netscape announced Mozilla, known as "Gecko" at the time. This small, fast new page renderer for the Netscape browser promised an end to Netscape Communicator's numerous bugs. They also announced this browser would be 100% W3C DOM compliant. Three years later, I can say the browser has improved vastly and each release gets better, faster, and more stable. I now use it as my primary web browser. The 1.0 release promises to be everything Netscape 4.0 should've been. Hopefully, the Mozilla browser will gain popularity as time goes on.

the Snyder's Web - rev1
the Snyder's Web, initial Photoshop mockup
(click to enlarge)
DOM Scripting is a whole new way of creating and manipulating web pages. The potential is enormous; it gives browser the ability to do virtually anything to web pages. These abilities include changing content on the fly to include new data, filtering records, moving page elements around, and much more. The power of the client's computer is truly unlocked, alleviating the load on both the network and the server.

Work resumed on this site when I felt the Mozilla builds had matured and most of the bugs had been worked out I also had learned a bit more about DOM Scripting techniques the provided new insights.

This site was written without any aid from WYSIWYG type editors like Dreamweaver. All the HTML and JavaScripts were written in HomeSite 4.5.2. The logo for this site was originally created via pen & paper, then on to FreeHand, then back to pen & paper to come up with the web lines, and then finally back into FreeHand when had the look mostly figured out. All conceptual layout and design work for this web site was done in Adobe Photoshop.


the Snyder's Web - 1996

the Snyder's Web - 1996
the Snyder's Web - 1996
(click to enlarge)
I was fresh out of college when I wrote this. It was a post-graduation project. At the time I made this, I didn't know much JavaScript, so the framed version of this web site used a series of nested frames to change more than one frame panel at a time. It worked, but was difficult to maintain and had a tendency to crash Netscape 2.0. This site featured a non-framed version for legacy browsers.

This web site was a pretty simple one overall. The most time consuming parts were making/rending the spider in 3D Studio R3 and creating the Snyder's Web logo artwork. I actually borrowed a few library books so I could get the general look of the web right. This site also is the first time I attempted any kind of elaborate table/text layout.


Inter-Res - 1996

InterRes - 1996
Inter-Res - 1996
(click to enlarge)
My second online résumé created at the same time as the 1996 version of the Snyder's Web. This site was to showcase my work I had done during college. It improved on the first Inter-Res in a number of areas, mainly in terms of organization and readability.

This site used a system exactly like the sister site (the Snyder's Web - 1996). Once again it had no JavaScripts.

The graphics for this site were created using FreeHand and Photoshop. The spinning globe logo was created using 3D Studio and the text was later super-imposed on each frame with Photoshop.


Inter-Res - 1995

InterRes - 1995
Inter-Res - 1995
(click to enlarge)
This was my first serious attempt a full web site. I created an online portfolio, and was the first student in Computer Graphics to do so. It turned out fairly well, and it accomplished my goals at a considerable savings.

This site did have a few minor issues, the biggest was with Netscape 2.0 and the way it handled colored text while printing. Using a colored text somewhat solved the problem, but caused other problems. This was later fixed in the '96 version.

Design work for these graphics was done in FreeHand and later imported into Photoshop where the final touch-up was performed.


My First Web Site

My First Web site
My First Web Site
(click to enlarge)
This is the last iteration of my first web site. This page represents my first real foray into web pages. Other than Inter-Res, the web site has nothing much more than a modest (and out of date) collection of hyperlinks to other sites I found interesting at the time. Looking back on this site allows me to appreciate the rather modest beginnings.


Valid XHTML 1.0! Valid CSS!