Multimedia
Week 5
LBSC 690
Information Technology
Agenda
•	Questions
•	Images
•	Video
•	Audio
•	Streaming
•	SMILe
•	XML?
•	(HCI)

Nothing new…
Visual Perception
•	Closely spaced dots appear solid
–	But irregularities in diagonal lines can stand out
•	Any color can be produced from just three
–	Red, Blue and Green: “additive” primary colors
•	High frame rates produce apparent motion
–	Smooth motion requires about 24 frames/sec
•	Visual acuity varies markedly across features
–	Discontinuities easily seen, absolutes less crucial
Basic Image Coding
•	Raster of picture elements (pixels)
–	Each pixel has a “color”
•	Binary - black/white (1 bit)
•	Grayscale (8 bits)
•	Color  (3 colors, 8 bits each)
–	Red, green, blue
•	Screen
–	A 1024x768 image requires 2.4 MB
•	So a picture is worth 400,000 words!
Monitor Characteristics
•	Technology (CRT, Flat panel)
•	Size (15, 17, 19, 21 inch)
–	Measured diagonally
–	For CRT, key figure is “viewable area”
•	Resolution
–	640x480, 800x600, 1024x768, 1280x1024, …
•	Layout (three dot, lines)
•	Dot pitch (0.26, 0.28)
•	Refresh rate (60, 72, 80 Hz)
Some Questions
•	How many images can a 1 GB flash card store?
–	But mine holds about 500.  How?

•	How long will it take to send an image at 64kb/s?
–	But my Web page loads faster than that.  How?

Compression
•	Goal: reduce redundancy
–	Send the same information using fewer bits

•	Originally developed for fax transmission
–	Send high quality documents in short calls

•	Two basic strategies:
–	Lossless: can reconstruct exactly
–	Lossy: can’t reconstruct, but looks the same
Palette Selection
•	Opportunity:
–	No picture uses all 16 million colors
–	Human eye does not see small differences
•	Approach: 
–	Select a palette of 256 colors
–	Indicate which palette entry to use for each pixel
–	Look up each color in the palette
Run-Length Encoding
•	Opportunity:
–	Large regions of a single color are common

•	Approach:
–	Record # of consecutive pixels for each color

•	An example of lossless encoding
GIF
•	Palette selection, then lossless compression
•	Opportunity:
–	Common colors are sent more often
•	Approach:
–	Use fewer bits to represent common colors
•	1	Blue	75%	75x1=  75	75x2=150
•	01	White	20%	20x2=  40	20x2=  40
•	001	Red	  5%	  5x3=  15	  5x2=  10
                              	           130	           200
JPEG
•	Opportunity:
–	Eye sees sharp lines better than subtle shading

•	Approach:
–	Retain detail only for the most important parts
–	Accomplished with Discrete Cosine Transform
•	Allows user-selectable fidelity

•	Results:
–	Typical compression 20:1
Variable Compression in JPEG
Vector Graphics
Vector Graphics
•	Raster images (“bitmap graphics”)
–	Actually describe the contents of the image
–	Good for natural scenes

•	Vector images
–	Mathematically describe how to draw the image
–	Rescalable without loss of resolution
Discussion Point:
Selecting an Image Format
Hands-On Exercise: 
Convert Between Formats
•	Download and save two images
–	http://www.umiacs.umd.edu/~daqingd/image1.jpg
–	http://www.umiacs.umd.edu/~daqingd/image2.gif

•	Use Microsoft Paint to convert each to the other format, and compare quality and the file size

•	Why the difference?

Basic Video Coding
•	Display a sequence of images
–	Fast enough for smooth motion and no flicker

•	NTSC Video
–	60 “interlaced” half-frames/sec, 512x486

•	HDTV
–	30 “progressive” full-frames/sec, 1280x720
Video Data Rates
•	“NTSC” Quality Computer Display
–	640 X 480 pixel image
–	3 bytes per pixel (red, green, blue)
–	30 Frames per Second
•	Bandwidth
–	26.4 MB/second
–	Exceeds bandwidth of most disk drives
•	Storage
–	CD-ROM would hold 25 seconds worth
–	30 minutes would require 46.3 GB
Video Compression
•	Opportunity: 
–	One frame looks very much like the next

•	Approach: 
–	Record only the pixels that change

