代写COMPSCI 345编程、代做HTML, CSS编程语言、Java程序代写

日期：2021-05-28 10:35

COMPSCI 345 / SOFTENG 350

Assignment 2: Registration form for a book club website

Worth 30% of your final grade

This assignment will be completed individually

Each student should plan to spend 15 hours on this assignment

Upload your submission to Canvas and to Assignment Dropbox

Due by 11am on Monday 31 May

Aim

The aims of this assignment are to develop a hi-fi prototype design as a mockup Web

interface. The assignment allows you to practice skills in high fidelity design, Web

technology, HTML, CSS, and JavaScript. It will also require you to put the visual design

principles discussed in class into practice. Lastly, the assignment demands that you adopt

an inclusive design practice by taking web accessibility into consideration.

Figure 1 Screenshot taken from original homepage of the book club website

Figure 2 Example PDF-format Registration Form which was downloaded from the original

website BPD

Background

The login or registration form is usually one of the first elements we see on a website – the

first impression visitors get from the organization or service. The efficiency of the website

navigation and such online forms is what can make or break the relationship between the

brand and its audience. A combination of usability, visual appeal and accessibility will make

sure the visitors get the most out of your site, building the foundation for an exceptional user

experience.

Imagine that you’ve been asked to redesign a website “Book Program Discussion (BPD)

1

”

and registration form for a non-profit organisation that lends books and professional

discussion notes to participating book groups. BPD also wants a new logo, which they are

contracting out to a design firm. Please include a placeholder logo for a new logo which

matches the new colour scheme. Groups make their book selections from an extensive book

catalogue and receive enough copies of their selected book to allow everyone in the group

to read the same book at the same time. Each group meets on a regular basis to discuss the

book they've read.

The current website only has a PDF form that prospective members must fill out -- it does

not have an online registration form for new book club members. The organisation would like

to have their website redesigned. It should include a registration form which will allow new

members to fill up their details and submit the form. The organisation will then connect the

new members to local groups.

For this assignment, you will have to prototype only 1) the homepage and 2) the online

registration form. The design should be suitable for a standard full desktop i.e., from 960 to

1140p. You are designing for a high-fidelity prototype therefore doesn’t need to be fully

functional (i.e., the prototype does not connect to a database nor does it actually submit the

form field input). Error checking for format of addresses, passwords, mobile number, is out of

scope.

1 The current website of the organization is shown anonymously in Figure 1 and 2. Please preserve

anonymity.

You can choose to build the redesign from scratch, i.e., from the ground up, or you can adapt

template(s) from the w3.css framework (see

https://www.w3schools.com/w3css/w3css_downloads.asp) and you must

a) reference the template in the HTML source code and in the report, and

b) you must adapt the template with a substantial amount of your own customization.

This assignment is meant to assess your design decisions. As such, you must make enough

design decisions and be clear which design decisions are your own versus taken from the

template.

High-fidelity Prototype

Part 1

Redesign the homepage for the book club by giving it better web styling and structure. There

are no restrictions to what you can include in the homepage but there should be a navigation

bar, an H1 header, a supporting image and a primary call-to-action, i.e., for this case, a

button or link for registration. Make use of the visual design principles discussed in class and

take into account the basic accessibility guidelines. Your screen should approximately match

the visual complexity of Figure 1.

A colour in hex format has been assigned to you which you will have to use in some parts of

your design. You should receive this via individual email to your UPI@aucklanduni.ac.nz

email address. You can use the assigned colour either as a foreground or as a background.

It doesn’t have to be applied to all elements, but it must be emphasised and present in

multiple html elements in the homepage. When using the assigned colour as a foreground

you must choose the appropriate background that meets the colour contrast accessibility

guidelines. The same applies when using it as a background. You can check your assigned

colour to pick a contrasting colour as a foreground or background by using online tools for

example https://htmlcolors.com/hex-color.

In HTML, colours are defined using the attributes ‘color’ typically for foreground elements,

such as text or borders on a background; and ‘background-color’ which is a colour used to

fill a background. Imagine that you are working with a design team that requires

standardised naming of HTML elements.

To apply the assigned colour to elements where the attributes ‘color’ or ‘background-color’

are used, there are two steps. 1) You are required to define your css selectors in the exact

