IIMS 96 contents
[ IIMS 96 contents ]

Implementing an interactive multimedia application on the World Wide Web

William Tan
University of Southern Queensland
This paper examines the design and implementation of an interactive multimedia application on the world wide web (WWW). The WWW is becoming one of the most important media for information sharing, collaborating, electronic publishing, and delivery of distance education materials. The process of selecting of a suitable WWW server, its installation and administration are discussed. The problems and limitations in designing and incorporating an interactive multimedia courseware and electronic journals in the hypermedia under Windows NT 3.5 operating environment are reviewed. Finally, the important aspects of instructional design of electronic material for WWW is examined.


Introduction

The world wide web was originally designed to use the client/server internet protocols to access a single uniform hypermedia document or a set of hypermedia documents from a remote site.

A client's program (a browser) uses a simple internet addressing scheme (a uniform resource locater, URL) that uniquely identifies a document located at the ethernet address of a remote host. The typical format of a URL is as follows

protocol://web.server.name[:port]/path, where the default value for port is 80.

To establish a connection with the information providing host (a web server), a browser transmits a standard transfer and communication Internet protocol (the Hypertext Transfer Protocol, HTTP), which is used to communicate and fetch hypertext objects from the remote web server.

Once the connection is established, the web server can either retrieve the information requested and send it together with a status code to the browser, or execute an external program called a Common Gateway Interface (CGI) program or script that will handle information requested and will return the appropriate document or will generate a requested document on the fly. The CGI scripts are commonly used to retrieve information that clients enter into HyperText Markup Language (HTML) forms so that they can access the server database or pass it along via email. They can also enable clients to link to other documents, or process the pre-defined coordinates in inline images or map files. With Windows CGI, data from Windows applications such as MS Access, Excel and Visual Basic can be accessed.

After the client browser receives the requested information, it then formats and displays on the local computer screen the retrieved information which is coded in HTML. The markup language defines areas of textual or graphic information by tagging them with a specific format. HTML tags are defined functionally rather than visually. Different browsers will interpret the tags differently according to configuration settings, supported fonts, and windows environment.

If the information provided by the web server has many inline images, then many separate and individual client/server connections will be necessary to send all inline images. This will degrade the performance of the HTTP server and will prolong the information retrieval process. To solve this problem, some browsers such as Netscape has added multithreaded connections and cached inline images as well as maintain an open connection until the whole transaction is complete.

At the end of the client/server communication, either the client browser or web server will terminate the connection. The HTTP does not retain any information about a connection after a request is complete and therefore the F= is sometimes called a "stateless" search and retrieve protocol.

With the recent advance of Window's Graphical User interface (GUI), GUI browsers, such as Mosaic and Netscape, provide a user friendly interface and my navigation tools to make the browsing and information retrieval as easy as clicking few mouse buttons.

In order to make browsers more useful, they am designed to use the URLs to identify not only the web sites but also FTP sites, Newsgroups, Gopher menus, and other electronic email addresses.

These browsers with added GUI features and hypertext retrieval capability together with a large number of web servers using the internet as means of disseminating, communicating and selling information, have stimulated the explosive growth in the use of the world wide web for communication.

Over last couple of years, as the costs of communication and computing equipment have decreased to a level where more people can afford to own a PC and 'surf the internet, the population of internet users has increased exponentially to more than a few million users worldwide. The WWW is becoming one of the most important media for information sharing, collaborating, electronic publishing, and delivery of distance education materials.

Web server architecture

A web server is basically a host machine running the HTTP server software under one of the operating system platforms (UNIX, NT, OS, MAC, VMS).

When a normal HTTP request is made by a client, the HTTP server gets the path and keyword portion of the requested URL, which specifies the name of the hypertext document, or a CGI script on the directory of the host server, or some other resource available from the same host.

When the Internet traffic is heavy and client requests for repetitive multimedia objects, a web proxy server with cache may be used to facilitate access to the internet and to increase the internet capacity for clients, especially those on closed subnets.

