The Spring of my freshman year I took my second Web Development class. My HTML and PHP skills were greatly increased during this semester. The individual project was meant to showcase this. The task was to build a website about a place you like to visit. The place I chose was my cottage in the 1000 Islands. This place has a lot of meaning to me because it has been in my family for generations.
The colors I picked were sea foam green and bark brown. I picked these colors because they are the colors you find at my cottage. The green is reminiscent of the water of the St. Lawrence River, and the brown is reminiscent of the color of the trees.
Since I was using Windows 8.1 as my main OS at the time and I am big fan of Microsoft and their design schema, I decided to use the Windows Metro design standards when I designed my site. These standards call for a flat, non-skeuomorphic design. Everything is a tile with little to know margin between the elements. To distinguish the elements from each other, I used different shades of the sea foam green.
I decided on the top bar, drop-down navigation because I have seen its design used on other sites, and I thought it was very intuitive natural. I made sure that all pages of the site can be accessed by the singular global nav so there wouldn't be any more navigation bars cluttering up the site. I put the pictures on the right so that people would have something to look at while they read the information. The fonts I chose are my favorite fonts, and I like them because they are easy to read and look nice.
The rest of the specifications can be found in the 'about' page.
A couple major functions drive the whole project. When a user makes a choice, an AJAX call is made to get the information for the next set of selections, and passes it to the makeNode function. If it isn't the final selection, then the makeNode function will parse the XML file given by the AJAX function and create another dropdown menu with the options presented in the XML file. When the user clicks on an option that has no more child options, then the AJAX function will return a 404 status code, and the makeNode function will present the user with what they chose.
Keeping reusability in mind, I made the ability to swap datasets relatively easy. I used a rigid XML and naming structure to correctly find and parse the next choices. If you follow my directions in the README, you will be able to swap out the datasets for anything you please.
Although I only had to get it to run on Firefox, Chrome, Safari, and some versions of IE, I added more to get it to either properly render, or redirect for all versions of IE, Chrome, Firefox, Opera, and even Netscape Navigator, as outlined in the README.
A semester long project, the outcome of which being a digital prototype that can be shared via the web. The project was to design an interface to solve a computing problem. I decided to redesign WhatsApp for feature phones.