Introduction to Unit.

Unit 20: Client Side Customisation of Web Pages

Unit code: Y/601/7660

QCF Level 3: BTEC National

Credit value: 10

Guided learning hours: 60

Aim and purpose

The aim of this unit is to ensure learners understand the fundamentals of cascading style sheets and scripting languages and are able to develop the skills required to implement web pages using these tools.

Unit introduction

There is an increasing expectation that website design will adhere to web standards and that websites will consist of sophisticated, interactive web pages. This requires website designers and creators to be familiar with standard tools, techniques and languages in order to create such websites. In particular, web standards are beginning to expect mark-up to be done in XHTML, layout to be controlled by cascading style sheets (CSS) and client side interactivity by a scripting language such as JavaScript or VBScript. XHTML is a stricter version of HTML and adheres to XML standards. CSS and JavaScript or VBScript are powerful scripting languages used to create sophisticated layouts and interactivity on web pages, respectively.

A key feature of CSS Java/VBScript is that the script (code) is stored on the clients’ system rather than on host server systems. As they do not need to interact with a web server, this can save resources and network bandwidth. CSS are capable of creating complex, sophisticated layouts which are easy to maintain and update across the whole website or individual pages. Java/VBScript is able to validate information that users enter into a form before it is sent to a web server for processing. This specialist unit is an introduction to the creation of web pages with some compliance with web standards.

Layout will, therefore, be controlled by CSS, and interactivity controlled by a client side scripting language such as JavaScript or VBScript. Learners will develop an understanding of the fundamental characteristics of CSS and a chosen scripting language. Learners will develop web pages with sophisticated layouts in which calculations can be performed by combining the two tools.

Learning outcomes

On completion of this unit a learner should:

1 Understand the fundamentals of cascading style sheets (CSS)

2 Understand the fundamentals of scripting languages

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

4 Be able to create interactive web pages.

Describe the difference between a designer and a developer.
Research and find out what skills are needed when applying for these types of jobs.
Take a screenshot of three websites' home pages and print them out. Label them in different colours to show which parts are the responsibility of the designer, which are of the developer and which are both. What does this tell you about the two roles?
 

The art of design - Consider the Typography and iconography that is used in and on a webpage.

How to create your own web server on a USB stick

The following site details how you can create a portable web server on your USB, please read carefully and make any backups on your USB stick. I cannot be held liable if you loose any data following this tutorial.

USB Webserver

Characteristics of CSS: CSS frameworks; box model eg width, margins, padding, border, content area,

There are a number of CSS frameworks that are available today, these enable for fast and rapid development of sites using a set of pre-set key words that have associated styling. the list below identifies the most common.

• Twitter Bootstrap.
• Foundation 3.
• Skeleton.
• YAML 4.
• Tuktuk. 
• Gumby.
• Kube.
• Groundwork.

Investigate these frameworks and try some of the templates that have been made available, you will be able to download these to your PC's for free, some of the packages offer Minified versions of scripts, this is in an effort to reduce the footprint of the file, thus reducing the file size which enables faster loading.

inline, block; selectors eg type, class, ID; accessing CSS from HTML eg in-line, embedded, external

What is inline?

What is block?

Selectors

• ID
• class

CSS access

• Inline
• External
• embedded 

CSS Implementation

Box Model

1.  Describe the four parts of the box model.
2. Describe the three parts of selectors.

CSS & It's Implimentation

Now that you have seen the implementation options in our Prezi, reproduce this on your computer using an editor of your choice, please try not to use Dreamweaver.

Create each example of how to use CSS in HTML.

Print each example and annotate them to show how the CSS links to the HTML.

Compare the two methods of accessing external CSS.

Implementation of blinking text in CSS and Javascript

Mobile Responsive Web!

What is it, Why and when

What can you view a website on?

Create a simple one-page web page that is responsive to the window that it is viewed in.

Helpful people:Chris Coyier

In 1994, Berners-Lee founded the World Wide Web Consortium at the Laboratory of Computer Science (LCS) at the Massachusetts Institute of Technology in Boston.

http://prezi.com/mjtjyrrc8izi/unit-10-client-side-customisation-of-web-pages-lesson-01/

Key terms

House style- a design theme carried throughout a website or even a business, eg letters, faxes, emails, web pages, etc.

CSS- stands for cascading style sheets. lt is a form of web language which standardises the layout throughout a website.

