Programming
Week 6
LBSC 690
Information Technology
Software
•	Software models aspects of reality
–	Input and output represent the state of the world
–	Software describes how the two are related

•	Examples
–	Ballistic computations
–	Google
–	Microsoft Word
Types of Software

•	Application programs (e.g., Powerpoint)
–	What you normally think of as a “program’’
•	Compilers and interpreters 
–	Programs used to write other programs
•	Operating system (e.g., Windows XP)
–	Manages display, CPU, memory, disk, tape, 
•	Embedded program (e.g., BIOS)
–	Permanent software inside some device
Programming Languages
•	Used to specify every detail of the model

•	Special purpose
–	Able to specify an entire class of models
•	Spreadsheets (Excel, ...)
•	Databases (Access, Oracle, ...)

•	General purpose
–	Able to specify any possible model
•	JavaScript, Java, Perl, C, C++, ...
History of Programming
•	Machine language
–	Language that machine can understand
•	Assembly language
–	Assembler changes names to machine code
•	High-level languages
–	Compiler/Interpreter translates to machine language
–	FORTRAN, COBOL, C, C++, Javascript
•	Visual programming language
–	Visually arrange the interface components
–	Visual Basic, …
Machine Language
•	Everything is a binary number
–	Operations
–	Data
•	For instance

00001000	ADD
00010101	first number (21)
01010110	second number (86)
Assembly Language
•	Symbolic instruction codes and addresses
–	Symbolic instruction code “ADD”
–	Symbolic address “SUM1”
•	For instance
High level Languages
•	Procedural (modular) Programming
–	Group instructions into meaningful abstractions
–	C, Pascal, Perl
•	Object oriented programming
–	Group “data” and “methods” into “objects”
–	Naturally represents the world around us
–	C++, Java, JavaScript
Object Models
•	Represent things in the world as “objects”
–	Simplest objects are “variables”
•	Represented with a name (n, teacher, …) 
•	May be assigned a value (n=4, teacher=“Doug”, …)

•	Represent actions with “methods”
–	Simplest methods are “operations”
•	Represented with a symbol (+, -, *, /, ^, …)

•	“Classes” group objects with methods
–	Models how kinds of things behave

•	Objects are instances of classes
Basic Data Types
•	Boolean: 	true, false

•	Number: 	5, 9, 3.1415926

•	String: 		“Hello World”

Operations and Assignments
•	-x				reverse the sign of x (negation)       
•	6+5				Add  6 and 5 (numeric)   
•	“Hello” + “World” 		Concatenate two strings
•	2.1 * 3 			Multiply two values
•	x++				increase value of x by 1

•	x = 5			set the value of x to be 5
•	x += y			x = x + y
•	x *= 5			x = x * 5
Statements
•	Simple assignment statements
celsius = 5/9 * (f-32)

•	Statements that invoke a method
Temperature.toCelsius(104)

•	Return a value from a method
return celsius
Methods
•	Reusable code for achieving a single task

function toCelsius(f) {
	celsius = 5/9 * (f-32)
	return celsius
} 	
Basic Control Structures
•	Sequential

•	Conditional

•	Repetition

Sequential Control Structure

Conditional Selection Control Structure

if (gender == “male”) {
	greeting = “Hello, Sir”
}
else {
	greeting = “Hello, Madam”
}
Generating Boolean Results
•	x == y 		true if x and y are equal
•	x != y  		true if x and y are not equal
•	x > y		true if x is greater than y
•	x <= y    		true if x is smaller than or equal  to y
•	x && y		true if both x and y are true           
•	x || y		true if either x or y is true
•	!x			true if x is false
Repetition Control Structure

Arrays
•	A set of elements
–	For example, the number of days in each month

•	Each element is assigned an index
–	A number used to refer to that element
•	For example, x[4] is the fifth element (count from zero!)
–	Arrays and repetitions work naturally together
Programming for the Web
•	Common Gateway Interface (CGI) [Server side]
–	Forms encode field values into a URL
–	CGI passes field values to a Perl program
–	Program generates a web page as a response

