H1 Porting
Workshop
1
October 8, 2009
Donnerstag, 15. Oktober 2009

Port my widget
you
rw
idg
et
2
Donnerstag, 15. Oktober 2009

Introduction
• Who?
• Stephane Boulanger
• Stefan Kolb
• What?
• tips & tricks
• help you port
• get feedback
3
Donnerstag, 15. Oktober 2009

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

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)
doSomething();
node.addEventListener("click", function(){...}, false);
catchy(doSomething());
node.addEventListener("click", catchy(function(){...}), false);
Donnerstag, 15. Oktober 2009

Cross platform - problems
Resizing Scaling
Donnerstag, 15. Oktober 2009

• config.xml defines height+width
• different screen sizes
• modes (docked, extended)
• adapt to actual screen size
Resizing
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>
body, html {
width: 100%;
height: 100%;
}
• let the device do the scaling
• resize on the desktop
Donnerstag, 15. Oktober 2009

Resizing
1. window.resizeTo()
2. auto-scale
Donnerstag, 15. Oktober 2009

Scaling
Donnerstag, 15. Oktober 2009

0.7mm - 1cm
• fingers hardly scale
• make your widget scale
• don't use pixels!
• use relative sizes
Scaling
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

understand
PPI
DPI Scaling
Donnerstag, 15. Oktober 2009

166dpi - Nokia E52-1
232dpi
Nokia 5800 XpressMusic
265dpi - Samsung H1
Scaling
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
fontsize in mm
line in pixel
padding in em
touchable height in mm
SVG 25%
Donnerstag, 15. Oktober 2009

Porting your Widget to H1 - Steps to take
Donnerstag, 15. Oktober 2009

Thanks!
Any Questions?
Donnerstag, 15. Oktober 2009