Crossing the Boundaries of Web Applications with OpenSocial
Upcoming SlideShare
Loading in...5
×
 

Crossing the Boundaries of Web Applications with OpenSocial

on

  • 6,163 views

 

Statistics

Views

Total Views
6,163
Views on SlideShare
6,159
Embed Views
4

Actions

Likes
2
Downloads
23
Comments
0

3 Embeds 4

http://lanyrd.com 2
http://paper.li 1
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Crossing the Boundaries of Web Applications with OpenSocial Crossing the Boundaries of Web Applications with OpenSocial Presentation Transcript

  • Bastian HofmannResearchGate GmbHCrossing the Boundaries of WebApplications with OpenSocial
  • Questions? Ask!
  • http://slideshare.net/bashofmann
  • http://www.opensocial.org/
  • Foundationhttp://www.opensocial.org/
  • A set of APIs to access the social graph of users
  • A specification for including 3rd partyapplications (gadgets) into social services
  • 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
  • Rendering
  • Social APIs
  • Views
  • CANVAS
  • PROFILE
  • POPUP
  • GROUP
  • EMBED
  • PREVIEW
  • Features
  • Application models
  • JavaScript basedContainer Shindigvz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com
  • ProxyContainer Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend Ajax apivz.net api.twitter.com
  • JavaScript RPCContainer - window.postMessagevz.net - Iframes with relay files Method Call - Flash Gadget apivz.net
  • FlashContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP
  • RedirectingContainer Shindigvz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax
  • Additional IframeContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax
  • Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming
  • https://github.com/bashofmann/statusnet_gadget_2nd
  • http://www.partuza.nl/https://github.com/bashofmann/partuza
  • DEMO
  • 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?
  • Templates
  • DEMO
  • Authorization
  • 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/
  • DEMO
  • Embedded Experience
  • 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}
  • DEMO
  • OpenSearch
  • <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>
  • Common Container
  • http://activitystrea.ms/
  • View Level Features
  • <Module> <ModulePrefs title="View Level Features Sampe">  <Require feature="opensocial" views="canvas,profile" /> </ModulePrefs>
  • Declarative actions
  • <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> 
  • <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>
  • Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation
  • Rate and Comment http://joind.in/3846
  • Mashing up JavaScript Tomorrow 2:45pm
  • h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de