2/24/09

Secure Forms Part 1, Install GPG

This is part one of a series of tutorials demonstrating how to setup a secure online form for your website. We will be using the GNU Privacy Guard (GPG or GnuPG) to encrypt and decrypt the messages for us. GPG is a complete and free implementation of the OpenPGP standard. Today we will look at how to setup GPG on our personal computer.

We must have GPG installed locally to decrypt the messages that we’ll be receiving from our online form. We’ll also need a mail reader that can work with GPG, but we’ll cover that in a future lesson. Finally, although I personally use Linux, I’m going to be showing you how to set this up on a Windows XP machine.

First, we need to download GPG. The exact file we need is called gnupg-w32cli-1.4.9.exe and can be found at ftp://ftp.gnupg.org/gcrypt/binary/

Once it’s finished downloading, we’ll go ahead and install it. First, we’ll choose a language.

Then we’ll start the installation by clicking Next.

To continue with the installation, we have to agree to the GNU General Public License.

I don’t need support for languages other than English, so I’ve unchecked the NLS option. If you need support for other languages, leave the NLS option checked. I’ve left the Tools and Documentation options checked.

I’ll be installing GPG to it’s default location. While you are free to change this, be warned that you’ll have to modify some of the instructions later on if you choose a different location.

Next it will ask us to choose our preferred start menu folder for GPG. I accepted the default start menu folder, but feel free to change this if you’d like. Then click Install. When the installation is complete, click Next. Then choose whether on not you want to view the README file, and click Finish.

Now that we have GPG installed, we need to let Windows know where it’s stored so that other programs (such as Thuderbird) can access it. To do that, we’ll open the Start Menu, right-click on My Computer, and choose Properties. Under the Advanced tab, choose Environment Variables near the bottom.

In the System Variables section, locate the Path variable. Click it once, and choose Edit.

At the end of Variable value, add “;C:\Program Files\GNU\GnuPG” and click OK. A few notes on this step. First, the semi-colon at the begining is not a typo. You’ll need it there. Second, make sure you don’t leave a trailing space at the end of the line. Finally, if you decided to install GPG somewhere other than the default location, you will need to enter the path to the location you specified. However, if you used the default location (as I did in the example) you should be fine following my instructions to the letter.

Click OK on the Environmental Variables window, and then OK in the System Properties window. We should now be ready to use GPG. Just to make sure, we’ll run a quick little test. GPG is a command line program, so click the Start button and choose Run… Then type cmd and hit Enter. Now we should be ready to run some commands. To check what version of GPG is installed (and to make sure that it installed properly) type gpg –version and hit enter. You should see something like this:

Alright, that’s it for this lesson. In Secure Forms - Part 2 we’ll start learning how to actually use the program.

If you found this tutorial useful, or if you have any questions about this subject, please leave a comment below.

Posted in Security | No Comments »

2/16/09

Outline: the Ignored CSS Property

Outline is a seldom used and often misunderstood CSS property. An outline is a line that is drawn around an element outside of it’s border. By definition, it takes up no space. Sounds impossible, right? In reality, it does take up space (you can see it!) however, that space is not added to the width of the element like a border would be.

Most often, the outline is used to highlight an active link. By default this is a small dotted line that encapsulates the link. To be honest, as a designer I have often found the outline to be a bit ugly. There are some designers who hide the outline entirely (I used to be one of them). However, in Firefox, Internet Explorer and Chrome you can navigate the web using only the keyboard by tabbing through the links on each page. Each link is highlighted by an outline when you reach it. You can hit enter to follow the link. Hiding the outline entirely takes that feature away from users who prefer to use their keyboards. So to prevent the ugly outline while still retaining keyboard navigation we can style the outline using CSS.

This solution is not perfect, due to the lack of support by Internet Explorer (as of version 7). While Internet Explorer uses an outline to highlight links, it does not support styling it will CSS. Firefox, Safari, Opera and Chrome on the other hand, do allow you to specify your own styles.

The outline can be styled with the following properties:

• outline-color
• outline-style
• outline-width
• outline

Outline-color behaves like any other color declaration and also supports the value “invert” which performs a color inversion of the pixels on the screen. This is the default behavior and ensures that the outline will stand out from the background. Outline color can be set like this:

a{outline-color: white;}

Outline-style has the same possible values as the more common property border-style and is set like this:

a{outline-style: dashed;}

Outline-width can be set to thin, medium, thick, or can be specified with a length such as 3px.

a{outline-width: 1px;}

Finally, outline is a shorthand property for setting the previous three properties all at once. For example:

outline{2px solid red}

Keep in mind an outline is the same all sides. Unlike border, you cannot specify a style for only one side of an outline. To play around with the outline property, visit http://www.w3schools.com/CSS/tryit.asp?filename=trycss_outline

For even more information:

• Don’t remove the outline from links - arjaneising.nl
• Removing the dotted line - csstricks.com
• The outline CSS property - sitepoint.com

Posted in CSS | 3 Comments »

Introductions

As you probably already know, my name is Alex Mansfield and I’m a web designer and developer from Bremerton, Washington. I’ve been creating websites for quite a few years now, but I spent this past year intensively studying the methods within the madness of this field. And while there is no end to learning, I think its about time I started to share what I’ve learned with others who are attempting to do the same.

Posted in News | No Comments »