Page 1
Hacking for
Innovation
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
Sunderland, UK, University Hack Challenge, January 2009
Page 2
Hello, I am Chris.
Page 3
I am a hacker and a geek.
Page 4
The term hacking has a lot of different meanings.
Page 5
To me it means:
“Altering a system to do what you want it to do using what
is at your disposal.”
Page 6
It also means having a lot of fun trying to make things do what they weren’t made for.
Page 7
It is unrestrained innovation.
Page 8
So welcome, innovators!
Page 9
We’re here to host a University Hack Challenge
Page 10
We want you to show us what can be built using the systems
we (and others) offer...
Page 11
...that makes a difference in your lives and make the
things you care about easier to achieve.
Page 12
Find something that always annoyed you with systems
you use...
Page 13
...and build a workaround.
Page 14
You’ll be amazed about the impact this can have.
Page 15
To reach hackvana you need three things:
Page 16
Access, Data and Users
Page 17
Access happens on several channels.
Page 18
The oldest way is to cheat your way in using a very cool
piece of software.
Page 20
Using cURL, you can be your own browser and get any
data from the web to remix.
Page 21
The problems are that you don’t get the data back in a
structured way.
Page 22
You’re at the mercy of the HTML structure and if that one changes your hack fails to work.
Page 23
This is why clever companies realized that it does make sense to offer their data in easier to digest formats.
Page 24
RSS or Really Simple Syndication was born.
Page 25
http://www.guardian.co.uk/travel/restaurants
Page 26
http://www.guardian.co.uk/travel/restaurants/rss
Page 27
Using RSS or Atom feeds you get data in a predictable and
easy to convert format.
Page 28
It doesn’t allow you to request specific data or define a different format though.
Page 29
This was the next step: REST APIs or Web Services.
Page 30
REST based Web Services allow you to request the
correct data from a system.
Page 31
Which brings you to the second hack ingredient: data.
Page 32
Yahoo Answers
http://uk.answers.yahoo.com
Page 33
http://answers.yahooapis.com/AnswersService/V1/questionSearch?query=sunderland®ion=uk&lang=e
n&appid=yahoodemo
Page 36
http://developer.yahoo.com/answers/V1/questionSearch.html
Page 37
A lot of web services also allow you to choose your data
format.
Page 38
http://answers.yahooapis.com/AnswersService/V1/questionSearch?query=sunderland®ion=uk&lang=en&appid=yahoodemo&start=1&output=
json&callback=useme
Page 40
This makes it dead easy to get the data and re-use it in your
own interfaces.
Page 41
What if you want to use several sources?
Page 42
There’s Yahoo Pipes for mixing, filtering and
matching.
Page 43
http://pipes.yahoo.com
Page 44
Or if you like SQL-style data conversion there’s YQL:
Page 45
http://developer.yahoo.com/yql/console/
Page 46
Both of these systems allow you to reach data from Yahoo
and other services and pre-filter it for use in your own
hacks.
Page 47
Now you got the access and you got the data. Time to
consider the users.
Page 48
Building *working* web interfaces is a specialist skill.
Page 49
I’ve been developing for the web for 12 years and it still is a
mystery to me why some things just don’t work.
Page 50
The technologies are easy enough:
HTML for structure
CSS for presentation
JavaScript for behaviour
Page 51
Where it gets truly annoying is the unknowns.
Page 52
You have no idea about the user’s setup, ability or rights
to change their technical environment.
Page 53
And then there are the browsers and all their
wonderful bugs and quirks.
Page 54
This is why it is a good start to use libraries or frameworks.
Page 55
Their only reason of being is to make your life as a developer easier and development less
random.
Page 56
Here are our helpers:
http://developer.yahoo.com/yui/ http://mobile.yahoo.com/developers
YUI
BluePrint
Page 57
Using these, you can quickly build interfaces that work on
the web and mobiles.
Page 58
What about reach?
Page 59
The newest way of access that systems and companies allow you these days is opening up
their address books.
Page 60
http://code.google.com/apis/opensocial/http://developer.yahoo.com/social/socialdir/
http://developers.facebook.com/connect.php
Page 61
Instead of building it and waiting till people come, build
where the people are.
Page 62
http://developer.yahoo.com/yap/
Page 63
How about some hack examples?
Page 64
I am a big fan of accessibility.
Page 65
The web is supposed to be for everybody – regardless of physical or mental access
restrictions.
Page 66
At Accessibility2.0 Antonia Hyde asked for a video player
that works for people with learning disabilities.
Page 67
http://www.slideshare.net/hi.antonia/rich-media-and-web-apps-for-people-with-learning-
disabilities
Page 68
Shortly before YouTube announced their API to build
your own YouTube Player.
Page 69
I took the API and Antonia’s findings and built
EasyYouTube.
Page 70
Screenshot of Easy YouTube
http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=vkdZmi85gxk
Page 71
★ Easy controls
★ Option to search for videos
★ Copy and paste video URL to share
★ Select video size
★ Easy Volume Control
★ Option to show a playlist created with del.icio.us
★ Option to search YouTube
★ API to automatically open videos in Easy YouTube
★ Documentation how to host it yourself
★ Open Source
Page 72
Another example:
I use Twitter – a lot.
Page 73
Not all of my updates there are valid for re-distribution
though.
Page 74
So I use Pipes to filter my updates and get them back as
JSON:http://pipes.yahoo.com/pipes/pipe.info?
_id=f7229d01b79e508d543fb84e8a0abb0dd
Page 75
And adding a few more lines of JavaScript I can now
display my “useful tweets” on my blog:
Page 76
http://www.wait-till-i.com/2008/09/28/useful-tweets-with-pipe/
Page 77
Another example:
I use SlideShare – a lot.
Page 78
http://www.slideshare.net/cheilmann/slideshows
Page 79
One cool thing is that SlideShare automatically creates transcripts of your slides:
Page 80
So I’ve used this to create a version that is easily
accessible for blind people or those who don’t have Flash.
Page 81
http://icant.co.uk/easy-slideshare/?slides=http://www.slideshare.net/cheilmann/playing-with-the-web-
presentation
Page 82
Using YQL, it was also easy to write a JavaScript wrapper that allows you to show the transcripts with your slides.
Page 83
http://www.wait-till-i.com/2009/01/11/adding-transcripts-to-presentations-embedded-from-slideshare-using-yql/
Page 84
However, coming here I wanted to show a quick new example and spent an hour
on Sunday on a hack.
Page 85
I think I said, I use Twitter – a lot.
Page 86
I got all this emails from Twitter telling me about
people following me.
Page 87
What I didn’t get was it telling me when people left me.
Page 88
Or what I was telling the world before they left me.
Page 89
So I dug into the API a bit and built TweetEffect.com
Page 90
http://tweeteffect.com/?user=codepo8
Page 95
I put it up, and started testing edge cases.
Page 96
One of them was Guy Kawasaki, whom I knew has a lot of followers and updates.
Page 97
One of them was Guy Kawasaki, whom I knew has a lot of followers and updates.
Page 98
And that started a landslide of visitors, comments and ideas
for it.
Page 99
Guy KawasakiGuy Kawasaki
Ryan CarsonRyan Carson
Tim O'ReillyTim O'Reilly
Page 100
What about reach?That was me, time for you to
show what you can do!
Page 101
Innovation is not a matter of skill or being in the right job
position.
Page 102
It is a matter of wanting to change what we have and be
ready to play.
Page 103
We do this to help you see your potential.
Page 104
And we do this to see if we do a good job in explaining our
offers to the developer world.
Page 105
The web is yours, go out and play!
Page 106
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
T H A N K S !
Moon bridal hat photo: http://www.flickr.com/photos/foxtongue/23309042/
All other photos of the interwebs