Building RIA's from the Prespective of the Finger Tip
-
Upload
renaun-erickson -
Category
Technology
-
view
1.187 -
download
1
description
Transcript of Building RIA's from the Prespective of the Finger Tip
![Page 1: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/1.jpg)
Building RIAs from the Perspective of the Finger Tip
Renaun EricksonPlatform Evangelist
![Page 2: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/2.jpg)
o Who Am I?
Renaun Erickson
Adobe Systems 3 years – Platform Evangelist (recently)
Flex/Flash and Web Application Developer (since Flex 1.5)
Enjoy Custom Components and Frameworks
o Why a Finger Tip?
![Page 3: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/3.jpg)
o The Physical Size of Devices
o The Difference Between DPI and PPI
o How Large is a Finger Tip
o Scaling Relative to PPI
o Layout Helpers for Large Content
o Assumptions of High PPI
![Page 4: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/4.jpg)
Nexus One: 800x480 254 (3.7’ Screen)Droid Incredible: 800x480 252 PPI (3.7’ Screen)
Droid: 854x480 265 PPI
Device Resolution PPI Physical Size
Nexus One 800x480 254 3.7’
Droid Incredible 800x480 254 3.7’
Droid 854x480 265 3.7’
Droid X 854x480 240 4.3’
iPhone 3GS and lower
480x320 163 3.5’
iPhone 4 960x640 326 3.5’
iPad 1024x768 132 9.7’
Nvidia Prototype 1024x600 160 7.4’
![Page 5: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/5.jpg)
![Page 6: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/6.jpg)
1153x813
![Page 7: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/7.jpg)
Dots Per Inch (DPI)
Pixels Per Inch (PPI)
o Windows DPI is set to 96o Mac DPI is set to 72o Desktop’s Typically don’t factor in Monitor’s physical dimension, scaling then happens for you.o DPI is highly used with Printerso Desktop’s Capabilities.screenDPI is always Win/Mac value
o Real Term that factors Pixels (screen resolution) relative to Physical Sizeo Non-Desktop OS’s Capabilities.screenDPI is the correct PPI
![Page 8: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/8.jpg)
Finger Tip SizeHow large to make a button?How large should text be to be readable?
![Page 9: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/9.jpg)
What’s Your Devices Size in Finger Tip
Finger Tip Size for Nexus One ~ 8 x 5 Finger Tips
![Page 10: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/10.jpg)
Which Way To Scale – Picking a Baseline PPI
o Scaling down causes layout artifacts.
o Consider layout constraints with up to 1/2 scaling.
o Scaling up causes pixilation.
o Create larger layout/pictures and scale down.
![Page 11: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/11.jpg)
Nexus One as a Baseline PPI
Device Resolution
PPI PPI / 254
Nexus One 800x480 254 100%
Droid 854x480 265 104.3%
iPhone 3GS and lower
480x320 163 64.17%
iPhone 4 960x640 326 128.3%
iPad 1024x768 132 51.96%
Nvidia Prototype 1024x600 160 62.99%
o My Finger:o 100px x 100px Buttono 10cm x 10cm Physical Dimension
![Page 12: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/12.jpg)
Scaling the Application to a Relative PPI
![Page 13: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/13.jpg)
Layout Helpers
o Checks if scaled components fit in physical screen, if not:
o PhysicalSizeUtil provides pan/move of component
o (Future Idea) PhysicalSizeUtil provides auto pan/move for spark Form
o As the user fills out FormItems it will center on the next item for them
o Opt in to layout helpers and style scaling.
o PhysicalSizeUtil meant to allow for flexibility.
![Page 14: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/14.jpg)
Assumptions with 254 PPI as Baseline
o 100px x 100px for Finger Tip Size
o 24 Font Size
o Embed Fonts (Both for Scaling and OS issues)
o Images at higher resolutions.
o Layout applications with Constraints.
o Lower PPI just look worse then higher PPI, beware of comparing to closely.
![Page 15: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/15.jpg)
Code & Demos
![Page 16: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/16.jpg)
Q/A
Twitter: @renaunBlog: http://renaun.comEmail: [email protected]
Flash Player 10.1 Desktop and Android – http://www.adobe.com/go/getflash/AIR for Android - http://labs.adobe.com/technologies/air2/android/
![Page 17: Building RIA's from the Prespective of the Finger Tip](https://reader035.fdocuments.in/reader035/viewer/2022070314/554ca6a9b4c905f0178b56a6/html5/thumbnails/17.jpg)