Crossing the Boundaries of Web Applications with OpenSocial

6,216 views
6,144 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,216
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Crossing the Boundaries of Web Applications with OpenSocial

  1. 1. Bastian HofmannResearchGate GmbHCrossing the Boundaries of WebApplications with OpenSocial
  2. 2. Questions? Ask!
  3. 3. http://slideshare.net/bashofmann
  4. 4. http://www.opensocial.org/
  5. 5. Foundationhttp://www.opensocial.org/
  6. 6. A set of APIs to access the social graph of users
  7. 7. A specification for including 3rd partyapplications (gadgets) into social services
  8. 8. What is a Gadget?• XML file with HTML and JavaScript (and CSS, Images, Flash, ...)• Application based on the Google Gadgets specification• Can be included on various platforms
  9. 9. Rendering
  10. 10. Social APIs
  11. 11. Views
  12. 12. CANVAS
  13. 13. PROFILE
  14. 14. POPUP
  15. 15. GROUP
  16. 16. EMBED
  17. 17. PREVIEW
  18. 18. Features
  19. 19. Application models
  20. 20. JavaScript basedContainer Shindigvz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com
  21. 21. ProxyContainer Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend Ajax apivz.net api.twitter.com
  22. 22. JavaScript RPCContainer - window.postMessagevz.net - Iframes with relay files Method Call - Flash Gadget apivz.net
  23. 23. FlashContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP
  24. 24. RedirectingContainer Shindigvz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax
  25. 25. Additional IframeContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax
  26. 26. Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming
  27. 27. https://github.com/bashofmann/statusnet_gadget_2nd
  28. 28. http://www.partuza.nl/https://github.com/bashofmann/partuza
  29. 29. DEMO
  30. 30. var html="<ul>";for (var i=0; i < viewers.length; i++) {   html += "<li>" + viewers[i].displayName+ "</li>";}html += "<ul>";document.getElementById("#div").innerHTML =html; Where is the error?
  31. 31. Templates
  32. 32. DEMO
  33. 33. Authorization
  34. 34. OAuth 1.0a Flow+----------+ +---------------+| -+----(B)-- Request Token -------->| || End-user | | Authorization || at |<---(C)-- User authenticates --->| Server || Browser | | || -+----(D)-- Verifier -------------<| |+-|----|---+ +---------------+ | | ^ v (B) (D) | | | | | | ^ v | |+---------+ | || |>---(A)-- Redirect URL ---------------| || Web |<---(A)-- Request Token + Secret -----| || Client |>---(E)-- Request Token, Verifier ---- || |<---(E)-- Access Token + Secret -------------+---------+Every Request: Client Credentials, Nonce, Timestamp, Signaturehttp://oauth.net/
  35. 35. DEMO
  36. 36. Embedded Experience
  37. 37. From: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"--XXXXboundary textContent-Type: text/html<html><!-- HTML representation here --></html>--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml", "context" : 123}
  38. 38. DEMO
  39. 39. OpenSearch
  40. 40. <Optional feature="opensearch">  <Param name="description">  <![CDATA[    <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">      <ShortName>Example Search</ShortName>      <Description>Realtime Example Search</Description>      <Url type="application/atom+xml" method="get"template="http://search.example.com/search.atom?q={searchTerms}"/>      <Image width="16" height="16">http://search.example.com/favicon.png</Image>      <InputEncoding>UTF-8</InputEncoding>       <SearchForm>http://search.example.com/</SearchForm>    </OpenSearchDescription>  ]]>  </Param></Optional>
  41. 41. Common Container
  42. 42. http://activitystrea.ms/
  43. 43. View Level Features
  44. 44. <Module> <ModulePrefs title="View Level Features Sampe">  <Require feature="opensocial" views="canvas,profile" /> </ModulePrefs>
  45. 45. Declarative actions
  46. 46. <Module> <ModulePrefs title="Sample VOIP">  <Optional feature="actions">   <Param name="action-contributions">    <![CDATA[   <action id="org.samplevoip.callbyperson"dataObject="opensocial.Person" label="Call using VOIPPhone"     view="DialByPerson" icon="http://ww.samplervoip.org/phone.gif" />   <action id="org.samplervoip.navLink" path="container/navigationLinks" label="Phone" />   ]]>   </Param>  </Optional> </ModulePrefs> 
  47. 47. <Content type="html">  <![CDATA[  <script>        // Bind javascript function to action ID        function mycallback{                ...        }        var myaction = {                id: "org.samplevoip.callbyperson",                callback: mycallback        }        container.actions.updateAction(myaction);  </script> ]]> </Content></Module>
  48. 48. Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation
  49. 49. Rate and Comment http://joind.in/3846
  50. 50. Mashing up JavaScript Tomorrow 2:45pm
  51. 51. h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

×