SitePoint Tech Times Logo
Issue #58 February 5th, 2003  
Archives | Advertising | Search | Send to a Friend  
 
Tips, Tricks, News and Reviews for Web Coders

      In This Issue...
 
Note: This newsletter is supported solely by advertisers like the one below. We stand 100% behind every ad that we run. If you ever have a problem with a company that advertises here please contact us and we will try to get it resolved. - Kevin Yank
  Announcing Amazon.com Web Services 2.0!

Amazon.com Web Services 2.0At Amazon.com, we want to see Web services work. We believe they are important to the future of the Internet. To help stimulate Web service innovation, we now offer software developers the opportunity to integrate Amazon.com features and content directly into other Web sites using either SOAP or XML over HTTP. Partner with the leader in e-commerce and join the Web services revolution today! Participation Is Easy and Free!

To participate in the free Amazon.com Web Services Program, you simply need to:

1. Download our free developer's kit;

2. Apply for a free developer's token;

3. Write your application.

For more details, please visit www.amazon.com/webservices today.
 
  Hi, Tech Timers!

All's quiet on the Web development news front (or as quiet as it ever is), so I took the opportunity yesterday to update my JSP Quick-Start Guide for Windows.

That one article has been the source of 50% of the feedback email I've received over the past 6 months. It seems that with every new release of Tomcat, the development team modifies the installation procedure -- especially the methods for linking it to an Apache Web server -- each time breaking compatibility with all the installation guides out there (including mine). Hopefully this update will remain accurate a little longer than my two previous efforts!

I'll also have, at long last, a Linux version of the Quick-Start Guide ready by the end of the week.

In case you missed it, our .NET Theme Week (or .NET Feature Guide, as I have been recently told we are calling it) is now finished, and you can access our complete archive of .NET articles.

Also this issue, I review Arbortext Epic Editor. By far the best tool available for writing books, articles, and other prose in XML document format, there is no evaluation version available of this product. So if you anticipate having to produce XML content in the near future, this review is a must read!

Kevin Yank
techtimes@sitepoint.com


We value your membership. If for some reason at this time it is inconvenient for you, you may discontinue your subscription by simply sending a "Blank" email to the following address: leave-techtimes-html-5569392V@lists.sitepoint.com. Scroll to the very bottom of this issue for further instructions if you have problems.
 
  Quick Tip

Form layout with CSS instead of Tables

How do you lay out your forms? If you're like most Web designers, you use tables to ensure that all the fields line up neatly. In today's world of CSS, however, such messy measures are no longer necessary!

Consider the following form code:

<form action="test.php" method="post">
<p>This is a form.</p>
<p><label for="name">Name:</label>
  <input type="text" id="name" name="name" size="30" /></p>
<p><label for="address">Address:</label>
  <textarea id="address" name="address" wrap="soft" cols="30" rows="5">
  </textarea></p>
<p><label for="country">Country:</label>
  <select id="country" name="country">
    <option>United States</option>
    <option>Canada</option>
    <option>Australia</option>
    <!-- More countries... -->
  </select></p>
<p><input type="submit" /></p>
</form>


Because of the simple code here, the fields will normally be a bit of a jumble. But by applying some simple CSS to this page, we can make even our simple form look great:

form p {
  width: 400px;
  clear: both;
}
form p label {
  float: left;
}
form p input, form p textarea, form p select {
  float: right;
}


We assign a comfortable width of 400 pixels to all paragraphs appearing within forms, and then float labels to the left and form fields to the right of those paragraphs. The clear attribute assigned to paragraphs ensures that each paragraph appears below the form fields floating against the sides of the one before it. The result is shown here:

Form Layout with CSS Example


Thanks to our designer, Julian Carroll, for sending this my way.
 
  New Technical Articles at SitePoint.com
Feature Article
JSP Quick-Start Guide for Windows
By Kevin Yank

Looking to get started with JSP? Use Kev's detailed guide to set up and try out a JSP-capable server under Windows. Newly updated for use with Tomcat 4.1.18 and Apache 2.0.44!
Full Story

Build a Dynamic Menu in JavaScript
By Premshree Pillai

They're versatile, they're popular, and they're not as complicated as they look! Premshree shows you how to build your own dynamic JavaScript menu in this fast-paced tutorial.
Full Story



Cool Effects Tutorials
By SitePoint Community

Our newest effect, Grungy Tech, combines two great effects in one to create an attractive background or collage. If you're adding new effects to your design arsenal, this tutorial is a must-read!
Full Story



Accessibility Checking... With Just A Browser!
By Ian Lloyd

