Widgets Tools Keynote
-
Upload
michael-mahemoff -
Category
Technology
-
view
114 -
download
0
description
Transcript of Widgets Tools Keynote
![Page 1: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/1.jpg)
Web 2.0,
OpenSocial, and
Design Patterns
`
![Page 2: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/2.jpg)
1998My Excite1998
My Excite
2008iGoogle2008
iGoogle
![Page 3: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/3.jpg)
© British Telecommunications plc Draft (17 Sep 2007)
Mini web apps
Widgets …
Configurable
![Page 4: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/4.jpg)
Re-arrangement is cumbersome
Editing preferences -> new page
Content refresh -> entire page refresh
Monolithic - All content from excite.com
![Page 5: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/5.jpg)
Re-arrangement is cumbersomeRe-arrangement via drag-and-drop
Editing preferences -> new pageEditing preferences inline
Content refresh -> entire page refreshAutonomous gadgets
Monolithic - All content from excite.comAggregation of distributed gadgets
![Page 6: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/6.jpg)
Web 2.0
Small pieces, loosely joined User participationUsability and Simplicity Social interactionData sharing Agile development
APIs (REST, JSON) Identity (OpenID)Delegated Trust (OAuth) News Feeds (RSS/Atom)Microformats Tagging
Open Web Standards Mashups/AggregationAjax SandboxingVideo Widgets
![Page 7: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/7.jpg)
Small pieces, loosely joined User participationUsability and Simplicity Social interactionData sharing Agile development
Principles
UserInterface
APIs (REST, JSON) Identity (OpenID)
Delegated Trust (OAuth) News Feeds (RSS/Atom)Microformats Tagging
Open Web Standards Mashups/AggregationAjax SandboxingVideo Widgets
![Page 8: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/8.jpg)
REST
![Page 9: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/9.jpg)
Use the Force
![Page 10: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/10.jpg)
Transport protocols(e.g. TCP/IP)
Networked API protocol(e.g. CORBA/IIOP, COM/DCOM)
Web standards(HTTP, HTML, CGI)
Web based API protocols(e.g. WSDL, SOAP)
REST = Working with
existing standards
![Page 11: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/11.jpg)
<xs:schema targetNamespace="http://schemas.xmlsoap.org/wsdl/soap/"><xs:import namespace="http://schemas.xmlsoap.org/wsdl/"/>−<xs:simpleType name="encodingStyle">−<xs:annotation>−<xs:documentation>
"encodingStyle" indicates any canonicalization conventions followed in the contents of the containing element. For example, the value "http://schemas.xmlsoap.org/soap/encoding/" indicates the pattern described in SOAP specification </xs:documentation></xs:annotation><xs:list itemType="xs:anyURI"/></xs:simpleType><xs:element name="binding" type="soap:tBinding"/>−<xs:complexType name="tBinding">−<xs:complexContent>−<xs:extension base="wsdl:tExtensibilityElement"><xs:attribute name="transport" type="xs:anyURI" use="required"/><xs:attribute name="style" type="soap:tStyleChoice" use="optional"/></xs:extension></xs:complexContent></xs:complexType>−<xs:simpleType name="tStyleChoice">−<xs:restriction base="xs:string"><xs:enumeration value="rpc"/><xs:enumeration value="document"/></xs:restriction></xs:simpleType><xs:element name="operation" type="soap:tOperation"/>………..…………−
![Page 12: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/12.jpg)
GET - read
POST - update
PUT – create
DELETE - delete
![Page 13: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/13.jpg)
GET - readhttp://example.com/movies/123.xml
POST - updatehttp://example.com/movies/123.xml
PUT – createhttp://example.com/movies
DELETE - delete http://example.com/movies/123.xml
![Page 14: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/14.jpg)
http://example.com/movies/123.xml <match> <id>123</id> <name>Raging Bull</name> <year>1980</year> </match>
http://example.com/movies/123.html <h1 id=“movie123”>Raging Bull</h1> Year: 1980
http://example.com/movies/123.json { id: 123, name: “Raging Bull”, year: 1980 }
![Page 15: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/15.jpg)
REST simplifies calls and facilitates mashups
![Page 16: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/16.jpg)
JSON
![Page 17: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/17.jpg)
<?xml version="1.0" encoding="UTF-8"?><statuses type="array"> <status> <created_at>Tue Jun 17 23:41:26 +0000 2008</created_at> <id>837306935</id> <text>Click top-right "X" on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit "_" not "X"!!!</text> <source><a href="http://www.twhirl.org/">twhirl</a></source>
<truncated>false</truncated> <in_reply_to_status_id></in_reply_to_status_id> <in_reply_to_user_id></in_reply_to_user_id> <favorited>false</favorited> <user> <id>1112431</id> <name>Michael Mahemoff</name>
<screen_name>mahemoff</screen_name> <location>London</location> <description>Choose Web</description> <profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/28010672/beedogtilly_normal.jpg</profile_image_url> <url>http://softwareas.com</url> <protected>false</protected>
<followers_count>96</followers_count> </user> </status>
<status> <created_at>Tue Jun 17 18:29:49 +0000 2008</created_at> <id>837085942</id> <text>@tdroza I don't know a browser extension that formats JSON.Browsers in 2008 still do a horrible job of formatting non-HTML! http://is.gd/zyi</text>
<source><a href="http://www.twhirl.org/">twhirl</a></source> <truncated>false</truncated> <in_reply_to_status_id>836898666</in_reply_to_status_id> <in_reply_to_user_id>1671021</in_reply_to_user_id> <favorited>false</favorited>
<user> <id>1112431</id> <name>Michael Mahemoff</name> <screen_name>mahemoff</screen_name> <location>London</location> <description>Choose Web</description>
<profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/28010672/beedogtilly_normal.jpg</profile_image_url> <url>http://softwareas.com</url> <protected>false</protected> <followers_count>96</followers_count> </user> </status>
</statuses>
http://twitter.com/statuses/user_timeline/mahemoff.xml
![Page 18: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/18.jpg)
[ { "truncated": false, "in_reply_to_status_id": null, "favorited": false, "in_reply_to_user_id": null, "source": "<a href=\"http:\/\/www.twhirl.org\/\">twhirl<\/a>", "id": 837306935, "user": { "name": "Michael Mahemoff", "screen_name": "mahemoff", "followers_count": 96, "url": "http:\/\/softwareas.com", "profile_image_url": "http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/28010672\/beedogtilly_normal.jpg", "description": "Choose Web", "location": "London", "id": 1112431, "protected": false }, "text": "Click top-right \"X\" on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit \"_\" not \"X\"!!!", "created_at": "Tue Jun 17 23:41:26 +0000 2008" },
{ "truncated": false, "in_reply_to_status_id": 836898666, "favorited": false, "in_reply_to_user_id": 1671021, "source": "<a href=\"http:\/\/www.twhirl.org\/\">twhirl<\/a>", "id": 837085942, "user": { "name": "Michael Mahemoff", "screen_name": "mahemoff", "followers_count": 96, "url": "http:\/\/softwareas.com", "profile_image_url": "http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/28010672\/beedogtilly_normal.jpg", "description": "Choose Web", "location": "London", "id": 1112431, "protected": false }, "text": "@tdroza I don't know a browser extension that formats JSON.Browsers in 2008 still do a horrible job of formatting non-HTML! http:\/\/is.gd\/zyi", "created_at": "Tue Jun 17 18:29:49 +0000 2008" }]
http://twitter.com/statuses/user_timeline/mahemoff.json
![Page 19: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/19.jpg)
3rd party 3rd party
XML/HTML(Proxied)
XML/HTML(Proxied)
JSON(Direct)
JSON(Direct)
Website server
![Page 20: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/20.jpg)
OAuth
![Page 21: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/21.jpg)
http://hueniverse.com
![Page 22: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/22.jpg)
http://hueniverse.com
![Page 23: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/23.jpg)
Web 2.0
Small pieces, loosely joined User participationUsability and Simplicity Social interactionData sharing Agile development
APIs (REST, JSON) Identity (OpenID)Delegated Trust (OAuth) News Feeds (RSS/Atom)Microformats Tagging
Open Web Standards Mashups/AggregationAjax SandboxingVideo Widgets
![Page 24: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/24.jpg)
Open Web
Standards
![Page 25: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/25.jpg)
HTML
JavascriptCSSDOM
XMLHttpRequest
![Page 26: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/26.jpg)
+ Libraries and Frameworks
![Page 27: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/27.jpg)
Ajax
![Page 28: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/28.jpg)
Website server
1. Initialsite
2. Ongoing dialogue(no page refresh)
Rich , dynamic, UI
![Page 29: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/29.jpg)
Sandboxing
![Page 30: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/30.jpg)
IFrames
![Page 31: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/31.jpg)
![Page 32: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/32.jpg)
Porous sandboxes
![Page 33: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/33.jpg)
![Page 34: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/34.jpg)
Inter-Frame Communication
![Page 35: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/35.jpg)
http://is.gd/AaR
![Page 36: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/36.jpg)
Caja
![Page 37: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/37.jpg)
“Using Caja, web apps can safely allow scripts in third party content.”
Google-Caja
![Page 38: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/38.jpg)
Widgets and OpenSocial
![Page 39: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/39.jpg)
Gadgets
(aka Widgets)
![Page 40: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/40.jpg)
Mini Web Apps
![Page 41: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/41.jpg)
Widget portals(iGoogle, NetVibes)
Custom web pages
(blogs, homepages)
Social networks
(Facebook, Bebo)
![Page 42: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/42.jpg)
OpenSocial
![Page 43: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/43.jpg)
AA
Google iGoogle
GoogleGadget
Google Orkut
GoogleGadget
OpenSocialAPI
Megacorp
MegacorpWidget
Facebook Application
Facebook “social” API
Social API
Widget API
ContainerWebsiteNb in most cases, widgets can also be embedded on standalone websites
Stovepiped model(2005-2007)
![Page 44: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/44.jpg)
Google iGoogle
GoogleGadget
Google Orkut
OpenSocialAPI
Megacorp
Facebook??????
Social API
Widget API
ContainerWebsite
OpenSocial model(in production from 2008)
![Page 45: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/45.jpg)
OpenSocial = Widgets + Social APIs
![Page 46: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/46.jpg)
Gadgets == Widgets
![Page 47: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/47.jpg)
An open standard
![Page 48: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/48.jpg)
Gadget Portals
![Page 49: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/49.jpg)
iGoogle server
Gadget platform
JSONAPI calls
ProxiedREST calls
ProxiedOAuth calls
XMLHttpRequestcalls
Gadgets are sandboxed …
… but porous
… can talk to each other or to portal
Gadget
![Page 50: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/50.jpg)
Shindig
(1)Gadget Server
(2a) PlatformServices
(3a) Container
(2b) Platform
JS
Gadgetprovider
Gadget XML Spec
GadgetHTML/JS/CSS
Transforms gadget XML specinto embeddable web content
Offers platform of browser-side and back-end services, e.g. proxying, caching, preferences, social info
Aggregrates widgets into portal. Features include: user registration, preference persistence, theming, browsing/searching of gadgets
Externalwebsite
(3b) Container
JS
EmbedsGadgetVia script tag
EmbedsGadgetsVia script tag
![Page 51: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/51.jpg)
Design Patterns
![Page 52: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/52.jpg)
Software
Patterns
![Page 53: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/53.jpg)
Using Patterns to Improve Our Architectural VisionNorman L. Kerth and Ward Cunningham
IEEE Software, Vol. 23, No. 1. Jan/Feb 1997
![Page 54: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/54.jpg)
![Page 55: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/55.jpg)
Ajax
Patterns
Browser-Side Cache, Submission Throttling, ….
XMLHttpRequest Call, Richer Plugin, …
XMLHttpRequest Call, Richer Plugin, …
Live Search, Lazy Registration, …
![Page 56: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/56.jpg)
OpenSocial
Patterns
Multiple Tabs, Popup Window, …
Read-Write Element …
Inter-Gadget Drag-and-Drop …
Power-of-attorney call …
UI Customisation …
Relative Path Reference …
First Move …
Social Fixture …
![Page 57: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/57.jpg)
OpenSocial – The Future
![Page 58: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/58.jpg)
Caja
![Page 59: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/59.jpg)
Cross-network social APIS
![Page 60: Widgets Tools Keynote](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c65b1b4a795940598b4586/html5/thumbnails/60.jpg)
OAuth