Sephy’s Platzish

For the Tuesday Think Tank this week, I’m departing slightly from the planned HTML topic to talk about something that can help you diversify your searching - the Firefox Search Bar.

It is that thing that you always see at the upper right of your window in Firefox (usually next to the address bar on the Navigation Toolbar). In previous versions of Firefox, you could hide the bar and a popup would appear, but they changed that in Firefox 2.0.

In fact, There was a time when I was against upgrading my browser, because of it not allowing the popup. However, soon after posting that, I installed the new version and have come to love the redesigned search box. It is actually one of the most powerful tools that come with Firefox now, in my opinion.

One of the coolest features is the ability to add as many search engines as you want to it. As it stands right now, these are the search engines in my search bar -

Most of these engines have been added when I’ve visited various sites, and for the most part, I’ve kept it fairly stable with what is in there; in fact, most of the additions to the bar have been made over the last couple of days.

How do I add a search?

It’s fairly simple to add a search to the search bar. There are a couple of ways to do it.

Directly Adding at a search site

The first, and most common, way is to go to, say, Technorati - and take a look at the upper right of your browser window. It’ll look something like this -

Click on the blue box, and your list of search options will pop up, with something added to the bottom -

Click on Add “Technorati Search”, and Firefox adds it to your list of engines and selects it -

Adding Search Engines via Mycroft Project

You’ll probably have noticed by now the last item in the menu for search engines - Manage Search Engines. When you select that, a quite powerful window is brought up.

Here, you can move the search engines in your list around, delete search engines, and gain quick access to the Mycroft Project. All you need to do is click on Get more search engines… and you will be taken to Firefox’s main Search Engine add-on page.

At the bottom of the page, there is a link to Browse through more search engines at mycroft.mozilla.org - simply click on that link, and you’ll be taken there. Now, you can search for your favorite site. For example, if I wanted to find a plugin for Dogpile (a site which doesn’t automatically pop up the blue box), I’d search for it and be sent to a result page.

When at the result page, click on the version of the search engine you’re looking for and a window will pop up verifying that you want to install that search engine.

Click Start using it right away if you want it to be your search engine of choice right away, or else you can just install it and switch to it later.

How do I change the Search Engine I use?

That’s a simple process. Just know that when you change the search engine in the upper right, you change the engine that you use when you do a right-click search. For example, with Technorati as the default search, I can search for words I come across on a website by selecting them and right clicking, which will bring up this menu (which I will add is quite a bit longer than most right-click menus ) -

To change the search engine that you use for both types of searches, it’s as simple as going back up to the upper right and clicking on the icon of the current search (the same place that you click when it turned blue), and select your new search engine.

Using the search bar

To use the search bar, you can do one of three things - first, click on the bar and type your search in. If you prefer to use the keyboard, you have two shortcuts - Ctrl+E and Ctrl+K, both of which focus to the search bar. Type your search in and hit enter or click on the magnifying glass. A new tab will open up for you which will have your search in it.

Over to you

Taking advantage of the phenomenal tool is quite simple. If you haven’t tried it out yet, give it a go, and let me know what you think in the comments.

Also, as always, Snoskred and I are open to suggestions for future topics to be covered in a Tech Tuesday Think Tank. If you have something you’d like to be explained, feel free to drop a line via the Contact form.

Continuing the HTML series, this week we take a look at fonts. Longtime readers will remember that I touched on this subject previously, but I want to take some time to go more in depth on this, and show you some neat features about fonts, and also a list of fonts that look good, fonts that are common and fonts that you should just avoid.

Fonts in HTML

In the early days, the only font you ever saw on the web was Times New Roman (or simply Times). It was the default font everyone used in their browsers (unless you knew how to change it), and most pages didn’t declare what font they wanted the page to be printed in.

However, it wasn’t too long before you started seeing pages having a variety of fonts used; the most common being the Helvetica family, most commonly reproduced as Arial in Microsoft products, as the license wasn’t acquired by MS for the use of the real font.

When Windows 95 and 98 came along, so did a whole new set of fonts - Microsoft’s own TrueType creations including some more common fonts that you still see to this day - Georgia, Tahoma, Verdana and everybody’s favorite Comic Sans MS.

Now, it could almost be classed as a free-for-all when it comes to fonts. I’ve seen pretty much any font you can imagine out there, and there are definitely fonts that, in my opinion, look absolutely brilliant on a webpage, some that are good all-rounders, and others that for the want of a better term, are just plan crap.

