================================================
IMS Web Tips ******** ISSUE 5 August 3 1999 *********
"Free Tips and Tricks for getting the most out of your Web Site.
This e-mail is being sent to you because you subscribed to
mailto:tips@VirtualMechanics.com
Subscription Information is available at the end if this news letter.
Please forward this news letter on to your colleagues and friends.
================================================
In this issue:
1. What is the Dynamic in DHTML
2. Promoting your site.
3. IMS tip: Drag and Drop
4. Reader Questions.
-Submitting a site via e-mail.
5. In next weeks issue.
================================================
1. What is the Dynamic in DHTML.
Most subscribers to this news letter know at least a little HTML
while many of you would be classed as export Web Designers
with an in depth knowledge. Most people's knowledge of
Dynamic HTML (DHTML) is more limited. The reason is simple.
HTML is a Web Page design language. Despite its name, DHTML
is not. Even though some of you will know how to code some
Dynamic HTML effects, DHTML is a method that combines
several technologies. Many aspects of DHTML can be learned
but never really mastered.
So the question "What is DHTML?" is misstated. The correct
question is "What does DHTML do?" The answer to the
question is of course "Dynamic".
DHTML is a technique for adding motion and user interaction to
a HTML web page. This is accomplished by combining HTML
with Cascading Style Sheets that uses addressable variables and
then programming a scripting language such as Javascript, to
modify and update them once the page has loaded (which it
actually may never do). Got that? I can guess that was as hard to
read as it was to write.
In some respects, Dynamic HTML has taken a relatively simple
concept and added an apparently unnecessary level of
complexity to it. The reason is that DHTML needed to address
the limitations of HTML which was never designed to make
Interactive Animated web sites. If you look at DHTML through
squinted eyes however, you will discover that it is actually quite
simple to understand.
As you know, HTML is used to create the components of a web
page such as text and Images. The ability to position and scale
these components in HTML is however, quite limited. Text can be
assigned a few font and paragraph characteristics but for the most
part, each component follows the previous component in a linear
fashion until the page is completed. Even so, HTML is still the
heart of DHTML and needs to be understood in order to learn
DHTML.
With the version 3.2 Browsers, Cascading Style Sheets or CSS was
introduced. CSS addressed the linear limitations of HTML design
by providing a method to scale and position the various Web Page
components. This is accomplished by surrounding a component
with either one of two new tags. These are the <DIV></DIV>
and <SPAN></SPAN> tags. If you look at the source on
a DHTML page you will probably find these tags are used extensively.
Use View Source to see the code. The Motions DHTML Web Page
Note that the tag includes a "Style" command followed by a list of
values. The most significant of these are the "Position", "Width"
and "Height" styles that are used to compose the HTML components
of the page.
Cascading Style sheets addresses a significant limitation in Web Page
design and brings them a lot closer to Page Layout and Design
techniques. The final step in turning Web Pages into Multi Media
presentations, games and animated stories was introduced in the
Version 4 Browsers to provide a mechanism to change the values in the
Style Sheets. This is accomplished by making the Styles addressable
and then using a programming or scripting language to change them. If
you look at the previous example you will see that each <DIV>
and <SPAN> has a "name" or 'id". This name or id is used as the
address of each component. Finally, a scripting language such as
Javascript, is used to change these values.
Previously I stated that a DHTML page may never actually finish
loading. This is the case in our example. The reason is that before
the browser gets to the end of the page, a Script loop is used to change
the values in the component styles. While the loop is running, the page
is still being loaded. A slightly modified version of the loop in our
example looks like:
<script for="window" event="onload" language="JavaScript">
function frameloop() {
doObjectList();
window.setTimeout("frameloop();", waitTime, "JavaScript");
}</SCRIPT>
is5fig2
This loop is started "onload" and repeats indefinitely when the
'frameloop' function calls itself.
Simple n'est-pas? (HTML to define the components of a Web
Page) + (CSS to position and scale them) + (a scripting
language to change the CSS values) = Dynamic HTML.
Someone once said that in order to master Web Page design
you must know at least a little of the technology behind it (it
may have been me). On the other hand my kids claim that
understanding it gives them a headache.
================================================
2. Promoting your site.
Over the last several issues, I have talked about Search Engines;
the importance of ranking to generate traffic to your site, how to
set up your Meta Tags, how to organize your Web Pages, how
to submit your site and how to optimize visits by search engine
spider. If you have missed these issues or want a refresher,
they are posted at http://www.VirtualMechanics.com/news/webtips.htm
Promoting your site and generating traffic is a topic of significant
interest to every Web Manager and designer. Getting a top ten
ranking on the major search engines can go a long way to
accomplishing this objective. Simply set up your Meta Tags
properly, organize your web pages and submit your site to the
search engines and voila!, your done right?
It does not take a rocket scientist to figure out that if 100 web
managers submit their site to the search engines under specific
keywords, at best only 10% of them will succeed in getting a top
ten ranking (maybe 1 will get all 10). Search Engine ranking can
quickly become a game in which you are constantly tweaking
and changing your site in order to maintain or improve your
position. In fact, I have only touched the tip of the iceberg on
this topic so far. The are many other factors, gimmicks and games
that can be employed in the quest for the "holy top ten ranking".
These include topics such as Gateway pages, Word Density
analysis and much more. I will discuss some of these more
advanced topics in future news letters.
Although achieving a high search engine ranking is a valid and
potentially profitable objective, it can also become quite
unproductive. It is a lot like trying to ride the crest of a wave. It
constantly moves and there is always some one else that wants
to be on top. There are many other promotion techniques that
can be equally or more productive than search engine ranking
depending on your business. Working to improve your search
engine ranking gets a lot of attention and press because it
appears to cost nothing and can be learned by anyone that is
willing to invest the time. This is deceptive however. Time is
money, or in this case, web site hits. At some point, the time
invested does not generate a profitable return.
So how else can you promote your site?
Techniques for promoting your site can be divided into two
major categories. These are traditional promotion techniques
and Internet promotion strategies. Examples of the former
include 30 second Super-Bowl TV adds (World Soccer Cup
championship final for those of you outside North America).
Examples of the latter are to purchase banner adds on all the
major Internet sites. Both these techniques are guaranteed to
generate some interest in your site if for no other reason than
to find out were you are getting that kind of money. For the rest
of us, the Internet still provides many opportunities to promote
our sites and attract visitors at minimum expense.
Next week I will get back to more specifics on site promotion. In
the mean time remember that even though some of the techniques
and methods may have changed, the need to promote your
business has not. All basic marketing philosophies, gimmicks
and concepts apply. Streaking the Oscars with your URL on
your butt will probably work.
================================================
3. IMS tip: Drag and Drop
We often refer to IMS Web Engine and IMS Web Spinner as
Drag and Drop Editors. This is because you can select any
Object and drag it to the position you wish it to appear in the
finished Web Page.
Did you know you can also implement Drag and Drop
operations in your Web Pages using IMS Web Engine? The
process is quite simple with a bit of practice. It is based on an
Action attached to the mouse and a Behavior that switches the
Action on and off. You can view a full example of a Drag and
Drop Web page produced with the beta version of IMS Web
Engine at our DHTML Magic site
Take the Geography Test and see if you can construct the map
of Europe.
The easiest method to assign Drag and Drop to an Object is to
use the Motion Wizard. Using the Wizard is faster and more
reliable than creating the Action and Behavior components
yourself. Creating these components manually however, will go
a long way to helping you understand these two advanced
DHTML capabilities.
To attach an Object to the mouse, create a Text, Image or
Shape Object and select it. Select the 'Action' Button or
'Object Action' Menu and confirm creating a new Action.
The selected Object will be displayed in the action dialog.
Change the name of the action to "Drag" for easy reference.
Select the Motion Tag and check the Horizontal and Vertical
mouse buttons. Exit the Action Dialog. If you try a DHTML
preview, the Object will be attached to the mouse as you
move it about the screen. You can use this effect to add
animated icons, interesting text or other special effects to
your Mouse if you wish.
To enable Drag and Drop you need to add a Behavior to the
Object. With the Object selected, open the Behavior Dialog
and confirm creating a new Behavior. Change the name of
the Behavior to "Drop" for easy reference. Select the 'Trigger
Event' dialog and check the 'Mouse Select' box. Select the 'End
Event' dialog and check the 'Mouse Up' box. Select the 'Actions'
dialog and uncheck the 'Motion' box in the 'When Not Active'
section. Uncheck the 'Reset Path' button also in the 'When Not
Active' section to prevent the Object returning to its starting
position when the mouse is released.
Exit the Behavior Dialog and select the DHTML (purple)
Preview button. The Object should now move only while
selected with the left mouse button down and will stay
wherever it is dropped. If you wish to create multiple Drag and
Drop Objects you do not need to create more Actions and
Behaviors. A unique feature of IMS is the ability for Objects to
share components. Simply right click the additional Objects
you wish to assign Drag and Drop capabilities. With the new
Object displayed in the Object Editor, select the "Drag" Action
from the Action drop down box and select the "Drop" Behavior
from the Behavior drop down Box. Select as many additional
Object as you wish from the Object drop down box and assign
them with the Drag and Drop components.
================================================
4. Reader Questions:
How can I upload my Home page through email?
MRD
I have not heard of updating a web site via e-mail. You normally
update a web site through FTP (File Transfer Protocol). You
usually need to know the IP address of your web site, logon
account and password. You can then Publish directly from a
recent version of IMS Web Spinner or IMS Web Engine or you
can publish to a local directory and use a third party program
such as WS_FTP to transfer your files. I covered this topic in
our first news letter which is still available at the imstips1 page.
This is not to say that it can not be done. Some sites such as
Angelfire, require that you use their site program to identify
and transfer your files. It is possible that some other sites
require that you send your files as an e-mail attachment.
If anyone knows more on this topic I would be interested in
hearing about it.
================================================
5. Next week.
1. Cascading Style Sheets
2. Promoting Your Site: Link Exchanges
3. IMS tip: Page Layout Techniques
4. Reader Questions.
Send your Questions to tips@VirtualMechanics.com with Question
as your Subject. If we don't know the answer, another reader may.
================================================
© Copyright 1999 Virtual Mechanics
================================================
To SUBSCRIBE send an email to:
tips@VirtualMechanics.com with
JOIN as the only Subject word.
To UNSUBSCRIBE send an email to:
tips@VirtualMechanics.com
from the e-mail account under which you subscribed with
UNSUBSCRIBE as the Subject.
Subscription information and past issues are available at:
Web Tips
================================================
Please forward this news letter on to your colleagues and friends.
This page is suitable for printing.