SVG Open 2009: SVG In Vodafone Widgets

1,519 views
1,368 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,519
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SVG Open 2009: SVG In Vodafone Widgets

  1. 1. SVG in Vodafone Widgets Daniel Herzog,Vodafone @danfooo
  2. 2. Vodafone Internet Services - London and Düsseldorf @danfooo Daniel Herzog, @danfooo
  3. 3. Düsseldorf, Germany @danfooo Daniel Herzog, @danfooo
  4. 4. SVG and Vodafone @danfooo Daniel Herzog, @danfooo
  5. 5. SVG and Vodafone SVG is #1 format for Scalable Graphics in Vodafone •Data exchange •Icon design •Interaction design @danfooo Daniel Herzog, @danfooo
  6. 6. SVG and Vodafone A piece of History: Bundesliga Player Presented at SVG Open 2007 @danfooo Daniel Herzog, @danfooo
  7. 7. @danfooo Daniel Herzog, @danfooo
  8. 8. SVG and Vodafone Big demand for graphical scalability because of incredible handset fragmentation @danfooo Daniel Herzog, @danfooo
  9. 9. SVG and Vodafone Vodafone demands SVG support for these handsets. @danfooo Daniel Herzog, @danfooo
  10. 10. SVG and Vodafone How is that going to be usable? @danfooo Daniel Herzog, @danfooo
  11. 11. Vodafone Widgets @danfooo Daniel Herzog, @danfooo
  12. 12. Vodafone Widgets Widgets in the W3C sense. w3.org/TR/widgets/ @danfooo Daniel Herzog, @danfooo
  13. 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. 14. Vodafone Widgets Downloaded once. To fetch only the actual data everytime. But updatable like an (iPhone) App. @danfooo Daniel Herzog, @danfooo
  15. 15. Vodafone Widgets Widgets are Apps. Because to a customer they look and feel and smell like Apps. @danfooo Daniel Herzog, @danfooo
  16. 16. Vodafone Widgets But they are made with web-technologies. @danfooo Daniel Herzog, @danfooo
  17. 17. Vodafone Widgets Made for multiple •OS •Device types •Screensizes •Resolutions / pixel densities @danfooo Daniel Herzog, @danfooo
  18. 18. Vodafone Widgets •Application character •Potentially even more multi-platform then the web. •Because it can work offline. @danfooo Daniel Herzog, @danfooo
  19. 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. 20. Vodafone Widgets Client made by Opera. SVG support pretty good Partial Tiny 1.2, as in Opera mobile @danfooo Daniel Herzog, @danfooo
  21. 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. 22. Vodafone Widgets Widget engine done by Samsung, Webkit based. @danfooo Daniel Herzog, @danfooo
  23. 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. 24. Vodafone Widgets Why make one? Huge contests, win up to 100k €: bit.ly/Qv7DM @danfooo Daniel Herzog, @danfooo
  25. 25. Using SVG in Vodafone Widgets @danfooo Daniel Herzog, @danfooo
  26. 26. Using SVG in Vodafone Widgets SVG as background image •Perfect for rounded corners •Proportionally adapting @danfooo Daniel Herzog, @danfooo
  27. 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. 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. 29. Why is SVG so important for Widgets? @danfooo Daniel Herzog, @danfooo
  30. 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. 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. 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. 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. 34. Bottom line •Lots of nice ways to use SVG •Lots of good reasons to do it @danfooo Daniel Herzog, @danfooo
  35. 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. 36. Questions @danfooo Daniel Herzog,Vodafone Daniel Herzog, @danfooo

×