H1 Porting

             Workshop




      1
             October 8, 2009


Donnerstag, 15. Oktober 2009
Port my widget




                               you
                                  rw
                               ...
Introduction

          • Who?
          • Stephane Boulanger

          • Stefan Kolb
                                 • ...
Building cross platform widgets



      • is an effort!
      • W3C Widgets are standardized, yes
        but you are fir...
Use cases




Donnerstag, 15. Oktober 2009
Mobile gotchas




     • bad tool support
     • (almost) no debugging tools

     • long turn around times
     • platfo...
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 to...
Try-catch


                      function catchy(fn){
                        return function(){
                        ...
Try-catch


                      function catchy(fn){
                        return function(){
                        ...
Try catch (2)




   doSomething();

   node.addEventListener("click", function(){...}, false);




   catchy(doSomething(...
Cross platform - problems




                       Resizing   Scaling

Donnerstag, 15. Oktober 2009
• config.xml defines height+width
                               • different screen sizes

                               ...
Resizing (1)



                               var h = screen.availHeight;
                               var w = screen.a...
Resizing (2)
                               <widget>
                               !     <width>1000</width>
            ...
Resizing
                               1. window.resizeTo()
                               2. auto-scale




Donnerstag, ...
Scaling


Donnerstag, 15. Oktober 2009
0.7mm - 1cm




                               • fingers hardly scale
                               • make your widget sc...
Scaling (1)
                    h1 {
                      font-size: 16px;
                      font-size: 1.5cm;
      ...
understand




                               PPI
                               DPI          Scaling


Donnerstag, 15. Ok...
166dpi - Nokia E52-1




         232dpi
         Nokia 5800 XpressMusic



                               265dpi - Samsun...
Scaling (2)
      body, html {
        font-size: 16px;
      }

       @media all and (min-resolution: 150dpi) {
        ...
@media all and (min-resolution: 250dpi) {
        body, html {
          font-size: 30px;
        }
      }

      h1 {
  ...
Scaling

       1. cm, mm, inch, ...
       2. media queries + em, %




Donnerstag, 15. Oktober 2009
Putting it all together

                                fontsize in mm


                                      line in pi...
Porting your Widget to H1 - Steps to take




Donnerstag, 15. Oktober 2009
Thanks!



      Any Questions?




Donnerstag, 15. Oktober 2009
Upcoming SlideShare
Loading in...5
×

Vodafone 360 - Live Porting

887

Published on

Port-a-thons are sessions in different countries to support developer to port their widgets to Vodafone 360 apps.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
887
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vodafone 360 - Live Porting

  1. 1. H1 Porting Workshop 1 October 8, 2009 Donnerstag, 15. Oktober 2009
  2. 2. Port my widget you rw idg et 2 Donnerstag, 15. Oktober 2009
  3. 3. Introduction • Who? • Stephane Boulanger • Stefan Kolb • What? • tips & tricks • help you port • get feedback 3 Donnerstag, 15. Oktober 2009
  4. 4. 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
  5. 5. Use cases Donnerstag, 15. Oktober 2009
  6. 6. Mobile gotchas • bad tool support • (almost) no debugging tools • long turn around times • platform specialties Donnerstag, 15. Oktober 2009
  7. 7. Mobile gotchas - best practices • test on desktop Donnerstag, 15. Oktober 2009
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Try catch (2) doSomething(); node.addEventListener("click", function(){...}, false); catchy(doSomething()); node.addEventListener("click", catchy(function(){...}), false); Donnerstag, 15. Oktober 2009
  12. 12. Cross platform - problems Resizing Scaling Donnerstag, 15. Oktober 2009
  13. 13. • config.xml defines height+width • different screen sizes • modes (docked, extended) • adapt to actual screen size Resizing Donnerstag, 15. Oktober 2009
  14. 14. Resizing (1) var h = screen.availHeight; var w = screen.availWidth; window.resizeTo(h, w) Donnerstag, 15. Oktober 2009
  15. 15. 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
  16. 16. Resizing 1. window.resizeTo() 2. auto-scale Donnerstag, 15. Oktober 2009
  17. 17. Scaling Donnerstag, 15. Oktober 2009
  18. 18. 0.7mm - 1cm • fingers hardly scale • make your widget scale • don't use pixels! • use relative sizes Scaling Donnerstag, 15. Oktober 2009
  19. 19. Scaling (1) h1 { font-size: 16px; font-size: 1.5cm; } h2 { font-size: 1.2cm; } button, .touchable { font-size: 1cm; } Donnerstag, 15. Oktober 2009
  20. 20. understand PPI DPI Scaling Donnerstag, 15. Oktober 2009
  21. 21. 166dpi - Nokia E52-1 232dpi Nokia 5800 XpressMusic 265dpi - Samsung H1 Scaling Donnerstag, 15. Oktober 2009
  22. 22. 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
  23. 23. @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
  24. 24. Scaling 1. cm, mm, inch, ... 2. media queries + em, % Donnerstag, 15. Oktober 2009
  25. 25. Putting it all together fontsize in mm line in pixel padding in em touchable height in mm SVG 25% Donnerstag, 15. Oktober 2009
  26. 26. Porting your Widget to H1 - Steps to take Donnerstag, 15. Oktober 2009
  27. 27. Thanks! Any Questions? Donnerstag, 15. Oktober 2009
  1. A particular slide catching your eye?

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

×