Ch02_Hypertext Hypermedia

8/13/2019 Ch02_Hypertext Hypermedia

http://slidepdf.com/reader/full/ch02hypertext-hypermedia 1/35

To understand hypermedia structures

To understand the working of world wide web

To understand how to put multimedia on to the web



A multimedia document is a document which is comprised of information coded in at least one

continuous (time-dependent) medium and in one discrete (time-independent) medium.

A document architecture describes the connections among

the individual elements represented as models:

The manipulation model describes all operations

allowed on the document.

The presentation model defines how the document

could be presented, e.g., as a web page, or an interactive

story book.

The representation model defines the protocol for

exchanging the information among different computers

and the format for these data.

Content

Structure

Presentation Manipulation

modelmodel

Representation model



Document structure is the logical organisation of the information, i.e., the contents. Traditional

documents, such as a book, may contain only text and still images. They can be organised linearly.

The logical structure will be, for example, chapters, sections, subsections, paragraphs.

When documents are exchanged, everything about the document have to be transfered. Theseinclude:

the contents

the structure

the presentation

Therefore, it requires some way of describing the structure and the presentation of the documentalong with the contents.

In contrast to traditional document, hypertext and hypermedia have as their major property, a

non-linear information link .



A hypertext structure is a graph, consisting of

nodes and edges.

The nodes are the actual information units.

The edges provide links to other information

units.

One can follow the edges (arrows or links) to

navigate through the document. The root of thearrows are known as anchors.

Hypermedia

HypertextMultimedia

Hypertext refers to a document containing purely

text, or sometime some images but no continuous

media, with non-linear links, while Hypermediarefers to multimedia systems that include non-

linear structure of information units.

There have been a number of hypertext systems before the recent bloom of World Wide Web, e.g.,Apple’s Hypercard.



When exchanging the document, we need to transfer the contents as well as the structure and the

presentation of the document. To specify the document structure and how it is presented, we need

to put in commands into the document. These are known as markups. There are in general two

kinds of markups: a) logical and b) visual.The logical markups marks the document

elements according to their functions and

relations with other elements, e.g., chapter,

section, paragraph. It does not tell how the

elements looks.

The advantages of logical markups are:

The document structure is explicit, thus theorganisation of information is clear.

It is easy to maintain the consistent look of

the document.

It requires a more powerful process to render

the document.

The visual markups defines how the elements

are rendered, for example, a chapter title is

formatted in Helvetica Bold 24 point, while a

section heading is formatted in Times Roman

Bold 20 point.

With visual markup, the logical structure is lost.

The visual effects of the elements are explicit.

It is easier to keep the fidelity.

It is easier to render the document.

It is hard to maintain the consistent look of

the document.



Examples of logical and visual markups

Logical Markup

\chapter{Interlockings and state machines}

\begin{chapsum}

This chapter describes the dynamic states of

track networks and a method of modellinginterlockings using deterministic finite

state machines.

\end{chapsum}

\section{States of a network}

Recall from Chapter˜\ref{chap-comp}, the type

\htype{:Tcir} representing track circuits,

the type \htype{:Point} representing

points and the type \htype{:Signal}

representing compound signals contain functions

returning the states of the components.

\begin{figure}[htbp]

\includegraphics{stat.eps}

\caption{The network state}

\end{figure}

Visual Markup

\font{Helvetica}{b}{24pt}

{Interlockings and state machines}

\indent{1in}{1in}

This chapter describes the dynamic states oftrack networks and a method of modelling

interlockings using deterministic finite

state machines.

\endindent

\font{Helvetica}{b}{18pt}{States of a network}

\indentline

Recall from Chapter˜\ref{chap-comp}, the type

\texttt{:Tcir} representing track circuits,

the type \texttt{:Point} representing

points and the type \texttt{:Signal} representing

compound signals contain functions returning the

states of the components.

\center

\includegraphics{stat.eps}

\font{Roman}{b}{14pt}{The network state}

\endcenter

The two kinds of markups are often used together, mixed inside a single document.



A document can be viewedin these two aspects at the

same time. In the diagram on

the right, if we start from the

top, we will see the logicalstructure of a document. If we

start from the bottom, we will

see the presentation aspect of

the document.

Chater

chaptertitle

sections

section1 section2

chapter

front

section3

book

page1 page2 page3

block block block

contents

Logical structure

Presentation structure

chapterover-

view



Since the beginning of 1980, the need of making publication in electronic form has be growing

