TNC: Scott, welcome to the show.

SI: Hello.

TNC: Tell us about your book. You have a book out.

SI: Yes. I have a book out, "Inside Dynamic HTML," which is not surprisingly about Dynamic HTML.

TNC: Microsoft Press.

SI: Yes. This is for Microsoft Press. It's in their Programming Series. It's a fairly technical work and in-depth book into how you actually add Dynamic HTML to your web pages, about the technology and the background.

TNC: Who is the target reader? Is it the HTML neophyte or is it somebody already with experience in web programming.

SI: It's more for an experienced user. It doesn't teach you HTML. It assumes that you know some level of scripting or that you've programmed before. It doesn't assume, though, that you know how to write Dynamic HTML--that's what it teaches. But it's not a beginner's book.

TNC: There is a conceptual shift between Dynamic HTML and the generation 2.0 and 3.0 browsers when more functionality meant adding new tags.

SI: Dynamic HTML is not about adding new tags or anything new to the HTML language. It's just about taking the existing HTML and the existing CSS that's out there and letting you manipulate it from script. In the old browsers --the 3.0 browsers for example-- you could go in and do simple things like form validation, but you wouldn't be able to go in and change anything about the page. The page was still mostly static. Dynamic HTML opens the page up to scripting so you can go in and access the text behind the page and access the actual content; change the appearance, the style all in the client.

TNC: What is the difference with DHTML and scripting with JavaScript --something you could do with 2.0 generation browsers?

SI: In the 2.0 generation browsers, all you really could do was validate form fields--user types and the string--you could check if it was a valid string or not. What you can now do is actually go into a page and you change the content. You can make expanding and collapsing outlines that instantly hide or show content.

TNC: Without reloading the page?

SI: Without reloading the page. That's really the key point. Everything happens on the client and you don't have to go back to the server. So, you can improve the user's experience.

TNC: It was possible in generation 2.0 browsers to dynamically update elements like the status bar and also text fields and text areas. Some designers abused that feature and it became annoying. Dynamic HTML let’s you do much more than that.

SI: It's everything on your page. Every word on your page can now be updated--you could walk into the first paragraph of your page and reverse all the letters if you wanted to.

TNC: So what's going on here is that the internals of the browser are exposed and there's an API for manipulating objects within the browser or text or headers --there's an interface for that.

SI: Now, the easiest way to think about this is, you have a bunch of tags in your document, like the H1 tag. Well, the H1 tag is now also an object in a language that you can script. Every single tag in your document becomes an object and every single object has properties that let you manipulate the content.

TNC: So Dynamic HTML expands the object model that HTML works from. Does this also apply to images?

SI: Images--everything on your page. I mean, most people don't believe it, but it really is every single tag on your page--you go in; you can change the style, the appearance. One of the favorite tricks that people do now is when the mouse can go over different words on your document, not just images, you can make them bolder or change the color of them.

TNC: Depending on the state of the mouse?

SI: Depending on the state of the mouse or on the state of the whole application.

TNC: Before we go into the details of how this works, it may be helpful to have a short background history of where Dynamic HTML comes from because it is a standard, isn't it?

SI: It's hard to actually look at it. Really, DHTML is a term that combines a bunch of standards. At least, as Microsoft uses it, Dynamic HTML consists of the HTML 4.0 standard, the CSS 1.0 standard, some upcoming work in CSS working group, as well as an upcoming standard for the document object model. Microsoft basically implemented the spec early on although that one's not finalized yet. I just want to give also a little background, actually, about what HTML really was. HTML was really a mark-up language. When you say H1, it's supposed to mean it's important. Not that it's big and bold. The big and boldness is basically presentation. That is what CSS is supposed to define. It's supposed to control the presentation. The goal is, is to either use HTML to mark up with it, your documents and your contents with the importance of the information. So, an H1 would be an important. The strong tag would mean this word needs to be stronger than the other words in the sentence and then the rendering and its appearance would all be defined by stylesheets. So, the stylesheet would say, the H1 is big, bold and now you can even say, it's red with letter spacing and lots of big margins, etc.

TNC: And actually this mark-up language aspect of HTML confuses many web designers. It really goes against the desires and needs of traditional graphic designers, for example, who want to have complete control over the layout and appearance of the page. HTML comes from a totally different background.

