70km and still kicking

Today I took part in Sydney Spring Cycle organized by Bicycle NSW. Sydney Spring Cycle is an annual event. It takes about 50km from start in North Sydney to finish at Sydney Olympic Park in Homebush.

It was my first SSC ride and it was a very pleasant ride indeed. My friends and I aimed for an early start at 7am. This meant I had to get up at 5am to get ready an be in North Sydney on time. The weather was cold and it rained a bit. We warmed up quite quickly though.

Later during the day the sky cleared and it was a beautiful day to ride. I really enjoyed a company of thousands other rides. I rode my old mountain bike and my friends were on road bikes. To my surprise I managed quite well. I was able to keep up with them (I think they just spared me).

50km seemed like a lot. I usually ride 10km to work in Sydney CBD, which takes me half an hour. When we reached the 40km milestone, there was a sign "10km to go." By that time it seemed like nothing.

In fact, we had enough energy for a short sprint to the finish line. It was a great day out. I felt so energized that I also rode home from Homebush, adding few extra kilometers to the count.

At the end I did 70km. Here is the proof.

I created a Sydney Spring Cycle bicycle path on Bikely, if you are interested and would like to see it on Google map. The photos I took today can be found at Flickr.

Thank you all who organized such a great event! I'll be there next year too!

Microformats - hCard

What is new on my blog today? I added my contact information into the template. Since I learnt more about microformats at the Web Directions conference, I used hCard microformat. No, you cannot see it as the style on that DIV is set to display: none and that means it's there but not visible.

If you have Tails or Tails Export extensions for Firefox or Flock browsers, you should be able to see these normally grey icons get some colors .

When you click on Tails you get

When you click on Tails Export you get

All I added was this:

<div class="vcard" style="display: none;">
 <a class="url fn" href="http://hanuska.blogspot.com/">Dushan Hanuska</a>
 <div class="adr">
  <span class="locality">Sydney</span>
  <span class="region">NSW</span>
  <span class="postal-code">2000</span>
  <span class="country-name">Australia</span>
 </div>
 <span class="geo">
  <span class="latitude">-33.879176</span>,
  <span class="longitude">151.212044</span>
 </span>
</div>

If you want to add your hCard onto your page, you can create one using hCard Creator. It's quite simple and gives only the basic options, but it's a good place to start.

Cool Links from Web Directions South 2006

• Meebo – on-line chat client

  • http://www.meebo.com/

• 37 Signals – Basecamp, Campfire, Backpack, Writeboard, Ta-da List

  • http://www.37signals.com/

• Wanna know what people said in Manhattan? Overplot

  • http://persistent.info/overplot/

• Banned books

  • http://www.applefritter.com/bannedbooks

• Map World of Warcraft

  • http://mapwow.com/

• Interactive Transit Map

  • http://www.brail.org/transit/nyc.html

  • http://www.brail.org/transit/london.html

• The World's most talked about videos – Viral Video Chart

  • http://www.viralvideochart.com/

• Chicago Crime – a free browsable database of crimes reported in Chicago

  • http://www.chicagocrime.org/

• Zoom In – the best way to explore Australia and New Zealand

  • http://www.zoomin.com.au/

  • http://www.zoomin.co.nz/

If you have any other cool link related to cool web sites, post them in your comment to this blog post.

Designing for lifestyle

Getting inside the minds of customers is essential for achieving the "aha" effect. More importantly, don't listen to what your customers say! Observe what they do!

When there are people and machines we get four different types of communication:

• human to human: touch, words, voice;
• human to machine: input devices, touch (mouse, keyboard);
• machine to machine: binary communication, exchange of XML documents;
• machine to human: GUI communication.

When it comes to machine to human communication, is it important that we pay attention? There could be messages such as an engine light turns on in the car. It is our role, the role of software developers, to make these messages user-friendly. Otherwise the messages will be ignored or overlooked.

We have seen that AJAX can fail in keeping the user informed - the message does not make it through. It could be a case when a user votes on something, the request is made but the page does not get reloaded, so we need to highlight the fact that the vote was processed. The question is how to do it so the user sees it without affecting other "more important" things that the user is currently doing on the (same) page.

There has been a lot of work done in improving the user experience. Starting from Eliza chat bot and the subservient chicken in 2004 to today's websites that are very user-friendly: JetBlue, TiVo, Google, Apple.

It is all about designing an appropriate user experience. It's also about finding the fine line between practical and emotional (are you emotionally attached to this, do you find this useful, etc.)

Practical

