YQL and YUI - Javascript from server to user

1. YQL & YUI JavaScript from the server to the user Tom Hughes-Croucher

2. YQL & YUI JavaScript from the server to the user or how to talk like a Pirate Tom Hughes-Croucher

4. “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!

5. Demo time http://developer.yahoo.com/yql/console/?env=store:// kid666.com/piratespeak

6. 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);})();

8. dev

9. dev

10. dev

11. dev

12. dev

13. dev

14. dev

15. dev

16. dev

17. dev

18. dev

19. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …

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)) { … } …

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

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

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. 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

30. dev YQL

31. dev YQL

32. dev Bindings YQL

33. YQL in Practice 20 tiny steps to a working application You’ll need: Firefox Firebug Text editor

34. Step 1. Login to the console with your Yahoo! login http://developer.yahoo.com/yql/console

35. Step 2. Find the statement box and run the ﬁrst query with test.

36. Step 3. Check out the formatted view.

37. Step 4. Run the statement “desc html”

38. Step 5. Find the keys, note the required keys.

39. Step 6. Get some HTML: select * from html where url = "http:// hubblesite.org/gallery/album/the_universe"

40. Step 7. Check out the result. See the HTML in there?

41. Step 8. Open http://hubblesite.org/gallery/album/the_universe in Firefox. Right click on a thumbnail and click “Inspect Element”

42. Step 9. Find the element in Firebug. Right click and select “Copy XPath”

43. Step 10. Add and xpath = "" to your query. Paste in the XPath from Firebug

44. Step 11. Test your statement and reﬁne your XPath.

45. Step 12. Add limit 10 to your statement

46. Step 13. Let’s get out of the console. Copy the “Rest Query” url into a new tab

47. Step 14. Let’s embed this in a web page. Download the ﬁles from http://github.com/sh1mmer/dotnet-yql-tutorial

48. Step 15. Add <script type="text/javascript" src="yql_js_widget.js"></script> to your HTML page.

49. Step 16. Add some style: <style type="text/css"> li.imgCnt{ list-style: none; background:#000000; margin: 3px; ﬂoat: left; } li.imgCnt img{ border:0; margin:5px; } li.imgCnt div.imgTitle{ padding: 5px; font-size: 11px; text- align:center; } </style>

50. Step 17. Add another script node. Add conﬁg = {};

51. Step 18. Format the output: var format = '<li class="imgCnt"> <img src="{src}" alt="{alt}"></li>';

52. Step 19. Add you query; var yqlQuery = "" and add your query.

53. Step 20. Add the render code: yqlWidget.push(yqlQuery,conﬁg,format,'widge tContainer'); yqlWidget.render();

54. Fin.

55. Tom Hughes-Croucher @sh1mmer croucher@yahoo-inc.com

YQL and YUI - Javascript from server to user

More Related Content

What's hot (10)

Viewers also liked (6)

Similar to YQL and YUI - Javascript from server to user (20)

More from Tom Croucher (20)

Recently uploaded (20)

YQL and YUI - Javascript from server to user

Editor's Notes