Fuel for a
great web
experience.


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

         ...
As web developers our job is
to build interfaces.
Interfaces that allow people
to reach their goals easily.
Today I am here to talk to you
about tools that make it easy
for you to do that.
All of which are part of what
we offer you.
And are free for you to use.
For all this, you need to
remember one URL:
http://developer.yahoo.com
I will talk about 7 things we
offer and how to use them.
1
We provide a great online
      experience.
Yahoo’s products are built by
teams of experts who are
passionate about their jobs.
We try our hardest to make
things work for everybody
out there.
This means first and foremost
to take the time and think
about what we are trying to
achieve.
Analyse what users want to
do here:
             Define type of search,
                enter search term,
               ...
Then use what allows them to
do exactly that.
How about this one?
Analyse what data
you display, and find
the easiest way to
show it.
Then make it look the
way you want it to.
Sometimes you need to make
technologies work by
building workarounds.
Screenshots of uk.video.yahoo.com with and
            without JavaScript




    http://uk.video.yahoo.com/
We build things using
progressive enhancement.
Without JavaScript                       With JavaScript




http://developer.yahoo.com/yui/examples/autocomplete/ac_basic...
Without JavaScript




With JavaScript



  http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html
Once we found out the goals
of our users, we drive for
excellence.
http://finance.yahoo.com/currency-converter?
           u#from=USD;to=EUR;amt=1
http://developer.yahoo.net/blog/archives/
    2009/01/accessible_converter.html
2
We share the data that drives
      this experience.
Our research with users
resulted in patterns that we
apply to help people reach
their goals as quickly as
possible.
These patterns are available
for you to apply to your own
products.
http://developer.yahoo.com/ypatterns
http://developer.yahoo.com/ypatterns/wireframes/
Under the hood, our systems
are driven by APIs to make
sure we can scale products to
our size.
These are available to you,
too.
http://developer.yahoo.com/everything.html
3
We share the research we’ve
 done to make it a smooth
       experience.
The exceptional performance
section of YDN provides
detailed information on how
to make your products
behave faster.
http://developer.yahoo.com/performance/
4
We provide building blocks to
    build your own great
         experience.
http://developer.yahoo.com/yui/
The Yahoo User Interface
library is a CSS and JavaScript
framework to build working
web applications and sites.
http://developer.yahoo.com/yui/grids/builder/
Unlike other frameworks YUI
is not a catch-all solution but
is cut up into modules, each
fulfilling one job.
You can use any of these
modules on their own, even
together with other libraries.
We’ve used these modules to
create reusable widgets
based on out design patterns.
http://ui.jquery.com/




http://ui.jquery.com
The YUI widgets come with an
own style that can be fully
customised.
http://developer.yahoo.com/yui/articles/skinning/
They all are event driven
which means you can change
their workings without
changing their code.
http://developer.yahoo.com/yui/examples/autocomplete/
                  ac_basic_xhr_log.html
5
We provide tools to improve
      your products.
All our products are built
around a defined
methodology defining
browser support.
http://developer.yahoo.com/yui/articles/gbs/
You can use this
methodology to scope out
client work without over
promising.
One great tool to test the
quality of a web sites is
YSlow.
How can you make it faster?




            http://developer.yahoo.com/yslow/
http://developer.yahoo.com/yui/logger/
http://developer.yahoo.com/yui/profilerviewer/
http://developer.yahoo.com/yui/yuitest/
6
We offer amazingly easy
 interfaces to the web.
First there was Pipes.
http://pipes.yahoo.com
However, Pipes was too
complex and not flexible
enough as you cannot change
a pipe programatically.
So we came up with a query
language for the web: YQL.
Say you want to get photos of
Paris that you are allowed to
show in your own products.
You need to define Paris
 without a doubt.

select woeid from
geo.places where
text='Paris,france'
Then find photos that were
 taken there.

