Web Development

This bit of code will let you change the opacity of an image using JavaScript; unlike most scripts it works on Safari and Opera as well as IE and Firefox. Simple send the id of the image and a value between 0 and 100 to change the opacity (0 being invisible and 100 fully visible).

function changeopacity( imageobject, opacity ) {

    
var object = imageobject.style;
    object.opacity = ( opacity / 100 );
    object.MozOpacity = ( opacity / 100 );
    object.KhtmlOpacity = ( opacity / 100 );
    object.filter = "alpha(opacity=" + opacity + ")";

}

On my various websites I get hundreds of Spam messages every day; it gets very annoying! I've tried several methods and in this post I will outline three. Soemtimes they works, sometimes they don't. Some are more effective than others.

1. Captchas. Captchas are a random strings of text and numbers that a user must enter to be classed as non-spam. The letters and numbers are displayed as an image and usually over a pattern and are distorted to prevent bots from easily reading them.

Pros: Skewed text against noisy background can be hard for Spam bots to read
Cons: Can be difficult for humans to read, spam bots are getting better at recognising them

2. Hidden text fields. Create a text field in your form and hide it via your CSS (using display: none). When processing the form if the field has been filled out it is Spam.

Pros: Filters out around 75% of spam bots
Cons: Some bots check your CSS, those with CSS disabled still see the text field

3. Ask a question. Ask a question that doesn't have the answer in the question. A popular one could be a maths question (e.g. what is 1 + 5). Even more effective would be What colour is the sky?

Pros: Filters out 99% of spam
Cons: Some foriegn users or those who struggle with spelling may get the answer wrong

There are lots of fixes and hacks out there to stop the famous IE three pixel padding bug; what happens is when you have a floated div IE adds extra padding to the div next to it. It's very annoying when you're trying to get a layout spot on.

I've tried many fixes ranging from setting the float div to display: inline; (which didn't work) and trying to browser sniff to serving a different style sheet to IE browser (which I resent doing).

I found this trick that worked perfectly however. If you use a child selector you can serve a style that IE will use and another all the others will use. Let say you have divs, left and right, and the right div should have a 500px left margin; your CSS might look like this:

    div#right {

        margin-left: 497px;
        width: 475px;

    }

    div#container > div#right {

        margin-left: 500px;

    }

Here the width is set at 3 pixels less then overriden to the correct value via the child selector. It all renders correctly though as IE ignores the child selector.

I love Safari - I think it's the best browser to use if you have a Mac . . . unless you're a web developer. It's light, clean and performs well but there is a BIG problem with it if you're trying to use it to test a website.

Whether you're using a proxy server or not Safari has a nasty habit of caching web pages (unless you use the appropriate headers which is not always what you want to do). All browsers do this but with browsers such as IE and Firefox you can do a force-refresh - a refresh that tells the browsers and the proxy server to reload the page. As silly as it sounds Safari currently does not have this feature. So, if you're updating a site live on the server you will see the old version.

So, if you're developing sites on a Mac use Camino or Firefox . . . you can force a refresh on them. Let's hope Apple see fit to add this feature to the next release of Safari.

I found this website via Google that let's you create GIFs that are useful to display while loading data through AJAX. It's a great free service that let's you specify the colour you want and the animation type you want and then let's you download the image - there are plenty of indicators to choose from ranging from Wheels to Flowers.

The site is call Ajaxload and can be found here.

Thanks to the webmasters at Ajaxload!

If you don't have access to a Mac but want to know what your web page looks like on the Apple Safari browser look no further than this fantastic free online tool, BrowsrCamp.

Simply specify a webpage URL and page width and Browsr Camp will generate an image that shows you how your page would render in Safari. It's as simple as that.

Browsr Camp also offer a paid service entitled Mac OS X Livetest that "gives you the possibility to test your websites by taking full control of a Mac OS X system. You only need to have a VNC client and a fast connection".

Learn more about the Mac OS X Livetest here.

Have you ever exported a Flash movie only to find the text doesn't appear in Opera (although it works fine in Firefox and IE). Although I'm not sure what the cause is I do know of a fix: export your Flash movie to an earlier version of Flash.

Go to File > Publish Settings and choose an earlier version from the Version dropdown.

Can sounds in Flash loop forever?

No.

It's as simple as that; you just have to enter the highest loop quantity the Loop input box from the Sound panel will take, which is 65535.

It may not satisfy the purists out there but it's unlikely anyone will sit through 65535 loops of your music!

