School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin Module: CMP-4011A Web-based Programming Assignment 2: Team-based Web Development and Programming Set by: Dr J. Chin (
[email protected]) Date set: 1 September 2019 Value: 50% Date due: 09 December 2019 15:00 [week 12] Demo due: 10 December 2019 Returned by: 13 January 2020 Submission: Blackboard Checked by: Dr Han Gong and Dr Pam Mayhew Learning outcomes • Become proficient in the use of a range of web technologies including HTML5, CSS, and JavaScript o Write and apply HTML5 mark-up appropriately o Create CSS rules o Write JavaScript code to handle events o Write server-side JavaScript coding based on NodeJS runtime environment to handle client’s requests • Understand the concepts and technologies underpinning the Internet and World Wide Web o Design a website with good usability which caters for accessibility o Present web content appropriately o Online project management system Specification Overview This is a team-based assignment. The objective of this assignment is to develop an interactive/dynamic website using web technologies: HTML, CSS, JavaScript and Node JS, the JavaScript run time environment for backend processing. You will be working in a team of four. Trello, an online project management system, will be used to document the work. The completed website (i.e. frontend and backend code in a zip file) will be submitted to Blackboard on or before the due date. This assignment will be assessed via a compulsory demo session, to be scheduled in week 12. School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin Background The Earth's climate is changing all the time. NASA reported that “just in the last 650,000 years there have been seven cycles of glacial advance and retreat, with the abrupt end of the last ice age about 7,000 years ago marking the beginning of the modern climate era — and of human civilisation. However, most of these climate changes are attributed to very small variations in Earth’s orbit that change the amount of solar energy our planet receives”1. Ever since the IPCC published its report stating that the current climate warming trend is “extremely likely (greater than 95% probability) to be the result of human activities”1, the climate change issue has attracted global attentions and has prompted many governments around the world to take actions to reduce carbon emissions. Meanwhile an independent committee (Committee on Climate Change - CCC) has been set up in the UK to advise its government on building a low-carbon economy and preparing for climate change. A recent report2 published by this committee found that “the UK’s action to curb greenhouse gas emissions is lagging behind what is needed to meet legally-binding emissions targets”. The Climate Monitoring People (CMP) [an imaginary group] has been asked by the government to help and raise the awareness of global warming. In addition to present the report findings, the CMP has decided to provide a web form for their visitors to use to subscribe to future updates. Your team has been asked to help the CMP group to design and develop a simple interactive/ dynamic website and present the key findings found on this CCC report. Your website can contain videos and/or audio although it is not a requirement. A web form used to gather visitor’s information should be designed and implemented. The web form will capture information such as (but not limited to): first name, last name, email address, and comments. Additional information such as interests may be collected if you wish. Consideration of GDPR issues and implications will not be assessed and therefore can be omitted in this assignment. To help you get started, a digital copy of the CCC report is provided and can be downloaded from Blackboard. The full report is in PDF format, has 4 chapters and is 93 pages long. There are many images, graphics or diagrams in the report. You are welcome to use them on your website if you wish. However, you may need to use graphics software to do the job; please bear in mind that teaching how to use graphics software is outside the scope of this module. NOTE: You will not be assessed on the report content being presented (i.e. level of detail or accuracy). However, you will be assessed on how the content is being organised and presented on the webpage. Remember, this is a web programming assignment rather than a 1 NASA Climate: https://climate.nasa.gov/evidence/ 2 Committee on Climate Change UK : https://www.theccc.org.uk/publication/reducing-uk-emissions- 2019progress-report-to-parliament/ School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin web editorial assignment. How the text is organised and displayed on a webpage is more important than the amount of details being presented. There is no need to present the whole report on your website, only the KEY information is required. You could add an appropriate hyperlink for users to download this PDF if you wish. You are not allowed to use online tools to create this website. Minimum Requirements The website must include the following pages: • Home page (named as “index.html”). • A page named appropriately for each chapter: o Chapter 1: Progress in reducing emissions o Chapter 2: Developments in international and European 38 circumstances o Chapter 3: Underlying progress in the UK towards deep emissions 50 reduction o Chapter 4: UK performance in reducing emissions over the 80 second carbon budget period. • A page for displaying team information (i.e. your team members), including names, short bio, role in this project, responsibility and contributions • A signup form where users can sign up for future updates by submitting the completed form. The signup form must have at least four fields: first name, last name, email address and comments. You can add more fields if you wish. Foreign data handling (i.e. form validation) is necessary for this assignment. After the form is submitted, the user should be presented with a message confirming the submission either it was successful or if there were any errors encountered. A signup confirmation email may be sent to users after subscription. You can include any other pages that you consider relevant. The website should have no more than 10 pages. Frontend minimum requirements: The use of HTML5 in all web pages: • HTML5 semantic mark-up should be used on all web pages • HTML5 Form validation should be implemented • Three form fields are required: first name, last name and email address. The comment field is optional. • All web pages should be validated The use of CSS3 in all web pages: School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin • Should be implemented in an external file (named as “style.css”) • Appropriate colour scheme should be used • Graphics, diagrams and images should be displayed appropriately • All CSS files should be validated The use of JavaScript in web pages: • Should be implemented as an external file (named as “wp.js”) • At least one mouse click event should be implemented • Should be able to capture the form data Backend requirements: The backend server must be based on Node JS JavaScript run time environment. The server should be implemented on a local machine and can be accessed via localhost (e.g. on localhost port 3000 although you can run it on a different port if you wish). The minimum requirements of the server are: • Should be able to receive the form data (i.e. after user clicks the “Submit” button on the sign-up form) • Foreign data should be handled with care upon receiving • The form data should be rendered in JSON format • The data should be stored in the local file system on the server • An acknowledgment of receiving the form data should be sent back to the client/frontend and be rendered on a webpage (i.e. acknowledged whether the data has been successfully received) • Use Express framework to serve the routes Desirable Requirements: Extra marks will be awarded for: • Serving of webpages using REST/Express routes by EITHER o rendering static HTML pages OR o rendering using a web template such as pug. Note that the use of pug is not covered in the lectures. You will need to refer to online documentation to learn how to use it – a useful skill in programming! • Sending email to the user after they submit the form, to confirm successful sign-up. Documentation: • You should provide a very brief guide (maximum one side of A4) describing how to use the site. This is an opportunity to highlight any special features you have incorporated School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin in the website. The guide could be as succinct as a paragraph or two and a bullet point list. This is also an opportunity to comment on the division of the work between you and your team members. • The project progress should be documented on the Trello project management system. Beyond this specification all other design decisions are your own – and marks will be awarded accordingly. You need to be able to justify your various design decisions. For example, you may wish to consider what data entry checks (validation) should be made, how text content is formatted and displayed, UI interactions etc. You should consider aspects of usability in your design of the user interface. All web pages should be optimised for the computer lab screens. If you develop the website on a laptop be sure to check that they still display adequately on higher-resolution screens. Team This is team-based assignment. Each team is made up of four members. Information about teams and team members allocation will be made available on Blackboard in week 6, please stay tuned! Teamwork is one of the most efficient ways to solve problems and tackle big tasks in any environment and often the experience is highly rewarding. However, teamwork can also lead to unsuccessful outcomes, particularly when there are problems within the team. Typical problems that can arise include one person contributing more than others, or a lack of guidance, or a clash of personalities. To avoid the potential problems, we recommend that once you know your team, explore strengths of each person and allocate tasks accordingly. Remember it is up to the team to decide the roles for their members as well as what their tasks are. Do watch out for the workload though, it should be evenly dispersed between all members. Each team should have a team leader or coordinator. This role can be taken by one person or take turns. To make the most out of this experience, members of the team should have their own responsibilities with a defined role. Trello online project documentation system Each team should record their work such as design process and tasks progression in Trello. Trello is an easy-to-use online project management system. All you need to do is to sign up, if you have not already done so, or sign in, create a new project (called board) name it as “Web-based Programming Assignment 2 Group X” (where X is your assigned group ID), and invite your team members to the project. Make sure to invite me - Dr Jeannette Chin (email: School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin
[email protected]), Dr Dan Smith (email:
[email protected]) and Dr Han Gong (email:
[email protected]) to your project. Note: You may be penalised if we have not been provided an opportunity to review your project on Trello in a timely manner. Sketches/diagrams/pictures and notes of this assignment should be uploaded to Trello, as well as a list of each individual’s tasks. Where you note an ambiguity in the specification/requirement above you should record this in Trello along with any decisions and justifications you have taken in response. Trello URL: https://trello.com. It is anticipated that each team will have an account opened with Trello. A Trello tutorial guide is provided for you on Blackboard. Relationship to formative assessment The assignment is based on the work you have carried out in the lab exercises. Deliverables Test that the website works on a variety of PC Lab computers. All links should be relative in order for the website to be portable. • Electronic submission to Blackboard, due date: Monday 9th December 2019, time: 15:00 – A zip archive containing all files (HTML, CSS, JavaScript including Node JS, any images and the PDF file, an A4 page listing names and student number of each member of the team together with a single site guide) must be submitted by each group (only one person needs to submit per group). The single side guide to the web site is not assessed but does help the marker to understand the website and to be aware of any additional features that you have included. The zip file should be named as: group_
_wbp.zip (where is your group ID, which will be assigned at the beginning of the term). Archive formats other than zip will not be accepted. The zip archive must be submitted to the Blackboard on the module pages. You will be penalised if this is not submitted or is submitted late. Note: only .zip format is accepted. Failure to submit on time may deny you as a team the chance to participate in the demo session scheduled on the 10th December. • Compulsory demo: The implementation of the Web application o When: week 12, Tuesday, 10th December o Time allowed: 15 minutes plus 5 minutes Q&A (exact time slot to be advised) o The demonstration should show your application includes the core features and highlight any advanced features that you have included. Each team member should School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin present their part of the work. You may be questioned on your code and will be asked to show that a randomly selected web page validates. Failure to attend the demo will result in a mark of zero being awarded for this component. • The use of Trello online project management system o When: week 12, Tuesday, 10th December o The team will be assessed on how the project has been documented using the Trello system. Dr Jeannette Chin (email: [email protected]), Dr Dan Smith (email: [email protected]) and Dr Han Gong (email: [email protected]) must be invited to your Trello system. Important Notes The assignment is a team-based project, reflecting on typical projects carried out in an industry environment. Every team will receive a group mark for their project. However, individual team members will receive their mark, which is calculated using the formula: group mark * ratio, where the ratio is determined by the individual’s engagement and contributions to the project rated by their own team members. Each team member will have an opportunity to say about their peers via an online voting system. The vote will contribute to how the ratio is calculated. The online voting system will be opened in week 12 for a limited time only, so please stay tuned! WARNING: Failure to participate in this voting system will result in the ratio being capped at 50% for that person. Be sure to document the design and development processes, and tasks assigned to each member of the team in Trello. Each member is encouraged to actively engage with this documenting process (i.e. documenting their own tasks and progress on Trello). Remember the success of the project is the success of the team! It is anticipated that everyone in the team will work collaboratively and cooperatively in this project. Any disputes should be dealt with by discussing with their own team members in the first instance. If that fails to resolve the issue, then do raise it with me (Dr Jeannette Chin) or Dr Han Gong as soon as possible but please provide/backup by solid evidence. School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin Resources Lecture notes and lab exercises from the module will be helpful in completing this assignment. Stack Overflow is a valuable resource, but you must not post questions there (or on any other similar forum) asking for help with this assignment. https://developer.mozilla.org/en-US/ is a valuable reference point. Marking Scheme and Rubric Quality of the overall website, based on “look and feel” and functionality, e.g. ease of navigation, complexity but usefulness of layout, ability to resize sensibly, form functionality, and accessibility. 20% School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin Assignment brief interpretation. Have the specifications been followed and implemented? If not any sensible/reasonable justifications? 20% Additional marks will be awarded for other features you have researched yourselves and that effectively enhanced the website. 20% Quality of coding (HTML, CSS and JavaScript) 15% School of Computing Sciences CMP-4011A-Web-based Programming 2019-2020 Assignment v.1.0 by Dr Jeannette Chin Answers to questions and the demonstration of student’s wider understanding 15% Documentation (Trello and Blackboard submission) 10% 
