Remember the good old days when we thought that Web browsers might become a standards-based client-side interface development platform? Certainly, the concept of a cross-platform standards-based application development and deployment platform has proven to be a seductive one. The Internet industry has leveraged that concept into a huge new marketplace. There is now a wide-spread acceptance of browsers that support extended HTML, scripting, and Java virtual machines as a standard client target for current and future application development. Of course, this has presented significant challenges to those of us charged with actually making anything work! I've alluded to one challenge in previous columns and will return to it regularly; that is the challenge of crafting an architecture appropriate to the requirements of your organization and Web site from the myriad of options available to you.
The challenge I will try to overcome in this month's column is the difficulty in keeping up with the lightspeed rate of change in the technology basis for Web-based application development and deployment. Each week some vendor or standards body announces the submission of a proposal or acceptance of a draft. As I write this, the tools development community is dealing with two major standards happenings. First, the European Computer Manufacturers Association (ECMA) approved the JavaScript standard submitted by Netscape, and Microsoft announced that Internet Explorer 4.0 (IE 4.0) would comply. Next, the World Wide Web Consortium published the working draft of HTML 4.0; again, Microsoft subsequently announced that it will support the new version in IE 4.0.
The catalyst for this discussion was the recent general release of Netscape Communicator 4.0, plus the preview release of Microsoft IE 4.0. To the untrained eye, these two products may appear very similar. IE 4.0 and Netscape Communicator are far more than Web browsers; in fact, they are extensive and extensible application suites for deployment and use of a variety of communications-based applications. These products remind me of 1980s products like Lotus Symphony and Ashton Tate's Framework that attempted to integrate all the common productivity applications -- word processing, data management, and spreadsheet -- within a single application framework.
While the range of communications services that Explorer and Communicator offer varies slightly, their thrust is common: enable information sharing by allowing people to browse the Web and use applications deployed over corporate intranets, manage email, participate in discussion groups, and subscribe to the content providers of their choice. To that end, they both consist of a series of more or less integrated application components. In the Netscape product, the core applications are the Navigator browser, Messenger mail client, Collabra discussion and newsgroup client, Composer page editor, and Netcaster subscription manager. Additional applications available as part of the "Professional" version include the Conference real-time meeting client, Calendar schedule manager, IBMHost terminal emulator, and the AutoAdmin client for centrally managing and updating Communicator.
Microsoft's IE 4.0 offers a similar lineup. In addition to its fourth-generation browser, you'll find the new Outlook Express, which provides advanced email and news functionality, giving users the unique ability to receive, edit and send rich HTML-based messages. Microsoft NetMeeting 2.0 conferencing software offers a full-featured collaboration solution today by providing users application sharing, whiteboard, data and video conferencing, and chat capabilities. The Microsoft NetShow server offers live broadcast and on-demand audio, video, and mixed multimedia, giving corporations and content vendors a one-to-many communications solution. Microsoft FrontPad provides users a simple way to create and edit personal Web pages for the Internet or intranets. IE 4.0 enables users to subscribe to Web sites as well, and supports the Channel Definition Format, an easily authored format for the publishing of Web-standard channels that will allow Web publishers to optimize the broadcast of their content
There are significant differences in dimension and emphasis. With IE 4.0 and the subsequent introduction of the Memphis upgrade to Windows 95, Microsoft will extend the browsing paradigm to the local computer and to local shared resources besides those connected via the company intranet. Communicator is purposely not as tightly integrated with the local operating system and offers more flexibility as a client to legacy applications.
Although there was early promise that Web browsers would present a common client-side development platform, the corporate imperative to differentiate products and control the evolution of platform standards continues to create an interesting tension between standards compliance and competitive innovation. I suppose the good news is that more than 90 percent of Web clients use Microsoft or Netscape. The bad news is that earlier versions of their products have developed significant installed bases. Even considering the low price of these products, IE 3.0 and Navigator 2.0 and 3.0 clients will upgrade fairly slowly. What this means is that if you are deploying an Internet site, you will be serving at least five flavors of browser for the foreseeable future.
The situation looks considerably more cheery from the perspective of your company or department intranet. Here you actually have some control over which client people will use to share information and run intranet-based applications. Let's assume this perspective and try to assess the new capabilities that fourth-generation browsers bring to our development efforts. Before we do, I need to divulge some of the limitations of this analysis.
The first limitation is that the real trick in developing intranet applications lies in balancing functionality between client- and server-side execution. As a result, your choice of server has as much or more impact on how you will proceed as does your choice of client. Because there's only so much information that I can present in one chunk, I'm going to try to stay focused on the client. Second, this month I will focus most heavily on Netscape's Communicator. I downloaded IE 4.0 Preview Release 2 literally at the 11th hour (while I worked on wrapping this up), so my impressions of that product are based mostly on the developer preview. This month I will share those initial impressions in order to contrast IE 4.0's capabilities with Communicator's. In my next column, I will discuss Microsoft's Active Platform as a whole.
Finally, what's most significant to those of us using these products as clients for data-oriented business applications are the capabilities they afford to create powerful and flexible user interfaces. These capabilities are embodied in enhancements to HTML, in enhancements to the scripting languages they support, and in new versions of their Java Virtual Machines. Typically we develop Web applications with a variety of tools, from "simple" HTML editors to site management utilities, tools that provide data access solutions, and utilities that generate pages from objects created in more traditional development environments. As I write this, the industry that builds this infrastructure is just beginning to assimilate and respond to the capabilities of the new browsers. I would not normally develop without such tools, and don't expect DBMS's readership to do so either. As it stands today, it looks like it's just me and the page layout application supplied with the suite, preparing to do battle mano-a-mano. By the time you enjoy the results, I expect that you will have more robust tools from which to choose.
What distinguishes fourth-generation browsers from their ancestors is dynamic HTML. Before I discuss the details of how these products offer to turn HTML into a dynamic page definition medium, let me try to paint a more general picture. Web sites accessible to third-generation browsers themselves offer a certain degree of interactivity and dynamism in three distinct ways. One way is by sending new pages or frames to the browser when the user clicks on a specified element or submits a particular data value. These new pages may themselves have been dynamically generated on the server based on some rules or data associated with values that the user provided. The second way is by employing a scripting language -- typically JavaScript or VB Script -- to program some action in response to a local event, such as validating user entry into a data field. Finally, the server can deliver a discrete program that exhibits dynamic behavior to the browser, which may consist of a plug-in module, Java applet, or ActiveX control that runs within the context of the browser.
Web authors don't consider any of these to be optimal solutions for producing easily maintainable pages with a high degree of flexibility and some dynamic elements in their formatting. At best, most dynamic content viewable through third-generation browsers places huge demands on the server and clogs Internet bandwidth. Dynamic HTML is a term that refers to a combination of enhancements to the page-rendering engine that allows it to change the display of the current page based on events that occur on the client, without any intervention from the server. With dynamic HTML, attributes such as font and position can change, move, and perform special effects. The core of dynamic HTML is the evolution of HTML into what looks like an object-based language; in fact, the World Wide Web Consortium is reviewing a draft of a specification for a Document Object Model (DOM). DOM is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents. Simply stated, the designer can assign a collection of attributes to a display class, and subsequent document elements can inherit their attributes from the defined class.
Other important characteristics of fourth-generation Web browsers are enhancements to the applet security model, enhancements to the extent to which applets can be integrated with HTML pages, and continued evolution of the Java Virtual Machine. To support data-oriented Web-based applications, IE 4.0 now sports data awareness and manipulation capabilities by allowing the identification of a data source object for each data aware page. The data awareness features in IE 4.0 include automatic generation of table rows from data records, which allows tables to be sorted or filtered and then redisplayed without requesting another data set from the server. In addition, page designers can bind HTML elements or embeddable controls to fields in a specific data record.
The primary technologies that result in Communicator's dynamic page rendering capabilities are style sheets, positioning, dynamic fonts, and enhancements to the JavaScript object model that increase the programmability of HTML elements. IE 4.0 provides most of the same benefits, albeit with some differences in the manner in which it provides them. Style sheets eliminate the need for Web page designers to write HTML tags for each element in order to adjust such aspects of page design as colors and text sizes. With style sheets, designers can define or change the characteristics of an element in one place. Conceptually similar to templates, a Web author can create a corporate document style standard so all pages share the same corporate look. The Web author can also use style sheets to apply consistent formatting to data that the Web server has dynamically delivered to the page.
CSS1 is a simple cascading style sheet mechanism that the World Wide Web Consortium is standardizing. It allows authors and readers to attach style (such as fonts, colors and spacing) to HTML documents. CSS1 expresses styles as a series of property/value pairs, where the properties conform to common desktop publishing terminology. The cascading nature of CSS refers to the fact that there can be a hierarchy of styles defined for document elements. Styles defined at a lower level in the hierarchy inherit attributes from styles defined earlier and can override specified values. To illustrate the way style sheets work, the following is a simple CSS rule that sets the text color of 'H1' elements to blue:
H1 { color: blue }
A rule consists of two main parts: selector ("h1") and declaration ("color: blue"). The declaration has two parts: property ("color") and value ("blue"). While this example tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined), it will determine the final presentation of the document. The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors.
In practice, you would probably group a series of declarations that apply to a common selector in the following manner:
H1 {
font-weight: bold;
font-size: 12pt;
font-family: helvetica;
font-style: normal;
}
You can define a class as a collection of attributes associated with an element type. Any element within an HTML document can be assigned to the class. Such elements would inherit the attributes of the class, as is indicated in the following HTML:
<HTML>
<HEAD>
<TITLE> Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral> Way too green</H1>
</BODY>
</HTML>
With dynamic styles, these style sheet properties are accessible via JavaScript and can be set and programmed using JavaScript. For example, using dynamic styles, designers can query JavaScript for the browser's window size, then calculate and set the CSS1 margins and font sizes properties appropriately. Communicator also supports JavaScript style sheet syntax. Using JavaScript style sheet syntax, you would assign values to properties using an assignment statement in the form:
object.element.property = "value";
Another key aspect of dynamic HTML is the concept of layering, or Z-ordering. The ability to define blocks of HTML as existing either over or under other blocks on a page is not just a graphical nicety; it gives designers whole new ways to make pages interactive. A designer can essentially send an entire site across the wire in one transmission and have the browser display certain portions of it under certain conditions. The designer can especially leverage this technique when responding to requests for multiple pages or views of information from a database. The browser doesn't have to go back to the Web to bring in new information; because the information is already in the retrieved HTML file, all the browser has to do is flip to the new page and display it. Layered objects can also hover on top of others and can be commanded to move around on the screen, rotate, be semitransparent, and so forth. All this will make for a huge improvement in response times and interactivity.
With Communicator, Web authors can dynamically position HTML layers using Cascading Style Sheets or the <LAYER> tag. The latter method is unlikely to find its way into cross-browser usage. The CSS model introduces two methods of positioning HTML elements using the new "position" property: "Relative" positioning may be offset relative to the element's natural position in the document's flow; "absolute" positioning may be positioned arbitrarily. Positioning capabilities establish a new context for the flowing of contained HTML elements, and establish a coordinate system for positioning child elements. Dynamic aspects of managing positioned elements -- such as hiding, displaying, and movement -- can only be performed using an external scripting language.
Using cascading style sheet syntax, you can define the position of a layer of HTML content and give it a name inside the <STYLE> tag. For example, the following <STYLE> tag defines three layers: The layer called layer1 is positioned 50 pixels from the top of the page and 100 pixels in from the left. The layer called layer2 is positioned 100 pixels down from the top, and 200 pixels in from the left. The layer called layer3 is positioned 200 pixels down from the top and 260 pixels in from the left.
<HEAD>
<STYLE TYPE="text/css">
<!--
#layer1 {position:absolute; top: 50px; left:100px;}
#layer2 {position:absolute; top: 100px; left:200px;}
#layer3 {position:absolute; top: 200px; left:260px;}
-->
</STYLE>
</HEAD>
You define the names and positions of the layers inside the <style> tag, but you specify the content for the layers inside the body of the page. For example, inside the <span> tag, you can specify name of the layer where the contents should appear.
<BODY>
<P>Whatever content you like goes here to make the
main page. </P>
<SPAN id=layer1>
<<H1> Layer 1 Heading</H1>
<P>Lots of content for this layer</P>
<IMG SRC=images/logo1.gif>
</SPAN>
<SPAN id=layer2>
<P> Content for layer 2</P>
<<P>More Content for layer 2</P>
</SPAN>
<H1 id=layer3> This heading is all there is in
layer 3. </H1>
I don't want to conclude this discussion without mentioning the significant improvement in usability that Navigator has obtained. While I often used Navigator 3.0, its primitive user interface, particularly with respect to managing bookmarks, left me frustrated. In Navigator 4.0, the look and feel of the product has been modernized and bookmark management has been reworked to make it easy to file a new bookmark into a folder.
A couple of other design-oriented enhancements merit note. In the past, Web page designers were restricted from using different fonts (including international character sets) because browsers could only display fonts found on the user's system. Elaborate workarounds (such as downloading huge images) have been tried, but these have substantial drawbacks, such as long download times. Navigator's solution is to temporarily download specified fonts with the page; this enables a rich use of fonts, including international characters such as Japanese kanji, on Web pages that can be read by any Communicator user. Navigator also provides a Canvas mode. Developers can create true "kiosk" applications by using JavaScript extensions to remove all "chrome" from the Navigator window (toolbars, menus, scroll bars, or even window borders). User events such as keyboard input and mouse activity can also be captured. This enables Navigator 4.0 to support kiosked applications like those already available in malls and airports.
In a previous column, I alluded to the fact that JavaScript had been somewhat dormant, although versions of it have been included in earlier versions of Navigator and Internet Explorer. To some extent, Netscape's claims of over 400,000 pages that use JavaScript contradicts my perception that it has not been widely used. In any case, the standardization of JavaScript, the importance of JavaScript in Navigator 4.0's Dynamic HTML model, and Microsoft's increased promotion of IE 4.0's JavaScript implementation combine to make widespread adoption of the scripting language a certainty during the next 12 months.
Javascript can appeal to business application developers from several perspectives. It's geared to circumstances where developers can write independent functions that return a well- defined result, making it especially appropriate for manipulating and transforming data locally. With its ".write" method it can display the result of such a function invocation on a Web page. Its relatively flexible with respect to variable typing, and generally behaves like the languages that have long been an integral part of PC-based database products, making it fairly accessible to long-time database developers. Javascript is strongly object-based and relies heavily for its utility on the manner in which the environment in which it resides exposes its object hierarchy. This fact is the basis for both the differences in behavior between Netscape and Microsoft's use of Javascript and Netscape's use of Javascript as a language that can be used across many of the applications that comprise both its client and server suites.
The version of JavaScript released in Navigator 4.0 is identified as 1.2. Principal enhancements over 1.1 lie in its event management enhancements, new properties and methods, support for regular expressions, and the ability to digitally sign scripts to scripts to gain access to restricted information. The event enhancements center on a new event object and the enabling of a window, frame, or document to capture an event before it's passed to the target object. The event object contains properties that describe a JavaScript event, such as the event type and the cursor location at the time of the event; it is passed as an argument to an event handler when an event occurs. A number of events have been added, including double click, drag and drop, and key press events.
It's amusing to see how Microsoft is making a fine art out of leveraging product delays into strategic advantage. I suppose that works when you have a captive channel. While the PR machine worked on getting most folks to postpone their upgrade decision, the development machine analyzed both the Netscape offering and reactions to early versions of their own IE 4.0. It's responding both by embracing standards more fully than Netscape and by creating seductive new distinguishing features. Certainly, Netscape will become compliant with HTML 4.0 and with the ECMA Javascript standard (which it initially proposed!), but Microsoft will attempt to capture the high ground of being first to do so.
It's easy to turn on the Active Desktop feature that Microsoft installs on your computer with IE 4.0 and get completely sucked into playing with its configuration switches and browsing local resources. Constraining myself to focusing on enhancements to the authoring environment, I found several that will be significant. Of course, you still have your choice of scripting engines, and you can use both VBScript and JavaScript on the same page. More interesting is the addition of several text content properties to the HTML element object. Now a script can simply change the text property of a block of HTML, causing the content of the page to change. With this capability, HTML becomes a very capable language for writing applications with fixed format and variable content -- where have we seen those before? There are also a collection of multimedia enhancements that make it very easy to add and animate graphic elements to Web pages. Perhaps of greater general use is the concept of filters, which allow you to apply graphical highlights to selected elements.
Would I start implementing applications that rely on the features in IE 4.0 or Navigator 4.0? No. I think we will use Java for some of our applications and continue to rely on third-generation HTML with CGI-style database APIs for others. Coming from a programming background, looking at one of these HTML files that has scripts and object definitions embedded in it gives me the willies. It takes extraordinary persistence and discipline to manage or debug the stuff, which is why people who can make it work are in very high demand at a very high price. Coming up with effective tools for generating and managing these fourth-generation pages is not going to be easy, either. I am increasingly attracted to Java over this weird science. I can achieve similar results with Java, and can do so in a structured programming environment where I can audit programmer output against requirements definition. Geez, Java looks mature after spending a week with this approach to page design. A comforting thought for a manager like me! And I forgot to mention, these new browsers will make Java applets run at least 25 percent faster.
What did you think of this article? Send a letter to the editor.