select id from flickr.photos.search
where woe_id in (select woeid from
geo.place...
Check that they have the
 right license.

select id from flickr.photos.search
where woe_id in (select woeid from
geo.place...
And get all the information
 about them.
select * from flickr.photos.info
where photo_id in (select id from
flickr.photos....
http://developer.yahoo.com/yql
http://developer.yahoo.com/yql/console/?q=select%20*%20from
%20flickr.photos.info%20where%2...
You have the data, now you
can build a nice interface to
show it.
http://isithackday.com/hacks/cantine/index.php?loc=paris,france
All without having to spend
hours on reading either the
Flickr or the GeoPlanet API
docs :)
Using YQL and YUI you can
create a whole web site
maintained elsewhere.
YQL makes access to all kind
of APIs very easy.
What if you want to add
yours?
YQL has a concept of “Open
Tables”.
This means you can tell us
about your API endpoint and
parameters in an XML
schema...
...point to this schema and
use it as a table in YQL.
For example: Twitter.
use quot;http://github.com/spullara/yql-tables/raw/
4832c92c38389e98f5ceef017f61d59a9e027664/twitter/
twitter.user.timelin...
There’s a repository of open
tables available on github.
http://github.com/spullara/yql-tables/tree/master
Add yours, get people to use
your API and get famous :)
7
We offer our search index to
 tailor to vertical markets.
http://developer.yahoo.com/search/boss/
http://ask-boss.appspot.com/
http://ask-boss.appspot.com/
view=searchmonkey_feed


                      view=searchmonkey_rdf


   http://developer.yahoo.com/search/boss/
        ...
http://keywordfinder.org
So there you have it – 7 things
we offer you as developers to
use and learn from.
We’re improving our work by
getting your feedback and
seeing your implementations.
And you can build much
better products by basing
them on working solutions
and concentrating on the
delivery of your produ...
Come and grab and show us
what you can do!
Thanks.
Any questions?
Christian Heilmann
http://icant.co.uk
http://wait-till-i.com
http://scriptingenabled.org
http://twi...
Fuel for a great web experience
Fuel for a great web experience
Fuel for a great web experience
Fuel for a great web experience
Fuel for a great web experience
Fuel for a great web experience
Fuel for a great web experience
Upcoming SlideShare
Loading in...5
×

Fuel for a great web experience

4,499

Published on

My talk at the developer evening at La Cantine in Paris covering all the free services Yahoo offers developers.

Published in: Education, Design, Technology

Fuel for a great web experience

  1. 1. Fuel for a great web experience. Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org La Cantine, Paris, April 2009
  2. 2. As web developers our job is to build interfaces.
  3. 3. Interfaces that allow people to reach their goals easily.
  4. 4. Today I am here to talk to you about tools that make it easy for you to do that.
  5. 5. All of which are part of what we offer you.
  6. 6. And are free for you to use.
  7. 7. For all this, you need to remember one URL:
  8. 8. http://developer.yahoo.com
  9. 9. I will talk about 7 things we offer and how to use them.
  10. 10. 1 We provide a great online experience.
  11. 11. Yahoo’s products are built by teams of experts who are passionate about their jobs.
  12. 12. We try our hardest to make things work for everybody out there.
  13. 13. This means first and foremost to take the time and think about what we are trying to achieve.
  14. 14. Analyse what users want to do here: Define type of search, enter search term, submit form.
  15. 15. Then use what allows them to do exactly that.
  16. 16. How about this one?
  17. 17. Analyse what data you display, and find the easiest way to show it. Then make it look the way you want it to.
  18. 18. Sometimes you need to make technologies work by building workarounds.
  19. 19. Screenshots of uk.video.yahoo.com with and without JavaScript http://uk.video.yahoo.com/
  20. 20. We build things using progressive enhancement.
  21. 21. Without JavaScript With JavaScript http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html
  22. 22. Without JavaScript With JavaScript http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html
  23. 23. Once we found out the goals of our users, we drive for excellence.
  24. 24. http://finance.yahoo.com/currency-converter? u#from=USD;to=EUR;amt=1
  25. 25. http://developer.yahoo.net/blog/archives/ 2009/01/accessible_converter.html
  26. 26. 2 We share the data that drives this experience.
  27. 27. Our research with users resulted in patterns that we apply to help people reach their goals as quickly as possible.
  28. 28. These patterns are available for you to apply to your own products.
  29. 29. http://developer.yahoo.com/ypatterns
  30. 30. http://developer.yahoo.com/ypatterns/wireframes/
  31. 31. Under the hood, our systems are driven by APIs to make sure we can scale products to our size.
  32. 32. These are available to you, too.
  33. 33. http://developer.yahoo.com/everything.html
  34. 34. 3 We share the research we’ve done to make it a smooth experience.
  35. 35. The exceptional performance section of YDN provides detailed information on how to make your products behave faster.
  36. 36. http://developer.yahoo.com/performance/
  37. 37. 4 We provide building blocks to build your own great experience.
  38. 38. http://developer.yahoo.com/yui/
  39. 39. The Yahoo User Interface library is a CSS and JavaScript framework to build working web applications and sites.
  40. 40. http://developer.yahoo.com/yui/grids/builder/
  41. 41. Unlike other frameworks YUI is not a catch-all solution but is cut up into modules, each fulfilling one job.
  42. 42. You can use any of these modules on their own, even together with other libraries.
  43. 43. We’ve used these modules to create reusable widgets based on out design patterns.
  44. 44. http://ui.jquery.com/ http://ui.jquery.com
  45. 45. The YUI widgets come with an own style that can be fully customised.
  46. 46. http://developer.yahoo.com/yui/articles/skinning/
  47. 47. They all are event driven which means you can change their workings without changing their code.
  48. 48. http://developer.yahoo.com/yui/examples/autocomplete/ ac_basic_xhr_log.html
  49. 49. 5 We provide tools to improve your products.
  50. 50. All our products are built around a defined methodology defining browser support.
  51. 51. http://developer.yahoo.com/yui/articles/gbs/
  52. 52. You can use this methodology to scope out client work without over promising.
  53. 53. One great tool to test the quality of a web sites is YSlow.
  54. 54. How can you make it faster? http://developer.yahoo.com/yslow/
  55. 55. http://developer.yahoo.com/yui/logger/
  56. 56. http://developer.yahoo.com/yui/profilerviewer/
  57. 57. http://developer.yahoo.com/yui/yuitest/
  58. 58. 6 We offer amazingly easy interfaces to the web.
  59. 59. First there was Pipes.
  60. 60. http://pipes.yahoo.com
  61. 61. However, Pipes was too complex and not flexible enough as you cannot change a pipe programatically.
  62. 62. So we came up with a query language for the web: YQL.
  63. 63. Say you want to get photos of Paris that you are allowed to show in your own products.
  64. 64. You need to define Paris without a doubt. select woeid from geo.places where text='Paris,france'
  65. 65. Then find photos that were taken there. select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='paris,france')
  66. 66. Check that they have the right license. select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='paris,france') and license=4
  67. 67. 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='paris,france') and license=4)
  68. 68. http://developer.yahoo.com/yql http://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%27paris%2Cfrance%27)%20and %20license%3D4)
  69. 69. You have the data, now you can build a nice interface to show it.
  70. 70. http://isithackday.com/hacks/cantine/index.php?loc=paris,france
  71. 71. All without having to spend hours on reading either the Flickr or the GeoPlanet API docs :)
  72. 72. Using YQL and YUI you can create a whole web site maintained elsewhere.
  73. 73. YQL makes access to all kind of APIs very easy.
  74. 74. What if you want to add yours?
  75. 75. YQL has a concept of “Open Tables”.
  76. 76. This means you can tell us about your API endpoint and parameters in an XML schema...
  77. 77. ...point to this schema and use it as a table in YQL.
  78. 78. For example: Twitter.
  79. 79. use quot;http://github.com/spullara/yql-tables/raw/ 4832c92c38389e98f5ceef017f61d59a9e027664/twitter/ twitter.user.timeline.xmlquot; as twitter; select title,link from twitter where id='codepo8'
  80. 80. There’s a repository of open tables available on github.
  81. 81. http://github.com/spullara/yql-tables/tree/master
  82. 82. Add yours, get people to use your API and get famous :)
  83. 83. 7 We offer our search index to tailor to vertical markets.
  84. 84. http://developer.yahoo.com/search/boss/
  85. 85. http://ask-boss.appspot.com/
  86. 86. http://ask-boss.appspot.com/
  87. 87. view=searchmonkey_feed view=searchmonkey_rdf http://developer.yahoo.com/search/boss/ structureddata.html
  88. 88. http://keywordfinder.org
  89. 89. So there you have it – 7 things we offer you as developers to use and learn from.
  90. 90. We’re improving our work by getting your feedback and seeing your implementations.
  91. 91. And you can build much better products by basing them on working solutions and concentrating on the delivery of your products rather than problems we already had to solve for you.
  92. 92. Come and grab and show us what you can do!
  93. 93. Thanks. Any questions? Christian Heilmann http://icant.co.uk http://wait-till-i.com http://scriptingenabled.org http://twitter.com/codepo8
  1. A particular slide catching your eye?

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

×