Hyper media: on Web media: on Web

(1)

Hypermedia: on Web

Sabin Corneliu Buraga

Hyper

Hyper media: on Web media: on Web

a <Web />.NET 2002 tutorial

Sabin-Corneliu Buraga

Faculty of Computer Science Faculty of Computer Science

““Al.I.Cuza” University of Al.I.Cuza” University of Iasi, RomaniaIasi, Romania [email protected]

http://www.infoiasi.ro/~busaco/

(2)

Hypermedia: on Web

Topics

• Introduction

• What is multimedia?

• What is hypermedia?

• Components of hyperdocuments

• Hypermedia on Web

SMIL and XHTML+TIME

• Examples

(3)

Hypermedia: on Web

Introduction

• Traditional media:

– Postal service – Newspapers – Publishing

– Telecommunications (phone) – Broadcasts (radio, TV)

• Personal vs. Mass communication

(4)

Hypermedia: on Web

Multimedia

We may define multimedia

communications as the field pertaining to the formation, storage, retrieval,

dissemination and usage of documents composed of multiple “media” such as

text , graphics , still images , animation ,

audio and video

(5)

Hypermedia: on Web

Multimedia (cont.)

• Media refers to a form of human interaction that is amenable to computer capture and processing, whereas multi signifies that several of those “media” are present in the same application or document

• We can call an application as a “multimedia”

one if it contains at least one time-continuous media (e.g. audio, video or animation) and

a time-discrete media (e.g. text or image)

(6)

Hypermedia: on Web

Multimedia (cont.)

(7)

Hypermedia: on Web

Multimedia (cont.)

• Benefits

– Video conferencing

– Collaborative systems – Distance learning

– Entertainment

• Enable a number of participants

to exchange various multimedia

information via Internet

(8)

Hypermedia: on Web

Hypermedia

• Background

– Vannevar Bush MEMEX (1945) – Ted Nelson

hypertext (1967)

• Hypertext systems are “a computer based medium for thinking and

communication” (Conklin, 1987)

• Non-linear writing

(9)

Hypermedia: on Web

Hypermedia (cont.)

• Information is stored in chunks, called nodes, which are linked

together to form a network of links

• Hypertext can be viewed as a form of non-linear writing where a user follows links between nodes

to access information

(10)

Hypermedia: on Web

Hypermedia (cont.)

• Hypermedia = multimedia + hyperlinks

• Hypermedia is multimedia hypertext

(11)

Hypermedia: on Web

Hypermedia (cont.)

• Nodes

• Links

– Static

– Dynamic

• Hypermedia document

• Storage

system (e.g. Internet)

– server side

• Browser

– client side

(12)

Hypermedia: on Web

Hypermedia documents

• Components

– Text (XHTML, WML, XML,…) – Image (BMP, EPS, TIFF, XBM,

GIF, JPEG, PNG, WBMP,…)

– Sound (MIDI, Waveform, MP3,…) – Animation/Video (AVI, MPEG,

QuickTime, Flash,…)

– 3D Worlds (VRML, X3D)

(13)

Hypermedia: on Web

… on the World-Wide Web

• Why Web?

– Strengths

• Convergence of technologies

• Integrated services

• Ease of use

• Platform independence

• Short development time

• Flexibility & mobility

(14)

Hypermedia: on Web

… on the World-Wide Web

• Why Web?

– Weaknesses

• Access

• Bandwidth

• Loading time

• Disorientation

• Superficial learning

(15)

Hypermedia: on Web

… on the World-Wide Web

• Synchronized hypermedia documents:

– Basic media objects, like video or audio, have intrinsic duration

– They can be temporally organized by the author which adds to the document a temporal structure called

the temporal scenario

– Edition and presentation operations are carried out at different times and by different users (authors, readers)

(16)

Hypermedia: on Web

… on the World-Wide Web

• Issues:

– Graphical, sound and video content can not be annotated by using

traditional markup languages

• Solutions:

– XML-based languages (e.g. SVG, VML)

– Open standards (i.e. PNG, MPEG)

(17)

Hypermedia: on Web

… on the World-Wide Web

• Web standards for authoring hypermedia presentations:

– SMIL (Synchronized Multimedia Integration Language)

• SMIL 1.0 (Aug. 1998)

• SMIL 2.0 (Aug. 2001)

– XHTML+TIME (Timed Interactive Multimedia Extensions for XHTML)

• HTML+TIME 1.0 (MSIE 4, 5)

• XHTML+TIME 2.0 (MSIE 5.5, 6)

(18)

Hypermedia: on Web

… on the World-Wide Web

• Advantages of SMIL

– Wide variety of basic multimedia objects – Rich set of operations on them

– Possibility to control the delivery of continuous media

– Interactivity & adaptability – Temporal style definitions

– Fast editing/presentation cycle – Platform independence

(19)

Hypermedia: on Web

… on the World-Wide Web

• Browsers (players)

– RealPlayer/RealOne – Oratrix GRiNS

– Internet Explorer 5.5 or later

• Authoring tools

– Oratrix GRiNS – RealNetworks

– Visual SMIL Editor

Faculty of Computer Science - Iasi, Romania

(20)

Hypermedia: on Web

Examples

• SMIL

<smil>

<head>

<layout type="text/smil-basic-layout">

<region id="r1" top="20" left="20"

height="200" width="300" />

<region id="r2" top="400" left="400"

height="100" width="50" />

</layout>

</head>

<body>

<par>

<video region="r1" src="video1.rm" dur="30s" />

<video region="r2" begin="3s"

src="http://www.infoiasi.ro/v/v2.mpeg"

dur="2min" repeat="2" />

</par>

</body>

</smil>

<par> or <seq>

<text> <textstream> <img>

<audio> <video> <animation>

(21)

Hypermedia: on Web

Examples

• XHTML+TIME

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<style type="text/css">

.time { behavior: url(#default#time2); }

</style>

<?IMPORT namespace="t"

implementation="#default#time2" ?>

</head>

<body>

<img class="time" begin="2" dur="5" src="csb.jpg" />

<table border="1" id=“t"

class="time" begin="0; t.end+2" dur="1">

<tr><td>Blinking table...</td></tr>

</table>

</body>

</html>

(22)

Hypermedia: on Web

Overview

• Introduction

• What is multimedia?

• What is hypermedia?

• Components of hyperdocuments

• Hypermedia on Web

• Examples

(23)

Hypermedia: on Web