Widgets are fun! sometimes..


Published on

my presentation for Widgetdevcamp

Published in: Technology, Sports
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Widgets are fun! sometimes..

  1. a love and hate tale of widgets design centric thinking in a world of clutter
  2. Websites are your house <ul><li>I am an architect </li></ul><ul><ul><li>Some are crazier than others? </li></ul></ul><ul><li>He is a construction foreman </li></ul><ul><li>WebPages are like your desk? </li></ul>
  3. What I love about widgets <ul><li>They usually care some form of useful information </li></ul><ul><li>Sometimes they can be “hacked” </li></ul><ul><ul><li>And this is what we are going to talk about </li></ul></ul>
  4. What I hate about widgets <ul><li>Widgets in theory add to clutter </li></ul><ul><li>They are usually smuggling ads </li></ul><ul><li>What I want is just the data and no strings attached </li></ul>
  5. ads <ul><li>Random content survives on novelty </li></ul><ul><ul><li>Ads support most widgets </li></ul></ul><ul><ul><ul><li>Unless you make your own! </li></ul></ul></ul>
  6. most widgets add to lifes chaos!
  7. An easy challenge <ul><li>Flickr feed display </li></ul><ul><ul><li>Ad free (LESS CLUTTER) </li></ul></ul>
  8. Flickr <ul><li>/ tools </li></ul><ul><ul><li>“ Create your own Flickr badge” </li></ul></ul><ul><ul><li>An HTML badge </li></ul></ul><ul><li>Would you like to include a link to Flickr? </li></ul><ul><ul><li>Hmm? </li></ul></ul><ul><li>No back ground </li></ul><ul><li>No Border </li></ul><ul><ul><li>This is the code you need: </li></ul></ul><ul><ul><ul><li>All you need to do is copy and paste this chunk of code into your website where you'd like your “widget” to appear. </li></ul></ul></ul>
  9. <ul><li><!-- Start of Flickr Badge --> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} </li></ul><ul><li>#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;} </li></ul><ul><li>#flickr_icon_td {padding:0 5px 0 0 !important;} </li></ul><ul><li>.flickr_badge_image {text-align:center !important;} </li></ul><ul><li>.flickr_badge_image img {border: 1px solid black !important;} </li></ul><ul><li>#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} </li></ul><ul><li>#flickr_badge_uber_wrapper a:hover, </li></ul><ul><li>#flickr_badge_uber_wrapper a:link, </li></ul><ul><li>#flickr_badge_uber_wrapper a:active, </li></ul><ul><li>#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;} </li></ul><ul><li>#flickr_badge_wrapper {} </li></ul><ul><li>#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} </li></ul><ul><li></style> </li></ul><ul><li><table id=&quot;flickr_badge_uber_wrapper&quot; cellpadding=&quot;0&quot; cellspacing=&quot;10&quot; border=&quot;0&quot;><tr><td><a href=&quot;http://www.flickr.com&quot; id=&quot;flickr_www&quot;>www.<strong style=&quot;color:#3993ff&quot;>flick<span style=&quot;color:#ff1c92&quot;>r</span></strong>.com</a><table cellpadding=&quot;0&quot; cellspacing=&quot;10&quot; border=&quot;0&quot; id=&quot;flickr_badge_wrapper&quot;> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=v&source=all_tag&tag=barcampdc&quot;></script> </li></ul><ul><li></table> </li></ul><ul><li></td></tr></table> </li></ul><ul><li><!-- End of Flickr Badge --> </li></ul><ul><li>This is what flickr gives you </li></ul>
  10. 3 vs 3000 <ul><li><script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=3&display=random&size=o&layout=v&source=all_tag&tag=barcampdc&quot;></script> </li></ul><ul><li><br /> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=3000&display=random&size=s&layout=v&source=all_tag&tag=jess3&quot;></script> </li></ul><ul><li>This is all you need </li></ul><ul><ul><li>Why don’t they just give you access to the feed? </li></ul></ul><ul><ul><ul><li>advertising </li></ul></ul></ul><ul><ul><ul><li>clutter </li></ul></ul></ul>
  11. All Sizes for all pics <ul><li>s small square 75x75 </li></ul><ul><li>t thumbnail, 100 on longest side </li></ul><ul><li>m small, 240 on longest side </li></ul><ul><li>[none] medium, 500 on longest side </li></ul><ul><li>b large, 1024 on longest side (only exists for very large original images that were resized during upload) </li></ul><ul><li>o original image, either a jpg, gif or png, depending on source format </li></ul>
  12. 75x75 <ul><li>Reliability </li></ul><ul><li>Flexibility </li></ul><ul><ul><li>Squares are easy </li></ul></ul>
  13. Cheers <ul><li>Jess3.com </li></ul><ul><li>Jess3.com/blog </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.