” 辅导COMPSCI 345编程、 写作HTML, CSS编程COMPSCI 345 / SOFTENG 350Assignment 2: Registration form for a book club websiteWorth 30% of your final gradeThis assignment will be completed individuallyEach student should plan to spend 15 hours on this assignmentUpload your submission to Canvas and to Assignment DropboxDue by 11am on Monday 31 MayAimThe aims of this assignment are to develop a hi-fi prototype design as a mockup Webinterface. The assignment allows you to practice skills in high fidelity design, Webtechnology, HTML, CSS, and JavaScript. It will also require you to put the visual designprinciples discussed in class into practice. Lastly, the assignment demands that you adoptan inclusive design practice by taking Web accessibility into consideration.Figure 1 Screenshot taken from original homepage of the book club websiteFigure 2 Example PDF-format Registration Form which was downloaded from the originalwebsite BPDBackgroundThe login or registration form is usually one of the first elements we see on a website thefirst impression visitors get from the organization or service. The efficiency of the websitenavigation and such online forms is what can make or break the relationship between thebrand and its audience. A combination of usability, visual appeal and accessibility will makesure the visitors get the most out of your site, building the foundation for an exceptional userexperience.Imagine that youve been asked to redesign a website Book Program Discussion (BPD)1and registration form for a non-profit organisation that lends books and professionaldiscussion notes to participating book groups. BPD also wants a new logo, which they arecontracting out to a design firm. Please include a placeholder logo for a new logo whichmatches the new colour scheme. Groups make their book selections from an extensive bookcatalogue and receive enough copies of their selected book to allow everyone in the groupto read the same book at the same time. Each group meets on a regular basis to discuss thebook theyve read.The current website only has a PDF form that prospective members must fill out — it doesnot have an online registration form for new book club members. The organisation would liketo have their website redesigned. It should include a registration form which will allow newmembers to fill up their details and submit the form. The organisation will then connect thenew members to local groups.For this assignment, you will have to prototype only 1) the homepage and 2) the onlineregistration form. The design should be suitable for a standard full desktop i.e., from 960 to1140p. You are designing for a high-fidelity prototype therefore doesnt need to be fullyfunctional (i.e., the prototype Does not connect to a database nor does it actually submit theform field input). Error checking for format of addresses, passwords, mobile number, is out ofscope.1 The current website of the organization is shown anonymously in Figure 1 and 2. Please preserveanonymity.You can choose to build the redesign from scratch, i.e., from the ground up, or you can adapttemplate(s) from the w3.css framework (see httpss://www.w3schools.com/w3css/w3css_downloads.asp) and you musta) reference the template in the HTML source code and in the report, andb) 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 enoughdesign decisions and be clear which design decisions are your own versus taken from thetemplate.High-fidelity PrototypePart 1Redesign the homepage for the book club by giving it better web styling and structure. Thereare no restrictions to what you can include in the homepage but there should be a navigationbar, an H1 header, a supporting image and a primary call-to-action, i.e., for this case, abutton or link for registration. Make use of the visual design principles discussed in class andtake into account the basic accessibility guidelines. Your screen should approximately matchthe visual complexity of Figure 1.A colour in hex format has been assigned to you which you will have to use in some parts ofyour design. You should receive this via individual email to your UPI@aucklanduni.ac.nzemail address. You can use the assigned colour either as a foreground or as a background.It doesnt have to be applied to all elements, but it must be emphasised and present inmultiple html elements in the homepage. When using the assigned colour as a foregroundyou must choose the appropriate background that meets the colour contrast accessibilityguidelines. The same applies when using it as a background. You can check your assignedcolour to pick a contrasting colour as a foreground or background by using online tools forexample httpss://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 tofill a background. Imagine that you are working with a design team that requiresstandardised naming of HTML elements.To apply the assigned colour to elements where the attributes color or background-colorare used, there are two steps. 1) You are required to define your css selectors in the exactformat below (with the Example assigned colour #ffffff) and 2) you must reference the cssclass 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 2Design a registration form for a new book club member. The form should be in a modalwindow that pops up as an overlay on top of the homepage. The modal window onlyappears if you click the registration button or link from the homepage. The modal windowshould also have a close button (usually a button labelled x) that closes itself and restoresthe homepage. This can be achieved using a simple JavaScript code. The button or link thatyou click to trigger the opening of the modal window must have an id of trigger-modal.For example:a href=# id=trigger-modalRegister/aFor simplicity, your form should have exactly 3 sections with all of the 8 following fields (eachinput field is only 1 input field): User Detailso Given nameo Surnameo Usernameo Password Addresseso Home Address (within exactly 1 input field)o Work Address (within exactly 1 input field) Contactso 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 theregistration 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 contactsYour design team also requires that you enclose the entire form with a div html element withthe id bookclubrego. For example div id=bookclubregoform/form/div.Submission instructionsYou will need to submit in two places.1) to Canvas all files including report, as a zip file2) to assignment dropbox httpss://adb.auckland.ac.nz/ all files (except report) asindividual files (no folders, no zip)Assignment dropbox requirements for submissionYou 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 fileorganisation, for the purposes of this assignment you must not submit any folders. All ofyour files, such as your css and image files, should be in the same folder where yourindex.html file is located. Do not put any files in folders or subfolders. Your directorystructure 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= httpss://www.w3schools.com/w3css/4/w3.css (correct)link rel=stylesheet href=css/index.css (incorrect because its in a subfolder)script src=scripts.js/script (correct)script src=js/scripts.js/script (incorrect because its in a subfolder)Technical Requirements Checklist● The css selector names custom-color and custom-background-color are used formy 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 ids userDetails, addresses and contacts withexactly 8 input fields, as specified.● All files are in the same local folder and not in subfolders.A2 Submission Marking SchemeFor evaluating the compliance of the submission, e.g., with accessibility guidelines, we willuse manual marking and we may use tools to check, e.g., colours. Please recall that onlyW3 CSS is allowed.ReportQuality, clarity of justifications for user experience, Gestalt principles, balance, emphasis,unity, colour scheme for main page and form. (7 points)Visual designOverall quality of user experience, Gestalt principles, balance, emphasis, unity, colourscheme 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. Colourcontrast meets accessibility guidelines. (5 points)FunctionalityAccessibility Submission Follows accessibility guidelines presented in lecture. (6 points)Functional correctness Form pops up as specified. No bugs. (1 point)QAQ: I understand that the assignment is testing prototyping and not the functionality, but wouldsome small functionalities be necessary? Specifically in cases like choosing a different itemcombo box or applying filters to a list, would we be marked differently if we choose toimplement 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 asksstudents to implement 2 button clicks (i.e., the register button and the close button), andleave the other buttons non functional.Overall the answer to this Question is No. For best marks, put effort into your designdecisions.Q: What libraries, etc., can we use?A: You have to use standard web browser technologies (HTML, CSS, Javascript).You arenot allowed to any libraries except JQuery and, if you wish, the w3.css framework (see httpss://www.w3schools.com/w3css/w3css_downloads.asp ). You are not allowed to useanything that generates code for you.The reason for this approach is that downloading a template that sets the colour scheme, thefont scheme or has a creative layout isnt your own work. Intrinsically, this assignment doesnot require elaborate toolkits, given the super-limited functional requirements of the system.The assignment focuses on making good design choices rather than implementingmaximum functionality.Q: Could I submit my github repo?A: No — you must follow every single submission instruction precisely as theyve been laidout. 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?请加QQ：99515681 或邮箱：99515681@qq.com WX：codehelp
“
添加老师微信回复‘’官网 辅导‘’获取专业老师帮助，或点击联系老师1对1在线指导。
