Coding with Jesse

Carnival of the Web #4

Welcome to the fourth Carnival of the Web.

First off, Jonathan Snook explains how to maintain an ideal source order while still displaying web site elements in the appropriate positions with Stackable CSS Columns.

Next, Joe Kissell at Interesting Thing of the Day explains just what is so unconventional about text-based ads.

Violeta of All Tips and Tricks shares her results of A personal experiment on internet traffic sources, trying to understand how social software fits in to web site marketing.

Dave Gooden wonders Am I missing something?, giving a skeptical look at the use of map mash-ups for real estate web sites.

Renata Vincoletto at A geek Family wonders what effects the internationalization of companies has on the freedom of nations to enforce their own laws, when Google has bad moments in Brazil.

Dominic Foster shares a simple checklist outlining how he set up WordPress.

And finally, Benjamin Yoskovitz helps non-designers understand the importance of choosing a look and feel of a web site, explaining How To Pick the Best Theme in WordPress For You.

Published on September 17th, 2006. © Jesse Skinner

How to make a web site for cheap

Even though I'm a web developer for hire, I'm not really interested in making really simple web sites. I believe most people could do it themselves, if they just learn a few things. I'd rather spend my time coding web communities or Ajax enhancements or whatever.

So your aunt or some of your clients are bugging you for a free web site (and you don't want anything to do with it), then think about passing these tips along.

  1. Get a free web design

    There are a bunch of sites out there with free web designs available to the public. The Internet is so big, it really doesn't matter if you have a one-of-a-kind unique web design. Check out Open Source Web Design, Free Site Templates, or just search Google for free web design.

  2. Find really cheap (or free) web hosting

    There's a bunch of places that offer free web hosting, but a lot of them won't let you get your own domain name, or they might put a banner on your site or whatever. Plus, you'll want to have hosted email, and the only way to get that is by paying for it. Web hosting is the only thing you really have to pay for.

    The good news is, web hosting is pretty cheap. DreamHost, only charges $9.95/month ($7.95 if you pay for 2 years in advance). Plus, you get to register your domain name for free. There are other companies out there that are even cheaper and offer different things as well, so if you shop around you can find a good deal.

  3. Create the web pages yourself

    Get a copy of Dreamweaver or Microsoft Expression or something similar. This way you can put in your content yourself. You can even learn a bit of HTML and CSS and get your hands dirty. HTML is really easy to learn, and there are thousands of books and free web sites that can get you started.

Ten years ago, the only web sites out there were ones people made for themselves. Nowadays, with so many web companies out there, most people think they have to pay big bucks to get a web site. There is so much free information on the Internet that really anyone can learn how to make a web site, and it only takes a few hours for people to learn how to do it themselves.

Published on September 9th, 2006. © Jesse Skinner

Running both Internet Explorer 6 and 7

When the first beta of Internet Explorer 7 came out, the biggest complaint was that there was no easy way to have it run as a standalone browser. You're pretty much forced to upgrade your whole system to use it.

I took the plunge anyway, deciding I'd rather run IE7, but I ran into all sorts of situations where I really needed IE6 for debugging.

There are a lot of hacks and instructions for taking apart the IE7 beta so that you can run it standalone. I've decided that the extremely easier solution is to just install IE7, then download the standalone of IE6.

Now that the Release Candidate is out, you probably don't want IE6 to be your main browser anymore, right? So why not just have it around for the few times when you really need it?

Published on September 5th, 2006. © Jesse Skinner

5 Basic Search Engine Optimization Tips

Search Engine Optimization (SEO) has grown into an entire industry. There are tons of companies who do nothing except help web sites rank high on Google or get lots of search engine traffic. Most of these companies charge a lot for their services. I'm going to outline a few simple things you can do to your own site for free. This isn't a complete list of things you can do, but you can do very well on search engines by following all of these.

  1. Use a strong title

    Probably the most important place on the page for search engines is the <title>. Rather than cram a thousand keywords in your titles, try to keep them simple and to the point. Describe the contents of the page in plain language. For example, I titled this page "5 Basic Search Engine Optimization Tips" rather than "SEO For Dummies" or something else tricky.

  2. Pay attention to the URL

    The worst URLs for search engines are like "http://site.com/index.php?c=34&d=43". It's much better to use "http://site.com/my-web-page-title". Do everything you can to get the same keywords into the actual URL of your page. Also, make sure you separate the words by a dash "-" instead of an underscore "_". Google sees a dash as a space but sees words attached with an underscore as one big word.

  3. Use header tags appropriately

    Use <h1>, <h2>, etc. whenever you can. Don't use them to increase the font size, use them to mark your titles. Doing so tells search engines that these words describe the page or section of the page. So be sure to put good descriptive keywords into these tags. This will increase the page's relevance to those keywords.

  4. Keep all the words in the HTML

    A lot of sites have titles and navigation made up of image buttons and links. It's better to just use plain text with a background image. If you really want to put words into images, make sure you at least use the alt attribute. Also, try to put the same words in the HTML, hidden by CSS if necessary.

  5. Write good content

    This is an obvious one, yet usually forgotten. Good content will have a lot of keywords relating to the topic. By using lots of synonyms and clear descriptions, you'll give more words and phrase for the search engines to find. Even having user-generated content such as comments or reviews will give more opporunities for searchers finding the page.

Hopefully following these simple tips will help you get some more traffic. There are a hundred tips and tricks out there, but the best tip of all is to just write lots of great content and make good web pages which are useful and easy to read. The rest should come naturally.

Published on September 3rd, 2006. © Jesse Skinner

Working around "Click to activate and use this control"

As you may likely be aware, the latest versions of Internet Explorer and Opera have decided not to give Eolas any money for their patent. Instead, users are forced to click on plugins (movies, sound, Flash and Java applets). In other words, anything inside object, embed or applet tags.

Thankfully, there is a way around this. Microsoft has documented some workarounds. I've put together a solution here that works in Opera as well:

// only execute code if 'getElementsByTagName' and 'outerHTML' are supported
if (document.getElementsByTagName && document.body.outerHTML) {
    // repeat code for each affected tag
    var tags = ['object','embed','applet'];

    for (var i in tags) {
        // get all elements with tag
        var objs = document.getElementsByTagName(tags[i]);

        for (var j=0;j < objs.length;j++) {
            var obj = objs.item(j);

            // find param tags within object
            var params = obj.getElementsByTagName('param');
            var inner = '';

            // if there are params, but param tags can't be found within innerHTML
            if (params.length && !/<param/i.test(obj.innerHTML))
                // add all param tags to 'inner' string
                for (var x=0;x < params.length;x++)
                    inner += params.item(x).outerHTML;

            // put 'inner' string with param tags in the middle of the outerHTML
            obj.outerHTML = obj.outerHTML.replace('>', '>' + inner);
        }
    }
}

Download this script here.

The code only executes on browsers which support getElementsByTagName and outerHTML (Internet Explorer, Opera and Safari - but not Firefox). It gets around the patent by dynamically "altering" the outerHTML (even though nothing is changed from the original HTML). But beware: you need to put it in an external JavaScript file to work.

To do this, simply put the code into a file. Let's say it's called eolas.js. Then put this line anywhere after all the object, embed or applet tags:

<script type="text/javascript" src="eolas.js"></script>

Alternatively, you can keep the script tags out of the body by wrapping the code in eolas.js in a function, then use my addDOMLoadEvent function to run the Eolas script once the page has loaded. So if you change eolas.js like so:

function fixEolas() {
    // same code above
}

then just put this in the <head> of the page:

<script type="text/javascript" src="eolas.js"></script>
<script type="text/javascript" src="adddomloadevent.js"></script>
<script type="text/javascript">
addDOMLoadEvent(fixEolas);
</script>

Unfortunately, the JavaScript file will be downloaded unnecessarily for users who don't use Internet Explorer or Opera. But if Safari or other browsers implement the same thing, this JavaScript code will already be in place to fix it.

And there you have it. Three cheers for horrible software patents!

Update: The code I posted before breaks objects with <param> tags in Internet Explorer. It turns out that outerHTML doesn't contain <param> tags, so extra work needs to be done to make sure they stay intact. I've updated the script accordingly.

Published on August 29th, 2006. © Jesse Skinner
<< older posts newer posts >> All posts