SVG Open 2009: SVG In Vodafone Widgets
Post on 19-May-2015
1280 Views
Preview:
DESCRIPTION
Transcript
@danfooo
SVG in Vodafone Widgets
Daniel Herzog, Vodafone
Daniel Herzog, @danfooo@danfooo
Vodafone Internet Services - London and Düsseldorf
Daniel Herzog, @danfooo@danfooo
Düsseldorf, Germany
Daniel Herzog, @danfooo@danfooo
SVG and Vodafone
Daniel Herzog, @danfooo@danfooo
SVG is #1 format for Scalable Graphics in Vodafone
SVG and Vodafone
•Data exchange
•Icon design
•Interaction design
Daniel Herzog, @danfooo@danfooo
A piece of History:
Bundesliga Player
SVG and Vodafone
Presented at SVG Open 2007
Daniel Herzog, @danfooo@danfooo
Daniel Herzog, @danfooo@danfooo
Big demand for graphical scalability
SVG and Vodafone
because of incredible handset fragmentation
Daniel Herzog, @danfooo@danfooo
Vodafone demands SVG
support for these handsets.
SVG and Vodafone
Daniel Herzog, @danfooo@danfooo
How is that going to be usable?
SVG and Vodafone
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
Daniel Herzog, @danfooo@danfooo
Widgets in the W3C sense.
w3.org/TR/widgets/
Vodafone Widgets
Daniel Herzog, @danfooo@danfooo
Packed HTML with all resources.
CSS, JavaScript, Bitmaps, SVG
And whatever else.
Inside one zip with some extra instructions.
Vodafone Widgets
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
Downloaded once.
To fetch only the actual data everytime.
But updatable like an (iPhone) App.
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
Widgets are Apps.
Because to a customer they look and
feel and smell like Apps.
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
But they are made with web-technologies.
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
•OS
•Device types
•Screensizes
•Resolutions / pixel densities
Made for multiple
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
•Application character
•Potentially even more multi-platform
then the web.
•Because it can work offline.
Daniel Herzog, @danfooo@danfooo
Available on S60 phones for VF
customers.
Accessible from the home screen.
Vodafone Widgets
Out of the box or as OTA download.
Daniel Herzog, @danfooo@danfooo
Client made by Opera.
SVG support pretty good
Partial Tiny 1.2, as in Opera mobile
Vodafone Widgets
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
And on the new
Vodafone 360 H1 device.
Coming pre-christmas
to EU markets.
More: bit.ly/1e1JV6
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
Widget engine done by
Samsung, Webkit based.
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
How to make one?
360 Tutorial: bit.ly/10x59lInfo in the betavine Widget Zone: bit.ly/7P0y
Daniel Herzog, @danfooo@danfooo
Vodafone Widgets
Why make one?
Huge contests, win up to 100k €: bit.ly/Qv7DM
Daniel Herzog, @danfooo@danfooo
Using SVG in Vodafone Widgets
Daniel Herzog, @danfooo@danfooo
Using SVG in Vodafone Widgets
SVG as background image
•Perfect for rounded corners
•Proportionally adapting
Daniel Herzog, @danfooo@danfooo
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
Daniel Herzog, @danfooo@danfooo
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.
Daniel Herzog, @danfooo@danfooo
Why is SVG so important for Widgets?
Daniel Herzog, @danfooo@danfooo
Why is SVG so important for Widgets?
Resolutions are overly fragmented.
In terms of screen-size
and pixel resolution.
= in pixel density (ppi)
Daniel Herzog, @danfooo@danfooo
Why is SVG so important for Widgets?
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)
Daniel Herzog, @danfooo@danfooo
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.
Daniel Herzog, @danfooo@danfooo
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;}
Daniel Herzog, @danfooo@danfooo
Bottom line
•Lots of nice ways to use SVG
•Lots of good reasons to do it
Daniel Herzog, @danfooo@danfooo
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.
Daniel Herzog, @danfooo@danfooo
Questions
Daniel Herzog, Vodafone
top related