SI: Yes. HTML is basically an SGML language. All it really is that you tag your contents with tags that will add meaning. CSS, that really is what you want to use to take full control of your presentation.

TNC: Okay. So, what is CSS?

SI: CSS is a stylesheet language. It's, basically, again, how you associate different rendering and different appearance with your documents so you can define like rules that say H1 tags are now so big, bold and green. All my DIV tags in my document should be positioned at a certain place, etc. CSS really gives a designer complete control over all rendering aspects of their document.

TNC: And you can shift between and among stylesheets within one document.

SI: Yes, with Dynamic HTML, you could actually switch the stylesheets from under the document, changing the appearance dynamically. But that's actually done using the object model more than using the CSS.

TNC: How long has CSS been around?

SI: Internet Explorer 3.0 was the first browser that supported CSS. It supported it before it was finalized. So, that's been a couple of years ago. And then IE 4.0 and Netscape 4.0 both added CSS 1.0 support.

TNC: What is the current level of support for DHTML in the Microsoft and Netscape browsers?

SI: Both Microsoft and Netscape use the term Dynamic HTML for their technologies and their browser. The difference is in the capabilities. In MS Internet Explorer 4.0, you can change anything at any time about the page. In Netscape's version, it's basically the 3.0 object line. You can do form validation plus now you can move elements around the screen. You can't go in and still change everything on the page. It's a lot more limiting.

TNC: Are they totally incompatible? If you write something in for Explorer using DHTML, will Netscape understand some of the object tags you may use?

SI: Well, both handle images and forms basically the same way. Internet Explorer uses an object called the All Collection to move elements around. Netscape uses a different collection called Layers. And the difference really comes back into the fundamentals of what both browsers did. Microsoft, in the All collection gives you access to every element and does not distinguish between whether it's positioned or not. With Netscape, you can only program positioned elements –elements located at specific points on your screen. These few elements are packaged in a separate collection called Layers.

TNC: Could you give us an example of direct positioning?

SI: The easiest example is to look at what most people are using tables for. They create these really complex, nested tables just to get an image or some text kind offset from a certain side of the screen. It's amazing what people can do with tables. Well, it obviously makes a lot more sense if you could just say, "position this element or this text 100 pixels down or 200 pixels from the right edge, or ten percent, etc." So, what positioning gives you is the ability to say, "I want to really put this there on the screen. And I could do it directly. I don't have to go through building complex tables and adding all these spaces in my document, etc."

TNC: This is something that designers have been requesting for a long time?

SI: Yes, if you step back and look at any forms package like BB or Access or any package that let you design forms in a 2-D space, you just dragged and dropped things where you wanted them. It finally brings that capability to HTML.

TNC: And so this will actually probably give way to a whole new generation and probably a more adequate generation of HTML editors too. Since the problem today has been the nature of HTML as a mark-up language, it's really been hard for all of the software companies to come up with a really adequate HTML editor package.

SI: Yes, if you look at the latest generation packages, they're all GUI interfaces with visual design packages. You basically drag and drop things where you want them. And if you target old browsers, they'll generate that really complex table, but if you target the 4.0 generation browser, it just says put that thing where you put it.

TNC: This reminds me of Java. One of the big frustrations with Java, when building dialog boxes, for example, is that the placement of the controls on the dialog are decided by the layout manager, which is great in some ways, but also extremely frustrating for programmers who want to have total control over the appearance of their windows. You're moving from a relative placement model to a to an absolute placement model.

SI: And you can now do it with standard HTML.

TNC: Are Navigator and Explorer going to be compatible in the future, as far as the HTML is concerned? What is the effort there on both sides?

SI: There's a W3C group called the document office model working groups. Both Netscape and Microsoft are represented within that committee and are participating actively to resolve differences. The number one complaint, both companies are hearing from the users--"Oh, my God, I don't want to do this, but I have to do it twice." So, both companies are very much committed and you can go to their websites and read their comments on this.

TNC: So, there is hope then for developers out there. When I was on your site, I noticed that you had a collapsible outline that could actually work both on a 3.0 generation browser and a 4.0 browser using DHTML.

