Site Links

Home

Instructor Schedule

Tutorials

Resources (and student recommendations)

Conditions of Use

graphic of lilac and teal shape

 

 

Interactivity

The word interactivity has been bandied around quite a bit as it relates to the internet, so perhaps we don't give it enough attention...after all, something that can capture your viewer's attention to your site and perhaps pique their curiousity is worth a second glance!

Theory

Simply speaking, interactivity is something acting upon something else. A request form for further information is a good example of interactivity. Something happens as a response to an action.

Now for many of our current Web environments, we are simply not doing this. Using links, we are able to produce a user response. The user clicks, and a page responds. Then the user will click something else and another page responds. But I want to ask you this question: are you using the internet to its fullest possibilities? Isn't the very concept of hypertext challenge you to do more than point and click? Shouldn't you be able to involve the senses more completely, to go beyond the one dimension of computer channel surfing?

Interactivity can challenge our sites to take better advantage of the power of the medium. Using our skills, programming multimedia into our sites enhances the idea of hypertext to its potential promised in the early days of the Internet. We link to a sound file, an animated gif, another image for a rollover, or to a cgi-bin where we have stored scripts to read our forms. We add sound, movies, interaction. We take our sites a step up in the evolution of Web sites.

Interacting with machines

Of course, our medium is a computer and we are limited by its and ours abilities. So as I said before, you are wearing three hats as a Web designer: technician, communicator, and artist. We can soften the otherwise mechanical abilities of a computer, with our design sense as web designers. But understand this: just because an item is active, does not make it interactive. A form that is filled out by the viewer and sent to the site's cgi-bin for parsing is interactive. An animated gif alone is not. However, then linking that animated gif to another page, or having that animation play only when acted upon in a certain way, may create a psuedo-interactivity.

We are successful in creating interactivity within our site when we engage our viewer. Either our input significantly alters an interaction, or there is interaction with people, such as a chat room. This is interactivity.

Methods

Functional Interactivity:

  • Feedback forms. The form is built using a Common Gateway Interface (CGI) script. These are usually written in perl so you will see the extension .prl on the script itself. The CGI script is usually put on the host server in a folder called a CGI-bin. When the viewer submits their information, it is sent to the CGI-bin where the script reads the information, puts it into a readable format, and sends it to the owner of the site (you).
  • Shopping. Online shopping is created when both JavaScript and a CGI form are used. The JavaScript is used to caculate cost and number of items, and the CGI form send the information to the host server. It is then forwarded to your computer. Sale made and you send the product.

Progressive Interactivity:

  • Online communities. Chat rooms, bulletin boards.

Multimedia Designs

Animated Gifs - demonstration in class using Fireworks or ImageReady. Animated GIFs are cross-platform, fast-loading, does not require a plug-in, and has great flexibility in the use of transparency. A great background can appear through a well designed gif. Not truly interactive, since it cannot in and of itself accept input, but you can design a graphic that entices the viewer deeper within your site, where you can then interact with the user.

Downloadable audio - AIFF (Apple sound file format), AU (Audio sound file format for Unix and Sun, as well as PCs), AVI (Audio/Video Interface for Windows 3.11 and Windows 95), MIDI (Musical Instrument Digital Interface uses sound cards or dedicated MIDI processers to produce orchestral-style sounds), MPEG (Motion Picture Experts Group, a platform-independent audiovisual file format designed by an industry group), and WAV (Windows Audio Format, or the audio portion of an AVI file). All of these require a complete download before playing.

MP3 - Is the file extension for MPEG, audio layer 3. Layer 3 is one of three coding schemes (layer 1, layer 2 and layer 3) for the compression of audio signals. Layer 3 uses perceptual audio coding and psychoacoustic compression to remove all superfluous information. The result in real terms is layer 3 shrinks the original sound data from a CD by a factor of 12 without sacrificing sound quality.

Streaming audio - To deliver streaming audio, audio must be converted into the streaming format (RA is the RealAudio file extension). RealAudio offers an encoder to do this. These files are then put onto a server equipped with User Datagram Protocol (UDP), other than the usual TCP (Transmission Control Protocol) used by most Internet information transfers.

Web-based phones - Again using UDP and compression techniques, the ability to have two-way conversations. Can be cheaper than the telephone, but has the disadvantage of competing in network traffic.

Downloadable video - By far, QuickTime is the best example of this, although there is the AVI of Windows, and MPEGs. QuickTime uses the .mov extension. Although we can view streaming video, it tends to still be choppy in appearance unless you're lucky enough to have DSL.

Live Delivery - In March 1992, the first audio cast internet broadcast was made over MBone (Multicast Backbone - high speed Internet line). The first video cast was in June.

Macromedia Shockwave - From the software program Director, "shocked" movies can be created for viewing online, or distributed via cd-roms (the original use in the game market.) Now supports streaming audio and video, offering an extremely professional development tool for creating online movies.

Macromedia Flash - Flash is a vector drawing program and a movie creation tool. For this reason, it is quick to load, has adequate browser support, basic tools can be quickly learned, and delivers a professional looking product with relative ease.

go to the top