Building Web Hack Interfaces

Slide 1: Building Web Hack Interfaces Christian Heilmann UEL Hack Day London, UK, October 2007

Slide 2: Building web interfaces is a fun task.

Slide 3: The technologies involved are easy to learn.

Slide 4: Text + Images + Multimedia = Content “What is it about”

Slide 5: HTML = Structure “What is what”

Slide 6: CSS + Background images = Look and Feel “How should it be displayed”

Slide 7: Scripting and Extensions = Behaviour “How should it behave and react?”

Slide 8: Playing each of these to their respective strengths = great web products.

Slide 9: There is one thing to consider though.

Slide 10: Browser Operating System Screen Size Screen Resolution Browser Size Plugins and configurations Input Device Reading Level Vision Level of Understanding Motor accuracy

Slide 11: Browser Operating System Screen Size N Screen Resolution W O Browser Size N K Plugins and configurations N U Input Device Reading Level Vision Level of Understanding Motor accuracy

Slide 12: Keeping this in mind makes you a true developer for the web.

Slide 13: Be paranoid. Expect the failure.

Slide 14: Yahoo! has to do that day-in day-out.

Slide 15: People trust us with their data and use our products to connect with other people.

Slide 16: This is why we hire great developers.

Slide 17: This is also why we use their knowledge to make things easier for all.

Slide 18: Instead of constantly re- inventing we spy good solutions and learn from mistakes.

Slide 19: The outcome of this research is available to you!

Slide 20: http://developer.yahoo.com

Slide 21: Learn about:  Design Patterns  Performance  Security

Slide 22: Tap into the collective wisdom:

Slide 25: The Yahoo! User Interface Library

Slide 26:  CSS Framework  JavaScript Library  Widget Framework  Debugging Utility

Slide 27: CSS Components: –CSS Reset –CSS Fonts –CSS Grids Making CSS layouts predictable = and working across browsers and operating systems

Slide 28: JavaScript Components: –DOM –Event –Connection –Animation Making JavaScript development = less random across browsers and easier to concentrate on the architecture of your scripts.

Slide 29: 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.

Slide 30: Debugging –YUI Logger is a cross-browser, cross-platform debugging console. –YUITest is a unit and component testing framework in JavaScript

Slide 31: Industrial Strength for everyday solutions

Slide 32: Comes with full documentation, examples, cheatsheets and quick start guides. http://developer.yahoo.com/yui/docs

Slide 33: Others already benefit:

Slide 34: http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/

Slide 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

Slide 36: We also like to tell people about cool YUI stuff.

Slide 37: http://yuiblog.com

Slide 38: Play with our APIs and Feeds.

Slide 39: Answers Local Mail Maps Search Shopping Travel del.icio.us Flickr™ MyBlogLog Pipes Upcoming Webjay Finance HotJobs Traffic Weather

Slide 40: Get SDKs to play with our applications: Messenger Music Search Widgets

Slide 41: What if there is some data you want to access but no API to get it in the right format?

Slide 42: http://pipes.yahoo.com

Slide 45: … or hack what is out there.

Slide 46: Example: slideshare.net

Slide 47: Slideshare is a place to share presentations.

Slide 48: You can embed the presentations into other web products.

Slide 50: There is an API, but there is no way to get all your latest presentations to have a “slide portfolio”.

Slide 51: However, there is an RSS feed with all the data I need!

Slide 53: Battle plan: Retrieve feed Display links to slides Get the slide movies Write some script to show the movies when the links are clicked

Slide 54: <?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].'\\''; } ?>

Slide 55: <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>

Slide 56: type=\"text/javascript\"> <script 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>

Slide 57: http://www.wait-till-i.com/index.php?p=500

Slide 58: 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)

Slide 59: Anything else?

Slide 60: per aspera ad astra \"through adversity to the stars\" or \"a rough road leads to the stars\"

Slide 61: per aspera ad astra

Slide 62: http://developer.yahoo.com/flash/

Slide 63: Get Flashing and Flexing

Slide 64: Thank you! Christian Heilmann http://wait-till-i.com http://icant.co.uk http://creativecommons.org/licenses/by-sa/3.0/