week 4 lbsc 690 information technology multimedia
Post on 20-Dec-2015
216 views
TRANSCRIPT
![Page 1: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/1.jpg)
Week 4
LBSC 690
Information Technology
Multimedia
![Page 2: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/2.jpg)
Agenda
• Questions
• Muddiest Points
• XML
• Images
• Audio
• Transmission
• Project teams
![Page 3: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/3.jpg)
Muddiest Points
• Using other people’s pages
• Using FTP to get a Web page someplace
• Internal anchors
• Structure vs. appearance
![Page 4: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/4.jpg)
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)
![Page 5: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/5.jpg)
Discussion Point: Describing the Structure of Text
• Entities– Span– Type/Attributes
• Relationships– Part-whole– Is-a
![Page 6: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/6.jpg)
What’s a Document?
• Content
• Structure
• Appearance
• Behavior
![Page 7: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/7.jpg)
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
![Page 8: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/8.jpg)
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
![Page 9: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/9.jpg)
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”
![Page 10: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/10.jpg)
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
![Page 11: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/11.jpg)
An XML Example<?xml version="1.0"?>
<!DOCTYPE POEM SYSTEM "poem01.dtd">
<?xml-stylesheet type="text/xsl" href="poem01.xsl"?>
<POEM>
<TITLE>The Song of Wandering Aengus</TITLE>
<AUTHOR> <FIRSTNAME>W.B.</FIRSTNAME>
<LASTNAME>Yeats</LASTNAME>
</AUTHOR>
<STANZA>
<LINE>I went on to the hazel wood,</LINE>
<LINEIN>Because a fire was in my head,</LINEIN>
<LINE>And cut and peeled a hazel wand,</LINE>
</STANZA>
</POEM>
![Page 12: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/12.jpg)
Document Type Definition (DTD)
<!ELEMENT poem ( (title, author, stanza)* )>
<!ELEMENT title (#PCDATA) >
<!ELEMENT author (firstname, lastname) >
<!ELEMENT firstname (#PCDATA) >
<!ELEMENT lastname (#PCDATA) >
<!ELEMENT stanza (line+ | linein+) >
<!ELEMENT line (#PCDATA) >
<!ELEMENT linein (#PCDATA) >#PCDATA span of text a,b a followed by ba|b either a or ba* 0 or more a’sa+ 1 or more a’s
![Page 13: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/13.jpg)
Specifying Appearance: XSL
<xsl:template match="POEM">
<HTML>
<BODY BGCOLOR="#FFFFCC">
<xsl:apply-templates/>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="TITLE">
<H1>
<FONT COLOR="Green">
<xsl:value-of/>
</FONT>
</H1>
</xsl:template>
![Page 14: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/14.jpg)
An XLink Example……<poem xmlns:xlink="http://www.w3.org/1999/xlink"> <author xlink:href="yeatsRDFS3.xml“ xlink:type="simple">W. B. Yeats</author> <poems> <poem1 xlink:href="http://www.geocities.com/Athens/5379/yeats_index.html" xlink:type="simple">The Rose</poem1> <poem2 xlink:href="http://www.geocities.com/Athens/5379/yeats_index.html" xlink:type="simple">The Tower</poem2> </poems> </poem> ……….
![Page 15: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/15.jpg)
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/
![Page 16: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/16.jpg)
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)
![Page 17: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/17.jpg)
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)
![Page 18: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/18.jpg)
Uniform Resource Names (URN)
• Persistent URLs (www.purl.org)– http://purl.oclc.org/OCLC/PURL/FAQ/
PURL Sever
MyBrowser
PURL
URL
Resource Sever
URL
Page
![Page 19: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/19.jpg)
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
![Page 20: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/20.jpg)
![Page 21: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/21.jpg)
![Page 22: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/22.jpg)
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
![Page 23: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/23.jpg)
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!
![Page 24: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/24.jpg)
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)
![Page 25: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/25.jpg)
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?
![Page 26: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/26.jpg)
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
![Page 27: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/27.jpg)
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
……
![Page 28: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/28.jpg)
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
![Page 29: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/29.jpg)
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
![Page 30: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/30.jpg)
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
![Page 31: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/31.jpg)
Variable Compression in JPEG
37 kB (20%) 4 kB (95%)
![Page 32: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/32.jpg)
Discussion Point: JPEG vs GIF in Web images
• Which format should I use for images in my web pages?• Photos
• text images
• drawings
![Page 33: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/33.jpg)
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
![Page 34: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/34.jpg)
Discussion Point: When is Lossless Compression Important?
• For images?
• For text?
• For sound?
• For video?
![Page 35: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/35.jpg)
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
![Page 36: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/36.jpg)
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)
![Page 37: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/37.jpg)
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)
![Page 38: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/38.jpg)
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
![Page 39: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/39.jpg)
Music Compression• Opportunity:
– The human ear cannot hear all frequencies at once
• Approach:– Don’t represent “masked” frequencies
• Standard: MPEG-1 Layer 3 (.mp3)
![Page 40: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/40.jpg)
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
![Page 41: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/41.jpg)
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)
![Page 42: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/42.jpg)
Streaming Audio and Video
• Buffering a portion of audio/video
• Playing along with receiving
• Interrupted when Rebuffering.
Media Sever
Internet
Buffer
![Page 43: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/43.jpg)
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”
![Page 44: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/44.jpg)
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
![Page 45: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/45.jpg)
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
![Page 46: Week 4 LBSC 690 Information Technology Multimedia](https://reader030.vdocuments.mx/reader030/viewer/2022032704/56649d415503460f94a1c505/html5/thumbnails/46.jpg)
Possible User Groups
• Museum visitors, in person
• General public, over the Web
• Children, on CDROM in school
• Historians, with a search system