rapidly. In order to facilitate document exchange, ANSI and then ISO developed standards for

document markups. The ISO standard (ISO:8879, 1986) specifies a Standard Generalised Markup

language (SGML).

Since there are numerous kinds of documents, SGML does not specifies a single markup language,

instead, it specifies how to define markup languages, therefore, SGML is a meta-language. Thus,

SGML is very complex language.

SGML source

document

document

formatted

style

information

program

Presentation



Probably, the most popular document markup language nowadays is HyperText Markup

Language(HTML). It it the primary language of the World Wide Web (WWW). HTML is an

application of SGML.

Tim Berners-Lee and Robert Caillau both worked at CERN, an international high energy physics

research centre near Geneva. In 1989 they collaborated on ideas for a linked information system that would

be accessible across the wide range of different computer systems in use at CERN. At that time many people

were using TeX and Postscript for their documents. A few were using SGML. Tim realized that something

simpler was needed that would cope with dumb terminals through high end graphical X Windowsworkstations. HTML was conceived as a very simple solution, and matched with a very simple network

protocol HTTP.

CERN launched the Web in 1991 along with a mailing list called www-talk. Other people thinking

along the same lines soon joined and helped to grow the web by setting up Web sites and implementing

browsers, such as, Cello, Viola, and MidasWWW. The break through came when the National Centre for

Supercomputer Applications (NCSA) at Urbana-Champaign encouraged Marc Andreessen and Eric Bina to

develop the X Windows Mosaic browser. It was later ported to PCs and Macs and became a run-away sucess

story. The Web grew exponentially, eclipsing other Internet based information systems such as WAIS,

Hytelnet, Gopher, and UseNet.

EXCERPT FROM http://www.w3c.org/MarkUp/#historical



The Timeline of HTML

- HTML 1992 The start of the WEB and HTML- HTML+ A set of modular extensions to HTML

- HTML 2.0 Nov. 1995 An IETF Standard (RFC1866)

- HTML 3.0. 1995 Submitted as an Internet Draft. Much richer than 2.0.

Backward compatible with HTML 2.0. Features added

include tables, simple formatting style

- HTML 3.2 Jan. 1997 Even more features are added. These include tables,

applets, text-flow around images, superscripts and

subscripts, and so on

- HTML 4.0 18 Dec. 1997 Supports more multimedia options, richer tables, frames,

embedded objects, scripting languages, style sheets, better

printing facilities and internationalisation of documents

- HTML 4.01 24 Dec. 1999 Fixed a number of bugs in HTML 4.0

- XHTML1.0 26 Jan. 2000 The Extensible HyperText Markup Language - AReformulation of HTML 4 in XML 1.0



A HTML document is actually a text file. This has a big advantage over any binary format. Itis much easier to transmit, to process and to debug.

There are now many tools for preparing HTML documents, e.g., Netscape Composer,

Macromedia Dreamweaver, Adobe Pagemill, MS Frontpage, . . .

It is possible (in theory and in some practical situations) to edit a HTML document using a

text editor.

To edit the HTML directly, you may use some special text editors, such as HomeSite,

HoTMetaL, emacs with HTML-mode, . . .

There are now many converters and filters to convert files in other formats into HTML, such as

converters for LATEX, MS Word, WordPerfect, FrameMaker, . . .



A HTML document is enclosed by a pair of tags <HTML> and </HTML>. It should contain at

least two parts: the head and the body.

<HTML>

<HEAD>

<META NAME="Author"

CONTENT="Wai Wong">

<TITLE>simple document</TITLE>

</HEAD>

<BODY>

<H1>A sample HTML document</H1>

<HR WIDTH="100%">

<P>Some text.

</P>

<HR WIDTH="50%">

<ADDRESS>

Copyright 2000 by Wai Wong</ADDRESS>

</BODY>

</HTML>

The elements in the <HEAD> part are used for

defining informations about the document.

They will not be displayed on a browser.

They may be used by the server to search

for information, such as keywords anddescriptions.

The elements in the <BODY> part will be

shown by a browser. The elements are markedby tags, <XXXX>. There are two kinds of tags:

opening tags required a matching closing

tag, e.g., <H1> and </H1>.

tags without matching closing tags, <BR>.



4.1.1 Elements in the <HEAD> part

<TITLE> Specify the title of the document. Will be displayed at thetitle bar of the browser window

<BASE> Specify a document’s base URI explicitly

<SCRIPT> Place a script within a document

<STYLE> Allow authors to put style sheet rules in the head of thedocument

