F27SB2 Software Development 2

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 display mouse • hardware • peripherals • e.g. keyboard/mouse & screen • computer • e.g. CPU/memory keyboard computer

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

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

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 display • typical read/process/write cycle • program • asks operating system for input • pauses keyboard computer operating system program

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

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

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

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

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

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

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

23. Command line interface display • 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 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 intsum=0; intnext; for(int i=0;i<10;i++) { next=Integer.parseInt(keyboard.readLine()) while(next<0 || 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; intnext; 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<0 || 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 1970’s • 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 they’re 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 • we’re 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