My Art Dream Team

A list of my favorite artists (alive) who deserve all our love.

I like hundreds of other artists, but they are the ones whom I love most.

Loish

Tumblr · Facebook · deviantART · Web

imageimageimage

Adara Sánchez

Tumblr · Facebook · deviantART · Web

imageimageimage

agnes-cecile

Tumblr · Facebook · deviantART · Web

imageimageimage

Anna Dittmann

Tumblr · Facebook · deviantART · Web

imageimageimage

Aquasixio

Tumblr · Facebook · deviantART · Web

imageimageimage

Bastien Lecouffe Deharme

Tumblr · Facebook · deviantART · Web

imageimageimage

Camilla d’Errico

Facebook · deviantART · Web

imageimageimage

Charmaine Olivia

Tumblr · Facebook · Web

imageimageimage

Chiara Bautista

Facebook · Web

imageimageimage

Dave Malan

Tumblr · Facebook · Web

imageimageimage

Goro Fujita

Facebook · Web

imageimageimage

Jeremy Mann

Facebook · Web

imageimageimage

JungGi Kim

Facebook · Web

imageimageimage

Kate Zambrano

Facebook · Web

imageimageimage

Kyrie

Facebook · deviantART

imageimageimage

Marta Nael

Facebook · deviantART

imageimageimage

miss led

Facebook · Web

imageimageimage

Ryohei Hase

Facebook · Web

imageimageimage

SeongJin Kim

Facebook

imageimageimage

stuntkid

Facebook · Web

imageimageimage

Crysse

Tumblr

imageimageimage

Falla del sistema

Todo da vueltas en mi cabeza… Me siento aturdido.

Escucho una voz. Una voz algo rasposa que no logro entender.

—¡Ey, amigo, al fin despertó! —Esa voz rasposa nuevamente— Si no despertaba pronto íbamos a empezar a levantar apuestas.

¿Me habla a mí? Sé que no lo conozco, pero siento que ya lo había visto antes.

—Estuvo tres días dormido, mi amigo. —Me sigue hablando con una sonrisa enorme, mientras me palmea el hombro, pero ya dejé de escucharlo. Sólo estoy mirando. Esto parece un hospital. Estoy en una camilla. ¿Por qué estoy en una camilla? El techo tiene mucha humedad. ¿Qué hago en un hospital con humedad en el techo? El tipo de la voz rasposa parece un doctor. Él siguió hablando bastante, pero acabo de notar que ya salió de la habitación. Habrá dicho cosas importantes, me pareció escuchar algo sobre un accidente. Debería estar en mi casa. Debería buscar mi ropa y salir de acá.

Nadie me paró, nadie me reconoció. Yo tampoco reconocí a nadie. Viéndolo desde afuera, sé que nunca había estado en este hospital. ¿Debería quedarme si tuve un accidente? No sé por qué salí. Todo me sigue dando vueltas en la cabeza, siento que esto ya lo viví muchas veces. Sí, de pronto siento que estuve toda la vida en este hospital, es una sensación muy extraña. Mejor me voy a mi casa…

¡Gracias a Dios paró alguien! Hace una hora que estoy caminando sobre la autopista.

—¿Hasta dónde va? —pregunta con una sonrisa cálida, y el brillo en sus ojos casi se siente familiar— Puedo alcanzarlo hasta la ciudad.

No paró de contar chistes desde que me subí, creo que me llevó para tener con quien hablar y no quedarse dormido, aunque no soy la mejor compañía para hablar en este momento. Por suerte, me comenta que en dos minutos más pasaremos frente al hospital comunal y justo después estará el acceso a la ciudad, que no tardaremos más de 4 o 5 minutos.

—¡Mire ese hospital! —Señalo sorprendido. No es parecido, es idéntico. El conductor se sobresalta, creo que se estaba dormitando, intenta mirar a donde señalo, pero ya es tarde— Es exactamente igual al…