• learnable
• cost effective
• functional
• meets the needs
• trustworthy

Emotional

• customizable
• unique
• aesthetic
• meets desires
• compelling

The real deal is that one you are able to break into people's habits and make them to use your application as a part of their daily rituals (not really an addiction), you will be successful.

Some of the interesting statistics mentioned were how the usage of mobile phones changed people's rituals and how these technologies saturated the market (Japan 90%, Korea 83%, Europe 68%, US 48%, world-wide 28%). I can see a great potential for growth here in Australia too. And there are some serious money too. In the US, 12-18 year-old kids spend around $4900 a year, which 48% of that is on mobiles (in China it is less than $100 a year). It was also interesting how people use their phones/devices. In US they are called cell phones (amongst popular ones are Palm and Blackberry). In EU and Australia they are called mobile phones and other brands and models are more popular (Nokia, Ericsson). In Singapore however, people may even have two of them. One that is more of a fashion statement and may not even look like a phone.

There is also a gap between what people think and how people live. As an example, you think that all people would wash their hands after using the toilet, but not all people do. We know that we develop applications and we can think of the ways people will use them. But people are very creative and they use our applications even in unimaginable ways. It's about going through the stages:

"I'm ready to try this out" -> PERCEPTION -> INTERACTION -> INTEGRATION -> "This works for me!"

And what is next? Web 3.0. Global brain = something like a combination of shared data and a search engine aggregating the knowledge spread all over the web.

You-biquity

From my notes on Mark Pesce's presentation on You-biquity at Web Directions conference.

Virtual reality isn’t the television of the future, it is the telephone of the future.

Part 1: Human Essence

Right now anything is possible. Humans and chimpanzees are at least 98% identical. We have now found the gene that gives us a bigger brain than our chimpanzee cousins. Both chimps and humans are incredibly social creatures. These social qualities we have as humans are essential to our lives. We build our relationships, we build social hierarchies, we are very social. Social modeling happens in the neocortex of the brain, of which we have more than any other animal. The Dunbar Number: the number of people you can hold in your head is directly relative to the size of neocortex. The reason we have a bigger brain than chimpanzees is to hold a bigger social network in our heads and that is what being human is all about.

Part 2: Virtual Networks

Social network needs to be fed fresh data, otherwise it dies. We need to spend time to feed them the data and the time is the non-renewable resource in the 21^st century. My social network could be used as my spam filter – if an e-mail is not from a third-degree contact then it's highly suspicious. Wouldn't that be cool! E-mail forwarding is an ad-hoc social network. We find things, we filter them and then we forward them – three F's. For every moment we spend on-line we create a massive amount of data – a data shadow. This data tells a lot about us but at the moment all of then is wasted, not used at all. The mashups are in the right directions, but we need more to use our data to the maximum. The Web is the universal glue.

Part 3: The Center of the World

People form a strong relationships with their mobile phones. The phone has become seamlessly integrated into our lives. And the relationship is very emotional. We say we don't have an emotional relationship with our phone but we all lie. Just drop your phone down to the toilet or on the floor and see what happens. I lost my social life! The phone ultimately meets the physical and virtual worlds. For most of the time the phone does nothing. It just waits. What a waste! Imagine if we could use it as a device that listens actively and automatically connects us with the friends that are near.

The street finds it’s own use for things, uses its makers never intended.

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!

Hijax

How can we make feature-rich web site and also offer the way so people with disabilities can access it?

The old way it to produce two version of the website, e. g. Flesh version and HTML only versions. The big drawback of this approach is that the user is presented with the choices first and only then the user enters the website with content. Or some sort of client-side script is run in order to determine the capabilities of the browser. There is no way easy way check the user this way (e. g. the user is blind). Therefore we have a behavior that can be switched ON or OFF.

A better way is progressive enhancement. Initially we have content that we want to publish or present. Then we have the markup – (X)HTML. We add the presentation layer – CSS. At last we add the behavior on top – DOM Scripting.

We still have to answer whether we have some of the functionality in-line or external (*.css and *.js files).

The HIJAX way is :

• Begin by creating a website using traditional page refreshes,
• Data is sent to the server via links and form submissions: the server returns updated pages,
• Intercept (hijack) those links and forms using (unobtrusive) JavaScript,
• Send that data to XMLHttpRequest instead of the server,
• The server returns just the information that's required instead of an entire page,

We have a choice of data format:

• XML + DOM methods
• JSON + eval()
• HTML + innerHTML

