SVG Open 2009: SVG In Vodafone Widgets

@danfooo

SVG in Vodafone Widgets

Daniel Herzog, Vodafone

Daniel Herzog, @danfooo@danfooo

Vodafone Internet Services - London and Düsseldorf


Düsseldorf, Germany


SVG and Vodafone


SVG is #1 format for Scalable Graphics in Vodafone

SVG and Vodafone

•Data exchange

•Icon design

•Interaction design


A piece of History:

Bundesliga Player

SVG and Vodafone

Presented at SVG Open 2007



Big demand for graphical scalability

SVG and Vodafone

because of incredible handset fragmentation


Vodafone demands SVG

support for these handsets.

SVG and Vodafone


How is that going to be usable?

SVG and Vodafone


Vodafone Widgets


Widgets in the W3C sense.

w3.org/TR/widgets/

Vodafone Widgets


Packed HTML with all resources.

CSS, JavaScript, Bitmaps, SVG

And whatever else.

Inside one zip with some extra instructions.

Vodafone Widgets


Vodafone Widgets

Downloaded once.

To fetch only the actual data everytime.

But updatable like an (iPhone) App.


Vodafone Widgets

Widgets are Apps.

Because to a customer they look and

feel and smell like Apps.


Vodafone Widgets

But they are made with web-technologies.


Vodafone Widgets

•OS

•Device types

•Screensizes

•Resolutions / pixel densities

Made for multiple


Vodafone Widgets

•Application character

•Potentially even more multi-platform

then the web.

•Because it can work offline.


Available on S60 phones for VF

customers.

Accessible from the home screen.

Vodafone Widgets

Out of the box or as OTA download.


Client made by Opera.

SVG support pretty good

Partial Tiny 1.2, as in Opera mobile

Vodafone Widgets


Vodafone Widgets

And on the new

Vodafone 360 H1 device.

Coming pre-christmas

to EU markets.

More: bit.ly/1e1JV6

http://bit.ly/1e1JV6

http://bit.ly/1e1JV6


Vodafone Widgets

Widget engine done by

Samsung, Webkit based.


Vodafone Widgets

How to make one?

360 Tutorial: bit.ly/10x59lInfo in the betavine Widget Zone: bit.ly/7P0y

http://bit.ly/10x59l

http://bit.ly/10x59l

http://bit.ly/7P0y

http://bit.ly/7P0y


Vodafone Widgets

Why make one?

Huge contests, win up to 100k €: bit.ly/Qv7DM

http://bit.ly/Qv7DM

http://bit.ly/Qv7DM


Using SVG in Vodafone Widgets



SVG as background image

•Perfect for rounded corners

•Proportionally adapting



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



SVG in fullscreen

•Mostly for simple 2d games

•or UIs that don‘t need text-flow or CSS

layout features.


Why is SVG so important for Widgets?



Resolutions are overly fragmented.

In terms of screen-size

and pixel resolution.

= in pixel density (ppi)



Multi-resolution as an advantage of Web-Technology

24inch Desktop, Full-HD'ish (94ppi)

Nokia N95 (153ppi)

Nokia 6710 classic (181ppi)

Nokia N97 (210ppi)

Nokia N97 Mini (230ppi)

Samsung H1 (267ppi)



Widget Engines should not run at 96ppi.

If they can know better.

VF widgets run on the correct resolution.



SVG can therefor be brought to dynamic sizes.

Via CSS.

@media all and (min-resolution: 200dpi){ body {font-size: 22px}}

.mySVGButton {width: 1em;}


Bottom line

•Lots of nice ways to use SVG

•Lots of good reasons to do it


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.


Questions

Daniel Herzog, Vodafone