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

Crossing the Boundaries of Web Applications with OpenSocial

on

  • 1,337 views

This are the slides for my Devlink OpenSocial talk. Code of the demo is available at https://github.com/bashofmann/statusnet_gadget

This are the slides for my Devlink OpenSocial talk. Code of the demo is available at https://github.com/bashofmann/statusnet_gadget

Statistics

Views

Total Views
1,337
Views on SlideShare
1,330
Embed Views
7

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 7

http://lanyrd.com 7

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

  • Crossing theboundaries of webapplications withOpenSocialBastian HofmannVZnet Netzwerke Ltd.
  • Questions? Ask!
  • http://slideshare.net/bashofmann
  • http://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 AppData DataPipelining OEmbed Let‘s start programming
  • https://github.com/bashofmann/statusnet_gadget
  • DEMO
  • 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
  • Displaying data<script type="text/javascript">var viewers= opensocial.data.DataContext.getDataSet BAD("ViewerFriends");var html="<ul>";for (var i=0; i < viewers.length; i++) { html += "<li>" + viewers[i].displayName + "</li>";}document.getElementById("div").innerHTML = html;</script>
  • 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}
  • 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
  • h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de