making the slideshow

animation techniques On most of the web, nothing happens until a user clicks. Some media, like television, movies, and the radio are different -- they are time-based and changes happen without user intervention. We like making ordinary web pages, but for Six Ponies we felt like making something time-based. There are several ways to make animations for the web. Some, like Dynamic HTML, require the latest browser, while others, such as Flash, require users to download a special plug-in. We didn't want to use these, since they'd exclude much of the web population. Although animated .gifs work well with most browsers, you don't have much control over the life cycle of your animation -- it either plays once and stops (without an intuitive way to restart) or loops forever like one of those annoying mailboxes people link to their email address.

We decided to use one of the oldest animation tricks on the web, one that was supported in Netscape 1.1 -- a client-pull animation. The trick is a single line of HTML that tells the browser to reload the page. Here's the source of one frame in our animation:
<HEAD>
<TITLE>Sugar</TITLE>
<META http-equiv="refresh" content="12; URL= 2.html">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN=CENTER>
<A HREF="2.html">
<IMG SRC="sugar.gif" WIDTH=640 HEIGHT=448 BORDER=0>
</A>
</DIV>
</BODY>
 The secret is the tag
<META http-equiv="refresh" content="12; URL= 2.html">
which means "wait 12 seconds and then load the document 2.html." This method lets you use anything you can draw in HTML as a frame in your animation. You could even use another animation technique in a frame. But watch out, whatever you put in the frame, it has to be small enough to finish loading before the next frame starts.

indexx.html The strength of the web is that everything works the same. Once you learn how to click on a link, you can navigate any web page. A slideshow violates this usual user interface of the web, so we decided that we needed to warn users what was about to happen. To do this we put an introductory slide in the animation with a text message.

The trouble was that we wanted the warning slide to be displayed only the first time someone saw the show. It would be possible to accomplish this with cookies and either Javascript or server-side programming, but this would be complicated and error-prone. Besides, many users are afraid of cookies and turn them off. I thought about it, and then came across a simple solution -- I made the slides play in the following order,

index.html   0.html   1.html   through   6.html
       
       
                indexx.html
there are two copies of the title page, one called "index.html" and one called "indexx.html". They look exactly the same, but the first starts the animation at "0.html", the warning slide, and the other starts it at "1.html", the first pony. Like a magic trick, few users will notice the change in URL and those who do notice won't care. The only disadvantage is some increase in the cost of maintainance: if I change index.html, I need to change indexx.html as well. By being clever in organizing your documents, you can often make static web pages act much like dynamically generated pages without the costs.