Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for October, 2006.

Archive for October, 2006

Douglas Crockford does the DOM on Video

Wednesday, October 18th, 2006

I was lucky enough to get some good JavaScript trainings in the last months, one of which being Douglas Crockford explaining the DOM as an inconvenient API to work with.

While his slides have a splendid “Silent Movie” style to it (white text on black background), they tend to be a bit overwhelming when you don’t get his explanations alongside them. Well, <farnsworth>Good News, everyone!</farnsworth>: his sessions have now been made available as small half hour videos on the web.

Personally I learnt more in Douglas’ training sessions so far than in about 5 years of reading books and web content on the subject. This is really good material if you want to understand why working with the DOM can sometimes be a very tough job.

Opera backstage in London – a Viking night

Wednesday, October 18th, 2006

With the copious amount of free alcohol still in my body and this being somewhat of a celebration (the 350th post – yes, it is rather random, sue me), let me allow myself to talk of a night out in the West End (10 minutes from the office) with Opera playing host to bloggers and web developers showing off their new products and ideas.

Opera invited me to the backstage thing via onlinetools.org (of all places) and asked me to bring workmates along as they are interested in sharing their ideas and show what they are doing.

The crowd was the typical London mix and some unexpected faces: Yahoo peeps, BBC peeps, Clearleft from Brighton (Andy Budd, Richard Rutter, Jeremy Keith with his lovely wife), local bloggers and web developers and some less obvious people like Ian Lloyd and James Edwards.

Opera provided the good ingredients of any Webdev meeting:

Opera Schwag

  • Schwag in form of free T-Shirts, squishy balls, badges (stating “I love Opera” and thereby being great to sell in Covent Garden at the end of a performance if you are ever really skint) and more things I cannot remember right now as I left the bag in the office when I picked up my laptop.
  • Drinks and fingerfood of the free variety. Originally every visitor had 2 drink vouchers, but the later the evening got the more of those free papers appeared miraculously (I just found two in my pocket).

The presentations had all good information, but you could see that Opera build browsers and don’t sell other products for a living. A highlight was Jeremy Keith talking about the web and HTML as a brilliant idea without his presentation or notes as his laptop died on him right at the wrong moment. His talk was a proof that if you take the instructions away from an Irishman, he’ll turn into an instant poet. It was a joy to see.

Technically there were some interesting bits to see:

  • As hinted on barcamp, Opera is working on a 3D SVG engine inside the browser, which would allow for OpenGL style apps. The 3D “Snake” adaptation they showed was a bit on the flickery and slow side, but that may be due to the presentation machine or the lack of buffering in the code.
  • Opera finally has some very impressive debugging tools that allow you to see the code as it is rendered, change the DOM, show the dimensions of an object and even use a picker to choose a colour from the page to re-use in CSS. Finally we’ll be able to fix the odd rendering bugs Opera shows from time to time easily and without guesswork.
  • One really impressive bit was to see a “labs” version of Opera that did not only do the dynamic resizing of the whole document to browser window size, but also allows you to zoom in on certain elements, effectively turning the browser into a screen magnifier.

More talks were about the History of Opera, how good it is on mobile phones, what might be in store for the mobile web and that widgets are a revolutionary great idea. Opera has been pushing their widgets into interesting environments (the Assembly demoscene event in Finland being one), but personally I used them to play some games but I fail to see the point. I don’t use the OSX Dashboard widgets, the Firefox, the Google or the Yahoo ones either. I don’t know the numbers of how many people use them but I get the impression that this novelty can wear off quickly.

In the following Q&A session I got to finally get an answer why Opera for years pretended to be MSIE - reason being that “servers” like IIS4 would not give them any HTML results if they hadn’t some recognizable ident in the navigator string (Mozilla or Explorer).

All in all I’d say it was a good meeting and made me aware of some of the things Opera is doing that I didn’t know about. It also showed me that they mean it when they say they want to support web standards and it gave me some good contacts to whinge at when some of my stuff will not work in Opera.

What makes a good web site?

Saturday, October 14th, 2006

Disclaimer: This is a list that will be part of the upcoming book for Friends of Ed about Web Development with Web Services and APIs. I thought it’d be interesting to preview it here and see what you think.

