Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Widgets are fun! sometimes..

2.021 Aufrufe

Veröffentlicht am

my presentation for Widgetdevcamp

Veröffentlicht in: Technologie, Sport
  • Best dissertation help you can get, thank god a friend suggested me ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ otherwise I could have never completed my dissertation on time.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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>

×