Download - W3C Widgets – the basics
![Page 1: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/1.jpg)
W3C Widgets – the basics
Peter-Paul Koch (ppk)http://quirksmode.orghttp://twitter.com/ppk
Vodafone Widget Camp, 2 May 2009
Hell is other browsers - Sartre
![Page 2: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/2.jpg)
The mobile web
Four problems with making a website work well on a phone:- Small memory- Small display- Flaky browsers- Flaky connections
![Page 3: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/3.jpg)
The mobile web
Four problems with making a website phone-compatible:- Small memory- Small display- Flaky browsers- Flaky connections
![Page 4: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/4.jpg)
Flaky connections
If the guy next to you is downloading a few moviesyour network connection will slow down regardless of how good it's supposed to be.
I don't see this problem disappearing any time soon.
![Page 5: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/5.jpg)
Flaky connections
This is a serious problem for the mobile web,especially when your site uses 200K of custom JavaScript plus a few libraries.
They have to be downloaded every time the user visits your siteand caching isn't always reliable.
![Page 6: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/6.jpg)
Flaky connections
Solution:Put the core files on your mobile phone
so that you only need to download the data.
![Page 7: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/7.jpg)
Flaky connections
W3C Widgets offer this solution:- Local applications- HTML/CSS/JavaScript- Run in a browser (any browser)- Can handle Ajax requests
![Page 8: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/8.jpg)
W3C Widgets
Eventually, I'll be able to share a widget with a friend via Bluetooth,even if I use an Android and he uses a Nokia S60or a HTC Windows Mobileor a Blackberry
and It Just Works
![Page 9: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/9.jpg)
W3C Widgets
Wouldn't that be totally astoundinglyabsolutelyinconceivablyinteroperable?
![Page 10: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/10.jpg)
W3C Widgets
And hundreds of thousands of web developers already know how to create widgets.
It's just HTML/CSS/JavaScript, after all.
![Page 11: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/11.jpg)
W3C Widgets
It Just Works
in the Vodafone Widget Manager for S60 phones.
![Page 12: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/12.jpg)
W3C Widgets
It Just WorksS60
in the Opera/T-Mobile Widget Manager for (probably) Windows Mobile phones.
![Page 13: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/13.jpg)
W3C Widgets
It Just WorksS60Windows Mobile
in the Nokia Widget Runtime on S60(as long as you add an info.plist file)
![Page 14: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/14.jpg)
W3C Widgets
It Just WorksS60 (2x)Windows Mobile
Otherwise, though, there's no support.
Yet.(I asked Google nicely, though.)
![Page 15: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/15.jpg)
W3C Widgets
We need:- a browser (preferably a good one such as Opera Mobile, Android WebKit, or Safari)- a way of associating .wgt files with this browser OR an installation mechanism- JavaScript device APIs
![Page 16: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/16.jpg)
JavaScript Device APIs
are APIs that grant access to phone functionality- camera- contact list- text messages- etc.
![Page 17: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/17.jpg)
JavaScript Device APIs
are necessary for a true mobile experience.
W3C widgets should be able to tie into phone functionality.
![Page 18: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/18.jpg)
JavaScript Device APIs
- BONDI specification (not yet implemented)- Phonegap library (Android, Blackberry, iPhone)- Opera/T-Mobile widget manager (Windows Mobile)- Adobe Air
![Page 19: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/19.jpg)
JavaScript Device APIsSecurity
If I receive a widget from someoneand it uses device APIshow do I know it's not going to try to steal my contact list?
![Page 20: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/20.jpg)
JavaScript Device APIsSecurity
This problem will probably be solved by signed widgets and security levels.
On the lowest security levels, phone users will be prompted for every device API call the widget wants to perform.Higher levels do it automatically.
![Page 21: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/21.jpg)
JavaScript Device APIsSecurity
Unfortunately both JavaScript über-guru Douglas Crockford and Dojo library creator Alex Russell don't believe in this solution.
More research is necessary.
![Page 22: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/22.jpg)
W3C WidgetsSecurity
JavaScript's same-source policy is not implemented in widgets,because they have to be able to request data from any source.
This, too, requires more thought.
![Page 23: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/23.jpg)
Practicalities
Before we continuethis is totally new, untried technology.
So don't take anyone's word for anything, especially when it concerns design and interface.
![Page 24: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/24.jpg)
Practicalities
All the speakers here could be totally wrong,
and it might be YOU who figures out exactly why, how, and when to use W3C widgets.
![Page 25: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/25.jpg)
Practicalities
- Create 1 HTML page with the CSS, JavaScript, and images you need.- Add an icon and a config.xml- Zip the lot- Change extension to .wgt- It Just Works.
![Page 26: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/26.jpg)
Practicalitieswidget object
The widget object contains some special methods and properties for widgets.
http://www.quirksmode.org/m/widgets.html
![Page 27: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/27.jpg)
Practicalitieswidget object
widget.identifier0382742819384738353
What does this number mean?
I have no idea, either.
![Page 28: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/28.jpg)
Practicalitieswidget object
widget.setPreferenceForKey(value,key)sets a preference that can be retrieved by preferenceForKey(key)
The value,key order is totally absurd
And yes, you could also use cookies.
![Page 29: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/29.jpg)
Practicalitieswidget object
widget.getAttention()lights up the screen
Useful for applications that require the user to stare at them for a long time without taking action.
![Page 30: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/30.jpg)
Practicalitieswidget object
widgetmodechange eventfires when the user docks or undocks the widget.
widget.addEventListener('widgetmodechange',yourFunction,false)
![Page 31: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/31.jpg)
Practicalitieswidget object
widget.widgetMode- application: running on a phone- widget: running on a desktop- docked: docked/minimised
![Page 32: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/32.jpg)
Practicalitiesconfig.xml
<widget id="http://quirksmode.org/widget" dockable="true"> <widgetname>Test widget</widgetname> <icon>pix/myIcon.gif</icon> <width>200</width> <height>200</height> <security> <access> <host>quirksmode.org</host> </access> </security></widget>
![Page 33: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/33.jpg)
Practicalitiesconfig.xml
<widget id="http://quirksmode.org/widget" dockable="true">
Widget needs unique ID for updating purposes.
The dockable attribute says the widget may continue to run scripts in docked mode.
![Page 34: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/34.jpg)
Practicalitiesconfig.xml
<widgetname>Test widget</widgetname> <icon>pix/myIcon.gif</icon>
Set name and (local) icon of widget.
Advise: keep name short, you've only got 60px of space.
![Page 35: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/35.jpg)
Practicalitiesconfig.xml
<width>200</width> <height>200</height>
Set maximum width and height of widget. May not become larger than display, though.
![Page 36: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/36.jpg)
Practicalitiesconfig.xml
<security> <access> <host>quirksmode.org</host> </access> </security>
The widget is allowed to download files from this/these host(s).Warning: changed in Opera 10.
![Page 37: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/37.jpg)
PracticalitiesWriting and debugging
While creating a widget you can test in any browser.
It's just HTML/CSS/JavaScript, after all.
![Page 38: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/38.jpg)
PracticalitiesWriting and debugging
When you've zipped the widget and changed the extension to .wgtyou can test in Opera.
(Ignore Opera 10 right now because of security changes.)
![Page 39: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/39.jpg)
PracticalitiesWriting and debugging
Finally, upload to mobile phone and test there.
This is a necessary step; unfortunately it's not possible to test widgets without a mobile phone.Desktop just isn't the same.
![Page 40: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/40.jpg)
PracticalitiesWriting and debugging
Use the SDK for the tricky bits.
You'll hear more about that later.
![Page 41: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/41.jpg)
More information
Mobile research:http://quirksmode.org/m/
Yahoo! and Google presentations viahttp://quirksmode.org/blog/
![Page 42: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/42.jpg)
Thank youfor your attention
![Page 43: W3C Widgets – the basics](https://reader035.vdocuments.site/reader035/viewer/2022071602/613d6c51736caf36b75d27b7/html5/thumbnails/43.jpg)
Questions?
Ask away.
Or ask me on Twitterhttp://twitter.com/ppkor on my sitehttp://quirksmode.org