Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Opensocial & Yap


Published on

From my talk "OpenSocial & YAP" at the Brazil Hack Day 2008

Published in: Technology, Sports
  • Most of this presentation was verbal with the slides serving mainly for visual points of reference. Here is an overview of what I talked about while each slide was up:

    1: Introduction to presentation
    - talked a little about how I worked on a team to develop Whaddyathink?, an OpenSocial app built on Orkut and MySpace and deployed on MySpace. We're now enabling it on YAP

    2: Presentation overview

    3: OpenSocial intro slide

    - OpenSocial defines standard JS and RESTful APIs for creating social applications

    5: The OpenSocial page on
    - The OpenSocial standard is also presented here along with useful code snippets

    6: Whaddyathink? on Orkut
    - The main point is code portability
    - The app my team and I created and deployed on MySpace.
    - The 'create' view is shown
    - This app was partially developed on Orkut
    - The code base still works on Orkut, though we never published it there

    7: Whaddyathink? on MySpace
    - Again, the main point is that the same app is running on two different sites
    - Slide also used to show another view of the app, the 'results' view

    8: Simple OpenSocial app specification file
    - Used to show specification file structure
    - Note: html, xml, and javascript are contained in same file, which make it hard to debug

    9: Simple app running in Orkut
    - Note: we are in sandbox environment
    - Social data has been fetched and displayed

    10: More complicated app
    - Now we're trying to get more than just the name
    - Note: use of js array to manage and encapsulate embedded html
    - Typo: The line pushing 'status' should be pushing '' + status + ''

    11: The more complicated code in Orkut
    - Note: status does not display
    - Note: multiple apps are allowed to have the same name, but this becomes confusing when debugging, so avoid it

    12: Error handling code
    - Following the advice in,
    we now check to see if the container implements the OpenSocial field we need,
    and check our request response for errors

    13: Error handling in Orkut
    - Note: if we can't get the status, we show an alternative message
    - Note: the bpc flag in the url. If we set it to 1, the spec file will not be cached. Included files may still be cached, so watch out
    - Note: apps now have unique names

    14: Cross-container intro slide
    - we're bridging differences between the containers

    15: Breaking up the files
    - Note: files are now split based on content type, eg html, js, xml
    - Note: build content files into spec prior to uploading, so we only have spec files on server
    - All these simple apps are hosted on geocities
    - YAP POSTs data to the host on each request, which causes an error on geocities, so we can't host YAP apps on geo, but we can host orkut and myspace apps on geo

    16: Looking at the split-up code
    - Now, we can take advantage of syntax highlighting to help us debug
    - Build process script is at bottom
    - All the code for these apps is included in a single, freely available text file. The URL to the file is at the end.

    17: What is your gender?
    - Note: we are now requesting gender instead of status
    - gender data seems to be more available across platforms

    18: Gender on MySpace
    - Note: we can access my gender data

    19: Gender on Orkut
    - Note: we can access my gender data
    - The data is incorrect, but least we have access to it

    20: JS & CSS tips & tricks
    - Some simple suggestions for getting started quickly on Hack Day
    - Most of these tips require a server that allows scripting, unlike geo
    - The warnings about JS libraries are intended for those who:
    - want to port an existing app from some opensocial container to one using Caja, eg YAP
    - want to write a portable app
    - The CSS tips are for those who want to work on with Caja

    21: YAP introductory slide

    22: YAP dashboard
    - this slide is primarily intended to help sort out the difference between the 4 different choices of app available in the dashboard
    - gen access apps are for people who need an app id, but will not need to authenticate, eg Y! maps API
    - BB Auth is similar to OAuth, but deprecated in favor of OAuth. It still is used for some applications
    - Open and OAuth apps are discussed on later slides

    23: OAuth apps
    - as a general rule, use an oauth app if you want to request and use data off yahoo, eg pull Y! data and display it on

    24: Open apps
    - as a general rule, use an open app if you want to request and use data on yahoo, eg YAP

    25: YQL intro slide

    26: YQl overview
    - Is similar in soe ways to pipes, but allows for programmatic request generation
    - Is an alternative to the Social APIs for getting social data, which is good if your hosting your app on a server that doesn't allow scripting

    27: Resources
    Are you sure you want to  Yes  No
    Your message goes here

Opensocial & Yap

  1. 1. OpenSocial & YAP Erik Eldridge Brasil Open Hack Day 8-9, Nov. 2008 Yomi955:
  2. 2. Presentation outline <ul><li>OpenSocial </li></ul><ul><li>Cross-container OpenSocial </li></ul><ul><li>YAP Dashboard </li></ul><ul><li>YQL </li></ul><ul><li>Resources </li></ul>
  3. 3. OpenSocial
  4. 4.
  5. 5. Opensocial v 0.8
  6. 6. Whaddyathink? Orkut
  7. 7. Whaddyathink? MySpace
  8. 8. Get & print owner’s name
  9. 9. Orkut owner name screenshot
  10. 10. Owner data spec
  11. 11. Owner data scrnsht
  12. 12. Owner data cross-container spec
  13. 13. Owner data cross-container scrn
  14. 14. Cross-Container OpenSocial Xenia Antunes:
  15. 15. Split file trees
  16. 16. New file structure
  17. 17. New canvas js
  18. 18. Owner gender myspace
  19. 19. Owner gender Orkut
  20. 20. JavaScript & CSS tips & tricks <ul><li>JavaScript tips </li></ul><ul><ul><li>Push as much as possible to backend </li></ul></ul><ul><ul><li>Avoid JS libraries, e.g. jQuery, YUI, etc. </li></ul></ul><ul><ul><li>Use server-side html generation </li></ul></ul><ul><ul><li>Server-side SDKs > client-side JS </li></ul></ul><ul><ul><li>Use JSLint & Caja Test Bed </li></ul></ul><ul><li>CSS tips </li></ul><ul><ul><li>Avoid star and underscore hacks </li></ul></ul><ul><ul><li>Avoid self-clearing floats using :after </li></ul></ul>
  21. 21. YAP <ul><li>Dweekly: </li></ul>
  22. 22. YAP Dashboard <ul><li> </li></ul><ul><li>Note: 4 app. Types </li></ul><ul><ul><li>Open (YAP) </li></ul></ul><ul><ul><li>OAuth </li></ul></ul><ul><ul><li>Gen. Access </li></ul></ul><ul><ul><li>BB Auth </li></ul></ul>
  23. 23. OAuth apps <ul><li>Use if you want to handle user data off Yahoo! </li></ul><ul><li>Requires root access on domain </li></ul>
  24. 24. YAP apps <ul><li>Use if you want to handle user data on Yahoo! </li></ul>
  25. 25. YQL Image Editor:
  26. 26. YQL <ul><li>Comparable to Y! Pipes </li></ul><ul><li>Very flexible </li></ul><ul><li>Can access the same data as the Y! PHP SDK </li></ul>
  27. 27. Resources <ul><li>YOS docs: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Google IO vido on cross-container OpenSocial: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Code from talk on: </li></ul><ul><ul><li>http://www.geocities. com/erikeldridge/owner_and_friends/all .txt </li></ul></ul><ul><ul><li> </li></ul></ul>