Widgets

Marcos Caceres (QUT) :: WDS ::26 September, 2007

Interaction designer/developer by trade

Joined W3C Web Apps Formats WG in 2006

Edit: Widgets 1.0 Requirements Widgets 1.0 Specification (with Anne van

Kesteren, Opera Software) XBL 2.0 Primer (with Lachlan Hunt)

Doing a PhD on widgets04/12/23 2

What are Widgets and Widget Engines?

Problem (lack of standards)How to address the problemWidget 1.0 Spec

Packaging Runtime instances

04/12/23 3

A single function application Made from web technologies (easy to build) Usually access local info or web services Types:

Desktop Mobile Web Physical

04/12/23 4

DESKTOP WIDGETS WEB WIDGETS

04/12/23 5

Yahoo! Widgets and Sidebar iGoogle Gadgets

MOBILE WIDGETS PHYSICAL WIDGET

04/12/23 6

Webwag WidgetStation

Software on which widgets run.Dashboard, Sidebar, Yahoo, Google

Gadgets

04/12/23 7Dashboard (Apple Inc.)

Yahoo! Widgets engine

04/12/23 8

Widget: “An end-user's conceptualisation of an interactive single purpose application for displaying and/or updating local data or data on the Web, packaged in a way to allow a single download and installation on a user's machine or mobile device.” [Widget-reqs]

Make a web pageZip it upPublish it online (or send it out)…or at least it should be that easy.

04/12/23 9

To make a widget more useful: Ajax (web 2.0 stuff)Web servicesRSS/podcastsWeb APIs/mashupsAccess to device

Camera, SMS, etc

04/12/23 10

AnyoneEnterprise uses

Eg: SAP

04/12/23 11

SAP Prototype Widget [SAP]

“…in the U.S. marketing spending on mobile widgets will reach [US]$500 million by 2010, up from about $2 million [in March 2007]” [BusinessWeek]

“2007: year of the Widget?”[Newsweek]

No interoperability across widget engines

Security issues not fully resolved Are all user needs met?

▪ Enterprise requirements▪ Internationalisation▪ Accessibility

How will they work on phones? Mobility Persistent storage? Keeping costs down.

04/12/23 12

PACKAGING

Format and Media Type

Automatic Updates Auto-discovery Embedding in HTML Digital Signature

WIDGET INSTANCE

Initialisation (bootstrapping)

Metadata/Preferences DOM APIs and Events

Cross-widget communication

Rendering Security model

04/12/23 13

Format Zip (version 2)

▪ Deflate or uncompressed

Excludes support for:▪ 64Bit▪ Encryption▪ Splitting▪ Unicode

Maximize interoperability

Media Type application/widget

Extension *.wgt

04/12/23 14

Keep widget up to dateWidget engine periodically checks for

updates: Is the Version number HTTP Caching control

▪ Etags, Last modified dateWhat happens when there is no caching

info? What happens when a widget is auto

generated?d04/12/23 15

AUTO-DISCOVERY

Auto-discovery enables a browser to identify and install a widget that is associated with an web page.

<a rel="widget“ href=“my.wgt“>Widget</a>

EMBEDDING IN HTML

HTML4/XHTML Using <object>

HTML5? We will be approaching

HTML-WG.<widget src=“my.wgt”>

<div>…Fallback content…</div>

</widget?>• We are still

investigating how to do this.

04/12/23 16

XML Digital Signature

Sign everything in a package Signed Info

▪ Crypto algorithm

Signed value Key info

▪ Digital certificate

Manifest▪ The files

<?xml version="1.0" encoding="UTF-8"?><Signature xmlns="http://www.w3.org/2000/09/xmldsig#"> <SignedInfo> <CanonicalizationMethod Algorithm="http://www.w3.org/TR/2001/REC-xml-c14n-20010315"/> <SignatureMethod Algorithm="http://www.w3.org/2000/09/xmldsig#rsa-sha1" /> <Reference URI="#References" Type="http://www.w3.org/2000/09/xmldsig#Manifest"> <DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1"/> <DigestValue>725x3fVasdfvBGFGjhjyDSFvUk=</DigestValue> </Reference> </SignedInfo> <SignatureValue>MC0E~LE=</SignatureValue> <KeyInfo> <X509Data> <X509Certificate>MI...lVN</X509Certificate> </X509Data> </KeyInfo> <Manifest Id="References"> <Reference URI="config.xml"> <DigestMethod

Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" /> <DigestValue>j6...8nk=</DigestValue> </Reference> <Reference URI="index.html"> <DigestMethod

Algorithm="http://www.w3.org/2000/09/xmldsig#sha1"/> <DigestValue>lm...34=</DigestValue> </Reference> <Reference URI="pictures/picture1.gif"> <DigestMethod

Algorithm="http://www.w3.org/2000/09/xmldsig#sha1"/> <DigestValue>pq...56=</DigestValue> </Reference> </Manifest> </Signature>

04/12/23 17

BOOTSTRAPPING

Automatically finding the start folder and file: HTML, XML, SVG support

(?) Internationalized

context /en/,/en-au/ ,/en-us/

Automatically launching the start file and configuring the application

METADATA

config.xml Metadata/Preferences

Widget (id, version, width, height, start)▪ title▪ Author (url, email)▪ description▪ License

Namespace:http://www.w3.org/ns/widgets

04/12/23 18

Leverage JavaScript+XHR

Widget Object openURL(url); preferenceForKey(key

) setPreferenceForKey(

value, key) Extensions to

window resizeTo, resizeBy,

moveTo, moveBy

Events state change, modal

priorities Cross widget

communication HTML 5’s model

04/12/23 19

SECURITY MODEL

No yet specified. Should we lock it

down or open it up? Disk access? Cross-domain

requests? Plugins? Flash? Java?

Executables?

RENDERING

Handling transparency in irregularly shaped widgets

04/12/23 20

[email protected]

Widget images (Microsoft Vista Sidebar)References[HTML5]http://www.whatwg.org/specs/web-apps/current-work/[BusinessWeek]Kharif, O. (2007, March 27). Widgets Gone Wireless. Retrieved 5 21, 2007:

http://www.businessweek.com/technology/content/mar2007/tc20070327_532303.htm

[SAP]https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/5598[Widget-reqs]http://www.w3.org/TR/widget-reqs/ [Widget-spec]http://www.w3.org/TR/widget/

04/12/23 21