Embed Size (px)
DESCRIPTION
Port-a-thons are sessions in different countries to support developer to port their widgets to Vodafone 360 apps.
Citation preview
1
October 8, 2009
H1 Porting
Workshop
Donnerstag, 15. Oktober 2009
2
Port my widget
your widget
Donnerstag, 15. Oktober 2009
3
Introduction
• What?
• tips & tricks
• help you port
• get feedback
• Who?
• Stephane Boulanger
• Stefan Kolb
Donnerstag, 15. Oktober 2009
Building cross platform widgets
• is an effort!
• W3C Widgets are standardized, yesbut you are first movers!
• learning about mobile
• learn about the use cases
• think cross platform
• abstract and use frameworks/toolkits
Donnerstag, 15. Oktober 2009
Use cases
Donnerstag, 15. Oktober 2009
Mobile gotchas
• bad tool support
• (almost) no debugging tools
• long turn around times
• platform specialties
Donnerstag, 15. Oktober 2009
Mobile gotchas - best practices
• test on desktop
Donnerstag, 15. Oktober 2009
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
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
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
Try catch (2)
catchy(doSomething());
node.addEventListener("click", catchy(function(){...}), false);
doSomething();
node.addEventListener("click", function(){...}, false);
Donnerstag, 15. Oktober 2009
Cross platform - problems
Resizing Scaling
Donnerstag, 15. Oktober 2009
Resizing
• config.xml defines height+width
• different screen sizes
• modes (docked, extended)
• adapt to actual screen size
Donnerstag, 15. Oktober 2009
Resizing (1)
var h = screen.availHeight;var w = screen.availWidth;window.resizeTo(h, w)
Donnerstag, 15. Oktober 2009
Resizing (2)
<widget>! <width>1000</width>! <height>1200</height></widget>
• let the device do the scaling
• resize on the desktop
body, html { width: 100%; height: 100%;}
Donnerstag, 15. Oktober 2009
Resizing
1. window.resizeTo()
2. auto-scale
Donnerstag, 15. Oktober 2009
Scaling
Donnerstag, 15. Oktober 2009
Scaling
0.7mm - 1cm
• fingers hardly scale
• make your widget scale
• don't use pixels!
• use relative sizes
Donnerstag, 15. Oktober 2009
Scaling (1)
h1 { font-size: 16px; font-size: 1.5cm;}
h2 { font-size: 1.2cm;}
button, .touchable { font-size: 1cm;}
Donnerstag, 15. Oktober 2009
Scaling
PPIDPI
understand
Donnerstag, 15. Oktober 2009
Scaling
166dpi - Nokia E52-1
232dpiNokia 5800 XpressMusic
265dpi - Samsung H1
Donnerstag, 15. Oktober 2009
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
@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
Scaling
1. cm, mm, inch, ...
2. media queries + em, %
Donnerstag, 15. Oktober 2009
Putting it all together
touchable height in mm
line in pixel
fontsize in mm
padding in em
25%SVG
Donnerstag, 15. Oktober 2009
Porting your Widget to H1 - Steps to take
Donnerstag, 15. Oktober 2009
Thanks!
Any Questions?
Donnerstag, 15. Oktober 2009
