Designing Web pages to be informational, functional, and still fun to view can be a challenge. Java applets only add to the challenge of designing a successful Web page. Because applets can have animated graphics, sound, or their own user interfaces,
designing a page to work with applets can be difficult. It is very easy to get carried away and try to load a page with as many applets as possible. No doubt as you explore the Web you will find pages cluttered with applets trying to show off new
capabilities.
Nonetheless, if you keep in mind the principles of good Web design, you can have great Web pages that maximize applets to create new looks and services within the context of sound judgment. When you are designing Web pages of any kind you want to
consider content, context, and courtesy. Content is obvious; a picture of a hot dog on a vegetarian page is probably not the best choice for content. Context is a little more difficult. You need to consider issues such as how the elements of a page fit
together and whether the text is readable with any superimposed images. Courtesy is remembering that many people are still accessing the Web through slow modems. Taking into consideration that people might not want to wait an hour to see your applets is
more than good design, it's good manners. Basically, you can use the same guidelines you would use when designing any type of publication to be viewed by a large audience. This chapter covers the HTML extensions that enable you to add applets to Web pages.
This chapter also discusses some of the design issues that Java raises and how some sites deal with those issues.
HTML is at the heart of Web authoring, and Java's implementation is very closely linked to HTML. Remember that Java applets are designed to be platform-independent, as is HTML. Because applets are specifically designed to be used in conjunction with the
Web, there needed to be a standard way to invoke applets within a browser. To meet this need, a new set of HTML tags that specify the information needed to run an applet was created.
The HTML code that is associated with an applet provides the browser with important information about the applet. The HTML code can be used to do the following tasks:
There are really only two basic tags, <APPLET> and <PARAM>. The rest of the HTML for applets is extensions of these two tags. So by adding a few basic HTML tags and adapting some existing ones, you can specify all the necessary information
needed by a browser to run your applet. The advantage of using HTML code instead of designing a new specification is compatibility. Browsers are designed to understand HTML, and even non-Java compatible browsers can gain some information from the Applet
HTML, such as an alternate image or tag to display instead of the applet.
Adding an applet to your Web page is simply a matter of using the <APPLET> tag. This tag lets the browser know that you are going to provide specific information in regards to a Java applet you want to appear on your page. The <APPLET> tag
also accepts a number of attributes, such as code, width, and height, that allow you to further customize the appearance of an applet on your pages. The basic <APPLET> tag format is as follows:
<html> <applet code=filename.class width=n height=n> </applet> </html>
The <APPLET> tag follows HTML convention, beginning with <APPLET> and ending with </APPLET>. The <APPLET> tag has a few required attributes as well as some optional attributes.
The code attribute, which is required, specifies the name of the Java applet that you are adding to your page. Remember that Java is based on the tenets of object-oriented programming, and that all applets are themselves objects. That is why applets are
named with the .class extension. Chapter 9 discusses more about the nature of objects, but for now, remember that an applet is named filename.class:
code=filename.class
The <APPLET> also requires that you specify values for the width and height attributes, which control the size of the applet:
width=n and height=n
The width and height attributes are designed to enable you to specify the starting dimensions of your applet in pixels. Because the applet is a part of the Web page, you must give the applet space on the Web page to run in.
The following guidelines are useful to keep in mind when determining the initial size of your applet:
Figure 6.1. The width and height attributes specify an applet's initial size in pixels.
The <APPLET> tag is currently an extension to the official HTML 2.0 specification. The HTML 3.0 review by the Internet Engineering Task Force (IETF) is still underway, and the <APPLET> tag might be
officially adopted in the HTML 3.0 standard. Other tags under consideration, such as <INSERT> and <EMBED>, could be used for Java applets, but are also generic enough to be applied to other types of Web-based extensions that might be developed
in the future. Currently, the <APPLET> tag is the only one in use, but that may change as time passes. Undoubtedly, many Java browsers will continue to support the <APPLET> tag even if a new standard is adopted.
In addition to these required tags and attributes, you can use a number of other attributes to provide the details of how your applet will appear on the page. These <APPLET> attributes allow you to give very detailed information about the applet
you are specifying, and function the same as other HTML attributes. Some of them are probably familiar to you from other uses in HTML. These attributes are described in the following sections.
The codebase is the base URL location of your Java applet. When you use the code=filename.class attribute, the filename is either relative to the current document or a specified codebase. Specifying a codebase allows you to have your code
in a different directory from the page your applet appears on, which can be handy for reusing applets on different pages around your server. For example, the LED TickerTape applet you added in Chapter 5 contained the following line:
<applet codebase="classes" code="TickerTape" width=500 height=59>
In this example, the codebase attribute lets the browser know that the applet is stored in the "classes" directory. The code attribute provides the filename of the applet, and the codebase attribute can specify location of that code.
The name attribute allows you to specify a symbolic name (like a nickname) for an applet. If you are designing your applets so that they build on each other for functionality or require another applet to process information, the applets need some way of
identifying each other in order to exchange information. This attribute lets you name your applet so other applets can communicate with it by name. For example, you could add a name to the TickerTape applet by using the following code:
<applet codebase="classes" code="TickerTape" name="LED" width=500 height=59>
If you had another applet that created text to be displayed on the LED screen, you could give that applet the name LED and it would know you were referring to TickerTape.class.
You have probably seen the align attribute before. With applets, the align attribute functions the same way it does for images; it enables you to align the applet on the right-hand side, left-hand side, or the center of a page. To center the TickerTape
applet, for example, you would use the following code:
<applet codebase="classes" code="TickerTape" width=500 height=59 align="center">
When you use the align attribute to position an applet, you might want to make sure that no other elements overlap or infringe on the applet's area. The vspace=n and hspace=n attributes enable you to specify a buffer space horizontally or
vertically around an applet in pixels so that other elements are spaced a decent distance from the applet. For example, because the TickerTape applet displays text, you might not want any of the page elements to bump up against it and diminish readability:
<applet codebase="classes" code="TickerTape" width=500 height=59 vspace=25 hspace=25>
This line of code ensures that no elements can be within 25 pixels of the LED display.
When you are designing Web pages with Java, consider the possibility that someone viewing your page is not using a Java-capable browser. The alt attribute allows you to specify an image, text, or URL to be viewed in place of your Java applet. That way,
users of non-Java browsers are not confused by a service missing on your Web page and may even be encouraged to get a Java browser to check your site out. For example, the following line causes users without a Java-capable browser to see the "Sorry. .
." message:
<applet codebase="classes" code="TickerTape" width=500 height=59 alt"Sorry, you need a Java browser to view this applet">
Many applets exist to provide customized features on a Web page, and for these applets you might actually include all the settings in the code. But for the most part, applets are most useful because they are reusable, and therefore it makes sense to
make applets configurable with parameters. For example, the LED Sign applet (see Figure 6.2) utilizes parameters to control the colors of the sign, the speed of the scrolling text, and the text that is displayed. By controlling these attributes with
parameters rather than hard coding them, the applet becomes more robust and flexible, allowing more people to add the applet to their own home pages.
Figure 6.2. The LED Sign Applet accepts user parameters to specify the message shown.
You use the <PARAM> tag to pass parameters to the applet. In fact, you must use the <PARAM> tag with the <APPLET> tag for it to have any meaning, so in a way even it is an attribute to the <APPLET> tag. The <PARAM> tag is
an HTML markup tag with two attributes of its own: name and value, as shown below:
<param name=name value="value">
The name attribute enables you to specify the parameter name, and the value attribute enables you to specify the value for the named parameter. The <PARAM> tag does not require a closing tag and is used to specify the values of parameters that are
passed on to your applet before it executes on the Web page. The amount of <PARAM> tags varies from applet to applet, depending on the number of parameters an applet is designed to take. An applet requires one <PARAM> tag for each parameter you
want to set.
The last section covered the HTML tags and attributes you use to add a Java applet to a Web page. The following HTML code incorporates some of these tags and attributes:
<applet codebase="classes" code="TickerTape" width=500 height=59 alt="Sorry, this requires Java" align="center"> <param name=text value="Congrats! You now have a Ticker Tape applet"> <param name=backcolour value="black"> <param name=framecolour value="darkgrey"> <param name=ledcolour value="red"> <param name=ledoffcolour value="darkgray"> <param name=framethick value=3> <param name=ledsize value=3> <param name=ledtype value=0> <param name=ledspacing value=1> <param name=speed value=100> <img src="sorry.gif"> </applet>
In this code example, the Java applets are stored in a classes directory in the Web directory, so the codebase attribute is used to specify the location. Next, the name of the applet is specified with code=TickerTape. The width and the height attributes
open the applet with the dimensions of 500x59 pixels, and the applet is centered on the page, as the align attribute indicates. This applet also accepts 10 parameters, which are set with the <PARAM> tag.
Next, notice that there is an <IMG> tag before the closing <APPLET> tag. This tag specifies an alternate image for non-Java capable browsers. The alt attribute with the <APPLET> tag enables you to specify the text displayed by
text-only, non-Java browsers. A Java browser might also display this text while loading the applet.
Note: The <APPLET> tag allows you to include any standard HTML code, such as an <IMG> tag, before closing the <APPLET> tag to be used as an alternative to the applet. The HTML tags you use here
will not be displayed by a Java-compatible browser, but they will be used by other browsers to display whatever you specify. It might be a good idea here to include a screenshot of your applet along with an explanation or perhaps a sorry.gif image that
lets users know they cannot view your applet.
Look at the following applet HTML file:
<applet codebase="calc" code="Calculator.class" width=185 height=295 alt="Yet Another RPN Calculator"> <img border=0 src="../images/calculator.gif"> </applet>
In this example, the applet does not accept any parameters, but it does utilize the <IMG> tag to provide an alternate image. The <APPLET> tag information is very straightforward; it provides the name of the directory containing the code,
calc , the name of the applet itself, Calculator.class, and the starting size. The image specified is in the standard <IMG> tag format, but because it comes before the closing <APPLET> tag, it will only be read by non-Java capable browsers.
Figure 6.3 shows the output when this page is viewed with a non-Java capable browser.
Figure 6.3. The alternate image displayed by a non-Java capable browser.
The HTML you need to add applets to your pages is pretty simple. If you have experience with HTML and have written your own Web pages, you should have no trouble adding Java applets to your page. But it can also be easy to go overboard on applets, and
forget that too much of a good thing can lead to trouble. This section takes a look at some design issues you need to consider when using Java on the Web.
Applets bring new aesthetic concerns to the Web just as any new visual feature does. When designing your pages, you may want to make a list of how applets can enhance your pages and also how they may detract. For example, the glowing buttons in Figure
6.4 might add a nice visual element to a page, but some people might consider them gimmicky. Once you have considered all of the implications, you will have a better sense of how to use applets you have acquired or programmed.
Figure 6.4. The glowing buttons on the Grey Associates page (http://www.greyassoc.com) enhance the page with applets without detracting from the overall design.
Remember that applets add color to a Web page just as any other graphic element. If you are very color-conscious, and you want to integrate a color scheme into your Web pages, try to select applets that either match your color scheme or that can be
customized to fit your color scheme. Remember that an applet with a large black area might fade into the background of a black Web page (see Figure 6.5).
Figure 6.5. The applets on this site don't add much to the design and fade into the background of the page, making them difficult to see.
Some applets have distinct looks, perhaps in the graphics and sometimes in the user interface. Try to select applets that enhance the look of your pages without going against it. For example, a scrolling LED light sign might be great for showcasing new
bands for a local nightclub, but it might seem inappropriate for announcing services for a local mortuary. Applets can create distinct impressions for users, and a wrong first impression can be disastrous to a Web site.
Animations can be a great way to make a Web page more lively. They can also be a great way to make a Web page more confusing. Although animations can be used in very subtle ways to make a Web page stand out, they can be overdone just like any other
effect. Animation techniques and Java can be used to create anything from buttons that glow when selected to full animated Web page mascots, and both of these uses have their place somewhere on the Web. However, a page with a scrolling text bar, mobile
buttons, a live clock, and an animated mascot might overwhelm users with too much information. Just as a boring page can keep users from coming back, so can a page that frightens them off with too many moving parts.
Figure 6.6. This applet shows how animation can integrate with standard elements, such as a logo, to create variation.
Figure 6.7. This page features five separate animations: a flipping picture, rotating logos, glowing logos, and a billboard. The page is visually busy and distracting to the viewer's eye.
In addition to changing the visual design of Web pages, applets can also change the functional design. If you have an applet on your Web page that provides a specific service or performs a task for the user, you should take some functional design issues
into account.
Keep in mind that you must provide the initial starting size for an applet in the HTML code that adds an applet to your page. This size could just be an arbitrary amount, but you want to select the size that maximizes an applet's features in most cases.
Suppose you have an applet that asks the user to input information into various fields. If you just select an arbitrary size, input fields might get cut off. The end result is a less effective applet. The same holds true for applets that are designed to
display information, be it text or images. You want to size your applets so that the prominent information is seen clearly when your applet opens, but you don't want to hog all the on-screen space. Try to strike a balance between the applet and the page
content.
Figure 6.8. This Web page shows how you can showcase applets without forsaking overall page design.
Placing applets also becomes an issue when considering functionality. You might want to place the applet so it is highlighted by the text from the page, or you might want to set the applet apart from the rest of the page by using other HTML elements or
standard graphics. However you choose to integrate your applets into your Web pages, don't get carried away with applets, but instead look at the site as a whole and use applets to enhance your pages.
Figure 6.9. On this page, the scrolling text applet is a part of the overall design, adding functionality but not detracting from the page's look.
Figure 6.10. This scrolling text applet adds confusion to the page. The text scrolls in multiple directions and speeds, making readability very difficult.
It might not seem obvious that sound is a design aspect, but until now, sound has not been obtrusive on the World Wide Web. Until Java, sounds on Web pages would require a user to click an icon to activate a sound file, so users were never surprised by
sounds out of the blue. Java changes that. With Java, you can incorporate sound into a page so that a sound is played as soon as someone accesses your page. Because many people might not realize this is possible, they also might not have their machines
configured to deal well with sound. They might have volumes set too loud, or they might be looking at your page from a place where extraneous sound is not appreciated, like school or work.
Sound design is not so much a matter of taste as it is a matter of manners. If sound will greatly enhance your pages, by all means use it, but try to use it wisely. The following are some tips for using sound on your pages:
So if you need to use sound, plan it well. Some very successful sites incorporate sound in a tasteful, non-obtrusive way (see Figure 6.11). If not used with a great deal of care, sounds can actually detract from an applet (see Figure 6.12). If you use
some simple common courtesy when designing your pages, they will have a far broader appeal.
Figure 6.11. The Dave Matthews' Band (http://www.ids.net/~reddog/dmb/) site uses sound well.
Figure 6.12. The Jumping Frog applet uses a very repetitive sound that annoys more than contributes to the applet.
It is very easy to go overboard on applets. Remember that not every page needs an applet, and very few pages need several. Cluttering a page with applets can decrease the number of people who will return to your pages. Applet clutter can be distracting
and sometimes outright annoying. If you have been using the Web for a while, you might remember the Netscape <BLINK> tag. What was meant to be a simple device to add strong emphasis soon came to be associated with annoying Web pages. Java applets
have the same potential. If used properly, they can make your site great. If they are overdone, they can make your site unpopular.
Placing tons of applets on your Web pages might not look bad, but it might slow your pages down to the point that they are unusable. Because applets are downloaded over the Net from a host server, each applet takes a small amount of time to be
downloaded before it can run. For one or two applets, this amount of time is not really significant (unless your applet is huge!) and is more like downloading a large image.
However, if your page contains several applets, it can begin to rack up download time very quickly. If users have to wait 10 minutes for all of the applets on your page to download, they might not wait at all. Many people are paying for access time, and
that time is money. There is not much on the Web that people are willing to wait that long to load, so try to take into account downloading time when designing your applet pages as well.
All this information might seem a bit overwhelming, but it all boils down to a few simple design rules:
If you follow these basic guidelines and produce the kinds of pages you would like to see, then other people will want to see them as well.
Chapter 7 discusses the Java Developer's Kit (JDK). The JDK is the primary tool you will need to start developing your own applets. Chapter 7 talks about the tools provided in the JDK and how to use them to create applets from scratch. Later chapters
talk about the Java language.
