Diseñando para android: Qué es la medida dp (breve apunte).

Desde luego diseñar aplicaciones para android supone un reto muy diferente al de iPhone. Y es que al hecho que supone implementar nuestro diseño en el limitado espacio de un smartphone hay que sumar la enorme diversidad de pantallas con las que cuenta este ecosistema.

Así toda pantalla cuenta con varias características:

  • el tamaño de la pantalla definido por su diagonal normalmente medido en pulgadas. Android agrupa las pantallas en: small, normal, large, extra-large (es decir, pequeño, normal, grande y extragrande).
  • la densidad de la pantalla es la cantidad de píxeles que hay en un área  dada medido en dpi (dots per inch). Android agrupa las densidades de pantalla en: low (ldpi), medium (mdpi), high (hdpi) y extra-high (xhdpi).
  • la resolución que es el número total de píxeles en pantalla.
  • Los píxeles independientes de la densidad (dp, es decir, Density-independent Pixels), que es una unidad abstracta que se basa en la densidad física de la pantalla. Esta unidad es equivalente a un píxel en una pantalla con una densidad de 160 dpi.

La conversión de dp a pixels es muy sencilla: px = dp * dpi / 160.

Así pues, cuando nos encontramos una pantalla de mayor densidad, se aumentan el número de píxels utilizados para dibujar 1dp según los dpi’s de la pantalla. Por otro lado, si la pantalla es de menor densidad, el número de píxeles utilizados para 1dp se reducirán.

La proporción, según la clasificación hecha anteriormente, para ajustar las imágenes  a las diferentes densidades de pantalla de los dispositivos, sigue una relación de escala de 3:4:6:8 (en iPhone la proporción es más fácil, 2:1). Es decir,…

  • Para ldpi (x0.75);
  • Para mdpi (nuestra medida base);
  • Para hdpi (x1.5);
  • Para xhdpi (x2.0)

De esta forma, a la hora de diseñar para Android siempre deberemos utilizar dp cuando definamos las dimensiones, las posiciones en la UI o tamaños de textos para asegurarnos que nuestro diseño se verá correctamente en todas las pantallas. Y usaremos la proporción dada para calcular los tamaños de imágenes que debemos proporcionar a los desarrolladores.

Más información:

Sobre el diseño Flat o lo chato del diseño

Es indiscutible, una nueva moda zarandea nuestro barco “diseñil” y muchos diseñadores aprestan su tabla de surf para subirse rápidos a la cresta de su ola. ¿Y qué es esto del “Flat Design”?

El estilo Flat es como decimos una nueva tendencia del diseño que apuesta hasta cierto grado por el minimalismo, la simplicidad y la legibilidad.

Así pues se caracteriza:

  • por un diseño carente de elementos tridimensionales, normalmente, sin sombras, biseles, gradientes u otras técnicas que ayuden a crear un efecto de profundidad.
  • Los colores son ligeramente desaturados y de escasa intensidad (véase por ejemplo Flatuicolors para conseguir esquemas o trabajar en modo HSL bajando saturación y luminosidad). Sus tonalidades recuerdan a los años 40 y 50. La paleta usada puede ser en base a un único tono o varios.
  • En cuanto a la tipografía, se trata de un punto clave. Se suele hacer uso de esquemas de dos fuentes emparejadas y muchas veces uno, primando la legibilidad, claridad y nitidez; tipografías muchas veces sobrias y no muy gruesas. Las más populares son “sans serif”, aunque no hay problema en usar otras fuentes con serifas.  Resulta por tanto obligado una buena atención al esquema de colores para que el texto resalte y sea legible bien, ya que no podremos ayudarnos de otros efectos como el sombreado.. en Designmodo hacen la siguientes sugerencias de fuentes: Lato (Google Fonts), Franchise (Font Squirrel), Junction (League of Moveable Type), Aller (Font Squirrel), Museo Slab (FontSpring), Telegrafico (Ficodfont), Gnuolane (FontSpring), ChunkFive (Font Squirrel), Lovelo (Font Fabric), Mojave (Behance).
  • Importancia del espacio en blanco, espacio entre los textos y otros elementos. Ello se debe en parte a que conociendo que la información podrá ser accesible desde dispositivos móviles, es necesario que los diversos elementos cuenten con el espaciado necesario para que el “dedo” pueda garantizar su pulsación.
  • El Flat Design es pues una respuesta que aboga por minimizar el esfuerzo y coste para acceder a la información, se apuesta por un estilo más formal. El uso de imágenes debe ser restrictivo, así incluso como los css sprites; se aboga por el uso de iconos en formato fuente. Se simplifican contenidos incluyendo igualmente los textos. Todo ello tiene también su “por qué” en el mayor uso de dispositivos móviles. Se evita la excesiva carga de la web en dichos aparatos; e igualmente teniendo en cuenta la gran disparidad de resoluciones quitamos de la ecuación el uso de imágenes para evitar problemas de pixelado o carga igualmente. Es la muerte del diseño basado en el “pixel perfect”, ya que con tantos tamaños y resoluciones de pantallas es imposible tener en cuenta todos los casos; es por ello que se simplifica el diseño para igualmente evitar este problema.

