Widgets are fun! sometimes..

a love and hate tale of widgetsdesign 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?

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

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

ads

• 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

• / 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="text/css">• #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="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a

href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">

• <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=v&source=all_tag&tag=barcampdc"></script>

• </table>• </td></tr></table>• <!-- End of Flickr Badge -->

• This is what flickr gives you

3 vs 3000

• <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=random&size=o&layout=v&source=all_tag&tag=barcampdc"></script>

• <br />• <script type="text/javascript"

src="http://www.flickr.com/badge_code_v2.gne?count=3000&display=random&size=s&layout=v&source=all_tag&tag=jess3"></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

75x75

• Reliability• Flexibility

– Squares are easy

Cheers

• Jess3.com• Jess3.com/blog