Accessibility checking need no longer be a hassle! Ian shows how you can ensure your site complies to the 14 Web Content Accessibility Guidelines of the W3C ...with no more than a copy of Opera!
Full Story



XHTML Web Design for Beginners - Part 1
By Nigel Peck

Why build your first Website in HTML, when you can build it in XHTML? Develop your first Web pages for flexibility and forwards compatibility - Nigel shows us how.
Full Story



Build User-Controlled Style Sheets for Greater Accessibility
By Chris Churchill

In the age of accessibility, the user is king. So why not let them take control? Chris shows how a combination of DHTML and CSS can provide users with large print versions of your pages.
Full Story
 
  ENCRYPTION + AUTHENTICATION = TRUST

You may think people will regard your business as trustworthy because you've got a 128-bit encryption certificate, but encryption does not guarantee trust.

Thawte believes in rigorous authentication -
Download our FREE Authentication Guide
 
  Software Reviews

New releases for February

Epic Editor 4.3  Arbortext
US$860

When I was researching XML content authoring software for SitePoint's new book publishing business, the popular choice for such work seemed to be Adobe Framemaker 7. Retrofitted in its newest version to provide WYSIWYG editing of XML documents, it seemed a promising lead.

Unfortunately, Framemaker's origin as an editor for a non-standard file format really shows. To edit existing XML content in Framemaker, you must import that content into Framemaker Structured Document Format, then export it to XML again when you're done. Those import and export processes, as well as the behaviour of the editor for a given document type is dictated by an 'Editing Kit'. Unfortunately, Adobe leaves the task of creating an Editing Kits for the XML document type you want to edit largely up to you.

In particular, we were interested in editing XML content in DocBook Format. Framemaker comes with an Editing Kit for DocBook, but it has a number of bugs that prevent it from reading valid documents on import and cause it to produce invalid documents on export.

Arbortext Epic Editor provides the same kind of WYSIWYG editing functionality, but works with XML documents directly. With no import/export process to foul up the works, and an environment designed from the ground up to allow writers to generate valid XML documents, Epic Editor really sets a standard that Framemaker can only aspire to.

Epic Editor Interface

At first glance, Epic Editor's interface looks a lot like your average word processor. The most obvious exception being the Document Map on the left-hand side of the window. The Document Map displays a structural view of the tags, attributes, and content of your document. By default, it scrolls in sync with the main editor view, so you can always see at a glance the structure of the particular document area you're working on. You can even edit your document right in the Document Map. For less technical users, the Document Map can be hidden entirely.

Document Map in action

Once you've worked with Epic Editor for awhile, though, you'll quickly realise that the modern word processor interface belies the slick XML editor lurking beneath the surface. Especially once you become accustomed to the keyboard shortcuts that are available, marking up heavily-structured content in Epic Editor is an astoundingly productive experience!

The most commonly-used functions are heavily tuned so that you can accomplish them quickly. Inserting a new element (tag), for example, simply requires you to type Enter. This brings up an alphabetical pop-up menu of all the elements that can legally be added at the cursor position, or placed around the current selection. This pop-up also includes at the top a list common structural tasks that can be performed at the current location, such as splitting a paragraph in two.

In complex document types (such as DocBook XML), the menu of elements can be quite extensive, so additional element insertion methods exist.

Quick and Full Insert Markup methods

If you type Ctrl-I, a small pop-up window appears containing the same menu of elements, but this time in a scrollable list. Typing the first few letters of the element name you want to insert will take you straight to its entry in the list so you can insert it by typing Enter. To quickly insert a <function> tag in a DocBook document, for example, you just type 'Ctrl-I, F, U, Enter'. If you make a mistake while typing the element name, just pause a moment and then start typing the name from the beginning.

Finally, there is the full Insert Markup dialog box, accessible through a toolbar button. In addition to a keyboard-seeking list of legal tags as just described, it also lets you insert processing instructions, text entities, and other XML markup.

Editing tag attributes is made possible through a simple, yet effective dialog interface.

Attribute Editing Window

Typing Ctrl-A opens a dialog listing the possible attributes for the current element (a toolbar button is also available). Required attributes are highlighted, and attributes with a fixed set of possible values appear as drop-down lists. When you insert a new element that has required attributes, the Attributes dialog box appears automatically for you to input them.

One of the most powerful structural features is support for drag-and-drop editing. Want to move a section somewhere else in your document? Simply drag its icon in the Document Map to the place you'd like to move it and let go. The mouse cursor changes during the drag operation to indicate legal and illegal drop locations, as well as locations where the editor will automatically insert new elements to make the dragged element legal there.

