Amaya

Contents

Introduction

Amaya is a graphical editor developed by W3C to create web pages conforming to the XHTML standard. This is available from W3C as an executable for Microsoft Windows, Mac OSX or GNU/Linux, or as source code..

I used Amaya to write this web page. My comments are based on what I did and what I had to figure out to generate these notes. I will look at this from the point of view of an experienced HTML coder, and I will try to understand what this looks like to a non-HTML coder who wants to generate conforming code. Presumably, this latter point is the main purpose of Amaya.

Usually, I use a text editor to create web sites. On Linux, I use vi most of the time. If I want to do a lot of copying and pasting, I switch to emacs. Most text editors on Linux feature syntax highlighting and code indenting. On Microsoft Windows, I use Notepad. Pre-vista Notepad does not have syntax highlighting or code indenting, but otherwise, it is a fast, simple and very convenient text editor.

I am now trying out Amaya 11.1. Most of this document was written with version 9.55. An important change is that there is no longer an XHTML menu. Most of its operatations are under the Insert menu.

(X)HTML

HTML stands for HyperText Markup Language, and it is an SGML DTD. SGML stands for Standardized General Markup Language, and DTD stands for Document Type Definition. XML stands for eXtended Markup Language, and XHTML is a development of HTML, based on XML, rather than SGML. This actually matters to people, but it is beyond the scope of this document. Aren't you glad?

HTML and XHTML are mostly the same language. The most important difference is that XML and XHTML tags are case sensitive. All the traditional HTML tags must be entered in lower case if you want to pass validation.

Amaya's whole purpose is render all this invisible, and mostly it succeeds. I use the term (X)HTML to designate both languages collectively.

Installation

Linux (Fedora 18)

I installed version 11.4.4. I downloaded the latest RPM file, which was described as being for Opensuse-11. On my Fedora machine, yum and rpm both insisted I need the dependencies libcrypto.so.0.9.8, and libssl.so.0.9.8. My Fedora machine has much later versions of these. I am a dedicated Linux geek, so I did the folllowing...

# rpm --install --nodeps amaya_wx-11.4.4-0.i586.rpm
# cd /usr/lib
# ln -s libcrypto.so.1.0.1e libcrypto.so.0.9.8
# ln -s libssl.so.1.0.1e libssl.so.0.9.8

The ln -s command is a symbolic link, equivalent to a Microsoft Windows shortcut. It leaves the existing, up-to-date stuff intact, and it creates something that looks just like the required libraries.

Linux (Fedora 10)

For version 11.1, I downloaded and installed an rpm file onto Fedora Core 10. There were packages for other Linux distributions.

Linux (Fedora 6)

I installed Amaya 9.55 from source onto Fedora Core 6. Amaya unpacked into a set of subdirectories. There is no README or INSTALL text file in the root directory to tell you how to install it.

[howard@rev src]$ ls -l Amaya9.55/
total 48
drwxr-xr-x 18 howard howard 4096 Oct  7 02:35 Amaya
drwxr-xr-x  8 howard howard 4096 Jul 10 09:07 freetype
drwxr-xr-x  5 howard howard 4096 Jul 10 09:07 libwww
drwxr-xr-x 11 howard howard 4096 Nov 16  2006 Mesa
drwxr-xr-x 15 howard howard 4096 Apr 24  2006 redland
drwxr-xr-x 10 howard howard 4096 Jul 10 09:07 wxWidgets
[howard@rev src]$

Trying to figure out what to do, I cd'ed into the Amaya directory. There I found a README file, which told me how to install to Linux from source. I followed the instructions and everything worked. There is no point repeating them here.

Other OSes

If someone tells me about the Windows or Mac installation, or about how some other Linux distribution works differently, I will add their comments.

How to do stuff

The basic concept of SGML and XML is that you can define blocks of text as functional objects. On most documents, the most common block is a paragraph. Other objects can be headings, lists, tables and images.

Believe it or not, this is how Microsoft Word and Open Office work. In any given paragraph, you can pull down the style menu and select the format type for your paragraph. This all is very counter-intuitive, but very efficient once you figure it all out.

Creating a new document

Pull down the File menu and select New. From the sub-menu, select document. The file window allows you to select your working directory, filename, and document template.

Make sure you fill in the Title box with an intelligent title for your document. This controls the text in the title bar at the top of your browser window. This is the text used by browsers when anyone bookmarks your web page. The title tag is also used by Google to determine what your web page is about.

I recommend that your web page title and your main page heading contain identical text.

Adding a title because you forgot to fill in the Title box

On version 9.55, you could pull down the XHTML menu. The first item in the menu was Change title.

On version 1.11, pull down the Tools menu and select Change title...

Headings

