2016 Suite. Cambridge TECHNICALS LEVEL 3. Unit 21 Web design and prototyping. Northbound Events assignment M/507/5024. Version 1 September 2017

Transcription

1 2016 Suite Cambridge TECHNICALS LEVEL 3 IT Unit 21 Web design and prototyping Northbound Events assignment M/507/5024 Version 1 September

2 Contents Scenario... 3 Part A Training... 3 Part B Designing the application... 3 Part C Client brief... 3 The tasks... 5 Task 1: Research fundamentals of web design... 5 Task 2: Requirements analysis and plan of an interactive website... 6 Task 3: Produce an interactive and responsive website... 7 Task 4: Presenting solution and future considerations... 8 Evidence Checklist... 9 Notes

3 Scenario Part A Training Assignment Unit 21: Web design and prototyping You are an application designer for Creative Computing Solutions and are required to take part in all the stages of designing a website and building a prototype. Part of your role is to train new website designers in the company to help them understand the processes and the way Creative Computing Solutions develops websites for clients. Part B Designing the application Northbound Events (NBE) wants you to develop a dynamic website using PHP and MySQL to enable customers to view events at different venues what they promote and has approached Creative Computing Solutions to research, design and produce and interactive, responsive website for them. The client knows very little about how websites are designed, their technical capabilities, the security risks or how to minimise threats. They have ideas for their website regarding the content and what they want it to be able to do but they are relying on the web designer to provide them with guidance. You will be required to: describe the key components of website construction; explain the security risks that must be considered when creating a website; identify the user requirements based on client brief and interview prepare their designs and present them to the client; justification of design components based on the client requirements develop a prototype; develop interactive components test the prototype; present prototype to client; discuss future considerations regarding security and maintenance. Throughout the process of designing the website you will describe the various stages that they work through and include relevant documentation at each stage of the process. Part C Client brief Background Northbound Events (NBE) is a recently established events company that organises and sells tickets for a range of arts events across the North of England. The company requires a website and eventually like to sell tickets online. While online sales don t form part of this brief, NBE wants this stage of development to structure their events in such a way that online sales could be added at a later point in time. In the meantime, NBE wants people to be able to book by telephone until they can decide on the best approach for online sales. The overriding goal for the site is to be able to show a list of events and allow people to learn more about each event they might be interested in attending. You might consider including a featured event, or perhaps the most recently added event to the site home page to help grab visitors attention as they arrive on the site. 3

4 Typical Audience NBE s audience is generally people under 35 years old, so this group are active on social media and will often browse and buy things online, and increasingly from their mobile phones. Events To enable online sales in the future, the NBE website would need to allow visitors to browse events, and view detailed information about a specific event. Events will typically fall into the following 3 categories: Live bands Comedy Art displays and exhibitions Visitors browsing the website to find information about the event should be able to see: The date and time of the event The event venue Ticket prices Etc. Venues NBE don t have their own venues, so they use a number of different locations to suit the type of event and likely audience size. There are currently 5 different venues that NBE have commercial agreements with, with each venue being selected depending on the type of event taking place and the number of people that can be accommodated. Some venues are large enough to cater for all types of events that NBE offer. Each venue has the following information: A description of the venue A photo of the venue The venue s physical location Deliverables NBE would like to see the proposed structure of the site prior to development work starting. This should be a structural overview of how the pages will link together and show how visitors will typically access the event details to be able to buy tickets. Suggested Functionality With most visitors to the NBE website being very familiar with websites and social media, the developers should consider the following. Social media integration such as share links to help promote events Embedded videos that are hosted on YouTube Online mapping to show venue locations Technical Specification The site should be built using the PHP language with a MySQL database. One of the main success factors for the site will be the dynamic way in which events and venues are linked together, and visitors will be able to filter by event types so they only see the events they re interested in. The website should be: Cross-browser compatible on all major desktop browsers (Chrome, Firefox, Safari, Edge) Built using responsive techniques so it can be used on mobile devices and tablets Be easy to use and follow a logical navigation structure Secure and prevent any unauthorised access, or malicious updates to database entries 4

5 The tasks Task 1: Research fundamentals of web design Learning Outcome 1: Understand the fundamentals of web design, is assessed in this task. Pass Merit Distinction P1: Describe the key components of website construction Evidence Research report P1 M1: Explain the security risks that must be considered when creating a website The report should describe the key components of website construction. Here is a list of what components to consider: domain name the purpose or a site map the use of hyperlinks to join webpages the position, structure and purpose of a navigation bar page design (e.g. navigation bar, title, page content, a plan for content management) designing for different browsers and devices o responsive design for mobile/tablet technology o how browser rendering can affect the layout of a webpage o an understanding of browser rendering engines as a key to performance o importance of design that takes this into account, what can happen when it is not considered World Wide Web Consortium o open and closed standards in web development storage of data (e.g. linking to a database) methods of user interaction o different methods of interactivity o use of existing tools o use of languages to add interactivity (e.g. JavaScript, jquery) The handout must be in your own words and provide a comprehensive summary of your findings. It is important that you correctly reference all sources used, following appropriate conventions. Research report M1 The report should explain the security risks that must be considered when creating a website. Here is a list of what security risks to consider: the need for security threats (e.g. SQL injection, interception of data, un-validated input) prevention (e.g. validation, appropriate passwords, encryption) The handout must be in your own words and provide a comprehensive summary of your findings. It is important that you correctly reference all sources used, following appropriate conventions. 5