[link:http://cabanadigital.com/weblog/2006/10/14/%c2%bfque-hace-a-un-buen-sitio-web/#more-173,en español]

Following are some ideas about what makes a successful web site in the web environment these days. Some of this may sound very obvious, but it is a good idea to remind ourselves of the benefits of these ideas.

It is about content.

If you don’t have any interesting content (or content that is also available on hundreds of other sites) you will not reach many people no matter how much you polish the surface of your site.

It is about sharing.

If you put content on the web, it is there for people to see, download and maybe use. You can protect your rights by choosing and displaying a license agreement and copyright information (there is a great “create your own license” tool available at Creative Commons) and there is simply no sense in trying technical tricks to prevent people from downloading your images or copying your texts. When you develop sites these days, you will use a lot of content and programs other people developed. It is only fair to return the favor.

Without people sharing their tools and content for free the web would have never grown as big and exciting as it is now.

It is about access.

If your content is made available to everyone on the web regardless of ability and technical environment you are much more likely to be found and talked about than when you try to block out groups of users or expect a defined technical environment. Your computer is not a representation of everyone on the web and you simply cannot expect people to get a larger monitor, faster computer or install certain browsers or plugins just to access your site. If your content is interesting enough, they may, but I wouldn’t count on it.

It is about communication.

Allow people to communicate with you. Let them comment on your information and offer them easy ways to connect to you. Offer your information in easy to syndicate formats (like RSS) and contact and link to other sites with similar information. This may sound counterproductive – after all, why should you send them visitors you want to keep – but these other sites are likely to link to you as well. The more sites link to you, the higher you will climb in search engine results.

It is about availability.

This may sound paradox but spreading your content on the web and different sites may be a much more efficient way to make it available than keeping it on one server. Of course you need to use the right sites to do so. We live in exciting web times where you can upload your photos to flickr and connect to other picture enthusiasts, upload videos to youtube , share links at del.icio.us and documents at writely.

All of these sites are backed up by large corporations with good servers and even if your site is down for a day, they’ll still be out there. Advertising your site as the source of these bits of data on the other sites will drive people back to it and you can use the APIs they offer to easily include the data in your site.

It is about patience.

As with anything that is really good, you need to spend some time on a great web site.

You will not skyrocket the search engine results in the first few weeks (sometimes even months). Don’t get discouraged by that, instead try to increase your communication with other people in your area of interest – they will link you and you will show up in the Googles and Yahoos of this world.

Having a web site also means that you will get a lot of feedback that is annoying or plain rude. Don’t dwell on that, but pick out information that may be related to real issues and solve these instead. However, it is your site, and there will always be people who don’t like what you have to say or offer – no need to please everybody.

It is about knowing your audience.

Your assumptions of how a web site in your area of expertise should look like might be totally off the mark. Ask people who are interested what they expect, or ask them what they hate about other sites that offer similar content.

It is about playing to your strengths.

If you are not good with words, don’t try too hard but stick to information and what excites you about the subject your site covers. You can also get help from someone close who can put your ideas into words. The same applies if you are good with words but bad with design or structuring information. Don’t try to tackle everything yourself, but instead get some peer review and input to make the end product talk for itself.

It is about offering instead of pushing.

Don’t force anything on your visitors. Videos and Music should not start unless the visitor chose to start them. In addition, offer them as downloads. If you link to PDFs or other media formats, say so in the link as a lot of people will choose to download these instead of reading them in the browser.

It is about keeping it simple.

Don’t try to overcomplicate anything on your web site. Make it obvious what the menu is and what is available. Make it easy to search the site and to contact you. Make it obvious who is behind the site and what the purpose of the site is. Be honest about yourself and people will like you for it. There are far too many one-man-show web sites trying to appear as a whole corporation or network on the web already.

Read your content over and over again – any word that can be omitted or any sentence that could be phrased easier is a win. People on the web are busy and not all of them are native speakers of your language. Don’t make it hard for them.

Furthermore, the web is a secondary media. People do other things while reading your site and don’t take all the content in – instead they scan for interesting words. Steve Krug explains this in How we really use the Web.

It is about advertising without annoying.

Make sure you pick an easy to remember URL and advertise it. With this we don’t mean buying advertising space, but doing simple things like adding the URL to your email footer, stationary or other promotional material. Footers reach further than you may think if you participate on forums and mailing lists.

[update]

It is about freshness.

A web site that doesn’t change at all needs to have amazing content or it will not get any visitors in the long term. It is crucial that you get initial visitors, but also oimportant to keep them coming back, talk about your offers and attract new visitors. Update often and with good content and people will come back. If you use a blogging system as your CMS updates also mean that the RSS feeds change and subscribers get automatically notified.

Tackling automatic field focus usability issues

Monday, October 9th, 2006

One of my greater annoyances on the web is sites that automatically focus a form field when the page has loaded. Supposedly this should make it easier for you to use the product, as you are to log-in anyways, but there is one real problem with this.

If you try the demo page for a normal autofocus and start typing in your details, it can happen that you are already in the middle of your password when the page is ready and the focus gets shifted to the email field. I have seen this happening in Internet Cafes, where people inadvertedly revealed their passwords that way.

The reason is the simplicity of the scripts applied to focus the field when the page has loaded, which sometimes is as rudimentary as:


window.onload = function() {
document.getElementById( ‘email’ ).focus();
}

Now, I wondered how to make that better. A simple solution would be not to use onload on the window (and thus waiting for the document and all dependencies to be loaded before you proceed) but use onAvailable or equivalent solutions on the element itself instead. However, if the element to highlight is not the first, that would still make it possible to enter other data until the focus gets taken away from you.

Next I considered to read out the event target when the page has loaded and assume that if the target has a node name, someone is entering data. That proved to be to flaky (as [link:http://setmajer.com/,Chris Kaminski,colleague met] predicted, darn you!) as MSIE told me undefined whenever.

Thus, I dug deeper into my memory of form elements and unveiled the idea of value versus defaultValue. The latter, rather less known is the value set in the HTML attribute, whereas the value is the value of the field. Value changes when the user enters data or changes the element’s state (in case of checkboxes), but defaultValue doesn’t.

Using this information it is easy to set up a better autofocus script that will not focus the element when any of the data in the form deviates from the original settings in the HTML.


window.onload=function(){
var isfocused = false;
var elms = [‘email’,’pw’];
for(var i=0;i var elm = document.getElementById(elms[i]);
if(elm !== undefined){
if(elm.value != elm.defaultValue){
isfocused = true;
}

}
}

if(isfocused != true){
document.getElementById(‘email’).focus();
}

}

All you need to edit is the elms array listing the IDs of all elements to check :-).

Occulus Reparo

Monday, October 9th, 2006

My glasses just snatched and broke in two pieces this morning, which is why I had to feel my way to the office from the opticians. I now can do my own accessibility testing for the next few hours until the new pair is ready.

Amazing how much font zooming can help when you really need it :-)