Building RIA's from the Prespective of the Finger Tip

1,378 views
1,326 views

Published on

Its inevitable that rich internet application will be developed for all the multi touch devices with various form factors. In this presentation I will demonstrate an approach to use the physical size of the finger tip as the center point for design. From the perspective of the finger tip all devices are the same, basically it has a screen and the finger doesn't change size regardless of the pixels per inch of the screen. I will be showcasing Flex 4 code that makes development for RIA's across the various form factors possible.

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

No Downloads
Views
Total views
1,378
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • QUESTIONS:How many know of AIR or Flash Player?How many have built a AIR application?How many ppl have heard of Flex?
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • Where the flash platform comes in, built to do this
  • I don’t have the code yet, but plan to show the demo’s and maybe the code.
  • I don’t have the code yet, but plan to show the demo’s and maybe the code.
  • Building RIA's from the Prespective of the Finger Tip

    1. 1. Building RIAs from the Perspective of the Finger Tip<br />Renaun Erickson<br />Platform Evangelist<br />
    2. 2. <ul><li> Who Am I?</li></ul>Renaun Erickson<br />Adobe Systems 3 years – Platform Evangelist (recently)<br />Flex/Flash and Web Application Developer (since Flex 1.5)<br />Enjoy Custom Components and Frameworks<br /><ul><li> Why a Finger Tip?</li></li></ul><li><ul><li> The Physical Size of Devices
    3. 3. The Difference Between DPI and PPI
    4. 4. How Large is a Finger Tip
    5. 5. Scaling Relative to PPI
    6. 6. Layout Helpers for Large Content
    7. 7. Assumptions of High PPI</li></li></ul><li>Nexus One: 800x480 254 (3.7’ Screen)<br />Droid Incredible: 800x480 252 PPI (3.7’ Screen)<br />Droid: 854x480 265 PPI<br />
    8. 8.
    9. 9. 1153x813<br />
    10. 10. Dots Per Inch (DPI)<br /><ul><li> Windows DPI is set to 96
    11. 11. Mac DPI is set to 72
    12. 12. Desktop’s Typically don’t factor in Monitor’s physical dimension, scaling then happens for you.
    13. 13. DPI is highly used with Printers
    14. 14. Desktop’s Capabilities.screenDPI is always Win/Mac value</li></ul>PixelsPer Inch (PPI)<br /><ul><li> Real Term that factors Pixels (screen resolution) relative to Physical Size
    15. 15. Non-Desktop OS’sCapabilities.screenDPI is the correct PPI</li></li></ul><li>Finger Tip Size<br />How large to make a button?<br />How large should text be to be readable?<br />
    16. 16. What’s Your Devices Size in Finger Tip<br />Finger Tip Size for Nexus One <br />~ 8 x 5 Finger Tips<br />
    17. 17. Which Way To Scale – Picking a Baseline PPI<br /><ul><li> Scaling down causes layoutartifacts.
    18. 18. Consider layout constraints with up to 1/2 scaling.
    19. 19. Scaling up causes pixilation.
    20. 20. Create larger layout/pictures and scale down.</li></li></ul><li>Nexus One as a Baseline PPI<br /><ul><li> My Finger:
    21. 21. 100px x 100px Button
    22. 22. 10cm x 10cm Physical Dimension</li></li></ul><li>Scaling the Application to a Relative PPI<br />
    23. 23. Layout Helpers<br /><ul><li> Checks if scaled components fit in physical screen, if not:
    24. 24. PhysicalSizeUtil provides pan/move of component
    25. 25. (Future Idea) PhysicalSizeUtilprovides auto pan/move for spark Form
    26. 26. As the user fills out FormItems it will center on the next item for them
    27. 27. Opt in to layout helpers and style scaling.
    28. 28. PhysicalSizeUtilmeant to allow for flexibility.</li></li></ul><li>Assumptions with 254 PPI as Baseline<br /><ul><li> 100px x 100px for Finger Tip Size
    29. 29. 24 Font Size
    30. 30. Embed Fonts (Both for Scaling and OS issues)
    31. 31. Images at higher resolutions.
    32. 32. Layout applications with Constraints.
    33. 33. Lower PPI just look worse then higher PPI, beware of comparing to closely.</li></li></ul><li>Code & Demos<br />
    34. 34. Q/A<br />Flash Player 10.1 Desktop and Android – http://www.adobe.com/go/getflash/<br />AIR for Android - http://labs.adobe.com/technologies/air2/android/<br />Twitter: @renaun<br />Blog: http://renaun.com<br />Email: renaun@adobe.com<br />

    ×