•	Standards:
–	MPEG-1: Web video (file download)
–	MPEG-2: HDTV and DVD
–	MPEG-4: Web video (streaming)
MPEG Encoding
Frame Types
Frame Reconstruction
Frame Reconstruction
Basic Audio Coding
•	Sample at twice the highest frequency
–	8 bits or 16 bits per sample

•	Speech (0-4 kHz) requires 8 kB/s
–	Standard telephone channel (1-byte samples)
•	Music (0-22 kHz) requires 172 kB/s
–	Standard for CD-quality audio (2-byte samples)
Music Compression
•	Opportunity:
–	The human ear cannot hear all frequencies at once
•	Approach:
–	Don’t represent “masked” frequencies
•	Standard: MPEG-1 Layer 3 (.mp3)
Temporal Masking
Speech Compression
•	Opportunity:
–	Human voices vary in predictable ways

•	Approach:
–	Predict what’s next, then send only any corrections

•	Standards:
–	Real audio can code speech in 6.5 kb/sec

•	Demo at http://www.data-compression.com/speech.html
–	Scroll down to near the bottom
Narrated PowerPoint
•	Create your slides

•	Slide Show -> Record Narration
–	Set microphone level

•	Record the narration
–	Slide transitions are automatically captured

•	Narration plays automatically when displayed
Adding Video to PowerPoint
•	Insert->Movies and Sounds
–	Movies from file (a .mpg file)

•	Decide whether you want autostart
–	If not, it starts when you click on it
The “Last Mile”
•	Traditional modems
–	“56” kb/sec modems really move ~3 kB/sec
•	Digital Subscriber Lines
–	384 kb/sec downloads (~38 kB/sec)
–	128 kb/sec uploads (~12 kB/sec)
•	Cable modems
–	10 Mb/sec downloads (~1 MB/sec)
–	256 kb/sec uploads (~25kB/sec)
Multimedia on a Web Server

•	Object stored in a file
•	File transferred as an HTTP object:
–	Received entirely at the client
–	Passed to media player
Streaming

•	Browser gets metafile over HTTP
–	Launches media player to interpret the metafile
•	Media player contacts streaming server
Streaming Audio and Video
•	Begin replay after only a portion received 
•	Buffer provides time to recover lost packets
•	Interrupts replay when “rebuffering”
Client Buffering
•	Client-side buffering: 
–	Playout delay compensates for network delay
Playout Delay
•	Receiver attempts to playout each chunk exactly q ms after chunk was generated
–	Chunk has time stamp t: play out chunk at t+q
–	Arrives after t+q: too late for playout, data “lost”
•	Tradeoff for q:
–	Large q: less packet loss
–	Small q: better interactive experience
•	Easy to increase q by inserting a pause
–	Decreasing q requires skipping or accelerating
Lost Packets
•	Network loss 
–	Packets completely lost (e.g., due to collisions)

•	Delay loss
–	Packets arrives too late for playout
•	Queueing; sender and receiver processing delays

•	Loss tolerance
–	1% to 10% packet loss may be tolerable
•	Some encoding schemes are more tolerant than others
Hands On: RealPlayer
•	View streaming real video
–	http://www.c-span.org

•	Select “Tools/Playback statistics”

•	Pay attention to bandwidth and lost packets
Multiple Client Rates
Internet Telephony

•	Characteristics:
–	“Live” (<400 ms delay)
–	Alternating talk spurts

Illustrating RealAudio
•	Create a .ram file
–	URL for the RealAudio
–	Dimensions of the picture
–	URL for the picture

http://www.umiacs.umd.edu/~oard/teaching/690/fall05/notes/4/media.html

Synchronizing Multiple Media
•	Scripting Languages
–	Synchronized Multimedia Integration Language (SMIL)

•	Custom applications
–	Macromedia Flash

•	Content representation standards
–	MPEG 4
SMILe
•	W3C standard
–	Player-specific extensions are common

•	XML, with a structure similar to HTML
<smil>
<head> … </head>
<body> … </body>
</smil>
Elements in SMIL
•	Window controls (in <head>)
–	Controlling layout: <region>, <root-layout>

•	Timeline controls (in <body>)
–	Sequence control: <seq>, <excl>, <par>
–	Timing control: <begin>, <end>, <dur>
 