6 Task 2: Requirements analysis and plan of an interactive website Learning Outcome 2: Be able to plan the development of an interactive website for an identified client, is assessed in this task. Pass Merit Distinction P2: Determine a client s requirements for a website P3: Produce a plan for the website that meets the client s requirements Evidence D1: Justify the use of components in the website design that meets the client s requirements Requirements document P2 Review the client brief and meet with the client to establish their requirements for the website. The requirements document must include: list of specific requirements; purpose of site; content; user interactivity required (e.g. submission of data, maps); responsive design requirements. Diagrams and plans for the website P3 This must provide a series of annotated diagrams that describe the proposed website. These should include diagrams to show the scenarios in which the website will be used including: site map navigation bar page structure interactive elements to meet the client s needs using suitable diagrams (e.g. flowcharts, data flow diagrams, entity relationship diagrams) design (e.g. font, colour) user interface design using wireframes and graphical mock-ups responsive design for different devices, e.g. tablet, phone, PC for different browsers, e.g. IE, Chrome, Safari Extension to diagrams and plan D1 This should justify the use of components in the website design clearly explaining how they meet the client s requirements. 6

7 Task 3: Produce an interactive and responsive website Learning Outcome 3: Be able to create prototype websites for an identified client, is assessed in this task. Pass Merit Distinction P4: Create a prototype of the website for the client M2: Add interactive components to the prototype based P5: Conduct testing of the prototype Evidence D2: Evaluate the prototype against the client s requirements Prototype P4 Create a prototype of the website design solution. Interactive components M2 Create and add the interactive components to the website prototype. Testing summary report P5 This should include a test plan whether the content of the website is appropriate, correct and complete. The functionality of all embedded components, JavaScript/jQuery and database storage is tested. The responsive design must be tested as well as ensuring that the website meets the original requirements. All planned tests must be completed and any failed tests needs to be fixed and re-tested. Critical analysis of website D2 You must evaluate your website solution against the client s needs where you compare against the original requirements. You also need to consider: how the prototype meets the site purpose; comparison of prototype against content required; comparison of interactivity built in, against the user s interactive requirements; comparison of responsive design to user s responsive design requirements; justify choices made in the development of the prototype against the original needs; improvements - suggest improvements to the design, structure or function of the prototype. 7

8 Task 4: Presenting solution and future considerations Learning Outcome 4: Be able to present the interactive website concept to an identified client, is assessed in this task. Pass Merit Distinction P6: Create a presentation to demonstrate the prototype website to the client Evidence Presentation P6 M3: Communicate future website security and maintenance considerations to client You must present the solution to the client where you choose a suitable method of presentation (e.g. live demonstration, use of presentation software). Your presentation must incorporate: comparison of website against requirements demonstration of functionality demonstration of interactivity demonstration of responsive design justification of design choices Future considerations report M3 You must consider future security and maintenance considerations. This includes: updating of content training of staff threats to information security protection methods for securing personal data/information 8

9 Evidence Checklist OCR Level 3 Cambridge Technicals in IT Unit 21: Web design and prototyping For PASS have you: (as a minimum you have to show you can meet every pass criterion to complete the unit) Where can your tutor find the evidence? Give page no(s)/digital timings, etc. Describe the key components of website construction (P1) e.g. A research report Determine a client s requirements for a website (P2) e.g. A requirements document following discussion with the client Produce a plan for the website that meets the client s requirements (P3) e.g. Diagrams and plans for the website Create a prototype of the website for the client (P4) e.g. A prototype Conduct testing of the prototype (P5) e.g. A testing summary report Create a presentation to demonstrate the prototype website to the client (P6) e.g. A presentation 9

10 For Merit have you: Where can your tutor find the evidence? Give page no(s)/digital timings, etc. Explain the security risks that must be considered when creating a website (M1) e.g. A research report Add interactive components to the prototype based upon the client s requirements (M2) e.g. Interactive components Communicate future website security and maintenance considerations to client (M3) e.g. Future considerations report For Distinction have you: Justify the use of components in the website design that meets the client s requirements (D1) Where can your tutor find the evidence? Give page no(s)/digital timings, etc. e.g. Extended to diagram and plans (P2 & P3) with supporting justification Evaluate the prototype against the client s requirements (D2) e.g. Critical analysis of website 10

11 Notes 11

12 12 Unit 21 Web design and prototyping