Reference no: EM132373273 , Length: word count:2000

Web Design Group Assignment - Web Site Project

Purpose of the assessment (with ULO) - To provide students an opportunity to work as a team and practice again techniques and skills involved in designing webpages using HTML5 and CSS and JavaScript.

Students will be able to:

1. Understand basic concepts and principles underlying the Internet, World Wide Web, and Web design.

2. Define, interpret and evaluate different Internet, web architecture, standards and applications.

3. Apply web programming skills to develop web systems.

4. Solve business problems related to World Wide Web, and Web design.

5. Design a web system by considering business need and context of the systems.

6. Communicate using an effective oral and written communication, act in a professional conduct, be an effective team member or team leader and be creative and innovative.

7. Understand the ICT profession and professional expectations in web design.

Assignment Specification -

Purpose: This assignment is linked to the web site you created in the first assignment and the subsystem you are currently modelling as part of the requirement specification document. In this assignment, you will develop a web site that describes the intended system that you are modelling and specific functionalities and technologies you are proposing.

The main purpose is to:

• Analyse the competition and
• Describes the intended system that you are modelling and specific functionalities and technologies you are proposing
• Develop a website that is appropriate for your client's business and target audience
• Choose your own webpage structure
• Provide a fully functional navigator on each webpage

Your Website will have:

1. An introduction to your subsystem (index.html)

It should provide introductory information about your client business, its history, menu, location, etc.

1. An appropriate title.

2. A background graphic (use CSS to do this).

3. A menu that links to the other pages on your Web site. This menu should appear on every page of your website.

4. A header containing appropriate content. This header should appear on every page of your website.

5. A footer that includes an email hyperlink to your student email address. This footer should appear on every page of your website.

2. A more detailed description of functionalities & technology as a topic (functionalities.html)

You should write at least 500 words on your subsystem & technology associated on your subsystem. The content should be appropriately marked-up with headings, paragraphs, sections, subsections etc. The page must contain:

1. Hierarchically structured headings of at least 2 levels. (e.g. make sure you H2 is below an H1)

2. More than one <section>

3. An <aside> with appropriate content

4. At least one appropriate image related to your subsystem. This image should be less 100k so it does take too long to load.

5. A table containing some data related to your subsystem.

6. At least one ordered list

7. At least one unordered list

Your content should briefly and concisely explain such as:

8. What is your subsystem? Its purpose / function? Major points / features?

9. What employee group/s, are responsible for managing it?

10. Explain its advantages and disadvantages and predict the future for the technology which may impact it.

11. What are the related applications/technologies currently in use? Compare / contrast with other application/technologies.

3. Registration page registration.html is for users to register

A form must be provided, which contains different input elements that allow users to enter registration information, e.g., username, password, gender, email, etc. The following input elements must be used:

• label
• textbox
• password
• radio button
• checkbox
• select list
• submit button
• reset button

4. Page order.html is for users to place orders

A form must be provided to allow users to enter the following data to place an order:

• Delivery or pickup
• Delivery address (only if delivery is selected)
• Billing address
• Contact number
• Email for receipt
• Pay on pickup or online
• Credit card information (only if pay online is selected)

5. Quiz page (quiz.html)

This page consists of a form where the user can enter:

• their first name
• their last name
• ID number
• answers to at least 5 questions related to your topic.

The questions should be use five different input types:

1. a text input question

2. a multiple choice question with one correct answer (radio button group)

3. a multiple choice question with multiple correct answers (checkbox group)

4. a drop list with a single correct answer

5. an input type of your choice other than the above (e.g. number, range, text area, image map, etc.)

Fieldsets and legends should be used appropriately to group inputs into questions. Labels and inputs should be linked with a for attribute. Before quiz answers are submitted HTML5 data validation should be used to check the following:

Text and radio input questions must be answered

Name and student id fields are not empty.

The first and last name data should be checked to ensure it only consists of alpha characters, hyphens or spaces. A maximum of 25 character should be able to be entered.

Data Submission of Quiz answer to the Server

For this assignment, all forms should have a Submit input. When the submit button is clicked the name-values from the associated form should be sent to the server using the post http method. The server action address is (your web hosting provider). The server will then just echo back the name-value pairs to the client.