Using Fonts

First, however, a bit of a review on how to get fonts to change on your page.

In the “old” days (back when it was simple and there was only one way to make things appear, not 17 ), most of the controls for your fonts were based in the <font> tag. If you wanted to change the style, you’d put face=”font face”, changing the size would be through size=”{-7~+7}”. That was about it.

Now, everything you want to control about the font is found in the “style” attribute, placed in a <span> tag. Not only is this more concise, it’s a lot simpler, as you don’t have to use arbitrary numbers for the font size, and it’s all held in one tag. Overall, while it might seem more complex, it’s a lot better.

Font sizes

The most common thing that you’ll wind up doing with the font is change the size of the displayed font. There are a couple of ways that you can do this using the <span> tag. The first is the easiest, changing the percentage of the size. To make the font larger than the rest of the page, set the size to greater than 100% and vice versa. For example, if you wanted this to appear as such -

1.5x larger, you would use this code:

<span style=”font-size:150%”>1.5x larger</span>

The other method is similar, but less used; it involves multiplying the display size by a number. It’s like taking the percentages used and dividing them by 100. As with the example before, here’s how you do it:

1.5x larger, use this code:

<span style=”font-size:1.5em”>1.5x larger</span>

Font color

There are times when you’ll also want to change the color of the displayed font, to maybe a red or a blue. Here’s how you do that:

For a lovely red font use -

<span style=”color:red”>For a lovely red font</span>

For blue

<span style=”color:blue”>For blue</span>

And, last but not least, if you want to use a custom color, and you know its numbers for red, blue, and green, you can use either of the following two combinations. The first is if you know the Hexadecimal numbers, the second if you know the 1-255 number.

<span style=”color:#aabbcc”>For the color matching Red: AA, Green: BB and Blue: CC</span>

<span style=”color:rgb(0,0,0)”>For the color black use this code; white would be rgb(255,255,255)</span>

If you want to see a set of 216 colors that are great for the web, you can check out the Visibone Color Guide

Bold, Italic, Underline and Strikethrough

These four are similar, yet somewhat different. There are a couple of ways to do each of these, and personally, I still prefer to use the “old” method as it’s easier to type for them.

Bold: choose one of the following - <b>Bold</b> or <strong>Bold</strong> or <span style=”font-weight:bold”>Bold</span>

Italic: choose one - <i>Italic</i> or <em>Italic</em> or <span style=”font-weight:italic”>Italic</span>

Underline: Pick from - <u>Underline</u> or <span style=”text-decoration:underline”>Underline</span>

Strikethrough: Select - <s>Strikethrough</s>, or <span style=”text-decoration:line-through”>Strikethrough&;/span>

Font Faces

Before I get into the discussion of the fonts you should and shouldn’t use, we need to put a font into the page. For this example, I’m going to use a simple font - Times New Roman, as I did above.

To get this use -

<span style=”font-family:times”>To get this</span>

The awesome thing about the font-family item is that if you don’t have the exact font that is looked for, your browser will find a compatible font you have on your system to substitute for it that looks simliar to the font asked for.

Fonts I Like

From here on out, this becomes opinion. Just sayin’

To me, there are a lot of fonts that are really good for webpages. In fact, there are a lot more fonts that I like than fonts that I don’t like. This is just a short list of the fonts that I like:

• Lucida Sans (that’s the default font on this blog, it’s an easily read font, and quite versatile)
• Times New Roman
• Georgia
• Tahoma
• Verdana
• Trebuchet MS
• Courier New - a shortcut to this text is <tt>the TT tag</tt>

And, now, the fonts that I don’t like particularly much:

• Comic Sans MS
• Impact
• SimSun (the default font for English text in a Chinese or Japanese encoded document)

However, just because I don’t like a font, that doesn’t mean I won’t use it - I’ve used SimSun for a form that was sent to scammers, mostly to annoy them.

Further Reading

In the companion post to this, Snoskred takes a look at the Horizontal Rule
W3 Schools: Font Tag
W3 Schools: Span Tag
What’s wrong with the Font tag
Beyond the FONT tag: Practical HTML text styling

Over to you

Take some time and experiment with using fonts on your blog and play around. Find fonts that you like; I believe you can even do some experimentation in the comment area, just use the <span style="(styling information)"> tag.

Over the next few weeks, Snoskred and I will be taking a look at some of the elements of HTML; as is customary, I’ll be looking at more advanced pieces of code - stuff you may or may not really need, and Snos will take a look at some of the essential pieces of HTML.