format below (with the example assigned colour #ffffff) and 2) you must reference the css

class selector in the element.

CSS class selector format in your css file:

.custom-color { (correct because correct css selector name)

color: #ffffff;

}

.custom-background-color { (correct because correct css selector name)

background-color: #ffffff;

}

.assigned-background-color { (incorrect because incorrect css selector name)

background-color: #ffffff;

}

Part 2

Design a registration form for a new book club member. The form should be in a modal

window that pops up as an overlay on top of the homepage. The modal window only

appears if you click the registration button or link from the homepage. The modal window

should also have a close button (usually a button labelled “x”) that closes itself and restores

the homepage. This can be achieved using a simple JavaScript code. The button or link that

you click to trigger the opening of the modal window must have an id of “trigger-modal”.

For example:

<a href=”#” id=”trigger-modal”>Register</a>

For simplicity, your form should have exactly 3 sections with all of the 8 following fields (each

input field is only 1 input field):

· User Details

o Given name

o Surname

o Username

o Password

· Addresses

o Home Address (within exactly 1 input field)

o Work Address (within exactly 1 input field)

· Contacts

o Mobile Number (within exactly 1 input field)

o Email (within exactly 1 input field)

For the purposes of this assignment, do not add any additional sections or form fields to the

registration form which differ from the above specified sections and fields.

Imagine that your design team requires that the sections have the exact div ids:

· userDetails (For example: <div id=”userDetails”>)

· addresses

· contacts

Your design team also requires that you enclose the entire form with a div html element with

the id “bookclubrego”. For example <div id=”bookclubrego”><form>…</form></div>.

Submission instructions

You will need to submit in two places.

1) to Canvas all files including report, as a zip file

2) to assignment dropbox https://adb.auckland.ac.nz/ all files (except report) as

individual files (no folders, no zip)

Assignment dropbox requirements for submission

You must submit all files, except the report. Example included files are index.html, styles.css,

logo.jpg, script.js, all submitted as individual files. While folders are usual for web file

organisation, for the purposes of this assignment you must not submit any folders. All of

your files, such as your css and image files, should be in the same folder where your

index.html file is located. Do not put any files in folders or subfolders. Your directory

structure should be similar to the file structure below for example:

The examples below shows you how you call local files from your html:

<link rel="stylesheet" href="index.css"> (correct)

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> (correct)

<link rel="stylesheet" href="css/index.css"> (incorrect because it’s in a subfolder)

<script src="scripts.js"></script> (correct)

<script src="js/scripts.js"></script> (incorrect because it’s in a subfolder)

Technical Requirements Checklist

● The css selector names “custom-color” and ”custom-background-color” are used for

my assigned colour.

● The link or button for the modal uses the id “trigger-modal”.

● The form is enclosed with the div id “bookclubrego”.

● The form uses exactly three div id’s “userDetails”, “addresses” and “contacts” with

exactly 8 input fields, as specified.

● All files are in the same local folder and not in subfolders.

A2 Submission Marking Scheme

For evaluating the compliance of the submission, e.g., with accessibility guidelines, we will

use manual marking and we may use tools to check, e.g., colours. Please recall that only

W3 CSS is allowed.

Report

Quality, clarity of justifications for user experience, Gestalt principles, balance, emphasis,

unity, colour scheme for main page and form. (7 points)

Visual design

Overall quality of user experience, Gestalt principles, balance, emphasis, unity, colour

scheme for main page and form. Appropriate placeholder logo. (7 points)

Common Fate Form follows the Gestalt principle of Common Fate. (2 points)

Proximity Form follows the Gestalt principle of Proximity. (2 points)

Colour Assigned colour is emphasised and present in multiple screen elements. Colour

contrast meets accessibility guidelines. (5 points)

Functionality

Accessibility Submission follows accessibility guidelines presented in lecture. (6 points)

Functional correctness Form pops up as specified. No bugs. (1 point)

Q&A

Q: I understand that the assignment is testing prototyping and not the functionality, but would

some small functionalities be necessary? Specifically in cases like choosing a different item

combo box or applying filters to a list, would we be marked differently if we choose to

implement these small things as it helps to get a better overall feel of the prototype?

A: The purpose for the assignment is design rather than functionality. The assignment asks

students to implement 2 button clicks (i.e., the register button and the close button), and

leave the other buttons non functional.

Overall the answer to this question is No. For best marks, put effort into your design

decisions.

Q: What libraries, etc., can we use?

A: You have to use standard web browser technologies (HTML, CSS, Javascript).You are

not allowed to any libraries except JQuery and, if you wish, the w3.css framework (see

https://www.w3schools.com/w3css/w3css_downloads.asp ). You are not allowed to use

anything that generates code for you.

The reason for this approach is that downloading a template that sets the colour scheme, the

font scheme or has a creative layout isn't your own work. Intrinsically, this assignment does

not require elaborate toolkits, given the super-limited functional requirements of the system.

The assignment focuses on making good design choices rather than implementing

maximum functionality.

Q: Could I submit my github repo?

A: No -- you must follow every single submission instruction precisely as they’ve been laid

out. Each instruction is there for a reason. Please ask us in lecture if you are curious!

Q: How should I check the colour contrast of web elements?