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 Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

The Future of the Web Part 2

The Future of the Web
Part 2

by Scott Clark

Netscape DHTML Example
This example shows how you can use DHTML to move and hide elements on a page by changing the top, left and z-index of a the WebDeveloper.com logo. The logo is located inside of a "layer" so you are actually moving the layer.

Elements DHTML Can Control

  • text (font, size, color, etc.)
  • background color
  • form fields
  • images
  • new windows
  • frame elements
  • table data
  • paragraphs
  • almost any element

Just name it, and you can control it. That means that you actually name the elements so that you can refer to them later. This is not required, as you could use arrays to get to the elements, but it is recommended for ease of use.

What you need to get started:

  • A knowledge of HTML: Even if you're using a visual editor, know your HTML!
  • A knowledge of JavaScript: While you don't need to be capable of lassoing the moon with JavaScript, it would be helpful if you can write an if/then statement and some simple functions.
  • A knowledge of CSS: Either know and understand CSS, or use a tool that does. Practice makes perfect!
  • or, a DHTML-capable WYSIWYG editor: This is perhaps a no-brainer, but there's nothing wrong with getting a head start using a tool that has been optimized for the job...don't kill yourself just so you can say you did it all yourself. Your visitors don't really care HOW you created a page, just that it's there and it works efficiently.

Additional DHTML Info:

If WebDeveloper.com and WebReference.com doesn't have what you're looking for, these other sites will. Bottom line: there's plenty of info out there, it just takes motivation to use it.

XML, the eXtensible Markup Language

For those developing sites on the bleeding edge of the Web, XML has several advantages, including:

  • Works in conjunction with CSS and DHTML
  • Provides developers with the ability to devise their own tags.
  • Allows sites to provide visitors with precisely the infomation they are after, and enables developers to use one document which can be fomatted in many ways, according to the needs of the visitor.

XML is Your Own Personal HTML
The tags are defined in a special DTD (document type definition). The DTD is read by the browser (or parser) prior to displaying the page. This is a required part of the XML standard, but not all applications/XML parsers actually require the use of a DTD. The browser then reads the XSL document to interpret how the page should be displayed. This display comes directly from your XSL, which supports all of the functionality of CSS (another reason we're so hot on CSS!).

Support for XML
There are now several XML tools on the market, including TAG, XML Pro, XML Styler , Symposia HTML Editor , etc. Netscape has promised XML support in the upcoming Navigator 5.0. Microsoft has pledged to continue to support XML in future releases of MSIE. Presently, Microsoft includes a Java XML parser, as well as an ActiveX XML parser control, with MSIE4+.

XML Example (for NS4) XML Example (for MSIE4)
The MSIE example uses the same data from a file called article.xml and formats it in two different manners using the Java XML parser and the ActiveX XML parser. The ActiveX control allows you to fill a table with the data, but uses some proprietary code to do so. The Netscape example uses the Microsoft Java XML parser, takes a long time to load, but does show that it works!

How to Get Started
Know thy CSS. Again, CSS is very useful for more than simply styling Web pages. Find a tool you can use, and learn to use it well. Learn about DTDs, and make your own. Microsoft's example parsers do not requite a DTD, even though the XML standard states that they are required, so do not neglect them. Try out some XML example applications and get your feet wet, so to speak. You can't learn it if you don't apply it!

Additional XML Resources

New Guy on the Block: SMIL

SMIL, or the Synchronized Multimedia Integration Language, is a new technology which has recently been getting a lot of attention on the Web. Why? How would you like to be able to tell the Web browser when and where to show your logo, when to play the slick intro music, when to start the video clip you've embedded in the page, when to go to another page, etc., etc., etc. — all using a language that purports to be simpler and easier to learn than HTML? Get the picture now?

Now the Web browser companies will eventually support SMIL, but for now, RealNetworks' G2 RealPlayer, which was just released in beta, does support it. I recently announced that I had written the first G2/SMIL tutorial on the Web, complete with an example SMIL "presentation" that I authored.

Now, suffice it to say that, no, we're not really ready for video...or I should say, those of us that are artistically challenged, are not ready for video, and SMIL's RealPix is the answer to our prayers.

RealPix is a technology which was developed for RealNetworks by Iterated Systems not too long ago. This is how it works: The SMIL file is evalutated by the G2 player, and — remember now, the actual SMIL file is just another ASCII text file that points to any RealPix or RealMedia (or RealText) files that the presentation uses. The G2 player then reads the RealPix file, which is yet another text file that points to other files. Specifically, the RealPix file tells the browser when to show an image, what to do with it, and when to show the next image. While this isn't too wonderful in and of itself, when you understand the control that RealPix gives the developer, you'll be ready to jump on the RealPix bandwagon.

RealPix incorporates a technology which enables you to use transitions with your images...fade-ins and fade-outs, slides, zoom in and zoom out, sweeps, etc. Add to this the ability to combine one or more audio tracks to the images, and you have a presentation. And yes, the audio tracks are also on a timeline, so they can be synchronized with the images perfectly.

And then there's RealText, which allows you to use any part of the display window to scroll text, complete with control over the font face, size, color, background color, timing, and hyperlinks to take the user to particular Web pages. In my example presentation, I streamed about 500K of audio and approximately 40K of images, all in about 32 seconds!

The other aspect of G2/SMIL is that it allows you to utilize what's called "SmartStreaming." This means that if your client is capable of receiving data at single or dual ISDN rates, that's the rate it streams down. If they're stuck on a 28.8, that's okay too, as that's the rate it will stream. This is slick technology. Oh, did I forget to mention that both the SMIL file and the RealPix file are both variants of XML?

Where to look for additional SMIL information:

Wrap It Up!
Which brings me back to the beginning of our discussion. Learn your CSS, try your hand at DHTML, experiment with XML, and learn about SMIL. The Web's not waiting for you, so keep riding that fickle bleeding edge. If you take time to look back, it's already caught up to you and is on to bigger and better things...most of which depend on your learning the technology which came before it. See you on the edge!

[ < The Future of the Web:
Part 1 ]

HTML5 Development Center

Recent Articles