En cuanto a sus orígenes… no está claro quien fue el primero, porque seguramente no lo hubo o fue un proceso reactivo y contrapuesto al “skeuomorphic design” (o Esqueumorfismo), es decir, aquel en que se apuesta por la simulación, cuanto más real mejor, en la interfaz de cualquier elemento de la vida real (claro exponente de este hasta hace poco, Apple y muchas de sus apps para iOS, como digo hasta hace poco con iOS7 en que rompe esta tendencia). Leer a este respecto “La Era del Diseño Plano” de LayerVault.

En todo caso, muchos coinciden que fue Windows 8 con su interfaz Metro quien vino a popularizarlo; hecho que ha consumado Apple con su nuevo iOS7. Y resulta un poco ridícula la pretensión de algunos en intentar apropiarse de esta técnica (ver artículo al respecto en Minid.net)

¿Es el Flat Desing la panacea, la solución a todos los problemas de diseño? Pues no creo… recordemos que ahora mismo se trata de una moda. Una moda de la que veremos que es lo que se queda y qué es lo que se va. Pero resulta un poco ridículo criticar y desechar el esqueumorfismo del todo (a pesar que un uso desmedido del mismo de lugar a problemas problemas de confusión y rechazo por parte del usuario). Las ventajas más que incuestionables del Flat Design: interfaces más intuitivas, limpias y accesibles centradas en el mensaje… debería también llevarnos a responder a la pregunta de si su uso responde a los valores de la marca que queremos transmitir o si el usuario sabrá responder al mismo.

Así es que el Flat Design puede llevarnos a “igualarnos” con otras marcas por la simplicidad o el uso de un estilo diseño que no se adecua a lo que nuestra marca quiere transmitir. De igual manera el exceso a llevar a rajatabla todas las premisas del Flat Design nos llevaría a reducir a la mínima expresión palabras o elementos con el entendimiento que el usuario debería completar el mensaje… y ello puede o no que suceda dependiendo de lo familiarizado que este esté con dicho entorno tecnológico, lo que puede dar lugar a casos de frustración o incomprensión.

Al final como digo el diseño debe estar al servicio de la marca y el usuario, y el uso de una u otra técnica debe estar cuestionada por los objetivos que se hayan marcado.

Mostrar código HTML en una web

Hace poco en mi trabajo tuve que mostrar un bloque de código HTML en una web para que sirviera de ejemplo de uso a los usuarios que quisieran emplear el mismo. Lo que ocurre como muchos saben es que si escribimos el código tal cual el navegador interpretará el mismo con lo cual no se mostrará dicho código.

La solución viene por “escapar el código”. Normalmente esta técnica se usa para ocultar código HTML, javascript, etc. para que no pueda ser pirateado y copiado. Y aunque la técnica no es 100% segura al menos conseguirá alejar a algunos de los que lo intenten.

Pero como digo en nuestro caso, usaremos la técnica precisamente para lo contrario, es decir, poder mostrar el código a otros usuarios con fines didácticos. La solución es tan fácil como sustituir (básicamente) los caracteres ‘<’ y ‘>’ por los códigos ‘&lt;‘ y ‘&gt;‘ (sin las comillas) respectivamente.

El código que usemos lo encerraremos igualmente con la etiqueta <pre> para poder mostrar el código preformeteado y así nos respete los espacios y saltos de líneas introducidos.

De forma más o menos automática podemos usar webs como HTML Encoder que nos permitirá codificar de forma online el código. También existen otras posibilidades como Prettify que mediante javascript nos permitirá embellecer el código y numerarlo, es muy fácil de insertar. Existen obviamente otras soluciones como SyntaxHighlighter. Como siempre hay mas de un camino para llegar a la solución final.

 

Ingress el juego social de Google

Ingress, el nuevo juego de Google

No es nueva la noticia… desde hace unas semanas ya se comenta por la Red sobre Ingress, el juego que ha desarrollado Niantic Labs (una star-up dentro de Google). El juego, todavía en fase beta, nos adentra en un mundo de ciencia ficción en el que una nueva energía ha sido descubierta. Esta se halla sobre todo en lugares donde más frecuentemente puede pasear la gente. Además, se descubre que esta energía es capaz de manipular nuestros pensamientos y en ciertas ocasiones hasta controlar nuestra mente. En este panorama, surgen 2 grupos: The Enlightened (Los Iluminados) y The Resistance (La Resistencia); ambos enfrentados. Los primeros porque quieren proteger dicha energía y aprovecharla en avances e investigación; los segundos porque desean preservarla y no usarla para mantener la humanidad de las personas.

Read More»
Ready player one

Ready Player One

Hace poco un compi del trabajo me recomendó este libro. Supongo que era un hecho inevitable, “Ready Player One” se ha convertido en un best seller que está dando la vuelta al mundo cosechando un gran éxito.

“Ready Player One” es la primera novela del Ernest Cline. Publicada en 2011, los derechos de la misma ya fueron adquiridos por la Warner Bros para llevarlo a la pantalla grande… en 2010 antes incluso de su publicación.

Y es que este libro tenía todas las papeletas para conseguir asegurarse su éxito. Múltiples referencias a las décadas de los 70 y los 80 sobre todo a películas de culto como Star Wars, Indiana Jones o Regreso al Futuro; juegos de rol como Dungeons & Dragons; series mangas clásicas como Mazinger Z o Ultraman; videojuegos, grandes clásicos de mítica consola Atari y otros de 8 bits o 16 bits. Y por supuesto música.

Read More»
Page 1 of 181234510...Last »