CERTIFICATE/DIPLOMA IN IT · client-side scripting, considering the pros and cons of its use so they can understand why websites choose to use scripting. Tutors could hold group discussions,

OCR LEVEL 3 CAMBRIDGE TECHNICALCERTIFICATE/DIPLOMA IN

IT

CLIENT SIDE CUSTOMISATION OF WEB PAGESY/601/7660

LEVEL 3 UNIT 24

GUIDED LEARNING HOURS: 60

UNIT CREDIT VALUE: 10

TECHNICALSCambridge

2www.ocr.org.uk

CLIENT SIDE CUSTOMISATION OF WEB PAGESY/601/7660

LEVEL 3

AIM AND PURPOSE OF THE UNIT

The aim of the unit is to provide learners with an understanding of the use of CSS (cascading style sheets) and a specific scripting language to create an intuitive and innovative, interactive website. Learners will be able to combine these skills to design, create and test their own micro-site. Previous knowledge of HTML would be beneficial before undertaking this unit but not essential. The knowledge and skills learnt from this unit will be useful to anyone looking to move into web design or software development as a career.

3

Client side customisation of web pages Level 3 Unit 24

ASSESSMENT AND GRADING CRITERIA

Learning Outcome (LO)

The learner will:

Pass

The assessment criteria are the pass requirements for this unit.

The learner can:

Merit

To achieve a merit the evidence must show that, in addition to the pass criteria, the learner is able to:

Distinction

To achieve a distinction the evidence must show that, in addition to the pass and merit criteria, the learner is able to:

1 Understand the fundamentals of Cascading Style Sheets (CSS)

P1 explain how HTML files access CSS

P2 explain the features of the box model for CSS

M1 discuss benefits of incorporating CSS in web design

2 Understand the fundamentals of scripting languages

P3 explain the fundamentals of a scripting language

M2 discuss effectiveness of using client-side scripting to improve functionality

3 Be able to control the layout of web pages using CSS

P4 design web pages using CSS to control layout

D1 justify the web design produced using CSS to control layout

4 Be able to create interactive web pages

P5 create interactive web pages using CSS and a scripting language

D2 enhance usability of an interactive website with CSS and a scripting language

P6 test interactive web pages

M3 modify interactive web pages based on user feedback

4www.ocr.org.uk

TEACHING CONTENTThe unit content describes what has to be taught to ensure that learners are able to access the highest grade.

Anything which follows an i.e. details what must be taught as part of that area of content.

Anything which follows an e.g. is illustrative, it should be noted that where e.g. is used, learners must know and be able to apply relevant examples to their work though these do not need to be the same ones specified in the unit content.

LO1 Understand the fundamentals of Cascading Style Sheets (CSS)

• methods of accessing CSS - external style sheet - internal style sheet - inline style - other, (e.g. User Style Sheet).

• uses of CSS - layout - styles, (e.g. text, background colours).

• box model - box - margin - border - padding - content - properties, (e.g. width, height).

• benefits of using CSS - easy to make changes to multiple pages, keep

consistency on each page - reduced file size and improved loading time - improved accessibility, reduces need for JavaScript - allows more formatting options to HTML.

LO2 Understand the fundamentals of scripting languages

• client side scripting - languages, (e.g. JavaScript, VBScript).

• scripting language fundamentals - uses, (e.g. dynamic and interactive content, form

validation, browser detection, execute events, create cookies)

- syntax - variables - operators - objects and properties, (e.g. strings, arrays, date) - methods, (e.g. open, write) - conditional statements, (e.g. if, if…else, if…else if…else,

switch) - message boxes, (e.g. alert, prompt, confirm)

- event handlers, (e.g. mouse events, keyboard events, onFocus, onBlur, onLoad, onUnload)

- functions - loops, (e.g. for, while, do…while, for…in) - forms, (e.g. creating, validating).

• pros and cons of client-side scripting - pros

• allows dynamic and interactive content (e.g. form validation, menus)

• faster execution than server-side scripts• improved accessibility, (e.g. more user control).

- cons• compatibility with browsers, (e.g. requires a

substitute for browsers that do not support scripts)• security.

LO3 Be able to control the layout of web pages using CSS

• website specification - client requirements, (e.g. functionality, usability,

accessibility) - user needs, (e.g. user friendly navigation, appropriate

content, ease of use, interactive content) - purpose, (e.g. e-commerce, education, promotional).

• design tools - navigation map - layouts, (e.g. page plans, storyboards) - flow charts, (e.g. scripting functions).

• web page layout - navigation method, (e.g. navigation bar, navigation

menu, hyperlinks, image links) - CSS (Cascading Style Sheets)

• layout (div tags, box model)• styles (text styles and decoration, links, colours).

- justify web design• does it meet the specification?• are there too many different text styles?• is the colour scheme appropriate?• do the links work appropriately?• ease of use.

5

Client side customisation of web pages Level 3 Unit 24

• web page content - content, (e.g. text, images, animation, sound, video) - interactive features, (e.g. forms, rollover images,

message boxes, onClick) - dynamic content, (e.g. browser detection, cookies,

onLoad).