Here's a quick tip if you're doing some music loops in Flash and you find that there is a slight delay before the sound clip restarts. The problem is this for some reason MP3s don't loop very well in Flash whereas WAVs do. You may not want to use a WAV file due to the file size but the good news is you can have your cake and eat it.

Import a WAV version of the sound loop into your library and right-click it and choose Properties and change the compression to MP3. Then alter the Bitrate and Quality settings according to your quality / compression ratio preferences. Your sound will now loop properly - for some reason MP3 don't work unless you let Flash encode it.

It was like giving up a ten year long addiction - I finally set my default browser to Firefox. Since the first time I ran it I've never doubted Firefox was superior to Internet Explorer. It's just that since 1996 when I first got the Internet I started using IE out of lack of choice. It's shameful for any web developer to use IE but I just couldn't get out of the IE habit. Today, however, I finally did it!

If you're still using IE get Firefox now!

If you haven't noticed already the PageRank readings in the Google toolbar are updating. Who cares? I know from the updates that are happening to the Dr Quincy site that it really doesn't make a blind bit of difference. Here's why:

Despite all the backlinking I've done over the past few months my home page is staying at PR3 (the most important page of the site according to Google) yet other pages that have next-to-no backlinks (like my terms and privacy pages) are showing PR4. Furthermore, a couple of pages that have NO backlinks are now showing a PR5!

If you want to know why PageRank means NOTHING read my article, When is the Next PageRank Update?

Every web or graphic designer has at some point (most likely at too many points) stared at the screen waiting for the ideas and inspiration that will get their next project moving.

One of the easiest ways to cure or treat designer's block is to look at other people's work for inspiration. I've been in this situation recently and there were five sites in particualar that helped me back into the creative frame of mind. They are all collections of nice-looking websites; browse through them and quash your designer's block!

http://www.csstux.com
http://www.webcreme.com
http://www.csselite.com
http://www.css-galleries.com
http://www.cssremix.com

Enjoy!

Okay, so no one wants to make a rubbish website. Sometimes, though, lessons are best learnt on what not to do rather than on what to do - so please take it in the tonuge-in-cheek manner it was intended. The funniest thing about this is, I'm guilty of some of them myself.

Here it is from start to finish, How to Make a Rubbish Website in ten easy steps.

1. Choose a free hoster. Your route to a bad website begins with the hoster. Free hosters are a good way to start as they will offer you limited features and flood your site with adverts that are out of context (more on this in point 5). Furthermore, your site will be slow to load and will run out of bandwidth very quickly. Don't worry about the fact you don't have your own domain name - that helps highlight the lack of credibility your site has.

2. Write one draft of your site content and one draft only.. Bad spelling and grammar give off an unprofessional image so once you've done a first draft of the site content launch it as it is. This saves you having to rewrite your content so that the most important information is at the top.

3. Use a WYSIWYG editor to code your site rather than learning to hard code. Now get down to the coding. Don't fancy learning how to code HTML, CSS and JavaScript properly? No? Good, you don't need to. Simply get hold of a WYSIWYG editor like Dreamweaver and let that write / right the code for you. This helps the rubbishness of your site. You'll end up with loads of inline CSS and JavaScript that you don't understand. Your code will contain lots of extraneous information and won't validate properly.

4. Make the layout as inconsistant as possible. Schneiderman's Golden Rules of usability state that you should strive for consistancy. What does Schneiderman know about rubbish websites? Nothing. Make sure the fonts, menus and colours scheme vary from page to page.

5. Make sure your site name comes first in every title tag on the site. Okay, so the site is designed, the content is there. So far, so rubbish. All rubbish websites have title tags that start with the site name; this makes it difficult for search engines to attribute keywords to your web pages and also frustrates any users that are trying to bookmark your pages.

6. Make your ads as instrusive as possible, ideally make sure they're out of context. Now it's time to start thinking about how to make money from your rubbish site. Sign up for as many advertising programmes as you can. You will want to use popups and popunders as these are the most rubbish. Avoid contextual advertising schemes as these can be unobstrusive if used properly.

7. Make entire sections of your website in Flash. Now's time to develop some Flash-only content. These sections may look pretty but they are, in fact, rubbish. Make your users sit around and wait through lots of convoluted transitions only to find the information they wanted wasn't there in the first place.

8. Test your website on one browser only. As long as your website renders correctly in the browser you usually use then that's fine. There are loads of browsers out there but forget about them. Cross-browser incompatability is essential for any rubbish website.

9. Add a splash screen. Okay, your site is nearly done. Add one final layer of rubbishness: a splash screen. This will turn away visitors and help you get a lower search engine ranking.