SI: The way I did the outline at least to make it work in the 3.0 browser is it really was kind of a cheat. One of the things that 3.0 browsers let you do is generate a document completely from scratch. Every time the user click on a list item, I basically regenerate the entire document from scratch and either expanded or collapse that appropriate area. This simulates a dynamic document. The problem with that approach is if it was in the middle of a large, long document, it wouldn't work. You'd get a lot of flickering, a lot of delay.

TNC: It's a kludge.

SI: In a small document, it's usually quick enough that you'll just get the flicker but it's not enough to make you want to pull your hair out.

TNC: This may call for the use of frames, to get smaller and smaller documents.

SI: Yes. Now, moving forward to generation 4.0 browsers, in Microsoft what you can now do is instead of having to regenerate to the entire document, every time the user clicked on the items, the contents below that item were in the document. They were just hidden. All you do is say, "turn them on," There's no flicker. It's very seamless.

TNC: You know what's pretty interesting here about DHTML is when the first browsers came out, the whole idea was to put all of the smarts on the server and as little as possible on the client. And now it's that the client is being loaded again with features and obviously it makes sense.

SI: If you've got a computer on your desk, you might as well use it.

TNC: Actually Microsoft is approaching it from two angles because with active server pages, you get a lot of dynamic manipulation at the server side. And then the Dynamic HTML, you can do it on the other side, too. How would you repaint dynamically the text content of a Dynamic HTML page?

SI: What's really nice about it actually is you don't have to worry about the repainting. It will happen automatically. The way it works is that CSS defines a property called Display. ‘Display None’ removes the element from the flow of the document. When this happens, it's like the element does not exist when it's rendered, so you won't even know it's there. It's just hidden. When the User clicks on an item, you can set the attribute from ‘None’ to ‘Block’ and the element would just magically reappear. There's no method that says, "paint this text", or anything like that.

TNC: So you don't have to worry about coordinates and update rects ?

SI: Nothing like that. Everything works off of the DHTML and the CSS and the document.

TNC: How about flicker? There is a game of Space Invaders written entirely in Dynamic HTML. At regular intervals, the invaders and come down a few pixels.

SI: The repaint in DHTML is done once the script relinquishes control. So if a script moves 50 screen images, they won't repaint until the script stops. What that also means is whenever you want to do an animation with the Dynamic HTML you should put it on the timer. At each timer event, you would move everything a little and then call the timer again to start up. It will repaint and call your code again and move it again.

TNC: So, there's a timer object--there's a DHTML timer object.

SI: Yes. As soon as your code starts running, no other events will occur until your code relinquishes again. It single threads through your script.

TNC: Okay. You're mentioning events. What are DHTML events? How do you get events and how are they implemented?

SI: The event model in DHTML uses a concept we call event bubbling. What you need to do is look at the structure of your HTML document. When you write an HTML document, you basically have the HTML tag that has a <body> tag in it that may have the <P> Tag in it, and a <B>, bold, tag. You could put an event handler on any tag in your document. An event is fired when the user clicks on or drags over the contents of the tag, for example. When the event is fired, it will first go to the tag that is closest to it. So if you have a bold word in your document and you click on the bold word, the <b> Tag, the bold object will get the click event. Then bubbling part kicks in. If the <b> is inside a paragraph, then the paragraph gets the click event, and then the <body> will get the click event, then the <HTML> tag and finally the document. Basically, every tag in your document will do this. This is the advantage of the bubbling model. Let's say you have 15 paragraphs in your document. And every time the mouse moves over a paragraph, you want a certain action to occur. Rather than writing the event directly on each paragraph, you can write the event handler on the document and then from the document ask the question, "What paragraph was it over," and then take action. So you can write really generic code. You can add drag-drop to your web page in this way –one of my favorite examples. Drag images around the page in ten lines of code. It's easy to do it generically. Every time the user clicks, the mouse goes down. And you just check if the mouse went down on an image. If so, you allow them to start dragging it.

TNC: There are a few examples of that on your site, actually. You have a circle that can be dragged around the page. Now, that's similar to the way that the event model in the JDK 1.0 works for Java. It just sort of bubbles up through the panels or the AWT components on a form. So that should be familiar to people who are used to Java. Could you step us through a real simple example?

