An Introduction to Internetworking

What is Multimedia ?

What is the WWW ?

What is the relation (difference) between Internet and the WWW ?

Puedo escribir losversos mas tristesde esta noche

Fire !!

Image Formats

How to specify which color should display this pixel

The RGB• For every pixel there are 3

bytes (24 bits) that describe the level of Red, Green and Blue

• (255,0,0) is pure Red• There are 256*256*256

different combinations• The problem is that not

every computer can display all this colors

The Palette

• There is a palette with different colors

• A number (usually one byte long) identifies each color

• There are 256 possible colors if the number is one byte long

Storing & Retrieving Multimedia

CODEC

Compression may result in loosing original information

The GIF Format• Graphic Interchange Format

• Originally supports 256 different colors

• Very efficient for simple images

• Three variations: GIF87a, GIF89a (added transparent color) and GIF24 (24-bit colors)

• Uses the LZW compression procedure which 20-25% compression

• Copyright problems with LZW !!!

The JPEG Format

• For photograph-quality images• Supports 24-bit color• Powerful compression algorithm which can

reduce to 1/20 the original size• Lost of information during compression• Bad for simple images • Takes more time to decodify• Together with GIF the most popular on the WEB

Digitizing Sound

• 8 bits describe the amplitude of the wave (16 bits for stereo)• The quality of the digitized sound depends on how often a sample of the wave is taken

Sound Formats & Storage

• Qualities vary from 8Khz to 44.1 Khz

• This means something about 150KB to 10MB per minute

• MPEG is the world standard in audio and video compression. It is a technical standard (a mathematical formula) not an algorithm

• Can compress to 1/10th or 1/20th

Other Sound Formats• AU: Unix-Sun, availability, basic, no

compression

• AIFF: Apple, quality compression 6:1

• WAV: MS-Windows, availability, no compression

• Midi: based on the “palette” idea: it characterizes a sound by the instrument, volume and duration. No compression but needs small amount of space

Video• A succession of frames

• Compression in video is a key issue because they may take a lot of resources ! Without compression some 15-20 minutes of video may take hundreds of MB.

• Mov, avi, mpeg1, mpeg2• Quicktime, Vivo, RealVideo

Compressing video

• Spatial compression

• Temporal compression

Redundant information: the whole area is white

This information is new

What is the WWW ?• It is a protocol for publishing and retrieving

documents in the internet.

• Based on servers which provide information (files) to any client which speaks the same language

• a client needs to know how to request something from the server

• a server needs to know how to send the information back

The WWWwww.this.com

THE INTERNET

www.that.com

What does a computer needs to be a WWW server ?

•

• It just needs a www server program and to be attached to the internet.

• There are many versions including many for free like APACHE or JWSDK

The web server program

Webresources

request

answer

THE INTERNET

What does a computer needs to be a WWW client ?

The web client programrequest

answer

THE INTERNET?

?

There are also many different web-client programs

Some History • In 1945 Vannevar Bush “As we may think”:

computers should be used to support the intellectual work of the humans, a very advanced idea in times when computers where just “number eaters”

MEMEX (MEMory EXtension)• Memex should permit the associative retrieving and

management of ideas and events accumulated in the whole culture.

• Consider a device like a library and a mechanical archiving system where individuals can store books, registers and communications and because it works mechanically, it can be consulted at high peed and mechanically.

XANADU• Ted Nelson: Hypertext is non-sequential writing and

collections of text in combination with other material, which thanks to its structure require an automatic displaying devices. A hypertext should be typically non-linear, multi-branched and voluminous with various options for the user.

NLS (oNLine System)• In 1968, Douglas Engelbart proposes in the description of

NLS a system where there is no data processing like numbers but ideas like structured text and y graphics, giving more flexibility for the manipulation symbols in a natural way. This idea was used by Xerox to develop a computer system where a mouse was used as input device for manipulating information. This system inspired Lisa, the forerunner of Macintosh

Hypermedia: the way the WWW is organized

• WWW: began in 1989 at (European laboratory of particle physics) CERN designed to easily interchange documentation between scientists.

