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 00010101 01010110
00001000
00010101
01010110
ADD
first number (21)
second number (86)
Assembly Language
• Symbolic instruction codes and addresses
– Symbolic instruction code “ADD”
– Symbolic address “SUM1”
• For instance
ADD
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
•
•
•
•
•
-x
6+5
“Hello” + “World”
2.1 * 3
x++
• 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
x=x+y
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
a=2
b=3
c=a*b
Conditional Selection Control
Structure
if (gender == “male”) {
greeting = “Hello, Sir”
}
else {
greeting = “Hello, Madam”
}
Generating Boolean Results
•
•
•
•
•
•
•
x == y
x != y
x>y
x <= y
x && y
x || y
!x
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:
n=1
while ( n <= 10) {
document.writeln(n)
n++
}
Program 2:
For (n = 1; n <= 10; n++) {
document.writeln(n)
}
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
http://www.visualprosthesis.com/javoice.htm
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
Oakland
San Jose
Baltimore
National
Dulles
Anywhere
else
Where are
you departing
from?
Where do
you want
to go?
Anywhere
else
Wrong
Goodbye
Confirmed
Sorry
Verification
Not a day
What day
do you want
to travel?
Another
day
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
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