Sephy’s Platzish

One of the things that I absolutely love about my computer is the fact that I can record the “mix” stream from the computer - in other words, I can rerecord audio streams for my personal use (or possibly sharing with one or two people).

It all started with recording calls that I and some of my fellow scambaiters would make to scammers - though the first calls I recorded were calls that I did myself, in an interesting process where I did a stereo recording and I had my microphone in one channel and the scammer in the other channel.  I didn’t post too many of my own calls to the web, but quite a bit of my recording work is out there for everyone to enjoy.

I’ve also used this method to record a couple of songs from MySpace (until a site with all the songs available for download in MP3 format was found), and to even record some radio programs.

However, the program that I use, Audacity, has added a new feature where you can actually schedule a recording. I’ve used this feature to great advantage to record the ABC cricket broadcasts which, since they’re in Australia, can go as late as (as was the case the other day for the Twenty20 match at the WACA) 6:30AM my time.  One day matches also have a tendency to run into the early morning hours when they’re day-night affairs (for example, the match at Adelaide today is starting just as I write this - for some reason the ABC stream is still in standby mode, but the Radio Sport stream is working, just with commercials - and will run until around 5:00 tomorrow morning).

I’ve also been doing the same thing with the test matches that were held a few weeks ago in Brisbane and Hobart against Sri Lanka. I’d set the timer to record from about 10 minutes before the start of a session and go for about 15 minutes after the session. If I wasn’t going to be around, I’d set the recording to go from the beginning of, say, the second session to the end of the day. I’d then go back and edit the file to remove (on weekdays) the lunch break and sometimes the tea break, and to chop off the end of the file after the day’s play had ended.

After recording a session, I export it to an mp3 file at 32kbps - which gives me a file size of around 30 MB for a full 2-hour session of test cricket.

Then, I will listen to it on my walks with my mp3 player (it’s actually an iPod nano - got it as a gift, and it will be leaving me for a week soon, as it will be on its intended itinerary). It’s something different to music and I like listening along and having a laugh with the commentators - I don’t know what it is, but if you want some good commentary, listen to cricket or baseball commentators on the radio, heck even football (gridiron) commentators get up to a good time. They even talk about the game from time to time.

At about an hour or so a day, and with some days where I’ll listen to the match on the computer as well, I got through the first test just in time for the second test to start. However, the second test took me quite a while to complete - I started it straight from the first day, but I didn’t get done with it until Monday afternoon, almost a full two weeks after the match had actually finished.

I’m almost done listening to the Twenty20; in fact, I’m listening to that right now, with the Black Caps on 8-79, with the end of the match coming quickly; I’ve managed to not see the result of the match - however, that doesn’t mean I can’t get spoilt for other things while listening to the cricket - I heard the results from some of the V8 action at Symmons Plains, and was getting mildly annoyed, but I could understand so it wasn’t a big deal. Anyway the actual racing was much better than just hearing the results.

By the way, if you want to do something like this, you just need to see if you can record the Mixer stream. It’s found in your sound control - in Windows, that’s at Start -> All Programs -> Accessories -> Entertainment -> Volume Control. This is what it will look like when you start the program; you’ll have different things in your control panel -

To access the recording settings, go to Options -> Properties, which will bring up this window -

Then, in the mixer device line, you will want to look for something like “Recording control” or, in my case Realtek HD Audio rear input, then click OK. The Master Volume window will change to the Recording Control window, which will look something like this (as with the Master Volume, I have the advanced settings option turned on) -

If you have something like “Stereo Mix” in your set of controls, then you can go ahead and do the same thing as I can, and possibly even have your own two-week-long test match.

Coming up tomorrow - how to upload these files to an FTP server (not really, but I will show you how to use an FTP program )

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.

There comes a time in everyone’s life when they have to let go of something they’ve held dear to them for years. Well, actually, I can’t say that about what we’ve gotten rid of - mainly because it’s too expensive!

You see, we have had the same phone service from the same phone company (albeit with a name change when they were absorbed into one of the amalgamated “Baby Bells“) for at least as long as I’ve been alive, and I know a lot longer than that. We’ve been happy with their service, but with the advent of VOIP services and much cheaper phone service, it was time to change.

On a month to month basis, we’d been paying somewhere around $40 for the privilege of having a landline telephone, with unlimited local calling (which, in this part of the state is our town, and a couple of neighboring cities; calling anywhere outside of an around 10-mile radius cost anywhere from 9 to 24 cents per minute). The only “extra” we had on the line was Caller ID.

Of course, like any good natural “monopoly”, our phone company knows how to soak you for the extras. I was perusing their site last night and found out that our Caller ID cost us $9.25 per month, almost a full quarter of the bill. How ridiculous is that?

I have a cell phone and pay $5.28 per month for a basic pay-as-I-go plan (that’s including all taxes and fees); of course, that goes towards my account balance and I pay 25¢ per minute for all calls for the first ten minutes each day and all texts are 5¢ to send or receive. All in all, I don’t mind the high per minute rate, since I’m getting the service for a dirt cheap rate per month; it also includes caller ID (though without a name).

A long time ago, we had looked at Vonage for our phone service, but the biggest hurdle was that we couldn’t keep our phone number (which is strange since customers of the same phone company in a certain much larger city to the east of here are allowed to keep their phone number). However, it wasn’t until a few weeks ago that I found a bargain when it comes to VOIP service.

For those who don’t know, Vonage charge you $24.95 per month for unlimited local, long distance, and calls to certain countries. Another service, Packet8, charged $19.95 a while ago, but have raised their price to $24.95 for unlimited domestic calling. However, the service that I found,  Phone Power (direct link, not an affiliate link ), has a great deal - $9.95 for unlimited local and long distance for the first six months of your subscription.