This week, I’m going to talk about tables. Tables were first introduced as an element only for Netscape browsers back in around 1994, with version 2.0 of their Navigator product. Not long after, they were added to the full HTML specification and implemented in other browsers over time.

To this day, they’re extremely useful for laying out a web page, however their usefulness has gone down with the growth of other tools, such as Cascading Style Sheets and XHTML. I’m going to show you a couple of things that you can do with tables, such as putting a caption on it, and also making it appear where you want it to appear.

First, we have to cover the code.

All tables must start with a <table> tag. This is what tells the browser that you’ve got a table here. Depending on whether you manually put HTML together or allow a program to do the coding for you (for example, the TinyMCE editor in WordPress), another piece of code may be added called <tbody>. The purpose of the TBODY tag is to designate the part of the table that is the body. If used in conjunction with the tags - <thead> and <tfoot> - for the header and footer respectively, you can create tables that, when printed, will have headers and footers on all pages.

The next important tag for a table is the <tr> tag, which says that this is the beginning of a row in the table. Within a row, you may have two types of cells - headers and regular cells. Headers use the code <th>table heading text</th> and regular cells use <td>table cell text</td>. At the end of each row, you need to “close” the row by using the </tr> tag.

At the end of the table, after you’ve closed the last row of it, you need to close the table, otherwise it will throw off the rest of the page you’re trying to write. To close the table, simply use the </table> code.

Formatting Tables

You can format a table to appear in just about any format you wish. One of the best things about HTML is that no matter the overall code you use, generally the attributes you assign for the element will be consistent. For example, if you want the table to be centered on the screen, then you just add this to the <table> tag -

align=”center”

if you want it on the right or left, then just change it to the one you wish.

However, there are some attributes which are specific to tables. The first of which is the border. Most of the time, when you have a table, you will want to have a border. Depending on the browser you’re using, it may not show the border, or you may get a border that is too big for what you want. To create the border, simply add this attribute to the <table> tag - border=”{size}” - replacing {size} with the number of pixels you want the border to be in width.

Another specialized attribute for tables is the cellpadding attribute. Put simply, cell-padding is used to create space around every cell in the table, which is quite useful when you may want to have your text more readable, or have an image which has things you want to see that are right on the border of the image. Again, to set the cell padding, simply put this into the <table> tag - cellpadding=”{size}”

A similar property to the cellpadding is cellspacing. This attribute tells the browser how much space to put between each individual cell while leaving the actual borders in place. The padding in the border area will appear the best if you don’t have the border set to zero. You can see an example of this below. To use the cellspacing attribute, put this into the <table> tag - cellspacing=”{size}”

You may wish to put a caption onto a table, such as “Figure 1-4. Text tools of alignment for HTML code”. In HTML, the way to put a caption on a table is not much different to how you put a title on a page. You need to put a separate tag into the table’s code for it to appear. Here is what the beginning of a table’s code would look like with a caption (and I’m setting it to show at the bottom):

<table>
<caption align=”bottom”>This is your caption.</caption>
<tr> et cetera

Some examples

I bet y’all are wanting to see some examples now, aren’t ya?

If you want to see the underlying code from the table, simply select it and view selection source if you are in Firefox.

OK, here’s the first example - centred, with 10 pixel cell padding and no border:

Heading 1	Heading 2
First	Row
Second	Row

Example 2: Aligned to the right, 5 pixel border, 10 pixel cell spacing:

Example 3: Left-aligned, 5 pixel border, 5 pixel spacing and padding, caption, and a background color:

Further reading

Just a note - there might not be a companion post to this as Snoskred hasn’t been feeling well for the last few days, and hasn’t had the energy to focus on writing.
W3 Schools: HTML <table> tag
W3 Schools: HTML <tbody> tag
HTML Help: TABLE - Table

Over to you

Take some time to experiment with this code if you wish. If you come up with something cool in a table, drop me a link in the comments

As always, we’re open for suggestions for future Tuesdays; if you have one, drop me a line via the contact form.

Previously in the Tuesday Think Tank

21st August: RSS
14 Reasons Readers Unsubscribe From Your Blog
Tuesday Think Tank: All About RSS

28th August: Blog Templates
Blog Design - Open Your Eyes.
Demystifying Blogger Template Editing

4th September: Nofollow
Spam, Spiders And Do Follow, Oh My!
Say No! to Nofollow

11th September: Site Meters
Do NOT Rely On Your Site Meter.
Track Your Visitors with Google Analytics