The proxy server requires the full URL sent by the client, so that it has all the information required to relay the actual request to a remote server. It acts like a client to retrieve the hypertext document from a remote server and, a like a server when accepting HTTP requests from clients. If the caching is used for the proxy server, it will store the retrieved document into a local file for further use. The next time that document is requested, it just retrieves this same file, which is stored locally, without connecting to a remote server, thus speeding up retrieval time. However, it may be necessary to update and monitor locally stored documents and to erase all out of date and past use by date documents to free up some disk space at the cache.

Furthermore, a proxy server can be used to permit and restrict client access to the internet based on the client IP address, in order to selectively control access to the internet and subnets based on submitted URLs, to cache documents, and to convert data to HTML format readable by a browser.

Figure 1 shows the overall setup of a caching proxy server on a firewall host. The complete proxy server is designed to handle all the different protocols such as HTTP, FTP, WAIS, Gopher and NNTP. The cache speeds up of retrieval of commonly used multimedia documents.

Figure 1

Figure 1

WWW browsers

There are several types of browsers available for viewing HTML documents. Most web browsers are free and can be downloaded from the Internet for personal use and distribution.

The simplest type is the text based browser which can only display the textual parts of hypermedia documents and can hyperlink to another HTML document. The text based browsers cannot handle multimedia data nor display interactive multimedia presentations on the web.

There are standard windows based browsers which are capable of displaying different embedded graphic media such as JPEG (Joint Photographic Expert Group - a file format for a standardised image compression for continuous tone full colour or grey scale digital images) and GIF (Graphic Interchange Format - a data stream for the online transmission and interchange of raster graphic data) files. In general, if a standard window based browser cannot handle a media type, it can activate and launch an external viewer based on its MIME (Multipurpose Internet Mail Extensions) file type extension. For example, the Netscape browser can be set to launch an external MPEG (Moving Pictures Expert Group file standard which defines a bit stream file format for synchronised digital video and audio compressed to fit into a bandwidth of 1.5 Mbit per second) viewer for a file with MIME type extension of mpg. For most of the window based browsers, the viewing of multimedia document always requires the launching of external viewers.

Because a HTTP includes MIME header information in the protocol, every time a browser requests a document, it sends the web server a list of the MIME types it can support. The server maps file types and file extensions to standard MIME data types using a MIME mapping table. It then fulfils the request and sends back the MIME types which the browser can support.

Recently the enhanced window based browsers, such as Netscape V2.0, have been designed to provide the client plugin Application Programming Interface (API) which allows the extension of its browser with native support for additional new multimedia data type. These enhanced windows based browsers make the presentation of interactive multimedia materials possible on the web.

For example, the embedded plugin for the multimedia application such as MPEG player can play the MPEG video clips and can respond to client events such as mouse motion and clicking of buttons. A full screen plugin application for multimedia animated data type can play animation within the inner frame of a browser window. A hidden plugin application for MIDI player can play the audio midi music.

The advantage of employing a plugin application with re-entrant API calls is that the part of browser application frame that is not displaying multimedia data remains unchanged and its basic navigational and hyperlinking tools can still be available to users. Because a plugin application is allowed to fetch a URL with all network functionality of a standard browser client, multiple streams (objects containing URLs and multimedia data) can be requested progressively for viewing or play back; similarly, multiple simultaneous streams can be requested and, with data caching mechanism, can play back some interactive multimedia data type.

Most of the standard window based browsers have hard coded monolithical components to handle different protocols, data types and navigational buttons necessary to navigate the web. The disadvantage of this is that it limits the capability of browsers to dynamically handle the interactive content of a HTML document. The latest development of enhanced window based browsers such as the HOT-JAVA browser means it can handle dynamic object types and upgrade itself on the fly. That is, it can request the web server to dynamically link and provide the runtime JAVA code for the new object type and display the new object on the fly. Similarly, it allows new protocols such as those required by internet billing and cash transaction security, to be incorporated dynamically and, hence, the need for multiple different browsers to handle new or any proprietary protocols can be avoided. It should be noted that JAVA is a programming language and is used to create web ready applications and extend HTML with multimedia extensions.

These latest developments in internet browsing tools with the object oriented design, multithreading capability and platform neutral object file format facilitate the presentation of interactive multimedia objects on the internet and are independent of processor types and operating system platforms.

Therefore, using these enhanced window based browsers, we can now design and implement interactive multimedia courseware, electronic journals and any interactive multimedia applications that require interactivity of multimedia objects in real time.

