HOLMES
INSTITUTE
FACULTY OF
HIGHER
EDUCATION
UNDERGRADUATE
PROGRAM
Assessment Details and Submission Guidelines
Trimester T2 2019
Unit Code HS1021
Unit Title Web Design
Assessment Type Group Assignment
Assessment Title Web Site Project
Purpose of the
assessment (with ULO Mapping) 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.
Weight 20% of the total assessments
Total Marks 20 (15 + 5)
Word limit 1500-2000 words
Due Date Week 10
Submission Guidelines • All work must be submitted on Blackboard by the due date along with a completed Assignment Cover Page.
• The assignment must be in MS Word format, 1.5 spacing, 11-pt Calibri (Body) font and 2 cm margins on all four sides of your page with appropriate section headings.
• Reference sources must be cited in the text of the report, and listed appropriately at the end in a reference list using Harvard or IEEE referencing style.
Please be reminded that you cannot copy and plagiarise to ease your way to a final submission. While you may discuss ideas with others, do not steal. You can find more information at:
https://timelinecms-
library.holmes.edu.au/uploads/Policy%20PDFs/Academic%20Conduct%20and%20Integrity%20v%2024.6.19.pdf
Read this information well since afterwards no excuses will save you. Anyone resorting to such methods will be considered as trying to cheat and will even risk the removal from the degree program.
Assignment 2 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.
Hint: CSS validators will validate against a particular version of CSS e.g. CSS2.1 or 3. This assignment should be valid CSS3. Make sure that you are checking your CSS using the correct version of the validator. For example, if you include CSS3 markup and validate as CSS2.1 it will show errors. (Best to pre-set the version in the Web Developer tools). Do not include any proprietary CSS mark-up, such as –moz- or –webkit- etc.
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
Submission requirements
Before submitting the assignment, please ensure that you have completed or considered the following:
• Check your assignment against the attached marking scheme
• Ensure that all HTML and CSS files can be fully validated;
• The assignment is your original work. If your assignment is not your original work, your result will be 0 marks for this assignment;
• Provide references for all third-party contents used on your webpages;
• Make sure you contact your lecturer before the due date, if you are having trouble in submitting the assignment on time.
• Make sure all your files are in the correct folders and compress your root folder with all your subfolders with HTML, CSS, and images into a zip file named “Groupassign.zip”. Submit this to Blackboard. When the zip file is decompressed, the entire website should be able to run from index.html without needing to move any files
• You can submit more than once through Blackboard
• Note that all deliverables must be submitted as a softcopy
An electronic copy of your assignment should be submitted through Blackboard on or before the deadline Friday 27th September 2019 at 11:30pm.
You will be assessed as a group on the following criteria:
Report component
Sample page layout
Quality of the website (HTML, CSS JavaScript)
Total
You will be assessed individually on group contribution. Every member must fill in the Peer assessment form (available on Bb). In addition, all the group members have to agree on the contribution hours for every member by filling in the Team contribution statement (available on Bb).
Individual Group Contributions will be rated as follows:
5 A real Team Player – communicates and contributes quality work almost daily, cooperates with other group members, fulfils the responsibility of the assigned role in a timely manner
4 Communicates and contributes quality work several times a week cooperates with other group members, fulfils the responsibility of the assigned role in a timely manner
3 Communicates only when absolutely necessary or only somewhat cooperative with group members or only minimally fulfils the responsibility of the assigned role in a timely manner
2 Rarely communicates or is not cooperative or fulfils the responsibility of the assigned role with sub-standard or late work
0-1 This team member is most likely to be “voted off the island” and does not contribute to the group in a positive manner