Vodafone 360 - Live Porting

  • 856 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
856
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
49
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. H1 Porting Workshop 1 October 8, 2009 Donnerstag, 15. Oktober 2009
  • 2. Port my widget you rw idg et 2 Donnerstag, 15. Oktober 2009
  • 3. Introduction • Who? • Stephane Boulanger • Stefan Kolb • What? • tips & tricks • help you port • get feedback 3 Donnerstag, 15. Oktober 2009
  • 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. Use cases Donnerstag, 15. Oktober 2009
  • 6. Mobile gotchas • bad tool support • (almost) no debugging tools • long turn around times • platform specialties Donnerstag, 15. Oktober 2009
  • 7. Mobile gotchas - best practices • test on desktop Donnerstag, 15. Oktober 2009
  • 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. 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. 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. Try catch (2) doSomething(); node.addEventListener("click", function(){...}, false); catchy(doSomething()); node.addEventListener("click", catchy(function(){...}), false); Donnerstag, 15. Oktober 2009
  • 12. Cross platform - problems Resizing Scaling Donnerstag, 15. Oktober 2009
  • 13. • config.xml defines height+width • different screen sizes • modes (docked, extended) • adapt to actual screen size Resizing Donnerstag, 15. Oktober 2009
  • 14. Resizing (1) var h = screen.availHeight; var w = screen.availWidth; window.resizeTo(h, w) Donnerstag, 15. Oktober 2009
  • 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. Resizing 1. window.resizeTo() 2. auto-scale Donnerstag, 15. Oktober 2009
  • 17. Scaling Donnerstag, 15. Oktober 2009
  • 18. 0.7mm - 1cm • fingers hardly scale • make your widget scale • don't use pixels! • use relative sizes Scaling Donnerstag, 15. Oktober 2009
  • 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. understand PPI DPI Scaling Donnerstag, 15. Oktober 2009
  • 21. 166dpi - Nokia E52-1 232dpi Nokia 5800 XpressMusic 265dpi - Samsung H1 Scaling Donnerstag, 15. Oktober 2009
  • 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. @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. Scaling 1. cm, mm, inch, ... 2. media queries + em, % Donnerstag, 15. Oktober 2009
  • 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. Porting your Widget to H1 - Steps to take Donnerstag, 15. Oktober 2009
  • 27. Thanks! Any Questions? Donnerstag, 15. Oktober 2009