Visual Event

This is a really neat tool by Allan Jardine, a UI developer! It makes it so easy and visual to see what even handlers are attached to the elements of a page. Great addition to my toolbox!

When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.

Read the whole article about Visual Event

Colors for the web

Do you need to find interesting photos that would enhance your website and would perfectly match its color scheme? I found a perfect tool for that job.

Multicolr Search Lab by Idée Inc.

And these are the images that match colors of my blog:

1. orange
   


2. orange & blue
   


3. blue
   

Track 404 with Google Analytics

For many of us it is important as well as interesting to see where our customers go, which pages they visit. Tracking the pages is quite simple with Google Analytics. However the question is: "How do you track the pages that do not exist?"

If you configure your server or web application to handle 404 error - page not found (I strongly recommend you do) you will have a template page that is displayed every time the user navigates to an invalid URL - a page that does not exist.

So, how do we do this? How do we track our customers that somehow got lost and landed in a location that does not exists, at least not as a valid location that would provide them with the information that they expected.

It's quite easy. If you search for more information you may come across Google Analytics blog post Tracking 404 Pages, which is now outdated as the new ga script is recommended instead of old urchin. The best source for the answer is Google documentation itself. Simply follow these instructions.

<script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-xxxxx-x");
    pageTracker._trackPageview("/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);
</script>

This code sends a virtual pageview of "/404.html?page=[pagename.html?queryparameter]&from=[referrer]" to your account, where [pagename.html?queryparameters] is the missing page name and referrer is the page URL from where the user reached the 404 page.

Then simply look for /404.html in your Top Content report.

What The Font ?!

I am creating a website for my wife's coffee shop and I needed to find out the font type they used on the signs and the menus. I was really wondering how I could identify the font.

It turned out to be quite simple. Thanks to WhatTheFont?!

The process was following:

1. This morning I snapped a photo of the sign,
   
2. Slightly modified it in GIMP,
   
3. uploaded it to WhatTheFont?!,
4. and voilà, the font is Isonorm
   
   

Yeah, I know. It is not quite quite the same, the letter "r" looks a bit different, but other than that, it's a perfect match. I am quite happy with it. Much better than going through thousands of fonts manually.

hCard microformat validator

I was creating a contact page for a website and I wanted to use hCard microformat to encode the address, telephone, fax and the geo location. After I created it, I looked for a way to quickly validate it and I found

hCard microformat Validator 1.0

What a great service! I must tell you, this service is super easy to use. Just type in a URL of the page that contains hCard data and get the results instantly. I read the spec but... I still made few mistakes that were promptly brought to my attention.

I made a typo and instead of adr I used addr, which rendered couple of nested elements invalid. Ok, that was a quick fix.

The telephone number is shop's (this website is for a retail store) and I marked the telephone number as shop, which is invalid. The valid values are: home, work, pref, fax, cell, voice, video, pager, car, msg, modem, bbs, isdn, pcs. Another easy fix! The same went for the fax number.

Lastly, the email address that I entered was of a domain that did not register itself yet. The message I got was:

Lookup of e-mail's domain “notyetregistered.com.au” failedVerify that e-mail address is correct.

Wow, I did not expect such a thorough check!

Another good point for this validator is that it not only tells you what is wrong, but it also links to a FAQ page where the problem is explained.

Well done and thank you! Now this contact page validates 100%!

ExitReality launch

ExitReality, the company I blogged about before, is having a public launch event next Thursday 18th September 2008 at Federation Square in Melbourne, Victoria (map).

Wordle

This is my blog through Wordle

Firefox 3

I, like many others, downloaded Firefox 3 yesterday. It was an attempt for a Guinness World Record titled Spread Firefox. The result was more than 8 million downloads in a single day. Quite impressive!

I did not have time to install it yesterday as I was on a holiday, busy attending Google Developer Day 2008. See my photos on Flickr. I met there with few fellow developers, like Dmitry Baranovskiy, who you can see speaking at Web Directions South soon and Carlos Mari, Director of Carlos Labs.

So I installed Firefox 3 today. I must say that I am quite impressed with the browser itself and with the ease of upgrading. I expected few hiccups on the way but it was all smooth.

Out of my 31 add-ons installed on Firefox 2 only six do not work. The six that no longer work are:

• AutoCopy
• ColorZilla
• EROnline (Exit Reality)
• Firebug
• Google Browser Sync
• Link Alert

I am going to miss AutoCopy and ColorZilla dearly. I am sure that Exit Reality will release a new plug-in real soon.

And for Google Browser Sync - it's a real shame that this is discontinued. But I knew this in advance, therefore I backed up my bookmarks and returned back to my favorite Foxmarks

In case you wondered what add-ons I use and currently have installed, here is a list:

• Download Statusbar
• Dummy Lipsum
• Dictionary English (AU)
• Dictionary English (US)
• FlashGot
• Forecastfox
• Google Earth
• Google Gears
• Google Notebook
• Greasemonkey
• Html Validator
• IE Tab
• Live HTTP Headers
• MeasureIt
• meebo
• Mouse Gestures
• Operator
• PDF Download
• Personas for Firefox
• Quick Locale Switcher
• Redirect Remover
• Total Validator
• User Agent Switcher
• Web Developer
• YSlow

Happy browsing, everyone!

PS: I also installed Skype 4.0 and it is very sleek!

ExitReality goes to Beta

ExitReality finally flicked the switch this week and went to Beta.

ExitReality is an exciting new social media platform that aims to improve your online experience with an enhanced 3D, multi-user, immersive messaging environment.

Duncan Riley reported on TechCrunch in ExitReality Turns Social Network Profiles Into 3D Spaces that ExitReality promises to transform the social networking experience by offering virtual versions of every social network site profile.

ExitReality works with leading global social media sites Facebook, Myspace, Friendster, Hi5, Orkut and Bebo and is launching soon.

As published in JDJ: Carl's Jr. and Hardee's Web Sites Among First to Go 3D

For the initial launch, each MySpace member gets a 3D apartment that automatically includes their music, friends, comments and videos, and can be decorated in limitless ways. Using 3D avatars, a user can don a logoed jacket, meet friends at the Carl's Jr. or Hardee's virtual restaurant or invite friends over to the burger-themed social-network living room. There, they can ride a mechanical bull, like the one in the famous Western Bacon Cheeseburger ad, play the entertaining Burger Slayer game, as well as pick up 3D widgets such as TVs, arcade game machines, furniture, and even 3D living room or restaurant layouts to decorate their own pages.

This was also noted in Duncan Rileys' ExitReality Launches With Carl’s Jr Deal

Another interesting aspect is the way the platform works; unlike Second Life that relies on centralized servers, the ExitReality plugin renders the page based on the details of the page, so it doesn’t need to rely on centralized servers (the only aspect that would be lost in the case of downtime would be chat). Further as users interact on and around each page, those visitors are counted in local logs, so a website owner doesn’t lose traffic; in effect this is a visual layer the browser sees but with the original content at the original page.

Have a look at Carl's Jr. or Hardee's.

I have already signed up. Have you?

Happy 25th Birthday, Smiley!

Happy birthday, Smiley! :-) just turned 25!

