Hack Humanity - Hack The Workplace - Heroification & Gamification
JavaScript and BOSS- Open Hack Day Brazil
-
Upload
christian-heilmann -
Category
Education
-
view
5.483 -
download
1
description
Transcript of JavaScript and BOSS- Open Hack Day Brazil
![Page 1: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/1.jpg)
Who’s the BOSS?
Christian Heilmann, Sao Paulo, Brazil, 06/11/2008 (brhackday08)
![Page 2: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/2.jpg)
I’m Chris.
Hello I am Chris
![Page 3: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/3.jpg)
I live in London, England
![Page 4: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/4.jpg)
But originally I am German
![Page 5: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/5.jpg)
Doesn’t matter though, both countries keep losing against
you playing football...
![Page 6: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/6.jpg)
I like easy access to things.
![Page 7: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/7.jpg)
I also like easy Math.
![Page 8: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/8.jpg)
>
![Page 9: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/9.jpg)
Here’s what I can help you with during hack day:
JavaScript, Accessibility, YUI, CSS, APIs, Flickr, Delicious ...
![Page 10: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/10.jpg)
Today I am here to tell you quickly something about
BOSS.
![Page 11: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/11.jpg)
So who’s the BOSS then?
![Page 12: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/12.jpg)
BOSS is Build Your Own Search Service:
http://developer.yahoo.com/search/boss/
![Page 13: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/13.jpg)
To use it, you need a Application ID:
https://developer.yahoo.com/wsregapp/
![Page 14: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/14.jpg)
And there is full documentation available:
http://developer.yahoo.com/search/boss/boss_guide/
![Page 15: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/15.jpg)
Happy Hacking!
![Page 16: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/16.jpg)
... oh alright then ...
![Page 17: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/17.jpg)
You can get the code examples I will show here:
http://icant.co.uk/stuff/bosscodebr.zip
![Page 18: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/18.jpg)
Say you want to search the web for donkeys.
![Page 19: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/19.jpg)
... oh alright then ...
Because
Donkeys
Rock!
![Page 20: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/20.jpg)
Using BOSS you can do this with a REST API and display
the results any way you want!
![Page 21: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/21.jpg)
The REST API:boss.yahooapis.com/ysearch/{type}/v1/{search}
![Page 22: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/22.jpg)
The REST API:boss.yahooapis.com/ysearch/{type}/v1/{search}
type is what you want to search:
web: the interwebs
news: new stuff
images: pictures
![Page 23: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/23.jpg)
The REST API:boss.yahooapis.com/ysearch/{type}/v1/{search}
search is the term to look for (url-encoded)
Put “” around terms to ensure the right order, f.e. “donkey fur” (you don’t want to see cats, do you?)
Filter with a -, f.e. donkey -shrek
Restrict to a site using site:, f.e. donkey site:flickr.com
![Page 24: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/24.jpg)
The REST API:boss.yahooapis.com/ysearch/{type}/v1/{search}
Other parameters:appid: your app ID (needed)
count: amount of results
start: where to start the counting
region / lang: country and language
format: xml or json
sites: restrict to certain sites (comma separated)
![Page 25: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/25.jpg)
Web search REST API:boss.yahooapis.com/ysearch/web/v1/{search}
Extra parameters:filter: To filter out nasties, use filter=-porn-hate
type: to search different types. You can use html, text, pdf, xl, msword, ppt or groups like msoffice and nonhtml. You can also do a type=msoffice,-xl
![Page 26: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/26.jpg)
Image search REST API:boss.yahooapis.com/ysearch/images/v1/{search}
Extra parameters:filter: no nudies
dimensions: all, small, medium, large, wallpaper, widewallpaper
refererurl: all images in that url
url: image at that url
![Page 27: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/27.jpg)
News search REST API:boss.yahooapis.com/ysearch/news/v1/{search}
Extra parameters:age: how old the news are in days. Last five days would be “5d”
![Page 28: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/28.jpg)
There are restrictions how to display results and
information as to what data comes back.
![Page 29: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/29.jpg)
For this, read the guide!http://developer.yahoo.com/search/boss/boss_guide/
![Page 30: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/30.jpg)
Everybody Duck!
![Page 31: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/31.jpg)
There will be code
![Page 32: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/32.jpg)
The easiest way to use BOSS is using JavaScript.
![Page 33: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/33.jpg)
http://boss.yahooapis.com/ysearch/web/v1/donkeys?
format=json&appid={id}
![Page 34: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/34.jpg)
{"ysearchresponse":{"responsecode":"200","nextpage":"\/ysearch\/web\/v1\/donkeys?format=json&appid=[...]&start=10","totalhits":"492215","deephits":"15700000","count":"10","start":"0","resultset_web":[{"abstract":"Hyperlinked description of the domesticated mammal discussing its appearance, relationship to horses, economic <b>...<\/b> horses and <b>donkeys<\/b> were brought back <b>...<\/b>","clickurl":"http:\/\/lrd.yahooapis.com\/_ylc=X3oDMTU4b2NoaDR2BF9TAzIwMjMxNTI3MDIEYXBwaWQDVFg2YjRYSFYzNEVuUFhXMHNZRXI1MWhQMXBuNU84S0FHcy5MUVNYZXIxWjdSbW1WclpvdXo1U3Z5WGtXc1ZrLQRwb3MDMARzZXJ2aWNlA1lTZWFyY2hXZWIEc2xrA3RpdGxlBHNyY3B2aWQDR3lDaEgwU081cTlmSktUNG1ndTVUUUJNdlNjaS4wa1ZUVndBQVF5Sw--\/SIG=11820sato\/**http%3A\/\/en.wikipedia.org\
![Page 35: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/35.jpg)
To use this across domains, simply define a callback
parameter:
![Page 36: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/36.jpg)
http://boss.yahooapis.com/ysearch/web/v1/donkeys?
format=json&callback=founddonkeys&appid={id}
![Page 37: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/37.jpg)
founddonkeys({"ysearchresponse":{"responsecode":"200","nextpage":"\/ysearch\/web\/v1\/donkeys?format=json&callback=founddonkeys&appid=TX6b4XHV34EnPXW0sYEr51hP1pn5O8KAGs.LQSXer1Z7RmmVrZouz5SvyXkWsVk-&start=10","totalhits":"492215","deephits":"15700000","count":"10","start":"0","resultset_web":[{"abstract":"Hyperlinked description of the domesticated mammal discussing its appearance, relationship to horses, economic <b>...<\/b> horses and <b>donkeys<\/b> were brought back <b>...<\/b>","clickurl":"http:\/\/lrd.yahooapis.com\/_ylc=X3oDMTU4cG05cXJwBF9TAzIwMjMxNTI3MDIEYXBwaWQDVFg2YjRYSFYzNEVuUFhXMHNZRXI1MWhQMXBuNU84S0FHcy5MUVNYZXIxWjdSbW1WclpvdXo1U3Z5WGtXc1ZrLQRwb3MDMARzZX
![Page 38: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/38.jpg)
All you then need to do is put this url in a script node and
write the founddonkeys function:
![Page 39: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/39.jpg)
<div id="searchresults"></div> <script type="text/javascript"> function founddonkeys(o){ var donkeys = o.ysearchresponse.resultset_web; var results = document.createElement('ul'); for(var i=0,j=donkeys.length;i<j;i++){ var item = document.createElement('li'); var link = document.createElement('a'); var abstract = document.createElement('p'); link.setAttribute('href',donkeys[i].clickurl); link.innerHTML = donkeys[i].title; item.appendChild(link); abstract.innerHTML = donkeys[i].abstract; item.appendChild(abstract); results.appendChild(item); }
![Page 40: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/40.jpg)
document.getElementById('searchresults').appendChild(results); } </script> <script type="text/javascript" charset="utf-8" src="http://boss.yahooapis.com/ysearch/web/v1/donkeys?format=json&callback=founddonkeys&appid=xxx"></script>
![Page 41: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/41.jpg)
![Page 42: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/42.jpg)
Two problems though:
![Page 43: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/43.jpg)
First of all – without JavaScript there are no donkeys!
![Page 44: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/44.jpg)
Secondly – you can only find donkeys!
![Page 45: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/45.jpg)
The solution: Event Handling and dynamic script
generation.
![Page 46: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/46.jpg)
![Page 47: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/47.jpg)
<p>Warning: this is terrible code, USE A LIBRARY INSTEAD!</p><ul id="searches"> <li><a href="http://search.yahoo.com/search?va=donkeys"> Search for Donkeys </a> </li> <li><a href="http://search.yahoo.com/search?va=kittens"> Search for kittens </a> </li></ul><div id="searchresults"></div>
![Page 48: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/48.jpg)
<script type="text/javascript" charset="utf-8"> function founddonkeys(o){ var donkeys = o.ysearchresponse.resultset_web; var results = document.createElement('ul'); for(var i=0,j=donkeys.length;i<j;i++){ var item = document.createElement('li'); var link = document.createElement('a'); var abstract = document.createElement('p'); link.setAttribute('href',donkeys[i].clickurl); link.innerHTML = donkeys[i].title; item.appendChild(link); abstract.innerHTML = donkeys[i].abstract; item.appendChild(abstract); results.appendChild(item); } var resultsbox = document.getElementById('searchresults'); resultsbox.innerHTML = ''; resultsbox.appendChild(results); } var APIkey = 'TX6b4XHV34EnPXW0sYEr51hP1pn5O8KAGs'+ '.LQSXer1Z7RmmVrZouz5SvyXkWsVk-'; var searchlinks = document.getElementById('searches').getElementsByTagName('a'); for(var i=0;searchlinks[i];i++){
![Page 49: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/49.jpg)
var APIkey = 'TX6b4XHV34EnPXW0sYEr51hP1pn5O8KAGs'+ '.LQSXer1Z7RmmVrZouz5SvyXkWsVk-'; var searchlinks = document.getElementById('searches').
getElementsByTagName('a'); for(var i=0;searchlinks[i];i++){ searchlinks[i].onclick = function(){ var searchterm = this.href.split('va=')[1]; var url = 'http://boss.yahooapis.com/ysearch/web/v1/' + searchterm + '?format=json&' + 'callback=founddonkeys' + '&appid=' + APIkey var s = document.createElement('script'); s.setAttribute('type','text/javascript'); s.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(s); return false; } }</script>
![Page 50: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/50.jpg)
*click*
![Page 51: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/51.jpg)
Using the YUI library (YUI3 JavaScript and CSS grids) you
can easily make this much cooler:
![Page 52: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/52.jpg)
![Page 53: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/53.jpg)
![Page 54: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/54.jpg)
Now, that was JavaScript, what about the server side
magic and BOSS?
![Page 55: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/55.jpg)
Over to my colleague for some hot Python action...
![Page 56: JavaScript and BOSS- Open Hack Day Brazil](https://reader034.fdocuments.us/reader034/viewer/2022052504/554a1559b4c9058c5d8b4e1e/html5/thumbnails/56.jpg)
Christian Heilmann | http://wait-till-i.com | twitter: codepo8
Obrigado!