PC Plus HelpDesk - issue 232

This month, Paul Grosse gives you more insight into some of the topics dealt with in HelpDesk and HelpDesk Extra

From the pages of HelpDesk, we look at:

  • Liquid Icons; and,
  • MIDI (Musical instrument Digital Interface).

From HelpDesk Extra, we look at HTML coding:

  • Basics;
  • Overall Layout;
  • Paragraphs and breaks;
  • Lists;
  • Tables;
  • Links;
  • Images; and,
  • Special Characters.
 Paul Grosse

HelpDesk

Liquid Icons

Here, the idea is that the icons or buttons or whatever you are designing, look as though they are made from something that is flat that has on its surface, a globule of bright liquid that reflects the light.

In the image on the right, you can see some real rain on real apple blossom.

Below that is part of the same image magnified and with some additional contrast so that you can see better, what is going on.

There are several things at work here - some are easy to notice, others not so:

  1. The surface underneath the globule is opaque and matt - the level of light we see is proportional to the amount of light falling on any one point (it is also a function of its colour)
  2. The globule is completely transparent - there is no reflection from internal particles
  3. The globule refracts light - concentrating parts and depriving others according to the shape of its surface
  4. The round surface of the globule magnifies slightly the background image
  5. The background image magnification is not uniform therefore there is some barrel distortion of it
  6. The globule refracts light differently at different frequencies causing a slight separation/rainbow effect that increases in intensity away from the centre - this is called dispersion
  7. Light enters the globule from above in the picture and due to the shape and the internal reflection of the globule the light is at a greater concentration at the lower end of the globule.
  8. The surface of the globule is bright - it has a smooth surface - therefore any reflections from it will be a small, sharp image of the globule's environment

Clearly, some of these effects are fairly straightforward to produce and others are not. Also, some will not be seen very easily or at all and therefore do not need to be reproduced.

Here, we shall use the GIMP which is easily capable of producing these effects and is also completely free to use.
Here, we can see our basic button design. It is just a yellow with 'OK' on it in black. It also happens to be 128x128 pixels which is larger than we need (our aim here is to make one that is only 48x48 pixels but you can make them any size you want. At the end of the process, we shrink down anyway which makes things easier to work on and have a finer effect).

You don't have to use letters - you can use anything but one rule of thumb is that anything that is black and a silhouette will do against virtually any reasonably saturated background of any colour.
Inside the globule, the light entering it from above hits the inside over the lower half and is reflected internally onto the lower half of the button.

This is done by clicking on the red square button on the image window which produces the mask (red colour). Select the gradient fill and with your foreground (FG) and background (BG) colours set to black and white respectively, drag the fill icon from top to bottom of your image. Click on the dashed outline button on the image window and your mask should have a dotted line running across the middle of the image with the bottom half having the moving dotted line all the way around it.

Next, right-click on the image and select 'Image' (or 'Layer' depending upon which version of the GIMP you are using), 'Colours' 'Levels...' and the levels dialogue will appear. Slide the input levels slider until you have changed the gamma of the bottom half of the icon to something around 5 or whatever you think looks good. Then click on 'OK'.
Next, make sure that your image has the focus and then press [Ctrl][I] to invert the mask.

Next, click on the image and the same levels filter should appear (the GIMP remembers the last filter you used like this so, if you are producing a number of these, you can achieve certain parts fairly easily). Next, change the slide so that the gamma value is the inverse of the previous value - we had 5 so now pick 0.2. The image should now look like the one on the right. Click 'OK' and then press [Ctrl][Shift][A] to remove the mask.
Next, press [Ctrl][A] to select all of the image and then 'Select', 'Shrink...' and then 20 pixels. Press 'OK'. After that, 'Select', 'Grow', and then 10 pixels which will give it round corners of 10 pixels radius to simulate the globular effect of the surface we are trying to create the illusion of.

Finally, make sure that White is your foreground colour and select gradient fill. Choose 'FG to Transparent' and then, drag the mouse from the top of the selected area to around 2/3rds of the way down the image.
You can, of course, use different amounts of shrinkage or growth or even choose a different way of highlighting the image. In addition to that, you can drag the gradient fill down to only 50 percent or whatever you need - the image on the right is the same as above but only dragged 50 percent.
Finally, shrink down the image until it is the size you want. The images on the right are all 48x48 pixels and use a variety of different backgrounds (including the one above) to show what the finished buttons look like.