It was a serious contribution to the electronic lexicon.

:-)

Twenty-five years ago, Carnegie Mellon University professor Scott E. Fahlman says, he was the first to use three keystrokes - a colon followed by a hyphen and a parenthesis - as a horizontal "smiley face" in a computer message.

Read more in the Digital smiley face turns 25 article from Sydney Morning Herald.

Google Developer Day 2007 in Sydney

I attended Google Developer Day in Sydney this week. The main page describes the content of the sessions in Sydney. It also links to related video records that can be viewed at YouTube.

The event was well organized. Originally, this was meant to be a 100 people event. However due to its popularity, the event was fully booked within 20 minutes after the registration opened. Later Google decided to change the venue to Australia Technology Park and were able to accommodate all people from the waiting list.

One of the biggest announcements was Google Gears (BETA). It is available for Windows, Mac and Linux. Google Gears is an open source technology for creating offline web applications. As published in Sydney Morning Herald:

The Gears technology promises to give Google a better platform from which to go after Microsoft's very lucrative Office franchise.

Here is a blog post that will get you started with Gears.

Another announcement of the day was Google's purchase of Panoramio, a website that links millions of photos with the exact location where they were taken.

Google Web Toolkit (GWT) got an upgrade as well. GTW 1.4 Release Candidate is a major upgrade to the Google’s open-source framework for writing AJAX web applications in the Java programming language. Read more about its features at ZDNet blog post by Ed Burnette: Google Web Toolkit 1.4: "Have to see it to believe it".

Google Web Toolkit had brought Google's AJAX development out of the dark ages and into the 21st century.

said Lars Rasmussen in his AJAX is painful, painful, painful talk.

Also announced was Google Mashup Editor - experimental product, online application to create mashups. It is currently in beta and access is limited to small number of developers during this testing period.

A great combination of Google's APIs are Google Mapplets. They are mini-applications that you can embed within the Google Maps site. Then they can manipulate the map using Javascript calls that are derived from the Google Maps API. The preview maps site also has Street View, which is very cool and was enabled just few days before Google Dev Day.

When we arrived we received a "speedgeeking" card, which listed six URLs of Google mashups. These six sites were presented live on big screens in the lunch area where everybody had a chance to see the products, talk to the authors and cast one's vote. At the end of the day, Property Guru took the prize home.

