Website design and coding for [login to view URL], a single page website utilizing Javascript for animation.

This project is for design and creation of a single page website utilizing JavaScript for simple animation of a group of brains cracking jokes.

The website will be a basic single page design hosted on the "[url removed, login to view]" domain (already purchased). The actual served page should be static HTML and **not require any server side logic.** It will require JavaScript to make the brains animate as part of the jokes. **Flash is not suitable.**

Each joke will be driven by a simple JSON or Javascript "script" file. **The jokes will be developed by other people and only templates are required for payment. **The script file format must be clearly documented.

The developer/artist will need to create;

* 2 basic cartoon "brain in a jar" templates.

* 5 cartoon "brain in a jar" based on templates.

* A simple scripting language for jokes based on JSON/Javascript based language with the following features;

* Set up of the "stage" in 2 different formats.

* 6 animation events.

* Web page which loads the joke and executes the scripts, one after another.

* 5 small interactive "easter eggs"

## Deliverables

**This project is for design and creation of a single page website utilising JavaScript for simple animation of a group of brains cracking jokes.**

**Art required**

First step in the project is to create a set of art assets (to be used in the website). The only art needed for the website is a cartoon brain in a jar, but it will be used in a multitude of ways. **The brain art assets must be made exclusively for this website.**

Some example of cartoon brains which fit the criteria and get your juices flowing are;

* <[url removed, login to view]>

* <[url removed, login to view]>

* <[url removed, login to view]>

* <http://www.shutterstock.com/similar-65891305/stock-vector-gross-brain-cartoon.html#id=101561797>

* <[url removed, login to view]>

Creation of the following art assets templates;

* Base "brain in a jar" template.

* Base "wheely brain" template, same as base "brain in a jar" with added wheels on the bottom, allowing the brain to zoom onto the page from the left, stop and then off the page on the right.

Once the template has been signed off on, the following assets will need to be developed.

* "Miss brain", base "brain in a jar" with added pink bow on top.

* "Evil brain", base "brain in a jar" with added "evil goatee" - <[url removed, login to view]>

* "Rich brain", base "brain in a jar" with added top hat and monocle.

* "Jock brain", base "brain in a jar" with added backwards baseball cap.

* "Nerd brain", base "brain in a jar" with added "nerd glasses" (large black rimmed glasses with tape around the nose bridge).

**All art assets should be delivered in both original formats (preferably Inkscape SVG) and format needed for actual use on the website.**

**Website coding required**

The website will be a basic single page design hosted on the "[url removed, login to view]" domain. **The actual served page should be static HTML and not require any server side logic but will require javascript to make the jokes animate.**

The page will cycle through a bunch of joke utilising groups of brains in various ways. **The jokes will be developed by other people and only templates are required for payment. **

Each joke will be driven by a simple JSON or Javascript "script" file. The script file will contain the initial "stage" layouts (which describe the number of brains and which brains are shown) and then a list of actions to be preformed at given time. The script file format must be clearly documented including templates showing all layouts, brain types and script actions.

Script files should be agnostic to the actual layout of the page. The page layout should be done with CSS. The page should provide some form of transition between two scripts.

**Require "stage" layouts:**

* Wheely brain is always displayed above or below the static brains.

* Basic two brains.

* One of the left and one on the right, basically normal two column webpage layout.

* Basic three brains.

* Similar too basic two brains, except a third column is added with the third brain.

**Required "script events":**

* Brain talks to object on the left with given text.

* Brain talks to object on the right with given text.

* Wheely brain (above static brains) comes from off screen on the left and stops in the middle.

* Wheely brain talks with given text.

* Wheely brain (above static brains) moves from the middle and goes off screen on the right.

* Wheely brain comes from off screen on the right and zooms past the static brains (below static brains) while shouting given text. Wheely brain does not stop.

The website will include the following extra "Easter Egg" user actions:

* Clicking on "miss brain"'s bow will cause it to spin.

* Clicking on "nerd brain" will cause the jar to start bubbling. Each click will increase the intensity of the bubbling. Bubbling intensity will return to nothing over time.

* Clicking on "rich brain"'s monocle will cause it to fall off the bottom of the page. See <[url removed, login to view]>

* Clicking on a "wheely brain" while in motion will cause it to do a wheelie - See <[url removed, login to view]>

* If site is open for more then 10 minutes, the brains will comment on the user procrastinating.

**Code / Compatibility requirements**

Website should be able to be served by a **static** web server. **No server side languages should be required.**

Website should include either a Makefile (or other code such as bash script or ANT build file) to generate compressed and optimized Javascript, HTML and CSS (using tools such as the <[url removed, login to view]> and the Google <[url removed, login to view]> ) suitable for upload to a static web server.

The script file format must be clearly documented including templates showing all layouts, brain types and script actions.

All art assets should be delivered in both original formats (preferably Inkscape SVG) and format needed for actual use on the website.

Website should work in;

* All current Chrome versions

* Firefox 3.6 and above

* Internet Explorer 8+

* Android 2.0+ and iPhone 3.0+ browsers should work in landscape mode (portrait mode can be unsupported)

* Opera and anything else standards complaint would be nice, but not required.

> **Internet Explorer 6 compatibility is not required, website should ask person to upgrade browser and/or install Chrome Frame.**

Using jQuery, Twitter bootstrap, Prototype or any other **major** Javascript library is okay **and preferred**.

JavaScript PHP

Projektin tunnus: #2761639

Tietoa projektista