DHTML - Dynamic web pages

A web page only with text and image has become, in the few years of history of the Web, almost an exception. Leaving aside the fact that more and more pages are generated on the fly in the server, thanks to database connection systems like ASP, Coldfusion and PHP, the pages Web to what we have got used to display a much more rich appearance and behaviour than the original ones of the first 90s and it is due to the use of dynamic HTML and Javascript fundamentally, together with some plugins like Flash or Shockwave.

Although at first sight it can seem something out of reach for a beginner, or someone who is simply preparing his personal page, to create a page that takes advantage of these possibilities is not so difficult. Luckily tools exist that make it really easy to do.

Scripts

Scripts (fundamentally Javascript, which we have commented already in the previous page) are small fragments of code that the navigator interprets to do certain tasks. For example, in the simplest case, it can look for the date and hour of the system and to display it in the screen. In more sophisticated applications, it can automatically generate complex animations and effects with the text and images. Dynamic HTML (DHTML) to the combination of Javascript and the page definition as a series of objects in CSS, to obtain dynamic effects in the web pages, something utterly unthinkable in the first generation of navigators.

This type of pages demands a present-day navigator (version 4 or superior.) Like an additional limitation, problems of compatibility between different navigators exist. For example, Internet Explorer 5 and later is much more versatile and CSS-compliant than Netscape 4.x., but it really doesn’t respect all web standards. This situation is being addressed more with recent versions of Mozilla and Explorer. It is no wonder that many designers, for the sake of a maximal compatibility, have renounced to certain possibilities that could have been very interesting. This has happened at least during several years. The fact is that, like it or not, at the moment Explorer has such implantation between the navigators that is almost safe to use DHTML that works only for this navigator! (you should cater for all browser, though, and be aware of the importance of respecting web standards.)

The lack of respect for standards is irritating, especially during the so-called period of the “Browser war” because it has supposed in fact, an important limitation or stagnation in the evolution of the design for the Web during several years. To complicate things still more, some scripts that worked in the previous version of Netscape, now don’t do it in version 6 or in Mozilla, and vice versa. This is something that definitely has to be taken care of.

Existen, por supuesto, otras alternativas para dotar de contenidos dinámicos a las páginas web. En diferentes secciones de Vigital tratamos otras alternativas como son Java y Flash. Cada sistema presenta sus ventajas y sus inconvenientes. Javascript tiene la ventaja de estar incluído (normalmente) dentro de la propia página html, ser bastante compacto y tener una amplia compatibilidad, mientras que Los comportamientos dinámicos en Flash son muy versátiles, puesto que pueden llevarse a cabo como respuestas a muy diversas acciones. Por ejemplo, para el ratón, puede dispararse una acción al hacer clic, doble clic, pasar por encima, salir de un área, entrar en un área... Other alternatives to include dynamic contents in web pages exist, of course. In different sections of this manual we treat other alternatives as Java and Flash. Each system has its own advantages and disadvantages. Javascript has the advantage to be embedded (normally) within the HTML code, being rather compact, and with few compatibility issues, while the dynamic behaviours in Flash are very versatile, since they can take place in answers to very diverse actions. For example, for the mouseover, mouseclick, double click events, an action can be triggered.

CSS and DHTML

The relation between both is based in the form in which the dynamic HTML deals with the contents of the page, once defined with CSS rules. Its position, visibility and display properties are not something fixed: it can be modified voluntarily, based on different parameters. With the HTML alone it’s not possible. Frequently, the dynamic contents must be located in objects in the page, usually “layers” (DIV elements). Each layer has its own parameters, position identifiers, stacking order (over or under other elements), visibility and actions in regard to which happens in the browser or what the user does.

Unlike regular HTML, with layers it is possible to overlay different elements in a page, creating interesting effects. The layers can be visible or hidden based on the parameters that you choose; if a layer is defined as a movable object, can be dragged voluntarily across the screen, or automatically in answer to different actions, even the movement of the mouse.

Although the programming that is hidden behind DHTML can look like a Klingon dialect for mere mortals, profane in Javascript, to define the behaviours or dynamic actions in a visual publisher isn’t very complicated. A dynamic action always has same elements. The actions are defined from the objects of the page. An object can be a text block, a link, an image, a whole layer, the complete page... Each category of object allows a certain number of actions —not all actions are available for each type of object. For example, some are exclusive of links, and if you want to have them on your DHTML it might be necessary to define a link, which you can do even with an empty bookmark (#). The actions consist of:

An event or situation that triggers the action, involving a certain object in the page when some event takes place, like:

a mouse movement;
the state of another object (for example, is it visible or not);
the page state (has it loaded completely or not, or opening a new page.);
transition, movement, dragging an object in the page.For example, when an object has reached a certain position it may trigger the opening of a new window.

An order or message that is transmitted to another object(s) in the page. This order may have different parameters that allow to adapt it to the intentions of the designer. For example, if there is a movement through the screen it is possible to indicate the trajectory that is going to follow.
A target object that changes according to what happened in 1) and the order received, 2)

