Building web
 applications
using the web.
Christian Heilmann, Brazil Open Hack Day, March 2010, Sao Paulo, Brazil
Web development is
becoming more and
more easy.
The reason is that the
web itself became a
platform to build with.
Another reason is that
we have pre-built
blocks that can be put
together quickly to
create something.
Something that
works, is easy to
maintain and can deal
with change.
The main trick to
building great web
products is shifting
your point of view.
The interface is not
the start.
The interface comes
at the end - as it
needs the most work.
What you start with is
information and a
goal.
In other words:

What does your app
deal with and how do
you make it useful for
the end user?
Let’s see some
examples of that:
GooHooBi




http://icant.co.uk/goohoobi/index.php?research
http://github.com/codepo8/GooHooBi
http://vimeo.com/8075850
Keywordfinder




     http://keywordfinder.org
GeoMaker




  http://icant.co.uk/geomaker/
  http://github.com/codepo8/GeoMaker
Flickrcollector




 http://isithackday.com/hacks/flickrcollector/
 http://github.com/codepo8/flickrcollector
http://uk-house-prices.com/
Some very good data
sources:
 http://developer.yahoo.com/
 everything.html
 http://data.gov.uk
 http://www.guardian.co.uk/...
The trouble with data:
 You need to get access to the data
 sources (API keys, authentication)
 You need to get data in fo...
A great workaround:




 http://developer.yahoo.com/yql/console/
YQL turns the web
into your database.

