YQL and YUI - Javascript from server to user

5,318 views
5,213 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
5,318
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
100
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • 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

    ×