GRAF 5021 - JQuery

Project 1

jQuery Demo Site

Synopsis

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you use and write JavaScript.

You are asked to create your own jQuery demo page where a person with limited javascript knowledge could see a working demo of the script/plugin, read an explanation of how the script/plugin could be used and then copy and paste the needed code into their page and have it work as intended.

The page will consist of 6 examples each with their own explanations on how to build it and demonstration of the working finished product

Requirements: XHTML Page

Css layout

The page will be designed as one page of a larger site with all the elements you expect to see in the page ( navigation, header, footer, logo etc)

example for navigation - home, jquery, flash, html , moo tools, design, tutorials, contact, downloads etc, etc, etc

The page will be designed for a 1280 x 800 resolution.

Best practices for SEO are to be followed as listed below

Best practices of CSS layout are to be followed

Examples

• Total of 6 examples/demos using a combination of jQuery and/or jQuery UI as the main library
• The examples can be a combination of script taught in class, examples from the jquery site or script you have researched and found on your own
• 2 of the 6 must be unique examples that were not taken in class and are not found on the jQuery.com site
• The examples must be named
• An explanation of how it could be used
• Instructions on how to implement it including the actual needed code (must be able to cut and paste it using your instructions)
• working demo of the example - (I suggest using external pages linked with floatbox but it is up to you)
• Any further information one might use to change attributes such as colour size etc.
  

Many jQuery authors have a full working page with the plugin inserted as a download / example of their work.
YOU CAN NOT USE these downloaded examples as your finished demo. You must create your own version of the example

You are required to supply a link to the hompage where you found the plugin (or code). If the example was your creation (slide in show hide examples ) then a link to the appropriate page explaining the script on jQuery.com will be required

Research jQuery plugins and examples. If you use google you can find hundreds of them

Requirements: Design

You will be marked on:

• The design of the page - is it easy to navigate and find the plugins - is it a site I would trust
• The clarity of the instructions - can I recreate the example using your instructions
• The quality and complexity of the demo - show the demo as it would be used on a site ( not just 12 red boxes).

Note:

Search for the best jQuery plugins / widgets / effects / code

Start early so the small problems don't become big ones

There is a forum started on FOL so we can help each other with problems

Don't forget to include instructions on how to link to the libraries

SEO

The site must be created using the following best practices for Search Engine Optimization

Include

• Create unique, accurate page titles
• Make use of the "description" meta tag
• Improve the structure of your URL's
• Make your site easier to navigate
• Offer quality content and services
• Write better anchor text
• Use heading and tags strong appropriately
• Optimize your use of images

Submission:

ZIP your local root folder, and submit to FOL

This is worth 25% or the final mark

Due Dates:

June 16 - beginning of class