Successfully reported this slideshow.
Your SlideShare is downloading. ×

Workshop Fo Wa

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
JavaME UI - JMDF 2007
JavaME UI - JMDF 2007
Loading in …3
×

Check these out next

1 of 22 Ad

More Related Content

Similar to Workshop Fo Wa (20)

Advertisement

Recently uploaded (20)

Workshop Fo Wa

  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

×