6. You will also include

A CSS file that styles your website.

CSS Requirements -

The pages in your website must be styled with CSS and have a consistent 'look and feel', particularly common elements such as menus, headers and footers. While the emphasis is this assignment is on the appropriate application of techniques rather than graphic design, your pages should follow basic usability / accessibility principles, e.g. distinguishable foreground and background colours, and font readability, etc.

You are to create your own to implement your design. For this assignment, you should create a single external CSS stylesheet that styles the common elements on all your Web pages. This file should be named style.css in an appropriate folder

1. CSS should be commented at the beginning of the CSS file to identify author and purpose, and individual line comments should be used as necessary to explain particular styles and explain where they are applied.

2. All the following CSS Selectors should be used appropriately at some point in your assignment:

• element, #id, .class, grouping, contextual
• pseudo-class or element

3. Provide appropriate formatting to your menu with a background colour.

4. The following specific CSS rules should be demonstrated on your index.html page:

• display a background graphic.
• the footer text should be in a small font and centred in the footer.

5. The following specific CSS rules should be demonstrated on your functionalities.html page:

• <h1> elements should have their font variant, size and family etc. set using the short-hand font property.
• The table should have one a background colour for the headings and another background for the data cells
• The <aside> should be 25% of the width of page and float to the right.
• The <aside> should have a coloured border with an appropriate margin and padding.
• The footer should cover the full width of the page.

6. All pages should have a fluid layout (the page should "Reflow" on page resize).

Other CSS selectors and properties should also be used as necessary and appropriate for the presentation.

JavaScript File -

A JavaScript file must be created for the registration and the order pages to validate the input data before forms are submitted to the server for processing. The JavaScript must:

• check that none of the required input fields are blank.
• check that the password is at least 8-character long;
• check that the postcode is 4-digit.
• show an alert or inline error messages to display all the errors in the input fields;
• allow the form to be submitted only if all the input data are valid.

Enhancements to the Specified Requirements -

The technologies for developing Web applications are rapidly changing. One of the critical skills you will need is finding out about these techniques (from the Web) and applying them. This assessment gives you need an opportunity to demonstrate your ability to implement features/techniques that go beyond the specified requirements above. This is an opportunity to demonstrate your ability to discover techniques from a range of sources and apply them in a standards-compliant manner.

These enhancements need to be implemented within the Web pages (registeration.html, order.html, quiz.html). The extra features need to enhance your website in a relevant way.

On a separate Web page called enhancements.html list and describe each enhancement you have made and how you have significantly extended the basic HTML and CSS beyond what is covered in the Tutorials. Hyperlink from this list to where the feature is implemented in your website. If it is a CSS feature, hyperlink to an example of the html that is selected by the CSS rule.

For each enhancement feature briefly explain:

• how it goes beyond the basic requirements of the assignment
• what code is needed to implement the feature
• if you have sourced your technique from a third party the source of this technique (e.g. URL) must be cited.
• a hyperlink to where you have applied that extension in your website (this is needed so the tutor can quickly assess your enhancements during the demonstration).
• All enhancements must be able to run on the version of the browsers in the labs. Make sure you check this.

Examples of HTML/CSS enhancements you might make that will contribute a high distinction mark include:

• Effective, appropriate and innovative use of a number of distinct HTML elements not covered in tutorials (e.g. Image maps, Canvas, etc) used in a way that improves the user experience of the website.
• A number of additional CSS properties or selectors (e.g. support for interactivity) not covered in the tutorials. For example the use of a range CSS3 pseudo-elements and classes, child or siblings combinators, attribute selectors, etc. (e.g. use the CSS3 : target selector to help us see where you have applied your enhancements.)
• Implement Responsive Design with additional CSS that presents your website specifically for mobile phone / tablet sized displays.
• In addition to your standard CSS, create another CSS file that re-implements and extends the style with a library/pre-processor such a Bootstrap, LESS or Sass. Demonstrate and document a number of cool features that can be implemented using the library.

As a guide, if the enhancement has only taken a couple of lines of code it is likely to be trivial.

Be relevant to / enhance the content of the website.

Be well described (as explained above).

Be non-trivial.

Be significantly different from other features you have implemented.