Hacking
    for
Innovation

 Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org

        Sunderland...
Hello, I am Chris.
I am a hacker
 and a geek.
The term hacking has a lot of
     different meanings.
To me it means:
“Altering a system to do what
 you want it to do using what
     is at your disposal.”
It also means having a lot of
fun trying to make things do
what they weren’t made for.
It is unrestrained innovation.
So welcome, innovators!
We’re here to host a
University Hack Challenge
We want you to show us what
can be built using the systems
   we (and others) offer...
...that makes a difference in
   your lives and make the
things you care about easier
          to achieve.
Find something that always
annoyed you with systems
        you use...
...and build a workaround.
You’ll be amazed about the
  impact this can have.
To reach hackvana you need
        three things:
Access, Data and Users
Access happens on several
        channels.
The oldest way is to cheat
your way in using a very cool
     piece of software.
Using cURL, you can be your
 own browser and get any
data from the web to remix.
The problems are that you
don’t get the data back in a
      structured way.
You’re at the
mercy of the
HTML structure
and if that one
changes your
hack fails to
work.
This is why clever companies
 realized that it does make
 sense to offer their data in
  easier to digest formats.
RSS or Really Simple
Syndication was born.
http://www.guardian.co.uk/travel/restaurants
http://www.guardian.co.uk/travel/restaurants/rss
Using RSS or Atom feeds you
get data in a predictable and
  easy to convert format.
It doesn’t allow you to request
    specific data or define a
    different format though.
This was the next step: REST
   APIs or Web Services.
REST based Web Services
 allow you to request the
correct data from a system.
Which brings you to the
second hack ingredient: data.
Yahoo Answers




http://uk.answers.yahoo.com
http://answers.yahooapis.com/
AnswersService/V1/questionSearch?
query=sunderland&region=uk&lang=e
        n&appid=yahoodemo
... lots more...
http://developer.yahoo.com/answers/V1/questionSearch.html
A lot of web services also
allow you to choose your data
             format.
http://answers.yahooapis.com/
AnswersService/V1/questionSearch?
query=sunderland&region=uk&lang=e
n&appid=yahoodemo&start=...
This makes it dead easy to get
the data and re-use it in your
       own interfaces.
What if you want to use
  several sources?
There’s Yahoo Pipes for
 mixing, filtering and
      matching.
http://pipes.yahoo.com
Or if you like SQL-style data
  conversion there’s YQL:
http://developer.yahoo.com/yql/console/
Both of these systems allow
you to reach data from Yahoo
 and other services and pre-
 filter it for use in your own
     ...
Now you got the access and
 you got the data. Time to
    consider the users.
Building *working* web
interfaces is a specialist skill.
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.
The technologies are easy
        enough:
HTML for structure
CSS for presentation
JavaScript for behaviour
Where it gets truly annoying is
       the unknowns.
You have no idea about the
user’s setup, ability or rights
 to change their technical
        environment.
And then there are the
  browsers and all their
wonderful bugs and quirks.
This is why it is a good start to
 use libraries or frameworks.
Their only reason of being is to
 make your life as a developer
 easier and development less
            random.
Here are our helpers:
         YUI

                                        BluePrint




http://developer.yahoo.com/yui/ ...
Using these, you can quickly
build interfaces that work on
    the web and mobiles.
What about reach?
The newest way of access that
systems and companies allow
 you these days is opening up
     their address books.
http://developer.yahoo.com/social/socialdir/
  http://code.google.com/apis/opensocial/
http://developers.facebook.com/conn...
Instead of building it and
waiting till people come, build
    where the people are.
http://developer.yahoo.com/yap/
How about
some hack
examples?
I am a big fan of accessibility.
The web is supposed to be for
  everybody – regardless of
  physical or mental access
        restrictions.
At Accessibility2.0 Antonia
Hyde asked for a video player
 that works for people with
    learning disabilities.
http://www.slideshare.net/hi.antonia/rich-
media-and-web-apps-for-people-with-learning-
                disabilities
Shortly before YouTube
announced their API to build
 your own YouTube Player.
I took the API and Antonia’s
     findings and built
        EasyYouTube.
Screenshot of Easy YouTube



 http://icant.co.uk/easy-youtube/?http://
www.youtube.com/watch?v=vkdZmi85gxk
Easy controls
★

    Option to search for videos
★

    Copy and paste video URL to share
★

    Select video size
★

    ...
Another example:
I use Twitter – a lot.
Not all of my updates there
are valid for re-distribution
           though.
So I use Pipes to filter my
updates and get them back as
             JSON:
     http://pipes.yahoo.com/pipes/pipe.info?
 ...
And adding a few more lines
   of JavaScript I can now
display my “useful tweets” on
          my blog:
http://www.wait-till-i.com/2008/09/28/useful-tweets-with-pipe/
Another example:
I use SlideShare – a lot.
http://www.slideshare.net/cheilmann/slideshows
One cool thing is
that SlideShare
automatically
creates
transcripts of
your slides:
So I’ve used this to create a
     version that is easily
accessible for blind people or
 those who don’t have Flash.
http://icant.co.uk/easy-slideshare/?slides=http://
www.slideshare.net/cheilmann/playing-with-the-web-
                    ...
Using YQL, it was also easy to
 write a JavaScript wrapper
 that allows you to show the
 transcripts with your slides.
http://www.wait-till-i.com/2009/01/11/adding-transcripts-to-
     presentations-embedded-from-slideshare-using-yql/
However, coming here I
wanted to show a quick new
example and spent an hour
   on Sunday on a hack.
I think I said, I use Twitter – a
               lot.
I got all this emails from
Twitter telling me about
  people following me.
What I didn’t get was it telling
  me when people left me.
Or what I was telling the
world before they left me.
So I dug into the API a bit and
    built TweetEffect.com
http://tweeteffect.com/?user=codepo8
I put it up, and started testing
           edge cases.
One of them was Guy
Kawasaki, whom I knew has a
 lot of followers and updates.
One of them was Guy
Kawasaki, whom I knew has a
 lot of followers and updates.
And that started a landslide of
visitors, comments and ideas
             for it.
Tim O'Reilly

Guy Kawasaki
                              Ryan Carson
What about reach?
That was me, time for you to
  show what you can do!
Innovation is not a matter of
skill or being in the right job
           position.
It is a matter of wanting to
change what we have and be
         ready to play.
We do this to help you see
    your potential.
And we do this to see if we do
 a good job in explaining our
offers to the developer world.
The web is yours, go out and
            play!
THANKS!
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8




             ...
Hacking For Innovation
Hacking For Innovation
Hacking For Innovation
Hacking For Innovation
Hacking For Innovation
Hacking For Innovation
Hacking For Innovation
Upcoming SlideShare
Loading in...5
×

Hacking For Innovation

6,181

Published on

My presentation for the Sunderland Hack Challenge

Published in: Technology
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,181
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
595
Comments
1
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "Hacking For Innovation"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×