Printable Version

Web Projects - Non-Profit

20/07/2007

This is yet another collection of my web projects, although these were done for various communities and for non-profit. Examples include phpBB templates for a web forum, a party promotion web site, and a comprehensive Technology FAQ page targeted for people who experienced technical issues.

TnS Template for phpBB (2007)

The first TnS Template was developed sometime in mid 2007, not long after a painful migration of an entire online forum community from another web site. The custom template was created for the phpBB2 forum system. Basically, the default SubSilver template was adopted and reworked to the TnS Template, as shown in the images below. Modification to the SubSilver template files were absolutely minimal. Most of the work was done in CSS files. The original template files were kept untouched with the intention of making incremental forum upgrades easier in the future. Unfortunately, the tradeoff was that W3C validation errors already present in SubSilver were not addressed as a result.

The template incorporated an additional banner switching feature that allowed users to choose whatever banner they liked. The code that made the banner switching possible was based on Paul Sowden's style switcher. Currently there are four banners installed and more is planned in the future.

Practically all of the graphics, including the menu icons featured in the template were 100% customised. A couple of forum icons were obtained from various stock libraries, such as Tango Desktop Project, Silk Icons, Gnome and Nuvola Icon Theme.

Figure TnS 1 Figure TnS 2 Figure TnS 3
Figure TnS 4 Figure TnS 5

Hyper (2005)

Hyper was a creative web project intended to promote a party for a bunch of kids, called the Hyper Krew. The project was a team effort, consisting of members "MechNizm", myself and a couple of other friends. The artwork was provided by MechNizm for the most part, while the party organisers supplied the textual material.

Most of the images were based on photographs MechNizm took around town. He also came up with the concept and the mock-up design in PhotoShop. Advice was given to him on what kind of layout was possible in HTML, and adjusted his mock-up design accordingly. Once the design was approved by the event organisers, the images were cleaned up, visually improved for web publication, then optimised for better data compression. The page style and layout was coded in CSS. As usual, Internet Explorer was an issue with CSS compliance and with PNG transparency, so CSS hacks had to be devised.

The site was launched but sadly the party was cancelled sometime later.

Figure Hyper 1

Technology FAQ (2004)

For a number of years I was a forum administrator for a commercial web site. In order to aid the forum community with a variety of technical topics, an unofficial Technology FAQ page was created. The FAQ covered topics such as basic Windows security, CD ripping, video and audio compression, the DVD format, and so on. The content was quite comprehensive, which was compiled with a lot of research.

The FAQ page was written and constructed entirely in Dreamweaver, hence things look little messy under the hood. Considering the amount of material that had to be written, using a WYSIWYG editor was preferable. Maintenance to the FAQ page was stopped since 2004, although the page remained online to this day for reference purposes. The images below show a few excerpts of the FAQ.

Figure TS FAQ 1 Figure TS FAQ 2