SI: Let's say you wanted to move something from the upper left corner to the upper right corner, and you wanted it to take ten ticks. In other words, it will animate ten times. It will go through a cycle of ten.

TNC: Okay.

SI: You don't want to write, "for X=1 to 10", for example -it would move there immediately. Instead, what you're going to do is just move it and then you're going to set a timer that'll call your function again after so many milliseconds. And just move it one more chunk and then do it again.

TNC: Can you kill the timer?

SI: There's a Clear Timeout and a Clear Interval statement. The Clear Timeout will stop one of those one-time timers before it occurs, in the Clear Timeout. And the Clear Interval will stop one of those cycling loops.

TNC: Can you trap text as it is being entered in an edit-box?

SI: One of the things I've seen some people do is have a little character follow you around in the document from field to field. So when you click into another field, then it receives the focus, this little character will animate over to that field and tell you what you should do there and then you click in another field and it will follow you down there.

TNC: Navigator and Explorer have a feature that searches the open URL combo box while it is being edited. If a URL matching the text being entered is found, it is displayed in the edit box. Would you be able to do that in a form using DHTML?

SI: Yes. Some of the standard events available throughout the document are: Mouse Down, Move Mouse Up, Click, Double Click, Key Down, Key Press Key Up. So you can actually detect when the mouse goes down. And then you also get select events and you know when the user starts selecting text on the screen, you could actually respond to that. And then there's an event that says, User is about to start a Drag Operation or about to Drag an Image Off the Page.

TNC: Is there a generic catch-all events for Windows messages?

SI: There's no generic catch-all event for Windows messages. You do get the generic bubbling of the built-in event.

TNC: Actually, in the 3.0 model there was an On Change event that might have done it as well.

SI: The On Change event fires after the user starts typing all of their characters and leave the field. So, it's actually not the ideal event for what most people want to do because if you have one input field, and the user types some text in, unless they hit an Enter or Tab, the On Change event will never fire.

TNC: Now, I want to come back to browser compatibility, because this is a basic issue for developers. How do I write code that's compatible between browsers?

SI: Well, the first step is to determine which browser is running. There are two ways to do this. The navigator object -called navigator because that's what Netscape called it in their first release- has a string property called ‘AppVersion’. It indicates the version number, the platform that they're running on, and in some cases the language of the browser. You could easily decompose that string and then check and target different browsers based on that string.

TNC: How can I make sure that my code is portable from browser to browser?

SI: What you end up having to do is look at what you're trying to accomplish and matching it to what's available in the different browsers. For the most part, IE supersets the Netscape object model and functionality. Everything you can do in Netscape can be done in IE. The problem is it just might be a little different between the browsers. If you're programming forms and doing form validation or you're basically doing simple image manipulation, the same code should run in both browsers. Moving elements is another matter because both browsers here expose different object models. What you need to do is detect which browser the user is running and then based on that browser, use the IE All collection or the Netscape layers collection. For example, in IE, to move an element over five pixels, you would use document.all, get the target element and increment element.style.pixelleft. In Navigator, you would use document.layer and retrieve the target element increment and element.left. You end writing simple conditionals. So, say if it's one browser, run this one line of code, else, if it's the other browser run another. But that only works where there's shared functionality. Obviously, if one of the browsers doesn't have the capability, you're going to be writing codes for one browser and not for both.

TNC: Will the next version of Navigator support Microsoft’s current implementation of DHTML?

SI: I don't know--I can't speak for what they'll support but they did agree that they’d support what the W3Cs document model is working on. Microsoft DHTML is basically functionally equivalent to this model. There are just some property naming differences that can be easily resolved.

TNC: Should developers write for Explorer and wait till Navigator catches up?

SI: Yes, I'd agree with that.

TNC: Tell us about your website, Inside DHTML.

SI: I started the web site, to be honest, as a promotion for the book, and then I learned real quickly that people were looking for a good source of examples and techniques for Dynamic HTML. The web site is more of a complement now to the book. They tend to go together and most of the examples on the web site are not in the book. They're basically techniques that I have recognized or have received in questions like, "how do I do this?" And I'll answer it on the site. You could find examples, as we said, for drag-drop outlining. Basically almost you could imagine for DHTML, there's probably something pretty close in a small targeted example on the site. One other thing I've been doing a lot on the website is the cross browser stuff. How do you write stuff for Netscape and IE? How do you do the positioning? How do you do the animation? And what do you need to do to make it run cross browser? How do you hide and extract the differences in browsers so you can write one piece of code that happens to run in both. All the differences are hidden in function.

