Portfolio

ColorChip is a class for working with color in a more convenient manner than the basic RGB and Hexadecimal triplets often encountered in programming, especially web-oriented programming. ColorChip allows you to define a color using RGB, HSV (Hue, Saturation, Value) or a Hexadecimal string. ColorChip objects have properties for all three of these color models, as well as methods for adjusting both RGB and HSV values - these methods automatically update all of the object's properties. Additional methods exist for getting color compliments, triads, and the nearest websafe color.

A screenshot of the ColorChip demo script at http://andy.greyledge.net/ColorChip/example.php.

ColorChip is released under the GNU Public License, and is available for download at http://andy.greyledge.net/ColorChip/index.php.

QuickRss is a PHP class for building RSS files as objects, freeing the developer from the need to generate the XML by hand.

I use QuickRss to automatically generate the RSS news feed for my personal web site. The RSS feed is located at http://andy.greyledge.net/news.rss

QuickRss is released under the GNU Public License, and is available for download at http://andy.greyledge.net/QuickRss/index.php

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE rss PUBLIC "-//Netscape Communications//DTD RSS 0.91//EN" 
  "http://my.netscape.com/publish/formats/rss-0.91.dtd">
<rss version="0.91">
  <channel>
    <title>Andy Chase - What's New</title>
    <language>en</language>
    <copyright>2003</copyright>
    <description>Web Developer, Tech Writer, Banjo Player.</description>
    
    <link>http://andy.greyledge.net</link>
    <item>
      <title>"Read" Section Refactored</title>
      <link>http://andy.greyledge.net/portfolio/technical_writing.php
      </link>
      <description>Following the addition of a tech. writing section 
	to the portfolio, the "Read" section has been removed.  
	The same content can now be found at 
	http://andy.greyledge.net/portfolio/technical_writing.php.
	The existing URL, http://andy.greyledge.net/read.php will 
	redirect all future requests with HTTP status 301, so 
	well-behaved search engine spiders should be dropping it 
	from public use before too long.</description>
    </item>
    
    <item>
      <title>Portfolio Updated</title>
      <link>http://andy.greyledge.net/hire.php</link>
      <description>PDF and XHTML versions of the portfolio have been 
	updated to include a Technical Writing section, which will 
	soon be replacing the separate "Read" section of the web site;
	having two separate but closely related sections that serve 
	the same purpose doesn't make much sense..</description>
    </item>
    
    <item>
      <title>New Music: "Oh, Susanna"</title>
      
      <link>http://andy.greyledge.net/listen.php</link>
      <description>"Oh Susanna" is now available in Ogg Vorbis format
	for free download.</description>
    </item>
    
    <item>
      <title>RSS Feed Now Available</title>
      <link>http://andy.greyledge.net/news.rss</link>
      
      <description>An RSS newsfeed containing information about 
	recent site updates is now available at 
	http://andy.greyledge.net/news.rss.</description>
    </item>
    
    <item>
      <title>QuickRss 0.1 Released</title>
      <link>http://andy.greyledge.net/QuickRss</link>
      <description>QuickRss  is a PHP class for building RSS 0.91 
	files as objects (which means you don't have to deal with 
	any XML tags yourself.)</description>    
    </item>
  </channel>
</rss>

VOOT is a simple ('vanilla') PHP class for creating web pages with templates. It supports user-defined HTTP headers, and it is capable of processing PHP contained in rendered templates. This class was written with simplicity and flexibility in mind; templates can take the form of any text-based file, and you can define as many content placeholders as you like in each template. To indicate a placeholder in a template, you just surround a key word with percentage signs.

VOOT is currently used to generate its own information and download page at http://andy.greyledge.net/voot/index.php, as well as my site news page at http://andy.greyledge.net/news.php.

Example

The first step to using VOOT is to come up with a template. A simple HTML template might look like this:

<!-- template.html -->
<html>
  <head>
    <title>%HEAD_TITLE%</title>
  </head>
  <body>
    <h1>%PAGE_TITLE%</h1>
    <div>
      %CONTENT%
    </div>
  </body>
</html>

Three placeholders were defined in the template by surrounding key words with the percent sign: HEAD_TITLE, PAGE_TITLE, and CONTENT. We'll need to keep that in mind when we write the script we want to use our template in:

<?php /* example.php */

/* Step 1: Include the VOOT class definition: */
require_once("Voot.class.php");

/* Step 2: Instantiate a new Voot object with our template: */
$myVoot = new Voot("template.html");

/* Step 3: Set the values for the placeholders in the template: */
$myVoot->setElement("HEAD_TITLE", "Templates are Handy");
$myVoot->setElement("PAGE_TITLE", "Create pages with VOOT!");
$myVoot->setElement("CONTENT", "<p>Why maintain multiple static pages
	    when you can use a single template instead?</p>");

/* Step 4: Render the page: */
$myVoot->render();

?>

When viewed in a browser, the above script would look like this:

The rendered template as it appears in a browser.

The HTML source of the rendered template looks like this:

<!-- template.html -->
<html>
  <head>
    <title>Templates are Handy</title>
  </head>
  <body>
    <h1>Create pages with VOOT!</h1>
    <div>
      <p>Why maintain multiple static pages
	    when you can use a single template instead?</p>
    </div>
  </body>
</html>

This is a very basic example; VOOT also has additional functionality for sending user-defined HTTP headers ahead of the rendered template, saving the rendered template to disk, and executing PHP code embedded in templates.

VOOT is released under the GNU General Public License, and is available for download at http://andy.greyledge.net/voot/index.php.

At Valley Presbyterian Hospital I was responsible for ongoing maintenance of the Intranet as well as the development of new applications.

Intranet

The Valley Presbyterian Hospital Intranet home page.

The Intranet home page features a basic news system, with news items stored in a PostgreSQL database. Primary navigation links are located at the top of the page; links on the left side of the page change contextually depending on which section of the Intranet the user is visiting.

All navigation buttons are highlighted with DHTML upon mouseover to aid user navigation.

Patient Education Handouts

The VPH Patient Education Handouts screen

One of the major uses of the hospital intranet is the organization of the many forms and documents used by the Nursing Staff. Documents are stored Adobe Acrobat PDF format and cataloged for keyword searches by the ht://Dig search engine. Documents are also browseable by category.

The Patient Education Handouts section organizes documents by language, allowing easy access to multiple versions of the same information sheet. Separate links are provided for printing or viewing the documents; 'View' will open the PDF file in a browser window, and 'Print' silently prints the document using the ActivePDF PDFPrint browser plugin; The document goes directly to the printer without opening a new window or requiring the user to click a Print button.

Risk Management

The Valley Presbyterian Hospital intranet Risk Management section.

In addition to providing important safety information for employees, the Risk Management section of the intranet provides access to some third-party services. I was responsible for working with IS Staff and vendors to integrate these features into the intranet:

MSDS Database. Employees can search for and print MSDS (Material Safety Data Sheets) from PROSAR.

Occurrence Reporting. Using the WebEnvision component of the RiskEnvision system, employees can anonymously report safety-related incidents.

Nursing Orientation System

The most complex project I developed at the hospital was a PHP/PostgreSQL system for tracking skill competencies for the nursing staff, to replace the paper system that was in use at the time. For each nursing position in each department there's a list of skills, or "Orientation Tool", that the employee must demonstrate they're capable of performing. As new employees show they can perform their duties, the appropriate skills on each Orientation Tool are digitally signed by a preceptor. Once all of the skills on an Orientation Tool are complete, a nurse from the Education department signs the tool, and finally a Nurse Manager signs the tool to declare that employee officially competent to perform all of the duties required by their job description.

Since some of the same skills may belong to more than one Orientation Tool, and since each employee may be assigned multiple Orientation Tools that might have overlapping skills, the application keeps track of skills separately from Orientation Tools; in this way the employee only needs to demonstrate that they can administer an IV line once, and that competency will automatically show up as completed for that employee in any other positions that require the employee to administer an IV.

The application has several secure menus for the different steps of the process (Nursing staff, Preceptors, Educators, and Nurse Managers) as well as a tool for defining new skills, creating new Orientation Tools, and linking skills to Orientation Tools. In addition to the core system for tracking and storing all of this information, there are a number of scripts that generate reports for the Educators and Nurse Managers, so they can keep track of which employees have tools needing completion, or to aid in scheduling by allowing the Nurse Managers to search for all employees who are competent in a specific position.

Screen Shots

The "Ort Tools Status Overview" screen allows Educators and Nurse Managers to see at a glance which Orientation tools have been assigned to which employees, and which ones have been completed. The lettered links at the top of the page make it possible to quickly jump to any given employee.

Once an Orientation tool is complete, a report is automatically e-mailed to the Nursing Administration office. Comprehensive information about the satisfactory completion of each skill on the tool is displayed.

FLWFinder was a PQA (Palm Query Application, also known as "Web Clipping Application") for looking up the addresses of Frank Lloyd Wright-designed buildings from any PalmOS handheld with an internet connection. The backend consisted of a set of PHP scripts which in turn accessed a MySQL database.

Users could search for the addresses of nearby Wright buildings in the United States by city, state, or zip code. When available, directions, hours, and admission fees were also provided for Wright structures open to the public. Additionally, there was a screen allowing user submissions of buildings not in the database.

Because I released FLWFinder as a completely free piece of software that did nothing but positively promote the legacy of Wright's architecture, I didn't think anything of using the initials FLW or the name Frank Lloyd Wright in the name or content of the project. Nevertheless, shortly after its release, I was contacted by the Frank Lloyd Wright foundation and asked to immediately take it offline.

The main screen of FLWFinder as it appeared on a 160x160 PalmOS handheld LCD screen.

Professional PHP4 Multimedia Programming. Wrox Press Inc; ISBN: 1861007647; (August 2002)

I wrote chapters 5 and 10, Manipulating Images with GD and Case Study: Using GD on WAP Sites and PDA, both dealing with PHP's powerful GD extension. After being introduced to the basic GD functions and their use in Chapter 5, the reader is walked through the creation of a WAP-enabled coffee shop finder application using the HAWHAW library. GD functions are used to generate rating graphics on the fly, and to convert color photographs into 1 bit, cellphone friendly WBMP graphics.

I also contributed appendix H, Setting Up Palm Desktop, POSE, and AvantGo on a Windows Desktop which shows developers without PalmOS hardware how they can set up an effective PDA development environment using the Palm OS Emulator (POSE).

Professional PHP4 Multimedia has received a five out of five star rating at Amazon.com based on seven reader reviews.

In addition to my writing for Wrox Press I have done technical review for the above Wrox title. This is not editorial work; rather, it consists of making sure technical explanations and code examples are accurate and functional, and suggesting additional items for further clarification.

http://hotwired.lycos.com/webmonkey/01/13/index0a.html

A screenshot from the tutorial.

Not quite accurately titled, this tutorial shows how PHP can be used to sniff out the color depth of the device requesting an AvantGo page. Using this information, PHP can then be used to send a corresponding image to the browser; so an AvantGo user with a Palm III would get a 2-bit image with black, white, and two shades of grey, wheras an AvantGo user with a Handspring Visor Prism would get a 16-it, 65000+ color image.

http://hotwired.lycos.com/webmonkey/00/32/index3a.html

Several screenshots from the tutorial.

Using freely available software for PalmOS and Windows, this tutorial shows how doodles made on a PalmOS device can be transferred to PC and then vectorized using Adobe Streamline or Macromedia Flash.

I developed both the interface and the back-end for this component of the Stanlee.net web site, which was the first practical application I wrote using PHP.

The "E-Mail This Page to a Friend" page from the Stanlee.net web site. The metallic frame around the HTML form was created in 3D Studio Max by lofting a spline imported from Adobe Illustrator and rounding the edges.

Due to the extensive use of Macromedia Flash, complex table layout, and Cascading Style Sheets on the Stanlee.net web site, I was asked to create a JavaScript "Sniffer" script that would detect several key pieces of information: Browser Name (Netscape, Internet Explorer), Browser Version, and whether or not the Flash plugin was installed.

The screen presented to users with a pre-4.0 browser. As with the "E-Mail This Page to a Friend" interface, the metallic frame was created with 3D Studio Max. A similar page was presented to users without the Macromedia Flash plugin. Character artwork was done by company artists.

The sniffer employed a combination of PHP and JavaScript to check each new browser accessing the site; 4.0 or later browsers with the Flash plugin received a cookie allowing them to go directly to the site on future visits. Using PHP alone would have been more desirable, but JavaScript was necessary to detect whether or not the Flash plugin is installed.

The Drifter was one of the original characters created for the Stanlee.net web site; visitors to the site could download and watch animated, serial "webisodes" for free.

The producers realized that we would need more than a three minute flash animation every other week to retain an audience, and to that end a great deal of supplementary material was made available. I was charged with creating interfaces for The Drifter character biographies. Using copy provided by the writers and artwork provided by the animators, I incorporated everything into a Macromedia Flash-based interface, using ActionScript to handle the scrollbars and control transitions.

In addition to the design and upkeep of the Stanlee.net web site, the Stan Lee Media web department (known as "Squnkwurx" within the company) was also responsible for exploring new technologies and developing new concepts.

The so-called Mobile Web was a hot topic at the time, and for a brief time the company toyed with the idea of publishing an AvantGo channel. The project was eventually shelved, but these are some of the concepts I put together.

Mobile Interface Concepts

The biggest challenge when designing content for the 160x160 pixel screen of older PalmOS devices is maximizing the amount of useful content in the space available. The added challenge when it came to implementing a Stanlee.net branded mobile site was to give it a streamlined, comic book look consistent with the main web site.

Two concepts for a Stan Lee Media PDA site.

The first concept was further developed and implemented as an actual AvantGo-friendly page.

Mobile Comic Strip

Another consideration was the fact that most PDAs can't display Flash movies, which were the chief attraction of the main Stanlee.net web site. The natural alternative was a "Comic Strip" format which could be sent to AvantGo as a series of panels turned 90 degrees to the right. The resulting left to right scroll when viewed on a PDA held sideways is more intuitive for reading content in this format.

Using stock characters from the shockwave Comics Composer application on the Stanlee.net web site, I layed out some panels which I then cropped and captioned in Adobe Photoshop. The colored version uses only web-safe colors for clean display on an 8-bit color or better PDA display, and the gayscale version is optimized for 2-bit displays. It was while working on this project that I came up with the idea for the Creating AvantGo Graphics with PHP tutorial I wrote for WebMonkey.

It was during the winter of 1995-1996 that I was introduced to the World Wide Web, and shortly thereafter to HTML. My first web site was typical of most designed by people just discovering the web, and how easy it is to publish on it; busy background, light on content but full of vows of imminent improvement.

My first web site, cryptically entitled "The Fort of Magic Cocoa Berries." The story behind the name is too long and inconsequential to repeat here.

The photograph is a black and white self-portrait, with sepia-tone added digitally; I was also discovering Adobe Photoshop at the time, and many of my early efforts made extensive use of stock Photoshop filters.

By fall of 1996 I knew for certain that I wanted to "do web stuff" for a living. I was facing two obstacles at that point; my own lack of experience and knowledge, and a relative scarcity of jobs. I'm not certain when the so-called Dot Com Boom is officially supposed to have begun in earnest, but I can attest to the fact that there weren't a whole lot of web-related job listings in the Los Angeles Times in late 1996 and early 1997.

By day I was working at a special effects shop, and by night I was teaching myself everything I could about HTML and web graphic design, authoring pages in MS Notepad and creating graphics with Adobe Photodeluxe. In the fall of 1996 I had devoted much time to a self-styled "E-zine", but never had the tenacity to see it through. In retrospect what I was trying to do was write a blog, but at the time it didn't occur to me to write about anything so mundane as my own day to day experiences.

By 1997, however, I reckoned that I was getting good enough at building web pages that I might feasably get hired by somebody for that express purpose. My only explanation for the site design that follows is that I must have paged through a copy of Creating Killer Websites not long before starting it. From a usability standpoint, the interface is so laughably obtuse that it makes me cringe... from a design standpoint, I still sort of like it. The graphics were created with a shareware, very basic raytracing application whose name I can't remember. Clicking on one of the numbered spheres at the bottom of the page would take the user to a different section of the site; my rationalization for using numbers instead of clearly labelled, easy to read buttons was that visitors to the site would be so darn intrigued by those spheres that of course they would click on each one to see what it was all about. This was the same school of thought that gave us the "Splash Screen".

My home page, circa early 1997.

A secondary page on which I decided, for some reason, that it would be a good idea to use a giant graphic for the introductory paragraphs instead of good old searchable, copy and paste-able, ASCII text. Note the helpful instructions. What was I thinking?

As spring gave way to summer I found myself working at a different effects shop, where I had the opportunity to cut my teeth on honest to goodness Web Design with a capital "WD". The experience I gained by building a functional, useful company web site apparently filtered down to the stuff I was doing in my spare time, and I overhauled my web site yet again.

My homepage during the summer of 1997. Another splash page of sorts, but at least things are clearly labelled. This was also my first use of sliced images and visual layout through HTML tables.

At the time, I believe the HTML used on this page was tailored to 3.0 browsers and written so that all of the graphic elements would fit flush against each other. This modern-day Mozilla screenshot breaks things up a little bit, but since it does do a good job of demonstrating the image slicing and table structure I've left it alone for this screenshot. Six years later, I actually sort of like the fragmented look.

A content page from my summer 1997 web site. The influence of the Killer Websites mindset is evident; white, monospaced text on a black background? A skinny column of text that wastes most of the screen real estate? Visually I think it still looks pretty nice for 1997, but I was definitely guilty of subverting HTML into a page description language.

As 1997 drew to a close, I felt that the experience I had gained designing the shop web site would be enough to secure myself an entry-level position doing web design full-time; at the shop my time was divided between web design, painting Darth Vader helmets, and working on random projects throughout the shop. Towards that end I put together a dry, resume/portfolio type web site:

This was the first of several personal web sites I've designed since that used warm and/or earthy colors, and strong lines. At the time, I thought it was important to put together something clean and clearly original; by late 1997 there were lots of people calling themselves web designers who filled their pages with clip art backgrounds, animated clip art GIFs, and god-awful Java applet navigation panels. By giving most of my attention to a consistent color scheme and careful layout, I hoped to demonstrate that I had both design sense and HTML coding ability.

It was this web site (along with my strange special effects/graphic design/web design resume) that helped get me my first true web design job, building WebTV-optimized pages for a multilevel marketing company in January of 1998.

Looking back at my experience at FutureNet Online I can't honestly say that I regret the time I spent there; I gained a lot of design experience there, learned JavaScript, learned a lot about human nature, and made some lasting friendships. However, that was a rough 7 months; I had been working there for about three months when the FTC raided the company for running an illegal pyramid scheme.

The company was shut down for about two weeks, during which time I put together a new iteration of my resume and portfolio site.

My 1998 home page, a design that I regard as my first real, professionally designed personal web site. Even after a few short months I had learned a lot about practical web design at Futurenet; developing for WebTV required its own attention to detail and optimization.

A content page from my spring, 1998 web site. The Frank Lloyd Wright/Arts & Crafts influence is readily apparent. I had been interested in Wright's work since an American architectural history elective I had taken in school, and by 1998 there were dozens of Wright-related sites to be found all over the web. Wright's style was a great inspiration to me at a time when I didn't have much to be inspired by, and I think my ambition to get beyond the shaky situation at FutureNet clearly shows in this site design. It was shortly after I designed this site that I became a docent at the Ennis-Brown House and designed their web site.

As the situation continued to unravel at FutureNet, I began once again to search for another job. That search led to a "Production Assistant" position at Edmund Publications. I worked at Edmunds for the next year and a half, and I remember my time there fondly.

With the security of a new job at a company I admired and trusted came a flood of optimism and reborn interest in putting together a content-driven personal web site, which I dubbed Randomonium (with a nod to the Frank Zappa bootleg album of the same name.) In retrospect what I was trying to do was write a blog, but I got too wrapped up in writing "Articles" for some imagined audience when I should have been just blathering about my personal life, as so many are these days.

The home page of my short-lived protoblog, Randomonium. The design was heavily inspired by the googie architecture of southern California, in particular the Sundown Drive-In theatre.

Another page from the Randomonium web site. I dabbled briefly with Cascading Stylesheets when building this site, but abandoned the idea because of Netscape 4's poor support.

For most of 1999-2000 I was working Dot Com hours and volunteering as a docent at two Frank Lloyd Wright houses in Los Angeles. The last thing I wanted to look at when I got home at night was my own web site. I also had the good fortune during this period to do a couple of freelance sites, and I began and abandoned several different designs over those two years, each one tailored to function as a freelance contractor's resume, portfolio, and list of services.

None of them were very inspired, but the warm, earth tones resurfaced:

A short-lived web site from 1999. The decidedly greenish tinge to the color scheme can probably be attributed to the fact that my main home computer at the time was a laptop. The heavy-handed Da Vinci / old architectural sketch motif was probably inspired by the discovery of the font used for the main title graphic.

The weblog site I started in 2001 was going strong as the new year came and went, but beginning in March of 2002 I got caught up with a very large project at work that detracted from my blogging efforts. When plans for my cross-country move began to crystalize, I was further distracted from keeping up with the site.

The other factor was that my home-grown content management system was outgrowing itself, and it had gotten so kludgey that I didn't want to spend more time on it unless I was going to rebuild from the ground up. Around this time I began playing with Wikis, and I thought it would be interesting to try implementing one as a personal web site.

My PhpWiki-based homepage. I designed a custom template that removed most of the public collaboration features native to Wikis, and I used Gogle's SOAP API to do create automatic links to the top five matches for a keyword search of each page title.

After arriving in Massachusetts it was time to put up a new Resume/Portfolio site. I took the opportunity to start from scratch yet again, and build a completely W3C-compliant web site using XHTML and CSS.

The home page of my Resume/Portfolio web site from late 2002. Since I wanted to demonstrate my design abilites as well as my coding skills, I opted for a very graphic home page; as originally conceived the site was very basic, having only a few very self-explanatory sections.

A content page from my Fall, 2002 web site. For the most part, pages consist of handcoded XHTML, using a centrally linked stylesheet for nearly all of the visual presentation. PHP was used to generate navigation links, log page hits, and provide recent keyword and backlink statistics on each page.

When I decided to design an OA business card I wanted to take things a step further and make the design viewable from both angles, partly as an homage to M.C. Escher, and partly as an abstract representation of the way I try to approach projects: There's usually more than one way to look at a problem.

The plan for my business card, created in Adobe Illustrator. The card back with its slot and the cover with its full contact information and tab are folded around the back of the structure when the card is complete.

The completed card, seen folded on the left and unfolded on the right. Notice the placement of the closing tab and the alternating colors in the photos on the right; tipping the card onto its other side causes the walls and floors to switch places.