Style- a group of formatting decisions to be applied together as defined in the CSS For example, to have text display as red and centred could be a style.

Tags- elements of web page code, either in HTML or CSS. Usually they are written between angle brackets, < and >,to indicate that they are code words.

Head -the head of the web page, the part of the code where all the styling and other invisible parts are written.

Body- the part of the code where all the elements that are visible on the web page are coded.

Pixel perfect- a term used in the design field

Selector- similar to the title of the style.

Property- what is being changed.

Value- the amount the property is being changed.

Clarifying Learning Objectives - Using coloured discs and/or peer explanation, check to ensure that learners have understood the learning objectives.

LO 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 assess different implementation styles of CSS

Language of Maths

1.Read, write, order and compare numbers

2.Discuss negative numbers in practical contexts

3.Write out figures in words

Internet resources have been created to enable scaling of size for users with visual difficulties. 

Text reading using on screen readers, the inclusion of alternative text for images.

Respect and the Rule of Law. (Please refer to on screen popups)

PC's, Microsoft Office, Projector

Uses of CSS: uses eg background colour, background images, formatting text, borders, padding, heading 

“Design is the method of putting form and content together.” Paul Rand

Setting properties to elements in CSS is easy, however, a number of ways that you can do it can confuse people, let's take the humble addition of colour to an element, as you can see from the example below this can be achieved in a number of ways.

body {
    background-color: yellow;
}

h1 {
    background-color: #00ff00;
}

p {
    background-color: rgb(255,0,255);
}

Lets start with the first option, here we have declared that the colour shall be yellow!, this is a simple selection as it is only yellow, but let's consider the shade and hue of yellow that we want is it custod yellow or dandelion yellow, these are not recognised by browser compilers so we use another approach to this.

Hexadecimal colour codes, these use numbers that when used can offer a staggering 16,777,216  that is MASSIVE!! We use the hexadecimal numbering system that counts to 16 as in the grid below.

Many look at this and say well it's only 15, NO IT IS NOT! Why? we count zero as a value!

The final option for the colour coding is the use of the RBG scale. RGB uses the three primary colours used in on any visual display unit, Red, Green and Blue. These colours combined on a monitor can present 16,777,216 using an 8-bit channel. 

The three numerical fields within the brackets correspond to Red (values up to 255), Green (values up to 255),  Blue(values up to 255).

So having used the different implementations it can be that you use each of these to implement some style to an element.

background images,

A good source to use to demonstate this can be found on W3Schools using the following link. W3Schools Bacground Image using CSS

formatting text,

borders,

padding,

heading

What happens when you create the following?

Remember how we save the content that we create for the web must be lowercase, and the first page must always be called index

styles,

positioning elements,

creating columns.

Create each of these examples and make notes on how they affect the formatting.Try altering the values and make notes on how this alters the formatting.

CSS & It's Implimentation

Starting with Javascript

We shall begin with the creation of the simple point of adding text to a web page. In the code snippet below you will notice a familiar structure of HTML.

It all starts with the opening tag of script.

Nowadays the recommendation is that scripts are placed either externally or at the bottom of the source code, (as above) this is due to the loading times of some scripts impacting the load time of the page content.

Here is an example of External JS linking

Lecture 6 Java 5 Example
Lecture 7 Java 5 Example
Lecture 8 Java 5 Example
A Prompt box that reads the user input and outputs information based on the input

Using our CodeCademy games

Try creating your name using the following examples, It is like "etch a sketch"

Follow the leader. Using the HTML editor of your choice (preferably not Dreamweaver) follow the instructions of the creation of a simple DIV web page.

CAN YOU SPOT THE ERRORS?

Now that you have had some guidance to the creation of a simple template, use the websites of w3Schools and CSS-Tricks to extend your template. Remember to keep saving, and, CHECK YOUR CODE FOR MISTAKES!!

Time to explore, using your CodeCademy login navigate through to the Javascript area and work through the tutorials up to the Rock, Paper, Scissors example

Cool Projects in Java, HTML and CSS

In 1994, Berners Lee founded the World Wide Web Consortium at the Laboratory for Computer Science (LCS) at the Massachusetts Institute of Technology in Boston.

The information covered on this page covers the knowledge and understanding linked to the criterion in the table below.

Created with Padlet

CSS Box Model MTA Powerpoint

Box Model

Text Types

