What is HotMedia?

HotMedia from IBM delivers "media without excuses" for the Internet. HotMedia is a low bandwidth Java applet technology for placing rich media on web pages quickly (and without loading plug-ins)! Targeted at e-commerce, interactive advertising, and other applications that use rich media, HotMedia currently allows:

panning and scrolling images
animation (and there can be multiple tracks of animation)!
user interaction with the animated images
hot links to HTML pages and frames
hot links to new HotMedia files
zoomable, multi-resolution images
sound effects

HotMedia is provided to content creators as a toolkit that consists of

a simple assembly tool and a set of supporting utility-tools for authoring HotMedia files
a Java-applet player that delivers HotMedia on the web browser

Content creators can author HotMedia files containing all of the effects listed above and more -- quickly, and in any combination.

The real power of HotMedia is that the experience is delivered to the end user without special plug-ins. Through the use of patented Smart Content technology, the file itself dynamically determines which "players" the browser needs and downloads them "just in time." In addition, the data itself -- images, animations, etc. -- is downloaded progressively so that the user experience begins immediately, not once the entire file has been received. No time is wasted sending data that is not of interest right now. The result is minimal wait time, delivering the best possible experience for the end user.

 

"Smart Content" Delivers Experiences On Demand

Cascading Java

HotMedia is the first technology to harness the true power of Java for rich media content. The concept is simple. Rather than creating a single large Java-applet player, HotMedia breaks the player down into very small Java objects, from 1KB to 11KB in size.

When a web-browser encounters HotMedia content on a page, it downloads the first, small HotMedia Java-applet. The HotMedia applet then begins to read the contents of the file and automatically determines which additional applets and what additional data the user needs to begin. As the user interacts with HotMedia, the applet determines any additional requirements, and fetches exactly what is needed over the network, exactly when it is needed.

Once a Java object is sent to the browser, it often remains in the browser's cache for the entire session, so subsequent content will play even more quickly. Since the content determines its own behavior and signals which applets and data the user needs -- and when they are needed -- the content is indeed "smart."

Minimal Initial Download

There are a few commonsense ideas built into HotMedia, which take advantage of the Smart Content technology. First, when you author HotMedia, you have the option to display a keyframe -- which can be created from a JPEG or a GIF -- when the applet loads. This image can be enhanced with scrolling effects, animation, and sound effects to create excitement. Since this keyframe requires only the initialization applet, it requires only a few seconds more to start HotMedia than to display the plain, simple GIF. Moreover, this overhead is usually incurred only once during a browser session, since the applet is often cached locally by the browser once it has been fetched.

Subsequent portions of the rich-media experience -- such as complex animations, interaction with the display, and hot links -- are delivered only on demand, either by your direction (specifying in the authoring process an automatic transition from the keyframe to the rich-media portion of the content), or through a user action (clicking on the keyframe). This approach to rich-media content delivery ensures that HotMedia loads the first page quickly, and then provides rich content whenever the content author or the web page user desires.

 

Single File

Different media types (images, animations, audio, etc.) as well as associated hot links and metadata, are all multiplexed into a single HotMedia file. This encapsulation makes it easy to manage HotMedia content for web-posting, distribution and database maintenance, just as you would manage a GIF or JPEG file.

As the HotMedia technology develops, other kinds of media files may be integrated into the HotMedia technology and data file, including a variety of image, animation, video, panoramic, text, control, and metadata file types.

Below is a conceptual drawing of the structure of the HotMedia file.


Although the HotMedia data file contains all the rich media content that will be displayed, the applet controls what information from the HotMedia data file will be sent to the browser and when it will be delivered.

 

Powerful Hot Links

Navigation through HotMedia content is accomplished through hot links.

Hot links can be placed anywhere in the animation frames of a HotMedia. Since this type of link is associated with a location in a particular image, it is called a spatial hot link. Although not in the current version of HotMedia, hot links can also be associated with moments in time, such as at particular points during an audio sequence. These hot links are known as temporal, and can be useful in many ways -- such as for displaying information on cue, to accompany an audio commercial message.

Hot links can pop-up a new web page, replace a frame in the web page, replace the HotMedia file with a new HotMedia file, or replace the entire web page. The link destination can also be modified by applet parameters in the HTML page that calls the applet.

Using the richness of the hot linking capability, authors can create HotMedia content which is very versatile and powerful.

The figure below illustrates how the various HotMedia Java applets and objects are delivered.

An Example - Interactive Banner-ad

One important use of HotMedia is to create rich media banner ads. HotMedia first puts a 468 x 60 (or other size) banner ad on a page as quickly and easily as an ordinary GIF banner. Then, when the user clicks on the banner, a rich HotMedia advertising presentation is presented in the same banner space. When the user clicks on any hot link in the advertisement, he or she can be taken to the advertiser's own page. HotMedia technology allows tracking of the click-throughs.

HotMedia technology places a banner ad on a web page using about 8K of Java code and, usually, about 1K to 5K of image data. So the total requirement to place a HotMedia banner ad on a web page is about 9K - 13K, depending on the ad itself.

Typically, the total time required to display such an image -- including transmitting the Java and image data, starting the Java program, and displaying the image -- is between 9 and 12 seconds.

