A little show-off about SVG in widgets and the concept of scalability in Vodafone widgets.

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