WWW server selection and installation

The choice of a web server in this paper is limited to the cost effective Intel based Pentium PC server running under Windows NT Advance File Server 0.5.1 operating platform with native multi-threading support.

As our web services are mainly used for information dissemination, internal academic research, and development and distance education applications, the requests on our web server will he heavy but will definitely not exceed, say, one million requests per day (which translates to on the average not more than 12 transactions per second). We have chosen an Intel P90 NT web server because it is economical and has been shown to be capable of handling HTML documents with an average size of 5000 bytes (40,000 bits) at an average of 30 requests per second [Denny, 1995].

The bandwidth needed for a web server to handle, say, an average of 50,000 connections per day and 40,000 bits per HTML document, can be estimated, using the following formula

(average connections/day)/(24x60x60) x (average HTML document size) = 50,000/86,400 x 40 kb = 23.25 kb per second

The bandwidth capacity of our academic Internet can handle this estimated requirement. However, the average size of a multimedia document would be at least 10 times that of text based document. Hence, the bandwidth requirement will be at least 10 times that required for a text based document. Consequently, the capacity of the academic Internet may be saturated and a higher internet bandwidth will be required in future if more multimedia applications are to be implemented for the web.

The total number of transactions per second and the total data rate are important factors to consider. They can be used to determine whether the capacity of a web server is adequate to provide the intended services. The number of simultaneous connections which a web server can handle will mainly depend on the average size of HTML document being delivered, the line speeds of the web server and that of the clients. The number of concurrent tasks to run under an NT server system should be adjusted so that the overhead in scheduling of tasks would not overload the NT operating system.

During the selection process of a suitable HTTP server software, the performance of the server software and features such as security, logging mechanism, protocol support and server side includes, must be taken into considerations. The aspects of vendor's technical support, maintenance and upgrade services as well as whether the product is constantly being improved and developed to cater for new multimedia requirements and advances, are also needed to be taken into account in the selection process. Some features such as the support for multi-homing, remote server administration, web maintenance tools and built in keyword indexing and search engine may be desirable but not mandatory.

The server side includes is the common name for server parsed HTML files. Server side includes can include files as well as the values for environment variables such as dates and authors names in a HTML file. The web server scans the HTML file with the extension .HTP (HyperText for server Parsing) for special commands and will replace these commands with appropriate data.

The feature of virtual servers for a single web server with more than one internet (IP) addresses allows different web home pages for different IP addresses each with its own domain name. However, the Windows NT 0.5 system allows only 5 IP addresses, whereas, the Windows NT 0.5.1 system can have up to 100 IP addresses. The first 5 IP addresses can be entered from the Windows NT control Panel, and additional IP addresses must be entered using the Windows NT Registry Editor. Each virtual server has its own environment and configuration that is, each virtual server can permit its own directory browsing, launch its CGI script execution or authenticate its own client requests.

A recent web servers survey [Hoffman, 1995] reports that the four most popular Windows based NT HTTP servers are: (a) Netscape-Communications, (b) Netscape-Commerce, (c). Website and (4) Purveyor. The Netscape Commerce server is the most secure server with built in proprietary Netscape Security Sockets Layer (SSL) protocol and with public key encryption and authentication. Obviously, the popularity of types of web servers will change with time as better and more advanced software becomes available.

For most of the NT web server installation, the detailed configuration information must be provided. The server configuration will usually need information such as the hostname, path to the home directory, files for access and error logging, and port to listen to. The document configuration will need information such as the path to home page directory and the file name of the home page. The administrative configuration must specify the administrator name, the host name and port number for administrative access. The server administrator must have the same file access and security privileges as that for the Windows NT file server administrator.

If the choice is for a security web server, then security must be enabled by generating a private and public key pair. They must then be sent to a public key certification authority requesting an X.509 digitally signed certificate before compiling and implementing them into the security web server. The public key is used to exchange the session keys, to encrypt data and to verify the authenticity of a digital signature. The private key is used to decrypt session keys that were encrypted using the matching public key. The ciphers used for a security server ranges from the more secure RC4/RC2 ciphers with 128 bit encryption to a commonly used RC4/RC2 ciphers with 40 bit encryption. The private key and administrator password must be protected for secure server administration and operation.