18th September: Technorati
Technorati - Sending Out An SOS
The Ups (and Downs) of Technorati

25th September: Google Reader
Google Reader Can Make Your Life Easier - Here’s How.
Improving your Google Reader Experience

2nd October: HTML
Basic HTML for Bloggers.
Some HTML Tips & Tricks

9th October: Time Management
Time Management - Tuesday Think Tank
Use Google Calendar to organize your life

16th October: One last Blogger Thing
Move your Blogspot blog to your own Domain with ease

23rd October: Skype
All About Skype - Tech Tuesday
Skype - A phenomenal tool for communication

30th October: Image Hosting/Blog Stats
The Truth About Blog Stats Revealed
Host Images online for free? Yes, you can!

Yesterday, I noticed a comment on Snoskred’s blog from River, who was asking about how she could get her photos on the web for everyone to see. Having been in a similar position (and not wanting to use the space that I was given by my ISP for obvious reasons), I am aware of the various free image hosts that are out there.

Of course, it doesn’t hurt that I am aware of some others thanks to certain sites which I will not disclose for other obvious reasons.

So, I’ll show you four of the more common free image hosts out there, and give you some tips on how to make your images “ready” for the web.

Free Image Hosts

There are, surprisingly, quite a few free hosts out there - some of them require you to register an account, but I’ve found that it’s quite common for them to allow you to upload images without registering.

ImageShack

The host that I personally have the most experience with is ImageShack. They allow you to upload images and, more recently, video, for free and without registering. They allow you to upload images that are up to 1.5 megabytes in size (that’s about the same size as an unedited picture from a 3-megapixel camera in high quality).

You also have the option of allowing them to resize the image for you, however, I recommend that you do it on your own, because most of the time, these image resizers online will cause the image to not look that great. Also, if you do it on your own, you have control over the size of the image you want to use.

With ImageShack, all you will see when you go to their page is simply the upload box. To upload a picture, simply click on Browse and find the picture you want to upload. Now, I will warn you that I have spotted that there is an option to have it pop up a window with jobs from CareerBuilder - I’d recommend that you just turn that off since nobody likes popups anyway

When the image is uploaded, you’re presented with a set of options for displaying the image. The one I used most often was the direct link to image as I was displaying full images, and didn’t necessarily want to have the thumbnail showing. If you want to give the link to friends, or link to it from a site without the image appearing, then you’d use the “Show image to friends” address, second from the bottom.

Then, you can link to it like this - <a href=”{Show Image to Friends address}”>LINK TEXT</a>

While it’s not required that you register, there are a number of advantages you receive if you do register - the first of which is that you don’t need to write down all of the image links you’ve created. The images you’ve uploaded (including the ones you did prior to registering) are stored for you and can be retreived from the My Images panel. You can also mark images as public or private (note that even if you do mark it as private, you can still link to it at will).

Photobucket

If I had to guess, Photobucket would be the most popular free image host (either that or Webshots, which I will not cover here). However, I have absolutely no experience with the actual site, other than viewing photos and videos on it. The biggest reason is that they require you to register to upload pictures.

That being said, I have not heard a bad thing at all about them, so I would definitely still recommend them for hosting your photos.

jpghosting.com

This and the next host are two of the lesser-known free picture hosts out there, but their features are pretty good on their own right. jpghosting.com allows you to upload pictures without registering, but right now they aren’t allowing it (probably because of someone abusing the system).

pix . nofrag . com

While not many people know about it, pix . nofrag . com is probably the easiest free host to use. As you can see, when you go to their site, all you have is the image upload page, along with the terms of use. No bells, no whistles, nothing asking you to register or sign in. Like ImageShack, image uploading is the same - browse to the picture and click Upload. This will bring you to a page like this -

- where you are given options for showing the picture in various ways, but a critique of their service would be that they don’t offer proper HTML links, rather only links for forums. If you’re comfortable with converting Forum code to HTML, then definitely use this service. Otherwise, you will be much better served by using ImageShack or Photobucket.

This is, by no means, an exhaustive list of all the free image hosting solutions out there. If you search for free image host, you’ll find hundreds of thousands of sites with the service.

Optimizing Images for the Web

However, there is an important thing to know about all of these services - they’re not big on images that are viewed by tons of people every day. For that reason, it is important that you optimize your images for uploading on the internet. An added side benefit is that folks who want to view your images will be appreciative of your efforts to ensure that they have a quick loading image.

