Hypertext Multimedia and the WEB IST 331 1

Hypertext, Multimedia, and the WEB IST 331. 1 Spring 2003 Lecture 13

Text and Hypertext Text is a common form of output, and very useful in many situations • imposes a strict linear progression on the reader, the author’s ideas of what is best - this may not be ideal Hypertext structures blocks of text into a mesh or network that can be traversed in many different ways • allows a user to follow their own path through information • hypertext systems comprise: - a number of pages, and - links, that allow one page to be accessed from another example: technical manual for a photocopier - all the technical words linked to their definition in a glossary - links between similar photocopiers

Hypermedia systems are hypertext systems that incorporate additional media, such as illustrations, photographs, video and sound Particularly useful for educational purposes • animation and graphics allow user to see things happen • hypertext structure allows users to explore at their own pace Problems • “lost in hyperspace” - users unsure where in the web they are maps of the hypertext are a partial solution • incomplete coverage of information some routes through the hypertext miss critical chunks • difficult to print out and take away printed documents require a linear structure

Animation The addition of motion to images - they change and move in time Examples: • clocks Digital faces - seconds flick past Analogue face - second hand sweeps round constantly Salvador Dali clock - digits warp and melt into each other • cursor hourglass/watch/spinning disc indicates the system is busy flashing cursor indicates typing position Macromedia’s Flash MX – create vector artwork that is dynamic, interactive and animated

Animation used to indicate temporally-varying information. Useful in education and training: allow users to see things happening, as well as being interesting and entertaining images in their own right Example: data visualization abrupt and smooth changes in multi-dimensional data visualized using animated, colored surfaces complex molecules and their interactions more easily understood when they are rotated and viewed on the screen

Video and Digital Video Compact disc technology is revolutionizing multimedia systems: large amounts of video, graphics, sound and text can be stored and easily retrieved on a relatively cheap and accessible medium. Different approaches, characterized by different compression techniques that allow more data to be squeezed onto the disc • CD-I: excellent for full-screen work. Limited video and still image capability; targeted at domestic market • CD-XA (e. Xtended Architecture): development of CD-I, better digital audio and still images • DVI (Digital Video Interactive)/UVC (Universal Video Communications): support full motion video

Video and Digital Video example: Palenque - a DVI-based system Multimodal multimedia prototype system, in which users wander around a Mayan site. Uses video, images, text and sounds. Quick. Time from Apple represents a standard for incorporating video into the interface. Compression, storage, format and synchronization are all defined, allowing many different applications to incorporate video in a consistent manner.

Utilizing Animation and Video Animation and video are potentially powerful tools • notice the success of television and arcade games However, the standard approaches to interface design do not take into account the full possibilities of such media We will probably only start to reap the full benefit from this technology when we have much more experience. We also need to learn from the masters of this new art form: interface designers will need to acquire the skills of film makers and cartoonists as well as artists and writers.

Educational Technology n On-line courses taken?

WEB Design Basic capabilities of using text and graphics, movies and sound n Use forms to gather input n Hypertext links n Call programs – CGI scripts n Rich combination of these to create complex objects n

WEB Design n Limitations ¨ Pages are interpreted by the browser, to lay out the material on the page ¨ Different browsers may achieve similar results, or may support different functionalities ¨ Content is critically important – not everything needs to be available on the Web

WEB Design n Information Structure ¨ Page length – scrolling is boring and wearisome ¨ Split information into screen-sized chunks ¨ Color is of great importance, but often abused n Cultural differences n Links that have been activated n Consistent use of color can help the user ¨ Screen size issue – 640 x 480 or 800 x 600 pixels n Conventional to assume that browsers offer a page size at least 472 pixels wide n Avoid wrapping text, tables, and graphics

WEB Design ¨ Use of graphics n n n Take time to load Text 8 bits per character; screen of text is ~2000 characters; 16, 000 bits or 2 k of data to load Graphics 1 pixel use 8 bits; page-sized image 600 x 400 pixels is 1, 920, 000 bits or 240 k takes 120 times longer to load GIFs can be interlaced to allow them to be progressively transmitted JPEG offers a higher compression ratio and faster loading for certain types of images

WEB Design n Icons ¨ Visual cues – small picture with different parts of the text ¨ Standard WIMP interface n Movies and sound