Week 6
LBSC 690
Information Technology
• 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 00010101 01010110
first number (21)
second number (86)
Assembly Language
• Symbolic instruction codes and addresses
– Symbolic instruction code “ADD”
– Symbolic address “SUM1”
• For instance
21, SUM1
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
“Hello” + “World”
2.1 * 3
• x=5
• x += y
• x *= 5
reverse the sign of x (negation)
Add 6 and 5 (numeric)
Concatenate two strings
Multiply two values
increase value of x by 1
set the value of x to be 5
• Simple assignment statements
celsius = 5/9 * (f-32)
• Statements that invoke a method
• Return a value from a method
return celsius
• 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
if (gender == “male”) {
greeting = “Hello, Sir”
else {
greeting = “Hello, Madam”
Generating Boolean Results
x == y
x != y
x <= y
x && y
x || y
true if x and y are equal
true if x and y are not equal
true if x is greater than y
true if x is smaller than or equal to y
true if both x and y are true
true if either x or y is true
true if x is false
Repetition Control Structure
Program Example 1:
while ( n <= 10) {
Program 2:
For (n = 1; n <= 10; n++) {
• 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
<TITLE>My first script</TITLE>
document.write("Hello, world!")
Try it at
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
• 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
San Francisco
San Jose
Where are
you departing
Where do
you want
to go?
Not a day
What day
do you want
to travel?
Day when there
are flights
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
• 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