Building Badges for distribution

Slide 1: Sharing the Joy Building badges for distribution Christian Heilmann, Highland Fling, Edinburgh 2008

Slide 2: Web Development as we know it is changing...

Slide 3: Old Model: Destination = Site Data Container = Page

Slide 4: This is how our web standards work.

Slide 5: We already ran into problems with this.

Slide 6: Ajax apps need a lot of hacking to behave more responsive yet stay true to old usage patterns.

Slide 7: Interaction issues are one thing.

Slide 8: Now we face the data revolution.

Slide 9: Sites and page thinking limits the reach and success of the web as a media.

Slide 10: Facebook, YouTube, Flickr, Google Maps, Upcoming and others work on a different model.

Slide 11: Data wants to be free of restrictions.

Slide 12: People want data, not going to one site after the other.

Slide 13: Personal homepages, feed aggregators, microblogging and social profile sites are booming.

Slide 14: Right now we build for each of them individually.

Slide 15: This is changing, too (f.e. OpenSocial)

Slide 16: In the not too distant future modules will replace the page and frameworks across platforms will consume them.

Slide 17: This calls for new standards – after all it is about collaboration.

Slide 18: However, today we can already play with ideas and learn from similar implementations.

Slide 19: Specifically badges.

Slide 20: A lot of companies offer badges with their data to add to your site.

Slide 21: Why badges?

Slide 22: You want your content to be out on the web.

Slide 23: Distributing data has several benefits:

Slide 24: Good search engine lovin’

Slide 25: Lack of single point of failure.

Slide 26: Better content (more on that later)

Slide 27: Content distribution works in several ways:

Slide 28: Badge Widget API Anakin Obi Wan Yoda

Slide 29: All of these mean including content into a product.

Slide 30: The first snag we hit: presentation.

Slide 31: Consider several use cases:

Slide 32: Anakin wants nicely styled badges to copy and paste. Badges

Slide 33: Obi Wan probably wants a style sheet or parameters to change. Widgets

Slide 34: Yoda needs clean semantic markup or other easy to digest data formats. APIs

Slide 35: Badges are most of the time considered to show the company branding.

Slide 36: This means either iframes or a lot of dirty extra code.

Slide 37: We need to change our approach.

Slide 38: You cannot fully control the look and feel of web sites.

Slide 39: It is next to impossible to control the look and feel of a badge.

Slide 40: Web standards were build to cascade to enable you to write small code.

Slide 41: If you chunk the document, the cascade becomes useless.

Slide 42: Next issue: performance.

Slide 43: Ideally you’d like the site to be available immediately, not load bit by bit.

Slide 44: Talking to a lot of different servers to build the interface is slow.

Slide 45: The reasons: HTTP requests, name lookups and the speed and load of the third party server.

Slide 46: There are several solutions to that.

Slide 47: The most stable is local caching.

Slide 48: Local caching makes sense for API lookups but doesn’t work with badges.

Slide 49: The next best thing is progressive enhancement and lazy loading.

Slide 50: Progressive enhancement.

Slide 51: <script type=”text/javascript” src=”http://www.example.com/badge/badge.js”>

Slide 52: No search engine love!

Slide 53: Possibly slow to render (unless you use dirty tricks)

Slide 54: Hard to identify the element to replace (script nodes can’t have an ID)

Slide 55: <div class=”badge”> <a href=”http://www.example.com/badgedata”> My {data} on {third party} </a> </div> [...] <script src=”http://www.example.com/badge.js”> </script>

Slide 56: Good search engine lovin’

Slide 57: Works for everybody!

Slide 58: Lazy loading

Slide 59: Lazy loading is a special kind of progressive enhancement.

Slide 60: You load a very small script up front that pulls in the larger dependencies on demand.

Slide 61: You can control the dependencies by classes on the source element.

Slide 62: <div class=”badge”> badge.js <a href=”http://www.example.com/badgedata”> My {data} on {third party} ‣ get all elements with </a> class “badge”, load the </div> content via API and replace with badge. [...] <script src=”http://www.example.com/badge.js”> </script>

Slide 63: <div class=”badge animated silver”> badge.js <a href=”http://www.example.com/badgedata”> My {data} on {third ‣party} create link to pull in </a> silver.css ‣ create script node for </div> animation.js [...] ‣ get all elements with class “badge”, load the <script src=”http://www.example.com/badge.js”> content via API and </script> replace with badge.

Slide 64: Use libraries to help you with that. O.K. YUI get() :-)

Slide 65: Really clever lazy load of content.

Slide 66: Browsers tell you several things:

Slide 67: The dimensions of the viewport (which is not the same as the resolution!)

Slide 68: The dimension of the document and the scroll position.

Slide 69: The dimension and location of the badge.

Slide 70: Remember, a lot of HTTP requests make browsers sad!

Slide 71: Use placeholders for images and replace them when you are sure users can see them!

Slide 72: <img src=”user.gif#http://avatar.example.com/ user1212121/large.jpg” alt=”John Doe”>

Slide 73: <img src=”user.gif#http://avatar.example.com/ user1212121/large.jpg” alt=”John Doe”>

Slide 74: <img src=”user.gif#http://avatar.example.com/ user1212121/large.jpg” alt=”John Doe”>

Slide 75: Browser Viewport Badge with Document placeholders

Slide 76: Browser Viewport Badge with real images Document

Slide 77: Again, use libraries to help you with that. O.K. YUI Dom.getRegion(), or Image Loader

Slide 78: Want to create an amazing experience?

Slide 79: Create a read/write API.

Slide 80: Imagine the web as your entry point – not your site.

Slide 81: People can get data from your system and display it.

Slide 82: They then can ask their visitors to comment or add more data without leaving their site!

Slide 83: More implementers are likely to add your badges if you leave their site in peace.

Slide 84: You get more focused and higher quality content as you can piggy-back on their authority.

Slide 85: Can’t or don’t want to do that?

Slide 86: Offer revenue sharing.

Slide 87: Whatever you do, Badge, Widget or API...

Slide 88: Expect changes and listen to your customers.

Slide 89: Your customers are:

Slide 90: ๏ Badge implementers Make it easy and as unobtrusive as possible to add your badge. Allow for override. ๏ Third party site visitors Don’t make them wait. ๏ You Make sure you get data or at least links back

Slide 91: The most important points are availability and backwards compatibility.

Slide 92: People trust you to offer data and never break their site.

Slide 93: Offering data for distribution is for life, not just for the next press release.

Slide 94: Badgers for distribution Thanks! Photo by The Weirfield Wildlife Hospital http://weirfeild.co.uk