Logo Computerhoy.com

¿Por qué esta imagen creada con código puro vuelve locos a los navegadores?

Francine, imagen de código puro

Francine es una bella, y al mismo tiempo inquietante metáfora del mundo dominado por las fake news y la manipulación de la información en el que vivimos. Un mundo en el que Internet pone y quita gobiernos, y siembra la discordia entre pueblos y países.

Francine es una imagen informática de una mujer retratada con el estilo de los cuadros pictóricos franceses del siglo XVIII, creada por la artista y programadora Diana Smith. Pero Francine no es un dibujo, ni una fotografía. No está dibujada a mano, ni ha sido creada en una tablet con un lápiz óptico, o en el ordenador con un programa de diseño gráfico.

Francine, imagen en código HTML puro
Diana Smith

Es una imagen creada con código puro y duro. Es solo programación. Y está volviendo locos a los navegadores, especialmente los más antiguos.

Ha sido creada usando únicamente el editor de texto Atom y las Herramientas de Desarrollador de Chrome, así que en este navegador se ve correctamente, como en la imagen anterior.

Pero si abres la página web que contiene el código con Internet Explorer 11 y Windows 7, verás esto:

Francine, imagen en código HTML
Guillermo Esteves

Si lo ves en una versión antigua del navegador Opera, Francine se masculiniza:

Francine, imagen en código puro
David Zhou

En la versión actual para móvil de Safari, extrañamente los ojos de Francine se entristecen:

Francine, imagen en código puro
Lindsay Joy

La versión más surrealista la obtenemos en un Mac, con el viejo Internet Explorer 5.0:

Francine, imagen en código puro

¿Por qué Francine se ve tan diferente según el navegador y el sistema operativo que uses?

¿Qué lenguajes de programación deberías saber en 2018?

Está realizada con código HTML y hojas de estilo en cascada (CSS). Miles de líneas de código HTML que Diana Smith ha tardado quince días en escribir. Este código le dice al navegador lo que tiene que hacer: "pon un punto aquí", "pon un círculo aquí", "rellena esta zona con este color". El problema es que cada navegador, incluso diferentes versiones de un mismo navegador, interpreta estas órdenes a su manera. Unos se ajustan más al estándar, y otros menos. Las versiones antiguas leen código moderno que no entienden y lo interpretan como pueden, produciendo resultados muy diferentes.

Como decíamos al principio, es una inquietante metáfora de lo que es Internet hoy en día. Una perfecta explicación de lo que significan las fake news, las noticias manipuladas, la posverdad. Un mismo código, una misma información, se muestra de forma muy diferente según quien transmita esa información. Y lo más peligroso es que nosotros, los destinatarios, no podemos saber cuál es la imagen (la información) original. Si tienes un navegador antiguo que muestra a Francine como en la última foto... ¿Cómo sabes que esa no es la imagen original que creó el autor?

¿Cómo podemos protegernos de la información manipulada en Internet? Esa es la gran pregunta que se están haciendo ahora mismo Facebook, Google, Twitter y otros gigantes de Internet. Por ahora, nadie tiene la respuesta...

Descubre más sobre , autor/a de este artículo.

Conoce cómo trabajamos en Computerhoy.