MIDI (Musical instrument Digital Interface)

Midi information is simply any digitisable data that describes a piece of music.

Strictly speaking, this has been going on for hundreds of years. If you want to know about music and then weaving on drums, look at the pages on Jacques de Vaucanson on the Internet (1745). Following that, The Jacquard loom (punched cards) was developed in France around 1805 by Joseph-Marie Jacquard.

The technology for the street organ you can see on the right exists in two forms (air and push pins) and was developed half way through the 19th century.

 
Here, you can see the pins that read the notes. They are fed from left to right. The pins have a sloping left side so that as the card is pulled through, the pin pushes through the hole and then as the note ends, it is gently pushed back.
Here, you can see the holes as they are pulled towards us with high pitched notes on the left. You can see that as each pin represents a note to be played, it has a series of holes that play it - in this case, the card has a span of 36 holes across its width.
This image is from a MIDI file editor (CakeWalk) and you can see how each note has a particular position.

The holes in the card above are analogous to the notes in the MIDI file in that they have information about which note to play, when it started and how long it lasted (or, when it stopped which is effectively a different representation of the same information).
Here, you can see the full editor - click on the image and it will open up a full-sized screenshot in a new browser window.

At the bottom, you can see the piano-roll representation but above it, you can see the channels with their use - effectively a piano roll of piano rolls.
Each MIDI file can have 16 channels and they can be patched through to any instrument the MIDI card is capable of producing. In this case, channel 1 is patched through (mapped) to the 'String Ensemble 1' voice. On that channel, the piano role produces the notes that that voice produces. Channel 2 is mapped to a different sound and so on, so, it is like having up to 16 organs of which 1 (normally channel 10 although sometimes channel 16) plays the drums. Clearly, a snare drum is not capable of having dozens of distinctly different notes (to the untrained ear) played on it so with the drum channel, each note plays a different instrument or one in a different way such as a hi-hat being tapped closed, open, closing and so on.
In addition, you can have a number of ports addressed from each MIDI file and as each port has another 16 channels, you can have many instruments being played by one MIDI file.

To make your MIDI files sound right, you have to be able to edit them. An editor like this might be considered as overkill unless you are doing a lot of editing but many MIDI players will allow you to change patch settings.

HelpDesk Extra - HTML coding

Basics

HTML (Hyper-Text Mark-up Language) is based on SGML and has some very simple concepts at its core - this allows you to write your own HTML without having to rely upon bloated packages that are really designed so that any noddy can spurt out dozens of low-content web pages very easily.

  • Firstly, it is all text-based so you can take a page and edit it in your favourite text editor.
  • Finally, it has very-easy-to-understand-and-use concepts and structure.

The concepts are that the information goes on the page as plain text and that this text can be formatted or positioned and have other visual and logical elements in with it by the use of tags, each of which start with a '<' and end with a '>'.

Overall Layout

HTML, like many other file types starts off with some information about what it is and being HTML, it uses tags. The document itself has two sections - a head and a body. The head tells the browser what the document is about, such as its title, and the body has all of the information in it that you need to convey in the document.

Note that with only a few exceptions, all tags start formatting a piece of text and have a corresponding finishing tag - exceptions are usually where something happens at a point rather than over a piece of text. The opening tag has the tag name and any attributes and the closing tag has the tag name preceded with a slash.

So, for a HTML file that is called 'My first web page' and has the content 'Hello World', you would write something along the lines of this...

<html>
  <head>
    <title>
      My first web page
    </title>
  </head>
  <body>
    Hello World
  </body>
</html>

You can see that these tags are nested (within one pair of tags, you can have another pair that start but they must also finish before leaving the tags they are nested within). The whole document is within the <html> </html> tag pair. Next is the 'head' tag pair within which is the title tag pair. Each level of tags closes before the one it is within closes.

Also worthy of note is that new lines are not needed - they are ignored as are multiple spaces. In addition to this, it doesn't matter what platform you wrote the text file on as long as it is encoded in ASCII (so EBCDIC is out unless you convert it first). Line ends from different platforms (UNIX (0a), Mac (0d), Windows (0d0a)) are all treated the same regardless of which platform the browser is running on - they are all ignored. In effect, the following line will render in exactly the same way as the lines above (copy them into a text file and try it out - just save your text file as something.html and load it into your browser).