•	Content types (in <body>)
–	<audio>, <video>, <img>, <ref>
SMIL Examples
•	Implemented in RealOne Player
•	Example:
http://www.umiacs.umd.edu/~oard/teaching/690/fall05/notes/4/media.html
–	First, run the executable
–	Then, view .smil file

What’s Wrong with the Web?
•	HTML
–	Confounds structure and appearance (XML)

•	HTTP
–	Can’t recognize related transactions (Cookies)

•	URL
–	Links breaks when you move a file (PURL)

What’s a Document?
•	Content

•	Structure

•	Appearance

•	Behavior
History of Structured Documents
•	Early standards were “typesetting languages”
–	NROFF, TeX, LaTeX, SGML
•	HTML was developed for the Web
–	Too specialized for other uses
•	Specialized standards met other needs
–	Change tracking in Word, annotating manuscripts, …
•	XML seeks to unify these threads
–	One standard format for printing, viewing, processing
eXtensible Markup Language (XML)
•	SGML was too complex
•	HTML was too simple
•	Goals for XML
–	Easily adapted to specific tasks
•	Rendering Web pages
•	Encoding metadata
•	“Semantic Web”
–	Easily created
–	Easily processed
–	Easily read
–	Concise
Some XML Applications
•	Text Encoding Initiative
–	For adding annotation to historical manuscripts
–	http://www.tei-c.org/

•	Encoded Archival Description
–	To enhance automated processing of finding aids
–	http://www.loc.gov/ead/

•	Metadata Encoding and Transmission Standard
–	Bundles descriptive and administrative metadata
–	http://www.loc.gov/standards/mets/
Really Simple Syndication (RSS)
Atom Feeds
XML: A Family of Standards
•	Definition: DTD
–	Known types of entities with “labels”
–	Defines part-whole and is-a relationships
•	Markup: XML
–	“Tags” regions of text with labels
•	Markup: XLink
–	Defines “hypertext” (and other) link relationships
•	Presentation: XSL
–	Specifies how each type of entity should be “rendered”
XHTML Example
•	View “The Song of the Wandering Aengus” 
–	http://www.umiacs.umd.edu/~oard/teaching/690/spring08/notes/3/xml.htm

•	Built from three files
–	yeats01.xml 
–	poem01.dtd 
–	poem01.xsl  
XML Example
Document Type Definition (DTD)
Specifying Appearance: XSL
XLink Example
XHTML: Writing HTML as XML
Some Basic Rules for XML
•	XML is case sensitive
•	XML declaration is the first statement
–	<?xml version="1.0"?>
•	An XML document is a “tree”
–	Must contain one root element
–	Other elements must be properly nested
•	All start tags must have end tags
•	Attribute values must have quotation marks
–	<item id=“33905”>
•	Certain characters are “reserved”
–	For example: &lt; is used to represent <
Multiple XML Namespaces
Some Ajax Applications
•	Google Maps
–	http://maps.google.com
•	Google Suggest
–	http://www.google.com/webhp?complete=1&hl=en
•	Sajax Tables
–	http://labs.revision10.com/?p=5
•	Sajax
–	http://www.modernmethod.com/sajax/

Even More Uses of XML …
•	CML – Chemical Markup Language
•	CellML – biological models
•	BSML – bioinformatic sequences
•	MAGE-ML – MicroArray Gene Expression
•	XSTAR – for archaeological research 
•	MARCXML – MARC in XML
•	AML – astronomy markup language
•	SportsML – for sharing sports data
Interaction
•	Forming an intention
–	Internal mental characterization of a goal
•	Selection of an action
–	Review possible actions, select most appropriate
•	Execution of the action
–	Carry out appropriate actions with the system
•	Evaluation of the outcome
–	Compare results with expectations
Where the Mental Model Fits
Mental Models
•	How the user thinks the machine works
–	What actions can be taken?
–	What results are expected from an action?
–	How should system output be interpreted?
•	Mental models exist at many levels
–	Hardware, operating system, and network
–	Application programs
–	Information resources
Input Devices
•	Text
–	Keyboard, optical character recognition
–	Speech recognition, handwriting recognition
•	Direct manipulation
–	2-D: mouse, trackball, touch pad, touch panel
–	3-D: wand, data glove
•	Remote sensing
–	Camera, speaker ID, head tracker, eye tracker
Keyboard
•	Produces character codes
–	ASCII:  American English
–	Latin-1: European languages
–	UNICODE: (nearly) Any language
•	Pictographic languages need “entry methods”
•	Keyboard shortcuts help with data entry
–	Different conventions for standard tasks abound
•	VT-100 standard” functions are common
–	Differing layouts can inhibit usability
Design Example: QWERTY Keyboard
Dvorak Keyboard 
Direct Manipulation
•	Match control actions with on-screen behavior
–	Use a cursor for visual feedback if needed
•	Rotary devices
–	Mouse, trackball
•	Linear devices
–	Touch pad, touch screen, iPod shuttle, joystick
•	Rate devices 
–	Laptop eraserhead
Modeling Interaction
Human Senses
•	Visual
–	Position/motion, color/contrast, symbols
•	Auditory
–	Position/motion, tones/volume, speech
•	Haptic
–	Mechanical, thermal, electrical, kinesthethic
•	Olfactory
–	Smell, taste
•	Vestibular
Commodity Output
•	Image display
–	Fixed view, projection

