CS2020:   Web Science, Sytems and Design
Instructor Outline Syllabus Projects Links  

Other Forms of Media

There are other forms of media and interactivity that can be addedto your web-pages besides images, sound and video. We will discussa few of them.












Animated Marquee

  • Is a line of scrollig text that moves from one side of the pageto another.
  • ONLY supported by Internet Explorer
  • In other browsers will just see text. To produce this affect for other browsers you must either create an animated gif or a Java applet or JavaScript.
Here is an example: CST102 is a Cool Class!
How to do:
  • Simply surround the text with the <Marquee> and </Marquee>tags.



Options to the Marquee tag: 

  • bgcolor
can set the background color of marquee area. 
  • HEIGHT,  WIDTH
size of bounding box either in percentage or pixels. 
  • HSPACE,   VSPACE
determine space around marquee area and surrounding text. 
  • ALIGN
determines how surrounding text appears in relation to marquee area.




Animation/Presentation Slides: Client Pull and Server Push of Pages

  • This is an easy way of creating an animation or a presentation where theuser simply view slides that automatically change.
  • The user doesn't have to lick on anything...they just have to sit back and "enjoythe show".
  • For small animations this kind of animation may be better achieved with Animated Gif image.
  • For larger presentations, a more efficient implimentation can be achieved withJava or using Shockwave (shockwave is a method of taking a multimedia presentaton/product and converting it for presentation on the web). The problemwith both of these is you need advanced knowledge of programming or multimediatool use. An advantage of usig Java or Shocking a multimedia product is that youcan also have added interactivity if appropriate.



Client Pull

  • this causes the browser to load the same page or a different pageautomatically after a certain amount of time has passed.
  • This technique fine for presentations...less good for animation.

  • how to do

    • Based on use of the Meta tag which is included in the Head tags before the Body tags. The attribute of Meta that produces this client pull is HTTP-EQUIV Below is an example that shows how after the current page is loaded it will load page2.htm. 

    <HTML> 

   <HEAD><TITLE>   Slide 1 </TITLE>
      <META HTTP-EQUIV="Refresh" CONTENT="4;URL="http://www.monterey.edu/students/CLASSES/CST102/Lecture10-HTML/Animation/page2.htm"            
   </HEAD>              ..............
  • In the example above, the HTTP-EQUIV="Refresh" tells the browserwe are going to be doing a Client Pull and to "refresh" the browser with a newpage specified by the CONTENT attribute. Note that the 4 afterwardsmeans to wait 4 units of time (what this acutally means will varry greatlyas a function of your machine, your Internet connection, the network traffic, etc)the URL must be a complete URL not a relative path to a file!!!
  • Now in page2.htm you can also have a meta statement to load thenext page in the animation or presentation!

  • Example







Server Push

  • The connection between the server and browser remains open and the servercontinues to feed new pages over the connection. The server sends the first page, waits some amount of time and then sends the next page, and so on.
  • The new data sent can be an entire page or actually with images can repeatedly fill an area with a new image....hence creating an animation.
  • This is better than client pull for achieving animation as multiple iagescan load into a page repeatedly and possibly faster than client pull...for a smootheranimation sequence.
  • Using a Java Applet or shocking a multimedia file has replaced this form ofanimation or dynamic presentation because they usually will have greaterspeed (especially Java) than pushing out pages.
  • Works with a content-type called multipart/x-mixed-replacewhich is a special MIME type that indicates multiple pieces of data ma have different content-types (e.g. an html file or a GIF image or a sound file....all in one package

  • To create:

    • you must create a CGI script that sends the initial content-type of mutipart/x-mixed-replace and then sends each block of data sequentially.
    • READ our handouts on CGI scripts or the book FIRST before continuing
    • Example CGI script that will display 4 images one after another with pauses of 1 second in between. Must save this script in a cgi-bin diretory on yourWeb server (must ask webmaster for access). Then you must include thisscript in your webpage. 
      • #!/bin/sh
echo "Content-type: multipart/x-mixed-replace;boundary=MyMarker"
echo
echo "MyMarker"
echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image1.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)


echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image2.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)


echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image3.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)


echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image4.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)





Java Applet

  • This is a kind of Java program that you can include in your web-page
  • It can do everything from showing an animation, acting like a web-form, etc.

We have an entire class in CST that talks about how to create Java programs.
Here we will discuss if you have a Java applet how you can include it in yourweb-page.
Like with other kinds of media, if it is owned by someone else youmust ask for permission to use it!!!!

Java Applet Filenames
  • The filename for any applet always has the extension .class
  • For example, 
 myApplet.class



How to include in webpage

  • Wherever you want the applet to appear in your HTML type the following:
<APPLET CODE="myApplet.class" WIDTH=X  HEIGH=X></APPLET>         

where X and Y are pixel values determining the size of the applet region.
    Sometimes you will pass parameters (information) to your applet. In this case,
    you will have one or more (for one or more parameters)
    <PARAM> tags Example when want to pass a color to the applet:
    <APPLET CODE="myApplet.class" WIDTH=X HEIGH=X>
    <PARAM NAME="color" VALUE="red">
    </APPLET>

    Example

    Where to find Java Applets and Get more info:
    Java Soft
© Lynne Grewe