<html><head><title>My first web
page</title></head><body>Hello
World</body></html>

In addition to the title, the head can also carry a special tag that tells the browser to load another page after a certain delay. If you have an image that needs to be uploaded regularly, there is nothing stopping you from reloading the same page (if it is small). That tag in context looks like this...

<html>
  <head>
    <title>
      Reloading page
    </title>
    <meta http-equiv="refresh" content="10;
    url=some_other_page.html">
</head>
...

Which will load this other page after ten seconds. Note that you cannot use spaces in the URL so use %20 if you have a space or use proper file names for your web pages.

The body tag takes some attributes bgcolor=colour, text=colour, link=colour, vlink=colour, alink=colour where 'colour' is either the name of a colour such as 'red' or 'blue' or is a hexadecimal value for example:

<body bgcolor="#cceecc">

which will give a pale green - the colours are #RRGGBB where RR is the red colour with a value from 00 to FF (note that you need leading zeros) and similar for GG and BB.

You can also have a background image by specifying its URL. Note that you should also specify a similar colour so that your text is still legible if your background image is a long time loading or fails to load for some reason.

<body bgcolor="#cceecc"
background="images/pianopaper.gif">

Paragraphs and breaks

The body text can go on a long way but as newlines and multiple spaces are all treated as though they were spaces, there is no way of breaking up a long document unless you use the paragraph tag <p> or the break tag <br>.

Both of these can exist on their own but the paragraph tag us usually used as a tag pair in the form <p>some text.</p>.

Break

The break tag can carry information about how it breaks up the text. If, for instance, you had an image (see below) and you needed a clear left margin for your text, you can add an attribute to the tag so that your next line of text is clear on the left <br clear="left"> this can also be "right" and "all"
eg.

<br clear="all">

Paragraph

