opening up the social web - standards that are bridging the islands

Opening up the Social WebStandards that are bridging the islands

Bastian HofmannVZnet Netzwerke Ltd.

... you could not send a mail to another provider

... you could not call your friends at another carrier

Back to reality

• OpenID• WebFinger• Well-­‐Known  URIs• Web  Host  Meta  Data• XRD• Portable  Contacts• Ac?vity  Strea.ms• PubSubHubbub

• Salmon• OExchange• XAuth• OEmbed• OpenSocial• SWAT0

Questions? Ask!

http://slideshare.net/bashofmann

Meet Bill and Steve

Bill want‘s to comment on Steve‘s blog

Facebook Connect250,000,000 monthly users

http://openid.net/

http://oauth.net/

http://oauth.net/

Distributed Identities with OpenID

8/19/2011 8:00am @DevExpress-G

Bill want‘s to know more about Steve

In the old days: Finger

bhofmann@svz-pcn-107 ~ $ finger bhofmann

Login: bhofmann Name: Bastian HofmannDirectory: /Users/bhofmann Shell: /bin/bashOn since Di 14 Sep 21:45 (CEST) on console, idle 1:36 (messages off)On since Di 14 Sep 23:02 (CEST) on ttys000No Mail.No Plan.

Now: WebFinger

http://code.google.com/p/webfinger/

http://example.com/.well-known/host-meta

http://tools.ietf.org/html/draft-nottingham-site-meta

<?xml version='1.0' encoding='UTF-8'?><XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'     xmlns:hm='http://host-meta.net/xrd/1.0'>     <hm:Host>example.com</hm:Host>     <Link rel='lrdd'        template='http://example.com/describe?uri={uri}'>        <Title>Resource Descriptor</Title>    </Link></XRD> 

http://tools.ietf.org/html/draft-hammer-hostmeta

http://example.com/describe?uri=acct:joe@example.com

<?xml version='1.0' encoding='UTF-8'?><XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'>     <Subject>acct:joe@example.com</Subject>    <Alias>http://example.com/profiles/joe</Alias>     <Link rel='http://portablecontacts.net/spec/1.0'          href='http://example.com/api/people/' />    <Link rel='http://webfinger.net/rel/profile-page'          type='text/html'          href='http://example.com/profiles/joe' />    <Link rel='describedby'          type='text/html'          href='http://example.com/profiles/joe' />    <Link rel='http://webfinger.net/rel/avatar'          href='http://example.com/profiles/joe/photo' /></XRD>

http://docs.oasis-open.org/xri/xrd/v1.0/xrd-1.0.html

http://portablecontacts.net/

{  "id" : "example.org:34KJDCSKJN2HHF0DW20394",  "displayName" : "Janey",  "name" : {"unstructured" : "Jane Doe"},  "gender" : "female"}

DEMO

He want‘s to follow Steve‘s status updates

PubSubHubbubretrieves Atom feed with Hub URL

Hub

posts sthpings everysubscriber

subscribes for feed

ackssubscription

http://code.google.com/p/pubsubhubbub/

<link rel="alternate"href="http://status.net.xyz:8061/index.php/api/statuses/user_timeline/3.atom"type="application/atom+xml" title="Notice feed for bastian (Atom)"/>

<entry> <activity:object-type>http://activitystrea.ms/schema/1.0/note</activity:object-type> <id>http://status.net.xyz:8061/index.php/notice/20</id> <title>hello from client</title> <content type="html">hello from client</content> <link rel="alternate" type="text/html" href="http://status.net.xyz:8061/index.php/notice/20"/> <activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb> <published>2011-05-23T21:07:33+00:00</published> <updated>2011-05-23T21:07:33+00:00</updated> <link rel="ostatus:conversation" href="http://status.net.xyz:8061/index.php/conversation/20"/> <georss:point>52.52437 13.41053</georss:point> <link rel="self" type="application/atom+xml"href="http://status.net.xyz:8061/index.php/api/statuses/show/20.atom"/> <link rel="edit" type="application/atom+xml"href="http://status.net.xyz:8061/index.php/api/statuses/show/20.atom"/> <statusnet:notice_info local_id="20" source="api" favorite="false"repeated="false"></statusnet:notice_info></entry>

http://activitystrea.ms/

<link href="http://status.net.xyz:8061/index.php/main/push/hub" rel="hub"/>

hub.topic=http%3A%2F%2Ffeed.xyz%3A8061%2Findex.php%2Fapi%2Fstatuses%2Fuser_timeline%2F2.atom&hub.callback=http%3A%2F%2Fclient.com%2F&hub.mode=subscribe&hub.verify=async

POST: http://status.net.xyz:8061/index.php/main/push/hub

GET: http://client.com/?hub.challange=foo

HTTP/1.1 200 OKContent-Type: text/plain

foo

