Be able to create an interactive website to meet a client’s needs Assessment Criteria Learning Outcome Pass Merit Distinction The learner will: The assessment criteria are the pass requirements for this unit The Learner can: To achieve a merit the evidence must show that, in addition to the pass criteria, the learner is able to: To achieve a distinction the evidence must show that, in addition to the pass and merit criteria, the learner is able to: 1 Understand web architecture and components P1 Outline the web architecture and components which enable internet and web functionality 2 Understand the factors that influence website performance P2 Explain the user side and server side factors that influence the performance of a website P3 Explain the security risks and protection mechanisms involved in website performance M1 Compare and contrast current interactive websites for performance and security D1 Discuss the impact that cases of website security breaches have had on society 3 Be able to design websites P4 Using appropriate design tools, design an interactive website to meet a client need M2 Produce annotated design documentation for an interactive website to meet a client need 4 Be able to create websites P5 Create an interactive website to meet a client need M3 Implement CSS in an interactive website to improve the site to meet a client’s needs D2 Carry out acceptance testing with client on an interactive website Assessment Criteria P5, M3 and D2 For assessment criterion P5, the planned website of at least eight pages should be created using appropriate software. It must include images, animation, audio and/or video, navigation and interactivity as planned. It is not necessary for the website to be linked to a database, but there should be some appropriate uses of interactivity. The website can be the evidence for this criterion. For merit criterion M3; the learner should implement improvements to their interactive website to improve site to meet the needs of the client. , The improvements must be implemented by using CSS (Cascade Styles Sheets) which may be internal, external or imported. This can be evidenced by the website but must be supported by a tutor witness statement. The created website should be visually appealing, easy to use, with an appropriate level of content but not overloaded, with the three interactive elements planned, and be suitable for purpose and target audience as identified. The improvements should be implemented for at least two different aspects of the site. Evidence of using these aspects can be visible through the completed site and/or appropriate screenshots. Learners may also record iterative testing carried out throughout the process. Distinction criterion D2 requires learners to fully test their completed website using a detailed test plan/table testing each page of the website. Appropriate tests should be included that cover the functionality, readability, usability and accessibility of the website. It is not essential for errors to be found but the test plan/table should be detailed with at least eight appropriate tests. Evidence records of iterative testing will support their final testing. Acceptance testing should then be carried by the client and preferably the target audience recording feedback. This could be evidenced with questionnaires or interviews. It is important that the reviewers completing the feedback are aware of what they are testing and the purpose of the product. There should be an opportunity for them to identify possible improvements. LO4 Be able to create websites –Style Sheets Cascade style sheets (CSS) are the internet’s shortcut to website creation and the life blood of consistent page design and website content creation. These are the blueprints and allow the user to make one change to a page and have that change affect every other linked page. This can be something minor like a background colour change to something more major like the inclusion of accessibility options, login scripting and java inclusion. The common terminology of CSS is similar to HTML code but programs like Dreamweaver take over the coding and allow the user to select from menus. internal style sheet (inside the <head> tag) external style sheet inline style sheet (inside (X)HTML element) style sheet syntax applying style sheets class and ID style sheet problems browser compatibility netscape and style sheets tags for style sheets. P5.1 – Task 01 - Using examples, explain the purpose and function of CSS coding and the benefits to website designers of CSS inclusion. LO4 Be able to create websites – Creating the Style Sheet Now the website has been accepted by the client, you are to make the site using a stylesheet that includes all the standard house style elements specified in LO3. Using a selected web design page you need to evidence the creation of your site to suit your clients needs. The created website should be visually appealing, easy to use, with an appropriate level of content but not overloaded, with the three interactive elements planned, and be suitable for purpose and target audience as identified. P5.2 – Task 02 – Evidence the creation the CSS stylesheet for your website that includes all the elements specified on your House style document. Font, size and Colour Logo Inclusion Navigation Buttons Background Colour Site map Accessibility Features External Linking Colours Saving and attaching the CSS M3.1 – Task 03 – Evidence setting up and including the database login options for the user accounts on the Stylesheet. LO4 - Be able to create websites – Website Content Using the Style sheet created in Task 1, you need to evidence inserting the website content into the appropriate pages. This needs to include the three additional interactive elements. Videos will need to be converted to an appropriate format, maps included as links and any sound files need to be embedded into the website content. There needs to be an appropriate amount of content on each page to justify its professionalism and reflect the business practice of the company. The completed website should be visually appealing, easy to use, with an appropriate level of content but not overloaded, with the three interactive elements planned, and be suitable for purpose and target audience as identified. The site should reflect the page plans as much as possible. P5.3 – Task o4 – Evidence converting and inserting an appropriate range of multimedia content onto your pages. Links – Internal or External (using different types of Media) Images Range of Media – Flash, Flash Buttons, Rollover Images, Hotspots, Sound, Video etc... Marquee Functionality – Forms – including Mailto, Buttons, Labels, Drop Down Menu, etc... JavaScript Any extra feature you wish to include eg Date/Anchors, etc...) Pass – basic competence in producing website (template) that contains text, images and additional components Merit – produce website that contains text with appropriate styles applied for headings and body text, images and a range of additional components using either a template and CSS LO4 - Be able to create websites – Website Iterative Testing During the production process you will implement improvements to the interactive website in order to meet the needs of the client. The improvements must be implemented by using CSS (Cascade Styles Sheets) which may be internal, external or imported. The improvements should be implemented for at least two different aspects of the site. Use the template provided. M3.2 – Task 05 - Create a production test table that test at least 6 production elements. These need to be evidenced during the process and changes made should be made to the CSS and evidenced on the active site. LO4 - Be able to create websites – Website Iterative Testing Remember you need to test every page Remember to test a variety of different areas Note - Try to avoid REPITITION vary your tests for each page. Test What am I testing What do I expect to happen What did happen Action taken Evidence Content 1 - Check the Ford fiesta Rollover image. When I move the mouse over the image will change from the exterior of a Fiesta to the interior. The image changed from the exterior of a Fiesta to the interior. None See image 1 and 2 Links 1 - Link to http:www.ford.co.uk target _blank 2 - ... When I click on the hyperlink it will open the UK’s Ford website in a new window. The website opened within the same window. Changes the target to read _blank. See image 3 before the link was changed then image 4 Appropriate use of textual content 1 - Check the sales page for content specific material. Each page has appropriate content suitable for the target audience. When I checked each page for appropriate content I found that it was suitable for the target audience. None See image 5 2 - Check the feedback page for content specific material. Scripts Accessibility Other area Pass – All pages with some tests Merit – All pages are tested. • Detailed test table covers all the main areas, tests are appropriate. • Screenshots of before and after corrections – showing code or screenshots. LO4 - Be able to create websites – Website Suitability P5.4 - Task 06 – Check your web pages for errors and use a spell check Read through your websites to ensure there are no errors Use spell check work to assist you, provide evidence that you have used this for each page Pass – There may be errors in the text, but meaning will be clear Merit – Meaning will be clear but there may be some errors P5.5 - Task 07 – Evidence the completion of your web pages within a browser You may need to scale the pages so that they be fully viewed in a user friendly manner. Annotate these outlining content used. LO4 - Be able to create websites – Website Summative Testing Internally with the website completed the Client would like it tested to make sure it is stable before allowing a target audience to experience the site. You will need to fully test their completed website using a detailed test plan/table testing each page of the website. Appropriate tests should be included that cover the functionality, readability, usability and accessibility of the website with at least eight appropriate tests, two from each section. This will be included with the Iterative testing in support of their final testing. Testing Functionality (e.g. working internal, external links, content loads/works) Usability (clear navigation, viewable in different browsers, easy to use) Readability (proof read, spell checked, text readable with background colour) Accessibility (e.g. ALT tags included, additional features function) Other tests could include Review against original specification W3C Compliance. Browser Compatibility Language options LO4 - Be able to create websites – Website Summative Testing Remember you need to test every page Remember to test a variety of different areas Note - Try to avoid using the word WORKS in the testing phase.. Test What am I testing Internal I am testing that linking the internal system linking system of each page is consistent with the house style and all links allow the user to navigate to each page What do I expect to happen When reading the CSS code that each page is based on, the linking systems should be consistent with relative linking paths What did happen Action taken When reading the None CSS code that each page is based on, the linking systems was through relative paths. Evidence See image 1 and 2 Etc. D2.1 – Task 08 - Test the completed website using a detailed test plan/table testing each page of the website. Appropriate tests should be included that cover the functionality, readability, usability and accessibility of the website LO4 - Be able to create websites – Website Acceptance Testing Acceptance testing should be carried by the client and preferably the target audience recording feedback. This could be evidenced with questionnaires or interviews. It is important that the reviewers completing the feedback are aware of what they are testing and the purpose of the product. There should be an opportunity for them to identify possible improvements. Construct a questionnaire or survey with a mixture of open and closed questions to get feedback from a peer. Ensure you cover a range of elements and refer to specific areas functional and aesthetic areas of your website. This could be typed up or written (don’t lose the originals!) D2.2 – Task 09 - Conduct and collect Peer feedback with the aim of identifying good and bad features and identifying possible improvements. LO4 - Be able to create websites – Website Improvements D2.3 – Task 10 - Using this feedback and through testing, suggest potential improvements which will benefit the target audience and business needs. Identify how these improvements could be carried out. Website appeal Compatibility Age and audience understanding Inclusion and appropriateness of content Etc. Assessment Tasks P5.1 – Task 01 - Using examples, explain the purpose and function of CSS coding and the benefits to website designers of CSS inclusion. P5.2 – Task 02 – Evidence the creation the CSS stylesheet for your website that includes all the elements specified on your House style document. M3.1 – Task 03 – Evidence setting up and including the database login options for the user accounts on the Stylesheet. P5.3 – Task o4 – Evidence converting and inserting an appropriate range of multimedia content onto your pages. M3.2 – Task 05 - Create a production test table that test at least 6 production elements. These need to be evidenced during the process and changes made should be made to the CSS and evidenced on the active site. P5.4 - Task 06 – Check your web pages for errors and use a spell check P5.5 - Task 07 – Evidence the completion of your web pages within a browser D2.1 – Task 08 - Test the completed website using a detailed test plan/table testing each page of the website. Appropriate tests should be included that cover the functionality, readability, usability and accessibility of the website D2.2 – Task 09 - Conduct and collect Peer feedback with the aim of identifying good and bad features and identifying possible improvements. D2.3 – Task 10 - Using this feedback and through testing, suggest potential improvements which will benefit the target audience and business needs. Identify how these improvements could be carried out.