#fowa09 workshop session on Mobile Widgets

1. Mobile Widgets
Presented by Jochen Cichon @dh1jc
30 September 2009
1 Mobile Widgets
22 September 2009 v0.1

2. Contents
1. Mobile Applications
2. Features
3. View Modes
4. Resize
5. Layout
6. Failsafe
2 Mobile Widgets
22 September 2009 v0.1

3. Mobile Applications 1/3
Classic Mobile Applications
• Programming Language C++; Java; C#
• Pro
– Performance
– Device Api's
– Security Model
• Con
– Low (No) portability
– High learning curve
– Layout (complicated)
3 Mobile Widgets
22 September 2009 v0.1

4. Mobile Applications 2/3
Browser “Applications”
• Programming Language Javascript; HTML; SVG; WML
• Pro
– Web technology
– Low learning curve
– Device API's
– Easy to Layout
• Con
– No device API's
– Performance
– No offline content
– Security Model (Server side)
– Connection / latency
4 Mobile Widgets
22 September 2009 v0.1

5. Mobile Applications 3/3
Mobile Widgets
• Programming Language Javascript; HTML; SVG; ZIP
• Pro
– Web technology
– Low learning curve
– Portable
– Easy to Layout
– Offine content store
– One Package
• Con
– No device API's (yet)
– Performance (yet)
– Security Model (yet)
5 Mobile Widgets
22 September 2009 v0.1

6. Features
• One Package for installation
• Multiple instances of a widget
• Different view modes e.g. active icon
• Web Technologies
– HTML; CSS2/3; Javascript; Media Queries
– SVG; Canvas; image formats (png, jpg, gif)
– XSLT; DOM3
• Cross domain xmlHttpRequests
• Content store (content / credentials...)
• Cross Platform (Linux, Windows, Mac, S60 mobiles, LiMo, ...)
6 Mobile Widgets
22 September 2009 v0.1

7. View Modes
• Icon (not a real mode)
• Active Icon / Docked mode
• Extended / Floating mode
• Widget mode
• Application mode
W3C not yet final with mode specicification
http://dev.w3.org/2006/waf/widgets-wm/Overview.src.html
7 Mobile Widgets
22 September 2009 v0.1

8. View Modes in Detail 1/3
Example Icon vs. Active Icon (Docked)
• Limited size
• Content updateable
• No interaction
Icon Mode Docked Mode
8 Mobile Widgets
22 September 2009 v0.1

9. View Modes in Detail 2/3
Example Active Icon vs. Extended / Floating Mode
• Greater size than icon / docked mode
• Content updateable
• No interaction
Docked Mode Floating Mode
9 Mobile Widgets
22 September 2009 v0.1

10. View Modes in Detail 3/3
Example Application / Widget Mode
• Chrome / Non-Chrome
• Default actions (minimize, close) / self made actions
Application Mode Widget Mode
10 Mobile Widgets
22 September 2009 v0.1

11. View Modes Coding 1/3
JS Code example
function myMode() {
if (widget.widgetMode === “docked”) {
… // e.g. set update interval to different value
}
}
// Register the EventListener
widget.addEventListener(“widgetmodechange”, myMode, false);
11 Mobile Widgets
22 September 2009 v0.1

12. View Modes Coding 2/3
Media Queries
<div id=”dockedView”> … </div>
<div id=”widgetView”> … </div>
#dockedView { display: none; }
@media all and (-o-widget-mode:docked) {
#dockedView { display: block }
#widgetView { display: none }
}
12 Mobile Widgets
22 September 2009 v0.1

13. View Modes Coding 3/3
Media Queries
<img id=”closeButton” src=”img/close.png”/>
#closeButton{ display: none }
@media all and (-o-widget-mode:widget) {
#closeButton { display: block }
}
13 Mobile Widgets
22 September 2009 v0.1

14. Resize
Why to resize?
• Different view modes
• Different screen sizes on mobiles (width/height)
• Portrait / Landscape (maybe in different modes)
Do the math yourself...
14 Mobile Widgets
22 September 2009 v0.1

15. Resize
JS Resize
function myResize () {
if (widget.widgetMode !== “widget”)
window.resizeTo(screen.availWidth, screen.availHeight);
}
// register ResolutionChange Event
widget.addEventListener(“resolution”, myResize, false);
// call initially
myResize();
15 Mobile Widgets
22 September 2009 v0.1

16. Layout
Trouble in detail
• DPI Values
– Screen reports 96dpi (which is mostly wrong!)
– Handsets with same screen dimensions have different dpi values
• Nokia N96, 2.8inch display 240x320 = 142ppi
• Nokia 5800 music, 3.2inch display 640x360 = 229 ppi
• Fonts may become unreadable
• Touch buttons are maybe too small / large
16 Mobile Widgets
22 September 2009 v0.1

17. Layout
Fonts
• Use media queries to set base font size
body { font-size: 16px }
@media all and (min-resolution: 200dpi) {
body { font-size: 22px }
}
• reference base font size
#header { font-size: 1.2em }
div { font-size: .8em }
17 Mobile Widgets
22 September 2009 v0.1

18. Layout
Images
• You don't want to scale up
– Even downscaling may look bad
• Use appropriate image format (jpg, png, gif, svg)
• Use SVG e.g. for Logo / Splash screen
– If possible (svg restriction based on renderer)
• When you don't know your image
img {
max-width: 95%;
}
18 Mobile Widgets
22 September 2009 v0.1

19. Layout
UI-Elements
• UI-Elements are often made of images
• Suddenly 100px very small on high ppi-displays
– Use absolute size e.g. “ 1cm “ for button on touch devices
#closeButton { width: 64px }
@media all and (-o-touch) {
#closeButton { width: 1cm }
}
• Adapt to different ppi with different images
19 Mobile Widgets
22 September 2009 v0.1

20. Layout
UI-Elements
• Use SVG and stay scalable
– Remember to have a fallback pixel-image
<object type=”image/svg+xml” data=”busy.svg”>
<img src=”fallback-busy.png”/>
</object>
• Don't forget that an “onClick” is given to the underlying SVG!
20 Mobile Widgets
22 September 2009 v0.1

21. Failsafe
• Use try - catch blocks
try {
...
} catch (err) {
// React on error
widget.showNotification (“Can't update content”);
}
• use timeout for XHR requests
21 Mobile Widgets
22 September 2009 v0.1

22. Thank you
22 Mobile Widgets
22 September 2009 v0.1