Vodafone 360 - Live Porting

1,031 views

Published on

Port-a-thons are sessions in different countries to support developer to port their widgets to Vodafone 360 apps.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vodafone 360 - Live Porting

  1. 1. H1 Porting Workshop 1 October 8, 2009 Donnerstag, 15. Oktober 2009
  2. 2. Port my widget you rw idg et 2 Donnerstag, 15. Oktober 2009
  3. 3. Introduction • Who? • Stephane Boulanger • Stefan Kolb • What? • tips & tricks • help you port • get feedback 3 Donnerstag, 15. Oktober 2009
  4. 4. Building cross platform widgets • is an effort! • W3C Widgets are standardized, yes but you are first movers! • learning about mobile • learn about the use cases • think cross platform • abstract and use frameworks/toolkits Donnerstag, 15. Oktober 2009
  5. 5. Use cases Donnerstag, 15. Oktober 2009
  6. 6. Mobile gotchas • bad tool support • (almost) no debugging tools • long turn around times • platform specialties Donnerstag, 15. Oktober 2009
  7. 7. Mobile gotchas - best practices • test on desktop Donnerstag, 15. Oktober 2009
  8. 8. Mobile gotchas - best practices • test on desktop • test on desktop - Opera • test on desktop - better tool support • try-catch a lot! • Don‘t be afraid of alert / widget.showNotification • Opera Dragonfly • simplify your CSS Donnerstag, 15. Oktober 2009
  9. 9. Try-catch function catchy(fn){ return function(){ try{ fn.apply(fn, arguments); }catch(e){ var err = []; for (var key in e){ if (!key || typeof key=="function") continue; err.push(key + ": " + e[key]); } alert(err.join("n"); } } } Donnerstag, 15. Oktober 2009
  10. 10. Try-catch function catchy(fn){ return function(){ try{ fn.apply(fn, arguments); }catch(e){ var err = []; for (var key in e){ if (!key || typeof key=="function") continue; err.push(key + ": " + e[key]); } alert(err.join("n"); } } } Donnerstag, 15. Oktober 2009
  11. 11. Try catch (2) doSomething(); node.addEventListener("click", function(){...}, false); catchy(doSomething()); node.addEventListener("click", catchy(function(){...}), false); Donnerstag, 15. Oktober 2009
  12. 12. Cross platform - problems Resizing Scaling Donnerstag, 15. Oktober 2009
  13. 13. • config.xml defines height+width • different screen sizes • modes (docked, extended) • adapt to actual screen size Resizing Donnerstag, 15. Oktober 2009
  14. 14. Resizing (1) var h = screen.availHeight; var w = screen.availWidth; window.resizeTo(h, w) Donnerstag, 15. Oktober 2009
  15. 15. Resizing (2) <widget> ! <width>1000</width> ! <height>1200</height> </widget> body, html { width: 100%; height: 100%; } • let the device do the scaling • resize on the desktop Donnerstag, 15. Oktober 2009
  16. 16. Resizing 1. window.resizeTo() 2. auto-scale Donnerstag, 15. Oktober 2009
  17. 17. Scaling Donnerstag, 15. Oktober 2009
  18. 18. 0.7mm - 1cm • fingers hardly scale • make your widget scale • don't use pixels! • use relative sizes Scaling Donnerstag, 15. Oktober 2009
  19. 19. Scaling (1) h1 { font-size: 16px; font-size: 1.5cm; } h2 { font-size: 1.2cm; } button, .touchable { font-size: 1cm; } Donnerstag, 15. Oktober 2009
  20. 20. understand PPI DPI Scaling Donnerstag, 15. Oktober 2009
  21. 21. 166dpi - Nokia E52-1 232dpi Nokia 5800 XpressMusic 265dpi - Samsung H1 Scaling Donnerstag, 15. Oktober 2009
  22. 22. Scaling (2) body, html { font-size: 16px; } @media all and (min-resolution: 150dpi) { body, html { font-size: 20px; } } @media all and (min-resolution: 200dpi) { body, html { font-size: 25px; } } Donnerstag, 15. Oktober 2009
  23. 23. @media all and (min-resolution: 250dpi) { body, html { font-size: 30px; } } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } Donnerstag, 15. Oktober 2009
  24. 24. Scaling 1. cm, mm, inch, ... 2. media queries + em, % Donnerstag, 15. Oktober 2009
  25. 25. Putting it all together fontsize in mm line in pixel padding in em touchable height in mm SVG 25% Donnerstag, 15. Oktober 2009
  26. 26. Porting your Widget to H1 - Steps to take Donnerstag, 15. Oktober 2009
  27. 27. Thanks! Any Questions? Donnerstag, 15. Oktober 2009

×