Widget Platform

Widget Platformtear the Web apart and assemble the pieces together

Jos da Mata [email protected]://jose.wrkwrks.comwww.twitter.com/josemf

Widget Platform

What is a Web widget

Widget Origins

SAPO Widgets Platform

Technical Details

UWA Widgets Development

Widget Platform


Widget Origins


Technical Details



Essentially, a Web widget is a local HTML/CSS/JavaScript Web applicationWeb Browser Environment

Small piece of your site

Host Runtime EnvironmentHTTPURIUnicodeURIDOMXMLHTTPRequestJSON, XML, HTMLCSSResources

Examples


Desired propertiesSimplicity, Reuse, User engagement, Remixability, Cross platform

Where these properties may come from?

Widget Platform


Widget Origins


Technical Details


Widget Origins

From websites, keyword search, directory portals, ...

From wikis, weblogs, social media aggregation, social networks, ...

From Enterprise 2.0, mashups, real-time Web, semantic search?

Widgets are Web 1.0, 2.0 and 3.0. But are only really interesting since 2.0.

2004

1995

5.5

2000

2002

2008

email

ftp

usenet

IRC

BBS

Gopher

World Wide Web

1990

HTTP

HTML

SOAP

Java

XML

Javascript

P2P

Flash

RDF

OpenID

RSS

AJAX

ATOM

OWL

SPARQL

Web 2.0

Semantic Web

Microformats

JS Frameworks

Widget Origins

What have:HTML/JS Snippets, Portlets, Web parts, Flash Widgets, Mashups

To do with:Web Widgets?

First Widget ever...
the hit counter!

Others alike...
Snippets

Copy past HTML+Javascript snippet to website

Can have visitor state (cookies)

May have been impressive...

Simplicity

Portlets

Pluggable, reusable component

Fragment of markup code for portal composition

Used in the late 90s: Altavista, AOL, Excite and Yahoo!

Now prepackaged in Enterprise Portal software:Liferay, JBoss Enterprise, DotNetNuke, Joomla!, IBM Websphere

Portlet Specifications...Java portlet specification (JSR)

for portlet enginesPersonalization, presentation and security

Web part (WSS sharepoint)

Windows Sharepoint services

Server side based

Output HTML

XML config and metadata

Maybe too much for a Hello World?

Portlets example (JSR)

Java portlet specification JSR286

Server side based

Output HTML

XML config and metadata

Open specification basedReuse

Media is Everything...
Flash Widgets

Flash (other media) object HTML reference

Multi-media based (why always the dark themes?)

Cross-browser (assuming user has the plugin...)

Advertising

User engagement

Mashup
Remix the Web

Combination combine application data with external data

Aggregation create information with the data

Visualization explain complex information

Mashup technology

Data formatJSON, XML, YAML, CSV,

Data APIREST, SOAP, XML-RPC,

Server side, desktop, browserXmlHttpRequest, sockets, cURL,

PresentationFlash, DOM, HTML5 Canvas,

Remixability

Data sources

Information

Mashup

Mobile Widgets

Web Standards: W3C Widgets 1.0 based

Widget is downloaded and stored:Available for offline use

Proprietary device APIs (camera, geolocation, SMS, etc)

Desktop browsers are becoming boring:Android Webkit, Opera Mobile, Opera Mini, Netfront, Safari, Blackberry, S60 Webkit, IE Mobile, Iris, Bolt, Skyfire, and more...

Cross Platform (some day hopefully...)

Web widgets origins

Snippets

Portlets

Flash Widgets (Silverlight, Adobe Air, etc)

Mashup

Mobile Widget

Widget Platform


Widget Origins


Technical Details


Project Insight

Started at consulting as a customized startup page for

Adopted by for the widget repository and environment for

Included developers tools

Extended for multi-platform (cross-domain) widget services

Extended for multi-format widget services

Customized startup page

Apache Server

Widgets page

Widgets as xhtml documents

PHP, Mysql, Javascript

JQuery for widget framework

Fetched server side and embedded on the slot

IFrame

Some support for widget settings

Widget storage and UWA

UWA

Widget Platform

Exposition Server (Netvibes)

