<!-- ------------------------------------------------------------------------
--
-- This file was created by rjc from system/tutorial_overlaid/index.html
-- on 2004/05/05 10:17:22.
--
-- Copyright 1999-2004 Interactive Information Ltd, All Rights Reserved
-- http://information.overlaid.com
--
-- ------------------------------------------------------------------------
--
-- Version: 2.4.1 for Weasel
--
-- --------------------------------------------------------------------- -->
<head>
<title>Weasel Tutorial - Overview</title>
<script src="tutorial.js"></script>
<script src="tutorial_structure.js"></script>
</head>
<body bgcolor="white"
text="midnightblue"
link="#9d0052"
alink="#39c8ff"
vlink="#9d0052"
>
<img align=right width=150 src="../media/white-bg.gif">
<h1 align=left>
Weasel Tutorial<br>
<small>Tutorial Overview<br>
(<small><small>Copyright 1999-2004 Interactive Information Ltd</small></small>)<br>
</small>
</h1>
<pre>
</pre>
<p> Welcome to the <a href="http://information.overlaid.com">Weasel/Easel</a>
tutorial.
<p>
If you are familiar with using HTML and JavaScript to develop web pages,
then these tutorials will show how the various interface tools
provided by Weasel can be used to create web interfaces of
various kinds.
<p>
<b>Before you start</b>, make sure you are accessing this page
through your own web server, and that the computer you are using can fetch
web pages from the Internet.
See the the <a href="../Installation.html">installation instructions</a> for details.
<p>
You should work through the first 5 tutorials in the order given, they
introduce the basic features of the Weasel system.
<blockquote>
<dl>
<dt><a href="intro/index.html">Introduction</a>
<dd>
A general introduction to how the Weasel system works and how
you can use it. It also describes how each of the other
tutorials is arranged.
<dt><a href="photo/index.html">Photo Key</a>
<dd>
This first simple application shows the Weasel system being used to
provide a key to a picture. It's main purpose is to illustrate
the common form of an application using Weasel in a very
simple setting.
<dt><a href="floorplan/index.html">An Interactive Floor Plan</a>
<dd>
This tutorial application is a kiosk like system showing
facilities of various kinds at Edinburgh airport.
<dt><a href="floorplan2/index.html">A Better Floor Plan</a>
<dd>
This tutorial extends the floor plan application, showing how
to change the image interactively and how to make marks on the
map react to the user clicking on them.
<dt><a href="circuit/index.html">Electrical Circuit</a>
<dd>
A simple electrical circuit simulator. This tutorial shows how
marker images can be changed (to indicate lights turning on
and off) and also introduces `hotspots', parts of the image
which react to user actions.
<dt><a href="basket/index.html">Shopping Basket</a>
<dd>
This tutorial shows how markers an hotspots can be used to
implement the kind of drag-and-drop interface users are
familiar with in standard Windows applications. In addition
the issues around splitting an application into multiple
frames are addressed.
</dl>
</blockquote>
<p>
The remaining tutorials can be done in any order, they illustrate
the use of the Weasel system to produce more complex interfaces.
<blockquote>
<dl>
<dt><a href="pc_repair/index.html">PC Repair Instructions</a>
<dd> This tutorial shows how Weasel can be used to create
an interactive technical manual. Instructions for replacing a
faulty PC hard disk are illustrated by an active image which
highlights the parts to be worked on. This application
exercises all of the features from the basic tutorials
together to produce a sophisticated and responsive interface.
<dt><a href="estate/index.html">A Housing Estate Page</a>
<dd> This application illustrates the use of the `Palette'
in-browser database library to create an interface which lets
the user to choose from homes available on a new housing
estate.
<dt><a href="plotting/index.html">Graph Plotting</a>
<dd> Points plotted on a graph allow for easy comparison and
for patterns to be spotted. This tutorial illustrates the use
of the Weasel system to quickly create such a plot.
</dl>
</blockquote>
<p>
After completing these stages you should be in a position to design
and implement the kind of interface you want for your
web site. For ideas and help please see the <a
href="../examples/index.html">examples</a> and <a href="../documentation/manual/book1.htm">detailed
documentation</a>.
<p>
<script>tutorial_next("overview","tutorial/");</script>
<div align=right>
<tt><strong>tutorial/index.html</strong></tt>
</div>
</body>