•	JavaScript [Client-side, interpreted]
–	Human-readable “source code” sent to the browser
–	Web browser runs the program

•	Java applets [Client-side, compiled]
–	Machine-readable “bytecode” sent to browser
–	Web browser runs the program
JavaScript
<HTML>
<HEAD>
	<TITLE>My first script</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>
	<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
		document.write("Hello, world!")
	</SCRIPT>
</H1>
</BODY></HTML>

Try it at http://www.umiacs.umd.edu/~daqingd/Courses/firstscript.html
Handling Events
•	Events: 
–	actions that users perform while visiting the page
–	Embedded in modern GUI 

•	Use event handlers to response events
–	Event handlers triggered by events
–	Examples of event handlers in Javascript
•	onMouseover: the mouse moved over an object
•	onMouseout: the mouse moved off an object
•	onClick: the user clicked on an object

Hands On: 
Adopt a JavaScript Program
•	Launch a Web browser
–	http://www.umiacs.umd.edu/~daqingd/Courses/selector.htm

•	See how it behaves if you are 13 (or 65)

•	View source and read the program

•	Save a local copy

•	Make some changes and see how it works
JavaScript Resources
•	Google “javascript”
–	Tutorials: to learn to write programs
–	Code: to do things you want to do

•	Engineering and Physical Sciences Library
–	Books in locked case near circulation desk
Aural Perception
•	We respond to sounds without prior focus
–	Lack of focus limits simultaneous stimuli

•	Absolute amplitude & pitch hard to interpret
–	But changes stand out clearly

•	Stereo effect provides a sense of direction
–	Relative amplitude, phase difference
Speech Output
•	Replay of digitized speech clips
–	High fidelity, but limited vocabulary
•	Speech Synthesis
–	Generate spoken output from unrestricted input
•	Based on pronunciation rules and lists of exceptions
–	Sounds unnatural due to misplaced emphasis
•	Prosody-guided speech synthesis
–	Use pronunciation of similar words as a guide 
Auditory Display
•	Nonspeech audio output for user interfaces
•	Same objectives as graphical output:
–	Alert the user to exceptional conditions
–	Provide ubiquitous feedback
–	Present information
•	But different characteristics
–	Effective even without focus
–	Fairly low resolution
Auditory Display Design
•	Need a metaphor
–	Clock ticking, alarm bells, keyboard clicks, etc.

•	Channel is easily overloaded
–	Focus helps manage cognitive load

•	Changes are more useful than values
–	Pitch, amplitude, position, harmonics, etc.
An Auditory Image Display
•	Display 2-D images using only sound
–	Sweep from left to right every second
•	Audible pause and click between sweeps
–	Top pixels are high frequency, bottom are low
•	Blind users can detect objects and motion
–	Time indicates horizontal position
–	Pitch indicates vertical position
–	Sweep-to-sweep differences indicate motion
Interactive Voice Response Systems
•	Operate without graphical interfaces
–	Hands-free operation (e.g., driving)
–	Telephone access

•	Built on three technologies
–	Speech recognition (input)
–	Text-to-speech (output)
–	Dialog management (control)

•	Example: TellMe (1-800-555-TELL)
Dialogue Management
•	User initiative

•	System initiative
–	Allows a smaller vocabulary

•	Mixed initiative (e.g., barge in)

Interaction Design
Evaluation Measures
•	Time to learn

•	Speed of performance

•	Error rate

•	Retention over time

•	Subjective satisfaction
Evaluation Approaches
•	Extrinsic vs. intrinsic

•	Formative vs. summative

•	Human subjects vs. simulated users

•	Deductive vs. abductive
Summary
•	HCI design starts with user needs + abilities
–	Users have a wide range of  both
•	Users must understand their tools
–	And these tools can learn about their user!
•	Many techniques are available
–	Direct manipulation, languages, menus, etc.
–	Choosing the right technique is important
•	LBSC 795 in Spring 2006 has this focus