1. Descriptive language and features

(Discussion and analysis on features of descriptive text, read and analyse text, write examples of descriptive text)

2. Function of nouns and verbs within text

(Discuss and pick out nouns and verbs)

Just a Minute - At the end of the lesson teachers ask learners to summarise their learning. The comparison of these summaries against learning objectives informs planning.

One-Minute Verbal Assessment - The teacher asks learners to prepare and deliver a one minute verbal summary of a forthcoming or completed activity, session or topic.

LO 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 assess different implementation styles of CSS

Rounding and Estimating

1. Round numbers to the nearest 10, 100, 1000 to make approximate calculations

 (Discuss examples of rounding in everyday life, understand how to round numbers, pair work and peer assessment)

Percentages

1. Read, write, order and compare percentages

(Discuss examples of percentages in compression)

2. Calculate simple percentages

(Work out savings in file sizes)

https://www.tes.com/teaching-resource/challenge-toolkit-6063318

HTML 5 Walkthrough, with links to w3c Validators

ID's and Selectors

Targeting the different selectors in CSS. We have covered though our walkthroughs the two commonly used selector types.

The first is ID this refers to an entity that normally only occurs once. An example of such an entity is the "Wrapper" this should in theory only occur once.

The second is CLASS, this is an instance or entity that can occur more than once. For example the button of a navigation, each button should look the same, so it should be targeted using the same formating.

An em is a unit of measurement in typography. In CSS, it’s used as a measurement of the vertical space needed for any given letter in a font, therefore, if the font size is 16 pixels, the value of 1 em will equal 16 pixels.

Tables 

Create the following using your newly acquired skills and knowledge of tables. 

CSS and Fonts

The use of fonts in a website is one of the key areas to enable a successful image to be presented to a potential visitor or client. The font that you use on a site has the ability to make your site look like a prestigious site, or, make it look like a children's playbook (unless that is the targeted aim). There are a vast array of fonts and typography available to users and developers these days, how we access these and use them have changed with the introduction of CSS3.

Prior to the adoption of the CSS3 standard, developers would require users to download and install a font file onto their systems, this is now not the case. Users can access font files from the web server as if they were accessing a CSS file, below is the suggested implementation of this.

Operator and variables in javascript

comparison operators

In java we use a number of symbols to enable us to check and analyse data, the table below provides basic detail to what they are and their result. 

See the Pen VvMBGE by james farrington (@jamesfarrington) on CodePen.

Follow the leader. Using the HTML editor of your choice (preferably not dreamweaver) follow the instuctions of the creation of a simple DIV web page.

Now that you have had some guidance to the creation of a simple template, use the websites of w3Schools and CSS-Tricks to extend your template. Remember to keep saving, and, CHECK YOUR CODE FOR MISTAKES!!

Our Class developed Website so far

Remember that this is responsive, to view it fully use the Codepen link

Quiz time!
Scan the QR code or it click hereto participate in the quiz.

How to create a simple rollover

Simple rollover in Javascript

Java Script Intro

Java Script Lect 2

Java Script Lect 3

Noun - a word which names an object

One-Minute Verbal Assessment - The teacher asks learners to prepare and deliver a one minute verbal summary of a forthcoming or completed activity, session or topic.

LO2 Understand the fundamentals of scripting languages

P3 explain the fundamentals of a scripting language

M2 discuss how a scripting language can improve functionality

D1 explore how web pages using scripts are implemented in different browsers

Using numbers: Written or mental methods, using a calculator, rounding and estimating, problem solving

https://www.tes.com/teaching-resource/challenge-toolkit-6063318

Uses of a scripting language: eg alerts, confirming choices, prompting the user, redirecting the user,

Sometimes it a page needs to redirect a user to an alternative page or site, the below code is an example of how Javascript undertakes this action.

Here is a simple alert box that prompts the user to click ok

Here is a Javascript that writes an output to a "p" tag

Javascript popup box with a prompt for user input.

browser detection, creating rollovers, checking/validating input, handling forms, maintaining cookies

Browser Detection can be done using the following code,

Checking a users input,

Describe how scripting languages can be embedded into HTML. JavaScript is object oriented. Explain what that means. VBScript is event-driven. Explain what that means.

As covered in class, Cookies are useful (and delicious) things. Using your research skills find out more information on these tools, include;
•Why that they are used
•where they are used
• What risks there are
• What legal implications need to be considered

