Ajax Loading

As we move into the world of web 2.0, everyone seems to be talking Ajax. While this article isn’t going to talk about the advantages and disadvantages of Ajax (we’ll save that for another day), it is going to feed you with a useful link to a site which will generate Ajax loading images based on your needs, called Ajaxload.info.

Choose the image type you’d like, a foreground and a background colour, and hey presto - instant GIF!

This week, we look at Firebug - perhaps the most useful Firefox extension ever made. If you use the (included) Web Developer toolbar in Firefox for debugging JavaScript and CSS issues, then stop - this one is much more useful.

Weighing in at just over 250kb to download, Firebug allows you to view and edit HTML and CSS, as well as debug Javascript all in real time. This is one extension any web developer would be ashamed to live without. Firebug quietly sits in the Firefox status bar and eagerly awaits your click to unleash it’s powerful features.

One of the biggest troubles with being a web developer is the sheer number of browsers you have to cater for. There’s Firefox, Safari and Opera; several versions of Internet Explorer; the Playstation 3 and Nintendo Wii browsers; and then there’s tons and tons of different mobile devices such as PDAs, iPods and mobile phones.

There’s so many, that how is a web developer meant to get any rest around here?

As we become more experienced as web developers, we begin to learn the issues, problems and solutions associated with each of the more popular browsers, but the truth is that unless you have a lot of time on your hands (or a fairly simple structure to your website) you are never going to get your website looking perfect on everything. Sometimes you just have to let go.

Many of you have probably heard of, and used, the W3Schools website as a quick reference to HTML and CSS tags in times of need, but did you know that W3Schools also provide statistics on what browsers, operating systems and display settings Internet users across the world are using. The statistics W3Schools’ use are extracted from their own log-files combined with other reliable sources to give a realistic overview.

The most recent statistics (December 2007) are as follows:
Firefox: 36.3%
Internet Explorer 6: 33.2%
Internet Explorer 7: 21.0%
Safari: 1.7%
Internet Explorer 5: 1.7%
Mozilla (Gecko, Netscape): 1.4%
Opera: 1.4%

Personally, I can’t believe how many people are still using Internet Explorer 6. And while the number is decreasing, it’s decreasing at almost an alarmingly slow rate.

As a web developer, this means we still need to seriously cater for Internet Explorer 6 users, regardless of the amount of pain suffered making today’s complicated websites work on the ageing browser.

Have a wander over to W3School’s statistics pages and check out the other figures for yourself.

Last week, the World Wide Web Consortium (W3c) published an early draft of the next version of the language of the web, HTML 5.

As has been the trend with the previous few versions, HTML 5 continues to make more of the presentation styles in HTML redundant (so they are handled by stylesheets) and allows for several new elements to help clearly define document content.

HTML 5 Specification Draft
Document outlining the differences between HTML 5 and 4.01

For web developers today, there is no need to worry about HTML 5 yet - the specification isn’t finished and browsers do not support it; yet it does provide a useful insight into where our futures lie..

This week’s top tech tool is ‘Multiple IE’ by TredoSoft, which allows you to use multiple instances of different versions of Internet Explorer on a single Windows PC - which is especially helpful for those of us who have to create an IE 6 and 7 compatible website and only have one computer.

The tool allows you to install instances all the way back to Internet Explorer 3, although we wouldn’t recommend trying to make your website HTML compatible that far back!

It’s not the perfect tool - sometimes it renders things slightly wrong, sometimes it crashes and sadly this tool doesn’t currently work on Windows Vista, but it is as close as you can get without multiple machines with multiple software configurations, or a Virtual Machine set-up.

If you’re a web developer who wishes to constantly evolve as the technology evolves around them, you need to ensure that you keep up-to-date by visiting the most useful websites.

Here are some of the websites I visit regularly to keep on top of the game, feel free to suggest your own in the comments below:

• W3Schools - The ultimate resource for whenever you have a web query. W3School’s provides almost all the same information as the HTML and CSS technical specifications, but in a clear, easy to read format. And it does XML, JavaScript and others too.
• A List Apart - An electronic magazine which focuses on best practices and web standards. If you’re not too sure you’re doing something the right way, check out these guys to see if there is an article available on it here.

  

