MAKE SITES .CC

I worked on my friend Dylan Rhodes’ website called Reezle that just entered its public beta. Among other things I did the main navigation menu for the site. Since the website uses the Prototype-Scriptaculous combination it was logical to create this element with the existing libraries.

I eventually came up with a solution that was both elegant and efficient and I decided to release this script as open-source (with permission of course) as it can have many other implementations.

See an example here

The above is included in the archive, along with the Prototype library, and I suggest you use that as a basis for your application. The actual JavaScript routine for the menu is this:

var DropDownMenu = Class.create();
 
DropDownMenu.prototype = {
 
 initialize: function(menuElement) {
	menuElement.childElements().each(function(node){
		// if there is a submenu
		var submenu = $A(node.getElementsByTagName("ul")).first();
		if(submenu != null){
			// make sub-menu invisible
			Element.extend(submenu).setStyle({display: 'none'});
			// toggle the visibility of the submenu
			node.onmouseover = node.onmouseout = function(){
				Element.toggle(submenu);
			}
		}
	});
}
 
};

Download the Script

Version: 1.0
Language: JavaScript
File size: 29,6kb

This is a community site directed solely to greek university students - it aims to connect students from different schools around the country and create online relationships and debates. The first version of the site was created back in 2003, when social networks where more of a concept than a reality and after 5 years it was time for a fresh start.

(click here to visit the website)

I always had a plan to update the site at some point and then I came across Elgg, a social networking platform that is built with the latest font-end and back-end standards. XHTML compliant, MVC architecture and with many of the popular community services (blog, friends, groups, forums) embedded into one fine package. I knew I had to get my hands dirty with it and dissect it bit by bit. And this site, being a side-project in my schedule, was a perfect opportunity to utilize the platform and extend on it for my specific needs.

I created a new visual interface and did the greek translation for the front-end. In the background I had to change the functionality in some of the modules as they are transformed for the niche target group, for example the user groups became educational institutions and had to operate in a different way.

Technically it was educational as intended and I gathered the experience I wanted from the platform. Visually it was a pleasure to work with a standards-compliant design and make my job applying the new graphic elements simple.

One of the major websites promoting Australian tourism, TravelNT, created a micro-site to advertise the merits of Alice Springs and its surrounding area in central Australia. I developed the main flash element appearing in those pages:

This item requires the latest version of Adobe’s Flash Player.
Please download it from www.adobe.com/go/getflashplayer and refresh this page once installation is complete.

I used Actionscript 3 to script the animation sequences and implement the interactivity. Many of the contents are loaded from external files, an XML file for the menu and text, FLV files for the videos and SWF files for slideshows. I was given the initial concept of the blurring transitions but felt that I had to experiment with the speeds and prioritizing the movements to achieve a smooth transition between the sub-pages.

Overall it was a small, useful app I enjoyed working on.

The core of the Tank A Day website is the water-saving quiz. Students are called to test their knowledge and gain the right for their school to win a water tank. This is the main purpose for the user registration and the other information that is available on the site…

(click here to visit the website)

I was called on this project for what seemed to be a simple upgrade - the addition of two age groups instead of just one. This led to a series of updates that ultimately changed the quiz to an unrecognized state. The new features where demanding but brought the experience to new standards visually. Unfortunately the old structure the quiz was still relying on (timelined AS2) couldn’t handle the new additions perfectly. Since there wasn’t any planning to create it from scratch in AS3 I tried to balance the opposing factors of the app to achieve the best possible results.

A kids site with a learning spin, Tank A Day uniquely entertains, educates on water saving and promotes the products of Bluescope. When the website was going to be upgraded I handled the front-end side.

(click here to visit the website)

The new interface has a basic XHTML-CSS structure. As always I tried to keep it as clean and obvious as possible. The new web 2.0 look gave me the freedom to actually apply some of the common CSS techniques. On the side there was also some flash development involved for the scroller in the homepage and some other elements in the administration area.