Here are some quick tips to make your image good for the web:

Resize

If you have a camera that has come out in the last few years and takes pictures at a size of 3 or 4 megapixels, then you are probably aware of the fact that the images don’t usually fit full-size on your monitor (even if you have a widescreen monitor, I might add )

As a general rule, if you are posting an image to be seen full-size on a website or blog, it should be no wider than about 650 or 700 pixels. If it is any wider, then you start to have the issues with scroll bars appearing at the bottom of the screen.

Depending on the program that you use, the method for resizing images will vary from one program to another. Personally, I use Paint Shop Pro 8 (I’ve linked to a review since it is well out of date now), and you have the option of resizing by exact pixels, or by percentage. There are also a number of options for how the image is resized. I generally stick to Smart Size, but play around with it and find the one you like

If you are uploading images that you will link to with either a thumbnail or a text link, then you can get away with resizing it to around 1024×768. I use that setting for the pictures I post on the weeks in walks. Most of the free image hosts will automatically resize photos which are too big for your monitor to fit, thus removing most of the scrolling issues; you can view the full size image usually by clicking on the picture.

Optimize

If you’re using a decent picture editor, you will have the option of optimizing the file size of the image you create. This is something that you need to do, especially when uploading images to the web. I’ve become quite finnicky about the size of images since I’ve moved to a self-hosting option, as I am aware that there is limited bandwidth available.

My goals are, for the week in walks posts, to keep the image size between 100 and 200 kb. I know I can get away with the images being that size because I upload them and then post as thumbnails. However, when I want to display an image full-size, then my goal is to keep the file size around 50 kilobytes.

Now, there is a definite trade-off in quality when you start to do this optimization - the images will start to pick up “artifacts” if you are working in JPEG format, or if you are working in other formats, you may start to lose colors.

For example, I’ve taken this image, cropped it from my camera’s original size down to 1600×1200 and saved it at compression level 15; yes, I’m breaking a rule here :). Paint Shop Pro has 99 levels of compression to choose from, and the image size gets smaller as you go up the scale. Here are a few examples of the file size (with “Exif data” turned off - on this picture, that would add around 60kb of data to the photo), along with the time that it would take to load on a dial-up connection -

Compression Level	File Size (bytes)	Time to load (seconds)
1	1,305,142	233
5	640,415	114
10	401,433	72
15	302,576	54
20	247,073	44
30	126,983	23
40	74,548	13
50	57,948	10
60	49,315	8.8
70	44,113	7.9
75	42,134	7.5
80	40,353	7.2
85	38,741	6.9
90	37,160	6.6
99	34,676	6.2

As you can see, as you go up in the compression levels, there isn’t much of a saving of file size, at the great cost of quality. Have you ever seen an image in compression level 99? If not, you may want to cover your eyes. This is the same exact picture as is above, just a bit more…compressed.

I think the highest compression I’ve ever used on an image that wasn’t purposely for confusing scammers was around a 35 or 40; the drop-off in quality beyond there, for what is really little savings in the way of size, isn’t worth it.

Crop

Sometimes, there isn’t a point to resizing a complete image when all you may want is just the picture of the airplane in the middle. In that case, you can crop the picture to the size you want. One of the cool things about Paint Shop Pro is that you can give it a size and force it to keep the image at that aspect ratio; I’ve used this quite a bit, including when I was making the header images for this site.

All in all, to get images that look good and are of good size, it’s usually a case of trial and error. In the past, if the first resize to 1/2 image size doesn’t work, I’ll use different values, and some trickery to reduce the size, without sacrificing quality.

Further Reading

This week, we have another split subject; while I’m looking at image hosting, Snoskred revisits blog stats, and compares stat counters to server stats - The Truth About Blog Stats Revealed - Tech Tuesday. I’ve had the server stats activated on here, and I have to say that the difference between the counters and the server logs is stunning!

Previously in the Tuesday Think Tank

21st August: RSS
14 Reasons Readers Unsubscribe From Your Blog
Tuesday Think Tank: All About RSS

28th August: Blog Templates
Blog Design - Open Your Eyes.
Demystifying Blogger Template Editing

4th September: Nofollow
Spam, Spiders And Do Follow, Oh My!
Say No! to Nofollow

11th September: Site Meters
Do NOT Rely On Your Site Meter.
Track Your Visitors with Google Analytics

18th September: Technorati
Technorati - Sending Out An SOS
The Ups (and Downs) of Technorati