Now that you have had some guidance to the creation of a simple template, use the websites of w3Schools and CSS-Tricks to extend your template. Remember to keep saving, and, CHECK YOUR CODE FOR MISTAKES!!

Characteristics of scripting languages:

nature of language eg object-oriented, event-driven; objects; methods; handling events; hiding scripts;
The use of scripting languages in web development is widespread, with common languages such as Javascript, PHP, Java, AJAX, Perl, and CGI.

• Javascript
• PHP - developed by Rasmus Lerdorf in 1994 as Personal Home Page. It was released in 1995 as Personal Home Page Tools. This was a parser which interpreted files written in the simplified programming language of PHP.
• Java -
• AJAX -
• Perl -
• CGI -

These languages have a number of benefits to users and web pages, commonly referred to as object-oriented scripting. The use of object orientation enables web developers to make use of coding that has been created before and are stored in libraries to enable features and additionally to user code.
Object-oriented scripting uses objects that consist of methods that can be triggered to run based on a user's actions.
There are a number of potential security issues to consider when using these scripting languages,

• Reading -
• Writing -
• Client Files -
• Opening and Closing of user windows -
• Reading Information -
• Including Scripting inside HTML -

https://docs.microsoft.com/en-us/scripting/javascript/javascript-fundamentals

"Design communicates on every level. It tells you where you are, cues you to what you can do, and facilitates the doing". Jeffrey Zeldman, http://www.adobe.com/designcenter/dialogbox/stylevsdesign/ 

Why use scripting?

Uses of a scripting language enable websites to have added dynamic ability's these include things like,

Alerts that allow users to understand that a button has been clicked, or an item in a e-commerce site has been added to a shopping cart, or the deleation of a file in an online storage area.

Confirming choices,

prompting the user,

redirecting the user,

Other features that scripts like Javascript can allow are the use of browser detection this is a key tool in a developers toolbox as this can enable different scripts to be triggered and supported dependant on the browser being used by the client. Developers can create dynamic buttons for the users by making use of rollovers a feature that changes an image if a users cursor hovers over it.

Scripts are often used to take away the load from a web server, this could be things like checking/validating input, this is common of users entering email addresses for username and form data, rather than sending the information to the server to check for the inclusion of @ signs and .com's and .co.uk's Javascript can run on the client machine to check this nonsensitive data input.

Scripts are also used to maintain cookies, these are small text files that sit on the client side that include information about websites and user information so that when a user goes back on a site they can carry on with what they are doing, an example of this would be a shopping cart that stores information to the contents placed in the cart for a couple of days.

Scripting language constructs: syntax eg dot operator, values, variables, operators, assignment, comparisons; loops eg for, for/in, do/while; decision making eg if, if/else, switch/case; functions (calling, parameter passing); handling events eg onfocus, onload, onblur, onmouseover; methods eg write(), click(), open(), selected(); properties eg name, width, ID, value

As covered in class, Cookies are useful (and delicious) things. Using your research skills find out more information on these tools, include;
•Why that they are used
•where they are used
• What risks there are
• What legal implications need to be considered

Now that you have had some guidance to the creation of a simple template, use the websites of w3Schools and CSS-Tricks to extend your template. Remember to keep saving, and, CHECK YOUR CODE FOR MISTAKES!!

Rollover buttons - work as normal buttons on a web page, but when the mouse hovers over them, the image or text changes.

Cookies- packets of data exchanged between the client computer and web server for authentication or personalisation of a website.

Syntax- the grammar of a programming language, prescribing the order in which words can be used. Variable - used to store data and is given a name, eg the data 'Fred' might be stored in variable 'firstname'. Array- a collection of variables that have a single name.

Operator- a mathematical symbol used in a calculation or comparison.

Loop - a piece of code which is executed over and over again until it fulfils a preset criterion.

Text Types

1. Descriptive language and features

(Discussion and analysis on features of descriptive text, read and analyse text, write examples of descriptive text)

2. Function of nouns and verbs within text

(Discuss and pick out nouns and verbs)

Learning Capture - Teachers allocate time at the end of the session for the group to write down what they think they have learned. The information shared helps the teacher to see which content he may need to revisit and so shapes future planning.

LO2 Understand the fundamentals of scripting languages

P3 explain the fundamentals of a scripting language

M2 discuss how a scripting language can improve functionality

