link:  logo always returns you home    
 
link: classes
link: tutorials link: about us
 
link: logo always takes you home

Interactivity on the Web

Ever since Marc Andreessen and Eric Bina added the <IMG> tag to their Mosaic for X Windows browser in 1993, the Internet moved from text-based to its current interactive experience. This probably more than anything else contributed to the medium's current popularity.

For the longest time, we were restricted by bandwidth - the amount of data that can be sent via a browser from one user to another. Even with today's 56k modem (the current most popular bandwith modem), video and sound can create a long download - and anything more than 30 seconds seems like an eternity to many viewers.

Luckily, there are so many alternatives to slow bandwidth (and increasingly more users taking advantage of them!) that pushing the envelope of current web design can be achieved - and viewed - in a variety of ways. But it is still advised that the you still be judicious in the addition of interactive media to your site, and concentrate the majority within your inner pages.

Types of Media For the Web

Multimedia content in Web pages includes the use of plugins such as Flash or Director, the inclusion of audio, video and 3D material in web pages, and the use of streaming technology.

Animation

  • 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.
  • JAVA is a very powerful scripting language modeled after C++. This code is versatile enough that an entire program can be written that doesn't require a browser at all, and can run stand-alone. An example of this is an applet (similar to animated GIFs).Java can be run across multiple platforms and operating systems, but because of the in-fighting of the "Java Wars" between Sun and Microsoft, there have been complaints about the technology.Java is a client-side script. It can use the browser's internal Java machine to access built-in Java functions instead of embedding the function onto the page. See Sun on the Java technology. For tutorials and examples, see http://wdvl.internet.com/Multimedia/Java/
  • JavaScript. Sun, working with Netscape, took a developing script called LiveScript and made it more like Java, to run client-sided. It is part of the code written into an HTML page, so runs right in the Web page itself. It carries out a number of client-sided functions, and I am always asking students for new bits of JavaScript code to add to my collection. It is well worth your while to learn at least the basics of JavaScript if you want to write better Web pages. JavaScript does have its browser issues (for instance JavaScript 1.2 is not supported within IE 4.0) and your use must be degradeable. Design with your viewer in mind, and use only as it adds to your site, not just because you can do it. And make sure the piece of script is written by a competent programmer - you don't want to crash someone's system! Microsoft has a similar script called JScript, and both programming languages use a complex syntax like C/C++. Check out The JavaScript Source for scripts you might use.
  • VBScript. Visual Basic is a programming language developed by Microsoft. It's more intuitive to use than JavaScript, and doesn't have the case sensitivity that makes JavaScript more cumbersome to write. It is the default language of ASP so is a great server-sided script language for any servers running ASP. Because of its intuitive code and excellent security, it was once referred as the "Java Killer". However, it too is victim of the browser wars and can only be used on IE v3.0 and higher. It is not supported in any Netscape browser. Here's a VBScript tutorial you might enjoy: http://www.intranetjournal.com/corner/wrox/progref/vbt/index.html
  • DHTML. Dynamic HTML extended HTML to overcome some of the limitations in designing using strict HTML code. However, the way the two major browsers choose to implement DHTML code differs and causes problems in its use, even though it has been reviewed and recommended for use by the World Wide Web Consortium (W3C).
    • Internet Explorer
      • version 4.0 or higher
      • uses any tag on a page to accept a DHTML script
      • you can dynamically alter the layout and content of your page without going back to the server
      • all code can reside within the one page
    • Netscape 4.0
      • Netscape is less consistent than IE in implementing DHTML.
      • It's lack of versitility is due to a lack of the Document Object Model (DOM) found in IE. The script can't access the object (tag), but instead uses layers to achieve similar effect.
    The idea behind DHTML is to allow script functions into every available HTML tag. This is what conceptually moves HTML from a formatting script to an actual programming-style language. Client-sided programming like this gives all Web designers greater functionality and design possibilities.Try this tutorial from Macromedia: Animating layers in a timeline
  • ActiveX. ActiveX is not a programming language, but a hybrid of object-oriented programming that allows complete programs to run inline. It needs a language like VBScript to render within a browser.
  • XML. This is Extensible Markup Language, a subset of SGML. It is another method to markup documents. Verdict is still out on how far it will be accepted by the design community. Acceptance by browser developers and the W3C will determine its fate.

Plug-ins.

  • To experience multimedia online, you'll need a computer equipped with a sound and video card and special software programs called plug-ins. A plug-in, also referred to as a player, extends the capabilities of your web browser. 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. 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. QuickTime is the multi-platform industry-standard multimedia architecture used by software tool vendors and content creators to create and deliver synchronized graphics, sound, video, text and music.

Embedded Sound.

  • Digital audio files are digitized representations of sound waves, and as such, they are still a strain to download for most users. Whenever possible, minimizing the size of these files will make the viewer's experience of your Web site a little more enjoyable. There are many file formats currently available and they are identifiable by their extensions. So which one should you use on your site? Depends on what is your target audience, the available bandwidth, and the purpose of the content.Most browsers can play standard digital audio files such as AIFF (developed by Apple) and WAV (codeveloped by Microsoft and IBM). In the early days of the Internet, these uncompressed files (along with AU from the Unix time of Web development) were the only available formats for playing audio. Current technologies easily decode MP3 and RealAudio, and free players for these formats are available. To embed sound, try http://wdvl.internet.com/Multimedia/Sound/ for a quick reference. If you are embedding sound, an MP3 is the only way to go.
  • 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.
  • 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.
  • 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.
  • Webcasting or streaming media. Simply said, you send the information directly to the viewer without input from the viewer. If you are producing a live Internet broadcast, you should use a streaming solution such as RealAudio, QuickTime, or Windows Media. Although we can view streaming video, it tends to still be choppy in appearance unless you're lucky enough to have DSL. The Web Developer's Virtual Library has a series of articles discussing the use of streaming media.
  • 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.
  • 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. See Microsoft's Multimedia On The Web.

 

TOP | HOME | CLASSES | WEB RESOURCES | PORTFOLIO | ABOUT US
 

http://www.casabasa.com | email me sharon{at}casabasa.com | © copyright 2002  :::last revised: November 13, 2004 :::