If the server log analysis by sources of incoming access is required, for example, from a newsgroup, a web advertisement or a home page URL, then it may be necessary to implement a few identical but independent home pages so that the statistics of incoming access trends and their correlation can be collected.

If the web server is to perform both HTTP and FTP functions and separate access logs are required, then all URLs that specify HTTP as the access method should be relative within the HTTP directory structure, and URLs that linked to DOS zip files, PostScript or Adobe Portable File Format (PDF) files on the FTP archive should be absolute URLs using the file access method.

Design and implementation of IMM WWW distance education courseware

Most of the components of interactive multimedia presentations are just digital representations of familiar media types integrated and displayed on the screen.

The ability of the world wide web to represent interactive objects in the HTML document and to view them on the web, offers opportunities for educators and multimedia authors to design interactive multimedia content for their courseware.

These HTML contents of the interactive multimedia courseware can then be transformed into digital multimedia for delivery on the web as part of the flexibility delivery of distance education materials.

The ability of the enhanced windows based browsers to include inline sound and animation, viewing realtime video, playing interactive games as well as allowing users to interact with a web page, have made the WWW one of the most important interactive media for development of education courseware.

The use of web multimedia authoring tools to let web authors create multimedia applications efficiently for delivery on the internet, will facilitate the development of internet courseware. These' authoring tools can generally be classified into two categories: the scripting based tools such as Macromedia Shockwave for viewing Macromedia Director animations, and the visual authoring tools such as IconAuthor v7 with internet object oriented authoring capability.

The Director is a timeline and scripting based authoring tool typically used for creating animations for CD-ROM titles which will require high bandwidth and continuous delivery of data. It should be noted that the speed of a quad speed CD-ROM is about 100 times that of a dialup speed of a 28.8 kbps modem and for most users, the dial up internet will not have a high enough bandwidth to run the Director application effectively.

IconAuthor is an event driven, object oriented tool with unique separation of programming structure and content and all media is stored in its native file format which can be located at different remote sites external from the multimedia application.

In the IconAuthor v7 interactive multimedia application, an HTML object can display HTML documents created from any HTML editors and a table object can support for viewing multiple database records at once. The interactive multimedia courseware developed can contain multimedia objects such as buttons, pull down and pop up menus, special effects and animation clips, audio and video clips and online forms to capture user feedback and responses. It should be noted that IconAuthor is not an HTML editor and its free runtime player has to be launched as a helper application in a windows based browser.

Most of the interactive multimedia web courseware can be classified into three categories.

The first category is the 'store and forward' multimedia applications such as the online web programming courses which provide storage, retrieval, easy navigation aids and index searching of a variety of course materials and multimedia data; and remote information kiosks with multimedia information about a particular subject or place of interest.

The second category is real time interactive multimedia applications such as the real time desktop video conferencing with live voice and real time video.

The third category is the integrated applications with both the store forward and real time multimedia components such as the virtual distance education classroom which provides interactive training with multimedia courseware and an online instructor to answer queries and to give instantaneous real time interaction and feedback

Incorporating IMM material for WWW electronic journal

The powerful ability of the world wide web to present multiple views and multiple entry points into the same logical set of documents, enables the electronic publishers to offer their electronic journals online and make them easy for users to navigate.

The same set of journal articles can be designed so that users can navigate these documents by different views such as by document subject, document type, product type, alphabetical document titles, chronological order and by random word search within the constraints of the set of document type categories.

The ability of the enhanced windows based browsers to include interactive multimedia materials and to allow web users to interact and respond to any of the online product information within a web page, has made the web viable as a powerful media for electronic publishing and as a mass distribution channel of information for millions of users on the web.

Some innovative electronic journals allow small advertisement buttons at the bottom of featured articles. By clicking on one of these buttons which are non-intrusive but available to those that want them, the user can be linked to a product's or an information provider's home page

As more electronic information and multimedia materials are available from the web, the problems of copyright and content ownership of intellectual property become important.

It is vital for the information provider to make sure that they do not infringe on any international copyright laws. They must either, in the case of electronic textual materials, declare and identify the ownership, copyright, and reproduction rights; or, in the case of electronic graphical and multimedia materials, obtain permission rights for global, electronic distribution before making them available on the web.

