Website Revamp Update
Back
as recently as 2008 this site looked like the image in the thumbnail. In January
2009, I started updating
the site to take advantage of better web technologies. Previously, I cheated and
did a lot of page formatting using tables. Now a days that is pretty much a
no-no unless you are actually showing tabular data. The engine
running the site was also switched. Previously (when there were blue and green menus) the site was
rendered using GNet (short for Gaspar Network). It was a program I drafted as
part of a DePaul master's course. G-Net took care of generating the formatting
in addition to the content. I have since created a more commercialized
version under the name Webblaze (which is not short for anything, I just think
it sounds cool.) Webblaze is a simple tool that produces basic HTML output that
can then be customized through the use of CSS.
Phase 1 converted all the pages away from tables to using a combination of DIV tags and CSS. Actually CSS was introduced a while a go. As a developer I always wanted functionality kept in one spot so if I needed to modify something I had one and only one place to go. I only needed to modify one file to give the site the cool glass look that has become all the rage. The DIV tags allow me to place content in an easier (and at times layered) manner.
|
| A screen shot of version 4 launched winter 2009. 800x600 image |
Phase 2 was the porting of older pages that were being kept on the new site. Previously I had a CSS file that defined many classes. I got smarter and took advantage of designing styles for basic HTML tags. Its proof that you can do more with less.
Changes from version 4 (2009) to version 4b (2010) are subtle. Majority of the work was performed in the handling and optimization of the Cascading Style Sheets (CSS). Re-arranging how items appear within the page and expanding the use of IDs in CSS led to the elimination of classes. This in turn leads to a smaller HTML footprint which can shave time off the network transmission of data. Some of the main cover pages in version 4 were converted to use DIV tags instead of tables for the layout. All pages are now using DIV tags eliminating the need to use tables for content layout. The site appearance can now be tweaked through a simple CSS modification which is the final compliment to the Webblaze model.
The other major change is to the philosophy of the concept of submenus. Previously Webblaze generated submenus were placed on the "side bar" located to the left. These are now located on the top level menu bar and only feature top level sub categories. The area on the side bar can now be used to display any HTML content, including links, comments or annotations to enhance the topic being displayed.
|
| A screen shot of version 4b launched winter 2010. 800x600 image |
The main menu items still appear as black but the previous sub menu items are now purple to indicate they are features of a particular area. Thumbnails are also now standardized at 120 by 96 pixels. Project graphics are now narrowed in height to accommodate the new side bars. But the most functional change is using the Webblaze system to insure that all text rendered exists in only one location in the site source tree. This continues the commitment to ease-of-maintenance with requiring a chance in enhancement to only be made in one spot to apply everywhere.
This site has now evolved a great deal from the original G-Net based code. DePaul provided the background to build G-Net but real world use and experience brought us to the current CSS-Webblaze combination. As the advancement towards "the cloud" continues it can only get more cool.
){kind=link}
){kind=link}