Multimedia
Week 4
LBSC 690
Information Technology
Agenda
•	Questions
•	Muddiest Points
•	XML
•	Images
•	Audio
•	Transmission
•	Project teams
Muddiest Points
•	Using other people’s pages

•	Using FTP to get a Web page someplace

•	Internal anchors

•	Structure vs. appearance
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)

Discussion Point: 
Describing the Structure of Text
•	Entities
–	Span
–	Type/Attributes

•	Relationships
–	Part-whole
–	Is-a

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
Goals of XML
•	Meta language 
–	A toolkit for design markup languages
•	Unambiguous markup
–	Clear span of tags
•	Separate markup from presentation
–	Style info => stylesheet, so easy to change
•	Be simple
A Family of Standards
•	Definition: DTD
–	Names 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”
XML Example
•	View “The Song of the Wandering Aengus” 
–	http://glue.umd.edu/~rba/COURSES/TECHNOLOGY/XML/DTD/

•	Built from three files
–	yeats01.xml 
–	poem01.dtd 
–	poem01.xsl  
An XML Example
Document Type Definition (DTD)
Specifying Appearance: XSL
An XLink Example
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/
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)

Cookies
•	Servers know users by IP address and port
–	Because that’s where they send the Web pages

•	Cookies preserve “state”
–	Server sends data to the browser
–	Browser later responds with the same data
•	A unique code (server-side state)
•	Information about the user (client-side state)
Uniform Resource Names (URN)
•	Persistent URLs (www.purl.org)
–	http://purl.oclc.org/OCLC/PURL/FAQ/
Summary
•	Learning to build simple Web pages is easy
–	Which is good news for the homework!

•	All documents are structured documents

•	XML is a flexible markup language toolkits

•	The key is to understand its capabilities
–	XML editors can hide much of the complexity

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 pixels
•	Layout (three dot, lines)
•	Dot pitch (0.26, 0.28)
•	Refresh rate (60, 72, 80 Hz)
Some Questions
•	How many images can a 64 MB flash card store?
–	But mine holds 120.  How?

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

•	But in reality images don’t have these problems
–	How do we get around these problems?
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
Discussion Point: JPEG vs GIF in Web images
Hands on Point: 
Convert between formats
•	Load and save two images
–	http://www.umiacs.umd.edu/~daqingd/image1.jpg
–	http://www.umiacs.umd.edu/~daqingd/image2.gif

•	Download the two images, use MS photo editor convert each to the other format, and compare the quality and the size. 

•	Increase the compression rate for image1.jpg, and compare the quality
Discussion Point: When is Lossless Compression Important?
•	For images?

•	For text?

•	For sound?

•	For video?
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 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)
Basic Audio Coding
•	Sample at twice the highest frequency
–	One or two bytes per sample

•	Speech (0-4 kHz) requires 8 kB/s
–	Standard telephone channel (1-byte samples)

•	Music (0-22kHz) requires 88 kB/s
–	Standard for CD-quality audio (2-byte samples)
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

Music Compression
•	Opportunity:
–	The human ear cannot hear all frequencies at once
•	Approach:
–	Don’t represent “masked” frequencies
•	Standard: MPEG-1 Layer 3 (.mp3)
Transmission
•	Download
–	Transfer the whole file, then start replay
–	Can be very slow for large files

•	Streaming
–	Play the file as it is received
•	Also suitable for live broadcasts
–	Requires a sufficiently fast connection
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)
Streaming Audio and Video
•	Buffering a portion of audio/video
•	Playing along with receiving
•	Interrupted when Rebuffering.
Hands On: RealPlayer
•	View streaming real video at http://www.glue.umd.edu/~oard/teaching/690/fall03/syllabus.html 

•	Pay attention to buffering

•	Look at the dropped packet statistics and the bandwidth monitor
–	Go to “Tools/playback statistics”
Project
•	Teams of 3
–	Best if you have complementary skills

•	Solve a real problem
–	Choose the standard one, or invent your own

•	Must integrate at least two technologies
–	Web, database, streaming media, programming
The Apollo Archives
•	Text 
–	Transcripts, press releases, manuals, flight plans, reports, books, oral histories
•	Video
–	Launch, movie film, television, splashdown
•	Audio
–	Radio, onboard recordings, interviews, press conferences
•	Images
–	Preflight, launch, onboard, splashdown, postflight

http://www.hq.nasa.gov/alsj
Possible User Groups
•	Museum visitors, in person

•	General public, over the Web

•	Children, on CDROM in school

•	Historians, with a search system