|
|||||
Helen Bradley and John
Hilvert explore what the latest Internet buzz word,
Dynamic HTML, will offer to Web pages and designers.
Dynamic HTML is an extension to HTML which is incorporated into Microsoft's Internet Explorer 4.0 and Netscape Navigator 4.0 and which is based on the cascading stylesheet specification. Unfortunately, as has so often been the case with HTML, the implementations from the two companies are not the same and what will work on one browser won't necessarily work on the other. For example, with positioning of objects, Microsoft supports a W3C "Working Draft" approach of using the Cascading Style Sheet (CSS) standard. This uses x-, y-, and multiple z-plane coordinates to locate and move text and images. Netscape's dynamic HTML, however, produces the same effects using a "Dynamic Layers" tag, that sets many layers to a page, in which the HTML objects are manipulated.
But there's some good news: the World Wide Web Consortium is currently deciding a standard for Dynamic HTML that both Microsoft and Netscape have pledged to support. In the meantime designers and users will be faced with the issue of errors occurring or scripts not functioning on pages designed for a browser other than the one being used.
Figure 1: The interactive Vacation Planner site has objects that you can pick up and which change as you move them.
As a Web user you'll benefit from Dynamic HTML by viewing more interactive sites with faster loading pages and changing information. You'll be able to drag and drop elements on a page or click on an object and the response will be immediate -- you won't have to wait for information to download from the server. The Vacation Planner site, Figure 1, shows you an example of how this might work: http://search.netscape.com/comprod/products/
communicator/user_agent_vacation.html
You'll see more animated sites, too. In the past, practically the only way to create animated text was to create an animated GIF file, but these are often large and take time to download. Dynamic HTML allows a developer to hide and show text and to move it around the page so that text animations will appear lightening fast. Other graphic animations are possible too and as these can be controlled via a scripting language, you'll see more interesting things happening on your screen and the graphics can be made to respond like any other object on the page; for example, if you click on a graphic a filter can be applied to it so that it blurs, sharpens or changes hue or it may disappear or move.
Like a slide show presentation, pages may dissolve away on the screen instead of the screen simply clearing or a graphic may slide from the edge of your screen into position on the page.
Figure 2: Sites such as Macromedia's Dynamic HTML zone contain lots of useful information and tutorials.
For the designer, Dynamic HTML offers the ability to place text and graphics in absolute positions on the screen (to exact pixel values) and to overlap, move or hide them. Elements can be positioned using standard x and y coordinates with the z coordinate being used to specify the ordering or layering of the object. There's also support for fonts which allows designers to use virtually any font in any point size on their page, whether or not the user has that font available on their system. Fonts can be included in HTML documents so that the user can view them on the page but their use can be limited to a single document or a particular site. Additional text control options include margin height and width, line spacing, borders and padding. These features give designers the ability to lay out text and graphics more accurately and have pages display them way they intended them to look.
Designers will also be able to include a variety of objects on the page which can be manipulated by the designer or the user. These objects have events that enable the object to respond to such things as the mouse moving over it or it being clicked without any interaction with the Web server being required. For example, you might move a mouse over a heading and see the text alter in colour, change size or a piece of text relating to that heading sweep into view. Graphical effects such as filtering, transition and animation will put more features in the hands of designers to create interesting effects on the Web page.
A page can be downloaded with additional information that is not visible to the user until they or the designer does something to make it appear. This has two benefits. Firstly, because this 'additional' information is already on the viewer's system it appears quickly. And secondly, there's nothing more to be downloaded from the server so the load on the server is reduced.
Dynamic HTML includes the ability to dynamically create page content so a page can be changed at any time and the changes rendered by the browser without the need to redraw the entire document. The database functions allow a server and a client to be connected so that information in a database can be displayed in a page, sorted and updated without the page needing to be redrawn. And, because the server and client are connected, data can flow both ways, so the viewer can enter information onto the page resulting in the database itself being altered.
Finally, Dynamic HTML offers cross platform support including Windows 3.1, 95 and NT, Macintosh and Unix. This means that Web applications created using Dynamic HTML can be used by any one on any of these machines without requiring rewriting.
Figure 3: Create this black box with text in layers over the top in IE4 using Cascading Style Sheets and in Navigator 4.0 using the <LAYER> tag.
One of the best features of Dynamic HTML will be the speed that pages load. Instead of using server-side technologies which require repeated trips to the server and thus suffer from speed issues, Dynamic HTML uses technologies such as JavaScript, Java, ActiveX, and VBScript which are client-side technologies. Pages will load faster because many animations will be textual scripts rather than large GIF files and because information can be downloaded and not made visible until required, the information will often be already on your computer by the time you choose to access it.
Experiment with Dynamic HTMLUntil the standard is actually determined, approach Dynamic HTML with the understanding that it is differently implemented on each of the browsers and you should check your site on both browsers to make sure that each page behaves as expected. You'll see the leading edge sites pick up Dynamic HTML first with other sites following. If you're interested, check out some of the demonstration sites that are appearing to showcase the new technology (see Figure 2).
Dynamic HTML experiment
filesYou will find the example files Cascading Style Sheets (ie4css.htm) and Netscape Navigator Layers (nnlayers.htm) on this month's CD-ROM in the \interact\html\ folder.
Remember that you'll need IE4 or Navigator 4.0 to view the files and choose the one for your particular browser. If you are currently using one of these browsers click on the link above to view the files now.
1. Netscape Dynamic HTML Resources:
http://developer.netscape.com/library/
documentation/htmlguid/dynamic_resources.html
2. SBN Dynamic HTML Gallery: http://www.microsoft.com/gallery/files/html/default.htm
3. WebCoder.com -- Your home for
JavaScript and Dynamic HTML on the Web:
http://www.webcoder.com/howto/
4. Macromedia's Dynamic HTML Zone:
http://www.dhtmlzone.com/
5. Netscape-Webmonkey Dynamic HTML Contest Winners: http://developer.netscape.com/devcon/jun97/contest/contest.html
Top of page
|What's New | Net Guides | Web Workshop |
Net Sites | About PC User |
| Games | Education
| General & Business | Online Tools | Utilities
|
| Patches & Support files | PC User Interactive |
All text © 1997 Australian Consolidated Press - PC User Magazine