TNC: Another technique illustrated on the site is ‘swiping’.

SI: This will only work in IE 4.0 and it is called ‘transition effects’. You could actually print on any rectangular element on your page. I'll say rectangular because they have like a width and height. You can basically say, "put a CSS filter property on it, and say `filter, call in transition.'" And you have like a choice of swipe effect, blend effect. It could fade out; it can do all of these interesting, what I would say, like presentational like effects in your HTML document. And all you need to do is you add the filter properties, the effect by transition, and you give it the number of the transition you want and how long you want the transition to take, and then somewhere in your code, in response to some action, you can call one line of code that basically says, "play that transition."

TNC: Are these transition standards?

SI: Microsoft proposed the filter property to the W3C for the CSS working group. They're right now trying to work out how they can define CSS filters to work in a very broad cross platform generic way. So, it's going to take a little time for it to move through the standards process. So for now this works only in IE 4.0.

TNC: Scriplets are another technology you showcase on your site. These are basically little packaged functions that have can travel to one page to another and operate the same way on any page.

SI: Users know how to use Java to write an applet code that can be embedded on a page. A scriptlet is based on the same idea except you write HTML, CSS and some scripting. You basically write DHTML and you package it up and then you just embed it on the page with the object tag. It's basically encapsulating up your functionality into a reusable component that exposes its own properties, its own methods and its own event.

TNC: How did you package a scriptlet?

SI: Scriptlets are just standard HTML. You use though a special convention and you basically create a simple constructor as in a Java script function that basically defines what are the public members of that object. And then when you want to reuse that scriptlet, on the page that you were using it on, you just use the object tag. You set the data attribute to point to the URL of your scriptlet, which is just an HTML file, set the mime type to be ‘text/scriptlet’ (I believe) and then give it a width and height and immediately it will work just like an applet would. Except the code that is running is HTML. It's not Java.

TNC: You can embed web pages within other web pages that way.

SI: Yes, you can embed web pages but it's slightly different than the concept of embedding because it's more of a component model where it could have its own event, its own properties. It could have its own private members that you can't access, etc…

TNC: It appears within a window with a width and height that you supply in the object tag.

SI: Yes.

TNC: There's no way to scroll that HTML window, is there?

SI: Well, the scriptlet itself could define if it wants to have scroll bars or not. And the scriptlet can even tell itself to resize itself in its container. You can make scriptlets that dynamically change in size and width. I actually use that in the website. On almost every IE 4.0 page I have a navigation bar. When you click on it, it drops down like a menu. That's actually a scriptlet that resizes itself to be really big to display the rest of the contents.

TNC: Similar to multiple channels embedded on a single TV screen. You could have a website where you can embed web pages.

SI: Right. Yes, you could do that, but in that case, you actually may want to use the IFrame tag. The difference between an IFrame tag and the scriptlet is the IFrame also points to an HTML document.

TNC: Does the scriplet window need to be positioned on the sides of document window –, as is the case with frames?

SI: It doesn't have to divide the window up. It can actually sit in the middle of your page.

TNC: One reason to continue to use Java or ActiveX is the capability of having some kind of socket connection. Are there any plans to include this in Dynamic HTML?

SI: Obviously, in the future, DHTML will try to look at how you to better integrate with server and how to better communicate with the server processing. I could see that definitely coming in the future. Now you kind of can simulate it by posting data through hidden frames or something to that extent but it's really not opening sockets.

TNC: The advantage of posting through frames is that it works through firewalls. Tunneling data through HTTP through to other applications is popular because many users are behind firewalls.

SI: One of the things that Microsoft just is working on is something called remote scripting which is basically the ability for your script, through JavaScript -it's all Java script- just to open up and talk to the server and share objects between the client and server. And that's basically one of the big things you'll see coming forward more in the future. I believe its called Remote Scripting. I'm not sure what the exact name we're giving it is.

TNC: Scott Isaacs, thank you.

SI: You're welcome.