Building Web Hack Interfaces

12,466 views
12,343 views

Published on

A presentation for Dundee University's Hack Day explaining the technologies to use and how to hack your own APIs by using Yahoo! Pipes and scraping RSS feeds.

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,466
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
388
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Building Web Hack Interfaces

  1. 1. Building Web Hack Interfaces Christian Heilmann UEL Hack Day London, UK, October 2007
  2. 2. <ul><li>Building web interfaces is a fun task. </li></ul>
  3. 3. <ul><li>The technologies involved are easy to learn. </li></ul>
  4. 4. <ul><li>Text + Images + Multimedia </li></ul><ul><li>= </li></ul><ul><li>Content </li></ul><ul><li>“ What is it about” </li></ul>
  5. 5. <ul><li>HTML </li></ul><ul><li>= </li></ul><ul><li>Structure </li></ul><ul><li>“ What is what” </li></ul>
  6. 6. <ul><li>CSS + Background images </li></ul><ul><li>= </li></ul><ul><li>Look and Feel </li></ul><ul><li>“ How should it be displayed” </li></ul>
  7. 7. <ul><li>Scripting and Extensions </li></ul><ul><li>= </li></ul><ul><li>Behaviour </li></ul><ul><li>“ How should it behave and react?” </li></ul>
  8. 8. <ul><li>Playing each of these to their respective strengths = </li></ul><ul><li>great web products. </li></ul>
  9. 9. <ul><li>There is one thing to consider though. </li></ul>
  10. 10. <ul><li>Browser </li></ul><ul><li>Operating System </li></ul><ul><li>Screen Size </li></ul><ul><li>Screen Resolution </li></ul><ul><li>Browser Size </li></ul><ul><li>Plugins and configurations </li></ul><ul><li>Input Device </li></ul><ul><li>Reading Level </li></ul><ul><li>Vision </li></ul><ul><li>Level of Understanding </li></ul><ul><li>Motor accuracy </li></ul>
  11. 11. <ul><li>Browser </li></ul><ul><li>Operating System </li></ul><ul><li>Screen Size </li></ul><ul><li>Screen Resolution </li></ul><ul><li>Browser Size </li></ul><ul><li>Plugins and configurations </li></ul><ul><li>Input Device </li></ul><ul><li>Reading Level </li></ul><ul><li>Vision </li></ul><ul><li>Level of Understanding </li></ul><ul><li>Motor accuracy </li></ul>UNKNOWN
  12. 12. <ul><li>Keeping this in mind makes you a true developer for the web. </li></ul>
  13. 13. <ul><li>Be paranoid. </li></ul><ul><li>Expect the failure. </li></ul>
  14. 14. <ul><li>Yahoo! has to do that day-in day-out. </li></ul>
  15. 15. <ul><li>People trust us with their data and use our products to connect with other people. </li></ul>
  16. 16. <ul><li>This is why we hire great developers. </li></ul>
  17. 17. <ul><li>This is also why we use their knowledge to make things easier for all. </li></ul>
  18. 18. <ul><li>Instead of constantly re-inventing we spy good solutions and learn from mistakes. </li></ul>
  19. 19. <ul><li>The outcome of this research is available to you! </li></ul>
  20. 20. http://developer.yahoo.com
  21. 21. <ul><li>Learn about: </li></ul><ul><li>Design Patterns </li></ul><ul><li>Performance </li></ul><ul><li>Security </li></ul>
  22. 22. <ul><li>Tap into the collective wisdom: </li></ul>
  23. 25. <ul><li>The Yahoo! User Interface Library </li></ul>
  24. 26. <ul><li>CSS Framework </li></ul><ul><li>JavaScript Library </li></ul><ul><li>Widget Framework </li></ul><ul><li>Debugging Utility </li></ul>
  25. 27. <ul><li>CSS Components: </li></ul><ul><ul><li>CSS Reset </li></ul></ul><ul><ul><li>CSS Fonts </li></ul></ul><ul><ul><li>CSS Grids </li></ul></ul><ul><ul><li>Making CSS layouts predictable and working across browsers and operating systems </li></ul></ul>=
  26. 28. <ul><li>JavaScript Components: </li></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>Event </li></ul></ul><ul><ul><li>Connection </li></ul></ul><ul><ul><li>Animation </li></ul></ul><ul><ul><li>Making JavaScript development less random across browsers and easier to concentrate on the architecture of your scripts. </li></ul></ul>=
  27. 29. <ul><li>Widgets: </li></ul><ul><ul><li>Panel Dialog Autocomplete DataTable Slider Menu Calendar Colorpicker Tabview </li></ul></ul><ul><ul><li>Rich Text Editor </li></ul></ul><ul><ul><li>Creating HTML/CSS/JS based RIAs with tested and fully skinnable components. </li></ul></ul>=
  28. 30. <ul><li>Debugging </li></ul><ul><ul><li>YUI Logger is a cross-browser, cross-platform debugging console. </li></ul></ul><ul><ul><li>YUITest is a unit and component testing framework in JavaScript </li></ul></ul>
  29. 31. <ul><li>Industrial Strength </li></ul><ul><li>for everyday solutions </li></ul>
  30. 32. <ul><li>Comes with full documentation, examples, cheatsheets and quick start guides. </li></ul><ul><li>http://developer.yahoo.com/yui/docs </li></ul>
  31. 33. <ul><li>Others already benefit: </li></ul>
  32. 34. http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/
  33. 35. http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/ Newsvine, Opera, O’Reilly, Dow Jones Index, Paypal, Slashdot, Digg, SugarCRM, VersionTracker,iFilm, vBulletin, ebay
  34. 36. <ul><li>We also like to tell people about cool YUI stuff. </li></ul>
  35. 37. http://yuiblog.com
  36. 38. <ul><li>Play with our APIs and Feeds. </li></ul>
  37. 39. <ul><li>Answers Local Mail Maps Search Shopping Travel del.icio.us Flickr™ MyBlogLog Pipes Upcoming Webjay Finance HotJobs Traffic Weather </li></ul>
  38. 40. <ul><li>Get SDKs to play with our applications: </li></ul><ul><li>Messenger </li></ul><ul><li>Music </li></ul><ul><li>Search </li></ul><ul><li>Widgets </li></ul>
  39. 41. <ul><li>What if there is some data you want to access but no API to get it in the right format? </li></ul>
  40. 42. http://pipes.yahoo.com
  41. 45. <ul><li>… or hack what is out there. </li></ul>
  42. 46. <ul><li>Example: slideshare.net </li></ul>
  43. 47. <ul><li>Slideshare is a place to share presentations. </li></ul>
  44. 48. <ul><li>You can embed the presentations into other web products. </li></ul>
  45. 50. <ul><li>There is an API, but there is no way to get all your latest presentations to have a “slide portfolio”. </li></ul>
  46. 51. <ul><li>However, there is an RSS feed with all the data I need! </li></ul>
  47. 53. <ul><li>Battle plan: </li></ul><ul><li>Retrieve feed </li></ul><ul><li>Display links to slides </li></ul><ul><li>Get the slide movies </li></ul><ul><li>Write some script to show the movies when the links are clicked </li></ul>
  48. 54. <ul><li><?php </li></ul><ul><li>$url = 'http://www.slideshare.net/rss/user/cheilmann'; </li></ul><ul><li>$ch = curl_init(); </li></ul><ul><li>curl_setopt($ch, CURLOPT_URL, $url); </li></ul><ul><li>curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); </li></ul><ul><li>$slides = curl_exec($ch); </li></ul><ul><li>curl_close($ch); </li></ul><ul><li>$slides = str_replace('slideshare:embed','slideshareembed',$slides); </li></ul><ul><li>$slides = str_replace('media:title','mediatitle',$slides); </li></ul><ul><li>$xml = domxml_xmltree($slides); </li></ul><ul><li>$json = array(); </li></ul><ul><li>$slidesharelist = ''; </li></ul><ul><li>$links = $xml->get_elements_by_tagname('link'); </li></ul><ul><li>$img = $xml->get_elements_by_tagname('url'); </li></ul><ul><li>$titles = $xml->get_elements_by_tagname('mediatitle'); </li></ul><ul><li>$embeds = $xml->get_elements_by_tagname('slideshareembed'); </li></ul><ul><li>foreach ($embeds as $key=>$el) { </li></ul><ul><li>$l = $links[$key+1]->children[0]->content; </li></ul><ul><li>$t = $titles[$key]->children[0]->content; </li></ul><ul><li>$slidesharelist .= '<li><a href=&quot;'.$l.'&quot;>'.$t.'</a></li>'; </li></ul><ul><li>$emb = $el->children[0]->content; </li></ul><ul><li>if(strpos($emb,'<div')===false){$emb = $el->children[1]->content;} </li></ul><ul><li>preg_match_all('/value=&quot;([^&quot;]+)&quot;/msi',$emb,$obj); </li></ul><ul><li>$json[]='''.$obj[1][0].'''; </li></ul><ul><li>} </li></ul><ul><li>?> </li></ul>
  49. 55. <ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>@import 'slideshareshowstyles.css'; </li></ul><ul><li>#slideshareshowslideshow{background:url(<?php echo $img[0]->children[0]->content;?>) no-repeat center center;} </li></ul><ul><li></style> </li></ul><ul><li><div id=&quot;slideshareshow&quot;> </li></ul><ul><li><ul id=&quot;slideshareslides&quot;><?php echo $slidesharelist; ?></ul> </li></ul><ul><li></div> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;></script> </li></ul>
  50. 56. <ul><li>< script type=&quot;text/javascript&quot;> </li></ul><ul><li>YAHOO.example.slideshareshow = function(){ </li></ul><ul><li>var container = document.getElementById('slideshareshow'); </li></ul><ul><li>YAHOO.util.Dom.addClass(container,'jsenabled'); </li></ul><ul><li>var list = document.getElementById('slideshareslides'); </li></ul><ul><li>var links = list.getElementsByTagName('a'); </li></ul><ul><li>var displayContainer = document.createElement('div'); </li></ul><ul><li>displayContainer.id = 'slideshareshowslideshow'; </li></ul><ul><li>container.appendChild(displayContainer); </li></ul><ul><li>var current = null; </li></ul><ul><li>for(var i=0;links[i];i++){ </li></ul><ul><li>YAHOO.util.Event.on(links[i],'click',show,i); </li></ul><ul><li>} </li></ul><ul><li>function show(e,i){ </li></ul><ul><li>YAHOO.util.Dom.removeClass(current,'current'); </li></ul><ul><li>current = this; </li></ul><ul><li>displayContainer.innerHTML = ''; </li></ul><ul><li>var so = new SWFObject(slides[i], &quot;slideshareshow&quot;, &quot;425&quot;, &quot;355&quot;, &quot;8&quot;, &quot;#ffffff&quot;); </li></ul><ul><li>so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); </li></ul><ul><li>so.addParam(&quot;allowFullScreen&quot;, &quot;true&quot;); </li></ul><ul><li>so.write(displayContainer); </li></ul><ul><li>YAHOO.util.Dom.addClass(current,'current'); </li></ul><ul><li>YAHOO.util.Event.stopEvent(e); </li></ul><ul><li>} </li></ul><ul><li>var slides=[<?php echo implode($json,','); ?>]; </li></ul><ul><li>}(); </li></ul><ul><li></script> </li></ul>
  51. 57. <ul><li>http://www.wait-till-i.com/index.php?p=500 </li></ul>
  52. 58. <ul><li>This is awesome! We are building badges for people to be able to display lists of their recent slideshows on their site, but it did not integrate the player. I love what you have done – well designed and well executed. I want it for my own site now. </li></ul><ul><li>I will post about it to our blog. And we will point to it when we release our own badges. </li></ul><ul><li>Thanks! </li></ul><ul><li>rashmi (SlideShare cofounder) </li></ul>
  53. 59. <ul><li>Anything else? </li></ul>
  54. 60. <ul><li>per aspera ad astra </li></ul><ul><li>&quot;through adversity to the stars&quot; </li></ul><ul><li>or </li></ul><ul><li>&quot;a rough road leads to the stars&quot; </li></ul>
  55. 61. <ul><li>per aspera ad astra </li></ul>
  56. 62. http:// developer.yahoo.com /flash/
  57. 63. <ul><li>Get Flashing and Flexing </li></ul>
  58. 64. <ul><li>Christian Heilmann </li></ul><ul><li>http://wait-till-i.com </li></ul><ul><li>http://icant.co.uk </li></ul>Thank you! http://creativecommons.org/licenses/by-sa/3.0/

×