• At the beginning was just text, graphics now it includes many resources -> much bigger files, more traffic on the Internet

What is an URL ?

• Universal Resource Locator: is the identifier of a resource (document) stored in a www-server and has all information necessary to retrieve it.

• Examples:

http://www.dcc.uchile.cl/index.html

ftp://collide.informatik.uni-duisbrg.de/publications/paper1.ps

file:///home/nbaloian/documentation/tutorial.doc

http://www.waseda.ed.jp

What does it mean ?

http://www.dcc.uchile.cl/index.html

The protocol:

http: hypertext transfer protocolftp: file transfer protocolfile: retrieve local file...

The WWW server’s Internet address

The name of the resource (file) itself

Hypertext and HTML When the resource is retrieved with http it means that it is a Hypertext. The structure is specified by

the HyperText Markup Language (a subset from SGML)

HTML

Other (graphic, sound, video) files

HTML

• HTML 1.0: Multiple level of headings, paragraphs, Hypertext references Special formatting for lists items

• HTML 2.0: Inline Images, Fill-out forms (this works with CGI scripts)

• HTML 3.0: Advanced layout control Banners, Customized lists, Tables, etc

HTML 1.0<HTML>

<h1> This is the first level of title </h1>

<h2> This is the first level of title </h2>

<h3> This is the first level of title </h3>

<p> this is a paragraph containig text that will be displayed in a normal way vla bla bla bla bla bla bla bla bla bla bla bla vla bla bla bla bla bla bla bla bla bla bla bla

<p> this is another paragraph

<li>point 1

<li>point 2

<li>point 3 <hr>

<a href=http://www.dcc.uchile.cl> this is a link to the dcc page </a>

</HTML>

HTML 1.0

HTML 2.0<title> Window to Armenia </title><body BGCOLOR=#FFFFFF BACKGROUND=ashwhite.gif><center><font size=+5><h1>WINDOW TO ARMENIA </h1><img src=hayastan2.jpg></font></center><a href=himno.au> <img align=left src=armweb.gif><img align=right src=gerb2.gif> </a><font size=+3><center><hr><b>ARMENIA,<br><i>Where Miracles are still Possible</i></font><hr><font size=+0><i><a href=himno.au>click here to listen to the Armenian National Anthem</a></font><hr><br><ul><b><font size=+2 color=#FFFFFF><li><a href=arts.html>Arts</a><li><a href=history.html>History</a><li><a href=geog.html>Geography</a><li><a href=tour.html>Tourist Information</a><li><a href=http://www.armeniaemb.org/investment/inestop.htm>Business Information</a><li><a href=http://www.arminco.com/news.html>News Arround Armenia </a><li><a href=language.html>Language and Literature</a>

Streaming over the Internet• At the beginning was just text, graphics now it includes many

resources -> much bigger files, more traffic on the Internet

• This means clients must wait a lot until the file is retrieved

• Instead of waiting until the whole document is downloaded the www-viewer may start playing the file when it has some data already.

Video file

Other resources for building better www sites

• Plug-ins• Java Applets• Java Script• Java Servlets• Java Server Pages• Php• JDBC• etc, etc, etc....

Plug-Ins

Plug in stored in local disk.

The server supplies only the data. The player is stored locally at the client’s computer

Java Applets

<applet code=Animator.class ><parameters></applet>

Java programrunning on the client

Html

Animator.class

Applets are java programs which are downloaded with the HTML page.

Animator.class

Java Script

Java programrunning on the client

Html & Script

The code of the java program is written directly in the HTML page

<script language = “JavaScript”>the code</script>

Java ServletsThe code of the java program which runs on the serverand can dynamically produce HTML content accordingto the particular situation (the client of a bank)

MyServlet.class

HTML-page with a reference to a servlet

HTML from page

HTML from servlet

Java JDBCA database SQL interface for remotly controllinga database from a servlet

MyServlet.class

HTML-page with a reference to a servlet

HTML from page

HTML from servlet

Remote database

Thank You !