•	Acoustic display
–	Speakers, headphones
“Virtual Reality” Output
•	Immersive visual
–	Surround projection, Movable view
•	Force feedback
–	Pen, joystick, exoskeleton
•	Tactile
–	Vibrotactile, pneumatic, piezoelectric
•	Vestibular
–	Motion-based simulators
•	Locomotive
–	Stationary bicycle, treadmill
•	Thermal, Olfactory

Interaction Styles
•	Language-based interfaces
–	Command line interfaces
–	Interactive voice response systems
•	Graphical User Interfaces (GUI)
–	Direct manipulation
–	Menus
•	Virtual Reality (VR)
–	Direct manipulation
•	Ubiquitous computing
Direct Manipulation
•	Select a metaphor
–	Desktop, CD player, map, …

•	Use icons to represent conceptual objects
–	Watch out for cultural differences

•	Manipulate those objects with feedback
–	Select (left/right/double click), move (drag/drop)
GUI Components
•	Windows (and panels)
–	Resize, drag, iconify, scroll, destroy
•	Selectors 
–	Menu bars, pulldown lists
•	Buttons
–	Labeled buttons, radio buttons, checkboxes
•	Icons (images)
–	Select, open, drag, group

Metaphor: Fundamental for Thought
Transfer Effects
•	People transfer expectations from similar objects
–	Positive: prior learning applies to new situation
–	Negative: prior learning conflicts with new situation
Positive and Negative Transfer
Visual Affordance
•	The perceived and actual fundamental properties 
of the object that determine how it could be used
–	Appearance indicates how the object should be used
•	Chair for sitting
•	Table for placing things on
•	Knobs for turning
•	Slots for inserting things into
•	Buttons for pushing
•	Complex things may need explaining but 
simple things should not
–	When simple things need instructions, design has failed
Visual Affordance Problems
Mapping
Visible Constraints
•	Limitations of the actions possible perceived from object’s appearance
–	provides people with a range of usage possibilities

Visible Constraints: Date Entry
Causality
•	The thing that happens right after an action is assumed by people to be caused by that action

•	Incorrect effect
–	Invoking unfamiliar function just as computer hangs
–	Causes “superstitious” behaviors

•	Invisible effect
–	Command with no apparent result often repeated
•	e.g., mouse click to raise menu on unresponsive system
Causality: An Example
Cultural Associations
•	Because a trashcan in Thailand may look like this:

•	A Thai user is likely to be confused by this image popular in Apple interfaces:

•	Sun found their email icon problematic for some American urban dwellers who are unfamiliar with rural mail boxes.
Stereotypes
•	People learn “idioms” that work in a certain way
–	Red means danger
–	Green means safe
•	Idioms vary in different cultures
–	Light switches
•	America: down is off
•	Britain:   down is on
–	Faucets
•	America: counter-clockwise on
•	Britain: counter-clockwise off
WIMP Interfaces
•	Windows
–	Spatial context
•	Icons
–	Direct manipulation
•	Menus
–	Hierarchy
•	Pointing devices
–	Spatial interaction
Menus
•	Conserve screen space by hiding functions
–	Menu bar, pop-up

•	Hierarchically structured
–	Logical grouping
–	Conventional positioning

