Crossing the Boundaries of Web Applications with OpenSocial

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 speciﬁcation for including 3rd partyapplications (gadgets) into social services

What is a Gadget?• XML ﬁle with HTML and JavaScript (and CSS, Images, Flash, ...)• Application based on the Google Gadgets speciﬁcation• Can be included on various platforms

Rendering

Social APIs

CANVAS

PROFILE

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 ﬁles 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

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

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/

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>--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

Declarative actions

<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://proﬁles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

Crossing the Boundaries of Web Applications with OpenSocial

by Bastian Hofmann

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 4

Statistics