LEARN@IGP

Infogrid Pacific-The Science of Information

6

Setup and Pre-requisites

The AZARDI Interactive Engine needs correct HTML5 or XHTML5 and links to the AIE javascript to work. This section shows you how to set up a desktop development and testing page with the required links. Updated: 2012-08-20

HTML Setup

The AZARDI Interactive Engine and JQuery javascript must be referenced in your  HTML file. This applies if it is a web page or a section page in an e-book such as ePub.

When you download the aie-tutorial.zip package the full HTML setup is included.

If you are packaging an ePub for AZARDI Desktop you do NOT need to put any javascript references anywhere in your files or package. The AZARDI Load and Build (LAB) application will automatically detect if you are using any XHTML structures that need AIE and load it accordingly.

<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="utf-8" />
    <title>AZARDI Interactive Engine Loading Template</title>
    <link rel="stylesheet" type="text/css" href="css/your.css" />
    <script type="text/javascript" 
            src="js/LAB.min.js"></script>
    <script type="text/javascript" 
        src="js/aie_loader.js"></script>
    <style type="text/css">
    .aie-events {
        display: none;
        }
    body, div {position: relative;
        }
    <style>
</head>
<body>
    <pre class="aie-events">
       AIE script goes here
    </pre>
    <div>Interactive HTML goes here</div>
</body>
</html>   

Linked files

The AZARDI Interactive Engine loads the LAB.js (Load And Build) starter file. LAB.js will then load any other Javascript components required for the interactivity you are specifying.

Guidelines

You will inevitably be working with changing the appearance and most likely the position of elements in a panel of some sort. This means you will make extensive use of CSS display and position properties in new and unusual ways. It is a good idea to be familiar and confident with the positioning and display capabilities of CSS.

CSS Positioning

Fixed layout and Interactive scripts generally need explicit positioning to be applied. This is essential for animated objects.

For position properties to work a parent container element must have a position statement, even if it is position:relative;, then child position:absolute; properties will work correctly. And we can't forget the z-index attribute for depth control.

Positioning is Tool Number 1 in the fixed layout and interactive toolkit.

Of course like all refined tools, once you go to positioning control in CSS you have to control everything.

CSS Display

If you are not aware of the power of the CSS display attribute you probably shouldn't be using AIE! With CSS any display type in HTML can be changed to any other display type. This is powerful beyond understanding. For example:

  1. You can change a <div> standard block structure to an inline object.
  2. You can change a <span> standard inline style to a block structure and make it display anywhere, and do anything you need.

But display has a lot more than that to do heavy presentation work. Display is Tool Number 2 in the fixed layout and interactive toolkit.