1.
SVG in Vodafone
Widgets
Daniel Herzog,Vodafone
@danfooo

2.
Vodafone Internet Services - London and Düsseldorf
@danfooo Daniel Herzog, @danfooo

3.
Düsseldorf, Germany
@danfooo Daniel Herzog, @danfooo

4.
SVG and Vodafone
@danfooo Daniel Herzog, @danfooo

5.
SVG and Vodafone
SVG is #1 format for Scalable Graphics in Vodafone
•Data exchange
•Icon design
•Interaction design
@danfooo Daniel Herzog, @danfooo

6.
SVG and Vodafone
A piece of History:
Bundesliga Player
Presented at SVG Open 2007
@danfooo Daniel Herzog, @danfooo

7.
@danfooo Daniel Herzog, @danfooo

8.
SVG and Vodafone
Big demand for graphical scalability
because of incredible handset fragmentation
@danfooo Daniel Herzog, @danfooo

9.
SVG and Vodafone
Vodafone demands SVG
support for these handsets.
@danfooo Daniel Herzog, @danfooo

10.
SVG and Vodafone
How is that going to be usable?
@danfooo Daniel Herzog, @danfooo

11.
Vodafone Widgets
@danfooo Daniel Herzog, @danfooo

12.
Vodafone Widgets
Widgets in the W3C sense.
w3.org/TR/widgets/
@danfooo Daniel Herzog, @danfooo

13.
Vodafone Widgets
Packed HTML with all resources.
CSS, JavaScript, Bitmaps, SVG
And whatever else.
Inside one zip with some extra instructions.
@danfooo Daniel Herzog, @danfooo

14.
Vodafone Widgets
Downloaded once.
To fetch only the actual data everytime.
But updatable like an (iPhone) App.
@danfooo Daniel Herzog, @danfooo

15.
Vodafone Widgets
Widgets are Apps.
Because to a customer they look and
feel and smell like Apps.
@danfooo Daniel Herzog, @danfooo

16.
Vodafone Widgets
But they are made with web-technologies.
@danfooo Daniel Herzog, @danfooo

17.
Vodafone Widgets
Made for multiple
•OS
•Device types
•Screensizes
•Resolutions / pixel densities
@danfooo Daniel Herzog, @danfooo

18.
Vodafone Widgets
•Application character
•Potentially even more multi-platform
then the web.
•Because it can work offline.
@danfooo Daniel Herzog, @danfooo

19.
Vodafone Widgets
Available on S60 phones for VF
customers.
Accessible from the home screen.
Out of the box or as OTA download.
@danfooo Daniel Herzog, @danfooo

20.
Vodafone Widgets
Client made by Opera.
SVG support pretty good
Partial Tiny 1.2, as in Opera mobile
@danfooo Daniel Herzog, @danfooo

21.
Vodafone Widgets
And on the new
Vodafone 360 H1 device.
Coming pre-christmas
to EU markets.
More: bit.ly/1e1JV6
@danfooo Daniel Herzog, @danfooo

22.
Vodafone Widgets
Widget engine done by
Samsung, Webkit based.
@danfooo Daniel Herzog, @danfooo

23.
Vodafone Widgets
How to make one?
360 Tutorial: bit.ly/10x59l
Info in the betavine Widget Zone: bit.ly/7P0y
@danfooo Daniel Herzog, @danfooo

24.
Vodafone Widgets
Why make one?
Huge contests, win up to 100k €: bit.ly/Qv7DM
@danfooo Daniel Herzog, @danfooo

25.
Using SVG in Vodafone Widgets
@danfooo Daniel Herzog, @danfooo

26.
Using SVG in Vodafone Widgets
SVG as background image
•Perfect for rounded corners
•Proportionally adapting
@danfooo Daniel Herzog, @danfooo

27.
Using SVG in Vodafone Widgets
SVG as object component
•Reusable components
•Parent to child / Child to parent scripting
•Possible to fall back when running without
SVG support
•Still with all advantages from HTML/CSS
@danfooo Daniel Herzog, @danfooo

28.
Using SVG in Vodafone Widgets
SVG in fullscreen
•Mostly for simple 2d games
•or UIs that don‘t need text-flow or CSS
layout features.
@danfooo Daniel Herzog, @danfooo

29.
Why is SVG so important
for Widgets?
@danfooo Daniel Herzog, @danfooo

30.
Why is SVG so important for Widgets?
Resolutions are overly fragmented.
In terms of screen-size
and pixel resolution.
= in pixel density (ppi)
@danfooo Daniel Herzog, @danfooo

31.
Why is SVG so important for Widgets?
Multi-resolution as an advantage of Web-Technology
Samsung H1 (267ppi)
Nokia N97 Mini (230ppi)
Nokia N97 (210ppi)
Nokia 6710 classic (181ppi)
Nokia N95 (153ppi)
24inch Desktop, Full-HD'ish (94ppi)
@danfooo Daniel Herzog, @danfooo

32.
Why is SVG so important for Widgets?
Widget Engines should not run at 96ppi.
If they can know better.
VF widgets run on the correct resolution.
@danfooo Daniel Herzog, @danfooo

33.
Why is SVG so important for Widgets?
SVG can therefor be brought to dynamic sizes.
Via CSS.
@media all and (min-resolution: 200dpi)
{
body {font-size: 22px}
}
.mySVGButton {width: 1em;}
@danfooo Daniel Herzog, @danfooo

34.
Bottom line
•Lots of nice ways to use SVG
•Lots of good reasons to do it
@danfooo Daniel Herzog, @danfooo

35.
My problem list
•Performance (never ever enough)
•SVG is not SVG-T
•Can‘t emulate the mobile browser or
Widget Runtime on a desktop browser.
@danfooo Daniel Herzog, @danfooo

36.
Questions
@danfooo Daniel Herzog,Vodafone
Daniel Herzog, @danfooo