Matt's Blog

Archive for March, 2007

Video: The Power of the Google

Saturday, March 24th, 2007

I found this Video while surfing around YouTube. It’s an interesting watch, whether you think it’s true or not, I’ll let you decide. I don’t, for the record. 😛 Enjoy.


New IE6 Virtual PC Image

Thursday, March 22nd, 2007

Since the original IE6 VPC Image is set to expire on April 1, 2007, the IE Team have released a new version. This new version (1.1) includes some security updates and is time-bombed for July 23, 2007. They say they’ll keep releasing these VPC Image’s until they see that they are no longer necessary. They’re a good way to see what your site looks like in IE6, if you have IE7 installed. Also, Virtual PC 2007 is out, so you can use that now instead of 2004.

Download Virtual PC 2007 (about 30MBs)
Download the IE6 Virtual PC Image (WARNING: about 400MBs)

Fading Out Text

Wednesday, March 21st, 2007

Have you ever wondered how people have Text on an image fade from left-to-right or from top-to-bottom, or visa versa? Well, I’m going to show you how. First of all, open up Photoshop (I’m using the CS3 Beta, but it’ll work in previous versions), and open a new document (Ctrl+N) and enter your dimensions.

Now, grab the text tool and (T) use it to put in some text.

Take Your Text Tool and Enter Some Text

Now, go down to your Layers Pallet (if it isn’t open, hit F7 or go Window > Layers), and click the Add Layer Mask icon.

Click The Add Layer Mask Button In the Layers Palette

Now, once you’ve done that, make sure you’re on the Mask (click the white rectangle on the layer’s name, if you aren’t), and go over to the Gradient Tool (G). Now click and drag your cursor from left-to-right for a faded to normal effect and right-to-left for a normal to faded effect.

Faded Text

You could also spruce up the text a bit by going back into the Text part of the layer (click the little “T” on the layer’s name) and add effects to it. Plus, since the text will be slightly transparent, you’ll be able to add layers underneath it to make it look even better.

Final Effect

This technique isn’t limited to just text, either.

Get it? Got it? Good.

Add Your Search To Internet Explorer and FireFox

Monday, March 19th, 2007

You’ve probably seen them, and maybe even used them, that handy little Search Box in the top-right of your browser. But, have you ever wondered how you can add your own Search there, and offer adding it to your visitors? Well, I’m going to show you how.

First of all, this is important, both Internet Explorer 7 (this won’t work in previous versions of Internet Explorer, since they didn’t have inline search) and FireFox use the Search Engine Provider standard, OpenSearch1.1. Because they use the same standard, you can use the same code in both Browsers to add a search provider. So, onto the details.

Okay, lets start with some background. XML is used to specify everything to do with your Search, so it’s fairly easy to implement. No Programming Language and Complicated Scripts here, folks, just straight XML.

First of all, if you want all the juicy details on all the possible “elements” available to use, go here.

Okay, here’s what we need to start with:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

The first line just tells the browser that you’ll be using XML encoded using UTF-8. The second line tells the browser what specification you’re using, and where to look for it.

Now, you need to start adding some details. First, you’ll need to specify the name:

<ShortName>Search Engine Name</ShortName>

That’ll be the name that shows up in the textbox in the corner of the browser when your Search is selected from the dropdown box. You can also add a <LongName> tag, but it’s not necessary, and I haven’t seen it used in Browsers yet. Now, for a description:

<Description>Search Engine Description</Description>

Not much to say about that, it’s simply the description of your Search.

Now, for Icons. Icons aren’t used in IE7, but they are, sometimes, used in FF. So, the code:

<Image type="image/x-icon" width="16" height="16">http://www.example.com/favicon.ico</Image> 
<Image type="image/png" width="64" height="64">http://www.example.com/favicon64.png</Image>

It’s best to include Icons of 2 sizes and formats, 16×16, 64×64 and .ico and .png. Note the full URL. You will need to include your full domain, you can’t just do /imagename.ext (since the browser won’t know where to look for the image).

Now, for the most important part, the URL.

<Url template="http://www.example.com/?s={searchTerms}" type="text/html" />

First, you’ll need to make a search (of any string) and then copy the URL and replace the string you searched for with {searchTerms}. Most likely, you’ll use text/html in type.

Now, to end the file, add this to the bottom of it:

</OpenSearchDescription>

All that code together would look like this:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
<ShortName>Search Engine Name</ShortName> 
<Description>Search Engine Description</Description> 
<Image type="image/x-icon" width="16" height="16">http://www.example.com/favicon.ico</Image>
<Image type="image/png" width="64" height="64">http://www.example.com/favicon64.png</Image>
<Url template="http://www.example.com/?s={searchTerms}" type="text/html" />
</OpenSearchDescription>

Now, the only left to do is to save the file and link to it.

You’ll want to save it as something.xml. I’m going to recommend addsearch.xml. Then, of course, you’ll want to upload that to your website.

Now, you’ll probably want to allow people to install this into their browsers ( 😉 ). So, all you need to basically do is add an onclick="" to a link:

<a href="#" onclick="window.external.AddSearchProvider('http://www.example.com/addsearch.xml');" title="Add Search Engine Name to Your Browser">Add Search Engine Name To Your Browser</a>

Now, you may want Visitors browsers to discover your Search Engine automatically. You can add this to the <head> of your page:

<link rel="search" type="application/opensearchdescription+xml" href="http://www.example.com/path/to/addsearch.xml" title="Search Engine Name" />

And that will have your visitors browser show either this:

Internet Explorer Discovered Search

Or this:

FireFox Discovered Search

I’ve added a Search Engine for this blog. Check it out.

Get it? Got it? Good.

Blog Layout Issues Fixed

Sunday, March 11th, 2007

I’ve finally fixed most of the layout issues on this Blog’s Theme. Most of them were me forgetting to change some div’s when I made this layout into a WP Theme and Navigation/Footer problems with Firefox. But, I’ve gone through and fixed most of them. A couple of minor issues still exist (such as if the Content is smaller, in height, then the Navigation Bar, and a small line of the Navigational Bar background colour at the bottom of the Content showing up), but the major issues have been fixed.