Things to use, find

and share.

Christian Heilmann | http://icant.co.uk | http://wait-till-i.com

Yahoo7 Open Session, Sydney, Australia April 2009

Hi there, I am Chris.

I am right now on a pretty mental schedule giving talks down south.

Last week I flew from home (London, UK) to Hong Kong, Taipei, drove to Hsinchu, back to Taipei, onwards to Sydney via Hong Kong, then to Melbourne and now back to Sydney.

All with the mission to share good info to make web development easier.

Doing that and not sleeping much does things to you.

You see hidden messages.

...and you misinterpret others.

I live in London, England

Spring Summer

AutumnSummer

Winter

*

The snow flake that spells the end of public transport

Originally I am German

FIRST!

Humour.

I ♥ building great interfaces to access and find data.

And I love making them work for everybody.

The problem is that for years it was quite a job to make this is a reality.

Nowadays we are very lucky as developers.

It is increasingly easy to develop great products.

The trick is to build them with parts that are proven to work.

And these parts are readily available for us.

Over the last years a revolution happened.

Companies and individuals started realizing the power of giving things out to the public.

By allowing people to use your products and keep an open ear you have a great opportunity to improve them.

And this is exactly what we do at the Yahoo Developer Network.

Basically almost everything you see in use on Yahoo’s sites is available to you to build your solutions on.

This starts with the thing great products are built on: user research.

http://developer.yahoo.com/ypatterns

The pattern library contains information on how users told us they reach their goals on our sites the easiest.

The information is licensed creative commons, which means you can use and alter it.

If you want to plan your interfaces based on these results, you even get them as stencils.

http://developer.yahoo.com/ypatterns/wireframes/

Once you planned your product, the next problem is ensuring it works.

For this, we need to somehow make sense of the crazy world of user agents (browsers, really).

Trying to build web products that look and work the same for every browser out there is not possible...

...unless you limit yourself to a terrible user experience.

As we didn’t want this, we came up with a methodology to define “support”.

http://developer.yahoo.com/yui/articles/gbs/

Once this was done, we had a chance to fix problems and build a solid base to work on.

http://developer.yahoo.com/yui/

The Yahoo User Interface Library starts with making the creation of predictable designs easy.

CSS

CSS reset gets rid of browser differences.

CSS fonts allow you to create predictable and scalable typography across browsers.

And CSS grids allow you to create multi-column layouts.

http://developer.yahoo.com/yui/grids/builder/

Even for *very* lazy developers:

Once the CSS was less confusing, we tackled JavaScript and browser confusions.

And with this arsenal we built reusable widgets to mix and match.

http://ui.jquery.com/

http://ui.jquery.com

All of the widgets can be extended and styled the way you want them to.

http://developer.yahoo.com/yui/articles/skinning/

You can extend the widgets by listening for events that happen to them.

http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr_log.html

They are built with ideas I very much subscribe to, like progressive enhancement.

Without JavaScript With JavaScript

http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html

Without JavaScript

With JavaScript

http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html

We provide the bricks, you build the product.

http://www.flickr.com/photos/seven13avenue/2080281038/

All of this is open source, fully documented and you can either host it yourself or get it from a high speed distributed network (even Google’s).

Another thing to consider is how your products perform.

Fast and smooth products make users happy.

http://developer.yahoo.com/performance/

You can test your products easily with YSlow.

http://developer.yahoo.com/yslow/

This solves most of our issues these days.

And allows you to quickly create products that work.

This solves most of our issues these days.

http://tweeteffect.com/

How about reaching out and finding data in other resources?

http://developer.yahoo.com/search/boss/

Using Yahoo BOSS you can build own search engines based on Yahoo’s search index.

Results include news, images or web results.

Including keywords, microformats, RDF, social bookmarking data, incoming links...

Thus you can create niche search products.

Thus you can create niche search products.

http://keywordfinder.org/

Thus you can create niche search products.

http://icant.co.uk/sandbox/unsafe.html

What if you want to reach even further?

I personally have this crazy idea of the web.

Users see the web as an interface.

Developers have x-ray vision and see code

I see something different.

Sweet data to pick and mix.

*

http://www.flickr.com/photos/25802865@N08/3195857208/

We’ve provided a way to access this data for quite a while now.

http://pipes.yahoo.com

However, this was all visual.

How about doing this on a language basis?

Say you want to get photos of Sydney that you are allowed to show in your own products.

You need to define Sydney, Australia without a doubt.

select woeid from geo.places where text='sydney,au'

Then find photos that were taken there.

select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='sydney,au')

Check that they have the right license.

select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='sydney,au')

and license=4

And get all the information about them.

select * from flickr.photos.info where photo_id in (select id from

flickr.photos.search where woe_id in (select woeid from geo.places where text='sydney,au') and license=4)

http://developer.yahoo.com/yqlhttp://developer.yahoo.com/yql/console/?q=select%20*%20from

%20flickr.photos.info%20where%20photo_id%20in%20(select%20id%20from%20flickr.photos.search%20where%20woe_id%20in%20(select%20woeid

%20from%20geo.places%20where%20text%3D%27sydney%2Cau%27)%20and%20license%3D4)

YQL gets the data, caches it and gives you information about the retrieval time.

The results are available in XML or JSON and can be filtered down to the bare necessities.

Using this you can get all the data you spread on the web...

...and collate it in a single interface.

You can also use YQL to help people like me to get and use data provided by you using this interface.

The trick is to tell us with a schema where your data is.

And then use the schema in a query inside YQL as an “open table”

use 'http://eatyourgreens.org.uk/yql/nmm-search.xml' as nmm;select * from nmm where category = 'art' and searchterm = '"tower bridge"'

A lot of companies already start doing that.

http://github.com/spullara/yql-tables/tree/master

So, go and grab and use and give back and we’ll all make the web the best it can be.

Christian Heilmann

http://icant.co.uk

http://wait-till-i.com

http://scriptingenabled.org

http://twitter.com/codepo8

T H A N K S !

Text