In the past I have talked about some of the limitations of
HTML. Probably the most significant of these is its actual
architecture. The reason for this is that HTML was not
originally designed to display the graphic rich multimedia
web sites that are now becoming the norm. Originally, HTML
was designed as a basic formatting language for the display
of text based information such as scientific papers and news
articles. Graphics were completely secondary and only used
when absolutely necessary by including a GIF or JPEG image.
With the passage of time and the popularity of the WWW, HTML
has been increasingly adapted to improve its graphical
capability. The most significant adaptation has been the
inclusion of CSS or Cascading Style Sheets. See our past
article on CSS at: http://www.imswebtips.com/issue38top1.htm.
CSS was first introduced in the 3.2 version browsers several
years ago. It essentially adds page layout capability so that
elements such as blocks of text and images can be positioned
on a web page independently of the underlying text format.
The next major adaptation was the addition of Dynamic HTML
with the Version 4 Browsers in late 1997. Dynamic HTML works
in conjunction with CSS to provide the ability to dynamically
change a CSS element's position. Whereas CSS adds Page Layout
capabilities to a web page, Dynamic HTML extends it to add
Animation. Take a look at our article on DHTML at:
http://www.imswebtips.com/issue37top1.htm. For examples of
Dynamic HTML pages that make full use of CSS and DHTML, take
a look at: http://www.virtualmechanics.com/demos.htm
'Sounds good' you say. 'Multi media and animation are the
future of the web!' Yes they are but CSS and Dynamic HTML
built on top of HTML are not the right way to do it.
I have been designing computer graphic and animation software
applications for many years. In my experience I have never
heard anyone say, "Lets use a text layout protocol to design
an Interactive Animation Multi-Media application". In fact,
text has nearly always been the last thing added to an
animation application. An analogy would be to design a house
by starting with the closet and attaching as many necessary
rooms to it as possible.
So how should it be done?
The place to start is with an extensive graphic's base. If
you are restrained by memory, processing and bandwidth
availability, then you should use vector graphics as a
fundamental component of its architecture. Next add text,
bitmap graphics and streaming video support to ensure that
you have as rich a graphic base as possible.
On top of this graphic base you add the ability to address
and change the major elements. This is best done with a
matrix operation to Move, Stretch and Rotate the elements.
With this system you cannot change the contents of a
streaming video but you can change the location and size of
its window.
The biggest advantage comes from the vector graphics. This is
due to its extremely compact nature. You don't believe that
vector graphics are extremely compact? Do this comparison:
Use your favorite paint program to draw a diagonal line from
the top left corner to the bottom right corner of a 640x480
window. Save it using the best compaction you can get. My
test got close to 3,000 bytes. The same line drawn with a
vector requires a minimum of 4 bytes for the first point, 4
bytes for the second point and 3 bytes for an RGB value. Even
with additional precision and elements, the vector can still
be defined by less than 24 bytes.
'That's not a fair comparison' you say. 'Bitmap graphics
provide all kinds of capabilities that vector graphics do not
support. First, a vector requires processing by the computer
to be displayed. Second, bitmap graphics can be used to
display complex images that would be extremely difficult or
impossible to define using vectors.'
You are correct, it is not a fair comparison but not for
these reasons. The fact is your processor will finish
constructing this simple vector long before the bitmap has
downloaded even on a T3 connection. Second, vectors are used
to construct very complex images. The Jurassic Park Dinosaurs
and all the other 3D special effects are vector-based
graphics. Bitmap images are great for real life images such
as photographs of people or for graphic artists that wish to
use a paint style interface. Vectors are best just about
everywhere else. They are extremely compact and can be used
to construct very complex images.
Vector graphics have another powerful advantage over bitmap
graphics. This is the ability to change them very fast. In
the above example, you can replace one of the coordinates of
the vector with as little as 4 to 16 bytes. With a few extra
bytes to identify the operation, you can completely redraw
the entire vector. This is extremely fast and the basis for
vector animation.
Is there such a system available and does it mean the end of
HTML?
The system is called SVG or "Scalable Vector Graphics" and it
is in the process of being defined by the W3C, the authorized
body for defining Web standards. SVG will not replace HTML,
CSS or Dynamics HTML. In fact these are prime constituents
for this new standard. SVG will however, substantially change
how web pages are created and viewed.
If you would like more information on SVG visit www.w3.org/TR/SVG/ at the W3C.
Over the next few weeks I will take a look at SVG in more
detail. I will discuss how it may affect you as a Web
Designer and how you can hope to take advantage of it.
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