Instructional design of WWW IMM materials

There are many guidelines for the design of a web document and its hyperlinks. These guidelines are available on the web or in print [Lynch 1995, Marcus 1992]. Some important guidelines are listed below.
  1. Maintain consistent visual look and feel. This will help to project a consistent image for the information provider and its web site.

  2. Integrate text with supporting graphic. This can add clarity to the concepts that may be hard to comprehend or can allow hyperlinks to be embedded in graphics.

  3. Use graphical navigation aids. The use of small icons with descriptive text face can add further clarity to the direction of the navigation and provide the ability for a user to return to home, or previous or next page.

  4. The good HTML style should show (a) a meaningful document title, (b) an optional company logo, (c) a level 2 or level 3 section header that match the document title in style and font, (d) using lines or rules to separate the document content and document control information, (e) home page or optional search hyperlinks to all document section titles or document citations, (f) the HTML creation and updated dates, and (g) the document author and contact email addresses for feedback and comment.

  5. If the use of inlined graphics is necessary, then convert them into interlacing GIF file formats in order to reduce their file size, and use them sparingly so that a user will not experience long delay in loading of large number of graphics. A window based browser, such as Netscape, can load on the first pass immediate low resolution graphic "proxies" of the interlacing GIF files together with the text content of the page. This can give user immediate access to the text and hyperlinks, and provide user a quick impression of large graphics which are gradually updated in subsequent four passes until the full resolution GIF images are displayed. Further reduction of the size of an interlacing GIF file is possible by reducing the colour bit depth to that lower than 8-bit (256 colours). For example, the painting graphics may be adequate with 7-bit colour depth of 128 colours; whereas, the proper colours of some photographic picture, will not appear unless it is displayed in 16 bits (32,768 colours) or 24-bits (16777216 colours) bit depth.

  6. Limit the size of inlined graphics. If the size of inlined graphics is specified in the image source of the HTML IMG inline image tags, the loading and displaying of the inlined graphics can be optimised. For a computer monitor displaying more than 640x480 pixels on the screen, the default size of horizontal display area is about 500 pixels wide. The horizontal measurement of any inlined graphics must therefore be kept few pixels less than 500 pixels. And,

  7. Use JPEG file format to display a large graphic. If the size of the graphic is more than 640x480 pixels (larger than a full screen), then it is better to use a JPEG file format which can compress the large graphic file down to a tenth of its uncompressed size. It should be noted that some web browsers do not support inlined images in JPEG format and some monitors can not display 24-bit colour. These are the major factors that limit the use of JPEG file format. However, it is expected that in near future, most web browsers will be made to support the inlined JPEG graphics and when most computer monitors will be upgraded to full 24-bit colour, the JPEG file format will gradually replace the GIF file format for displaying graphics on the web.
Instructional design for interactive multimedia web application involves not only web document design guidelines, but also cognitive, structured and communication design principles. Depending on the nature of the web application, an integrated design principle incorporating some or all of the above principles may be necessary.

For interactive multimedia web applications that involve the collection, comprehension, and interpretation of diverse materials and that when a domain structure is not well defined and can be changed by a task, a spatial hypertext design methodology as proposed by Marshall [Marshall, 1994] should be used. The purpose of spatial design is to allow user to explore and that information intensive activities can be stimulated by spatial proximity of hypertext materials and by visual clues provided. The spatial hypertext design can not only provide users and authors with visualisation of existing structures but also allow human perception abilities in hypertext navigation to experiment and manipulate existing structure.

For interactive multimedia web applications which are highly structured and have high information volatility that requires frequent updates such as online course brochures and interactive multimedia applications with large data base of objects and with definable relationships between classes of objects, a formal Relationship Management Methodology (RMM) as proposed by Balasubramanian, Isakawitz, and Stohr (1994) can be used to formalise and automate the design process. Basically, the RMM uses traditional data model approach with six access primitives to define navigational linkages required by the web application. It focuses on entity relationship and navigation to design the web access mechanism. The design step use a set of conversion rules to transform the design into web objects in a target platform. For example, an HTML form can be used to implement an index of accesses. The next step in the user interface design involves the design of button layouts, appearance of HTML page nodes and indices and location of navigational aids. The runtime behaviour design step is then performed to decide on link traversal, history and navigational mechanism. The final design step consists of construction of a working prototype and testing of all navigational paths.