D1 explore how web pages using scripts are implemented in different browsers

Using numbers: Written or mental methods, using a calculator, rounding and estimating, problem-solving

https://www.tes.com/teaching-resource/challenge-toolkit-6063318

Characteristics of scripting languages: nature of language eg object oriented, event driven; objects;

methods; handling events; hiding scripts; security issues eg reading, writing, client files, opening/closing

Event Handlers 

Event handlers are functions that enable events to be executed. An event handler would be triggered when the actual event is performed, e.g if a user clicks a button, the event handler ‘onClick’ would be triggered and would then allow certain code to be executed which is related to the event, i.e an alert box would appear after the button (onclick) has been clicked by the user.

Hidden and Hiding Scripts

 Older browsers may not be compatible with JavaScript and cannot recognise the scripting language when this happens it is likely to cause errors in the web browser, this can be avoided by including the following code 
 

Older web browsers would be able to read the code and successfully ignore everything if not compatible with it, newer browsers will ignore the compatibility tags and just read the script tags, meaning the JavaScript language would be able to be read successfully. 

user windows, reading information; including scripts inside HTML

1. Getting Started with Programming 1 - 11

Understand what JavaScript is and what its used for

• Understand and create comments

• Demonstrate basic mathematical operations

• Understand and create confirm and prompt dialogs

• Understand data types in JavaScript: strings, numbers and Booleans

L1 programming AL

L1 algorithms AL

L2 data.

Our Class developed Website so far

See the Pen VvMBGE by james farrington (@jamesfarrington) on CodePen.

Follow the leader. Using the HTML editor of your choice (preferably not Dreamweaver) follow the instructions of the creation of a simple DIV web page.

Now that you have had some guidance to the creation of a simple template, use the websites of w3Schools and CSS-Tricks to extend your template. Remember to keep saving, and, CHECK YOUR CODE FOR MISTAKES!!

MTA Powerpoint 8 Javascripts

Parenthesis - a word, clause or even sentence which is inserted into a sentence to which it does not grammatically belong

Just a Minute - At the end of the lesson teachers ask learners to summarise their learning. The comparison of these summaries against learning objectives informs planning.

LO2 Understand the fundamentals of scripting languages

P3 explain the fundamentals of a scripting language

M2 discuss how a scripting language can improve functionality

D1 explore how web pages using scripts are implemented in different browsers

Using Numbers: Counting, Place value, adding and subtracting, multiplying and dividing.

1.  Describe how a variable is defined and obtains an initial value.
2. Create syntactically correct scripts to:
   1. add two numbers together
   2.  multiply two numbers together
   3. check if an amount is greater than the other
   4. check if two amounts are equal.

Code Academy - Exercise 1 - 11

http://www.codecademy.com/en/skills/uk-quizzes/topics/uk-javascript-basics-1/javascript-getting-started-with-programming-1

Code Walkthrough, HTML, CSS and media queries

Uses of a scripting language:

eg alerts,

confirming choices,

prompting the user,

redirecting the user,

browser detection, 

At times it may be essential to determine what browser the user is running, this could be down to compatibility or to allow for elements to be run in the best browser for the job to enable the user experience to be better. The below script shows the simplicity of the Javascript function required to undertake such a check and to return a value to the user.

Create Rollovers

checking/validating input,

handling forms,

maintaining cookies

Call - to access a function from wherever it is stored and execute it.

Parameter - a value passed to or from a function to use in its execution.

One-Minute Verbal Assessment - The teacher asks learners to prepare and deliver a one minute verbal summary of a forthcoming or completed activity, session or topic.0

LO 2 Understand the fundamentals of scripting languages

P3 explain the fundamentals of a scripting language

M2 discuss how a scripting language can improve functionality

D1 explore how web pages using scripts are implemented in different browsers

Using numbers: Written or mental methods, using a calculator, rounding and estimating, problem solving
 

1. Create each loop example.
2. Print each script and annotate to explain how it works.

https://www.tes.com/teaching-resource/challenge-toolkit-6063318

Let's look at our created code, compare your code against ours! A great to use is Diffchecker 

Implement script:

We will follow further examples of Javascript's. using the examples that we previously went over in the past weeks we will now look at deeper and more involved scripts. However, as part of a recap, we shall go over these in a step by step process.

What do we understand so far?

appropriate objects eg properties, methods;

