a love and hate tale of widgets design centric thinking in a world of clutter

Websites are your house I am an architect Some are crazier than others? He is a construction foreman WebPages are like your desk?

I am an architect

Some are crazier than others?

He is a construction foreman

WebPages are like your desk?

What I love about widgets They usually care some form of useful information Sometimes they can be “hacked” And this is what we are going to talk about

They usually care some form of useful information

Sometimes they can be “hacked”

And this is what we are going to talk about

What I hate about widgets Widgets in theory add to clutter They are usually smuggling ads What I want is just the data and no strings attached

Widgets in theory add to clutter

They are usually smuggling ads

What I want is just the data and no strings attached

ads Random content survives on novelty Ads support most widgets Unless you make your own!

Random content survives on novelty

Ads support most widgets

Unless you make your own!

most widgets add to lifes chaos!

An easy challenge Flickr feed display Ad free (LESS CLUTTER)

Flickr feed display

Ad free (LESS CLUTTER)

Flickr / tools “ Create your own Flickr badge” An HTML badge Would you like to include a link to Flickr? Hmm? No back ground No Border This is the code you need: All you need to do is copy and paste this chunk of code into your website where you'd like your “widget” to appear.

/ tools

“ Create your own Flickr badge”

An HTML badge

Would you like to include a link to Flickr?

Hmm?

No back ground

No Border

This is the code you need:

All you need to do is copy and paste this chunk of code into your website where you'd like your “widget” to appear.

<!-- Start of Flickr Badge --> <style type=&quot;text/css&quot;> #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;} #flickr_icon_td {padding:0 5px 0 0 !important;} .flickr_badge_image {text-align:center !important;} .flickr_badge_image img {border: 1px solid black !important;} #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;} #flickr_badge_wrapper {} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} </style> <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;> <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> </table> </td></tr></table> <!-- End of Flickr Badge --> This is what flickr gives you

<!-- Start of Flickr Badge -->

<style type=&quot;text/css&quot;>

#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}

#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}

#flickr_icon_td {padding:0 5px 0 0 !important;}

.flickr_badge_image {text-align:center !important;}

.flickr_badge_image img {border: 1px solid black !important;}

#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}

#flickr_badge_uber_wrapper a:hover,

#flickr_badge_uber_wrapper a:link,

#flickr_badge_uber_wrapper a:active,

#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}

#flickr_badge_wrapper {}

#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

</style>

<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;>

<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>

</table>

</td></tr></table>

<!-- End of Flickr Badge -->

This is what flickr gives you

3 vs 3000 <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> <br /> <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> This is all you need Why don’t they just give you access to the feed? advertising clutter

<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>

<br />

<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>

This is all you need

Why don’t they just give you access to the feed?

advertising

clutter

All Sizes for all pics s small square 75x75 t thumbnail, 100 on longest side m small, 240 on longest side [none] medium, 500 on longest side b large, 1024 on longest side (only exists for very large original images that were resized during upload) o original image, either a jpg, gif or png, depending on source format

s small square 75x75

t thumbnail, 100 on longest side

m small, 240 on longest side

[none] medium, 500 on longest side

b large, 1024 on longest side (only exists for very large original images that were resized during upload)

o original image, either a jpg, gif or png, depending on source format

75x75 Reliability Flexibility Squares are easy

Reliability

Flexibility

Squares are easy

Cheers Jess3.com Jess3.com/blog

Jess3.com

Jess3.com/blog