Desarrollo Móvil

2. Diseño orientado al móvil

CopyLeft marzo 2012 - Hecho con ☺ por Jorge Epuñan

2.1. Resoluciones y Tamaños

Blackberry

BlackBerry Torch, BlackBerry Storm: 360x480 px
BlackBerry Bold: 480x320 px
BlackBerry Pearl: 240x260 px

(se ve simple, pero la realidad es otra:)

BlackBerry Pearl 8100: 240x260 px
BlackBerry Serie 7100: 240x260 px
BlackBerry Pearl 8220: 240x320 px
BlackBerry Curve 8300: 320x240 px
BlackBerry Curve 8900: 480x360 px
BlackBerry Serie 8800: 320x240 px
BlackBerry Serie 8700: 320x240 px
BlackBerry Bold 9000: 480x320 px
BlackBerry Storm 9500: 360x480 px

2.1. Resoluciones y Tamaños

Blackberry

(¡Gracias RIM!)

2.1. Resoluciones y Tamaños

iPhone

iPhone 1, 2, 3, 3GS: 320x480 px
iPhone 4, 4S: 640x960 px

2.1. Resoluciones y Tamaños

iPhone

2.1. Resoluciones y Tamaños

Android

QVGA (small): 240x320 px
WQVGA400, WQVGA432 (normal): 320x480 px
WVGA800, WVGA854 (large): 480x800 px
(extra large): 1024x600 px

(se ve simple, pero la realidad es otra:)

2.1. Resoluciones y Tamaños

Android

	Low density (120), ldpi	Medium density (160), mdpi	High density (240), hdpi	Extra high density (320), xhdpi
Small screen	QVGA (240x320)		480x640
Normal screen	WQVGA400 (240x400) WQVGA432 (240x432)	HVGA (320x480)	WVGA800 (480x800) WVGA854 (480x854) 600x1024	640x960
Large screen	WVGA800 (480x800) WVGA854 (480x854)	*WVGA800 (480x800) WVGA854* (480x854)** 600x1024
Extra Large screen	1024x600	WXGA (1280x800)^† 1024x768 1280x768	1536x1152 1920x1152 1920x1200	2048x1536 2560x1536 2560x1600
* To emulate this configuration, specify a custom density of 160 when creating an AVD that uses a WVGA800 or WVGA854 skin. ** To emulate this configuration, specify a custom density of 120 when creating an AVD that uses a WVGA800 or WVGA854 skin. † This skin is available with the Android 3.0 platform

2.2. Densidad de pixeles

PPI: pixeles por pulgada

Baja: 120ppi
Media: 160ppi
Alta: 240ppi
Extra Alta: 320ppi

DPI: puntos por pulgada (impresión)

Listado de dispositivos por densidad de pixeles

2.2. Densidad de pixeles

¿Cómo calcular el PPI?

Diagonal de la pantalla (en pulgadas) y la resolución en pixeles (ancho y alto)

2.2. Densidad de pixeles

Para la diagonal:

d_p: resolución diagonal (px)

w_p: ancho resolución (px)

h_p: alto resolución (px)

2.2. Densidad de pixeles

Para el PPI:

d_p: resolución diagonal (px)

d₁: diagonal resolución (pulgadas)

2.2. Densidad de pixeles

Ejemplo 1:

Para un dispositivo de 21.5 pulgadas con una resolución de 1920x1090

R: 102.68 PPI

[√(1920)²+(1090)²]/21.5

2.2. Densidad de pixeles

Ejemplo 2:

Para un netbook de 10.1 pulgadas con 1024x600px de resolución

R: 117,5 PPI

[√(1024)²+(600)²]/10.1

2.3. Qué considerar

CSS 1 y HTML 4.01 (transitional) para Blackberry OS6-.
CSS 2.1 / CSS 3 y HTML 5 para todo el resto.
Graceful degradation: <noscript>Este dispositivo necesita que tengas JavaScript habilitado</noscript>.
Monotasking: al llamar y enviar un e-mail se cerrará el browser.
Botones grandes.
Textos grandes y legibles.
Alto contraste.
Eventos hápticos y gestuales: ontouchstart, ontouchmove, ongesturestart, etc.
Multimedia: videos.

2.4. Qué evitar

Flash / Java
Upload de archivos
Popups
tipografías @font-face
:hover (CSS), mouseover - mouseout (JavaScript)
Archivos de más de 8 megas
Framesets

Desarrollo Móvil

2.1. Resoluciones y Tamaños

2.1. Resoluciones y Tamaños

Blackberry

2.1. Resoluciones y Tamaños

Blackberry

2.1. Resoluciones y Tamaños

iPhone

2.1. Resoluciones y Tamaños

iPhone

2.1. Resoluciones y Tamaños

Android

2.1. Resoluciones y Tamaños

Android

2.2. Densidad de pixeles

2.2. Densidad de pixeles

PPI: pixeles por pulgada

DPI: puntos por pulgada (impresión)

2.2. Densidad de pixeles

¿Cómo calcular el PPI?

2.2. Densidad de pixeles

Para la diagonal:

2.2. Densidad de pixeles

Para el PPI:

2.2. Densidad de pixeles

Ejemplo 1:

2.2. Densidad de pixeles

Ejemplo 2:

2.3. Qué considerar

2.3. Qué considerar

2.4. Qué evitar

2.4. Qué evitar

Finde la segunda parte

Fin
de la segunda parte