Esta artista crea imágenes con código que cambian según el navegador

Artículo publicado originalmente por VICE Estados Unidos.

Diana Smith crea imágenes web distintas a todo lo que has visto antes. Esto se debe a que cuando contemplas una de las creaciones de interfaz de usuario de la diseñadora, no estás viendo píxeles sacados de un servidor, sino un código en estado puro emitido al momento para el goce de tus ojos.

Hace unas semanas, Smith sacó a la luz "Pure CSS Francine", una laboriosa obra de dibujo en código al estilo de un cuadro de la década de 1800 que causó un enorme revuelo entre los desarrolladores web en Twitter. Para hacerla, Smith no usó una tablet, ni un ratón, ni siquiera un software de ilustración, sino que introdujo cada elemento a mano en código HTML y CSS, lenguajes informáticos que dicen a tu navegador cómo mostrar las páginas web. Esto significa que no hay ninguna “imagen” que puedas guardar como archivo cuando ves "Pure CSS Francine" en internet. Lo que sí puedes hacer es tomar una captura de pantalla o descargar el código y experimentar con él.

Esto es una captura de pantalla, por lo que siempre se verá igual en tu navegador

Esto convierte a "Pure CSS Francine" y las otras imágenes de Smith hechas en CSS ⎯como este increíble anuncio con una estética de mediados de siglo⎯ en piezas exclusivas de arte. Como se trata de un código que da instrucciones al navegador para que haga algo, el aspecto de la obra puede cambiar mucho según el navegador en donde la veas. Si la abres con Netscape Navigator, por ejemplo, Francine se transforma en una obra maestra del cubismo.

En una versión antigua de Opera… Bueno, no sé tanto de arte como para decir a qué se parece, pero el resultado es, sin duda, interesante.

"En su día, cuando se crearon esos navegadores, no tuvieron en cuenta que alguien crearía arte en CSS; internet era simplemente el lugar donde residía la información, y bastaba con tener unos cuantos rectángulos y tal vez algo de color", comentó Smith. "Cuando miras la imagen desde distintos navegadores, estás viendo la historia de internet y lo que se exigía de él en ese momento".

"Es como uno de esos anillos que muestran el estado de ánimo", señaló Smith en referencia a la naturaleza cambiante de Pure CSS Francine.

Las hojas de estilo en cascada (CSS por sus siglas en inglés) dan instrucciones a tu navegador sobre cómo mostrar una página web determinada, y resulta que si tienes el talento y la dedicación de Smith, puedes llegar a hacer cosas increíbles con este lenguaje. La creación de imágenes con CSS consiste en escribir código que muestra un objeto en un navegador y luego manipular su tamaño, sus bordes (para crear un círculo), el color, etc. Del mismo modo que con la ilustración vectorial se manipulan y unen formas para crear un diseño final, la creación de imágenes con CSS consiste en superponer y organizar esas formas. La gran diferencia es que con CSS no siempre puedes ver lo que estás haciendo a medida que lo creas, por lo que es un proceso de ensayo/error, dijo Smith.

"Primero tengo que escribir cada elemento y luego escribir una regla por cada uno de ellos. No es tan rápido ni fácil como cargarlo en el pincel", añadió Smith. "A veces eso me impide aplicar el nivel de detalle que me gustaría porque requiere más tiempo".

No hay pincel, ni cursor ni inputs sencillos. Solo un teclado. Es como el "modo superviviente" ultradifícil de un videojuego pero aplicado al arte digital. "Ni siquiera sé por qué soy así", dijo aludiendo a su afición por embarcarse en retos complicados.

Smith dijo que tarda unas dos semanas en crear una imagen con CSS, aunque asegura que su trabajo nunca se acaba, ya que el código puede retocarse hasta el infinito. Si bien es cierto que hay muchas imágenes hechas con CSS en internet, las de Smith destacan por su atención a la estética y su atractivo visual.

"Desde que empecé esto, me lo han preguntado muchas veces: ¿por qué? No hay ninguna razón aparte de por pasármela bien, porque sí y por amor al arte", me explicó Smith, y añadió que su única ventaja respecto a los demás es la de tener más tiempo libre.

Cuando quieres aprender código, mucha gente te dirá que te busques una API gratuita y crees un proyecto", continuó. "Tendría que ser lo mismo con CSS, porque en ese momento no estás trabajando para nadie, sino que simplemente estás experimentando con el código, pasándotelo bien y buscando nuevos desafíos. Y esto es una forma de hacerlo".

Jordan Pearson http://bit.ly/2XoP5Tc