Se han ido los días en que se debía asegurar que los gráficos fueran de 72dpi. Con una afluencia de dispositivos y tabletas listos para la web con nuevos tamaños de pantalla, resoluciones, y pixeles por pulgada. Debes asegurarte que los gráficos de tu aplicación móvil estén en el tamaño correcto a pesar del dispositivo.

Tamaños de pantalla

Empezando con el iPad de Apple, las tabletas han sido el dispositivo del año. Pero la gran pregunta fue si es una novedad o si tiene un valor duradero. Business Insider reporto que, entre los 500 dueños de un iPad a los cuales encuestaron, su uso se ha incrementado casi un 80% desde la primera compra. Por experiencia personal, puedo decirte que uso la mía cerca de una hora todos los días, tanto para leer como para jugar.

Especificaciones de la pantalla

Sabiendo que las tabletas han llegado para quedarse, como diseñas para estas así como para computadoras de escritorio y otros dispositivos móviles? La tabla 1 muestra las especificaciones de pantalla de las tabletas mas populares.

PC Dispositivos Móviles Tabletas
Tamaño de Pantalla 15" laptops
17" – 24" pc
4.3" Droid X
3.7" Droid 2
3.5" Apple iPhone 4
7" Samsung Galaxy Tab
7" BlackBerry PlayBook
9.7" Apple iPad
Resolución 1024 × 768 (20%)
1280 × 800 (higher 76%)
480 × 854 Droid 2
480 × 854 Droid X
640 × 960 iPhone 4
1024 × 600 Samsung Galaxy Tab
1024 × 600 BlackBerry PlayBook
1024 × 768 Apple iPad
Pixeles por pulgada 72 264 Droid 2
227 Droid X
326 ppi iPhone 4G
170 Samsung Galaxy Tab
170 BlackBerry PlayBook
133 Apple iPad
Platforma Windows
Mac
Android 2.2
iOS
Android 2.2
BlackBerry Tablet OS
iOS

Dimensionando gráficos apropiadamente

Cuando se llega a la PC, se podría hacer fácilmente un botón de 100 pixeles de ancho por 30 pixeles de alto y confiar en que el usuario podrá seleccionarlo con el cursor de su mouse, ya que los pixeles por pulgada (o puntos por pulgada) era 72. Cuando se llega a tabletas y dispositivos móviles, sin embargo, el cursor el reemplazado por un dedo y la resolución ya no es 72dpi. Ambos de estos factores hacen el tamaño del boton algo muy importante.

Nota: Asi como se trabaja con gráficos bitmap, se debe tener en cuenta que mientras sea mayor el DPI, el tamaño del archivo sera mayor.

Tamaño del dedo

Si tomas la medida del tamaño promedio de la huella dactilar de un adulto, es al menos un cuadrado de media pulgada. Ese es el porque los iconos de los dispositivos iOS son de este tamaño. Por lo tanto, ese es el tamaño del que quieres tu botón. Pero como te aseguras de que el botón sera de este tamaño en todos los dispositivos?

Pixeles por pulgada

Antes de comenzar a dimensionar el contenido, necesitas asegurarte de que nada se escale automáticamente:

Un vistazo rápido a estas especificaciones revela que los pixeles por pulgada (ppi) varían. Para asegurarse de que un botón sera siempre de 0.5", solo multiplica el ppi (también conocido como dpi) por 0.5. En ActionScript 3 esto seria de esta forma:

Pero realmente no quieres hacer este calculo para cada dispositivo. Por suerte, en Adobe Flash Professional puedes usar la propiedad Capabilities.screenDPI para determinar el DPI de la pantalla de cada dispositivo. Entonces solo multiplica eso por 0.5:

Aquí hay una versión del código para determinar el tamaño en pixeles de tu botón si conoces su tamaño en milímetros en vez de pulgadas:

Siempre prueba

Debido a que Android 2.2 no esta construido para tabletas –incluso aunque hay tabletas en el mercado (como la Samsung Galaxy Tab)– la propiedad Capabilities.screenDPI dará una resolución errónea de 240 cuando la resolución real es 170. Tendrás que realizar una revisión extra y cambiarla apropiadamente:

La siguiente figura muestra el botón dimensionado correctamente a través de tres dispositivos: Droid 2, iPad y Samsung Galaxy Tab.

Prueba en diferentes dispositivos

A donde ir desde aquí

Para encontrar más acerca de la propiedad Capabilities.screenDPI, revisa los siguientes artículos y referencias:

Así como se trabaja con gráficos bitmap, se debe tener en cuenta que mientras sea mayor el DPI, el tamaño del archivo sera mayor. Revisa estos vídeos para aprender más acerca de la optimización de gráficos:

También puedes aprender acerca de la optimización de gráficos utilizando una herramienta como Adobe Fireworks CS5:

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.