Conclusions

The interactive multimedia applications for the world wide web is the new phenomenon that has only happened over last few months. The most important contributing factors that enable interactive multimedia applications for the world wide web are
  1. The development of plugin application programming interface to cater for viewing of multimedia data types.

  2. The development of client/server multimedia applets and audio/video tool kits for presentation of multimedia applications.

  3. The availability of the fourth generation web authoring tools.

  4. The development of real time audio and video compression and decompression technology.
Interactive multimedia on the web is still in its infancy and the following major improvements are needed to make it widely acceptable for mass audience.
  1. the improvement in overall quality of digital audio and video technology over the internet including the capability to capture, digitise, compress, transmit, and decompress the audio and video data, the improvement of speech synthesis and speech recognition that will allow the spoken words to be presented as displayed text, and then a text file to be presented as clearly pronounced speech,

  2. the improvement of a high resolution screen monitor that will combines 24-bit colour graphics with on screen full motion video,

  3. the improvement of the internet bandwidth for high speed and high volume of data demanded by multimedia applications, and

  4. the improvement of audio and video software tool kits for client/server multimedia applications that will support full motion video with better voice synchronisation.

References

Balasubramanian, P., Isakawitz, T., and Stoker, E. A. (1994). Designing hypermedia applications. In Ralph H. Sprague and Bruce Shriver (Eds), Proceedings of the 27th Hawaii International Conference on Information Systems (HICSS), pages 354-365, Maui, HI, January 1994. IEEE Computer Society Press.

Denny, R. B. (17-4-1995). Website Performance Analysis. Available URL: http://clubweb.ora.com/devcorner/white/wsperf.htm

Hoffman, P. E. (September, 1995). Web Servers Survey. Available WWW http://www.proper.com/www/servers-survey.html

Lynch, P. J. (2-9-1995). Yale C/AIM WWW Style Manual, Yale Center for Advanced Instructional Media. Available URL: http://info.med.yale.edu/caim/PrintInfo.html [see http://info.med.yale.edu/caim/manual/ verified 24 Jan 2001]

Marshall, C. C., Shipman, F. M. III, and Coombs, J. H. (1994). VIKI: Spatial Hypertext Supporting Emergent Structure. In Proceedings of the European Conference on Hypermedia Technologies (Sept 18-23, Edinburgh, Scotland). ACM, New York, 1994, pp. 13-23.

Netscape Communication Server & Netscape Commerce Server, Netscape Communications Corporation, 501E Middlefield Road, Mountain View, CA94043, USA. http://www.netscape.com/

Purveyor WebServer for Windows NT, Process Software Corporation, 959 Concord Street, Framingham, MA 01701, USA. [verified 24 Jan 2001] http://www.process.com/

Website Central WebServer for Windows NT, O'Reilly & Associates, Inc. 103A Morris Street, Sebastopol, CA 95472, USA. Available URL: http://website.ora.com/ [see http://website.oreilly.com/ verified 24 Jan 2001]

Author: Dr William Tan, Instructional Designer
Instructional Technology Section
Distance Education Centre
University of Southern Queensland
West Street, Toowoomba, Queensland 4350, Australia.
Phone: +61 76 312877 Fax : +61 76 312868 Email: tanw@usq.edu.au

Please cite as: Tan, W. (1996). Implementing an interactive multimedia application on the World Wide Web. In C. McBeath and R. Atkinson (Eds), Proceedings of the Third International Interactive Multimedia Symposium, 397-404. Perth, Western Australia, 21-25 January. Promaco Conventions. http://www.aset.org.au/confs/iims/1996/ry/tan.html


[ IIMS 96 contents ] [ IIMS Main ] [ ASET home ]
This URL: http://www.aset.org.au/confs/iims/1996/ry/tan.html
© 1996 Promaco Conventions. Reproduced by permission. Last revision: 15 Jan 2004. Editor: Roger Atkinson
Previous URL 24 Jan 2001 to 30 Sep 2002: http://cleo.murdoch.edu.au/gen/aset/confs/iims/96/ry/tan.html