From the past examples and tutorials we have covered the implementation of scripts but at times we have not fully understood the process or actions associated to them here we will revisit these and contextualise them to specific examples that will enable better understanding and clarification of these objects.

STRING'S - Possibly the most used and most recognisable is the humble string. Strings are able to store a set of characters, the most obvious would be something like a name.  Within Javascripts strings can be inside of single and double quotation marks.

The code pen below shows this in operation.

It is also at this point worth noting that these are also declared as variables with the name of sweetname.

STRINGS

Strings can have set properties and methods which allow for further operations to be done and used.

The below example demonstrates the PROPERTY of string length, this will read the string and count its length in characters and then output its value into a variable that is then called and output to the webpage by getting the p tag to insert the value inside. 

Numbers

Numbers are used quite frequently in Javascript, be them declared values of variables or a counter that allows for a triggerable event to happen. These numerical values can be written in whole number form or as a decimal. When declaring a numerical value in Javascript you do not need to surround these in speech marks.

If you need to write a very large number, Javascript allows you to use the scientific values, for example,

var x = 123e5; is the equivalent to 12300000

var y = 123e-5; is the equivalent to 0.00123

Operators

There are a number of operators in Javascript, these are very much a language-independent set of operators and understanding these here will put you in a good position going onwards with future units. 

Addition: the + (plus) symbol is used in a process to add values together, for example A + B = C

Subtration: The - (subtraction) symbol is used in a process to minus a value from another, for example A - B = C

Incrimentation: The ++ (double add) symbol is used in Javascripts to allow the value contained within a variable to have its value incremented by a value, normally, in most cases by 1, for example a X = ++Y

Decriment: The --(double minus) symbol is used in Javascritps to allow the value contained within a variable to be reduced by a value of 1, for example X= --Y

Statements

Statements are instructions that tell the browser what to do, for example, code that instucts the browser to write to a value to the browser window.

Arrays

Arrays are used in cases where variables can have more than one set value, for example Trees = Oak, Birch, Maple, Chestnut, Hazel the way in which we can present these are as follows,

Now that you have a better understanding of these core components of Javascripts, revisit your examples that you have created and copied from W3Schools and from MyStudentSite and add further comments to your scripts to enable you to provide yourself with pause/reflection points for later.

writing eg required functions;

creation of web pages eg rollovers, clocks, calendars, client-side calculations, forms validation, mouse movement followers

. Getting Started with Programming 12 - 20

Demonstrate console.log and recognise comparison operators ( '<', '>', '==', '!==')

• Understand and construct if / else statements using comparison operators

• Understand and practice debugging

• Review data types, comparators, if / else statements and maths operations

• Understand and implement modulo (%) using an if / else statement

L2/4 programming AL

L3 algorithms AL

1. Getting Started with Programming 21 - 28

• Understand and practice implementing the substring keyword

• Understand and practice using variables

• Review variables and manipulation of numbers & strings

• Practice using variables in if / else statements

L3/5 programming

2.Choose Your Own Adventure 1 - 7

Plenary activity synthesising Module 1: Getting started with programming

• Assign prompt to a variable, construct if / else statements with comparison

operators and use console.log

L3 programming

L4 algorithms

Using mathematical operators, find the min, max and total of 10, 837, 267, 94, 293, 2, 112, 398, 62, 928, 737, 918.

Key Term

syntax - the structure of statements in a computer language.

Variable - a data item that may take on more than one value during the runtime of a program

One-Minute Verbal Assessment - The teacher asks learners to prepare and deliver a one minute verbal summary of a forthcoming or completed activity, session or topic.

An operator is a mathematical symbol l used in a calculation or comparison.

A prompt box can take an input from a user and has this syntax: x=prompt("message"," ").

1.  Create the pizza topping example of a function.
2. Adapt the code to allow the user to enter their favourite food type. If it is pizza, it should call the topping function.

http://www.codecademy.com/en/skills/uk-quizzes/topics/uk-javascript-basics-1/javascript-getting-started-with-programming-5

Scripting language constructs:

syntax eg dot operator,

values,

variables,

operators,

assignment,

comparisons; loops eg for, for/in, do/while;

decision making eg if, if/else, switch/case;

functions (calling, parameter passing);

handling events eg onfocus, onload, onblur, onmouseover;

methods eg write(), click(), open(), selected();

properties eg name, width, ID, value