select * from {datasource}
where {conditions}
select * from
flickr.photos.search where
text="donkey"
select * from google.news
where q="healthcare"
select * from query.multi where
queries in (
'select * from nyt.article.search where
query="healthcare"',
'select * from m...
select content from html where
url="http://www.foxnews.com/"
and xpath="//h2/a"
select * from google.translate
where q in (
 select content from html where
 url="http://
 www.foxnews.com/" and
 xpath="/...
insert into wordpress.post
(title, description, blogurl,
username, password)
values ("Test Title", "This is a
test body", ...
Using YQL has a lot of
benefits:
 No time wasted reading API docs
 Using the console makes creating
 complex queries dead ...
Using YQL is easy! (PHP)
Using YQL is easy!   (JavaScript)
http://github.com/yql/yql-tables
Starting with the data
made me
independent of the
final platform.
http://github.com/codepo8/QuickTrans
The next trick is to
use libraries to make
the problem of
browsers vanish.
Libraries.




             (...)
h%p://developer.yahoo.com/yui/grids/builder/
h%p://developer.yahoo.com/yui/grids/builder/
And tools that work
around cross-platform
issues.
Appcelerator Titanium




    http://www.appcelerator.com/
If you build your app,
start with interfaces
that work everywhere.
http://icant.co.uk/csscharts/
http://uk-house-prices.com/graphs.php?
bloc=230&bstart=50&bend=54&start=50&end=54&loc=
230
When you have that -
enhance it to make
the experience
smoother.
http://developer.yahoo.com/yui/articles/hosting/
#configure
http://developer.yahoo.com/yui/examples/
autocomplete/ac_basic_array.html
http://developer.yahoo.com/yui/examples/slider/
slider_dual_with_highlight.html
Data to be used can
be in “offline” formats
- the web will take
care of that.
http://winterolympicsmedals.com/
http://www.guardian.co.uk/news/datablog/2010/feb/
11/winter-olympics-medals-by-country
select * from csv where url="http://
spreadsheets.google.com/pub?
key=tpWDkIZMZleQaREf493v1Jw&output=
csv" and
columns="Ye...
http://isithackday.com/csv-to-webservice/
So, think of a problem
to solve and then start
gathering your data.
Then use the blocks I
talked about to put
the solutions together.
 Chris:an Heilmann
 h%p://wait‐:ll‐i.com 
                                  Thanks!
 h%p://developer‐evangelism.com
 h%p:/...
Building web applications using the web.
Building web applications using the web.
Building web applications using the web.
Building web applications using the web.
Building web applications using the web.
Upcoming SlideShare
Loading in …5
×

Building web applications using the web.

3,207 views

Published on

Introduction on how to build web applications quickly by using the web and YQL. Delivered at Open Hack Day Brazil 2010

Published in: Technology, Business
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,207
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
57
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Building web applications using the web.

  1. 1. Building web applications using the web. Christian Heilmann, Brazil Open Hack Day, March 2010, Sao Paulo, Brazil
  2. 2. Web development is becoming more and more easy.
  3. 3. The reason is that the web itself became a platform to build with.
  4. 4. Another reason is that we have pre-built blocks that can be put together quickly to create something.
  5. 5. Something that works, is easy to maintain and can deal with change.
  6. 6. The main trick to building great web products is shifting your point of view.
  7. 7. The interface is not the start.
  8. 8. The interface comes at the end - as it needs the most work.
  9. 9. What you start with is information and a goal.
  10. 10. In other words: What does your app deal with and how do you make it useful for the end user?
  11. 11. Let’s see some examples of that:
  12. 12. GooHooBi http://icant.co.uk/goohoobi/index.php?research http://github.com/codepo8/GooHooBi http://vimeo.com/8075850
  13. 13. Keywordfinder http://keywordfinder.org
  14. 14. GeoMaker http://icant.co.uk/geomaker/ http://github.com/codepo8/GeoMaker
  15. 15. Flickrcollector http://isithackday.com/hacks/flickrcollector/ http://github.com/codepo8/flickrcollector
  16. 16. http://uk-house-prices.com/
  17. 17. Some very good data sources: http://developer.yahoo.com/ everything.html http://data.gov.uk http://www.guardian.co.uk/world- government-data http://programmableweb.com/ http://www.guardian.co.uk/news/ datablog
  18. 18. The trouble with data: You need to get access to the data sources (API keys, authentication) You need to get data in formats that are easy to use for your use case You need to filter the data down to what you really want to have in the end. All of the above multiplies in annoyance with the amount APIs you use.
  19. 19. A great workaround: http://developer.yahoo.com/yql/console/
  20. 20. YQL turns the web into your database. select * from {datasource} where {conditions}
  21. 21. select * from flickr.photos.search where text="donkey"
  22. 22. select * from google.news where q="healthcare"
  23. 23. select * from query.multi where queries in ( 'select * from nyt.article.search where query="healthcare"', 'select * from microsoft.bing.news where query="healthcare"', 'select * from google.news where q="healthcare"' )
  24. 24. select content from html where url="http://www.foxnews.com/" and xpath="//h2/a"
  25. 25. select * from google.translate where q in ( select content from html where url="http:// www.foxnews.com/" and xpath="//h2/a" ) and target="pt"
  26. 26. insert into wordpress.post (title, description, blogurl, username, password) values ("Test Title", "This is a test body", "http:// yqltest.wordpress.com", "yqltest", "password")
  27. 27. Using YQL has a lot of benefits: No time wasted reading API docs Using the console makes creating complex queries dead easy. Data filtering down to the least amount necessary. Fast pipes. Caching + converting Server-side JavaScript
  28. 28. Using YQL is easy! (PHP)
  29. 29. Using YQL is easy! (JavaScript)
  30. 30. http://github.com/yql/yql-tables
  31. 31. Starting with the data made me independent of the final platform.
  32. 32. http://github.com/codepo8/QuickTrans
  33. 33. The next trick is to use libraries to make the problem of browsers vanish.
  34. 34. Libraries. (...)
  35. 35. h%p://developer.yahoo.com/yui/grids/builder/
  36. 36. h%p://developer.yahoo.com/yui/grids/builder/
  37. 37. And tools that work around cross-platform issues.
  38. 38. Appcelerator Titanium http://www.appcelerator.com/
  39. 39. If you build your app, start with interfaces that work everywhere.
  40. 40. http://icant.co.uk/csscharts/
  41. 41. http://uk-house-prices.com/graphs.php? bloc=230&bstart=50&bend=54&start=50&end=54&loc= 230
  42. 42. When you have that - enhance it to make the experience smoother.
  43. 43. http://developer.yahoo.com/yui/articles/hosting/ #configure
  44. 44. http://developer.yahoo.com/yui/examples/ autocomplete/ac_basic_array.html
  45. 45. http://developer.yahoo.com/yui/examples/slider/ slider_dual_with_highlight.html
  46. 46. Data to be used can be in “offline” formats - the web will take care of that.
  47. 47. http://winterolympicsmedals.com/
  48. 48. http://www.guardian.co.uk/news/datablog/2010/feb/ 11/winter-olympics-medals-by-country
  49. 49. select * from csv where url="http:// spreadsheets.google.com/pub? key=tpWDkIZMZleQaREf493v1Jw&output= csv" and columns="Year,City,Sport,Discipline,Countr y,Event, Gender,Type" and Year="1924"
  50. 50. http://isithackday.com/csv-to-webservice/
  51. 51. So, think of a problem to solve and then start gathering your data.
  52. 52. Then use the blocks I talked about to put the solutions together.
  53. 53.  Chris:an Heilmann  h%p://wait‐:ll‐i.com  Thanks!  h%p://developer‐evangelism.com  h%p://twi%er.com/codepo8   

×