Your SlideShare is downloading. ×
0
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

YQL and YUI - Javascript from server to user

4,990

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
4,990
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
100
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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
    • 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. Demo time http://developer.yahoo.com/yql/console/?env=store:// kid666.com/piratespeak
    • 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. dev
    • 7. dev
    • 8. dev
    • 9. dev
    • 10. dev
    • 11. dev
    • 12. dev
    • 13. dev
    • 14. dev
    • 15. dev
    • 16. dev
    • 17. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. dev YQL
    • 29. dev YQL
    • 30. dev Bindings YQL
    • 31. YQL in Practice 20 tiny steps to a working application You’ll need: Firefox Firebug Text editor
    • 32. Step 1. Login to the console with your Yahoo! login http://developer.yahoo.com/yql/console
    • 33. Step 2. Find the statement box and run the first query with test.
    • 34. Step 3. Check out the formatted view.
    • 35. Step 4. Run the statement “desc html”
    • 36. Step 5. Find the keys, note the required keys.
    • 37. Step 6. Get some HTML: select * from html where url = "http:// hubblesite.org/gallery/album/the_universe"
    • 38. Step 7. Check out the result. See the HTML in there?
    • 39. Step 8. Open http://hubblesite.org/gallery/album/the_universe in Firefox. Right click on a thumbnail and click “Inspect Element”
    • 40. Step 9. Find the element in Firebug. Right click and select “Copy XPath”
    • 41. Step 10. Add and xpath = "" to your query. Paste in the XPath from Firebug
    • 42. Step 11. Test your statement and refine your XPath.
    • 43. Step 12. Add limit 10 to your statement
    • 44. Step 13. Let’s get out of the console. Copy the “Rest Query” url into a new tab
    • 45. Step 14. Let’s embed this in a web page. Download the files from http://github.com/sh1mmer/dotnet-yql-tutorial
    • 46. Step 15. Add <script type="text/javascript" src="yql_js_widget.js"></script> to your HTML page.
    • 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. Step 17. Add another script node. Add config = {};
    • 49. Step 18. Format the output: var format = '<li class="imgCnt"> <img src="{src}" alt="{alt}"></li>';
    • 50. Step 19. Add you query; var yqlQuery = "" and add your query.
    • 51. Step 20. Add the render code: yqlWidget.push(yqlQuery,config,format,'widge tContainer'); yqlWidget.render();
    • 52. Fin.
    • 53. Tom Hughes-Croucher @sh1mmer croucher@yahoo-inc.com

    ×