Widgets are fun! sometimes..
Upcoming SlideShare
Loading in...5

Widgets are fun! sometimes..



my presentation for Widgetdevcamp

my presentation for Widgetdevcamp



Total Views
Views on SlideShare
Embed Views



2 Embeds 6

http://www.jess3.com 5
http://www.netvibes.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Widgets are fun! sometimes.. Widgets are fun! sometimes.. Presentation Transcript

  • 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?
  • 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
    View slide
  • 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
    View slide
  • 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=&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
  • 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