UWA Widgets (Netvibes)

Widget database storage

Development tools

Multi-platform API

UWA

Widget Platform

API for widgets servicesBased on Apache Wookie

PHP libraries for server-side integration

Template for widgets pagesFor widget runtime environment

For widget instantiation

Multi-platform API

UWA

Widget Platform

Cross-domain AJAX

Service profile conceptWidget environment

Widget catalog

SecurityWidget boxing in widget pages

HTTP Basic/Digest with SSL

Multi-format support

Widgets SAPO

Widget import feature for several widget formats

On-demand conversion for other formats

Open developer tools for developers

Open catalog for users

Widget Platform


Widget Origins


Technical Details




Page layout server side, with widget skeleton Environment (Browser) call widget.onLoad for each widget

Widgets run inline in the page (vs Iframe method)

Widget approval mechanismBest case scenario should be widget boxing or capability model.Ex: Google Caja, Ad Safe

UWA WidgetsJavascript framework for DOM, AJAX and widget properties


AJAXCross domain requests

On demand javascript, tag

Json-p for Json requests

Widget Catalog

Widget Catalog

UWA Widget Importation

Widget Catalog

UWA Widget ExportationPlatforms UWA, Opera, Nokia WRT, Samsung W3C, Igoogle, Applet dashboard, Windows Vista, Windows Live, Yahoo widgets, etc

Fetch widget parts Instantiate target compiler set parameters call render()Fetch referenced images and other dependencies, if it must

Widget Syndication API

Apache Wookie

W3C Widgets 1.0

REST API

Widget Syndication API

Widget REST ServicesWidget APIFetch widget parts from ids

Fetch catalog widgets

Update/Store widgets

Category APIFetch categories

Fetch associated widgets

Create/change categories

Associate widgets to categories

Environment APIFetch widget runtime environment for portals implementing widget page technology

Widget Platform


Widget Origins


Technical Details




A UWA Codebits Widget

Into the Universal Widget API

SAPO Widgets for developers

UWA file format

Title

Metadata

Widget preferences

Widget Stylesheet

Widget Code

Widget Body

UWA document

XHTML strict BasedXML extension for widget preferences

Netvibes namespace

UTF-8

No server side code

Widget Metadata

Gives information about:The widget

Developers

Environment

SAPO Widget Metadata

Widget Preferences

Widget (Application) settings and state persistence

Data types: Text, Boolean, Hidden, Password, List, Range

SAPO Widget Preferences

Widget Body

XHTML

Just the part (without the tag)

No JavaScript, No StylesAlthough you can use the style attribute

SAPO Widget Body

Widget Style

CSS inside the tag

You should namespace your styles

SAPO Widget Style

Widget Code

JavaScript

UWA Data APIAJAX

UWA Feed Format

Widget APIEvents

Preferences

DOM

DOM Extensions

SAPO Widget Code

UWA API

Host Runtime EnvironmentHTTPURIResourcesUnicodeURIDOMXMLHTTPRequestJSON, XML, HTMLCSSUWA.Data APIWidget APIUWA EventsUWA ExtensionsUWA Prefs

UWA.Data API

UWA.Data.getText(url, callback)

UWA.Data.getXml(url, callback)

UWA.Data.getJson(url, callback)

UWA.Data.getFeed(url, callback)

UWA.Data.request

method: GET, POST

proxy: ajax, feed

type: text, xml, json, html

cache: in seconds

onComplete: callback

parameters: url encoded

onFailure: callback

UWA.Data Feed API

RSS, RSS2, Atom

UWA JSON Feed Format

Items*

enclosures*

Widget Events API

widget.onRefresh

widget.onResize

widget.onKeyboardAction

widget.onSearch

Widget Preferences API

Getters:getValue, getInt, getBool

Setters:setValue

UWA Extensions

Widget API for DOMwidget.body

widget.setBody

widget.createElement

DOM ElementappendText, empty, setHtml, setStyle,getDimensions, show, ...

ArrayBased on JavaScript 1.6

forEach, some, map, ...

StringIsEmail, stripTags, ...

FimAny Questions?

Widget Platform

Technology

Transcript of Widget Platform