<META> Used to identify properties of a document, e.g., author,

expiration date, a list of keywords, etc. and to assign values

to those properties

<LINK> Define a link in the head section to convey relationship

information

<OBJECT> allow the author to control whether data should be rendered

externally or by some program



<P> Paragraph. Although the end tag is optional, the standard encourage authors to use

proper end tag.

<H1> heading. There are 6 levels, i.e., <H1> to <H6>.

<UL> Un-ordered list. A list of item starting with a dot ( ). Each item is marked by

<LI>. . . </LI>

<OL> Ordered list. A list of numbered items. each list must have one or more items.

<DL> Definition list. Each item of a definition list consists of two parts: a term which is

marked by <DT>, and a description which is marked by <DD>

<PRE> Pre-formatted text. In handling pre-formatted text, visual user agent may leave

white space intact, may render text with fixed-pitch font, and may disable automatic

word-wrap.

<DIV> Grouping element. For marking the text as a block level element without any

formatting information defined. It is expected that this element is used with the id

and class attributes, and together with style sheet to defined formatting information.This provides a means of extending the HTML language by authors.

<BLOCKQUOTE> Block quotation. Usually, visual user agent will format this element as an indented

block.

<FORM> Form. It acts as a container for form controls. In addition to form controls, it can

contain other text and markups.<HR> Horizontal rule.

<TABLE> Table. Tables are divided into rows of data cells. Each row is marked by <TR> and

each data cell is marked by TD.

<ADDRESS> Address. For authors to supply contact information for a document.

<SCRIPT> Script. To place a piece of script in a document.<NOSCRIPT> This element allows authors to prove alternate content when a script is not executed.



Other elements that can appear within a block are listed in table below.

Font style <TT> <I> <B> Change the font style to typewriter, italic and bold.Font size <BIG> <SMALL> Change the font size large or small.

There are more elements that are allowed in the <BODY> of a HTML document. See the HTML

4.01 specification document for more details.



How web pages arrive to your desktop? The browsers and the servers communicate using the

HTTP protocol.

1. The browser initiates a connection

by sending a GET command,optionally with some header

information telling the server how

information should be returned.

2. The server processes the request

and sends back the required

document.

3. The browser processes thedocument and displays it on

the screen.

4. It will send out more requests,

probably to a different server if thereceived document includes linked

elements.

server

HTTP

HTML documents

server

HTTP

HTML documents

Network

Browser

Hyper links



HTTP is the basis for the World Wide Web. It is a very simple protocol. There are two types of

messages in HTTP:

Requests the client (user agent) sends out this

type of messages to the server. The formatof the request messages is:

request-line

headers (0 or more)

blank line

body (only for a POST request)

The request-line has three parts: request,

request-URI and HTTP-version. There are

only three different requests: GET, HEAD

and POST. For example, a simple request

is:

GET / HTTP/1.0

Responses the server responses to the client’s

request by sending back this type of messages. The format of the response

messages is :

status-line

headers (0 or more) blank line

body

The status-line also has three parts:HTTP-version, response code and response

phrase. This tells whether the request was

successful. The body contains the data

requested. A sample status line is:

HTTP/1.0 200 OK



Why does the World Wide Web grow so quickly?

It provides a uniform, graphical user interface to many Internet services, such as mail, news,

ftp, archie, and so on.

It provides a universal way of finding information.

It provides a flexible way to organise and link information.

The Universal Resources Locator (URL) is the common address for finding information on the

Internat. It is specified in RFC1738, Dec. 1994.

http://www.comp.hkbu.edu.hk/˜comp3600/index.html

scheme host path/data name



The general form of a URL is:

scheme

:

scheme-specific-part

Commonly used schemes are:

Scheme Data type Sample URLfile data files file:/user/home/doc/myfile.txt

http HTML file http://www.hkbu.edu.hk/index.html

news News group news:comp.multimedia

gopher Gopher server gopher://gopher.toolbox.orgtelnet telnet connection telnet://faith.comp.hkbu.edu.hk

mailto email address mailto:[email protected]

Links are defined as anchors in HTML documents:

<A HREF="http://www.comp.hkbu.edu.hk/index.html"> Home page of my

department</A>



URLs only specify the location of a resources. Since they may often be moved and changed, a

name can be associated to a resource. This name is known as Uniform Resource Names (URNs)

which are intended to serve as persistent, location-independent, resource identifiers. All URNs

have the following syntax:

URN urn: NID : NSS

where NID

