Successfully reported this slideshow.
Your SlideShare is downloading. ×

Fuel for a great web experience

Loading in …3

Check these out next

1 of 100 Ad

More Related Content

Slideshows for you (20)

Similar to Fuel for a great web experience (20)


More from Christian Heilmann (20)

Recently uploaded (20)


Fuel for a great web experience

  1. 1. Fuel for a great web experience. Christian Heilmann | | 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.
  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 with and without JavaScript
  20. 20. We build things using progressive enhancement.
  21. 21. Without JavaScript With JavaScript
  22. 22. Without JavaScript With JavaScript
  23. 23. Once we found out the goals of our users, we drive for excellence.
  24. 24. u#from=USD;to=EUR;amt=1
  25. 25. 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.
  30. 30.
  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.
  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.
  37. 37. 4 We provide building blocks to build your own great experience.
  38. 38.
  39. 39. The Yahoo User Interface library is a CSS and JavaScript framework to build working web applications and sites.
  40. 40.
  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.
  45. 45. The YUI widgets come with an own style that can be fully customised.
  46. 46.
  47. 47. They all are event driven which means you can change their workings without changing their code.
  48. 48. 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.
  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?
  55. 55.
  56. 56.
  57. 57.
  58. 58. 6 We offer amazingly easy interfaces to the web.
  59. 59. First there was Pipes.
  60. 60.
  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 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 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 where photo_id in (select id from where woe_id in (select woeid from geo.places where text='paris,france') and license=4)
  68. 68.*%20from %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.,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; 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.
  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.
  85. 85.
  86. 86.
  87. 87. view=searchmonkey_feed view=searchmonkey_rdf structureddata.html
  88. 88.
  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