3. Introductions to Functions in JS 1 – 8

Understand what a function does and how it works

• Practice creating and debugging functions

• Recognise and implement the return keyword

L2/6 programming

L6 algorithms

3. Introductions to Functions in JS 9 – 13

Recognise and implement functions with more than one parameter

• Understand and Evaluate Global and local variables

• Practice functions with if / else statements

L2/6 programming

4. Build "Rock, Paper, Scissors" 1 – 9

• Plenary activity synthesising Module 3: Introductions to functions in JS

• Understand and implement Math.random() method and use else / if statement

• Create functions using multiple if / else statements

• Extension: Improve game with the skills previously acquired

L4 algorithms

L5/6 programming

5. Introduction to 'For' Loops 1 – 8

Understand 'for' loops, how they are helpful and the general syntax

• Understand how to initiate, control and end a for loop

• Practice a 'for' loop counting down

L4 algorithms

5. Introduction to 'For' Loops 9 – 13

• Understand what an array is and how to create one

• Understand how to access an element of an array

• Practice creating and accessing all elements of an array using a for loop

L2/6 data

L6 programming

Testing of Website Functionality.

To ensure that when the final website is handed over to our clients it is important to run a set of tests over the site to ensure that it is fully operational and meets the clients original brief.

To undertake this activity we will first need to create a test plan and table. This can be created at the beginning of the project, even before the implementation of the site. There will be a number of different tests that are part of the basic fabric of the website, these would be;

• Spelling 
• Correct images loading on pages
• Navigational elements (all pages are connected correctly)
• "alt" tags are included in all images for usability

The elements in the list above are quick wins and could make a great site poor if overlooked.

Below is an example test plan table that could be considered for testing.

What are the good practices?

Good practices within web developement are;

Commenting Code - It is a key stage in all most all programming to make comments on your code. The inclusion of these comments can, and will support you and your potential work colleagues in understanding, what is happening, or what should be happening and any other detail relevant to the operation of the code. It could be that you have structure in your code that parts of it are location in another place within the document. It could seperate elements, or even be a guide as to the start and finish of tags and points.

ALT property in images - the use of the "alt" property is an important part of userbililty and accessability as blind users may use screen readers to allow them to use websites, if an image appears the reader reads the "alt" property to the user. It is therefore essentail to include these in all images that you add.

Link to home - It is an unwritten rule that most users if they want to jump back to the home page of any site that they are in that they click on the logo, normally located in the top left-hand side of the screen to do this.

Meta tags - These are a very useful way of providing detail to users, web browsers and search engines as to the purpose of the pages. In most instances, information will include

• The Author
• The Keywords
• The Description of the page

The location of these details will be placed within the header page of the HTML page. The image below demonstrates this.

Meta tags can have a positive mark against sites when it comes to search engine optimisation, this is because when a search engine bot crawls over the webpage the bot will look at not only the web pages contents but also over its coding. 

Methods - A method is an action which can be performed by an object

Handling events - An event is an action which can cause a reaction in the code.

Writing, communicating. Information, ideas and opinions effectively and persuasively for developing, presenting and communicating information.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

LO 4 Be able to create interactive web pages

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

P5 create interactive web pages using CSS and a scripting language

M3 employ good practice in the design and implementation of web pages.

P6 test interactive web pages.

D2 evaluate the web pages and discuss improvements.

Decimals: Counting
Using Numbers: Counting, Place value, adding and subtracting, multiplying and dividing.

Formulae: using formulas, using words to express operations e.g. direction

1. Create a page which has a rollover button using the onmouseover event.
2. Create a page which displays a message using the onload focus.
3.  Research on the Internet for other events and make notes on what effect they might have.

1. Create a counter that counts even seconds, eg 2, 4, 6, etc.
2. Write the code to calculate the user's age when they input their date of birth.
3. Use today's date to calculate their age.

4. http://www.codecademy.com/en/skills/uk-quizzes/topics/uk-javascript-basics-1/javascript-introduction-to-functions-in-js-1

    

   http://www.codecademy.com/en/skills/uk-quizzes/topics/uk-javascript-basics-1/javascript-introduction-to-functions-in-js-3

    

   http://www.codecademy.com/en/skills/uk-quizzes/topics/uk-javascript-basics-1/javascript-introduction-to-for-loops-3

    

   http://www.codecademy.com/en/skills/uk-quizzes/topics/uk-javascript-basics-1/javascript-introduction-to-for-loops-3

    