The paragraph also takes attributes, allowing for alignment (align="left", "right", "center" and "justify" although the latter only has limited support and also makes text harder to read.
eg

<p align="center">

There is also a <center> tag which aligns text in the centre and so on. If you have an area of text such as a page, table cell (see below) or some other block that is right justified and you want to justify a paragraph, you can use the <center> tag

Headings

You can also format text to form headings and these can be centred if you want. They go from 1 to 6 in the form <h1> and so on.

Heading 1

Heading 2

Heading 3 centred

Heading 4 right justified

Heading 5
Heading 6

Horizontal ruled line

To break up the text with a horizontal ruled line, you use the <hr> tag. You can specify how wide it has to be, whether it has a shadow, what colour and so on.

<hr align="right" size=8 width="50%"
color="#8080d0" noshade>

and it looks like this

Blockquote

Finally, you can indent blocks of text so that they stand out from the surrounding text by being indented on the left and the right. This is done using the <blockquote> tag pair.

This text is in a block quote

and this text is indented again using a nested blockquote

Lists

The two most common list types are those with numbers (ordered lists having the <ol> tag) and those with bullet points (un-numbered lists with the tag <ul>). Each list item in a list starts off with an <li> tag although it is optional as to whether you want to finish each list item with a </li> tag as there are only two other things that are going to come after it if you don't and they are the next list item or the end of the list tag. List items are nested sequentially within the list type tags thus...

<ul>
  <li>first thing</li>
  <li>next thing worth mentioning</li>
  <li>and the next</li>
  <li>and so on</li>
  <li>last thing</li>
</ul>

which end up looking like this...

  • first thing
  • next thing worth mentioning
  • and the next
  • and so on
  • last thing

You can nest lists like so

<ul>
  <li>first thing</li>
  <li>next thing worth mentioning</li>
  <li>introduce this other list
    <ul>
      <li>first thing in the new list</li>
      <li>next thing worth mentioning</li>
      <li>and the next</li>
      <li>last thing</li>
    </ul>
    some more text
  </li>
  <li>last thing</li>
</ul>

which renders like this

  • first thing
  • next thing worth mentioning
  • introduce this other list
    • first thing in the new list
    • next thing worth mentioning
    • and the next
    • last thing
    some more text
  • and so on
  • last thing

The numbered list (with the <ol> tag instead of the <ul> tag) looks like this...

  1. first thing
  2. and so on
  3. and again

Tables

Tables allow you to split up the page in a logical way so that text can be set into tables. However, you can use tables for other things as well.

A table starts off with the table tag and then each table row is defined with table data elements. The header cells of the table can have a special 'table header' tag which changes the representation of the text like so

<table border="1">
  <tr>
    <th>IP address</th>
    <th>Machine<br>name</th>
  </tr>
  <tr>
    <td>10.0.21.15</td>
    <td>Titanium</td>
  </tr>
  <tr>
    <td>10.0.21.103</td>
    <td>Vanadium</td>
  </tr>
  <tr>
    <td>10.0.21.195</td>
    <td>Bismuth</td>
  </tr>
</table>

which looks like this...

IP address Machine
name
10.0.21.15 Titanium
10.0.21.103 Vanadium
10.0.21.195 Bismuth

You can apply various alignment attributes such as.

  • align="left" ("right", "center")
  • valign="top" ("middle", "bottom")

along with colour attributes for bgcolor="#ef00ad" and background images in the same way as with paragraphs, pages and so on. These attributes can be applied to the whole table, to rows or individual cells.

If you wanted a cell to cover two rows or columns, you use colspan="2" or rowspan="2" or whatever you need. In this way, you can have generalised headers or cells that make up all manner or patterns like so...

1,1 1,2
2,1 2,2 2,3 2,4
3,1 3,2 3,3
4,1 4,3 4,4
5,1 5,3

You can also specify:

  • cellpadding="0" which is the number of pixels between the contents of the cell and the edge of the cell;
  • cellspacing="0" which is the number of pixels between neighbouring cells; and,
  • border="0" which is how wide the border is in pixels.

Additionally, you can specify the colour of the borders and much more than we have space for here.

Links

you can link a block of text to another document or even a part of the same document using the anchor tag. As this specifies a block of text, it has a beginning and end tag. It works entirely off its attributes, that is to say that without them it is useless.

To link a piece of text to another document, you would use the following...

<a href="some_document.html">click here</a>

If you wanted to link to somewhere within the same document, you need to have a place to link to as well as a way of linking from somewhere.

The place you want to link to looks like this...

<a name="halfway">Halfway through the page</a>

and the way of linking a piece of text to it (from the same page) is as follows

<a href="#halfway">click here</a>

You can link to a specific part of the page in the same way from another page or even a page on a different server by including the relative URI or the whole URL as required like so...

<a href="otherpage.html#halfway">click here</a>

or

<a href="http://www.some.domain.tld/otherpage.html#halfway">click here</a>

Images

Words can only carry so much information so images are a good idea. They are separate entities in their own right so have to be loaded from a URL which, like href in links above, can be relative or absolute. As they appear anchored to one point in the document, the have no closing tag as they do not enclose a block of text. Like anchor tags they are all powered through their attributes and they have the usual set although the img tag uses a source (src) tag instead of href.

<img src="images/some_image.gif"
hspace="2" vspace="2"
height="215" width="320"
align="right" border="0">

Note that images occupy space on the browser and some browsers will not display anything on the page unless it knows how to lay it out. If you do not specify the height and width of the image, the only way that it can find out how big it is going to be is by starting to load it and if there are many images as there are some times, this can be after a long wait.

The hspace and vspace are the horizontal and vertical spaces around the image in both directions measured in pixels. This is so that you don't end up with text running up to the edge of the image. This can be left at zero if you are using a table to position images to make a bigger picture with, say, clickable links on it.

You can also use images as hypertext links by putting them between anchor tags (<a>) but unless specified otherwise, the border usually becomes "2" so if you want borderless image links, use border="0".

Special Characters

There are a number of special characters. We need a way of expressing line breaks as these are ignored by the browser and we have already seen that this is accomplished using the <br> and <p> tags. However, we do need to be able to define multiple spaces, greater than and less than signs along with a number of others. Many have a special, easy to remember code but where there is no code, the ASCII code can be used.

Easy to remember codes are:

No-Break SPace   &nbsp;
Less Than < &lt;
Greater Than > &gt;
AMPersand & &amp;

If you want something that is not in the full list (see the w3c documentation for the full list) then you can use the ASCII code as follows.

&#151; for an 'm' dash. You can use the ASCII codes for those that have got easy to remember names but beware that not all fonts have every character that you have in the font version that you are using (possibly the Euro sign as an example).

Back to PC Plus Archive Index Page