Dicen que cuando estás a punto de morir, ves la película tu vida en un instante. Yo no veo esa película, pero este instante sí está durando toda una vida. Puedo ver lentamente cada fragmento de vidrio en el aire, puedo contar cada vuelta que estamos dando, puedo ver que el otro auto, el que venía de frente, se encamina a un árbol. Aún no paramos de dar vueltas, pero siento que todo se apaga, la luz se atenúa, los sonidos desaparecen. Sé que no puede ser el final. No estoy viendo mi vida en un instante, pero siento que este instante dura toda una vida…

Todo da vueltas en mi cabeza… Me siento aturdido.

Escucho una voz. Una voz algo rasposa que no logro entender.

—¡Ey, amigo, al fin despertó! —Esa voz rasposa nuevamente— Si no despertaba pronto íbamos a empezar a levantar apuestas.

Guía de diseño web responsivo

Están quedando atrás los tiempos de múltiples diseños según el dispositivo en que se consuma.

El mismo sitio web puede ser visto desde la pantalla de un BlackBerry Curve (2.4 pulgadas, con 320 x 240 pixels), de un Samsung Galaxy Note (5.3 pulgadas, con 1280 x 800 pixels), del nuevo iMac (27 pulgadas, con 2560 x 1440 pixels), de un MacBook Pro Retina (13.3 pulgadas, con 2560 x 1600 pixels), o un televisor Samsung (65 pulgadas, con 1920 x 1080).

Como verán, en el mercado existen hoy tamaños y resoluciones de pantallas muy variados. ¿Cómo se puede hacer para mantener un diseño web uniforme entre todos los dispositivos, conservando la mejor experiencia de usuario? Recurriendo al “responsive web design”.

El “responsive web design”, o “diseño web responsivo”, es un conjunto de técnicas para adaptar un mismo diseño a una infinidad (bueno, no tanto :P) de pantallas en las que se pueda reproducir.

Esta guía pretende abarcar, de la manera más clara y acotada posible, los conceptos, técnicas y herramientas fundamentales que deben conocer para crear un gran diseño web responsivo.

Unidades de medida

Antes que nada, si vamos a meternos en responsive design, necesitamos conocer muy bien las distintas unidades de medida, y cómo y cuándo usar cada una.

Recuerden que todas las medidas pueden expresarse con un máximo de tres decimales, y no importa que en Sudamérica y Europa los decimales se separen por comas, los estándares web salen de USA, así que, como allá, los vamos a separar por puntos.

Unidades absolutas

Las unidades absolutas son independientes de la pantalla, de la ventana del navegador y de cualquier otro elemento en la estructura de la página. No requieren calcularse en base a ningún otro valor de referencia. Estos son:

  • cm - centímetros
  • mm - milímetros
  • in - pulgadas
  • pt - puntos (equivale a 1/72 pulgadas)
  • pc - picas (equivale a 12 puntos)

Unidades relativas:

Las unidades relativas son aquellas que se calculan tomando algún otro valor como referencia. Estas son:

  • em - relativo al tamaño de letra (equivale al ancho de la letra “M”, según el tamaño de letra que se use, este valor es directamente el tamaño de la fuente)
  • ex - Similar al em, pero equivale a la altura de la letra “x”.
  • ch - Similar al em y al ex, pero equivalente al ancho del “0” (cero).
  • rem - igual a em, pero siempre corresponde al tamaño de fuente del elemento root.
  • px - relativo a la resolución de la pantalla
  • % - puede ser relativo al tamaño de letra, o al tamaño del elemento padre, dependiendo de su uso.
  • vw - relativo al ancho del viewport (corresponde al 1% de su ancho).
  • vh - similar a vw, pero relativo a la altura del viewport.
  • vmin - corresponde al más chico de los valores, entre vw y vh.
  • vmax - corresponde al más grande de los valores, entre vw y vh.

Todas las unidades de medida pueden mezclarse dentro del mismo documento sin inconvenientes, pero hay que saber utilizarlas.

De las unidades absolutas, hay preferencia por los puntos (pt) como medidas para la vista de impresión, y las demás se utilizan de manera indistinta, más que nada basándose en la unidad de medida con la que el diseñador se sienta más cómodo. La principal ventaja de estas, es que un elemento con una medida absoluta se verá exactamente del mismo tamaño, sin importar dónde lo veamos. Podríamos poner una regla sobre la pantalla y medir que, efectivamente, tal div mide la cantidad de pulgadas que queríamos.

