Widgets are fun! sometimes..

  • 1,045 views
Uploaded on

my presentation for Widgetdevcamp

my presentation for Widgetdevcamp

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,045
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. a love and hate tale of widgets design centric thinking in a world of clutter
  • 2. Websites are your house
    • I am an architect
      • Some are crazier than others?
    • He is a construction foreman
    • WebPages are like your desk?
  • 3. 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
  • 4. 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
  • 5. ads
    • Random content survives on novelty
      • Ads support most widgets
        • Unless you make your own!
  • 6. most widgets add to lifes chaos!
  • 7. An easy challenge
    • Flickr feed display
      • Ad free (LESS CLUTTER)
  • 8. 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.
  • 9.
    • <!-- 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
  • 10. 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
  • 11. 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
  • 12. 75x75
    • Reliability
    • Flexibility
      • Squares are easy
  • 13. Cheers
    • Jess3.com
    • Jess3.com/blog