Client Side Project

4.3.11 Client Side Project

Categories:

So if you've read my previous post (Server Side Project) I think you'll agree that this project doesn't look half so terrifying. Although I'm in danger of eating my words, as we haven't had so much of a sniff at Javascripting yet! So far we've looked at HTML and CSS, and I've felt confident in my abilities to keep up with the lectures.

By the way the image is of an Electro Indie Pop Band called CSS (Cansei se der Sexy or Tired of Being Sexy” in Portugese). They are from Sao Paulo in Brazil and they are F.A.B.

This assignment assesses the following learning outcomes:

· Construct and validate suitable style rules for the design and layout of a web application

· Enhance the functionality of a web application with scripting languages

· Create a client side web application that incorporates the latest technologies and complies with W3C web standards

You have been tasked with developing a web application for an organisation of your choice. The organisation could be an existing business or charity, or could be a future business/charity that you have an idea for.

The project will consist of:

· Gathering client requirements (5 marks)

· A web application comprising of

o XHTML (30 marks)

o CSS (30 marks)

o JavaScript (30 marks)

· A short presentation (5 marks)

· Your web application should consist of a minimum of 5 distinct and different pages of content, marked up using XHTML, that validate to XHTML 1.0 Strict. (You may validate to XHTML 1.0 Transitional on a given page if necessary.)

· The style of your web application should be controlled using external CSS, while allowing for proper functionality with a user style sheet. The CSS should be validated.

· You should provide a style sheet that allows your content to be printed without unnecessary page elements such as navigational items or irrelevant images. The user should be able to explicitly switch style sheets as they wish.

· You should provide a way for a user to submit their contact details, and at a minimum ensure that their email address is of a valid format.

· Your web application should exhibit client-side persistence, implemented using JavaScript

· The user-experience of the web application should be further enhanced using 3-4 examples of client-side scripting. Examples could include: manipulating the DOM, event-handling, animations

· Your application should be tested in both Microsoft Internet Explorer and Mozilla Firefox to ensure consistent appearance and functionality.

Mark-up Validation: http://validator.w3.org/

CSS Validation: http://jigsaw.w3.org/css-validator/

All your website code should be zipped into a folder and uploaded to Moodle on/before the due deadline. Projects submitted after the deadline will incur penalties.

Part 2 – Grading Rubric

	H1 (7-10)	H2 (6)	Pass (4)	Fail (3-0)
Requirements (5%)	Evidence of complete collection of customer/user requirements for all aspects of web application	Evidence of complete collection of customer/user requirements for most aspects of web appl.	Evidence of incomplete collection of requirements. No specific links to web application	No real world customer/user throughout the project
XHTML (30%)	Mark-up validates against the strict DTD with no errors or warnings. Correct use of comments and indentation. Well organised and laid-out implementation of XHTML form	Mark-up validates against the strict DTD with warnings or against the transitional DTD with no errors. Good use of comments and indentation. Good implementation of XHTML form	Mark-up validates against either the strict or transitional DTD with many errors. Poor use of comments and indentation. Errors in mark-up of XHTML form	No DTD at top of documents. Many errors in the mark-up. No comments or indentation. No implementation of XHTML form
CSS (30%)	Professional in appearance and layout. Alternative style sheets provided CSS validates with no errors or warnings Respects user style sheet Print style sheet well implemented	Almost professional in appearance. CSS validates with warnings. Mostly respects user style-sheet Print style sheet functions correctly	Appearance is not polished. Style sheet is external but does not respect user style sheet. Many validation errors Print style sheet omitted or not functional.	Substandard appearance with little use of presentational elements. Inline or embedded styles Many errors in style rules
JavaScript (30%)	Form validation validates multiple items. Client-side persistence is present 3-4 further examples of JavaScript that enhance the web application	Form validation handled correctly. Client-side persistence is present 3-4 further examples of JavaScript that enhance the web application with minor errors	Form validation not handled correctly. Client-side persistence is present Poor/too few implementations that do not enhance the web application	No attempt at form validation. Client-side persistence not implemented Very simple or no use of JavaScript throughout
Presentation (5%)	Presentation clearly outlined the web appl. Slides or demonstrations were error-free and logically presented. Displayed an excellent knowledge of technologies used	Presentation clearly outlined the web appl. Slides or demonstrations were error-free and logically presented. Displayed a very good knowledge of technologies used	Presentation clearly outlined the web appl. Slides or demonstrations were error-free and logically presented. Displayed a reasonably good knowledge of technologies used	Presentation was unorganised and unclear. Displayed little or no knowledge of technologies used.