<entry> <activity:object-type>http://activitystrea.ms/schema/1.0/note</activity:object-type> <id>http://status.net.xyz:8061/index.php/notice/20</id> <title>hello from client</title> <content type="html">hello from client</content> <link rel="alternate" type="text/html" href="http://status.net.xyz:8061/index.php/notice/20"/> <activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb> <published>2011-05-23T21:07:33+00:00</published> <updated>2011-05-23T21:07:33+00:00</updated> <link rel="ostatus:conversation" href="http://status.net.xyz:8061/index.php/conversation/20"/> <georss:point>52.52437 13.41053</georss:point> <link rel="self" type="application/atom+xml"href="http://status.net.xyz:8061/index.php/api/statuses/show/20.atom"/> <link rel="edit" type="application/atom+xml"href="http://status.net.xyz:8061/index.php/api/statuses/show/20.atom"/> <statusnet:notice_info local_id="20" source="api" favorite="false"repeated="false"></statusnet:notice_info></entry>

DEMO

Now Bill mentions Steve to his pal

have a look at @steve stream

and what about Comments?

new macs will have IE9

I would‘ve chosenChrome

Salmon

http://www.salmon-protocol.org/

Salmon

http://www.salmon-protocol.org/

Salmon

http://www.salmon-protocol.org/

DEMO

Bill is now on his favourite Video Portal

He want‘s to share a video with his friends

... but his favourite social network has no sharing button at YouTube

Nascar Problem

http://xauth.org/

100% Client Technology

XAuth at Provider

XAuth.extend({ token: "1", expire: new Date().getTime() + 60*60*24*1000, extend: ["*"], });

Login xauth.org/xauth.js

XAuth at Consumer

Visits

XAuth.retrieve({ retrieve: ['xauth.org'], callback: receiveTokens });

xauth.org/xauth.js

But static server on central domain needed

http://www.oexchange.org/

http://www.example.com/share.php?url={URI}&title={title for the content}&description={short description of the content}&ctype=flash&swfurl={SWF URI}&height={preferred SWF height}&width={preferred swf width}&screenshot={screenshot URI}

http://example.com/.well-known/host-meta

http://tools.ietf.org/html/draft-nottingham-site-meta

<?xml version='1.0' encoding='UTF-8'?><XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'   xmlns:hm='http://host-meta.net/xrd/1.0'>    <hm:Host>www.meinvz.net</hm:Host>

    <Link       rel="http://oexchange.org/spec/0.8/rel/resident-target"       type="application/xrd+xml"       href="http://www.example.com/oexchange.xrd" >    </Link>

</XRD>

<?xml version='1.0' encoding='UTF-8'?><XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">    <Subject>http://www.example.com/linkeater</Subject>    <Property        type="http://www.oexchange.org/spec/0.8/prop/vendor">        Examples Inc.</Property>    <Property        type="http://www.oexchange.org/spec/0.8/prop/title">        A Link-Accepting Service</Property>    <Link        rel= "icon" href="http://www.example.com/favicon.ico"       type="image/vnd.microsoft.icon" />    <Link        rel= "http://www.oexchange.org/spec/0.8/rel/offer"        href="http://www.example.com/linkeater/offer.php"       type="text/html" /></XRD>

DEMO

Now there is a link in his status update

cool video:http://www.youtube.com/watch?v=OFzkTxiwziQ

OEmbed

http://oembed.com/

http://www.youtube.com/watch?v=OyJd2qsRkNk

http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv

%3DOyJd2qsRkNk&maxwidth=500&format=json

{  "provider_url":"http:\/\/www.youtube.com\/",  "title":"Jupiter Jones - Das Jahr in dem ich schlief (Musik Video)",  "html":"\u003cobject width=\"500\" height=\"306\"\u003e\u003cparam name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/OyJd2qsRkNk?version=3\"\u003e\u003c\/param\u003e\u003cparam name=\"allowFullScreen\" value=\"true\"\u003e\u003c\/param\u003e\u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e\u003c\/param\u003e\u003cembed src=\"http:\/\/www.youtube.com\/v\/OyJd2qsRkNk?version=3\" type=\"application\/x-shockwave-flash\" width=\"500\" height=\"306\" allowscriptaccess=\"always\" allowfullscreen=\"true\"\u003e\u003c\/embed\u003e\u003c\/object\u003e",  "author_name":"St182",  "height":306,  "thumbnail_width":480,  "width":500,  "version":"1.0",  "author_url":"http:\/\/www.youtube.com\/user\/Stinkfist182",  "provider_name":"YouTube",  "thumbnail_url":"http:\/\/i4.ytimg.com\/vi\/OyJd2qsRkNk\/hqdefault.jpg",  "type":"video",  "thumbnail_height":360}

cool video:

http://embed.ly/

Caja

http://code.google.com/p/google-caja/

html_sanitize(‘<script>alert(“foo“);</script>‘)

DEMO

Bill is really into social games

http://www.opensocial.org/

Crossing the boundaries of webapplications with OpenSocial

8/19/2011 1:00pm @Conv. Ctr-14

DEMO

Many standards available

But still much to be done

• Friends and Friendships

• Privacy

• Access Control

• What is the right identifier?

• More than one provider with one E-Mail Address?

• Wide adoption

• Easy implementation

Many projects - one common goal

http://federatedsocialweb.net

And many people working on it

http://federatedsocialweb.net

Social Web Acid Test - Level 0

hLp://twiLer.com/Bas?anHofmannhLps://profiles.google.com/bashofmannhLp://lanyrd.com/people/Bas?anHofmann/hLp://slideshare.net/bashofmann

mail@bas?anhofmann.de