0
Hell is other browsers - Sartre




      W3C Widgets –
          the basics
            Peter-Paul Koch (ppk)
           ...
The mobile web
Four problems with making a
website work well on a phone:
- Small memory
- Small display
- Flaky browsers
-...
The mobile web
Four problems with making a
website phone-compatible:
- Small memory
- Small display
- Flaky browsers
- Fla...
Flaky connections
If the guy next to you is downloading a
few movies
your network connection will slow
down regardless of ...
Flaky connections
This is a serious problem for the
mobile web,
especially when your site uses 200K of
custom JavaScript p...
Flaky connections
Solution:
Put the core files on your mobile phone

so that you only need to download the
data.
Flaky connections
W3C Widgets offer this solution:
- Local applications
- HTML/CSS/JavaScript
- Run in a browser (any brow...
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...
W3C Widgets
Wouldn't that be
totally
astoundingly
absolutely
inconceivably
interoperable?
W3C Widgets
And hundreds of thousands of web
developers already know how to create
widgets.

It's just HTML/CSS/JavaScript...
W3C Widgets
It Just Works

in the Vodafone Widget Manager for
S60 phones.
W3C Widgets
It Just Works
S60

in the Opera/T-Mobile Widget
Manager for (probably) Windows
Mobile phones.
W3C Widgets
It Just Works
S60
Windows Mobile

in the Nokia Widget Runtime on S60
(as long as you add an info.plist file)
W3C Widgets
It Just Works
S60 (2x)
Windows Mobile

Otherwise, though, there's no support.

Yet.
(I asked Google nicely, th...
W3C Widgets
We need:
- a browser (preferably a good one such as
 Opera Mobile, Android WebKit, or Safari)
- a way of assoc...
JavaScript Device APIs
are APIs that grant access to phone
functionality
- camera
- contact list
- text messages
- etc.
JavaScript Device APIs
are necessary for a true mobile
experience.

W3C widgets should be able to tie into
phone functiona...
JavaScript Device APIs
- BONDI specification
(not yet implemented)
- Phonegap library
(Android, Blackberry, iPhone)
- Oper...
JavaScript Device APIs
Security

If I receive a widget from someone
and it uses device APIs
how do I know it's not going t...
JavaScript Device APIs
Security

This problem will probably be solved
by signed widgets and security levels.

On the lowes...
JavaScript Device APIs
Security

Unfortunately both JavaScript über-
guru Douglas Crockford and Dojo
library creator Alex ...
W3C Widgets
Security

JavaScript's same-source policy is not
implemented in widgets,
because they have to be able to reque...
Practicalities
Before we continue
this is totally new, untried technology.

So don't take anyone's word for
anything, espe...
Practicalities
All the speakers here could be totally
wrong,

and it might be YOU who figures out
exactly why, how, and wh...
Practicalities
- Create 1 HTML page with the CSS,
  JavaScript, and images you need.
- Add an icon and a config.xml
- Zip ...
Practicalities
widget object

The widget object contains some
special methods and properties for
widgets.

http://www.quir...
Practicalities
widget object

widget.identifier
0382742819384738353

What does this number mean?

I have no idea, either.
Practicalities
widget object

widget.setPreferenceForKey(value,key)
sets a preference that can be retrieved
by preferenceF...
Practicalities
widget object

widget.getAttention()
lights up the screen

Useful for applications that require the
user to...
Practicalities
widget object

widgetmodechange event
fires when the user docks or undocks
the widget.

widget.addEventList...
Practicalities
widget object

widget.widgetMode
- application: running on a phone
- widget: running on a desktop
- docked:...
Practicalities
config.xml
<widget id=quot;http://quirksmode.org/widgetquot; dockable=quot;truequot;>
 <widgetname>Test wid...
Practicalities
config.xml
<widget id=quot;http://quirksmode.org/widgetquot; dockable=quot;truequot;>

Widget needs unique ...
Practicalities
config.xml
<widgetname>Test widget</widgetname>
<icon>pix/myIcon.gif</icon>

Set name and (local) icon of w...
Practicalities
config.xml
<width>200</width>
<height>200</height>

Set maximum width and height of widget.
May not become ...
Practicalities
config.xml
<security>
 <access>
  <host>quirksmode.org</host>
 </access>
</security>

The widget is allowed...
Practicalities
Writing and debugging

While creating a widget you can test in
any browser.

It's just HTML/CSS/JavaScript,...
Practicalities
Writing and debugging

When you've zipped the widget and
changed the extension to .wgt
you can test in Oper...
Practicalities
Writing and debugging

Finally, upload to mobile phone and
test there.

This is a necessary step; unfortuna...
Practicalities
Writing and debugging

Use the SDK for the tricky bits.

You'll hear more about that later.
More information

Mobile research:
http://quirksmode.org/m/

Yahoo! and Google presentations via
http://quirksmode.org/blo...
Thank you
for your attention
Questions?
Ask away.
Or ask me on Twitter
http://twitter.com/ppk
or on my site
http://quirksmode.org
Upcoming SlideShare
Loading in...5
×

Vodafone Widget Camp

2,022

Published on

My presentation at the 2 May 2009 Vodafone Widget Camp in Amsterdam.

Published in: Technology, Business
1 Comment
8 Likes
Statistics
Notes
  • The information in this slideshow is wrong and does not apply to the W3C widget spec.

    Wrt slide 22, that is not true. Widgets all fully locked down and then you access request to the things you need. See Widgets 1.0: Access Requests spec.

    Wrt slide 27, that seems to be an Opera widget identifier, not a W3C widget identifier. A w3c widget identifier is a URI as put into the the config.xml file.

    Slide 28 is also incorrect. setPrefererenceForKey is a dashboard and opera thing. W3C uses the HTML5 Storage interface.

    wrt slide 29, getAttention is no longer part of the w3c widget specs. Same for method on slide 30.

    Slide 31, widgetMode is not in the w3c spec (viewMode might be, but not yet published).

    Slide 32, there is no 'dockable' attribute in w3c widgets. Hey! that's not a W3C widget at all! that's an Opera widget!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,022
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
89
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Vodafone Widget Camp"

  1. 1. Hell is other browsers - Sartre W3C Widgets – the basics Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk Vodafone Widget Camp, 2 May 2009
  2. 2. The mobile web Four problems with making a website work well on a phone: - Small memory - Small display - Flaky browsers - Flaky connections
  3. 3. The mobile web Four problems with making a website phone-compatible: - Small memory - Small display - Flaky browsers - Flaky connections
  4. 4. Flaky connections If the guy next to you is downloading a few movies your network connection will slow down regardless of how good it's supposed to be. I don't see this problem disappearing any time soon.
  5. 5. 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 site and caching isn't always reliable.
  6. 6. Flaky connections Solution: Put the core files on your mobile phone so that you only need to download the data.
  7. 7. Flaky connections W3C Widgets offer this solution: - Local applications - HTML/CSS/JavaScript - Run in a browser (any browser) - Can handle Ajax requests
  8. 8. 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 S60 or a HTC Windows Mobile or a Blackberry and It Just Works
  9. 9. W3C Widgets Wouldn't that be totally astoundingly absolutely inconceivably interoperable?
  10. 10. W3C Widgets And hundreds of thousands of web developers already know how to create widgets. It's just HTML/CSS/JavaScript, after all.
  11. 11. W3C Widgets It Just Works in the Vodafone Widget Manager for S60 phones.
  12. 12. W3C Widgets It Just Works S60 in the Opera/T-Mobile Widget Manager for (probably) Windows Mobile phones.
  13. 13. W3C Widgets It Just Works S60 Windows Mobile in the Nokia Widget Runtime on S60 (as long as you add an info.plist file)
  14. 14. W3C Widgets It Just Works S60 (2x) Windows Mobile Otherwise, though, there's no support. Yet. (I asked Google nicely, though.)
  15. 15. 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
  16. 16. JavaScript Device APIs are APIs that grant access to phone functionality - camera - contact list - text messages - etc.
  17. 17. JavaScript Device APIs are necessary for a true mobile experience. W3C widgets should be able to tie into phone functionality.
  18. 18. JavaScript Device APIs - BONDI specification (not yet implemented) - Phonegap library (Android, Blackberry, iPhone) - Opera/T-Mobile widget manager (Windows Mobile) - Adobe Air
  19. 19. JavaScript Device APIs Security If I receive a widget from someone and it uses device APIs how do I know it's not going to try to steal my contact list?
  20. 20. JavaScript Device APIs Security 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.
  21. 21. JavaScript Device APIs Security Unfortunately both JavaScript über- guru Douglas Crockford and Dojo library creator Alex Russell don't believe in this solution. More research is necessary.
  22. 22. W3C Widgets Security 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.
  23. 23. Practicalities Before we continue this is totally new, untried technology. So don't take anyone's word for anything, especially when it concerns design and interface.
  24. 24. 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.
  25. 25. 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.
  26. 26. Practicalities widget object The widget object contains some special methods and properties for widgets. http://www.quirksmode.org/m/widgets.html
  27. 27. Practicalities widget object widget.identifier 0382742819384738353 What does this number mean? I have no idea, either.
  28. 28. Practicalities widget 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.
  29. 29. Practicalities widget 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.
  30. 30. Practicalities widget object widgetmodechange event fires when the user docks or undocks the widget. widget.addEventListener ('widgetmodechange',yourFunction,false)
  31. 31. Practicalities widget object widget.widgetMode - application: running on a phone - widget: running on a desktop - docked: docked/minimised
  32. 32. Practicalities config.xml <widget id=quot;http://quirksmode.org/widgetquot; dockable=quot;truequot;> <widgetname>Test widget</widgetname> <icon>pix/myIcon.gif</icon> <width>200</width> <height>200</height> <security> <access> <host>quirksmode.org</host> </access> </security> </widget>
  33. 33. Practicalities config.xml <widget id=quot;http://quirksmode.org/widgetquot; dockable=quot;truequot;> Widget needs unique ID for updating purposes. The dockable attribute says the widget may continue to run scripts in docked mode.
  34. 34. Practicalities config.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.
  35. 35. Practicalities config.xml <width>200</width> <height>200</height> Set maximum width and height of widget. May not become larger than display, though.
  36. 36. Practicalities config.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.
  37. 37. Practicalities Writing and debugging While creating a widget you can test in any browser. It's just HTML/CSS/JavaScript, after all.
  38. 38. Practicalities Writing and debugging When you've zipped the widget and changed the extension to .wgt you can test in Opera. (Ignore Opera 10 right now because of security changes.)
  39. 39. Practicalities Writing 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.
  40. 40. Practicalities Writing and debugging Use the SDK for the tricky bits. You'll hear more about that later.
  41. 41. More information Mobile research: http://quirksmode.org/m/ Yahoo! and Google presentations via http://quirksmode.org/blog/
  42. 42. Thank you for your attention
  43. 43. Questions? Ask away. Or ask me on Twitter http://twitter.com/ppk or on my site http://quirksmode.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×