F27SB2 Software Development 2 Lecture 1: Introduction.

F27SB2 Software Development 2

Lecture 1: Introduction

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

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

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

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

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

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

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

Implementation and interface

• in programming– implementation• methods that affect data structures

– interface • how user interacts with methods

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

From user to program

• hardware– peripherals• e.g. keyboard/mouse

& screen – computer• e.g. CPU/memory

displaykeyboard

computer

mouse

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

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

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

Command line interface

• typical read/process/write cycle

• program– asks operating system for

input– pauses

displaykeyboard

computer

operating system

program

Command line interface

• user – types on keyboard

displaykeyboard

computer

operating system

program

Command line interface

• user – types on keyboard

• computer– detects electronic signals

displaykeyboard

computer

operating system

program

Command line interface

• user – types on keyboard

• computer– detects electronic signals

• operating system– identifies key presses

displaykeyboard

computer

operating system

program

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

Command line interface

• program– interprets key presses

displaykeyboard

computer

operating system

program

Command line interface

• program– interprets key presses– sends outputs to operating

system

displaykeyboard

computer

operating system

program

Command line interface

• program– interprets key presses– sends outputs to operating

system

• operating system– initiates hardware signals

from computer

displaykeyboard

computer

operating system

program

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

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

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);

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

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);

Command line interface

• Note:– interface has changed– implementation has not changed

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

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

Icon

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

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

Mouse & pointer

• movable physical device • associated by operating system with graphical

pointer on screen• user – moves mouse

• hardware– generates signals

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

Mouse & pointer

• mouse & pointer mediate between physical and virtual activities

• user not conscious of moving mouse• think they’re moving pointer...

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

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

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

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

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

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

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