Reference no: EM13836153

Website Development

OBJECTIVES:

This assessment task examines the following Course objectives:

• develop a complex web site or piece of multimedia from scratch, using information gathering and design techniques;

• expand their skills in design prototyping;

• expand their skills in the use of multimedia and web authoring software; and

• expand their analytical skills.

OVERVIEW:

The main 2 phases of website design consist of the design phase and the development phase. Having created a comprehensive content and design document in Assignment 1, students are now required to work from their design document to develop their website.
The requirements of this website that you must design and develop can be found in the document "Website Overall Requirements".

ASSESSMENT REQUIREMENTS:

The website should closely follow your design from your design document and MUST follow these requirements:

• You may not develop in any format requiring Server Side set-ups such as PHP or ASP.

• JavaScript and jQuery is fine to use (and some image galleries require jQuery) as long as it is all functional on the client side.

• Students must use CSS and keep content and style strictly separated.

• Any forms used must be fully functional

• Students may not use any existing templates - a screenshot of the website will be used for image matching and if obvious similarities are found NO MARKS for the design will be given.

(Note: You can learn a lot from what others have done, and you are encouraged to look at other websites from a design perspective (e.g. templates from the OSWD.ORG site). However, you simply cannot use a template from a website, instead you will have to create your own.)

• Students are advised to adhere to the following folder structure, for all the files used in the creation of the website:

o Root folder - to hold the html files

? CSS folder - to hold the CSS file(s)

? Images - to hold all image files

? Other Media - to hold any video, animation files

? Scripts - to hold any scripting files

Not only is this easier for yourself but also for the markers who need ready access to your files.

• The final submission of the website must be fully functional with regard to the minimum requirements specified.

• If students have added more functionality in their design document than was requested, they may negotiate for some of it to be in a partial state of completion (prototype functionality) or to be exempt from inclusion. However, this will only be permissible if students have shown consistent work on their assignment and are running out of time with regard to completion.

• Finally: your submission should contain a brief report specifying the preferred browser as well as any changes that you have made to the original plan. This report must also contain any passwords necessary to access password-protected areas (required for Master students, optional for Undergraduate students).

Please note the following Guidelines:

Website Requirements • First make sure you have read the content requirements of the personal website from the document "Website-Overall-Requirements".

Home page • Must have the name "index.html"

• Must have a title that would make it easy for search engines to find the page

Content pages • Must have a suitable name for each page. Eg. "education.html"

• Must have a suitable title for each page. Eg. "Joe Blogg's Education Page"

• Must have a suitable heading for each page. Eg. "Education" heading above the content.

• There must be a minimum of 10 pages total as outlined in the document titled "Website Overall Requirements".

• Content must be appropriately "chunked" and the use of plain language must be clearly visible.

• FAQ page: both the questions AND their answers need to be placed there.

Sitemap page • The sitemap page must have working links to all other parts of the site. Text-based is allowed but it should be styled to match the design of the website.

Relevant multimedia-based content • Images, sound, and other externally sourced files should be referenced and optimised for download and display.

• The multimedia elements should be fully functional and should be appropriate for the website. YouTube video and your sound file must be fully embedded into the webpage(s) and not be external hyperlinks to YouTube and other such places.

JavaScript and Forms Functionality

MASTERS STUDENTS ONLY • ITECH 6106 students, please take note:

• Any forms, such as password protection and the contact page, which are used on the site need to be fully-functional, should be well designed and styled with CSS (not just plain forms), and their intent must be clear. Error trapping must be evident.

• Data Validation, Error messages, user feedback etc., for any of these facilities should be provided (either in a pop-up window, or simple dialog boxes written with JavaScript).

• You cannot use PHP or other server side technologies. Note that without any server side setup, your contact form will not be able to send the information efficiently. You can therefore make JavaScript access the client-side mailto: command to allow functionality to your contact form.

More guidelines on next page for all students

Navigation • There should be a clear navigation structure - global (primary and possibly secondary), local for different pages within a category, and footer navigation. The navigation should be text based and styled with CSS to match your design.

• Students- Add some simple CSS3 transitions to your global navigation links when you hover over them. Look for examples on the internet to understand the CSS3 transition style.

Visual design Student must adhere to the following, which will contribute towards higher marks:

• Rules of good visual design;

• Usability guidelines related to Colour, Typography, Placement of objects, Readability and Balance.

• Designs must show a solid understanding of the use of other elements such as; contrast, white space, layout, focal point, alignment, proximity etc.

HTML & CSS • Students must use CSS to keep content and style strictly separated.

• CSS must be done primarily with an external style sheet. Max of 2 stylesheets. Inline and Internal styles reduce the effectiveness of CSS and may be penalised.

• HTML should use div tags or the HTML5 variations (eg. header , main , section , nav , footer ) for layout of content over table when possible.