Transcript Unit 12 - LO4

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.