LO4 Be able to create interactive web pages

• create interactive web pages - methods, (e.g. web authoring software, Notepad) - creation, (e.g. layout, CSS styles) - features, (e.g. navigation, rollovers, links, events).

• usability features - usability, (e.g. form validation, cookies, browser

detection, message boxes, browser compatibility scripts).

• testing - creating a test plan/table - functionality, (e.g. working internal, external links,

content and scripts loads/works) - usability, (e.g. viewable in different browsers, ease of

use) - readability, (e.g. proof read, spell checked, clear layout,

text readable with background colour).

• user testing - prepare clear feedback recording documentation - reviewers, (e.g. self, audience) - gather feedback, (e.g. questioning, observation,

feedback forms) - analyse feedback, (e.g. to identify flaws, improve

scripts/website).

6www.ocr.org.uk

DELIVERY GUIDANCE

It should be noted that there is a lot of content in this unit and sufficient time needs to be allocated for its delivery. It might also be beneficial for learners to use Notepad for the first few examples if they have never coded before. This could cover looking at the most common tags to see how web pages are laid out (<html>, <head><title><body>) and experimenting with adding text and using styling tags (<h1>,<strong>,<i>,<ol>,<ul> and <p>). This will allow them to see how making small changes in code can affect a web page. It could be taught through hand outs or tutor led demonstration with user participation. Learners could then later move onto a program such as Dreamweaver. Previous knowledge of HTML would be beneficial before undertaking this unit but not essential.

Understand the fundamentals of Cascading Style Sheets (CSS)

To enable learners to create their own interactive website using Cascading Style Sheets, it is necessary for them to understand the four key methods for linking CSS to HTML code (external, internal, inline, user). They should be made aware of the order that the methods are used, and which ones take priority over the others (the methods that apply to the whole website and those that apply to individual pages of a website). An appropriate way to deliver this would be tutor led demonstration with learner participation, showing examples and then using exercises to practice implementation. The uses of CSS should be explained and included in the exercises so that learners can see what happens when they change settings e.g. background colour, formatting text etc. Learners, working in small groups or individually, could carry out research into websites that use CSS and those that do not, to provide ideas and better understanding of the differences between them. Tutors could provide a list of appropriate websites and provide a set of questions to answer. To consolidate the reasons for using CSS in a website, a class discussion could bring together research findings, highlighting the benefits of its use.

Leading on from the uses of CSS is the introduction of the box model layout. The box model should be explained and the different attributes in the unit content demonstrated through tutor led demonstration with learner participation. Learners will need to understand how this works as it will form the basis of a number of criteria later on in this unit. Exercises will help them to comprehend what happens when slight changes are made in the code.

Understand the fundamentals of scripting languages

The client-side scripting language that can be used is optional, appropriate choices might be JavaScript or VBScript. Tutors should make this decision before delivering the unit. Each of the scripting language fundamentals listed in the teaching content should be covered for the chosen scripting language. The delivery of the practical work could take the same form as the CSS delivery; tutor led demonstration with learner participation, followed by practice exercises, which will involve learners attempting each of the techniques on a web page or individual web pages.

Learners should be made aware of the reasons for using client-side scripting, considering the pros and cons of its use so they can understand why websites choose to use scripting. Tutors could hold group discussions, drawing on learners own experience of client-side scripts through their practice exercises, and real-life examples they may have experienced.

Be able to control the layout of web pages using CSS

Further tutor led demonstrations and exercises using a spec given out by the tutor will help to build up layout styles such as spacing, fonts, setting up background images, navigation, pseudo-classes etc. It will enable learners to create realistic and more accurate plans for their interactive website when the assessment stage is reached.

Learners should be taught appropriate methods for designing their site such as navigation maps, storyboards and flow charts. Tutor led examples followed by practice exercises would help learners to break down scripts into appropriate stages so they can be put into flow charts. It would be appropriate to practice the other design methods on an existing website. For example, working out how the website has linked the pages together (navigation map), how they have set out the content on the page (storyboards) and considering processes carried out by users (flow chart).

It is important that learners learn how to justify their designs. They could practice this by accessing a range of web sites and considering the following for each of the sites:

• count and write down how many typefaces and styles the site uses

• recognise the size differences between the type elements

• ask yourself why they chose those specific typefaces, (e.g. Serif generally is more authoritative and old-fashioned, while sans-serif has a more contemporary flavour)

7

Client side customisation of web pages Level 3 Unit 24

• identify “decorative” or superfluous assets that enhance the design

• identify “decorative” or superfluous assets that hinder the design

• recognize the colour palette — is it consistent?

• is there a theme or metaphor?

• go through the layout and number each element in the order of importance in the layout. After, see if the way it’s laid out or emphasised is parallel to the priority of information

• ask “Who is the audience of this layout? Is it appropriate? Why or why not?”

• ask “Is this relevant?”

They could then have a group discussion on their thoughts and ideas about the web sites and what they need to consider when producing their own.

Be able to create interactive web pages

