bastelstunde mit dem web und freien-daten-webtechcon2010

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://icant.co.uk/geomaker/

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://isithackday.com/fifa2010/

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')]"

http://y.ahoo.it/r/ENSPGm

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://vimeo.com/8075850

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!