Nhps.us Moodle Server Overview
Server Temporarily Unavailable at nhps.us Address
My Moodle server is normally at http://nhps.us. However, as of Dec 14, my school is (literally) under construction and our Internet access is unavailable for a week or two. The alternative address (as of early Monday morning Dec. 16) is my home DHCP address, http://71.106.21.124/ I considered dynamic DNS to track the system but decided to avoid the complexity of that solution since I do have a dedicated static IP address at my school. It took a few minutes to configure my home router to direct Web requests to the server now residing in my living room.
Origin of the Nhps.us Moodle Server
In September 2007, I obtained the domain name nhps.us because it is a lot shorter than my school's web address at www.newheightsprep.org. (I like short names.) My intent was to run all of my classes on Moodle. It has been a great success, although quite a challenge while simultaneously taking two Master's classes!
The machine is an Ubuntu Linux dual-core-Intel with 2GB RAM and 500BG in disk. This machine has become essential for my teaching, so it is backed up nightly to a USB thumbdrive which I physically copy off-site once a week. This also gives me the confidence to open the system to other teachers.
The Nhps.us Moodle Logo and Appearance
Moodle is PHP based. This means each web page it produces is made on the fly by PHP and the database. Hence one cannot simply edit the screens' appearance in HTML.
Moodle provides a number of themes, basically collections of css style sheets and JPGs. The database is configured via administrative screens to point to a given theme. I chose a style and copied it under a new name. My choice of style was heavily influenced by the desire to keep an Apple-Google simplicity and cleanliness.
Having a copy of a style meant I could edit it while keeping my system maintainable. I am not changing the functionality of Moodle but using what has been provided. Maintainability is a key criterion, along with appearance.
I then identified the JPG that creates the front page banner. Despite appearances, it does not extend all the way across the screen. It is about 400x138 pixels. The remaining "width" is colored by using the same color as backgorund in the style sheet. That tan color -- #e3dfd4 -- shall play a role later in this story.
Editing the Banner in Photoshop
I brought the JPG into Photoshop and created the blue 
portion of the logo. This took two or three hours at my level of skill. There were two keys to the process: obtaining the Soul Papa font and getting the shading right on the letters. Some kerning helped a lot. This took several Photoshop effects to tune. Once that was right, I saved it as a PSD file and exported as a JPG. I then created a "daughter banner" with Mr.Bell Moodle as shown below. This appears only in my personal class pages, by telling the administrative screen to use yet another modified theme within Moodle. The Mr.Bell Moodle logo is also smaller, saving precious screen real estate. Its letters have no descenders, making it easier to shrink.
Finally, the tan color -- #e3dfd4 -- comes back into play. I wanted my CSUN web pages to have a very similar look and feel. I took the Moodle graphic and modified it into the 
graphic seen at the top of these pages. I got lucky that the first letter of Moodle is M -- as in Mark Bell. I used the tan color #e3dfd4 in my CSUN graphic and also as background in my two and three column CSUN templates.
Converting the Banner to Flash
I realized that these banners would be extensible and maintainable if they were built in Flash. I loaded the JPGs into Flash from Photoshop and added 140 pixels to the right (vacant area in above Flash graphic). This area will house a Flash ActionScript slide show. The slide show searches for an image directory adjacent to the index page. If it finds it, it will play the images (including alpha channel if it supports the design). This architecture makes it easy to generalize the behavior of Flash -- some pages would benefit from the slide show; on others it would detract from the purpose of the page.
Harmony is the Goal
As I illustrated in my SED618 graphic project, I want to bring Harmony from Chaos. Making these websites share a seamless appearance is my attempt to do that.