• WebDeveloper.com - A busy forum-based community, which is always useful whenever you have a question and need a reasonably quick answer.
• QuirksMode - A great resource for JavaScript and CSS. The JavaScript side is full of useful JS features and examples, while the CSS side is full of compatibility graphs and useful hacks.
• WebMonkey - HTML tutorials and cheatsheets, especially good for beginners.
• DevGuru - Useful for quickly finding out whether something is supported, especially in JavaScript.

Last week, Apple released a new version of the iPhone / iPod Touch software that gives web applications a larger presence on the device. As a web developer, there are lots of things you can do to make your website not just iPhone compatible, but feel like it was designed with the iPhone in mind.

In this week’s tip, I have a look at a few quick wins which you can do to make your website iPhone friendly in less than an hour.

As you may already know, Microsoft are hard at work on a new version of Internet Explorer (IE8). After years of frustration from web developers world-wide it seems the new browser will finally adhere to standards as much as the opposition’s browsers do.

Recently, Internet Explorer 8 passed the Acid2 test, a test web page written by the Web Standards Project (WaSP) to help browser creators ensure proper support for web standards. Other browsers to have passed the test include Opera 9 and Firefox 3 (not yet available).

Today Microsoft have announced that Internet Explorer 8 will offer both interoperability with web standards, and backwards compatibility with websites built for older versions of Internet Explorer.

The idea behind this is that has become unfair for web developers to have to change a website’s HTML and CSS code to work with the latest version of Internet Explorer, when with previous versions the site had worked fine. When Internet Explorer 7 was released many, many sites broke and many, many web developers found themselves scrambling to try and fix them immediately. Similarly, it was becoming a longer and longer job as many web developers now find them having to support IE 5.5, 6 and 7, as well as Firefox, Opera and Safari.

Working with WaSP, Microsoft have come to the conclusion that a web developer should be allowed to tell Internet Explorer how to render a page, whether to render in ‘backwards compatibility’ mode or use IE8’s standards compliant mode. If you want the former, no changes are required. If you wish for the latter, a single line in your HTML code will construct this setting, with the following setting your website to be rendered in IE8 mode.

<meta http-equiv="X-UA-Compatible" content="IE=8" />

If you’re feeling really brave and want your website to always use the latest browser, you could try living on the edge:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

In some ways, this new mode seems like a kick in the teeth to moving toward a world where browsers are compliant with standards, as everyone will initially just make IE8 render their sites in IE7 mode. But it actually means the job of making your previously perfect website work in every browser is no longer an extended task every time a new browser is released. And hopefully from there on, on new sites web developers will be mindful of the new practices of IE8 and future browsers.

For once, Microsoft have been mindful of the poor web developer in making this change. Thank you to the IE team!

Most of you will remember the ‘hot or not’ Internet craze that went around a few years back where you were given a photo of a girl or boy and asked to rate them out of ten, before being told whether the rest of the population agreed with you. (If you don’t remember, check it out here) It was a little cruel sometimes, but good fun.

The collaborative guys and girls at Jelly New York have created the web equivalent, called Command Shift 3. Presented with two pictures of different websites, you have to vote for which of the two you prefer. If you’re feeling especially brave, you can also submit your own.

Hello and welcome to Weekly Web Dev - a blog catering for web developers, keeping them up to speed with the latest and greatest developments in the World of creating websites and pages on the digital information highway we like to call the Internet.

This site will predominantly focus on providing weekly (and sometimes topical) tips to help web developers improve their coding abilities and knowledge base; however it’s likely this blog’s post rate will also begin to fluctuate with other posts that offer links to useful or cool sites; or useful information for learners of the ways of web.

The aim is that whoever you are, you will get some value out of this website whether you’re new to the web scene, or a qualified professional; regardless of whether it’s for your clients at work, or for your own personal project or portfolio.

Of course, not everyone is going to find each post tells them something new - but we hope you all will learn something.

Once again, welcome, and thanks for visiting!