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