Unlike Microsoft Word and Open Office, selecting an object type does not convert the text block over to it. Either you select it at the start of the line, or you must highlight the line. (X)HTML provides six heading levels, h1 to h6. For version 11.1, these are identified in the Elements menu as T1, T2, T3, etc. You can select four levels from the icons on the right hand side of the window. You can select all six by pulling down the Insert menu and selecting Headings.

Ordered and Un-ordered Lists

Lists are a little complicated in Amaya. Structurally, ordered lists and un-ordered lists are just about identical except for the primary formatting tag. An ordered list is numbered. An un-ordered list is bulleted.

The user interface for this has been improved for version 11.1. How to do it?

  1. Click on the Bulleted or Numbered list icon. This will create the first item of your list.
  2. Hit [Enter]. This creates your second item.
  3. Keep hitting [Enter] to enter more items.
  4. To end the list, hit [Enter] twice. This puts you back in a paragraph.

Definition Lists

Definition lists are more complicated, since they contain two types of data - a list term, and a list definition as shown immediately below.

List term one
List definition one: Here is where you explain "List term one". I like this tag. It is a useful way to create more detailed menus.
List term two
List definition two: Now, we can type in more verbiage on what our second list term means.

The system has changed. You have three menu icons, the Definition List, Term and Definition, all revealed by tooltips. The set up still is not user friendly. I think the following procedure is the easiest way to do it.

  1. First, type in your next paragraph after the definition list. Move your cursor back up and insert a new line.
  2. Hit the Definition list button, type in your first term, and hit [Enter]. This puts you in the next term.
  3. Pull down Views, and hit Show source. It helps to see what you are doing.
  4. Hit the Definition button (not Definition list), and type in your first defintion. Click on your source code, window, and note now the definition has been inserted in front of your empty definition term. Do not hit [Enter].
  5. Move the cursor down to the next line. This puts you into the next term. Follow the procedure again.
  6. When you are done, delete the last definition term, and move to the next paragraph you started. This is where it helps to have source code revealed.

This would be a challenge for a user who did not know anything about (X)HTML, and definition lists.

Tables

Let's try a table.

There now are a bunch of table icons. The first one is just plain "Table", and you hit that first. You will be prompted for the number of columns, the number of rows and the number of border pixels

Hello there
Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Row 1 cell 3
Row 2 Cell 2 Row 2 cell 4
Row 3 The icons let you merge cells. Cool!

In a word processor like Microsoft Word, hitting tab at the end of the last line would add a new line. On this this case. You will have to examine the table icons and "Append", not "Insert" a row.

The table is written to the file without attributes. All the table cells are table data elements. You can convert a row of cells to table headings from the Tools menu and Edit Table, and change to Heading cell. Amaya renders heading cells with centred, bold text.

To mess with the table format, play with the table icons, or pull down the Insert menu, and search under Table, or pull down the Tools menu and search under Edit tables.. There are lots of (X)HTML structure not supported by Amaya. To learn about this, read the standard.

Adding a paragraph after your table

If you add a table to the end of your document, there is no way to continue on after it!

You can type in the next paragraph, then insert your table ahead of it.

If you failed to plan ahead (who does?) you need to get clever. Pull down the View menu, and turn on Show source. Scroll to the end of your document. You should see something like the following...

      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

It should be obvious to you where the table ends. Insert the next paragraph as source, as shown below.

      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<p>My next paragraph</p>
</body>
</html>

Now, you have access from the graphical window.

Pre-formatted text

This is implemented in (X)HTML by the PRE tag. To get to this, pull down the Insert menu and select "Preformatted (pre)".

To turn pre-formatted text off, pull down the Insert menu and select "Paragraph (p)".

Non-breaking Spaces

I like this feature in word processors and other text formatting languages. They are implented in the(X)HTML language. In Amaya, you are supposed to be able to hit [Ctrl][Space], and a non-breaking space is inserted. Unfortunately, what is inserted is a tilde (~). This is the non-breaking space in LaTeX. In (X)HTML, the tag is &nbsp;.

You can turn on source and insert &nbsp; manually. Anaya will turn this back into a tilde at the first opportunity. This feature is not functional if you use Amaya.

Inserting Images

[Amaya Logo]Where would the world wide web be if we could not insert images? I want to embed an Amaya logo in the text here, somewhere.

  1. Click on the paragraph to which the graphic will be attached. This can be an otherwise empty paragraph if you want.
  2. Click on the Insert/Replace Image icon.
  3. Select the file you want to insert. (X)HTML supports JPEG, GIF and PNG format.
  4. Amaya insists that you provide ALT text, so type this in too. This text will be visible to Lynx users and to anyone who keeps images turned off. Some browsers display ALT text when you hover the mouse over the graphic.