is the Namespace Identifier, and NSS is the Namespace Specific String. The

leading “urn:” sequence is case-insensitive. The Namespace ID determines the syntactic

interpretation of the Namespace Specific String.

URLs and URNs are collectively known as Uniform Resource Identifiers (URIs). Therefore, in the

specification of HTML, the links and anchors are called URIs.



A HTML document may include or link to many different kinds of informations, e.g., images,

sounds, animations, . . . Browsers recognise them using a scheme called MIME types. MIME

stands for Multipurpose Internet Mail Extension.

How does this scheme work?

1. Each document may belong to a type specified by the MIME types scheme.

2. The type is recognised by the browser based on the file name extension.

3. The types are specified in a file .mime.type (in UNIX and similar systems).

An example of .mime.type file

#mime types added by Netscape Helper

type=image/gif desc="gif image" exts="gif"

type=audio/x-pn-realaudio desc="RealAudio" exts="ra,ram"

type=audio/midi desc="midi" exts=".mid,.midi"

type=audio/x-wav desc="WAV Audio" exts="wav"type=application/postscript desc="Postscript Document" exts="ai,eps,ps"

type=application/pdf desc="Portable Document Format" exts="pdf"



Of the numerous types of media, popular browsers can handle internally a small number of them,

for example, usually, only GIF and JPEG images can be handled by browsers.

<IMG SRC="images/pattern.gif"

ALT="COMP3600 home" HSPACE="10" VSPACE="10"

HEIGHT="400" WIDTH="600">

The SRC attribute tells where the image file is.

The ALT attribute gives the text to be displayed if a browser cannot handle this image.

The HSPACE and VSPACE attributes specify the space between the image and the

surrounding elements.

The HEIGHT and WIDTH attributes specify the size of the image.



What will happen when the browser processes this tag?

It sees the image file name images/pattern.gif

It request the file from the server

It looks at the .mime.type file and finds that the suffix .gif corresponds to the type

image/gif

Since this is a type of media that the browser can handle, it renders the image on the page



For other types of media, there are basically two means of handling them:

Plug-ins are extensions of the browsers. The media handled by the plug-in will be shown withinthe browser window. When a document whose type is handled by a plug-in is received, the

plug-in is automatically started by the browser.

Helper applications are separation programs and executed as a separate process. A helper

application usually creates and displays the media on a separate window. But some candisplay the media within the browser window. The browser uses a file .mailcap to

configure which helper handles which type of media.

An example of .mailcap file

#mailcap entry added by Netscape Helper

audio/x-pn-realaudio;raplayer %s


audio/midi;playmidi %s


application/postscript;ghostview %s


application/pdf;acroread %s



Since the web is becoming more and more popular, more and more hypermeia documents are

delivered on the web. Because many hypermedia documents are very large in size, to download the

whole document before playing it takes a long time.

Streaming is a method of showing multimedia elements on the web without a long initial delay.

The browser requests the document

After receiving and buffering the initial part of the document, it starts showing the document

without waiting for the completion of the transfer

Many continuous media can be handled in this way:

Sound — RealAudio (RealPlayer)

Music (MIDI) — LiveUpdate’s Crescedo, Yamaha’s MidiPlug

Video — RealVideo (RealPlayer)

Animation — Macromedia’s Shockwave

Virtual reality — VRML player



This technology requires

either a plug-in or a helper application to handle the media

an application program to prepare the media

the server is configured to recognise and to serve the media



There are three favours: Shockwave for Authorware, Shockwave for Director, and Shockwave for

Flash.

The procedure for creating the pieces:

1. Using the applications, e.g., Authorware, to create the pieces, pay special attention to the

requirements of the Web. (Refer to the Multimedia Applications Handbook for more details on

creating shocked pieces.)

2. Using the tool provided by the application, e.g., Authorware Afterburner, to create the

‘shocked’ piece.

3. Embed the piece into a HTML document using the following tag (in Netscape).

<EMBED SRC="myfile.aam" WIDTH=640 HEIGHT=480

TYPE="application/x-authorware-map"

PULGINPAGE="http://www.macromedia.com/shockwave/download/altern

WINDOW=onTop PALETTE=Background>

4. Upload all required files to the server and configure the server to recognise the media type.



XML stands for Extensible Markup Language. It is the universal format for structured documents

and data on the Web. XML 1.0 became the recommendation by W3C in February 1998. It is still

in active development. Since the release of XML 1.0, a number of related specifications have been

released and more are being developed.