margins, borders

Design: layout planned using appropriate graphical or other tool

Lists: styling tags; hover effect; horizontal navigation; vertical navigation

Activity:

1. Using the prototype web page you created in the previous activity’s, add menus.
2. Add three more menus for: flowers, nuts and herbs

Headings: styling eg adding colour, font size, font weight, background image; spacing eg applying padding,

Design script: use of appropriate tools eg flowchart, pseudo code

Activity:

1. Draw a systems flowchart for a user filling in a feedback form which is then emailed to the administrator. If any fields are left blank, it should loop back to allow the user to fill it in again.
2. Research to find what other symbols can be used in a systems flowchart and make notes for future reference.

Activity:

Choose an existing website with which you are familiar, such as your school or college site.

1. Create a screen design for the home page.
2. Create a navigation diagram for the whole website.

Be able to create interactive web pages

Script requirements: inputs; outputs; processing

Design script: use of appropriate tools eg flowchart, pseudo code

Implement script: appropriate objects eg properties, methods; writing eg required functions;

creation of web pages eg rollovers, clocks, calendars, client-side calculations, forms validation, mouse movement followers

Good practice: eg comments in the script, correct indentation, naming variables

Testing: layout matches design; interactivity working; check using different browsers eg Internet Explorer, Firefox, Opera, Chrome, Safari

Key terms

Screen design- depicts the layout of a web page and should be drawn before starting to build it.

Navigation diagram- shows how the different parts of a project will combine In web design, 1t shows how different pages will interrelate.

Pseudo class- a section of CSS code which controls certain behaviours of the HTML, for example

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

LO 4 Be able to create interactive web pages

P5 create interactive web pages using CSS and a scripting language

M3 employ good practice in the design and implementation of web pages.

P6 test interactive web pages.

D2 evaluate the web pages and discuss improvements.

Formulae: using formulas, using words to express operations e.g. direction
 

1. Create the CSS for the background and fonts in the web page. (For now, don't worry about the layout.)
2. Test it works by creating a prototype of the page in HTML.
3. The business has decided to change its house style to a red theme. Alter your prototype web page accordingly

Good practice: eg comments in the script, correct indentation, naming variables

Testing: layout matches design; interactivity working; check using different browsers eg Internet Explorer,

Activity:

Using a test plan like the one shown in Table 20.5, test the website you built in CSS (on page 81) and JavaScript (left) for Keystone Zoo.

Firefox, Opera, Chrome, Safari

Activity:

Explain how scripts are implemented differently in two browsers, such as Internet Explorer® and Firefox®.

Activity:

1. Using the screen design and prototype web page you created in the previous activity, create the CSS for the layout of the web page.
2. Test it works in the HTML.
3. The business has decided to change the design (see screen design below). Alter your prototype web page accordingly.

Comment - an uninterrupted line of code which describes what is happening and helps developers understand how it works.

Reserved word - a word which is already used in the programming language and therefore cannot be used as a variable name.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

LO 4 Be able to create interactive web pages

P5 create interactive web pages using CSS and a scripting language

M3 employ good practice in the design and implementation of web pages.

P6 test interactive web pages.

D2 evaluate the web pages and discuss improvements.

Area, perimeter, volume: Calculating, applying calculations to real situations

Using the prototype web page you created in the previous activity:

1. add an ordered list of your favourite five fruit and vegetables to the main body of text
2. add an unordered list of your three favourite flowers below the first list. Make sure there is at least one line break
   between them .

Activity:

1. Using the prototype web page you created in the previous activity, create the buttons in the navigation bar, based on the navigation diagram

1. Using CSS, create the following:

• for the unclicked link, the text should be black

• when the user hovers over the link, it should become a larger font size

• when the link is visited, it should become a different font

• when the link is active, the background colour of the link should become yellow.

Final Unit Checking Activity:

1. Describe the three methods of using CSS with HTML.
2. Describe the structure of the box model
3. What is the main purpose of a scripting language?
4.  Where is client side scripting processed?
5.  What IS the difference between object-oriented languages (like JavaScript®) and event-driven languages (like VBScript)?
6.  What is the purpose of a funct1on?
7. What two methods are most commonly used to design CSS?
8. What is the purpose of pseudo code?
9.  Why should code be commented and indented?

What is the purpose of testing?