The catch?

You have to switch to a regular plan after the six months; that’s it. There are no contracts, no set up fees, and you get a free router (they charge $14.95 for shipping - not bad for a free router).

We’ve fired the phone company, and are switching over to a new company over the next few weeks. I’ll have to keep y’all updated on the quality of the service (it should be pretty darn good since we now have 5 meg internet service (5000 down, 512 up)).

Obviously there are a lot of things that we all use from day to day which come from Google, but that doesn’t mean that everything they do is something we should be jumping up and down and running towards.

A couple of weeks ago, Matt Cutts opened up a Poll on Google Reader Features that his readers (and all of you) would like to see added to the program. Honestly, there is only one thing that I see which would be of use - drag and drop to rearrange feeds.

Not surprisingly, it’s the second most popular option. One of the most interesting items on the list of suggestions Matt has on his list is “Let me click to rename feeds”. Apparently there are a lot of people who haven’t made use of an already built-in function of Google Reader - Subscription options. Right in there is this strange option - Rename subscription.

One thing that I swear that there wasn’t much overwhelming demand for was having the ability to create a blogroll from your list of subscriptions. However, they’ve gone and done just that. If you look at the post where the developer mentions it, you’ll see that he’s using it.

I don’t mean this as a criticism of him personally, as I have as many, or possibly more, blogs in my reader, but the thing I notice is that the blogroll is quite long, and could use a way of putting it into a div that would scroll in the page. In fact, it extends a full 4,000 pixels beyond the end of the content.

The other thing that I notice is how it doesn’t integrate with the rest of the page very well. I know that there are javascript blogrolls that will pick up the page’s preexisting CSS and fit in with the rest of the page. Unfortunately, this widget doesn’t do that, rather opting for a style which, and I think this is a partially good thing, somewhat screams Google.

No, it’s not the poor integration with the site it’s hosted on, or even the fact that it’s a javascript-based element (it makes sense considering that your reader is a flexible thing, so products produced based on it would need to be fluid). The thing that gets me is the complexity of the code.

Snoskred pointed me to a link about this new feature on TechCrunch. She made the observation that this should make grabbing the HTML from a blogroll easier than how we do it now - manually making the links and updating the sidebars.

Let us take a look at an entry in a couple of blogrolls. The first is from one of the bigger Blogrolling blogrolls out there, the Blogger Chicks blogroll. Because of how big it is, it’s set up to have a scrollbar, but what I didn’t expect was that it is set up as a table. This is the code for one line of the blogroll -

<tr class="blogroll_tr"><td class="blogroll_td"><a href="http://www.expired-convictions.com/" target="_blank" title="Last updated: 04:18:46 [GMT] on Saturday, September 29">Expired Convictions</a></td></tr>

It’s fairly simple, and you can easily extract the information you need - the linking code. Now, for comparison, here is the code for one line — yes, just one line — of the blogroll listed on TechCrunch -

<li style="border: medium none ; margin: 0pt; padding: 0.4em 0pt; background: transparent none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; text-indent: 0pt; text-decoration: none; font-weight: normal; list-style-type: none;"><a style="border-style: none none solid; border-color: -moz-use-text-color -moz-use-text-color rgb(151, 224, 122); border-width: medium medium 1px; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; text-indent: 0pt; text-decoration: none; font-weight: normal; color: rgb(88, 191, 47);" class="i" title="CenterNetworks - Social Media News, Opinions and Insights" href="http://www.centernetworks.com">CenterNetworks - Social Media News, Opinions and Insights</a></li>

Again, that is just one line of display. In numbers for geeky types like me, the Blogrolling listing is 207 characters long, and the Google listing is 963 characters long. Before some statistician starts jumping up and down to tell me that I’m not using a full statistical sample, I know that and that I’m sure that the numbers would be different depending on the actual length of the address and name of the blog. However, if you have, say, 50 blogs on your blogroll, using the numbers above, that leads to an extra 37,800 bytes to the load every single person viewing your site has to download. It may not seem like much, especially with broadband being so omnipresent, but over time it does add up.

Not only that, it makes grabbing the HTML quite difficult. The one redeeming feature is that the title and the href properties are right next to each other, at the end of the a tag. However, it’s not the simplest thing to get accomplished.

Some Suggestions

Since this is Google, they’re fairly responsive to suggestions, for the most part, there’s always a great amount of suggestions that people have. Andy Beard has brought up a suggestion about opening up feed lists for wider use. One of Google’s engineers has mentioned that you can get this information, but right now it’s not fully optimized. I don’t think it will take too long for that to get sorted.

I also have a couple of things that, if some Googler would like to maybe take it up and make them options.

Post Time

One of the things that I like about Bloglines is that it will tell you what time the post was made on the blog. However, in Google Reader, you’re told the time that the post was picked up by Reader. It’s a minor pedantic point, but it’s one worth mentioning.

I don’t know about anyone else, but I’d rather have the time on the post reflect when it was made instead of, in the instance of some feeds, a bunch of posts all “posted” at the same time.

Rename Tags

While you can easily rename subscriptions, renaming tags is an arduous process. To change the name of a tag, you have to go through the following procedure:

1. Make a new tag
2. Assign all subscriptions from the old tag to the new tag
3. Unassign all subscriptions from the old tag
4. Delete the old tag

It’s a major hassle, and one which I’ve not taken the time to do. However, I can’t see why you can’t simply go into the Settings, and under Tags, rename the tag. You can do that in Gmail, I can’t see why you can’t in Reader.

Over to you

What suggestions do you have for Google Reader, or for that matter any Google product? Feel free to leave a comment; if you haven’t commented before, it will be held for moderation, and should appear within a few hours of posting.

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!