Embed Size (px)
DESCRIPTION
Citation preview
Bastelstunde mit dem Web und freien Daten.
Chris&an HeilmannWebTechCon, Mainz, Oktober 2010
Wer?Wie?Was?
DerDie
Das Web und warum es rockt
Freude am Entdecken
Chris (@codepo8)
Wieso?Weshalb?Warum?
Weil ihr hier seit und ich gern tolle Sachen weitergebe.
Ist die Stimme dann im Eimer, keine Kippen, warme Suppen...
Letzes Jahr war ich tuechtig.
http://keywordfinder.org/
http://isithackday.com/hacks/guardian/
http://isithackday.com/geoplanet-explorer/geodrilldown.php
http://github.com/codepo8/QuickTrans
http://github.com/codepo8/warwickshire
http://isithackday.com/demos/warwickshire/
http://www.youtube.com/watch?v=_uAOyzw50PY
http://github.com/codepo8/flickrcollector
http://isithackday.com/hacks/flickrcollector/
http://www.youtube.com/watch?v=i_1sVnNkN2M
http://icant.co.uk/goohoobi/index.php?research
h<p://uk‐house‐prices.com/
http://winterolympicsmedals.com
Ich liebe es im Web zu arbeiten.
Dinge werden ziemlich einfach wenn man sich etwas vor Augen fuehrt.
Was ist das Web?
Was ist das Web?
Daten + Darstellung
Am Anfang stehen die Daten.
Daten kommen in allen moeglichen Formaten.
Fuers Web machen nicht alle Sinn.
In den letzten Jahren stellten sich ein paar Formate als am Einfachsten fuers Web heraus...
RESTJSONJSON-PXML (wenns denn sein muss)
REST bedeutet im Grunde das die URL die Daten beschreibt die man haben moechte.
http://www.delicious.com/
http://www.delicious.com/codepo8/
http://www.delicious.com/codepo8/javascript
http://www.delicious.com/codepo8/javascript+ajax
Das gilt auch fuer Web Services und andere Formate.
Wasn JSON?
JSON ist die JavaScript Object Notation.
Wollen wir zum Beispiel einen genialen Film definieren, kann man das mit XML machen.
XML
XML
XML JSON
JSON hat ein paar Fehler, aber kann mehr fuers Web.
JSON ist kuerzer, mit weniger Wiederholungen und vor allem isses auch gleich JavaScript!
JSON-P ist das gleiche, nur ist da noch ein Funktionsaufruf drumrum.
Daher kann man JSON-P gleich in JavaScript in <script> verwenden!
http://feeds.delicious.com/v2/json/popular/javascript?callback=legga
Also, alles ziemlich einfach!
Nur verwendet man das halt nicht so oft.
Das Problem mit APIs ist das man sich ne Menge merken muss.
Ausserdem muss man sich auch noch ueberall einschreiben.
Daher benutze ich YQL.
select {was} von {wo} where {wie}
http://query.yahooapis.com/v1/public/yql?q=
select%20was%20von%20wo%20where%20wie
&format=json&diagnostics=true&callback=gibsmir
Anstatt eines Services gibt es nun alle!
Einfachste Anwendung: Scraping.
http://www.flickr.com/photos/fdtate/4426760544/
Scraping ist problematisch - HTML runterzuholen ist einfach, doch die Daten drin zu finden ist schwierig.
HTML scraping mit YQL macht es einfach, seine eigenen und die Daten anderer zu verwenden.
SEITENSEITEN
Mit YQL werden die Seiten durch Tidy gejagt und sind per XPath zu erreichen.
Das kann man verwenden um interessante Sachen zu machen...
Also...
http://www.slideshare.net/cheilmann/reasons-to-be-cheerful-fronteers-2010
select * from html where
url="http://www.slideshare.net/cheilmann/reasons-to-be-cheerful-fronteers-2010"
and
xpath="//ol/li/p[contains(.,'http')]"
Oder noch lustigere Sachen...
http://lanyrd.com/people/codepo8/
$.ajax({ url: url, dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'gibsmir'});function gibsmir(daten){}
JSON-P in jQuery:
$.getJSON(url+'&callback=?', function(data){});
JSON-P in jQuery (kuerzer):
http://{...}&format=json&callback=datain
$.ajax():
$.getJSON():http://{...}&format=json&callback=jsonp1282497813335
Zufallszahl
getJSON() macht dem Cache des Webservices Aua...
...da jede Anfrage eine individuelle URL ist, obwohl man die gleichen Daten haben will...
... und da kann es dann schnell passieren, das man rausgeschmissen wird.
Lokales caching bedeutet das der Webservice nicht meckert.
Aufm Server ist das einfach, daher sag ich dazu nix.
Aufm Client sieht das anders aus, da Cookies einfach schlecht sind.
Aber da gibbet jetzt was Neues...
localStorage
HTML5
Anstatt Kekse auf dem Server zu stellen die nur 4k sein koennen und den HTTP Verkehr verstopfen...
Haben wir nun mehrere MB um Daten als key/value store abzulegen!
Die Daten sind per Domain abgelegt.
So tut das:
if(('localStorage' in window) && window['localStorage'] !== null){
localStorage.setItem( 'Kuchen', 'besser als Kekse')
}
So tut das:
if(('localStorage' in window) && window['localStorage'] !== null){
localStorage.getItem( 'Kuchen')// -> 'besser als Kekse'
}
localStorage kann nur Strings, keine Objekte!
Daher, JSON.
if(('localStorage' in window) && window['localStorage'] !== null){
localStorage.setItem( 'Kuchen', JSON.stringify( {lecker:‘stimmt’,kerzen:5} ));
}
if(('localStorage' in window) && window['localStorage'] !== null){
JSON.parse( localStorage.getItem('Kuchen'));// -> Object{...} anstatt [Object object]
}
YQL mit localStorage?
OK, dann machen wir das halt..
yql - die Anfrageid - der Speicherkeycacheage - wie langcallback - deine Funktion
Neue Browser holen die Daten einmal pro Stunde pro User.
Alle anderen machen immer noch YQL Aua, aber funktionieren auch.
Wie gehtn des?
OK, dann machen wir das halt..
OK, dann machen wir das halt..
OK, dann machen wir das halt..
= schnellere Applikation ohne YQL Meckerei.
Das kommt dann bald auf GitHub dann kann man da auch ein jQuery Plugin bauen.
Scraping ist ja nett, aber interessant wird es wenn man APIs verwendet.
http://github.com/codepo8/firehose-research/
http://icant.co.uk/goohoobi/index.php?research
select * from query.multi where queries=' select Title,Description,Url,DisplayUrl from microsoft.bing.web(20) where query="cat"; select title,clickurl,abstract,dispurl from search.web(20) where query="cat"; select titleNoFormatting,url,content,visibleUrl from google.search(20) where q="cat"'
http://winterolympicsmedals.com
http://www.guardian.co.uk/news/datablog/2010/feb/11/winter-olympics-medals-by-country
select * from csv where url="http://spreadsheets.google.com/pub?key=tpWDkIZMZleQaREf493v1Jw&output=csv" and columns="Year,City,Sport,Discipline,Country,Event, Gender,Type" and Year="1924"
Bausteine gibts ueberall.
http://www.yuiblog.com/blog/2010/02/11/video-heilmann-yql/
(...)
http://code.google.com/apis/charttools/
126
http://code.google.com/appengine/
128
http://github.com
129
http://heroku.com/
130
Ihr habt die Daten, ihr habt die Bausteine.
Alles was noch fehlt, sind die Ideen.
Also, schaut euch um anstatt euch zu verstecken
Und wer nicht fragt, bleibt dumm!
Christian Heilmann http://wait-till-i.com http://developer-evangelism.com http://twitter.com/codepo8
Danke!