There is no plug-in or user intervention required to display a HotMedia banner ad.

The user is able to interact with the ad, and the advertiser is able to provide additional selling copy, while the viewer remains on the host page the whole time. HotMedia banner ads thereby enrich the experience for the viewer, provide more value to the advertiser, and allow the host to retain the viewer for a longer period of time.

Some applications of HotMedia include

showing a collection of related products, such as a variety of perfumes that are all on sale
demonstrating multiple colors and styles of a product, such as a blouse in various colors and patterns
showing the shape of a 3D object, such as the front, back and sides of a flat-screen monitor
showing the inside and outside of complex objects, such as a piece of luggage

...and simply attracting attention to interesting products!


HotMedia is continuing to develop. To demonstrate the power and versatility of HotMedia with additional media types, consider the hypothetical storyboard below (which uses data types -- such as synchronized audio and a panorama -- which are not in the current version of HotMedia).

When the web page first loads, the banner displays a keyframe, which may be made to scroll at a predetermined rate or to play an animated GIF. The initial download can be under 12K, which is the sum of the Java applet (about 8K) and the keyframe image (about 4K). When the user accepts the invitation to "shop in the banner," a virtual store -- a 360-degree panorama -- is loaded, permitting the user to navigate through the store and select one of several hot links. The download for this step is also very small, with the panorama Java object being around 19K in size.

In one scenario, the user selects the Thinkpad link, and a 3D animation is loaded into the banner with hot links to features of interest, product specifications, and close-up views of detail. Again, the animation Java applet is about 10K, and once a Java applet is loaded, it does not need to be loaded again for the entire session.

Additional links are presented, including an invitation to "buy now." Since HotMedia supports hot links to other URLs, a secure link to a transaction server is established.

Another capability shown above is synchronized audio. This allows the author to play audio and have other information displayed at predetermined times during the audio playback -- a useful feature for commercial effects in both advertising and commerce applications.


Media Without Excuses

The example above describes only a small subset of what HotMedia will be able to do for your web site. The most important thing to remember about HotMedia, however, is not the richness of effects that can be created, but that this richness is delivered with a smooth and wait-free experience to the end user!

Web surfers are demanding more compelling experiences on the Internet.

  They want to see, hear, and interact with content in ways that are natural in the physical world.  
  They want products and services to be depicted in a manner that helps them make informed purchasing decisions quickly.  
  They want advertising to be relevant, interesting, and useful for spur-of-the-moment and impulse purchases.  
  They want this content to be available to them on demand, without clumsy browser plug-ins and interminable waits for the information to reach them over their dial-up connection.  

In short, users want rich media, but they want it without excuses.

Unfortunately, until now the Internet could not deliver "media without excuses." For while there have been numerous examples of rich-media technology in use on the web, most provided only a single narrow type of experience, such as 3D object depiction, animation, or multi-resolution images. Most required the user to install a plug-in, which could require up to an hour to download over a modem connection. Furthermore, many depended on special servers, an expense and maintenance overhead for web sites. Finally, the rich media content itself was typically "heavy," requiring the user to wait for the entire file to download before the experience could begin.

HotMedia from IBM delivers "media without excuses" for the Internet. HotMedia provides lightweight, progressive download for fast appearance of the media, integrated content, requires no plug-in, requires no special servers, and provides powerful interactivity.

 

The Authoring Process

Complement Your Favorite Tools

HotMedia is designed to work with popular content-creation tools, not replace them. There is one main component in the HotMedia toolkit: the Assembly  tool. This is an easy-to-use tool for adding media elements into the HotMedia "smart content" file and assuring that the playback proceeds as desired by the author. To prepare content to go into the assembly process, authors can use their favorite editing tools, such as third-party image editing software.

The Assembly Tool

The assembly tool is extremely simple to use.

Tabs on the left side of the tool indicate the media types that can be added to a HotMedia file.  
Features for each media type and the allowed options are presented in the media workspace when its tab is selected.  

To help the author create the finished HotMedia file, a "composite" tab displays a flow diagram indicating which media elements have been created as part of the file, and which transition options between media elements (automatic timed-delay, mouse-click) have been selected.

The HotMedia file is then created, along with a sample HTML file for easy previewing. It's as simple as that!

HotMedia Version 1.1

HotMedia Version 1.1 consists of:

HotMedia v 1.1 Component
Element
Size
Authoring Toolkit Assembly Tool 573K
Java-applet Player Initial keyframe 4.86K (compressed)
Master 6.18K
Animation 15.1K
Spatial Hot Links 5.63K

 

It supports the following rich media features:

Feature
Description
Initial keyframe Static image
Simple animation
Smooth scroll
Animation Multi-track flip-book
Multi-resolution zoom tracks
Spatial Hot Links Hot link to another HotMedia file
Hot link to URL in specified browser frame
Transitions Automatic or manual (mouse-click) transition from keyframe to animation
Audio Simple sound effects, associated with hot links

 

It supports the following HTML parameters:

Feature
Description
Hot link from keyframe Launch a URL (which may be a CGI program) in a specified browser frame
Hot link from animation Replace a link with a URL (which may be a CGI program) or modify a URL hot link by prepending or appending any string
Show/No-show hot links Display or suppress hot link red rectangles during mouse-over