Project Scope: To build a prototype for a companywide Internal billing and tracking application that would demonstrate the following:

• That all graphic and GUI information could be stored in Cascading Style Sheets (CSS) and be dynamically applied "on the fly."
• That we could recreate their numerous paper forms electroncially
• Simulate workflow so the client could see how it would all fit together

Responsibilities: Primary Designer, created prototypes to help sales, helped improve data flow.
Tools/Technologies: Photoshop, FrontPage
Deployment: ASP on NT Servers
Date: 2001

Open Prototype >>

Demo Notes: This is a limited prototype that was designed to whet their appetites and assure them that we understood the Business Rules and application flow they had described. In the demo, most of the functionality can be found on the EDI menu. When there are large tables of data, you can often roll over the first row and, if it highlights, you can click it to go to a detail page. The application will launch in a large window. There will also be a small window which will let you change stylesheets by remote control.

Programming Notes: This prototype had to stand alone. We would need to distribute it on disk, so we couldn't use ASP, PHP, JSP, or any dynamic content that relied on a sever. So, I used Javascript to simulate everything.

This prototype uses Javascript to implement an Object-Oriented approach to dynamically control the appearance of the application. To accomplish this, in the HTML source code all graphics are defined as single-pixel images that are given a CLASS attribute. That CLASS attribute, stored in the stylesheet, contains all size and source information. Thus, by changing the name of the stylesheet, we can change the appearance of the application.

The name and path to the stylesheets is stored by using the equivalent of a Session Variable. Of course, true Session Variables (or Global Variables) are not really possible in Javascript, so I defined the variables in the FRAMESET document. By keeping them in the parent.frame, I was able to keep them persistent them even as all the other pages reloaded.