These are projects that I have done. Some are commercial and some are experimental.

Marion Thomson Howell for Separate School Board Trustee

This is an information site for Marion Thomson Howell campaign for Catholic School Board Trustee. I used XHTML 1.0 and CSS 2. I had some surprising challenges with this site. The home page was designed to look exactly as a brochure with several pictures. As it turns out, Internet Explorer, both Mac and Windows, have major bugs when using position: fixed and float: right techniques. After much trial and error, I discovered a technique that treated the text next to Marion's picture as separate elements and positioned them by adjusting their left margins. Advantages, it allowed the text to remain fluid thus allowing people with visual challenges to adjust text sizes within a good range. Disadvantage, outside the good range, the images would mask the text.

I also learned the importance of educating the client about browser version, screen resolution and text size differences. Originally, the design was for a 17" screen at a 1024 by 768 resolution with the pictures positioned fluidly. This did not work for people with 15” monitors and or lower resolution displays. I explained this to the client. When they saw the result with a lower resolution, they were quite surprised. Finally, we redesigned the site for a 800 by 600 resolution screen which worked well.

The site was tested on Mac Mozilla 1.5 and IE 6.x both Mac and Windows.

MAG Nutrition

This is a fictitious online vitamin store with a shopping cart. It is a re-creation of my java program’s final project. I used PHP 4.3 with HTML 4.01 transitional and CSS 2 for communicating through an Apache server to a mySql database.

The major challenge of using data consistently on the web is persistence of the data across web pages. This application uses PHP’s session management to persist the selected products. When the user checks out of their shopping cart, the products are saved to the mySql database along with customer information. A return customer will have their address information automatically retrieved after they have gone through the user security system. Finally, a forgotten password can be readily handled by the system generating a new one for the customer.

I like PHP. It is simple, powerful and a joy to use compared to servlets and Java Server Pages. PHP integrates well into HTML’s page structure. The one disadvantage of the language is code coupling between presentation and business logic. Which ironically, is the very reason that it is so straight forward for building web applications. In order to minimize presentation and code coupling, I moved much of the code to function libraries.

NOTE: the server will up between 8:30 am and 10 pm.

Shamrock Co-op maintenance

This site is maintained at Geocities at a great price. Geocities' has a really nice wysiwyg webtool called PageBuilder. For basic website development, it allowed the person who built the site to do quite a creative job without knowing css div elements. Also, the file manager worked very well.

However, I disliked a few things. The produced code was not in a linear order within the page made adjusting specific elements like finding a needle in a haystack. The webpages had no doctype definition and thus I have no idea of how consistently they will appear in old browsers. Finally, all elements were wrapped in tables and then divs. It was very difficult to modify elements in that format since, you had to ensure both the table's and the enclosing div's size were modified. Furthermore, PageBuilder only works with Microsoft specific systems. How good is a webtool if you need to have specific capabilities on your computer to use it? I think that defeats the purpose of the web allowing universal access.

I tested the site on Mac Mozilla 1.4 and IE 5.2.2, and Windows IE 6.0.2.

the College of Acupuncture & Therapeutics Inc. , http://www.collegeofacupuncture.com.

This site is fully compliant to the World Wide Web Consortium's HTML 4.01 transitional standard. This allows text browsers and browsers for the visually challenged to access the site as much as possible considering the use of frames.

Site Goals:

Features:

Browser compatibility:

Technology:

Alternate Menu Examples

Raised Buttons

This example involved no change in the xhtml menu structure. Only the cascading stylesheet was altered to give a raised button look to the links. I saw this technique at k-xml, http://www.v2studio.com/k/code/k-xml/. This example works in mac Mozilla 1.4a, IE 5.2 and Opera 6, and in windows IE 6.x. It is not compatible with Netscape 4.x and IE 4.x both for mac and windows.

Tabs

This example involved no change in the xhtml menu structure. The cascading stylesheet was altered to move all links onto one line and then to give a tabbed look to the links. I read about this technique from the "A List Apart" article, CSS Design: Taming Lists, http://www.alistapart.com/stories/taminglists/. This example works in mac Mozilla 1.4a, IE 5.2 and Opera 6, and in windows IE 6.x. It is not compatible with Netscape 4.x and IE 4.x both for mac and windows.

Select menu

This example involves navigating from a drop down selection list. Once the selection was made in the list, the actual page change was caused by javascript with the w3c's DOM. The code is based on Danny Goodman's book, JavaScript & DHTML Cookbook. It can be found at O'Reilly's, http://www.oreilly.com/catalog/jvdhtmlckbk/. This example works in mac Mozilla 1.4a and IE 5.2, and in windows IE 6.x. It is not compatible with Netscape 4.x and IE 4.x both for mac and windows, and Opera 6 for the mac.