1. F27SB2 Software Development 2 Lecture 1: Introduction

2. Form follows function in artefacts, useful to distinguish – form what something looks like – function what something does e.g. MP3 player & mobile phone - same forms & different functions e.g. motorcycle & bicycle - different forms and same functions

3. Form follows function can change form without changing function – e.g. new model of car can change function without changing form – e.g. use screwdriver to open tin form follows function – i.e. how things look should reflect what they do – Louis Sullivan, US Architect, 1856-1924 – modern movement

4. Form follows function e.g. doors – plate ==> push – handle ==> pull e.g. cooker hob – knobs & burners – layout of knobs should match position of burners useful guideline for designing computer systems how things look on screen should suggest what effects they have when selected

5. Syntax and semantics in language, useful to distinguish – syntax structure/representation sequences of words/symbols represented as sounds, marks on paper, pixels on screen – semantics meaning how structured symbol sequences refer to things in reality

6. Syntax and semantics e.g. print squares from 1 to 10 – BASIC 5 FOR I = 1 TO 10 10 PRINT I*I 15 NEXT I – Java int i; for(i=1;i<=10;i++) screen.println(i*i); different syntax & same semantics

7. Syntax and semantics e.g. 111 – three in Roman - 1+1+1 – seven in binary - 1*4+1*2+1*1 – one hundred & eleven in decimal - 1*100+1*10+1*1 same syntax and different semantics

8. Implementation and interface in computer systems, useful to distinguish between: – implementation underlying behaviour – interface how user initiates underlying behaviour two common styles of interface – text-based - command line – windows-based - WIMP

9. Implementation and interface in programming – implementation methods that affect data structures – interface how user interacts with methods

10. Implementation and interface important to separate interface and implementation may want to change implementation without changing interface – e.g. change data representations/algorithms to make program more efficient may want to change interface without changing implementation – e.g. replace text-based interface to program with windows-based interface

11. From user to program hardware – peripherals e.g. keyboard/mouse & screen – computer e.g. CPU/memory display keyboard computer mouse

12. From user to program operating system – software running on computer – detects hardware changes via computer to read input – causes hardware changes via computer to write output display keyboard computer operating system mouse

13. From user to program program – software running on computer – controlled by operating system – requests input from operating system – sends output to operating system display keyboard computer operating system program mouse

14. Command line interface e.g. Windows: DOS window e.g. Linux: terminal window keyboard ==> input screen ==> output text is sole means of communication between user and program

15. Command line interface typical read/process/write cycle program – asks operating system for input – pauses display keyboard computer operating system program

16. Command line interface user – types on keyboard display keyboard computer operating system program

17. Command line interface user – types on keyboard computer – detects electronic signals display keyboard computer operating system program

18. Command line interface user – types on keyboard computer – detects electronic signals operating system – identifies key presses display keyboard computer operating system program

19. Command line interface user – types on keyboard computer – detects electronic signals operating system – identifies key presses – sends details to program display keyboard computer operating system program

20. Command line interface program – interprets key presses display keyboard computer operating system program

21. Command line interface program – interprets key presses – sends outputs to operating system display keyboard computer operating system program

22. Command line interface program – interprets key presses – sends outputs to operating system operating system – initiates hardware signals from computer display keyboard computer operating system program

23. Command line interface program – interprets key presses – sends outputs to operating system operating system – initiates hardware signals from computer computer – displays outputs on screen note that program pauses until user enters input display keyboard computer operating system program

24. Command line interface user does not know what to do unless told by program program should use textual prompts to: – request inputs – describe appropriate forms for inputs – provide error information – describe output

25. Command line interface e.g. find sum of 10 numbers between 0 and 100 int sum=0; int next; for(int i=0;i<10;i++) { next=Integer.parseInt(keyboard.readLine()) while(next 100) next=Integer.parseInt(keyboard.readLine()); sum=sum+next; } display.println(sum);

26. Command line interface user is not told – what the program does – when to enter a number – what sort of number to enter – when the entered number is inappropriate – what the output represents

27. Command line interface int i; int sum=0; int next; display.println(Find sum of 10 integers between 0 & 100); for(i=0;i<10;i++) { display.print(Enter integer +i+ > ); display.flush(); next=Integer.parseInt(keyboard.readLine()) while(next 100) { display.println(Integer not between 0 & 100); display.print(Enter integer +i+ > ); display.flush(); next=Integer.parseInt(keyboard.readLine()); } sum=sum+next; } display.println(Sum is: +sum);

28. Command line interface Note: – interface has changed – implementation has not changed

29. WIMP Windows/Icons/Mice/Pointers contemporary interface style supplanting command line developed at Xerox PARC in 1970s first taken up by Apple for Lisa & Macintosh developed by Microsoft for Windows incorporated into X Windows interface for UNIX now ubiquitous

30. Window autonomous area on screen communicates with operating system to enable interaction through physical devices contains graphical areas/objects for interaction user sees window not program operating system mediates interaction between – user and window – window and program

31. Icon symbolic representation on screen graphical picture indicating purpose associated with program activity select icon ==> initiate activity window maps icon to activity

32. Icon icon choice fundamental to effective interfaces use symbols that reflect purpose – e.g. word processor text formatting use familiar metaphor – e.g. CD/DVD controls to stop/start/pause action

33. Mouse & pointer movable physical device associated by operating system with graphical pointer on screen user – moves mouse hardware – generates signals

34. Mouse & pointer operating system – detects mouse movements – moves pointer on screen – determines which window pointer is pointing to – tells window that pointer is inside it window – stops what its doing – determines which area/object pointer is pointing at note that mouse activity interrupts program

35. Mouse & pointer mouse & pointer mediate between physical and virtual activities user not conscious of moving mouse think theyre moving pointer...

36. Mouse buttons send identifying signals to operating system when pressed user – presses mouse button to initiate activity through area/object under pointer hardware – generates signal

37. Buttons operating system – detects signal – tells appropriate window activity is being initiated by the mouse which button was pressed window – stops what its doing – determines which area/object pointer is indicating – initiates associated activity

38. User illusion users focus on – intention behind system use – interaction with icons on screen users do not distinguish – hardware from software – operating system from window – window from program

39. User illusion user see system as integrated whole through window not conscious of physical/virtual boundaries user thinks virtual world is real e.g. getting lost in cyberspace e.g. treating a game as real

40. User illusion computer use like driving a car car becomes extension of body driver: – wants to get to destination – most aware of: road conditions/traffic/signals/engine noise – least aware of: clutch/gears/accelerator/brake

41. Interface programming how to create user illusion? separate interface from implementation given methods/functionality – design screen layout to optimise interaction through WIMP – associate WIMP actions with appropriate methods in underlying program

42. Interface programming were going to: – look at programs with simple implementations – focus on: interface design integration with implementation important to ensure that interface reflects implementation interface should provide hints to user about what will happen