Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YQL and YUI - Javascript from server to user

5,573 views

Published on

Published in: Technology

YQL and YUI - Javascript from server to user

  1. 1. YQL & YUI JavaScript from the server to the user Tom Hughes-Croucher
  2. 2. YQL & YUI JavaScript from the server to the user or how to talk like a Pirate Tom Hughes-Croucher
  3. 3. “Talk Like A Pirate Day” • September 19 (Saturday) • It be a special day when yonder landlubbers learn to like ye noblest of all thar sea faring folk, Pirates!
  4. 4. Demo time http://developer.yahoo.com/yql/console/?env=store:// kid666.com/piratespeak
  5. 5. How would I use this pirate power? Piratize Bookmarklet javascript:(function(){head=document.getElementsByTagName(%22head%22) [0];script=document.createElement(%22script%22);script.src=%22http:// l.yimg.com/d/lib/ydn/js/pirate1252961643.js%22;script.type=%22text/ javascript%22;head.appendChild(script);})();
  6. 6. dev
  7. 7. dev
  8. 8. dev
  9. 9. dev
  10. 10. dev
  11. 11. dev
  12. 12. dev
  13. 13. dev
  14. 14. dev
  15. 15. dev
  16. 16. dev
  17. 17. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …
  18. 18. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } …
  19. 19. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2
  20. 20. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  21. 21. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  22. 22. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  23. 23. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  24. 24. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  25. 25. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); ? … … if (flickcurl_prepare(fc, ? "flickr.photos.geo.correctLocation", parameters, count)) { … } … ? http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 ? http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  26. 26. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); ? … … if (flickcurl_prepare(fc, ? "flickr.photos.geo.correctLocation", parameters, count)) { … } … ? http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 ? http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  27. 27. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  28. 28. dev YQL
  29. 29. dev YQL
  30. 30. dev Bindings YQL
  31. 31. YQL in Practice 20 tiny steps to a working application You’ll need: Firefox Firebug Text editor
  32. 32. Step 1. Login to the console with your Yahoo! login http://developer.yahoo.com/yql/console
  33. 33. Step 2. Find the statement box and run the first query with test.
  34. 34. Step 3. Check out the formatted view.
  35. 35. Step 4. Run the statement “desc html”
  36. 36. Step 5. Find the keys, note the required keys.
  37. 37. Step 6. Get some HTML: select * from html where url = "http:// hubblesite.org/gallery/album/the_universe"
  38. 38. Step 7. Check out the result. See the HTML in there?
  39. 39. Step 8. Open http://hubblesite.org/gallery/album/the_universe in Firefox. Right click on a thumbnail and click “Inspect Element”
  40. 40. Step 9. Find the element in Firebug. Right click and select “Copy XPath”
  41. 41. Step 10. Add and xpath = "" to your query. Paste in the XPath from Firebug
  42. 42. Step 11. Test your statement and refine your XPath.
  43. 43. Step 12. Add limit 10 to your statement
  44. 44. Step 13. Let’s get out of the console. Copy the “Rest Query” url into a new tab
  45. 45. Step 14. Let’s embed this in a web page. Download the files from http://github.com/sh1mmer/dotnet-yql-tutorial
  46. 46. Step 15. Add <script type="text/javascript" src="yql_js_widget.js"></script> to your HTML page.
  47. 47. Step 16. Add some style: <style type="text/css"> li.imgCnt{ list-style: none; background:#000000; margin: 3px; float: left; } li.imgCnt img{ border:0; margin:5px; } li.imgCnt div.imgTitle{ padding: 5px; font-size: 11px; text- align:center; } </style>
  48. 48. Step 17. Add another script node. Add config = {};
  49. 49. Step 18. Format the output: var format = '<li class="imgCnt"> <img src="{src}" alt="{alt}"></li>';
  50. 50. Step 19. Add you query; var yqlQuery = "" and add your query.
  51. 51. Step 20. Add the render code: yqlWidget.push(yqlQuery,config,format,'widge tContainer'); yqlWidget.render();
  52. 52. Fin.
  53. 53. Tom Hughes-Croucher @sh1mmer croucher@yahoo-inc.com

×