25th September: Google Reader
Google Reader Can Make Your Life Easier - Here’s How.
Improving your Google Reader Experience

2nd October: HTML
Basic HTML for Bloggers.
Some HTML Tips & Tricks

9th October: Time Management
Time Management - Tuesday Think Tank
Use Google Calendar to organize your life

16th October: One last Blogger Thing
Move your Blogspot blog to your own Domain with ease

23rd October: Skype
All About Skype - Tech Tuesday
Skype - A phenomenal tool for communication

Over to you

Do you use a different image host to the ones I have listed above? What do you think about their services?

In case you’re wondering, I know I didn’t mention Flickr. That is a great service for hosting pictures as well, however that’s almost another post in itself. Another issue I have is that they convert everything to JPEG format - when I was making the US Blogs image, this conversion actually increased the size of the file by some ten times!

One of the most popular instant messaging systems over the last couple of years has been Skype. In fact, it became so popular that eBay purchased them last year trying to get in on the ground floor of this product which was revolutionising internet communications.

I hadn’t heard of the program until 2005 when I got heavily involved in the scam baiting community and signed up for an account (it would be a couple of more months before I would get into the business of calling scammers, but that’s a subject for another day ). Part of what makes Skype so great is that it is really simple to use - provided you know a bit about the folks you want to reach out and contact.

What I’ll be showing you today is how to get yourself set up with an account, find a friend to chat with, and tweak the privacy settings so that you don’t get random people calling you and sending you chat messages at all hours of the night. I’ll also show you the basics of setting up a group chat and a conference call.

Screenshots used here are from version 3.0.something, which is not the latest version, so your screens may be quite different to mine.

But I don’t have Skype

Not a problem at all. If you’ve never used Skype before and don’t have their software, you can download it from Skype’s website. You can also take a mini screenshot tour of the program there.

When you download the program, it will save as just SkypeSetup.exe; I’m a pedant, however, and have all of my skype downloads labelled by version number. Please don’t ask why. I don’t know. I just think that calling your download a generic name with no version number on the end is a bit shortsighted, but who am I to whinge about it?

Anyway, when it’s finished downloading (which may take a while since it’s around 20MB for the program), you can install it. It has been a while since I’ve done an install that I’m not sure what all they install now with the program. Make sure that you check out the Options section, which is hidden away in the bottom left of the install dialog box, and uncheck things like Google Toolbar and Skype extras, unless you really want to use them.

The Extras functions are mostly useless because you have to buy almost everything on the screen there, except for maybe backgammon and Chinese checkers. Anyway, if you want to play games online with your friends, might I recommend Yahoo games, or some other place.

As always, be sure to read the End User License Agreement and Privacy Policy, and then click install to run through the process.

Where do I sign up?

You don’t sign up for Skype until the first time you start the program. When you start it up, you will be presented with this screen; to sign up for a new account, simply click on the Don’t have a Skype Name? link below the Skype Name line:

That will bring up the Create a new Skype Account dialog. You can enter anything in the Full Name field - if you choose to use that, your friends will see that instead of your username; if you put nothing there, they’ll just see your Skype Name, which is the next field, followed by the password twice and another chance to read the EULA, TOS and the Privacy Statement. Note: your Skype Name must start with a letter

Click Next to continue to the second part of signup - your email address. There is a bit of an interesting bug with this one that I have found. If you have a number in your email address, it will not accept it and keep the Sign In button blank. You can use any other punctuation, but numbers are, for some strange reason, not allowed. You can enter your location if you wish, and use the other pre-checked items if you would like as well. Then click Sign In to finish.

If someone has already signed up with the Skype Name you wanted, you will be presented a series of options to use in place of your original, or simply put in a different name.

That’s all you need to do to sign up for a Skype account. There’s a little tutorial about how to use the software - you can have a look through of that right away.

I want to Phone-A-Friend

Well, we could go straight into finding your friends and calling them, but first let’s make sure that our microphone settings are right.

What? You don’t have a microphone - do yourself and your friends you call a big favor - get a headset; I use the Plantronics .Audio 350 Ultimate Performance Headset - it’s a really good headset and one that goes over the ear. It’s also good for listening to music or a video, and generally is loud enough even when it’s at the minimum volume. I just found this out - if you buy it directly from Skype, it’s only $21.99 (plus $9 shipping)

I also really like models like the Logitech Internet Chat Headset which is a behind the ears version; I’d still be using it, but nobody could hear me when I did . However, I will, from time to time, still plug it in if I want to take advantage of the longer cord that it has.

