Dynamic fantastic?

Dynamic HTML is one of those phrases that is being bandied about at the moment. New technologies for the Web seem to appear every 5 minutes and anyone involved in Web development needs to assess whether the time taken to learn a particular technology will pay dividends. Just because of its sheer size, Microsoft's products are always worth investigating, particularly if, as in the case of Dynamic HTML, the W3C consortium will ratify it. W3C is the body of people who have the unenviable job of bringing standards to the HTML language. In our book anyone who is doing anything to minimise the differences between browsers deserves a medal! Having said that, Dynamic HTML is only supported by Microsoft IE4 at the moment. Netscape are implementing it but with a difference! Rather than getting into a browser war in these pages, let's just let the two companies have their say:

Microsoft: (from their Website)

"Netscape's implementation does not support the Document Object Model, as described by the W3C Preliminary Requirements Document for the Document Object Model. As a result, Netscape Navigator exposes few page elements as objects, limiting layout and creative capabilities for authors. Page elements can be manipulated only while the page is loading, not after load time. Netscape's nonstandard implementation consists of JavaScript Accessible Style Sheets (JASS), layers and dynamic fonts (TrueDoc). These technologies are not supported in Microsoft Internet Explorer 4.0. "

Netscape: (via email)

"Yes, we do have a Document Object Model, we are working closely with the W3C in this working group and helped write the preliminary requirements doc. There are aspects that they cover right now, aspects they don't, and the same for us. There is not even a working draft specification at this time, but we do fully plan on implementing the standard DOM specificaiton once it exists.

Dave Bottoms, Client Product PR Specialist Netscape Communications Corp.
So the good news is that it looks at though we will see a version of Dynamic HTML which will be supported by both major browsers.

Is it worth the effort of learning Dynamic HTML ? Well having played (you will note we say 'played' and not 'used' as we have yet to use this for a real site - when we do we'll let you know!) with it for a while now, it is obvious that there are some very useful extensions that can be used (and are sure to be overused for a while!)

The main thing to bear in mind when evaluating Dynamic HTML commands is that these effects occur locally on your browser without another call to the server. Dynamic HTML allows many animation and graphical effects. You can, for example, have a heading showing and when you click on it the full text appearing underneath. Text and images can change when the mouse pointer goes over them or when they are clicked, all without the use of a scripting language. All objects on a page will support onmouseover, onmouseout, onmousedown, onmouseup, onmousemove,onclick, ondblclick, onkeypress, onkeydown, onkeyup events.

Pretty effects are all well and good but all these hidden objects still need to be loaded by the browser, so the pages can take longer to load than their appearance would suggest. Images can be manipulated by the browser code with tempting tags such as Shadow, Blur, Glow and Alpha Transparency. This, coupled with the ability to move and scale images on the fly, should make for a whole new generation of badly designed and distracting sites ! There is a useful new object called the data source object which, when placed on a page in much the same way as the data control in VB, enables the user to scroll through records, sort records and update them. All this is done on a locally stored copy of the data and so takes some of the load off the server. This sort of effect can be achieved with different database cursors under Active Server Pages but the data source object takes it a bit further. There are bound to be some useful implementations of this object before long. As with scripting, there are differing views as to whether this sort of data handling should be done on the client's machine, with perhaps more records being sent than the user needs, or done on the server where the server generates the HTML pages dependant on the user request. This second method puts a greater load on the server but in many cases less on the bandwidth. If used sensibly, that is by only sending small numbers of records to the data object and not your entire stock list of 1,000,000 items(!), it should become a useful tool to anyone designing Websites that talk to datasources.

A huge area of change is that of CSS or cascading style sheets. These are like the styles that you are familiar with in Word or DTP programs which give your documents some sort of coherent look and enable global changes throughout your site by simply changing one file. Within a style you can change font, colours, borders, cursor type, and, interestingly, page-break-before and page-break-after; at long last this gives us some control over how HTML pages print.

You can redefine say <H1> to be anything you like just as you can <strong>, <B> and any other tag. Just imagine what sort of damage you can do with this!

If you want to change all your headings to a different colour, then with one simple redefinition of a style all the text with that tag will change within that page. Or, if you use linked style sheets, then the change will be implemented on all the pages that use that linked style sheet.

The specification of CSS is considerable -- take a look at the SDK which is available for download at http://www.microsoft.com/msdn/sdk/inetsdk/asetup/

Style sheets will undoubtedly make the design and maintenance of larger sites easier; more importantly, they bring extra effects to basic HTML. One new feature that Web designers will all love (and probably curse at times), is absolute and relative positioning. You can now place any object at an exact position on the browser page! The code works something like this for text:

<div STYLE="position:absolute; left:150; top:25">
This is some text
</div>
and like this for images:
<IMG SRC="image.gif" STYLE="position:absolute; left:300; top:25">

Now, when the design tools allow you to drag and drop objects anywhere on a page and for them to stay there, we are finally talking about real DTP for the web, rather than the current battle to fix objects on a page with tables, invisible gifs and all the other tricks you have to develop. Front Page 98 is currently in beta and has some support for these new commands already.

It will be a while before Dynamic HTML is universally used but most of the new commands seem to fail gracefully under older browsers and so with care can be used to enhance a site for users with newer browsers whilst not excluding those with older browsers. This is an important consideration as many corporates do not allow their employees to change their browser and so some of the biggest names that your site is trying to attract may be using a fairly old version of browser. The Times the other day stated that "60% of companies with more than a thousand employees are still using Windows 3.1" so whilst we all might play with the latest toys it is worth bearing in mind that the introduction of any new technology at the client end will always have a slow uphill struggle before becoming the defacto standard, by which time there will be another 'new kid on the block'!

An IIS gotcha
We recently had a problem with a Web site which is hosted on an IIS server, and which makes heavy use of session variables to track what the user is doing. Users were reporting that the site wasn't behaving as expected, and we eventually tracked this down to the user having clicked on a certain link, and the fact the user was using Netscape. How on earth could the choice of browser have an effect on session variables (which are stored on the server)?
The answer was to do with case sensitivity when specifying the server's virtual directory in the browser URL, which is handled differently in IE and Netscape. If, for example, your site was called Fred then the URL to your root project might be http://servername/Fred/.

If you create a link to home.asp as follows:
<a href="/Fred/html/home.asp">Goto Home Page</a>
then you should have no problem getting session variables tracked properly between pages on your site. If, however, you have a link to:
<a href="/fred/html/home.asp">Goto Home Page</a>
then a new session will be created because of this case sensitivity issue (Fred vs. fred), and hence session values will seem to disappear. This is one of those mistakes which is very easy to make, and incredibly difficult to find!

Copyright 1999 ECats Ltd all rights reserved