All this XML editing power, and Epic Editor still manages to offer most of the amenities of modern word processors too. Toolbar buttons and keyboard shortcuts are provided for most common formatting commands (e.g. the bold toolbar button inserts a <emphasis role="bold"> tag in DocBook XML mode). Multi-level undo/redo and document change tracking work as expected. And the real-time spell check (with red jagged underlines for misspelled words) and thesaurus are welcome writing tools. The built-in dictionary, however, is somewhat dated, so expect to spend some time adding words like 'Internet', 'download', and 'configuration' to the custom dictionary if you plan to write anything technical. Fortunately, this is a painless, one-click process for each word.

Advanced features are many and varied, and most are disabled by default so as not to confuse novice or non-technical users. The Find/Replace feature can be set to use regular expressions, and match markup (tags and attributes) instead of just document content. A "Edit Selection as XML Source" feature lets you get your hands dirty and work at the code level when you need to (such instances are surprisingly rare!). Tag name aliases, editing behaviour, and WYSIWYG formatting are all fully configurable when needed.

In short, Epic Editor is the ideal choice for WYSIWYG editing of medium-to-large XML content. It handled a ~300 page, heavily structured, technical book without even breaking a sweat, and is far superior to any competitors I could find. In fact, the only downside to this program is that no evaluation version is available for download, so you'll just have to take my word for it.

Epic Editor 4.3 is available now for Windows, Solaris, and Unix (not Linux).


Every month, I take a look at the new software that I've had a chance to play with and review it in this section. Have you got a product you'd like me to check out? Email me at techtimes@sitepoint.com!

 
  Mail Bag

It's the Quick Tip that just won't die...! The tip I published two issues ago explaining how to keep your copyright notice up to date with various languages continues to generate valuable e-mail.

From: Marc Antonsen

Hi Kevin,

In your SitePoint Tech Times #56 you wrote a Quick Tip about easy ways to keep the year updated.

But... Why didn't you mention the method using SSI tags?

It works like this:

<!--#config timefmt="%Y"-->
Copyright &copy; 1999 - <!--#echo var="DATE_LOCAL"-->

and you get:

Copyright © 1999 - 2003

Thanks, Marc! This is definitely an option for those who don't use a particular server-side programming language.



Meanwhile, last issue's Quick Tip is also generating some mail...

From: Coby Heise

Hey guys,

Thanks for the terrific tip about disabling the Image Toolbar in web pages for IE 6; I've been looking for an answer to that annoyance ever since the browser came out!

Do you possibly know of a way to similarly disable the Image Re-sizing feature that comes built-in with IE 6? I've had many clients (who use IE6 by default) ask me what the heck that little square box is that appears when they hover over an image in sites I've created for them. I'd just as soon have it not appear in any of my web apps.

Thanks in advance for your help and keep up the great work!

Coby Heise

Coby, Internet Explorer 6 only performs its image resizing trick when you're directly viewing an image file in the browser. The trick to avoiding this "feature" is to instead point the browser to an HTML file that displays the desired image with an <img> tag.

To avoid having to create a separate HTML file for each image you want to display this way, you can create a single, generic file that will display any image with JavaScript. Instead of a standard <img> tag, put the following JavaScript code in the page:

<script type="text/javascript" language="JavaScript">
document.write("<img src=\"" + location.search.slice(1) +
"\" alt=\"Photo\" />");
</script>

Assuming the file is named view.html, you can then use it to view any image by specifying the image in the query string of the URL. For example:

http://www.mysite.com/view.html?images/photo.jpg

This will display http://www.mysite.com/images/photo.jpg. Feel free to add whatever trappings you want to the HTML code of view.html while you're at it (e.g. a background colour, a "back" link, etc.).

See you all in two weeks!

 
  Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Tech Times!
 
Send suggestions and comments to: techtimes@sitepoint.com

SitePoint.com is hosted by RackSpace and VenturesOnline.

The SitePoint Tech Times newsletter is hosted courtesy of SparkList

The SitePoint Tech Times is © 1998-2003 SitePoint Pty. Ltd. All Rights Reserved. No part of this Newsletter may be reproduced in whole or in part without written permission. All guest articles are copyright their respective owners and are reproduced with permission.

You are currently subscribed to The SitePoint Tech Times as: techtimes@sitepoint.com.

Switch your subscription to the text-only edition of the Tech Times

Change the email address that your Tech Times subscription is sent to

Back to the archives

Newsletter signup

Design, coding, community or marketing? Select the right newsletters right for your needs...