•	Tradeoff between breadth and depth
–	Too deep  can become hard to find things
–	Too broad  becomes direct manipulation
Dynamic Queries
•	Keyboard-initiated direct manipulation

•	Select menu items by typing part of a word
–	After each letter, update the menu
–	Once the word is displayed, user can click on it

•	Examples:  Google queries, Windows help
Design Concept Summary
•	Visual affordance
•	Visible constraints
•	Mapping
•	Causality
•	Transfer effects
•	Idioms
•	Metaphors
•	Cultural associations
•	Individual differences
“Seamless Interfaces”
•	Informative feedback
•	Easy reversal
•	User in control
–	Anticipatable outcomes
–	Explainable results
–	Browsable content
•	Limited working memory load
–	Query context
–	Path suspension
•	Alternatives for novices and experts
–	Scaffolding
The Discipline of HCI
Human-Computer Interaction
Evaluation Approaches
•	Formative vs. summative

•	Extrinsic vs. intrinsic

•	Quantitative vs. qualitative
–	Deductive vs. inductive

•	User study vs. simulation

Evaluation Examples
•	Direct observation
–	Evaluator observes users interacting with system
•	in lab: user asked to complete pre-determined tasks
•	in field: user goes through normal duties
–	Validity depends on how contrived the situation is
•	Think-aloud
–	Users speak their thoughts while doing the task
–	May alter the way users do the task
•	Controlled user studies
–	Users interact with system variants
–	Correlate performance with system characteristics
–	Control for confounding variables
Evaluation Measures
•	Time to learn

•	Speed of performance

•	Error rate

•	Retention over time

•	Subjective satisfaction
Learning More
•	LBSC 733: Networks

•	LBSC 795: HCI Design and Evaluation

•	INFM 700: Information Architecture

•	LBSC 790: HCI Implementation
Some Style Guidelines
•	Design for generic browsers
–	And test on every version you wish to support 
•	Provide appropriate “access points”
–	User needs and navigation strategies differ
•	Design useful navigational aids
–	A Web search may lead to the middle of a site
•	Include some indication of currency
–	Date of last update, “new” icons, etc.
•	Indicate who is responsible for the content
–	Helps readers assess authority
Some Accessibility Guidelines
•	Design for device independence
•	Maintain compatibility with earlier browsers
–	Provide alternative pages if necessary
•	Provide alternatives to aural and visual content
–	Alt tags for images, transcripts for audio
•	Make is easy for assistive devices to work
–	Use structural (rather than layout-oriented) markup
–	Give a title to each frame
–	Only use HTML tables for table data (not content layout)
–	Use markup to indicate language switching
Section 508 (Federal Web pages)
•	A text equivalent for every non-text element shall be provided. 
•	Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. 
•	Web pages shall be designed so that all information conveyed with color is also available without color. 
•	Documents shall be organized so they are readable without requiring an associated style sheet. 
•	Redundant text links shall be provided for each active region of a server-side image map. 
•	Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. 
•	Row and column headers shall be identified for data tables. 
•	Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. 
•	Frames shall be titled with text that facilitates frame identification and navigation. 
•	Pages shall be designed to avoid causing the screen to flicker with a frequency >2 Hz and <55 Hz. 
•	A text-only page, with equivalent information or functionality, shall be provided when compliance cannot be accomplished in any other way. The content shall be updated when the primary page changes 
•	When pages use scripting languages to display content or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. 
•	When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the above. 
•	When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required. 
•	A method shall be provided that permits users to skip repetitive navigation links. 
•	When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. 
HTML Editors
•	Goal is to create Web pages, not learn HTML!
•	Several are available
–	Macromedia Dreamweaver available commercially
–	Microsoft Word (Page->Edit with Word in IE 7
–	Many more options available on www.tucows.com
•	Tend to use physical layout tags extensively
–	Detailed control can make hand-editing difficult
•	You may still need to edit the HTML file
–	Some editors use browser-specific features
–	Some HTML features may be unavailable
–	File names may be butchered when you upload
HTML Validators
•	Syntax checking: cross-browser compatibility
–	http://validator.w3.org
–	Try it on http://www.umd.edu 

•	Style checking: Section 508 compliance
–	http://www.cynthiasays.com/
–	Try it on http://www.umd.edu 
Before You Go!
•	On a sheet of paper (no names), answer the following question:

	What was the muddiest point in today’s class?