Another important thing is that the browser is an unpredictable environment. The user can be running on any OS with any type of web browser. The only thing that we know is what is on our server. Therefore all business logic should be kept on the server side. For example a table sorting can be done on the client-side by JavaScript. This would off-load the server, but we would have to face the challenges with the differences between JavaScript support on various browsers. On top of that we would have no feedback about the usage of table sorting. If this logic was on the server, we could collect the data about table sorting and improve the website accordingly.

The main benefits of using Hijax approach are that we do not need to spend time building a non-Ajax version. Our web application will be still accessible in the usual way. We do not duplicate the logic (client-side and server-side validation) and the links are spiderable and potentially bookmarkable.

HIJAX is a term coined by. I learnt about Hijax at the Web Directions conference. Jeremy Keith presented Proressive Enhancement with Hijax. He is an author of DOM Scripting: Web Design with JavaScript and the Document Object Model and currently working on his next book Bulletproof Ajax.

Microformats

In these days we turn for the answers to our questions to the Internet. Sometimes we even refer to it as the wisdom of the crowd.

Take IMDB for example. It is a centralized solution. When it comes to the reviews they are written by the people. But who owns these reviews? Are they real? Can we trust them? Google is the answer to all our prayers. Or as a big sign in front of one church said “Google does not have the answers to all questions.”

We saw the raise of open source. Then we also had a raise of open standards for document formats. They are getting more popular and also more important. The next step will be the open data. Standardizing the data format will also allow for more mashups. Very popular type of mashup these days is the combination of maps and some other proprietary data. If two people publish the data in two different formats, none of them can make use of the other.

Web has evolved. The move is from HTML to XHTML. The benefits are such as that microformats are simple data formats, HTML based, based on existing standards and existing development practices. To mention a few, there is hCard (based on vCard), hCalendar (based on iCal), hReview, hListing- for classfields, hResume and many more.

I also discovered that there are some Firefox extensions that discover microformats on the page and allow the user to see them. One that is worth mentioning is Tails.

Where to do from here? We all publish data on the web. More microformatted data we publish more options of their usage will be present.

More information about microformats can be found at microformats.org, microformatique.com. Read about how to highlight microformats with CSS. New book on microformats by John Allsopp will be coming out in early 2007.

Web Accessibility

I attended the Web Directions conference last week. One of the eye-opening sessions (at least for me) was “Accessibility 2.0” and “Designing for Accessibility: More simple techniques that make a difference” by Derek Featherstone from FurtherAhead.

Accessibility is about allowing disabled people to use our website. I have never worked on a project that would require access by people with disabilities. I think it really takes a real life experience to realize what these people must go through in their everyday lives. Why should we make it more difficult for them with our web applications? Do you know how many web applications stop working when you switch JavaScript off? You would be surprised to see how big number that is.

There are some guidelines that we can follow in order to make our websites more accessible. If we remove frames, replace menu images with menu using text and CSS, don't use tables for formatting, we make a big step towards accessibility of our websites. Another thing is having PDF documents on the website. PDFs are not accessible and they also need to be downloaded in order to read them and find out that it's not the document that we wanted. Another place for improvement are the web forms. Fields should have labels.

The phrase “people with disabilities don't go to our website” is just a nonsense. They do and they can also bring some revenue. Take for example Tesco Access. Grocery shopping on the web is an ideal service for visually-impaired customers. Imagine trying to tell a can of beans from a can of tomatoes on the shelf if you can't see the labels. Then think about having the description read to you by your computer. Their website was designed for accessibility and because of this feature it boosted revenue by another 4%.

Accessibility is personal. Removing barriers, user testing is personal.

Where do I go from here? Well, I will start at the roots – W3C Web Accessibility Initiative and Section 508. Then I will read Dive into Accessibility book that according to its website answers two questions “Why should I make my web site more accessible?” and “How can I make my web site more accessible?” Australia with its Disability Discrimination Act is six years ahead of USA.

I also found The Illinois Center for Instructional Technology Accessibility very informative. They list the best practices, have software for download (Accessibility Extensions for Mozilla/Firefox lives here) and lots more. Another great resource for developers is Evaluating Web Sites for Accessibility with Firefox by Patrick H. Lauke.

Some of these guidelines are very much a checklist approach. User experience is more important. Therefore we need to sit down with the real user, the one that will be using the system, and work together in order to fulfill the user's needs and expectations of this system.

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

Quotes that made me laugh today

A funny quote that came out of Web Directions conference.

The web isn’t a power drill! - Andy Clarke
It’s a series of tubes! - John Allsopp