• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Widgets Tools Keynote
 

Widgets Tools Keynote

on

  • 2,501 views

Slide pack for keynote presentation at TOOLS Europe, 2008.

Slide pack for keynote presentation at TOOLS Europe, 2008.

Covers widgets and OpenSocial.

By Michael Mahemoff.

Statistics

Views

Total Views
2,501
Views on SlideShare
2,501
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Widgets Tools Keynote Widgets Tools Keynote Presentation Transcript

    • ` Web 2.0, OpenSocial, and Design Patterns
    • 1998 My Excite 2008 iGoogle
    • Mini web apps Widgets … Configurable
    • Re-arrangement is cumbersome Editing preferences -> new page Content refresh -> entire page refresh Monolithic - All content from excite.com
    • Re-arrangement is cumbersome Re-arrangement via drag-and-drop Editing preferences -> new page Editing preferences inline Content refresh -> entire page refresh Autonomous gadgets Monolithic - All content from excite.com Aggregation of distributed gadgets
    • Small pieces, loosely joined User participation Usability and Simplicity Social interaction Data sharing Agile development APIs (REST, JSON) Identity (OpenID) Delegated Trust (OAuth) News Feeds (RSS/Atom) Microformats Tagging Open Web Standards Mashups/Aggregation Ajax Sandboxing Video Widgets Web 2.0
    • Small pieces, loosely joined User participation Usability and Simplicity Social interaction Data sharing Agile development Principles User Interface APIs ( REST , JSON ) Identity (OpenID) Delegated Trust ( OAuth ) News Feeds (RSS/Atom) Microformats Tagging Open Web Standards Mashups/Aggregation Ajax Sandboxing Video Widgets
    • REST
    • Use the Force
    • 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
    • <xs:schema targetNamespace=&quot;http://schemas.xmlsoap.org/wsdl/soap/&quot;> <xs:import namespace=&quot;http://schemas.xmlsoap.org/wsdl/&quot;/> − <xs:simpleType name=&quot;encodingStyle&quot;> − <xs:annotation> − <xs:documentation> &quot;encodingStyle&quot; indicates any canonicalization conventions followed in the contents of the containing element. For example, the value &quot;http://schemas.xmlsoap.org/soap/encoding/&quot; indicates the pattern described in SOAP specification </xs:documentation> </xs:annotation> <xs:list itemType=&quot;xs:anyURI&quot;/> </xs:simpleType> <xs:element name=&quot;binding&quot; type=&quot;soap:tBinding&quot;/> − <xs:complexType name=&quot;tBinding&quot;> − <xs:complexContent> − <xs:extension base=&quot;wsdl:tExtensibilityElement&quot;> <xs:attribute name=&quot;transport&quot; type=&quot;xs:anyURI&quot; use=&quot;required&quot;/> <xs:attribute name=&quot;style&quot; type=&quot;soap:tStyleChoice&quot; use=&quot;optional&quot;/> </xs:extension> </xs:complexContent> </xs:complexType> − <xs:simpleType name=&quot;tStyleChoice&quot;> − <xs:restriction base=&quot;xs:string&quot;> <xs:enumeration value=&quot;rpc&quot;/> <xs:enumeration value=&quot;document&quot;/> </xs:restriction> </xs:simpleType> <xs:element name=&quot;operation&quot; type=&quot;soap:tOperation&quot;/> ……… .. ………… −
    • GET - read POST - update PUT – create DELETE - delete
    • GET - read http://example.com/movies/123.xml POST - update http://example.com/movies/123.xml PUT – create http://example.com/movies DELETE - delete http://example.com/movies/123.xml
    • 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 }
    • REST simplifies calls and facilitates mashups
    • JSON
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <statuses type=&quot;array&quot;> <status> <created_at>Tue Jun 17 23:41:26 +0000 2008</created_at> <id>837306935</id> <text>Click top-right &quot;X&quot; on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit &quot;_&quot; not &quot;X&quot;!!!</text> <source>&lt;a href=&quot;http://www.twhirl.org/&quot;&gt;twhirl&lt;/a&gt;</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>&lt;a href=&quot;http://www.twhirl.org/&quot;&gt;twhirl&lt;/a&gt;</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
    • [ { &quot;truncated&quot;: false, &quot;in_reply_to_status_id&quot;: null, &quot;favorited&quot;: false, &quot;in_reply_to_user_id&quot;: null, &quot;source&quot;: &quot;<a href=&quot;http://www.twhirl.org/&quot;>twhirl</a>&quot;, &quot;id&quot;: 837306935, &quot;user&quot;: { &quot;name&quot;: &quot;Michael Mahemoff&quot;, &quot;screen_name&quot;: &quot;mahemoff&quot;, &quot;followers_count&quot;: 96, &quot;url&quot;: &quot;http://softwareas.com&quot;, &quot;profile_image_url&quot;: &quot;http://s3.amazonaws.com/twitter_production/profile_images/28010672/beedogtilly_normal.jpg&quot;, &quot;description&quot;: &quot;Choose Web&quot;, &quot;location&quot;: &quot;London&quot;, &quot;id&quot;: 1112431, &quot;protected&quot;: false }, &quot;text&quot;: &quot;Click top-right &quot;X&quot; on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit &quot;_&quot; not &quot;X&quot;!!!&quot;, &quot;created_at&quot;: &quot;Tue Jun 17 23:41:26 +0000 2008&quot; }, { &quot;truncated&quot;: false, &quot;in_reply_to_status_id&quot;: 836898666, &quot;favorited&quot;: false, &quot;in_reply_to_user_id&quot;: 1671021, &quot;source&quot;: &quot;<a href=&quot;http://www.twhirl.org/&quot;>twhirl</a>&quot;, &quot;id&quot;: 837085942, &quot;user&quot;: { &quot;name&quot;: &quot;Michael Mahemoff&quot;, &quot;screen_name&quot;: &quot;mahemoff&quot;, &quot;followers_count&quot;: 96, &quot;url&quot;: &quot;http://softwareas.com&quot;, &quot;profile_image_url&quot;: &quot;http://s3.amazonaws.com/twitter_production/profile_images/28010672/beedogtilly_normal.jpg&quot;, &quot;description&quot;: &quot;Choose Web&quot;, &quot;location&quot;: &quot;London&quot;, &quot;id&quot;: 1112431, &quot;protected&quot;: false }, &quot;text&quot;: &quot;@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&quot;, &quot;created_at&quot;: &quot;Tue Jun 17 18:29:49 +0000 2008&quot; } ] http://twitter.com/statuses/ user_timeline/mahemoff.json
    • 3 rd party 3 rd party XML/HTML (Proxied) XML/HTML (Proxied) JSON (Direct) JSON (Direct) Website server
    • OAuth
    • http://hueniverse.com
    • http://hueniverse.com
    • Small pieces, loosely joined User participation Usability and Simplicity Social interaction Data sharing Agile development APIs (REST, JSON) Identity (OpenID) Delegated Trust (OAuth) News Feeds (RSS/Atom) Microformats Tagging Open Web Standards Mashups/Aggregation Ajax Sandboxing Video Widgets Web 2.0
    • Open Web Standards
    • HTML Javascript CSS DOM XMLHttpRequest
    • + Libraries and Frameworks
    • Ajax
    • Website server 1. Initial site 2. Ongoing dialogue (no page refresh) Rich , dynamic, UI
    • Sandboxing
    • IFrames
    •  
    • Porous sandboxes
    •  
    • Inter-Frame Communication
    • http://is.gd/AaR
    • Caja
    • “ Using Caja, web apps can safely allow scripts in third party content.” Google-Caja
    • Widgets and OpenSocial
    • Gadgets (aka Widgets)
    • Mini Web Apps
    • Widget portals (iGoogle, NetVibes) Custom web pages (blogs, homepages) Social networks (Facebook, Bebo)
    • OpenSocial
    • A Google iGoogle Google Gadget Google Orkut Google Gadget OpenSocial API Megacorp Megacorp Widget Facebook Facebook Application Facebook “social” API Social API Widget API Container Website Nb in most cases, widgets can also be embedded on standalone websites Stovepiped model (2005-2007)
    • Google iGoogle Google Gadget Google Orkut OpenSocial API Megacorp Facebook ?????? Social API Widget API Container Website OpenSocial model (in production from 2008)
    • OpenSocial = Widgets + Social APIs
    • Gadgets == Widgets
    • An open standard
    • Gadget Portals
    • iGoogle server Gadget platform JSON API calls Proxied REST calls Proxied OAuth calls XMLHttpRequest calls Gadgets are sandboxed … … but porous … can talk to each other or to portal Gadget
    • (1) Gadget Server (2a) Platform Services (3a) Container (2b) Platform JS Gadget provider Gadget XML Spec Gadget HTML/JS/CSS Transforms gadget XML spec into 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 External website (3b) Container JS Embeds Gadget Via script tag Embeds Gadgets Via script tag Shindig
    • Design Patterns
    • Software Patterns
    • Using Patterns to Improve Our Architectural Vision Norman L. Kerth and Ward Cunningham IEEE Software, Vol. 23, No. 1. Jan/Feb 1997
    •  
    • Browser-Side Cache, Submission Throttling, …. XMLHttpRequest Call, Richer Plugin, … XMLHttpRequest Call, Richer Plugin, … Live Search, Lazy Registration, … Ajax 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 … OpenSocial Patterns
    • OpenSocial – The Future
    • Caja
    • Cross-network social APIS
    • OAuth