BBBIT What have they got in common?

BBBIT

BBBITBBBIT

By the end of today’s lesson;• All of you will produce one basic

plan for a program (D-E)• Most of you will produce a number

of detailed plans for a program (B-C)

• Some of you will produce plans for the GUI and the programming (A*-A)

Learning outcomes

BBBIT

1. Graphical User Interface2. Pseudo code3. Flow charts

Planning a Program

BBBITWhat is it?Making sure your GUI is user friendly. 3 Key things to remember are;• Keep everything that is related in the same

place (i.e. username and password input boxes should always be together).

• Use meaningful labels so the user knows what to do.

• All buttons should be together and at the bottom of a form. They should all be labelled clearly.

GUI design

BBBITHow do you do it?When you are making a GUI design for your project the easiest way to do it will be to sketch it on a piece of paper.

You can then take a photo of it and send it to your computer.

GUI design

BBBITHow do you do it?When you are making a GUI design for your project the easiest way to do it will be to sketch it on a piece of paper.

You can then take a photo of it and send it to your computer.

GUI design

BBBITYou have been asked to create a basic ‘sign up’ page for a new social networking webpage. You should include a form with;• First Name input box• Surname input box• Password input box• Submit and reset buttons

If any of these input boxes are not completed then a suitable error message will be displayed.

Practice Scenario

BBBIT

You will need to design your GUI to make it as user friendly as possible. This should be done on a piece of plain paper.

Once you have done this you should take a photo of it and e-mail it to your school e-mail address.

Task 1

BBBIT

What is it?When you write your code in plain English. This is done before you code to give you an idea of how you want to structure your code.

Pseudo Code

BBBITHow do you do it?When submit button is clickedGet radio buttons values from HTML formIf gcse radio button is selected

Output “You have selected GCSE”If as level radio button is selected

Output “You have selected AS Level”If a level radio button is selected

Output “You have selected A Level”If no value is selected

Output “Please select a qualification level”

Pseudo Code

BBBIT

You will need to write some pseudo code to plan how your JavaScript will be written.

Make sure you use the correct key terms at the beginning of the lines; when, if, output, get.

Task 2

BBBIT

What are they?When you plan the process of the choices and decisions that will happen in your program. These are made to help you image the correct order of your code.

Flow Charts

BBBIT

How do you make one?You combine a number of different symbols which need to be used in the correct place.

Flow Charts

Start/stop

Process of action

Decision/ question

Yes

No

BBBITStart

Get radio button values from HTML

form

Is GCSE selected?

Is AS level

selected?

Is A Level selected?

Output “you have selected GCSE”

Output “you have selected GCSE”

Output “you have selected GCSE”

Output “you have selected GCSE”

Yes Yes Yes

No No

No

Stop

BBBIT

You will need to create a flow chart to plan how the decisions will go in your ‘sign up’ page.

Make sure you use the correct symbols and include the connector lines.

Task 3

BBBIT

You will need to swap computers with one of your peers and leave them some feedback about;• Quality of the GUI design,• Structure of the pseudo code,• Quality of the flow chart,

Feedback