Discover the opportunities of developing Apps for Vodafone 360
Porting Workshop Tips Tricks Mobile Gotchas
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
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
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. 0.7mm - 1cm
• fingers hardly scale
• make your widget scale
• don't use pixels!
• use relative sizes
Scaling
Donnerstag, 15. Oktober 2009
19. understand
PPI
DPI Scaling
Donnerstag, 15. Oktober 2009
20. 166dpi - Nokia E52-1
232dpi
Nokia 5800 XpressMusic
265dpi - Samsung H1
Scaling
Donnerstag, 15. Oktober 2009
21. 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
22. @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
23. Scaling
1. cm, mm, inch, ...
2. media queries + em, %
Donnerstag, 15. Oktober 2009
24. Putting it all together
fontsize in mm
line in pixel
padding in em
touchable height in mm
SVG 25%
Donnerstag, 15. Oktober 2009