Download - 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
What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development
What is a Web widget
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
What is a Web widget
Desired propertiesSimplicity, Reuse, User engagement, Remixability, Cross platform
Where these properties may come from?
Widget Platform
What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development
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
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
What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development
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
What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development
Customized startup page
Customized startup page
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
Customized startup page
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
What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development
UWA Widgets Development
UWA Widgets Development
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?