En el diseño web responsivo, no vamos a hacer mucho uso de estas unidades, ya que nos interesa la elasticidad del diseño, exactamente lo contrario a lo que nos ofrecen estas unidades. Las unidades relativas, en cambio, son las que más nos interesa en este tipo de diseño.

Antes de seguir, tengo que hacer una aclaración en cuanto a los pixels: la W3 los describe como unidades absolutas, ya que corresponden a 1/96 pulgadas, o lo que es lo mismo, 0.75pt. Sin embargo, esta medida sólo es correcta en equipos con 96dpi. Por lo tanto, para mí, los pixels siguen siendo unidades relativas. Pero, al estar justamente relacionados con la resolución de pantalla, preferiría ignorarlos todo lo que sea posible dentro de este tipo de diseño.

Uso de unidades relativas

El uso de las unidades relativas es muy sencillo, pero requiere conocer algunos detalles sobre el comportamiento de cada una:

%

Los porcentajes (%) son los más fáciles de utilizar. Corresponde al porcentaje de la medida del elemento dentro del que se encuentre (el elemento padre). Veamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
<style>
body { padding: 2em 1em; margin: 0; }
#wrap { width: 90%; margin: 0 auto; }
article { width: 70%; background: #b2b; float: left; }
aside { width: 30%; float: right; background: #c33; color: #f5f5f5; }
</style>
<body> <div id=”wrap”> <article>Article</article> <aside>Aside</aside> </div> </body>
</html>

Aquí tenemos que la suma del ancho de article (70%), más aside (30%) nos da un 100%. Pero ese 100% es el 100% de su elemento padre, que es el #wrap. Pero el 100% del #wrap, mide el 90% de su elemento padre, el body. El body sí ocupa el 100% de la ventana de navegación, pero aún así, tiene un padding de 1em tanto a la izquierda como a la derecha, lo que deja un espacio para el elemento hijo del (100% - 2em).

Cuando se utilizan porcentajes para definir el tamaño de fuente, funciona de la misma manera. Es decir, el 100% de una fuente equivale al 100% de la fuente en el elemento padre.

Esto puede marear un poco al principio, pero es muy fácil acostumbrarse.

em/ex/ch

Las unidades em, ex y ch funcionan de la misma manera (con la diferencia de que cada una toma sus referencias de elementos distintos), por lo que voy a explicar sólo el em, y esto será totalmente válido también para las otras.

Primero, no debemos olvidar en ningún momento, que em está directamente relacionado con el tamaño de fuente, por lo tanto, en distintos elementos de la página, 1em podría tener medidas distintas. Pero hay una peculiaridad que podemos ver mejor en este ejemplo:

<!DOCTYPE html>
<html>
<style>
body { font-size: 16px; line-height: 2em; }
#wrap { font: 20px; width: 25em; }
</style>
<body> <div id=”wrap”> </div> </body>
</html>

Como podemos ver, es fácil saber cuánto mide en pixels el ancho del #wrap, simplemente multiplicando 20 (el tamaño de la fuente, en px) * 25 (el ancho del #wrap, en em). Ese es fácil. Ahora, ¿cuánto medirá el line-height dentro del #wrap?

La propiedad line-height se hereda a los elementos hijos, a menos que se indique lo contrario, por lo tanto el #wrap toma los valores heredados. Pero acá viene la cuestión: los valores expresados en em, se heredan ya calculados en pixels. Si vemos, en el body se declara “line-height: 2em”, entonces sería de esperar que, en #wrap tengamos, por herencia, “line-height: 2em”, luego lo multiplicaríamos por el tamaño de fuente (20px) y nos daría que el line-height de #wrap mide 40px, pero no. ¿Por qué? Porque dentro de body, el tamaño de la fuente es 16px, que si lo multiplicamos por los 2em del line-height, nos da que el line-height mide 32px. Esos 32px son los que se heredan, así que, sin importar el tamaño de fuente declarado en #wrap, siempre va tener el mismo valor para el line-height en este ejemplo.

rem

Es la más sencilla de utilizar. Vendría a ser el root-em. Es decir, el tamaño de fuente del root. Si no se declara un valor, norlamente corresponde a 16px. Aquí no hay que hacer cálculos, ni tener en cuenta las herencias.

vw/vh

Las dos funcionan de la misma manera, pero una es relativa al ancho del viewport (la ventana del navegador) y la otra, a su altura. Un elemento que mida de ancho 100vw, siempre ocupará todo el ancho del navegador, incluso aunque se redimensione la ventana.

vmin/vmax

Si comparamos los valores entre vw y vh (estos valores variarán según el tamaño de la ventana), el vmin tomará el valor más bajo, y el vmax el más alto.

En otras palabras, si la ventana del navegador se encuentra apaisada (más ancha que alta), vmin va a valer lo mismo que vh y vmax lo mismo que vw. Si, por el contrario, la ventana estuviera en modo portaretrato (más alta que ancha), el vmin va a tomar el valor de vw y el vmax, el de vh. Esto es especialmente útil en diseño para dispositivos móviles, en los que rotamos el aparato y cambiamos de una vista de portaretrato a otra apaisada.

Medidas relativas

Una de las maravillas que nos trajo CSS3, es la posibilidad de usar expresiones matemáticas para calcular los valores que necesitemos.

El uso de calc() es muy sencillo, simplemente introducimos entre los paréntesis todas las operaciones (acepta sumas, restas, multiplicaciones y divisiones) necesarias para conseguir la medida que buscamos. Además, los cálculos pueden hacerse con todas las otras unidades de medida. Por ejemplo: “width: calc(100% - 5em);”.

Con calc() pueden conseguirse layouts mucho más precisos e inteligentes. Y no tiene problemas en combinar unidades absolutas con relativas. Podríamos conseguir que un div mida siempre el 50% del ancho más 200px, o cualquier otra medida que necesitáramos. Anteriormente (aún, porque esto sigue siendo muy nuevo), para conseguir ubicaciones muy específicas, había que jugar con los márgenes, paddings y anidamientos engorrosos de divs. Eso se acaba con calc().

Diseño fluido

El diseño web fluido se basa, principalmente, en representar las medidas como proporciones. De este modo, el diseño de la página se verá siempre proporcionalmente igual, sin importar el tamaño, o resolución, de la pantalla.

Para conseguir esto, normalmente se utiliza como medida principal, el porcentaje. El modo más sencillo de comenzar con un diseño fluido, es tomar un diseño fixed (el que tiene sus medidas estáticas, en pixels). Por ejemplo, tomaríamos un diseño pensado para un monitor de 1280px de ancho, que podría ser algo así:

<!DOCTYPE html>
<html>
<style>
body { margin: 0; }
#wrap { width: 1000px; margin: 0 auto; }
article { width: 700px; background: #b2b; float: left; }
aside { width: 300px; float: right; background: #c33; color: #f5f5f5; }
</style>
<body> <div id=”wrap”> <article>Article</article> <aside>Aside</aside> </div> </body>
</html>

¿Y qué haríamos con esto? Bueno, convertir las medidas estáticas en proporciones. Simplemente calculamos: 700 (medida de article) / 1000 (medida de #wrap) y nos da que “article” mide 0.7 (o 70%) lo que #wrap. Y así se haría con cada medida del diseño, hasta que conseguiríamos un resultado como el del ejemplo de recién, del uso de % en las medidas.

La principal ventaja de este tipo de diseños, es que sabemos que el layout se mantendrá igual en todo momento, sin importar el tamaño de la pantalla, sería como una imagen vectorial, que podríamos aumentar o reducir a la medida que queramos.

Y la principal desventaja, es que no cualquier diseño está pensado para que pueda verse igual en cualquier tamaño. Si convierten un diseño cualquiera en fluido, lo más probable es que, en pantallas muy grandes, parezca una versión estirada del original, y en pantallas muy chicas ya no pueda entenderse nada, porque en un iPhone me podría quedar una sección de texto, de apenas 2cm de ancho.

Layout elástico

El layout elástico es aquél que basa sus medidas en el tamaño de fuente que haya configurado el usuario. No se define ningún valor inicial para el texto, por lo que se mantiene el tamaño de letra que tenga el navegador del usuario, que pudo haberlo configurado a su gusto, o bien pudo dejar el tamaño por defecto.

Con esto conseguiremos un diseño que pueda verse muy bien en cualquier pantalla, ya sea que tengan una resolución enorme o muy baja, y será mucho más accesible para el usuario, pues siempre tendrá el tamaño de texto adecuado.

En estos diseños, evidentemente, se prefiere el em como unidad de medida, tanto para las medidas de los elementos, como de las distintas fuentes de letra (aunque para el font-size también pueden usarse %).

En el caso del layout elástico, también puede partirse de un diseño pensado en pixels, pero habrá que convertir esas medidas en em. Supongamos que tenemos un #header que mide 1200px de ancho, nos gusta cómo se ve así y queremos convertirlo a em. Bueno, buscamos el tamaño de las fuentes y tenemos que solamente está seteado 16px como font-size en el body, por lo que los elementos hijos heredaron la misma medida. Bueno, entonces sabemos que 16px es la medida de 1em. Ahora, para saber en em cuánto mide 1px, deberemos realizar la operación inversa: 1/16, y esto nos dará que 1px mide 0.0625em. Y por regla de 3 simple, llegamos rápidamente a que, para saber rápidamente cuánto mide en em nuestro #header, simplemente dividimos los 1200px del header, por los 16px del tamaño de fuente, y eso nos dará que nuestro #header de 1200px, puede convertirse en un #header de 75em.

Estos diseños nunca se verán estirados, porque siempre tendrán relación directa con el tamaño de fuente ideal para el dispositivo y según el gusto del usuario.

En dispositivos pequeños, el layout elástico resulta más efectivo que la técnica del diseño fluido.

Las técnicas se mezclan

No está de más recordarle a algunos, que estas técnicas (diseño fluido y layout elástico) pueden mezclarse entre sí. Esto se trata de conseguir el mejor diseño, no de estancarse en una técnica. Jueguen y prueben a su antojo todo lo que les parezca.

Media Queries

Las media queries están en auge, aunque existen desde hace largo rato. Se trata de consultas sobre el medio en el que se está reproduciendo la página en cuestión y, con esto, pueden definirse estilos CSS distintos para cada medio (tablet, televisor, impresora, etc.). Como en muchas otras cosas, CSS3 trajo mejoras también para las media queries, permitiendo consultar por resolución de pantalla, colores de esta, etc.

¿Cómo se usa? Así de fácil:

<style>
/* Nuestros estilos básicos */
@media screen and (min-width: 1024px) { /* CSS para 1024px o más de ancho */ }
@media screen and (min-width: 768px) and (max-width: 1023px) { /* CSS para entre 768px y 1023px de ancho */ }
@media screen and (max-width: 767px) { /* CSS para 767px de ancho, o menos */ }
@media all and (orientation:portrait), all and (max-width: 15cm) { /* CSS para orientación portaretratos y para 15cm o menos de ancho */ }
</style>

Con esto podríamos tener directamente una hoja de estilos distinta según dónde se vea la página. Pero si hiciéramos eso, estaríamos volviendo al tiempo de los dominios m.* y no queremos eso. Lo ideal es crear un layout que sea homogéneo en todos los equipos en los que se vea, y tratar de que el CSS principal pueda cubrir un buen diseño para el rango más amplio posible de pantallas, combinando las técnicas acá vistas, dejando las media queries para ajustes, sin que eso signifique todo un diseño nuevo.

Sólo les queda ir a jugar un poco con el CSS.

Querido Troll:

Anteayer recibí su carta. Debo decirle que la disfruté mucho y me arrancó más de una carcajada y no menos sonrisas. De lo leído en su misiva, discrepo de su argumento, desde luego, y le explicaré por qué: resulta que es usted un pelotudo,  y eso, mi amigo, es base suficiente para refutar cualquier postura que insista defender.

Lamento no darle más material que este para su fervorosa respuesta, pero prometo que pronto le daré el gusto.

Sin más, me despido y aguardo ansioso su respuesta, probablemente en alusión a mi argumento ad hominem.