1. Mark Dixon 1 9 – Case Study

2. Mark Dixon 2 Session Aims and Objectives Aims –To give an overview of the development of a web-page from initial idea to code. Objectives, by end of this week’s sessions, you should be able to: –know where to start with a programming problem, and how to proceed

3. Mark Dixon 3 Example: Land Area SPECIFICATION User Requirements –need to know the land area in acres, given the length and width in metres Software Requirements –Functional: –User should be able to enter the length and the width (in metres) –the length and width (in yds), and the area (in acres) should be calculated and displayed –Non-functional should be quick and easy to use

4. Mark Dixon 4 Question Where do I start?

5. Mark Dixon 5 Software Development Steps 1. Analysis: –understand problem 2. Design –Identify inputs and outputs –User Interface (screen layout) –Behaviour 3. Code –User Interface (screen layout) –Behaviour

6. Mark Dixon 6 1. Analysis: Understand Problem Acre – unit of measurement of land area –long strip of land: can be ploughed in a day 1 Acre = 220 yds x 22 yds (= 4840 yds 2 ) 1 furlong (furrow long) = 220 yds 22yds 220yds

7. Mark Dixon 7 2. Design: Inputs and Outputs What are the inputs and outputs?

8. Mark Dixon 8 2. Design: User Interface Draw the screen layout.

9. Mark Dixon 9 2. Design: Behaviour Describe the behaviour.

10. Mark Dixon 10 Questions: User Interface HTML Write an html element that creates a text box on a web-page: Write an html element that creates an image on a web-page: Write an html element that creates a button on a web-page:

11. Mark Dixon 11 3. Code: User Interface (HTML) Translate User Interface Design into HTML.

12. Mark Dixon 12 Questions: Behaviour Script Write script code to do the following: When btnAdd is clicked: put the word "Hello" in a paragraph called parGreeting When the mouse moves over imgTree: put "TreeBig.gif" into the src of imgTree

13. Mark Dixon 13 3.Code: Behaviour (script) Translate Behaviour into script.

14. Mark Dixon 14 Belching Santa's Invent a game –no limit to your imagination (apart from what you can code)

15. Mark Dixon 15 Tutorial Exercises Task 1: Get the Land Area example (from the lecture) working. Task 2: Design and Build a 'Belching Santas' game