At this point, you have a graphic attached to a paragraph and treated as an enormous character. I want the text to wrap around the graphic. I have added this capability to my style sheet. My style sheet allows an image to have the class left or right.

  1. Click on the image. Make sure it is properly highlighted. You should see sort of a box around it. If you a large curser on either side of it, you have not highlighted it, and you will not be able to do anything.
  2. Look at the attributes window in the tools pane. The src attribute provides the filename of the graphic. Ayama automatically entered the width and height attributes, and it insided that you provide the alt text.
  3. Pull down the Insert menu and select "class".
  4. Underneath the Insert menu is the Apply class menu with a checkmark underneath. Select the class you want and click on the checkmark.

The Amaya logo above is positioned with text wrapped around it using the right attribute provided by the stylesheet jhg.css. I love stylesheets, but my impression of them is that they are not intuitive. If you do not understand (X)HTML, none of this will make sense to you.

Using the Acronym Tag

This is not a particularly important feature of (X)HTML, but it illustrates the problems of an editor like Amaya.

If you use an abbreviation in your (X)HTML text, you can use a tag to provide a definition for it. Most browsers subtly underline the text. When you hover your mouse over the text, the full text of the abbreviations is displayed. In my opinion, the old fashioned technique of typing it out explicitly always was a good way. Not using abbreviations and initialisms at all is an even better way.

The code looks like this...

<abbr title="(eXtended) Hypertext Markup Language">(X)HTML</abbr>

In a non-Amaya browser, position your mouse over the "(X)HTML" in the paragraph above.

  1. Highlight your abbreviation.
  2. Pull down the Insert menu.
  3. Select Information type.
  4. Select abbr.
  5. With your abbreviation text still highlighted, look for the Attributes tool and pull down the Insert menu.
  6. Select title, and type in the definition of your abbr.

Amaya does not indicate the abbr tag in any way. Gecko based browsers like Firefox underline the text a little. You cannot get at the abbr tag to make corrections within Amaya's GUI. To fix anything, you will have to show the source code and do your corrections there.

A point very much in Amaya's favour is that it was easy to type in the source code, above. With the Preformat tag turned on, all I had to do was type in the pointy brackets. View the source code to see what it really looks like.

Style Sheets

Style sheets are such a fundamental part of XHTML that they deserve their own section. "CSS" stands for Cascading Style Sheets. I will not go into much detail about this because you have to read the official literature.

Creating and linking

Pull down the File menu. Select New. Select New CSS Style Sheet. Type in the filename.

At this point, you need to understand style sheets. There is no graphical user interface that makes the style code transparent to the user. Type the following code into your style sheet....

body {
}

Insert a new line between the curly brackets. Click on the Palette icon, or pull down the Style menu and select CSS Style. Set the colour and the background colour.

Go back to your (X)HTML document. Pull down the Style menu and select Link. Browse and find your style sheet. Your document should change to the colours you selected for your style sheet.

Making a mess

Now that you have linked a stylesheet to your document, try linking another one. Amaya does not delete the first one. Your browser interprets both style sheets as best it can. The results can be horrible.

If you want to change style sheets, you must turn on the View Source, and delete the old style sheet, manually.

Adding Style

There is no way around knowing something about style sheets. One of the things HTML manuals tell you is that if you set the background colour and the font colour, you must set the link (anchor) colours. For example, here is what part of the stylesheet for this document looks like. 

body {
  background: #ffffff;
  color: #00000f;
}/
a:link    {color:  #00008f}
a:visited {color:  #0000ff}
a:active  {color:  #ff0000}

The W3C page on CSS is at http://www.w3.org/Style/CSS/. The palette icon is useful, but I do not see how you can make a style sheet work without reading up on it.

Validating (X)HTML

Amaya reports errors in the XHTML code. We can sort of assume Amaya makes no errors on its own, however, you can load existing code, or you can view the source code and edit there.

I tried loading an existing XHTML file. I sort of got lucky because there was an error in it. Amaya announced that the closing html tag was mismatched. I studied this for a few minutes because the tag quite obviously was there. I finally noticed that the code contained a horizontal rule tag (hr) that did not have the closing slash required by the XHTML standard. Problem solved!

Welcome to the wonderful world of debugging! Debugging is not even remotely possible if you do not understand (X)HTML.

This is a useful feature, even for people who use text editors to write HTML. You can use the validator at W3C, but this requires your page to already be up on the internet.

In Conclusion

I plan to continue using text editors to edit (X)HTML. I understand the language. The language is very simple. Amaya is interesting, but I do not see how it makes web page editing any simpler.

I do not see how you can create a valid XHTML web page without a good knowledge of XHTML. Amaya provides a nice GUI for creating the web page, but it is not a substitute for knowing how to write the code.

Here is more information on web pages.

HTML5 Powered with CSS3 / Styling, and Semantics Howard Gibson — Email hgibson@eol.ca — Last updated: 2012/12/24