f27sb2 software development 2 lecture 1: introduction
TRANSCRIPT
![Page 1: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/1.jpg)
F27SB2 Software Development 2
Lecture 1: Introduction
![Page 2: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/2.jpg)
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
![Page 3: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/3.jpg)
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
![Page 4: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/4.jpg)
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
![Page 5: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/5.jpg)
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
![Page 6: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/6.jpg)
Syntax and semantics
• e.g. print squares from 1 to 10– BASIC5 FOR I = 1 TO 1010 PRINT I*I15 NEXT I
– Javaint i;for(i=1;i<=10;i++) screen.println(i*i);
• different syntax & same semantics
![Page 7: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/7.jpg)
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
![Page 8: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/8.jpg)
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
![Page 9: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/9.jpg)
Implementation and interface
• in programming– implementation• methods that affect data structures
– interface • how user interacts with methods
![Page 10: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/10.jpg)
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
![Page 11: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/11.jpg)
From user to program
• hardware– peripherals• e.g. keyboard/mouse
& screen – computer• e.g. CPU/memory
displaykeyboard
computer
mouse
![Page 12: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/12.jpg)
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
displaykeyboard
computer
operating system
mouse
![Page 13: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/13.jpg)
From user to program
• program– software running on
computer– controlled by operating
system– requests input from
operating system– sends output to
operating system
displaykeyboard
computer
operating system
program
mouse
![Page 14: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/14.jpg)
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
![Page 15: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/15.jpg)
Command line interface
• typical read/process/write cycle
• program– asks operating system for
input– pauses
displaykeyboard
computer
operating system
program
![Page 16: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/16.jpg)
Command line interface
• user – types on keyboard
displaykeyboard
computer
operating system
program
![Page 17: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/17.jpg)
Command line interface
• user – types on keyboard
• computer– detects electronic signals
displaykeyboard
computer
operating system
program
![Page 18: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/18.jpg)
Command line interface
• user – types on keyboard
• computer– detects electronic signals
• operating system– identifies key presses
displaykeyboard
computer
operating system
program
![Page 19: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/19.jpg)
Command line interface
• user – types on keyboard
• computer– detects electronic signals
• operating system– identifies key presses– sends details to program
displaykeyboard
computer
operating system
program
![Page 20: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/20.jpg)
Command line interface
• program– interprets key presses
displaykeyboard
computer
operating system
program
![Page 21: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/21.jpg)
Command line interface
• program– interprets key presses– sends outputs to operating
system
displaykeyboard
computer
operating system
program
![Page 22: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/22.jpg)
Command line interface
• program– interprets key presses– sends outputs to operating
system
• operating system– initiates hardware signals
from computer
displaykeyboard
computer
operating system
program
![Page 23: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/23.jpg)
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
displaykeyboard
computer
operating system
program
![Page 24: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/24.jpg)
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
![Page 25: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/25.jpg)
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<0 || next>100) next=Integer.parseInt(keyboard.readLine()); sum=sum+next;}display.println(sum);
![Page 26: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/26.jpg)
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
![Page 27: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/27.jpg)
Command line interfaceint 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<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);
![Page 28: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/28.jpg)
Command line interface
• Note:– interface has changed– implementation has not changed
![Page 29: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/29.jpg)
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
![Page 30: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/30.jpg)
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
![Page 31: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/31.jpg)
Icon
• symbolic representation on screen• graphical picture indicating purpose• associated with program activity • select icon ==> initiate activity• window maps icon to activity
![Page 32: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/32.jpg)
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
![Page 33: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/33.jpg)
Mouse & pointer
• movable physical device • associated by operating system with graphical
pointer on screen• user – moves mouse
• hardware– generates signals
![Page 34: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/34.jpg)
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
![Page 35: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/35.jpg)
Mouse & pointer
• mouse & pointer mediate between physical and virtual activities
• user not conscious of moving mouse• think they’re moving pointer...
![Page 36: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/36.jpg)
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
![Page 37: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/37.jpg)
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
![Page 38: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/38.jpg)
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
![Page 39: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/39.jpg)
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
![Page 40: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/40.jpg)
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
![Page 41: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/41.jpg)
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
![Page 42: F27SB2 Software Development 2 Lecture 1: Introduction](https://reader036.vdocuments.us/reader036/viewer/2022062619/551653d3550346a2698b4ce1/html5/thumbnails/42.jpg)
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