WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




The Future of the Web

The Future of the Web

by Scott Clark

The future of the Web is happening now, all around us. The old days of flat, brochure-ware Web sites is over. The Web is not television, or radio, or print, but a new medium all to its own. It isn't and shouldn't be a substitute for other media. While the Web is still a relatively new medium, it is maturing at a quick rate, and the technology is advancing fast enough for a new Web standard to emerge.

Today's Web users demand interactive, personalized sites that are both informative and easy to navigate. This requires the use of several emerging Web technologies...CSS, DHTML and XML.

From the approximately 15 million plus visitors the internet.com network receives each month, we've determined that a good portion of them are using 4+ browsers. While our technical/business audience is likely to be more "up to date" on their Web browsers, this is indicative that the average Web user is or will be soon able to use the emerging technologies.

One Step at a Time

  • CSS is the building block - Cascading Style Sheets separate the style from the content...this is the first step.
  • JavaScript is the glue - JavaScript is used when creating DHTML, and is actually the main technology used today to create interactive, dynamic sites.
  • DHTML is actually HTML, JavaScript and CSS - To create a DHTML Web page, you will inevitably use JavaScript and, in some fashion, CSS. If it's dynamic, it's using JavaScript (or possibly CGI), and if it's not, then it's just good old fashioned static HTML.
  • XML is formatted with XSL - The XML document is formatted by using XSL, a subset of DSSSL (Document Style Semantics and Specification Language). XSL supports all of the functionality of CSS, so you're one step ahead of the game is you know and understand CSS.

Why are you here?
Perhaps you want to improve your site? Or you're developing a site, and you're looking to stay abreast of the latest Web developments. Perhaps you just wanted to get out of a bit of extra work!

THIS is why we're all here! To make money, of course!

  • 2.74 billion consumer dollars were spent on the Web in 1997
  • That number is expected to increase to 10 billion by the year 2000.
  • In 1996, there were 13 million households online.
  • According to an IDC survey, by 2001, that number is expected to increase to over 40 million.
What this means is that you'll have 40 million consumers who will be expecting top notch Web sites, and in return they'll be spending their money on your products and services. This will require the developers of these sites to work smarter, not harder, with the tools we have available.

Cascading Style Sheets

As we've said, by using Cascading Style Sheets, you can separate the style of a Web page from the content. CSS enables developers to create a consistent look for corporate documents. You can utilize the same style sheet across all the Web site's pages, keeping that look you've worked so hard to attain. Change the style sheet, and the look of the page — or even the entire site — is changed. This makes updating a site a snap, and means less coding for you in each page. Cascading Style Sheets are supported by both of the major browsers' latest 4+ incarnations.

Not All CSS is Created Equal
CSS is not backwards compatible — older browsers simply show unstylized text. Is there any easy fix? Nope, not one that doesn't negate the benefits of using CSS to start with (such as coding the fonts inline, etc.) It is possible to write CSS that works for both browsers, but...CSS is not the same (at this time) for MSIE as it is for Netscape...so that means the work rests on your backs. Until things become standardized, be prepared to write a lot of if...then statements.

CSS: the Basics
CSS may be written inline, or it may be specified as an external file. Inline CSS will override the CSS in external files. If possible, avoid the use of inline CSS, as it does not separate the style from the content, which is one of the main benefits of using CSS to begin with.

CSS may "become" DHTML
CSS may be used to create DHTML effects...at times the only difference is one or two simple lines of script. CSS is used to define layers, which are then moved using JavaScript. Layers are described by the top, left and z-positions of an area on the page. This enables one layer to be "above" the other, and lets the page designer have much greater control over the placement of the elements of a Web page. Each attribute may then be changed via the JavaScript. The use of CSS enables developers to target the elements, changing them based on the conditions of other elements on the page.

CSS/DHTML in Action (see bottom of the page for the example)
This effect is created by using JavaScript to change the top, left and z-position of the CSS "layer" containing the text (not "test"). The non-underlined hyperlinks were also done using CSS.

Additional CSS Information

And Then There's DHTML

Unlike some of the newest technologies, DHTML has embedded support in the latest browsers. It does require a 4+ browser, just like CSS (MSIE 3.0 only included limited CSS support). At this time, it would not be prudent to put all your eggs in the DHTML basket, as you may be limiting your audience (that is, unless you are creating an intranet site in which you will have a greater control over the browsers your eventual visitors will use).

Fortunately, it does not require manual coding anymore, with tools like Macromedia's Dreamweaver and Astound's Dynamite available. These tools do require a familiarity in order to create compelling Web pages, but they take a lot of the work out of the creation process, even going so far as to create cross-browser code.

DHTML Basics
Unless you're using one of the aforementioned tools, developing cross-browser DHTML sites is not an easy task...but it's not impossible! DHTML is basically ASCII text, so it won't slow down the loading process like Java applets tend to do. Yes, it is possible to write backwards-compatible DHTML...or rather, to design Web pages to gracefully degrade. It just takes a lot of those infamous if..then statements.

These are just a few of the available tools that support DHTML:

Many other tools are adding DHTML support, including NetObjects Fusion, Microsoft FrontPage, etc. You'd be best off downloading the demo for any of these tools you're considering purchasing, as they all generate DHTML code in a different manner. Also, you may want to read the reviews of some of these products on WebDeveloper.com to find out more about them.

The Main Uses of DHTML

  • Dynamically generated HTML elements: The HTML is generated based on the browser, version, page requested, etc. different elements can be written to the page.
  • Response to user interaction: These responses are based on the user's actions, such as mouseover movements, mouse clicks, closing a page, etc.
  • Greater control of the browser and its functions and features DHTML enables a developer to dynamically control the browser, including menu items, layout, etc. (x/y/z positioning, menu item availability, new windows, etc.)
  • Provides "real-time" control over CSS elements : No longer does a page have to be re-written from scratch when JavaScript is used to write to the page. Elements can be changed on the fly, and the entire page does not have to reload.
  • [ The Future of the Web:
    Part 2 > ]




HTML5 Development Center


Recent Articles