And if it was not Google, there would be no search. I was strongly reminded that Google is the company behind the most popular search engine when I saw this card on the tables.

So there you go Google! I blogged and published my photos with GDD07 tag. Go and find me!

Google Reader just got better

I use Google Reader for reading blogs. It has become my daily chore as I need to keep track on things happening around our office (we blog internally and externally) as well as other things of my interest.

It was brought to my attention that Jon Hicks created new skin for Google Reader. I thought I would have a look.

I had to install Stylish extension for Firefox first. Then I added a new style that I downloaded from Jon's website. And the result?

Before:

After:

I absolutely love it!

It has made reading blogs so much better. Why don't you give it a try?

Blog Update

I have added subscribe now section on the left, so now you can easily bookmark or add my blog posts Google, My Yahoo!, Newsgator, Feedlounge, Netvibes and Bloglines.

Another useful feature that I added is the browse by category, which shows the labels I used in my posts and their frequency.

My plan is keep improving the usability of this blog. In the next stage (if I find some free time) I'd like to add those little icons for digg, reddit and del.icio.us.

Lastly, if you did not know it already, my blog features microformats. So I guess my blog can be used as an example of how microformats will simplify the web.

What I did not know about favicon

Long time ago I learnt about that little file that can make your website special. I'm talking about favicon or favorites icon. This icon file is used when a page is bookmarked in IE5+ and Firefox.

I knew that this file had to be located in the root of the web server. And that was good enough for me at that time. Until today I did not know that the location of favicon.ico file did not have to be the root directory only.

Favicon can be associated with a webpage, not only a website. That means two things:

• favicon placed in the root directory of the webserver is used with all web pages, no coding is necessary;
• favicon can be placed anywhere on the webserver and must be referenced from the page in order to be used, favicon is then referred to as page icon.

All you need to do to customize the page icon is to put the following line into the header section of your page:

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">

where the value in href points to the location of the favicon you want to associate with this page.

Few facts about favicon:

• ICO file can contain multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file;
• image can be also any image format supported by web browser; e.g. GIF, PNG;
• favicon.com is a website dedicated to favicon, it also includes an online editor.

So the good news is that literally every page on your website can have its own icon (which would be a nonsense, but makes a total sense for web applications running on the same server).

Web APIs

Web APIs are sexier that desktop APIs. Having an API allows the external developers to access your data or your services in a smart way. They can they use your data or services in ways you would not imagine.

Currently it is very popular to use the data with mapping APIs. At the moment the Google Maps have the best and most detailed images of Australia. Microsoft competes with Virtual Earth, they have good images, good maps, but a very restrictive licensing. Yahoo! Maps has also good images and also gives a choice of Flash or JavaScript. They also provide an option of a static image. The downside of Yahoo! Maps is the lack of mapping information.

Another popular category of APIs is Search. Search APIs can provide cache access, spell-checking, content analysis and much more. Amazon's API offers search on prices, images, customer reviews and affiliate sales.

A good resource for Web APIs is ProgrammableWeb, which acts as an encyclopedia of available APIs and how people use them.

Mashups are novel UI that enhance your data, e. g. by combining your local data with mapping information. Chicagocrime.org – one of the first map mashups was built prior to Google’s API being made public. It’s not all about maps – TagTV, Viral Video Chart, BlueOrganizer, Salesforce Adwords.

There are two general types of APIs: interfaces (maps) and data types (the rest). For example Google Maps are very simple to include; just drop in the script, add four lines of JavaScript and you are done. The other APIs are simply a request to a web resource via HTTP. XML is often used to return the result, though JSON is becoming more popular. These can also be called directly from JavaScript using the XMLHttpRequest object.

The current limitations several. You are limited to the functionality that the provider makes available, unless you screen scrape. There are also concerns with automated collection of personal data, licenses and the changes in terms of use (what will you do if Google Maps is no longer available). We also need to standardize. There are some APIs available that abstract the mapping API access and allow you to switch between Google Maps, Yahoo Maps, etc. Cross domain AJAX is also a security risk. Images, CSS and JavaScript can be loaded from other damains, but HTML or XML can not. A workaround could a proxy server, but this could be a bottleneck if not cached. JSON-P is another alternative, currently supports GET requests, but fails silently if you get the API URL wrong.

In the future we can see ContextAgnosticXmlHttpRequest, enhanced JSON – JSONRequest. Web APIs are all about work we do not have to do. So open your data, offer an API, let the others do the work!

Jeremy Keith presenting in Melbourne

WSG and Web Directions are hosting a presentation by Jeremy Keith.

When:
Thursday 05 October 2006 at 6:30pm

Where:
Centre for Innovation & Technology Commercialisation
Level 1, 257 Collins Street
Melbourne VIC 3000