10. Launch your site (it doesn't matter if it's finished - include as many "Under Construction" pages as you like). That moment has come - you're going to make your site live! Is the content finished? Don't worry if it isn't. All rubbish websites have an "Under Construction" page or ten in them.

This blog was written as part of the ProBlogger Group Writing Project.

About three months ago I started using the Alexa toolbar as I found it interesting to see how various websites ranked in terms of traffic. I knew how it worked: Alexa tracks traffic via anyone that has the toolbar installed and then produces stats on them. While I knew the statistics would be tainted due to the demographic that would use the Alexa toolbar (mostly webmasters) I thought it would be a reasonable way to track the popularity of my site.

One month, after writing lots of new content and getting lots of new backlinks I went up 2 million places! I was delighted with this progress. Another month passed and I added some more content and I went up another 400,000 places. As I looked over my monthly stats, I started to get suspicious. A 10% rise in traffic equated to a 400,000 rise in the Alexa charts (and the higher you get the more competative it gets). Either all the competing sites were doing really badly or there was more to this than meets the eye.

I twigged what had happened: I'd installed the Alexa toolbar on the browser I was using for testing my own website. The penny dropped. I'd been visiting my own website and getting it up the Alexa chart.

My point was later proved when working on a new webiste for a client. I reigstered the domain and spent a weekend developing the site. Hey presto, next Alexa update a site that only I knew about and visited had made it into the top 600,000! This proves not only how few people use the toolbar but the tracking isn't savvy enough to distinguish visits from hits.

The lesson is to take a huge amount of salt with your Alexa traffic rank. It's sad that some advertising programmes still use Alexa traffic rank as a factor for pricing advertising space. It's a shame, the idea of having a global popularity chart is great but for now it's just a pipe dream.

Flash websites are everywhere. I'll admit it now - I hate Flash-only websites. I reckon I close down over 90% of Flash-only website before the preloader has finished.

Paradoxically, I love Flash - I think it's a great way to bring extra life and interaction to a web page. So, what am I saying? Do I love Flash or hate it?

As with all great things Flash has a use and an abuse. I (and millions of others) believe Flash-only websites are an abuse. I've written an article, Should you make your website in Flash to help those of you designing a new website to decide whether or not a Flash-only website is the answer.

Read the article Should you make your website in Flash here.

I've added some more sites to my Where to Submit your Photoshop tutorials article. There are now over fifty websites to keep you busy.

If you need help writing your tutorials read my article entitled Tutorial Writing Guide: writing the right tutorials.

Remember what a superb way Photoshop tutorials are to get traffic to your website!

Happy Photoshopping!

Looking over my web stats I get over 80% of my traffic from Photoshop tutorials. I thought I would take the oppurtunity to plug my Where to Submit your Photoshop Tutorials article.

At the time of writing there are over 40 sites to submit to (and it gets updated all the time)! So, if you want a lot of extra traffic and some quality, relevant backlinks start writing your tutorials now and get submitting! My hot picks for some seriously high traffic are Pixel2Life, Good-Tutorials and Tutorialized.

If you need some pointers on how to write a tutorial read my guide on tutorial writing.

There are so many sites to submit to now the problem is not finding the time to write tutorials - the problem is finding time to submit them!

The div tags on my site always wrapped when the browser was too thin (around less than 800 pixels wide). It was not too much of a problem as according to my web stats there are hardly any users that would view the site at such a resolution. The problem came, however, when software such as that used by snap.com and Alexa would take an image snapshot of the site; it would break up most of the top menu.

I searched Google for a solution but didn't find anything. However, I found out how to fix it and it's very easy.

Simply create another div around the wrapping div (make sure it doesn't contain anything else other than wrapping div) and in your CSS specify the width absolutely. I'm not sure how this works for relatively sized sites but for absolute sized sites like mine it works great.

I tested it with Firefox, IE and Opera and it renders correctly.

I recently came across a forum post where the original poster was recommending that webmasters add as many external links to Wikipedia as possible to get quality backlinks and better search engine rankings. I've also seen posts of webmasters who have seen a sudden dip in page ranking for particular pages only to find it's down to the fact that a link to their site has been removed from Wikipedia.

Clearly there is some erroneous information out there and some confusion as to whether or not you should use Wikipedia for backlinking. The answer is yes and no.

Yes, Wikipedia can provide quality backlinks but no, you shouldn't just add as many as you like.

I took the liberty of writing an article entitled, Can you use Wikipedia to Build Backlinks?

The article invites you to think carefully before adding external links to Wikipedia and details eight points for webmasters to consider.

Read the article here.