YQL and YUI - Javascript from server to user

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 like a Pirate Tom Hughes-Croucher

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

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

dev

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

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

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

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

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

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

dev YQL

dev Bindings YQL

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

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 ﬁrst 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 and click “Inspect Element”

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 reﬁne 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 ﬁles from http://github.com/sh1mmer/dotnet-yql-tutorial

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; margin: 3px; ﬂoat: left; } li.imgCnt img{ border:0; margin:5px; } li.imgCnt div.imgTitle{ padding: 5px; font-size: 11px; text- align:center; } </style>

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

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,conﬁg,format,'widge tContainer'); yqlWidget.render();

Fin.

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

YQL and YUI - Javascript from server to user

0 comments

Notes on slide 1

Favorites, Groups & Events