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

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