Successfully reported this slideshow.
Your SlideShare is downloading. ×

Bastelstunde mit dem web und freien-daten-webtechcon2010

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 135 Ad
Advertisement

More Related Content

Viewers also liked (20)

More from Christian Heilmann (20)

Advertisement

Bastelstunde mit dem web und freien-daten-webtechcon2010

  1. 1. Bastelstunde mit dem Web und freien Daten. Chris&an Heilmann WebTechCon, Mainz, Oktober 2010
  2. 2. Wer? Wie? Was?
  3. 3. Der Chris (@codepo8) Die Freude am Entdecken Das Web und warum es rockt
  4. 4. Wieso? Weshalb? Warum?
  5. 5. Weil ihr hier seit und ich gern tolle Sachen weitergebe.
  6. 6. Ist die Stimme dann im Eimer, keine Kippen, warme Suppen...
  7. 7. Letzes Jahr war ich tuechtig.
  8. 8. http://keywordfinder.org/
  9. 9. http://isithackday.com/hacks/guardian/
  10. 10. http://icant.co.uk/geomaker/
  11. 11. http://isithackday.com/geoplanet-explorer/geodrilldown.php
  12. 12. http://github.com/codepo8/QuickTrans
  13. 13. http://isithackday.com/demos/warwickshire/ http://github.com/codepo8/warwickshire http://www.youtube.com/watch?v=_uAOyzw50PY
  14. 14. http://www.youtube.com/watch?v=i_1sVnNkN2M http://isithackday.com/hacks/flickrcollector/ http://github.com/codepo8/flickrcollector
  15. 15. http://isithackday.com/fifa2010/
  16. 16. http://icant.co.uk/goohoobi/index.php?research
  17. 17. h<p://uk‐house‐prices.com/
  18. 18. http://winterolympicsmedals.com
  19. 19. Ich liebe es im Web zu arbeiten.
  20. 20. Dinge werden ziemlich einfach wenn man sich etwas vor Augen fuehrt.
  21. 21. Was ist das Web?
  22. 22. Was ist das Web? Daten + Darstellung
  23. 23. Am Anfang stehen die Daten.
  24. 24. Daten kommen in allen moeglichen Formaten.
  25. 25. Fuers Web machen nicht alle Sinn.
  26. 26. In den letzten Jahren stellten sich ein paar Formate als am Einfachsten fuers Web heraus...
  27. 27. REST JSON JSON-P XML(wenns denn sein muss)
  28. 28. REST bedeutet im Grunde das die URL die Daten beschreibt die man haben moechte.
  29. 29. http://www.delicious.com/
  30. 30. http://www.delicious.com/codepo8/
  31. 31. http://www.delicious.com/codepo8/javascript
  32. 32. http://www.delicious.com/codepo8/javascript+ajax
  33. 33. Das gilt auch fuer Web Services und andere Formate.
  34. 34. Wasn JSON?
  35. 35. JSON ist die JavaScript Object Notation.
  36. 36. Wollen wir zum Beispiel einen genialen Film definieren, kann man das mit XML machen.
  37. 37. XML
  38. 38. XML
  39. 39. XML JSON
  40. 40. JSON hat ein paar Fehler, aber kann mehr fuers Web.
  41. 41. JSON ist kuerzer, mit weniger Wiederholungen und vor allem isses auch gleich JavaScript!
  42. 42. JSON-P ist das gleiche, nur ist da noch ein Funktionsaufruf drumrum.
  43. 43. Daher kann man JSON-P gleich in JavaScript in <script> verwenden!
  44. 44. http://feeds.delicious.com/v2/ json/popular/javascript ?callback=legga
  45. 45. Also, alles ziemlich einfach!
  46. 46. Nur verwendet man das halt nicht so oft.
  47. 47. Das Problem mit APIs ist das man sich ne Menge merken muss.
  48. 48. Ausserdem muss man sich auch noch ueberall einschreiben.
  49. 49. Daher benutze ich YQL.
  50. 50. select {was} von {wo} where {wie}
  51. 51. http://query.yahooapis.com/v1/public/ yql?q= select%20was%20von%20wo%20where %20wie &format=json&diagnostics=true&callbac k=gibsmir
  52. 52. Anstatt eines Services gibt es nun alle!
  53. 53. Einfachste Anwendung: Scraping. http://www.flickr.com/photos/fdtate/4426760544/
  54. 54. Scraping ist problematisch - HTML runterzuholen ist einfach, doch die Daten drin zu finden ist schwierig.
  55. 55. HTML scraping mit YQL macht es einfach, seine eigenen und die Daten anderer zu verwenden.
  56. 56. SEITEN SEITEN
  57. 57. Mit YQL werden die Seiten durch Tidy gejagt und sind per XPath zu erreichen.
  58. 58. Das kann man verwenden um interessante Sachen zu machen...
  59. 59. Also...
  60. 60. http://www.slideshare.net/cheilmann/reasons-to-be-cheerful-fronteers-2010
  61. 61. select * from html where url="http://www.slideshare.net/ cheilmann/reasons-to-be-cheerful- fronteers-2010" and xpath="//ol/li/p[contains(.,'http')]"
  62. 62. http://y.ahoo.it/r/ENSPGm
  63. 63. Oder noch lustigere Sachen...
  64. 64. http://lanyrd.com/people/codepo8/
  65. 65. JSON-P in jQuery: $.ajax({ url: url, dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'gibsmir' }); function gibsmir(daten){ }
  66. 66. JSON-P in jQuery (kuerzer): $.getJSON(url+'&callback=?', function(data){ });
  67. 67. $.ajax(): http://{...}& format=json&callback=datain $.getJSON(): http://{...}& format=json&callback=jsonp1282497813335 Zufallszahl
  68. 68. getJSON() macht dem Cache des Webservices Aua...
  69. 69. ...da jede Anfrage eine individuelle URL ist, obwohl man die gleichen Daten haben will...
  70. 70. ... und da kann es dann schnell passieren, das man rausgeschmissen wird.
  71. 71. Lokales caching bedeutet das der Webservice nicht meckert.
  72. 72. Aufm Server ist das einfach, daher sag ich dazu nix.
  73. 73. Aufm Client sieht das anders aus, da Cookies einfach schlecht sind.
  74. 74. Aber da gibbet jetzt was Neues...
  75. 75. HTML5 localStorage
  76. 76. Anstatt Kekse auf dem Server zu stellen die nur 4k sein koennen und den HTTP Verkehr verstopfen...
  77. 77. Haben wir nun mehrere MB um Daten als key/value store abzulegen!
  78. 78. Die Daten sind per Domain abgelegt.
  79. 79. So tut das: if(('localStorage' in window) && window['localStorage'] !== null){ localStorage.setItem( 'Kuchen', 'besser als Kekse' ) }
  80. 80. So tut das: if(('localStorage' in window) && window['localStorage'] !== null){ localStorage.getItem( 'Kuchen' ) // -> 'besser als Kekse' }
  81. 81. localStorage kann nur Strings, keine Objekte!
  82. 82. Daher, JSON.
  83. 83. if(('localStorage' in window) && window['localStorage'] !== null){ localStorage.setItem( 'Kuchen', JSON.stringify( {lecker:‘stimmt’,kerzen:5} ) ); }
  84. 84. if(('localStorage' in window) && window['localStorage'] !== null){ JSON.parse( localStorage.getItem('Kuchen') ); // -> Object{...} anstatt [Object object] }
  85. 85. YQL mit localStorage?
  86. 86. OK, dann machen wir das halt..
  87. 87. yql - die Anfrage id - der Speicherkey cacheage - wie lang callback - deine Funktion
  88. 88. Neue Browser holen die Daten einmal pro Stunde pro User.
  89. 89. Alle anderen machen immer noch YQL Aua, aber funktionieren auch.
  90. 90. Wie gehtn des?
  91. 91. OK, dann machen wir das halt..
  92. 92. OK, dann machen wir das halt..
  93. 93. OK, dann machen wir das halt..
  94. 94. = schnellere Applikation ohne YQL Meckerei.
  95. 95. Das kommt dann bald auf GitHub dann kann man da auch ein jQuery Plugin bauen.
  96. 96. Scraping ist ja nett, aber interessant wird es wenn man APIs verwendet.
  97. 97. http://github.com/codepo8/firehose-research/
  98. 98. http://icant.co.uk/goohoobi/index.php?research
  99. 99. 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" '
  100. 100. http://vimeo.com/8075850
  101. 101. http://winterolympicsmedals.com
  102. 102. http://www.guardian.co.uk/news/datablog/ 2010/feb/11/winter-olympics-medals-by-country
  103. 103. select * from csv where url="http:// spreadsheets.google.com/pub? key=tpWDkIZMZleQaREf493v1Jw&output= csv" and columns="Year,City,Sport,Discipline,Countr y,Event, Gender,Type" and Year="1924"
  104. 104. Bausteine gibts ueberall.
  105. 105. http://www.yuiblog.com/blog/2010/02/11/video-heilmann-yql/
  106. 106. (...)
  107. 107. http://code.google.com/apis/charttools/ 126
  108. 108. http://code.google.com/appengine/ 128
  109. 109. http://github.com 129
  110. 110. http://heroku.com/ 130
  111. 111. Ihr habt die Daten, ihr habt die Bausteine.
  112. 112. Alles was noch fehlt, sind die Ideen.
  113. 113. Also, schaut euch um anstatt euch zu verstecken
  114. 114. Und wer nicht fragt, bleibt dumm!
  115. 115. Christian Heilmann http://wait-till-i.com Danke! http://developer-evangelism.com http://twitter.com/codepo8

×