Download - Vodafone 360 - Live Porting
![Page 1: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/1.jpg)
1
October 8, 2009
H1 Porting
Workshop
Donnerstag, 15. Oktober 2009
![Page 2: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/2.jpg)
2
Port my widget
your widget
Donnerstag, 15. Oktober 2009
![Page 3: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/3.jpg)
3
Introduction
• What?
• tips & tricks
• help you port
• get feedback
• Who?
• Stephane Boulanger
• Stefan Kolb
Donnerstag, 15. Oktober 2009
![Page 4: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/4.jpg)
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
![Page 5: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/5.jpg)
Use cases
Donnerstag, 15. Oktober 2009
![Page 6: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/6.jpg)
Mobile gotchas
• bad tool support
• (almost) no debugging tools
• long turn around times
• platform specialties
Donnerstag, 15. Oktober 2009
![Page 7: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/7.jpg)
Mobile gotchas - best practices
• test on desktop
Donnerstag, 15. Oktober 2009
![Page 8: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/8.jpg)
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
![Page 9: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/9.jpg)
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
![Page 10: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/10.jpg)
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
![Page 11: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/11.jpg)
Try catch (2)
catchy(doSomething());
node.addEventListener("click", catchy(function(){...}), false);
doSomething();
node.addEventListener("click", function(){...}, false);
Donnerstag, 15. Oktober 2009
![Page 12: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/12.jpg)
Cross platform - problems
Resizing Scaling
Donnerstag, 15. Oktober 2009
![Page 13: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/13.jpg)
Resizing
• config.xml defines height+width
• different screen sizes
• modes (docked, extended)
• adapt to actual screen size
Donnerstag, 15. Oktober 2009
![Page 14: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/14.jpg)
Resizing (1)
var h = screen.availHeight;var w = screen.availWidth;window.resizeTo(h, w)
Donnerstag, 15. Oktober 2009
![Page 15: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/15.jpg)
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
![Page 16: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/16.jpg)
Resizing
1. window.resizeTo()
2. auto-scale
Donnerstag, 15. Oktober 2009
![Page 17: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/17.jpg)
Scaling
Donnerstag, 15. Oktober 2009
![Page 18: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/18.jpg)
Scaling
0.7mm - 1cm
• fingers hardly scale
• make your widget scale
• don't use pixels!
• use relative sizes
Donnerstag, 15. Oktober 2009
![Page 19: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/19.jpg)
Scaling (1)
h1 { font-size: 16px; font-size: 1.5cm;}
h2 { font-size: 1.2cm;}
button, .touchable { font-size: 1cm;}
Donnerstag, 15. Oktober 2009
![Page 20: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/20.jpg)
Scaling
PPIDPI
understand
Donnerstag, 15. Oktober 2009
![Page 21: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/21.jpg)
Scaling
166dpi - Nokia E52-1
232dpiNokia 5800 XpressMusic
265dpi - Samsung H1
Donnerstag, 15. Oktober 2009
![Page 22: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/22.jpg)
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
![Page 23: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/23.jpg)
@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
![Page 24: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/24.jpg)
Scaling
1. cm, mm, inch, ...
2. media queries + em, %
Donnerstag, 15. Oktober 2009
![Page 25: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/25.jpg)
Putting it all together
touchable height in mm
line in pixel
fontsize in mm
padding in em
25%SVG
Donnerstag, 15. Oktober 2009
![Page 26: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/26.jpg)
Porting your Widget to H1 - Steps to take
Donnerstag, 15. Oktober 2009
![Page 27: Vodafone 360 - Live Porting](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584ad7ed8b42a045c8b4efb/html5/thumbnails/27.jpg)
Thanks!
Any Questions?
Donnerstag, 15. Oktober 2009