Your SlideShare is downloading. ×
0
Mobile Widgets


    Presented by Jochen Cichon @dh1jc
    30 September 2009




1   Mobile Widgets
    22 September 2009 ...
Contents


            1. Mobile Applications

            2. Features

            3. View Modes

            4. Resize

...
Mobile Applications 1/3

Classic Mobile Applications
•   Programming Language C++; Java; C#
•   Pro
           –          ...
Mobile Applications 2/3

Browser “Applications”
•   Programming Language Javascript; HTML; SVG; WML
•   Pro
           –  ...
Mobile Applications 3/3

Mobile Widgets
•   Programming Language Javascript; HTML; SVG; ZIP
•   Pro
           –          ...
Features


•   One Package for installation
•   Multiple instances of a widget
•   Different view modes e.g. active icon
•...
View Modes


•   Icon (not a real mode)
•   Active Icon / Docked mode
•   Extended / Floating mode
•   Widget mode
•   App...
View Modes in Detail 1/3

Example Icon vs. Active Icon (Docked)
•   Limited size
•   Content updateable
•   No interaction...
View Modes in Detail 2/3

Example Active Icon vs. Extended / Floating Mode
•   Greater size than icon / docked mode
•   Co...
View Modes in Detail 3/3

Example Application / Widget Mode
•    Chrome / Non-Chrome
•    Default actions (minimize, close...
View Modes Coding 1/3

JS Code example


function myMode() {

     if (widget.widgetMode === “docked”) {

           …    ...
View Modes Coding 2/3

Media Queries


<div id=”dockedView”> … </div>

<div id=”widgetView”> … </div>



#dockedView { dis...
View Modes Coding 3/3

Media Queries


<img id=”closeButton” src=”img/close.png”/>



#closeButton{ display: none }

@medi...
Resize

Why to resize?
•      Different view modes
•      Different screen sizes on mobiles (width/height)
•      Portrait...
Resize

JS Resize
function myResize () {

     if (widget.widgetMode !== “widget”)

        window.resizeTo(screen.availWi...
Layout

Trouble in detail
•    DPI Values
             –          Screen reports 96dpi (which is mostly wrong!)
          ...
Layout

Fonts
•    Use media queries to set base font size
body { font-size: 16px }
@media all and (min-resolution: 200dpi...
Layout

Images
•    You don't want to scale up
             –          Even downscaling may look bad

•    Use appropriate...
Layout

UI-Elements
•    UI-Elements are often made of images
•    Suddenly 100px very small on high ppi-displays
        ...
Layout

UI-Elements
•    Use SVG and stay scalable
             –          Remember to have a fallback pixel-image

<objec...
Failsafe


•    Use try - catch blocks
try {

     ...

} catch (err) {

     // React on error

     widget.showNotificat...
Thank you




22   Mobile Widgets
     22 September 2009   v0.1
Upcoming SlideShare
Loading in...5
×

Workshop Fo Wa

974

Published on

#fowa09 workshop session on Mobile Widgets

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
974
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Workshop Fo Wa"

  1. 1. Mobile Widgets Presented by Jochen Cichon @dh1jc 30 September 2009 1 Mobile Widgets 22 September 2009 v0.1
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. Thank you 22 Mobile Widgets 22 September 2009 v0.1
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×