Higher Nationals in Computing
Unit 10: Website Design & Development
ASSIGNMENT 2
Learner’s name: Tran Quang Hien
ID: GCS210109
Class: GCS1003A
Subject code: 1633
Assessor name: NGUYEN NGOC TU
Assignment due: Assignment submitted:
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
1633_Assignment2_ Website Design and Development, Assignments of Computer Science
Assignment 2 1633. Effective for everyone who wants P
Typology: Assignments
2022/2023
1 / 65
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download 1633_Assignment2_ Website Design and Development and more Assignments Computer Science in PDF only on Docsity!
Higher Nationals in Computing
Unit 10: Website Design & Development
ASSIGNMENT 2
Learner’s name: Tran Quang Hien
ID: GCS
Class: GCS1003A
Subject code: 1633
Assessor name: NGUYEN NGOC TU
Assignment due: Assignment submitted:
ASSIGNMENT 2 FRONT SHEET Qualification BTEC Level 5 HND Diploma in Computing Unit number and title Unit 10: Website Design & Development Submission date Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Tran Quang Hien Student ID GCS Class GCS1003A Assessor name Nguyen Ngoc Tu Student declaration I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that making a false declaration is a form of malpractice. Student’s signature Grading grid P5 P6 P7 M4 M5 D2 D
Assignment Brief 2 (RQF)
Higher National Certificate/Diploma in
Computing
Student Name/ID Number: Tran Quang Hien/GCS Unit Number and Title: Unit 10: Website Design & Development Academic Year: 2021 – 2022 Unit Assessor: Nguyen Ngoc Tu Assignment Title: Web Technologies Issue Date: Submission Date: Internal Verifier Name: Date: Submission Format: Format:
- A report document including below sections o Section 1: A review of appreciate web design principles, standards and guidelines. o Section 2: Design document for online shopping website. o Section 3: Implementation of website design. o Section 4: Test plan and test evaluation.
- A compressed file that encapsulates all source code and particular necessary resources including files of images, style sheets, java script and other files to support to install multipage website such as sql script and installation guide. Submission
- Students are compulsory to submit the assignment in due date and in a way requested by the Tutor.
- The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/.
- Remember to convert the word file into PDF file before the submission on CMS. Note:
- The individual Assignment must be your own work, and not copied by or from another student.
- If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must reference your sources, using the Harvard style.
- Make sure that you understand and follow the guidelines to avoid plagiarism. Failure to comply this requirement will result in a failed assignment.
Unit Learning Outcomes: LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website. LO4 Create and use a Test Plan to review the performance and design of a multipage website. Assignment Brief and Guidance: Assignment scenario You currently work for a software training company that produces courses and topic presentations to established companies and, importantly, to new start-ups. MWS wishes to pursue a bespoke web-based e-commerce solution. MWS were impressed with your presentations and wishes to continue with the design and development of an e-commerce website. A sister company develops web solutions and you have been tasked with taking the lead on the MWS solution you outlined previously. You are now required to design and create an interactive website with the emphasis being on the production of a set of simple dynamic web pages, which embody good design principles. The site will be themed around a template which would be most appropriate to MWS, with placeholders for text and content. Images and icons will be used, to give MWS a feel for the proposed website design. You will also include a membership area, where users can register to have access to restricted areas. You will base on MWS-CaseStudy.docx for more information.
Table of Contents
III. Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website. User Experience (UX) andUser Interface (UI). (P7)
- wireframes and a full set of client and user requirements. (P5) I. Create a design document for a branded, multipage website supported with medium fidelity
- Create design document...................................................................................................................
- 1.1 Client and customer requirements
- Mechanism diagram.........................................................................................................................
- 2.1 Flow diagram
- 2.2 User case diagram
- Design database diagram
- Design website wireframes
- 4.1 Home Page
- 4.2 Category page
- 4.3 Product details
- 4.4 Cart page
- 4.5 Sign In
- 4.6 Sign Up
- 4.7 Home Page Admin....................................................................................................................
- Site map
- branded, multipage website supported with realistic content. (P6) II. Use your design document with appropriate principles,standards and guidelines to produce a
- Tools.................................................................................................................................................
- 1.1 IDE:
- 1.2 Hosting:
- 1.3 Web Browser:
- Techniques
- 2.1 Front-End Techniques to design front-end............................................................................
- 2.2 Back-End Techniques to design back-end
- Functional screenshot of multipage website
- 3.1 Interface homepage of this website
- 3.2 Category details site
- 3.3 Product details site
- 3.5 Sign in site
- 3.6 Sign up site
- 3.7 Website admin management site
- Detailed explanation of functions in multipage website
- 4.1 Detailed explanation about homepage
- 4.2 Detailed explanation about category
- 4.3 Detailed explanation about product details
- 4.4 Detailed explanataion about account
- 4.5 Detailed explanataion about admin management
- 1 Purpose
- Test plan
- Test log
- IV. Compare and contrast the multipagewebsite created to thedesign document. (M4)
- Compare And Contrast
- 1.1 HomePage Interface
- 1.2 Product details
- 1.3 Cart
- 1.4 Website admin management
- design and development stages. (M5) V. Evaluate the Quality Assurance (QA) process and review how it was implemented duringyour
- Overview the QA Process
- Review how it was implemented duringyour design and development stages
- 2.1 Web Functional Ability Test Process
- 2.2 Page interface test.....................................................................................................................
- 2.3 Accessible test
- 2.4 Compatibility test
- Evaluate QA testing process
- REFERENCES
P a g e | 2
- User interface
- Order information Processing in website:
- Processing customer's registration.
- Processing customer's login.
- Change customer account information
- Adding, updating, and deleting products in the cart
- Processing admin login. 1.1. 3 Functionality requirements For customer controlling with capabilities:
- Clients are Registered individuals from the site and sign in to purchase items.
- Adding items to the truck
- Changing the amount of every item in the truck
- Eliminate the thing from the truck
- Changing mode dim - light foundation tone
- View request
- Past Items Order
- Account design
- Looking
- Logout For administrators, carry out the following functions:
- Upload, edit and delete items and products that existed in the shop
- View things, clients, request subtleties from the board
- Reset, view, and preview order
- Search item, request detail
- Eliminate thing request
- Logout 1.1. 4 Review accessibility standards and guidelines Alternative text: Written explanations known as alt-text should be provided for photos, graphics, and logos. As a result, those who use screen readers will be able to understand the visual content on your
P a g e | 3 website. Organized pages: Web pages should feature headers and lists to make it easier for customers to traverse the site. Vision impairments: Color should never be utilized to communicate information. I should adhere to the agreed-upon color contrast standard to ensure that people with vision impairments can see the text on my website. They can also utilize the browser's text zoom feature to make the text larger and easier to see. Text/content: The language on my website should be simple, and any message or material should be easy to understand (Agrawal, 2019). Cognitive impairment: Simple and clear websites can help users with memory, reading comprehension, problem-solving, and focus concerns. These qualities are advantageous to everyone who sees my website. Grid Responsive designs: The contrast between programming and a device that is difficult to feature after a specific website is intended is known as responsive design. It is mostly a part of a redesign. That is why it is a compact rather than a corporate standard. Over the years, responsive design has evolved. Readable and web-friendly fonts: The use of appropriate fonts exemplifies shop brand individuality and immediately captures the attention of your consumers. However, it is far from prosperous. Typefaces used in web design must also be useful and readable. Web-friendly fonts include Arial, Helvetica, Times New Roman, and Courier New. Mobile Web: In this day and age of smartphones, I must ensure that my website is mobile-friendly. Designing a responsive website that loads correctly on any mobile device is the greatest way to win user response. Impressive home page: Your website's home page contains a distinct value proposition. It should be both impressive and appealing. The house page with a high-value proposition suggests that your website explains its worth to visitors (Agrawal, 2019).
- Mechanism diagram 2.1 Flow diagram
- 2 User case diagram A use case diagram is a diagram that shows how users in the system can interact with the system and which features they can utilize to do so. It will be divided into three major sections:
- User Types in the System (Actors)
P a g e | 5 detailed information about the product to visitors. People can buy things and place orders using the cart and checkout pages. The page About Us informs clients about the company. Admin To lessen the load on the website's database, you might update order status and delete orders when clients cancel orders. When a user wants to modify something, the order is updated. However, if you wish to perform such functions, you must first log in. Client User About Client, users can visit the shop page to browse and purchase goods as well as view product details. Furthermore, when the user makes a purchase, he is sent to the cart page where he can cancel the product order if he does not like it, increase or decrease the product, and order the product if he buys enough. However, in order to perform such activities, you must first log in. Sign up
P a g e | 6 Registered users can enter various necessary information, for example, their email address, so that when they make a purchase, the invoice code can be sent to their email address and all alerts, such as the login code and data, can be sent to their phone. If they order the merchandise from our website, please let us know where they are for delivery. Sign in Registered users can enter various necessary information, for example their email address, so that when
P a g e | 8
- Design website wireframes 4.1 Home Page
P a g e | 9 4.2 Category page
P a g e | 11 4.4 Cart page
P a g e | 12
- 5 Sign In