Learners should be at a stage where they would be able to create a practice site using CSS to control styles and layout with a scripting language for functionality. A spec could be provided by the tutor with a number of requirements testing their ability to use CSS and the chosen scripting language. Tutors should ensure that learners have the appropriate knowledge to do so; revision exercises could help check understanding.

Learners should be taught appropriate testing techniques through tutor led demonstrations and exercises, covering areas such as cross browser checking, layout matching designs and checking interactivity functions correctly. A test plan/table would be the most suitable way of doing this, examples of completed test plans could be demonstrated and discussed. Test plans should consider:

• functionality, (e.g. working internal, external links, content and scripts loads/works)

• usability, (viewable in different browsers, easy to use)

• readability, (proof read, spell checked, clear layout, text readable with background colour)

Appropriate methods of gaining feedback should be discussed with learners researching the most effective types of questions and the best format to present them in to ensure they gather the most useful feedback from users. This could be achieved by looking at examples of feedback forms that show a good range of open and closed questions.

8www.ocr.org.uk

SUGGESTED ASSESSMENT SCENARIOS AND TASK PLUS GUIDANCE ON ASSESSING THE SUGGESTED TASKS

Assessment Criteria P1, P2, M1

P1, P2 and M1 could be evidenced by the use of a report or a presentation supported by tutor observation and recorded evidence. Alternatively learners could create leaflets, but consideration should be given to the amount of information that will be included.

For P1, learners must explain how HTML files can access CSS code using each of the methods listed in the teaching content. This must be supported by showing their examples of the code, discussing when each method should be used.

For P2, learners will explain the features of the box model for CSS. This must be supported by examples to illustrate their understanding.

For merit criterion M1, learners will discuss the benefits of incorporating CSS in web design. Appropriate examples from professional sites must be used to support comments. To aid explanations, comparisons can be made to websites that do not incorporate CSS.

Assessment Criteria P3, M2

P3 and M2 could be evidenced by the use of a report or a presentation supported by tutor observation and recorded evidence.

For P3, learners should explain a range (a minimum of three) of the scripting language fundamentals listed in the teaching content. Examples must be provided with supporting annotations. Examples could be in the form of a collection of web pages or as screen shots of each of the techniques with supporting annotations and explanations.

For merit criterion M2 learners will discuss the effectiveness of using client-side scripting, considering pros and cons, and linking to how it can help websites improve their functionality.

Assessment Criteria P4, D1

A detailed scenario could be introduced to allow learners to identify a purpose and audience for the web pages they will create using suggestions below. The main focus of the assessment will not be the detailed content but the use of CSS for styling and the scripting language to perform functions. These should be checked by the tutor before moving on to their creation to ensure the designs are feasible.

For P4, the learner must design at least five web pages. Designs must make use of each of the design tools listed in the teaching content. A range of interactive elements, must be incorporated and highlighted in the designs.

For distinction criterion D1, learners must justify the web design produced using CSS to control layout. The evidence presented will be an extension of the web pages they created using CSS to control layout for P4. The justification could be in the format of a presentation, annotated copies of the web pages, report or audio/video discussion. Learners should consider the items listed in the teaching content under the heading justify web design.

Assessment Criteria P5,P6,M3,D2

P5 and D2 could be evidenced through the final web pages. It would be appropriate to also include screenshots of each web page with annotations of where the CSS and scripting language have been used.

For P5, learners will create at least five web pages, which could be in the form of a micro-site. It should demonstrate the inclusion of CSS to control layout and styles. There should be a range of interactive functions included from those listed in the teaching content, created using the chosen scripting language. Additional evidence of CSS and scripting language features included must be evidenced through screen captures with supporting annotations.

The distinction criterion D2 could be an extension of P5, the interactive web site that has been created for P5 will show an effective use of CSS. Scripting language features chosen should be appropriate to the scenario, enhancing the user experience, rather than distracting or annoying the user. This could be evidenced through screen captures with supporting annotations.

For P6, learners should test their interactive web pages using a detailed test plan/table testing for each web page. Appropriate tests should be carried out on the web pages covering each of the aspects listing in the teaching content. 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.

For merit criterion M3, appropriate modifications should be made to the website following feedback; evidence can take the form of before and after screenshots supported with annotations and the completed feedback forms.

9

Client side customisation of web pages Level 3 Unit 24

SUGGESTED SCENARIOS

• A film club would like a website which provides reviews of films.

• A sports centre would like a website which gives details about them and allows booking inquiries

• A local retailer would like a website with information on offers and product information

RESOURCES

Centre policies may restrict access to some websites which may have games, such as educational or promotional sites.

You would need:

• Dedicated web creation software (e.g. Dreamweaver)

• Other (Internet, Web Server).

10www.ocr.org.uk

11

Client side customisation of web pages Level 3 Unit 24

MAPPING WITHIN THE QUALIFICATION TO THE OTHER UNITS

Unit 12: Website production

LINKS TO NOS

4.6 Human Computer Interaction/Interface (HCI) Design

5.2 Software Development

CONTACT USStaff at the OCR Customer Contact Centre are available to take your call between 8am and 5.30pm, Monday to Friday. We’re always delighted to answer questions and give advice.

Telephone 02476 851509Email [email protected]