YQL & YUI
    JavaScript from the server to the user




Tom
Hughes-Croucher
YQL & YUI
    JavaScript from the server to the user
        or how
                  to talk
                          li...
“Talk Like A Pirate Day”

• September 19 (Saturday)
• It be a special day when yonder landlubbers
  learn to like ye noble...
Demo time
http://developer.yahoo.com/yql/console/?env=store://
               kid666.com/piratespeak
How would I use this
  pirate power?
              Piratize Bookmarklet
    javascript:(function(){head=document.getElemen...
dev
dev
dev
dev
dev
dev
dev
dev
dev
dev
dev
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
          YMap(document.getElementById('map'));
          …
dev       var currentGeoPoint = new
          YG...
var map = new
          YMap(document.getElementById('map'));
          …
dev       var currentGeoPoint = new
          YG...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
dev




      YQL
dev




      YQL
dev



       Bindings




      YQL
YQL in Practice
20 tiny steps to a working application

             You’ll need:
               Firefox
               Fi...
Step 1.
Login to the console with your Yahoo! login
  http://developer.yahoo.com/yql/console
Step 2.
 Find the statement box and
run the first query with test.
Step 3.
Check out the formatted view.
Step 4.
Run the statement “desc html”
Step 5.
    Find the keys,
note the required keys.
Step 6.
               Get some HTML:
  select * from html where url = "http://
hubblesite.org/gallery/album/the_universe"
Step 7.
 Check out the result.
See the HTML in there?
Step 8.
Open http://hubblesite.org/gallery/album/the_universe
                      in Firefox.
Right click on a thumbnail...
Step 9.
    Find the element in Firebug.
Right click and select “Copy XPath”
Step 10.
Add and xpath = "" to your query.
  Paste in the XPath from Firebug
Step 11.
Test your statement and
   refine your XPath.
Step 12.
Add limit 10 to your statement
Step 13.
      Let’s get out of the console.
Copy the “Rest Query” url into a new tab
Step 14.
        Let’s embed this in a web page.
            Download the files from
http://github.com/sh1mmer/dotnet-yql-t...
Step 15.
               Add
  <script type="text/javascript"
src="yql_js_widget.js"></script>
        to your HTML page.
Step 16.
                        Add some style:
<style type="text/css">
li.imgCnt{ list-style: none; background:#000000; ...
Step 17.
Add another script node.
   Add config = {};
Step 18.
         Format the output:
var format = '<li class="imgCnt">
<img src="{src}" alt="{alt}"></li>';
Step 19.
          Add you query;
var yqlQuery = "" and add your query.
Step 20.
Add the render code:

yqlWidget.push(yqlQuery,config,format,'widge
tContainer');
yqlWidget.render();
Fin.
Tom Hughes-Croucher
          @sh1mmer
    croucher@yahoo-inc.com
YQL and YUI - Javascript from server to user
YQL and YUI - Javascript from server to user
Upcoming SlideShare
Loading in...5
×

YQL and YUI - Javascript from server to user

5,019

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
5,019
On Slideshare
0
From Embeds
0
Number of Embeds
0
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×