5 min read

 

IBM Lotus Domino: Classic Web Application Development Techniques

IBM Lotus Domino: Classic Web Application Development Techniques

A step-by-step guide for web application development and quick tips to enhance applications using Lotus Domino

Most of the CSS rules you write for an application relate to design elements on forms and pages. Suggestions and examples in this section just scratch the surface of CSS possibilities. Browse the Web for additional ideas. Here we focus on the mechanics of how elements are styled, rather than on specific recommendations about what looks good, which is largely a matter of taste.

Use color effectively

Use pleasing, complementary colors. If your organization requires a specific set of colors, then, of course, find out what that palette is and conform to it as much as possible. Color tastes change over the years, primary colors dominating at times and lighter pastels in vogue at others. Here are a few generalities to consider:

  • Use white or very light colors for backgrounds
  • Use stronger colors such as dark red to make important elements stand out
  • Use no more than three or four colors on a form
  • Use black or dark gray text on a light background for lengthy text passages

If you have paid little attention to the matter of color in your applications, do some web work on the subject. Once you select a color scheme, provide some samples to your customers for their opinions and suggestions.

Style text

Typography is a complex topic with a rich history and strong opinions. For web application design purposes, consider using web-safe fonts which are likely to be available on most or all personal computers. If you use a font that is not available to a browser, then text is rendered with a default font.

Fonts with serifs are usually considered easier to read on paper, and less so as web page text. Experiment with the following fonts:

  • Bookman Old Style
  • Cambria
  • Garamond
  • Georgia
  • Times New Roman

Common fonts without serifs (sans serif) are considered easier to read on the Web. Some examples include:

  • Arial
  • Calibri
  • Helvetica
  • MS Sans Serif
  • Tahoma
  • Trebuchet MS
  • Verdana

Mono-spaced fonts are useful when you want text to line up—columns of numbers in a table, perhaps:

  • Courier New
  • Courier

Establish a common font style with CSS rules applied to the body type selector or to a main division using a type selector, a class selector, or an ID selector:

body {
color: #555555;
font-family: Verdana;
font-size: 8pt;
}


Style headings and labels

If headings and labels are bracketed with HTML heading tags (for example, <h1> or <h2gt;), they can be styled with type selectors:

h1 {
color: Blue;
font-family: Arial;
font-size: 18pt;
font-weight: bold;
}


If headings and labels are bracketed with <span> tags, use CSS classes:

<span class=”highlight1″>October News</span>


Underline links in text but not in menus

When browsers and the Web first appeared in the early 1990’s, hyperlinks were a novelty. To distinguish a link from normal text, the convention developed to underscore the text containing the link, and often the link text was colored blue. There is no magic associated with underscoring and making text blue—it was just the convention adopted at the time.

Today links in text passages are usually distinguished from adjacent text with color, weight or underscoring. In a menu, however, each item is understood to be a hotspot link. Underscores and blue text are not required. So if you feel like underscoring a link, do so if the link appears within some text, but don’t underscore links in menus.

At the same time, refrain from highlighting important text with underscoring, which implies that that text is a hyperlink. Use another highlighting technique; italics, bold, or an alternate color work well for this purpose.

Style fields

Fields can be styled with CSS either with the Style attribute in Field Properties or with CSS rules.

The key to understanding how CSS rules can be applied to fields is to understand that fields are translated to the Web using <input> tags. Here is how a simple text field translates into HTML:

<input name=”FirstName” value=””>


Here is how a radio button field translates:

<input name=”%%Surrogate_Gender” type=”hidden” value=”1″>
<label><input type=”radio” name=”Gender” value=”M”>M</label><br>
<label><input type=”radio” name=”Gender” value=”F”>F</label><br>


CSS rules can be defined for the <input> tag, an ID, or a class. For example, assume that a CSS class named requiredtext is defined. If that class name is entered in the Class attribute of Field Properties, the resulting HTML might look like this:

<input name=”FirstName” value=”” class=”requiredtext”>


CSS style rules coded for the requiredtext class are applied to the field.

Highlight required fields

Required fields are validated, most likely with JavaScript code, so that complete and good data is saved into the database when a document is submitted. If entered values fail validation, the user is presented with a message of some sort that identifies the problem and requests correction.

Web forms typically identify which fields are required. Any of several techniques can be used. Required field labels can be styled with a more prominent color or a special marker such as an asterisk or a checkmark can be positioned near the field. Required fields also can be co-located and set apart using the <fieldset> and <legend> tags.

If a field value fails validation, it is common practice to provide an error message and then to set the focus into the field; the cursor is positioned in the field to facilitate an immediate correction. As the cursor can be difficult to spot on a busy form, it is also possible to change the background color of the incorrect field as a way of drawing the user’s attention to the field. In this illustration, the background color of the field has been changed to yellow:

IBM Lotus Domino: Adding Style to Form and Page Elements

Implementing this technique requires writing a small JavaScript function that changes the background color of the field, and then calling that function when field validation fails.

LEAVE A REPLY

Please enter your comment!
Please enter your name here