Some applications of DHTML

Scripts can do very simple tasks, like opening a new window of the navigator, close it, show the date, show a different image according to the time of day or the week... but they can even be small applications by themselves. For example, a form that allows to create a page Web, or to calculate a shopping cart purchase in an online store.

Some of the best known and/or useful examples of the use of Javascript (specially in pages with DHTML) are:

Menus with drop-down options. There are many different types. The simplest are identical to the menus of a form, but in the most sophisticated versions they behave like the extensible menus of a program (when clicking or mousing over a part of the menu is shown with new submenus or options.)
Store and retrieve information in the user computer (cookies), and based on this information, direct the user towards a specific page or customize the page.
Dynamic changes of images. The usual effects of mouseover. Different options exist. Thought initially for images, with a little practice it can be applied to any object of the page, with text only and no images if needed.
Change the visibility state of layers. A layer is a container of text and image in the page. A method with many possibilities. For example, we can cause that an initially invisible layer appears when we click in some link, for example showing an image, or additional information. The layers can also move in the page, appear or disappear...
Boxes with sliding content (scrollboxes). Manually scrolling text boxes already existed in form fields and in simple Javascript, but lately we see a much improved version that uses DHTML to make the content of the box automatically moves upwards or downwards when placing the mouse on the direction arrows, or when clicking them.

How to include scripts

If we take a look at the code of a dynamic page, the necessary code will show up. Evidently, it is necessary to include this programming so that everything works as it is due. But it does not mean that we must write the code by hand and starting from zero. Fortunately, the designers have other alternatives that work more or less satisfactorily.

The most comfortable option to include interactivity in the pages is to use a visual program, in which to define an DHTML action or a script is only one a question of choosing between options and menus, with no need to edit the code directly. Some effects such as mouseovers are automated this way, and the user only nees to assign the images and the corresponding links in a dialogue box.

Defining the dynamic behaviours in web design programs like Dreamweaver, GoLive or Fusion is very simple. Once selected the object that is going to be assigned the action, a dialogue box appears. A great variety of predetermined actions exists, but always it is possible to adapt the system to introduce new variants. In the program which we used for the original version of this manual, Netobjects Fusion, these tasks are particularly easy. For any object a tab of Actions is available in the properties palette, and there behaviour is defined. In addition, there are additional components that further facilitate the creation of dynamic actions.

Any good web editor includes easy commands to include dynamic scripts (in this example, First Page 2000, an excellent freeware editor from Evrsoft.)

Dreamweaver, probably the most popular profesional web editor, features two palettes for dynamic actions: the behaviours, equivalent to the actions tab in Fusion, and a Timeline window where you can define movements for the objects in a very intuitive way. GoLive offers similar features too.

Cut and paste

The home user or a beginner usually doesn’t have a professional caliber program like the ones we have just mentioned (although it is possible to get Fusion at bargain price; you can buy it directly from the developer’s website.) The variety of dynamic behaviours is more or less limited and doesn’t offer some basic but equally useful scripts. In these cases, the best solution is to copy and paste (and configure if necessary) the code directly in the HTML of the page, and edit the required CSS. You can insert the code directly in the web editor, in HTML mode, or in any text eidtor.

If you are beginning to panic when you are told to edit the code directly, never mind. You can often do it with barely touching the markup, just following simple instructions. There are specialised websites like Dynamic Drive where you’ll find dozens of ready made scripts, with all the necessary instructions to set them up, and it usually just takes a few simple steps. The scripts in Dynamic Drive are filed under different categories (Menus and Navigation Systems -Special document effects - Scrollers - Images- General, Slideshows, onMouseover- Mouse Trail effects - Links and buttons - Dynamic clocks and dates - Text animations - Browser Window - DHTML Games - User/ System Preference - Other), which simplifies the search for a particular effect that you want to include in your site.

If you want to borrow code from other web pages, first, think it will probably be harder to customize to your own page, unless it’s really simple; second, writing the Javascript code takes its time and work and it’s possible that the authors don’t want to share it for free. It may be copyrighted and you should always check and in case of doubt, consult the authors before using it on your own page.

Tips and ideas

DHTML is an excellent system to save screen space and get rid of the constraints of sequential navigation.

You can include more information than fits on the page, and make it appear with actions we have assigned to different layers. For example, we can create a container to display additional information about the sections of our website, and use the icons or the names of the sections to make this information appear when the user clicks them or mouses over them. You can also add a automatic or manual scrolling box to put up a longer text in the page.

You can create a slideshow. Most visual editors include utilities to do it very easily. You basically put several images on separate layers, align them all to have the best visual results, make all the layers hidden (perhaps with the exception of one, the initially visible image) and assign an action to each image that makes all the rest of images non visible while displaying it. A similar system may be used to create drop-down menus.

Create interactivity and games. A layer can be draggable, and when the user clicks on it, he may move the object around to any place on the window. This action can be used for remote controls, games that work perfoming actions when the user drags a certain object to another target object, sophisticated navigation schemes, etc. The only limitation is the designer’s imagination.