Now that you have a headset (or are using a microphone with the intention of getting a headset), the next thing you will want to do is verify that your settings are correct. Skype make this really easy by giving you a friend to play with from the get go. In fact, the first time you sign into Skype, this is what the screen looks like -

To test out your audio settings, simply double click on Skype Test Call, and you’ll be connected to the Automated service, which will ask you to do a sample of talking and then play it back to you. If you hear it, you’re good, if not, change your settings and try again.

Never fear though, if your settings don’t work or you don’t have the necessary equipment for calls, you can still use the chat function of Skype. There’ll be more on that later. However, now, you’ve probably figured out what I’m going to say to do next - add a friend to your Skype. To get started, simply click on either the Add Contact or Search for Skype Users buttons in the Contacts tab.

Both options do the same thing - find you Skype users, but one is more advanced than the other. The Add a Contact option will bring up this window, where you can search by Skype Name, Full name or email address only.

If you Search for Skype Users, you can search using the options from the Add Contact dialog, or you can search by location, age, sex, and/or language. You can also search for only people who are wanting to be contacted by anyone checking the Search for people who are in ‘Skype Me’ mode.

When you put a name into the field, you are presented with a number of results (if you’ve put in a common name, there is a limit of anywhere between 30 and 200 results; it doesn’t seem to have any consistency at all). Then you can scroll through until you find someone who might match the person you’re looking for (in this case, I’m just looking for my main Skype profile since I am using a fresh account for this tutorial).

You can view anyone’s public profile by clicking on the little blue i which appears after you select a row from the results. This is what my profile looks like; the numbers are in Barbados and no, I’m obviously not on Christmas Island.

If you want to add the person as a contact, then you just click on the Add Contact button on the bottom. Now, you will have an opportunity to send that person a message. Here’s a tip - don’t leave the default message in there. Put something in that will let the person have an idea of who you are, and possibly how you came upon their contact.

The recipient will receive something that looks like this. I’m using this example because it says the same thing that the message above does, just in German. I don’t know this person, so I’ll either send them a message asking who they are, or just decline their request out of hand.

In this shot, I’ve expanded the extra options - the bottom 4 bits about sharing contact details and adding the person to your contacts. Generally, if you know the person, you’ll simply add them to your contact list and share your details.

Now, you should be able to talk to this person both by voice and by text.

So, how do I do that?

If you are using the default settings for the software, then when you double click one of your contacts, it will call them. Generally, this is frowned upon since your friend might not be ready for a call, or they might not want to talk. One of the first things that I changes was the option for double-clicking. You can find that under Tools -> Options -> General. To change it to bring up a chat window whenever you double click, simply change the option there.

Otherwise, if you leave it on calling for the default, you can bring up a chat window by right clicking on the contact’s name and selecting Start Chat… You can also use the blue button when a contact is expanded.

When you start a chat, this is what the window looks like. I’ve sent a couple of messages across to show you what they look like in traditional mode. I’ll be honest - I don’t like all the big icons on the right side, so I just turn them off by going into Options -> View Participants -> Hidden. If I’m in a group chat, I’ll either use Compact or Hidden, depending on how many are in the chat.

One last little feature about Skype’s chats - there are a lot of emoticons, and I have to say that I love them; for a long time I had the animated icons off, but I now have them on. You definitely should experiment with them. Also, the ones in the list aren’t all of them; try this one once - (tmi), or if the person ticks you off royally, (finger)

I have an important project. Don’t bug me!

Ah yes, the old familiar problem. You’re trying to focus on that important article or job, and you’re getting requests left, right and centre to chat, and you can’t focus. You’d go offline, but you’re waiting for a collaborator to come online so you can work on the project. What are you to do?

Well, the most obvious thing would be to send an email to the collaborator and tell them you’re going off of Skype and to let you know when they’re around, then go offline on Skype. However, there is the Do Not Disturb mode on Skype.

When you’re in DND, all events are still sent to you, but you’ll only find out that there are new events waiting for you by seeing the little flag waving in the corner. Another option is to use the Invisible setting - you know, online, but telling people you’re offline.

These methods work great when it’s people who are on your contact list bugging you for stuff. However, when it’s total strangers contacting you, then you need to look at strengthening your privacy settings for Skype. You can find the Privacy Settings under Tools -> Options -> Privacy.

