Almost every web site begins life as a specially formatted text file. Initially, the web consisted of static HTML files usually create in text editors. Soon the rise of the WYSIWYG (what you see is what you get) web editors to sought to hide this code and present an editor more like Word or other popular word processors. This would allow the creation of web pages without the need of learning HTML.
What is Lucid?
The program works by letting you create workflows consisting of actions and bindings. Actions perform an activity normally to or with an object on the web page, while bindings attach actions to objects on the web page. You create the workflows by dragging and dropping actions and bindings onto the page and then linking them together.
Lucid includes an introductory tutorial in the help and the web site contains two video demonstrating use of the program. These three resources will help you get a better grasp on the program and its abilities. You can use any HTML page in Lucid, but only static HTML pages are supported. You begin by either creating a blank project or import an existing web site as a project. You then let Lucid add the standard jQuery and jQuery UI libraries along with their custom library libraries to the site if not already included them.
Next, you can create workflows in Lucid. For each workflow, you first create a binding. A binding is a combination of an object on a web page and an event on that object. The event will normally be an action by the viewer such as clicking an element of the page, moving the mouse over an item on the page, or pressing a key. To each binding you can then link a sequence of one or more actions. Each action will perform an activity. The activity may be an animation, a call to another web page, starting a timer, or other common dynamic functions. In many cases the action will have an effect on an element on the web page, but not usually the same as the one connected to the binding.
As an example imagine that you have a blue square on a web page. When that square is clicked you want it to fade away over a second and a half period. The binding would be the click on the blue square. The action would be an fade animation bound to the square that will slide it down the screen.
Graphically, the window in Lucid will show these connection by drawing lines from the event to the action and from the event to its bound element and from the action to its bound element. The right side of the window shows a visual representation of the static web page you are working with. You cannot edit the page in this window, but use it to connect actions and bindings to objects on the page. Lucid also includes a Preview mode that allows you to use this window to test your page.
On the left you see your workflow for the page. At the top of the workflow your bindings are displayed. Below this your actions will be displayed. Lucid displays the relationships between bindings, actions, and elements on the web page using arrows and lines. For a complex workflow this display can get crowded quickly and Lucid allows you to temporarily hide parts of the workflow for clarity.
How Does Lucid Do?