XML is a SGML application. The major goal of XML is to allow authors to put the structured

information into a document. The visual information for rendering the document are usually

specified in a separate object. Cascade Style Sheets (CSS) or Extensible Style Language (XSL) are

often used for this purpose.

XML is more powerful because it is extensible. It defines very small number of tags, but it allows

the authors or developers to define their own tags. However, when defining new tags, one has to

follow certain rules. A document following these rules is known as a well-formed document. The

rules are:

1. The XML declaration must begin the document.

<?xml version="1.0" standalone="yes"?>

2. Elements that contain data must have both start and end tags, for example, a paragraph must

be enclosed in the tags <P> and </P>.



3. Elements that do not contain data and use only a single tag must end with />, for example, a

tag to draw a horizontal rule should be <hr width="50%"/>.

4. The document must contain exactly one element that completely contains all other elements,i.e., the root element.

5. Elements may nest but may not overlap.

Correct nesting<B><BIG>Large bold</BIG></B> Incorrect overlapping<BIG><B>Large bold</BIG></B>

6. Attribute values must be quoted, for example, it is wrong to write <hr width=50%/>.

7. The characters < and & may only be used to start tags and entity references, respectively.8. The only entity references which appear are &, <, >, ' and ".

The way in which one extends XML is to create a Document Type Definition (DTD). The DTD

defines a list of elements, attributes, notations and entities that are allowed in an XML document.

The DTD can be internal, which means it is embedded within the XML document, or external,

which means it is in a separate file.

An XML document is valid if it satisfies all the constraints specified by the DTD.



SMIL stands for Synchronised Multimedia Integration Language. It is a new markup language that

became a W3C recommendation on 15 June 1998.

There are a few player that can play SMIL documents. RealPlayer G2 is one of the best players.

Features of SMIL include:

Capable of handling many types of media, such as sound, image, video, text, and so on.

The author can specify where the elements are presented on the SMIL presentation pane.

The author can specify when the elements are presented.

It allows choice from alternative elements to be made according to runtime system status.

A new version of SMIL, known as SMIL-Boston, is in W3C working draft as on 20 February

2000. It adopts a better defined Document Object Model (DOM) and more in favour to XML

syntax convention. It is divided into modules. Each module can be re-used in other XML

applications, such as XHTML.

Like HTML file, a SMIL file starts witha <smil> tag, and it is divided into two

parts: a <head> part and a <body>

part. The <head> part contains some

information about the whole SMIL file.The <body> contains the instructions

of how to present the multimedia

elements.

<smil><head>



</head>

<body>

</body>

</smil>

The <layout> element is the only mandatary element in the <head> part. It determines how

the elements in the document’s body are positioned on an abstract rendering surface. It may

contain the <root-layout> and the <region> elements.

The <root-layout> element specifies the root visual presentation space for the entire SMIL

file. The <region> element specifies an abstract presentation space that may have a name and

become the target of some media elements, i.e., you can specify that a certain element to be

displayed in a certain regain.

A l f SMIL l



An example of SMIL layout

<layout><root-layout height="425" width="450" background-color="black"/>

<region id="title" left="50" top="150" width="350" height="200"/>

<region id="full" left="0" top="0" height="425" width="450"

background-color="#602030"/>

<region id="video" left="200" top="200" height="180" width="240"

z-index="1"/>

</layout>

Root

titel

video

full

Th b d t t i i f ti th t i l t d t th t l d li ki b h i f th



The <body> part contains information that is related to the temporal and linking behaviour of the

document. Two most important elements that can appear in the <body> part are:

<seq> The children of this element form a temporal sequence, i.e., they will be presented

one-by-one.

<seq>

<video src="slide_narration_video1.rm" region="video"/>

<audio src="slide_narration_audio1.ra"/>

<video src="slide_narration_video2.rm" region="video"/>

</seq>

<par> The children of this element can overlap in time. The textual order of appearance of

children in a par has no significance for the timing of their presentation.

<par>

<audio src="map_narration.ra"/>

<img src="map.rp" region="full" fill="freeze" dur="20s"/>

</par>

The other elements that are allowed in the <body> part are the media object elements. They allowthe inclusion of media objects into a SMIL presentation. Media objects are included by reference

(using a URI).



Document model, document structure

Hypertext and hypermedia

Document markups

HTML documents

Multimedia on the World Wide Web

New markup languages: XML, SMIL

Ch02_Hypertext Hypermedia

Documents

Transcript of Ch02_Hypertext Hypermedia