The default settings for privacy are to allow everyone call you and chat with you. I’m not sure why they do it that way, but this is another of those things that should be changed right away. You’ll also notice the line about chat history. If you would rather that your chats not be saved, or be cleared after a certain amount of time, you’re free to change that. You also have an option to allow your status to be seen on the web. This is handy for folks who want to display a Skype badge on their site with their current status on it.

Back to the privacy settings, here are my settings for privacy. I have a SkypeIn number, which is why that extra section shows up on my panel:

Let’s have a party!

So, you’ve got a few friends on Skype and you want to have a bit of a chat with them, but don’t want to resort to IRC or another chat program to do it. Luckily, you can do that in Skype. However, unlike IRC and similar programs, you only have control over who you add to the chat - anyone can add their friends to the group, and you can’t kick misbehaving people out of the room. However, trolling shouldn’t be a problem since people can’t join a group chat unless it is specifically started as a public chat.

There are a couple of ways to start a group chat. The first one is to select the people you want to chat with by control-clicking on each name, right clicking and selecting Start Chat… The method that I prefer to use is a simpler one - start a chat with one person, then drag other contacts from the main window into the chat window. The last option is to use the “Add” button in the chat window, which will bring up a dialog box with your contact list on the left and the chat participants on the right.

You can have up to 99 people in a group chat. However, it does tend to get quite hectic after around the first two dozen or so

To start a conference call, you can either select multiple participants and click the green button in the screen (it changes from a receiver to a group icon), or use the Conference Call button, which will appear when you have multiple contacts in your list. This is what it looks like; all the participants in this conference are toll-free numbers -

Simply select the contacts you wish to have in the conference call, and click the Add >> button at the bottom. Depending on the system you’re using, you can have up to 10 participants in the conference, including yourself. When you start the conference call (by clicking Start), the call window will come up and it will look like this, with the list of participants in your window. When someone speaks, their icon will start to glow in blue.

While in a conference call, people can be added to the call, but only by the host of the call. All you have to do is right click on a contact and select Add to Conference Call, and they will be connected to the call. If it’s a Skype contact, then the call is free (like all calls to other Skype contacts), if it is a SkypeOut number, then their standard rates (including a connection charge of 3.9¢) will apply.

Some Odds and Ends

One of the features that Skype has are called Notifications. These are little windows that pop up on your screen - generally in the lower right hand corner, but I have seen them on the lower left in the past - telling you that a person has sent you a chat message, or that someone is calling. I only have the notifications turned on for chat messages, and this is what a couple of notifications look like (the other one is for a call)

Also, yesterday, I spotted an interesting number in my Skype window, they always list the number of users online, which right now is 10,057,350. Yesterday, the number was this -

Further Reading

I’ve discussed Skype a couple of times before on here. The first was when they introduced the connection charge. They claimed that it would be “disruptive”. It was a complete step backward, if you ask me. In March, they ran a promotion called Skype Casino. I won something called a CrazyTalk Avatar. I’m still not sure how to use it…

These are the Official Skype Blogs. There are quite a few of them, including one where they list all the release notes, which used to be listed right on the download page.

Skype Journal - An unofficial source for pretty much all things Skype.

In the companion post to this, Snoskred shows you how to save money with Skype in All About Skype - Tech Tuesday

Over to you..

Do you use Skype? What’s your favorite feature of it? Would you consider using Skype if something was different?

If you like what you’ve read, be sure to give it a stumble, or use the icons at the end of the post to add it to your favorite Social networking site.

As always, if you have something that you’d like Snoskred and I to cover on a future Tech Tuesday Think Tank, you can send them to me via the contact form

Previously in the Tuesday Think Tank
21st August: RSS
14 Reasons Readers Unsubscribe From Your Blog
Tuesday Think Tank: All About RSS

28th August: Blog Templates
Blog Design - Open Your Eyes.
Demystifying Blogger Template Editing

4th September: Nofollow
Spam, Spiders And Do Follow, Oh My!
Say No! to Nofollow

11th September: Site Meters
Do NOT Rely On Your Site Meter.
Track Your Visitors with Google Analytics

18th September: Technorati
Technorati - Sending Out An SOS
The Ups (and Downs) of Technorati

25th September: Google Reader
Google Reader Can Make Your Life Easier - Here’s How.
Improving your Google Reader Experience

2nd October: HTML
Basic HTML for Bloggers.
Some HTML Tips & Tricks

9th October: Time Management
Time Management - Tuesday Think Tank
Use Google Calendar to organize your life

16th October: One last Blogger Thing…
Move your Blogspot blog to your own Domain with ease